/* BASIC css start */
body {overflow:hidden;}
.scroll-container {
  height: 100vh;
  -webkit-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height:100vh;
}

.scroll-container.disable {scroll-snap-type:none;}


.scroll-container .section {
    -webkit-scroll-snap-align: start;
    scroll-snap-align: start;
    background-position: center center;
    background-size: cover;
    z-index: 999;
    position: relative;
    height: 100vh;
    width:100%;
}

#main_swiper .swiper-container {height:100vh; width:100%;}
#main_swiper .swiper-slide {height:100%; width:100%;}

main.scroll-container {
  height: 100vh;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 30px;
  overflow-y: scroll;
  overflow-x: hidden;
}

main.scroll-container.disable {scroll-snap-type:none;}


#fullpage .section {
    scroll-snap-align: start;
    background-position: center center;
    background-size: cover;
    z-index: 999;
    position: relative;
    height: 100vh;
    width:100%;
}

#fullpage .section {
    background-position: center center;
    background-size: cover;
    z-index: 1;
    position: relative;
    height: 100vh;
    width:100%;
}


.product_list_box .product_list_box_wrap {display:none;}
.product_list_box .product_list_box_wrap.active {display:block;}
.product_list_box .product_list_box_wrap .more {padding:0 0 50px 0; text-decoration:underline; text-align:center; font-size:16px; line-height:21px;}

#mainSwiper .swiper-slide {
    background-position: center center;
    background-size: cover;
    z-index: 999;
    position: relative;
    height: 100vh;
    width:100%;
}

#mainSwiper .swiper-slide > a {display:block; height:100%;}
#mainSwiper .swiper-pagination-bullet-active {background:#000;}

#mainSwiper .all-box {
    display:none;
	position: absolute;
	width:auto;
	left:280px;
	bottom: 10px;
	box-sizing: border-box;
    top:calc(50% + 150px);
	z-index: 20;
}
#mainSwiper.swiper-initialized .all-box {display: inline-flex;}
#mainSwiper .progress-box {
	position: relative;
	width: 170px;
	z-index: 11;
}
#mainSwiper .autoplay-progress {
	position: absolute;
	left: 30px;
	top: 10px;
	z-index: 10;
	width: 100px;
	height: 2px;
	background-color: rgba(0, 0, 0, 0.1);
}

#mainSwiper .autoplay-progress svg {
	--progress: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
/*	height: 100%;*/
	stroke-width: 4px;
	stroke: #26231D;
	fill: none;
	stroke-dashoffset: calc(100 * (1 - var(--progress)));
	stroke-dasharray: 100;
}

#mainSwiper .swiper-pagination {
	display: flex;
	color: #26231D;
	justify-content: space-between;
	position: static;
	text-align: left;
}

#mainSwiper .swiper-pagination span {color: #26231D;}
#mainSwiper .arrow-box {
	position: relative;
	width: 80px;
}

#mainSwiper .swiper-button-next,
#mainSwiper .swiper-button-prev {
	width: 8px;
	height: 13px;
	top: 0;
	margin-top: 2px;
	background: url(//sappun.img13.kr/snap/image/common/product_arrow_prev.svg) no-repeat center / 100%;
}

#mainSwiper .swiper-button-next {
	background-image: url(//sappun.img13.kr/snap/image/common/product_arrow_next.svg);
}
#mainSwiper .swiper-button-next::after,#mainSwiper .swiper-button-prev::after {
	font-size: 0;
}


.article.best {padding-top:140px;}
.article.offline img {width:100%;}
.article.offline a {display:block;}
.article.offline {position:relative;}
.article {padding:100px 0 0;}
.article .main_title {text-align: center; position: relative;}
.article .main_title h3 em {font-size:20px; font-weight:500;} 

.swiper_tab_box {text-align:center; margin:16px 0 50px;}
.swiper_tab_box a {display:inline-block; padding:0 15px; line-height:19px; color:#aaa; font-weight:400; font-size:14px;}
.swiper_tab_box a.active {background:none; color:#26231D; font-weight:600;}


.section .main_template {position:absolute; top:50%; transform: translateY(-50%); z-index:1000;}
.section .main_template h2 {font-size:40px; font-family: Brewery Com; font-weight:700; line-height:52px;margin-bottom: 10px;}
.section .main_template span.link {margin-top: 7px; font-size: 20px; font-weight: 700; font-family: Brewery Com; display: block;}




#mainSwiper.swiper-initialized .main_template h2 {transform: translateY(20px); word-break: keep-all; opacity: 0; transition: 1s 0.2s;}
#mainSwiper.swiper-initialized .main_template span {transform: translateY(20px); word-break: keep-all;	opacity: 0;	transition: 1s 0.4s;}


#mainSwiper .swiper-slide-active .main_template h2,
#mainSwiper .swiper-slide-active .main_template span {
	transform: translateY(0);
	opacity: 1;
}


.section .main_template1 {left:280px;}

.section.main_slide2 .vimeo-container:before {z-index:100; content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:#000; opacity:0.45;}

.section .main_template2 {width:100%;}
.section .main_template2 * {color:#fff; text-align:center;}
.section .main_template2 > span {margin-bottom:20px; display:block; font-size: 16px; line-height: 27px;  color: #fff; text-decoration:none; font-family:'Noto Sans Korean';}
.section .main_template2 a {margin-top:58px; display:block;}
.section .main_template2  h2 {margin-bottom: 40px;}

.section .main_template3 {display:none; background:rgba(0,0,0,0.45); width:100%; height:100%; position:absolute; top:0; left:0; color:#fff; text-align:center;}
.section .section_half:hover .main_template3  {display:block;}
.section .section_full:hover .main_template3  {display:block;}
.section .main_template3 .content {position:absolute; top:50%; transform: translateY(-50%); z-index:1000; width:100%;}
.section .main_template3 .content h2 {font-size:16px; line-height:27px; color:#fff; margin-bottom:15px;}
.section .main_template3 .content span {margin-top:7px; font-size:20px; font-weight:500; font-family:'FranklinGothicCondITC Medi'; text-decoration:underline; display:block;  color:#fff;}


.section .offline .offline_template {left:0; width:100%; text-align: center; pointer-events:none;}
.section .offline .offline_template {position:absolute; top:50%; transform: translateY(-50%); z-index:1000;}
.section .offline .offline_template h2 {font-size:40px; font-family: Brewery Com; font-weight:700; line-height:52px; color:#fff;}
.section .offline .offline_template span {margin-top:7px; font-size:20px; font-weight:500; font-family:'FranklinGothicCondITC Medi'; text-decoration:underline; display:block; color:#fff;}

.section .section_half {float:left; width:50%; height:100Vh; background-position: center center; background-size: cover; position:relative;}
.section .section_full {width:100%; height:100Vh; background-position: center center; background-size: cover; position:relative;}

.vimeo-container {
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.vimeo-container iframe {
  box-sizing: border-box;
  width: 177.77777778vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* BASIC css end */