@charset "utf-8";
/*
 * Name     : bootstrap.extended.css
 * Version  : 1.0.6
 * Author   : onepixel studio
 * Date     : 2021-09-26
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. 
    02. 
    03. 
    04. 
---------------------------------------------------
*/

/* ------------------------------
 * Typo
------------------------------ */
.font-weight-medium {font-weight: 500 !important}
.font-weight-semibold {font-weight: 600 !important}
.text-primary {color: #f7a337 !important}
a.text-primary:focus, a.text-primary:hover {color:#fff !important}

/* ------------------------------
 * Container
------------------------------ */
.container {padding-left: 20px; padding-right: 20px}
.container-fluid, .container-lg, .container-md, .container-sm, .container-xl {padding-left: 20px; padding-right: 20px}
.container-wide {padding-left: 20px; padding-right: 20px}

/* ------------------------------
 * Forms
------------------------------ */
.label-heading {font-size: 15px; font-weight: 700; color: #495057; letter-spacing: -0.03em; margin-bottom: 12px}
.label-heading .button-tooltip, .px-check-form .button-tooltip {position: relative; top: -1px}
.form-sm {max-width: 400px; margin-left: auto; margin-right: auto}
.form-input {display: block; width: 100%; height: 48px; font-size: 14px; color: #495057; letter-spacing: -0.03em; line-height: 1.5; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 0; background-color: #f1f3f5; transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out; outline: 0}
.form-input.input-lg {font-size: 0.9375rem; height: 55px; padding: 0.625rem 1.125rem}
.form-input.input-xl {font-size: 1rem; height: 60px; padding: 0.75rem 1.25rem}
select.form-input.input-lg {padding-right: 2.125rem}
select.form-input.input-xl {padding-right: 2.25rem}
.form-input:focus, .form-input.focus {border-color: #f7a337; box-shadow: 0 0 1px 1px #f7a337}
textarea.form-input {height: auto !important; padding: 1rem; resize: none}
textarea.form-input.input-lg {padding: 1.125rem}
textarea.form-input.input-xl {padding: 1.25rem}
select.form-input {padding-right: 1.875rem; background-image: url(../images/select_arrow_down.svg); background-size: 1.25rem 1.25rem; background-position: right 15px center; background-repeat: no-repeat; -webkit-appearance: none; appearance: none}
select.form-input::-ms-expand {display: none}
.input-group > .form-input, .input-group > .form-input-plaintext, .input-group > .custom-select, .input-group > .custom-file {position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-bottom: 0}
/* .input-group > .form-input:not(:last-child), .input-group > .custom-select:not(:last-child) {border-top-right-radius: 0; border-bottom-right-radius: 0} */
.px-check-form {position: relative}
.px-check-form input[type='checkbox'], .px-check-form input[type='radio'] {position: absolute; top: -1px; left: -1px; opacity: 0; visibility: hidden}
.px-check-form input[type='checkbox'] + label, .px-check-form input[type='radio'] + label {position: relative; display: inline-block; font-size: 0.9375rem; font-weight: 500; color: #666; letter-spacing: -0.02em; margin-bottom: 0; vertical-align: 0; cursor: pointer}
.px-check-form input[type='checkbox'] + label:before, .px-check-form input[type='radio'] + label:before {content: ''; display: inline-block; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; border: 2px solid #dee2e6; border-radius: 6px; background-color: transparent; vertical-align: middle}
.px-check-form input[type='checkbox'] + label:after, .px-check-form input[type='radio'] + label:after {content: '\e928'; position: absolute; top: 1px; left: 0.3125rem; font-family: 'xeicon'; color: transparent}
.px-check-form input[type='checkbox']:checked + label:before, .px-check-form input[type='radio']:checked + label:before {border-color: #000; background-color: #000}
.px-check-form input[type='checkbox']:checked + label:after, .px-check-form input[type='radio']:checked + label:after {color: #fff}
.px-check-form label a {display: inline-block; color: #000; border-bottom: 1px solid #000; vertical-align: middle}
.px-custom-file {position: relative; display: block; width: 100%}
.px-custom-file input[type='file'] {position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; opacity: 0; visibility: hidden}
.px-custom-file input[type='text'] {width: calc(100% - 7.125rem) !important}
.px-custom-file input[type='file'] ~ label {position: absolute; top: 0; right: 0; display: inline-block; font-size: 1rem; font-weight: 500; color: #fff; letter-spacing: -0.04em; line-height: 53px; text-align: center; width: 6.625rem; height: 55px; margin-bottom: 0; border-radius: 8px; background-color: #353535; cursor: pointer}
.custom-file-label::after {content: '파일 선택'}

/* ------------------------------
 * Tables
------------------------------ */
.table {border-top: 1px solid #333}
.table td, .table th {padding: 0.75rem 1rem; letter-spacing: -0.02em; line-height: 1.75; border-top: 0; border-bottom: 1px solid #eaeaea}
.table th {font-weight: 500; color: #333}
.table td {color: #666}
.table-solid {border-top: 2px solid #333 !important}
.table-solid thead th {border-bottom: 1px solid #eaeaea}
.table-solid td, .table-solid th {padding: 1.125rem 0.75rem; border-top: 0; border-bottom: 1px solid #eaeaea}
.table-large td, .table-large th {font-size: 1.125rem; padding: 1.125rem 1.25rem}
.table.align-middle th, .table.align-middle td {vertical-align: middle !important}
.table-order {border-top: 2px solid #333}
.table-solid {border-top: 3px solid #333 !important}
.table-solid thead th {border-bottom: 0; background-color: #f9fafb}
.table-solid td, .table-solid th {padding: 1.25rem 0.75rem; letter-spacing: -0.03em; border-top: 0; border-bottom: 1px solid #eaeaea}
.table-lg td, .table-lg th {font-size: 1.125rem}

/* ------------------------------
 * Selectric
------------------------------ */
.selectric {text-align: left !important; border: 1px solid #dee2e6 !important; border-radius: 0; background-color: #fff !important}
.selectric .label {font-size: 1rem; font-weight: 500; color: #333; line-height: 3.5rem; height: 3.5rem; margin: 0 2.375rem 0 1rem}
.selectric .button {height: 3.5rem; color: #333 !important; line-height: 3.5rem; background-color: transparent}
.selectric .button:after {content: '\e942'; font-family: 'xeicon'; font-size: 1.25rem; width: auto; height: auto; border: 0; transition: transform .3s}
.selectric-open .selectric {border-color: #333 !important}
.selectric-open .selectric .button:after {transform: rotate(180deg)}
.selectric-items {margin-top: -1px; border-color: #333; border-radius: 0; background-color: #fff; box-shadow: none}
.selectric-above .selectric-items {margin-top: auto; margin-bottom: -1px}
.selectric-items ul {text-align: left !important; padding-top: 0.375rem; padding-bottom: 0.375rem}
.selectric-items ul, .selectric-items li {font-size: 0.9375rem}
.selectric-items li {padding: 0.625rem 1rem; color: #888; background-color: #fff !important}
.selectric-items li.highlighted, .selectric-items li.selected, .selectric-items li:hover {color: #000 !important}


/* ------------------------------
 * Buttons
------------------------------ */
.button {display: inline-block; font-size: 14px; color: #495057; letter-spacing: -0.04em; line-height: 1.44; padding: 14px 20px; border-radius: 0; border: 1px solid transparent; background-color: transparent; outline: 0 !important; vertical-align: top;}
.button.button-default {color: #495057 !important; border: 1px solid #ced4da; background-color: #fff}
.button.button-default:hover {background-color: #f8f9fa; color:#fff}
.button.button-primary {color: #fff !important; background-color: #f7a337; transition:0.3s}
.button.button-primary:hover {background-color: #e79225}
.button.button-primary-outline {color: #f7a337 !important; border-color: #f7a337; background-color: transparent}
.button.button-primary-outline:hover {color: #fff !important; background-color: #f7a337}
.button.button-primary-outline:hover .arrow-primary {background-image: url(../images/button_arrow_light.svg)}
.button.button-secondary {color: #fff !important; background-color: #a48a67}
.button.button-secondary:hover {background-color: #977d5b}
.button.button-secondary-outline {color: #a48a67 !important; border-color: #a48a67; background-color: transparent}
.button.button-secondary-outline:hover {color: #fff !important; background-color: #a48a67}
.button.button-secondary-outline:hover .arrow-secondary {background-image: url(../images/button_arrow_light.svg)}
.button.button-light {color: #f7a337 !important; background-color: #faf7f2}
.button.button-grey {color: #fff !important; background-color: #a4afbb}
.button.button-grey:hover {background-color: #99a5b3}

.button-tooltip {font-size: 1.125rem; color: #ced4da; margin-left: 4px; padding: 0; border: 0; background-color: transparent; outline: 0 !important; vertical-align: middle}
.button-tooltip svg {vertical-align: 2px}

.button.button-sm {font-size: 14px; padding: 12px 18px}
.button.button-lg {font-size: 16px; padding: 15px 22px}
.button.button-xl {font-size: 18px; padding: 17px 26px}
.button.button-block {display: block; width: 100%; text-align: center}

.button .arrow {display: inline-block; width: 18px; height: 11px; margin-left: 28px; background-size: 100%; background-position: center; background-repeat: no-repeat; vertical-align: 2px}
.button .arrow-light {background-image: url(../images/button_arrow_light.svg)}
.button .arrow-primary {background-image: url(../images/button_arrow_primary.svg)}
.button .arrow-secondary {background-image: url(../images/button_arrow_secondary.svg)}

.radius-xl {border-radius: 30px !important}

.swiper-arrow-primary {width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background-color: #fff; box-shadow: 2px 3px 18.8px 1.2px rgba(0, 0,0,0.06); outline: 0}
.swiper-arrow-primary::after {font-family: 'xeicon'; font-size: 24px; color: #f7a337}
.swiper-arrow-primary.swiper-button-prev::after {content: '\e93d'}
.swiper-arrow-primary.swiper-button-next::after {content: '\e940'}


/* ------------------------------
 * Helper
------------------------------ */
.bg-cover {background-size: cover; background-position: center; background-repeat: no-repeat}
.bg-parallax {background-size: cover; background-position: center; background-repeat: no-repeat}

/* ------------------------------
 * Alerts
------------------------------ */
.alert {padding: 24px; font-size: 15px; letter-spacing: -0.03em; line-height: 1.5; border-radius: 16px}
.alert-info {color: #f7a337; border-color: #ffe8cc; background-color: #fff4e6}

/* ------------------------------
 * Modals
------------------------------ */
.modal-backdrop {background-color: #aaa}
.modal-backdrop.show {opacity: .6}
.modal-content {border: 0; border-radius: 0}
.modal-header {padding: 3rem 2.75rem 1.75rem; border-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0}
.modal-title {font-size: 1.5rem; font-weight: 900; color: #1b1b1b; letter-spacing: -0.04em}
.modal-header .close {width: 3.5rem; height: 3.5rem; font-size: 1.5rem; color: #fff; margin: -0.625rem 0 auto; padding: 0; border-radius: 50%; background-color: #f7a337; opacity: 1 !important; outline: 0}
.modal-body {padding: 1.75rem 3rem 3rem}
.modal-body .term-wrapper {padding:25px 30px; background-color:#f9f9f9}
.modal-body p {line-height: 1.6}
.modal-body .term-wrapper p {color: #666; letter-spacing: -0.5px; line-height: 1.8}
.modal-body .term-wrapper p + p {margin-top: 1rem}
.modal .modal-footer .button-footer-full {display: block; width: 100%; font-size: 1.0625rem; color: #333; margin: 0; padding: 1.375rem 1rem; border: 0; border-bottom-left-radius: calc(.3rem - 1px); border-bottom-right-radius: calc(.3rem - 1px); background-color: #fff; outline: 0 !important}
.modal .modal-footer .button-footer-full:hover {background-color: #f8f8f8}
.swal2-container {overflow-x: visible !important; overflow-y: auto !important}
.swal2-popup {padding: 0 !important; border-radius: 1rem !important; box-shadow: 0 2.5rem 5rem -1rem rgba(0,0,0,.16)}
.swal2-header {padding: 2.25rem 1.25rem 1rem}
.swal2-close {outline: 0 !important}
.swal2-close:hover {color: #5b5bcc !important}
.swal2-title {font-size: 1.3125rem !important; font-weight: 700; color: #2b2b2b !important; margin: 0 !important}
.swal2-content {font-size: 1rem !important; letter-spacing: -0.7px; line-height: 1.6; padding: 0 1.25rem !important}
.swal2-content .modal-textarea {display: block; width: 100%; height: auto; margin: 2.25rem 0; padding: 1.75rem; font-size: 14px; color: #868e96; line-height: 1.85; border: 1px solid #ced4da; border-radius: 3px; outline: 0}
.swal2-actions {margin: 2.125rem auto 0 !important; padding: 1.375rem 15px 1.5rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; background-color: #f8f9fa}
.swal2-styled.swal2-confirm {font-size: 0.9375rem !important; font-weight: normal; color: #fff; padding: 0.875rem 2.5rem; border-radius: 0.5rem !important; background-color: #212529 !important; box-shadow: 0 0.25rem 0.625rem 0 rgba(33,33,33,.4) !important}
.swal2-close {font-family: sans-serif !important; font-weight: 100}

/* ------------------------------
 * Tooltips
------------------------------ */
.tooltip {font-family: inherit}
.tooltip.show {opacity: 1}
.tooltip-inner {font-size: 13px; color: #333; text-align: left; padding: 16px; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; background-color: #fff; box-shadow: 0 5px 10px 0 rgba(0,0,0,.1)}
.tooltip .arrow::after {content: ''; position: absolute; border-color: transparent; border-style: solid}
.bs-tooltip-auto[x-placement^=top] .arrow, .bs-tooltip-top .arrow {bottom: 1px}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {border-top-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {border-width: 8px 8px 0 8px}
.bs-tooltip-auto[x-placement^=top] .arrow::after, .bs-tooltip-auto[x-placement^=top] .arrow::after, .bs-tooltip-top .arrow::after {border-width: 8px 8px 0 8px; border-top-color: #fff}


.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {border-bottom-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {border-width: 0 8px 8px 8px}
.bs-tooltip-auto[x-placement^=bottom] .arrow::after, .bs-tooltip-auto[x-placement^=bottom] .arrow::after, .bs-tooltip-bottom .arrow::after {border-width: 0 8px 8px 8px; border-bottom-color: #fff}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {border-width: 8px 8px 8px 0}
.bs-tooltip-auto[x-placement^=right] .arrow::after, .bs-tooltip-auto[x-placement^=right] .arrow::after, .bs-tooltip-right .arrow::after {border-width: 8px 8px 8px 0; border-right-color: #fff}

.bs-tooltip-right .arrow::before {border-right-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {border-left-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {border-width: 8px 0 8px 8px}
.bs-tooltip-auto[x-placement^=left] .arrow::after, .bs-tooltip-auto[x-placement^=left] .arrow::after, .bs-tooltip-left .arrow::after {border-width: 8px 0 8px 8px; border-left-color: #fff}


/* ------------------------------
 * Animations
------------------------------ */
[data-aos=fade-up-medium] {transform:translate3d(0, 60px ,0)}
[data-aos=fade-down-medium] {transform:translate3d(0, -60px ,0)}
[data-aos=fade-left-medium] {transform:translate3d(60px, 0 ,0)}
[data-aos=fade-right-medium] {transform:translate3d(-60px, 0 ,0)}
[data-aos=fade-up-short] {transform:translate3d(0, 30px ,0)}
[data-aos=fade-down-short] {transform:translate3d(0, -30px ,0)}
[data-aos=fade-left-short] {transform:translate3d(30px, 0 ,0)}
[data-aos=fade-right-short] {transform:translate3d(-30px, 0 ,0)}

@keyframes fadeInUpShort {
    from {opacity: 0; transform: translate3d(0, 30px, 0)}
    to {opacity: 1; transform: translate3d(0, 0, 0)}
}

.fadeInUpShort {animation-name: fadeInUpShort}

@keyframes fadeInDownShort {
    from {opacity: 0; transform: translate3d(0, -30px, 0)}
    to {opacity: 1; transform: translate3d(0, 0, 0)}
}

.fadeInDownShort {animation-name: fadeInDownShort}

@keyframes fadeOutUpShort {
    from {opacity: 1; transform: translate3d(0, 0, 0)}
    to {opacity: 0; transform: translate3d(0, -30px, 0)}
}

.fadeOutUpShort {animation-name: fadeOutUpShort}

@keyframes fadeOutDownShort {
    from {opacity: 1; transform: translate3d(0, 0, 0)}
    to {opacity: 0; transform: translate3d(0, 30px, 0)}
}

.fadeOutDownShort {animation-name: fadeOutDownShort}


/* ------------------------------
 * Media queries
------------------------------ */
@media (min-width: 768px) {
    .bg-parallax {background-attachment: fixed}
}

@media (min-width: 1300px) {
    .container, .container-xl {max-width: 1234px}
}

@media (min-width: 1400px) {
    .container-wide {padding-left: 80px; padding-right: 80px}
}

@media (max-width: 767px) {
    .swiper-arrow-primary {width: 48px; height: 48px}
    .swiper-arrow-primary::after {font-size: 20px}

    .button {font-size: 13px; padding: 14px 18px}
    .button.button-lg {font-size: 14px; padding: 14px 20px}
    .button.button-xl {font-size: 16px; padding: 16px 24px}

    .button .arrow {width: 16px; height: 10px; vertical-align: 1px}
}

@media (max-width: 575px) {
    .modal-body {padding: 0 1rem 3rem}
    .modal-body .term-wrapper {max-height:330px; overflow-y: scroll}
}