@charset "utf-8";
@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

html, body, div, span, applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,
q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,
th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0
}

html,
body {
    width: 100%;
    font-size: 14px;
    font-family: "Pretendard", sans-serif;
    font-weight: 400;
    color: #333;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    word-break: keep-all;
    /* letter-spacing: -0.02em; */
    letter-spacing: 0;
}
body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
body::-webkit-scrollbar{
    display: none;
    width: 0;  /* Remove scrollbar space */
    height: 0;
    background: transparent;  /* Optional: just make scrollbar invisible */
    -webkit-appearance: none;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: inherit
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

ol,ul {
    list-style: none
}

label {
    font-size: 14px;
    color: #111;
}

blockquote,q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

img,fieldset,a {
    border: 0
}

img, source {
    width:100%;
    height:100%;
    vertical-align: middle;
    object-fit: cover
}

table,thead,tbody,tfoot {
    border-collapse: collapse;
    border-spacing: 0;
    word-break: keep-all;
    border:1px solid #ccc;
    text-align: center;
}

table thead {background: #eee;}

table th,
table td {
    word-break: keep-all;
    padding: 5px;
    border:1px solid #ccc;
    font-size: 12px;
    line-height: 16px;
}

ul,ol,li {
    list-style: none;
    word-break: keep-all
}

address,em {
    font-style: normal
}

/* input,textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: inherit;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none
} */

textarea {
    resize: none
}

input,select,textarea,form img {
    vertical-align: middle;
    border:none;
    width: 100%;
    font-size:16px;
    padding: 6px 0;
}

input::placeholder {color:#999;}

fieldset {
    min-width: 0
}

button,
input[type="submit"] {
    cursor: pointer
}

input:focus,
button:focus,
select:focus,
textarea:focus {
    outline: 0
}

input:disabled,
textarea:disabled {
    opacity: 1
}

button::-moz-focus-inner {
    border: 0 none;
    padding: 0
}

button {
    font-family: inherit;
    letter-spacing: inherit;
    border: 0;
    border-radius: 0;
    background: 0;
    box-sizing: border-box;
    cursor: pointer;
    touch-action: manipulation
}

::placeholder,
::-webkit-input-placeholder,
:-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
    color: #999 !important;
}

a {
    text-decoration: none
}

a:link {
    color: #333
}

a:visited {
    color: #999
}

a:focus {
    color: #333
}

legend,caption {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px)
}

caption {
    position: static;
    height: 0
}

.ellipsis {
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden
}

.cont_wrap {
    padding-right: constant(safe-area-inset-right);
    padding-left: constant(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
}

/* root */
:root {
    /* ios대응 */
    --vh: 100vh;
    /* z-index */
    --contBottom: 71;
    --Toat: 100;
    --Popup: 101;
}

.h3 {font-size: 20px; font-weight: 700; color:#111; line-height: 28px; text-align: center;}
.h4 {font-size: 16px; font-weight: 700; color:#111; line-height: 16px;}

/* btn-large */
.bottom_btn {display:flex; margin-top:30px;}
.bottom_btn.full {margin:0 auto; padding: 0 20px 80px;}
.bottom_btn.full_nxt {margin-top:20px;}
.bottom_btn a {background: #000; color:#fff; font-size:16px; line-height:16px; font-weight: 700; border-radius: 10px; padding: 18px 0; cursor: pointer; flex: 1; text-align: center;}
.bottom_btn .pre {background: #fff; color:#000; border: 1px solid #ddd; margin-right: 10px;}

/* btn-small */
.certiNum {background: #eee; padding: 5px; border-radius: 4px; font-size: 10px; line-height: 10px; color: #999; margin: 4px 0 4px 10px; min-width: 65px; height: 20px;}
.certiNum.chk {background: #000; color: #fff;}

/* componunt */
.custom-select {position: relative; cursor: pointer;}
.custom-select.flex {width: 100%;}
.selected {padding: 4px 0; background: #fff; border-radius: 10px; display: flex; justify-content: space-between; font-size: 16px; line-height: 20px;}
.selected .holder {font-size: 16px; line-height: 20px; font-weight: 400 !important; color:#999;}
.selected .holder.default {color: #111;}
.selected img {width:20px; height:20px;}
.options {position: absolute; width: 100%; background: #fff; border: 1px solid #eee; display: none; padding: 20px; border-radius: 10px; z-index: 2; left: -21px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-height: 211px; overflow: auto;}
.options li {cursor: pointer; font-size: 16px; line-height: 16px; padding: 6px 0; display: flex; justify-content: space-between;}
.options li + li {margin-top:10px;}
.options.map li a img {width: 24px; height: 24px; top: 2px; right: 0;}
.custom-select.act .options {display: block;}

/* 인트로 */
/* .cont_wrap {padding:0 20px;} */
.cont_wrap .cont_top {content: url('/images/a1black/img_intro_bg.png'); width: 100%; height: 100%; object-fit: cover; display: block;}
@media (max-width: 768px) {
    .cont_wrap .cont_top {
        content: url('/images/a1black/img_intro_bg_m.png');
    }
}
.cont_benefit {margin: 0 auto; padding: 0 20px;}
.cont_benefit .h3 {margin: 80px 0 40px;}
.cont_benefit .flex_wrap {display:flex; border:1px solid #eee; border-radius:10px; color:#111; padding:20px 28px 20px 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}
.cont_benefit .flex_wrap + .flex_wrap {margin-top:10px;}
.cont_benefit .flex_wrap .txt {margin-left:10px;}
.cont_benefit .flex_wrap .tit {font-size: 16px; font-weight: 700; color:#e3a856; padding-top: 10px;}
.cont_benefit .flex_wrap .sub {margin-top: 10px; line-height: 22px; letter-spacing: -0.02em;}
.cont_benefit .flex_wrap img {max-width:90px; max-height:90px;}
.cont_benefit .logo_box {display: flex; flex-wrap:wrap; margin:40px 0; padding-bottom:40px; border-bottom:1px solid #eee; justify-content: space-between;}
.cont_benefit .logo_box img {max-width: 140px; max-height:70px;} /* 디자인 width:160px인데 폴드 싱글모드 대응 위해 */
.cont_bottom {color:#777; margin: 0 auto 60px; padding: 0 20px;}
.cont_bottom p {font-size: 14px; font-weight: 700; margin-bottom:10px; line-height:22px;}
.cont_bottom .noti li {padding-left:6px; position: relative; line-height:22px;}
.cont_bottom .noti li:before {content: ''; display: block; position: absolute; top: 10px; left: 0; width: 2px; height: 2px; background:#777;}
.cont_bottom .noti li + li {margin-top: 6px;}

/* 약관동의 */
.term_wrap {padding: 20px 20px 80px; margin: 0 auto; max-width: 800px;}
.term_wrap .state {width: 148px; height: 36px;}
.term_wrap .card {border:1px solid #eee; padding: 20px; border-radius: 10px;}
.term_wrap .card + .card {margin-top:10px;}
.term_wrap .card .h4 {margin-bottom: 20px; padding-bottom:20px; border-bottom:1px solid #eee;}
.term_wrap input[type="checkbox"] {appearance: none; background: url('/images/a1black/chk_gray.png') center /100% no-repeat; width: 20px; height: 20px; margin: 0; border-radius: 4px; margin-right: 3px;}
/* .term_wrap input[type="checkbox"]:checked {background: url('/images/a1black/chk_black.png') center /100% no-repeat; width: 20px; height: 20px;} */
.term_wrap input[type="checkbox"]:checked {background: url('/images/a1black/chk_gold.png') center /100% no-repeat; width: 20px; height: 20px;}

.term_wrap .card_term .cont_label {display: flex; justify-content: space-between;}
.term_wrap .card_term .cont_label span {padding: 3px 0;}
.term_wrap .card_term + .card_term {margin-top:20px;}
.term_wrap .btm_noti {margin:10px 0 60px; color:#999; line-height: 22px; font-size: 14px;}
.term_wrap .btm_noti.fin {color: #E3A856;}
.term_wrap .btm_noti .noti li {padding-left: 6px; position: relative; line-height: 22px;}
.term_wrap .btm_noti .noti li:before {content: ''; display: block; position: absolute; top: 10px; left: 0; width: 2px; height: 2px; background:#999;}
.term_wrap .btm_noti .noti li + li {margin-top: 6px;}
.term_wrap .term_top {margin: 30px 0; text-align: center; position: relative;}
.term_wrap .term_top .h3 {margin-top:20px;}
.term_wrap .term_top .vital {color: #E3A856; position: absolute; right: 0; bottom: -20px; font-weight: 700; line-height: 14px;}
.term_wrap .all_term {border: 1px solid #eee; padding: 18px 18px 18px 20px; border-radius: 10px; margin: 30px 0 19px; line-height: 24px; display: flex; justify-content: flex-start; align-items: center;}
.term_wrap .all_term .h4 {line-height: 24px; margin-left: 7px;}
.term_wrap .all_term #chkAll {flex-shrink: 0;}

.term_wrap .cont_term {color: #999; margin-top: 20px; line-height: 22px; display: none; max-height:200px; overflow: auto;}
.term_wrap .cont_term.open {display: block;}
.term_wrap .cont_term .tit {font-weight: 700;}
.term_wrap .cont_term .noti {margin-top:20px; color:#E3A856; line-height: 16px; font-size: 12px;}
.term_wrap .cont_term .noti.table {margin: 0;}
.term_wrap .cont_term .noti.table + table {margin: 20px 0;}
.term_wrap .cont_term + .card_term {margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;}
.term_wrap .cont_term ul li {font-size: 12px; line-height: 20px;}
.term_wrap .cont_term li + li {margin-top:32px;}

.arrow {width: 20px; height: 20px; transition: transform 0.3s;}
.arrow.open {transform: rotate(180deg);}

/* 필수 정보입력 */
.card.essential .tit,
.card.essential .custom-select .tit {font-weight:700; margin-bottom:10px; line-height: 14px;}
.card.essential .custom-select .tit span {color:#E3A856;}
.card.essential .custom-select .label {font-size: 10px; line-height: 10px; color: #e3a856; background: #FFC77933; border-radius: 4px; padding: 4px 5px; margin-left: 6px; position: relative; top: -2px; font-weight: 500;}
.card.essential .custom-select .noti2 {color:#E3A856}
.card.essential .noti,
.physical_card .noti {color:#E3A856; font-size: 12px; line-height: 12px; margin-top:14px; font-weight: 400 !important;}
.card.essential .birth_wrap {min-width: 64px; display: flex; justify-content: space-between; gap:8px;}
.card.essential .birth_wrap .options {top: 48px !important;}
.card.essential .card_term {font-size: 12px; line-height: 12px; color: #111; margin-top: 13px;}
.card.essential .card_term.sms {display: flex; justify-content: space-between;}
.card.essential .card_term.sms input[type="checkbox"] {width: 14px; height: 14px; margin-right: 2px; position: relative; top: -1px; background-size: 14px;}
.card.essential .card_term.sms input[type="checkbox"] {width: 14px; height: 14px; margin-right: 2px; position: relative; top: -1px; background-size: 14px;}
/* .card.essential .card_term.sms input[type="checkbox"]:checked {background: url('/images/a1black/chk_gold.png') center /100% no-repeat; width: 14px; height: 14px;  margin: 0; border-radius: 4px; margin-right: 3px;} */
.card.essential .card_term.sms label {font-size: 12px; line-height: 12px;}
.card.essential.border {position: relative; margin-bottom: 60px;}
.card.essential.border:not(:last-child):after {position: absolute; content: ''; left: 0; bottom: -30px; width: 100%; height: 1px; background: #eee;}
.certiNum_wrap {display: flex; justify-content: space-between; gap: 8px;}
.certiNum_wrap + .certiNum_wrap {margin-top: 5px;}
.certiNum_wrap .email {min-width: 134px; align-items: center; flex:1;}
.certiNum_wrap input {min-width: 115px; flex:1;}
.certiNum_wrap span {font-size: 16px; line-height: 27px;}

/* 정보입력_카드 선택 */
.physical_card {background: #F2F2F2; margin: 30px -20px 0; padding: 30px 20px;}
.physical_card .txt,
.physical_card .tit {color: #111; font-weight: 700; line-height: 14px;}
.physical_card .tit {margin-bottom: 10px;}
.physical_card .tit span {color: #e3a856;}
.physical_card .custom-select {background: #fff; border-radius: 10px; border: 1px solid #eee; padding: 20px; margin-top: 10px;}
.physical_card .custom-select div + div {margin-top: 5px;}
.physical_card .custom-select.disabled {background: #ddd;}
.physical_card .custom-select.disabled input {background: #ddd;}
.physical_card .custom-select .options {box-sizing: border-box; left: 0; top: 92px !important;}

/* 가입 및 신청완료 */
.card.essential .join_cont {color: #111;}
.card.essential .join_cont .tit {font-size: 14px; line-height: 14px;}
.card.essential .join_cont .tit span {color: #E3A856;}
.card.essential .join_cont .val {font-size: 16px; line-height: 20px; margin-top: 16px;}
.card.essential .join_cont + .join_cont {padding-top: 20px; margin-top: 20px; border-top: 1px solid #eee;}

/* 가입완료 */
.cont_wrap.joinSuccess {padding: 0;}
.cont_wrap.joinSuccess .cont_top {position: relative; padding: 0; content: url('/images/a1black/img_fin_bg_m.png'); width: 100%; height: 100%; object-fit: cover; display: block;}
.cont_wrap.joinSuccess .cont_mid {position: absolute; top: 135vw; left: 50%; transform: translate(-50%); color: #fff; text-align: center; padding: 0 20px; width: 89%;}
.cont_mid .welcome {margin: 70px 0 80px;}
.cont_mid .welcome p {font-size: 14px; line-height: 22px;}
.cont_mid .welcome p + p {margin-top: 30px;}
.cont_mid .store {color: #E3A856;}
.cont_mid .dot_list {border-top:1px solid #777; text-align: left; padding-top: 30px; color: #999; letter-spacing: -0.02em; margin-bottom: 75px; max-width: 480px; margin:0 auto; width: 100%;}
.cont_mid .dot_list p {font-weight: 700; margin-bottom: 10px; font-size: 14px; line-height: 22px;}
.cont_mid .dot_list ul li {position:relative; font-size: 14px; line-height: 22px; padding-left: 6px;}
.cont_mid .dot_list ul li:before {content: ''; display: block; position:absolute; width: 2px; height: 2px; background: #777; top: 10px; left: 0;}
.cont_mid .dot_list ul li + li {margin-top: 6px;}

@media screen and (min-width: 768px){
    table th, table td {font-size: 16px; line-height: 26px;}
    input {font-size: 20px; line-height: 20px; padding: 11px 0;}
    .bottom_btn {margin-top: 60px;}

    /* 인트로 */
    .bottom_btn a {font-size: 24px; line-height: 24px; padding: 28.5px 0;}
    .bottom_btn.full {height: 79px;}
    .cont_wrap {padding: 0; margin: 0;}
    .cont_top {content: url('/images/a1black/img_intro_bg.png');}
    .cont_benefit {max-width: 800px; width: 100%; padding: 0;}
    .cont_benefit ul {padding: 0 160px;}
    .cont_benefit .h3 {font-size:30px; line-height: 39px; margin: 120px 0 60px;}
    .cont_benefit .logo_box {margin: 60px 0; padding: 0 148px 60px;}
    .cont_benefit .logo_box img {max-width: 240px; max-height: 105px;}
    .cont_benefit .flex_wrap {padding: 30px 50px;}
    .cont_benefit .flex_wrap img {max-width: 135px; max-height: 135px;}
    .cont_benefit .flex_wrap .txt {margin-left: 30px;}
    .cont_benefit .flex_wrap .tit {font-size: 24px; line-height: 28px; padding-top: 15px;}
    .cont_benefit .flex_wrap .sub {margin-top: 25px; font-size: 18px; line-height: 28px;}
    .cont_benefit .flex_wrap + .flex_wrap {margin-top: 15px;}
    .cont_bottom {padding: 0 144px; margin-bottom: 100px; width: 100%; max-width: 480px;}
    .cont_bottom p {font-size: 16px; line-height: 26px; margin-bottom: 15px;}
    .cont_bottom .noti li {font-size: 16px; line-height: 26px; padding-left: 9px;}
    .cont_bottom .noti li + li {margin-top: 9px;}
    .cont_bottom .noti li:before {top: 12px;}
    
    /* 약관동의 */
    .arrow {width: 24px; height: 24px;}
    .h4 {font-size: 20px; line-height: 20px;}
    .term_wrap .state {width: 222px; height: 54px;}
    .term_wrap .term_top .h3 {font-size: 30px; line-height: 39px; margin: 30px 0 80px;}
    .term_wrap .card {padding: 30px;}
    .term_wrap .card + .card {margin-top:15px;}
    .term_wrap .card .h4 {margin-bottom: 30px; padding-bottom: 30px;}
    .term_wrap .cont_term {margin-top:30px;}
    .term_wrap .cont_term .noti {font-size: 16px; line-height: 24px; margin-top: 50px;}
    .term_wrap .cont_term + .card_term {margin-top: 30px; padding-top: 30px;}
    .term_wrap .card_term .cont_label span {font-size: 18px; line-height: 18px;}
    .term_wrap .cont_term ul li {font-size: 16px; line-height: 26px;}
    .term_wrap .btm_noti {margin: 15px 0 100px; font-size: 18px; line-height: 26px;}
    .term_wrap .btm_noti.fin {font-size: 16px; line-height: 16px;}
    .term_wrap .all_term {margin: 60px 0; padding: 32px 0 32px 30px;}
    .term_wrap input[type="checkbox"],
    .term_wrap input[type="checkbox"]:checked {width: 24px; height: 24px; margin-right: 8px;}

    /* 필수 정보입력 */
    .certiNum {font-size: 15px; line-height: 15px; padding: 7.5px; min-width: 97px; height: 30px;}
    .certiNum_wrap {gap:11px;}
    .certiNum_wrap span {font-size: 20px; line-height: 38px;}
    .certiNum_wrap .email .options {top: 154px !important;}
    .term_wrap .term_top .vital {font-size: 18px; line-height: 18px; bottom: -40px;}
    .selected {padding: 11px 0;}
    .selected .holder {font-size: 20px; line-height: 20px;}
    .selected img {width: 24px; height:24px;}
    .card.essential.border {margin-bottom: 90px;}
    .card.essential.border:not(:last-child):after {bottom: -45px;}
    .card.essential .noti, .physical_card .noti {font-size: 16px; line-height: 16px;}
    .card.essential .tit, .card.essential .custom-select .tit {font-size: 18px; line-height: 18px; margin-bottom:18px;}
    .card.essential .card_term {font-size: 16px; line-height: 16px; margin-top:21px;}
    .card.essential .card_term.sms label {font-size: 16px; line-height: 16px;}
    .card.essential .card_term.sms input[type="checkbox"] {width: 21px; height: 21px; margin-right: 0;}
    .card.essential .custom-select .label {font-size: 15px; line-height: 15px; padding: 7.5px; margin-left: 15px;}
    .card.essential .birth_wrap {gap: 12px;}
    .card.essential .birth_wrap .options {top: 74px !important;}
    .options {padding: 30px; left: -31px; top: 112px !important;}
    .options li {font-size: 20px; line-height: 20px; padding: 11px 0;}
    .options li + li {margin-top: 15px;}
    .options.map li::after {width: 36px; height: 36px; top: 4px;}
    .options.point {top: 141px !important;}

    /* 정보입력_카드 선택 */
    .physical_card {padding: 45px 30px; margin: 30px 0;}
    .physical_card .txt, .physical_card .tit {font-size: 18px; line-height: 18px;}
    .physical_card .custom-select {margin-top: 15px;}
    .physical_card .custom-select .options {top: 141px !important;}
    .direct-input-field {top: -12px !important;}

    /* 가입 및 신청완료 */
    .card.essential .join_cont .tit {font-size: 18px; line-height: 18px;}
    .card.essential .join_cont .val {font-size: 20px; line-height: 20px; padding: 11px 0;}
    .card.essential .join_cont + .join_cont {padding-top: 30px; margin-top: 30px;}
    .cont_wrap.joinSuccess {background: #111;}
    .cont_wrap.joinSuccess .cont_top {content: url('/images/a1black/img_fin_bg.png'); width: 100%; height: 100%; object-fit: cover; display: block;}
    .cont_wrap.joinSuccess .cont_mid {top: 38vw;}
    .cont_mid .welcome {margin: 6.944vw 0;}
    .cont_mid .welcome p {font-size: 1.389vw; line-height: 2.361vw; margin-bottom:1.042vw;}
    .cont_mid .welcome p + p {margin-top:43px;}
    .cont_mid .dot_list {padding: 4.167vw 11.111vw 0;}
    .cont_mid .dot_list p {font-size: 1.111vw; line-height: 1.806vw;}
    .cont_mid .dot_list ul li {font-size: 1.111vw; line-height: 1.806vw; padding-left:0.625vw;}
    .cont_mid .dot_list ul li:before {top: 0.833vw;}
    .cont_mid .dot_list ul li + li {margin-top: 0.625vw;}
}