:root {
    --black: #212A37;
    --blue: #0054A4;
}

html, body {margin: 0; padding: 0; font-size: 10px; line-height: 1.5em; color: #111; box-sizing: border-box;}
* {line-height: 1.5em; font-family: 'Pretendard';}
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal;}
.inner {max-width: 148rem; margin: 0 auto; width: 90%;}

/* 폰트사이즈 */
.font-14 {font-size: 1.4rem;}
.font-15 {font-size: 1.5rem;}
.font-16 {font-size: 1.6rem;}
.font-18 {font-size: 1.8rem;}
.font-20 {font-size: 2.0rem;}
.font-21 {font-size: 2.1rem;}
.font-26 {font-size: 2.6rem;}
.font-30 {font-size: 3.0rem;}
.font-32 {font-size: 3.2rem;}
.font-40 {font-size: 4.0rem;}
.font-46 {font-size: 4.6rem;}
.font-100 {font-size: 10rem;}
.font-150 {font-size: 15rem;}

.font-paperlogy {font-family: 'Paperlogy'; font-weight: 800;}
.font-paperlogy.grey {color: #F5F5F7}
.font-paperlogy.stroke {color: transparent; -webkit-text-stroke-width: 1.2px; -webkit-text-stroke-color: var(--white, #FFF);}
.font-paperlogy.grey-stroke {color: transparent; -webkit-text-stroke-width: 1.2px; -webkit-text-stroke-color: #E0E0E0;}

.text-white {color: #fff;}

/* 정렬 */
.flex {display: flex;}
.flex-wrap {flex-wrap: wrap;}
.flex-align {display: flex; align-items: center;}
.align-start {display: flex; align-items: flex-start;}
.flex-center {display: flex; align-items: center; justify-content: center;}
.flex-col {display: flex; flex-direction: column;}
.br-mb {display: none;}

/* 버튼 */
.btn {display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 600; border-radius: 100px; height: unset; line-height: 1.5em; width: fit-content; transition: .17s;}
.btn.black {background: #000; color: #fff;}
.btn.blue {background: var(--blue); color: #fff;}
.btn.default {padding: 1rem 3rem; width: 16rem;}
.btn-primary {background: var(--black); color: #fff; border-radius: 6px; padding: 1.8rem 2.5rem; font-size: 1.6rem; font-weight: 600;}
.btn-secondary {background: #fff; box-shadow: inset 0 0 0 1px #EAEAEB; border-radius: 6px; padding: 1.8rem 2.5rem; font-size: 1.6rem; font-weight: 600;}
.btn-full {width: 100%;}

/* 박스 */
.box-group--col2 {column-gap: 9rem;}
.box-group--col2 .box {width: calc((100% - 9rem) / 2);}
.box-group--col3 {column-gap: 5rem;}
.box-group--col3 .box {width: calc((100% - 10rem) / 3);}

/* 폼 */
.form-wrap form {row-gap: 2rem;}
.form-wrap .form-section {row-gap: 1.5rem;}
.input-item {border: 1px solid #E0E0E0; background: #F5F5F7; width: 100%; border-radius: 10px; position: relative;}
.input-item.focus, .input-item.active {border-color: var(--black);}
.input-item.disabled, .input-item.disabled input {background: #EDEDED; pointer-events: none; color: #999;}
.input-item.textarea {border-radius: 1rem; padding: 1.6rem 2rem;}
.input-item input, .input-item select {padding: 1.6rem 2rem; width: 100%; line-height: 1.5em; box-sizing: content-box; box-shadow: none; border: 0; background: transparent;}
.input-item select {line-height: normal; padding: 1.6rem 2rem;}
.input-item input {font-size: 1.5rem;}
.input-item input:focus-visible {outline: none;}
.input-item input[type=text]:focus, .input-item input[type=password]:focus, .input-item textarea:focus, .input-item select:focus {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0 !important;}
.input-item textarea {border: 0; padding: 1rem 0; width: 100%; min-height: 20rem; font-size: 1.5rem; line-height: 1.4em; background: transparent;} 
.checkbox {position: relative; text-align: left; font-size: 1.6rem; line-height: 1em; cursor: pointer; line-height: 1.6em;}
.checkbox input[type="checkbox"] {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.checkbox input[type="checkbox"] + label {display: flex; align-items: center; column-gap: 1rem; padding-lefT: 0;}
.checkbox label span {display: flex; align-items: flex-start; line-height: 1.6rem; font-size: 1.6rem;}
.checkbox label em {display: inline-block; width: 1.8rem; height: 1.8rem; background: #fff; border: 1px solid #999999; border-radius: 3px;}
.checkbox input:checked ~ label em {border-color: var(--blue); background-color: var(--blue); background-image: url('../img/sub/icon-checkbox.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 12px 10px;}

/* confirm.js 모달 */
.jconfirm .jconfirm-box {padding: 3rem 2rem !important; border-radius: 1rem !important; width: 35rem; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.40);}
.jconfirm .jconfirm-box div.jconfirm-content-pane {margin-bottom: 1rem !important;}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {overflow: unset !important;}
.modal-text .modal-content--text {padding: 1rem 1rem 2rem;  text-align: center;}
.modal-text .modal-content--text p {font-size: 1.5rem; line-height: 1.5em;}
.modal-text .modal-content--text strong {display: block; margin-bottom: 1rem;}
.modal-text .jconfirm-buttons {display: flex; align-items: center; column-gap: 5px; justify-content: center; float: none !important; padding-bottom: 0 !important;}
.modal-text .jconfirm-buttons .butn-modal {border-radius: 6px !important; height: auto; padding: 0.7rem 1.5rem !important; font-weight: 500 !important; font-size: 1.3rem;}
.jconfirm .modal-text .jconfirm-box div.jconfirm-closeIcon {width: 1.6rem !important; height: 1.6rem !important; font-size: 3rem !important; font-weight: 200; right: 1.7rem; top: 1.7rem;}

@media (hover: hover) {
    .btn-primary:hover {background: #485B77;}
    .btn-secondary:hover {background: #EAEAEB;}
    .btn.black:hover {background: #485B77; color: #fff;}
    .btn.blue {background: #6C9AC7; color: #fff;;}
}

@media (max-width: 1600px) {
    html, body {font-size: calc(100vw / 1920 * 13);}

    /* 박스 */
    .box-group--col2 {column-gap: 7rem;}
    .box-group--col2 .box {width: calc((100% - 7rem) / 2);}
    .box-group--col3 {column-gap: 3rem;}
    .box-group--col3 .box {width: calc((100% - 6rem) / 3);} 

}

@media (max-width: 1024px) {
    html, body {font-size: calc(100vw / 1920 * 17);}

    /* 폰트사이즈 */
    .font-40 {font-size: 3.6rem;}
    .font-100 {font-size: 8rem;}
    .font-150 {font-size: 12rem;}

    /* 박스 */
    .box-group--col2 {column-gap: 2rem;}
    .box-group--col2 .box {width: calc((100% - 2rem) / 2);}
    .box-group--col3 {column-gap: 1.5rem;}
    .box-group--col3 .box {width: calc((100% - 3rem) / 3);} 
}

@media (max-width: 768px) {
    html, body {font-size: calc(100vw / 1920 * 20);}

    /* 폰트사이즈 */
    .font-14 {font-size: 1.6rem;}
    .font-15 {font-size: 1.7rem;}
    .font-16 {font-size: 1.8rem;}
    .font-20 {font-size: 2.2rem;}
    .font-21 {font-size: 2.3rem;}
    .font-30 {font-size: 2.4rem;}
    .font-32 {font-size: 2.4rem;}
    .font-40 {font-size: 3.6rem;}
    .font-46 {font-size: 3.6rem;}
    .font-100 {font-size: 6rem;}
    .font-150 {font-size: 8rem;}

    /* 박스 */
    .box-group--col2 {flex-wrap: wrap; row-gap: 2rem;}
    .box-group--col2 .box {width: 100%;}
    .box-group--col3 {flex-wrap: wrap; row-gap: 1rem;}
    .box-group--col3 .box {width: 100%;}
}

@media (max-width: 480px) {
    html, body {font-size: 8.2px;}

    /* 폰트사이즈 */
    .font-20 {font-size: 1.8rem;}
    .font-21 {font-size: 1.8rem;}
    .font-40 {font-size: 3rem;}
    .font-100 {font-size: 4rem;}

    .font-paperlogy {-webkit-text-stroke-width: 0.6px;}

    .br-mb {display: block;}
}

/*팝업*/
#hd_pop {z-index: 99999;}
#hd_pop .hd_pops {position:absolute;background:#fff; border: 0; }
#hd_pop .hd_pops .hd_pops_con {width: auto !important; height: auto !important; max-width: 45rem;}
#hd_pop .hd_pops .hd_pops_con p {font-size: 0;}
#hd_pop .hd_pops .hd_pops_con br {display: none; height: 0;}
#hd_pop .hd_pops_footer {background: #fff;}
#hd_pop .hd_pops_footer .hd_pops_reject {font-size: 13px; color: #111; background: #fff;}
#hd_pop .hd_pops_footer .hd_pops_close {display: flex; align-items: center; column-gap: 3px; height: 100%; background: #fff; color: #111;}
#hd_pop .hd_pops_footer .hd_pops_close i {display: none;}
#hd_pop .hd_pops_footer .hd_pops_close::after {content: "⨉"; display: inline-block; color: #111; font-weight: 500; font-size: 1.8rem; line-height: 1.2; }
#hd_pop .hd_pops_footer .hd_pops_close svg {width: 17px; height: 17px;}

@media (max-width: 1280px) {
	#hd_pop .hd_pops {left: 50% !important; transform: translateX(-50%); top: 10rem !important;}
}

@media (max-width: 768px) {
	/*#hd_pop .hd_pops .hd_pops_con {width: auto !important; height: auto !important; }*/
}

@media (max-width: 480px) {
	#hd_pop .hd_pops .hd_pops_con {width: 80vw !important;}
	#hd_pop .hd_pops .hd_pops_footer .hd_pops_reject, #hd_pop .hd_pops_footer .hd_pops_close {font-size: 1.6rem;}
}