@charset "utf-8";

/*스킨일부 커스텀*/
.boardQnA{padding:0;border: none;}
.boardQnA ul > li{padding-top:0;background: none;margin-bottom: 25px;border-radius: 10px;height: auto;border: solid  3px #f1faff;background: #f1faff;}
.boardQnA ul > li.on{background: #fbfeff;box-shadow: 2px 2px 13px #dcf9ff;border-color: #b6e2fa;}
.boardQnA dt{border-bottom:none;display: flex;flex-direction: column;text-align: center;}
.boardQnA dd{border:none;background: none;display: flex;flex-wrap: wrap;flex-direction: column;display: none;}
.boardQnA li.on dd{display:block;display: flex;}
.boardQnA ul > li.on dt{border-color: #b6e2fa;/* align-items: flex-start; */}
.boardQnA dt > a{font-family: "Noto Sans KR";font-weight: 500;height: auto;width: auto;padding: 10px;word-break: break-all;box-sizing: border-box;position: relative;}

.boardQnA ul > li.on dt > a{height: auto;}
.boardQnA dt > span{font-family: "Noto Sans KR";background: url('/images/hope/main/all_icons.png') no-repeat center -116px;font-size: 0;height: 28px;width: 28px;margin: 10px auto;}
.boardQnA dd > span{font-family: "Noto Sans KR";color:#fff;font-size: 0;background: url('/images/hope/main/all_icons.png') no-repeat center -150px;width: 28px;height: 28px;margin: 10px auto;}
.boardQnA dd > div{padding: 10px;overflow: hidden;word-break: break-word;min-height: auto;height: auto;}

.info_box{background: #f4f4f4;}
.bbs_table th{background: #f8f8f8;}
.bbs_page a.on{background: #545454;border-color:#545454;}

.bbs_list2 .bbs_table td[data-cell-header]{text-align:left}
@media all and (min-width:768px) {
.boardQnA dt{text-align:left;flex-direction: row;min-height: 70px;align-items: center;padding: 0 20px;}
.boardQnA dt > span{width: 50px;}
.boardQnA .on dt span{margin: 20px 0 0 0;}
.boardQnA ul > li dt > a{width: calc(100% - 50px);padding: 20px 20px 20px 0;}
.boardQnA dd{text-align:left;flex-direction: row;padding: 0 20px;}
.boardQnA dd > span{width: 50px;margin: 20px 0 0 0;}
.boardQnA dd > div{width: calc(100% - 60px);padding: 20px 20px 20px 0;}
.boardQnA dt > a:after{display:block;content: '';width: 20px;height: 35px;background: url('/images/hope/main/all_icons.png') no-repeat center -210px;position: absolute;right: 0;top: 14px;}
.boardQnA .on dt > a:after{background-position: center -177px;}
.over_table .scroll_guide{display:none;}
}

/*기존스타일 초기화*/
.bbs_skin,
.bbs_vtop .col li,
.bbs_con{font-family: "Noto Sans KR";}
.bbs_con{margin-bottom:30px;}
.bbs_skin .bbs_search3 input,
.bbs_skin .bbs_search3 select,
.bbs_skin .bbs_search3 buttom{height:35px;font-weight: 300;}
.bbs_btn a:hover,
.bbs_btn a:active,
.bbs_btn a:focus{border-color:#02224d; color:#9ce8ff}
.bbs_filedown{padding:15px;background: #f7f7f7;vertical-align: middle; border:none !important;}
.bbs_filedown a{vertical-align:middle;}
.all_agb .btn_bbsw{border-radius:0;background: #0a9ee1;padding: 10px 30px;font-size: 17px;border-radius:5px;}

@media all and (min-width:768px) {
.bbs_btn a{padding: 15px 30px;}
} 

.bbs_write input{width:100%;max-width: 100%;}
.bbs_write .input_w170{width:170px; }
.bbs_write .input_hn{width:100%;}
.bbs_write .input_wss{width:40px; }

.bbs_list .row-disabled td,
.bbs_list .row-disabled th ,
.bbs_list .row-disabled font,
.bbs_list .row-disabled * {background: #ebebeb;color:#c6c6c6}

/* 001_개인정보동의 */
.agree_box h4 {word-break: keep-all;background: none;margin-bottom: 20px;margin-top: 35px;font-size:26px;}
.agree_box .ag_txt {max-height: 240px; margin-bottom: 20px; width: 100%; height: 200px; padding: 20px; font-size: 14px; border: 2px solid #ebebeb; background: #fff; overflow-y: auto; border-radius: 15px;}
.agree_box h5 {padding: 0;margin: 0 0 5px 0;font-size: 16px; color: #515151;}
.agree_box .type01 {width: 100%;  min-width: 700px;  margin: 10px 0;  border-top: 1px solid #ebebeb;  border-left: 2px solid #fff;}
.agree_box .type01 th, .agree_box .type01 td { word-break: keep-all;  text-align: center;  padding: 10px 15px;  border: 1px solid #ebebeb;  border-top: none; vertical-align: middle;font-size: 16px;  line-height: 1.5em; font-size: 18px; font-family: 'NotoKrR';}
.agree_box .type01 th {background: #f5f6f6;  color: #666;}
.agree_box .type01 td { font-size: 16px;color: #666;}
.agree_box .txt_box {line-height: 1.35; word-break: keep-all;padding: 20px; margin-top: 20px; background: #223753; border-radius: 5px;}
.agree_box .type01 {width: 100%;  min-width: 700px;  margin: 10px 0;  border-top: 1px solid #e2e8ed;  border-left: 2px solid #fff;  border-right: 2px solid #fff;}
.agree_box .type01 td .ag_red {color: #8d5c5c;}

.agree_box .ag_txt p {font-size: 14px;color: #666;word-break: keep-all;}
.agree_box .ag_txt p strong{font-weight:500;color: #181818;}
.agree_box .ag_txt ul {padding-top: 3px;}
.agree_box .ag_txt li {padding-left: 5px; color: #666;;}
.agree_select {display: flex; justify-content: flex-end;}
.tab_container {display: inline-block;position: relative; margin-right: 10px;}
.tab_container>input[type='radio'] {display: initial;width: 100%;height: 100%;position: absolute; top: 0; left: 0;border: none; -webkit-appearance: none;  cursor: pointer;}
input[type="radio"] + label {color: rgba(0, 0, 0, 0.8);font-size: 16px; cursor: pointer; margin-right: 10px; line-height: 2;display: inline-block; }
.tab_container>input[type='radio']~label {color: #666;  margin-right: 0; display: contents;}
.bbs_table input[type=radio] {margin-top: 10px;}
input[type="radio"] + label span {position: relative; display: inline-block; width: 18px; height: 18px; margin: -3px 5px 0 0;vertical-align: middle; background: #fafafa; border: 2px solid #afafaf; border-radius: 10px; cursor: pointer;}
.agree_select>div:last-child {margin-left: 20px;}
input[type="radio"]:checked + label span:after { position: absolute;top: 50%; left: 50%; width: 6px; height: 6px; background: #2c2c76; border: 2px solid #2c2c76; border-radius: 9px;content: ""; display: block; transform: translate(-50%, -50%);}
.agree_box .ag_txt ul.ag_type {margin:20px 0;}
.agree_box .ag_txt ul.ag_type li:last-of-type {border-bottom: 1px solid #e2e8ed;}
.agree_box .ag_txt ul.ag_type strong {display: block; text-align: center;  font-size: 16px;  padding: 10px;  background: #f5f6f6;  border: 1px solid #e2e8ed;  border-right: 0; border-left: 0;}
.agree_box .ag_txt ul.ag_type span {display: block; word-break: keep-all;  padding: 20px 10px;} 
.agree_box .ag_txt ul.ag_type span.ag_red {color: #8d5c5c; font-weight: 600;}
.agree_box .ag_txt ul.ag_type li.col2 span {text-align:center;}

/* .agree_box .txt_box span, .agree_box .txt_box strong, .agree_box .txt_box label, .agree_box .txt_box input {vertical-align: baseline;  font-family: 'NotoKrL';}
.agree_box .txt_box span {display: inline-block;} */
.agree_btn {margin: 20px 0;}
.agree_btn a, .agree_btn button, .agree_btn input {border: 1px solid #02224d; display: inline-block; margin: 0 3px 7px 3px; font-weight: 700;border-radius: 7px;}
.agree_btn .agree_bt2 {background: #02224d;color: #fff;padding: 15px 30px;}
.agree_btn .agree_bt3 {background: #fff; padding: 15px 30px; border: 1px solid #212121; box-sizing: border-box;}

/* 002_본인인증 */
.login_con>div {padding: 20px;border-radius: 15px;border: 2px solid #ebebeb;}
.login_box div:before {content: '';display: block;width: 100px;height: 100px;margin: 0 auto;background: #ebebeb url(/images/hope/common/login_icon.png) no-repeat center -256px;border-radius: 15px;transition: .2s all;}
.login_box div {text-align: center;padding: 0 20px 35px;border-bottom: 1px dashed #d7d7d7;}
.login_box div.ipin::before {background: #ebebeb url(/images/hope/common/login_icon.png) no-repeat center -118px;}
.login_box div:last-child {padding: 10px 0 20px; border-bottom: 0;}
.login_box h5 {font-size: 30px;padding: 0;background: none;color: #02224d;margin: 15px 0;}
.login_box p {margin: 0 0 20px 0;line-height: 1.35;}
.login_box a {background: #02224d; color: #fff; display: inline-block; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: 500; border: 1px solid #f5f6f6;font-weight: 700; border: 1px solid #02224d;}

/* 003_신청완료 */
.g_complete .com_box {word-break: keep-all;background: #e9f8ff;padding: 30px 20px;border-radius: 10px;margin-bottom: 20px;text-align: center;font-size: 20px;color: #02224d;}
.g_complete p::before {content: '';background: url('/images/hope/content/mong_6.png')no-repeat;display: block;margin: 10px auto;background-size: contain;width: 150px;height: 150px;}
.g_complete.discord p::before {background: url('/images/hope/content/mong_4.png')no-repeat; background-size: contain;}
.g_complete.accord p::before {background: url('/images/hope/content/mong_8.png')no-repeat; background-size: contain;}
.g_complete p strong::before {content: ''; position: absolute; bottom: 30%; width: 90%; height: 15px;  z-index: -1;background-color: #3ee0b44f;}
.g_complete p strong {position: relative;z-index: 1;font-size: 50px; vertical-align: middle;font-weight: 100; padding: 0 5px 10px; display: inline-block;}
.g_complete span {line-height: 1.5;padding: 10px 0;display: block;font-size: 14px;}
.g_complete a {border: 1px solid #02224d;background: #02224d;padding: 15px 10px;border-radius: 5px;color: #fff;display: block;text-align: center;margin: 0 auto 70px;max-width: 200px;}
.g_complete p{font-weight:700;font-size: 20px;color: #13a8eb;}

.over_table .bbs_list{margin-top:30px}
.bbs_table th, .bbs_table td{padding:10px }
.bbs_write th, .bbs_write td{padding:10px;display: block;height: auto;text-align: center;}

/* Tablet */
@media all and (min-width:768px) {
.agree_box h4 {padding-top: 20px;}
input[type="radio"] + label {display: ruby;}
.login_con {margin-bottom: 100px;}
.login_con h4 {text-align: center;}
.login_con>div {margin: auto;padding: 50px;display: flex;justify-content: center;}
.login_box div {display: block;border-bottom: 0;border-right: 1px dashed #d7d7d7;padding: 0;width: 100%;}
.login_box p {line-height: 1.5;}
.login_box div:last-child {border-right: 0;padding: 0;}
.login_box a {padding: 15px 25px;font-size: 18px;}
.g_complete p strong {font-size: 60px; padding: 0 10px 10px;}
.g_complete p strong::before {width: 85%;}
.g_complete a {border-radius: 10px;}

.over_table .bbs_list{margin-top:0;}    
.bbs_write th, .bbs_write td{padding:10px 20px;display: table-cell;text-align: left;}
.bbs_table th, .bbs_table td{padding:10px 20px; }
.bbs_write th{text-align: center;}
.bbs_write .input_wss{width:40px}
.bbs_write .input_ws{width:100px !important}
.bbs_write .input_wm,
.bbs_write .input_w170{width:170px}
.bbs_write .input_wl{width:90%}
.bbs_write .input_wf{width:95%}
.bbs_write .input_h,
.bbs_write input.input_hn{width: 40%;}
.bbs_write .input_hl {width: 40%; max-width:335px;}
.bbs_write input.input_wss{width:40px}
}

/* Desktop */
@media all and (min-width:1023px) {
.g_complete .com_box {margin-bottom: 35px;}
.g_complete p::before{margin: 0 auto 25px auto;width: 200px;height: 200px;}
.g_complete p {font-size: 27px;}
.g_complete p strong::before {bottom: 25%;}
.g_complete p strong {font-size: 65px;}
.g_complete span {font-size: 18px;}

.agree_box .ag_txt ul.ag_type {display: flex;}
.agree_box .ag_txt ul.ag_type li { width:calc(100% / 3 - 3px);display: inline-block; padding-left:0; border-left: 1px solid #e2e8ed;}
.agree_box .ag_txt ul.ag_type li:first-of-type {border-left:0;}
.agree_box .ag_txt ul.ag_type li:last-of-type {border-bottom: 0;}
.agree_box .ag_txt ul.ag_type li span {border-bottom: 1px solid #e2e8ed; min-height: 70px;}
.agree_box .ag_txt ul.ag_type li.col2 {width: calc(100% /2 - 2px);min-height: auto;}
.agree_box .ag_txt ul.ag_type li.col2 span {min-height: auto;}
}

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

}                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

.con_loading { text-align:center; line-height:1.5em; word-break:keep-all; padding:50px 0 } 
.con_loading .tit { font-size:40px; font-weight:700; line-height:1.5em; color:var(--color7); margin:20px 0 } 
.con_loading .txt { background:#f4f5f8; padding:30px } 
.con_errer { text-align:center; word-break:keep-all; padding:30px 0 } 
.con_errer:before { content:""; display:block; width:100%; height:166px; background:url("/images/hope/common/errer.png") no-repeat center 0; margin:0 0 30px 0 } 
.con_errer strong { display:block; font-size:24px; font-weight:bold;  margin:0 0 30px 0 } 
.errer_page .con_errer { padding:100px 30px 0 30px } 
.con_nodata{text-align:center;word-break:keep-all;padding:30px 0;border: 1px solid #ebebeb;}
.con_nodata:before{content:"";display:block;width:100%;height:266px;background: url("/images/hope/common/nodata.png") no-repeat center 0;margin:0 0 30px 0}
.con_nodata strong{display:block;font-size:24px;font-weight:bold;margin:0 0 20px 0}

@media all and (min-width:768px){
.con_loading .tit { font-size:60px } 
.con_loading .txt { width:70%; padding:40px; margin:0 auto } 
.con_errer:before { margin:0 0 50px 0 } 
.con_errer strong { font-size:30px } 
.con_nodata:before{margin:0 0 50px 0}
.con_nodata strong{font-size:40px} 
}

.basic_step>ol>li {padding: 27px 0 0 0;margin:0 0 8px 0;text-align:center;line-height:1.5em;position:relative} 
.basic_step>ol>li:first-child { padding:0 } 
.basic_step>ol>li strong {display:block;background: #f5f6f6;padding:16px 20px;position:relative} 
.basic_step>ol>li strong:before {content:"";display:block;width: 21px;height: 18px;background: url("/images/hope/common/basic_step2.png") 0 0 no-repeat;position:absolute;top: -25px;left: 50%;transform: translate(-50%, 0);} 
.basic_step>ol>li:first-child strong:before { display:none } 
.basic_step>ol>li:last-child strong {background: #0a9ee1;color: #fff;} 
.basic_step>ol>li div {display:block;border: 1px solid #ddd;padding:15px;word-break: keep-all;border-top: none;} 
.basic_step>ol>li div em { font-style:normal; font-size:14px } 
.basic_step>ol>li strong.line2,.basic_step>ol>li div.line2 { padding:27px 20px } 
.basic_step div li {padding:0 0 0 12px;position:relative;text-align:left} 
.basic_step div li:before {content:"";display:block;width: 6px;height: 2px;background: #979797;position:absolute;top: 11px;left:0;} 

.basic_step2 li { padding:25px 0 0 0; margin:0 0 8px 0; text-align:center; line-height:1.5em } 
.basic_step2 li:first-child { padding:0 } 
.basic_step2 li strong {display:block;background: #f5f6f6;padding: 16px 30px;position:relative} 
.basic_step2 li strong:before {content:"";display:block;width: 21px;height: 18px;background: url("/images/hope/common/basic_step2.png") 0 0 no-repeat;position:absolute;top: -22px;left: 50%;transform: translate(-50%, 0);} 
.basic_step2 li:first-child strong:before { display:none } 
.basic_step2 li:last-child strong {background: #0a9ee1;color: #fff;} 
.basic_step2 li span {display:block;padding: 10px 0 0 0;word-break:keep-all;} 
.basic_step2 li span em { font-style:normal; font-size:14px } 
.basic_step2 li strong.line2,.basic_step2 li span.line2 { padding:27px 20px } 

.basic_step3>ol>li { padding:25px 0 0 0; margin:0 0 8px 0; line-height:1.5em; position:relative } 
.basic_step3>ol>li:first-child { padding:0 } 
.basic_step3>ol>li strong {display:block;border: 2px solid #0f2a72;padding:16px 20px;text-align:center;position:relative} 
.basic_step3>ol>li strong:before {content:"";display:block;width: 21px;height: 18px;background: url("/images/hope/common/basic_step2.png") 0 0 no-repeat;position:absolute;top: -25px;left:50%;transform:translate(-50%, 0)} 
.basic_step3>ol>li:first-child strong:before { display:none } 
.basic_step3>ol>li div {display:block;border: 1px solid #ddd;padding:20px;word-break:keep-all;font-size: 16px;} 
.basic_step3>ol>li div em { font-style:normal; font-size:14px } 
.basic_step3>ol>li strong.line2,.basic_step>ol>li div.line2 { padding:27px 20px } 
.basic_step3 div li {padding:0 0 0 12px;margin:7px 0;font-size:16px;position:relative;text-align:left;line-height:1.25em} 
.basic_step3 div li:before {content:"";display:block;width: 6px;height: 2px;background: #979797;position:absolute;top: 9px;left:0;} 
.basic_step3 div li li { font-size:15px; color:#898989; margin:5px 0 } 
.basic_step3 div li li:before { content:""; display:block; width:3px; height:1px; background:#767676; position:absolute; top:7px; left:0; border-radius:100% } 
.basic_step3 div .li_none li { padding:0 } 
.basic_step3 div .li_none li:before { display:none } 

@media all and (min-width:1023px){
/*.basic_tab li.on a {font-size:20px;} */
.basic_tab li a{padding:15px 100px}

.basic_tabbox .tab_content { padding:50px } 
.basic_step>ol { overflow:hidden } 
.basic_step>ol>li {float:left;padding: 0 0 0 35px;margin: 0 0 10px 0;} 
.basic_step>ol>li strong:before {width: 21px;height: 18px;background: url('/images/hope/common/basic_step1.png') no-repeat;top: 100%;left: -27px;transform:translate(0, -50%);} 
.basic_step ol.col2>li { width:calc((100% - 70px) / 2) } 
.basic_step ol.col3>li { width:calc((100% - 105px) / 3) } 
.basic_step ol.col4>li { width:calc((100% - 140px) / 4) } 
.basic_step ol.col5>li { width:calc((100% - 175px) / 5) } 
.basic_step ol.col6>li { width:calc((100% - 210px) / 6) } 
.basic_step2 ol { overflow:hidden } 
.basic_step2>ol>li {float:left;padding: 0 0 0 35px;margin: 0 0 10px 0;} 
.basic_step2>ol>li strong:before {width: 21px;height: 18px;background: url('/images/hope/common/basic_step1.png') no-repeat;top:50%;left: -25px;transform:translate(0, -50%);} 
.basic_step2 ol.col2>li { width:calc((100% - 70px) / 2) } 
.basic_step2 ol.col3>li { width:calc((100% - 105px) / 3) } 
.basic_step2 ol.col4>li { width:calc((100% - 140px) / 4) } 
.basic_step2 ol.col5>li { width:calc((100% - 175px) / 5) } 
.basic_step2 ol.col6>li { width:calc((100% - 210px) / 6) } 

.basic_step3>ol>li { display:table; width:100% } 
.basic_step3>ol>li strong { display:table-cell; width:200px; vertical-align:middle } 
.basic_step3>ol>li div {display:table-cell;border-left: none;} 
.basic_step3>ol>li.div_none { overflow:hidden } 
.basic_step3>ol>li.div_none strong { float:left } 


}

/***컨텐츠***/
/* sub1 */
.info_top .top {text-align: center;padding: 20px 10px;word-break: auto-phrase;border-radius: 10px;position: relative;/* background: #e7f7ff; */background: linear-gradient(to bottom, transparent 24px, #ceedfd 24px, #ceedfd 25px) 0 0 / 100% 25px repeat-y, linear-gradient(to right, transparent 24px, #ceedfd 24px, #ceedfd 25px) 0 0 / 25px 100% repeat-x #ebf8ff;}
.info_top .top:before{display:block;content:'';background: url('/images/hope/content/mong_6.png') no-repeat center /contain;width: 200px;height: 190px;margin: 0 auto;}
.info_top .top:after{display:block;content:'';background: url('/images/hope/content/mong_5.png') no-repeat center /contain;width: 200px;height: 152px;margin: 0 auto;display: none;}
.info_top .top h4{margin: 0;font-family: 'ELandNice';font-weight: 300;font-weight: normal;}
.info_top .top h4 span{color: #2b4baf;display: block;}
.info_top .basic_ul{margin-bottom:20px}
.info_top .basic_ul li{font-size:18px;}

/* Desktop */
@media all and (min-width:768px) {
.info_top .top {padding: 30px;}
.info_top .top h4{font-size: 61px;}
.info_top .basic_ul{margin-bottom:20px}
.info_top .basic_ul li{font-size:18px;}


}

@media all and (min-width:1400px) {
.info_top .top {height: 245px;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.info_top .top:before{margin: 0;position: absolute;width: 300px;height: 270px;right: 8%;top: 24%;}
.info_top .top:after{display:block;margin: 0;position: absolute;width: 223px;height: 220px;left: 13%;top: 33%;}
}

/* sub2 */

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

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

}  


/* sub3 */

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

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

}  


/* sub4 */

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

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

}