@charset "utf-8";
@import url(terms.css); /* terms */

:root{
   /* var color : fluenC */
   --brand-color-1:#d93596; --brand-color-2:#754b9d; --brand-color-3:#967adc; --brand-color-4:#ac92ec; --brand-color-5:#f6eefa;
}

/*######################
Style Reset
########################*/
select,
input{font-size:15px;}
/* basic-alink */
a:link{color:#555;text-decoration:none;}
a:visited{color:#555;text-decoration:none;}
a:active{color:#555;text-decoration:none; background:none; outline:none;}
a:hover{color:#555;text-decoration:none;}

/*####################
Layout
######################*/
body{display:flex; justify-content:center;}
#wrap{display:flex; flex-direction:column; gap:32px; padding:0 16px; width:480px;}
#header{display:flex; flex-direction:column; align-items:center; gap:24px; margin-top:32px;}
#header h1{display:flex; align-items:center; gap:8px; margin:0 16px;}
#header h1 img{height:80px;}
#header h2{display:flex; align-items:center; gap:8px; margin:0 16px; font-family:var(--font-nanumsquare); font-size:24px; font-weight:400; letter-spacing:-1px;}
#container{display:flex; flex-direction:column; gap:32px;}


/*####################
Header
######################*/
/* header : member join step */
ul.sign-up-step{display:flex; justify-content:center; position:relative;}
ul.sign-up-step>li{position:relative; padding:0 10px; min-width:80px; color:#777; text-align:center;}
ul.sign-up-step>li::before{content:''; position:relative; z-index:2; display:inline-block; width:16px; height:16px; border-radius:100%; background-color:#d5d5d5;}
ul.sign-up-step>li>span{display:block; margin-top:5px; text-align:center; white-space:nowrap;}
ul.sign-up-step>li>span::before{content:''; position:absolute; z-index:1; top:8px; left:0; right:50%; border-top:1px dotted #d5d5d5;}
ul.sign-up-step>li>span::after{content:''; position:absolute; z-index:1; top:8px; left:50%; right:0; border-top:1px dotted #d5d5d5;}
ul.sign-up-step>li:first-child>span::before{content:none;}
ul.sign-up-step>li:last-child>span::after{content:none;}
ul.sign-up-step>li.selected{color:var(--brand-color-1); font-weight:500;}
ul.sign-up-step>li.selected::before{background-color:var(--brand-color-1);}
ul.sign-up-step>li.selected::after{content:''; display:block; position:absolute; z-index:3; top:0; left:50%; margin-left:-8px; width:16px; height:16px; box-sizing:border-box; border-radius:100%; border:1px solid var(--brand-color-1); -webkit-animation:activestep 1.5s infinite ease-in-out both; animation:activestep 1.5s infinite ease-in-out both;}
/* animated active step */
@-webkit-keyframes activestep {
  0% { -webkit-transform: scale(1.0);  transform: scale(1.0); opacity:1;}
  100% { -webkit-transform: scale(1.8); transform: scale(1.8); opacity:0;}
}
@keyframes activestep {
  0% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity:1;}
  100% { -webkit-transform: scale(1.8); transform: scale(1.8); opacity:0;}
}
ul.step>li.completed::before{background-color:#153e69;}


/*####################
Container
######################*/
/* agreement terms */
.agreement-terms{display:flex; flex-direction:column; position:relative;}
.agreement-terms label.check>input+span{font-size:15px; font-weight:600; letter-spacing:-0.5px;}
.agreement-terms .check-all{padding:16px 0;}
.agreement-terms .check-all label.check>input+span{font-size:17px;}
.agreement-terms .check-all p{margin:8px 0 0 38px; color:#888; font-size:13px;}
.agreement-terms .check-all p>b{color:var(--brand-color-1);}
/* agreement terms - agree box */
.agreement-terms-box{border-top:1px dashed #e5e5e5;}
.agreement-terms-box>.terms-check{display:flex; justify-content:space-between; align-items:center; position:relative; padding-left:16px; height:48px;}
.agreement-terms-box>.terms-check::before{content:''; position:absolute; left:8px; top:16px; width:7px; height:9px; border-left:1px dotted #bbb; border-bottom:1px dotted #bbb;}
.agreement-terms-box>.terms-check>b{font-size:13px; font-weight:500;}
.agreement-terms-box>.terms-check>span.view{align-self:stretch; display:flex; align-items:center; gap:4px; padding:0 8px; color:#777; font-size:12px; text-decoration:underline; cursor:pointer;}
.agreement-terms-box>.terms-check>span.view::after{content:''; width:7px; height:7px; border-bottom:1px solid var(--gray-normal); border-left:1px solid var(--gray-normal); transform:rotate(-45deg); transform-origin:top;}
.agreement-terms-box .terms-contents{margin:8px 0 16px 24px; border-radius:8px; border:1px solid #ccc; padding:10px; height:160px; background-color:#fff; color:#777; overflow:auto;}
.agreement-terms-box .sub-check-box{margin:0 0 0 24px; padding:4px 8px; border-radius:8px; border:1px dashed #ddd;}
/* agreement terms - scroll style */
.terms-contents::-webkit-scrollbar{width:16px;}
.terms-contents::-webkit-scrollbar-thumb{height:40px; border-radius:8px; border:4px solid #fff;}
.terms-contents::-webkit-scrollbar-track{border-radius:0 6px 6px 0;}
/* link to group join */
.group-join-link{margin-top:48px; text-align:right;}
.group-join-link>a{display:flex; justify-content:right; align-items:center; gap:4px; color:var(--brand-color-1); font-size:14px; font-weight:500; text-decoration:underline;}
.group-join-link>a::after{content:''; width:8px; height:8px; border-top:2px solid var(--brand-color-1); border-right:2px solid var(--brand-color-1); transform: rotate(45deg);}
/* additional info */
.additional-info{margin-top:16px;}
.additional-info>p{padding:8px 0; color:#555; font-size:15px;}
.additional-info>a{display:flex; justify-content:right; align-items:center; gap:4px; color:var(--brand-color-1); font-size:14px; font-weight:500; text-decoration:underline;}
.additional-info>a::after{content:''; width:8px; height:8px; border-top:2px solid var(--brand-color-1); border-right:2px solid var(--brand-color-1); transform: rotate(45deg);}
/* submit button */
.btn-submit{display:flex; gap:16px; margin-top:32px;}
.btn-submit button{flex-basis:0; flex-grow:1;}

/* instruction */
.title-wrap{display:flex; flex-direction:column; gap:8px; margin-top:16px; width:100%;}
.title-wrap.center{align-items:center;}
.title-wrap h2{font-family:var(--font-nanumsquare); font-size:21px; font-weight:500;}
.title-wrap h2.center{text-align:center;}
.title-wrap p{color:#777; font-size:15px;}
.title-wrap p>b{color:var(--brand-color-1); font-weight:500;}
/* registration input */
.registration-form{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.form-group{display:flex; flex-direction:column; gap:8px;}
.form-group~.form-group{padding-top:8px; border-top:1px solid #eee;}
.form-group label.check>span{margin:8px 0; font-family:var(--font-nanumsquare); font-size:16.5px; font-weight:500;}
.form-group.selected label.check{pointer-events:none;}
.form-group.selected{padding-bottom:16px;}
.form-item-title{display:flex; gap:8px; margin:0 0 8px 4px;}
.form-item-title~.form-item-title{margin-top:24px;}
.form-item-title>h3{font-family:var(--font-nanumsquare); font-size:16.5px; font-weight:500;}
.form-item{display:flex; flex-direction:column; gap:8px; position:relative;}
.form-input-row{display:flex; align-items:center; padding:0 10px; min-height:50px; border-radius:8px; border:1px solid #ccc; background-color:#fff;}
.form-input-row.focus{padding:0 9px; border:2px solid var(--brand-color-2);}
.form-input-row.focus .ui-menu{border:1px solid var(--brand-color-2);}
.form-input-row i.material-symbols-rounded{flex-shrink:0; margin-left:4px; color:#777;}
.form-input-row :is(input, select){padding:8px; border:0; background-color:transparent !important;}
.form-input-row select.dim{color:#aaa;}
.form-input-row.focus select.dim{color:initial;}
.form-input-row button.material-symbols-rounded{padding:4px; color:#777;}
.form-input-row :is(input, .iti){flex-grow:1;}
.form-input-row button{flex-shrink:0;}
.form-select-row{display:flex;}
.form-select-row label.mode{flex-basis:0; flex-grow:1;}
.form-select-row label.mode>span{font-size:15px;}
.guide-text{display:none; margin-bottom:8px; padding:0 5px; color:var(--grapefruit-light); font-size:13px; white-space:pre;}
.form-item.error .form-input-row{padding:0 9px; border:2px solid var(--grapefruit-light);}
.form-item:is(.error, .success) .guide-text{display:block;}
.form-item.success .guide-text{color:var(--grass-normal);}
.form-item~button{margin-top:20px;}
.form-item em.status{flex-shrink:0; display:none; position:relative; padding:4px 6px 3px 6px; font-size:11px; font-weight:600; font-style:normal;}
.form-item em.status::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:10px; opacity:0.25;}
.form-item.error em.status{display:block; color:var(--grapefruit-light);}
.form-item.error em.status::before{background-color:var(--grapefruit-light);}
.form-item em.status.ok{display:block; color:var(--grass-normal);}
.form-item em.status.ok::before{background-color:var(--grass-normal);}
.form-item em.status:empty{display:none;}
/* registration input - disabled style */
.form-item.disabled .form-input-row{border:1px solid rgb(0 0 0 / 5%); background-color:rgb(0 0 0 / 5%);}
.form-item.disabled .form-input-row input:disabled{-webkit-user-select:none; -ms-user-select:none; user-select:none;}
/* registration input - nation no */
.iti--separate-dial-code .iti__selected-flag{border-radius:6px;}
.form-input-row .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{font-size:14px;}

/* select type */
.account-type{display:flex; flex-direction:column; gap:24px; margin-top:16px;}
.account-type-item{flex-grow:1; display:flex; flex-direction:column; gap:16px; padding:24px; width:100%; border-radius:16px; border:1px solid #eee; transition:all 0.3s ease;}
.account-type-item.student{border-color:var(--brand-color-1);}
.type-title{display:flex; align-items:center; gap:8px; padding:0 4px;}
.type-title h3{font-family:var(--font-nanumsquare); font-size:21px; font-weight:500;}
.type-title h4{color:#777; font-family:var(--font-nanumsquare); font-size:18px; font-weight:300;}
.type-content{display:flex; align-items:center; gap:16px;}
.type-content i.material-symbols-rounded{width:48px; height:48px; font-size:48px;}
.type-content p{flex-grow:1; color:#555; font-size:14px;}
.type-content button{cursor:pointer;}
.account-type-item:hover{border:1px solid var(--brand-color-2); background-color:var(--brand-color-5);}
.account-type-item:hover :is(h3, h4, i, p){color:var(--brand-color-2);}
.account-type-item:hover button{border-color:var(--brand-color-2); background-color:var(--brand-color-2); color:#fff;}

/* withdrawal info */
.info-content{display:flex; flex-direction:column; gap:24px; padding:24px 16px; border-radius:8px; border:1px solid rgb(0 0 0 / 10%); background-color:#f9f9f9;}
.info-content-item{display:flex; flex-direction:column; gap:16px;}
.info-content-item~.info-content-item{padding-top:24px; border-top:1px dotted rgb(0 0 0 / 10%);}
.info-content-item>h3{display:flex; align-items:center; gap:8px; font-family:'NanumSquare'; font-size:16.5px; font-weight:400;}
.info-content-item>p{color:#777; font-family:var(--font-nanumsquareR); font-size:13px;}
.info-content-item>ol{display:flex; flex-direction:column; gap:4px; list-style-type:decimal; margin-left:16px;}
.info-content-item>ol>li{color:#555; font-family:var(--font-nanumsquareR); font-size:14px;}
.info-content-item b{color:var(--brand-color-1); font-weight:500;}

/* completed message */
.completed-message{display:flex; flex-direction:column; align-items:center; gap:8px;}
.completed-message>.illust-welcome{margin:24px 0; width:100%;}
.completed-message>.illust-welcome>img{width:100%;}
.completed-message>h5{font-family:'NanumSquare'; font-size:24px; font-weight:400;}
.completed-message>p{font-size:15px;}
.completed-message>p>b{color:var(--brand-color-1); font-weight:500;}

/* profile */
.status-verified{display:flex; min-height:24px;}
.status-verified>em{display:flex; align-items:center; padding:0 8px; border-radius:14px; border:1px solid var(--grass-normal); background-color:#fff; color:var(--grass-normal); font-family:var(--font-nanumsquareN); font-size:10px; font-style:normal; white-space:nowrap; letter-spacing:-0.2px;}
.status-verified>em>i.material-symbols-rounded{margin-left:-4px; width:18px; height:18px; font-size:18px; font-variation-settings:var(--symbols-basic);}

/* login */
.login-type{display:flex; margin-bottom:24px;}
.login-type>label{flex-basis:0; flex-grow:1;}

/* find id & pw */
ul.find_tab{display:table; table-layout:fixed; border-collapse:collapse; width:100%;}
ul.find_tab>li{display:table-cell; position:relative; padding:10px; border:1px solid #999; border-bottom:2px solid #153e69; background-color:#fff; font-family:'NanumSquare'; font-size:16.5px; font-weight:500; letter-spacing:-0.5px; text-align:center; cursor:pointer;}
ul.find_tab>li.selected{border-width:2px; border-color:#153e69; border-bottom-color:transparent; background-color:transparent;}
ul.find_tab>li::before{content:''; display:inline-block; margin-right:5px; width:24px; height:24px; background-image:url(../img/icon_members.svg); vertical-align:middle;}
ul.find_tab>li.tab_id::before{background-position:0 -40px;}
ul.find_tab>li.tab_pw::before{background-position:-24px -40px;}
ul.find_tab>li>span{display:inline-block; line-height:24px; vertical-align:middle;}
ul.find_tab>li::before,
ul.find_tab>li>span{opacity:0.5;}
ul.find_tab>li.selected::before,
ul.find_tab>li.selected>span{opacity:1;}

/* find link */
.find-link{display:flex; justify-content:center; align-items:center; gap:16px;}
.btn-submit+.find-link{margin-top:24px;}
.find-link>li{position:relative; line-height:1;}
.find-link>li~li{padding-left:16px; border-left:1px solid rgb(0 0 0 / 10%);}
.find-link a{font-size:15px;}


/*####################
Footer
######################*/
#footer{display:flex; flex-direction:column; padding:24px 0; border-top:1px solid rgb(0 0 0 / 10%);}
#footer .find-link a{font-size:12px;}
#footer .copyright{padding:8px 0; color:#999; font-family:tahoma; font-size:12px; text-align:center;}


/*####################
Screen size
######################*/

/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w Less than 500px */
@media (max-width: 500px) {

  #wrap{padding:0 16px;}

}