@charset "utf-8";

.story-page { overflow: visible;}
img { max-width: 100%; position: relative;}
h3 { font-size: 2rem; line-height: 1.6;}
.cave-txt-b{font-size:2.5rem;font-weight:700;line-height:1.4; margin-bottom:43px}
.bg-light { background: #f6f6f6;}
.bg-gray { background: #d4d4d4;}
.bg-wine { background: #4c0022;} 
.btn_wine { display: inline-block; border-radius: 50px; border:2px solid #83003b; padding:15px 70px; margin-bottom: 11%; color: #83003b; font-weight: 700;}

.fixed-section { overflow: visible; position: relative; padding-left: 50px; padding-right: 50px; height: 200vw;}
.fixed-section .sticky { position: sticky; top:1vw}
.fixed-section .slide-bx{transition:.5s all}
.fixed-section [class*=motion]{visibility:hidden;-webkit-animation-name:none !important;animation-name:none !important;animation-play-state: paused}
.fixed-section[data-index="1"] .motion2, .fixed-section[data-index="2"] .motion3{visibility: visible;animation: fadeIn 1s both !important; opacity: 1;}
.fixed-section[data-index="2"] [class*=motion]{visibility: visible;animation: fadeIn .5s .5s both !important; opacity: 1;}
.bx-float { position: absolute; top:20px; left:0;width:100%; opacity: 0;}
.bx-float.motion3 { top:40px; }

.fixed-section[data-index="1"] .slide-bx:first-of-type{position:relative; transform:scale(0.95); top:-20px; background: #cfcfcf;}
.fixed-section[data-index="2"] .slide-bx:first-of-type{position:relative; transform:scale(0.90); top:-40px; background: #c3c3c3;}
.fixed-section[data-index="2"] .slide-bx:nth-of-type(2){transform:scale(0.95); top:0px; background: #cfcfcf;}

.cont-2 { padding-top:0 !important;}
.cont-2 .slide-bx { background: #ededed; padding:80px 55px; box-shadow: 2px 5px 9px rgba(0,0,0,0.4);margin:0 20px 40px}
.cont-3 .bg-gray { padding:8.5%;}
.cont-3 .img-area { width: 18%; top:29%;left:66%;}
.cont-4 .bx p { font-weight: 700;}
.swiper-wrp { position: relative;}
.swiper-wrp .swiper-pagination { left:50%; transform: translateX(-50%);}
/* .swiper-wrp .swiper-pagination-bullet { margin:0 5px} */
/* .swiper-pagination-bullet-active { background: #aaa;} */
.swiper-wrp .swiper-button-disabled{opacity:.4}
.swiper-wrp .swiper-button-prev,
.swiper-wrp .swiper-button-next { width: 48px; height: 48px; margin-top: -60px; -webkit-box-shadow: 2px 4px 16px rgba(0,0,0,0.14); box-shadow: 2px 4px 16px rgba(0,0,0,0.14); border-radius: 50%;}	
.swiper-wrp .swiper-button-prev{background:url(/kr/story/only-and-best/img/refrigerators-cave/swp_prev.png) no-repeat;background-size:100% auto;}
.swiper-wrp .swiper-button-next{background:url(/kr/story/only-and-best/img/refrigerators-cave/swp_next.png) no-repeat;background-size:100% auto;}
.visible-m{display: none !important;}
@media (min-width: 768px) {

	.cont-3 .col-9 { display: flex; justify-content: center; background: url(/kr/story/only-and-best/img/refrigerators-cave/5_pc.png) no-repeat 0 0 /100% 100%; padding:4% 0% 24%; color: #fff;}
	.cont-4 .row { padding-top:11%;}
	.cont-4 .bx { height: 463px; padding-top:60px}
	.cont-4 .img-wrap { height:100px; display: flex; align-items: center; justify-content: center;}
	.cont-4 .bx p { margin:50px 0 43px 0; font-size: 1.25rem;}
	.bottom-product .row { margin-bottom: 11%; }
	
}

@media (min-width: 1200px) {
    .story-page { font-size: 16px;}
}

@media (max-width:991px){
	.cont-2 .slide-bx{padding:80px 20px;min-height: 587px;}
	.visible-m{display: block !important;}
}

@media (max-width: 767.98px) {
	.cntr { padding-left: 0; padding-right: 0;}
	.cont-1 h2,
	.cont-3 .txt-wrap,.cont-4 .txt-wrap,
	.bottom-product .cntr { padding-left: 16px; padding-right: 16px;}
	.cave-txt-b { font-size: 30px; padding-left: 16px; padding-right: 16px;}
	h3 { font-size: 1.5rem;}

	/* .cont-2 .swiper-container { background: #ededed; } */
	.cont-2 .swiper-slide { padding:10px 10px 20px; box-shadow: none;}
	.cont-2 .txt-wrap { margin-top:20px}
	.swiper-wrp { position: relative;}
	.swiper-wrp .swiper-pagination { left:50%; transform: translateX(-50%);}
	/* .swiper-wrp .swiper-pagination-bullet { margin:0 5px} */
	/* .swiper-pagination-bullet-active { background: #aaa;} */
	.swiper-wrp .swiper-button-disabled{opacity:.4}
	.swiper-wrp .swiper-button-prev{width:40px;height:40px;}
	.swiper-wrp .swiper-button-next{width:40px;height:40px;}

	.cont-3 .col-12 { background: url(/kr/story/only-and-best/img/refrigerators-cave/5_m.png) no-repeat 0 0 /100% 100%;}
	.cont-3 .col-12 {padding:15% 0% 25%; color: #fff;}
	.cont-3 .txt-wrap { margin-top:60px}
	.cont-3 .bg-gray { padding:25%;}
	.cont-3 .img-area { width: 45%; top:39%;left:46%;}
	
	.cont-4 .row { padding-top:3%}
	.cont-4 .bx { padding:7% 0 14%;}
	.cont-4 .bg-light { padding: 7% 0;}
	.cont-4 img { width: 10%;}
	.cont-4 .bg-light .img-wrap img { position: absolute; top:0; left:50%; transform: translate(-50%, -50%);}
	.cont-4 .txt-wrap { margin-top:0px}
	.cont-4 .bx p { margin:3% 0; font-size: 1.16rem;}

	.cont-2 .slide-bx{padding:20px;min-height: 700px;margin:0 0 20px}
	.visible-m{display: none !important;}
	.cont-2 .slide-bx h3{margin-top: 1em;}
}

/* swiper */
.swiper-wrp .swiper-pagination { left: 0; transform: translateX(0); position:static;}
/* .swiper-container .swiper-pagination-bullet {margin:0 4px;border-radius:50%;width:10px;height:10px; background:#8f8f8f; opacity:1;}
.swiper-container .swiper-pagination-bullet-active {width:24px; border-radius:6px;background:#000;} */

.swiper-container .swiper-pagination-bullet {
	position: relative;
	width:18px;
	height:18px;
	margin:0 !important;
	opacity:1;
	background: none;
	border-radius: 0;
}
.swiper-container .swiper-pagination-bullet:focus-visible {
	outline-offset: -1px;
}

.swiper-container .swiper-pagination-bullet::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background: #8f8f8f;
	border-radius: 50%;
}

.swiper-container .swiper-pagination-bullet-active {
	width:32px;
}

.swiper-container .swiper-pagination-bullet-active::after {
	width: 24px;
	background: #000;
	border-radius: 20px;
}
/* @media screen and (max-width: 768px) {
		.swiper-container .swiper-pagination-bullet { width:8px; height:8px; }
		.swiper-container .swiper-pagination-bullet-active { width:20px;}
} */