@charset "utf-8";

/*
 * File : style.css
 */

/* **************************************** *
 * COMMON 
 * **************************************** */
.article-title {font-size:40rem; font-weight:500; color:#444; text-align:center;}
.sub-section {margin-top: 80rem;}
.sub-section__title {margin-bottom:12rem; font-size:20rem; color:#232527; font-weight:500;}


/* **************************************** *
 * LOGIN
 * **************************************** */
.login-head {padding: 45rem;background:#F5F5F5;text-align: center;}
.login-head h2 {font-size:32rem; font-weight:500;}
.login-head h2 span {position:relative; padding-left:35rem;} 
.login-head h2 span:before {font-family: 'bluewave';font-size: 26rem;font-weight: normal;color:#000;content: '\e913';position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.login-head p {margin-top:10rem; font-size:16rem; color:#777}
.login-body {border:1rem solid #E2E2E2; border-top:none; padding:80rem; text-align:center;}
.login-body__inner {max-width:440rem; margin:0 auto;}
.login-box .form-label { display:block;margin-bottom:6rem;text-align:left;}
.btn-login {margin-top:40rem;}
.btn-login .btn-basic {max-width:440rem;}
.login-util {margin-top:30rem; text-align:center; font-size:0;}
.login-util li {display:inline-block; position:relative;}
.login-util li + li {margin-left:20rem; padding-left:20rem; }
.login-util li + li:before {width:1rem; height:10rem; background:#aaa; content:''; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%)}
.login-util li a {font-size:16rem; color:#444; }

.easy-login__wrap {max-width: 340rem;margin-top:20rem;margin-left: auto;margin-right: auto;padding-top:20rem;}
.easy-login__wrap a {display: block;padding: 14rem 15rem 13rem;text-align: center;width: 100%;border-radius: 5rem;font-size: 16rem;}
.easy-login__wrap a + a {margin-top:10rem;}
.easy-login i {margin-right: 15rem;display: inline-block;vertical-align: middle;width: 20rem;height: 23rem;font-style:normal;position: relative;margin-top: 0;}
.easy-login i:before {font-family:'bluewave';font-weight:normal;font-size: 16rem;}
.easy-login--naver {background:#3FC067;color:#fff;font-size: 23rem;}
.easy-login--naver i:before{content:'\e92a';}
.easy-login--kakao { background:#FFDF00;}
.easy-login--kakao i:before{content:'\e918';color:#442215;font-size: 20rem;}
.easy-login--google {border:1rem solid #bfbfbf;}
.easy-login--google i:before {content:'';display:block;background: url(../images/icon/icon-google.svg) no-repeat center; background-size:100% 100%; width: 100%;height: 100%;margin-top: -1rem;}
.easy-login--apple {background: #000;color: #fff;}
.easy-login--apple i {line-height: 17rem;}
.easy-login--apple i:before{content:'\e939';color: #fff;font-size: 20rem;}




/* **************************************** *
 * JOIN
 * **************************************** */
.join-step {display:flex;margin-top:37rem;border: 1rem solid #C4D1DE;background: #E9F4FF;}
.join-step li {position: relative;font-size:20rem;font-weight:500;color:#232527;flex: 1;text-align: center;padding: 22rem 10rem 23rem;}
.join-step li:before, .join-step li:after {content: "";display: block;width: 0;height: 0;position: absolute;top: 0;right: -76rem;border: solid transparent;border-left-color: #C4D1DE;border-width: 37rem;}
.join-step li:before {border-left-color: #C4D1DE;border-width: 38rem;top: -1rem;}
.join-step li:after {z-index: 1;border-left-color: #E9F4FF;border-width: 37rem;left: auto;right: -73rem;}
.join-step li.active {background:#004EA1;color: #fff;}
.join-step li.active:after {border-left-color: #004EA1;}
.join-step li:last-child:before, .join-step li:last-child:after {display:none;}
.join-step li span {position: relative;padding-left:30rem;}
.join-step li span:before {font-family: 'bluewave';font-size: 21rem;font-weight: normal;color:#232527;position:absolute;left:0;top:50%;transform:translateY(-50%);}
.join-step li.active span:before {color:#fff;}
.join-step li:nth-child(1) span:before {content: '\e91b';}
.join-step li:nth-child(2) span:before {content: '\e91a';}
.join-step li:nth-child(3) span:before {content: '\e921';font-size: 19rem;}
.join-step li:nth-child(4) span:before {content: '\e922';}
.join-step li + li span {margin-left:20rem;}

.authenticate-box {padding:80rem 100rem;background:#fff;border:1rem solid #E2E2E2;display: flex;align-items: center;}
.authenticate-box p {font-size:16rem;color:#444;padding-right: 30rem;}
.authenticate-box a {margin-left:auto;}

.authenticate-box__form {padding:60rem 100rem;background:#fff;border:1rem solid #E2E2E2; display:flex; flex-direction: column; align-items: center;}
.authenticate-box__form p {font-size:16rem;color:#444;padding-right: 30rem;}
.authenticate-box__form a {margin-top:20rem; max-width:456rem;}
.authenticate-box__form .form-field-wrap + .form-field-wrap {margin-top:15rem;}
.authenticate-box__form .form-field-item > .form-input__wrap {max-width:auto;}
.authenticate-box__form .form-label { display:block;margin-bottom:6rem;text-align:left;}
.authenticate-box__form .form-jumin .form-input__wrap {display:flex; align-items:center;}
.authenticate-box__form .form-jumin .form-input__wrap span {padding:0 10rem;}
.authenticate-box__form-select {display:flex; max-width: 456rem; width: 100%; gap: 10rem; margin-bottom:20rem;}
.authenticate-box__form-select a {margin-top:0;flex-shrink: 0; width: calc(50% - 5rem); display: block;}

.agree-box {border:5rem solid #E2E2E2; background:#fff; padding:35rem;}
.agree-box.all-agree {padding-top:25rem; padding-bottom:25rem;}
.agree-box.all-agree .custom-checkbox {padding-left:28rem; font-size:18rem; font-weight:500;}
.agree-box.all-agree .custom-checkbox + p {margin-top:10rem; color:#444;}
.agree-box .scroll-wrapper {max-height:300rem;background:#FAFAFA; padding:30rem; }
.agree-box .scrollbar-inner::-webkit-scrollbar { display: none;}
.agree-section .custom-radio__wrap {display:flex;}
.agree-section .custom-radio__wrap p {font-size:16rem; font-weight:500; margin-right:30rem;}
.join-step-02 .btn-basic span b {font-weight:normal;}

.join-agree__desc {margin-top:60rem; margin-bottom:60rem;}
.join-agree__desc b {font-size:24rem; font-weight:600; text-decoration:underline;}
.join-agree__desc p {font-size:18rem; margin-top:12rem;}
.join-agree-all {border-bottom:1rem solid #E6E6E6; padding-bottom:24rem; margin-bottom:24rem;}
.join-agree .agree-box__wrap + .agree-box__wrap {margin-top:40rem;}

.agree-box__scroll-wrap {margin-top:24rem; border:1rem solid#E6E6E6; padding:30rem;}
.agree-box__scroll-wrap .scroll-wrapper > .scroll-content p {height:76rem; padding-right:15rem;}

.join-form__head {display:flex;align-items: center;}
.join-form__title {font-size:20rem; font-weight:500;}
.join-form__guide {margin-left:20rem;}
.join-form__guide span {position:relative; padding-left:7rem; color:#777;}
.join-form__guide span:before {content:''; display:block; width:4rem; height:4rem; background:#FF2A2A; border-radius:50%; position:absolute; left:0; top:5rem;} 
.join-form {margin-top:12rem; border-top:2rem solid #232527;}
.join-form .form-field-wrap { display: flex; }
.join-form .form-field-item {display:flex;align-items:center;width: 50%;flex-grow: 1;padding:15rem;border-bottom:1rem solid #E4E4E4;margin-top: 0;}
.join-form .form-label { width: 165rem; flex-shrink: 0;}

.join-confirm {margin-top:120rem;}
.join-confirm-text {font-size:30rem; color:#444; text-align:center;}
.join-confirm .btn-wrap {margin-top:120rem;}

/* CHECK BOX */
.custom-checkbox__type2 {font-size:18rem; font-weight:600; padding-left:34rem; color:#111;}
.custom-checkbox__type2 .checkmark {width:24rem; height:24rem; border-radius:4rem;}
.custom-checkbox__type2 .checkmark:after {font-size:12rem;}
.custom-checkbox__type2 input:checked ~ .checkmark {border: none;background:transparent linear-gradient(104deg, #72BE59 0%, #009E9A 48%, #004EA1 100%) 0% 0% no-repeat padding-box;}