@charset "utf-8";
/*
 * Name     : bootstrap.extended.css
 * Version  : 1.0.6
 * Author   : onepixel studio
 * Date     : 2020-06-06
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. Layout
    02. Fonts
    03. Buttons
    04. Forms
    05. Animations
    06. Backgrounds
---------------------------------------------------
*/

/* ------------------------------
 * Layout
------------------------------ */
.container {max-width: 1330px}
.container-wide {max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px}
  
.container::-webkit-scrollbar {
	width: 5px;
}
.container::-webkit-scrollbar-thumb {
	background-color: #003567;
}
.container::-webkit-scrollbar-track {
	background-color: #ffffff;
}
/* ------------------------------
 * Fonts
------------------------------ */
.font-weight-medium {font-weight: 500 !important}
.font-weight-bold {font-weight: 700 !important}
.font-weight-black {font-weight: 900 !important}
.text-black {color: #000 !important}

/* ------------------------------
 * Buttons
------------------------------ */
.button {position: relative; display: inline-block; font-size: 0.9375rem; color: #343a40; text-align: center; line-height: 1.4; padding: 0.75rem 1rem; border: 1px solid transparent; border-radius: 0.375rem; background-color: transparent; vertical-align: middle; outline: 0 !important; transition: all .2s}
.button-default {color: #343a40 !important; border-color: #ced4ea; background-color: #fff}
.button-default:hover {border-color: #bbb; background-color: #f8f9fa}
.button-primary {color: #fff !important; border-color: #3f83ff; background-color: #3f83ff}
.button-primary:hover {border-color: #3c72d4; background-color: #3c72d4}
.button-primary-smooth {color: #367bf5 !important; border-color: #e5efff; background-color: #e5efff}
.button-primary-smooth:hover {border-color: #d3e3fd; background-color: #d3e3fd}
.button-secondary {color: #333 !important; border-color: #333}
.button-secondary:hover {border-color: #000}
.button-dark {color: #fff !important; border-color: #212529; background-color: #212529}
.button-dark:hover {border-color: #000; background-color: #000}
.button-dark-outline {color: #212529; border-color: #212529}
.button-dark-outline:hover {color: #fff; background-color: #212529}
.button-grey {color: #333 !important; background-color: #e9e9e9}
.button-grey:hover {background-color: #d9d9d9}
.button-naver {color: #fff !important; background-color: #2db400}
.button-naver:hover {background-color: #28a100}
.button-tooltip {font-size: 1.1875rem; color: #228be6; line-height: 1; padding: 2px 4px; border: 0; background-color: transparent; outline: 0 !important}
.button-small {font-size: 0.875rem; padding: 0.625rem 0.875rem}
.button-large {font-size: 1rem; padding: 0.9375rem 1.25rem}
.button-xlarge {font-size: 1.0625rem; padding: 1.125rem 1.75rem; border-width: 2px; border-radius: 0.5rem}
.button-oversize {font-size: 1.0625rem; min-width: 12.5rem; padding: 1.125rem 1.75rem}
.button-block {display: block; width: 100%}
.button.size-1 {min-width: 4.375rem}
.button.size-2 {min-width: 5.625rem}
.button.size-3 {min-width: 6.875rem}
.button.size-4 {min-width: 8.125rem}
.button.size-5 {min-width: 9.375rem}
.button.size-6 {min-width: 10rem}
.button.size-7 {min-width: 11.875rem}
.button.size-8 {min-width: 12.5rem}
.button.size-9 {min-width: 13.125rem}
.button.size-10 {min-width: 13.75rem}
.button .icon-left {position: absolute; top: 50%; left: 1rem; transform: translateY(-50%)}
.button .icon-right {position: absolute; top: 50%; right: 1rem; transform: translateY(-50%)}
.button-small .icon-left {left: 0.875rem}
.button-large .icon-left {left: 1.25rem}
.button-xlarge .icon-left {left: 1.75rem}
.button-oversize .icon-left {left: 1.75rem}
.button-small .icon-right {right: 0.875rem}
.button-large .icon-right {right: 1.25rem}
.button-xlarge .icon-right {right: 1.75rem}
.button-oversize .icon-right {right: 1.75rem}

/* ------------------------------
 * Forms
------------------------------ */
.form-sm {max-width: 30rem; margin-left: auto; margin-right: auto}
.form-md {max-width: 40rem; margin-left: auto; margin-right: auto}
.px-check-form {position: relative; display: inline-block; line-height: 1.4; vertical-align: middle}
.px-check-form > input {position: absolute; top: -1px; left: -1px; width: 0; height: 0; visibility: hidden}
.px-check-form > input + label {position: relative; display: inline; margin-bottom: 0; padding-left: 1.875rem; font-size: 1rem; line-height: 1.4; vertical-align: middle; cursor: pointer}
.px-check-form > input + label:before {content: ''; position: absolute; top: 1px; left: 0; display: inline-block; width: 1.375rem; height: 1.375rem; border: 1px solid #ccc; border-radius: 0.25rem; background-color: #fff; vertical-align: middle}
.px-check-form > input + label:hover:before {border-color: #228be6}
.px-check-form > input:checked + label:before {border-color: #228be6}
.px-check-form > input:checked + label:after {content: ''; position: absolute; top: 50%; left: 0.4375rem; display: block; width: 0.5625rem; height: 0.375rem; margin-top: -0.25rem; border: solid #228be6; border-width: 0 0 2px 2px; transform: rotate(-45deg)}
.px-check-form > input[type=radio] + label:before {border-radius: 50%}
.px-check-form > input[type=radio]:checked + label:after {top: 50%; left: 0.5rem; width: 0.375rem; height: 0.375rem; margin-top: -0.1875rem; border: 0; border-radius: 50%; background-color: #228be6}
.form-input {display: block; width: 100%; font-size: 0.9375rem; color: #666; height: 2.9375rem; padding: 0.25rem 0.75rem; border: 1px solid #dedede; border-radius: 0.375rem; background-color: #fff; transition: color .25s, border-color .25s; outline: 0 !important; -webkit-appearance: none}
.form-input.input-large {font-size: 1rem; height: 3.125rem; padding: 0.625rem 1.125rem}
.form-input.input-xlarge {font-size: 1.0625rem; height: 3.5rem; padding: 0.75rem 1.25rem}
.form-input.input-xxlarge {font-size: 1.0625rem; height: 3.75rem; padding: 0.875rem 1.5rem}
select.form-input.input-large {padding-right: 2.125rem}
select.form-input.input-xlarge {padding-right: 2.25rem}
.form-input:focus, .form-input.focus {color: #212529; border-color: #212529}
textarea.form-input {height: auto !important}
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}
.custom-file-label::after {content: '파일 선택'}

/* ------------------------------
 * Animations
------------------------------ */
[data-aos=px-fade] {opacity: 0; transform: translate3d(0, 50px, 1px) scaleY(1.3); transform-origin: 0 0; transition: opacity 1s ease, transform 1s ease; transition-duration: 1s !important}
[data-aos=px-fade].aos-animate {opacity: 1; transform: none}
[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}

/* ------------------------------
 * Tables
------------------------------ */
.table {border-top: 1px solid #333}
.table td, .table th {padding: 0.75rem 1rem; 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}

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

/* ------------------------------
 * Selectric
------------------------------ */
.selectric {text-align: left !important; border: 0; border-bottom: 2px solid #333 !important; background-color: transparent !important}
.selectric .label {font-size: 0.9375rem; font-weight: 500; color: #333; line-height: 46px; height: 46px}
.selectric .button {height: 46px; color: #333 !important; line-height: 46px; 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 .button:after {transform: rotate(180deg)}
.selectric-items {margin-top: -2px; border-color: #333; background-color: #fff; box-shadow: none}
.selectric-above .selectric-items {margin-top: auto; margin-bottom: -2px}
.selectric-items ul {text-align: left !important}
.selectric-items ul, .selectric-items li {font-size: 0.875rem}
.selectric-items li {padding: 0.5rem 0.75rem; color: #888; background-color: #fff !important}
.selectric-items li.highlighted, .selectric-items li.selected, .selectric-items li:hover {color: #000 !important}

/* ------------------------------
 * Tooltips
------------------------------ */
.tooltip {font-family: inherit; font-weight: 500}
.tooltip.in {opacity: .9}
.tooltip-inner {font-size: 13px; color: #333; padding: 1rem; border-radius: 0.5rem; background-color: #f1f3f5}
.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {border-top-color: #f1f3f5}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {border-bottom-color: #f1f3f5}
.bs-tooltip-auto[x-placement^=right] .arrow::before,
.bs-tooltip-right .arrow::before {border-right-color: #f1f3f5}
.bs-tooltip-auto[x-placement^=left] .arrow::before,
.bs-tooltip-left .arrow::before {border-left-color: #f1f3f5}

/* ------------------------------
 * Modals
------------------------------ */
.modal-content {border: 0}
.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}


/* ------------------------------
 * Tabs
------------------------------ */


/* ------------------------------
 * Media queries
------------------------------ */
@media (min-width: 576px) {
    .form-inline .form-input {display: inline-block; width: auto; vertical-align: middle}
}

@media (max-width: 575px) {
}