@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%; max-height:100%; overflow:auto; -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */}
.ws-modal-outer::webkit-scrollbar {display:none;}

.ws-modal-inner {display: flex; align-items: center; justify-content: center; position:relative; width:100%; height: 100vh; margin:0 auto; padding:40px 0; background:#fff; }
.ws-modal-inner .contain {max-width: 1620px;}
.modal-sm .ws-modal-inner {max-width:400px; padding: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(12px, calc( 30 / var(--inner) * 100vw ), 30px); right:clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); border:0; width:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); height:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); background:none; z-index: 10;}
.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;}

/* 제품 */
.modalwrap {padding: 0 clamp(20px, calc( 130 / var(--inner) * 100vw ), 130px); position: relative;}
.ws-modal-inner .btn-arrow {width:clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px); height: clamp(23px, calc( 57 / var(--inner) * 100vw ), 57px);}
.ws-modal-inner .btn-arrow:after {display: none;}
.ws-modal-inner .swiper-button-prev {left:-10px;background: url(../images/sub/inner-prev.png) no-repeat; background-size: contain;}
.ws-modal-inner .swiper-button-next {right:-10px;background: url(../images/sub/inner-next.png) no-repeat; background-size: contain;}
.innerflx {display: flex; flex-wrap: wrap;}
.innerflx .imgbx {flex: 1 0 50%; max-width: 50%; padding-right: clamp(10px, calc( 210 / var(--inner) * 100vw ), 210px);}
.innerflx .image {position:relative; padding-bottom:200%; overflow:hidden;}
.innerflx .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}

.innerflx .infobx {flex: 1 0 auto; width: 1%; padding-left: clamp(10px, calc( 150 / var(--inner) * 100vw ), 150px); padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.innerflx .titlebx {display: flex; flex-wrap: wrap; padding-bottom: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); line-height: 1.2;}
.innerflx .titlebx .eng {padding-right: clamp(10px, calc( 22 / var(--inner) * 100vw ), 22px) ; font-size: clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: bold; color: #333333; font-family:var(--font2);}
.innerflx .titlebx .kor {margin-top: clamp(2px, calc( 3 / var(--inner) * 100vw ), 3px); font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 400; color: #555555;} 
.innerflx .titlebx span {display: flex; align-items: center;}
.innerflx .infolist {padding: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px) 0; border-bottom: 1px solid #ccc;}
.innerflx .infolist:first-child {border-top: 1px solid #ccc;}
.innerflx .infolist .tt,
.innerflx .infolist .dec {display: block; line-height: 1.3; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-family: var(--font2); transform: rotate(-0.1deg);}
.innerflx .infolist .tt {margin-bottom: 5px; font-weight: bold; color: #333;}
.innerflx .infolist .dec {color: #555555;}

/* 갤러리 */
.innerflx.gallery .imgbx {flex: 1 0 1000px; max-width: 1000px; margin-right:  clamp(15px, calc( 65 / var(--inner) * 100vw ), 65px); padding-right: 0;}
.innerflx.gallery .name {font-size:  clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: bold; font-family: var(--font2);}
.innerflx.gallery .infobx {padding-left: 0;}
.innerflx.gallery .image {position:relative; padding-bottom:72%; overflow:hidden;}
.innerflx.gallery .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}



/* 반응형 */
@media (max-width: 1600px) {
	.innerflx.gallery .imgbx {flex: 1 0 70%; max-width: 70%;}
}	
@media (min-width: 1024px) {
	.ws-modal-btns .btn-pack.large {height:56px; line-height:54px; font-size:17px; font-weight:700;}
	
}
@media (max-width: 1400px) {
	.ws-modal-prev {left:-60px;}
	.ws-modal-next {right:-60px;}
}

@media (max-width: 1024px) {
	#wsPhotoReview .ws-modal-inner {max-width:800px;}
	#wsPhotoReviewList .ws-modal-inner {max-width:800px;}
}

@media (max-width: 900px) {
	.ws-modal-prev-next {display:flex; justify-content:space-between; margin-top:40px;}
	.ws-modal-prev-next button {display:inline-flex; gap:8px; position:static; transform:none !important; width:auto; height:auto; padding:12px 20px; border:1px solid #ccc; border-radius:30px; color:#505050; font-size:14px; font-weight:500; line-height:1.3em;}
	.ws-modal-prev-next button svg {width:8px; height:auto; margin-top:-.1em;}
	.ws-modal-prev-next button path {fill:#505050;}
	.ws-modal-prev-next button span {display:block;}

    .modalwrap {padding: 0 16px;}
    .innerflx .imgbx {padding-right: 15px;}
    .innerflx .infobx {padding-left: 15px;}
	.innerflx.gallery .imgbx {flex: 1 0 100%; max-width: 100%; margin-right: 0; } 
}

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

	.modal-lg .ws-modal-outer {height:100%; padding:0;}
	.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;}

	.modal-sm .ws-modal-inner {max-width:320px; padding:20px;}

	.ws-modal-btns {margin-top:20px;}

	.ws-modal-prev-next {margin-top:20px;}

	.ws-photo-review {display:block;}
	.ws-photo-review-slider {width:100%; margin:0 0 20px;}
	.ws-photo-review-summary {display:block; width:100%;}
	.ws-photo-review-summary .review-item-cnt-info .info {margin-bottom:24px;}
	.ws-photo-review-summary .review-item-cnt-txt {max-height:none;}

	.ws-photo-review-list {max-height:none; margin-right:0; padding-right:0;}
	.ws-photo-review-list .items {grid-template-columns: repeat(4, 1fr); gap:8px;}

	.ws-modal-inner {align-items: flex-start; padding-top: 60px; height: auto;}
    .innerflx .imgbx {padding-right: 0; margin: 0 auto;}
    .innerflx .infobx {padding-left: 0; flex: 1 0 100%; width: 100%;}
}