@charset "utf-8";
@import url(setting.css);
/* ************************************************************************************************************************************************************
						《 공통 레이아웃 스타일 》
************************************************************************************************************************************************************ */

/* ============================== [ 레이아웃 리셋 Layout Reset ] ========================================================================================== */
/* Reset */
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,big,cite,code,del,dfn,font,figure,figcaption,img,ins,q,s,samp,small,strike,sub,sup,tt,var,
b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {font:18px/1.3em 'Pretendard',sans-serif;}
button,input,textarea {font:18px/1.3em 'Pretendard',sans-serif;}
select {font:18px/1.3em 'Pretendard',sans-serif;}
* {word-break: keep-all; word-wrap:break-word;}
.go_view {position:absolute; left:0; top:0; height:100%; width:100%;}
figure img {display: block; width: 100%; height: auto; object-fit: cover;}

/* ============================== [ 공통레이아웃 ] ========================================================================================== */
.inner {width: 1322px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
/* -------------------- #header ---------------------------------------- */
#header {width:100%; min-width:1440px; height: 102px; position:sticky; left:0; top:0; z-index:999; background:url(../images/main/bg_header.png) no-repeat 0 0; background-size:100% 100%; box-shadow:0px 10px 30px 0px rgba(0, 43, 149, 0.2);}
#header .inner {height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}
#header .main_logo a {display: block; width: 117px; height: 40px; background:url(../images/main/logo_white.svg) no-repeat 0 0; background-size:100% auto;}
#header nav {display: flex; align-items: center;}
#header nav .gnb_wrap {display: flex;}
#header nav .gnb_wrap > li {margin-left: 85px; position: relative;}
#header nav .gnb_wrap > li > a {display: inline-block; padding:37px 20px; font-weight: 700; background: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#header nav .gnb_wrap > li:hover > a {background-image:linear-gradient(to right, #00b6f0 1%,#0ad8f5 34%,#0feaf8 58%,#00e5e5 100%);}
#header nav .gnb_wrap ul {position:absolute; left:50%; transform: translateX(-50%); top:98px; box-shadow:0px 4px 10px 0px rgba(0, 0, 0, .2); width:200px; opacity: 0; visibility: hidden; transition: .3s;}
#header nav .gnb_wrap ul::after {display:block; content:''; width:100%; height:9px; position:absolute; left:0; top:-9px; background-image:linear-gradient(to right, #00b6f0 1%,#0ad8f5 34%,#0feaf8 58%,#00e5e5 100%);}
#header nav .gnb_wrap ul li:not(:last-child) {border-bottom:1px solid #dcdcdc;}
#header nav .gnb_wrap ul li a {display:block; height:47px; width:100%; background-color:#fff; font-size:16px; font-weight:500; color:#141d3e; text-align:center; line-height:47px;}
#header nav .gnb_wrap ul li a ~ a {border-top:1px solid #dcdcdc;}
#header nav .gnb_wrap ul li a:hover {background-color:#00b6f0; font-weight:700; color:#fff;}
#header nav .gnb_wrap > li:hover ul {opacity: 1; visibility: visible;}
#header nav .utill_menu {display:flex; margin-left:85px;}
#header nav .mp_btn {height:31px;box-sizing:border-box; background: linear-gradient(to right, #00b6f0 1%,#0ad8f5 34%,#0feaf8 58%,#00e5e5 100%); border-radius:20px; padding:3px 10px;}
#header nav .mp_btn span {font-size: 16px; font-weight: 600; color: #171d2e; padding-left: 24px; background:url(../images/main/ico_login.svg) no-repeat left center; background-size:16px auto; line-height: 1em;}
#header nav .login_btn {height:32px; box-sizing:border-box; margin-left:8px; border-radius:20px;  border:1px solid transparent; background-image:linear-gradient(#151a29, #151a29), linear-gradient(to right, #00b6f0 1%,#0ad8f5 34%,#0feaf8 58%,#00e5e5 100%); background-origin: border-box;background-clip: content-box, border-box;}
#header nav .login_btn span {font-size: 16px; font-weight: 500; padding:6px 18px; background: linear-gradient(to right, #00b6f0 1%,#0ad8f5 34%,#0feaf8 58%,#00e5e5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 31px;}

/* -------------------- #footer ---------------------------------------- */
#footer {padding-top:80px; min-width:1440px;}
#footer .banner {display:flex; background-color:#ECECEC; height:142px; align-items:center;}
#footer .banner ul {display:flex; align-items:center;}
#footer .banner ul li {width:25%;}
#footer .banner ul li a {width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.f_wrap {background-color:#1E1E1E; padding:114px 0 122px;}
.f_wrap .inner {display:flex;}
.f_wrap .f_logo {width:149px; height:53px;}
.f_wrap .f_logo img {width:100%; height:auto;}
.f_wrap .f_info {margin-left:52px; padding-top:10px; flex:1;}
.f_wrap .f_link {display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:2px solid rgba(160, 160, 160, .3);}
.f_wrap .f_link ul {display:flex;}
.f_wrap .f_link ul li ~ li {margin-left:30px; padding-left:30px; position:relative;}
.f_wrap .f_link ul li ~ li::after {display:block; content: ''; width:1px; height:13px; position:absolute; left:0; top:50%; transform: translateY(-50%); background-color:#3d3d3d;}
.f_wrap .f_link ul li a {color:#B3B2B2; font-size:15px; font-weight:500;}
.f_wrap .f_txt{margin-top:18px;}
.f_wrap .f_txt p {font-size:14px; line-height:30px; color:#A4A1A1;}

/* Contents */
#contents {min-width: 1440px;}

/* 메인 이미지 */
/*
.visal_area {position:relative;}
.visal_area .bg {height: 812px; background:url(../images/main/visual_01.png) no-repeat center center; background-size:cover;}
.visal_area .num_02 .bg {background-image:url(../images/main/visual_02.png);}
.visal_area .num_03 .bg {background-image:url(../images/main/visual_03.png);}
.visal_area .num_04 .bg {background-image:url(../images/main/visual_04.png);}
.visal_area .txt_wrap {position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); width: 1282px;}
.visal_area p {padding:4px 8px; background-color:#141D3E; font-size:24px; font-weight:600; color:#fff; display:inline-block;}
.visal_area h2 {margin-top:12px; color:#fff; font-size:73px; font-weight:800;}
.visal_area strong {font-size:82px;}
*/

/* ============================== [ 공통스타일 ] ========================================================================================== */
/* 버튼 */
.btn_wrap {display:flex;}
.btn_wrap .btn {background-color:#D3DCE6; color:#141D3E; border-radius:20px; font-weight:600; font-size:22px; height:80px; display:flex; align-items:center; justify-content:center; flex:1;}
.btn_wrap .btn ~ .btn {margin-left:30px;}
.btn_wrap.btn_list {margin-top:30px; padding:80px 0;}
.btn_wrap.btn_list .btn span {padding-left:54px; position:relative;}
.btn_wrap.btn_list .btn span::after {display:block; content: ''; width:36px; height:36px; background:url(../images/sub/ico_list.svg) no-repeat 0 0; position:absolute; left:0; top:50%; transform: translateY(-50%);}

/* 목록 */
.class_li {display:flex; flex-wrap:wrap; margin:-36px 0 0 -30px;}
.class_li .go_view {z-index:2;}
.class_li li {margin:36px 0 0 30px; box-shadow:0px 4px 12px 0px rgba(0, 0, 0, .2); overflow:hidden; position:relative;}
.class_li li figure {width:100%; overflow:hidden; z-index:1; position:relative; }
.class_li li figure .name {position:absolute; left:20px; bottom:7px; font-size:24px; font-weight:600; line-height:36px; z-index:1;}
.class_li li .txt_info {padding:24px 24px 24px 0; display:flex; align-items:center; position:relative; z-index:1; background-color:#fff;}
.class_li li .left_txt {width:80px; position:relative; padding-left:20px; box-sizing:border-box;}
.class_li li .left_txt::after {display:block; content: ''; width:1px; height:63px; background-color:#CCCCCC; position:absolute; right:0; top:50%; transform: translateY(-50%);}
.class_li li .left_txt .date {font-size:21px; line-height:40px;}
.class_li li .left_txt .date .month {font-family: 'Prototype';}
.class_li li .left_txt .date .day {display:block; font-family: 'Prototype'; font-size:41px;}
.class_li li .rgt_txt {margin-left:24px; width: calc(100% - 104px);}
.class_li li .rgt_txt .tit {font-size:24px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.class_li li .rgt_txt .txt {font-size:19px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.class_li li .rgt_txt strong {font-weight:600; font-size: 20px; background: linear-gradient(to right, #00b6f0 1%,#0ad8f5 34%,#0feaf8 58%,#00e5e5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.class_li li.end::after {display:block; content: '종료'; width:80px; height:80px; font-size:26px; font-weight:700; color:#fff; border-radius: 50%; line-height:80px; text-align:center; position:absolute; right:10px; top:10px; background: url(../images/sub/bg_end.png) no-repeat center center; z-index:1;}
.class_li li.data_none {box-shadow: none;}

/* type01 */
.class_li.type_01 li {border-radius:24px; width:calc(33.33% - 30px); background-color:#ececec;}
.class_li.type_01 li::before {display:block; content: ''; background:url(../images/main/logo_gradients.svg) no-repeat 0 0; width:227px; height:118px; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
.class_li.type_01 li figure {height:210px;}
.class_li.type_01 li figure img {height:100%;}
.class_li.type_01 li .left_txt .date .month {font-size:27px;}
.class_li.type_01 li .txt_info {border-top:3px solid #FFCC02;}

/* type02 */
.class_li.type_02 {margin-left:-30px;}
.class_li.type_02 li {border-radius:24px 24px 24px 0; margin-left:30px; width:calc(33.33% - 30px);}
.class_li.type_02 li figure {height:230px;}
.class_li.type_02 li figure::after {display:block; content:''; width:100%; height:100%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); position:absolute; left:0; top:0;}
.class_li.type_02 li figure img {height:100%;}
.class_li.type_02 li .txt_info::after {display:block; content: ''; background:url(../images/main/emblem_shd.png) no-repeat 0 0; background-size:100% auto; width:140px; height:135px; position:absolute; right:0; top:-96px;}
.class_li.type_02 .rgt_txt {line-height:1.5em;}
.class_li.type_02 .rgt_txt .tit {word-wrap:break-word; white-space: pre-wrap; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.class_li.type_02 .rgt_txt .txt {font-size:19px; line-height:25px;}
.class_li.type_02 li .name {color: #fff;}

/* ============================== [ 회원 ] ========================================================================================== */

.join_area {width:1000px; margin:0 auto; padding-top:50px; padding-bottom:220px;}
.join_tit {font-size:34px; font-weight:700; color:#141D3E; margin-bottom:50px;}


/* Form */
.inpt {flex:1; padding:0 20px; border:1px solid #999; background-color:#fff; border-radius:6px; color:#111; font-weight:500; height:53px; width:100%; box-sizing: border-box;}
.inpt.error {border-color:#FF48A0; color:#ff48a0;}
.inpt.error::placeholder {color:#ff48a0;}
.inpt_wrap {display:flex; align-items:center; position:relative;}
.inpt_wrap ~ .inpt_wrap {margin-top:18px;}
.inpt_wrap .inpt_tit {color:#333; position:relative; width:210px; font-size: 20px;}
.inpt_wrap .inpt_tit span {position:relative;}
.inpt_wrap .inpt_tit span::after {display:none; content: '*'; font-size:15px; font-weight:600; color:#FF48A0; position:absolute; right:0; top:50%; transform: translateY(-50%); width:15px; height:16px; line-height: 20px;}
.inpt_wrap .inpt_tit.nesc span {padding-right:21px;}
.inpt_wrap .inpt_tit.nesc span::after {display:block;}
.inpt_wrap .input_id {padding-right:131px;}
.inpt_wrap .btn_dupli {position:absolute; right:11px; top:50%; transform: translateY(-50%); width:109px; height:42px; background-color:#d2d2d2; color:#fff; font-weight:600; border-radius:6px;}
.inpt_wrap .btn_dupli.active {background-color:#08B7E5;}
.terms_wrap {margin-top:50px; padding-top:50px; padding-left:205px; border-top:1px solid #D3DCE6}
.join_area .btn_wrap {margin-top:50px;}
.btn_wrap .btn_join span {height:27px; line-height:27px; padding-left:45px; background:url(../images/sub/ico_join_btn.svg) no-repeat left center; background-size: 27px auto;}
.btn_wrap .btn_join.active {background-color:#08B7E5; color:#fff;}
.btn_wrap .btn_join.active span {background-image:url(../images/sub/ico_join_on.svg);}

/* textarea */
textarea.inpt {height:225px; resize: none; padding:12px 20px; box-sizing:border-box; line-height: 36px;}

/* select box */
.select_wrap {display:flex; justify-content:space-between; flex:1;}
.select_wrap select {padding-right:64px; background-color:transparent;}
.select_wrap .box {width:calc(50% - 15px); position:relative;}
.select_wrap .box::after {display:block; content: ''; background:url(../images/sub/ico_select.svg) no-repeat 0 0; width:40px; height:40px; position:absolute; right:12px; top:50%; transform: translateY(-50%); z-index:-1;}
.select_wrap .box ~ .box {margin-left:30px;}

/* checkbox */
.form_chk {display:flex; align-items:center;}
.form_chk .icon {display:block; width:40px; height:40px; background:url(../images/sub/ico_chk_off.svg) no-repeat 0 0;}
.form_chk input[type="checkbox"]:checked ~ .icon {background-image: url(../images/sub/ico_chk_02.svg);}
.form_chk.chk_all input[type="checkbox"]:checked ~ .icon {background-image: url(../images/sub/ico_chk_01.svg);}
.form_chk p {color:#333; margin-left:10px; font-size: 20px;}
.form_chk p span {color:#FF48A0;}
.chk_li {margin-top:12px; padding-left:40px; display:flex; align-items:center; justify-content:space-between;}
.chk_li > a {font-size:16px; color:#666;}

/* 로그인 */
.login_area {width:600px; margin:107px auto 0; padding-bottom:100px;}
.login_area .login_tit {text-align:center; margin-bottom:30px;}
.login_area .login_tit h2 {font-size:34px; font-weight:700; color:#141D3E; padding-top:130px; background:url(../images/sub/login_pro.png) no-repeat top center;}
.login_area .login_tit.pw_cmplt h2 {background-image:url(../images/sub/ico_pw_01.png);}
.login_area .login_tit.pw_fail h2 {background-image:url(../images/sub/ico_pw_02.png);}
.login_area .inpt_wrap .inpt_tit {width:150px;}
.login_btm {margin-top:50px; padding-top:50px; border-top:1px solid #D3DCE6}
.login_btm .btn_wrap ~ .login_link {margin-top:50px;}
.login_btm .login_link {display:flex; align-items:center; justify-content:center;}
.login_btm .login_link a {font-size:22px; font-weight:600; padding:8px 12px 8px 51px; background-position: left 12px center; background-repeat: no-repeat; background-size: 36px 36px;}
.login_btm .login_link a ~ a {margin-left:73px;}
.login_btm .login_link .link_01 {color:#141D3E; background-image: url(../images/sub/ico_join_per.svg); background-size: 27px auto;}
.login_btm .login_link .link_02 {color:#999; background-image: url(../images/sub/ico_join_gy.svg); background-size: 27px auto;}
.btn_wrap .btn_login span {height:27px; line-height:27px; padding-left:45px; background:url(../images/sub/ico_unlock.svg) no-repeat left center; background-size: 27px;}
.pw_txt {color:#666; text-align:center; font-size: 20px;}
.pw_txt span {font-weight:500; color:#ff48a0;}
.pw_txt.mb30 {margin-bottom:30px;}

/* ============================== [ FAQ ] ========================================================================================== */

/* 탭 */
.faq_tab {margin-top:20px; border-bottom:1px solid #ccc;}
.faq_tab ul {display:flex;}
.faq_tab ul li ~ li {margin-left:80px;}
.faq_tab ul li a {display:block; box-sizing:border-box; padding:0 10px 22px; color:#141D3E; font-size:22px; line-height:26px;}
.faq_tab ul li.on a {border-bottom:4px solid #08B7E5; font-size:24px; font-weight:700;}
.srch_wrap {margin-top:50px; display:flex; align-items:center; justify-content:center;}
.srch_form {display:flex; align-items:center; justify-content:center;}
.srch_form .select_wrap .box {width: 180px;}
.srch_form select {width: 180px;}
.srch_form .inpt_wrap {margin-left: 20px; width: 407px;}
.srch_form .inpt_wrap .inpt {padding-right: 54px;}
.srch_form .inpt_wrap .ico_srch {display: block; width: 40px; height: 40px; background:url(../images/sub/ico_srch.svg) no-repeat 0 0; position: absolute; right: 7px; top:7px;}

/* faq 목록 */
.faq_wrap {margin-top: 50px; border-top:1px solid #F0F0F0;}
.faq_wrap .item {border-bottom:1px solid #F0F0F0;}
.faq_wrap .item .que {padding:20px 88px 20px 12px; display: flex; align-items: center; position: relative; transition: .3s;}
.faq_wrap .item .que > span {text-align: center; display: block; width: 40px; height: 40px; line-height: 40px; font-size: 34px; font-weight: 700; color: #08B7E5;}
.faq_wrap .item .que p {margin-left: 24px; font-size: 20px; color: #454545; line-height: 24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; flex:1;}
.faq_wrap .item .ans {display: none; padding:24px 12px; border-top:1px solid #F0F0F0; overflow: hidden;}
.faq_wrap .item .ans span {float: left; display: block; width: 40px; height: 40px; line-height: 40px; color: #999; font-size: 30px; font-weight: 600; text-align: center;}
.faq_wrap .item .ans p {width: calc(100% - 64px); float: left; font-size: 18px; line-height:32px; color: #666; margin-left: 24px;}
.faq_wrap .item .arr {width: 40px; height: 40px; display: block; background:url(../images/sub/ico_select.svg) no-repeat 0 0; position: absolute; right: 24px; top: 20px; transition:transform .3s;}
.faq_wrap .item.active .que {background-color: #F8F8F8;}
.faq_wrap .item.active .arr {transform: rotate(180deg);}

/* ============================== [ 팝업 ] ========================================================================================== */
body.dim {overflow:hidden;}
body.dim:before {background-color:rgba(0, 0, 0, 0.7); content:""; position:fixed; left:0; top:0; height:100%; width:100%; z-index:9990;}

.popup {display: none; position: fixed; left: 50%; top: 50%; background-color: #fff; border-radius:16px; transform: translate(-50%, -50%); width: 800px; z-index: 9999; box-sizing: border-box; overflow: hidden;}
.popup .content {padding:40px; max-height: 98vh; overflow-y: auto; box-sizing: border-box;}
.popup .content .pop_tit {font-size: 26px; font-weight: 600; line-height: 32px; color: #141D3E; margin-bottom: 20px;}
.popup .content .pop_tit ~ .pop_tit {margin-top:40px;}
.popup .content .inpt_wrap .inpt_tit {width: 160px;}
.popup .content .terms {border:1px solid #999999; border-radius:5px; padding:16px 20px; height: 340px; box-sizing: border-box; overflow-y: auto;}
.popup .content .terms > * {font-size: 18px; font-weight: 500; color: #333; line-height: 36px;}
.popup .content .btn_wrap {margin-top: 40px;}
.popup .content .btn_wrap .btn {height: 60px; border-radius: 16px;}
.popup .pop_close {display: block; width: 50px; height: 50px; background:url(../images/main/ico_close.svg) no-repeat 0 0; position: absolute; right: 0; top: 0;}

.popup.pop_pw {width:640px;}
.popup.pop_pw .pop_tit {font-size:24px;}
.popup.pop_pw .content .inpt_wrap .inpt_tit {width: 210px;}