@charset "utf-8";

/*
 * File       : rwd-style.css
 *
 * SUMMARY:
 * 01) 1023px
 * 02) 860px
 * 03) 540px
 */



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){
    
    /* COMMON */
    .article-title { font-size: 34rem;}

    /* LOGIN */
    .login-head {padding:0; background:none;}
    .login-head h2 {font-size:30rem;}
    .login-head h2 span {padding-left:0;}
    .login-head h2 span:before {display:none;}
    .login-body {border:none; padding:50rem 0 0;}

    /* JOIN */
    .join-step {background:none; border:none;}
    .join-step li {position:relative; color:#767676; font-size:18rem;}
    .join-step li:before {width:100%;height:2rem;border: none;background:#F2F2F2;content:'';display:block;position:absolute;top: 5rem;left: 50%;}
    .join-step li:after {border: none;width: 13rem;height: 13rem;background: #ddd;border-radius: 50%; box-shadow: 0 0 0 3rem rgba(211,211,211,0.3); left: 50%;transform: translateX(-50%);}
    .join-step li.active {background:none; color:#004EA1;}
    .join-step li.active:after {background:none; background:#094EA1; box-shadow: 0 0 0 3rem rgba(9,78,161,0.3);}
    .join-step li:last-child:after {display:block;}
    .join-step li span {padding-left:0;}
    .join-step li span:before {display:none;}
    .join-step li + li span {margin-left:0;}

    .authenticate-box { padding: 50rem 30rem;}
    .authenticate-box__form { align-items: baseline; padding: 50rem 30rem;}
    .authenticate-box__form-inner {width:100%;}
    .authenticate-box__form a {width:100%;max-width:100%;}
    .authenticate-box__form-select {max-width:100%;}
    .authenticate-box__form-select a {width: calc(50% - 5rem);}
    .agree-box .scroll-wrapper {padding:0 25rem 0 0; background:none; max-height: 280rem;}

    .join-confirm-text { font-size: 26rem;}

    .join-agree__desc b { font-size: 20rem;}
    .join-agree__desc p { font-size: 16rem;}

    /* CHECK BOX */
    .custom-checkbox__type2 {font-size:16rem; padding-left:28rem;}
    .custom-checkbox__type2 .checkmark { width: 20rem; height: 20rem;}

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* COMMON */
    .article-title { font-size: 28rem;}
    .sub-section {margin-top:60rem;}

    /* LOGIN */
    .login-head h2 { font-size: 26rem;}
    .login-head p {font-size:15rem;}
    .login-util li a {font-size:15rem;}


    /* JOIN */
    .join-step li {font-size:16rem;}
    .join-step-01 .sub-section {text-align:center;}
    .authenticate-box {display:block; padding: 0; border:none;}
    .authenticate-box p {color:#767676; padding-right:0; font-size: 15rem;}
    .authenticate-box a {margin-top:40rem;}
    .authenticate-box__form {display:block; padding: 0; border:none;}
    .authenticate-box__form p {color:#767676; padding-right:0; font-size: 15rem;}

    .agree-section .sub-section__title {font-size:18rem;}
    .agree-box {border-width:3rem; padding:25rem 15rem 25rem 25rem;}
    .agree-box.all-agree .custom-checkbox {font-size:16rem;}
    .agree-box p {font-size:15rem;}
    .agree-box .scroll-wrapper {max-height: 220rem;}
    .agree-section .custom-radio__wrap p { font-size: 15rem;}

    .join-form .form-field-wrap {display:block;}
    .join-form .form-field-item {width:100%;}
    .join-form__title { font-size: 18rem;}

    .join-confirm-text { font-size: 22rem;}
    
    .join-agree__desc { margin-top: 40rem; margin-bottom: 40rem;}
    .join-agree__desc b { font-size: 18rem;}
    .join-agree__desc p { font-size: 15rem;}

    .agree-box__scroll-wrap {padding:20rem; margin-top:15rem;}
    .agree-box__scroll-wrap .scroll-wrapper > .scroll-content p {font-size:14rem;}

    .join-agree .btn-wrap.center {margin-top:60rem;}

    /* CHECK BOX  */
    .custom-checkbox__type2 { font-size: 15rem; padding-left: 26rem;}

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* COMMON */
    .article-title { font-size: 24rem;}
    .sub-section {margin-top:40rem;}
    .sub-section__title {margin-bottom:8rem;}

    /* LOGIN */
    .login-head h2 { font-size: 24rem;}
    .login-head p {font-size:14rem; margin-top:7rem;}
    .login-body {padding-top:40rem;}
    .login-util li a {font-size:14rem;}

    /* JOIN */
    .join-step {margin-left:-20rem; margin-right:-20rem;}
    .join-step li { padding: 20rem 0 0; font-size:13rem;}
    .join-step-01 .sub-section {text-align:left;}
    .authenticate-box a {max-width:100%;}
    .authenticate-box p { font-size: 14rem;}
    .authenticate-box__form a {max-width:100%;}
    .authenticate-box__form p { font-size: 14rem;}

    .agree-section .sub-section__title {font-size:16rem;}
    .agree-box {border-width:2rem; padding:10rem 15rem 20rem 20rem;}
    .agree-box.all-agree {padding-top:15rem; padding-bottom:15rem;}
    .agree-box.all-agree .custom-checkbox { padding-left: 24rem; font-size:14rem;}
    .agree-box .scroll-wrapper { max-height: 160rem; padding-right:15rem;}
    .agree-box p {font-size:14rem;}
    .agree-section .custom-radio__wrap {display:block;}
    .agree-section .custom-radio__wrap p { font-size: 14rem; margin-bottom:5rem;}
    .join-step-02 .btn-basic span b {display:none;}

    .join-form__guide {font-size:14rem;}
    .join-form {border-top:none; margin-top:25rem;}
    .join-form__head {display:block;}
    .join-form__guide {margin-left:0; margin-top:5rem;}
    .join-form .form-field-wrap + .form-field-wrap {margin-top:30rem;}
    .join-form .form-field-item {display:block; padding:0; border-bottom:none;}
    .join-form .form-field-item + .form-field-item {margin-top:30rem;}
    .join-form .form-label {font-size:14rem;}

    .join-confirm-text {padding-top:20rem;font-size:20rem;}

    .join-agree__desc { margin-top: 30rem; margin-bottom: 30rem;}
    .join-agree__desc b { font-size: 16rem;}
    .join-agree__desc p { font-size: 14rem; margin-top:8rem;}

    .join-agree-all { padding-bottom: 15rem; margin-bottom: 15rem;}
    .join-agree .agree-box__wrap + .agree-box__wrap { margin-top: 30rem;}
    .agree-box__scroll-wrap {padding: 5rem 15rem 15rem; margin-top: 10rem;}

    .join-agree .btn-wrap.center {margin-top:40rem;}

    /* CHECK BOX  */
    .custom-checkbox__type2 { font-size: 14rem; padding-left: 24rem;}
    .custom-checkbox__type2 .checkmark {  width: 18rem; height: 18rem;}


}