/* banner */
#banner {}
#banner .item {height: 100vh;}
#banner .item .JaJa_bg{background: rgb(0 0 0 / 20%);}
#banner .item  .info{z-index:5;}
#banner .item .clip >* { min-width: 100vw; width: 100vw; }
#banner .item .clip .bgBox { transform: scale(1.2); -webkit-transform: scale(1.2); }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video {overflow: hidden;position: absolute;width: 100%;height: 100%;top: 0;object-fit: cover;}
#banner .item .info >div {margin: auto auto 11%;width: 80%;margin-left: 10%;display: flex;flex-direction: column;}
#banner .item .info >div .txt {-webkit-transition-delay: .2s;transition-delay: .2s;transform: scaleX(0);-webkit-transform: scaleX(0);transform-origin: 0 0;-webkit-transform-origin: 0 0;margin: 0;}
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {font-size: 18px;line-height: 2;font-weight: 300;}
#banner .item .info >div .txt .h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; }
#banner .item .info >div .txt p{width: 40%;letter-spacing: 2px;margin-bottom: 30px;}
#banner .item .comynonoex{font-size: max(2.1 * (1vw + 1vh) / 2, 16px);font-weight: 700;color: white;}

#banner .item .h3tt .h3{font-size: max(5.8 * (1vw + 1vh) / 2, 34px);font-weight: 700;line-height: 1;text-transform: uppercase;letter-spacing: 0.1em;margin-bottom: 10px;font-family: "Archivo", sans-serif;}
#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 .txt { transform: scaleX(1); -webkit-transform: scaleX(1); }

#banner .btn {position:absolute;display: flex;align-items: center;justify-content: center;bottom: 41%;left: 4.4%;flex-direction: column;padding: 0;display: none;}
#banner .btn a{display: flex !important;align-items: center;justify-content: center;border: 1px solid rgb(221 221 221 / 25%);width: 51px;aspect-ratio: 1/1;border*-r: 5;margin: 10px 0;border-radius: 50px;background: rgb(255 255 255 / 65%);}
#banner .btn a:hover{background: #ffffff;}
#banner .btn a svg{width: 21px;height: 21px;fill: var(--primary);}
#banner .btn a#banner_next svg{transform:scaleX(-1);}

#banner .slick-dots{bottom: 52%;width: auto;display: flex !important;flex-direction: column;align-items: center;left: 5.5%;justify-content: flex-end;}
#banner .slick-dots li{margin: 5px 0;}
#banner .slick-dots li button{border: 1px solid #75757500;border-radius: 50px;}
#banner .slick-dots li.slick-active button{border: 1px solid rgb(255 255 255 / 25%);}
#banner .slick-dots li button:before{opacity:1;color:#ffffff}
#banner .text-js{opacity:0;font-size: max(2.1 * (1vw + 1vh) / 2, 20px);color: #ffffff;font-weight: 500;text-transform: uppercase;line-height: 1.5;letter-spacing: 2px;display: flex;align-items: center;gap: 10px;margin: 3px 0 10px;}
#banner .cursor{display:block;position:absolute;height: 110%;top:0;right:-5px;width: 1px;background-color:transparent;z-index:1;animation:flash 0.5s none infinite alternate}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
@-webkit-keyframes scale_banner { to { -webkit-transform: scale(1); } }
@keyframes scale_banner { to { transform: scale(1); } }

#banner .forwardBtn {position: relative;z-index: 1;display: inline-flex;align-items: center;justify-content: center;gap: 25px;min-height: 75px;padding: 20px 35px;border: 2px solid #fff;overflow: hidden;color: #fff;font-size: 0.85rem;font-weight: 400;line-height: 1;letter-spacing: 0.24rem;text-transform: uppercase;text-decoration: none;transition: color 0.3s cubic-bezier(0.165,0.84,0.44,1);}
#banner .forwardBtn span { color: white }
#banner .forwardBtn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--secondary); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.3s cubic-bezier(0.165,0.84,0.44,1); }
#banner .forwardBtn:hover { border-color: var(--secondary); }
#banner .forwardBtn:hover::after { transform: scaleX(1); transform-origin: 0% 50%; }
#banner .forwardBtn_icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: currentColor; }
#banner .forwardBtn_icon svg { display: block; width: 100%; height: 100%; fill: white; }
#banner .forwardBtn:hover .forwardBtn_icon { animation: forwardBtnArrow 0.3s cubic-bezier(0.165,0.84,0.44,1) both; }
@keyframes forwardBtnArrow {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; transform: translateX(0); }
  49% { opacity: 0; transform: translateX(-25px); }
  50% { opacity: 0; transform: translateX(25px); }
  100% { opacity: 1; transform: translateX(0); }
}

#scrollDown{position:absolute;z-index: 9;bottom: 6px;left: 12vw;display: none;}
#scrollDown .upDown{display:flex;align-items: center;gap: 10px;}
#scrollDown .upDown span{font-weight: 600;}
@media screen and (max-width: 1470px){
	#banner .btn{left: 3.5%;bottom: 39%;}
	#banner .item .info >div .txt >*{font-size:18px;}
    #banner .item .info >div .txt p{width: 50%;font-size: 17px;}
	#banner .item .info >div{margin-bottom: 11%;}
}
@media screen and (max-width: 1024px){
    #banner .item .info >div .txt p{width: 70%;}
	#banner .item {height: 100vh;}
}
@media screen and (max-width: 980px){
	#banner{margin-top: 0;}
}
@media screen and (max-width: 760px){
	#scrollDown , #banner .btn{display:none;}
}
@media screen and (max-width: 640px){
    #banner .morebtn{display:none; }
    #banner .item .info >div .txt p{width: 100%;font-size: 15px;letter-spacing: .5px;}
	#banner .item .info >div .txt >*{font-size:14px;}
	#banner .item .info >div{width: 85%;margin: auto auto 78px;}
	#banner .slick-dots, #banner .btn{display: none !important;}
	#banner .more_btn{display:none;}
	#banner .item {height: 80vh;}
	#banner .text-js{min-height: 53px;}
}

@media screen and (max-width: 480px){
	#banner .item .info >div{}
	#banner .item .h3tt .h3{font-size: 32px;margin-bottom: 0;}
	#banner .item .info >div .txt{margin:0;}
	#banner .item .info .lemsop:after{top: 27px;left: -3%;}
}