@charset "utf-8";

/* keyframes
------------------------------ */
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes scaleIn {
      0% {opacity: 0; transform: scale(0.9);}
      100% {opacity: 1; transform: scale(1);}
}
@keyframes scaleOut {
      0% {opacity: 1; transform: scale(1);}
      100% {opacity: 0; transform: scale(0.9); visibility: hidden;}
}
@keyframes modalSlideUp {
    0% {top: auto;}
    1% {bottom: -100%; top: auto;}
    100% {bottom: 0; top: auto;}
}
@keyframes modalSlideDown {
    0% {bottom: 0;}
    99% {bottom: -100%;}
    100% {bottom: -100%;}
}
@keyframes delaybar {
    0% {width:0;}
    100% {width:100%;}
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

/* modal
--------------------------- */
.modal-open {overflow:hidden;}
.modal-wrap {display:none; position:fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100%;}
.modal-wrap .dim {position:fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0,0,0, 0); }
.modal-wrap.ready {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; z-index: 10;}
.modal-wrap.ready .dim {background-color: rgba(0,0,0, .5);}
.modal-wrap.show {display:flex !important;}
.modal-wrap.n0 {z-index:100 !important;}
.modal-wrap.n1 {z-index:101 !important;}
.modal-wrap.n2 {z-index:102 !important;}
.modal-wrap.n3 {z-index:103 !important;}
.modal-core {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:center; flex-direction:column; overflow-y:auto;}
.modal-head {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:center; padding: 0 var(--layout-padding);}
.modal-head.has-line {border-bottom: 1px solid var(--gray200);}
.modal-head h1 {min-height:7.7rem; font-size: 2.7rem; line-height: 7.7rem; font-weight: 700; text-align: center;}
.modal-head .btn-close {position: absolute; right: 2rem; top: 2rem;}
.modal-body {overflow-y:auto; position:relative; padding-bottom:2rem;}
.modal-body.preview {background-color:#c2c2c2;}
.modal-body.preview::after {display:none;}
.modal-body .tab-list {position:sticky; /* top:-1px; */ top:0; z-index:10;}
.modal-body .section {padding: 3.5rem var(--layout-padding) 0;}
.modal-body .section:first-child {margin-top:0;}
.modal-body .section .tit-h6 {margin-bottom:12px;}
.modal-body .list-dot > li + li {margin-top:6px;}
.modal-foot {position:relative;}
.modal-foot::before {content:''; display:block; z-index:1; position:absolute; left:0; top:-4rem; width: 100%; height: 3rem; background: linear-gradient(0deg, rgba(255,255,255, 1) 20%, rgba(255,255,255,0) 100%);}
.modal-foot .modal-btns {position: relative; display: flex; gap: 6px; flex-wrap: nowrap; padding: 1rem var(--layout-padding) 3.5rem;}
.modal-foot .modal-btns .btn-basic {flex: 1;}
.modal-foot .modal-btns .btn-cancel,
.modal-foot .modal-btns .btn-confirm {display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 7rem; min-width: 12.9rem; padding: 0 .7rem; border-radius: .4rem; border: 1px solid var(--primary); background-color: var(--white); color: var(--gray900); border-radius: var(--radius); font-size: 2.5rem; font-weight: 700; vertical-align: middle;}
.modal-foot .modal-btns .btn-confirm {background-color:var(--primary); color: var(--white);}
/* 모달 사이즈 */
.modal-wrap[data-pos="full"] .modal-core,
.modal-wrap[data-pos="bottom"] .modal-core {max-height:calc(var(--full-height) - var(--header-height));}
/* modal type style */
.modal-wrap[data-pos="full"] .modal-core {position: absolute; z-index: 10; width: 100%; height:100%; overflow-y: auto; border-top-left-radius: 3.6rem; border-top-right-radius: 3.6rem; background-color: #fff;}
.modal-wrap[data-pos="full"] .modal-body {flex:1;}
.modal-wrap[data-pos="bottom"] .modal-core {position: absolute; z-index: 10; width: 100%; height: auto; overflow-y: auto; border-top-left-radius: 3.6rem; border-top-right-radius: 3.6rem; background-color: #fff;}
.modal-wrap[data-pos="center"] {justify-content: center; align-items: center;}
.modal-wrap[data-pos="center"] .modal-core {position: absolute; margin: 0 9.5rem; z-index: 10; min-width: 30rem; max-width: 39rem; height: auto; overflow-y: auto; border-radius: 2.0rem; background-color: #fff;}
/* modal animation */
.modal-wrap .dim {animation: fadeOut .3s ease-in 1 forwards;}
.modal-wrap.ready .dim {animation: fadeIn .3s ease-in 1 forwards;}
.modal-wrap[data-pos="full"] .modal-core {animation: modalSlideDown .3s ease-in 1 forwards; bottom: -100%;}
.modal-wrap[data-pos="full"].show .modal-core {animation: modalSlideUp .3s ease-in-out 1 forwards;} 
.modal-wrap[data-pos="bottom"] .modal-core {animation: modalSlideDown .3s ease-in 1 forwards; bottom: -100%;}
.modal-wrap[data-pos="bottom"].show .modal-core {animation: modalSlideUp .3s ease-in-out 1 forwards;}
.modal-wrap[data-pos="center"] .modal-core {animation: scaleOut .2s ease-in 1 forwards;}
.modal-wrap[data-pos="center"].show .modal-core {animation: scaleIn .1s ease-in 1 forwards;}
/* 시스템팝업(confirm/alert) */
.modal-wrap.type-system .modal-core {padding:0 2rem; box-shadow:0 9px 65px rgba(0, 0, 0, 0.4);}
.modal-wrap.type-system .modal-body {padding:4rem 1rem; font-size:2.3rem; line-height:3.2rem; text-align:center;}
.modal-wrap.type-system .modal-body .delaybar {position:relative; display:block; height:.7rem; margin:1.5rem -2rem -1.5rem; background-color:#dedede; border-radius:.7rem;}
.modal-wrap.type-system .modal-body .delaybar::before {content:''; position:absolute; left:0; top:0; display:block; width:0; height:100%; background-color:var(--primary); border-radius:.7rem; animation-name: delaybar; animation-duration: 3s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards;}
.modal-wrap.type-system .modal-body .delaybar[data-delay="3000"]::before {animation-duration:3s;}
.modal-wrap.type-system .modal-body .delaybar[data-delay="5000"]::before {animation-duration:5s;}
.modal-wrap.type-system .modal-foot::before {display:none;}
.modal-wrap.type-system .modal-foot {margin:0; border-top:1px solid var(--gray200)}
.modal-wrap.type-system .modal-foot .btn-wrap {margin:0;}
.modal-wrap.type-system .modal-foot .btn-wrap button {flex:1; position: relative; align-items: center; height:7rem; font-size:2.3rem; font-weight:700;}
.modal-wrap.type-system .modal-foot .btn-wrap button + button::before {content:''; position:absolute; left:0; top:50%; margin-top:-1.5rem; display:block; height:3rem; border-left:1px solid var(--gray200)}
.modal-wrap.type-system .modal-foot .btn-wrap button + button {color:var(--primary);}
.modal-wrap.type-system .modal-foot .btn-wrap .btn-system-confirm {font-weight:700; color:var(--primary);}
.modal-wrap.type-system .txt-title {margin-bottom:1.5rem; font-weight:700;}
.modal-wrap.type-system .txt-message {white-space:pre-line; font-size:2rem; line-height:1.5;}

/* 팝업
--------------------------- */
.popup-wrap {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-direction: column; width: 100%; min-height: 100vh;}
.popup-head {position:sticky; top:0; z-index:1; height:var(--popup-header-height); background-color:var(--white);}
.popup-head h1 {font-size: 2.7rem; line-height: 7.7rem; font-weight: 700; text-align: center;}
.popup-head .btn-popup-close {position: absolute; right: 2rem; top: 2rem; display: block; width: 4rem; height: 4rem; background-image: url('../img/icon/ico_close.png'); background-repeat: no-repeat; background-position:center center; background-size: contain;}
.popup-body {flex: 1; padding: 0 var(--popup-padding) 8.2rem;}
.popup-body.bg {background-color:#c2c2c2;}
.popup-body .title-wrap {margin-left: var(--popup-padding-negative); margin-right:var(--popup-padding-negative);}
/* 미리보기 */
.popup-wrap.fixed {position:fixed; overflow:hidden;}
.section-preview .viewer-area {overscroll-behavior:contain;} /* 바운스 상위 전달 방지 */
.section-preview .viewer-area .iframe {
    border: none;
    width:100%; 
    height:100%; 
    overflow:auto; 
    -webkit-overflow-scrolling: touch;
}

/* loading
------------------------------ */
.loading-wrap {display: none; overflow: hidden; position: fixed; z-index: 100; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; animation-name: fadeOut; animation-duration: .2s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; background-color: rgba(0, 0, 0, 0.4);}
.loading-wrap.show {display: block; animation-name: fadeIn; animation-duration: .2s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards;}
.loading-wrap.inside {position: absolute; left: 0; top: 0; z-index: 1; display: block; width: 100%; height: 100%; animation-name: fadeIn; animation-duration: .2s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; background-color: rgba(0, 0, 0, 0.4);}
.loading-wrap.close {animation-name: fadeOut; animation-duration: 0.25s; animation-iteration-count: 1; animation-timing-function: ease-in; animation-fill-mode: forwards;}
.loading-core {position: absolute; z-index: 1; width: 8rem; height: 8rem; top: 50%; left: 50%; margin: -4rem 0 0 -4rem; text-align: center;}
.loading-core::before{content:''; display: inline-block; width: 5rem; height: 5rem; border: 3px solid var(--white); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite;}
.loading-message {display: block; color:var(--white);}


/* datepicker (jquery ui)
--------------------------- */
.ui-datepicker {border:none; background-color: #fff; color: #989898;}
.ui-datepicker {width: 100%; padding: 0;}
.ui-datepicker .ui-datepicker-header {position:relative; height: 7.5rem;}
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {position:absolute; top: 2rem; width: 4rem; height: 4rem; text-indent: -999em; background: url("../img/common/btn_datepick.png") no-repeat left top; background-size: 4rem;}
.ui-datepicker .ui-datepicker-prev {left:14rem;}
.ui-datepicker .ui-datepicker-next {right:14rem; background-position: left bottom;}
.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;}
.ui-datepicker .ui-datepicker-title {height: 7.5rem; line-height: 7.5rem; text-align: center; font-size: 3rem; font-weight: 600; color: var(--white); background-color:var(--primary);}
.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0;}
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year {width: 49%;}
.ui-datepicker table {width: calc(100% - 2rem); margin: 1.2rem 1rem 0; border-spacing: 1.5rem; font-size: 1em; border-collapse: separate;}
.ui-datepicker th {padding:0 0 .5rem; text-align: center; border: 0; color:var(--gray900);}
.ui-datepicker td {padding:0; border:0; text-align: center;}
.ui-datepicker td span, 
.ui-datepicker td a {display: inline-block; width: 4.5rem; height: 4.5rem; line-height: 4.5rem; text-align: center; border-radius: 50%; text-align: center; text-decoration: none; color: var(--gray900);}
.ui-datepicker .ui-datepicker-buttonpane {background-image: none; margin: .7em 0 0 0; border-left: 0; border-right: 0; border-bottom: 0;}
.ui-datepicker .ui-datepicker-buttonpane button {float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {float:left;}
.ui-datepicker .ui-datepicker-today a {background-color: #e7e7e7; color: var(--gray900);}
.ui-datepicker .ui-state-active {background-color:var(--primary) !important; color: var(--white) !important;} 
.ui-datepicker .ui-state-disabled span,
.ui-datepicker .ui-state-disabled a {color:#b1b1b1;}