/* BASIC css start */
body {overflow:hidden;}
main.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;
  
}

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


#fullpage .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%;
}

#fullpage .section.autoHeight {height:auto;}
#fullpage .section.main_slide2 .vimeo-container:before{
    z-index: 100;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.3;
    pointer-events:none;
}
#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 {
	position: absolute;
	display: none;
	width:auto;
	left:50%;
	bottom: 25%;
	box-sizing: border-box;
    margin-left:-125px;;
	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;
}

.vimeo-container {position: relative; overflow: hidden; width: 100%; height: 100vh; pointer-events:none; -webkit-overflow-scrolling:touch;}
.vimeo-container iframe {position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 100vh; transform: translate(-50%, -50%); object-fit: cover;  pointer-events:none; }

.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 80px 0; text-decoration:underline; text-align:center; font-size:14px; line-height:21px;}
.product_list_box .product_list_box_wrap .more a {font-weight:500;}
.article.offline {position:relative;}
.article.offline a {display:block;}
.article.offline img {width:100%;}
.article.new {padding:80px 0 0;}
.article .main_title {text-align: center; position: relative;}
.article .main_title h3 em {font-size:18px; font-weight:500; font-family:'FranklinGothicCondITC Medi';}

.swiper_tab_box {text-align:center; margin:16px 0 30px;}
.swiper_tab_box a {display:inline-block; padding:0 15px; line-height:16px; color:#aaa; font-weight:400; font-size:12px;}
.swiper_tab_box a.active {background:none; color:#26231D; font-weight:600;}
.section > a {display:block; height:100%; position:relative; z-index:10000; background:rgba(0,0,0,0); -webkit-overflow-scrolling:touch;}
.section .main_template {position:absolute; top:50%; transform: translateY(-50%); z-index:100;}
.section .main_template h2 {font-size: 30px;font-family: Brewery Com; font-weight: 700; line-height: 1.5; margin-bottom: 10px;}
.section .main_template span.link {margin-top:7px; font-size:20px; font-weight:700; font-family: Brewery Com; display:block;}
.section .main_template h2 font {font-size: 30px;font-family: Brewery Com; font-weight: 700; line-height: 1.5; margin-bottom: 30px;}
.section .main_template span.link font{margin-top:7px; font-size:20px; font-weight:500; font-family:'FranklinGothicCondITC Medi'; text-decoration:underline; display:block;}

.section .main_template1 {width:100%;}
.section .main_template1 h2 { color: #fff;}
.section .main_template1 * {text-align:center;}
.section .main_template1 > span {margin-top:40px; display:block; font-size:12px; font-weight:500; line-height:16px;    color: #fff;}
.section .main_template1 a {margin-top:58px;}


.section .main_template2 {width:100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.section .main_template2 * {color:#fff; text-align:center;}
.section .main_template2 > span {display: block; font-size: 16px; font-weight: 500; line-height: 16px; margin-bottom: 15px;}
.section .main_template2 a {margin-top:58px;}


.section.main_slide3:before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:#000; opacity:0.3; pointer-events:none; -webkit-overflow-scrolling:touch;}
.section .main_template3 {width:100%;}
.section .main_template3 * {color:#fff; text-align:center;}
.section .main_template3 h2 {
    font-size: 16px;
    font-weight: 700;
    line-height: 27px;
    font-family: 'Noto Sans Korean', Helvetica, "Apple SD Gothic Neo", NanumGothic,"Malgun Gothic",Dotum,Gulim,sans-serif;
    margin-bottom: 15px;
}
.section .main_template3 > span {margin-top:40px; display:block; font-size:12px; font-weight:500; line-height:16px;}

.section .main_template4 {width:100%; pointer-events:none;}
.section .main_template4 * {color:#fff; text-align:center;}





/* BASIC css end */