@charset "utf-8";
#g9x {text-align: center;margin: 0 auto;}
#hello{position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; z-index: 9999999; color: #ffffff;  text-align: center; }
#hello .texts{position: absolute;top: 50%; left: 0; width: 100%;font-size: 40px; line-height: 42px;}
.hs{ opacity:0; filter: alpha(opacity=0); transform:translateY(4%); transition:all 0.3s linear; }
.hs.active{ opacity:1; filter: alpha(opacity=100); transform:translateY(0px); }
.pr{ position:relative; overflow:hidden; }
.pa{ position:absolute; }


#g9x .middle{ font-size: 2.6vw; line-height: 1.0; font-weight: bold;letter-spacing: 1px; }
#g9x .m{font-size: 1.0vw;line-height: 1.0;color:#000000;letter-spacing: 1px;}
#g9x .s{font-size: 1.0vw;line-height: 1.0;letter-spacing: 1px;}
#g9x .blur{color: #373bb9;font-weight: bold}
#g9x .green{background: linear-gradient(to bottom, #b1e698, #d7f6ca); -webkit-background-clip: text; color: transparent;}
#g9x .silver{background: linear-gradient(to bottom, #c6c6c6, #e5e5e5); -webkit-background-clip: text; color: transparent;}
#g9x .black{background: linear-gradient(to bottom, #464a4d, #b4b8bb); -webkit-background-clip: text; color: transparent;}
#g9x .margin_top{margin-top: 4%}

#g9x .box1 .pa{top:5%;width: 100%;}
#g9x .box1 .middle{font-size: 6.2vw;line-height: 1.6;letter-spacing: 2px;}
#g9x .box1 .m{font-size: 2.6vw}

#g9x .box2{margin: 5% auto 5% auto;position: relative;}
#g9x .box2 .fixed{position: relative;width: 100%}
#g9x .box2 .item-list{width: 96%; overflow: hidden;margin: 0 auto}
#g9x .box2 .box{display: flex;justify-content: start;gap: 20px;margin: 0 auto;will-change: transform;align-items: center}
#g9x .box2 .box .mt{flex: 0 0 auto;overflow: hidden;width: calc((100% - 20px)/3);height: 670px;position: relative}
#g9x .box2 .box .mt .mt-box{background-color: #f6f6f6;overflow: hidden;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);height: 100%;width: 100%}
#g9x .box2 .box .mt .mt-box.active{height: 50%;width: 50%}
.item-wrap{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);width: 100%;height: 670px}
#g9x .box2 .box img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);z-index: 1}
#g9x .box2 .box img.active_pic{position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -32%);z-index: 1}
#g9x .box2 .box img.active_left{transform: translate(-45%, -50%)}
#g9x .box2 .box img.active_bottom{transform: translate(-50%, -47%)}
#g9x .box2 .box .mt .pa{top:0;left: 0;width: 100%;height: 670px;z-index: 3}
#g9x .box2 .box .mt .mt1{position:absolute;top:5.5%;width: 100%;z-index: 2}
#g9x .box2 .box .mt .mt2{position:absolute;bottom:6%;width: 100%;z-index: 2}
#g9x .box2 .box .mt .m{font-size: 2.2vw;font-weight: bold}
#g9x .box2 .box .mt .s{font-size: 1.8vw;font-weight: bold}
#g9x .box2 .box .mt .item-wrap .active_s{background-image: url("/new/Images/g9x/overflow/2.png");background-repeat: no-repeat;background-size: 100% 100%;position: absolute;bottom: 0;left: 0;z-index: 2;width: 100%;height: 40%}

#g9x .box3{margin-top:15%;padding-bottom: 5%}
#g9x .box3 .m{font-size: 3.2vw;font-weight: bold;}
#g9x .box3 .middle{font-weight: bold;font-size: 6vw;line-height: 2}
#g9x .box3 .s{font-size: 1.2vw;line-height: 1.4}
#g9x .box3 img{margin-top: 3%;width: 82%}
#g9x .box3 .box{position: absolute;bottom: 0;width: 100%;height: 165px}
#g9x .box3 .box .mt{width: 25%;text-align: left;position: absolute}
#g9x .box3 .box .mt .middle{font-size: 4vw;line-height: 1.6}
#g9x .box3 .box .mt1{top:0;left:10%}
#g9x .box3 .box .mt2{top:0;left:28%}
#g9x .box3 .box .mt3{top:0;left:55%}
#g9x .box3 .box .mt4{top:0;left:76%}

#g9x .box4{margin-top: 10%;height: 650vh}
#g9x .box4 .sticky-box{width: 100%;position: sticky;top: 0;overflow: hidden}
#g9x .box4 .sticky-box .content-box{position: relative; width: 100%;}
#g9x .box4 .sticky-box .content-box .img-wrap{width: 100%;position: relative;z-index: 4}
#g9x .box4 .swiper .swiper-slide{opacity:0;}
#g9x .box4 .swiper .swiper-slide-active{opacity:1;}
#g9x .box4 .sticky-box .swiper-slide .img-box{position: relative;height: 100vh;}
#g9x .box4 .sticky-box .swiper-slide .img-box .pic{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: auto;
    height: 90%;
    z-index: 3;
}
#g9x .box4 .sticky-box .swiper-slide .img-box .big-title{  position: absolute; left: 0; bottom:0; width: 20%; z-index: 1; }
#g9x .box4 .sticky-box .swiper-slide .img-box .bg{ width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; }
#g9x .box4 .sticky-box .swiper-slide .img-box .bg1{
    background-image: url("/new/Images/g9x/overflow/4-1-2.webp"); background-repeat: no-repeat;background-size: 100% 100%;
}
#g9x .box4 .sticky-box .swiper-slide .img-box .bg2{
    background-image: url("/new/Images/g9x/overflow/4-2-2.webp");background-repeat: no-repeat;background-size: 100% 100%;
}
#g9x .box4 .sticky-box .swiper-slide .img-box .bg3{
    background-image: url("/new/Images/g9x/overflow/4-3-2.webp");background-repeat: no-repeat;background-size: 100% 100%
}
#g9x .box4 .sticky-box .swiper-slide .img-box .bg img{height: 100%}
#g9x .box4 .sticky-box .swiper-slide .img-box .text{ position: absolute;  width: 50%; height: 100%;  top:20% }
#g9x .content-box .text-all-box{  width: 46%; position: absolute; top: 25%; right: 0; z-index: 3; text-align: left; display: none; }
/*#g9x .content-box .text-all-box >:nth-child(1){opacity: 1}*/
#g9x .content-box .text-all-box .text .middle{ font-size: 4.1vw; height: 4.1vw}
#g9x .content-box .text-all-box .text >:nth-child(2){margin-top: 5%}
#g9x .content-box .text-all-box .text .s{ line-height: 1.4; }
#g9x .content-box .last-box{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 20%;
    right: -50%;
    z-index: 2;
    opacity: 0;
}
#g9x .content-box .last-box .pr{width: 85%;height: 60%}
#g9x .content-box .last-box .pr .img_s{width: 100%;height: 100%}
#g9x .content-box .last-box .pr .img_s_s{width: 90%;margin: 0 auto}
#g9x .content-box .last-box .pa{top:0;left: 5%;color: #FFFFFF;}
#g9x .content-box .last-box .pa .middle{font-size: 2.8vw;font-weight: bold;line-height: 2.4;text-align: left}
#g9x .content-box .last-box .pa .s{line-height: 1.6;text-align: left}
#g9x .content-box .last-box .pa .img-all{margin-top: 20%}
#g9x .content-box .last-box .pa .img-all .m{font-size: 2vw;color: #FFFFFF;line-height: 4;font-weight: bold}
#g9x .content-box .all-img-all{  width: 46%; position: absolute;  top: 72%;  right: 0; z-index: 4; text-align: left;  display: none; }
#g9x .content-box .sub-img-all{width: 150px;display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: center;}
#g9x .sub-img-all .img1{background-image: url("/new/Images/g9x/overflow/4-1-3.webp");width: 44px;height: 44px;background-repeat: no-repeat;background-position: center}
#g9x .sub-img-all .img1.active{background-image: url("/new/Images/g9x/overflow/4-1-4.webp");width: 44px;height: 44px;background-repeat: no-repeat;background-position: center}
#g9x .sub-img-all .img2{background-image: url("/new/Images/g9x/overflow/4-2-3.webp");width: 44px;height: 44px;background-repeat: no-repeat;background-position: center}
#g9x .sub-img-all .img2.active{background-image: url("/new/Images/g9x/overflow/4-2-4.webp");width: 44px;height: 44px;background-repeat: no-repeat;background-position: center}
#g9x .sub-img-all .img3{background-image: url("/new/Images/g9x/overflow/4-3-3.webp");width: 44px;height: 44px;background-repeat: no-repeat;background-position: center}
#g9x .sub-img-all .img3.active{background-image: url("/new/Images/g9x/overflow/4-3-4.webp");width: 44px;height: 44px;background-repeat: no-repeat;background-position: center}

#g9x .box5{margin-top: 5%}
#g9x .box5 .pa{top:8%;width: 100%}
#g9x .box5 .pa .m{font-size: 2.8vw;font-weight: bold}
#g9x .box5 .pa .middle{font-size: 5.4vw;line-height: 2}
#g9x .box5 .pa .s{line-height: 1.4}

#g9x .box6{margin-top: 8%}
#g9x .box6 .m{font-size: 2.8vw;font-weight: bold}
#g9x .box6 .middle{font-size: 5.4vw;line-height: 2}
#g9x .box6 .img{width: 54%;margin: 8% auto 0 auto}
#g9x .box6 .box{display: flex;width: 54%;margin: 3% auto 0 auto;align-items:center }
#g9x .box6 .box .mt1{width: 72%;text-align: left}
#g9x .box6 .box .mt2{width: 28%;text-align: left}
#g9x .box6 .box .m{font-size: 4vw}
#g9x .box6 .box .s{line-height: 1.4;}
#g9x .box6 .box .mt2 .m{line-height: 1.4}

#g9x .box7{margin-top: 8%}
#g9x .box7 .m{font-size: 2.8vw;font-weight: bold}
#g9x .box7 .middle{font-size: 5.4vw;line-height: 2}
#g9x .box7 .s{line-height: 1.4}
#g9x .box7 img{margin: 3% auto 0 auto;width: 70%}
#g9x .box7 .box{width: 70%;margin: 0 auto;height: 220px}
#g9x .box7 .box .pa{text-align: left}
#g9x .box7 .box .pa .m{font-size: 4vw;line-height: 1.4}
#g9x .box7 .box .pa .s{line-height: 2;font-size: 1.2vw}
#g9x .box7 .box .mt1{top:15%;left:20%}
#g9x .box7 .box .mt2{top:15%;right:20%}

#g9x .box8{margin-top: 6%}
#g9x .box8 .m{font-size: 2.8vw;font-weight: bold}
#g9x .box8 .middle{font-size: 5.4vw;line-height: 2}
#g9x .box8 img{margin: 3% auto 0 auto;width: 70%}

#g9x .box9{background-color: #f6f6f6}
#g9x .box9 .box{display: flex;width: 70%;margin: 0 auto; align-items: center; padding: 6% 0 6% 0;justify-content: space-between;text-align: left}
#g9x .box9 .box .mt1{width: 55%;}
#g9x .box9 .box .mt2{width: 38%;}
#g9x .box9 .box .mt2 .middle{font-size: 4vw;line-height: 1.2}
#g9x .box9 .box .mt2 >:nth-child(4){margin-top: 6%}
#g9x .box9 .box .mt2 .s{line-height: 1.4}

#g9x .box10{margin-top: 10%}
#g9x .box10 .m{font-size: 2.8vw;font-weight: bold}
#g9x .box10 .middle{font-size: 5.4vw;line-height: 2}
#g9x .box10 .img-k{margin: 6% auto 8% auto;width: 41%}
#g9x .box10 .pic3{position: absolute;bottom: 0;left:0;animation: is_play 5s infinite;}
#g9x .box10 .pic4{position: absolute;bottom: 27%;left: 24%;width: 51.8%}

#g9x .box11{background-color: #f6f6f6}
#g9x .box11 .pic1{padding-top: 15%;width: 17.4%}
#g9x .box11 .middle{font-size: 2.9vw;line-height: 2.4}
#g9x .box11 .s{font-size: 1.2vw;margin-bottom: 5%}
.slide-height{height: 320vh}
#g9x .box11 .sticky-box{width: 100%;position: sticky;top: 0;overflow: hidden}

#g9x .box11 .swiper{width: 100%;}
#g9x .box11 .swiper .swiper-slide{opacity:0;height: 100vh}
#g9x .box11 .swiper .swiper-slide-active{opacity:1;}
#g9x .box11 .swiper .pa{top:23%;left: 23%;text-align: left}
#g9x .box11 .swiper .pa .s{line-height: 1.6;margin: 0}

#g9x .box12{margin-top: 5%}
#g9x .box12 .pa{left:13%;top:50%}
#g9x .box12 .pa a{font-size: 2.8vw;color: #000000;text-decoration: none;font-weight: bold}

.all{overflow: hidden}
.all-img{width: 100%; height: 100%;margin-top: -134%;}
@keyframes is_play {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}