@charset "utf-8";
/*
* @Description: Index Css
* @Author: Sun Jia
* @Date: 2025-02-10
*/

.banner{
    position: relative;
    overflow: hidden;
}
.banner .gp-img-responsive{
    padding-bottom: 32.44%;
}
.banner .gp-img-responsive img:hover{
    opacity: 1;
}
.banner-arrow{
    width: 100%;
    position: absolute;
    bottom: 36.6%;
    z-index: 2;
    pointer-events: none;
}
.banner-arrow .btn{
    width: 66px;
    height: 66px;
    line-height: 66px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.35s ease;
    color: #fff;
    text-align: center;
    pointer-events: all;
}
.banner-arrow .btn:hover{
    background: rgba(0, 0, 0, 0.5);
}
.banner-button-prev{
    float: left;
}
.banner-button-next{
    float: right;
}
.banner-arrow .btn::before{
    font-size: 22px;
}

/* row01 */
.row01{
    padding: 60px 0 80px;
    background: url(../images/banner-bt.png) no-repeat center top;
    background-size: 100% auto;
}
.modeTil{
    color: #fff;
    height: 36px;
    line-height: 36px;
}
.modeTil a{
    display: block;
    color: #fff;
    flex-shrink: 0;
}
.modeName{
    position: relative;
    margin-top: -22px;
}
.modeName .EN{
    font-family: 'PangMenZhengDao';
    box-sizing: content-box;
    background: linear-gradient(180deg, rgb(47, 109, 188), rgba(47, 109, 188, 0));
    background: -webkit-linear-gradient(-90deg, rgb(47, 109, 188), rgba(47, 109, 188, 0));
    background: -moz-linear-gradient(-180deg, rgb(47, 109, 188), rgba(47, 109, 188, 0));
    /* 将背景剪裁到文本 */
    -webkit-background-clip: text;
    /* 使文本颜色透明，显示背景颜色 */
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.modeName .CH{
    width: 100%;
    text-align: center;
    font-family: 'MFLangQian';
    position: absolute;
    left: 50%;
    top: 22px;
    transform: translateX(-50%);
    z-index: 1;
}
.service{
    position: relative;
}
.service .tilList{
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    gap: 14px;
    color: #fff;
}
.service .tilList .boxTitle{
    position: relative;
    min-width: 175px;
    text-align: center;
    height: 65px;
    line-height: 65px;
}
.service .tilList .boxTitle.on{
    background: url(../images/tab_bg.png) no-repeat center top;
    color: #005aa0;
}
.service .tilList .boxTitle::before{
    content: '';
    display: block;
    width: 30px;
    height: 15px;
    background: url(../images/tab_ico.png) no-repeat center/cover;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    bottom: -5px;
}
.service .tilList .boxTitle.off::before{display: none;}
.service .boxList{
    position: relative;
    background: #fff;
    border-radius: 15px 15px 0 0;
    margin-top: 36px;
    padding: 0 40px;
    text-align: center;
}
.service .box{
    display: none;
}
.service .box.on{
    display: block;
    animation: tabShow 0.35s ease forwards;
}
@keyframes tabShow {
    0%{ opacity: 0;transform: translateY(70px);}
    100%{ opacity: 1;transform: translateY(0px);}
}
.boxTab{
    overflow: hidden;
    overflow-x: clip;
    /* padding: 36px 0 40px; */
}
.boxTab .swiper-slide{
    padding: 36px 0 40px;
    z-index: 1;
}
.boxTab .swiper-slide::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    max-width: 160px;
    background-image: -moz-linear-gradient( -114deg, rgb(68,138,202) 0%, rgba(68,138,202,0) 100%);
    background-image: -webkit-linear-gradient( -114deg, rgb(68,138,202) 0%, rgba(68,138,202,0) 100%);
    background-image: -ms-linear-gradient( -114deg, rgb(68,138,202) 0%, rgba(68,138,202,0) 100%);
    background-color: #0068b7;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.boxTab .swiper-slide:hover::before{
    -webkit-transition: all .5s ease-in-out .3s;
	-moz-transition: all .5s ease-in-out .3s;
	-ms-transition: all .5s ease-in-out .3s;
	-o-transition: all .5s ease-in-out .3s;
	transition: all .5s ease-in-out .3s;
    top: 0;
}
.service .icon{
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0 auto;
}
.service .icon div{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/service_cricle.png) no-repeat center/cover;
    -webkit-transition: all .5s ease-in-out 0s;
	-moz-transition: all .5s ease-in-out 0s;
	-ms-transition: all .5s ease-in-out 0s;
	-o-transition: all .5s ease-in-out 0s;
	transition: all .5s ease-in-out 0s;
}
.service .icon .cl{
    clip: rect(0px, 80px, 80px, 40px);
}
.service .swiper-slide:hover .icon .cl{
    clip: rect(0px, 80px, -10px, 40px);
}
.service .icon .cr{
    clip: rect(0px, 40px, 80px, 0px);
}
.service .swiper-slide:hover .icon .cr{
    clip: rect(80px, 40px, 80px, 0px);
}
.service .icon::before{
    content: '';
    display: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f8b551;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: scale(0.3);
    opacity: 0;
}
.service .icon i{
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 100%;
    height: 100%;
    max-width: 51px;
    max-height: 51px;
    z-index: 1;
}
.service .swiper-slide:hover .icon i{
    -webkit-transition: all .5s ease-in-out .4s;
	-moz-transition: all .5s ease-in-out .4s;
	-ms-transition: all .5s ease-in-out .4s;
	-o-transition: all .5s ease-in-out .4s;
	transition: all .5s ease-in-out .4s;
    background-position:  calc(100% + 80px) center !important;
}
.service .icon i span{
    position: absolute;
    right: calc(100% + 15px);
    top: 0;
    width: 100%;
    height: 100%;
}
.service .swiper-slide:hover .icon i span{
    -webkit-transition: all .5s ease-in-out .4s;
	-moz-transition: all .5s ease-in-out .4s;
	-ms-transition: all .5s ease-in-out .4s;
	-o-transition: all .5s ease-in-out .4s;
	transition: all .5s ease-in-out .4s;
    right: 0;
}
/* .service .swiper-slide-active .icon::before, */
.service .swiper-slide:hover .icon::before{
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: scale(1);
    opacity: 1;
    left: -10px;
    top: -6px;
}
.service .icon img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}
.service .name{
    line-height: 1;
    color: #333;
    margin-top: 17px;
}
.service .swiper-slide:hover .name{
    color: White;
	-webkit-transition-delay: .4s;
	-moz-transition-delay: .4s;
	-ms-transition-delay: .4s;
	-o-transition-delay: .4s;
	transition-delay: .4s;
}
.box-button-prev{
    width: 42px;
    height: 42px;
    position: absolute;
    left: -20px;
    top: 50%;
    margin-top: -21px;
    z-index: 1;
}
.box-button-next{
    width: 42px;
    height: 42px;
    position: absolute;
    right: -20px;
    top: 50%;
    margin-top: -21px;
    z-index: 1;
}
.box-button-next img{
    transform: rotateZ(180deg);
}
.box-pagination{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 30px);
}
.box .swiper-pagination-bullet{
    width: 28px;
    height: 2px;
    margin-right: 15px;
    border-radius: 0px;
    background: #005aa0;
    opacity: 0.5;
}
.box .swiper-pagination-bullet.swiper-pagination-bullet-active{
    opacity: 1;
    height: 6px;
}

/* row02 */
.row02{
    padding: 60px 0 66px;
    background: url(../images/row1_bg.jpg) no-repeat center/cover;
}
.row02 .modeName .EN{
    background: linear-gradient(180deg, rgb(27, 99, 189), rgba(27, 99, 189, 0));
    background: -webkit-linear-gradient(-90deg, rgb(27, 99, 189), rgba(27, 99, 189, 0));
    background: -moz-linear-gradient(-180deg, rgb(27, 99, 189), rgba(27, 99, 189, 0));
    /* 将背景剪裁到文本 */
    -webkit-background-clip: text;
    /* 使文本颜色透明，显示背景颜色 */
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.row02 .modeCon{
    margin-top: 50px;
}
.row02 ul{
    justify-content: flex-start;
    flex-wrap: wrap;
}
.row02 li{
    position: relative;
    width: 25%;
    z-index: 1;
}
.row02 li:hover{
    z-index: 2;
}
.row02 li::before,
.row02 li::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: -2;
    transition: all 0.35s ease;
}
.row02 li:nth-of-type(1)::before{
    /* background: #fff; */
}
.row02 li:hover::before,
.row02 li:hover::after{
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 16px;
}
.row02 li:nth-of-type(1)::after{
    background: #fff url(../images/service_bg1.png) no-repeat center/cover;
    z-index: -1;
}
.row02 li:nth-of-type(2)::after{
    background: #0068b7 url(../images/service_bg2.png) no-repeat center/cover;
}
.row02 li:nth-of-type(3)::after{
    background: #fff url(../images/service_bg3.png) no-repeat center/cover;
    z-index: -1;
}
.row02 li:nth-of-type(4)::after{
    background: #0068b7 url(../images/service_bg4.png) no-repeat center/cover;
}
.row02 li:nth-of-type(1):hover::after{
    background: url(../images/service_bg1_hover.png) no-repeat center/cover, url(../images/service_hover2.png) no-repeat bottom right/cover;
    box-shadow: 0px 0px 50px 15px rgba(0, 0, 0, 0.2);
}
.row02 li:nth-of-type(2):hover::after{
    background: url(../images/service_bg2.png) no-repeat center/cover, url(../images/service_hover1.png) no-repeat bottom right/cover;
    box-shadow: 0px 0px 50px 15px rgba(0, 0, 0, 0.2);
}
.row02 li:nth-of-type(3):hover::after{
    background: url(../images/service_bg3_hover.png) no-repeat center/cover, url(../images/service_hover2.png) no-repeat bottom right/cover;
    box-shadow: 0px 0px 50px 15px rgba(0, 0, 0, 0.2);
}
.row02 li:nth-of-type(4):hover::after{
    background: url(../images/service_bg4_hover.png) no-repeat center/cover, url(../images/service_hover3.png) no-repeat bottom right/cover;
    box-shadow: 0px 0px 50px 15px rgba(0, 0, 0, 0.2);
}
.row02 .curName{
    position: relative;
    font-weight: bold;
    line-height: 1;
    padding: 0 30px 30px;
    color: #fff;
}
.row02 .curName::before{
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    background: url(../images/service_ico1.png) no-repeat center/cover;
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 1;
}
.row02 li:hover .curName::before{ display: none;}
.row02 li:nth-of-type(2) .curName::before{
    background: url(../images/service_ico2.png) no-repeat center/cover;
}
.row02 li:nth-of-type(3) .curName::before{
    background: url(../images/service_ico3.png) no-repeat center/cover;
}
.row02 li:nth-of-type(4) .curName::before{
    background: url(../images/service_ico4.png) no-repeat center/cover;
}
.row02 li:nth-of-type(odd) .curName{
    color: #0d51b1;
}
.row02 dl{
    flex-wrap: wrap;
    padding: 15px 30px 20px;
    min-height: 250px;
}
.row02 dd{
    width: 50%;
}
.row02 dd a{
    display: block;
    color: rgba(255, 255, 255, 0.77);
    line-height: 36px;
    transition: all 0.35s ease;
}
.row02 dd a:hover{
    color: #fff;
}
.row02 li:nth-of-type(odd) a{
    color: #555;
}
.row02 li:nth-of-type(odd) a:hover{
    color: #000;
}
.row02 li > a{
    display: none;
    width: 50px;
    height: 40px;
    position: absolute;
    right: -10px;
    bottom: -10px;
    z-index: 1;
}
.row02 li:hover > a{
    display: block;
}

/* row03 */
.row03{
    padding: 60px 0 70px;
    overflow: hidden;
}
.row03 .modeTil,
.row03 .modeTil a{
    color: #0d4e9f;
}
.row03 .modeName .EN{
    background: linear-gradient(180deg, rgb(227, 236, 245), rgba(227, 236, 245, 0));
    background: -webkit-linear-gradient(-90deg, rgb(227, 236, 245), rgba(227, 236, 245, 0));
    background: -moz-linear-gradient(-180deg, rgb(227, 236, 245), rgba(227, 236, 245, 0));
    /* 将背景剪裁到文本 */
    -webkit-background-clip: text;
    /* 使文本颜色透明，显示背景颜色 */
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.row03 .modeCon{
    margin-top: 30px;
}
.row03 .left{
    width: 810px;
    flex-shrink: 0;
    padding-left: 10px;
}
.row03 .left a{
    position: relative;
    display: block;
    z-index: 1;
}
.row03 .left a::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: -moz-linear-gradient( 123deg, rgb(37,187,255) 0%, rgb(13,78,159) 100%);
    background-image: -webkit-linear-gradient( 123deg, rgb(37,187,255) 0%, rgb(13,78,159) 100%);
    background-image: -ms-linear-gradient( 123deg, rgb(37,187,255) 0%, rgb(13,78,159) 100%);
    position: absolute;
    left: -10px;
    top: 10px;
    z-index: -1;
}
.row03 .gp-img-responsive{
    padding-bottom: 56.25%;
}
.row03 .right{
    width: calc(100% - 810px);
    padding-left: 30px;
}
.row03 .right li{ margin-bottom: 30px;}
.row03 .right li:last-child{ margin-bottom: 0px;}
.row03 .right a{
    position: relative;
    display: block;
    padding: 35px 120px 50px 30px;
    z-index: 1;
    transition: all 0.35s ease;
}
.row03 .right a:hover{
    transform: translateY(-8px);
}
.row03 .right a::before{
    content: '';
    display: block;
    width: 120%;
    height: 100%;
    background: url(../images/notice_bg1.png) no-repeat center left;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
}
.notice .title{
    color: #333;
    line-height: 1;
}
.notice .summary{
    line-height: 24px;
    height: 48px;
    color: #999;
    margin-top: 20px;
}
.notice .date{
    font-family: 'Optima';
    color: #005aa0;
    margin-top: 23px;
    line-height: 1;
}
.notice .date:has(.dateIco){
    position: relative;
    padding-left: 20px;
    background: url(../images/date.png) no-repeat left center;
}

/* row04 */
.row04{
    padding: 70px 0;
    background: url(../images/row4_bg.png) no-repeat center/cover;
}
.row04 .modeTil,
.row04 .modeTil a{
    color: #14489d;
}
.row04 .modeName .EN{
    background: linear-gradient(180deg, rgb(244, 249, 255), rgba(244, 249, 255, 0));
    background: -webkit-linear-gradient(-90deg, rgb(244, 249, 255), rgba(244, 249, 255, 0));
    background: -moz-linear-gradient(-180deg, rgb(244, 249, 255), rgba(244, 249, 255, 0));
    /* 将背景剪裁到文本 */
    -webkit-background-clip: text;
    /* 使文本颜色透明，显示背景颜色 */
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.question{
    width: calc(50% - 41px);
}
.question ul{
    flex-wrap: wrap;
}
.question li{
    width: 50%;
    margin-top: 40px;
}
.question li:nth-of-type(1),
.question li:nth-of-type(2){
    margin-top: 30px;
}
.question li:nth-of-type(odd){
    max-width: 300px;
    position: relative;
}
.question li:nth-of-type(even){
    padding-left: 50px;
}
.question li:nth-of-type(odd)::before{
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    max-height: 70px;
    background: #cfdae6;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}
.question li a{
    align-items: center;
    justify-content: flex-start;
}
.question .icon{
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px dashed #f8b551;
}
.question .icon img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    margin-left: 10px;
}
.question .icon::before{
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    background: url(../images/question_circle.png) no-repeat left center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}
.question .animation img,
.question .animation .icon::before{
    animation: hoverRotate 0.8s ease forwards;
}
@keyframes hoverRotate {
    0%{ transform: translate3d(-50%,-50%,0) rotateY(0deg);}
    100%{ transform: translate3d(-50%,-50%,0) rotateY(360deg);}
}
.question li:nth-of-type(1) img{
    width: 55px;
    height: 38px;
}
.question .name{
    margin-left: 26px;
}

.download{
    width: calc(50% - 41px);
}
.download .modeCon{
    margin-top: 30px;
}
.download ul{
    gap: 10px;
}
.download li{
    flex: 1;
}
.download li:nth-of-type(1){
    max-width: 180px;
    background: #5d8ee1;
}
.download .item{
    color: #fff;
    text-align: center;
    min-height: 130px;
    align-items: center;
}
.download dd{
    margin-bottom: 10px;
}
.download dd:last-child{
    margin-bottom: 0;
}
.download dd .item{
    justify-content: center;
    gap: 20px;
}
.download .item.flex-column{ justify-content: center; gap: 30px;height: 100%;}
.download dd:nth-of-type(1) .item:nth-of-type(1){ width: calc(56.73% - 5px);background: #e1b75d;}
.download dd:nth-of-type(1) .item:nth-of-type(2){ width: calc(100% - 56.73% - 5px);background: #85ddac;}
.download dd:nth-of-type(2) .item:nth-of-type(1){ width: calc(45.19% - 5px);background: #8785dd;}
.download dd:nth-of-type(2) .item:nth-of-type(2){ width: calc(100% - 45.19% - 5px);background: #d28975;}
.download .icon{
    text-align: center;
    font-size: 0;
    transition: all 0.8s ease;
}
.download .animation .icon{
    transform: rotateY(360deg);
}





/* Responsive Style */
@media screen and (max-width:1600px){
    
}

@media screen and (max-width:1480px) {
    .row02 .modeCon{
        margin-top: 30px;
    }
    .row02 dl{
        min-height: 240px;
    }
    .row02 dd a{
        line-height: 14px;
    }
    .row03 .left{
        width: 720px;
    }
    .row03 .right{
        width: calc(100% - 720px);
    }
    .row03 .right a{
        padding: 30px 50px 30px 30px;
    }
    .row03 .right a::before{
        background-size: 100% 100%;
    }
    .question, .download{
        width: calc(50% - 20px);
    }
}

@media screen and (max-width:1400px) {
    
}

@media screen and (max-width:1280px) {
  .banner-arrow .btn{
    height: 55px;
    line-height: 55px;
    width: 55px;
  }
  .row01{
    padding: 60px 0;
  }
  .box-pagination{
    top: 100%;
  }
  .service .tilList .boxTitle{
    min-width: 145px;
    height: 55px;
    line-height: 55px;
  }
  .row03 .left{
    width: 640px;
  }
  .row03 .right{
    width: calc(100% - 640px);
  }
  .row03 .right li{
    margin-bottom: 20px;
  }
  .row03 .right a{
    padding: 20px 40px 20px 20px;
  }
  .download li:nth-of-type(1){
    max-width: 140px;
  }
  .download dd .item{ 
    gap: 15px;
  }
}

@media screen and (max-width:1200px) {
    .download .name{
        font-size: 20px;
    }
}

@media screen and (max-width:1100px) {
    .question, .download{
        width: calc(50% - 10px);
    }
    .question .name{
        margin-left: 15px;
    }
    .download ul{
        gap: 6px;
    }
    .download dd{
        margin-bottom: 6px;
    }
    .download dd .item{
        gap: 6px;
    }
    .flex:has(.question){
        flex-direction: column;
    }
    .question, .download{
        width: 100%;
    }
    .question li:nth-of-type(odd){
        max-width: unset;
    }
    .download{
        margin-top: 50px;
    }
}
@media screen and (max-width:1024px) {
    
}

@media screen and (max-width:998px) {
    .row01{
        background-size: auto 240px;
    }
    .service .tilList .boxTitle{
        min-width: 125px;
        height: 45px;
        line-height: 45px;
    }
    .service .boxList{
        margin-top: 56px;
    }
    .row02 li{
        width: 50%;
    }
    .row02 dl{
        padding: 20px 25px 10px;
    }
    .row02 .curName{
        padding: 0 20px 20px;
    }
    .row02 .curName::before{
        bottom: 20px;
        right: 20px;
    }
    .row03 .left{
        width: 560px;
    }
    .row03 .right{
        width: calc(100% - 560px);
        padding-left: 20px;
    }
    .notice .date:has(.dateIco){
        margin-top: 13px;
    }
    .row02{
        padding: 60px 0 40px;
    }
    .row03{
        padding: 60px 0 40px;
    }
    .row04{
        padding: 60px 0 40px;
    }
}

@media screen and (max-width:900px) {
    .notice > .flex{
        flex-direction: column;
    }
    .row03 .left,
    .row03 .right{
        width: 100%;
    }
    .row03 .right{
        margin-top: 30px;
        padding-left: 0;
    }
    .row03 .right a{
        padding: 20px 20px 20px 20px;
    }
    .row03 .right a::before{
        width: calc(100% + 20px);
    }
    .box-pagination{
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .modeName .EN{
        font-size: 34px;
    }
    .modeName .CH{
        font-size: 26px;
    }
    .row01{
        padding: 60px 0 40px;
    }
    .boxTab .swiper-slide{
        padding: 35px 0 25px;
    }
    .modeTil span{
        display: none;
    }
    .row02 .modeCon,
    .row03 .modeCon{
        margin-top: 20px;
    }
}

@media screen and (max-width:680px) {
    .banner .gp-img-responsive{
        position: relative;
        z-index: 1;
        padding-bottom: 0;
        height: 220px;
    }
    .banner .gp-img-responsive img{
        height: 100%;
        width: unset;
        min-width: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .box .swiper-pagination-bullet{
        width: 18px;
        margin-right: 6px;
    }
}

@media screen and (max-width:540px) {
    
}

@media screen and (max-width:479px) {
    .modeName .EN{
        font-size: 32px;
    }
    .modeName .CH{
        font-size: 24px;
        text-wrap: nowrap;
    }
    .row02 li{
        width: 100%;
    }
    .row04{background: #e5edf6;}
    .service .tilList{
        font-size: 20px;
    }
    .question li{
        /* width: 100%; */
    }
    .question li:nth-of-type(odd)::before{display: none;}
    .question li:nth-of-type(even){padding-left: 0;}
    .question li a{
        /* max-width: 240px; */
        margin: 0 auto;
    }
    .download ul{
        flex-direction: column;
    }
    .download li:nth-of-type(1){
        max-width: 100%;
    }
    .download .icon img{
        max-width: 35px;
    }
    .download .item.flex-column{
        flex-direction: row;
    }
    .download .item{
        min-height: 100px;
    }
}

@media screen and (max-width:414px) {
    .modeName .EN{
        font-size: 30px;
    }
    .row01{padding: 40px 0 40px;}
    .row02, .row03, .row04{padding: 40px 0 30px;}

    .question .icon{
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
    .question .icon::before{
        width: 60px;
        height: 60px;
        background-size: 80% 100%;
    }
    .question .icon img{
        max-height: 28px;
        width: auto !important;
        margin-left: 5px;
    }
    .question .name{
        margin-left: 5px;
    }
}

@media screen and (max-width:370px) {
    .modeName .EN{
        letter-spacing: -1px;
    }
    .download dd{
        flex-wrap: wrap;
        gap: 6px;
    }
    .download dd .item{
        width: 100% !important;
    }
}