/* fonts */
@import url('https://webfontworld.github.io/pretendard/Pretendard.css'); /* 기본 폰트 */
div, table, td, th, span, p, a, h1, h2, h3, h4, h5, h6, dl, ol, ul, li, dd, dt { font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; word-break: break-word;}
* { font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; word-break: break-word; box-sizing: border-box; vertical-align: middle; line-height: 1.6;} /* 중문이 깨질 경우 폰트 변경해서 사용하세요 */

/* UI */
#appMenuButton {display:none; position:absolute; top: 50%; transform: translateY(-50%); left:1rem; box-sizing:border-box; width:2rem; height:2rem; text-align:center; z-index:10;}
#appMenuButton i {font-size:2rem; line-height:2rem;}

/* default */
.mt0 {margin-top:0 !important;}
.mt5 {margin-top:0.33rem !important;}
.mt10 {margin-top:0.67rem !important;;}
.mt15 {margin-top:1rem !important;}
.mt20 {margin-top:1.33rem !important;}
.mt30 {margin-top:2rem !important;}
.mt40 {margin-top:2.67rem !important;}
.mt50 {margin-top:3.33rem !important;}
.mt60 {margin-top:4rem !important;}
.mt70 {margin-top:4.67rem !important;}
.mt80 {margin-top:5.33rem !important;}
.mt90 {margin-top:6rem !important;}
.mt100 {margin-top:6.67rem !important;}
.mb0 {margin-bottom:0 !important;}
.mb5 {margin-bottom:0.33rem !important;}
.mb10 {margin-bottom:0.67rem !important;}
.mb15 {margin-bottom:1rem !important;}
.mb20 {margin-bottom:1.33rem !important;}
.mb30 {margin-bottom:2rem !important;}
.mb40 {margin-bottom:2.67rem !important;}
.mb50 {margin-bottom:3.33rem !important;}
.mb60 {margin-bottom:4rem !important;}
.mb70 {margin-bottom:4.67rem !important;}
.mb80 {margin-bottom:5.33rem !important;}
.mb90 {margin-bottom:6rem !important;}
.mb100 {margin-bottom:6.67rem !important;}
.ml5 {margin-left:0.33rem !important}
.ml10 {margin-left:0.66rem !important}
.ml15 {margin-left:1rem !important}
.mr5 {margin-right:0.33rem !important}
.mr10 {margin-right:0.66rem !important}
.mr15 {margin-right:1rem !important}

.pt10 {padding-top:0.67rem !important;}
.pt20 {padding-top:1.33rem !important;}
.pb10 {padding-bottom:0.67rem !important;}
.pb20 {padding-bottom:1.33rem !important;}
.pl10 {padding-left:0.67rem !important;}
.pl15 {padding-left:1rem !important;}
.pl20 {padding-left:1.33rem !important;}
.pl30 {padding-left:2rem !important;}

.dpb {display:block !important;}
.dpi {display:inline !important;}
.dpib {display:inline-block !important;}
.dpf {display: flex;}
.por {position:relative}
.poa {position:absolute;}
.pof {position:fixed}
.fl {float:left !important;}
.fr {float:right !important;}
.cle:after {content: ""; display:block; clear:both}
.tac {text-align:center !important;}
.tal {text-align:left !important;}
.tar {text-align:right !important;}

html {font-size: 15px;}
body {min-width: 320px;}
body.freeze {overflow: hidden;}
#con_container img {max-width: 100%;}
[data-object-fit='cover'] {width: 100%; height: 100%; object-fit: cover;}
[data-object-fit='contain'] {width: 100%; height: 100%; object-fit: contain;}

/* title */
.title01 {margin-bottom: 1rem; font-size: 1.6rem; font-weight: bold; color: #1694a5;}
.title02 { position: relative; margin-bottom: 0.8rem; padding-left: 0.7rem; font-size: 1.33rem; }
.title02::before { position: absolute; top: 50%; left: 0; display: inline-block; width: 0.4rem; height: 60%; margin-right: 0.5rem; background-color: #1694a5; content: ''; transform: translate(0px, -50%);}
.title03 {margin-bottom: 0.5rem; font-size: 1.2rem; color: #11717e;}
.title04 {margin-bottom: 0.5rem; font-size: 1.2rem;}

/* txt */
.gray-box {padding: 2rem; background-color:#f8f8f8;}
.gray-box .box-tit {margin-bottom: 1rem; color: #1694a5; font-size: 1.2rem;}
.gray-box span {vertical-align: top;}

/* list */
.nor-list > li {display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1rem;}
.nor-list > li > strong {display: block; width: 120px; margin-right: 2rem; font-size: 1.2rem; font-weight: bold; color:#1694a5; text-align: justify; text-align-last: justify;}
.nor-list > li > span {display: block; width: calc(100% - 120px - 2rem);}
.nor-list > li > img {height: 4rem; margin-right: 1rem;}
.round-list > li {display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1rem;}
.round-list > li > strong {display: block; width: 180px; margin-right: 2%; padding: 0.2rem 0.5rem; background-color: #1694a5; color: #fff; font-size: 1.1rem; border-radius: 1rem; text-align: center;}
.round-list > li > img {height: 4rem; margin-right: 1rem;}
.dash-list > li {padding-left: 14px; text-indent: -7px;}
.dash-list > li::before {display: inline-block; margin-right: 0.5rem; content: '-';}
.dot-list > li {padding-left: 14px; text-indent: -7px;}
.dot-list > li::before {display: inline-block; margin-right: 0.5rem; content: '\00b7';}
.img-list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.img-list > li {display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; color: #fff; padding: 1rem; background-color: #f8f8f8; text-align: center; border-radius: 2rem;}
.img-list > li::after {display: block; position: absolute; top: 50%; transform: translateY(-50%); max-width: 15px; width: 1.25vw; max-height: 27px; height: 2.25vw; background: url('/images/arr_next.png') no-repeat center center / contain; content: '';}
.img-list > li:last-child:after {display: none;}
.img-list > li > img {height: 4rem; margin-bottom: 1rem;}
.img-list > li h3 {color: #1694a5; font-size: 1.2rem;}
.img-list.item3 > li {width: 30%;}
.img-list.item3 > li::after {right: -2rem; z-index: 10;}
.img-list.item4 > li {width: 22%;}
.img-list.item4 > li::after {right: -2rem; z-index: 10;}
.img-list.item5 > li {width: 18%;}
.img-list.item5 > li::after {right: -1.5rem; z-index: 10;}
.img-list.none-arrow > li::after {display: none;}
.step-list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.step-list > li {position: relative; padding: 2rem; border: 3px solid #000;}
.step-list > li::after {display: block; position: absolute; top: 50%; transform: translateY(-50%); right: -43px; border: 20px solid #000; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; content: '';}
.step-list > li:last-child::after {display: none;}
.step-list > li h3 {margin-bottom: 1rem; font-size: 1.4rem;}
.step-list > li i {position: absolute; top: 2rem; right: 2rem; font-size: 2rem;}
.step-list.item3 > li {width: 31%;}
.step-list.item4 > li {width: 23%;}
.step-list.item5 > li {width: 31%; margin-bottom: 1rem;}
.step-list.item5 > li:nth-child(n+4) {width: 47%; margin-bottom: 0;}
/* color */
.step-list > li:nth-child(1) {border-color: #0e449b;}
.step-list > li:nth-child(2) {border-color: #f5a512;}
.step-list > li:nth-child(3) {border-color: #891837;}
.step-list > li:nth-child(4) {border-color: #186c5f;}
.step-list > li:nth-child(5) {border-color: #6399d2;}
.step-list > li:nth-child(1)::after {border-color: #0e449b;}
.step-list > li:nth-child(2)::after {border-color: #f5a512;}
.step-list > li:nth-child(3)::after {border-color: #891837;}
.step-list > li:nth-child(4)::after {border-color: #186c5f;}
.step-list > li:nth-child(5)::after {border-color: #6399d2;}
.step-list > li:nth-child(1) h3,
.step-list > li:nth-child(1) i {color: #0e449b;}
.step-list > li:nth-child(2) h3,
.step-list > li:nth-child(2) i {color: #f5a512;}
.step-list > li:nth-child(3) h3,
.step-list > li:nth-child(3) i {color: #891837;}
.step-list > li:nth-child(4) h3,
.step-list > li:nth-child(4) i {color: #186c5f;}
.step-list > li:nth-child(5) h3,
.step-list > li:nth-child(5) i {color: #6399d2;}

/* table */
table .bg {background-color: #1694a5 !important; color: #fff;}

.nor-tbl {width: 100%; border-top: 2px solid #1694a5;}
.nor-tbl th,
.nor-tbl td {padding: 0.5rem 1rem; border-bottom: 1px solid #ddd;}
.nor-tbl thead th {background-color: #f1f1f1; white-space: nowrap;}
.nor-tbl tbody th {background-color: #f7f7f7; white-space: nowrap;}

.nor-tbl.add-bd th,
.nor-tbl.add-bd td {border-left: 1px solid #ddd;}
.nor-tbl.add-bd th:first-child,
.nor-tbl.add-bd td:first-child {border-left: none;}

/* button */
a.btn1,
.btn_1,
.btn {display: inline-block; width: auto; height: auto; margin: 0 0.5rem; padding: 0.5rem 1rem; background: #1694a5; border: none; font-size: 1rem; font-weight: normal !important; color:#fff; border-radius: 5px; text-align: center; transition: 0.3s; border-radius: 5px;}
a.btn1 *,
.btn_1 * {color: #fff;}
a.btn1.default {background-color: #555; color: #fff;}
a.btn1:hover,
a.btn1:active,
a.btn1.selected {background: #1694a5; opacity: 0.8;}
.btn_1:hover,
.btn_1:active,
.btn:hover,
.btn:active {opacity: 0.8;}
.btn.small {padding: 0.5rem; font-size: 1rem;}
.btn.wide {padding: 1rem 2rem; font-size: 1.4rem;}
.btn.line {background-color: transparent; border: 1px solid #11717e; color: #11717e;}
.btn.sub1 {background-color:#11717e;}
.btn.sub2 {background-color:#094249;}

/** sub common **/
.tab_lst {display: flex; height: auto; margin: 0 0 60px 0; border: none; border: none; text-align: center;}
.tab_lst li {flex-grow: 1; float: none; border: none; margin-left: -1px;}
.tab_lst li a {height: auto; padding: 0.5rem 2rem; background: transparent; border: 1px solid #1694a5; font-size: 1.2rem; line-height: 1.6;}
.tab_lst li a.bgM {position: static; background: #1694a5; color: #fff;}
.tab_lst li a.bgM span {position: static; background: #1694a5; color: #fff;}
.tab_lst li a.bgM:after {display: none;}
.tab_lst li a:hover {text-decoration: none; line-height: 1.6;}

/* login */
#login_content {width: 100%; margin: 4rem auto;}
#login_content .login_text {font-size: 1.1rem;}
#login_content .login-help > div {margin-bottom: 15px; text-align: right;}
#login_content .login-help a {padding: 0.5rem; border: 1px solid #11717e; border-radius: 5px; font-weight: normal;}
#login_content .login-help a span {color: #11717e;}
.material-form form {width: 520px; margin: auto; padding: 3.5rem 1rem 1rem 1rem;}
.material-form .btn1 {margin: 0.3em 0 1.5em 0;}
.material-form input:-webkit-autofill ~ label {top: -30px !important;}
#save_login_status {vertical-align: bottom;}

/* sign up */
.fair_sign #content.sub_content > form {padding: 1rem;}
#content.sub_content .privacy h4 {margin-bottom: 1rem; font-size: 1.4rem;}
#content.sub_content .privacy .chkArea {position: relative; font-size: 1.1rem;}

/* notice */
.board1_search {display: flex; padding: 0; background: #fff;}
.board1_search p {padding: 0 !important;}
.board1_search p.bbs_search_for {width: 19%; margin-right: 1%;}
.board1_search p.bbs_search_text {width: 60%;}
.board1_search p.bbs_search_button {width: 20%;}
.board_list_result {padding: 0.66rem 0;}
.board1_search select,
.bbs_search_text input[type=text],
.bbs_search_button .btn_search {width: 100%; height: 40px; margin: 0; line-height: 40px;}
.board1_search select {border-radius: 5px;}
.bbs_search_text input[type=text] {border-right: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.bbs_search_button .btn_search {background: #1694a5; border-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.bbs_search_button .btn_search span {line-height: 40px;}
.board_1 .board_post.fixed {background-color: #f8ffc3;}
.board_1 .board_post.fixed td.no::after {color: #ad2929; font-family: 'FontAwesome'; font-weight: bold; content: '\f024';}

/* QnA */
.board1_search .bbs_write_button {flex: 0 0 auto;}
.board1_search .bbs_write_button .btn_1 {background: #11717e;}
.board1_search .bbs_write_button .btn_1 .icon { margin-right:0.5rem; }
.btype_list .btn_1  {display: none;}

/* 갤러리 */
.bbs_category_container {padding-top: 0 !important;}
.bbs_category > li {background-color: #1694a5; border-radius: 5px;}
.bbs_category > li.selected {background-color: #094249;}
.bbs_category > li a {padding: 5px 10px; color: #fff !important;}
.btype_image .board_gallery dl .title {margin-bottom: 0.5rem;}
.btype_image .board_gallery dl .date {font-size: 0.8rem;}

/* 동영상 */
.btype_youtube .board_gallery dl dt {overflow: hidden;}
.btype_youtube .board_gallery .imgBox img {transform: scale(1.34);}
.btype_youtube .board_gallery dl .imgName {padding: 0.5rem; font-size: 1rem;}
.btype_youtube .board_gallery dl .title {margin-bottom: 0.5rem;}
.btype_youtube .board_gallery dl .date {font-size: 0.8rem;}

/* FAQ */
.faq-list > li {border-bottom: 1px solid #ddd;}
.faq-list > li .question {position:relative; display:block; width: 100%; background: transparent; border: none; padding: 1.5rem 0; text-align: left;}
.faq-list > li .question .subject {font-size: 1.1rem; display: block; width: 90%;}
.faq-list > li .question i {display:inline-block; position:absolute; top:50%; transform: translateY(-50%); right: 1rem;}
.faq-list > li .answer {padding: 1.5rem 1rem; background: #f8f8f8; border-top: 1px solid #ddd;}
.faq-list > li .question:hover .subject,
.faq-list > li.show .question .subject {color:#1694a5;}

/* 기존 약관 */
.stepTitle {align-items: center;}
.stepTitle > div {width: 150px; height: 150px; padding: 5.2rem 1rem 1rem !important; background-color: #f8f8f8 !important; text-align: center; border-radius: 50%;}
.stepTitle > div * {font-size: 0.93rem !important;}
.stepTitle > div.onStep {background-color: #094249 !important;}
.stepTitle > div.onStep * {color: #fff;}
.stepTitle .step1 {background: url('/images/step01.png') no-repeat center 1.7rem / 2.8rem;}
.stepTitle .step1.onStep {background: url('/images/step01_on.png') no-repeat center 1.7rem / 2.8rem;}
.stepTitle .step2 {background: url('/images/step02.png') no-repeat center 1.9rem / 2.5rem;}
.stepTitle .step2.onStep {background: url('/images/step02_on.png') no-repeat center 1.9rem / 2.5rem;}
.stepTitle .step3 {background: url('/images/step03.png') no-repeat center 1.7rem / 2.8rem;}
.stepTitle .step3.onStep {background: url('/images/step03_on.png') no-repeat center 1.7rem / 2.8rem;}
.stepTitle > div h1 {font-size: 1.4rem; font-weight: bold !important;}
.stepTitle > img {height: 30px; margin: 0 1rem;}
.step1_btn li a {background: #1694a5;}
.step1_btn li a * {color: #fff;}
.step1_btn li:hover a {background: #11717e;}
.agree-container label {position: relative;}
.agree_message {font-size: 1rem;}
div.field.row1 > div,
div.field.row2 > div,
div.field > label {padding-top: 5px; padding-bottom: 5px;}
div.field > label span {font-size: 0.9rem;}
div.mod {margin-bottom: 2rem;}
div.mod input[type=text],
div.mod input[type=password],
div.mod textarea {border-color: #efefef;}
.button-bar {margin: 0 auto !important; padding: 0;}
.button-bar-delete {top: 9px !important;}
.autosave-container {display: flex; justify-content: flex-end; align-items: center; margin: 0;}
.autosave-container .autosave-text {margin-right: 1rem;}
.autosave-container .autosave-button,
div.mod .btn1,
div.mod button {display: inline-block; width: auto; height: auto; margin: 0; padding: 0.5rem !important; background: #ddd; border: none; font-size: 0.8rem !important; font-weight: normal; color:#000; border-radius: 5px; text-align: center; border-radius: 5px !important; vertical-align: baseline;}
div.mod .btn1 *,
div.mod button * {color: #000;}
div.mod .btn1.check_id {background: #11717e;}
div.mod .btn1.check_id * {color: #fff;}
.autosave-container .autosave-button {margin-right: 5px; background: #e8e8e8; color: #333;}
#ex_application .btn_group {padding: 5px;}

/* 커스텀 약관(운영팀에서 만드는 약관) */
.agree-container {padding: 0;}
.agree-container h4 {padding: 0; border: none;}
.agree-container h4 .title {margin-bottom: 0.8rem; font-size: 1.6rem;}
.agree-container h4 .title::before {display: inline-block; width: 0.4rem; height: 1.4rem; margin-right: 0.5rem; background-image: none; background-color: #1694a5; content: '';}
.agree-container .chkArea {font-size: 1.1rem;}
.agree-container .chkArea .necessary {vertical-align: middle;}
.agree-container .chkArea label {padding-left: 0.5rem;}
.agree-container .comment {margin-top: 3rem;}

@media only screen and (max-width: 760px){
    html {font-size: 14px;}
    .dpf {display: block;}

    /* list */
    .nor-list li {display: block;}
    .nor-list li > strong {width: 100%; margin-bottom: 0.5rem; text-align: left; text-align-last: auto;}
    .nor-list li > span {width: 100%;}
    .nor-list li > span {display: block; width: 100%;}
    .round-list li {display: block;}
    .round-list li > strong {margin-bottom: 0.5rem;}
    .round-list li > span {display: block; width: 100%;}
    .img-list li::after {width: 3.5526vw; height: 3.5526vw;}
    .img-list.item3 li::after {right: -1.5rem;}
    .img-list.item4 {justify-content: flex-start;}
    .img-list.item4 li {width: 46%; margin-right: 4%; margin-bottom: 1rem;}
    .img-list.item4 li:nth-child(n+3) {margin-bottom: 0;}
    .img-list.item4 li::after {right: -1.5rem;}
    .img-list.item5 {justify-content: flex-start;}
    .img-list.item5 li {width: 30%; margin-right: 3%; margin-bottom: 1rem;}
    .img-list.item5 li:nth-child(n+4) {margin-bottom: 0;}
    .img-list.item5 li::after {right: -1.3rem;}
    .step-list li {width: 100% !important; margin-bottom: 2rem !important;}
	.step-list li:last-child {margin-bottom: 0 !important;}
	.step-list li::after {top: 100%; left: 50%; transform: translate(-50%, 0); width: 0;}
	/* color */
	.step-list li:nth-child(1)::after {border-left-color: transparent; border-top-color: #0e449b !important;}
	.step-list li:nth-child(2)::after {border-left-color: transparent; border-top-color: #f5a512 !important;}
	.step-list li:nth-child(3)::after {border-left-color: transparent; border-top-color: #891837 !important;}
	.step-list li:nth-child(4)::after {border-left-color: transparent; border-top-color: #186c5f !important;}

    /* login */
    #login_content {width: 90%;}
    .material-form form {width: 100%;}

    /* QnA */
    .board1_search {position: relative;}
    .board1_search .bbs_write_button {float: none; position: absolute; right: 0; top: 5rem;}

    /* 기존 약관 */
    .stepTitle > div {width: 130px; height: 130px;}
}

@media only screen and (max-width: 580px){
    /* QnA */
    .bbs_search_button .btn_search {margin: 0; font-size: 0.8rem; line-height: 1.6;}
    .board1_search .bbs_write_button {top: 6.5rem;}
    .board1_search .bbs_write_button .btn_1 {font-size: 0.8rem;}

    /* 기존 약관 */
    .stepTitle h1 {font-size: 1.4rem;}
    .stepTitle > div {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; height: 100px; background-image: none !important; padding: 0.5rem 1rem !important;}
}

@media only screen and (max-width: 480px){
    /* list */
    .img-list.item3 li::after {right: -0.9rem;}
    .img-list.item4 li::after {right: -0.9rem;}
    .img-list.item5 li::after {right: -0.7rem;}

    /* login */
    #login_content {width: 90% !important;}
}