@charset "utf-8";

/* modal */
.ws-modal-open,
.ws-modal-open body {_overflow:hidden; /*사이트에 position:sticky 사용으로 인해서 overflow:hidden 사용 불가 */ }

.ws-modal-wrap {display:flex; flex-direction:column; align-items:center; justify-content:center; position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; overflow:hidden; background:rgba(0,0,0,.4); transition:.2s;}

.ws-modal-outer {position:relative; flex:0 0 auto; width:100%;overflow:auto; -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */}
.ws-modal-outer::webkit-scrollbar {display:none;}

.ws-modal-inner {position:relative; width:100%; max-width:100%; margin:0 auto;  background:#fff;}

.modal-sm .ws-modal-inner {max-width:400px; padding:30px;}

.ws-modal-header {position:relative; margin-bottom:30px;}
.ws-modal-header h2 {color:#2c2c2c; font-size:20px; line-height:1.3em;}
.ws-modal-header h2 .num {margin-left:4px; color:#a8a8a8; font-weight:600;}

.ws-modal-close {position:absolute; top:clamp(10px, calc( 60 / var(--inner) * 100vw ), 60px); right:clamp(10px, calc( 60 / var(--inner) * 100vw ), 60px); border:0; width:clamp(18px, calc( 23 / var(--inner) * 100vw ), 23px); height:clamp(18px, calc( 23 / var(--inner) * 100vw ), 23px); background:none;z-index: 9;}
.ws-modal-close svg {display:block; width:100%; height:auto;}

.ws-modal-section {margin-bottom:30px;}
.ws-modal-section:last-child {margin-bottom:0;}

.ws-modal-section-title {position:relative; margin-bottom:12px;}
.ws-modal-section-title h3 {color:#2c2c2c; font-size:15px; line-height:1.3em;}
.ws-modal-section-title .required {color:#f84949;}

.ws-modal-textarea.input {display:block; width:100%; height:120px;}
.ws-modal-textarea.input.h200 {height:200px;}

.ws-modal-btns {display:flex; justify-content:center; gap:12px; margin-top:50px;}
.ws-modal-btns .block {width:100%;}

.ws-modal-prev-next button {display:flex; align-items:center; justify-content:center; position:absolute; top:50%; z-index:10; width:60px; height:60px; background:none; border:0; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.ws-modal-prev-next button span {display:none;}
.ws-modal-prev {left:-80px;}
.ws-modal-next {right:-80px;}

.ws-modal-input-group {display:grid; gap:8px;}
.ws-modal-input-group .btn-pack {display:block; width:100%; font-weight:700;}
.ws-modal-input-group .input {display:block; width:100%;}

/* 삭제 */
.ws-password .txt {margin-bottom:1.5rem; text-align:center; font-size:15px; font-weight:500; line-height:1.5em;}
.ws-password .input-wrap {display:flex;}
.ws-password .input-wrap .input {flex:1 1 auto; min-width:0; width:1%; border-top-right-radius:0; border-bottom-right-radius:0; border-right:0;}
.ws-password .input-wrap .btn-pack {border-top-left-radius:0; border-bottom-left-radius:0;}

/* list상세 */
.formflx {display: flex;flex-wrap: wrap;}
.visualbx {flex: 1 0 1340px; max-width: 1340px;position: relative;}
.textinfobx {flex: 1 0 auto; width: 1%;display: flex;align-items: center;}
.textinfobx .inner {padding: 0  clamp(16px, calc( 60 / var(--inner) * 100vw ), 60px);overflow-y: auto;max-height: 70vh;width: 100%;}
.textinfobx .gnbtit {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; color:var(--color-1);}
.textinfobx .maintit {padding-top: 10px; font-size: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold;}
.textinfobx .decbx {padding-top: clamp(22px, calc( 46 / var(--inner) * 100vw ), 46px);}
.textinfobx .dectt {display: flex;align-items: center;}
.textinfobx .svgbx {display: flex;align-items: center; justify-content: center; margin-right: 10px; width: 20px; height: 20px; background: var(--color-1);border-radius: 50%;}
.textinfobx .svgbx svg {width: 14px; color: #fff;}
.textinfobx .txt {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600;}
.textinfobx .desc {padding-top: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);color: #454545;line-height: 1.7;}
.textinfobx .linkbx {padding-top: clamp(40px, calc( 200 / var(--inner) * 100vw ), 200px);}
.textinfobx .linkbx .btn-pack {width: 100%; height: clamp(44px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 10px;line-height: clamp(42px, calc( 58 / var(--inner) * 100vw ), 58px);font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);font-weight: 600;}
.visualbx .image { position:relative; padding-bottom:73.13%; overflow:hidden;}
.visualbx .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}
.visualbx .text-box {padding-left:var(--container-space); padding-right:var(--container-space); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:1500px; width:100%; line-height:1.3;}
.visualbx .text-box p {transition:1.2s; transform:translate(50px,0); opacity:0; }
.visualbx .controls {display:flex; align-items:center;  position:absolute; bottom:clamp(16px, calc( 100 / var(--inner) * 100vw ), 100px); right:clamp(16px, calc( 60 / var(--inner) * 100vw ), 60px);color:#fff; z-index:40;}
.visualbx .pager {font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.visualbx .pager .current {display:inline-block; width:.6em;}
.visualbx .progress {position:relative; margin:0 10px; width:clamp(90px, calc( 150 / var(--inner) * 100vw ), 150px); height:2px; background:#fff;}
.visualbx .progress-bar {position:absolute; top:0; left:0; height:100%; background:var(--color-1);}
.visualbx .slide-btn {width:clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); height:clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); margin-right:6px; background-color:#000; background-position:50% 50%; background-repeat:no-repeat; border-radius:100%; border:0; overflow:hidden;}
.visualbx .slide-prev {background-image:url("../images/main/ctr_prev.svg");}
.visualbx .slide-next {background-image:url("../images/main/ctr_next.svg");}
.visualbx .slide-stop {background-image:url("../images/main/ctr_stop.svg");}
.visualbx .slide-play {display:none; background-image:url("../images/main/ctr_play.svg");}
.progress-bar.animated {animation:progressBar 1 linear;}
.progress-bar.paused {animation-play-state:paused !important;}
.progress-bar.play {animation-play-state:running !important;}

@keyframes progressBar {
	0%{width:0;}
	100%{width:100%;}
}
@keyframes scrollDown{
	0%{transform:translateY(0);}
	100%{transform:translateY(15px);}
}



/* 반응형 */
@media (min-width: 1024px) {
	.ws-modal-btns .btn-pack.large {height:56px; line-height:54px; font-size:17px; font-weight:700;}
	
}
@media (max-width: 1700px) {
    .visualbx {flex: 1 0 65%; max-width: 65%;}
}


@media (max-width: 1024px) {
    .modal-lg .ws-modal-outer {height:100%; }
	.modal-lg .ws-modal-inner {display:flex; flex-direction:column; border-radius:0; height:100%;}
	.modal-lg .ws-modal-content {position:relative; flex:1 1 auto; min-height:0; height:1%; overflow:auto;}
    .visualbx {flex: 1 0 100%; max-width: 100%;}
    .ws-modal-inner {display:flex; flex-direction:column; height:100%;}
    .textinfobx .inner {padding-top: 30px; padding-bottom: 50px; overflow-y: hidden;max-height: 100%;}
}

@media (max-width: 900px) {

}

@media (max-width: 640px) {	
	.ws-modal-open,
	.ws-modal-open body {overflow:hidden;}
    .visualbx .controls {right: 10px;bottom: 10px;}


}