@charset "utf-8";

/* set */
body {font-size:16px;margin:0;padding:0;}
input, select, button{font-family:"Noto Sans KR", sans-serif;font-size:16px;}
body *{ box-sizing:border-box;}
a {color: #121212; transition: .2s ease;}
::selection {background:#00164e;color:#fff;text-shadow:none;}

#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}
.blind{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.hide{display:none !important;margin:0;padding:0}
.mobile_back {position: fixed;top: 0; bottom: 0; left: 0; right: 0; background: #00000075; z-index: 2;}
.new_win{display: inline-block;width: 15px;height: 15px;margin-left: 6px;background: url('/images/hope/common/btn_new_on.png') no-repeat;font-size: 0;vertical-align: middle;}


/* Mobile */
/* gnb */
.head .wrap {padding: 20px 15px;}
.head h1 {display: inline-block;text-align: center;}
.head h1 a, .f_logo a {font-size: 20px;display: block;color:#1d1e62;}
.head h1 a strong{display: block;font-size: 22px;}
.head h1 img, .f_logo img {height: 27px;}
.head h1 a span, .f_logo span { padding: 5px 0 0 5px; display: inline-block;}
.head .g_link {position: absolute;top: 0;right: 15px;font-size: 15px;color: #9a9a9a;vertical-align: middle;padding: 5px;}
.head .t_login,.head .t_logout{position: absolute;top: 0;right: 109px;font-size: 15px;vertical-align: middle;padding: 5px;color: #2a2a2a;}
.head .g_link::before {content: '';background: url(/images/hope/main/all_icons.png) no-repeat center -2px;width: 18px;height: 18px;display: inline-block;margin-right: 5px;vertical-align: middle;}
.head ul.log_box li {display: inline-block; position: absolute;  top: 13px;  right: 100px;}
.head ul.log_box a {color: #fff;font-family: 'Noto Sans KR'; font-size: 14px; }
.menu_wrap button {font-size: 0;background: #1d1e62 url("/images/hope/common/all_menu.png") no-repeat center;width: 35px;height: 35px;overflow: hidden;position: absolute;top: 42px;right: 12px;border-radius: 5px;}

/* menu */
.menu {display: none;position: fixed; top: 0; bottom: 0; right: 0; width: 70%; background: #fff; box-shadow:0 0 20px rgba(0,0,0,.1); z-index: 3; min-width: 320px;}
.menu.on {display: block;}
.menu ul {padding: 15px 10px 0 10px;}
.menu>ul::before {content: ''; width: 100%; height: 1px; background: #e6e6e6; position: absolute;top: 39px; left: 0;}
.menu>ul {padding-top: 40px;padding-left: 0;}
.menu>ul>ul {padding-top: 30px;}
.menu>ul>li>a {line-height: 1.3;display: block;font-size: 16px;width: 45%;padding: 20px 0 20px 15px;border-bottom: 1px solid #e6e6e6;outline-offset: -2px;text-align: left;word-break: keep-all;font-weight: 700;color: #282828;border-right: 1px solid #e6e6e6;background: #f5f5f6;}
.menu>ul>li.on>a {color: #13a8eb;font-weight: 600;border-right: 0;background: #fff;}
.depth_box {position: absolute;top: 40px;left: 45%;right: 0;bottom: 0;background: #fff;z-index: 3;}
.depth_boxcon>p {display: none;}
.menu li li a {display: block; padding: 10px;} 
.menu li li {border-bottom: 1px dashed #ebebeb;}
.menu li li ul {margin: 0;padding: 7px;background: #f8f8f8;}
.menu li li ul li { border-bottom: 0;}
.menu li li ul a {font-size: 14px;display: block;padding: 5px;color: #3c3c3c;}
.menu_wrap .menu_close {position: absolute;top: 3px;right: 12px;background: url(/images/hope/common/close.png) no-repeat center;/* width: 20px; *//* height: 20px; */}

/* FOOTER */
footer {padding: 20px 15px;}
.f_add li {display: inline-block;margin-right: 10px;}
.f_add li:last-of-type {margin-right: 0;}
.f_add li a{color: #3b3b3b;}
.f_add a.color_g {color: #3252c8;font-weight:500;}
.f_add div {padding: 15px 0;font-weight: 100;}
.f_add address{font-style:normal;display: inline-block;}
.f_add p{display:block;font-size:14px;padding-top:5px;}
.f_add p strong{color: #3252c8;}
.f_logo{text-align:right}

@media all and (min-width:768px) {
.head h1 {text-align: left;}
.menu_wrap{width: 100%;}
.mobile_back{display:none !important;}
.head .wrap{display: flex;justify-content: space-between;align-items: center;padding: 0;width: 100%;}
.menu_wrap button {display: none;}
.menu {display: block;position: static;background: none;box-shadow: none;width: auto;}
.menu>ul::before {content:none;}
.menu ul {padding: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.menu li {flex-grow: 1;position: relative;}
.menu>ul {padding: 0;display: flex;gap: 3px;justify-content: center;align-items: end;}
.menu>ul>li>a {line-height: 1.5;text-align: center;padding: 0;border-bottom:0;font-size: 20px;background: none;border-right: 0;display: flex;justify-content: center;align-items: center;height: 100px;width: 100%;}
.menu>ul>li.on>a, .menu>ul>li>a:hover, .menu>ul>li.on>a:active, .menu>ul>li.on>a:focus {color: #13a8eb;}
.depth_box {left: 0;top: 79px;bottom: auto;/* background: #130f6a; */position: absolute;/* background: #fff; */border-radius: 10px;box-shadow: 2px 2px 10px rgba(0,0,0,.3);border: solid 2px #000;background: #fff;}
.menu li li {border-bottom: 0;text-align: center;flex-grow: 0;width: 100%;}
.menu li li a {padding: 25px 0;border-bottom: solid 1px #ddd;}
.menu li li:last-child a{border-bottom:none;}
.depth_boxcon>ul>li>a:hover, .depth_boxcon>ul>li>a:active, .depth_boxcon>ul>li>a:focus {text-decoration: none; transition:.2s ease;}

.menu li li li a {padding: 10px 20px;margin-top: 20px;text-align: center;}

.menu li li ul {padding: 0;background: none;display: none;}
.menu li li ul li {width: 100%; text-align: left;margin: 0;}
.menu li li ul a::before {background-color: #b2d0f9;}
.menu li li ul a {margin: 0;padding: 5px;text-align: left;}
.menu li li ul li ul {margin: 5px 0;background: #fff;display: none;}
.menu li li ul li a::before {content:none;}

footer {width: 100%;position: absolute;padding: 30px 0;}
footer .wrap{margin: 0 auto;}
footer .wrap:after{display:block; content:''; clear:both;}
.f_add {width: auto;}
.f_add div {padding: 20px 0 0;float: left; width: 70%;}
.f_add div a{font-weight:500}
.f_logo {float: right; margin: 0;}
}

@media all and (min-width:1023px) {
.head h1 a strong{display:inline-block}
.head h1 img, .f_logo img {height: auto;margin-right: 10px;}
.head h1 a span, .f_logo span { font-size: 30px;}
.menu_wrap {width: calc(100% - 365px);}
.menu li li {max-width: 220px;}
.menu ul li li li a{height: auto; font-size: 14px;}
}

@media all and (min-width:1400px) {
.head .wrap {max-width: 1400px;margin: 0 auto;padding: 0;/* position: relative; */}
header {height: auto;}
.head {height: auto; border-bottom: 0;}
.head h1 {width: auto;}
.head::after {content: ''; clear: both; display: block;}
.menu_wrap {padding-right: 230px;width: 935px;}
.menu>ul::before {content: none;}
.menu li li:hover > a {text-decoration:underline}
.menu li li:last-child {margin-right: 0;}
.menu li li a {font-size: 17px;}
.menu li li span::before {margin: 0 auto 15px;}
.menu ul li li ul {padding:0;}
.menu ul li li li a {font-size: 15px;margin: 0;}
.menu ul li li li li a {font-size: 14px;}
.depth_box {top: 82px;width: 200px;left: calc(50% - 100px);}
.depth_boxcon {display: flex;margin: 0 auto;}
.depth_boxcon>ul {position: relative;width: 100%;justify-content: center;}
.depth_boxcon>p::before,.depth_boxcon>p {display: none;}
.head .g_link {font-size: 18px;right: 0;top: 0px;padding: 37px 0 37px 15px;right: calc((100% - 1400px ) / 2);}
.head .t_login,.head .t_logout{font-size: 18px;right: 0;top: 1px;padding: 37px 0 37px 15px;right: calc(((100% - 1400px ) / 2) + 120px);}
.head .g_link:after{display:block;content:'';width: 1px;height: 17px;background: #e3e3e3;left: 0;top: 44px;position: absolute;}
.head ul.log_box {width: 1400px;margin: auto; position: relative;}
.head ul.log_box li {right: 20px;}
footer .wrap{width:1400px;}
.f_add div {width: 50%;}
.f_logo {float: right;}
}

/****** sub layout ******/
.sub_container{position:relative;}
.sub_container::before {content: '';background: url(/images/hope/common/sub_bg.jpg) no-repeat center;background-size: cover;display: block;left: 0;top: 0;z-index: -1;position: absolute;width: 100%;right: 0;height: 90px;}

.s_title{position: relative;}
.s_title h3{padding: 20px;text-align: left;word-break: keep-all;margin: 0 auto;display: block;color: #fff;}
.s_title .local{background: #fff;}
.s_title .local>ul{position: relative;font-size: 0;padding: 15px;border-bottom: solid 1px #eaeaea;display: flex;}
.s_title .local>ul>li{display: inline-block;flex-grow: 1;}
.s_title .local>ul>li:last-of-type>a {font-weight: 500;/* background: #d8f3ff; */}
.s_title .local>ul>li.home {width: 30px;flex-grow: 0;display: flex;justify-content: center;align-items: center;}
.s_title .local>ul>li.home::after {content: none;}
.s_title .local>ul>li:last-child:after{display: none;}
.s_title .local li a{color: #001027;font-size: 14px;display: block;padding: 0;width: 100%;height: 100%;display: flex;align-items: center;}
.s_title .local .navi > a:after{display:block;content:'';background: url("/images/hope/common/sub_ico.png") no-repeat center -807px;width: 45px;height: 25px;position: absolute;right: 0;top: 14px;}
.s_title .local li a:hover, .s_title .local li a:active, .s_title .local li a:focus {font-weight: 700;;}

.s_title .local .home a{font-size: 0;background: url(/images/hope/main/all_icons.png) no-repeat center -2px;width: 16px;height: 16px;padding: 0;}
.s_title .local .navi div{display: none;position: absolute;left: 0;width: 100%;text-align: left;box-sizing: border-box;box-shadow: 3px 3px 31px rgba(0,0,0,0.2);z-index: 1;top: 50px;background: #fff;border-radius: 15px;border: solid 2px #000;}
.s_title .local .navi div.on{display: block;}
.s_title .local .navi div li{border-bottom: 1px dashed #eeeeee;position: relative;}
.s_title .local .navi div li a{padding: 20px 10px;color: #2a2a2a;}
.s_title .local .navi div li:last-child{border:none;}
.s_title .local .navi div button{position: absolute;width: 40px;height: 40px;border-radius: 10px;background: url(/images/hope/common/sub_ico.png) no-repeat center -656px #2f2f2f;font-size: 0;padding: 0;margin: 0;right: 0;top: -55px;box-shadow: 0 0 10px rgba(11, 48, 76, 0.6);}
.s_title .utill{position: absolute;right: 57px;top: 141px;}
.s_title .utill li{display: inline-block;}
.s_title .utill li button{width: 40px;height: 40px;padding: 0;margin: 0;font-size: 0;border-radius: 10px;background: url(/images/hope/common/sub_ico.png) no-repeat center -16px #efefef;}
.s_title .utill li.down button{background-position: center -96px;}
.s_title .utill li.print button{background-position: center -216px;background-color: #02224d;}
.s_title .utill li.url button{background-position: center -296px;background-color: #02224d;}
.s_title .share{position: absolute;top: 140px;right: 12px;}
.s_title .share button, .s_title .share a{display: block;width: 40px;height: 40px;padding: 0;margin: 0;font-size: 0;border-radius: 10px;background: url(/images/hope/common/sub_ico.png) no-repeat center -336px #ececec;}
.s_title .share div{display: none;position: absolute;z-index: 1;}
.s_title .share div.on{display: block;}
.s_title .share div li{margin: 4px 0;}
.s_title .share .face a{background-position: center -416px;}
.s_title .share .kakao a{background-position: center -456px;}
.s_title .share .story a{background-position: center -496px;}
.s_title .share .band a{background-position: center -536px;}
.s_title .share .ins a{background-position: center -576px;}
.s_title .share div button{background-position: center -616px;}

.s_con{margin: 80px 20px 40px 20px;}
.scon_bottom{margin: 0 0 20px 0;}

@media all and (min-width:768px) {
.s_title .local .navi div{min-width: 165px;top: 74px;}
.s_title h3 {margin: 0 auto;text-align: center;font-size: 35px;}
.s_title .utill {top: 25px;right: 58px;}
.s_title .local {width: 100%;}
.s_title .local>ul {min-height: 50px;padding:0; margin: 0;}
.s_title .local>ul>li {/* background: #f5f5f6; */position: relative;min-width: 165px;border-right: 1px solid #ebebeb;}
.s_title .local>ul>li.home {background: #fff;min-width: auto;width: 60px;}
.s_title .local>ul>li.home>a {}
.s_title .local>ul>li:last-of-type {background: #fff;}
.s_title .local li a {padding: 0 20px 0 25px;}
.s_title .local .navi div li a{padding: 20px 25px;}
.s_title .local li li a {padding: 0;}

.s_title .share {top: 25px;}

.s_con {margin: 60px 0 80px 0;}
}

@media all and (min-width:1023px) {
.sub_container:before{height: 290px;}

.s_content{max-width: 1400px;margin: 0 auto;}
.s_title h3 {padding: 82px 0;min-height: 216px;}
.s_title .local>ul>li {height: 75px;}
.s_title .local>ul>li.home {}
.s_title .local li a {font-size: 16px;}
.s_title .utill {top: 130px;right: 65px;}
.s_title .share {top: 130px; right: 20px;}
.s_title .local .navi > a:after{top: 29px;}
}

@media all and (min-width:1400px) {

}



/* 콘텐츠담당자 */
.manager{padding: 10px 20px;background: #efefef;}
.manager h4{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.manager li{margin:0 0 5px 0;line-height: 25px;font-size: 15px;}
.manager li strong, .manager p>strong{color: #616161;font-weight: 2300;}
.manager p {font-weight: 100;}

@media all and (min-width:768px) {
.manager{position:relative}
.manager ul{overflow:hidden}
.manager li{float:left;margin:0 30px 5px 0;}
}

@media all and (min-width:1023px) {
.manager p{position:absolute;bottom: 10px;right:20px}
.manager li{margin:0 30px 0 0}
}

/* 만족도조사 */
.research{border: 2px solid #eeeeee;padding: 20px;border-top: 0;}
.research h4{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.research p{margin:0 0 10px 0}
.research li{line-height:1.5em}
.research li:first-child{margin:0 0 10px 0}
.research li *{vertical-align:middle}
.research input[type=text]{border:1px solid #ddd;width:100%;height:30px;box-sizing:border-box;border-radius: 3px;}
.research input[type=submit]{background:#02224d;color:#fff;width:100%;height:30px;border-radius: 3px;}
.research label{color:#000;margin-right:20px;font-size: 14px;}
.research a.btn_bbsw{width:100%;padding:9px 0 0 0;margin:5px 0 0 0;text-align:center}

@media all and (min-width:768px) {
.research{position:relative}
.research input[type=text]{width:calc(100% - 120px)}
.research input[type=submit]{width:100px}
.research a.btn_bbsw{width:100px;position:absolute;top:20px;right:25px}
}

@media all and (min-width:1023px) {
.research ul{overflow:hidden}
.research li{float:left;width:50%}
.research li:first-child{padding:5px 0 0 0;margin:0}
}         

   


/* 레이어팝업 */
.layer_pop{position: fixed;top:0;right:0;bottom:0;left:0;background: rgba(0, 0, 0, .2);backdrop-filter:blur(4px);z-index: 9999;height: 100%;}
.layer_pop>div{position:absolute;top: 5%;left: 50%;transform: translate(-50%, 0);width: 100%;}
.layer_pop .con{position: relative;}
.layer_pop .con p {background:#000;text-align: center;width: 100%;display: flex;justify-content: space-between;}
.layer_pop .con p a{display: inline-block;color: #fff;padding: 9px 20px;}
.layer_pop .con p a:last-child{border-left:solid 1px rgba(255,255,255,.3)}
.layer_pop .con>a{/* padding-top: 40px; */display: block;overflow-y: auto;}
.layer_pop .con img,.layer_pop .con iframe{width:100%;}
/*.layer_pop p{background: #080808;overflow:hidden;position: absolute;top: 0;left: 0;width: 100%;}
.layer_pop p a{float:left;width:50%;padding: 10px 0;color:#fff;font-size: 12px;text-align:center;position:relative}
.layer_pop p a:first-child:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;width:1px;background:rgba(255, 255, 255, .2)}
.layer_pop p a:hover,.layer_pop p a:focus{background:#0089d0}*/

.layer_pop .in_menu {position:absolute;top: 30px;background: #fff;width: 95%;left: 2.5%;}
.in_menu .txt{padding:10px;background: #fff;width: 100%;}
.in_menu .con:before{display: block;content:'';width: 120px;height: 120px;background: url('/images/hope/content/mong_5.png') no-repeat center / cover;margin: 0 auto 10px auto;}
.in_menu .basic_ul{margin: 0 0 25px 0;}
.in_menu .basic_ul li{padding-bottom: 0;word-break: auto-phrase;}
.in_menu p{text-align: center;}
.in_menu p a{display: block;padding: 10px 0;width: 100%;background:#0e1c67;color:#fff;border: solid 1px #0e1c67;margin: 0 auto 3px auto;}
.in_menu p .blue{background:#0b45e4; border: solid 1px #0b45e4;}
.in_menu p .white{background: #ffffff;color: #000;border: solid 1px #737373;}
.in_menu p .grey{background: #646464;border: solid 1px #646464;}
.in_menu p .blue:hover{background: :#000 !important; border-color:#000;  }

@media all and (min-width:768px) {
.layer_pop>div{width: auto;}
.layer_pop .con{position: relative;overflow-y: hidden;max-height: max-content;margin: 0 auto;}
/*.layer_pop .con:last-child{margin-right:0}
.layer_pop p{position: absolute;top: 0;left: 0;width: 100%;}
.layer_pop p a{font-size: 15px;}*/
.layer_pop .con>a{text-align: center;background: #fff;overflow-y: auto;}
.layer_pop .con iframe{width:600px;height:400px}
.layer_pop .con img{max-width: fit-content;}
.in_menu .con:before{margin-bottom:25px;width: 150px;height: 150px;}
.in_menu .txt{padding: 40px;width: 630px;left: 50%;transform: translate(-50%, -50%);top: 50%;}    
.in_menu .txt .con{width:100%;margin: 0;}
.in_menu p{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;width: 100%;gap: 2px;}
.in_menu p a,
.in_menu p button{margin: 0;width: auto;width: 33%;}
}

@media all and (min-width:1023px) {
.layer_pop .con iframe{width:950px;height:530px}
}