/* banner */
#banner {
    position: relative;
    margin-top: 70px;
}

#banner .slick-prev, #banner .slick-prev{
    top: calc(50% - 50px);
    left: -50px;
}
#banner .slick-prev, #banner .slick-next{
    position: absolute;
    top: calc(50% - 15px);
    left: 50px;
    z-index: 9;
}
#banner .slick-next{
    top: calc(50% - 15px);
    right: 50px;
    left: auto;
}
#banner .slick-prev:before{
	content:"〈";
	color: #161616;
	font-size: 50px;
}
#banner .slick-next:before{
	content: "〉";
	color: #161616;
	font-size: 50px;
}
#banner .slick-next:before ,#banner .slick-prev:before{
    background: rgb(255 255 255 / 62%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 60px;
} 


#banner .item {
    position: relative;
}

#banner .item a {
    position: relative;
    width: 100%;
    height: 805px;
    display: inline-block;
    z-index: 3;
}

#banner .item .info .banner-txt {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 70px;
    color: white;
    -webkit-background-clip: text;
    background-clip: text;
    bottom: 23rem;
    left: 0;
    z-index: 2;
}
#banner .item .info p{
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 36px;
    color: white;
    -webkit-background-clip: text;
    background-clip: text;
    bottom: 20rem;
    left: 0;
    z-index: 2;
}

#banner .item {
    position: relative;
    overflow: hidden;
    text-align: right;
    background-size: cover;
}

#banner .item iframe {
    position: absolute;
    width: 100%;
    height: 95vh;
    left: 0;
    top: 0;
}

#banner .item video {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    object-fit: cover;
}

/* scrollBtn */
#scrollBtn {
    position: absolute;
    z-index: 100;
    bottom: 0px;
    left: 20px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

#scrollBtn font {
    margin-right: 10px;
    width: 50px;
    height: 1px;
    background-color: #4465bdc7;
    display: inline-block;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-animation: scrollline 2s cubic-bezier(.32,.01,0,.98) 1.2s infinite forwards;
    animation: scrollline 2s cubic-bezier(.32,.01,0,.98) 1.2s infinite forwards;
}

#scrollBtn span {
    text-transform: uppercase;
    color: #2b4894;
}

@-webkit-keyframes scrollline {
    0% {
        -webkit-transform: scaleX(0);
        -webkit-transform-origin: right;
    }

    49% {
        -webkit-transform-origin: right;
    }

    50% {
        -webkit-transform: scaleX(1);
    }

    51% {
        -webkit-transform-origin: left;
    }

    100% {
        -webkit-transform: scaleX(0);
    }
}

@keyframes scrollline {
    0% {
        transform: scaleX(0);
        transform-origin: right;
    }

    49% {
        transform-origin: right;
    }

    50% {
        transform: scaleX(1);
    }

    51% {
        transform-origin: left;
    }

    100% {
        transform: scaleX(0);
    }
}

@media screen and (max-width: 1560px){
    #banner .item a{
    height: 70vh;
}
    #banner .item .info .banner-txt{bottom: 15rem;}
    #banner .item .info p{bottom: 12rem;}
}
    
@media screen and (max-width: 1460px){
    #banner .item a{
    height: 70vh;
}
}
@media screen and (max-width: 1024px) {
    #banner .item a {
        height: 55vh;
    }

    #banner .item .info .banner-txt{bottom: 12rem;}
    #banner .item .info p{bottom: 10rem;}
    #scrollBtn{display: none;}
}

@media screen and (max-width: 960px){
    #banner .item a{
    height: 50vh;
}
    #banner .item .info .banner-txt{
    font-size: 60px;
}
    #banner .item .info p{
    font-size: 30px;
}
}

@media screen and (max-width: 768px){
    #banner .item a{
    height: 39vh;
}
    #banner .item{
    background-position: 12% 50%;
}
    #banner .item .info .banner-txt{bottom: 9rem;}
    #banner .item .info p{bottom: 7rem;}
}
@media screen and (max-width: 640px){
    #banner .item .info .banner-txt{bottom: 9rem;font-size: 34px;}
    #banner .item .info p{bottom: 7.5rem;font-size: 20px;}
}
@media screen and (max-width: 480px){
    #banner .item a{
    height: 50vh;
}
    #banner .item .info .banner-txt{bottom: 13rem;}
    #banner .item .info p{bottom: 11.5rem;}
	#banner .slick-prev, #banner .slick-next{
	    top: auto;
	    bottom: calc(6% - 0px);
	}
	#banner .slick-prev{
    left: auto;
    right: 99px;
}
	#banner .slick-next:before, #banner .slick-prev:before{
    font-size: 25px;
    width: 40px;
    height: 45px;
    background: rgb(255 255 255);
}
}
@media screen and (max-width: 380px){
    #banner .item a{
    height: 48vh;
}
    #banner .item .info .banner-txt{bottom: 12rem;font-size: 28px;}
    #banner .item .info p{bottom: 10.5rem;font-size: 16px;}
}