@charset "utf-8";
.main_container{position:relative;}
.m_content h2,
.m_content h2 a{font-family:'SBAggro';font-weight:500;font-size:1.125rem;color:#2a2a2a;}

.m_content>div{margin:40px 3%;}

/*비주얼*/
.m_content:before{display:block;content:'';width:100%;height:450px;background:linear-gradient(90deg, #ccfcf8, transparent);position:absolute;top:90px;z-index:-1;}

.m_content .visual{background-position:58% center;background-size:cover;background-repeat:no-repeat;padding:0 33% 0 0;border-radius:12px;height:400px;position:relative;box-shadow:2px 2px 10px rgba(0,0,0,.2);overflow:hidden;display:flex;align-items:center;}
.visual .typ{color:#fff;letter-spacing:-.7px;text-shadow:2px 2px 10px rgba(0,0,0,.5);padding-left:5%;}
.visual .typ h2{color:#fff;font-family:'SCDream';text-align:left;font-weight:300;padding:0;font-size:1.85rem;}
.visual .typ h2 span{display:block;font-size:1.125rem;}
.visual .typ strong{font-weight:700;}
.visual .typ p{padding:30px 0;font-size:.9rem;}
.visual .typ p span{display:block;}
.visual .typ p span:first-child{padding-bottom:10px;}
.visual .typ a{display:block;width:180px;position:absolute;right:0;bottom:0;color:#fff;text-shadow:none;border-radius:12px 0 0 0;padding:10px 20px 35px 20px;background:#04ae9c;}
.visual .typ a:before{display:block;content:'';width:20px;height:20px;position:absolute;bottom:15px;background:url("/images/12_youth/main/m_i.png") no-repeat 0 -48px;}
.visual .typ a:after{display:block;content:'';width:43px;height:43px;position:absolute;bottom:10px;background:url("/images/12_youth/main/m_i.png") no-repeat -84px -84px;right:10px;background-size:130px;}

/*자주찾는서비스*/
.m_link {background:#fff;text-align:center;border:solid 1px #a9f0e9;border-radius:12px;padding:30px 20px;}
.m_link h2 span{color:#04ae9c;}
.m_link ul{display:flex;gap:4%;flex-wrap:wrap;position:relative;justify-content:center;}
.m_link ul:before{display:block;/* content:''; */width:200px;height:165px;background:url("/images/12_youth/main/liu1.png") no-repeat bottom center;background-size:200px;position:absolute;right:0;bottom:-29px;}
.m_link li {text-align:right;}
.m_link li a{display:block;position:relative;font-weight:400;padding:33px 0 33px 45px;font-size:.9rem;}
.m_link li a:before{display:block;content:'';background:url("/images/12_youth/main/m_lnk.png") no-repeat 0 0;width:47px;height:85px;position:absolute;left:0;top:0;}
.m_link .l1 a:before{background-position:center 15px;}
.m_link .l2 a:before{background-position:center -93px;}
.m_link .l3 a:before{background-position:center -216px;}
.m_link .l4 a:before{background-position:center -331px;}
.m_link .l5 a:before{background-position:center -449px;}
.m_link .l6 a:before{background-position:center -563px;}
.m_link .l7 a:before{background-position:center -686px;}
.m_link .l8 a:before{background-position:center -798px;}

/* 게시판 */
.m_content .con1{border-radius:0 60px 0 0;margin:0 3%;}
.m_bbs{position:relative;height:400px;}
.m_bbs::after{content:'';position:absolute;left:0;display:block;width:100%;height:50px;background:#e6f6f5;border-radius:10px;z-index:-1;top:0;}
.m_bbs .bbs_con{display:none;position:absolute;top:50px;border-bottom:solid 1px #a9f0e9;padding:30px 0 0 0;width:100%;}
.m_bbs .bbs_con.on{display:block;}
.m_bbs h2{text-align:center;display:inline-block;position:relative;margin:0 20px 0 0;padding-right:15px;}
.m_bbs h2:after{content:'';position:absolute;top:25px;right:0;display:block;width:5px;height:5px;border-radius:50%;background:#aad2e2;}

.m_bbs h2:first-of-type{margin:0 16px 0 10px;}
.m_bbs h2:last-of-type:after{display:none;}
.m_bbs h2 a{display:block;font-family:'SBAggro';padding:16px 15px 12px 0;font-weight:300;letter-spacing:-.1px;}
.m_bbs h2.on a{background:#0bb3a1;color:#fff !important;font-weight:500;color:#2a2a2a;padding:10px 15px;border-radius:10px;transform:translateY(+15px);box-shadow:2px 2px 10px rgba(0,0,0,.2);}
.m_bbs h2.on:before{display:none;}
.bbs_con ul li a{display:block;position:relative;height:40px;padding-top:10px;}
.bbs_con ul li a > strong{display:inline-block; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; width:65%; font-weight:400;}
.bbs_con ul li a > strong::before{content:'';display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#5c928c;vertical-align:middle;}
.bbs_con ul li a span{display:none;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.bbs_con ul li a p{position:absolute;top:16px;right:0;}
.bbs_con ul li a p em{display:none;color:#0c8b59;}
.bbs_con ul li a p i{display:block;font-style:normal;color:#969696 !important;font-size:14px;text-align:left;letter-spacing:-.7px;}
.bbs_con ul li a p i strong{font-weight:400;}
.bbs_con ul li:first-child a p{left:20px;right:auto;top:20px;}
.bbs_con ul li:first-child a p i strong{font-weight:bold;display:block;font-size:26px;color:#5c928c;font-family:'SBAggro';}
.bbs_con ul li:first-of-type a{height:240px;border-radius:12px;padding:70px 20px 20px 20px;border:solid 1px #a9f0e9;}
.bbs_con ul li:first-of-type a > strong{width:100%;-webkit-line-clamp:2;margin:12px 0;font-size:18px;font-weight:500;}
.bbs_con ul li:first-of-type a strong::before{display:none;}
.bbs_con ul li:first-of-type a span{display:block; display:-webkit-box;}
.bbs_con ul li.new a:before{content:'NEW';position:absolute;display:block;color:#e2274f;font-size:14px;top:20px;right:20px;}
.bbs_con p .more i{display:inline-block;width:35px;height:35px;background:url("/images/12_youth/main/m_i.png") no-repeat -151px -66px;border-radius:8px;border:solid 1px #74d0c7;font-size:0;vertical-align:middle;color:#0bb3a1;font-style:normal;}
.bbs_con p .more{font-size:0;position:absolute;right:15px;top:-41px;}
.bbs_con ul li .img_w{display:none;width:auto;height:70px;background:#f1f1f1;border-radius:10px;overflow:hidden;text-align:center;margin-top:-10px;}
.bbs_con ul li .img_w img{height:100%;}
.bbs_con ul li:first-child .img_w{display:block;}
/*인포존*/
.info_zone{position:relative;margin-top:40px;margin-top:40px;padding-top:10px;}
.info_zone .img{display:flex;justify-content:center;flex-wrap:wrap;box-shadow:2px 2px 5px rgba(0,0,0,.15);border-radius:12px;overflow:hidden;}
.info_zone .img div{width:100%;}
.info_zone .img img{width:100%;border-radius:12px;overflow:hidden;}
.info_zone .img div a{display:block;}
.info_zone .control{display:block;position:absolute;top:0;width:100%;}
.info_zone .control p{display:flex;justify-content:center;align-items:center;position:absolute;right:0;margin-top:0;}
.info_zone .control .btn button{width:40px;height:40px;overflow:hidden;background:#fff url("/images/12_youth/main/m_i.png") no-repeat;font-size:0;margin:0 2px;border-radius:50%;border:solid 1px #36cdbf;}
.info_zone .control .btn button.prev{background-position:9px 6px;}
.info_zone .control .btn button.next{background-position:-95px 6px;}
.info_zone .control .btn button.play{background-position:-144px 6px;}
.info_zone .control .btn button.stop{background-position:-45px 6px;}
.info_zone .control span{color:#ececec;display:block;position:absolute;top:10px;left:0;background:#04ae9c;padding:2px 20px;border-radius:12px 0 60px 0;text-align:center;}
.info_zone .control em{font-style:normal;color:#fff;}

@media all and (min-width:768px) {
.m_content h2, .m_content h2 a{font-size:1.5rem;}
.m_content .visual{height:438px;padding-right:0;}
.visual .typ h2{font-size:3.3rem;}
.visual .typ h2 span{font-size:2rem;}
.visual .typ p{padding:50px 0;}
.visual .typ p span:first-child{display:block;}
.visual .typ p span{font-size:1.25rem;display:inline-block;}
.visual .typ a{font-size:1.2rem;padding:20px 130px 45px 30px;width:auto;}
.visual .typ a:after{width:60px;background-size:auto;background-position:-115px -116px;height:60px;right:30px;}

.m_link ul{padding-top:20px;}
.m_link ul:before{width:315px;height:273px;background-size:auto;right:30px;} 
.m_link li{margin:20px 0;}
.m_link li a{padding:13px 55px;transition:ease-in-out .18s;font-size:1rem;padding:0 20px;text-align:center;}
.m_link li a:before{margin:0 auto;margin-bottom:20px;background-color:#f4f4f4;border-radius:10px;position:inherit;width:85px;}

.m_bbs{max-width:956px;width:100%;}
.m_bbs h2 a{font-size:1.3rem}
.m_bbs .bbs_con ul{display:flex;justify-content:space-between;flex-wrap:wrap;}

.info_zone{margin:40px auto;max-width:406px;}
.info_zone .control span{width:100px;}
}

@media all and (min-width:1023px) {
.m_content{position:relative;}
.m_content h2, 
.m_content h2 a{text-align:left;}
.m_content>div{ margin:50px auto;}
.main_container:before{top:280px;width:48%;}
.m_content .con1{padding-top:0;position:relative;margin:0 auto;}

.m_content .visual{border-radius:12px 12px 12px 80px;background-position:left top;}

.m_link{border-radius:80px 12px 12px 12px;padding:30px 30px 30px 185px;display:flex;justify-content:space-between;position:relative;align-items:center;}
.m_link:before{display:block;content:'';width:168px;height:197px;position:absolute;left:10px;bottom:0;background:url("/images/12_youth/main/liu2.png") no-repeat 0 0;}
.m_link h2 span{display:block;}
.m_link li{margin:0;}
.m_link li a{font-size:1.125rem;padding:0;}
.m_link li:hover a:before{background-color:#5cccc0}
.m_link ul{padding:0;gap:0;width:calc(100% - 100px);justify-content:space-around;}

.m_content .con3{display:flex;justify-content:space-between;flex-wrap:wrap;}
.con3{border-radius:0 40px 40px 0;background-position:left top;margin-bottom:60px !important;} 
.m_bbs{height:325px;width:calc(100% - 436px);}
.m_bbs h2 a{padding-right:40px;}
.m_bbs h2:before{left:-26px;}
.m_bbs .bbs_con{border:none;padding:0;background:none;width:100%;right:0;top:85px;}
.bbs_con ul li{width:calc(33.3333% - 15px);}
.bbs_con ul li a{height:270px;padding:25px 25px;border-radius:12px 12px 30px 12px !important;background:#fff;border:solid 1px #a9f0e9;}
.bbs_con ul li a > strong{width:100%;height:50px;margin-bottom:20px !important;-webkit-line-clamp:3 !important;font-size:18px;font-weight:500;}
.bbs_con ul li a strong::before{display:none;}
.bbs_con ul li a span{display:block;height:90px;display:-webkit-box;-webkit-line-clamp:3;margin-bottom:20px;}
.bbs_con ul li a p{position:static;display:flex;justify-content:space-between;}
.bbs_con ul li a p i strong{font-weight:bold;display:block;font-size:26px;color:#5c928c;font-family:'SBAggro';}
.bbs_con ul li.new a{padding:50px 25px 30px !important;height:auto;border:solid 1px #a9f0e9;}
.bbs_con ul li.new a:before{top:30px;}
.bbs_con ul li:first-of-type a{height:270px;border-top:solid 1px #a9f0e9;padding:25px !important;}
.bbs_con ul li:first-of-type a strong{margin:0;}
.bbs_con ul li.new a span{margin-bottom:10px !important;}
.bbs_con ul li a p i{color:#333;}
.bbs_con ul li a p em{display:block;font-size:14px;font-style:normal;}
.bbs_con ul li a:hover,
.bbs_con ul li a:focus{box-shadow:2px 2px 10px rgba(0,0,0,.08)}
.bbs_con ul li a:hover strong,
.bbs_con ul li a:focus strong{text-decoration:underline;}
.bbs_con p .more{top:-77px;}
.bbs_con ul li .img_w{height:115px;display: block;}
}

@media all and (min-width:1440px) {
.m_content:before{top:275px;height:400px;}
.m_content:after{display:block;content:'';width:190px;height:353px;background:url("/images/12_youth/main/liu1.png") no-repeat 0 0;position:absolute;right:0;bottom:7%;z-index:-1;}
.m_content>div{width:1400px;}

.m_link:before{left:30px;}
.m_link{padding-left:230px;}
.m_link ul{width:calc(100% - 160px);gap:1%;}
.visual .typ{width:1400px;margin:0 auto;}
 
.info_zone{margin:0;}
    
.m_bbs {height:270px;margin-top:10px;}
.m_bbs .bbs_con{width:calc(100% - 210px);top:0;right:0;}
.m_bbs::after{width:160px;height:100%;}
.m_bbs h2{width:160px;display:block;margin:20px !important;padding:0 !important;}
.m_bbs h2.on a{ border-radius:12px 13px 12px 30px;padding:15px 10px 15px 30px;}
.m_bbs h2:after{display:none;}
.bbs_con p .more{top:auto;left:-190px;right:auto;bottom:22%;}
.bbs_con p .more i{font-size:15px;width:120px;background-position:100% -66px;box-sizing:border-box;padding:5px 30px 5px 15px;}
}

/*레이아웃 수정*/
.head h1 a{margin-top:10px}
.sub_site .head h1 span{color:#06af9c;margin-top:-14px ;}
.sub_site .head h1 span i{color:#2a2a2a;display:block;font-style:normal;}
.sub_site .head{align-items:center;}

@media all and (min-width:768px) {
.sub_site .head h1 span{font-size:28px;margin-top:0px ;}
.sub_site .head h1 span i{display:inline-block}
}
@media all and (min-width:1023px) {
.head h1 a{margin-top:0px}
.sub_site .head h1 img{width:auto;}
.sub_site .head h1{line-height:40px}
}