@charset "utf-8";

/* 노블 */
@font-face {
    font-family:"nb";
    font-style:normal;
    font-weight:300;
    src:url("../font/Nobel_Light.woff2") format("woff");
}

@font-face {
    font-family:"nb";
    font-style:normal;
    font-weight:400;
    src:url("../font/Nobel_Regular.woff2") format("woff");
}

@font-face {
    font-family:"nb";
    font-style:normal;
    font-weight:500;
    src:url("../font/Nobel_Book.woff2") format("woff");
}

@font-face {
    font-family:"nb";
    font-style:normal;
    font-weight:700;
    src:url("../font/Nobel_Bold.woff2") format("woff");
}



/* 프리텐다드 : 산돌라이센스 해지시 나올 대체 폰트 */
@font-face {
    font-family:"pd";
    font-style:normal;
    font-weight:400;
    src:url("../font/Pretendard-Regular.woff2") format("woff");
}

@font-face {
    font-family:"pd";
    font-style:normal;
    font-weight:500;
    src:url("../font/Pretendard-Medium.woff2") format("woff");
}

@font-face {
    font-family:"pd";
    font-style:normal;
    font-weight:600;
    src:url("../font/Pretendard-SemiBold.woff2") format("woff");
}

@font-face {
    font-family:"pd";
    font-style:normal;
    font-weight:700;
    src:url("../font/Pretendard-Bold.woff2") format("woff");
}



/* Reset */
/* html,body {overscroll-behavior-y:none;} */
* {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; /* word-break:keep-all */}
html {height:100%; overflow-y:scroll; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; line-height:1.3; font-size:62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0}
body {width:100%; height:100%; min-width:320px; color:#2d2d2d; font-size:1.4rem; font-family:Sandoll GothicNeo1Uni TTF, 'pd', 'Apple SD 산돌고딕 Neo', '맑은 고딕'; -webkit-font-smoothing:antialiased; -webkit-overflow-scrolling:touch; font-weight: 400; /* padding-top:constant(safe-area-inset-top); padding-bottom:constant(safe-area-inset-bottom); padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); */}
h1,h2,h3,h4,h5,h6 {font-weight:normal; font-size:100%}
input, select, textarea, button, label {font-size:100%; vertical-align:middle}

input {border:1px solid #eee; overflow:visible; transition:border 0.4s; color:#6d6d6d;}
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"] {width:100%; height:4.8rem; padding:0 3.2rem 0 1.6rem; font-size:1.4rem; font-weight: 500; outline:none; color: #111; appearance:none; -webkit-appearance:none; border-radius:0.8rem; border:0.1rem solid #eee; background:#f9f9f9;}

/* input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display:none;} */

/* input[type="date"] {background:url(../images/icon/icon_cal.png) right 12px center no-repeat; background-size:20px;}
input[type="date"]::-webkit-calendar-picker-indicator {color:transparent; background:none;} */

input:read-only {padding:0 1.6rem; color:#f9f9f9; -webkit-text-fill-color:inherit; border:0.1rem solid #f8f8fa; background:#f8f8fa;}
input:disabled {padding:0 1.6rem; color:#9f9fb0; -webkit-text-fill-color:inherit; border:0.1rem solid #dfdfe8; background:#dfdfe8;}
input:focus {color:#111; transition:all 0.3s; border-color: #cacad5;}
input.error {color:#da2631; transition:all 0.5s; border-color:red;}

::-webkit-input-placeholder {font-size:1.4rem; color:#6d6d76; vertical-align:middle; font-weight:400;}
input[type="tel"]::placeholder {text-align: left;}

select {width:100%; min-height:4.8rem; padding:0 3.5rem 0 1rem; font-size:1.4rem; line-height:1; font-family:Sandoll GothicNeo1Uni TTF, 'pd', 'Apple SD 산돌고딕 Neo', '맑은 고딕'; border:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; text-transform:none; border-radius:0.8rem; border:0.1rem solid #eee; color:#111; background:#f9f9f9 url(../images/common/select_bg.svg) right 1.2rem center no-repeat; background-size:1rem 0.6rem}
select option {color:#111}
select:disabled {color:#6d6d6d; transition:all 0.4s; -webkit-text-fill-color:inherit; background:#e3e3e3 url(../images/common/select_dis.svg) right 1.2rem center no-repeat; background-size:1rem 0.6rem}
select:disabled option {color:#5a5a5a}
select:focus {color:#111; transition:all 0.4s; border-color:#cacaca; outline:none;}



strong {display:inline-block; font-weight:700;}
fieldset, img, iframe {border:0 none}
img {max-width:100%; height:auto; vertical-align:middle; border-style:none}
textarea {width:100%; padding:1rem; -webkit-box-sizing:border-box; box-sizing:border-box; resize:none; border:0.1rem solid #d5d5d5; font-family:Sandoll GothicNeo1Uni TTF, 'pd'; -webkit-appearance:none; appearance:none; outline:none;}
em, address {font-style:normal}
a {text-decoration:none; background-color:transparent; vertical-align:middle; -webkit-text-decoration-skip:objects; color:#000; word-break:break-word}
a:hover, a:active, a:focus {text-decoration:none}
menu,li {list-style:none}
s {text-decoration:none;}
button {padding:0; margin:0; overflow:visible; cursor:pointer; vertical-align:middle; text-transform:none; font-family:Sandoll GothicNeo1Uni TTF, 'pd', 'Apple SD 산돌고딕 Neo', '맑은 고딕'; border:none; background:none;}
button, html [type="button"], [type="reset"],[type="submit"] {appearance:none; -webkit-appearance:none}
caption {width:1px; height:1px; padding:0; margin:-1px; overflow: hidden; line-height:0; clip:rect(0,0,0,0); white-space: nowrap; border:0;}

i,em,address {font-style:normal}
label {cursor:pointer}
table {width:100%; color:#000; table-layout:fixed; border-spacing:0; border-collapse:collapse}
table td {word-wrap:break-word}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {appearance:none; -webkit-appearance:none; margin:0}


/* 공통 */
.hidden {position:absolute; left:-9999em; top:-9999em; width:0px; height:0px; overflow:hidden}
.ally_hidden {position:absolute; width:1px; height:1px; margin:-1px; overflow: hidden; clip-path:polygon(0 0, 0 0, 0 0);}
.clear {clear:both;}
.show {display:block;}
.block {display:block !important;}
.ib {display:inline-block;}
.il {display:inline !important;}
.pos_r {position: relative;}
.tar {text-align:right !important}
.tal {text-align:left !important}
.tac {text-align:center !important}
.bdn {border:none !important}
.bdtn {border-top:none !important;}
.hide {display:none !important;}
.none {display:none;}
.u_line {display:inline; text-decoration:underline; font-weight:400;}
.b {font-weight:700 !important;}
.bb {font-weight:800 !important;}
.n {font-weight:400;}
.els {display:block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-wrap:normal;}
.fz16 {font-size: 1.6rem !important;}
.fz13 {font-size: 1.3rem !important;}
.fz12 {font-size: 1.2rem !important;}
.fz11 {font-size: 1.1rem !important;}
.font_nb {position: relative; top:0.05rem; font-family:"nb" !important; font-weight: 700;}
.nb300 {font-family:"nb"; font-weight:300;}
.nb400 {font-family:"nb"; font-weight:400;}
.nb500 {font-family:"nb"; font-weight:500;}
.nb700 {font-family:"nb"; font-weight:700;}
.d_flex {display: flex;}
.just_r {justify-content:right;}

.bdt_line {padding-top:3rem; border-top:0.1rem solid #111;}
.point_c01 {display: inline-block; color:#1169fc;}
.point_c02 {color:#666 !important;}
.point_c03 {color:#1c1c1c !important;}
.alert_msg {font-size: 1.5rem; font-weight: 700; line-height: 2.4rem;}

.hr_top {padding-top:5.4rem; margin-top:4rem;}
.hr_top:after {content: ''; display: block; position:absolute; left:0; top:0; right:0; height:1.4rem; margin:0 -2.4rem; border:none; background:#f3f3f3;}
.hr_bottom {position:relative; padding-bottom:6.4rem;}
.hr_bottom:after {content: ''; display: block; position:absolute; left:0; bottom:0; right:0; height:1.4rem; margin:0 -2.4rem; border:none; background:#f3f3f3;}


/* 간격 */
.mt0 {margin-top:0 !important}
.mt5 {margin-top:0.5rem !important}
.mt8 {margin-top:0.8rem !important}
.mt10 {margin-top:1rem !important}
.mt15 {margin-top:1.5rem !important}
.mt20 {margin-top:2rem !important}
.mt25 {margin-top:2.5rem !important}
.mt30 {margin-top:3rem !important}
.mt35 {margin-top:3.5rem !important}
.mt40 {margin-top:4rem !important}
.mt45 {margin-top:4.5rem !important}
.mt50 {margin-top:5rem !important}
.mt55 {margin-top:5.6rem !important}
.mt60 {margin-top:6rem !important}
.mt70 {margin-top:7rem !important}
.mt80 {margin-top:8rem !important}
.mt90 {margin-top:9rem !important}
.mt100 {margin-top:10rem !important}
.mt120 {margin-top:12rem !important}

.mb0 {margin-bottom:0 !important}
.mb5 {margin-bottom:0.5rem !important}
.mb10 {margin-bottom:1rem !important}
.mb15 {margin-bottom:1.5rem !important}
.mb20 {margin-bottom:2rem !important}
.mb25 {margin-bottom:2.5rem !important}
.mb30 {margin-bottom:3rem !important}
.mb35 {margin-bottom:3.5rem !important}
.mb40 {margin-bottom:4rem !important}
.mb45 {margin-bottom:4.5rem !important}
.mb50 {margin-bottom:5rem !important}
.mb80 {margin-bottom:8rem !important}
.mb100 {margin-bottom:10rem !important}

.ml0 {margin-left:0 !important}
.ml5 {margin-left:0.5rem !important}
.ml10 {margin-left:1rem !important}
.ml15 {margin-left:1.5rem !important}
.ml20 {margin-left:2rem !important}
.ml25 {margin-left:2.5rem !important}
.ml30 {margin-left:3rem !important}
.ml35 {margin-left:3.5rem !important}
.ml40 {margin-left:4rem !important}
.ml45 {margin-left:4.5rem !important}
.ml50 {margin-left:5rem !important}

.pt0 {padding-top:0 !important}
.pb0 {padding-bottom:0 !important}


/* 크기 */
.w10 {width:10% !important;}
.w20 {width:20% !important;}
.w25 {width:25% !important;}
.w30 {width:30% !important;}
.w35 {width:35% !important;}
.w40 {width:40% !important;}
.w50 {width:50% !important;}
.w60 {width:60% !important;}
.w65 {width:65% !important;}
.w70 {width:70% !important;}
.w80 {width:80% !important;}
.w90 {width:90% !important;}
.w100 {width:100% !important;}


/* 체크, 라디오, 폼 */

.i_check {display:inline-block; position:relative; padding-left:3.5rem; overflow:hidden; color:#757575; vertical-align:middle; font-size:1.5rem; font-weight: 600;}
.i_check i {display:inline-block; position: relative; z-index: 1; width:2.4rem; height:2.4rem; margin:0 1rem 0.4rem -3.5rem; outline:none; vertical-align:middle; transition:all 0.4s; background:url(../images/common/check_default.svg) center center / cover no-repeat;}
.i_check span {line-height:2.5rem; transition:all 0.4s;}
.i_check input[type=checkbox] {position:absolute; left:-9999em; opacity:0}
.i_check input[type=checkbox]:checked + i {transition:all 0.4s; background-image:url(../images/common/check_select.svg);}
.i_check input[type=checkbox]:checked + i + span {color: #111; transition:all 0.4s;}
.i_check input[type=checkbox]:disabled + i {background-image:url(../images/common/check_disabled.svg)}
.i_check.center i {position: absolute; top:50%; transform:translateY(-50%);}


.i_radio {display:inline-block; position:relative; overflow:hidden; color:#111; font-size:1.5rem; vertical-align:middle; font-weight: 500;}
.i_radio i {display:inline-block; width:2rem; height:2rem; margin-right:1rem; outline:none; vertical-align:middle; border-radius: 2rem; background:#fff url(../images/common/i_radio.svg) center center / cover no-repeat;}
.i_radio span {position: relative; top:0.1rem}
.i_radio .em {font-size:1.3rem; font-weight:600; color:#6b6b76;}
.i_radio input[type=radio] {position:absolute; opacity:0; width:1px; height:1px;}
.i_radio input[type=radio]:checked + i {background-image:url(../images/common/i_radio_on.svg);}
.i_radio input[type=radio]:disabled + i {background-image:url(../images/common/i_radio_disabled.svg)}

.i_radio.bk i {border-radius:50%; background:url(../images/common/i_radio_bk.svg) center center / 1.9rem 1.9rem no-repeat;}
.i_radio.bk span {color:#9f9fb0; font-size: 1.8rem; font-weight: 700;}
.i_radio.bk input[type=radio]:checked + i {background-image:url(../images/common/i_radio_bk_on.svg);}
.i_radio.bk input[type=radio]:checked + i + span {color:#fff;}

.i_radio.multi_line {padding-left:3rem;}
.i_radio.multi_line i {margin-left:-3rem; margin-right:1rem;}

.android .i_radio input[type=radio] {position:absolute; left:0; top:0; opacity:0; width:2rem; height:2rem;}

.chk_box {display:flex; min-height:6rem; padding:1rem 1.4rem; align-items:center; justify-content:space-between; border-radius:1.6rem; border:0.2rem solid #dfdfe8;}
.chk_box.on {border:0.2rem solid #111;}
.chk_box.arrow {position: relative; padding-right:0;}
.chk_box label {flex:1; color:#111; font-weight:600; word-break: keep-all;}
.chk_box .i_check input[type=checkbox] {left:0.1rem; top:0.1rem; width:2.4rem; height:2.4rem; opacity:0.1; padding:0; appearance:none;}
.chk_box .view_btn {display:inline-block; width:3.2rem; height:3.2rem; text-indent: -9999em; background:url(../images/icon/terms_arrow.svg) right 1rem center / 1.6rem no-repeat;}


.s_radio {display:inline-block; position:relative; padding-left:27px; overflow:hidden; vertical-align:middle; color:#111; font-size:14px; font-family:'nsm';}
.s_radio i {display:inline-block; width:17px; min-height:13px; margin:-2px 7px 0px -22px; outline:none; vertical-align:middle; background:url(../images/common/icon_v_radio.png) left top / 17px auto no-repeat}
.s_radio input {position:absolute; left:-9999em; opacity:0}
.s_radio input:checked + i + span {color:#111;}
.s_radio input:checked + i {background-image:url(../images/common/icon_v_radio_on.png)}
.s_radio input:disabled + i {background-image:url(../images/common/icon_v_radio_dis.png)}
.s_radio input:disabled + i + span {color:#aaabad;}


.terms_check {display:block; position:relative; overflow:hidden; color:#111; font-weight:500;}
.terms_check span {display:flex; position:relative; font-size:1.3rem; font-weight: 600; color:#6b6b76; background:url(../images/common/i_radio_disabled.svg) right center / 1.5rem no-repeat}
.terms_check input[type=checkbox] {position:absolute; right:0; top:0; z-index: 1; width:1.8rem; height:1.8rem; padding:0; opacity:0;}

.terms_check input[type=checkbox]:checked + span {color:#333; background:url(../images/common/i_radio_on.svg) right center / 1.5rem no-repeat}


.label_radio {display:block; position: relative; -webkit-tap-highlight-color:transparent;}
.label_radio span {display:flex; height:3.6rem; padding:0 1.2rem; align-items:center; justify-content:center; line-height:3.6rem; color:#787884; font-weight:700; font-size:1.3rem; border-radius:1.8rem; transition: all 0.2s; background: #f2f2f6;}
.label_radio input[type=radio] {position:absolute; left:0; top:0; width:100%; height:100%; margin:0; padding:0; opacity:0}
.label_radio input[type=radio]:checked + span {color:#fff; background:#111;}


.s_check {display:inline-block; position:relative; overflow:hidden; padding-left:2.2rem; color:#111; vertical-align:middle; font-size:1.4rem; font-weight:500;}
.s_check i {display:inline-block; position:relative; left:-0.6rem; width:1.6rem; height:1.6rem; margin-top:-0.1rem; margin-left:-1.6rem; outline:none; vertical-align:middle; background:url(../images/common/s_check.svg) center center / cover no-repeat;}
.s_check span {transition:all 0.4s;}
.s_check input {width:0.1rem; height:0.1rem; padding:0; margin:0; opacity:0.1; outline :none}
.s_check input:checked + i {background-image:url(../images/common/s_check_on.svg);}

.radio_set {display:flex; min-height:4.8rem;}
.radio_set > li {flex:1; position:relative; text-align:center; font-size:1.5rem; font-weight:500;}
.radio_set > li ~ li {margin-left: 1rem;}
.radio_set > li input[type=radio] {position:absolute; width:100%; height:100%; left:0; top:0;}
.radio_set > li input[type=radio]:checked + label {color:#fff; background-color:#111}
.radio_set > li label {display:flex; position: relative; height:4.8rem; color:#111; font-weight: 500; font-size: 1.5rem; justify-content: center; align-items: center; border-radius:0.8rem; transition:all 0.2s; background:#f9f9f9;}



.check_confirm_box {padding:1.8rem 2rem 2rem; overflow: hidden; border-radius:1.6rem; border:0.2rem solid #dfdfe8; }
.check_confirm_box ~ .check_confirm_box {margin-top:2rem;}
.check_confirm_box.on {border:0.2rem solid #111;}
.check_confirm_box.on .txt {color: #111; transition:all 0.5s}
.check_confirm_box .txt {line-height:2.2rem; color:#6b6b76; font-size:1.4rem; font-weight:700; transition:all 0.5s}
.check_confirm_box .txt.num {position:relative; padding-left:1.5rem; padding-bottom: 1.5rem;}
.check_confirm_box .txt.num ~ .txt.num {padding-top:1.5rem; border-top: 1px solid #efefef;}
.check_confirm_box .txt.num span {position:absolute; left:0; top:0;}
.check_confirm_box .txt.num ~ .txt.num span {top:1.5rem;}

.check_confirm_box .btn_area {float: right; position: relative; justify-content:right; min-width:8rem; margin-top:1.5rem; outline:none;}
.check_confirm_box .check_confirm {display:flex; min-width:8rem; height:4.2rem; justify-content:center; align-items:center; color:#6b6b76; font-weight:600; font-size:1.5rem; border-radius:2.4rem; border:0.2rem solid #dfdfe8; transition: all 0.2s;}
.check_confirm_box .btn_area input[type=checkbox] {position:absolute; left: 0; top: 0; width:8rem; height:4.2rem; margin:0; padding:0; opacity:0}
.check_confirm_box .btn_area input[type=checkbox]:checked + label {color:#fff; border:0.2rem solid #111; background:#111;}



/* 버튼 */
.btn {display:flex; position: relative; width:100%; height:4.8rem; justify-content:center; align-items:center; border-radius:0.8rem; font-size:1.5rem; font-weight: 500; font-family:Sandoll GothicNeo1Uni TTF, 'pd';}

.btn.primary {color:#fff; border:0.1rem solid #111; background:#111;}
.btn.primary:disabled,
.btn.primary.disabled {color:#fff; border:0.1rem solid #757575; pointer-events:none; background:#757575;}
.btn.primary .icon {display: inline-block; margin-right:1rem;}
.btn.primary .icon.camera {margin-right:1rem; width:2.1rem; height:1.8rem; background:url(../images/icon/icon_camera.svg) center center / cover no-repeat;}

    .toyota .btn.primary {color:#fff; border:0.1rem solid #eb0a1e; background:#eb0a1e;}
    .toyota .btn.primary:disabled,
    .toyota .btn.primary.disabled {color:#fff; border:0.1rem solid #757575; pointer-events:none; background:#757575; }

.btn.second {color:#111; border:0.1rem solid #e3e3e3; background:#fff;}
.btn.second:disabled,
.btn.second.disabled {color:#5a5a5a; border:0.1rem solid #e3e3e3; pointer-events:none; background:#e3e3e3;}

.btn.tertiary {color:#111; border:0.1rem solid #111; background:#fff;}
.btn.tertiary:disabled,
.btn.tertiary.disabled {color:#5a5a5a; border:0.1rem solid #e3e3e3; pointer-events:none; background:#757575;}

.btn.large {height:5.4rem; font-size:1.6rem;}

.btn.radius {border-radius:5.4rem;}

.btn_set {display:flex; width:100%; justify-content:space-between;}
.btn_set.pd {padding:2.4rem 0;}
.btn_set .btn {margin-right:1rem;}
.btn_set .btn:last-child {margin-right:0;}

.btn_set.fix {position:fixed; left:0; bottom:0; z-index:50; width:100%; /* max-width:768px; */ padding:2rem; justify-content:space-between; background:#fff;}
.btn_set.fix.column {flex-direction:column;}
.btn_set.fix .btn {height:5.4rem;}

.btn_set.bottom {position: relative; z-index:50; margin-top:12rem; padding:2.4rem 0; border-radius:1.2rem; background:#fff;}
.btn_set.bottom .btn {height:5.4rem;}

.ratio37 > *:first-child {flex:1; margin-right:1rem;}
.ratio37 > *:last-child {flex:15%; margin-right:0;}
.ratio28 > *:first-child {flex:1; margin-right:1rem;}
.ratio28 > *:last-child {flex:32%; margin-right:0;}

.edit {display:flex; justify-content:flex-end;}
.edit a,
.edit button {display:flex; width:4.3rem; max-width:100%; height:3rem; justify-content:center; align-items:center; letter-spacing:normal; font-size:1.1rem; color:#787884; border-radius:3rem; border:0.1rem solid #efeff4; background:#fff;}

.reshort {position:relative; width: 100%;}
.reshort input {position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; opacity:0;}


/* 폼 */
.inp,
.select {display:flex; position:relative; width: 100%;}
.self_input {display:none; margin-top:1.2rem;} /* 직접입력 인풋 */
.val_del {display:none; position:absolute; right:1rem; top:50%; width:1.6rem; height:1.6rem; text-indent:-9999px; transform:translateY(-50%); background:url(../images/common/ipt_del.svg) 0 0 / 1.6rem no-repeat;}
.has_txt {text-align:right; font-size:1.6rem; font-weight:500;}
.has_txt:disabled + .txt {color:#54545d;}

.inp_txt {position:relative;}
.inp_txt span.txt {position:absolute; right:1.6rem; top:50%; transform:translateY(-50%);}

.form_group {display:flex; position:relative; justify-content:space-between; align-items:center;}
.form_group i {display:flex; position:relative; height:4.8rem; justify-content:center; align-items:center; vertical-align:middle; font-size:16px; color:#555; padding:0 3px;}
.form_group .select ~ .select {margin-left:1rem;}
.extra_field {display: block; display:none; margin-top:1rem;}
.radio_input_field {display:flex; align-items:center;}
.radio_input_field .input_field {width:12.5rem}
.radio_input_field .input_field input {height:4rem;}


/* 폼 리스트 */
.form_list {}
.form_list .label {margin-bottom:1rem; color: #111; font-weight:500; font-size: 1.4rem;}
.form_list > ul > li {}
.form_list > ul > li ~ li {margin-top:2.6rem;}


/* 기본 팝업 */

.pop_wrap {}
.pop_wrap.alert {z-index:1000;}

.pop_basic {display:none; position:fixed; left:0; top:0; z-index:300; width:100%; height:100%; text-align:center; -webkit-transform:translate3d(0,0,0.1rem); transform:translate3d(0,0,0.1rem);}
.pop_basic .pop_inside {display:block; position:fixed; left:50%; top:50%; z-index:100; width:85%; padding:2rem 1.5rem 0; transform:translate(-50%, -50%); border-radius:1.4rem; overflow:hidden; will-change:bottom; background:#fff;}
.pop_basic .p_body {display:flex; position:relative; min-height:9rem; height:100%; max-height:90%; font-size: 1.4rem; font-weight: 600; align-items:center; justify-content:center; flex-direction:row; overflow:hidden;}
.pop_basic .p_btn {display:flex; width:100%; height:7.8rem; justify-content:space-between; align-items: center; background:#fff;}
.pop_basic .p_x {position:fixed; opacity:0; width:1px; height:1px; font-size: 1px;}

/* 슬라이드팝업 */
.pop_slide {display:none; position:fixed; top:0; left:0; z-index:200; width:100%; height:100%;}
.pop_slide .pop_inside {display:flex; flex-direction:column; position:fixed; left:0; bottom:-88%; z-index:100; width:100%; max-height:88%; padding:2.4rem; border-radius:2rem 2rem 0 0; will-change:bottom; background:#fff;}
.pop_slide .p_top {position:relative; z-index:1; margin-bottom:3.6rem;}
.pop_slide .p_top h2 {color:#111; font-size:1.6rem; font-weight:500}
.pop_slide .p_body {flex:1; position:relative; overflow-x:hidden;}
.pop_slide .p_btn {width:100%; margin-top:3.2rem;}
.pop_slide .p_btn button {color:#fff;}
.pop_slide .p_x {display: inline-block; position:absolute; right:2.4rem; top:2.2rem; z-index: 1; width:2.4rem; height:2.4rem; font-size:0.1rem; color:transparent; background:url(../images/common/pop_x.svg) 50% 50% / 1.4rem 1.4rem no-repeat;}

/* 슬라이드 풀 팝업 */
.pop_slide.full .pop_inside {bottom:-100%; max-height:100%; height:100%; padding:6rem 0 0 0; overflow: hidden; overflow-y:auto; transition:border-radius 0.8s; outline:none}
.pop_slide.full .pop_inside.edge {border-radius:0; transition:border-radius 0.3s;}
.pop_slide.full .p_top {margin-bottom:0;}
.pop_slide.full .p_body {max-height:100%; padding:2.4rem;}
.pop_slide.full .p_btn {padding:2rem 2.4rem 2.4rem; margin-top: 0;}
.pop_slide.full .p_btn .btn {height:5.5rem}

.dim {display:none; position:fixed; left:0; top:0; z-index:50; width:100%; height:100%; opacity:0.6; background:#111; -webkit-tap-highlight-color: rgba(0,0,0,0);}


/* 탭메뉴 */
.tab_wrap {}
.tab_wrap .tab {display:flex; justify-content:space-between;}
.tab_wrap .tab li {display:flex; flex:1; height:45px; align-items: center; border:2px solid #f5f5f5;}
.tab_wrap .tab li:first-child {border-radius:4px 0 0 4px;}
.tab_wrap .tab li:last-child {border-radius:0 4px 4px 0;}
.tab_wrap .tab li ~ li {margin-left: -2px;}
.tab_wrap .tab li button {display: block; width:100%; height:100%; line-height: 1; font-size:16px;}
.tab_wrap .tab li.on {position: relative; border:2px solid #0263e1; }
.tab_wrap .tab li.on button {color: #0263e1; font-family:'nsm';}
.tab_content {padding-top:15px;}
.tab_content .tab_box {display:none;}
.tab_content .tab_box.on {display:block;}


/* 로딩 */

.loding {display:flex; position: fixed; left:0; top:0; z-index:9999; width:100%; height:100%; justify-content: center; align-items: center;}
.in_loding {padding:30px 30px 25px; background:rgba(255,255,255,0.6); border-radius:0.8rem;}

.loding_dot {position: relative; display: flex; align-items: center;	justify-content: space-between;}
.in_dot,
.loding_dot::before,
.loding_dot::after {content:''; display: block; height:8px; width:8px; border-radius: 50%; transform: scale(0);background-color:#19191c;}
.loding_dot::before {margin-right:15px; animation: loding 1.3s ease-in-out infinite;}
.in_dot {animation: loding 1.3s ease-in-out calc(1.3s * 0.125) infinite both;}
.loding_dot::after {margin-left:15px; animation: loding 1.3s ease-in-out calc(1.3s * 0.25) infinite;}
@keyframes loding {
0%,	100% {transform: scale(0.4);}
50% {transform: scale(1.25);}
}









.waveform {
    --uib-size: 40px;
    --uib-speed: 1s;
    --uib-color: black;
    --uib-line-weight: 3.5px;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: var(--uib-size);
    height: calc(var(--uib-size) * 0.9);
  }

  .waveform__bar {
    width: var(--uib-line-weight);
    height: 100%;
    background-color: var(--uib-color);
  }

  .waveform__bar:nth-child(1) {
    animation: grow var(--uib-speed) ease-in-out
      calc(var(--uib-speed) * -0.45) infinite;
  }

  .waveform__bar:nth-child(2) {
    animation: grow var(--uib-speed) ease-in-out
      calc(var(--uib-speed) * -0.3) infinite;
  }

  .waveform__bar:nth-child(3) {
    animation: grow var(--uib-speed) ease-in-out
      calc(var(--uib-speed) * -0.15) infinite;
  }

  .waveform__bar:nth-child(4) {
    animation: grow var(--uib-speed) ease-in-out infinite;
  }

  @keyframes grow {
    0%,
    100% {
      transform: scaleY(0.3);
    }

    50% {
      transform: scaleY(1);
    }
  }












  .chaotic-orbit {
    --uib-size: 25px;
    --uib-speed: 1.5s;
    --uib-color: black;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--uib-size);
    width: var(--uib-size);
    animation: rotate calc(var(--uib-speed) * 1.667) infinite linear;
  }

  .chaotic-orbit::before,
  .chaotic-orbit::after {
    content: '';
    position: absolute;
    height: 60%;
    width: 60%;
    border-radius: 50%;
    background-color: var(--uib-color);
    will-change: transform;
    flex-shrink: 0;
  }

  .chaotic-orbit::before {
    animation: orbit var(--uib-speed) linear infinite;
  }

  .chaotic-orbit::after {
    animation: orbit var(--uib-speed) linear calc(var(--uib-speed) / -2)
      infinite;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes orbit {
    0% {
      transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
      opacity: 0.65;
    }
    5% {
      transform: translate(calc(var(--uib-size) * 0.4)) scale(0.684208);
      opacity: 0.58;
    }
    10% {
      transform: translate(calc(var(--uib-size) * 0.3)) scale(0.631576);
      opacity: 0.51;
    }
    15% {
      transform: translate(calc(var(--uib-size) * 0.2)) scale(0.578944);
      opacity: 0.44;
    }
    20% {
      transform: translate(calc(var(--uib-size) * 0.1)) scale(0.526312);
      opacity: 0.37;
    }
    25% {
      transform: translate(0%) scale(0.47368);
      opacity: 0.3;
    }
    30% {
      transform: translate(calc(var(--uib-size) * -0.1)) scale(0.526312);
      opacity: 0.37;
    }
    35% {
      transform: translate(calc(var(--uib-size) * -0.2)) scale(0.578944);
      opacity: 0.44;
    }
    40% {
      transform: translate(calc(var(--uib-size) * -0.3)) scale(0.631576);
      opacity: 0.51;
    }
    45% {
      transform: translate(calc(var(--uib-size) * -0.4)) scale(0.684208);
      opacity: 0.58;
    }
    50% {
      transform: translate(calc(var(--uib-size) * -0.5)) scale(0.73684);
      opacity: 0.65;
    }
    55% {
      transform: translate(calc(var(--uib-size) * -0.4)) scale(0.789472);
      opacity: 0.72;
    }
    60% {
      transform: translate(calc(var(--uib-size) * -0.3)) scale(0.842104);
      opacity: 0.79;
    }
    65% {
      transform: translate(calc(var(--uib-size) * -0.2)) scale(0.894736);
      opacity: 0.86;
    }
    70% {
      transform: translate(calc(var(--uib-size) * -0.1)) scale(0.947368);
      opacity: 0.93;
    }
    75% {
      transform: translate(0%) scale(1);
      opacity: 1;
    }
    80% {
      transform: translate(calc(var(--uib-size) * 0.1)) scale(0.947368);
      opacity: 0.93;
    }
    85% {
      transform: translate(calc(var(--uib-size) * 0.2)) scale(0.894736);
      opacity: 0.86;
    }
    90% {
      transform: translate(calc(var(--uib-size) * 0.3)) scale(0.842104);
      opacity: 0.79;
    }
    95% {
      transform: translate(calc(var(--uib-size) * 0.4)) scale(0.789472);
      opacity: 0.72;
    }
    100% {
      transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
      opacity: 0.65;
    }
  }













  .race-by {
    --uib-size: 80px;
    --uib-speed: 1.4s;
    --uib-color: black;
    --uib-line-weight: 5px;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--uib-line-weight);
    width: var(--uib-size);
    border-radius: calc(var(--uib-line-weight) / 2);
    overflow: hidden;
    transform: translate3d(0, 0, 0);
  }

  .race-by::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--uib-color);
    opacity: 0.1;
  }

  .race-by::after {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: calc(var(--uib-line-weight) / 2);
    animation: raceBy var(--uib-speed) ease-in-out infinite;
    transform: translateX(-100%);
    background-color: var(--uib-color);
  }

  @keyframes raceBy {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }






  .leap-frog {
    --uib-size: 40px;
    --uib-speed: 2.5s;
    --uib-color: black;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--uib-size);
    height: var(--uib-size);
  }

  .leap-frog__dot {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }

  .leap-frog__dot::before {
    content: '';
    display: block;
    height: calc(var(--uib-size) * 0.22);
    width: calc(var(--uib-size) * 0.22);
    border-radius: 50%;
    background-color: var(--uib-color);
    will-change: transform;
  }

  .leap-frog__dot:nth-child(1) {
    animation: leapFrog var(--uib-speed) ease infinite;
  }

  .leap-frog__dot:nth-child(2) {
    transform: translateX(calc(var(--uib-size) * 0.4));
    animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -1.5)
      infinite;
  }

  .leap-frog__dot:nth-child(3) {
    transform: translateX(calc(var(--uib-size) * 0.8)) rotate(0deg);
    animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -3)
      infinite;
  }

  @keyframes leapFrog {
    0% {
      transform: translateX(0) rotate(0deg);
    }

    33.333% {
      transform: translateX(0) rotate(180deg);
    }

    66.666% {
      transform: translateX(calc(var(--uib-size) * -0.4)) rotate(180deg);
    }

    99.999% {
      transform: translateX(calc(var(--uib-size) * -0.8)) rotate(180deg);
    }

    100% {
      transform: translateX(0) rotate(0deg);
    }
  }













  .ring {
    --uib-size: 40px;
    --uib-speed: 2s;
    --uib-color: black;

    height: var(--uib-size);
    width: var(--uib-size);
    vertical-align: middle;
    transform-origin: center;
    animation: rotate var(--uib-speed) linear infinite;
  }

  .ring circle {
    fill: none;
    stroke: var(--uib-color);
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes stretch {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dashoffset: -124px;
    }
  }







  .three-body {
    --uib-size: 35px;
    --uib-speed: 1.1s;
    --uib-color: black;

    position: relative;
    display: inline-block;
    height: var(--uib-size);
    width: var(--uib-size);
    animation: spin calc(var(--uib-speed) * 2.5) infinite linear;
  }

  .three-body__dot {
    position: absolute;
    height: 100%;
    width: 30%;
  }

  .three-body__dot:after {
    content: '';
    position: absolute;
    height: 0%;
    width: 100%;
    padding-bottom: 100%;
    background-color: var(--uib-color);
    border-radius: 50%;
  }

  .three-body__dot:nth-child(1) {
    bottom: 5%;
    left: 0;
    transform: rotate(60deg);
    transform-origin: 50% 85%;
  }

  .three-body__dot:nth-child(1)::after {
    bottom: 0;
    left: 0;
    animation: wobble1 var(--uib-speed) infinite ease-in-out;
    animation-delay: calc(var(--uib-speed) * -0.3);
  }

  .three-body__dot:nth-child(2) {
    bottom: 5%;
    right: 0;
    transform: rotate(-60deg);
    transform-origin: 50% 85%;
  }

  .three-body__dot:nth-child(2)::after {
    bottom: 0;
    left: 0;
    animation: wobble1 var(--uib-speed) infinite
      calc(var(--uib-speed) * -0.15) ease-in-out;
  }

  .three-body__dot:nth-child(3) {
    bottom: -5%;
    left: 0;
    transform: translateX(116.666%);
  }

  .three-body__dot:nth-child(3)::after {
    top: 0;
    left: 0;
    animation: wobble2 var(--uib-speed) infinite ease-in-out;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes wobble1 {
    0%,
    100% {
      transform: translateY(0%) scale(1);
      opacity: 1;
    }
    50% {
      transform: translateY(-66%) scale(0.65);
      opacity: 0.8;
    }
  }

  @keyframes wobble2 {
    0%,
    100% {
      transform: translateY(0%) scale(1);
      opacity: 1;
    }
    50% {
      transform: translateY(66%) scale(0.65);
      opacity: 0.8;
    }
  }











  .dot-wave {
    --uib-size: 47px;
    --uib-speed: 1s;
    --uib-color: black;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: var(--uib-size);
    height: calc(var(--uib-size) * 0.17);
    padding-top: calc(var(--uib-size) * 0.34);
  }

  .dot-wave__dot {
    flex-shrink: 0;
    width: calc(var(--uib-size) * 0.17);
    height: calc(var(--uib-size) * 0.17);
    border-radius: 50%;
    background-color: var(--uib-color);
    will-change: transform;
  }

  .dot-wave__dot:nth-child(1) {
    animation: jump var(--uib-speed) ease-in-out
      calc(var(--uib-speed) * -0.45) infinite;
  }

  .dot-wave__dot:nth-child(2) {
    animation: jump var(--uib-speed) ease-in-out
      calc(var(--uib-speed) * -0.3) infinite;
  }

  .dot-wave__dot:nth-child(3) {
    animation: jump var(--uib-speed) ease-in-out
      calc(var(--uib-speed) * -0.15) infinite;
  }

  .dot-wave__dot:nth-child(4) {
    animation: jump var(--uib-speed) ease-in-out infinite;
  }

  @keyframes jump {
    0%,
    100% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-200%);
    }
  }


/* 보안키패드 짤림 현상 */
@media(max-height:900px){
    body.security_mode .fix_btn {display: none;}
}

/* 230823 추가 */
.contract_highlight_font {
    font-size       : 1.4rem;
    text-decoration : underline
}

.contract_highlight_font2 {
    font-size       : 2.6rem;
}

.contract_highlight_font3 {
    font-size       : 1.6rem;
    text-decoration : underline
}


.btn_footer_margin {
    margin-bottom  : 45px;
}