/********** 메인 비주얼 **********/
#mainvisual { position:relative; }
.main_section { position:relative; height:100vh; overflow:hidden; }

.main_section .bg {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-position:center;
	background-repeat:no-repeat;
	opacity: 0;
	-ms-transform: scale(1.2, 1.2);
	-webkit-transform: scale(1.2, 1.2);
	-webkit-transition:transform 7s ease-out, opacity 1s ease 0.3s;
	transition:transform 7s ease-out, opacity 1s ease 0.3s;
	background-size:cover !important;
	z-index:-1;
}

.ani .main_section.slick-active .bg {
	opacity: 1;
	-ms-transform: scale(1, 1) rotate(.001deg);
	-webkit-transform: scale(1, 1) rotate(.001deg);
	transform: scale(1, 1) rotate(.001deg);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#main1 { background-color:#000; }
#main2 .bg { background-image:url('../images/main2.jpg'); }
#main3 .bg { background-image:url('../images/main3.jpg'); }
#main4 .bg { background-image:url('../images/main4.jpg'); }
#main5 .bg { background-image:url('../images/main5.jpg'); }
#main6 .bg { background-image:url('../images/main6.jpg'); }
#main7 .bg { background-image:url('../images/main7.jpg'); }

#video_wrap {
    position: absolute;
    top: 0;
	left:0;
    width: 100%;
    height: 100%;
    z-index:1;
	overflow: hidden;
	opacity:.85;
}

#video {
   width:100vw;
   height: 56.40vw;
   min-height: 100vh;
   min-width: 220vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.main_txt { position:absolute; display:table; width:100%; height:100%; z-index:100; }
.main_txt > div { display:table-cell; vertical-align:middle; text-align:center; }

.main_txt p { color:#fff; text-align:center; padding:0 20px; }

.mtxt_top { font-weight:700; font-size:25px; }
.mtxt_bold { font-weight:700; font-family:Ubuntu; font-size:82px; display:none; }
.mtxt_detail { font-weight:400; font-size:22px; letter-spacing:0; }



#mouse_wheel { position:absolute; width:60px; bottom:50px; left:50%; margin-left:-30px; z-index:100; cursor:pointer; }
#mouse_wheel div { width:24px; margin: 0 auto; height:38px; border:2px solid #fff; border-radius:12px; position:relative; }
#mouse_wheel div i { position:absolute; width:2px; height:6px; left:calc(50% - 1px); top:4px; background:#fff; border-radius:1px; margin-top:1px; animation-name: mouse; animation-duration: 1s; animation-iteration-count: infinite; }
#mouse_wheel p { text-align:center; color:#fff; font-size:11px; font-weight:500; }

@keyframes mouse{ 50% { top:9px; } }


.mv_arr { position:absolute; top:50%; margin-top:-32px; width:73px; height:73px; z-index:700; cursor:pointer; opacity:.6; transition:all .5s; }
.mv_arr:hover { opacity:1; }
.main-prev { left:60px;	background:url('../images/mv_prev.png') center no-repeat; }
.main-next { right:60px; background:url('../images/mv_next.png') center no-repeat; }



@media (max-width:1500px) {
	.main-prev { left:40px; }
	.main-next { right:40px; }
}

@media (max-width:1400px) {
	.main_section { height:760px; }
	#video { height:800px; min-height:800px; }
	.mtxt_top { font-size:22px; }
	.mtxt_bold { font-size:66px; }
	.mtxt_detail { font-size:20px; }
	.mv_arr { margin-top:-26px; width:54px; height:54px; background-size:54px; }
}

@media (max-width:1100px) {
	#mainvisual { margin-top:60px; }
	.main_section { height:600px; }
	#mouse_wheel { display:none; }
	.mtxt_top { font-size:20px; }
	.mtxt_bold { font-size:52px; }
	.mtxt_detail { font-size:19px; }
}

@media (max-width:820px) {
	#mainvisual, .main_section { height:450px; }
	#video { height:450px; min-height:450px; }
	.mtxt_top { font-size:18px; }
	.mtxt_bold { font-size:40px; }
	.mtxt_detail { font-size:16px; }
	.mv_arr { margin-top:-20px; width:40px; height:40px; background-size:40px; }
	.main-prev { left:24px; }
	.main-next { right:24px; }
}

@media (max-width:600px) {
	.mv_arr { margin-top:0; top:380px; width:30px; height:30px; background-size:30px; opacity:1; }
	.main-prev { left:50%; margin-left:-40px; }
	.main-next { right:50%; margin-right:-40px; }
}

@media (max-width:540px) {
	#mainvisual, .main_section { height:360px; }
	#video { height:450px; min-height:360px; }
	.mtxt_top { font-size:15px; }
	.mtxt_bold { font-size:30px; }
	.mtxt_detail { font-size:14px; }
	.mv_arr { top:300px; }
}




/********** 메인 타이틀 **********/

.main_tit { font-size:52px; font-weight:700; text-align:center; font-family:Ubuntu; }
.main_det { font-size:16px; color:#444; text-align:center; }
.main_tit .bk { color:#111; }

@media (max-width:1400px) {
	.main_tit { font-size:44px; }
	.main_det { font-size:15px; }
}
@media (max-width:1100px) {
	.main_tit { font-size:36px; }
}
@media (max-width:768px) {
	.main_tit { font-size:30px; }
	.main_det { font-size:14px; }
}
@media (max-width:540px) {
	.main_tit { font-size:24px; }
	.main_det { font-size:12.5px; }
}






/********** 메인 2D 3D **********/


#mainpf .pf_img { position:relative; height:220px; background-size:cover; background-position:center; background-repeat:no-repeat; }


#mainpf .vm_wrap { opacity:0; }
#mainpf .bg { position:absolute; width:100%; height:100%; background:#000; opacity:0; z-index:0; }
#mainpf .vm_wrap { position:absolute; width:100%; height:100%; z-index:1; }

#mainpf .vm p { color:#fff; font-size:17px; }
#mainpf .vm img { margin:auto; }

#mainpf li:hover .vm_wrap { opacity:1; }
#mainpf li:hover .bg { opacity:.7; }



@media (max-width:1600px) {
	#mainpf .vm p { font-size:16px; }
}

@media (max-width:1100px) {
	#mainpf .vm p { font-size:15px; }
	#mainpf .vm img { width:60px; }
}

@media (max-width:700px) {
	#mainpf .pf_img { height:160px; }
	#mainpf .vm p { font-size:14px; }
	#mainpf .vm img { width:40px; }
}

@media (max-width:420px) {
	#mainpf .pf_img { height:174px; }
}





/********** 아이콘 4 배너 **********/


#mainban ul { margin:0 -40px; }


/*
#mainban li { padding:0 -20px; }
*/


#mainban li, #mainban li a * { text-align:center; }
#mainban .ban_tit { color:#333; font-size:25px; font-weight:500; }
a.mban_btn { display:inline-block; font-weight:400; box-sizing:content-box; height:26px; line-height:26px; padding:0 26px; font-size:12px; color:#444; border:1px solid #777; border-radius:13px; }

a.mban_btn:hover { background-color:#444; border-color:#444; color:#fff; }



@media (max-width:1300px) {
	#mainban ul { margin:0; }
	#mainban div img { width:190px; }
	#mainban .ban_tit { font-size:22px; }

	a.mban_btn { height:23px; line-height:23px; padding:0 22px; border-radius:11.5px; }
}

@media (max-width:1100px) {
	#mainban div img { width:170px; }
	#mainban .ban_tit { font-size:20px; }
}


@media (max-width:900px) {
	#mainban ul { margin:-30px 70px; }
	#mainban li { width:50%; padding:30px 0; }
	#mainban div img { width:200px; }
}


@media (max-width:800px) {
	#mainban ul { margin:-25px 50px; }
	#mainban li { padding:25px 0; }
	#mainban div img { width:180px; }
	#mainban .ban_tit { font-size:18px; }
	a.mban_btn { height:21px; line-height:21px; padding:0 18px; border-radius:10.5px; }
}


@media (max-width:640px) {
	#mainban ul { margin:-25px 0; }

}
@media (max-width:540px) {
	#mainban ul { margin:-20px 0; }
	#mainban li { padding:20px 0; }
	#mainban div img { width:160px; }
	#mainban .ban_tit { font-size:16px; }
	a.mban_btn { height:20px; line-height:20px; padding:0 17px; border-radius:10px; }
}


@media (max-width:420px) {
	#mainban div img { width:140px; }
}





/********** CS 1단 배너 **********/

#maincs { padding:150px 40px; background:url('../images/main_cs.jpg') center no-repeat; text-align:center; background-size:cover; }
#maincs p { color:#fff; text-align:center; line-height:180%; }



a.cs_btn { display:inline-block; font-weight:400; box-sizing:content-box; height:50px; line-height:50px; padding:0 40px; font-size:15px; color:#111; background-color:#fff; border-radius:25px; }
a.cs_btn:after { float:right; margin-left:14px; width:21px; opacity:.8; background-image:url("/images/cs_arrow.png"); content:''; display:block; height:inherit; background-position:center; background-repeat:no-repeat; }

@media (max-width:1200px) {
	a.cs_btn { height:43px; line-height:43px; padding:0 34px; border-radius:21.5px; }
	a.cs_btn:after { float:right; width:18px; background-size:18px 18px; margin-left:11px }
}

@media (max-width:768px) {
	a.cs_btn { height:38px; line-height:38px; padding:0 28px; border-radius:19px; }
	a.cs_btn:after { float:right; width:15px; background-size:15px 15px; margin-left:10px }
}

@media (max-width:420px) {
	a.cs_btn { height:35px; line-height:35px; padding:0 26px; border-radius:17.5px; }
	#maincs p { color:#fff; text-align:center; line-height:170%; }
}