/* banner */

#banner:before{content:'';width:0;height:0;border-style:solid;border-width: 0 80vw 4.6vw 100vw;border-color: transparent transparent #ffffffb5;position:absolute;bottom: 0vw;z-index: 2;left: -1vw;}

#banner .item {height: 100vh;}
#banner .item .JaJa_bg{background:url(/images/44/banner_mask.png);}
#banner .item  .info{z-index:5;}
#banner .flbannimg_item{position: absolute;z-index: 7;right: 26vw;top: 16%;width: 32vw;}
#banner .item  .info .h3tt img{width: min(330px , 100%);}
#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: 16% auto 19%;width: 73%;margin-left: 13%;}
#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: 25px 0px 0px 25px;}
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {font-size: 21px;line-height: 2;font-weight: 300;letter-spacing: 0.15em;}
#banner .item .info >div .txt .h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; }
#banner .item .h3tt .h3{font-size: max(4.5 * (1vw + 1vh) / 2, 29px);font-weight: 700;line-height: 1;text-transform: uppercase;letter-spacing: 0.1em;margin-bottom: 10px;}
#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: 18%;left: 13%;padding: 0;gap: 0;display: none;}
#banner .btn a{display: flex !important;!i;!;align-items: center;justify-content: center;border: 1px solid rgb(221 221 221 / 25%););width: 55px;aspect-ratio: 1/1;border*-r: 5;margin: 10px 0;border-radius: 0px 12px 12px 0px;}
#banner .btn a:hover{background: #ffffff;}
#banner .btn a svg{width: 20px;height: 20px;fill: white;}
#banner .btn a#banner_prev{transform:scaleX(-1);}
#banner .btn a#banner_prev{background:var(--primary);}
#banner .btn a#banner_next{background:var(--secondary);}
#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: 1;font-size: max(2.5 * (1vw + 1vh) / 2, 20px);color: #ffffff;font-weight: 500;text-transform: uppercase;line-height: 1.5;letter-spacing: 2px;min-height: 66px;display: flex;align-items: center;gap: 10px;flex-direction: column;margin-top: 29px;border: #ffffff 1px solid;justify-content: center;padding: 3px 20px;border-radius: 10px;letter-spacing: 0.35em;width: 300px;}
#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}

#banner .pom_cabtn{position:absolute;bottom: 47%;right: 14%;z-index: 9;width: min(200px, 100%);}
#banner .pom_cabtn a{border: #306036 3px solid;}

@keyframes flash{0%{opacity:1}100%{opacity:0}}
@-webkit-keyframes scale_banner { to { -webkit-transform: scale(1); } }
@keyframes scale_banner { to { transform: scale(1); } }



#scrollDown{position:absolute;z-index: 9;bottom: 6px;left: 12vw;}
#scrollDown .upDown{display:flex;align-items: center;gap: 10px;}
#scrollDown .upDown span{font-weight: 600;}
@media screen and (max-width: 1470px){
	#banner .item  .info .h3tt img{width: min(252px , 100%);}
	#banner .btn{left: 10.5%;bottom: 21%;}
	#banner .item .info >div .txt >*{font-size:18px;}
	#banner .item .info >div{margin-bottom: 16%;margin-left: 10%;}
	#banner .item .info >div .txt{margin: 20px 18px;}
	#banner .text-js{min-height: 60px;}
	#banner .btn a svg{width: 25px;height: 25px;}
	#banner .btn a{border-radius: 0px 9px 9px 0px;}
	#banner .pom_cabtn{bottom: 21%;right: 11%;width: min(245px, 100%);}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 85vh; }
}

@media screen and (max-width: 760px){
	#banner .flbannimg_item{width: 52vw;right: 1vw;top: 14%;}
	#banner .item  .info .h3tt img{width: min(181px , 100%);}
}
@media screen and (max-width: 640px){
	#banner .item .info >div .txt >*{font-size:14px;}
	#banner .item .info >div{width: 90%;margin: 69px auto 0;display: flex;flex-direction: column;justify-content: center;}
	#banner .btn{bottom: 18%;left: 5%;}
	#banner .btn a{width: 44px;border-radius: 0px 7px 7px 0px;}
	#banner .more_btn{display:none;}
	#banner .item {height: 70vh;}
	#banner .text-js{min-height: 45px;text-align: left;display: flex;align-items: flex-start;width: auto;}
	
	#banner .btn a svg{width: 16px;height: 16px;}
	#banner .pom_cabtn{width: min(177px, 100%);bottom: 20%;right: 6%;}
	#banner:before{display:none;}
}