@charset "utf-8";

/* login */
.login_wrap {
    flex-direction: column;
    min-height: 100vh;
    background-color: #1A1F2C;
}

.login_wrap .top_box {
    justify-content: center;
    flex: 1;
    width: 100%;
}

.login_logo {
    width: calc(100vw * (200/375));
    height: calc(100vw * (23/375));
    background: url('../image/common/spl_logo.svg') no-repeat center / contain;
}

.login_wrap .btm_box {
    margin-top: auto;
    background-color: #fff;
    border-radius: calc(100vw * (28/375)) calc(100vw * (28/375)) 0 0;
    flex: 1;
    width: 100%;
    padding: calc(100vw * (50/375)) calc(100vw * (30/375)) calc(100vw * (60/375));
    flex-direction: column;
}

.login_input_box {
    width: 100%;
}

.join_link_box {
    margin-top: auto;
}

.login_input_box .name {
    font-size: calc(100vw * (14/375));
    font-weight: 600;
    color: #111;
    line-height: 1.3em;
    margin-bottom: calc(100vw * (12/375));
}

.login_input_box .style_box {
    height: calc(100vw * (50/375));
    border-radius: calc(100vw * (6/375));
    overflow: hidden;
    background-color: #F6F6F6;
    padding: 0 calc(100vw * (20/375));
}

.login_input_box .style_box input {
    width: 100%;
    height: 100%;
    border-radius: calc(100vw * (6/375));
    background-color: transparent;
    outline: unset;
    font-size: calc(100vw * (16/375));
    font-weight: 500;
    color: #242424;
}

.login_input_box .style_box input:focus {
    outline: unset;
}

.login_input_box.b {
    margin-bottom: calc(100vw * (27/375));
}

.login_wrap .login_btn {
    width: 100%;
    height: calc(100vw * (55/375));
    border-radius: calc(100vw * (10/375));
    margin-top: calc(100vw * (20/375));
    background-color: #06B395;
    color: #fff;
    font-size: calc(100vw * (16/375));
    font-weight: 700;
}

.login_wrap .join_link_box {
    justify-content: center;
}

.login_wrap .join_link_box a {
    position: relative;
    font-size: calc(100vw * (13/375));
    font-weight: 500;
    color: #333;
}

.login_wrap .join_link_box a:first-child {
    font-weight: 700;
    padding-right: calc(100vw * (15/375));
    margin-right: calc(100vw * (15/375));
}

.login_wrap .join_link_box a:first-child::after {
    content: '';
    position: absolute;
    width: 1px;
    height: calc(100vw * (12/375));
    background-color: #D9D9D9;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* END login */

/*join*/
.join_inner {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: calc(100vw * (40/375)) calc(100vw * (20/375)) calc(100vw * (70/375));
}

.join_inner .title {
    font-size: calc(100vw * (26/375));
    font-weight: 700;
    color: #1E2236;
    line-height: 1.4;
}

/*END join*/

/* 회원가입 - 이용약관 동의 */
.agree_wrap li.all_check {
    margin-top: calc(100vw * (40/375));
    margin-bottom: 15px;
}

.agree_wrap li.all_check input[type=checkbox]+label {
    font-weight: 700;
    border-bottom: 1px solid #F1F1F1;
    font-size: calc(100vw * (20/375));
    padding: calc(100vw * (17/375)) 0;
    width: 100%;
    height: auto;
}

.agree_wrap li.check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(100vw * (8/375)) 0;
    width: 100%;
    font-size: calc(100vw * (15/375));
    font-weight: 500;
}

.agree_wrap li.check .txt a {
    display: inline-block;
    font-size: calc(100vw * (12/375));
    color: #999;
    border-bottom: 1px solid #ddd;
    line-height: 1.2em;
    margin-left: 5px;
}

.agree_wrap li.check .check_box {
    width: 50px;
}

.agree_wrap li input[type=checkbox]+label {
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    height: calc(100vw * (20/375));
    position: relative;
    display: block;
}

.agree_wrap li input[type=checkbox]+label::after {
    content: '';
    position: absolute;
    width: calc(100vw * (20/375));
    height: calc(100vw * (20/375));
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: url('../image/sub/join_btn.svg') no-repeat center / contain;
}

.agree_wrap li input[type=checkbox]:checked+label::after {
    background: url('../image/sub/join_btn_on.png') no-repeat center / contain;
}

.agree_wrap li input[type=checkbox] {
    display: none;
}

.join_inner .btm_btn {
    margin-top: auto;
    display: flex;
}

.join_inner .btm_btn a {
    display: block;
    width: 100%;
    line-height: calc(100vw * (56/375));
    border-radius: calc(100vw * (6/375));
    background-color: #06B395;
    color: #fff;
    text-align: center;
    font-size: calc(100vw * (16/375));
    font-weight: 700;
}

.join_inner .btm_btn a.chk {
    margin-right: calc(100vw * (10/375));
    background-color: #EEEEEE;
    color: #BDBDBD;
}

.join_inner .btm_btn a.chk.r {
    margin-right: unset;
}

.join_txt {
    line-height: 1.5em;
}

.join_txt .tit {
    margin-bottom: 10px;
}

.join_txt .tit img {
    height: calc(100vw * (25/640));
    margin-top: calc(100vw * (4/640));
}

.join_txt .gray9 {
    font-size: calc(100vw * (22/640));
}

/* 회원가입 - 아이디 만들기 */
.login {
    width: 100%;
}

.login.login_ad {
    display: flex;
    border: 1px solid #ddd;
}

.join_inner .login.login_ad {
    border: unset;
    border-bottom: 1px solid #ddd;
}

.join_inner .login.login_ad input {
    font-size: calc(100vw * (15/375));
    font-weight: 500;
    color: #1E2236;
    padding: 0;
}

.join_inner .login.login_ad input:placeholder {
    color: #BDBDBD;
}

.join_inner .tit_txt {
    margin: calc(100vw * (22/375)) 0 calc(100vw * (15/375));
    font-size: calc(100vw * (14/375));
    font-weight: 400;
    color: #4F5156;
}

.join_inner .e_ment {
    font-size: calc(100vw * (12/375));
    font-weight: 500;
    color: #9F9F9F;
    margin-top: calc(100vw * (10/375));
}

.login.login_ad>div {
    width: 46%;
}

.login>span {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 16px;
    line-height: 50px;
    width: 8%;
}

.login.login_ad>div input {
    width: 100%;
    height: 100%;
}

.login.login_ad>div input,
.login.login_ad>div select {
    border: 0;
}

select {
    height: calc(100vw * (85/640));
    border: 1px solid #ddd;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    font-size: 14px;
    background: #fff url('../image/sub/select_arw.png') no-repeat center right 10px / 14px;
    color: #666;
    border-radius: 3px;
}

/* 마이페이지 - 비밀번호 변경 */
.password_re {
    min-height: 100vh;
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: calc(100vw * (550/640));
    box-sizing: border-box;
    background: #1A1F2C;
}

.password_re .tit {
    font-size: calc(100vw * (20/375));
    margin-bottom: calc(100vw * (35/375));
    line-height: 1em;
    font-weight: 400;
}

.password_re .tit span {
    font-weight: 700;
}

.password_re .ment {
    margin-bottom: calc(100vw * (25/375));
    font-weight: 400;
    line-height: 1;
}

.password_re .sub {
    font-size: calc(100vw * (21/640));
    color: #8087b3;
}

.password_re .serial_num span {
    display: inline-block;
    vertical-align: top;
    width: calc(100vw * (12/375));
    height: calc(100vw * (12/375));
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #06B395;
    margin: 0 7px;
}

.password_re .serial_num span.on {
    background-color: #06B395;
}

.password_box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.password_box .password_icon {
    position: absolute;
    top: calc(100vw * (-220/640));
    width: calc(100vw * (245/640));
    left: 0;
    right: 0;
    margin: 0 auto;
}

.password_box ul {
    flex-wrap: wrap;
    position: relative;
    z-index: 99;
    background: #fff;
    padding: calc(100vw * (15/640)) calc(100vw * (20/640));
    border-radius: calc(100vw * (20/375)) calc(100vw * (20/375)) 0 0;
}

.password_box ul li {
    width: 33.333%;
    box-sizing: border-box;
}

.password_box ul li a {
    display: block;
    font-size: calc(100vw * (30/640));
    font-weight: 500;
    line-height: calc(100vw * (110/640));
    height: calc(100vw * (110/640));
    text-align: center;
}

.password_box ul li a img {
    vertical-align: middle;
}

.password_box ul li a img.img01 {
    width: calc(100vw * (40/640));
}

.password_box ul li a img.img02 {
    width: calc(100vw * (45/640));
}

/* mypage */
.mypage_wrap {
    background-color: #1A1F2C;
    min-height: 100vh;
    flex-direction: column;
}

.my_icon_box {
    position: relative;
    width: calc(100vw * (87/375));
    height: calc(100vw * (87/375));
    background: url('../image/main/info_img.svg') no-repeat center / contain;
}

.mypage_wrap .top_box {
    align-items: center;
    width: 100%;
    padding: calc(100vw * (25/375)) 0 calc(100vw * (30/375));
    flex-direction: column;
}

.my_icon_box .myqr_btn {
    position: absolute;
    top: 100%;
    padding: calc(100vw * (9/375)) calc(100vw * (15/375));
    background-color: #070B13;
    border-radius: calc(100vw * (50/375));
    font-size: calc(100vw * (12/375));
    font-weight: 700;
    color: #fff;
    width: 110%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.my_icon_box .myqr_btn .img_icon {
    width: calc(100vw * (15/375));
    height: calc(100vw * (15/375));
    margin-right: calc(100vw * (6/375));
}

.mypage_wrap .myinfo_box {
    padding: calc(100vw * (33/375)) 0;
    text-align: center;
}

.mypage_wrap .myinfo_box .name {
    font-size: calc(100vw * (21/375));
    font-weight: 700;
    color: #fff;
    line-height: 1.3em;
    margin-bottom: calc(100vw * (8/375));
}

.mypage_wrap .myinfo_box .email {
    font-size: calc(100vw * (14/375));
    font-weight: 400;
    color: #9F9F9F;
    line-height: 1.3em;
}

.mypage_wrap .w_bg {
    width: 100%;
    background: unset;
    background: linear-gradient(115.78deg, #0ABFAB 39.25%, #009FB5 90.38%), #FFFFFF;
    box-shadow: 0px 4px 10px rgba(16, 180, 162, 0.12);
    border-radius: calc(100vw * (15/375));
    padding-top: calc(100vw * (25/375));
}

.mypage_wrap .w_bg .logo_box {
    margin-right: auto;
}

.mypage_wrap .inner {
    width: 100%;
}

.mypage_wrap .w_bg .btm_box {
    border-radius: 0 0 calc(100vw * (15/375)) calc(100vw * (15/375));
}

.mypage_wrap .w_bg .p_link {
    justify-content: flex-end;
}

.mypage_wrap .com_plus_box {
    position: relative;
    left: unset;
    right: unset;
    margin: unset;
    transform: unset;
    margin-top: calc(100vw * (15/375));
    flex-direction: column;
}

.mypage_wrap .com_plus_box .pp_btm {
    margin-top: calc(100vw * (20/375));
}

.mypage_wrap .com_plus_box .pp_btm>div {
    width: 100%;
    border-radius: calc(100vw * (8/375));
    padding: calc(100vw * (17/375)) 0;
    justify-content: center;
    background-color: #F6F6F6;
    font-size: calc(100vw * (14/375));
    font-weight: 500;
    color: #242424;
}

.mypage_wrap .com_plus_box .pp_btm>div.r {
    margin-right: calc(100vw * (10/375));
}

.mypage_setting {
    border-radius: calc(100vw * (30/640)) calc(100vw * (30/640)) 0 0;
    padding: calc(100vw * (65/640)) 0;
    margin-top: auto;
    background: #fff;
    padding-bottom: unset;
}

.user_logout_txt.my {
    background-color: #F5F5F5;
    padding: unset;
}

.user_logout_txt.my a {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    position: relative;
    border-right: unset;
}

.user_logout_txt.my a.line::after {
    position: absolute;
    content: '';
    width: 1px;
    height: calc(100vw * (14/375));
    background-color: #C5C5C5;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

.mypage_list li {
    margin-bottom: calc(100vw * (40/640));
}

.mypage_list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    background: url('../image/sub/mypage_arw.svg') no-repeat center right / 7px;
}

.mypage_list li a .tit {
    font-size: calc(100vw * (28/640));
    font-weight: 500;
}

.mypage_list li a .tit .icon {
    margin-right: 10px;
    width: calc(100vw * (50/640));
    display: inline-block;
}

.mypage_list li a .tit .icon img {
    max-width: 100%;
    max-height: 28px;
    vertical-align: middle;
}

.mypage_list li a .num {
    font-size: calc(100vw * (27/640));
    color: #666;
    padding-right: 20px;
}

/* switchery */
.settings-item {
    margin-bottom: calc(100vw * (50/640));
}

.settings-item>div {
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    font-size: calc(100vw * (28/640));
    line-height: 1;
}

.settings-item:after {
    content: '';
    displaY: block;
    clear: both;
}

.settings-item .settings-item-desc {
    float: right;
}

.user_logout_txt {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}

.user_logout_txt a {
    display: block;
    padding: 0 25px;
    color: #999;
    font-size: 15px;
}

.user_logout_txt a:first-child {
    border-right: 1px solid #eee;
}

.settings-item .custom input {
    position: relative;
    display: block;
    width: calc(100vw * (48/375));
    height: calc(100vw * (26/375));
    background-color: #E1E1E1;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: calc(100vw * (50/375));
    transition: all 0.3s ease;
}

.settings-item .custom input::after {
    content: '';
    position: absolute;
    width: calc(100vw * (20/375));
    height: calc(100vw * (20/375));
    border-radius: 50%;
    background-color: #fff;
    top: calc(100vw * (3/375));
    left: calc(100vw * (3/375));
    transition: all 0.3s ease;
}

.settings-item .custom input:checked {
    background-color: #06B395;
}

.settings-item .custom input:checked::after {
    left: calc(100vw * (24/375));
}

/* END mypage */


/* 수정사항 */
.header_inner {
    padding: unset;
    height: 80px;
}

.common_info_box .img_icon {
    background-color: #FFF5DA;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.common_info_box .img_icon img {
    width: 42px;
    height: 52px;
    margin-top: 5px;
    transform: translateY(50%);
    transition: all 0.3s ease;
    animation: Up 4s infinite linear;
}

@keyframes Up {
    0% {
        transform: translate3d(0, 50%, 0);
    }
    10% {
        transform: translate3d(0, 8%, 0);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translate3d(0, 8%, 0) rotate(10deg);
    }
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(0, 8%, 0) rotate(-10deg);
    }
    100% {
        transform: translate3d(0, 8%, 0);
    }
}

.w_bg .btm_box .link .img_icon {
    width: 18px;
    height: 18px;
}
.w_bg .btm_box .link {
    font-size: 16px;
    flex: 1;
}
.my_icon_box .myqr_btn {
    border: 2px solid #06B395;
    padding: calc(100vw * (9/375)) calc(100vw * (11/375));
    justify-content: center;
}
.w_bg .btm_box .link:last-child {
    flex: 1.2;
}

.my_icon_box {
    background: url(../image/main/info_img2.svg) no-repeat center / contain;
}
/* END 수정사항 */


/* 05.17수정사항 */
.com_plus_box {
    transform: translateY(40%);
}
.ok_container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 45px 20px;
    position: relative;
    background-color: #F9F9F9;
}
.ok_container .center_box {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}
.ok_container .center_box .img_icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
}
.ok_container .center_box .span {
    margin: 24px 0 5px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.6em;
    color: #242424;
}
.ok_container .center_box .span span {
    font-weight: 700;
}
.home_link_btn {
    line-height: 56px;
    border-radius: 6px;
    background-color: #06B395;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    margin-top: auto;
}
.ok_container .ok_ment {
    font-size: 14px;
    font-weight: 300;
    line-height: 2.5em;
    color: #454545;
}
/* END 수정사항 */