/* banner */
#banner {padding: 88px 0 0;width: 100vw;z-index: 3;}
#banner .item {height: 85vh;display: grid;grid-template-columns: 30vw 1fr;}
#banner .item:before{content:'';position: absolute;left: 105px;top: 0;width: 1px;height: 100%;background: #242424;z-index: 7;opacity: .1;}
#banner .item:after{content:'';position: absolute;left: 80px;top: 314px;width: 25px;height: 25px;background: var(--primary);z-index: 7;}
#banner .clip{order:2;position: relative;display: flex;align-items: center;justify-content: center;}
#banner .clip:before{content:'PIGMENT';z-index: 2;position: absolute;font-size: max(11 * (1vw + 1vh) / 2, 60px);font-family: "Concert One", sans-serif;color: var(--white);}
#banner .item .info{background:#fff;z-index: 2;}
#banner .item .clip .bgBox { transform: scale(1.3); -webkit-transform: scale(1.3); }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video {overflow: hidden;position: absolute;width: auto;height: 100%;top: 0;left: 0;}
#banner .item .info >div {margin: auto auto 26px;width: 100%;padding-left: 160px;}
#banner .item .info:before{content:'';position: absolute;left: 0;top: 339px;width: 30vw;height: 1px;background: #242424;z-index: 7;opacity: .1;}
#banner .item .info >div .h3tt {-webkit-transition-delay: .2s;transition-delay: .2s;transform: scaleX(0);-webkit-transform: scaleX(0);transform-origin: 0 0;-webkit-transform-origin: 0 0;}
#banner .item .info >div .txt {color: #1c1b1b;font-size: 18px;margin-top: 130px;}
#banner .item .info >div .txt p{font-size:18px;}
#banner .info .h3tt { position: relative; display: flex;margin-top:150px; }
#banner .info .h3tt h3 {display: block;line-height: 140%;letter-spacing: 9px;font-size: max(4.6 * (1vw + 1vh) / 2, 30px);font-weight: 600;color: #242426;word-spacing: 100vw;}
#banner .info .h3tt h3:nth-child(2) {position: absolute;background-color: var(--white);color: var(--primary);-webkit-clip-path: inset(0 0 0 9vw);clip-path: inset(0 0 90px 0);}

#banner #scrollDown{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;bottom: 10%;left: 2%;z-index:2}
#banner .upDown{width:100%;height: 100%;bottom: 0;left: 0;z-index: 2;position: absolute;}
#banner #scrollDown span.text{display:block;color: #2b2b2b;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;letter-spacing:0.5px;margin-bottom:40px;font-family: "Kanit", sans-serif;font-size: 15px;}
#banner #scrollDown span.scrollBtn{width:25px;height:44px;border-radius:12.5px;background-color: #eaeaea;position:relative;overflow:hidden;margin-bottom:12px}
#banner #scrollDown:hover span.scrollBtn:after{background-color:#292d74;top:65%;width:7px;height:7px;}
#banner #scrollDown span.scrollBtn:after{content:"";width:5px;height:5px;background-color: #414141;border-radius:50%;position:absolute;top:20%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
#banner #scrollDown span.scrollArrow{width:10px;height:10px;border-right: 2px solid #414141;border-bottom: 2px solid #414141;-webkit-transform:rotate(45deg);transform:rotate(45deg);display:block}

#banner .item.slick-current .clip .bgBox { -webkit-animation: scale_banner 6s linear infinite; animation: scale_banner 6s linear infinite; }
#banner .item.slick-current .info >div .h3tt { transform: scaleX(1); -webkit-transform: scaleX(1); }

.text-js{opacity:0;font-size: max(4.2 * (1vw + 1vh) / 2, 30px);color: #292929;font-family: "Open Sans", sans-serif;font-weight: 400;text-transform: uppercase;line-height: 1;}
.cursor{display:block;position:absolute;height: 110%;top:0;right:-5px;width: 1px;background-color:#fff;z-index:1;animation:flash 0.5s none infinite alternate}

@keyframes flash{0%{opacity:1}100%{opacity:0}}

@media screen and (max-width: 1440px){
	#banner .item:after{top: 261px;}
	#banner .item .info:before{top: 259px;}
	#banner .info .h3tt h3:nth-child(2){clip-path: inset(0 0 65px 0);}
}
@media screen and (max-width: 1366px){
	#banner .item:after{top: 190px;}
	#banner .item .info:before{top: 189px;}
	#banner .info .h3tt{margin-top: 80px;}
}
@media screen and (max-width: 1280px){
	#banner .item:after{left:0}
	#banner .item .info >div{padding-left:80px}
	#banner {padding-top: 60px;}
	#banner #scrollDown{display:none;}
	#banner .item:before{display:none;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 65vh; }
}
@media screen and (max-width: 768px){
	#banner .info .h3tt h3:nth-child(2){clip-path: inset(0 210px 0 0);}
	#banner .info .h3tt h3{word-spacing:unset}
	#banner .info .h3tt, #banner .item .info >div .txt{margin-top: 30px;}
	#banner .clip{height: 55vh;}
	#banner .item { height: auto; }
	#banner .item .info >div{padding: 50px;}
	#banner .item:after, #banner .item .info:before{display:none;}
	#banner .item{display: block;}
}
@media screen and (max-width: 640px){
	#banner .info .h3tt h3:nth-child(2){clip-path: inset(0 160px 0 0);}
	#banner .item .info >div{padding: 30px;}
	#banner .clip{height: 45vh;}
}