@charset "utf-8";

.btn_video { position:absolute; display:block; width:60px; height:60px; text-align:center; right:30px; top:30px; margin:0 auto;  cursor:pointer;  opacity:0; filter: alpha(opacity=0;); z-index:100;}
.btn_video i { font-size:60px; line-height:60px; -webkit-text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -moz-text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); text-shadow:0 0 3px rgba(0, 0, 0, 0.2); }
.btn_video span { display:block; 'Kanit', sans-serif; letter-spacing:0.2em; padding-left:0.2em; margin-top:0.2em;}
.btn_video:hover i, .btn_video:focus i, .btn_video:hover span, .btn_video:focus span { color:#be6f51;}

.active .btn_video { opacity:1; filter: alpha(opacity=100;); transition: all 0.5s ease-in-out 1s;}

.spList01 { position:absolute; width:49%; right:0;  z-index:5;}
@media  (min-width: 769px){
	.spList01 {bottom:-80px;}
	.active .spList01 { bottom:0; transition: all 0.4s ease-in-out 0.3s; }
}
.spList01 li { float:left; width:25%;}
.spList01 li a { display:table; color:#fff; width:100%; padding:8% 0 8% 5%; opacity:0.8; }
.spList01 li i.spIcon { display:table-cell; width:70px; height:56px; background-size:60px 56px !important; background-repeat:no-repeat !important; background-position:center center !important;}
.spIcon01 { background:url(../images/special/sp_icon01.png) !important;}
.spIcon02 { background:url(../images/special/sp_icon02.png) !important;}
.spIcon03 { background:url(../images/special/sp_icon03.png) !important;}
.spIcon04 { background:url(../images/special/sp_icon04.png) !important;}
.spList01 a > span {display:table-cell; vertical-align:bottom; padding-bottom:5px; font-family: 'Kanit', sans-serif; font-size:1.07em; line-height:1.3em;}

#contents {position:relative; width:100%; opacity:0; filter: alpha(opacity=0;); zoom:1; z-index:5;}
#contents:after {clear:both;content:"";display:block;}

.mainCon { position:relative; }
.mainCon:after {content:"";display:block;clear:both;}

.mainTop { position:relative; z-index:3;}
.mainTop01 { position:relative; width:50%; margin-left:50%; z-index:3;}
.mainTop01_text { position:absolute; width:90%; left:10%; top:10%; z-index:2;}
.mainTop01_text dt {
	margin-bottom: 1em; font-size:3.38em; line-height:1.35em; color:#A8CF93; font-weight: bold;
}
.mainTop01_text dd {
	color: #fff; font-size:1em; line-height:2.4em; font-weight:200; opacity:1;
}


.mainCon02 {}
.main02_01 { text-align:center; font-family: "Dancing Script", cursive; font-size:3.2em; line-height:1.5em; color: #60884A; padding:3% 0; }
.main02_02 {position: relative; float:left; width:50%; margin-left:5%; overflow: hidden;}
.main02_02 img {transition: transform 2s ease-in-out 0.5s, opacity 2.5s ease-in-out 1.5s; }
.main02_02 img.img01 {position: absolute; top: 0; left: 0; opacity: 0;}
.main02_02 img.img01.on {
	opacity: 1;
}
.main02_02 img.img01_bg.on {
	transform: scale(1.5);
	opacity: 0;
}
.main02_02 p { margin-top:3%; font-size:8px; line-height:1.5em; text-align:right; opacity:0.3; filter: alpha(opacity=30;); }
.main02_03 { float:left; width:35%; margin-left:4.5%;}
.main02_03 p {font-size:1.3em; line-height:2.4em; font-weight:200; margin:8% 0 14%;}
.main02_03_video { position:relative; width:100%; /* padding-bottom:56.2%;*/ overflow:hidden; }
.main02_03_video .main_video, .main02_03_video iframe {position: absolute;top: 50%; left: 50%; min-width:100%; min-height:100%; width:auto; height: auto; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.main02_bg { position:absolute; width:100%; height:80%; left:0; top:0; background:rgba(255,255,255,0.05); z-index:-1;}

.mainCon03 { padding: 6% 0 2%; }

@media  (max-width: 1620px){
.main02_01 { font-size:2.6vw; }
.spList01 li i.spIcon { display:table-cell; width:66px; height:45px; background-size:48px 45px !important;}
.spList01 a > span {padding-bottom:3px; font-size:0.95em; line-height:1.3em; font-weight:300;}
}

@media  (max-width: 1480px){

.btn_video { width:36px; height:36px; right:20px; top:20px;}
.btn_video i { font-size:36px; line-height:36px; }
.btn_video span {  font-size:10px; letter-spacing:0.1em; padding-left:0.1em; margin-top:0
;}

.mainTop01_text dt { font-size:2em; line-height:1.35em; }
.mainTop01_text dd { font-size:0.9em; line-height:1.8em; letter-spacing:-0.05em;}

}

@media  (max-width: 1024px){
.mainTop01_text dt { font-size:1.5em; line-height:1.35em; }
.mainTop01_text dd { font-size:0.8em; line-height:1.8em; letter-spacing:-0.05em;}
.spList01 li i.spIcon { display:table-cell; width:40px; height:28px; background-size:30px 28px !important;}
.spList01 a > span {padding-bottom:3px; font-size:0.75em; line-height:1.3em; font-weight:300;}
}

@media  (max-width: 768px){
.mainTop {
		background-color: #F2EBE2;
	}
.btn_video { right:10px; top:10px;}

.spList01 { top:0; bottom:auto; width:98%;}
.spList01 li a { padding:12px 0 12px 5%;}
.mainTop01 { width:100%; margin-left:0;}
.mainTop01_text { width:95%; left:5%; top:50px;}

.main02_01 { font-size:3.5vw; padding:5% 0;}
.main02_02 { width:70%;}
.main02_03 { width:90%; margin-left:5%; margin-bottom:15%; }
.main02_03 p { font-size:0.9em; line-height:1.8em; margin:8% 0 10%; padding-left:10%;}
.main02_03_video { }
}

@media  (max-width: 560px){

}

#popup_video { display:none; position:fixed; width:calc(100vw * 0.8) !important;  height:calc(100vw * 0.45) !important; left:10%; top:5% !important; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); box-shadow:0 0 20px rgba(0, 0, 0, 0.5);  z-index:50;}
#popup_video .line { position:absolute; background:rgba(0,0,0,0.5); z-index:2;}
#popup_video .line01 { width:100%; height:10px; left:0; top:0;}
#popup_video .line02 { width:10px; height:calc(100% - 20px); right:0; top:10px;}
#popup_video .line03 { width:100%; height:10px; left:0; bottom:0;}
#popup_video .line04 {width:10px; height:calc(100% - 20px); left:0; top:10px;}
#popup_video .video_content { position:absolute; width:100%; height:100%; left:0; top:0; z-index:1;}
#popup_video .b-iframe {position:absolute; width:100%; height:100%; left:0; top:0;}
@media  (max-width: 1024px){
#popup_video { width:calc(100vw * 0.9) !important;  height:calc(100vw * 0.50625) !important; left:5%; top:12% !important; }
}

@media  (max-width: 768px){	
}

@media  (max-width: 559px){
#popup_video { width:100vw !important;  height:calc(100vw * 0.5625) !important; left:0; top:8% !important; }
}