/* 全局重置 - 兼容低版本浏览器 */
/* 赛天集团 - 响应式页面样式 */
:root {
    --red: #c41e3a;
    --red-dark: #a01830;
    --white: #ffffff;
    --gray-100: #f5f5f5;
    --gray-200: #e8e8e8;
    --gray-300: #999;
    --gray-800: #333;
    --black: #1a1a1a;
    --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --container: min(900px, 100% - 4rem);
    --bm-top-w: max(1000px, 100% - 32rem);
    --header-h: 64rem;
    --header-w: max(750px, 100% - 4rem);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html,
body {
    font-family: var(--font);
    color: #333;
    font-size: 10px;
    background: #fff;
    line-height: 1.6;
    width: 100%;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* 容器：居中+响应式宽度 */
.container {
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.space-left,
.space-right {
    flex: 1;
    height: 100%;
    min-width: 9rem;
    max-width: 16rem;
}


/* 英雄区 Banner */
.hero {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    color: #fff;
    align-items: center;
}

.hero picture,
.hero img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.hero-btns img {
    object-fit: contain;
}

.hero-btns {
    position: absolute;
    left: 13.5%;
    top: 79%;
    display: flex;
    gap: 13rem;
    z-index: 2;
}

.hero-btns img {
    width: 17.6rem;
}





/* 核心价值观模块 */
.values {
    width: 100%;
    max-width: 160rem;
    margin: 0 auto;
}

.values picture {
    max-width: 160rem;
}

.values img {
    width: 100%;
    object-fit: cover;
}


/* 关于我们/加入我们模块 */
.about {position: relative;color: #333;}

.about-bg {
    height: auto;width: 100%;padding: 17rem 0;max-width: 192rem;margin: 0 auto;
    background-color: #ff6b00;
    background-repeat: no-repeat;background-position: top center;background-size: cover;
}

.about-title {
    text-align: center;
    margin-bottom: 6rem;
}

.about-title img,
.plan-top-title img,
.talk-top-title img,
.team-top-title img
{
    width: auto;pointer-events: none;
    height: 9.2rem;
}

/* 关于我们模块标题特殊处理 */
.about-title img {
    filter: brightness(0) invert(1);
}


.about-content {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    gap: 5.5rem;
    padding: 0 7rem;
}

.about-picList {
    /* flex: 1; width: calc(100% - 43rem);  */
    /* border: 2px solid #5503fa; */
    width: 150rem;
    overflow: hidden;
    position: relative;
}

.about-ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;gap: 3rem;
    /* transition: transform 0.3s ease; */
}

.about-li {
    flex: 0 0 47.5rem;
    width: 47.7rem;
    height: 55.3rem;    
    background: #fff5f0;
    border-radius: 3rem;
    overflow: hidden;
    
}

.about-li:last-child {
    margin-right: 0;
}

.about-li-img {
    width: 100%;
    height: 31.7rem;
    overflow: hidden;
    
}

.about-li-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    -webkit-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
}

.about-li:hover .about-li-img img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.about-li-top {
    height: 23.6rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.about-li-top h3 {
    font-size: 3.4rem;
    font-weight: bold;
    margin-bottom: 3rem;
    color: #333;
    height: auto;
    line-height: 1;
}

.about-li-top p {
    font-size: 2rem;
    line-height: 2.6rem;
    color: #8b8b8b;
    margin: 0;
    max-width: 90%;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;    
    -webkit-box-orient: vertical;
    height: calc(2.6rem * 2);
}
/* 
.about-prev,
.about-next {
    flex: 0 0 8.2rem;
    width: 8.2rem;
    height: 8.2rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    font-size: 3rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.about-prev:hover,
.about-next:hover {
    background: #d7141a;
    color: white;
    transform: scale(1.1);
} */



/* 计划模块 */
.plan {
    padding: 17rem 0;
    background-color: #ffffff;
}

.plan .container {
    max-width: 192rem;
    margin: 0 auto;    
}

.plan-top {
    text-align: center;
    margin-bottom: 8rem;
}

.plan-top-title {
    position: relative;
    display: inline-block;
    margin-bottom: 4rem;
}

.plan-top-title h3 {
    font-size: 4rem;
    font-weight: bold;
    color: #333333;
    margin: 0 0 1rem 0;
    position: relative;
    display: inline-block;
}

.plan-top-title p {
    font-size: 2rem;
    color: #8b8b8b;
    margin: 0;
}
/* 
.plan-top-title:before {
    content: '';
    position: absolute;
    left: -5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 1.5rem;
    background-image: url('../imgs/careers/plan_icon_left.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.plan-top-title:after {
    content: '';
    position: absolute;
    right: -5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 1.5rem;
    background-image: url('../imgs/careers/plan_icon_right.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
} */

.plan-description {
    max-width: 137rem;
    margin: 0 auto;
    
}

.plan-description p {
   font-size: 2rem;
    line-height: 1.6;
    color: #a4a4a4;
    margin: 0;
    text-align: justify;
    text-align-last: center;
}

.plan-ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    gap: .4rem;height: 73.7rem;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    
}

.plan-li {
    flex: 1;
    height: 59.6rem;    
    padding: 12rem 5rem 9rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #ffffff;    
    display: flex;
    flex-direction: column;
    justify-content: space-between;        
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.plan-li:hover ,.plan-li.on {    
    height: 73.7rem;
    padding: 10rem 5rem 6rem;
}
.plan-li:hover .plan-item-info,
.plan-li.on .plan-item-info
{
    opacity: 1;
    display: block;
}

.plan-li:hover .plan-item-top,
.plan-li.on .plan-item-top
{margin-bottom: 6rem;}

.plan-item-top {
    line-height: 1.2;
    /* margin-bottom: 13rem; */
    text-align: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;  
    -o-transition: all 0.3s ease;  
    -ms-transition: all 0.3s ease;  
    transition: all 0.3s ease;  
}

.plan-item-top h3 {
    font-size: 3.4rem;    
    font-weight: bold;
    margin: 0 0 1rem 0;
}

.plan-item-top p {
    font-size: 2rem;    
    margin: 0;
}

.plan-item-info {
    font-size: 2rem;
    line-height: 2.6rem;
    flex: 1;    
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;  
    -o-transition: all 0.3s ease;  
    -ms-transition: all 0.3s ease;  
    transition: all 0.3s ease;    
    min-height: 19rem;
    max-height: 26rem;
    text-align: justify;
    text-align-last: center;
    overflow: hidden;
    /* display: -webkit-box;
    -webkit-box-orient: vertical; */
    -webkit-line-clamp: 8;
    overflow: hidden;
    display: -webkit-box;    
    -webkit-box-orient: vertical;
    height: calc(2.6rem * 8);
    display: none;
}

.plan-item-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
}

.plan-item-bottom img {
    max-width: 100%;
    height: auto;
    max-height: 19rem;
}


/* 青春Talk模块 */
.talk {
    /* padding: 17rem 0; */
    padding-bottom: 17rem;
    background-color: #ffffff;
}

.talk-container {
    max-width: 192rem;
    margin: 0 auto;
    /* padding: 0 2rem; */
}

.talk-top {
    text-align: center;
    margin-bottom: 6rem;
}

.talk-bottom {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    gap: 5.5rem;
    padding: 0 7rem;
}
/* 
.talk-prev,
.talk-next {
    flex: 0 0 8.2rem;
    width: 8.2rem;
    height: 8.2rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    font-size: 3rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.talk-prev:hover,
.talk-next:hover {
    background: #d7141a;
    color: white;
    transform: scale(1.1);
} */

.talk-picList {
    /* flex: 1; */
    overflow: hidden;
    width: 150rem;
    position: relative;
}

.talk-ul {
    display: flex;
    list-style: none;
    padding: 0;gap: 3rem;
    margin: 0;    
}

.talk-li {
    flex: 0 0 47.7rem;
    width: 47.7rem;
    height: 36.9rem;
    /* margin-right: 3rem; */
    border-radius: 10px;
    overflow: hidden;
    /* border: #1a1a1a 1px solid; */
    transition: transform 0.3s ease;
}

.talk-li:last-child {
    margin-right: 0;
}

.talk-li:hover {
    transform: translateY(-10px);
}

.talk-li-img {
    width: 100%;pointer-events: none;
    /* height: 35rem; */
    height: 100%;
    overflow: hidden;
}

.talk-li-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* 团队风采模块 */
.team {
    background-color: #ffffff;
    position: relative;
}

.team-bg {
    max-width: 192rem;
    margin: 0 auto;
    padding: 17rem 0;
    background-image: url('../imgs/careers/team-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.team .container {
    /* width: 100%; */
    max-width: 192rem;
    margin: 0 auto;
    padding: 0;
}

.team-top {
    text-align: center;
    margin-bottom: 8rem;
}

.team-top-title {
    position: relative;
    display: inline-block;
    margin-bottom: 4rem;
}

.team-top-title h3 {
    font-size: 4rem;
    font-weight: bold;
    color: #333333;
    margin: 0 0 1rem 0;
    position: relative;
    display: inline-block;
}

.team-top-title p {
    font-size: 2rem;
    color: #8b8b8b;
    margin: 0;
}

.team-bottom {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: relative;
}
/* 
.team-prev,
.team-next {
    position: absolute;
    top: calc(50% - 4.1rem);left: 0;    
    flex: 0 0 8.2rem;width: 8.2rem;height: 8.2rem;    
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    font-size: 3rem;
    cursor: pointer;    
    transition: all 0.3s ease;
    flex-shrink: 0;
    z-index: 10;
} */

/* .team-prev:hover,
.team-next:hover {
    background: #d7141a;
    color: white;
    transform: scale(1.1);
} */

.abs{position: absolute;}
.team-prev{left: 7rem;}
.team-next{right: 7rem;left: auto;}
.team-picList {
    flex: 1;position: relative;
    margin-left: calc(50% - 111.3rem);
    /* overflow: hidden; margin-left: -15rem;*/
    
}

.team-ul {    
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 3rem;    
}

.team-ul li {
    flex: 0 0 auto;
    width: 72.2rem;
    height: 48rem;
    border-radius: 4rem;
    overflow: hidden;    
    
}
.team-ul li img{
    pointer-events: none;
    -webkit-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
}
.team-ul li:hover img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.team-ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 浏览器兼容性 */
/* 关于我们模块兼容性 */
.about-content {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

.about-ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

.about-li {
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}

/* .about-prev,
.about-next {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
} */

.about-bg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* 计划模块兼容性 */
.plan-ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

.plan-item-bottom {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

.plan-top-title:before,
.plan-top-title:after {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}



/* 青春Talk和团队风采模块兼容性 */
.talk-bottom,
.team-bottom {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

.talk-ul,
.team-ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

.talk-top-title:before,
.talk-top-title:after,
.team-top-title:before,
.team-top-title:after {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.talk-li,
.team-ul li {
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}

/* .talk-prev,
.talk-next,
.team-prev,
.team-next {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
} */

.team-bg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media (max-width: 1200px) {
    .about-prev, .about-next,
    .talk-prev, .talk-next
    {
        flex: 0 0 60px;
    }
    
    .about-li {        
        flex: 0 0 48.3%;
    }
    .talk-li {        
        flex: 0 0 48.3%;
    }
    /* .about-li{
        flex: 0 0 40rem;
        width: 40rem;
    } */
}

@media (max-width: 1023.9px) {
    .hero {
        height: auto;
        margin-top: 7rem;
    }    
    .hero-btns {
        top: 45%;left: 50%;gap: 6rem;
        /* margin-left: -50%; */        
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);                
    }
    
    .hero-btns img {
        width: 14.6rem;
    }
    /* 关于我们/加入我们模块  */
    .about-content {
        padding: 0 0 0 5.5rem ;
        width: 100%;
        max-width: 192rem;
        margin: 0 auto;
    }
    .about-prev, .about-next{
        /* display: none; */
        position: absolute;
        top: 47rem;
    }
    .about-prev{right: 16rem;}
    .about-next{right: 4rem;}
    /* .about-picList{width: 100%;flex: 1;} */
    .about-ul {display: flex;gap: 3rem;}
        
    
    .about-li{
        flex: 0 0 40%;
        /* min-width: 30rem; */
        max-width: 47.7rem;
        height: auto;
        /* height: 55.3rem; */
        background: #fff5f0;
        border-radius: 3rem;
        overflow: hidden;   
        aspect-ratio: 477 / 553;     
    }
    .about-li-img {
        height: 57.3%;
    }
    .about-li-top {
        height: 42.7%;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .about-li-top h3 {
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 3rem;
        color: #000;
    }
    .about-li-top p {
        font-size: 1.8rem;
        line-height: 1.5;
        color: #8b8b8b;
        margin: 0;
        max-width: 90%;
        max-height: 9rem;
        overflow: hidden;
    }

    .plan-item-top h3 {font-size: 2.8rem;}
    .plan-item-top p {font-size: 1.8rem;}
    .plan-item-info{font-size: 1.8rem;}            
    
    .plan-ul {        
        gap: 2rem;        
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: space-between;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column;height: auto;
    }
    .plan-li {    
        height: 16rem;  
        flex: auto; width: 100%;       
        padding: 0rem 5.5rem 0rem;        
        border-radius: 3rem;
        display: flex;
        flex-direction: row;        
        -webkit-transition: height 0.4s ease;
        transition: height 0.4s ease;
        align-items: center;
        flex-wrap: nowrap;
        align-content: flex-end;        
        justify-content: space-between;
    }
    .plan-li:hover,.plan-li.on {
        height: 55rem;
        flex-direction: column;
        padding: 0rem 5rem 6rem;
    }
    .plan-item-top{
        margin-bottom: 0;text-align: left;
    }
    .plan-li:hover .plan-item-top,
    .plan-li.on .plan-item-top {
        line-height: 1;
        margin-bottom: 0;
        text-align: left;width: 100%;
        padding: 6rem 0 5rem;
    }
    .plan-li:hover .plan-item-info,
    .plan-li.on .plan-item-info {
        width: 100%;
        opacity: 1;
        text-align: justify;
        text-align-last: left;
        /* min-height: 10rem;         */
    }
    .plan-li:hover .plan-item-bottom,
    .plan-li.on .plan-item-bottom {
        justify-content: end;
        width: 100%;
        padding-bottom: 0rem;
    }
    
    .plan-li:hover .plan-item-info,
    .plan-li.on .plan-item-info 
    {
        opacity: 1;
    }
    .plan-item-bottom img{
        max-height: 10rem;
    }
    .plan-li:hover .plan-item-bottom img{
        max-height: 14rem;
    }

    /* 青春Talk模块  */
    .talk-bottom{
        padding: 0 5.5rem;
    }
    .talk-picList{
        /* flex: 0 0 113%; */
    }
    .talk-li {        
        flex: 0 0 40%;
    }

    .talk-prev, .talk-next, .team-prev, .team-next{
        /* display: none; */
        position: absolute;
    }
    .talk-prev{top: 40rem;right: 16rem;}
    .talk-next{top: 40rem;right: 4rem;}
    .team-prev{top: 52rem;right: 16rem;left: auto;}
    .team-next{top: 52rem;right: 4rem;}

    .team-bottom{overflow: visible;}
    .team-picList{        
        margin-left: calc(50% - 93rem);
    }
    .team-ul li{
        flex: 0 0 60rem;
        width: 60rem;
    }
    
}
@media (max-width: 768px) {
    /* 关于我们/加入我们模块  */
    .about-li{
        flex: 0 0 82%;        
        max-width: 47.7rem;
        height: 50.3rem;        
        aspect-ratio: 477 / 553;
    }
    /* 青春Talk模块   */
    .talk-li{
        flex: 0 0 82%;
    }
    .talk-bottom {
padding-left: 5.5rem;
        padding-right: 0;
    }
    /* 团队模块  */
    .team-bg {
        padding: 11rem 0 21rem;
    }
    

    .team-top-title h3 {
        font-size: 2.5rem;
    }
    
    .team-top-title p {
        font-size: 1.8rem;
    }
    .about-prev{top: 55rem;right: 16rem;}
    .about-next{top: 55rem;right: 4rem;}
    .team-prev,
    .talk-prev,
    .about-prev,
    .about-next,
    .team-next,
    .talk-next {
        /* width: 7rem;
        height: 7rem; */
        font-size: 2.5rem;
        flex: 0 0 6rem;
    }
    
   
    .team-picList{margin-left:calc(50% - 20rem);}
    .team-ul li{        
        flex: 0 0 40rem;     
        width: 40rem;   
        height: auto;    border-radius: 2rem;
    }
    .team-top {
        margin-bottom: 0;
    }
    .team-prev{top: 32rem;right: 16rem;left: auto;}
    .team-next{top: 32rem;right: 4rem;}

    .about-title img, .plan-top-title img, .talk-top-title img, .team-top-title img{
        height: 7.2rem;
    }
}