@charset "utf-8";
.m_contents {overflow:hidden; background:url("/images/13_youth/main/main_bg.jpg") no-repeat bottom center;}
.m_con_wrap1{ padding:0 0px 110px 0px; margin:auto 0;overflow:hidden;}

.m_con_visual{overflow:hidden; position:relative;  height:280px;}
.m_con_visual .visual_img  li img{width:100%; height:280px;}
.m_con_visual .visual_img .off{display:none;}
.m_con_visual .visual_img .on{display:block;}
.m_con_visual .visual_img li{float:left;}
.m_con_visual .visual_img a img{width:100%; height:280px;}
.m_con_visual .play_btn{background:#456bbf; padding:0px;  position:absolute; top:0; right:0; background-color:#372f2d; }
.m_con_visual .play_btn li{ display:inline-block;color:#fff; line-height:1.1em;}
/*.m_con_visual .play_btn .i_stop{background:url("/images/13_youth/main/visual_stop.png")no-repeat 2px; padding:15px; border-left:solid 1px #fff; }
.m_con_visual .play_btn .i_play{background:url("/images/13_youth/main/visual_play.png")no-repeat 12px; padding:15px; border-left:solid 1px #fff;}*/
.m_con_visual .play_btn .off{display:none;}
.m_con_visual .play_btn li a{display:block; border-left: solid 1px #fff; }
.i_count{ margin: 5px 2px; padding:1px 15px; color:#fff;}

.m_con_bbs{background:#f6f7fb; height:280px; width:100%; position:relative; overflow:hidden;  float:left;}
.m_con_bbs .on{background:url("/images/13_youth/main/bbs_skin.jpg")no-repeat ;background-size:cover; width:100%; height:55px; font-size:17px;   float:left;} 
.m_con_bbs .center_line {display:block;   position:absolute; top:20px; left:87px;}
.m_con_bbs .bbs_hide {font-size:17px; position:absolute; top:0; left:80px;}
.m_con_bbs .bbs_list{margin-top:25px;}
.m_con_bbs ul {position:absolute; padding:45px 0 ; width:100%}
.m_con_bbs li{display:block; margin:17px;}
.m_con_bbs li:hover{font-weight:600;}
.m_con_bbs li a{display:block;}
.m_con_bbs li .bbs_icon{display:inline-block; background:url("/images/13_youth/main/bbs_dot.png")  no-repeat ;  padding:0 15px 0;  text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; width:80% }
.m_con_bbs li .bbs_date{display:none;}
.m_con_bbs h2 a{color:#fff; font-weight:400; display:inline-block; padding:0; margin:15px 5px 10px 20px;  float:left;}
.m_con_bbs h2 a:hover{font-weight:600; border-bottom:solid 3px #fff;}
.m_con_bbs .bbs_more a{display:block;  position:absolute; top:15px; right: 10px;} 


.m_con_gallery{width:100%; background-color:#fff;  float:left; position:relative; overflow:hidden;  height: 350px;}
.m_con_gallery h2{font-size:17px; text-align:center;  margin:15px 10px; padding:10px; color:#00265e;}
.m_con_gallery h2 span{color:#0064f5;}

.m_con_gallery .play_btn2{display:block;width: 100%;position: absolute;top: 45%;}
.m_con_gallery .play_btn2 ul li {float:left;  display:block;}
.m_con_gallery .play_btn2 ul .off {display:none;}
.m_con_gallery .play_btn2 ul li a{display:inline-block;}
.m_con_gallery .play_btn2 ul li img {width:100%;}
.m_con_gallery .play_btn2 .i_prev{background:#6b8bba;width:40px;height:35px; margin-left: 2%;}
.m_con_gallery .play_btn2 .i_next{background:#6b8bba;width:40px;height:35px; position:absolute; right:2%}
.m_con_gallery .play_btn2 .i_stop,.m_con_gallery .play_btn2 .i_more,.m_con_gallery .play_btn2 .i_play {display:none;}


.m_con_gallery .gallery_photo {background-color:#fff; padding-bottom:30px; }
.m_con_gallery .gallery_photo ul  {overflow:hidden; width:100%;/*height:280px;*/}
.m_con_gallery .gallery_photo ul li{float:left;margin:0 0 20px 0; width:100%;}
/*.m_con_gallery .gallery_photo ul li:first-child{display:block;}*/
.m_con_gallery .gallery_photo ul li img{width:100%; height:210px;}
.m_con_gallery .gallery_photo ul li a{display:block; width:70%;margin:0 auto;}
.m_con_gallery .gallery_photo ul li span{display:block;}
.m_con_gallery .gallery_photo ul li:nth-child(2),
.m_con_gallery .gallery_photo ul li:nth-child(3),
.m_con_gallery .gallery_photo ul li:last-child{display:none;}
.m_con_gallery .gallery_photo .txt_area{width:100%; height:50px; overflow:hidden; }
.gallery_photo a:hover .date{color:#000; font-weight:600;}
.gallery_photo a:hover .title{ font-weight:600;/* text-decoration:underline;*/}





.m_con_wrap1 .con_wrap2{line-height:1.5em; }
.con_wrap2 .m_con_call{width:100%;float:left;  margin-top:20px; box-sizing:border-box;}
.con_wrap2 .m_con_call .youth img{padding-top:7px; }
.con_wrap2 .m_con_call p{ text-align:center; background-color:#fff;}
.con_wrap2 .m_con_call .call_1388{background-color:#fff; text-align:center; padding: 5px 0 10px 0; color:#00265e; font-weight:600;}
.con_wrap2 .m_con_call .call_1388 span{color:#1cbaaf;}
.con_wrap2 .m_con_call .call_info{ background:url("/images/13_youth/main/call_bg.png") no-repeat;background-color:#0064f5; color:#fff; display:block; height:210px; position:relative;}
.con_wrap2 .m_con_call .call_info p{display:block; float:left; }
.con_wrap2 .m_con_call .call_info ul{padding:35px 10px 0 200px; }
.con_wrap2 .m_con_call .call_info ul li{line-height:1.6em;}
.con_wrap2 .m_con_call .call_info span{display:block; background:url("/images/13_youth/main/check_icon_hover.png")  no-repeat; padding-left:35px;  }
.con_wrap2 .m_con_call .call_info .info_last{ width:95%; background-color:#1cbaaf; text-align:center; margin:10px 5px 0 5px; padding:2px 0; }
.con_wrap2 .m_con_call .call_info .info_last a {color:#fff;}
.con_wrap2 .m_con_call .call_info .info_last a:hover{font-weight:600;}



.con_wrap2 .quick_service{overflow:hidden; float:left; width:100%;}
.con_wrap2 .quick_service h2{display:none;  }
.con_wrap2 .quick_service ul{width:100%;}
.con_wrap2 .quick_service ul li{width:25%; float:left;  margin:0 auto; }
.con_wrap2 .quick_service ul li a{display:block; text-align:center; color:#fff; margin:0;}
.con_wrap2 .quick_service ul li a span{display:block; padding:65px 0 10px 0; background:url("/images/13_youth/main/icon_total1.png") no-repeat; border:solid 1px #fff; box-sizing:border-box;}

.con_wrap2 .quick_service  li .quick_01 span{background-position:center -15px;}
.con_wrap2 .quick_service  li .quick_02 span{background-position:center -206px;}
.con_wrap2 .quick_service  li .quick_03 span{background-position:center -415px;}
.con_wrap2 .quick_service  li .quick_04 span{background-position:center -621px;}
.con_wrap2 .quick_service  li .quick_05 span{background-position:center -818px;}
.con_wrap2 .quick_service  li .quick_06 span{background-position:center -1016px;}
.con_wrap2 .quick_service  li .quick_07 span{background-position:center -1213px;}
.con_wrap2 .quick_service  li .quick_08 span{background-position:center -1413px;}

.con_wrap2 .quick_service  li .quick_01,
.con_wrap2 .quick_service  li .quick_02,
.con_wrap2 .quick_service  li .quick_03,
.con_wrap2 .quick_service  li .quick_04,
.con_wrap2 .quick_service  li .quick_05,
.con_wrap2 .quick_service  li .quick_06,
.con_wrap2 .quick_service  li .quick_07,
.con_wrap2 .quick_service  li .quick_08{color:#fff; background: rgba(0, 0, 0, 0.2); font-weight:400;}


.con_wrap2 .quick_service  li .quick_01 span:hover{background-position:center -107px;}
.con_wrap2 .quick_service  li .quick_02 span:hover{background-position:center -318px;}
.con_wrap2 .quick_service  li .quick_03 span:hover{background-position:center -510px;}
.con_wrap2 .quick_service  li .quick_04 span:hover{background-position:center -716px;}
.con_wrap2 .quick_service  li .quick_05 span:hover{background-position:center -924px;}
.con_wrap2 .quick_service  li .quick_06 span:hover{background-position:center -1117px;}
.con_wrap2 .quick_service  li .quick_07 span:hover{background-position:center -1315px;}
.con_wrap2 .quick_service  li .quick_08 span:hover{background-position:center -1520px;}

.con_wrap2 .quick_service  li .quick_01:hover{color:#fff; background-color:#1cbaaf; font-weight:400; }
.con_wrap2 .quick_service  li .quick_02:hover{color:#fff; background-color:#1cbaaf; font-weight:400;}
.con_wrap2 .quick_service  li .quick_03:hover{color:#fff; background-color:#1cbaaf; font-weight:400;}
.con_wrap2 .quick_service  li .quick_04:hover{color:#fff; background-color:#1cbaaf; font-weight:400;}
.con_wrap2 .quick_service  li .quick_05:hover{color:#fff; background-color:#1cbaaf; font-weight:400;}
.con_wrap2 .quick_service  li .quick_06:hover{color:#fff; background-color:#1cbaaf; font-weight:400;}
.con_wrap2 .quick_service  li .quick_07:hover{color:#fff; background-color:#1cbaaf; font-weight:400;}
.con_wrap2 .quick_service  li .quick_08:hover{color:#fff; background-color:#1cbaaf; font-weight:400;}


.top_st h1 span{background:url("/images/13_youth/main/mobile_logo.png") no-repeat; padding:27px 90px;}


@media all and (max-width:410px) {
.con_wrap2 .m_con_call .call_info{background:none;background-color:#0064f5;}
.con_wrap2 .m_con_call .call_info ul{padding:30px 10px 0 ;}
.con_wrap2 .m_con_call .call_info ul li{line-height:1.8em; text-align:center;  }
.con_wrap2 .m_con_call .call_info span{width:50%; margin:0 auto;}
.con_wrap2 .quick_service ul li a{letter-spacing:-2px;}

}

/* Tablet */
@media all and (min-width:768px) {
.m_contents {overflow:hidden; background:url("/images/13_youth/main/main_bg.jpg") no-repeat top center;  background-size:cover;}
.m_con_wrap1{padding:50px 30px 141px 30px;}
.m_con_visual {margin:0;float:left; width:50%;  height:280px;}
.m_con_visual .visual_img  img{width:100%;}


.m_con_visual .play_btn{ width:100%; height:30px;  text-align:right; margin-top:250px; padding:1px 2px 5px 15px; }
.i_count{float:left;}

.m_con_bbs {width:50%;}
.m_con_bbs li .bbs_icon{text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; width:60% }
.m_con_bbs li .bbs_date{display:block; float:right; padding-top:0;}


.m_con_gallery .play_btn2{width: 167px;position: absolute;top: 13.5px;right: 20px;margin-left: 2px;}
.m_con_gallery .play_btn2 ul li {float:left; margin-top:10px; }
/*.m_con_gallery .play_btn2 ul li a{display:inline-block;}*/
.m_con_gallery .play_btn2 .i_prev{display:block;background:#6b8bba;width:40px;height:35px; margin-left:0;}
.m_con_gallery .play_btn2 .i_stop{display:block;width:40px;height:35px; margin-left:2px; background:#6b8bba;}
.m_con_gallery .play_btn2 .i_play{display:block;width:40px;height:35px; margin-left:2px; background:#6b8bba;}
.m_con_gallery .play_btn2 .off{display:none;}
.m_con_gallery .play_btn2 .i_next{display:block;background:#6b8bba;width:40px;height:35px;margin-right: 40px;}
.m_con_gallery .play_btn2 .i_more{display:block;background:#1cbaaf;width:40px;height:35px;right: -1px;}
.m_con_gallery .play_btn2 .i_more{margin-left: 44px;display:block;background:#1cbaaf;width:40px;height:35px;}




.m_con_gallery {margin-bottom:25px;}
.m_con_gallery h2{text-align:left; padding-left:15px; margin-top:20px; }
.m_con_gallery .gallery_photo {display:block; background-color:#fff; padding:6px 20px; }
.m_con_gallery .gallery_photo ul  {width:100%;  height:260px; overflow:hidden;  }
.m_con_gallery .gallery_photo ul li{width:33.3%; float:left; display:block; margin:0 auto; padding:0 0 30px 10px; box-sizing:border-box; }
.m_con_gallery .gallery_photo ul li:first-child{padding-left:0;}
.m_con_gallery .gallery_photo ul li:nth-child(2),
.m_con_gallery .gallery_photo ul li:nth-child(3){display:block;}
.m_con_gallery .gallery_photo ul li a{ display:block; width:100%;   }
.m_con_gallery .gallery_photo ul li a img{ height:175px; width:100%; box-sizing:border-box;}
.m_con_gallery .gallery_photo .txt_area { height:65px; width:100%;  overflow:hidden;}
.m_con_gallery .gallery_photo .txt_area a{display:block; padding-top:5px; line-height:1.4em; font-size:14px;}
.m_con_gallery .gallery_photo .txt_area a .title{display:block;  overflow:hidden; width:100%; }

.con_wrap2{}
.con_wrap2 .m_con_call{width:55%; float:left; margin:0;}
.con_wrap2 .m_con_call .call_info ul{ margin:auto 0; padding:35px 10px 0 185px;}
.con_wrap2 .m_con_call .call_info ul li{line-height:1.5em;}
.con_wrap2 .m_con_call .call_info span{display:block; background:url("/images/13_youth/main/check_icon_hover.png")  no-repeat; padding-left:35px; }
.con_wrap2 .quick_service{ width:45%; float:left;}

.con_wrap2 .quick_service h2{display:block; padding:0; font-size:17px; text-align:center; color:#fff; text-shadow:3px -1px 7px rgba(0,0,0,0.8);}
.con_wrap2 .quick_service ul{width:100%;  }
.con_wrap2 .quick_service ul li{width:33.3%; float:left;   }
.con_wrap2 .quick_service ul li a{display:block; text-align:center; color:#fff; margin:8px 0 0 10px;}

.top_st h1 span{background:url("/images/13_youth/main/logo.png") no-repeat; padding:20px 182px;}

}

/* Desktop */
@media all and (min-width:1023px) {
.m_contents{min-width:1400px;}
.m_con_wrap1{ width:1400px; margin:0 auto; overflow:hidden;  padding:50px 0 141px 0;}
.m_con_visual {margin:0;  float:left; width:28.57%; height:280px;}
.m_con_visual .visual_img  img{ width:28.57%; }
.m_con_bbs{width:40%;float:left; background:#f6f7fb; height:280px;}
.m_con_bbs p {margin:0 0 0 10px; padding:20px ; font-size:17px; text-align:left;}
.m_con_bbs ul {position:absolute; padding:45px 0 ; width:100%}

.m_con_gallery{width:68.57%;height:360px; margin:0;}
.m_con_gallery h2{padding-left:28px;}
.m_con_gallery .gallery_photo {display:block; padding:10px 36px 0 36px; }
.m_con_gallery .play_btn2{position: absolute;top: 14px; right:34px;}

.m_con_gallery .gallery_photo ul  {width:100%;  height:240px; overflow:hidden;}
.m_con_gallery .gallery_photo ul li{width:25%;  position:relative;  height:240px; overflow:hidden; }
.m_con_gallery .gallery_photo ul li span{display:block;}
.m_con_gallery .gallery_photo ul li a{display:block; }
.m_con_gallery .gallery_photo .txt_area a .title{display:block; word-wrap:normal; overflow:hidden; width:100%;  /*text-decoration:underline; */ background:url("/images/13_youth/main/pto_next.png")  no-repeat bottom right; line-height:1.5em; }
.m_con_gallery .gallery_photo .txt_area a .title:hover{ text-decoration:underline; }
.m_con_gallery .gallery_photo ul li:first-child{padding-left:0;}
.m_con_gallery .gallery_photo ul li:hover .over{display:block; position:absolute;top:0;width:100%;height:240px;background: rgba(0, 100, 245, 0.8);  }
.m_con_gallery .gallery_photo ul li:hover .txt_area{position:absolute; top:28%; left:0;  overflow:hidden;}
.m_con_gallery .gallery_photo ul li:hover .txt_area a{color:#fff;   padding:5px 0 0 0; width:80%;  height:70px; overflow:hidden; }
.m_con_gallery .gallery_photo ul li:hover img{height:240px;}


.gallery_photo a:hover .date{color:#fff; font-weight:600;}

.m_con_wrap1 .con_wrap2{position:relative; margin:0; }
.con_wrap2 .m_con_call .call_info{height:208px;}
.con_wrap2 .m_con_call .call_info ul{ width:50%; padding:35px 0 5px 200px;  }
.con_wrap2 .m_con_call .call_info ul li{line-height:1.6em;}
.con_wrap2 .m_con_call{position:absolute; right:0; width:31.43%;}
.con_wrap2 .quick_service{ position:absolute; top:343px; right:0; width:31.43%; height:295px;}
.con_wrap2 .quick_service h2{font-size:17px; text-align:center; color:#fff; padding: 22px 0 13px 0;}
.con_wrap2 .quick_service ul li{width:25%; float:left;}
.con_wrap2 .quick_service ul li a{display:block; text-align:center; color:#fff; margin:10px 0 10px 10px;}
.m_con_gallery .gallery_photo ul li:last-child{display:block;}
.con_wrap2 .quick_service  li .quick_01 span{background-position:0 -17px;}
.con_wrap2 .quick_service  li .quick_02 span{background-position:0 -209px;}

.con_wrap2 .quick_service  li .quick_01 span:hover{background-position:0 -109px; }
.con_wrap2 .quick_service  li .quick_02 span:hover{background-position:0 -319px;}
/*.footer_in .bt_logo{position:absolute;top: 45px;left:22px;}*/
.top_st .gnb{width:309px; padding-top:38px;}
.top_st h1{padding-top:21px;}


.menu_style2 .menu3 div{padding-left:200px; box-sizing:border-box}
.menu_style2 .menu4 div{padding-left:550px; box-sizing:border-box}
.menu_style2 .menu5 div{padding-left:830px; box-sizing:border-box}
.menu_style2 .menu6 div{padding-left:950px; box-sizing:border-box}

}