@charset "utf-8";

/****************************** main ******************************/
.main header{position:absolute; top:0; left:0; z-index:2}
.main section{z-index:1}

.main .cont-1{position:absolute; top:0; left:0; width:100%; height:100%;background-size:cover;background-position:center center;}
.main .cont-1 .wrap-txt{position:absolute; top:0; left:0; width:100%; height:100%; text-align:center}
.main .cont-1 .wrap-txt h2{margin-bottom:11px; color:#fff; line-height:86px; letter-spacing:5px; font-size:86px; font-weight:900}
.main .cont-1 .wrap-txt p{color:#fff; line-heighT:28px; letter-spacing:2.2px; font-size:28px; font-weight:100}
.player-controller{display: none; position: absolute;bottom: 4rem;right: 50px;left: 0;margin: 0 auto;text-align: right;z-index: 1;}
.player-controller a{display: inline-block;width: 50px;height: 50px;font-size: 0;text-indent: -9999%;transition:all .3s;margin-left: 5px;}
.player-controller .controll-skip{background: url('/images/main/ico_skip.png') 0 0 no-repeat;}
.player-controller .controll-sound{background: url('/images/main/ico_sound.png') 0 0 no-repeat;}
.player-controller .controll-mute{background: url('/images/main/ico_mute.png') 0 0 no-repeat;}
.player-controller .controll-skip:hover{background: url('/images/main/ico_skip_over.png') 0 0 no-repeat;}
.player-controller .controll-sound:hover{background: url('/images/main/ico_sound_over.png') 0 0 no-repeat;}
.player-controller .controll-mute:hover{background: url('/images/main/ico_mute_over.png') 0 0 no-repeat;}

.main .cont-1-sm{position: relative; top:0; left:0; width:100%; height:100%}
.main .cont-1-sm .wrap-txt{position:absolute; top:0; left:0; width:100%; height:100%; text-align:center}
.main .cont-1-sm .wrap-txt h2{margin-bottom:1rem; color:#fff; line-height:3.583rem; letter-spacing:2px; font-size:3.583rem; font-weight:900}
.main .cont-1-sm .wrap-txt p{margin-bottom:1.666rem; color:#fff; line-height:1.25rem; letter-spacing:1.5px; font-size:1.25rem; font-weight:100}
.btn-play{width:4.416rem; height:4.416rem; margin:0 auto; background:url(/images/main/btn_play.png) 0 0 no-repeat;background-size:4.4rem;}


.main .wrap-mouse{position:absolute; bottom:4.5rem; left:50%; margin-left:-13px}
.main .mouse{position:relative}
.main .mouse .bg{display:block}
.main .mouse .obje{display:block; position:absolute; top:7px; left:50%; margin-left:-2px}

.main .cont-2{overflow:hidden; position:relative; padding:3.333rem 0 6.666rem 0; background:#f1f1f1; text-align:center}
.main .cont-2 .bg{position:absolute; top:-80px; left:50%; margin-left:-330px; width:660px; height:429px; opacity:0}
.main .cont-2 .bg-obje{width:100%; height:100%}
.main .cont-2 .bg-before{width:100%; height:100%; background:url(/images/main/cont2_img.png) 50% 0 no-repeat; background-size:27.5rem auto}
.main .cont-2 .bg-after{position:absolute; top:0; left:0; width:100%; height:100%; background:url(/images/main/cont2_img_2.png) 50% 0 no-repeat; background-size:27.5rem auto; opacity:0}

.main .cont-2 h3{margin:0 0 1.875rem 0; color:#111; line-height:2.416rem; font-size:1.916rem; font-weight:bold; opacity:0}
.main .cont-2 ul {max-width:320px;margin:0 auto}
.main .cont-2 ul li{position:relative; top:40px; margin-bottom:15px; opacity:0}
.main .cont-2 ul li.li1,
.main .cont-2 ul li.li3{padding-right:7.5px}
.main .cont-2 ul li.li2,
.main .cont-2 ul li.li4{padding-left:7.5px}
.main .cont-2 ul li .inner{display:block; position:relative; height:25rem; padding:7.25rem 10px 0 10px;  background:#fff
	transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
	background-size:4rem !important;
	background-position: 50% 2.083rem !important;
}
.main .cont-2 ul li:hover .inner{
	transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
}
.main .cont-2 ul li.li1 .inner{background:#fff url(/images/main/cont2_icon1_off.png) center 50px no-repeat}
.main .cont-2 ul li.li1:hover .inner{background:#fff url(/images/main/cont2_icon1_on.png) center 50px no-repeat}
.main .cont-2 ul li.li2 .inner{background:#fff url(/images/main/cont2_icon2_off.png) center 50px no-repeat}
.main .cont-2 ul li.li2:hover .inner{background:#fff url(/images/main/cont2_icon2_on.png) center 50px no-repeat}
.main .cont-2 ul li.li3 .inner{background:#fff url(/images/main/cont2_icon3_off.png) center 50px no-repeat}
.main .cont-2 ul li.li3:hover .inner{background:#fff url(/images/main/cont2_icon3_on.png) center 50px no-repeat}
.main .cont-2 ul li.li4 .inner{background:#fff url(/images/main/cont2_icon4_off.png) center 50px no-repeat}
.main .cont-2 ul li.li4:hover .inner{background:#fff url(/images/main/cont2_icon4_on.png) center 50px no-repeat}

.main .cont-2 ul li .title{min-height:2.666rem; margin:0 0 1rem 0; color:#111; line-height:1.7rem; font-size:1.3rem; font-weight:bold}
.main .cont-2 ul li.li1 .title{padding-top:.583rem;}
.main .cont-2 ul li.li4 .title{padding-top:.583rem;}
.main .cont-2 ul li .txt{color:#666; line-height:1.6rem; font-size:1rem}

.main .cont-2 ul li .wrap-btn-more{position:absolute; bottom:1.786rem; left:0; width:100%; text-align:center}
.main .cont-2 ul li .btn-more{display:inline-block; position:relative; padding:0 .917rem .333rem 0; background:url(/images/main/btn_more.png) right .167rem no-repeat; color:#111; line-height:0.75rem; font-size:0.75rem;background-size:6px;
	transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
}
.main .cont-2 ul li:hover .btn-more{background:url(/images/main/btn_more_on.png) right .167rem no-repeat; color:#1257ab;background-size:6px;
	transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
}
.main .cont-2 ul li .btn-more .animate{display:block; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#111}
.main .cont-2 ul li .btn-more .animate .obje{display:block; position:absolute; top:0; width:0; height:2px; background:#1257ab;
	transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
}
.main .cont-2 ul li:hover .btn-more .animate .obje{width:100%;
	transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
}

.main .cont1-pop .modal-dialog{width:85%;margin:50% auto ;background: none;}
.main .cont1-pop .modal-content{background: none;}
.main .cont1-pop .modal-content .wrapYoutube{position: relative;width: 100%;padding-bottom: 56.25%;}
.main .cont1-pop .modal-content .wrapYoutube iframe{position: absolute;width: 100%;height: 100%;}
.main .cont1-pop .btn-close{overflow:hidden; position:absolute; top:-2.417rem; right:0; width:1.75rem; height:1.75rem; background:url(/images/main/pop_btn_close.png) 0 0 no-repeat;background-size: 1.75rem; text-indent:-9999px;}

.main .cont2-pop{padding-right:0 !important}
.main .cont2-pop .modal-dialog{width:85%; margin:10px auto !important;}
.main .cont2-pop .modal-content{position:relative; padding:60px 0 0 0; text-align:center;}
.main .cont2-pop h4{margin:0 0 1.667rem 0; padding:5rem 0 0 0; color:#111; line-height:1.917rem; font-size:1.917rem; font-weight:bold;background-size: 3.333rem !important;}
.main .cont2-pop1 h4{background:url(/images/main/cont2_icon1_on.png) center top no-repeat;}
.main .cont2-pop2 h4{background:url(/images/main/cont2_icon2_on.png) center top no-repeat;}
.main .cont2-pop3 h4{background:url(/images/main/cont2_icon3_on.png) center top no-repeat;}
.main .cont2-pop4 h4{background:url(/images/main/cont2_icon4_on.png) center top no-repeat;}
.main .cont2-pop p{margin:0 0 3.333rem 0; color:#666; line-height:1.75rem; font-size:1.083rem;padding:0 1.083rem;}
.main .cont2-pop img{display:block;max-width:100%;width: 100%;}
.main .cont2-pop .btn-close{overflow:hidden; position:absolute; top:1.417rem; right:1.417rem; width:1.75rem; height:1.75rem; background:url(/images/main/pop_btn_close.png) 0 0 no-repeat;background-size: 1.75rem; text-indent:-9999px}

@media screen and (min-width: 768px) {
	.main .cont-2 ul{max-width:none }

}
@media screen and (min-width: 992px) {
	.player-controller{display: block;}
	.main .cont-2{padding-top:80px}

	.main .cont-2 .bg{margin-left:-430px; width:860px; height:559px}
	.main .cont-2 .bg-before{background:url(/images/main/cont2_img.png) 0 0 no-repeat; background-size:860px}
	.main .cont-2 .bg-after{background:url(/images/main/cont2_img_2.png) 0 0 no-repeat; background-size:860px}

	.main .cont-2 h3{line-height:62px; font-size:50px}
	.main .cont-2 ul {max-width: none;}
	.main .cont-2 ul li{margin-bottom:0}
	.main .cont-2 ul li.li2{padding-right:7.5px}
	.main .cont-2 ul li.li3{padding-left:7.5px}

	.main .cont-2 ul li .inner{height:484px; padding:155px 10px 0 10px;background-size: auto !important;background-position: 50% 50px !important;}
	.main .cont-2 ul li .title{margin:0 0 17px 0;}
	.main .cont-2 ul li .wrap-btn-more{bottom:50px;}
	.main .cont-2 ul li .btn-more {padding:0 16px 9px 0;background-size: auto;background-position: right 4px !important;}
	.main .cont-2 ul li:hover .btn-more {background-size: auto;background-position: right 4px !important;}
	.main .cont-2 ul li .btn-more .animate{ height:4px;}
	.main .cont-2 ul li .btn-more .animate .obje{ height:4px; }	

	.main .cont2-pop .modal-dialog{width:570px;margin:30px auto !important}
	.main .cont2-pop h4{margin:0 0 27px 0; padding:118px 0 0 0; line-height:30px; font-size:30px;background-size: auto !important; }
	.main .cont2-pop p{margin:0 0 54px 0; line-height:28px; font-size:16px;padding:0;}
	.main .cont2-pop .btn-close{top:25px; right:25px; width:28px; height:28px; background-size: auto;}



}

@media screen and (min-width: 1200px) {
	.main .cont-2 ul li.li1{padding-right:15px}
	.main .cont-2 ul li.li2,
	.main .cont-2 ul li.li3{padding-right:15px; padding-left:15px}
	.main .cont-2 ul li.li4{padding-left:15px}
	.main .cont-2 ul li .title{min-height:64px;line-height:32px; font-size:24px;}
	.main .cont-2 ul li.li1 .title{padding-top:15px;}
	.main .cont-2 ul li.li4 .title{padding-top:15px;}
	.main .cont-2 ul li .txt{color:#666; line-height:28px; font-size:16px}
	.main .cont-2 ul li .inner{}
	.main .cont-2 ul li .btn-more{padding:0 16px 9px 0; line-height:14px; font-size:14px;}
}