.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;/* opacity:0; */-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: 1680px) {
}
@media screen and (max-width: 1440px) {
	#banner #scrollDown{bottom: 2%;}
	#banner .info .txt{padding-bottom:9vw}
	#banner #scrollDown span.scrollBtn{display:none;}
    #banner img{}
	#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 img{
}
    #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: 640px){
	#banner img{/* height: 60vh; *//* object-fit: cover; *//* object-position: 100% 50%; */}
	}
@media screen and (max-width: 560px) {
    #banner .more_btn{}
    #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 img{/* margin: 60px auto 0  0; *//* height: 50vh; */}
    #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;}
}