#banner {width: 100vw;z-index: 3;}
#banner .draggable {min-width: 100vw;width: 100vw;margin: 0px auto 0;}
#banner .pos_abs {width: 100vw;height: 100vh;top: 0;left: 0;}
#banner .info {padding-bottom: 10vh;height: 90vh;background: rgb(15 15 15 / 33%);display: none;}
#banner .info .txt {margin: 290px auto 0;transition: all 0.7s ease;}
#banner .info .txt * {font-weight: 200;color: var(--white);opacity: 0;-webkit-transform: translateY(15px);transform: translateY(25px);}
#banner .info .txt h3 {letter-spacing: 4px;font-size: 56px;text-align: center;line-height: 170%;margin-bottom: 60px;font-weight: 500;}
#banner .info .txt h3:before {content: "";position: absolute;left: 50%;bottom: -40px;width: 1px;height: 45px;background-color: rgb(243 243 243 / 38%);}
#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-size: 24px;text-align: center;letter-spacing: 15px;}
#banner a.pos_abs { z-index: 2; }

#banner img{height: 100vh;}

/* slick-current */
#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 {letter-spacing: 2px;transition-delay: .6s;-webkit-transition-delay: .6s;font-weight: 100;}

#banner .slick-dots li button:before{display:none;}
#banner .slick-dots li button{background: rgb(255 255 255 / 0%);width: 12px;height: 12px;}
#banner .slick-dots li.slick-active button{background: rgb(255 255 255 / 0%);}
#banner .slick-dots {position: absolute;margin-top: 45px;width: auto;height: 100%;display: flex !important;flex-direction: column;justify-content: center;bottom: 0;right: 5px;}
#banner .slick-dots li {margin: 8px 30px;width: 12px;height: 12px;background: var(--primary);display: block;opacity: .1;}
#banner .slick-dots li.slick-active {opacity: .8;}
#banner .slick-dots li:before {margin: auto;display: block;border: 1px rgba(var(--white-rgb), .2) solid;content: "";display: none;}
#banner .slick-dots li.slick-active:before { border-color: var(--primary); }

/* scrollBtn */
.page-scroll a {display: inline-block;-webkit-transform: translate(0,-50%);transform: translate(0,-50%);color: #fff;letter-spacing: .1em;text-decoration: none;-webkit-transition: opacity .3s;transition: opacity .3s;font-size: 12px;writing-mode: vertical-lr;padding-top: 40px;}
@keyframes web_menu002{0%{ transform: translate(0px, 0px);} 50%{transform: translate(0px, -100px);}100%{transform: translate(0px, 0px);}}/**/ 
.page-scroll   {bottom: 100px;margin-left: 0;right: 120px;z-index: 201;transform: translateX(-50%);text-align: center;width: 20px;position: absolute;}
.page-scroll  a {font-size: 12px;writing-mode: vertical-lr;text-transform: uppercase;letter-spacing: 3.5px;}
.page-scroll.style01 a span {width: 0px;height: 0px;border-left: 0px solid #fff;border-bottom: 0px solid #fff}
.page-scroll.style01 a::before {content: "";position: absolute;background: #fff;top: 220px;right: 14px;width: 5px;height: 5px;border-radius: 50px;animation: web_menu002 ease-in-out 5s infinite;animation-direction: alternate;}
.page-scroll.style01 a::after {box-sizing: border-box;content: "";position: absolute;top: 130px;right: 60%;width: 1px;height: 100px;background: #fff;opacity: .3;}
.page-scroll.style01 a span {-webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation:none;animation: none;-webkit-box-sizing: border-box;box-sizing: border-box;position: relative}@-webkit-keyframes zeroall {  0% {opacity: .1;  } 30% {opacity: 1;  }}
@keyframes fadeInUp{0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 1;-webkit-transform: translateY(0);        -ms-transform: translateY(0);transform: translateY(0);}}.fadeInUp{animation-name: fadeInUp;    animation-duration: 1s;animation-fill-mode: both;}@keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}


@media screen and (max-width: 1640px){
	#banner .slick-dots li{margin: 8px 22px;}
}

@media screen and (max-width: 1440px){
	#banner .info .txt {margin: 240px auto 0;}
	#banner .info .txt h3{font-size: 43px;}
}
@media screen and (max-width: 1366px){
	#banner .draggable{}
	#banner img{height: 75vh;}
}
@media screen and (max-width: 1280px){
	#banner{
    padding-top: 60px;
}
}
@media screen and (max-width: 1140px){
	#banner img{min-width: 100vw;width: 100vw;object-fit: cover;}
	#banner .slick-dots{display: flex !important;width: 100%;height: auto;flex-direction: row;bottom: 0;margin-top: 0;}
	#banner .slick-dots li{margin: 8px;}
	#scrollBtn{display: none;}
}
@media screen and (max-width: 960px){
	#banner .info .txt{margin: 150px auto 0;}
	#banner .info .txt h3{font-size: 38px;}
	#banner .info .txt p{font-size: 18px;}
	#banner img {height: 50vh;}
}
@media screen and (max-width: 780px){
	#banner img {height: 40vh;}

}
@media screen and (max-width: 640px){
	#banner img {height: 40vh;}

}
@media screen and (max-width: 560px){
	#banner img {height: 30vh;}

}
@media screen and (max-width: 480px){
	#banner .info{height: 50vh;}
	#banner .info .txt{margin: 150px auto 0;}
	#banner .info .txt h3{font-size: 28px;letter-spacing: 0.5px;margin-bottom: 40px;}
	#banner .info .txt article{font-size: 18px;font-weight: 300;}
	#banner .info .txt p{font-size: 14px;}
	#banner .slick-current .info .txt p{letter-spacing: 1.2px;}
	#banner .info .txt h3:before{bottom: -31px;width: 1px;height: 25px;}
}