/* General Styles */
    body {
        font-family: 'Microsoft YaHei', sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #ffffff;
        margin: 0;
        padding: 0;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    h1,
    h2,
    h3 {
        text-align: center;
        color: #333333;
    }

    h1 {
        font-size: 70px;
        margin-top: 30px;
        font-weight: bold;
    }

    h2 {
        font-size: 40px;
        margin: 20px 0;
        font-weight: bold;
        color: #34495e;
        text-align: left;
    }

    h2 span {
        color: #ff0000;
    }

    img {
        margin: 0;
        padding: 0;
        outline-style: none;
        vertical-align: top;
    }

    .b-l {
        padding: 15px;
        background-color: #F5FAFE;
        border-left: 10px solid #499DFF;
    }

    .icon {
        width: 45px;
        display: inline-block;
        height: 45px;
        background-size: 100% 100%;
        margin-right: 20px;
        vertical-align: center;
    }

    .section-title {
        font-size: 2em;
        margin-top: 40px;
        margin-bottom: 30px;
        font-weight: bold;
        color: #2c3e50;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 10px;
        text-align: center;
    }

    /* Header Section */
    .header-banner {
        width: 100%;
    }

    .ts-footer {
        width: 100%;
    }

    .ts-footer img {
        width: 100%;
        height: auto;
    }

    .header-banner img {
        width: 100%;
        height: auto;
    }

    .header-banner h1 {
        margin-top: 0;
        font-size: 2.8em;
        color: #1abc9c;
        /* A shade of green */
    }

.harmonyos img{
    width: 100%;
}

    /* Content Blocks */
    .content-block {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
        margin-top: 30px;
    }



    .content-block-image {
        flex: 1;
        max-width: 47%;
        text-align: center;
    }

    .content-block-image img {
        max-width: 100%;
        height: auto;
        border-radius: 15px;
    }

    .content-block-text {
        flex: 1.2;
        padding: 30px;
        background-color: #F0F9FF;
        border-left: 10px solid #499DFF;
    }

    .content-block-text h3 {
        text-align: left;
        font-size: 30px;
        color: #333;
        line-height: 1.5;
        display: flex;
        margin-bottom: 30px;
    }

    .content-block-text h3 .icon1 {
        background-image: url(images/icon/ic01.png);

    }

    .content-block-text h3 .icon2 {
        background-image: url(images/icon/ic02.png);

    }

    .content-block-text p {
        font-size: 1.2em;
        color: #333;
        padding-top: 20px;
        border-top: 1px solid #499DFF;
        font-weight: bold;
        line-height: 2;
    }

    .annotate {
        margin: 20px 0 60px;
        display: block;
    }

    .annotate p {
        display: inline;
        padding: 15px;
        background: #FFFF01;
        font-size: 16px;
    }

    .content-block-text ul {
        list-style-type: disc;
        margin-left: 20px;
        padding-left: 0;
    }

    .content-block-text li {
        margin-bottom: 10px;
        font-size: 1.1em;
        color: #555;
    }

    .content-block-text .highlight {
        font-weight: bold;
        color: #e67e22;
        /* A shade of orange */
    }

    .content-block-text .note {
        font-size: 0.9em;
        color: #7f8c8d;
        font-style: italic;
        margin-top: 15px;
    }

    /* Feature Sections */
    .feature-section {
        display: flex;
        justify-content: space-around;
        gap: 30px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }

    .feature-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 35px;
        flex: 1;
        min-width: 250px;
        transition: transform 0.3s ease;
    }

    .feature-card:hover {
        transform: translateY(-5px);
    }

    .feature-card h4 {
        font-size: 1.8em;
        color: #333;
        margin-bottom: 10px;
        padding: 15px 30px 45px;
        border-bottom: 1px solid #499DFF;
    }

    .feature-card h4 .icon3 {
        background-image: url(images/icon/ic03.png);

    }

    .feature-card h4 .icon4 {
        background-image: url(images/icon/ic04.png);

    }

    .feature-card .value {
        font-size: 1.8em;
        font-weight: bold;
        color: #499DFF;
        display: block;
        margin: 30px 10px 10px;
    }

    .feature-card .value span {
        color: #e74c3c;
    }

    .feature-card p {
        font-size: 1.1em;
        line-height: 2;
        color: #333;
        font-weight: bold;
    }

    .annotate2 {
        text-align: left;
        font-size: 1.6em;
        margin-top: 30px;
        background: #F5FAFE;
        padding: 30px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .yx h2 {
        margin: 40px 0 20px;
    }

    .yx-txt {
        font-size: 1.6em;
        margin-bottom: 20px;
        color: #333;
    }

    .content-item {
        display: flex;
        flex-flow: row;
        gap: 30px;
        justify-content: space-between;
    }

    .content-item .content-block {
        display: flex;
        flex: 49%;
        flex-flow: column;
    }

    .content-item .content-block img {
        width: 100%;
        height: auto;
        border-radius: 15px;
    }

    .content-item .content-block .img-txt p {
        font-size: 1.2em;
        line-height: 3;
        font-weight: bold;
    }

    .icon5 {
        background-image: url(images/icon/ic05.png);
    }

    .icon6 {
        background-image: url(images/icon/ic06.png);
    }

    .icon7 {
        background-image: url(images/icon/ic07.png);
    }

    .icon8 {
        background-image: url(images/icon/ic08.png);
    }

    .icon9 {
        background-image: url(images/icon/ic09.png);
    }

    .icon10 {
        background-image: url(images/icon/ic10.png);
        width: 90px;
    }

    .icon11 {
        background-image: url(images/icon/ic11.png);
    }

    .icon12 {
        background-image: url(images/icon/ic12.png);
    }

    .icon13 {
        background-image: url(images/icon/ic13.png);

    }

    .icon14 {
        background-image: url(images/icon/ic14.png);
    }

    .icon15 {
        background-image: url(images/icon/ic15.png);
    }

    .icon16 {
        background-image: url(images/icon/ic16.png);

    }

    .icon17 {
        background-image: url(images/icon/ic17.png);
        height: 30px;
        margin-right: 10px;
    }

    .icon18 {
        background-image: url(images/icon/ic18.png);
        height: 30px;
        margin-right: 10px;

    }

    .icon19 {
        background-image: url(images/icon/ic19.png);
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    .icon20 {
        background-image: url(images/icon/ic20.png);
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    .icon21 {
        background-image: url(images/icon/ic21.png);
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    .icon22 {
        background-image: url(images/icon/ic22.png);
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }


    .icon24 {
        background-image: url(images/icon/ic24.png);
        width: 90px;
        height: 45px;
    }

    .icon25 {
        background-image: url(images/icon/ic25.png);
        width: 90px;
        height: 45px;
    }

    .icon26 {
        background-image: url(images/icon/ic26.png);
        width: 90px;
        height: 45px;
    }

    /* Specific card styles */
    .feature-card.salary .value {
        color: #27ae60;
        /* Green for salary */
    }

    .feature-card.policy .value {
        color: #f39c12;
        /* Orange for policy */
    }

    /* Image Gallery / Layout */
    .image-gallery {
        display: flex;
        gap: 20px;
        margin-top: 30px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .image-gallery .image-item {
        flex: 1;
        min-width: 200px;
        text-align: center;
    }

    .image-gallery .image-item img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Section: Test Operation Development Advantages */
    .advantages-section {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: space-between;
    }

    .advantage-card {
        background-color: #ffffff;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        flex: 1;
        min-width: 280px;
    }

    .advantage-card h4 {
        font-size: 1.4em;
        color: #2c3e50;
        margin-bottom: 15px;
        text-align: center;
        position: relative;
        padding-bottom: 10px;
    }

    .advantage-card h4::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 2px;
        background-color: #3498db;
    }

    .advantage-card p {
        font-size: 1em;
        color: #555;
        text-align: justify;
    }

    .advantage-card .icon {
        font-size: 2em;
        color: #1abc9c;
        display: block;
        text-align: center;
        margin-bottom: 15px;
    }

    .advantage-card .sub-point {
        font-weight: bold;
        margin-top: 15px;
        margin-bottom: 5px;
        color: #34495e;
    }

    .advantage-card .sub-point-text {
        font-size: 0.95em;
        color: #666;
        margin-bottom: 10px;
    }

    /* Section: Data Security and Compliance */
    .data-security-section {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: space-around;
    }

    .data-security-card {
        padding: 25px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        flex: 1;
        min-width: 280px;
    }

    .data-security-card h4 {
        font-size: 1.6em;
        color: #34495e;
        padding-bottom: 25px;
        text-align: center;
        border-bottom: 1px dashed #499DFF;
        margin: auto 20px;
    }

    .data-security-card p {
        font-size: 1.33em;
        color: #333;
        text-align: justify;
        margin-top: 20px;
        line-height: 1.8;
        font-weight: 400;
        padding: 0 10px;
    }

    span.r-d {
        font-weight: bold;
        color: #e74c3c;
    }

    span.r-b {
        font-weight: bold;
        color: #3498db;
    }

    .data-security-card .large-number {
        font-size: 2.5em;
        font-weight: bold;
        color: #3498db;
        /* Blue */
        display: block;
        text-align: left;
        margin-bottom: 15px;
    }

    .yx2-txt {
        text-align: left;
        font-size: 1.6em;
        margin-top: 30px;
        background: #F5FAFE;
        padding: 30px;
        font-weight: bold;
        letter-spacing: 1px;
        display: flex;
    }

    .yx3 .content-block:nth-child(2) {
        gap: 10px;
    }

    .yx3 .content-block-text {
        padding: 15px 30px;
    }

    .yx3 .content-block-text p {
        font-size: 1.1em;
        font-weight: normal;
        padding: 10px 10px 0;
        color: #555;
    }

    .yx3 .content-block-text h3 {
        margin-bottom: 10px;
    }

    .yx .content-block .img-txt p {
        font-size: 1.4em;
        line-height: 2.2;
    }

    .yx4-sub {
        font-size: 1.4em;
        color: #499DFF;
        font-weight: bold;
        margin: 20px 0;
    }

    .jiuye {
        margin-bottom: 50px;
    }

    .jiuye .jiuye-sub {
        font-size: 1.6em;
        margin-bottom: 20px;
    }

    .jiuye .gw h4 {
        margin: auto;
    }





    .interdisciplinary-section {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: space-between;
    }

    .interdisciplinary-card {
        background-color: #ffffff;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        flex: 1;
        min-width: 280px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* Distribute space */
    }

    .interdisciplinary-card .icon {
        font-size: 2em;
        color: #9b59b6;
        /* Purple */
        display: block;
        text-align: center;
        margin-bottom: 15px;
    }

    .interdisciplinary-card h4 {
        font-size: 1.3em;
        color: #34495e;
        margin-bottom: 10px;
        text-align: center;
    }

    .interdisciplinary-card p {
        font-size: 1em;
        color: #555;
        text-align: justify;
        flex-grow: 1;
        /* Allow text to grow and push content */
    }

    .interdisciplinary-card .sub-heading {
        font-weight: bold;
        color: #2c3e50;
        margin-top: 15px;
        margin-bottom: 5px;
        display: block;
        text-align: center;
    }

    /* Section: Talent Capability Model */
    .talent-model-section {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: space-between;
    }

    .talent-model-card {
        background-color: #ffffff;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        flex: 1;
        min-width: 280px;
        text-align: center;
    }

    .talent-model-card h4 {
        font-size: 1.3em;
        color: #34495e;
        margin-bottom: 10px;
    }

    .talent-model-card .model-diagram {
        margin-top: 20px;
        text-align: center;
    }

    .talent-model-card .model-diagram img {
        max-width: 100%;
        height: auto;
        border-radius: 5px;
    }

    .talent-model-card .key-point {
        margin-top: 15px;
        font-size: 1em;
        color: #555;
        text-align: justify;
    }

    .talent-model-card .key-point span {
        font-weight: bold;
        color: #2c3e50;
    }

    /* Section: Employment Prospects and Salary Analysis */
    .employment-analysis-section {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: space-around;
        margin-top: 30px;
    }

    .jy .employment-analysis-card {
        background-color: #F4F9FE;
    }

    .employment-analysis-card {
        background-color: #F5F6FA;
        padding: 25px;
        text-align: center;
        flex: 1;
        min-width: 250px;
        display: flex;
    }



    .employment-analysis-card h4 {
        font-size: 1.3em;
        color: #34495e;
        margin-bottom: 10px;
		font-weight:bold;
    }

    .employment-analysis-card .salary-range {
        font-size: 1.8em;
        font-weight: bold;
        color: #e67e22;
        /* Orange */
        display: block;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .employment-analysis-card p {
        font-size: 1.1em;
        color: #555;
        text-align: justify;
        line-height: 2;
    }

    .employment-analysis-card .percentage-highlight {
        font-weight: bold;
        color: #27ae60;
        /* Green */
    }

    .employment-analysis-card .trend-icon {
        font-size: 1.2em;
        color: #27ae60;
        /* Green for increase */
        margin-right: 5px;
    }

    .content-jiuye-item {
        display: flex;
        gap: 30px;
    }

    .content-jiuye-item .content-jiuye-item-card {
        padding: 10px 10px 30px;
        background-color: #F5FAFE;
        border-top: 10px solid #499DFF;
    }


    .content-jiuye-item-card h4 {
        font-size: 1.3em;
        padding: 10px 0 20px;
        border-bottom: 1px solid #E0EFFB;
		 font-weight: bold;
    }

    .content-jiuye-item-card .salary-range {
        font-size: 1.2em;
        margin-top: 10px;
        line-height: 3;
    }

    .content-jiuye-item-card .salary-range span {
        font-size: 1.4em;
        color: #499DFF;
        font-weight: bold;
    }


    .content-jiuye-item-card p {
        font-size: 1.1em;
        line-height: 2;
        color: #555;
    }

    .content-jiuye-section {
        margin-top: 30px;
        display: flex;
    }

    .content-jiuye-section h4 {
        text-align: left;
    }

    .employment-analysis-card .trend-icon.decrease {
        font-size: 1.8em;
    }

    .content-jiuye-section .jiuye-section-txt {
        border-right: 1px solid #D9DADD;
        padding-right: 25px;
    }

    .content-jiuye-section .end .jiuye-section-txt {
        border: unset;
    }

    .ces-footer {
        background: url(images/ces-footer.jpg) no-repeat center;
        padding: 5% 0;
        color: #fff;
    }

    .ces-footer h1 {
        color: #fff;
        text-align: center;
        padding-bottom: 50px;
        position: relative;
    }

    .ces-footer h1::after {
        content: '';
        position: absolute;
        bottom: 0;
        background-color: #499DFF;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        height: 2px;
        width: 40%;
    }

    .ces-footer h2 {
        color: #fff;
        text-align: center;
        font-weight: 400;
        line-height: 3;
    }

    .ces-footer p {
        text-align: center;
        color: #fff;
        font-size: 1.8em;
        font-weight: bold;
    }

    .employment-analysis-card .trend-description {
        font-size: 1em;
        color: #555;
        margin-bottom: 15px;
        text-align: left;
    }

    .employment-analysis-card .note-text {
        font-size: 0.9em;
        color: #7f8c8d;
        margin-top: 15px;
        text-align: center;
    }

    /*robot*/
    .robot {
        background-color: #030A14;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        list-style: none;

    }

    .robot-content {
        padding: 0;
    }

    .robot-content img {
        width: 100%;
        height: auto;
        margin-bottom: 70px;
    }

    /*网站*/
    .ai-agent {
        background: url(images/wz_bg01.jpg) no-repeat center;
        background-size: 100%;
    }

    .ai-agent .content {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .ai-agent .content .title {
        display: flex;
        align-items: center;
        padding: 4em 5em 1em 5em;
    }

    .ai-agent .content .title .icon27 {
        background-image: url(images/icon/ic27.png);
        width: 50px;
        height: 60px;
        display: inline;
        background-size: 100%;
        margin-right: 2em;
    }

    .ai-agent .content h1 {
        font-size: 2.8em;
        margin: 0;
    }

    .ai-agent .content .video {
        text-align: center;
        width: calc(100% - 400px);
        padding: 2em 2em 4em 11em;
    }

    .images img {
        width: 100%;
        height: auto;
    }

    /*ai-rec*/

    .rec-content {
        width: 1200px;
        padding: 50px 0;
        margin: auto;
    }

    .ai-rec .rec:nth-child(n) {
        background-color: #1fbdd3;
    }


    .ai-rec .rec:nth-child(even) {
        background-color: #25c6dc;
    }
    /*media*/
    .xmt img {
        width: 100%;
        padding: 0;
        margin: 0;
    }
	
    /*go*/
    .go img {
        width: 100%;
        margin: auto;
    }

    .n12 {
        width: 1200px;
        margin: auto;
        padding: 0;
    }

    .go h1 {
        font-size: 60px;
        padding: 60px 0;
        margin-top: 0;
    }

    .go .js h3 {
        font-size: 32px;
        padding: 20px;
        background-color: #FF0;
        margin: 20px auto;
        width: 70%;
        color: #FE1700;
        border-radius: 50px 0px / 50px 0px;
    }

    .go .js ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        background-color: #F0F5FB;
        padding: 40px 50px 40px 80px;
        margin: 30px auto 60px;
    }

    .go .js ul li {
        width: 50%;
        font-size: 36px;
        line-height: 2.2;
    }

    .go .sz {
        margin: auto;
        text-align: center;
        background-image: linear-gradient(316deg, #4AA4E2, #052C63, #01C6F4);
        padding-bottom: 60px;
    }

    .go .sz h1 {
        color: #ffffff;
    }

    .go .xm {
        background-color: #ffffff;
        margin: auto;
        text-align: center;
    }

    .go .xm .n12 {
        padding-bottom: 60px;
    }

    .go .jy {
        padding-bottom: 60px;
        background-image: linear-gradient(-59deg, #72D3FF 10%, #ABC4FF 100%);
    }

    .go .jy img {
        margin-bottom: 30px;
    }

    .go .qy h1 {
        padding: 60px 0 30px;
    }

    .go .qy p {
        font-size: 32px;
        text-align: center;
    }

    .go .red {
        color: #ff0000;
    }

    .go .blue {
        color: #499DFF;
    }

    /*yjs*/
    .yjs img {
        width: 100%;
        margin: auto;
        padding: 0;
    }

    .yjs h1 {
        font-size: 50px;
    }

    .yjs .item1 {
        background: url(images/yjs_bg1.jpg) no-repeat center;
    }

    .yjs .item1 .n12 {
        padding: 50px 0;
    }

    .yjs .item1 h1 {
        color: #ffffff;
        margin: auto;
    }

    .yjs .item1 p {
        font-size: 32px;
        text-align: center;
        color: #FFCC16;
        margin: 30px auto;
    }

    .yjs .item1 h3 {
        font-size: 36px;
        color: #fff;
        text-align: left;
        margin: 30px 0 10px 50px;
    }

    .yjs .item1 h3:last-child {
        margin: 10px 50px 0px 0;
        text-align: right;
    }

    .yjs .item2 {
        background-color: #E7EDED;
        padding-bottom: 50px;
    }

    .yjs .item2 h1 {
        padding: 50px 0;
        margin: auto;
        line-height: 1.4;
    }

    .yjs .item2 ul {
        list-style: none;
        display: flex;
        gap: 30px;
        text-align: center;

    }

    .yjs .item2 ul li p {
        font-size: 22px;
        font-weight: 400;
        line-height: 1.8;
        color: #555;
    }

    .yjs .item2 ul li p:nth-child(2) {
        color: #083976;
        font-weight: bold;
        margin-top: 10px;

    }


    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .content-block {
            flex-direction: column;
            text-align: center;
        }

        .content-block:nth-child(even) {
            flex-direction: column;
            /* Reset reverse order for smaller screens */
        }

        .content-block-image,
        .content-block-text {
            max-width: 100%;
            margin: 10px auto;
        }

        .feature-section,
        .advantages-section,
        .data-security-section,
        .interdisciplinary-section,
        .talent-model-section,
        .employment-analysis-section {
            flex-direction: column;
            align-items: center;
        }

        .feature-card,
        .advantage-card,
        .data-security-card,
        .interdisciplinary-card,
        .talent-model-card,
        .employment-analysis-card {
            min-width: unset;
            width: 90%;
        }

        .header-banner h1 {
            font-size: 2em;
        }

        h1 {
            font-size: 2em;
        }

        h2 {
            font-size: 1.8em;
        }

        h3 {
            font-size: 1.4em;
        }

        .section-title {
            font-size: 1.8em;
        }
    }