@charset "UTF-8";
#note100x{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;}
#note100x .big{ font-size: 5vw;  transition:all 0.3s linear; letter-spacing: 1px;}
#note100x .big sup{font-size: 1.6vw}
#note100x .middle{ font-size: 4.4vw; line-height: 1.2;   }
#note100x .small{ font-size: 1.2vw; line-height: 1.2;  transition:all 0.3s linear; }
#note100x .m{font-size: 1.9vw; line-height: 1;}
#note100x .s{font-size: 1.0vw;line-height: 1.0;color: #4D4D4D;}
.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); }
#note100x .orange { background: linear-gradient(to right, #45a0ef 0%, #d36c7f 100%); -webkit-background-clip: text; color: transparent; font-size: 1.6666vw;font-weight: bold}

#note100x .blur{color: #5480c7}
.pr{ position:relative; }
.pa{ position:absolute; }
.floatLeft{ float:left; }
#note100x .marginTop{margin-top: 5%}
#note100x .gemini{cursor: pointer}

#note100x .box1{ background-image: url("/new/Images/note100x/overflow/1.webp");background-repeat: no-repeat;background-size: 100% 100%;background-position: center}
#note100x .box1 .middle{font-size: var(--eighty-five)}
#note100x .box1 .m{margin-top: 4.5%;font-size: var(--forty)}
#note100x .box1 .s{font-size: var(--forty);margin-top: 4.2%;color: #000000}
#note100x .box1 .pa1{width: 100%;height: 100%;top: -100%;animation: slideIn 0.7s forwards;z-index: 2}
#note100x .box1 .pa2{width: 100%;height: 100%;top: -100%;animation: slideIn 1s forwards;z-index: 3}
#note100x .box1 .fade-in-image{width: 100%;height: 100%;transform: translateY(-100%); animation: slideTwoIn 0.4s forwards;will-change: transform}
#note100x .box1 .pa3{top: 21%;left: 7.5%;z-index: 4}
#note100x .box1 .pa3 >:nth-child(3){margin-top: 8%}
@keyframes slideIn {
    0% { top: -100%; } /* 开始时图片在容器顶部之外 */
    100% { top: 0; } /* 结束时图片在容器顶部 */
}
@keyframes slideTwoIn {
    0% { transform: translateY(-100%); } /* 开始时图片在容器顶部之外 */
    100% { transform: translateY(0); } /* 结束时图片在容器顶部 */
}

#note100x .box2{width: 68.334vw;margin: 4.948vw auto 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;column-gap: var(--eight);row-gap: var(--eight)}
#note100x .box2 .mt{background-color: #f5f5f5;border-radius: var(--twenty);overflow: hidden;cursor: pointer;display: block}
#note100x .box2 .mt .img{overflow: hidden;border-radius: var(--twenty);}
#note100x .box2 .mt .img_s{transition: all 0.3s linear;}
#note100x .box2 .mt .img_s:hover{transform: scale(1.1);}
#note100x .box2 .mt .text{padding:0.938vw 0 0.938vw 0.781vw;text-align: left; }
#note100x .box2 .mt .middle{font-size: var(--twenty-eight);color: #000000}
#note100x .box2 .s{font-size: var(--twenty);line-height: 1.4}
#note100x .box2 .mt1,#note100x .box2 .mt4{width: 45.417vw}
#note100x .box2 .mt2,#note100x .box2 .mt3,#note100x .box2 .mt5,#note100x .box2 .mt6,#note100x .box2 .mt7{width: 22.5vw}
#note100x .box2 .mt8,#note100x .box2 .mt9{width: 33.906vw}

#note100x .box3{margin-top: 2.864vw}
#note100x .box3 .m{font-size: 1.6vw;font-weight: bold}
#note100x .box3 .middle{font-size: 3.4vw;line-height: 1.0}
#note100x .box3 .s{line-height: 1.2}
#note100x .box3 >:nth-child(2){margin-top: 2.604vw}
#note100x .box3 >:nth-child(4){margin-top: 1.979vw}
#note100x .box3 >:nth-child(6){margin: 4.583vw auto 0 auto;width: 68.333vw;}

#note100x .box4{width: 68.229vw;margin: 4.167vw auto 0 auto;overflow: hidden}
#note100x .box4 .swiper-slide{opacity: 0}
#note100x .box4 .swiper-slide-active{opacity: 1}
#note100x .box4 .pa{bottom: 17%;right: 1.5%;z-index: 2}
#note100x .box4 .middle{font-size: 2.95vw;font-weight: bold;margin-top: 7.6125vw;line-height: 1}
#note100x .box4 .flex{display: flex;justify-content: space-between;flex-wrap: nowrap}
#note100x .box4 .flex .img1{width: 43.333vw;}
#note100x .box4 .flex .img2{width: 22.5vw;}
#note100x .box4 .flex .img2 img{height: 12.24vw;}
/*#note100x .box4 .flex .img2 .middle{font-size: 2.95vw;font-weight: bold;margin-top: 7.6125vw;line-height: 1}*/
#note100x .box4 .swiper-pagination-one {width: 22vw;right: 0;bottom: 0;text-align: center;position:absolute;}
#note100x .box4 .swiper-pagination-one .swiper-pagination-bullet{width: 33%;background:inherit;text-align: center;margin: 0 auto;opacity: 1;border-radius:inherit;height: auto;}
#note100x .box4 .swiper-pagination-one .swiper-pagination-bullet .lines{width: 100%}
#note100x .box4 .swiper-pagination-one .swiper-pagination-bullet .img1{background-image: url("/new/Images/note100x/overflow/3-11.png");height: 1.667vw;background-repeat: no-repeat;background-position: center;background-size: 1.667vw}
#note100x .box4 .swiper-pagination-one .swiper-pagination-bullet-active .img1{background-image: url("/new/Images/note100x/overflow/3-1.png");height: 1.667vw;background-repeat: no-repeat;background-position: center;background-size: 1.667vw}
#note100x .box4 .swiper-pagination-one .swiper-pagination-bullet .img2{background-image: url("/new/Images/note100x/overflow/3-21.png");height: 1.667vw;background-repeat: no-repeat;background-position: center;background-size: 1.667vw}
#note100x .box4 .swiper-pagination-one .swiper-pagination-bullet-active .img2{background-image: url("/new/Images/note100x/overflow/3-2.png");height: 1.667vw;background-repeat: no-repeat;background-position: center;background-size: 1.667vw}
#note100x .box4 .swiper-pagination-one .swiper-pagination-bullet .img3{background-image: url("/new/Images/note100x/overflow/3-31.png");height: 1.667vw;background-repeat: no-repeat;background-position: center;background-size: 1.667vw}
#note100x .box4 .swiper-pagination-one .swiper-pagination-bullet-active .img3{background-image: url("/new/Images/note100x/overflow/3-3.png");height: 1.667vw;background-repeat: no-repeat;background-position: center;background-size: 1.667vw}
#note100x .box4 .swiper-pagination-one .texts .big{font-size: 0.95vw;line-height: 1.6}

#note100x .box5{margin-top: 9.375vw}
#note100x .box5 .m{font-size: 1.8vw;font-weight: bold}
#note100x .box5 .middle{font-size: 3.35vw;line-height: 1.0}
#note100x .box5 .s{line-height: 1.2;font-size: 1.03vw}
#note100x .box5 >:nth-child(2){margin-top: 2.083vw}
#note100x .box5 >:nth-child(4){margin-top: 1.979vw}
#note100x .box5 >:nth-child(6){margin: 7.604vw auto 0 auto;width: 67.708vw;}

#note100x .box6{}
#note100x .box6 .m{font-size: 1.8vw;font-weight: bold}
#note100x .box6 .middle{font-size: 3.35vw;line-height: 1.0}
#note100x .box6 >:nth-child(2){margin-top: 2.083vw}
#note100x .box6 .box6-1{height: 500vh;}
#note100x .box6 .sticky-box{position: sticky;top: 5%;width: 100%}
#note100x .box6 .flex{display: flex;justify-content: flex-start;align-items: flex-start;gap: 5.521vw;flex-wrap: nowrap}
#note100x .box6 .flex .mt1{width: 54%;padding-top: 7.1875vw;}
#note100x .box6 .flex .mt1 .pa{bottom: 0;right: 0;z-index: 2;/*bottom: 11%;right: 12%*/}
#note100x .box6 .flex .mt2{text-align: left;padding-top: 7.1875vw;}
#note100x .box6 .flex .mt2 .middle{font-weight: bold;font-size: 2.06vw;line-height: 1.2}
#note100x .box6 .flex .mt2 .s{font-size: 1.02vw;line-height: 1.2}
#note100x .box6 .flex .mt2 .flex-box{translateY(60%);opacity: 0}
#note100x .box6 .flex .mt2 .flex-box12{animation: slideFourIn 0.7s forwards;}
#note100x .box6 .flex .mt2 .flex-box >:nth-child(5){margin-top: 0.521vw;}
#note100x .box6 .flex .mt2 .flex-box1{margin-top: 3.125vw;translateY(60%);opacity: 0}
#note100x .box6 .flex .mt2 .flex-box11{animation: slideFourIn 1s forwards;}
#note100x .box6 .flex .mt2 .flex-box1 >:nth-child(2){margin-top: 0.521vw;}
#note100x .box6 .flex .mt2 .flex-box1 >:nth-child(3){margin-top: 1.96vw;}
#note100x .box6 .flex .mt2 .flex-box1 >:nth-child(4){margin-top: 1.85vw;}
#note100x .box6 .flex .mt2 .flex-box1 >:nth-child(5){margin-top: 1.75vw;}
#note100x .box6 .flex .mt2 .flex-box1 >:nth-child(6){margin-top: 0.521vw;}
@keyframes slideThreeIn {  0% { top: 60%; }  100% { top: 35%; } }
@keyframes slideFourIn {
    0% { transform: translateY(60%); } /* 开始时图片在容器顶部之外 */
    100% { transform: translateY(0); } /* 结束时图片在容器顶部 */
}

#note100x .box7{margin-top: 15.93vw;}
#note100x .box7 .box7-1{display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: flex-end;width: 68.229vw;margin: 0 auto}
#note100x .box7 .box7-1 .middle{font-size: 2.083vw;font-weight: bold;line-height: 1.2;padding-left: 1.667vw;}
#note100x .box7 .box7-1 .s{line-height: 1.2;font-size: 1.04vw;}
#note100x .box7 .box7-1 .mt1{width: 50%;text-align: left;}
#note100x .box7 .box7-1 .mt2{width: 50%;text-align: left;}
#note100x .box7 .box7-1 .mt2 >:nth-child(2){margin-bottom: 2px;}
#note100x .box7 .box7-2{margin-top: 6.25vw;height: 600vh;width: 100%}
#note100x .box7 .sticky-box{position: sticky;top: 0;width: 100%}
#note100x .box7 .sticky-box .img{overflow: hidden;}
#note100x .box7 .sticky-box .pa1{top:10%;left: 16%;width: 68.229vw;opacity: 0;z-index: 2}
#note100x .box7 .sticky-box .pa2{top:10%;left: 16%;width: 68.229vw;opacity: 0;z-index: 3}
#note100x .box7 .sticky-box .showIn{animation: slideFiveIn 1s forwards;}
@keyframes slideFiveIn {
    0% { left: 100%; } /* 开始时图片在容器顶部之外 */
    100% { left: 16%; } /* 结束时图片在容器顶部 */
}

#note100x .box8{background-color: #f5f6fa;margin-top: 5.208vw;}
#note100x .box8 .box8-1{height: 600vh;}
#note100x .box8 .box8-1 .sticky-box{position: sticky;top: 8%;width: 100%}
#note100x .box8 .box{padding-top: 5.208vw;opacity: 0}
#note100x .box8 .middle{font-size: 2.083vw;font-weight: bold}
#note100x .box8 .s{font-size: 1.041vw;line-height: 1.4}
#note100x .box8 .box >:nth-child(3){padding-top: 0.781vw;}
#note100x .box8 .box8_img{width: 21.771vw;margin: 4.6875vw auto 0 auto;height: 18.75vw;transform: translateY(-12vw)}
#note100x .box8 .base_img{width: 14.427vw;}
#note100x .box8 .box8_bottom{padding-top: 15.885vw;width: 100%}
#note100x .box8 .box8_bottom .s{padding-top: 1.041vw;}
#note100x .box8 .box8_bottom img{margin-top: 3.90625vw;}
#note100x .box8 .pa{left: 3.8vw;top: 0;}
#note100x .box8 .pa1{width: 14.427vw;z-index: 2 ;}
#note100x .box8 .pa2{width: 15.78125vw;z-index: 3;}
#note100x .box8 .pa3{width: 21.771vw;z-index: 4;}
#note100x .box8 .pa4{width: 20.833vw;z-index: 5;}
#note100x .box8 .pa5{width: 12.760vw;z-index: 6;}
#note100x .box8 .pa6{width: 14.0625vw;z-index: 7;}
#note100x .box8 .pa0{width: 14.427vw;z-index: 1;}

#note100x .box9{width: 68.333vw;margin: 0 auto}
#note100x .box9 .m{font-size: 1.8vw;font-weight: bold;margin-top: 5.46875vw;}
#note100x .box9 .middle{font-size: 2.083vw;font-weight: bold}
#note100x .box9 .s{font-size: 1.041vw;line-height: 1.4}
#note100x .box9 .box9-1 >:nth-child(2){margin-top: 1.8229vw;}
#note100x .box9 .box9-1 >:nth-child(4){margin-top: 0.78125vw;}
#note100x .box9 .box9-1 img{margin-top: 4.948vw;}
#note100x .box9 .box9-2{width: 68.333vw;margin: 3.125vw auto 0 auto;display: flex;justify-content: space-between;flex-wrap: nowrap;}
#note100x .box9 .box9-2 .mt{width: 33.646vw;}
#note100x .box9 .box9-2 .pa{top: 2.083vw;left:2.34375vw;text-align: left}
#note100x .box9 .box9-2 .pa >:nth-child(2){margin-top:1.302vw;}

#note100x .box10{margin-top: 6.25vw;width: 100%;background-image: url("/new/Images/note100x/overflow/10-2.webp");background-repeat: no-repeat;background-size: 100% 100%;background-position: center}
#note100x .box10-1{height: 400vh;width: 100%}
#note100x .box10-1 .sticky-box{position: sticky;top: 10%;width: 100%}
#note100x .box10 .right_img{width: 41.146vw;margin: 0 auto;transform: translateX(15.885vw)}
#note100x .box10 .pa{left: 18.75vw;top: 6.2vw;text-align: left;opacity: 0}
#note100x .box10 .pa .middle{font-size: 3.49vw;font-weight: bold}
#note100x .box10 .pa .s{font-size: 1.041vw;line-height: 1.4}
#note100x .box10 .pa >:nth-child(3){margin-top: 1.5625vw;}
#note100x .box10 .pa >:nth-child(6){margin-top: 1.5625vw;}

#note100x .box11{padding-bottom: 4.948vw;}
#note100x .box11 .middle{font-size: 3.177vw;font-weight: bold;margin-top: 8.334vw}
#note100x .box11 .s{font-size: 1.041vw;line-height: 1.4}
#note100x .box11 >:nth-child(2){margin-top: 1.042vw;}
#note100x .box11 img{width: 59.21875vw;}
/*#note100x .box7 .swiper{width: 68.229vw;margin: 0 auto;overflow: hidden;display: none}
#note100x .box7 .swiper .swiper-slide{opacity: 0}
#note100x .box7 .swiper .swiper-slide-active{opacity: 1}*/
#note100x .box12{background-color: #f0f0f0;}
#note100x .box12 .box12-1{width: 68.333vw;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;padding-top: 2.083vw;}
#note100x .box12 .box12-1 .mt{background-color: #FFFFFF;border-radius: 10px}
#note100x .box12 .box12-1 .mt1{width: 33.90625vw;margin-top: 0.521vw}
#note100x .box12 .box12-1 .mt2{width: 33.64583vw;margin-top: 0.521vw}
#note100x .box12 .box12-1 .pa{left: 1.823vw;text-align: left;top: 1.5625vw;z-index: 2}
#note100x .box12 .box12-1 .pa .middle{font-size: 2.083vw;font-weight: bold}
#note100x .box12 .box12-1 .pa .s{font-size: 1.041vw;line-height: 1.4}
#note100x .box12 .box12-1 .pa >:nth-child(2){margin-top: 0.78125vw;}
#note100x .box12 .box12-2{width: 68.333vw;margin: 0.521vw auto 0 auto;padding-bottom: 4.167vw;}
#note100x .box12 .box12-2 .pa1{top: 2.083vw;width: 100%}
#note100x .box12 .box12-2 .pa1 .middle{font-size: 2.083vw;font-weight: bold}
#note100x .box12 .box12-2 .pa1 .middle span{font-size: 2.083vw;}
#note100x .box12 .box12-2 .pa2{left: 16.927vw;top: 17.4479vw;}
#note100x .box12 .box12-2 .pa3{right: 19.427vw;top: 17.4479vw;}
#note100x .box12 .box12-2 .pa4{left: 19.271vw;bottom: 12.8125vw;}
#note100x .box12 .box12-2 .pa5{right: 19.427vw;bottom: 12.8125vw;}
#note100x .box12 .box12-2 .pa6{bottom: 6.5104vw;width: 100%}

#note100x .box13{width: 100%;}
#note100x .box13 .pa{left: 18.8%;top: 38%}
#note100x .box13 .pa a{font-size: 2.6042vw;color: #000000;text-decoration: none;font-weight: bold}
#note100x .box13 img{width: 100%}


.all{overflow: hidden}
.all-img{width: 100%; height: 100%;margin-top: -737%;}