@charset "utf-8";

/* layout */
body{background-color:#000;}
#container{background:#fff;}
#header .inr{transition:background 0.3s ease 0s;}
#header .inr:not(.active).sns{background:#fffaf6;}
#header .inr.sns:before{opacity:0.1;}

.fp-viewing-main03 #header h1 > a,
.fp-viewing-main04 #header h1 > a,
.fp-viewing-main05 #header h1 > a{background-image:url(../images/common/logo.png);}
.fp-viewing-main03 #header .gnb > li > a,
.fp-viewing-main04 #header .gnb > li > a,
.fp-viewing-main05 #header .gnb > li > a{color:#222;}
.fp-viewing-main04 #header .inr:before,
.fp-viewing-main05 #header .inr:before{opacity:0.1;}
.fp-viewing-main05 #header .inr{background:#fffaf6;}

/* visual */
.area_visual{position:relative; height:100%;}
.area_visual .inr{display:flex; flex-flow:column wrap; justify-content:flex-end; align-items:flex-start; position:absolute; bottom:0px; z-index:10; width:100%; box-sizing:border-box; padding:0 100px 120px;}
.area_visual .txt{font-size:103px; font-weight:600; color:#fff; line-height:1.1em;}
.area_visual .txt span{overflow:hidden; display:block;}
.area_visual .txt i{display:block; transform:translateY(100%); transition:transform 1s ease-in-out;}
.area_visual .txt.active i{transform:translateY(0);}
.area_visual .txt.active span:nth-of-type(1) i{transition-delay:0.2s;}
.area_visual .txt.active span:nth-of-type(2) i{transition-delay:0.4s;}
.area_visual .control{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center; height:20px; margin-top:50px; padding-left:250px;}
.area_visual .control [data-videocontrol="bar"]{display:inline-block; position:relative; width:230px; height:3px; background:rgba(255,255,255,0.5);}
.area_visual .control [data-videocontrol="bar"] i{display:inline-block; position:absolute; top:0px; left:0px; height:100%; background:#fff;}
.area_visual .control > button{opacity:0.68; display:inline-block; width:20px; height:20px; margin-left:10px; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 100%; font-size:0px; transition:opacity 0.3s ease 0s;}
.area_visual .control > button[data-videoControl="stop"]{background-image:url(../images/main/btn_visual_stop.png);}
.area_visual .control > button[data-videoControl="start"]{background-image:url(../images/main/btn_visual_play.png);}
.area_visual .control > button:hover{opacity:0.86;}
.area_visual .img{overflow:hidden; position:absolute; top:0px; left:0px;/* position:fixed; top:0px; left:0px; z-index:-1; */ width:100%; height:100%;}
.area_visual .img:before{content:''; opacity:0.15; display:block; position:absolute; top:0px; left:0px; z-index:3; width:100%; height:100%; background:#000;}
.area_visual .img img{object-fit:cover; width:100%; height:100%;}
.area_visual [data-visual="video"]{transform:opacity 0.3s ease 0s;}
.area_visual [data-visual="video"].loading{opacity:0;}
.area_visual [data-visual="video"] [data-vbg]{position:fixed !important; z-index:-1 !important;}
.area_visual [data-visual="video"] iframe{position:absolute; top:50%; left:50%; z-index:1; width:177vw; height:57vw; min-width:100%; min-height:100%; border:0px; transform:translate(-50%, -50%);}
.controlBar_wrap{opacity:0; position:absolute !important; left:0; top:0; z-index:-1; transition:opacity 0.2s ease 0s;}
.mb_YTPBar{opacity:1; position:absolute !important; left:100px; top:0px; width:230px !important; height:100% !important; box-sizing:border-box; padding:0px !important; background:transparent !important; transition:opacity 0.5s ease 0s;}
.mb_YTPBar .buttonBar{display:none !important;}
.mb_YTPBar .mb_YTPProgress{bottom:128px; background:rgba(255,255,255,0.1);}
.mb_YTPBar .mb_YTPProgress,
.mb_YTPBar .mb_YTPLoaded,
.mb_YTPBar .mb_YTPseekbar{height:3px;}
.mb_YTPBar .mb_YTPLoaded{background:rgba(255,255,255,0.4);}
.mb_YTPBar .mb_YTPseekbar{background-color:#fff; box-shadow:none;}
.area_visual .txt{opacity:0; transition:opacity 0.9s ease 0s;}
.fp-viewing-main01 .area_visual .txt{opacity:1;}
.fp-viewing-main01 .controlBar_wrap{opacity:1; z-index:1; transition-duration:0.5s; transition-delay:0.7s;}

/* biz */
[data-main="biz"]{height:100%; background:#fff;}
[data-main="biz"] .swiper{height:100%;}
[data-main="biz"] .swiper .box{overflow:hidden; position:relative; height:100%;}
[data-main="biz"] .swiper .img{display:block; height:100%; background-repeat:no-repeat; background-position:50% 0; background-size:cover; transform:scale(1.08); transition:transform 4s ease-in-out;}
[data-main="biz"] .swiper .img img{object-fit:cover; width:100%; height:100%;}
[data-main="biz"] .swiper .img img.mob{display:none;}
[data-main="biz"] .swiper .swiper-slide-active .img,
[data-main="biz"] .swiper .swiper-slide-duplicate-active .img{transform:scale(1);}
[data-main="biz"] .swiper .txt{position:absolute; top:50%; left:50%; z-index:10; margin-left:-746px; color:#fff; transform:translateY(-50%);}
[data-main="biz"] .swiper .txt .title{display:block; font-size:84px; font-weight:700; line-height:1.3em;}
[data-main="biz"] .swiper .txt p{line-height:1.7em;}
[data-main="biz"] .swiper .txt a{display:inline-block; min-width:180px; height:50px; box-sizing:border-box; margin-top:40px; background-color:rgba(255,255,255,0.1); border:1px solid #fff; border-radius:50rem; color:#fff; font-size:17px;}
[data-main="biz"] .swiper .txt a span{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; height:100%;font-family:'Josefin Sans', Sans-serif;}
[data-main="biz"] .swiper .txt a:hover{background-color:rgba(255,255,255,1); color:#222;}
[data-main="biz"] .swiper .txt .title,
[data-main="biz"] .swiper .txt p,
[data-main="biz"] .swiper .txt a{opacity:0; transform:translateX(-50px); transition:opacity 0.9s ease 0s, transform 0.9s ease 0s, background 0.3s ease 0s;}
[data-main="biz"] .swiper .txt.active .title,
[data-main="biz"] .swiper .txt.active p,
[data-main="biz"] .swiper .txt.active a{opacity:1; transform:translateX(0px);}
[data-main="biz"] .swiper .txt.active .title{transition-delay:0.2s, 0.2s, 0.2s;}
[data-main="biz"] .swiper .txt.active p{transition-delay:0.35s, 0.35s, 0.35s;}
[data-main="biz"] .swiper .txt.active a{transition-delay:0.50s, 0.50s, 0s;}
[data-main="biz"] .swiper .page{position:absolute; right:100px; bottom:65px; text-align:right;}
[data-main="biz"] .swiper .page > button{opacity:0.2; display:inline-block; margin-top:30px; background-color:transparent; font-size:62px; font-weight:700; color:#fff;}
[data-main="biz"] .swiper .page > button.on{color:#8f1616;}
[data-main="biz"] .swiper .bottom{margin-bottom:15px; font-size:16px; color:#fff;}
[data-main="biz"] .swiper .bottom .swiper_page{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center;}
[data-main="biz"] .swiper .bottom .line{overflow:hidden; display:inline-block; position:relative; width:100px; height:2px; margin:0 15px; background-color:rgba(255,255,255,0.2);}
[data-main="biz"] .swiper .bottom .line:before{content:''; display:block; position:absolute; top:0px; left:-100%; width:60px; height:2px; background-color:#fff;}
[data-main="biz"] .swiper .is_text_motion.active .line:before{animation:aniBar 5s linear 1 forwards;}

/* model */
[data-main="model"]{overflow:hidden; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; height:100%; background:#fff;}
[data-main="model"] .inr{padding-top:60px; padding-bottom:60px;}
[data-main="model"] .swiper-slide{position:relative; width:450px; padding-top:30px; margin:0 50px;}
[data-main="model"] .swiper-slide a{display:block; transform:scale(0.86); transition:transform 0.5s ease 0s;}
[data-main="model"] .swiper-slide .img{overflow:hidden; display:block; width:450px; height:600px;}
[data-main="model"] .swiper-slide .img img{object-fit:cover; width:100%; height:100%;}
[data-main="model"] .swiper-slide .img:before{content:''; opacity:0.7; display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background:#000; transition:opacity 0.5s ease 0s;}
[data-main="model"] .swiper-slide .title{overflow:hidden; display:block; position:absolute; right:-50px; top:0; z-index:5; width:90%; font-size:68px;    white-space: nowrap; text-transform:uppercase; text-align:right; font-weight:700; line-height:1; letter-spacing:-2.5px; word-break:break-all;}
[data-main="model"] .swiper-slide .title span{opacity:0; display:block; transform:translateY(50px); transition:0.5s ease 0s;color:#8f1616;}
[data-main="model"] .swiper-slide-active a,
[data-main="model"] .swiper-slide-duplicate-active a{transform:scale(1);}
[data-main="model"] .swiper-slide-active .title span,
[data-main="model"] .swiper-slide-duplicate-active .title span{opacity:1; transform:translateY(0); transition-delay:0.4s;}
[data-main="model"] .swiper-slide-active .img:before,
[data-main="model"] .swiper-slide-duplicate-active .img:before{opacity:0;}
[data-main="model"] .slide_product .bottom{display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; position:relative; max-width:1490px; margin:0 auto; padding-top:45px;}
[data-main="model"] .slide_product .swiper-pagination-progressbar{position:relative; height:2px;}
[data-main="model"] .slide_product .swiper-pagination-progressbar-fill{top:-1px; height:4px; background-color:#000; border-radius:50rem;}
[data-main="model"] .slide_product .bottom .btn{display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; padding-left:10px;}
[data-main="model"] .slide_product .bottom .btn button{opacity:0.2; width:20px; height:20px; margin-left:10px; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 100%; font-size:0px; transition:opacity 0.3s ease 0s;}
[data-main="model"] .slide_product .bottom .btn .swiper_prev,
[data-main="model"] .slide_product .bottom .btn .swiper_next{background-image:url(../images/main/btn_slide_arrow.svg); background-size:19px 14px;}
[data-main="model"] .slide_product .bottom .btn .swiper_prev{transform:rotate(180deg);}
[data-main="model"] .slide_product .bottom .btn .swiper_start{display:none; background-image:url(../images/main/btn_slide_start.png);}
[data-main="model"] .slide_product .bottom .btn .swiper_stop{background-image:url(../images/main/btn_slide_stop.png);}
[data-main="model"] .slide_product .bottom .btn button:hover{opacity:1;}
[data-main="model"] h2{position:absolute; top:45px; left:0px; z-index:10; font-size:41px; font-weight:700; line-height:1.1em;}
[data-main="model"] h2 span{overflow:hidden; display:block;}
[data-main="model"] h2 span i{display:inline-block;}
[data-main="model"] .is_motion h2 span i{transform:translateY(100%); transition:transform 1s ease-in-out;}
.fp-viewing-main03 [data-main="model"] .is_motion h2 span i{transform:translateY(0); transition-delay:0.2s;color:#8f1616;}
.area_category{position:relative; width:620px; margin:0 auto;}
.area_category ul{font-size:0px;}
.area_category ul > li{display:inline-block; position:relative; padding-left:20px; font-size:20px;}
.area_category ul > li:before{content:''; display:block; position:absolute; left:10px; top:50%; width:3px; height:3px; margin-top:-3px; background:#ddd; border-radius:100%;}
.area_category ul > li:first-child{padding-left:0px;}
.area_category ul > li:first-child:before{display:none;}
.area_category ul > li > a{display:inline-block; font-size:20px; font-weight:600; color:#ccc;}
.area_category ul > li > a.on{color:#8f1616;}
.slide_group .slide_product{opacity:0; visibility:hidden; overflow:hidden; height:0px;}
.slide_group .slide_product.active{opacity:1; visibility:visible; overflow:visible; height:auto;}

/* instar */
[data-main="sns"]{overflow:hidden; position:relative; height:100%; background:#fffaf6; font-family:'Josefin Sans', Sans-serif;}
[data-main="sns"] .inr{max-width:990px; margin:0 auto; padding-top:165px;}
[data-main="sns"] h2{font-size:56px; font-weight:700; color:#8f1616; text-align:center; letter-spacing:-2px; line-height:1.1em;}
[data-main="sns"] h2 + p{text-align:center; font-size:18px; color:#999;}
[data-main="sns"] .obj{display:block; position:absolute; top:0; left:-30px; font-size:110px; font-weight:700; text-shadow:-1px 0 #8f1616, 0 1px #8f1616, 1px 0 #8f1616, 0 -1px #8f1616; color:#fffaf6; line-height:1; letter-spacing:-3px; white-space:nowrap; transform:rotate(90deg); transform-origin:left 100%;}
[data-main="sns"].is_motion .obj{opacity:0; left:-130px; transition:opacity 0.7s ease 0s, left 1s ease-in-out 0s;}
[data-main="sns"].is_motion.motion_in .obj{opacity:1; left:-30px; transition-delay:0.2s, 0.2s;}
[data-main="sns"] [data-motion-rail]{display:block; position:absolute; top:auto; bottom:80px; left:0; font-size:110px; font-weight:700; text-shadow:-1px 0 #8f1616, 0 1px #8f1616, 1px 0 #8f1616, 0 -1px #8f1616; color:#fffaf6; line-height:1; letter-spacing:-3px; white-space:nowrap;}
[data-main="sns"] h2.is_motion span,
[data-main="sns"] p.is_motion span{overflow:hidden; display:block;}
[data-main="sns"] h2.is_motion span i,
[data-main="sns"] p.is_motion span i{display:inline-block; transform:translateY(100%); transition:transform 1s ease-in-out;}
.fp-viewing-main04 [data-main="sns"] h2.is_motion span i,
.fp-viewing-main04 [data-main="sns"] p.is_motion span i{transform:translateY(0); transition-delay:0.2s;}
.list_sns{width:822px; margin:20px auto 0;}
.list_sns .list{width:274px; box-sizing:border-box; padding:5px;}
.list_sns .list > a{display:block; height:264px;}
.list_sns .list .img{overflow:hidden; display:block; width:264px; height:100%;}
.list_sns .list .img img{object-fit:cover; width:100%; height:100%;}


@keyframes aniBar{
	0%{left:-100%;}
	100%{left:100%;}
}

@media screen and (min-width:1920px){
	[data-main="sns"]{display:flex; flex-flow:column wrap; justify-content:center; align-items:center;}
	[data-main="sns"] .inr{padding-top:0px;}
}

@media screen and (max-width:1800px){
	/* visual */
	.area_visual .inr{padding-left:40px; padding-right:40px;}
	.mb_YTPBar{left:40px;}
}

@media screen and (max-width:1600px){
	/* biz */
	[data-main="biz"] .swiper .txt{left:60px; margin-left:0px;}
	[data-main="biz"] .swiper .page{right:40px;}
	
	/* model */
	[data-main="model"] .slide_product .bottom{max-width:1200px; box-sizing:border-box; padding:45px 30px 0;}
}

@media screen and (max-width:1500px){
	/* layout */
	#header .inr:not(.active).sns{background-color:transparent;}
	#header .inr.sns:before{opacity:0;}
	.fp-viewing-main05 #header .inr{background-color:transparent;}
	.fp-viewing-main04 #header .inr:before,
	.fp-viewing-main05 #header .inr:before{opacity:0;}
	.fp-viewing-main03 #header .btn_menu span i,
	.fp-viewing-main03 #header .btn_menu span:before,
	.fp-viewing-main03 #header .btn_menu span:after{background-color:#000;}
	.fp-viewing-main04 #header .btn_menu span i,
	.fp-viewing-main04 #header .btn_menu span:before,
	.fp-viewing-main04 #header .btn_menu span:after{background-color:#000;}
	.fp-viewing-main05 #header .btn_menu span i,
	.fp-viewing-main05 #header .btn_menu span:before,
	.fp-viewing-main05 #header .btn_menu span:after{background-color:#000;}
	
	/* instar */
	[data-main="sns"] .inr{display:flex; flex-flow:column wrap; justify-content:center; align-items:center; height:100%; padding-top:0px;}
}

@media screen and (max-width:1200px){
	/* visual */
	.area_visual .txt{font-size:8.583333333333334vw/* 103px */;}
	
	/* biz */
	[data-main="biz"] .swiper .txt{left:40px;}
	[data-main="biz"] .swiper .page{right:40px;}
	
	/* model */
	[data-main="model"] h2{font-size:3.4166666666666665vw/* 41px */;}
	[data-main="model"] .swiper-slide{width:37.5vw/* 450px */; margin:0 4.166666666666666vw/* 50px */;}
	[data-main="model"] .swiper-slide .img{width:37.5vw/* 450px */; height:50vw/* 600px */;}
	[data-main="model"] .swiper-slide .title{right:-4.166666666666666vw/* -50px */; font-size:6.166666666666667vw/* 74px */;}
	[data-main="model"] .slide_product .bottom{max-width:1000px;}
	.area_category{width:51.66666666666667vw/* 620px */;}
	
	/* instar */
	[data-main="sns"] .obj{display:none;}
}

@media screen and (max-width:1024px){
	.section,
	.fp-tableCell{height:auto !important;}
	
	/* visual */
	.area_visual{height:100vh; height:calc(var(--vh, 1vh) * 100); min-height:700px;}
	.area_visual .inr{padding-left:30px; padding-right:30px; padding-bottom:60px;}
	.area_visual .control > button[data-videoControl="stop"]{background-image:url(../images/main/btn_visual_stop@x3.png);}
	.area_visual .control > button[data-videoControl="start"]{background-image:url(../images/main/btn_visual_play@x3.png);}
	.mb_YTPBar{left:30px;}
	.mb_YTPBar .mb_YTPProgress{bottom:68px;}
	.controlBar_wrap{opacity:1; z-index:1; height:100vh !important; height:calc(var(--vh, 1vh) * 100) !important; min-height:700px;}
	.area_visual .img:before{display:none;}
	
	/* biz */
	[data-main="biz"]{height:100vh; height:calc(var(--vh, 1vh) * 100);}
	[data-main="biz"] .swiper .txt .title{font-size:8.203125vw/* 84px */;}
	[data-main="biz"] .swiper .txt a{font-size:16px;}
	[data-main="biz"] .swiper .page > button{font-size:6.0546875vw/* 62px */;}
	
	/* model */
	[data-main="model"] .inr{padding-top:100px; padding-bottom:100px;}
	[data-main="model"] .swiper-slide .title{line-height:1.2; letter-spacing:-1.5px;}
	[data-main="model"] .slide_product .bottom{max-width:92.7734375vw/* 950px */;}
	[data-main="model"] .slide_product .bottom .btn .swiper_start{background-image:url(../images/main/btn_slide_start@x3.png);}
	[data-main="model"] .slide_product .bottom .btn .swiper_stop{background-image:url(../images/main/btn_slide_stop@x3.png);}
	
	/* instar */
	[data-main="sns"] .inr{padding-top:100px; padding-bottom:100px;}
	[data-main="sns"] h2{font-size:5.46875vw/* 56px */;}
	.list_sns{width:100%;}
	.list_sns .list{width:26.7578125vw/* 274px */; padding:0.48828125vw/* 5px */;}
	.list_sns .list > a{height:25.78125vw/* 264px */;}
	.list_sns .list .img{width:25.78125vw/* 264px */;}
}

@media screen and (max-width:768px){
	/* visual */
	.area_visual{min-height:600px;}
	.area_visual .txt{font-size:10.416666666666668vw/* 80px */;}
	.controlBar_wrap{min-height:600px;}
	.area_visual [data-visual="video"] iframe{min-height:150%;}
	
	/* biz */
	[data-main="biz"]{min-height:720px;}
	[data-main="biz"] .swiper .bottom .line{width:70px;}
	[data-main="biz"] .swiper .txt a{min-width:150px; font-size:14px;}
	[data-main="biz"] .swiper .img img.mob{display:inline;}
	
	/* model */
	[data-main="model"]{height:100vh; height:calc(var(--vh, 1vh) * 100); min-height:700px;}
	[data-main="model"] .inr{padding-top:100px;}
	[data-main="model"] .swiper-slide .title{top:10px; right:-3.2552083333333335vw/* -25px */;}
	[data-main="model"] .swiper-slide{width:41.015625vw/* 315px */; margin:0 3.2552083333333335vw/* 25px */;}
	[data-main="model"] .swiper-slide .img{width:41.015625vw/* 315px */; height:54.6875vw/* 420px */;}
	[data-main="model"] h2{top:75px;}
	.area_category{width:54.036458333333336vw/* 415px */;}
	.area_category ul{margin-bottom:30px;}
	
	/* instar */
	[data-main="sns"] .inr{position:relative; padding:70px 20px 100px;}
	[data-main="sns"] h2{font-size:6.510416666666667vw/* 50px */;}
	[data-main="sns"] h2 + p{font-size:16px;}
	[data-main="sns"] [data-motion-rail]{bottom:65px; font-size:90px; line-height:1.2em;}
	.list_sns{width:calc(100% - 40px);}
}

@media screen and (max-width:620px){
	/* visual */
	.area_visual .inr{padding-left:20px; padding-right:20px;}
	.mb_YTPBar{left:20px;}
	
	/* biz */
	[data-main="biz"] .swiper .txt{left:30px;}
	[data-main="biz"] .swiper .page{right:20px;}
	[data-main="biz"] .swiper .txt .title{font-size:11.29032258064516vw/* 70px */;}
	[data-main="biz"] .swiper .page > button{font-size:7.258064516129033vw/* 45px */;}
	
	/* model  */
	[data-main="model"] .inr{padding-top:70px; padding-bottom:60px;}
	[data-main="model"] .swiper-slide{width:280px; margin:0 15px;}
	[data-main="model"] .swiper-slide .title{top:0px; width:100%; font-size:50px;}
	[data-main="model"] .swiper-slide .img{width:280px; height:373px;}
	[data-main="model"] h2{top:0px; font-size:25px;}
	.area_category{width:350px; padding-top:70px;}
}

@media screen and (max-width:480px){
	/* model */
	[data-main="biz"] .swiper .page > button{margin-top:15px;}
	
	/* instar */
	[data-main="sns"] [data-motion-rail]{bottom:50px; font-size:70px;}
	.list_sns{width:100%;}
}

@media screen and (max-width:420px){
	/* visual */
	.area_visual .inr{padding-bottom:55px;}
	.area_visual .control{padding-left:200px;}
	.area_visual .control [data-videocontrol="bar"]{width:180px;}
	.mb_YTPBar{width:180px !important;}
	.mb_YTPBar .mb_YTPProgress{bottom:62px;}
	
	/* biz */
	[data-main="biz"] .swiper .txt{left:20px; padding-right:20px;}
	[data-main="biz"] .swiper .txt p{word-break:keep-all;}
	[data-main="biz"] .swiper .txt p br{display:none;}
	[data-main="biz"] .swiper .page > button{font-size:9.523809523809524vw/* 40px */;}
	
	/* model */
	[data-main="model"] .swiper-slide{width:240px; margin:0 5px;}
	[data-main="model"] .swiper-slide .img{width:240px; height:320px;}
	[data-main="model"] .swiper-slide .title{font-size:45px;}
	.area_category{width:300px;}
	
	/* instar */
	[data-main="sns"] h2{font-size:35px;}
}

@media screen and (max-width:320px){
	/* visual */
	.area_visual .control{padding-left:150px;}
	.area_visual .control [data-videocontrol="bar"]{width:140px;}
	.mb_YTPBar{width:140px !important;}
	
	/* model */
	.area_category{width:250px;}
	[data-main="model"] .swiper-slide .title{font-size:40px;}
	[data-main="model"] .slide_product .bottom{padding-left:10px; padding-right:10px;}
	
	/* instar */
	[data-main="sns"] h2{font-size:30px;}
	[data-main="sns"] [data-motion-rail]{bottom:40px; font-size:50px;}
}