@charset "utf-8";
.pcbr{display:block;}
.tbbr{display:none;}
.mbbr{display:none;}
.mobile{display:none;}
.dn{display:none;}



/* visual */
#container{position:relative;}
#visual{
	position:fixed;left:0;top:0;
	width:100%;height:100vh;
	background:#000;
}
.visual{width:100%;height:100vh;}
.visual video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.visual .txtwrap{
	position:absolute;left:5%;top:50%;z-index:20;
	transform:translateY(-50%);
	width:90%;	
}
.visual .txtwrap>div{overflow:hidden;}
.visual .txtwrap>div>span{
	display:block;
	transform:translateY(100%);
	font-size:95px;color:#fff;font-weight:400;line-height:1.3em;
}
.visual.on .txtwrap>div>span{transform:translateY(0);}
.visual.on .txtwrap>div:nth-child(1)>span{transition:all 1.6s;}
.visual.on .txtwrap>div:nth-child(2)>span{transition:all 1.6s 0.4s;}
.visual .ctr{
	display:flex;align-items:center;justify-content:center;
	width:100%;
	position:absolute;left:0%;bottom:60px;z-index:20;
}
.visual .ctr .vprev{margin-right:40px;}
.visual .ctr .vnext{margin-left:40px;}
.visual .ctr .vpaging{position:static;}
.visual .ctr .vpaging span{
	width:8px;height:8px;
	margin:0 10px;
	background:0;border:1px solid rgba(255,255,255,0.6);
	opacity:1;border-radius:50%;
	transition:all 0.24s;
}
.visual .ctr .vpaging span.swiper-pagination-bullet-active{background:#fff;}
.visual .scroll{
	overflow:hidden;
	position:absolute;right:5%;bottom:0;z-index:10;
	width:40px;height:160px;
	box-shadow:-1px 0 0 inset rgba(255,255,255,0.4);
}
.visual .scroll .txt{
	font-family:"Pretendard";font-size:13px;color:#fff;font-weight:500;
	transform:rotate(-90deg) translate(-21px,0px);
}
.visual .scroll:after{
	display:block;content:"";
	width:2px;height:48px;
	background:#fff;
	position:absolute;right:0;top:-100%;
	animation:scrollAni 1.6s infinite linear;
}
@keyframes scrollAni{
	0%{top:-100%;}
	100%{top:100%;}
}
.visual .swiper-slide-active .bg{transform:scale(1);z-index:10;transition:all 3s;}




#contents{position:relative;z-index:100;padding-top:100vh;}



/* sec1 */
.sec1{
	position:relative;
	overflow:hidden;
	display:flex;align-items:center;
	width:100%;height:730px;
	background:#f5f3ee;
	border-bottom:1px solid #ccc;
}
.sec1 .bg{}
.sec1 .bg .line1{
	position:absolute;left:-3.3%;top:-15%;
	width:45%;aspect-ratio:1/1;
	border:1px solid #ccc;
	border-radius:50%;
}
.sec1 .bg .line2{
	position:absolute;left:41.666%;top:0;
	width:1px;height:100%;
	background:#ccc;
}
.sec1 .bg .line3{
	position:absolute;right:5%;top:0;
	width:1px;height:100%;
	background:#ccc;
}
.sec1 .bg .line4{
	position:absolute;right:11%;top:-20%;
	width:1px;height:105%;
	background:#ccc;
	transform:rotate(-45deg);
}
.sec1 .bg>div{}
.sec1 .conwrap{
	box-sizing:border-box;
	position:relative;z-index:100;
	display:flex;flex-wrap:wrap;align-items:center;
	width:100%;
	padding:0 5%;
}
.sec1 .conwrap .title{width:42.666%;perspective: 800px;}
.sec1 .conwrap .title>div{overflow:hidden;}
.sec1 .conwrap .title>div>span{
	display:block;
	font-size:76px;color:#000;font-weight:500;
}
.sec1 .conwrap .title>div>span>.imp{
	display:inline-block;
	position:relative;
	/*text-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);*/
	color: #000;
}
.sec1 .conwrap .title.on>div>span>.imp{	
	background: linear-gradient(
	135deg,
	#333 0%,
	#8a8a8a 40%,
	#d6d6d6 50%,
	#8a8a8a 60%,
	#333 100%
	);
	background-size: 400% 400%;
	-webkit-background-clip: text;
	animation: metallic-shine 4.7s ease infinite alternate;	
}
@keyframes metallic-shine {
  0% {
  	color: transparent;
	text-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);
    background-position: 0% 50%;
  }
  50% {
  	color: transparent;
	text-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);
    background-position: 100% 50%;
  }
  100% {
  	color: transparent;
	text-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);
    background-position: 0% 50%;
  }
}

.imp::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: shine-effect 3s infinite;
}

@keyframes shine-effect {
  0% {
    transform: translateX(-100%) skewX(-45deg);
  }
  15% {
    transform: translateX(100%) skewX(-45deg);
  }
  100% {
    transform: translateX(100%) skewX(-45deg);
  }
}

/* 제목이 나타난 후에 효과 시작 */
.title:not(.on) .imp {
  animation: none;
}
.title:not(.on) .imp::after {
  animation: none;
}



.sec1 .conwrap .txts{
	box-sizing:border-box;
	width:calc(100% - 42.666%);
	padding:0 0 0 5%;
}
.sec1 .conwrap .txts p{
	font-family:"Pretendard";font-size:18px;color:#555;line-height:1.7em;
}
.sec1 .conwrap .txts .btnMore{margin-top:35px;}





/* sec2 */
.sec2{
	position:relative;
	padding:240px 0 70px;
	background:#fff;
}
.sec2 .line{
	position:absolute;left:0;bottom:0;
	width:100%;height:1px;
	transform-origin:right;
	background:#ccc;
}
.sec2 .line .dot{
	display:block;
	width:7px;height:7px;
	background:#373737;
	border-radius:50%;
	position:absolute;left:41%;bottom:-3px;
}
.sec2 .conwrap{
	display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
	width:100%;
}
.sec2 .conwrap .txtarea{
	box-sizing:border-box;
	width:41.666%;
	padding:0 5%;
}
.sec2 .conwrap .txtarea h2{font-size:20px;color:#000;font-weight:700;}
.sec2 .conwrap .txtarea h3{margin:40px 0 20px;font-size:56px;color:#000;font-weight:600;}
.sec2 .conwrap .txtarea p{font-family:"Pretendard";font-size:18px;color:#555;line-height:1.7em;}
.sec2 .conwrap .txtarea a{margin-top:35px;}
.sec2 .conwrap .prd{
	box-sizing:border-box;
	width:calc(100% - 41.666%);
}
.sec2 .conwrap .prd .swiper-slide{width:456px;height:auto;background:#f5f3ee;padding-bottom:35px;}
.sec2 .conwrap .prd .swiper-slide .thumb{}
.sec2 .conwrap .prd .swiper-slide .txts{
	background:#f5f3ee;
	padding:0 5%;
	text-align:center;
}
.sec2 .conwrap .prd .swiper-slide .txts .tit{font-family:"Pretendard";font-size:20px;color:#000;font-weight:600;}
.sec2 .conwrap .prd .swiper-slide .txts .txt{margin-top:10px;font-family:"Pretendard";font-size:17px;color:#555;line-height:1.7em;}
.sec2 .conwrap .prd .swiper-slide .txts .info{
	display:flex;align-items:center;justify-content:center;
	margin-top:10px;font-family:"Pretendard";font-size:15px;color:#555;
}
.sec2 .conwrap .prd .swiper-slide .txts .info .price{}
.sec2 .conwrap .prd .swiper-slide .txts .info .bar{
	width:1px;height:10px;
	margin:0 10px;
	background:#ccc;
}
.sec2 .conwrap .prd .swiper-slide .txts .info .ml{}





/* sec3 */
.sec3{padding:170px 0 0;background:#fff;}
.sec3 .conwrap{
	overflow:hidden;
	position:relative;
	box-sizing:border-box;
	width:100%;height:100vh;
	padding-left:50%;
	background:#f5f3ee;
	box-shadow:0 1px 0 #ccc, 0 -1px 0 #ccc;
}
.sec3 .conwrap .imgarea{overflow:hidden;position:absolute;left:0;top:0;width:50%;height:100%;}
.sec3 .conwrap .imgarea video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec3 .conwrap .conarea{
	box-sizing:border-box;
	display:flex;align-items:center;
	width:100%;height:100%;
	padding:0 10%;
}
.sec3 .conwrap .conarea h2{font-size:20px;color:#000;font-weight:700;}
.sec3 .conwrap .conarea h3{margin:40px 0 20px;font-size:56px;color:#000;font-weight:600;}
.sec3 .conwrap .conarea h4{font-size:22px;color:#111;font-weight:500;}
.sec3 .conwrap .conarea p{margin:20px 0 0;font-family:"Pretendard";font-size:18px;color:#555;line-height:1.7em;}
.sec3 .conwrap .conarea a{margin-top:35px;}





/* sec4 */
.sec4{padding:240px 0 200PX;background:#f5f3ee;}
.sec4 .textBg{position:relative;}
.sec4 .textBg .txt{
	position:absolute;left:0%;top:0;display:flex;white-space:nowrap;
	font-size:230px;font-weight:500;line-height:1em;
	color:#000;
}
.hiddenHeight{opacity:0;font-size:230px;font-weight:500;line-height:1em;white-space:nowrap;}/* 높이값 */
@keyframes textScroll {
	0%{
		transform: translate(0, 0);
	}
	100%{
		transform: translate(-50%, 0);
	}
}

.sec4 .conwrap{
	overflow:hidden;
	position:relative;
	display:flex;align-items:center;justify-content:center;
	width:90%;height:700px;
	margin:90px auto 0;
	text-align:center;
}
.sec4 .conwrap video{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	object-fit: cover;
}
.sec4 .conwrap .txts{position:relative;z-index:10;}
.sec4 .conwrap .txts h2{font-size:20px;color:#fff;font-weight:700;}
.sec4 .conwrap .txts h3{margin:40px 0 20px;font-size:56px;color:#fff;font-weight:600;}
.sec4 .conwrap .txts p{font-family:"Pretendard";font-size:18px;color:#fff;line-height:1.7em;}
.sec4 .conwrap .txts a{display:inline-flex;margin-top:35px;}