.pos_rel{position:relative}
.pos_abs{position:absolute}
.atag_item{width:100%;height:100%;top:0;left:0}
#banner{width:100vw;z-index:3;position:relative;overflow:hidden}
#banner .slick-slide{min-width:100vw}
#banner .list_box{position:absolute;bottom:50px;right:0;width:50%;z-index:99}
#banner .list_box .listList{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 100px;padding:0 180px}
#banner .list_box .listList li .Img img{min-width:auto;margin:0}
#banner .more{text-align:center}
#banner .more a{position:relative;overflow:hidden;padding:15px 50px;display:inline-block;background:linear-gradient(90deg,#dd3831,#971a15);letter-spacing:.06em;line-height:30px;transition:1.2s ease 1.8s;transform:translateY(0%)}
#banner .more a font{position:relative;display:inline-block;font-size:15px;color:#fff;z-index:2;font-family:"Lato",sans-serif}
#banner .img{overflow:hidden;display:inline-block}
#banner img{position:relative;width:100%;min-width:100vw;background:no-repeat 50% / cover}
#banner .pos_abs{width:100vw;min-width:100vw;top:0;left:0}
#banner .info{min-width:100%;height:100%;display:flex;align-items:center;z-index:20}
#banner .info .txt .more_btn a{transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}
#banner .info .txt em{font-family:'Poppins',sans-serif;font-style:initial;margin-bottom:15px;letter-spacing:0.5px;font-weight:300}
#banner .info .txt h3{text-align:center;line-height:130%;font-size:40px;line-height:120%;font-weight:600;font-family:"Lato",sans-serif;color:#da251d;position:relative;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both}
#banner .info .txt h3 b{font-size:40px;line-height:120%;font-weight:600;font-family:"Lato",sans-serif;color:#da251d;position:relative;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both;vertical-align:baseline}
#banner .slick-current .info .txt *{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#banner .info .txt{transition:all 0.7s ease;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:flex-end;padding:0 0 15vw;z-index:2;width:min(90%,900px);margin:auto;position:absolute;top:0px;left:0;right:0;bottom:0;align-items:center}
#banner .info .txt h3,#banner .info .txt p{color:#fff;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt article{text-align:center;font-family:'Roboto',sans-serif;font-size:22px;font-weight:600;text-transform:uppercase}
#banner .info .txt p{font-weight:600;font-size:24px;margin-top:20px;margin-bottom:40px;text-align:center;letter-spacing:0px}
#banner .info .txt p font{font-weight:500;font-size:36px;letter-spacing:5px;margin-bottom:10px;text-align:center}
#banner .info .txt p font b{font-weight:500;font-size:36px;vertical-align:baseline;color:var(--primary)}
#banner .info .txt .bannerBtn{opacity:0;margin-top:40px;display:block;width:220px;height:50px;pointer-events:auto;display:none}
#banner .info .txt .bannerBtn a{position:relative;color:#fff;display:block;width:100vw;min-width:100vw;letter-spacing:0.5px;overflow:hidden}
#banner .info .txt .bannerBtn .btnText:hover{color:#000}
#banner .info .txt .bannerBtn .btnText:hover::before{background-color:#eee}
#banner .info .txt .bannerBtn .btnText:hover span::before{border-color:transparent transparent transparent #000}
#banner .info .txt .bannerBtn .btnText:hover span::after{background-color:#000}
#banner .info .txt .bannerBtn .btnText::before{content:"";position:absolute;top:0;right:0;width:100vw;min-width:100vw;border:1px solid #fff;-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#banner .info .txt .bannerBtn .btnText{position:relative;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0px 25px;z-index:1;font-family:'Poppins',sans-serif;text-transform:uppercase;text-align:center;justify-content:center;font-size:13px;font-weight:400}
#banner .info .txt .bannerBtn span{position:absolute;top:50%;right:-5px;width:45px;-webkit-animation:btnArrow 1s cubic-bezier(0.4,0,0.6,1) infinite;animation:btnArrow 1s cubic-bezier(0.4,0,0.6,1) infinite}
#banner .info .txt .bannerBtn span::after{content:"";position:absolute;top:30%;left:0;margin-top:-1px;width:calc(100% - 5px);height:1px;background-color:#fff;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#banner a.pos_abs{z-index:2}
#banner .slick-current .info .txt *{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s}
#banner .slick-current .info .txt p{transition-delay:.6s;-webkit-transition-delay:.6s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both}
#banner .slick-current .info .txt *{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1);opacity:1;-webkit-transition:-webkit-transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s;transition:transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s}
#banner .more_btn a{border-radius:30px 0 30px 0px}
#banner .bgs_box *{transition:unset;-webkit-transition:unset}
#banner .bgs_box >div img{min-width:auto;object-fit:contain;margin:0 auto 0px;height:auto}
#banner .bgs_box >div:nth-child(2){z-index:2}
#banner .bgs_box >div:nth-child(3){z-index:3}
#banner .bgs_box >div:nth-child(1) img{top:13%;left:5%;width:325px}
#banner .bgs_box >div:nth-child(2) img{top:63%;left:21%;width:345px}
#banner .bgs_box >div:nth-child(3) img{top:23%;left:66%;bottom:20%;width:314px}
#banner .bgs_box >div:nth-child(4) img{top:54%;left:82%;width:372px}
#banner .bgs_box >div:nth-child(5) img{top:45%;left:13%;width:285px}
#banner .bgs_box >div:nth-child(6) img{top:58%;right:-70%;width:284px;left:auto}
#banner .bgs_box >div:nth-child(7) img{top:auto;right:-4%;left:auto;bottom:-69%;width:219px}
#banner .bgs_box >div:nth-child(8) img{top:auto;right:-22%;left:auto;bottom:-74%;width:352px}
#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:calc(50% - 41px);z-index:30}
#banner .upDown{width:100%;height:100%;bottom:0;left:0;z-index:2;position:absolute}
#banner #scrollDown span.text{display:block;color:#ffffff;letter-spacing:0.5px;margin-bottom:30px;font-family:"Kanit",sans-serif;font-size:15px;animation:web_menu002 ease-in-out 2s infinite;animation-direction:alternate}
@keyframes web_menu002{0%{margin-bottom:30px}
50%{margin-bottom:15px}
100%{margin-bottom:30px}}

#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 #fff;border-bottom:2px solid #fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);display:block}
#banner .slick-slider{margin:0px}

@media screen and (max-width:1440px){
	#banner #scrollDown{bottom:2%}
	#banner .info .txt{padding-bottom:9vw}
	#banner #scrollDown span.scrollBtn{display:none}
	#banner .list_box .listList li .Img img{height:auto}
	#banner .bgs_box >div:nth-child(1) img{top:27%;left:2%}
	#banner .bgs_box >div:nth-child(2) img{top:67%;left:23%;width:217px}
	#banner .bgs_box >div:nth-child(3) img{top:14%;left:70%;width:284px}
	#banner .bgs_box >div:nth-child(4) img{top:65%;left:78%;width:300px}
	#banner .bgs_box >div:nth-child(5) img{top:50%;left:8%;width:226px}
	#banner .bgs_box >div:nth-child(6) img{top:65%;right:-74%;width:234px;left:auto}
	#banner .bgs_box >div:nth-child(7) img{top:auto;right:-3%;left:auto;bottom:-72%;width:180px}
	#banner .bgs_box >div:nth-child(8) img{top:auto;right:-24%;left:auto;bottom:-92%;width:302px}
}
@media screen and (max-width:1280px){
	#banner{padding-top:80px}
	#scrollBtn,#banner:before{display:none}
	#banner .info .txt h3 b{font-size:32px}
	#banner .info .txt p{font-size:18px}
	#banner .info .txt{padding-bottom:19vw}
	#banner .info .txt .bannerBtn{width:180px;margin-top:20px}
	#banner .info .txt .bannerBtn span::after{width:calc(100% - 25px)}
	#banner .info .txt .bannerBtn span{right:-25px;width:40px}
	#banner .bgs_box >div:nth-child(1) img{top:15%;left:2%;width:305px}
	#banner .bgs_box >div:nth-child(2) img{top:58%;left:9%;width:207px}
	#banner .bgs_box >div:nth-child(3) img{top:10%;left:54%;width:194px}
	#banner .bgs_box >div:nth-child(4) img{top:38%;left:69%;width:405px}
	#banner .bgs_box >div:nth-child(5) img{top:42%;left:6%;width:155px}
	#banner .bgs_box >div:nth-child(6) img{top:65%;right:-67%;width:190px;left:auto}
	#banner .bgs_box >div:nth-child(7) img{top:auto;right:-4%;left:auto;bottom:-70%;width:161px}
	#banner .bgs_box >div:nth-child(8) img{top:auto;right:-17%;left:auto;bottom:-80%;width:240px}
}
@media (max-width:1180px){
	#banner .info .txt .bannerBtn{margin-top:20px}
	#banner .bgs_box >div:nth-child(8){display:none}
}
@media screen and (max-width:1140px){
	#banner:before,#banner .arrow{display:none}
	#banner .arrow{right:0}
	#banner:after{height:237px;width:609px}
	#banner .info .txt p font b,#banner .info .txt p font{font-size:25px}
	#banner .list_box .listList{gap:20px 50px;padding:0 50px}
}
@media screen and (max-width:960px){
	#banner #scrollDown{display:none}
	#banner .bgs_box >div:nth-child(8){display:block}
	#banner .info .txt h3,#banner .info .txt h3 b{font-size:30px}
	#banner .info .txt p{font-size:15px}
	#banner .info .txt .bannerBtn a{width:200px}
	#scrollBtn{display:none}
	#banner .slick-current .info .txt p{font-size:18px;margin-top:10px;margin-bottom:30px}
	#banner .bgs_box >div:nth-child(1) img{width:235px}
	#banner .bgs_box >div:nth-child(2) img{top:63%;left:9%;width:290px}
	#banner .bgs_box >div:nth-child(3) img{top:5%;left:65%;width:228px}
	#banner .bgs_box >div:nth-child(4) img{top:47%;left:69%;width:280px}
	#banner .bgs_box >div:nth-child(5) img{top:42%;left:2%;width:135px}
	#banner .bgs_box >div:nth-child(6) img{top:40%;right:-77%;width:150px;left:auto}
	#banner .bgs_box >div:nth-child(7) img{top:auto;right:-12%;left:auto;bottom:-67%;width:170px}
	#banner .bgs_box >div:nth-child(8) img{top:auto;right:-56%;left:auto;bottom:-78%;width:240px}
	#banner .info .txt{height:78%}
	#banner .list_box{bottom:20px;width:70%;margin:auto}
}
@media screen and (max-width:560px){
	#banner .info .txt{width:85%;height:100%}
	#banner .info .txt article{font-size:18px;font-weight:300}
	#banner .info .txt p font,#banner .info .txt p font b{font-size:20px}
	#banner:after{height:237px;width:380px}
	#banner .slick-current .info .txt p{letter-spacing:0.2px;margin-top:5px;font-size:16px;margin-bottom:12px}
	#banner .info .txt h3:before{bottom:-31px;width:1px;height:25px}
	#banner .info .txt .bannerBtn{width:120px}
	#banner .info .txt .bannerBtn .btnText{padding:0px 5px;height:40px}
	#banner .list_box{width:80%;right:0;left:50%;transform:translate(-50%,0%);bottom:20px}
	#banner .bgs_box >div:nth-child(1) img{width:125px;top:11%}
	#banner .bgs_box >div:nth-child(2) img{top:66%;left:4%;width:90px}
	#banner .bgs_box >div:nth-child(3) img{left:64%;width:100px;top:11%}
	#banner .bgs_box >div:nth-child(4) img{top:71%;left:64%;width:170px}
	#banner .bgs_box >div:nth-child(5) img{top:60%;left:-9%}
	#banner .bgs_box >div:nth-child(6) img{top:80%;right:-10%;width:110px}
	#banner .bgs_box >div:nth-child(7) img{right:-56%;left:auto;top:74%;width:120px}
	#banner .bgs_box >div:nth-child(8) img{top:67%;right:-82%;left:auto;width:210px}
}
@media screen and (max-width:480px){
	#banner .info .txt h3,#banner .info .txt h3 b{font-size:22px}
	#banner .slick-current .info .txt p{font-size:14px}
	#banner .list_box{width:80%}
	#banner .list_box .listList{padding:0}
	#banner .more a{padding:10px 30px}
}