@charset "utf-8";
@import url(gnb_b.css);

body[data-page="main"] {overflow:hidden; overflow-y:auto;}
body[data-page="main"] #container {position:relative; height:calc(100% - 50px); margin-top:-80px;}     /* 푸터 높이 50px */

/*  MAIN    */
.main_quick {position:absolute; left:0; top:80px; z-index:200; width:70px; /*height:100%;*/ height:calc(100% - 50px); background:#2f3339;}
.main_quick ul {position:absolute; left:0; top:50%; width:100%; transform:translate(0, -50.01%);}
.main_quick ul li {display:table; width:100%;}
.main_quick ul li.on i::before {color:#b7b7b7;}
.main_quick ul li button, .main_quick ul li a {display:table-cell; position:relative; width:100%; height:70px; font-size:0.875rem; color:#fff; line-height:1.4; text-align:center; vertical-align:middle; background:#3d4956;}
.main_quick ul li i {display:block; position:absolute; left:0; top:0; width:100%; height:70px; text-align:center; background:#2f3339; transition:opacity .2s;}
.main_quick ul li i::before {display:inline-block; content:""; font-family:"FontAwesome"; font-size:1.25rem; color:#777; line-height:70px;}
.main_quick ul li.q_pop i::before {content:"\f2d2";}
.main_quick ul li.q_emodel i::before {content:"\f0f7";}
.main_quick ul li.q_sale i::before {content:"\f1ea";}
.main_quick ul li.q_movie i::before {content:"\f01d";}
.main_quick ul li.q_location i::before {content:"\f278";}
.main_quick ul li.q_reg i::before {content:"\f044";}
.main_quick ul li button:hover i, .main_quick ul li button:focus i,
.main_quick ul li a:hover i, .main_quick ul li a:focus i {opacity:0;}

.main_banner {position:absolute; right:0; top:80px; z-index:200; width:140px;}
.main_banner ul li {display:table; width:100%; min-height:80px;}
.main_banner ul li p, .main_banner ul li a {display:table-cell; overflow:hidden; width:100%; font-family:"notokr-medium"; font-size:1rem; line-height:1.4; text-align:center; vertical-align:middle;}
.main_banner ul li:first-child {background:#283444;}
.main_banner ul li:first-child p {padding:10px 0; color:#decbad; letter-spacing:-1px;}
.main_banner ul li:first-child p strong {display:block;}
.main_banner ul li:first-child p span {font-size:0.875rem; display:block;}

.main_visual {height:100%; min-height:640px; transition:height .4s;}
.main_visual .visual_list {height:100%;}
.main_visual .visual_list .slick-list, .main_visual .visual_list .slick-track {height:100%;} 
.main_visual .visual_list li.slick-slide {width:100%; height:100%;}
.main_visual .visual_list .titletype_01 {font-size:2.188rem;}
.main_visual .visual_list .titletype_01 pre.subtit {margin-top:2.5rem; font-size:1.563rem;}
.main_visual .visual_list .titletype_01 strong {margin-top:1rem; font-size:4.063rem;}
.main_visual .visual_list .titletype_02>p span {font-size:1.875rem;}
.main_visual .visual_list .titletype_02>strong {margin-top:2.5rem;}
.main_visual .visual_list .titletype_02>strong pre {font-size:3.125rem;}
.main_visual .visual_list .titletype_02>pre.detailtxt {margin-top:1.25rem; font-size:1.125rem;}
.main_visual .thumb_list {position:absolute; left:0; bottom:30px; z-index:250; width:100%; text-align:center;}
.main_visual .thumb_list li {display:inline-block; position:relative; width:100px; height:56px; margin-left:10px;}
.main_visual .thumb_list li:first-child {margin-left:0;}
.main_visual .thumb_list li button {width:100%; height:100%; border:4px solid #fff; opacity:0.7;}
.main_visual .thumb_list li.on button {border-color:#006899; opacity:1;}


@media screen and (min-width:1024px) and (max-width:1400px) {
    .main_banner {width:160px;}
}

/* tablet */
@media screen and (max-width:1024px) {
    
}

@media screen and (min-width:640px) and (max-width:1024px) {
    .main_visual {height:640px;}
    .main_visual .visual_list li.slick-slide {height:640px;}
}

/* mobile */
@media screen and (max-width:640px) {
    .main_visual .thumb_list {bottom:2.143rem;}
    .main_visual .thumb_list li {width:13px; height:13px; margin-left:10px; background:none;}
    .main_visual .thumb_list li button {opacity:1; vertical-align:middle; background:#fff; border:0; border-radius:50%;}
    .main_visual .thumb_list li.on button {background:#006899; border:0;}
}