#gallery input:focus {
  outline: 0;
}
#gallery .darkBg {
  margin-left: 10px;
  margin-top: 32px;
  position: absolute;
  height: 380px;
  width: 380px;
  background-color: #000000;
}
#gallery .bg {
  position: absolute;
}
#gallery * {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
#gallery .imgDiv {
  overflow: hidden;
  height: 475px;
  width: 475px;
}
#gallery .imgDiv img {
  height: 475px;
  width: 475px;
}
#gallery .controlDiv > div > div {
  display: inline-block;
  position: relative;
  height: 27px;
}
#gallery .controlDiv input {
  transition: opacity 0.2s ease-in-out;
}
#gallery .controlDiv input.btn-top {
  position: absolute;
  left: 0;
}
#gallery .controlDiv input.btn-top:hover {
  opacity: 0;
}
#gallery ._360Viewer {
  margin-left: 10px;
  margin-top: 32px;
  position: absolute;
  transform-origin: 0 0;
  transform: scale(0.8);
}
#gallery ._360Viewer .controlDiv {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  text-align: right;
}
#gallery ._360Viewer .controlDiv .btnZoomIn {
  margin-left: 20px;
}
#gallery ._360Viewer .controlDiv .moveBtnDiv {
  transform: scale(0.8);
  transform-origin: 100% 0%;
}
#gallery ._360Viewer .controlDiv .moveBtnDiv .btnMoveLeft {
  top: 20px;
  left: 31px;
}
#gallery ._360Viewer .controlDiv .moveBtnDiv .btnMoveUp {
  left: 27px;
}
#gallery ._360Viewer .controlDiv .moveBtnDiv .btnMoveDown {
  top: 40px;
}
#gallery ._360Viewer .controlDiv .moveBtnDiv .btnMoveRight {
  top: 20px;
  right: 4px;
}
#gallery ._360Viewer .imgDiv {
  position: relative;
  overflow: hidden;
}
#gallery ._360Viewer .imgDiv img {
  position: absolute;
  left: 0px;
  top: 0px;
  transform-origin: 50px 50px;
  pointer-events: none;
  /* for IE 11 */
}
#gallery ._360Viewer .unvisibleWall {
  position: absolute;
  z-index: 2;
  height: 475px;
  width: 475px;
  top: 0;
}
#gallery .imgViewer {
  position: absolute;
  margin-left: 10px;
  margin-top: 32px;
  top: 0;
  transform-origin: 0 0;
  transform: scale(0.8);
  display: none;
}
#gallery .imgViewer .controlDiv {
  position: absolute;
  z-index: 1;
  width: 100%;
  text-align: right;
}
#gallery .imgViewer .controlDiv .moveBtnDiv {
  transform: scale(0.8);
  transform-origin: 100% 0%;
}
#gallery .imgViewer .controlDiv .moveBtnDiv .btnZoomIn {
  margin-left: 20px;
}
#gallery .imgViewer .imgThumbnailDiv {
  position: absolute;
  top: 519px;
  height: 0px;
  width: 475px;
  background-color: #762d12;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail {
  height: 94px;
  width: 94px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-1 {
  margin-top: 10px;
  margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-2 {
  margin-top: 10px;
  margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-3 {
  margin-top: 10px;
  margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-4 {
  margin-top: 10px;
  margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-5 {
	margin-top: 10px;
	margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-6 {
	margin-top: 10px;
	margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-7 {
	margin-top: 10px;
	margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-8 {
	margin-top: 10px;
	margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-9 {
	margin-top: 10px;
	margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-10 {
	margin-top: 10px;
	margin-left: 8px;
}
#gallery .imgViewer .imgThumbnailDiv .thumbnail-active {
  border: 3px solid #f3dfa5;
}
#gallery .imgViewer .imgThumbnailCount {
	background-color: #762d12;
	top: 643px;
	width: 475px;
	position: absolute;
	height: 20px;
	text-align: right;
}

#gallery .imgViewer .imgThumbnailCount .imgCountText {
	color: #c3a262;
	margin-right: 10px;
}

#gallery .imgViewer .imgThumbnailCount .imgCountTextTC {
	color: #c3a262;
	margin-right: 10px;
}

#gallery .imgViewer .imgThumbnailCount .imgCountTextSC {
	color: #c3a262;
	margin-right: 10px;
}
#gallery .imgViewer .imgThumbnailDiv .unvisibleWall {
  display: none;
  position: absolute;
  height: 125px;
  width: 475px;
  top: 0;
}
#gallery .unvisibleWall {
  position: absolute;
  height: 590px;
  width: 400px;
  top: 0;
}
#gallery .tabBar {
  position: absolute;
  top: 412px;
  margin-left: 10px;
}
#gallery .tabBar input {
  transition: opacity 0.5s ease-in-out;
}
#gallery .tabBar input.btn-top {
  position: absolute;
  left: 0;
}
#gallery .tabBar input.btn-top:hover {
  opacity: 0;
}
#gallery .tabBar .tab_360 .tabActive {
  position: absolute;
  top: 2px;
}
#gallery .tabBar .tab_360 .tabInactive {
  position: absolute;
  top: 7px;
}
#gallery .tabBar .tab_Img .tabActive {
  position: absolute;
  top: 2px;
  left: 245px;
}
#gallery .tabBar .tab_Img .tabInactive {
  position: absolute;
  top: 7px;
  left: 263px;
}
#gallery .tabBar .tabActiveTri {
  position: absolute;
  top: -8px;
  left: 60px;
}
@media(max-width:1000px){
	#gallery{
		float:none;
		margin:auto;
		height:570px;
	}
	#detail{
		background-image:none; 
		background-color:#dbbe76;
		margin:auto;
		float:none;
		width:100%;
		max-width:700px;
	}
	#detail .con table{
		width:100%;		
	}
	
	#detail .con{
    	padding-right: 29px;
    	margin-bottom:130px;
    	min-height:0px;
    	position:relative;
	}
	.bg{
		display:none !important;
	}
	#content .control{
		position:absolute;
		left:0;
		margin-top:60px;
	}
	#content .control ul{
	
		display: flex;
	    width: calc( 100% - 50px);
	    margin-left:auto;
	    margin-right:auto;
	    justify-content: center;
	}
	#content .number{
		position:absolute;
		margin-top:20px;   	 	
   	 	padding-right:0px;
   	 	width:100%;
   	 	left:-30px;
	}
	.basic_info{
		height:1px;
	}
}
@media(max-width:600px){
	
	.basic_info{
		height:0px;
	}
	#detail .con{
		font-size:75%;
		padding-left:10px;
		padding-right:10px;	
		
	}
	#detail .con table{
		padding-right:10px;	
	}
	#detail .con table th{
		color: #772C11;
    	font-weight: normal;
    	text-align:left;
    	line-height:125%;
    	width:140px;
		padding:8px 2px;
		border:none;
	}
	#detail .con table td.system{
		padding:8px 2px;
	}
	#detail .con table td.system img.f_right.btn_over{
		float:none;
	}
	#detail .con table td{
		font-size:100%; 
		padding:8px 2px;
		border:none;
	}
	#detail .con table{
		border:none;
	}
	
	#content .control ul li{
		margin-right:10px;
	}
	
	#detail .con table td.system span{
		float: none;
	    vertical-align: top;
	    display: block;
	}
	
}

@media(max-width:475px){
	#gallery{
		width:300px;
		height:405px;
	}
	#gallery .darkBg{
		width:280px;
		height:280px;
	}
	#gallery ._360Viewer{	
    	transform: scale(0.6);
	}
	#gallery .imgViewer{
    	transform: scale(0.6);
	}
	
	#gallery .tabBar{
		top:312px;
		margin-top:4px;
	}
	#gallery .tabBar .tab_Img .tabActive{
		left:185px;
	}
	
	#gallery .tabBar .tab_Img .tabInactive{
		left:199px;
	}
	#gallery .tabBar .tabActive img:not(.tabActiveTri),#gallery .tabBar .tabInactive input{
		width:101.25px;
	}
	#gallery .tabBar .tabActiveTri{
		width:12px;
		left:45px;
		top:-5px;
	}
	#gallery .tabBar .tabInactive img:not(.tabActiveTri),#gallery .tabBar .tabInactive input{
		width:87.75px; 
	}
	#gallery .unvisibleWall{
		width:300px;
		height:405px;
	}
	#gallery .imgViewer .controlDiv{
		width:96%;	
	}
	
	
}


@media(max-width:359px){
	#gallery{
		width:250px;
		height:340px;
	}
	#gallery .darkBg{
		width:230px;
		height:230px;
	}
	#gallery ._360Viewer{	
    	transform: scale(0.5);
	}
	#gallery .imgViewer{
    	transform: scale(0.5);
	}
	
	#gallery .tabBar{
		top:262px;
		margin-top:6px;
	}
	#gallery .tabBar .tab_Img .tabActive{
		left:136.5px;
	}
	
	#gallery .tabBar .tab_Img .tabInactive{
		left:150px;
	}
	
	#gallery .tabBar .tab_360 .tabActive, 
	#gallery .tabBar .tab_360 .tabInactive{
		left: 0px;
	}
	#gallery .unvisibleWall{
		width:250px;
		height:340px;
	}
	#sitename{
		max-width:100%;
	}
}