.Carousel{aspect-ratio:16 / 4 ;background:rgb(238,238,238);display:flex;align-items:center;justify-content:center}
.Carousel .content{display:flex;gap:40px;flex-direction:column;align-items:center;color:#ffffff;mix-blend-mode:screen;z-index:10; width: 100%;}
.Carousel .content .title{font-size:2rem;font-weight:600}
.Carousel .content .description{font-size:clamp(12px, 1.5vw, 1.8rem); font-weight:400; max-width: calc(100% - 20px); text-align: center; line-height: 1.5;}

.container{gap:20px}

.head{display:flex;gap:30px;flex-direction:column;align-items:center}
.head .name{font-size:2rem;font-weight:bold;position:relative}
.head .name::before{content:"";position:absolute;top:calc(100% + 15px);width:50%;height:0.2rem;background-color:var(--theme-color);left:50%;transform:translateX(-50%)}
.head .en_name{font-size:1.4rem;color:#666666;text-transform:uppercase}

.VideoBox{width: 100%; padding: 4rem 0; max-width: var(--page-max-width); margin: 0 auto; gap: 4rem;display: flex; flex-direction: column;}
/*.VideoBox .content{display: grid; grid-template-columns: 1fr 308px; grid-template-rows: repeat(3, 1fr); gap: 1rem; overflow: hidden;}*/
/*.VideoBox .content .item{width: 100%; background-color: #eeeeee; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center;}*/
/*.VideoBox .content .item:first-child{grid-area: 1 / 1 / 4 / 2; aspect-ratio: 16 / 9;}*/
/*.VideoBox .content .item:hover{*/

/*}*/
/*!* 圆角三角形 *!*/
/*.VideoBox .content .item::after{border-radius: 3px;color: rgba(255,255,255,0.6);content: "◀";width: clamp(20px, 20%, 80px);aspect-ratio: 1.5 / 1;background: rgba(0,0,0,0.4);position: absolute;left: 50%;top: 50%;transition: 0.3s;border: 3px solid currentColor;display: flex;align-items: center;justify-content: center;transform: translate(-50%, -50%) rotateY(180deg);cursor: pointer;}*/
/*.VideoBox .content .item:hover::after{*/
/*    color: #FFFFFF;*/
/*    background: rgba(0,0,0,0.2);*/
/*}*/
.VideoBox .video{width: 100%; border-radius: 5px; aspect-ratio: 16 / 9; display: block; background-image: var(--bg); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; box-shadow: 0 0 10px 0 #aaa;}
.VideoBox .video::after{border-radius: 3px;color: rgba(255,255,255,0.6);content: "◀";width: clamp(20px, 20%, 80px);aspect-ratio: 1.5 / 1;background: rgba(0,0,0,0.4);position: absolute;left: 50%;top: 50%;transition: 0.3s;border: 3px solid currentColor;display: flex;align-items: center;justify-content: center;transform: translate(-50%, -50%) rotateY(180deg);cursor: pointer;}
.VideoBox .video:hover::after{color: #ffffff;}
.VideoBox .content{position: relative;}
.VideoBox .content::before{background-image: var(--bg); transition: all .2s; background-repeat: no-repeat; background-size: 120%;content: ""; position: absolute; z-index: -1; width: calc(100% - 30px); height: 100%; top: -15px; left: 15px; border-radius: 5px; opacity: 0.2; box-shadow: 0 0 10px 0 #aaa;}
.VideoBox .content::after{background-image: var(--bg); transition: all .3s; background-repeat: no-repeat; background-size: 140%;content: ""; position: absolute; z-index: -2; width: calc(100% - 60px); height: 100%; top: -30px; left: 30px; border-radius: 5px; opacity: 0.1; box-shadow: 0 0 10px 0 #aaa;}
.VideoBox .content:hover::before{top: -5px}
.VideoBox .content:hover::after{top: -10px;}
.VideoBox .moreBtn{display: flex; width: 160px; height: 40px; background: var(--theme-color); color: #FFFFFF; border-radius: 2px; align-self: center; align-items: center; justify-content: center;}

.Intro{--bg:none;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-direction:column;gap:4rem; padding: 4rem calc((100% - var(--page-max-width)) / 2); display: none;}
.Intro .content{display:flex;gap:1.5rem;align-items:flex-start; width: 100%;}
.Intro .content .text{display:flex;flex-direction:column;gap:25px; max-width: 70%;}
.Intro .content .text .title{font-size:30px; line-height: 1.5;}
.Intro .content .text article{font-size:14px;line-height:26px;color:#666666;display:flex;flex-direction:column;gap:15px}
.Intro .content .text article p{text-indent:2em}
.Intro .content .attrs{flex: 1; transition:all 0.3s ease-in-out; display: grid; width: 100%; gap: 15px; grid-template-columns: repeat(2, 1fr);}
.Intro .content .attrs .item{display: flex; flex: 1;background: #f5f9ff; padding: 1rem; flex-direction: column-reverse; gap: 1rem;}
.Intro .content .attrs .item .value{font-size: 2rem; margin: 1rem 0; text-align: center; font-weight: bold;}
.Intro .content .attrs .item .title{text-align: center; font-weight: 400;font-size: clamp(17px, 1rem, 20px); color: #999999;}
.Intro::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:var(--bg,none);background-position:center center;background-repeat:no-repeat;background-size:cover;filter:brightness(1.3);z-index:-1;opacity:0.1;pointer-events:none}
.Intro .moreBtn{display: flex; width: 160px; height: 40px; background: var(--theme-color); color: #FFFFFF; border-radius: 2px; align-items: center; justify-content: center; align-self: center;}

.News{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-direction:column;gap:45px; max-width: var(--page-max-width); width: 100%; padding: 50px 0; margin: 0 auto;}
.News .topBox{display: flex; justify-content: space-between; width: 100%;}
.News .topBox .head{flex-direction: row; justify-content: center;}
.News .topBox .head .name{}
.News .topBox .head .en_name{}
.News .topBox .menu{display: flex; align-items: center; gap: 10px; overflow: clip; overflow-x: auto; scroll-snap-type: x mandatory;}
.News .topBox .menu .item{display: flex; background: #f9f9f9; padding: 15px 20px; border-radius: 50px; font-size: 16px; transition: all .2s; white-space: nowrap; cursor: pointer;scroll-snap-align: center;}
.News .topBox .menu .item:hover{background: #f2f2f2;}
.News .topBox .menu .item.active{background: var(--theme-color); color: #FFFFFF;}
.News .topBox .menu .link{display: flex; background: #f9f9f9; padding: 15px 20px; border-radius: 50px; font-size: 16px; transition: all .2s; white-space: nowrap; cursor: pointer;scroll-snap-align: center;}
.News .topBox .menu .link:hover{background: #f2f2f2;}
.News .topBox .menu .link.active{background: var(--theme-color); color: #FFFFFF;}

.News .content{display:flex;width:100%;gap:var(--gap);align-items:stretch; --gap: 30px 4%;}

.News .content .picture_news{width: 48%; align-self: stretch; aspect-ratio: 16 / 9}
.News .content .picture_news .picture_news_item{height: var(--carousel-height);}
.News .content .picture_news .picture_news_item .title{position: absolute; padding: 1rem 0.5rem; background: rgba(0,0,0,0.6); color: #ffffff; width: calc(100% - 1rem); bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.News .content .picture_news .carousel-dots{top:10px;justify-content:flex-end;padding:10px;width:auto;right:0}
.News .content .picture_news .tip{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #999; background-color: #fbfbfb;}
.News .content .picture_news .tip img{width: 260px; height: 260px;}

.News .content .news_panel{display:flex;flex-direction:column;width: 48%;}
.News .content .news_panel .item{width:100%;flex-direction:column;display:none; row-gap: 10px; min-height: 300px; height: 100%; grid-template-rows: repeat(9, 1fr);align-items: center;}
.News .content .news_panel .item:empty::before{content:'暂无内容';margin:auto}
.News .content .news_panel .item.active{display:grid;}
.News .content .news_panel .item .links{display: flex; gap: 1.5rem; height: 2rem; line-height: 2rem; grid-row-start: 9; justify-content: flex-end; color: #363636;}
.News .content .news_panel .item .links .link{background-color: #eeeeee; height: 100%; padding: 0 1rem;}


.News .content .news_item{overflow:hidden;display:flex;gap:10px;background-color:#ffffff;transition:all 0.2s; align-items: center;}
.News .content .news_item::before{content: ""; width: 5px; height: 5px; background: #bdbdbd;}
.News .content .news_item .title{width:100%;font-size:17px;flex: 1;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;color:#333;}
.News .content .news_item .date{min-width: 50px; color: #666666; text-align: right}

.News .quickLink{gap:20px; grid-template-columns: repeat(4, 1fr); width: 100%; display: none;}
.News .quickLink .item{background-color: #2dc26b; aspect-ratio: 7 / 1.5;}
.News .quickLink .item img{width: 100%; height: 100%; object-fit: cover; display: block; overflow: hidden}


.CorporateProfile{padding: 4rem 0; display: flex; gap: 4rem; flex-direction: column;}
.CorporateProfile .content{display: flex; flex-direction: column; gap: 10px;}
.CorporateProfile .content .line{display: flex; gap: 0px; height: 210px; width: 100%; overflow-x: hidden;}
.CorporateProfile .content .line .item{background-color: #efefef; height: 100%; display: flex; justify-content: center; align-items: center; position: relative;transition: all 0.2s;}
.CorporateProfile .content .line .item img{display: block; height: 100%; width: auto; margin-right: 10px;}

.Business{--bg-img:none;padding:70px calc((100% - var(--page-max-width)) / 2);display:flex;gap:4rem;flex-direction:column;position:relative;color:#FFFFFF;background-color:rgba(27,106,255,0.8)}
.Business::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--bg-img,none);opacity:0.7;pointer-events:none}
.Business .head .name::before{background-color:#FFFFFF}
.Business .head .en_name{color:#FFFFFF}
.Business .content{display:grid; grid-template:auto / repeat(3, 1fr);position:relative;z-index:2;gap:20px}
.Business .content .item{--bg:none;display:flex;flex-direction:column;gap:15px;flex:1;aspect-ratio:16 / 9;background-image:var(--bg,none);position:relative;overflow:hidden;transition:all 1s;background-size:100% 100%;background-position:center center; border-radius: 5px; }
.Business .content .item .title{position:absolute;height:40px;line-height:40px;text-align:center;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,0.5);transition:all 0.2s}
.Business .content .item .desc{position:absolute;inset:0;background-color:rgba(0,0,0,0.5);transform:translateY(-100%);bottom:100%;width:calc(100% - 60px);height:calc(100% - 60px);padding:30px;transition:all 0.2s;display:flex;gap:16px;flex-direction:column;line-height:24px; overflow: hidden;}
.Business .content .item:hover{background-size:110% 110%}
.Business .content .item:hover .title{transform:translateY(100%)}
.Business .content .item:hover .desc{transform:translateY(0)}

.Subsidiary{display:flex;gap:4rem;flex-direction:column;position:relative;color:#FFFFFF;background-image: url("/images/bg2.jpg"); background-position: bottom center; background-size: cover; background-attachment: fixed; font-size: 1.2rem; padding: 4rem calc((100% - var(--page-max-width)) / 2);}
.Subsidiary .head .name::before{background-color:#FFFFFF}
.Subsidiary .head .en_name{color:#FFFFFF}
.Subsidiary .content{display:grid;grid-template:auto / repeat(auto-fill,minmax(20em,1fr));position:relative;z-index:2;gap:20px}
.Subsidiary .content .item{padding:20px;background:rgba(0,0,0,0.2);line-height:20px;color:#ffffff;border-radius:7px;display:flex;gap:10px;flex-direction:column}
.Subsidiary .content .item .name{}
.Subsidiary .content .item .desc{font-size:14px}
.Subsidiary .content .item:hover{background:rgba(0,0,0,0.3)}

@media (max-width:1300px){
    .News .quickLink{
        width: calc(100% - 1rem); margin: 0 0.5rem;
    }
    .VideoBox{
        padding-left: 10px;
        padding-right: 10px;
        width: calc(100% - 20px);
    }
    .News{
        padding: 4rem 0;
    }
    .News .content{
        padding: 0 10px;
    }

    .Business .content{
        padding: 10px;
    }

    .Intro .content{
        margin: 10px;
        width: calc(100% - 20px);
    }
    .Subsidiary .content{
        padding: 10px;
    }
}

@media (max-width:1024px){
    .News .topBox{
        flex-direction: column;
        gap: 3rem;
    }
    .VideoBox .content{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto 1fr;
    }
    .VideoBox .content .item{
        aspect-ratio: 16 / 9;
    }
    .VideoBox .content .item:first-child{
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    }

    .Business .content{;
        grid-template-columns: repeat(2, 1fr);
    }
    .Intro .content{
        flex-direction:column;
        gap: 4rem;
    }
    .Intro .content .text{
        max-width: none;
    }
    .Intro .content .picture{
        align-self: center;
    }

    .News .quickLink{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:768px) {
    .Carousel{
        aspect-ratio: 16 / 9;
    }
    .News .topBox .head{justify-content: center; flex-direction: column;}
    .News .content .news_item::before{
        height: 1em;
    }
    .Business .content .item .desc {
        display: none;
    }

    .Business .content .item:hover .title {
        transform: none;
    }

    .News .content {
        flex-direction: column;
        padding: 0;

    }

    .News .content .picture_news {
        width: 100%;
    }

    .News .content .news_item {
        padding-left: 0;
        width: 100%;
    }

    .News .content .news_panel {
        width: 100%;
    }

    .News .content .news_panel .panel_body {
        width: calc(100% - 2rem);
        margin: 0 1rem;
    }

    .News .content .news_panel .panel_head {
        background: #eeeeee;
        padding-bottom: 0;
    }

    .News .content .news_panel .panel_head::before {
        display: none;
    }

    .News .content .news_panel .panel_head .item {
        padding-bottom: 0;
        height: 50px;
        line-height: 50px;
    }

    .News .content .news_panel .panel_head .item.active {
        background: var(--theme-color);
        color: #ffffff;
    }

    .News .content .news_panel .panel_head .item:hover::after, .News .content .news_panel .panel_head .item.active::after {
        display: none;
    }

    .Intro .content {
        /*flex-direction:column;*/
        margin: 10px;
    }
}
