@charset "utf-8";
/* head */
#header .head {height: 100vh; padding: 100px 0 0;}
#header .head .wrap,
#header .head .wrap .main,
#header .head .wrap .main .video-box {width: 100%; height: 100%;}
#header .head .wrap .main .video-box .video {width: 100%; height: 100%; object-fit: cover;}
#header .head .wrap .scrolldown {position: absolute; left: 50%; bottom: 10px; transform: translate(-50%,0); z-index: 98; text-align: center;}
#header .head .wrap .scrolldown div {font-size: 12px; color: #fff;}
#header .head .wrap .scrolldown span {display: block; margin: 7px auto 0; width: 1px; height: 20px; background-color: #fff; position: relative;}
@keyframes scrollanimeA {
    0% {
        bottom: 100%;
        opacity: 1
    }

    5% {
        bottom: 100%;
        opacity: 1
    }

    75% {
        bottom: 0;
        opacity: 1
    }

    100% {
        bottom: 0;
        opacity: 0
    }
}
.swiper-box .scrolldown span::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 100%; background-color: #fff; animation: 3.2s scrollanimeA ease infinite 3.32s;}
@keyframes scrollanimeB {
    0% {
        top: 0;
        opacity: 1;
        transform: translate(0, -50%) scale(0)
    }

    5% {
        top: 0;
        opacity: 1;
        transform: translate(0, -50%) scale(1)
    }

    75% {
        top: 100%;
        opacity: 1;
        transform: translate(0, -50%) scale(1)
    }

    100% {
        top: 100%;
        opacity: 0;
        transform: translate(0, -50%) scale(3)
    }
}
#header .head .wrap .scrolldown span::after {content: ""; display: block; width: 5px; height: 5px; background-color: #fff; border-radius: 50%; position: absolute; top: 0; left: -100px; right: -100px; margin: 0 auto; animation: 3.2s scrollanimeB ease infinite 3.32s; transform: translate(0,-50%) scale(0);}
@media screen and (max-width:768px) {
    #header .head {padding: 70px 0 0;}
}
/* product */
#product .wrap .content.product-1 {padding: 200px 0 0;}
#product .wrap .content.product-2 {padding: 0 0 200px;}
#product .wrap .slider .swiper.swiper-product {padding: 100px 0;}
#product .wrap .slider .swiper.swiper-product .swiper-wrapper {transition-timing-function: linear; list-style: none;}
#product .wrap .slider .swiper.swiper-product .swiper-wrapper .swiper-slide .box .img {position: relative;}
#product .wrap .slider .swiper.swiper-product .swiper-wrapper .swiper-slide .box .img img {border-radius: 20px;}
#product .wrap .slider .swiper.swiper-product .swiper-wrapper .swiper-slide .box .ttl {position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 32, 96, 0.7);}
#product .wrap .slider .swiper.swiper-product .swiper-wrapper .swiper-slide .box .ttl h3 {color: #fff; text-align: center; line-height: 2.5;}
@media screen and (max-width:1400px) {
    #product .wrap .content.product-1 {padding: 200px 20px 0;}
    #product .wrap .content.product-2 {padding: 0 20px 200px;}
}
@media screen and (max-width:768px) {
    #product .wrap .content.product-1 {padding: 150px 20px 0;}
    #product .wrap .content.product-2 {padding: 0 20px 150px;}
    #product .wrap .slider .swiper.swiper-product {padding: 70px 0;}
    #product .wrap .slider .swiper.swiper-product .swiper-wrapper .swiper-slide .box .img img {border-radius: 10px;}
    #product .wrap .slider .swiper.swiper-product .swiper-wrapper .swiper-slide .box .ttl h3 {line-height: 1.75;}
}