#banner , #banner .item { overflow: hidden; position: relative; background: #fff; z-index: 100; }
#banner .item a {position: absolute;width: 100%;height: 100%;background: rgb(31 31 31 / .3);top: 0;left: 0;z-index: 2;}
#banner .info {position: absolute;width: 100%;top: 35vh;left: 0;z-index: 3;}
#banner .info >* { -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; }
#banner .info h3 {display: block;line-height: 110%;text-align: center;font-size: 58px;font-weight: 500;color: #fff;-webkit-transform: translateY(-30px);transform: translateY(-30px);opacity: 0;letter-spacing: .015em;}
#banner .info p {margin-top: 16px;text-align: center;line-height: 160%;font-weight: 200;font-size: 26px;color: #fff;-webkit-transform: translateY(30px);transform: translateY(30px);transition-delay: .5s;opacity: 0;letter-spacing: .075em;word-spacing: 100vw;}
#banner .info .btn01{margin: 50px auto 0;text-align: center;}
#banner .info .btn01 a{text-align: center;position: relative;line-height: 42px;border: none;font-weight: 300;font-size: 15px;color: #ffffff;letter-spacing: .075em;text-transform: uppercase;background-color: #00000057;width: 160px;height: 50px;border-radius: 5px;cursor: pointer;transition: all 0.3s ease;display: inline-block;outline: none;}
#banner .slick-dotted.slick-slider {
    margin-bottom: 0px;
}

/* 7 */
.btn-7 {background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);line-height: 42px;padding: 0;border: none;}
.btn-7 span {position: relative;display: block;width: 100%;height: 100%;color: #fff;text-align: center;line-height: 300%;}
.btn-7:before,.btn-7:after {position: absolute;content: "";right: 0;bottom: 0;background: rgb(186 45 59);transition: all 0.3s ease;}
.btn-7:before{height: 0%;width: 2px;}
.btn-7:after {width: 0%;height: 2px;}
.btn-7:hover{color: rgba(251,75,2,1);background: transparent;}
.btn-7:hover:before {height: 100%;}
.btn-7:hover:after {width: 100%;}
.btn-7 span:before,.btn-7 span:after {position: absolute;content: "";left: 0;top: 0;background: rgb(186 45 59);transition: all 0.3s ease;}
.btn-7 span:before {width: 2px;height: 0%;}
.btn-7 span:after {height: 2px;width: 0%;}
.btn-7 span:hover:before {height: 100%;}
.btn-7 span:hover:after {width: 100%;}


#banner .img { position: relative; width: 100vw; height: 100vh; background: no-repeat 50% / cover; }
#banner .img video , #banner .img iframe { position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; }
#banner .slick-active .img { -webkit-transform: scale(1); transform: scale(1); animation: banerBg 6s infinite linear; -webkit-animation: banerBg 6s infinite linear; }
#banner .slick-active .info >* { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
#banner .slick-dots{bottom: 25px;}
#banner .slick-dots li.slick-active button:before {opacity: .75;color: #ba2d3b;}
#banner .slick-dots li button:before{color: #ffffff;}
#banner .slick-dots li:before{background: #fff0;}

@-webkit-keyframes banerBg { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.1); } }
@keyframes banerBg { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

@media screen and (max-width: 768px){
	#banner .info h3 {font-size: 40px;}
	#banner .info p {font-size: 20px;margin-top: 15px;}
	#banner .info{top: 26vh;}
	#banner .img {position: relative;width: 100vw;height: 80vh;}
	#sub_banner img {margin-top: 70px;}
	#banner .info h3{word-spacing: 100vw;}
	#banner .info .btn01{
    margin: 20px auto 0;
}
}
@media screen and (max-width: 480px){
	#banner .info{width: 80%;margin: auto;left: 10%;}
	#banner .info h3 {font-size: 30px;line-height: 150%;}
	#banner .info p {font-size: 16px;margin-top: 15px;}
	#banner .info{top: 21vh;}
	#banner .img {position: relative;width: 100vw;height: 60vh;}
	#banner .slick-dots{bottom: 10px;}
}