/* banner */
#banner {padding: 90px 2vw 0;width: 96vw;z-index: 3;}
#banner:after{content:'';width: 99%;height: 75%;position: absolute;right: 0;top: 0;background: #efefef;z-index: -1;}
#banner .item {height: 80vh;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#banner .main-slider { -webkit-clip-path: url(#clip_banner); clip-path: url(#clip_banner); }
#banner .item .clip{width: 50%;margin-right: 5%;height: 100%;}
#banner .item .clip .bgBox{background-size: contain;}
#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: auto; top: 50%; left: 50%; }
#banner .item .info{width:45%;display: flex;flex-direction: column;justify-content: flex-end;}
#banner .item .info >div {padding-left: 25%;}
#banner .item .info >div .txt { -webkit-transition-delay: .2s; transition-delay: .2s; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info .txt p {font-size: 40px;margin-top: 50px;margin-bottom: 20%;font-weight: 600;letter-spacing: 10px;}
#banner .item .info .txt h3 {line-height: 140%;font-size: 70px;font-weight: 700;}
#banner .item:first-child .info .txt h3 {line-height: 110%;font-size: 130px;font-family: 'Kanit', sans-serif;font-weight: 500;}
#banner .baScro{position:absolute;bottom: -10px;left: 3.5%;}
#banner .baScro a{border: 1px solid var(--primary);width: 270px;height: 270px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;}
#banner .baScro a svg{width: 26px;height: 26px;fill: #626262;}

@media screen and (max-width: 1440px){
	#banner .item:first-child .info .txt h3{font-size: 110px;}
	#banner .item .info .txt h3{font-size: 60px;}
}
@media screen and (max-width: 1366px){
	#banner .item .info .txt p{font-size: 25px;}
	#banner .baScro{left: -65px;}
}
@media screen and (max-width: 1280px){
	#banner .item:first-child .info .txt h3{font-size: 90px;}
}
@media screen and (max-width: 1024px){
	#banner .item:first-child .info .txt h3{font-size: 80px;}
	#banner .item .info .txt p{font-size: 25px;margin-bottom: 110px;}
	#banner .baScro a{width: 220px;height: 220px;}
	#banner .baScro a{display:none;}
	#banner{padding-top:0;}
	#banner:after{height: 57%;}
}
@media screen and (max-width: 768px){
	#banner .item:first-child .info .txt h3{font-size: 80px;}
	#banner .item .info .txt p{font-size: 22px;margin-top: 20px;margin-bottom: 0;}
	#banner:after{width:100%;}
	#banner .item{display: block;}
	#banner .item .info{width: 70%;display: flex;justify-content: flex-start;margin-top: 100px;}
	#banner .item .clip{width: 70%;margin: 0 0 0 auto;height: 320px;}
	#banner{width: 100%;}
	#banner .item .info >div{padding-left:10%;}
}
@media screen and (max-width: 640px){
	#banner .item{height: 70vh;}
	#banner .item .clip{width: 80%;height: 320px;}
	#banner .item .info >div{padding-left: 5%;}
	#banner .item .info{width: 100%;margin-top: 70px;}
	#banner .item:first-child .info .txt h3{font-size: 65px;}
	#banner .item .info .txt h3{font-size: 45px;}
	#banner:after{height: 85%;}
}