@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Muli:400,600');
@import url('reset.css');

/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:9999; width:100%; height:1px; margin-top:-1px; display:block; background-color:#3875c1; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:10px 0px}

/* common */
#wrap{width:82%;max-width:1562px;margin:0 auto}
.img-responsive {display:block; max-width:100%; height:auto}
.width100{width:100%;padding:0; margin:0}
.mobile{display:none}
.mobile2{display:none}
.auto {margin:0 auto}

/* header */
header{margin:50px 0;}
.vol{position:absolute; top:65px; left:9%; z-index:999;font-family: 'Muli', sans-serif;font-size:16px;color:#1b1b1b;}
.logo {width:150px; margin:0 auto; z-index:999;}
.btn_side {position:absolute; top:50px; right:9%; z-index:999}
.sidetitile{font-family:'Open Sans', sans-serif;font-size:38px;color:#000;text-align:center;padding-top:2%;font-weight:500}

/* menu */
#side{display:none; z-index:9999; width:100%; right:-100%; height:100%; position:fixed;top:0; background:#fff;padding:0; margin:0}
#mask {position:absolute; z-index:999; background:rgba(0,0,0,0.8) 0 0; display:none; left:0; top:0; width:100%; height:100%; overflow:hidden;margin:0;padding:0}
.close {display:none; position:absolute; top:50px; right:80px; width:35px; height:33px; background-image:url('../../../img/btn_close.png'); background-position:0 0;background-size:35px 33px;text-indent:-9999px; opacity:1}

/*menu listWrap */
.listWrap02 {text-align:center; margin:2% auto 5% auto; width:80%;}
.listWrap02 a {width:18%; max-width:280px; display:inline-block; text-align:left; padding:0 2%; margin-bottom:3%; vertical-align:top; box-sizing:border-box}
.listWrap02 a .listTitle {font-size:14px; margin:15px 0 10px 0; display:block; color:#000;font-weight:700;}
.listWrap02 a .listTxt {font-size:13px; line-height:150%; display:block; color:#707070;font-weight:400;}
.listWrap02 a div {overflow:hidden; background:#fff}
.listWrap02 a div img {transition: all 0.3s ease-in-out}
.listWrap02 a div img:hover {transform:scale(1.1,1.1)}

/* mainVisual */
.main_visual_mob{display:none}
.main_visual_web{display:block;margin-bottom:2%}
/*이벤트*/
.main_event_web{position:relative;display:block;margin-bottom:2%}
/*특집*/
.main_con01 {position:relative; width:66%; max-width:1030px; display:block; float:left; background:#000; margin:0 2% 2% 0;}
.main_con01 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.main_con01:hover img {opacity:0.7;}
.main_con01 a .txtbox {position:absolute; top:40px; left:0; padding:0 40px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.main_con01 a .txtbox h2 {font-size:24px;font-family: 'Noto Sans', sans-serif;font-weight:bold;}
.main_con01 a .txtbox h3 {font-family: 'Noto Sans', sans-serif; font-size:18px; font-weight:normal; margin-top:7px}

.main_con02 {position:relative; width:32%; max-width:498px; display:block; float:left; background:#000; margin:0 0 2% 0;}
.main_con02 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.main_con02:hover img {opacity:0.7;}
.main_con02 a .txtbox {position:absolute; top:40px; left:0; padding:0 40px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.main_con02 a .txtbox h2 {font-size:24px;font-family: 'Noto Sans', sans-serif;font-weight:bold;}
.main_con02 a .txtbox h3 {font-family: 'Noto Sans', sans-serif; font-size:18px; font-weight:normal; margin-top:7px}

.main_con03 {position:relative; width:32%; max-width:498px; display:block; float:left; background:#000; margin:0 2% 0 0;}
.main_con03 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.main_con03:hover img {opacity:0.7;}
.main_con03 a .txtbox {position:absolute; top:40px; left:0; padding:0 40px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.main_con03 a .txtbox h2 {font-size:24px;font-family: 'Noto Sans', sans-serif;font-weight:bold;}
.main_con03 a .txtbox h3 {font-family: 'Noto Sans', sans-serif; font-size:18px; font-weight:normal; margin-top:7px}

.main_con04 {position:relative; width:66%; max-width:1030px; display:block; float:left; background:#000; margin:0 0 2% 0;}
.main_con04 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.main_con04:hover img {opacity:0.7;}
.main_con04 a .txtbox {position:absolute; top:40px; left:0; padding:0 40px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.main_con04 a .txtbox h2 {font-size:24px;font-family: 'Noto Sans', sans-serif;font-weight:bold;}
.main_con04 a .txtbox h3 {font-family: 'Noto Sans', sans-serif; font-size:18px; font-weight:normal; margin-top:7px}

.main_con05 {position:relative; width:49%; max-width:764px; display:block; float:left; background:#000; margin:0 2% 2% 0;padding:0}
.main_con05 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.main_con05:hover img {opacity:0.7;}
.main_con05 a .txtbox {position:absolute; top:40px; left:0; padding:0 40px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.main_con05 a .txtbox h2 {font-size:24px;font-family: 'Noto Sans', sans-serif;font-weight:bold;}
.main_con05 a .txtbox h3 {font-family: 'Noto Sans', sans-serif; font-size:18px; font-weight:normal; margin-top:7px}

.main_con06 {position:relative; width:49%; max-width:764px; display:block; float:left; background:#000; margin:0 0 2% 0;}
.main_con06 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.main_con06:hover img {opacity:0.7;}
.main_con06 a .txtbox {position:absolute; top:40px; left:0; padding:0 40px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.main_con06 a .txtbox h2 {font-size:24px;font-family: 'Noto Sans', sans-serif;font-weight:bold;}
.main_con06 a .txtbox h3 {font-family: 'Noto Sans', sans-serif; font-size:18px; font-weight:normal; margin-top:7px}

/*일반콘텐츠*/
.main_con07 {position:relative; width:23.5%; max-width:764px; display:block; float:left; background:#000; margin:0 2% 5% 0;}
.main_con07 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.main_con07:hover img {opacity:0.7;}
.main_con07 a .txtbox {position:absolute; top:30px; left:0; padding:0 40px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.main_con07 a .txtbox h2 {font-size:22px;font-family: 'Noto Sans', sans-serif;font-weight:bold;}
.main_con07 a .txtbox h3 {font-family: 'Noto Sans', sans-serif; font-size:16px; font-weight:normal; margin-top:7px}

.main_con08 {position:relative; width:23.5%; max-width:764px; display:block; float:left; background:#000; margin:0 0 5% 0;}
.main_con08 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.main_con08:hover img {opacity:0.7;}
.main_con08 a .txtbox {position:absolute; top:30px; left:0; padding:0 40px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.main_con08 a .txtbox h2 {font-size:22px;font-family: 'Noto Sans', sans-serif;font-weight:bold;}
.main_con08 a .txtbox h3 {font-family: 'Noto Sans', sans-serif; font-size:16px; font-weight:normal; margin-top:7px}


.main_con09 {position:relative; width:23.5%; max-width:764px; display:block; float:left; background:#000; margin:0 2% 5% 0;}
.main_con09 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.main_con09:hover img {opacity:0.7;}
.main_con09 a .txtbox {position:absolute; top:30px; left:0; padding:0 40px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.main_con09 a .txtbox h2 {font-size:22px;font-family: 'Noto Sans', sans-serif;font-weight:bold;}
.main_con09 a .txtbox h3 {font-family: 'Noto Sans', sans-serif; font-size:16px; font-weight:normal; margin-top:7px}


/* footer */
.footer_top{overflow:hidden; width:100%; background:#f4f4f4; padding:3% 0;}
.footer_top_box{width:82%;max-width:1562px;margin:0 auto}
.footer_btn{width:80%;margin:0}
.footer_btn li{list-style:none;display:block; float:left; text-align:center;width:17%;border:1px solid #0b0306; margin-right:10px;font-family: 'Noto Sans', sans-serif; font-size:12px;color:#313131}
.footer_btn li:hover{background:#0b0306; color:#fff}
.footer_btn a{display:block; color:#313131;padding:13px 1%;}
.footer_btn li a:hover{color:#fff}

.follow{float:right; width:170px;}
.follow ul {overflow:hidden;}
.follow ul li {list-style:none;display:block; float:left; margin-left:10px;}
.tbs{float:right;margin:8px 3% 0 0}

footer {clear:both;width:100%;padding:60px 0; text-align:center}
footer .copy {clear:both;font-family:'Verdana', 'Geneva', sans-serif; font-size:11px; color:#686868; margin-top:15px}
footer .flogo{overflow:hidden; max-width:500px; margin:0 auto;}
footer .flogo a{float:left; margin: 0 10px 0 10px}
.f1{padding: 5px 0 0 10px}





@media screen and (max-width:1680px) {
.footer_btn{width:85%;}
.footer_btn li{width:18%;margin-right:10px; font-size:11px;}
.footer_btn a{padding:10px 5px;}
}
@media screen and (max-width:1440px) {
.main_con01 a .txtbox h2, .main_con02 a .txtbox h2, .main_con03 a .txtbox h2, .main_con04 a .txtbox h2, .main_con05 a .txtbox h2, .main_con06 a .txtbox h2{font-size:22px;}
.main_con01 a .txtbox h3, .main_con02 a .txtbox h3, .main_con03 a .txtbox h3, .main_con04 a .txtbox h3, .main_con05 a .txtbox h3, .main_con06 a .txtbox h3{font-size:16px;}

.main_con07 a .txtbox h2, .main_con08 a .txtbox h2, .main_con09 a .txtbox h2{font-size:20px;}
.main_con07 a .txtbox h3, .main_con08 a .txtbox h3, .main_con09 a .txtbox h3{font-size:14px;}
}

/*노트북*/
@media screen and (max-width:1366px) {
.listWrap02{width:90%}
.footer_btn{width:85%}
.footer_btn li{font-size:11px}
.main_con01 a .txtbox, .main_con02 a .txtbox, .main_con03 a .txtbox, .main_con04 a .txtbox, .main_con05 a .txtbox, .main_con06 a .txtbox{top:30px; padding:0 30px;}
.main_con07 a .txtbox, .main_con08 a .txtbox, .main_con09 a .txtbox{top:20px; padding:0 20px;}
}

@media screen and (max-width:1280px) {
.close{top:40px; right:70px; width:30px; height:28px;background-size:30px 28px;}

.footer_btn li{font-size:10px;width:17%;}
.footer_btn a{padding:8px 2px;}

.follow{width:140px}
.follow ul li{margin-left:3px}
.follow ul li img{width:80%;}
.tbs{margin:5px 1% 0 0}
.tbs img{width:80%}
}
/*아이패드 미니-가로*/
@media screen and (max-width:1024px) {
.main_con01 a .txtbox, .main_con02 a .txtbox, .main_con03 a .txtbox, .main_con04 a .txtbox, .main_con05 a .txtbox, .main_con06 a .txtbox{top:20px; padding:0 20px;}
.main_con07 a .txtbox, .main_con08 a .txtbox, .main_con09 a .txtbox{top:15px; padding:0 15px;}

.main_con01 a .txtbox h2, .main_con02 a .txtbox h2, .main_con03 a .txtbox h2, .main_con04 a .txtbox h2, .main_con05 a .txtbox h2, .main_con06 a .txtbox h2{font-size:20px;}
.main_con01 a .txtbox h3, .main_con02 a .txtbox h3, .main_con03 a .txtbox h3, .main_con04 a .txtbox h3, .main_con05 a .txtbox h3, .main_con06 a .txtbox h3{font-size:14px;}

.main_con07 a .txtbox h2, .main_con08 a .txtbox h2, .main_con09 a .txtbox h2{font-size:18px;}
.main_con07 a .txtbox h3, .main_con08 a .txtbox h3, .main_con09 a .txtbox h3{font-size:12px;}

}
@media screen and (max-width:960px) {
#side{overflow:scroll}
.sidetitile{padding:5% 0 3% 0}
.listWrap02 a {width:30%;margin-bottom:6%;}
#wrap{width:90%}
.vol{left:5%;}
.btn_side{right:5%}
.main_con01 a .txtbox, .main_con02 a .txtbox, .main_con03 a .txtbox, .main_con04 a .txtbox, .main_con05 a .txtbox, .main_con06 a .txtbox {top:15px; padding:0 20px;}
.main_con07 a .txtbox, .main_con08 a .txtbox, .main_con09 a .txtbox{top:10px; padding:0 15px;}

.main_con01 a .txtbox h2, .main_con02 a .txtbox h2, .main_con03 a .txtbox h2, .main_con04 a .txtbox h2, .main_con05 a .txtbox h2, .main_con06 a .txtbox h2{font-size:18px;}
.main_con01 a .txtbox h3, .main_con02 a .txtbox h3, .main_con03 a .txtbox h3, .main_con04 a .txtbox h3, .main_con05 a .txtbox h3, .main_con06 a .txtbox h3{font-size:14px;font-weight:bold}
.main_con04 a .txtbox h3 i{font-size:14px;font-weight:bold}

.main_con07 a .txtbox h2, .main_con08 a .txtbox h2, .main_con09 a .txtbox h2{font-size:16px;}
.main_con07 a .txtbox h3, .main_con08 a .txtbox h3, .main_con09 a .txtbox h3{font-size:12px;font-weight:bold}
.footer_top_box{width:90%}
.footer_btn{width:100%;margin-bottom:30px}
.footer_btn li{width:23%;margin:0 0.5%}
.follow{clear:both;width:100%;float:left}
.follow ul{width:140px;margin:30px auto;}
.tbs{width:88px;margin:20px auto;float:none}

}

/*아이패드 미니-세로, 아이폰 XS-가로*/
@media screen and (max-width:768px) {
.vol{font-size:12px;}
.logo{width:130px;}
.main_visual_mob{display:block;margin-bottom:2%}
.main_visual_web{display:none;}
.main_con07{width:49%;margin:0 2% 2% 0;}
.main_con08, .main_con09{width:49%;margin:0 0 2% 0;}

.main_con01 a .txtbox, .main_con02 a .txtbox, .main_con03 a .txtbox, .main_con04 a .txtbox, .main_con05 a .txtbox, .main_con06 a .txtbox{top:10px; padding:0 15px;}
.main_con07 a .txtbox, .main_con08 a .txtbox, .main_con09 a .txtbox{top:15px; padding:0 20px;}
.main_con01 a .txtbox h2, .main_con02 a .txtbox h2, .main_con03 a .txtbox h2, .main_con04 a .txtbox h2, .main_con05 a .txtbox h2, .main_con06 a .txtbox h2, .main_con07 a .txtbox h2, .main_con08 a .txtbox h2, .main_con09 a .txtbox h2{font-size:16px;}
.main_con01 a .txtbox h3, .main_con02 a .txtbox h3, .main_con03 a .txtbox h3, .main_con04 a .txtbox h3, .main_con05 a .txtbox h3, .main_con06 a .txtbox h3, .main_con07 a .txtbox h3, .main_con08 a .txtbox h3, .main_con09 a .txtbox h3{font-size:12px;}
.main_con04 a .txtbox h3 i{font-size:12px;}

.footer_top_box{width:90%}
.footer_btn li{width:22%;margin:0 0.5%;}
.footer_btn a{padding:8px 2px;}

}

@media screen and (max-width:570px) {
header{margin:35px 0 35px 0;}
.vol{font-size:11px;top:38px}
.logo{width:80px;}
.btn_side{top:35px;right:5%}
.btn_side img{width:70%;}
.listWrap02{width:95%;margin:4% auto 5% auto;}
.listWrap02 a {width:45%;margin-bottom:6%;padding:0 4%;}
.close{top:30px; right:30px; width:20px; height:19px;background-size:20px 19px;}
.sidetitile{font-size:24px;padding-top:4%;font-weight:500}
.mobile{display:block}
.web{display:none}
.main_con03{width:100%;margin:0 2% 2% 0}
.main_con01, .main_con02, .main_con03, .main_con04, .main_con05, .main_con06, .main_con07, .main_con08, .main_con09{width:100%;}
.main_con01 a .txtbox, .main_con02 a .txtbox, .main_con03 a .txtbox, .main_con04 a .txtbox, .main_con05 a .txtbox, .main_con06 a .txtbox, .main_con07 a .txtbox, .main_con08 a .txtbox, .main_con09 a .txtbox{top:20px; padding:0 20px;}
.main_con01 a .txtbox h2, .main_con02 a .txtbox h2, .main_con03 a .txtbox h2, .main_con04 a .txtbox h2, .main_con05 a .txtbox h2, .main_con06 a .txtbox h2,.main_con07 a .txtbox h2, .main_con08 a .txtbox h2, .main_con09 a .txtbox h2{font-size:20px;}
.main_con01 a .txtbox h3, .main_con02 a .txtbox h3, .main_con03 a .txtbox h3, .main_con04 a .txtbox h3, .main_con05 a .txtbox h3, .main_con06 a .txtbox h3, .main_con07 a .txtbox h3, .main_con08 a .txtbox h3, .main_con09 a .txtbox h3{font-size:14px;font-weight:normal}
.main_con04 a .txtbox h3 i{font-size:14px;font-weight:normal}
.footer_btn li{font-size:10px;width:47%; margin:2px 2px}
footer{padding:30px 0}
footer .flogo a{position:relative;width:100%;margin:1% auto;text-align:center}
}

/*아이폰XS*/
@media screen and (max-width:425px) {
.footer_top_box{width:60%; margin:0 auto}
.footer_btn li{font-size:10px;width:100%; margin:1% auto;}
.footer_btn a{padding:10px 0}
}

@media screen and (max-width:360px) {
.footer_top_box{width:70%; margin:0 auto}
.footer_btn li{font-size:10px;width:100%; margin:1% auto;}
.footer_btn a{padding:10px 0}
}

@media screen and (max-width:320px) {

}