#banner { width: 100vw; z-index: 3; }
#banner .main-slider{
    position: relative;
}
#banner img { width: 100vw; height: 90vh; }
#banner .pos_abs { width: 100vw; height: 90vh; top: 0; left: 0; }
#banner .info {padding-top: 10vh;height: 90vh;}
#banner .info .txt { margin: auto; }
#banner .info .txt * { text-shadow: 0 0 50px rgba(var(--black-rgb), .55); opacity: 0; -webkit-transform: translateY(15px); transform: translateY(15px); }
#banner .info .txt h3 { letter-spacing: .05em; font-size: 55px;  }
#banner .info .txt p { font-weight: 400; font-weight: 300; font-size: 37px; }
#banner a.pos_abs { z-index: 2; }
#banner iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

/* slick-current */
#banner .slick-current .info .txt * { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); 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: 400;}

/* scrollBtn */
#scrollBtn {position: absolute;bottom: 0px;z-index: 3;left: 50%;text-align: center;width: 44px;padding-top: 70px;letter-spacing: 1px !important;font-size: 12px;font-weight: 600;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;border: 1px solid rgb(93 93 93 / 33%);border-radius: 30px;}
#scrollBtn font{position: absolute;top: 20px;left: 44%;width: 7px;height: 7px;background: #5d5d5d;border-radius: 50%;}
#scrollBtn span {position: absolute;top: 15px;left: 37%;width: 12px;height: 12px;border-left: 2px solid #5d5d5d;border-bottom: 2px solid #5d5d5d;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-animation: scroll01 1.5s infinite;animation: scroll01 1.5s infinite;-webkit-box-sizing: border-box;box-sizing: border-box;}
@-webkit-keyframes scroll01 {
    0% {
        -webkit-transform: rotate(-45deg) translate(0,0);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(-45deg) translate(-20px,20px);
        opacity: 0
    }
}

@keyframes scroll01 {
    0% {
        -webkit-transform: rotate(-45deg) translate(0,0);
        transform: rotate(-45deg) translate(0,0);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(-45deg) translate(-20px,20px);
        transform: rotate(-45deg) translate(-20px,20px);
        opacity: 0
    }
}

@media screen and (max-width: 980px){
	#banner .info .txt h3 {  margin-top: 15px; line-height: 120%; font-size: 38px; }
#banner .pos_abs{height: 60vh;}
#banner img {width: 100vw;height: 70vh;}

}
@media screen and (max-width: 768px){
    #scrollBtn{width: 34px;padding-top: 50px;}
    #scrollBtn font{top: 12px;left: 40%;}
    #scrollBtn span{top: 5px;left: 34%;}
}
@media screen and (max-width: 480px){
#banner .pos_abs{height: 22vh;}
#banner img {width: 100vw;height: 40vh;}
#banner .slick-current .info .txt p{
    font-size: 22px;
}
#banner .info .txt h3{
    font-size: 20px;
    margin-top: 10px;
}
    #scrollBtn{width: 34px;padding-top: 50px;left: 47%;bottom: -2px;}
    #scrollBtn font{top: 12px;left: 40%;}
    #scrollBtn span{top: 5px;left: 34%;}

}