@charset "utf-8";


/************************************************************************
* COMMON *
************************************************************************/
.container{width:100%;min-width:100%;margin:0 auto;position:relative;overflow:hidden;}

.contents{position:relative;}
.contents div[class*='sec-']{padding:100px 0;}
.contents.main{}
.contents.sub{margin-top:60px;}
.contents.sub .detail{width:calc(100% - 360px);}
@media all and (max-width:1500px){
.contents.sub .detail{width:calc(100% - 330px);}
}
@media all and (max-width:1280px){
.contents div[class*='sec-']{padding:80px 0;}
.contents.sub .detail{width:calc(100% - 300px);}
}
@media all and (max-width:1100px) {
.container{min-width:100%;}
.contents{padding-top:81px;}
.contents div[class*='sec-']{padding:60px 0;}
.contents.sub .detail{width:calc(100% - 280px);}
}
@media all and (max-width:960px) {
.contents div[class*='sec-']{padding:50px 0;}
.contents.sub{margin-top:0; }
.contents.sub .detail{width:94%;margin:0 auto;}
}
@media all and (max-width:640px) {
.contents div[class*='sec-']{padding:30px 0;}
}
@media all and (max-width:420px) {
.contents{padding-top:61px;}
}


.cTitBox{border-bottom:solid 1px #d9d9d9;padding:20px 10px 10px 10px;}
.cTitBox a{color:#929292;font-family:'GmarketSansLight';}
.cTitBox a.fGSB{color:#000;}
.cTitBox i{margin:0 15px;color:#929292;font-family:'GmarketSansLight';}
@media all and (max-width:960px){
.cTitBox{border-bottom:none;padding:0;display:block;}
.cTitBox .type30{text-align:center;font-family:'GmarketSansBold';margin-top:60px;font-size:30px !important;}
.cTitBox .type14{display:none;}
}
@media all and (max-width:640px) {
.cTitBox .type30{margin-top:40px;font-size:28px !important;}
}





/************************************************************************
* MAIN_CONTENTS *
************************************************************************/

/***** MAIN_1. Support project *****/
.main .sec-m1{width: 100%; padding:0 !important;position: relative;}
.main .sec-m1:after{width:100%;height:210px;background:#f9f9f9;position:absolute;top:0;left: 0; display:block;content:"";z-index: -1;}

.main .sec-m1 .disF .Left{width: 32%; padding:4.2% 2%;  background-image: linear-gradient(-45deg, #1aa39c 0%, #33c2bb 35%, #1dbacb 100%);box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);text-align: center;color: #fff;margin-top: -20px;}
.main .sec-m1 .disF .Left font{line-height: 120%;letter-spacing: -0.03em; opacity: .7;}

.main .sec-m1 .disF .Right {width: 68%;padding-left: 10px;}
.main .sec-m1 .disF .Right span{width:calc(100%/3.1); padding:0 2.5%;display:block;position:relative;text-align: center;margin-top: -10px; transition:all 0.2s ease;}
.main .sec-m1 .disF .Right span:after{width:1px;height:80%;background:#e4e4e4;position:absolute;top:15%;right:-3%;display:block;content:"";}
.main .sec-m1 .disF .Right span:last-child:after{display: none;}

.main .sec-m1 .disF .Right span figure{width:65px;height:60px;display:inline-block;margin-right: 10px; margin-top: -10px; overflow:hidden;transition:all 0.2s ease;}
.main .sec-m1 .disF .Right span figure  img{width:100%;transform:translateY(0);-webkit-transition:all 0.2s ease;transition:all 0.2s ease;-moz-transition:all 0.2s ease;display:block;}
.main .sec-m1 .disF .Right span:hover figure img{transform:translateY(-50%);-webkit-transition:all 0.2s ease;transition:all 0.2s ease;-moz-transition:all 0.2s ease;}


.main .sec-m1 .disF .Right span font{color: #222;display: inline-block;font-weight: 500;}
.main .sec-m1 .disF .Right span:hover font{color: #16929d;}
.main .sec-m1 .disF .Right a:hover{border:solid 2px #fff;transition:all 0.2s ease;}

@media only screen and (max-width:1280px) {
}




/***** MAIN_2. 공지사항/자료실/자주묻는 질문 *****/
.main .sec-m2{padding-bottom:100px !important;}
.main .sec-m2 #tabMainMenu{justify-content:flex-end;}
.main .sec-m2 #tabMainMenu li{margin:0 5px;}
.main .sec-m2 #tabMainMenu li a{width:100%;padding:10px 40px 10px 40px;border-radius:30px;border:solid 1px #a7a7a7 ;background:#fff;color:#555; display:block;transition:all 0.2s ease;}
.main .sec-m2 #tabMainMenu li a font{font-weight: 700 !important;}
.main .sec-m2 #tabMainMenu li.active a,.main .sec-m2 #tabMainMenu li:hover a{background:#0eb3d3;border:solid 1px #0eb3d3 ;color:#fff;transition:all 0.2s ease;}

.mBoard{}
.mBoard a{width:32%;height:280px;padding:30px;border-radius:30px;background: #fafafa; border:solid 2px #ebebeb;transition:all 0.2s ease;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between;box-shadow:2px 2px 20px rgba(0,0,0,0.05);}
.mBoard a .type18{text-decoration:underline;color:rgba(0,0,0,0.8);}
.mBoard a .type21{color: #000;font-weight: 700;}
.mBoard a .type16{color: #999;font-weight: 300;line-height: 140%; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.mBoard a .type13{ color:rgba(0,0,0,0.7);background: #f5f5f5; border-radius: 30px;padding: 5px;font-family:'GmarketSansLight';text-align: center;margin: 10px 0 0 140px;}

.mBoard a:hover{background: #fff;border-color:#0eb3d3;box-shadow:2px 2px 20px rgba(0,0,0,0.2);transition:all 0.2s ease;}
.mBoard a:hover .type18{color:#0eb3d3;}
.mBoard a:hover .type16{color: #222;}
.mBoard a:hover .type13{color:rgba(0,0,0,1);}

.main .sec-m2 .notice {position: relative;}
.main .sec-m2 .notice h1{font-size: 120px;color: transparent;letter-spacing: -0.01em; position: absolute;bottom:-20px;right: 20px;#646464;-webkit-text-stroke-width: 0.5px;opacity: .5; z-index: -3;}

@media only screen and (max-width:1280px) {
.main .sec-m2 #tabMainMenu li{margin:0 2px;}
}
@media only screen and (max-width:1100px) {
.main .sec-m2{padding-top:50px !important;}
.main .sec-m2 #tabMainMenu{width:100% !important;margin-top:20px;}

.mBoard a{height:auto;padding:25px;display:block;}
.mBoard a .disF>*{width:100% !important;margin-bottom:20px;}
.mBoard a .disF img{height:120px;margin-top:20px;}
.mBoard a .type14{margin-top:20px;}
}
@media only screen and (max-width:960px) {
.main .sec-m2{padding-bottom:30px !important;}
.main .sec-m2 #tabMainMenu{justify-content:center;}
.main .sec-m2 #tabMainMenu li{width:calc(100%/6.05 - 4px);}
.main .sec-m2 #tabMainMenu li a{padding:14px 0 10px 0;text-align:center;}

.mBoard a{padding:20px;border-radius:25px;}
}
@media only screen and (max-width:860px) {
.mBoard a{width:49%;margin-bottom:12px;}
}
@media only screen and (max-width:640px) {
.main .sec-m2 #tabMainMenu li{width:calc(100%/3.05 - 4px);margin-bottom:4px;}
}
@media only screen and (max-width:420px) {
.mBoard a{border-radius:20px;}
.mBoard a .disF>*{margin-bottom:10px;}
.mBoard a .disF img{height:90px;margin-top:10px;}
.mBoard a .type14{margin-top:10px;}
}




.main .sec-m2 .sban{width:100%;position:relative;}
.main .sec-m2 .sban .sban_list{font-size:0;line-height:0;}
.main .sec-m2 .sban .sban_list .slick-list{width:100%;}
.main .sec-m2 .sban .sban_list .slick-track{width:100%;}
.main .sec-m2 .sban .sban_item{display:inline-block;}
.main .sec-m2 .sban .sban_item a{display:block;width:100%;}
.main .sec-m2 .sban .sban_item img{border-radius:15px;overflow:hidden;width:100%;}
.main .sec-m2 .sban .sban_item img.pc{display:block;}
.main .sec-m2 .sban .sban_item img.mobile{display:none;}
.main .sec-m2 .sban .slick-dots{top:10px;right:130px;}
.main .sec-m2 .sban .slick-dots span{display:inline-block;margin:0 5px;}
.main .sec-m2 .sban .sban_control{position:absolute;top:10px;right:30px;font-size:0;line-height:0;}
.main .sec-m2 .sban .sban_control button{display:inline-block;position:relative;width:31px;height:31px;border:0;border-radius:8px;vertical-align:top;}
.main .sec-m2 .sban .sban_control button + button{margin-left:0;}
.main .sec-m2 .sban .sban_control button:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:31px;height:31px;margin:auto;background-image:url(http://114.108.177.188/htdocs/sfsc_eco/sfsc/img/control_sprite.png);background-repeat:no-repeat;content:'';}
.main .sec-m2 .sban .sban_control .sban_prev:before{background-position:left top;transform:rotateY(180deg);content:'';}
.main .sec-m2 .sban .sban_control .sban_next:before{background-position:left top;content:'';}
.main .sec-m2 .sban .sban_control .sban_auto:before{background-position:left 66.66%;content:'';}
.main .sec-m2 .sban .sban_control .sban_auto.slick-pause:before{background-position:left 100%;content:'';}


.main .sec-m2 .sc_ban{position: relative;margin-top: 65px;}

.main .sec-m2 .sc_ban h1{font-size: 80px !important;color: transparent;letter-spacing: -0.01em; position: absolute;top:-70px;right: 30px;opacity: .5; z-index: -3;}

.banner_slide_wrap{width:100%;width: 100%; height:380px;background: #f9feff;border:solid 2px #7bd4e6;border-radius: 40px;}
.banner_slide *{box-sizing:content-box;word-break:normal;}
.banner_slide{width:100%;margin:0 auto;position:relative;overflow: hidden;}

.banner_slide .banner_page_num{overflow:hidden;position:absolute;bottom:10%;right:9%;line-height:20px;}
.banner_slide .banner_page_num *{vertical-align:top;}
.banner_slide .banner_page_num .banner_num{margin:0 4px 0 0;padding-bottom:10px;font-size:26px;color:#080808;display:inline-block;}
.banner_slide .banner_page_num .banner_tot{margin:0 0 0 4px;padding-top:10px;font-size:18px;color:#989898;display:inline-block;}

.banner_slide .banner_slide_prev{width:17px;height:24px;overflow:hidden;position:absolute;bottom:50%;left:7px;z-index:10;opacity: .5; background:url(http://114.108.177.188/htdocs/sfsc_eco/sfsc/img/banner_prev.png) no-repeat 0 0;background-size: cover; font-size:0;}
.banner_slide .banner_slide_next{width:17px;height:24px;overflow:hidden;position:absolute;bottom:50%;right:7px;z-index:10;opacity: .5;background:url(http://114.108.177.188/htdocs/sfsc_eco/sfsc/img/banner_next.png) no-repeat 0 0;background-size: cover;font-size:0;}


.banner_slide .banner_slide_prev:hover, .banner_slide .banner_slide_next:hover {opacity: 1;}

.banner_slide .banner_slide_view{position:relative;overflow:hidden;}
.banner_slide .banner_slide_view li{width:100%;padding:0 3%;position:absolute;top:0;text-align:left;left:300%;border-radius: 40px;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;}
.banner_slide .banner_slide_view li:first-child{position:static;top:0;left:0;}
.banner_slide .banner_slide_view li:last-child{left:-100%;}
.banner_slide .banner_page_btns{display:none;}


.banner_slide .banner_slide_view li>div{height:380px;position:relative;border-radius: 40px;}
/*
.banner_slide .banner_slide_view li>div:after{width:0;height:3px;display:block;content:"";position:absolute;right:0;bottom:18%;background:rgba(0,0,0,0.3);-webkit-transition:all 1.5s ease;transition:all 1.5s ease;-moz-transition:all 1.5s ease;}

.banner_slide .banner_slide_view li.active_ls>div:after{width:220px;-webkit-transition:all 1.5s ease;transition:all 1.5s ease;-moz-transition:all 1.5s ease;}
*/


.banner_slide .banner_slide_view li .ban_txt{width:100%;height:100%;padding:3% 8%;position:absolute;top:0;left:0;border-radius: 30px;line-height: 150% !important; -webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:translateY(10%);-webkit-transition:all 0.4s ease;transition:all 0.4s ease;-moz-transition:all 0.4s ease;}
.banner_slide .banner_slide_view li .ban_txt .type22{width: 25%; padding: 10px 30px; background-image: linear-gradient(-45deg, #51d1ae 0%, #33c2bb 65%, #0eb3d3 100%);font-weight: 500 !important;text-align: center;color: #fff !important;border-radius: 50px;}
.banner_slide .banner_slide_view li .ban_txt h3{font-weight: 700 !important;color: #000 !important; position: relative;}
.banner_slide .banner_slide_view li .ban_txt .type17{width: 65%;}

.banner_slide .banner_slide_view li .ban_txt font{color:rgba(0,0,0,0.5) !important; list-style: -0.03em; line-height: 130% !important;}


.banner_slide .banner_slide_view li .ban_txt .ban_img{width:220px;position:absolute;bottom:15px;right:0;transition:all 0.5s ease;z-index: 0;}
.banner_slide .banner_slide_view li .ban_txt .ban_img img{width:100%;opacity:0.2;}


.banner_slide .banner_slide_view li.active_ls .ban_txt{transform:translateY(4%);}
.banner_slide .banner_slide_view li.active_ls .ban_img img{opacity:1;}

.banner_slide .banner_slide_view li .ban_txt button{width: 90px; background:#333;padding:7px 20px;color:#fff;font-size: 14px !important; text-align: left;position:relative;z-index: 1;transition:all 0.2s ease;}
.banner_slide .banner_slide_view li .ban_txt button:after{width:15px;height:1px;background:#fff;position:absolute;top:48%;right:20px;display:block;content:"";transition:all 0.2s ease;}
.banner_slide .banner_slide_view li .ban_txt button:before{width:7px;height:7px;border:solid #fff;border-width:1px 0 0 0;position:absolute;top:calc(50% - 3px);right:20px;display:block;content:"";transform:rotate(45deg);transition:all 0.2s ease;}
.banner_slide .banner_slide_view li:hover .ban_txt button{border-color:#fff;transition:all 0.2s ease;}
.banner_slide .banner_slide_view li:hover .ban_txt button:after{width:20px;right:10px;background:#fff;transition:all 0.2s ease;}
.banner_slide .banner_slide_view li:hover .ban_txt button:before{right:10px;width:7px;height:7px;border:solid #fff;border-width:1px 0 0 0;transition:all 0.2s ease;}


.main .sec-m3{background:#edeff2;}
.main .sec-m3 .disF{padding:0 8%;}
.main .sec-m3 .disF a figure{width:156px;height:156px;background:#fff;border-radius:20px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;}
.main .sec-m3 .disF a figure img{width:63%;}
.main .sec-m3 .disF a font{text-align:center;}
.main .sec-m3 .disF a:hover figure{background:#dce0e5;box-shadow:2px 2px 20px rgba(0,0,0,0.05);transition:all 0.2s ease;}

@media only screen and (max-width:1280px) {
.main .sec-m3 .disF{padding:0 6%;}
}
@media only screen and (max-width:1100px) {
.main .sec-m3 .disF{padding:0 4%;}
.main .sec-m3 .disF a figure{width:140px;height:140px;}
}
@media only screen and (max-width:960px) {
.main .sec-m3 .disF{padding:0 2%;}
}
@media only screen and (max-width:860px) {
.main .sec-m3 .disF{padding:0;}
.main .sec-m3 .disF a figure{width:130px;height:130px;}
.main .sec-m3 .disF a figure img{width:70%;}
}
@media only screen and (max-width:767px) {
.main .sec-m3 .disF{justify-content:center;}
.main .sec-m3 .disF a{width:33.333%;margin-bottom:30px;}
.main .sec-m3 .disF a figure{margin:0 auto;}
.main .sec-m3 .disF a figure img{width:70%;}
}
@media only screen and (max-width:640px) {
.main .sec-m3 .disF a figure{width:120px;height:120px;}
}
@media only screen and (max-width:440px) {
.main .sec-m3 .disF a{width:50%;}
.main .sec-m3 .disF a:last-child{margin-bottom:30px;}
.main .sec-m3 .disF a figure{width:130px;height:130px;}
}




/************************************************************************
* SUB_CONTENTS *
************************************************************************/

/* 센터소개 */
.sec-s1c1{line-height:150%;}

.sec-s1c1 .s1c1_tit{height:200px;position: relative;}
.sec-s1c1 .s1c1_tit:after{width: 272px; height:192px;background:url(img/s1c2_img1.png) no-repeat center center;background-size:cover;position: absolute;bottom:30px;right: 0;display:block;content:"";transition:all 0.2s ease;}
.sec-s1c1 .s1c1_tit.TBox{width: 60%; border:solid 5px #eee;height:220px;border-radius: 30px; margin: 0 auto;box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);position: relative;}
.sec-s1c1 .s1c1_tit.TBox:after{display: none;}

.sec-s1c1 .s1c1_txt1{width: 90%;margin: 0 auto;}
.sec-s1c1 .s1c1_txt1 .w40 img{width: 65%;}
.sec-s1c1 .s1c1_txt1 .greetings{background: #fff;margin-left: -250px;padding: 5%; position: relative;}


    @media only screen and (max-width:1280px) {
        .sec-s1c1 .s1c1_txt1 .w40 img{width: 100%;}
        .sec-s1c1 .s1c1_txt1 .greetings{margin-left: 0;padding: 0;}
    }
    @media only screen and (max-width:540px) {
        .sec-s1c1 .s1c1_txt1 .w40, .sec-s1c1 .s1c1_txt1 .w50{width: 90% !important;margin: 0 auto;}
        .sec-s1c1 .s1c1_txt1 .w40 img{width:80%;margin: 0 auto;display: block;}
        .sec-s1c1 .s1c1_txt1 .w50 {margin-top: 20px;}
    }
    @media only screen and (max-width:360px) {
        .sec-s1c1 .s1c1_txt1 .w40 img{width:90%;}
    }



/* 인사말 */
.sec-s1c1 .s1c2_txt2 span{width: calc(100%/3.35); position: relative;transition:all 0.2s ease;}
.sec-s1c1 .s1c2_txt2 h1{font-size: 200px; font-weight: 300 !important;}
.sec-s1c1 .s1c2_txt2 span font{line-height: 130%;}

.sec-s1c2.bgfafafa{padding-bottom: 150px !important;}
.sec-s1c2 .disF.target div{width:270px;height: 270px;background: #fff;padding:40px;padding-top: 80px;margin-right: 40px; position:relative;border-radius: 50%; overflow:hidden;transition:all 0.2s ease;}
.sec-s1c2 .disF.target div{width:300px;height: 300px;background: #fff;padding:40px;padding-top: 80px;margin-right: 40px; position:relative;border-radius: 50%; overflow:hidden;transition:all 0.2s ease;}
.sec-s1c2 .disF.target div:hover{box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.10);transition:all 0.2s ease;}
.sec-s1c2 .disF.target div img{width: 90px;height: 90px;display: block;margin: 0 auto;transition:all 0.2s ease;}
.sec-s1c2 .disF.target div:hover img{-webkit-transform:scale(1.10);-moz-transform:scale(1.10);-ms-transform:scale(1.10);-o-transform:scale(1.10);transform:scale(1.10);transition:all 0.2s ease;}
.sec-s1c2 .disF.target div font{line-height: 130%;letter-spacing: -0.03em;}





/* 비젼 */
.sec-s1c3{}
.sec-s1c3 .vision{}
.sec-s1c3 .vision .w30{background-image: linear-gradient(-45deg, #51d1ae 0%, #33c2bb 65%, #0eb3d3 100%);padding: 4% 2%;border-radius: 30px;}
.sec-s1c3 .vision .w65{border-top:solid 1px #666;border-bottom:solid 1px #666;padding: 3% 0;margin-top: 0; padding-left: 7%;position: relative;}



/* 전략 및 추진과제 */
.org{width: 80%;margin: 0 auto;}
.org *{margin:0 auto;font-size:22px;display:block;text-align:center;border-radius:10px;font-weight:bold;}
.org b,.org i{width:200px;margin-bottom:40px;color:#fff;}
.org b{width:300px;height:300px;margin-bottom:40px;border:solid 10px #1dbacb;color:#000;border-radius:50%;font-size: 35px;font-weight: 700; display:flex;justify-content:center;flex-direction:column;position:relative;}
.org b:after{width:1px;height:150px;background:#ddd;position:absolute;bottom:-150px;left:49.9%;display:block;content:"";z-index:-55;}
.org b img{width:50%;}

.org div{width:100%;display:flex;justify-content:space-between;margin-top:100px ;}
.org div span{width:33.333%;}
.org div span{position:relative;}
.org div span:after{width:120%;height:1px;background:#ddd;position:absolute;top:-35px;left:0;display:block;content:"";}
.org div span:first-child:after{width:50%;left:50%;}
.org div span:last-child:after{width:50%;}

.org div span font{width:330px;margin-top:20px;line-height:80px;background:#f1f1f1;padding:20px 0; position:relative;}
.org div span font:after{width:1px;height:50px;background:#ddd;position:absolute;top:-35px;left:50%;display:block;content:"";z-index: -55;}
.org div span font:first-child{margin-top:0;background-image: linear-gradient(-45deg, #51d1ae 0%, #33c2bb 65%, #0eb3d3 100%);color: #fff;padding:30px 0;}
.org div span font:nth-child(2){height: 180px; padding:30px;}





.sec-s1c3 .hexagon{width: 90%;margin: 0 auto;}
.sec-s1c3 .hexagon span{width:406px;height:460px;background-size:100% !important;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;margin: 0 auto;background:url(http://114.108.177.188/htdocs/sfsc/sfsc/img/s1c3_hexagon.png) no-repeat center center;transition:all 0.2s ease;}
.sec-s1c3 .hexagon span:nth-child(2){background:url(http://114.108.177.188/htdocs/sfsc/sfsc/img/s1c3_hexagon2.png) no-repeat center center;}
.sec-s1c3 .hexagon span:nth-child(3){background:url(http://114.108.177.188/htdocs/sfsc/sfsc/img/s1c3_hexagon3.png) no-repeat center center;}
.sec-s1c3 .hexagon span a font.txt.type30{list-style: -0.08em;}
.sec-s1c3 .hexagon span a:hover font.txt.type30{color: #28a6ff;}
.sec-s1c3 .hexagon span a font.txt.type18{opacity: .7 !important;}

.sec-s1c3 .hexagon span a figrue{width:90px;height:90px;margin:0 auto;margin-top: -20px !important; display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.sec-s1c3 .hexagon span a.on figrue,.sec-s1c3 .hexagon span a:hover figrue{}
.sec-s1c3 .hexagon span a figrue img{width:84px;margin:0 auto;display:block;transition:all 0.2s ease;}
.sec-s1c3 .hexagon span a.on figrue img,.sec-s1c3 .hexagon span a:hover figrue img{margin-top:-20px;transition:all 0.2s ease;}



.sec-s1-1 figure{width:100%;border-radius:25px;overflow:hidden;display:block;}
.sec-s1-1 figure img{width:100%;}

@media all and (max-width:640px){
.sec-s1-1 .disF>*{width:100% !important;}
.sec-s1-1 .disF>*:last-child{margin-top:40px;}
}
@media all and (max-width:400px){
}





/* 오시는길 */
/* 1-3 찾아오시는길 */
.sec-s1c7{}
.sec-s1c7 .s1c7{width: 90%; margin: 0 auto;}
.map{display:flex;flex-wrap:wrap;margin-top: -10px;}

.map li{font-size:16px;text-align:left;margin-top: 10px;}

.map li.s2{padding-right: 100px;}
.map li>div{font-size:18px;color:#59534a;font-weight:300;line-height:34px;}
.map li>div>h1{padding-left:40px;padding-right:40px;margin-top: -1px; font-size:20px !important;color:#000;font-weight:bold;letter-spacing: 0; position:relative;}
.map li>div>h1:after{width:1px;height:18px;background:#ccc;position:absolute;top:6px;left:80%;display:block;content:"";}
.location{background:url(http://114.108.177.188/htdocs/sfsc_eco/sfsc/img/icon1.png) no-repeat 0 0px; display: flex;}
.tel{background:url(http://114.108.177.188/htdocs/sfsc_eco/sfsc/img/icon2.png) no-repeat 0 2px;display: flex;}
.fax{background:url(http://114.108.177.188/htdocs/sfsc_eco/sfsc/img/icon4.png) no-repeat 0 2px;display: flex;}


.root_daum_roughmap.root_daum_roughmap_landing.mt60{padding:0 !important;border:none !important;}
.root_daum_roughmap.root_daum_roughmap_landing.mt60 *{font-size:17px;line-height:200%;}



@media screen and (max-width:1280px) {
	.sec-s1c7 .s1c7 .disF .w20{width: 30%;}
	.sec-s1c7 .s1c7 .disF .w80{width: 70%;}

	.map{display: inline-block;}
	.map li>div>h1{display: inline-block;}
	.map li:first-child{width: 100%;}
	.map li:nth-child(2), .map li:nth-child(3){margin-top: 15px;}
	.map li>div>font{display: inline-block;margin-left: 30px; margin-top: 2px;}
}
@media screen and (max-width:1100px) {
    .sec-s6c8 p.point2{margin:28px 0 0 12px;width:13px; height:13px;}
	
	.map li{margin-right:50px;font-size:15px;}
	.map li>div{font-size:15px;font-weight:normal;line-height:30px;}
	.map li>div>h1{padding-left:40px;font-size:18px;}
	.map li:nth-child(2), .map li:nth-child(3){margin-top: 5px;}
	.root_daum_roughmap.root_daum_roughmap_landing.mt60 *{font-size:15px;}
}
@media screen and (max-width:960px) {		
    .sec-s1c7 .s1c7 .w30, .sec-s1c7 .s1c7 .w70{width: 100%;}
    .sec-s1c7 .s1c7 .w30 {border: solid 1px #ddd;padding: 20px; text-align: center;}
    .sec-s1c7 .s1c7 .w70{margin-top: 30px;}
    
    .sec-s6c8 p.point2{margin:28px 0 0 12px;width:12px; height:12px;}
}
@media screen and (max-width:767px) {		
	.map li{width:100%;margin-bottom:10px;font-size:16px !important;}
	.map li>div{font-size:16px;line-height:24px;}
	.map li>div>h1{padding-left:30px;font-size:16px !important;}
	.map li>div>h1:after{height:13px;top:7px;left:90%;}
	.map li>div>font{margin-top: 0;font-size:16px !important;}
	.root_daum_roughmap.root_daum_roughmap_landing *{font-size:14px;}
}
@media screen and (max-width:640px) {
	.sec-s1c7 .s1c7 .disF .w30, .sec-s1c7 .s1c7 .disF .w70{width: 100%;}
    .sec-s1c7 .s1c7 .w30 {padding: 12px; }
	.sec-s1c7 .s1c7 .disF .w30 h4{font-size: 23px !important;}
	.sec-s1c7 .s1c7 .disF .w70{margin-top: 30px;}
	.sec-s1c7 .s1c7 .disF .w30:after{width:25%;top:45px;}

    .sec-s6c8 p.point2{margin:18px 0 0 12px;width:11px; height:11px;}
    
	.map li>div>h1{padding-left:50px;padding-right:40px;}
	.map li>div>font{margin-top: 2px;margin-left: 10px;}
}
@media screen and (max-width:460px) {
	.sec-s17 .s1c7 .disF .w70{margin-top: 10px;}
	.sec-s17 .s1c7 .disF .w30:after{width:30%;top:37px;}
	
	.sec-s17 .s1c7 .disF .w70 h4{font-size: 20px !important;}
	
	.map li>div>h1{padding-left:40px;padding-right:20px;font-size:15px !important;}
	.map li>div>font{font-size:15px !important;}
}
@media screen and (max-width:360px) {
	.sec-s17 .s1c7 .disF .w30 h4{font-size: 18px !important;}
	.sec-s17 .s1c7 .disF .w30:after{width:35%;}

    .sec-s6c8 p.point2{margin:18px 0 0 12px;width:10px; height:10px;}
	
	.map li>div>h1{padding-left:35px;font-size:14px !important;}
	.map li>div>font{font-size:14px !important;margin-left: 5px;}
}
@media screen and (max-width:320px) {
	.sec-s17 .s1c7 .disF .w30:after{width:45%;}
	
	.map li>div>h1{padding-left:35px;font-size:13px !important;}
	.map li>div>font{font-size:13px !important;margin-left: 5px;}
}




/* 2-1 기술개발 */
.sec-s2c1{line-height: 140% !important;}
.sec-s2c1 .type30{line-height: 140% !important;position: relative;}
.sec-s2c1 .type30:after{width:60%;height:2px;background:#1dbacb;position:absolute;bottom:-10px;left:0;display:block;content:"";}
.sec-s2c1 .disF .w30{}

.sec-s2c1 .p-photo{display:flex;}
.sec-s2c1 .p-photo a{width:calc(100%/6.5);text-align:center;}
.sec-s2c1 .p-photo a:hover figure{border-radius: 20px;overflow:hidden;}
.sec-s2c1 .p-photo a figure{border-radius: 20px; overflow:hidden;}
.sec-s2c1 .p-photo a figure img{width: 100%;; transition:all 0.2s ease;}
.sec-s2c1 .p-photo a:hover figure img{border-radius: 10px;transform:scale(1.07);transition:all 0.2s ease;}

.sec-s2c1 .p-photo.s3 a{width:calc(100%/3.2);text-align:center;padding: 2%; border:solid 1px #092885;}
.sec-s2c1 .p-photo.s3 a figure{border-radius: 0; overflow:hidden;}

.sec-s2c1 .p-photo.s4 a{width:calc(100%/4.1);text-align:center;padding: 0; border:none;}
.sec-s2c1 .p-photo.s4 a figure{border-radius: 0; overflow:hidden;}


.sec-s2c1 .disF.equipment{padding:60px 0;border-bottom:solid 1px #e5e8ea;}
.sec-s2c1 .disF.equipment.e1{padding-top: 0 !important;margin-top: -40px;}
.sec-s2c1 .disF.equipment .w50.PL200{padding-left: 200px;}
.sec-s2c1 .disF.equipment h6{padding-top:40px;color:#000;font-weight: 700; position:relative;}
.sec-s2c1 .disF.equipment h6:after{width:160px;height:5px;background:#000;position:absolute;bottom:0;left:0;margin-bottom: -20px; display:block;content:"";}

.sec-s2c1 ul{margin-left: 10px;}
.sec-s2c1 .list.type3 li{padding:2.5px 0 !important;padding-left: 16px !important; color:#4c4c4c;font-size: 20px; font-weight: 300; letter-spacing: 0;position:relative;}

.sec-s2c1 .disF.equipment .PCH{display: none;}
.sec-s2c1 .disF.equipment .MBH{display: block;}


/*
.sec-s2c1 .disF .w30:after{width:65%;height:2px;background:#1dbacb;position:absolute;bottom:-2px;left:0;display:block;content:"";}
*/


 /*****************************
 **  장비/시설지원 텝메뉴
 ******************************/
 .SubTabMenu {margin-top:40px; }
 .SubTabMenu ul{display: flex;  gap: 10px;  padding: 0;  margin: 0;  }
 .SubTabMenu ul  li{ flex: 1;    text-align: center;  padding: 10px;  box-sizing: border-box;border:1px solid #ddd; border-radius:12px; font-size:17px;    line-height: 130%; transition: all 0.2s ease; }
.SubTabMenu li:hover,
.SubTabMenu li.active {
    background-image: linear-gradient(-45deg, #51d1ae 0%, #33c2bb 65%, #0eb3d3 100%);
    border-color: #51d1ae;
    color: #fff !important;
    transition: all 0.15s ease;
}
.active-color{  background-image: linear-gradient(-45deg, #51d1ae 0%, #33c2bb 65%, #0eb3d3 100%); color:#fff;  }




/*   메인  배경   */
.MainVisual { margin:0 auto;   padding:100px  20px 40px 20px;  background-color: #e1f1f3;}
.MainVisual  .box{
  background-image: url('http://114.108.177.188/htdocs/sfsc_eco/sfsc/img/mvis_01.png');
  background-size: contain;        
  background-position: center bottom;    
  background-repeat: no-repeat;   
  width:100%;
  height:480px;
   margin:0 auto;  
}
@media screen and (min-width: 360px) {.MainVisual  .box{height:60vh;  padding:0 20px; }	}
@media screen and (min-width: 380px) {.MainVisual  .box{height:60vh;  }	}
@media screen and (min-width: 412px) {.MainVisual  .box{height:50vh;  }	}
@media screen and (min-width: 540px) {.MainVisual  .box{height:80vh;  }.MainVisual .box {background-size: 80%;	}}
@media screen and (min-width: 768px) {.MainVisual  .box{height:60vh;  }}
@media screen and (min-width: 820px) {.MainVisual  .box{height:78vh;  }}
@media screen and (min-width: 912px) {.MainVisual  .box{height:72vh;  }}
@media screen and (min-width: 960px) {.MainVisual  .box{height:100vh; }  .MainVisual .box {background-size: 48%;	}}
@media screen and (min-width: 1024px) { .MainVisual  .box{  background-position:right 30%;}}
@media screen and (min-width: 1280px) { .MainVisual  .box{ background-size: 54%;	}}
@media screen and (min-width: 1560px) {.MainVisual  .box{height:70vh; }  .MainVisual  .box{ background-size: 60%;	}}


/*   메인  폰트   */
.MainVisual .txt strong {
    color: #222;
    font-weight: 700;
    line-height: 130%;
    font-family: 'GmarketSansMedium';
	}
.MainVisual .txt strong b{
color: #00aaab;
    font-weight: 600;
    text-transform: uppercase !important;
    font-family: 'GmarketSansBold' !important;
	}
.MainVisual p{
    margin-top: 20px;
    color: #0eb3d3;
    line-height: 140%;
    letter-spacing: -0.03em;
}
.MainVisual .txt strong { font-size: 12vw;}
.MainVisual .txt strong b{font-size: 10vw;}
.MainVisual p{font-size: 8vw;}

@media screen and (min-width: 540px) {
	.MainVisual .txt strong {font-size: 20vw;}
	.MainVisual .txt strong b{font-size: 24vw;}
	.MainVisual p{font-size: 30vw;}
}
@media screen and (min-width: 912px) {
	.MainVisual .txt{padding-left:80px; }
	.MainVisual .txt strong {font-size: 44px;}
	.MainVisual .txt strong b{font-size: 50px;}
	.MainVisual p{margin-top: 0; font-size: 44px;}
	}
@media screen and (min-width: 1024px) {
	.MainVisual {padding: 100px 80px;}
	.MainVisual .txt{padding-left:0;  padding-top:10vh; }
	.MainVisual .txt strong{font-size: 4vw; padding:0;  }
	.MainVisual .txt strong b{font-size: 3.8vw; padding:0;}
	.MainVisual p{margin-top: 8vh; font-size: 3vw; font-weight:600; padding:0;}
	}
@media screen and (min-width: 1560px) {
	.MainVisual {padding: 10vh 10vw;  box-sizing:border-box; }
	.MainVisual .txt{padding-left:0;  padding-top:10vh; }
	.MainVisual .txt strong,	.MainVisual .txt strong b{font-size: 56px; }
	.MainVisual p{margin-top: 8vh; font-size: 36px; }
	}





/***********************
  **  카카오 지도
***************************/

.kakaomap {
    position: relative;
    width: 100%;
	max-width:1400px;
	margin:0 auto; 
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
  }

  .kakaomap .root_daum_roughmap {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
    @media screen and (min-width: 1440px) {
    .kakaomap {
      padding-bottom: 112.5%;
    }
  }


  /***************
  **
  *****************/
  .Equipment{
	width:100%;
	max-width:1600px;
	margin:0 auto; 
  }


  .hr{}
  .hr2{border:1px solid red; height:40px;  display:block }
  .under-line{
	border-bottom:1px solid #ddd; 
	padding-bottom:100px ;
	margin-bottom:100px; }



 /***************
  **  브레이드크럼    //
  *****************/
  .breadcrumb {
	width:100%;
      font-size: 17px;
	  
      display: flex;
      align-items: center;
	  border-bottom:1px solid #ddd; 
	  border-radius:0; 
	  background-color:#fff; 
    }
#breadcrumbFirst,
#breadcrumbSecond{width: 34%;}


    .breadcrumb span {
      position: relative;
      padding:16px  28px 0 28px;
      cursor: pointer;
      color: #5d5d5d;
      display: inline-block;
	  height:60px;
      transition: transform 0.3s ease;
	  border-right:1px solid #ddd;
    }
    .breadcrumb span:first-child{
	  border-left:1px solid #ddd;
    }
    .breadcrumb span:first-child::after {
	   padding-right:4px !important;
       content: '';
    }
    #breadcrumbFirst::after,
	#breadcrumbSecond::after{
      content: '';
      background-image: url('http://sfsc.re.kr/img/ico.png'); /* 기본 아이콘 (회색 화살표) */
      background-size: 16px 16px;
      background-repeat: no-repeat;
      width: 16px;
      height: 16px;
      display: inline-block;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      transition: background-image 0.3s ease, transform 0.3s ease;
    }



    .breadcrumb span.active::after {
      background-image: url('https://cdn-icons-png.flaticon.com/512/32/32195.png'); /* 클릭 후 아이콘 (파란 강조 화살표) */
      animation: bounce 0.4s ease;
    }

    @keyframes bounce {
      0%   { transform: translateY(-50%) scale(1); }
      50%  { transform: translateY(-60%) scale(1.2); }
      100% { transform: translateY(-50%) scale(1); }
    }

    .menu-box {
      display: none;
      position: absolute;
      border: 1px solid #ddd;
      background: #fdfdfd;
      z-index: 1000;
    }

    .menu-box ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .menu-box li {
      padding: 12px 0 12px 24px;
      border-bottom: 1px dashed #ddd;
      cursor: pointer;
    }

    .menu-box li:hover {
      background: #f5f5f5;
    }

    .menu-box li:last-child {
      border-bottom: none;
    }

@media screen and (min-width: 767px) {
	.breadcrumb{padding:0 100px;}
	#breadcrumbFirst, #breadcrumbSecond {width: 240px;}
}
 /***************
  **     //  브레이드크럼 
  *****************/