@charset "utf-8";

/* --------------------------------------------------- */
/* layout */
/* --------------------------------------------------- */
#wrap {min-height:100%; width:100%;}

.inner {width:980px; margin:0 auto;}

header {height:60px;}
header .inner {width:1024px; height:100%; padding:0 20px; display:flex; align-items: center;}
header a {height:30px;}
header img {height:100%; width:auto; vertical-align:top;}

main {padding:60px 0;}
main h1 {text-align:center; font-size:34px; line-height:50px; font-weight: 700;}
main h1 + .gloss {text-align:center; margin:8px auto 0;  font-size:20px; line-height:29px; color:#666; word-break: keep-all;}

@media all and (max-width:767px){
    .inner {width:100%; padding:0 18px;}

    header {height:40px;}
    header .inner {width:100%}
    header a {height:20px;}

    main {padding:50px 0;}
    main h1 {font-size:24px; line-height:36px; }
    main h1 + .gloss {width: 80%; font-size:14px; line-height:20px; }
}


/* --------------------------------------------------- */
/* component - popup*/  
/* --------------------------------------------------- */

.modal {position: fixed; inset: 0px; z-index: 1000;  display: none;  width: 100%;  opacity:0;}
.modal .modal-dialog { z-index: 1000; position: relative; display: flex; justify-content: center; align-items: center; height: 100%;}
.modal.overflow .modal-dialog {align-items: start;}

.modal .modal-inner {position:relative; padding:38px 30px; background-color: #fff;  border-radius: 10px;  border: solid 1px #bbb;}
.modal.alert .modal-inner  {padding:38px 38px; /*max-width:auto;*/ width:auto; min-width:400px;}
.modal h1 {font-size:20px; padding-bottom:25px; text-align:left;}
.modal .btn-close { position: absolute; top: 40px; right: 40px; width: 32px; height: 32px;}
.modal .btn-close::after { content: ""; display: block; position: absolute; width: 32px; height: 32px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url("../img/ico/ico_x.svg") no-repeat center / 32px;}
.modal .modal-body {padding:0 10px}
.modal.alert .modal-body {padding:0;}
.modal .modal-body > img {width:100%;}


.modal .dimmed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; opacity: 0.5; background-color: #000;}
.modal .dimmed.multi {background-color: transparent;}

.modal .txt {font-size:20px; line-height:29px; text-align: center; font-weight:500;}
.modal .txt + .txt {margin-top:20px;}
.modal .txt span {display:block; margin-top:14px; font-size:16px; line-height:24px; color:#888; font-weight:400;}
.modal .txt.done:before, .modal .txt.noti:before {content:''; display:block; width:70px; height:70px; margin:0 auto 28px;  background-size:100%; background-position:center; background-repeat: no-repeat;}
.modal .txt.done:before {background-image:url(../img/step_on.svg);}
.modal .txt.noti:before {background-image:url(../img/icon_circle_warring.svg);}
.modal .txt > span {font-weight:400;}
.modal .txt span.warning {color:#fb2b47}

.findAccount { width:100%; min-width:400px; margin:40px auto 10px;  padding:20px; text-align:center; background-color: #f6f7f9;  border-radius: 6px; font-size:16px; line-height:24px; color:#111;  word-break: keep-all;}
.findAccount strong {color:#0567c1; margin:0 3px; font-weight:700;}
.findAccount span {display:block; margin-top:2px;} 

@media all and (max-width:767px) {
    .modal { }
    .modal-dialog { padding:18px ; overflow:hidden; overflow-y:auto;}
    .modal .modal-inner {min-width:auto; width:100%; padding:19px 18px 50px 18px;}
    .modal.alert .modal-inner {padding:16px 18px; min-width:280px;}
    .modal.alert .modal-inner {padding:35px 18px 25px;}
    .modal h1 {line-height:26px; padding-bottom:20px;}
    .modal .btn-close { top: 16px; right: 18px; width: 16px; height: 16px;}
    .modal .btn-close::after {width:16px; height:16px;}
    .modal .modal-body {padding:0}

    .modal .txt, .modal .txt span.warning {font-size:14px; line-height:20px; }

    .findAccount {width:100%; min-width:auto; padding:15px 30px; border-radius: 3px;  margin:20px auto 10px;  font-size:13px; line-height:19px;}
    .findAccount span { margin-top:2px;}
}

/* component - button / a */
/* --------------------------------------------------- */
.btns {display:flex; justify-content: center; gap:0 20px; padding-top:40px; }

.btn {display: inline-flex; justify-content: center; align-items: center; height:46px; min-width:144px; padding: 0 20px;
    background-color: var(--emColor);
    border-radius: 6px;
    border:1px solid var(--emColor);
    color:#fff;
    font-size:16px; font-weight:400;
}
.btn.line {background-color:#fff; border-color:var(--btnBorder); color:#222;}

.btn span { white-space: nowrap;}
.btn.tiny {height:24px; min-width:94px; font-size:12px; line-height:22px; padding:0 10px; border-color:var(--border); background:#fff;}


.btn.gray {border-color:#555; background:#555; color:#fff;}
.btn.red {border-color:#fb2b47;  color:#fb2b47;}
.btn.blue {border-color:#0567c1; color:#0567c1;}

.modal .btns {gap:0 12px;}
.modal .btns .btn {width:144px;}
.modal.alert .btns .btn {width:130px; min-width:auto;}

.formItem .btn.line {border-color:var(--inputBorder); min-width:100px;}

button.btn[disabled],
.btn.disabled {
    background-color: var(--inputBorder);
    color: #fff;
    border: 1px solid transparent;
}

@media all and (max-width:767px){
    .btns {gap:0 10px; }
    .btn { height:40px; padding: 0 20px; min-width:100px; border-radius: 3px; font-size:14px;}

    .btn.small {height:30px; width:100px; font-size:14px; line-height:20px;}

    .modal .btns { gap:0 10px;}
    .modal .btns .btn, .modal.alert .btns .btn  {width:100px; height:40px;}
    .modal.alert .btns {padding-top:30px; }

}

/* --------------------------------------------------- */
/* component - form */
/* --------------------------------------------------- */

.formItem { display:flex; flex-flow:wrap row; width:100%; position:relative;}
.msg {position:relative; padding-left:10px; color:#888; margin-top:10px; font-size:14px; line-height:17px; word-break: keep-all; }
.msg:before {content:'* '; position:absolute; left:0; top:0; } 

.formItem .input {width:400px; line-height:46px; height:48px; padding:0 16px; border:1px solid var(--inputBorder); border-radius:6px; font-size:16px; color:#222;}
.formItem .input:disabled {background:#f6f7f9; color:#999;}
.formItem button {margin-left:12px;}
.formItem .msg {flex:none; width:100%; padding:0; line-height:20px; }
.formItem .msg:before {content:'ⓘ '; position:static;}
.formItem.hint .msg, .formItem.hint .input {color:#49a7ff; border-color:#49a7ff;}
.formItem.error .msg, .formItem.error .input {color:#fb2a47; border-color:#fb2a47;}
.formItem + .checkbox {margin-top:10px;}

.formItem .file{ height: 46px; width:400px; padding: 10px 20px 2px; font-size: 16px;  border: 1px solid var(--inputBorder); border-radius: 6px;} 
.formItem input[type="file"] { opacity: 0;  position: absolute; left:0; width: 540px; height: 46px;}

.agreeItem {margin-top:10px;}
.agreeItem .msg {color:#888; margin-top:10px; padding-left:28px;}
.agreeItem .msg:before {content:'* '; position:static;}

.formArea {width:100%; clear:both; border-top:1px solid var(--emColor);}
.formArea > div {display:flex; flex-flow:wrap row;  border-bottom:1px solid var(--border);} 
.formArea dt {width:150px; min-height:84px; padding:30px 0 0 20px; font-size:16px; line-height:24px; display:flex; align-items: start; background:#f6f7f9; }
.formArea dt .required {color:#fb2b47; font-weight:bold; margin-left:3px;}
.formArea dd {padding:19px 15px 19px 30px; flex:1; }
.formArea dd span.txt {font-size:16px; line-height:24px;} 
.formArea .msg +.btn.tiny {margin-top:12px;} 
.formArea.mobile dd {display:flex; align-items: center; }

.modal .formArea {border-top:none; width:718px;}
.modal .formArea > div {border:none; flex-flow:wrap column;}
.modal .formArea > div:not(:last-child) {margin-bottom:20px;}
.modal .formArea > div:last-child .agreeItem {margin-bottom:0;}
.modal .formArea dt {width:100%; min-height:auto; background:none; padding:0; font-size:16px; line-height:24px; font-weight:700; margin-bottom:10px;}
.modal .formArea dd {padding:0;}
.modal .formArea .formItem + .checkbox {margin-top:9px;}
.modal .formArea .checkbox + .msg {margin-top:3px}
.modal .formItem .input, .modal .formItem .file  {flex:1; width:100px; }
.modal .formItem .btn {width:120px;}

@media all and (max-width:767px){
    .msg {font-size:12px; line-height:16px; margin-top:8px;}

    .formItem .input, .formItem .file  {flex:1; width:100px; line-height:38px; height:40px; padding:0 15px; border-radius:5px; font-size:14px; }
    .formItem button {margin-left:7px; width:100px;}

    .formItem input[type="file"] {height:40px; width:100%;}

    .agreeItem {margin:10px 0 6px;}
    .agreeItem .msg {padding-left:26px; margin-top:6px;}

    .modal .formArea,  .formArea {border-top:none; width:auto;}
    .modal .formArea,  .formArea > div {border:none; flex-flow:wrap column;}
    .modal .formArea,  .formArea > div:not(:last-child) {margin-bottom:14px;}
    .modal .formArea,  .formArea > div:last-child .agreeItem {margin-bottom:0;}
    .modal .formArea,  .formArea dt {width:100%; min-height:auto; background:none; padding:0; font-size:14px; line-height:20px; font-weight:700; margin-bottom:5px;}
    .modal .formArea,  .formArea dd {padding:0;}
    .modal .formArea,  .formArea .formItem + .checkbox {margin-top:9px;}
    .modal .formArea,  .formArea .checkbox + .msg {margin-top:3px}
    .modal .formItem .btn {width:100px;}

    .formArea.mobile {border-top:1px solid var(--emColor);} 
    .formArea.mobile > div {border-bottom:1px solid var(--border); margin:0; flex-direction: row;} 
    .formArea.mobile  dt {width:110px; min-height:64px; padding:22px 0 22px 15px; display:flex; align-items: start; background:#f6f7f9; margin:0; font-weight:500;}
    .formArea.mobile  dd {padding:12px 15px 12px; flex:1; }
    .formArea.mobile  dd .flex_area{width:100%; align-items: center;}
    .formArea.mobile  dd .flex_area .btn.tiny {margin-top:0; min-width:auto;}
    .formArea.mobile  dd span.txt {font-size:14px; line-height:20px;}
    .formArea .msg +.btn.tiny {margin-top:30px;} 
}

textarea {border:1px solid var(--inputBorder); padding:12px 16px 16px; height:80px; border-radius: 6px; font-size: 16px; line-height:24px;}

@media all and (max-width:767px){
    textarea {font-size:14px; line-height:20px; border-radius: 5px; padding:10px 15px; }
}

.checkbox { position: relative; display: inline-block; cursor: pointer; font-size:16px; line-height: 20px; vertical-align:top;}
.checkbox input {display: none;}
.checkbox input + i { position:relative; vertical-align:sub; display: inline-block; width: 20px; height: 20px; border: 1px solid var(--btnBorder); border-radius: 4px; background-color: transparent; cursor: pointer; margin-right:8px;}
.checkbox input + i::after { content: ""; position: absolute; display: inline-block; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 100%;}
.checkbox input:checked + i::after {
    display: inline-block;
    background: url("../img/ico/ico_checkbox.svg") no-repeat center center;
}
.radio { position: relative; display: inline-block; cursor: pointer; line-height: 20px; font-size:16px; vertical-align:top; }
.radio input { display: none;}
.radio input + i { position:relative; vertical-align:sub; display: inline-block; width: 20px; height: 20px; vertical-align: top; border: 1px solid var(--btnBorder); border-radius: 50%; background-color: transparent; cursor: pointer; margin-right:6px;}
.radio input + i::after { content: ""; position: absolute; display: inline-block; top: 50%; left: 0; border-radius: 50%; transform: translateY(-50%); width: 100%; height: 100%;}
.radio input:checked + i {background-color: #fff;border-color: var(--emColor);}
.radio input:checked + i::after {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color: var(--emColor);}

@media all and (max-width:767px){
    .checkbox {font-size:14px;}
    .checkbox input + i , .radio input + i {margin-right:6px;}
}

.select_custom {position: relative; width: 400px;}
.modal .select_custom {width:100%;}
.btn-select {width: 100%;  height: 46px; padding: 10px 38px 12px 16px; font-size: 16px; border: 1px solid var(--inputBorder); border-radius: 6px;  cursor: pointer;  text-align: left; background-color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color:#222;}
.btn-select::after { content: ""; position: absolute; top: 15px; right: 16px;  width: 16px; height: 16px; line-height: 1; background: url("../img/ico/ico_arrow_up_gray.svg") center center no-repeat; transition: transform 0.3s; transform: rotate(180deg); margin-top: 1px;}
.btn-select.on::after { transform: rotate(0);}
.btn-select:disabled {background:#f6f7f9; color:#999;}
.btn-select:disabled:after {opacity:0.3;}
.select_custom > div { display: none; position: absolute; width: 100%; top: 54px; left: 0; z-index: 1; border: 1px solid var(--inputBorder); box-sizing: border-box; border-radius: 6px; background-color: #fff; max-height:200px; overflow: hidden; overflow-y: auto;}
.btn-select.on +  div {  display: block;}
.select_custom > div li { height: 40px; padding: 0 8px;}
.select_custom > div li button { width: 100%; padding: 7px 8px; font-size: 16px; line-height: 1.5; border: none; cursor: pointer; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color:#666;}

@media all and (max-width:767px){
    .select_custom {width:100%;} 
    .btn-select {height:40px; padding: 0 15px 0; font-size:14px; line-height:38px;}
    .btn-select::after {width:24px; height:24px; top: 6px; background-size:100%; background-image: url(../img/icon_down.svg); transform: rotate(0);}
    .select_custom > div {top:46px;}
}

.formToggle {display:inline-flex; gap:0 16px;}
label.toggle {position:relative; display:inline-flex; font-size: 13px; line-height:20px; padding-right:40px; height:20px; cursor:pointer}
label.toggle input {position:absolute;}
label.toggle:before {content:''; position:absolute; right:0; top:0; width:40px; height:24px; border-radius:12px; display:block; background-color:#999999; transition: all 0.3s;}
label.toggle:after {content:''; position:absolute; width:20px; height:20px; right:18px; top:2px; display:block; border-radius: 50%; background-color:#fff;  transition: all 0.3s;}
label.toggle:has(input:checked):before {background-color: #1367c1;}
label.toggle:has(input:checked):after {right:2px}

/* --------------------------------------------------- */
/* page */
/* --------------------------------------------------- */

.sec_tit {font-size:28px; line-height:36px; height:50px; margin-bottom:40px; border-bottom:1px solid var(--border)}

.sub_tit {font-size:24px; line-height:36px; font-weight:bold; margin-bottom:24px;}
.sub_tit:has(+ .gloss) {float:left;}
.modal .sub_tit {font-size:16px; line-height:24px; margin-bottom:20px;}

.sub_tit + .gloss {float:left; margin:8px 0 0 20px; color:#888; font-size:14px; line-height:20px;}
.modal .sub_tit + .gloss {margin:2px 0 0 12px;}
.sub_tit + .gloss:before {content:'ⓘ '; }

section.join {margin-top:40px;}
h1 + .sec_tit {margin-top:60px;}
.sec_tit + section.join {margin-top:0;}

.stepProgress {margin-top:60px; position:relative;}
.stepProgress progress {appearance: none; width:100%; height:3px; position:absolute; top:49px;}
.stepProgress progress::-webkit-progress-bar {width:100%; background:transparent;}
.stepProgress progress::-webkit-progress-value {background: var(--emColor);}
.stepProgress .step {font-size:18px; line-height:24px; position:absolute; top:8px; right:0; font-family: "Roboto"; color:#666;}
.stepProgress .step em {font-weight:700; color:#222;}
.stepProgress .step span {margin:0 5px;}

@media all and (max-width:767px){
    .sec_tit {font-size:20px; line-height:36px; height:43px; margin-bottom:50px; border:none; }
    .sub_tit {font-size:20px; line-height:36px; margin-bottom:14px;}
    .sub_tit:has(+ .gloss) {float:none;}
    .sub_tit + .gloss, .modal .sub_tit + .gloss {float:none; margin:-8px 0 20px 0; font-size:12px; line-height:16px;}
    .sec_tit {margin-bottom:50px !important; text-align:center;}
    .modal .sub_tit {font-size:17px; line-height:23px; margin-bottom:12px;}

    section.join {margin-top:50px;}
    h1 + .sec_tit {margin-top:40px;}
    .sec_tit + section.join {margin-top:50px;}
  
    .stepProgress progress {top:41px; height:2px;}
    .stepProgress .sec_tit {border-bottom:1px solid var(--border); text-align:left;}
    .stepProgress .step {font-size:14px; line-height:20px; top:6px;}

    .stepProgress + section.join {margin-top:-10px;}    
}

.scrollY {overflow:hidden; overflow-y: auto;}

.memberType {display:flex; gap:10px;}
.memberType li {flex:1; position:relative;}
.memberType input {-webkit-appearance: none; appearance: none; position:absolute; left:0; top:0; width:0; height:0;}
.memberType label {border:1px solid var(--border); border-radius: 10px; background-color: #fff; padding-left:138px; height:124px; display:flex; flex-flow:wrap column; justify-content: center; font-size:20px; line-height:1.6; font-weight:700; background-position:40px center; background-size: 70px; background-repeat: no-repeat;} 
.memberType label span {font-size:14px; line-height:20px; margin-top:1px; color:#888; font-weight:400;}
.memberType label.personal {background-image:url(../img/ico_person.svg);}
.memberType label.company {background-image:url(../img/ico_company.svg)}
.memberType label.organ {background-image:url(../img/ico_organ.svg)}
.memberType input:checked + label{background-color:#ebf5ff; border-color:#48a7ff;}

.clauseWrap {position:relative; margin-bottom:70px;}
.clauseWrap:has(+ .checkbox) {margin-bottom:20px;} 
.clauseWrap .checkbox {position:absolute; right:0; top:14px;}
.clauseWrap .scrollY {height: 200px; padding: 19px 29px 19px 19px; border-radius: 6px; border: solid 1px #bbb; font-size:12px; color:#111; line-height:16px;} 

.mobileVeri {width:240px; height:260px;  border: solid 1px #48a7ff; border-radius:10px; display:flex; flex-flow: wrap column; align-items: center; justify-content: center; margin:10px auto 0; font-size:24px; line-height:36px; font-weight:700;}
.mobileVeri:before {content:''; width:70px; height:70px; margin-bottom:10px; background:url(../img/ico_circle_phone.svg) no-repeat center center/100%;}

.join .done { display:flex; flex-flow: wrap column; align-items: center; padding-top:80px; margin-bottom:60px; font-size:20px; line-height:28px; text-align:center; color:#666;}
.join .done strong {font-size:36px; line-height:42px; margin-bottom:16px; font-weight:700; color:#222; text-align:center; }
.join .done:before {content:''; width:100px; height:100px; margin-bottom:40px;  background:url(../img/step_on.svg) no-repeat center center/100%;}

.checkup {text-align:center; padding:50px 0 45px; margin-top:24px; border-radius: 10px; border: solid 1px var(--border); background-color: #fcfcfc;}
.checkup .btn {border-color:var(--inputBorder); min-width:120px; width:120px;}
.checkup .done {display:flex; flex-flow:wrap column; margin:24px 0 -15px 0; padding-top:0; font-size:18px; line-height:24px; color:#666;}
.checkup .done:before {display:none;}
.checkup .done strong {font-size:20px; line-height:24px; margin-bottom:10px; color:#222;}
.checkup .done strong:before {content:''; display:inline-block; width:20px; height:24px; vertical-align: top; background: url(../img/step_on_2.svg) no-repeat center center/100% auto; margin-right:8px;}

.modal .checkup { margin-top:20px; padding:0; border:none; background:none;}
.modal .checkup .done {margin:16px 0 0 0; font-size:16px; line-height:24px;}
.modal .checkup .done strong {font-size:16px; line-height:24px;}
.modal .checkup .done strong:before {width:16px; height:24px; margin-right:5px;}


@media all and (max-width:767px){
    .memberType {flex-flow:wrap column;}
    .memberType label {height:90px; background-size:60px; background-position:20px center; padding-left:110px; font-size:17px; line-height:23px;}
    .memberType label span {margin-top:4px; font-size:14px; line-height:20px;}

    .clauseWrap {margin-bottom:50px;} 
    .clauseWrap:has(+ .checkbox) {margin-bottom:14px;} 
    .clauseWrap .checkbox {top:8px;}
    .clauseWrap .scrollY {height: 235px; margin-top: 10px; padding: 14px 10px; border-radius: 3px;  border: solid 1px #bbb; font-size:14px; line-height:20px;}  

    .mobileVeri { width: 210px; height: 230px; margin-top:0; border-radius:5px; font-size:17px; line-height:23px;}
    .mobileVeri:before {width:41px; height:41px; margin-bottom:16px;}

    .join .done {font-size:12px; line-height:16px; margin-bottom:30px; padding-top:20px;}
    .join .done strong {font-size:17px; line-height:23px; margin-bottom:10px;}
    .join .done:before {margin-bottom:30px; width:70px; height:70px;}

    .checkup { margin-top:20px; padding:0; border:none; background:none;}
    .checkup .done {margin:14px 0 0 0; font-size:12px; line-height:16px;}
    .checkup .done strong {font-size:14px; line-height:20px;  margin-bottom:5px;}
    .checkup .done strong:before {width:14px; height:20px; margin-right:5px;}

    .modal .checkup {}
    .modal .checkup .btn {min-width:100px;}
    .modal .checkup .done {margin:14px 0 0 0; font-size:12px; line-height:18px;}
    .modal .checkup .done strong {font-size:14px; line-height:20px;}
    .modal .checkup .done strong:before {width:14px; height:20px; margin-right:5px;}

   
}


.loging {margin:200px 0 auto; display:flex; flex-flow:wrap column; align-items: center; font-size:30px; line-height:45px; font-weight:700;}
.loging .loader {margin-bottom:50px; width: 100px; aspect-ratio: 1; border: 10px solid #ebf5ff; border-radius: 50%; position: relative; transform: rotate(45deg);}
.loging .loader::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 10px solid #48a7ff; animation: l18 4s infinite linear;}
@keyframes l18 {
    0%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
}

#wrap.login {background:#f6f7f9;}
.loginArea {width:480px; /*height:600px;*/ margin:60px auto 0; padding:39px; background:#fff; border: solid 1px var(--border);  border-radius: 6px;}

section.login {}
section.login .formItem:not(:first-child) {margin-top:10px;}
section.login .btns {padding-top:20px;}
section.login .btns button {flex:1;}
section.login .flex_area {line-height:20px; margin-top:18px; font-size:16px;}

section.SSO_login {margin:40px auto 0; display:flex; flex-flow:wrap column; gap:10px 0; text-align:center;}
section.SSO_login h2 {font-size:24px; line-height:36px; margin-bottom:10px;}
section.SSO_login button {height:46px; font-size:16px; border-radius:6px; background-position:15px center; background-repeat: no-repeat; background-size:30px 30px; }
section.SSO_login button span {color:#222;}
section.SSO_login button.kakao {background-color:#fdce05; background-image: url(../img/img_kakao@2x.png);}
section.SSO_login button.naver {background-color:#2eb402; background-image: url(../img/img_naver@2x.png);}
section.SSO_login button.google {border: solid 1px var(--btnBorder); background-image: url(../img/img_google@2x.png); }
section.SSO_login .flex_area {line-height:24px; font-size:16px; margin-top:14px;}
section.SSO_login .flex_area a span { border-bottom:1px solid #222;}

@media all and (max-width:767px){
    #wrap.login {background:#fff;}
    .loginArea {width:auto; height:auto; margin-top:60px; padding:0; border:none;}

    section.login {margin-top:10px; width:100%;}
    section.login .btns {padding-top:10px;}
    section.login .flex_area {font-size:14px; margin-top:14px; margin-bottom:10px;}

    section.SSO_login {margin-top:50px; gap:15px 0; width:100%;}
    section.SSO_login h2 {font-size:20px; line-height:30px;  margin-bottom:15px;}
    section.SSO_login button {height:40px; font-size:14px;}
    section.SSO_login .flex_area {line-height:20px; font-size:14px; margin-top:4px;}

    .loging {margin-top:90px; font-size:19px; line-height:28px;}
    .loging  .loader {margin-bottom:30px;}
}

.doubleCheck {margin:60px auto 0; width:640px;}
.doubleCheck p {text-align:center; font-size:18px; line-height:28px; margin-bottom:60px; word-break: keep-all;}

.findAccountArea {width:400px; margin:60px auto 0; padding:30px 0; border-top: solid 1px #003668;}
.findAccountArea .formItem .input {flex: 1; width: 100px;}

.login_utils {width:400px; margin:30px auto;}
.login_utils menu {display:flex; justify-content: space-around;}
.login_utils menu li {position:relative; padding:0 20px; text-align:center; font-size:16px; line-height:24px; white-space: nowrap; width:30%;}
.login_utils menu li:nth-child(2) {width:40%;}
.login_utils menu li:not(:last-child):after  {content:''; position:absolute; right:0; top:50%; transform: translateY(-50%); display:block; width:1px; height:14px; background:var(--inputBorder);}
.login_utils p {margin-top:20px; padding:20px 20px 0; text-align:center; border-top:1px solid var(--border); font-size:16px; line-height:24px; color:#666; word-break: keep-all;}
.login_utils p a {color:#666}

@media all and (max-width:767px){
    .doubleCheck {margin-top:50px; width:auto;}
    .doubleCheck p {font-size:14px; line-height:20px; margin-bottom:40px; padding:0 18px; }

    .findAccountArea {width:auto; margin-top:50px; padding:0; border:none;}

    .login_utils {width:100%; margin-top:50px;}
    .login_utils menu a {font-size:14px; line-height:20px;}
    .login_utils menu a:not(:last-child):after  {content:''; position:absolute; right:0; top:50%; transform: translateY(-50%); display:block; width:1px; height:12px; background:#ddd;}
    .login_utils p {margin-top:20px; padding:10px 20px 0; text-align:center; border-top:1px solid var(--border); font-size:12px; line-height:16px; color:#888; word-break: keep-all;}
}

.accountInfo {margin-top:60px}
.accountInfo .member {font-weight:700; font-size:24px; line-height:36px; display:flex; align-items: center; margin-bottom:40px;}
.accountInfo .member button {margin-left:auto;}
.accountInfo .member .sns {padding:0 10px; height:25px; font-size:12px; line-height:25px; font-weight:400;  margin-left:25px; color:#555; border-radius: 12px; background-color: #eee;}

.accountInfo menu {display:flex; position:relative; }
.accountInfo menu:after {content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:var(--border);}
.accountInfo menu li {position:relative; width:50%; text-align:center; z-index:2;}
.accountInfo menu li a {display:block; font-size:18px; line-height:26px; padding-bottom:22px; }
.accountInfo menu li.on {border-bottom:2px solid var(--emColor); font-weight:700; color:var(--emColor);}

.accountInfo .formArea {margin-top:40px;}
.accountInfo .formArea .sns {display:flex; width:100%; justify-content: space-between; align-items: center;}
.accountInfo .txt.kakao:before,   .accountInfo .txt.naver:before,  .accountInfo .txt.google:before {content:'';
    display:inline-block; width:24px; height:24px; margin-right:10px; background-position:center; background-repeat:no-repeat; background-size:140%;  vertical-align:middle;
}   
.accountInfo .txt.kakao:before{background-image:url(../img/ico_kakao@2x.png);}
.accountInfo .txt.naver:before{background-image:url(../img/ico_naver@2x.png);}
.accountInfo .txt.google:before{background-image:url(../img/ico_google@2x.png);}
.accountInfo .formArea .sns .btn {margin-top:0;}
.accountInfo .formArea .flex_area {width:100%;}

.accountInfo .btns { margin-top:24px; border-radius: 10px; padding:50px 0 45px; border: solid 1px #ddd; background-color: #fcfcfc;}
.accountInfo .btns .btn {border-color:var(--inputBorder);}

.modal .formArea + .btn {margin-top:30px;}
.modal .veri {margin-top:8px;}
.modal .veri p { font-size:14px; line-height:20px; color:#0567c1;}
.modal .veri .mobileVeri {width:132px; height:129px; padding:0; margin:20px auto; font-size:16px; line-height:24px; white-space: nowrap;}
.modal .veri .mobileVeri:before {margin:0 auto 13px;}


@media all and (max-width:767px){
    .accountInfo {margin-top:50px;}
    .accountInfo .member {font-size:20px; line-height:26px; margin-bottom:40px;}
    .accountInfo .member .sns {height:22px; font-size:12px; line-height:22px; margin-left:8px;}

    .accountInfo li a {font-size:17px; line-height:23px; padding-bottom:15px;}
    .accountInfo li.on a {padding-bottom:14px;}

    .accountInfo .formArea {margin-top:30px;}
    .accountInfo .formArea .sns {display:block;}
    .accountInfo .formArea .txt + .btn.tiny {margin-top:8px; display:block;}
    .accountInfo .formArea dt {width:125px;}
    .accountInfo .txt.kakao:before,   .accountInfo .txt.naver:before,  .accountInfo .txt.google:before { width:20px; height:20px; margin-right:3px; background-size:100%;  vertical-align:middle;}   

    .accountInfo .btns {margin:0; padding:20px 0 0 0; background:#fff; border:none;}
    .accountInfo .btns .btn {border-color:var(--inputBorder);}

    .modal .formArea + .btn {margin-top:14px;}
    .modal .veri {margin-top:8px;}
    .modal .veri p { font-size:12px; line-height:18px; color:#0567c1;}
    .modal .veri .mobileVeri {width:87px; height:87px; padding:0; margin:20px auto; font-size:14px; line-height:20px; white-space: nowrap;}
    .modal .veri .mobileVeri:before {width:34px; height:34px; margin:0 auto 13px;}
}

.clause {color:#111;}
.clause .chapter {display:block; font-size:16px; line-height:24px; margin-bottom:4px;}
.clause .chapter:not(:first-child) {margin-top:40px;}
.clause .chapter a {display:inline-block; height:24px; margin-left:12px; border: solid 1px #bbb; font-size:12px; color:#222; line-height:22px; border-radius:4px; padding:0 13px; vertical-align:middle; font-weight:400;}
.clause > dl > div {padding-top:12px;}
.clause > dl + dl {margin-top:18px;}
.clause > dl > div > dt {font-size:14px; line-height:24px; font-weight:500; margin-bottom:6px; }
.clause > dl > div > dd {font-size:14px; line-height:24px;}
.clause > dl > div > dd > ul {margin:0 0 0 15px;}
.clause > dl > div > dd > ul.organ li {margin-top:24px;}
.clause > dl > div > dd dl.table {margin:15px 0;}

.clause dl.table {display:flex; border:1px solid #ddd; width:100%;}
.clause dl.table > div {flex:1; border-left:1px solid #ddd; font-size:13px;   line-height:24px; }
.clause dl.table dt {font-weight:500; height:39px; padding:7px 0; text-align:center; border-bottom:1px solid  #ddd; white-space: wrap;}
.clause dl.table dd {padding:20px; display:flex; align-items: center; justify-content: center; height:calc(100% - 40px); white-space: wrap;}
.clause ul.dot li:before {content:'• ';}
.clause dl.table dd:has(.row) {padding:0; flex-wrap:wrap; justify-content: flex-start;}
.clause dl.table dd > div  {padding:10px; width:100%; display:flex; align-items: center; justify-content: center;}
.clause dl.table dd > div.row2 {height:100px; border-bottom:1px solid #ddd;}
.clause dl.table > div[aria-hidden='true'] {flex:none; width:100px;}
.clause .onlyMo {display:none;}

.clause .preface {font-size:16px; line-height:24px;}
.clause .preface p + p {margin-top:24px;}
.clause > dl + .preface {margin-top:30px;}

.clause .hr {margin:50px 0; height:1px; position:relative; background-color:#ddd}
.clause .hr span {position:absolute; top:50%; left:50%;  transform: translateX(-50%) translateY(-50%);  display:inline-block; padding:0 30px; background:#fff; color:#ddd}

.clause .em {color:#fb2b47}

@media all and (max-width:767px){
    .clause {margin-bottom:70px;}
    .clause .chapter {font-size:18px; line-height:28px; }

    .clause > dl > div > dd dl.table {margin:0 0 0 15px;}
    .clause dl.table {display:block; border:none;}
    .clause dl.table > div {border:none;}
    .clause dl.table dt {padding:0; height:auto; text-align:left; border:none;}
    .clause dl.table dt:before {content:'•'; margin-right:5px;}
    .clause dl.table dd {height:auto; padding:0; display:block; padding-left:12px;}

    .clause dl.table dd:has(.row) {padding:0; flex-wrap:wrap; justify-content: flex-start;}
    .clause dl.table dd > div {padding:0; width:100%; display:block; }
    .clause dl.table dd > div.row2 {height:auto; border-bottom:none;}
    .clause dl.table > div[aria-hidden='true'] {display:none;}
    .clause .onlyMo {display:inline-block;;}

}