@charset "utf-8";

@media screen and (min-width: 768px) and (max-width: 1024px) {

	/* Orders iframe style */
	
	body{
		overflow-x:hidden;
	}
	

	.BG{
		background:url("../../img/BG.jpg")repeat;
	}

	
	.Top{
		width:100%;
		height:50px;
		background:rgba(246,172,101,0);
		top:0;
		left:0;
		position:fixed;
		z-index:10;
	}

	.TopBGFix{
		width:100%;
		height:50px;
		background:rgba(255,255,255,0.8) !important;
		top:0;
		left:0;
		position:fixed;
		z-index:10;
	}


	.Tops{
		width:100%;
		z-index:2;
		position:absolute;
		top:50px;
		left:0;		
		display:none;
		background:rgba(255,255,255,1) !important;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		padding:30px 30px 60px 30px;
	}
	
	a.MuO{
		width:60px;
		height:50px;
		line-height:50px;
		display:block;
		top:0;
		right:0;
		position:absolute;
		z-index:10;	
		font-size:18px;
		text-align:center;
	}

	a.MuX{
		width:60px;
		height:50px;
		line-height:50px;
		display:none;
		top:0;
		right:0;
		position:absolute;
		z-index:10;
		font-size:18px;
		text-align:center;		
	}
	
	a.LugEN{
		width:60px;
		height:50px;
		line-height:50px;
		display:block;
		top:0;
		right:120px;
		position:absolute;
		z-index:10;	
		font-size:15px;
		text-align:center;	
	}	
	
	a.LugJP{
		width:60px;
		height:50px;
		line-height:50px;
		display:block;
		top:0;
		right:60px;
		position:absolute;
		z-index:10;	
		font-size:15px;
		text-align:center;	
	}	
	
	a.MuO:hover,
	a.MuX:hover,
	a.LugEN:hover,
	a.LugJP:hover
	{
		background:#4C4948;
		color:#fff;
		text-decoration:none;
	}	
	

	a.Logo,
	a.Logo_s
	{
		width:200px;
		height:50px;
		background:transparent url("../../img/Logo_s.svg")no-repeat center center / 70%;
		display:block;
		position:absolute;
		z-index:2;
		top:0;
		left:0;
	}	

	.EMap{
		width:10%;
		height:70px;
		background:#FEF2AB url("../../img/index/導覽_峨眉鄉12寮休閒農業區.jpg")no-repeat center center / cover;
		display:block;
		position:absolute;
		z-index:1;
		top:260px;
		left:0;
	}

	.EDM{
		width:10%;
		height:70px;
		background:#FEF2AB url("../../img/index/EDM_峨眉鄉12寮休閒農業區.jpg")no-repeat center center / cover;
		display:block;
		position:absolute;
		z-index:1;
		top:330px;
		left:0;
	}
	
	
	.EMap a.Mask,
	.EDM a.Mask
	{
		width:100%;
		height:70px;
		text-align:center;
		background:rgba(0,0,0,0.3);
		position:absolute;
		display:block;
		z-index:1;
		top:0;
		left:0;
		color:#fff;	
	}		
	
	
	.EMap a.Mask:hover,
	.EDM a.Mask:hover
	{
		width:100%;
		height:70px;
		background:rgba(0,0,0,0);
		position:absolute;
		display:block;
		z-index:1;
		top:0;
		left:0;
		text-shadow:black 0.1em 0.1em 0.2em;
		text-decoration:none;
	}		

	.EMap a.Mask div,
	.EDM a.Mask div
	{
		padding:10px;
		line-height:50px;
		border-top:1px rgba(255,255,255,0.3) solid;
		border-bottom:1px rgba(255,255,255,0.3) solid;
		font-size:15px;	
	}
	
	.EMap a.Mask span,
	.EDM a.Mask span
	{
		padding-left:5px;
		font-size:13px;	
	}

	.Menu{
		width:auto;	
		margin:0 30px;
	}

	.Menu .Mu{
		display:block;
		font-size:19px;
		cursor:pointer;
		position:relative;
	}
  
	.Menu .Mu.mobFix{
		margin:0 0 20px 0;
	}  
	
	.Menu .Mu.Language{
		display:none !important;
	}  	

	.Menu .Mu span{
		display:none;
	}	

	.Menu .Mu.Cho{
		background:#4C4948;
	}
	
	.Menu .Mu .Su{
		padding:20px 10px;
	}	
		
	.Menu .Mu .Su a{
		font-size:13px;
		line-height:22px;
		padding:5px 10px;
		display:block;
		text-align:left;
	}		
	
	.Menu .Mu .Su a:hover{
		text-decoration:none;
		background:#F3AC6C;
		color:#4C4948;
	}		
	

	.MenuFix{
	}

	.AnchorPoint{
		position:relative;
	}
	
	/* Ixbr Style */	
	
	.Ixbr{
		width:100%;
		min-width:1024px;
		height:600px;
		background:url("../../upload/ixbr/0.jpg")no-repeat bottom -30px center / cover;
		z-index:0;
		position:relative;
		right:0;
	}

	.InfoBox{
		width:50%;
		height:80px;
		padding:20px;
		background:#fff;
		position:absolute;
		z-index:2;
		top:550px;
		right:0;		
		border-radius:5px 0 0 5px;
	}

	.InfoBoxs{
		width:100%;
		height:80px;
	}
	
	.InfoBoxs a{
		width:20%;
		height:80px;
		display:block;
		text-align:center;
		font-size:13px;
		float:left;
	}
	
	.InfoBoxs .iCon{
		width:50px;
		height:50px;
		margin:0 auto 10px auto;
		border:1px #4C4948 solid;
		border-radius:50px;
	}	
	
	.InfoBoxs .iCon_cap{
		background:url("../../img/index/iCon_cap.svg")no-repeat center center / 60%;
	}		
	
	.InfoBoxs .iCon_restaurant{
		background:url("../../img/index/iCon_restaurant.svg")no-repeat center center / 50%;
	}	
	
	.InfoBoxs .iCon_house{
		background:url("../../img/index/iCon_house.svg")no-repeat center center / 60%;
	}	
	
	.InfoBoxs .iCon_car{
		background:url("../../img/index/iCon_car.svg")no-repeat center center / 60%;
	}	
	
	.InfoBoxs .iCon_destination{
		background:url("../../img/index/iCon_destination.svg")no-repeat center center / 60%;
	}




	.InfoBoxs a:hover .iCon{
		transition: width 1s ,height 1s, transform 1s;
		transition-timing-function: ease;
		transform: rotate(360deg);
	}

	.HotBuyBox{
		width:30%;
		height:120px;
		background:#F3AC6C url("../../img/955DAE1E.jpg")no-repeat center center / cover;
		position:absolute;
		z-index:2;
		top:420px;
		right:10px;		
		border-radius:5px;
		overflow:hidden;
	}

	.HotBuyBok{
		width:100%;
		height:100%;
		position:relative;
	}

	.HotBuyBok .Msk{
		width:100%;
		height:100%;
		padding:80px 0 20px 0;
		background:rgba(243,172,108,0.8) url(../../img/採桔樂.svg)no-repeat top 40px center / 30%;
		position:absolute;
		z-index:2;
		top:0;
		right:0;	
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		font-size:13px;
		color:#fff;
		text-align:center;
	}

	.Isbr{
		width:100%;
		min-width:1024px;
		height:200px;
		line-height:70px;
		background:#eee;
		position:relative;
		padding:0 30px;
		font-size:25px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		
	}

	.WrapBok{	
		width:100%;
		height:auto;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		position:relative;
		z-index:0;
		padding:30px 0;
	}
	

	.WrapBok.PageTopFix{	
		top:-100px;
	}
	

	.WrapBok .MName{
		color:#4D4948;
		font-size:25px;
		font-weight:bold;
		text-align:center;		
	}	

	.Gmap{
		width:100%;
		height:500px;
		margin:30px 0;
		position:relative;
	}

	.WrapBokTopHFix{	
		padding-top:100px;
	}
	
	.WrapBoks{	
		padding:50px;
		border-bottom:1px rgba(76,73,73,.4) solid; /* #4C4948 */
	}

	
	.WrapBoks.NotLineFix{	
		border-bottom:none;
	}		
	
	.NextBokLine{	
		width:1px;
		height:60px;
		background:#4D4948;
		margin:0 auto;
	}	
	
	.WrapBoks .PName{
		color:#4D4948;
		font-size:25px;
		font-weight:bold;
		text-align:center;		
	}		
	
	.WrapBoks .idxItoBox{
		text-align:center;	
		width:60%;
		margin:30px auto 50px auto;
		font-size:16px;
		line-height:30px;
	}			
	
	
	.WrapBoks .BokL{
		width:20%;
		float:left;
	}			
		
	.WrapBoks .BokR{
		width:78%;
		float:right;
		background:#fff;
		border-radius:5px;		
		padding:20px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		position:relative;
	}	
	
	.WrapBoks .BokR .Img{
		width:200px;
		height:200px;
		padding:10px;
		position:absolute;
		right:20px;
		top:-50px;
		z-index:1;
		border-radius:100%;
		border:10px #fff solid;
	}		
	
	.WrapBoks .BokR .Ito{
		width:70%;
		padding:20px 0;
		font-size:14px;
	}		
	
	
	.WrapBoks .BokR .BokRs{
		width:100%;
		display:flex;
	}


	.WrapBoks .BokR .BokRs .imgs{
		width:60%;
	}
	
	.WrapBoks .BokR .BokRs .imgs .imgs_large{
		width:100%;
	}	

	
	.WrapBoks .BokR .BokRs .imgs .imgs_large .img_main{
		width:100%;
		padding-bottom:75%;
		display:block;
		
	}	
	
	.WrapBoks .BokR .BokRs .imgs .img_s{
		width:100%;
		padding-bottom:75%;
		display:block;
		margin-top:10px;
	}		

	.WrapBoks .BokR .BokRs .directions{
		width:38%;
		margin-left:2%;
	}	
	
	
	
	
	
	
	

	.WrapBoks .BokL .PageNam{
		width:100%;
		min-height:auto;
		display:block;
		background:#4C4948;
		border-radius:5px 5px 0 0;
		padding:10px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		font-size:25px;
		color:#fff;
	}			
	
	.WrapBoks .BokL .Info{
		width:100%;
		min-height:auto;
		display:block;
		background:#fff;
		border-radius:0 0 5px 5px;
		margin-bottom:5px;
		padding:10px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		font-size:13px;
	}			
	
	
	.WrapBoks .BokL .List{
		width:100%;		
	}		
	
	.WrapBoks .BokL .List a{
		width:100%;
		min-height:auto;
		display:block;
		background:#fff;
		border-radius:5px;
		margin-bottom:5px;
		padding:10px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;			
	}		
	
	.WrapBoks .BokL .List a:hover{
		background:#F3AC6C;		
	}	
	
	.WrapBoks .BokL .List a.Btn{
		background:#F3AC6C;
		color:#fff;	
		font-size:14px;
	}		
	
	.WrapBoks .BokL .List a.Btn:hover{
		background:#4C4948;		
	}		

	.WrapBoks .BokL .List a .NewsDate{
		padding:5px 0;
		font-size:13px;
		color:#555;
	}	
	
	.WrapBoks .BokL .List a .NewsNam{
	}


	
	.WrapBoks .BokL .List a .Img{
		width:40px;
		height:40px;
		background:#ddd;
		border-radius:40px;
		float:left;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;				
	}	
		
	.WrapBoks .BokL .List a .Txt{
		padding:0 10px;
		margin-left:50px;
	}	
	
	.WrapBoks .BokL .List a .Txt .Nam{
		font-size:15px;	
		font-weight:bold;
	}		
	
	.WrapBoks .BokL .List a .Txt .Ito{
		font-size:13px;	
		color:#555;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;		
	}		
	
	.WrapBoks .BokR .Nam{
		font-size:30px;
	}		

	
	.WrapBoks .BokR .ItxBox{
		margin:20px 0;
	}							
	
	.WrapBoks .BokR .Itx{
		margin-bottom:5px;
		font-size:14px;
	}				
		
	.WrapBoks .BokR .subNam{
		font-size:22px;
		margin:30px 0;
	}	
	
	.WrapBoks .BokR .subNams{
		font-size:17px;
		margin:30px 0;
		font-weight:bold;
	}		
	
	.WrapBoks .BokR .itoBox{
		border-bottom:20px;
		padding:0 0 20px 20px;
		border-bottom:1px #ddd solid;
		font-size:14px;
		white-space: pre-wrap
	}		

	.WrapBoks .BokR .descBox{
	}	

	.WrapBoks .BokR .BtnBox{
		padding:10px 0;
	}	

	.WrapBoks .BokR .BtnBox a.Btn{
		padding:10px;
		text-align:center;
		background:#F3AC6C;
		color:#fff;
		border-radius:3px;
		font-size:14px;
	}
	
	.WrapBoks .BokR .BtnBox a.Btn:hover{
		background:#4C4948;
	}
		
	.WrapBoks .BokR .BtnBox .Disable{
		width:150px;
		height:36px;
		line-height:36px;
		text-align:center;
		background:#eee;
		font-size:14px;
		color:#aaa;
	}
	
	
	.WrapBoks .BokR .imgBox{
		width:100%;
		display:flex;
		flex-wrap:wrap;		
	}		
	
	.WrapBoks .BokR .imgBox .t_imgs{
		flex: 0 1 33.3%;
		aspect-ratio: 4 / 3;
		position:relative;
		cursor:pointer;
		box-sizing: border-box;
		display:block;
	}		
	
	
	.AddsInfo{
		width:500px;
		height:200px;
		background:url(../../upload/index/4/AddsInfo.svg)no-repeat top center / contain;
		float:left;
		position:relative;
		z-index:2;
		font-size:14px;
	}
	
	.LocationInfo{
		width:37%;
		margin:50px 0;
		padding:90px 30px 30px 30px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;			
		background:#fff;
		font-size:14px;
		border-radius:5px;
		float:right;
		position:relative;
	}
	
	.LocationInfo .Img{
		width:140px;
		height:140px;
		border:5px #fff solid;
		position:absolute;
		left:50%;
		top:0;
		margin:-70px 0 0 -70px;
		border-radius:140px;
	}		
	
	.LocationInfo .Nam{
		font-size:22px;
		font-weight:bold;
		text-align:center;
	}	
	
	.LocationInfo .Addr{
		padding:30px;
	}		
	
	
	.LocationInfo .Addr .Bok{
		line-height:20px;
		font-size:14px;
		margin-bottom:5px;
	}	
	
	.LocationInfo .Addr .Bok .iCon{
		padding-right:1%;
		width:auto;
		float:left;
	}
	
	.LocationInfo .Addr .Bok .iCon span{
		padding-right:7px;
	}	
	
	.LocationInfo .Addr .Bok .iConTxt{
		width:auto;
		float:left;
		white-space:pre-wrap;
	}		
	
	
	
	
	.RouteInformation{
		width:60%;
		margin:50px 0;
		padding:30px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;			
		background:#fff;
		font-size:14px;
		border-radius:5px;
		float:left;
	}
	
	.RouteInformation .Nams{
		width:150px;
		font-size:25px;
		font-weight:bold;
		color:#4D4948;
		text-align:center;		
	}	
	
	.RouteInformation .RouteList{
		margin:30px 0;
	}
	
	.RouteInformation .RouteList td .Num{
		width:24px;
		height:24px;
		line-height:24px;
		background:#4D4948;
		color:#fff;
		border-radius:24px;
		text-align:center;
	}		
	
	.RouteInformation .RouteList td{
		padding:10px;
	}		
	
	
	/* flex-containe */

	.flex-container1{
		width:100%;
		height:400px;
		display:inline-flex;
		flex-direction:row;
		flex-wrap:wrap
	}

	.flex-container1 .item{
		margin: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}
	
	
	/* NewsBox */
	
	.NewsBox{
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		margin:30px 0;
	}	
	

	.NewsBox .Bok{
		padding:30px 0;
		border-bottom:1px #ddd solid;
	}

	.NewsBox .Bok .DT{
		display:table-cell;
		width:100px;
		color:#555;
	}

	.NewsBox .Bok .Lab{
		display:table-cell;
		padding:0 30px;
		width:100px;		
		text-align:center;
	}
	
	.NewsBox .Bok .Lab span{
		padding:2px 15px;
		background:#ccc;
		font-size:13px;
		color:#fff;
	}	
	
	.NewsBox .Bok .Txt{
		display:table-cell;
	}		
	
	
	/* BoxList */

	.BoxList{
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		margin:30px 0;
	}

  .mobShow{
     display:none;
  }


	.BoxList .BoxL{
		width:10%;
		float:left;	
	}	
	
	.BoxList .BoxL .Name{
		color:#4D4948;
		font-size:25px;
		font-weight:bold;
		text-align:center;		
	}		
	
	.BoxList .Line,
	.NewsBox .Line
	{
		width:1px;
		height:60px;
		background:#4D4948;	
		margin:30px auto;
	}	
			
	
	.BoxList .BtnMore,
	.NewsBox .BtnMore
	{
		margin:0 auto;
		display:block;
		border:1px #4C4948 solid;
		text-align:center;
		font-size:12px;
		width:70px;
		height:70px;
		line-height:70px;
		border-radius:100%;
	}		
	
	.BoxList .BtnMore:hover,
	.NewsBox .BtnMore:hover
	{
		margin:30px auto;
		display:block;
		border:1px #4C4948 solid;
		background:#4C4948;
		color:#fff;
		text-align:center;
		font-size:12px;
		width:70px;
		height:70px;
		line-height:70px;
		border-radius:100%;
		transition: width 1s ,height 1s, transform 1s;
		transition-timing-function: ease;
		transform: rotate(360deg);
	}		
	
	.BoxList .BoxR{
		width:85%;
		float:right;
	}
		
	.BoxList .BokName{
		color:#4D4948;
		font-size:25px;
		font-weight:bold;
		text-align:center;		
	}

	.BoxList .Bok_Btn{
		padding:20px 0;
		text-align:right;
	}

	.BoxList .Bok_Btn a.Btn{
		padding:10px;
		text-align:center;
		background:#F3AC6C;
		color:#fff;
		border-radius:3px;
		font-size:14px;
	}
	
	.BoxList .Bok_Btn a.Btn:hover{
		background:#4C4948;
	}
	
	.BoxList .Bok_Btn a.Btn_Disable{
		padding:10px;
		text-align:center;
		background:#eee;
		color:#aaa;
		font-size:14px;	
		cursor:default;
	}		

	.BoxList .Bok_Btn a.Btn_Disable:hover{
		text-decoration:none;
	}		

	/* SliderBox Style */
	
	.SliderBox{
		margin:50px auto;
	}
	
	.Slider{
		width:90%;
		height:500px;
	}
	
	.Slider .Sliders{
		width:100%;
		height:500px;	
		position:relative;
		border-radius:10px;
		overflow:hidden;
	}

	.Slider .Sliders .imgSlides{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:500px;
		
	}

	.SliderInfo{
		width:5%;
		height:500px;
		position:relative;
		
	}	
	

	.floatL .infoSlides{
		width:400px;
		height:200px;
		padding:50px;
		position:absolute;
		background:rgba(255,255,255,0.9);
		z-index:1;
		bottom:50px;
		left:0;
		border-radius:10px;
		font-size:14px;
	}	


	.floatR .infoSlides{
		width:400px;
		height:150px;
		padding:50px;
		position:absolute;
		background:rgba(255,255,255,0.9);
		z-index:1;
		bottom:-60px;
		right:0;
		border-radius:10px;
		font-size:14px;
	}	
	
	.floatL .infoSlides .namSlides,
	.floatR .infoSlides .namSlides
	{
		color:#4D4948;
		font-size:26px;
		font-weight:bold;
	}	

	.floatL .infoSlides .itoSlides,
	.floatR .infoSlides .itoSlides
	{
		margin:20px 0;
	}	
	
	
	.floatL .infoSlides .Bok_Btn,
	.floatR .infoSlides .Bok_Btn
	{
		padding:20px 0;
		text-align:right;
	}	
	
	.floatL .infoSlides a.btnMore,
	.floatR .infoSlides a.btnMore
	{
		padding:10px;
		text-align:center;
		background:#F3AC6C;
		color:#fff;
		border-radius:3px;
		font-size:14px;
	}		
	
	
	.floatL .infoSlides a.btnMore:hover,
	.floatR .infoSlides a.btnMore:hover
	{
		background:#4C4948;
	}
	


	/* _4Bok */
	
	._4Bok{
		width:30%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		display:inline-block;
		margin:0 4% 4% 0;
		position:relative;
		background:#fff;
		padding:1%;
		border-radius:5px;
		vertical-align:top;
	}

	._4Bok:nth-of-type(3n){
		margin:0 0 4% 0;
	}

	._4Bok ._4BImg{
		width:100%;
		height:200px;
		position:relative;
	}

	._4Bok ._4BImg ._4BMsk{
		width:100%;
		height:200px;
		top:0;
		left:0;
		position:absolute;
		background:rgba(0,0,0,0.3);
		color:#fff;
		text-align:center;
	}

	._4Bok ._4BMsk:hover{
		background:rgba(0,0,0,0);
		text-shadow:black 0.1em 0.1em 0.2em;
	}

	._4Bok ._4BMsk div{
		padding:10px;
		border-bottom:1px rgba(255,255,255,0.2) solid;
	}
	
	._4Bok ._4BImg .Remarker{
		height:14px;
		line-height:14px;
		padding:5px;
		color:#fb4c3a;
		font-size:13px;
		position:absolute;
		bottom:0;
		left:0;
		background:#F3AC6C;
		color:#fff;
		border-radius:0 3px 0 0;
	}		
	
	._4Bok ._4BInfo{
		padding:10px 0;
		border-top:1px #eee solid;
		border-bottom:1px #eee solid;
		margin:10px 0;		
	}
	
	._4Bok ._4BInfo .Bok{
		line-height:20px;
		font-size:14px;
		margin-bottom:5px;
	}	
	
	._4Bok ._4BInfo .Bok .iCon{
		padding-right:1%;
		width:auto;
		float:left;
	}
	
	._4Bok ._4BInfo .Bok .iCon span{
		padding-right:7px;
	}	
	
	._4Bok ._4BInfo .Bok .iConTxt{
		width:auto;
		float:left;
		white-space:pre-wrap;
	}	
	
	._4Bok ._4BIto{
		height:130px;
		font-size:14px;
		overflow: hidden;
		text-overflow: ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:5;
	}



/* _2Bok */

	._2Bok{
		width:48%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		margin:0 3% 3% 0;
		position:relative;
		float:left;
		background:#fff;
		padding:1%;
		border-radius:5px;
	}
	
	._2Bok:nth-of-type(2n){
		float:right;
		margin:0 0 3% 0;
	}
	
	._2Bok ._2BImg{
		width:100%;
		height:200px;
		position:relative;
		margin:20px 0 0 0;
	}	
	
	._2Bok ._2BImg ._2BMsk{
		width:100%;
		height:200px;
		top:0;
		left:0;
		position:absolute;
		background:rgba(0,0,0,0.3);
		color:#fff;
		text-align:center;
		font-size:20px;
	}

	._2Bok ._2BMsk:hover{
		background:rgba(0,0,0,0);
		text-shadow:black 0.1em 0.1em 0.2em;
	}
	
	._2Bok ._2BMsk div{
		padding:10px;
		border-bottom:1px rgba(255,255,255,0.2) solid;
		font-size:15px;	
	}	
	
	
	._2Bok ._2BIto{
		width:100%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;			
		padding:20px 0;
	}	
			
	
	
/* _3Bok */

	._3Bok{
		width:31%;
		height:auto;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;		
		margin:0 3% 3% 0;
		position:relative;
		display:inline-block;
		vertical-align:top;
		background:#fff;
		padding:1%;
		border-radius:5px;
	}
	
	._3Bok:nth-of-type(3n){
		margin:0 0 3% 0;
	}
	
	._3Bok ._3BImg{
		width:100%;
		height:200px;
		position:relative;
		margin:20px 0 0 0;
	}	
	
	._3Bok ._3BImgC{
		width:70px;
		height:70px;
		position:absolute;
		border:5px #fff solid;
		border-radius:50px;
		top:-30px;
		left:20px;
	}	
	
	._3Bok ._3BNamC{
		color:#4D4948;
		font-size:20px;
		font-weight:bold;	
		padding-left:100px;
	}		
	
	._3Bok ._3BNam{
		color:#4D4948;
		font-size:20px;
		font-weight:bold;		
	}		
	
	._3Bok ._3BImg ._3BMsk{
		width:100%;
		height:200px;
		top:0;
		left:0;
		position:absolute;
		background:rgba(0,0,0,0.3);
		color:#fff;
		text-align:center;
		font-size:20px;
	}

	._3Bok ._3BMsk:hover{
		background:rgba(0,0,0,0);
		text-shadow:black 0.1em 0.1em 0.2em;
	}
	
	._3Bok ._3BMsk div{
		padding:10px;
		border-bottom:1px rgba(255,255,255,0.2) solid;
		font-size:14px;	
	}	
	
	._3Bok ._3BIto{
		width:100%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;			
		padding:20px 0;
		font-size:14px;
		line-height:26px;
	}	
	
	._3Bok ._3BInfo{
		padding:10px 0;
		border-top:1px #eee solid;
		border-bottom:1px #eee solid;
		margin:10px 0;
		font-size:14px;
	}		
	
	._3Bok ._3BInfo .Bok{
		line-height:26px;
		margin-bottom:5px;
	}		
	
	._3Bok ._3BInfo .Bok .iCon{
		padding-right:1%;
		width:auto;
		float:left;
	}
	
	._3Bok ._3BInfo .Bok .iCon span{
		padding-right:7px;
	}	
	
	._3Bok ._3BInfo .Bok .iConTxt{
		width:auto;
		float:left;
		white-space:pre-wrap;
	}	
	
	
	/* Footer Style */
	.Footer{
		width:100%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
		background:url("../../img/BG_Footer.jpg")no-repeat top center / cover;
	}

	.Footers{
		padding:50px 0;
		margin:0 auto;
	}

	.Footers .Logo{
		width:200px;
		height:200px;
		background:url("../../img/LogoWhite.svg")no-repeat center center / 80%;
		display:block;
		margin:0 auto;
	}
	
	.Footers .iBok{
		width:400px;
		margin:20px auto;
		text-align:center;
		color:#fff;
		border-bottom:1px rgba(255,255,255,0.3) solid;
		padding-bottom:20px;		
	}	
	
	.Footers .iBok .Nam{
		font-weight:bold;
		margin-bottom:10px;
	}	
	
	.Footers .iBok .Info{
		font-size:13px;
	}		
	

	.Footers .FollowUs{
		width:400px;
		margin:50px auto;
	}

	.Footers .FollowUs a{
		width:30.6%;
		height:120px;
		display:block;
		float:left;
		background:#2B76ED;
		border-radius:5px;
		margin-right:4%;
	}
	
	.Footers .FollowUs a:nth-child(2){
		background:#188748;
	}	
		
	.Footers .FollowUs a:nth-child(3){
		float:right;
		background:#8bccda;
		margin-right:0;
	}	
		
	.Footers .FollowUs .iCon{
		width:30px;
		height:30px;
		margin:20px auto;
	}	
	
	.Footers .FollowUs .iCon.Facebook{
		background:#2B76ED url(../../img/icon/svg/facebook_white.svg)no-repeat center center / contain;
	}		
	
	.Footers .FollowUs .iCon.webOffical1{
		background:#188748 url(../../img/webOffical1.png)no-repeat center center / contain;
	}	

	.Footers .FollowUs .iCon.webOffical2{
		background:#8bccda url(../../img/webOffical2.png)no-repeat center center / contain;
	}		
	
	.Footers .FollowUs .Nam{
		margin:20px auto;
		text-align:center;
		color:#fff;
		font-size:13px;
	}	

	.Footers .FollowUs a:hover{
		opacity:0.9;
	}


	.CopyRight{
		padding:20px 0;
		text-align:center;
		font-size:14px;
	}
	
	.CopyRight .ServerLine{
		padding:0 0 10px 0;
		text-align:center;
		font-size:14px;
	}		

	a.BtnGoTop{
		width:50px;
		height:50px;	
		bottom:30px;
		right:30px;
		position:fixed;
		text-align:center;
		line-height:50px;
		color:#fff;
		font-size:20px;
		opacity:0;
		display:none;
		background:rgba(76,73,72,0.7);
		border-radius:100%;
		z-index:10;
	}


	a.BtnLMu{
		width:60px;
		height:60px;	
		bottom:100px;
		right:30px;
		position:fixed;
		background:rgba(255,255,0, 0.7); /*#FFFF00*/
		font-weight:bold;
		text-align:center;
		line-height:60px;
		font-size:20px;
		opacity:0;
		display:none;
		z-index:501;
	}



	a.BtnGoTop:hover,
	a.BtnLMu:hover
	{
		background:rgba(76,73,72,1);
		background-size:40%;
		/*
		-webkit-animation: pulse 0.5s;
		animation: pulse 0.5s;
		*/
		text-decoration:none;
		transition: width 1s ,height 1s, transform 1s;
		transition-timing-function: ease;
		transform: rotate(360deg);		
	}
	
		
	.floatL{
		float:left;
	}	
	
	.floatR{
		float:right;		
	}		
	

	/* aminate imgage Style*/
		
	.indexImg1{
		width:200px;
		height:300px;
		position:absolute;
		top:-150px;
		left:-50px;
		z-index:2;
		background:url(../../img/index/Img1.svg)no-repeat top center / contain;
	}	
	
	.indexImg2{
		width:200px;
		height:280px;
		position:absolute;
		top:-150px;
		left:80px;
		z-index:2;
		background:url(../../img/index/Img2.svg)no-repeat top center / contain;
	}			
	
	.indexImg4{
		width:250px;
		height:250px;
		position:absolute;
		top:-100px;
		left:-80px;
		z-index:1;
		background:url(../../img/index/Img4.svg)no-repeat top center / contain;
	}		
	
	.indexImg5{
		width:200px;
		height:280px;
		position:absolute;
		top:-150px;
		right:-50px;
		z-index:2;
		background:url(../../img/index/Img5.svg)no-repeat top center / contain;
	}		
	
	.indexImg7{
		width:200px;
		height:280px;
		position:absolute;
		top:-250px;
		right:100px;
		z-index:2;
		background:url(../../img/index/Img7.svg)no-repeat top center / contain;
	}	
	
	
	.indexImg8{
		width:300px;
		height:150px;
		position:absolute;
		top:-200px;
		right:100px;
		z-index:1;
		background:url(../../img/index/Img8.svg)no-repeat top center / contain;
	}	

	
	.indexImg9{
		width:200px;
		height:400px;
		position:absolute;
		top:250px;
		left:100px;
		z-index:2;
		background:url(../../img/index/Img9.svg)no-repeat top center / contain;
	}	
	
	.indexImg10{
		width:200px;
		height:280px;
		position:absolute;
		top:-150px;
		right:-50px;
		z-index:2;
		background:url(../../img/index/Img10.svg)no-repeat top center / contain;
	}		
	

	.indexImg11{
		width:200px;
		height:280px;
		position:absolute;
		top:-150px;
		right:100px;
		z-index:2;
		background:url(../../img/index/Img11.svg)no-repeat top center / contain;
	}	

	.AnchorFix{
		position:absolute;
		top:19px;
		height: 0;
		display:block;
	}



	/* Order Style */

	.OrderOpenBG{
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.9);
		position:fixed;
		top:0;
		left:0;
		z-index:99998;
		display:none;
	}

	.OrderBox{
		width:60%;
		height:60%;
		z-index: 1;
		background:#fff;
		left:20%;
		top:20%;
		position: fixed;
		z-index:99999;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding:30px;
		display:none;
		border-radius:10px;
	}
	
	.OrderBok{
		width:100%;
		height:100%;
		position:relative;
	}


	.OrderBok .BtnX{
		width:40px;
		height:40px;
		line-height:40px;
		position:absolute;
		top:-90px;
		right:50%;
		border:1px #fff solid;
		border-radius:30px;
		text-align:center;
		font-size:12px;
		display:block;
		margin:0 -20px 0 0;
		color:#fff;
	}



	.OrderBok .BtnX:hover{
		color:#fff;
		border:1px #4C4948 solid;
		background:#4C4948;
	}

	
	/* Orders iframe style */
	
	.OrdersBox{
		width:100%;
	}

	.OrdersBox .Nam{
		font-size:25px;
		text-align:center;
		font-weight:bold;
	}

	.OrdersBox .Nams{
		font-size:15px;
		font-weight:bold;
		margin-bottom:10px;
	}

	.OrdersBox .FomBox{
		padding:10px;
	}
	
	.OrdersBox .Bok{
		margin-bottom:10px;
	}	
	
	.OrdersBox .FomBox select{
		padding:5px;
		height:40px;
		width:100%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size:14px;
		margin-bottom:1px;
	}		
	
	.OrdersBox .FomBox input[type=text],
	.OrdersBox .FomBox input[type=date],
	.OrdersBox .FomBox input[type=time]
	{
		padding:5px;
		height:40px;
		width:100%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size:14px;
	}	
		
	.OrdersBox .BtnBox{
		text-align:center;
		margin:30px auto;
	}		
	
	.OrdersBox .captcha{
		font-size:20px !important;
	}	
	
	.OrdersBox a.BtnSubmit:hover{
		background:#4C4948;
	}

		
	.OrdersBox a.BtnSubmit{
		padding: 10px;
		text-align: center;
		background: #F3AC6C;
		color: #fff;
		border-radius: 3px;
		font-size: 14px;
	}	
	
	.OrdersBox a.BtnSubmit:hover{
		background:#4C4948;
	}
		
	/* Captcha style */
  

  .CaptchaBox_FW{
    width:100%;
    height:40px;
    position:relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;		
  }

  .CaptchaBox_FW:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }

  .CaptchaBox_FW input[type=text].Captcha{
    border:0px;
    width:100%;
    height:40px;
    padding:0px 25px;
    font-family: 'Oswald', sans-serif;
    text-align:center;
    font-size:20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	
    line-height:40px;
    background:#fff;
  }

  .CaptchaBox_FW a.CaptchaReset{
    width:30px;
    height:40px;
    display:block;
    padding:0 23px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:100;
    text-align:center;
    line-height:40px;
  }

  .CaptchaBox_FW a.CaptchaReset span{
    width:30px;
    height:40px;
    display:block;
    padding:0 20px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:100;
    text-align:center;
    line-height:40px;
  }  
    
  
   /* Element Style */

  .Tip{
    font-size:12px;
    font-weight:bold;
    color:#ea4141;
    padding:5px;
  } 
  
  select.FomAuto{
    background: #fff;
    cursor:pointer;
    height:36px;
    padding: 0 60px 0 10px;
    width:100%;
      background: #fff url(../../img/elemt/svg/arrow-point-to-down.svg)no-repeat right 10px center;
      background-size: 9px 9px;	
  }
  
  
  /* Language Page Style*/
  
  .constructionNote{
	  width:500px;
	  height:100px;
	  position:absolute;
	  top:0;
	  right:50%;
	  margin:100px -250px 0 0;
	  padding:150px 0 0 0;
	  background:url(../../img/LogoOri.svg)no-repeat top 20px center / 100px;
	  text-align:center;
  }  
  
  .constructionNote .Nam a{
	color:#528AF1;
	margin-top:5px;
	display:block;
  }
  
  
	.langPopMask{
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.7);	
		position:fixed;
		z-index:100;
		top:0;
		left:0;
		display:none;
	}
  
 	a.btnClose{
		width:40px;
		height:40px;
		position:fixed;
		z-index:102;
		display:none;	
		top:30px;
		left:50%;
		margin:0 0 0 -20px;
		color:#fff;
		font-size:17px;
		line-height:42px;
		text-align:center;
		border-radius:100%;
		background:#5F4C40;
	}   
  
  	a.btnClose:hover{
		text-decoration:none;
	} 
  
  
	.langPopBox{
		width:90%;
		height:90%;
		background:rgba(255,255,255,1);
		position:fixed;
		z-index:101;
		top:60px;
		left:5%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow:hidden;
		display:none;		
	}

	.langPopBok{
		height:auto;
		padding:30px;		
	}
	

 	.langPopBok .Bnr{
		height:580px;
		background:url("../../upload/ixbr/0.jpg")no-repeat bottom -30px center / cover;
		position:relative;
	} 
		
	
 	.langPopBok .textContent{
		margin:50px auto;
		line-height:25px;
		position:relative;
	} 

	.langPopBok .textContent .langBox{
		width:100%;	
	}  
 
	.langPopBok .textContent .langBokL{
		width:60%;
		height:500px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		float:left;
		position:relative;
		
	}
 
 	.langPopBok .textContent .langBokL .textbok{
		background:rgba(0,0,0,0.5);
		color:#fff;
		padding:20px;
		position:absolute;
		bottom:0;
		left:0;
	}
 
 	.langPopBok .textContent .langBokR{
		width:40%;
		height:500px;
		float:right;
	}	
		
	
 	.langPopBok .textContent .Nam{
		margin-bottom:40px;
		font-size:30px;
		text-transform:uppercase;
		text-align:center;
	} 	
	
 	.langPopBok .textContent .textContents{
		width:80%;
		margin:50px auto;
		line-height:25px;
		position:relative;
	}	
	
 	.langPopBok .textContent .textContents ._img10{
		visibility:visible !important;
		width:200px;
		height:300px;
		background:url("../../img/index/Img10.svg")no-repeat center center / contain;
		z-index:10;
		position:absolute;
		right:-120px;
		bottom:200px;
	} 			
	
	
 	.langPopBok .textContent .textContents ._img11{
		visibility:visible !important;
		width:200px;
		height:300px;
		background:url("../../img/index/Img11.svg")no-repeat center center / contain;
		z-index:10;
		position:absolute;
		left:-120px;
		bottom:0;
	} 		
		
		
		
		
 	.langPopBok .textContent .imgsBox{
		height:500px;
		margin:30px auto 70px auto;
		position:relative;
	} 		
				
				
		
 	.langPopBok .textContent .texts{
		width:80%;
		margin:30px auto;
	} 		
	
 	.langPopBok .textContent .Line{
		width:1px;
		height:60px;
		background:#4D4948;	
		margin:30px auto;
	} 	


	#photostack-3{
		background:none !important;
	}
	
	.photostack figure {
		width: 320px !important;
		height: 320px !important;
		position: relative;
		display: inline-block;
		background: #fff;
		padding: 40px;
		text-align: center;
		margin: 5px;
	}
	
	.photostack figure a{
		width: 100% !important;
		height: 100% !important;
	}	

	.photostack nav span {
		position: relative;
		display: inline-block;
		margin: 0 !important;
		width: 30px;
		height: 30px;
		cursor: pointer;
		background: #C2C2C2 !important;
		border-radius: 50%;
		text-align: center;
		-webkit-transition: -webkit-transform 0.6s ease-in-out, background 0.3s;
		transition: transform 0.6s ease-in-out, background 0.3s;
		-webkit-transform: scale(0.3) !important;
		transform: scale(0.3) !important;
	}
 
	.photostack nav span.current {
		background: #5F4C40 !important;
		-webkit-transform: scale(0.5) !important;
		transform: scale(0.5) !important;
	}  
 
	/* swiper style */
	:root{
		--swiper-theme-color:#5F4C40 !important;
	} 
 
 

  
  
  

}