/* MAIN CONTENT*/

/* DIAGNOSIS */
.content {
    width: 80%;
    /*background-color: #0a9895;*/
    margin: 0 auto;
}

.diagnosis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 5rem 5rem;
}

.diagnosis .title {
    /*text-align: center;*/
    font-size: 4rem;
    color: #444444;
    font-weight: bold;
}

.diagnosis .content {
    margin-top: 5rem;
    width: 100%;
    font-size: 1.6rem;
    color: #999;
    letter-spacing: 0.2rem;
    text-indent: 3.2rem;
}

/* VALUE */
.value {
    padding: 0 5rem;
}

.value > .title {
    width: 100%;
    font-size: 4em;
    font-weight: bold;
}

.value > .content {
    width: 100%;
    font-size: 1.6rem;
    color: #cccccc;
    display: flex;
    gap: 1rem;
}

.value .content .left,
.value .content .middle,
.value .content .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}

.value .content .left,
.value .content .right {
    background-image: url("../img/bg-card-white.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.value .content .middle {
    background-image: url("../img/bg-card-blue.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.value .content .img_icon {
    display: block;
    width: 8rem;
    height: 8rem;
    margin-top: 4rem;
    background-image: url("../img/content_icon.png");
    background-repeat: no-repeat;
}

.value .content .left .img .img_icon {
    background-position: -880px -160px;
}

.value .content .middle .img .img_icon {
    background-position: -960px -160px;
}

.value .content .right .img .img_icon {
    background-position: -1040px -160px;
}

.value .content .title {
    margin: 2.2rem 0;
}

.value .content .title a {
    font-size: 1.6rem;
    color: #444444;
}

.value .content .inside {
    width: 80%;
    padding: 2rem;
    margin-bottom: 3rem;
    /*background-color: #cde8f6;*/
    background-color: #3491f1;
    /*border-radius: 1rem;*/
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.value .content .inside a {
    font-size: 1.2rem;
    padding: 1rem;
    color: #ffffff;
    width: 100%;
    display: block;
}

.value .content .middle .title a {
    color: #ffffff;
}

.value .content .middle .inside {
    background-color: #E1E1E1;
}

.value .content .middle .inside a {
    color: #000000;
}

/* SERVICE*/
.service {
    padding: 2rem;
}

/* SOLVE PROBLEM*/
.solve {
    margin: 5rem auto;
    display: flex;
    justify-content: center;
    gap: 10rem;
    padding: 5rem;
    border-top: 1px #e6be19 dotted;
    border-bottom: 1px #e6be19 dotted;
}

.solve-content {
    flex: 1.5;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

}

.solve-content h1 {
    font-size: 3rem;
    color: #444444;
    margin-bottom: 1rem;
}

.solve-content dt {
    font-size: 2rem;
    color: #8f8f8f;
    padding: 1rem 0;
}

.solve-content dd {
    font-size: 1.6rem;
    color: #8f8f8f;
    padding: 1rem 0;
}

.solve-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.solve-picture img {
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    /*background-color: #3491f1;*/
}

.pattern {
    margin: 5rem auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 10rem;
    padding: 5rem;
    border-bottom: 1px #e6be19 dotted;
}

.pattern-content {
    flex: 1.5;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.pattern-content h1 {
    font-size: 3rem;
    color: #444444;
    margin-bottom: 1rem;
}

.pattern-content dt {
    font-size: 2rem;
    color: #8f8f8f;
    padding: 1rem 0;
}

.pattern-content dd {
    font-size: 1.6rem;
    color: #8f8f8f;
    padding: 1rem 0;
}

.pattern-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.pattern-picture img {
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
}

.advantage {
    margin: 5rem auto;
    display: flex;
    justify-content: center;
    gap: 10rem;
    padding: 5rem;
    border-bottom: 1px #e6be19 dotted;
}

.advantage-content {
    flex: 1.5;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.advantage-content h1 {
    font-size: 3rem;
    color: #444444;
    margin-bottom: 1rem;
}

.advantage-content dt {
    font-size: 2rem;
    color: #8f8f8f;
    padding: 1rem 0;
}

.advantage-content dd {
    font-size: 1.6rem;
    color: #8f8f8f;
    padding: 1rem 0;
}

.advantage-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.advantage-picture img {
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
}


/* SCENE */
.scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    /*height: 100rem;*/
    border-top: 2px solid #d5e3f3;
    padding: 5rem;
    /*background-image: url("../img/bg-scene.jpg");;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center center;*/
    /*background-size: cover;*/
}

.scene-header {
    font-size: 2rem;
    margin: 5rem 0 10rem 0;
}

.scene-header h1 {
    position: relative;
    color: #444444;
}

.scene-header h1:before {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem; /* 设置图片宽度 */
    height: 1rem; /* 设置图片高度 */
    background-image: url("../img/down.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    color: #ffffff;
}

.scene-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    width: 100%;
}

.scene-tab-item {
    color: #444444;
    position: relative;
    font-size: 2rem;
    cursor: pointer;
    font-weight: bold;
    padding: 0.5rem 0;
    margin: 0 2rem;
    transition: all 0.3s ease;
}

.scene-tab-item.active,
.scene-tab-item:hover {
    border-bottom: 3px solid #1876d2;
    transform: scale(1.2);
}

.scene-content-item {
    display: none;
}

.scene-content-item.active {
    display: flex;
}

.scene {
}

.scene-content {
    width: 80%;
    /*height: 90rem;*/
    /*overflow: hidden;*/
    border-top: 0.2rem solid #e5e5e5;
    box-sizing: border-box;
}

.scene-content .scene-company,
.scene-content .scene-gov {
    flex-direction: column;
}

.scene-title p {
    font-size: 1.6rem;
    text-indent: 3.2rem;
    color: #8f8f8f;
    margin: 2rem 0;
    padding: 1rem;
}

.scene-inside {
    display: flex;
    flex-direction: column;
}

.scene-inside .scene-item {
    display: flex;
    flex-direction: column;
    box-shadow: 0.5rem 0.5rem 1rem #e5e5e5;
    padding: 2rem;
    margin: 2rem 2rem;
    background-color: #fafafa;
    border-radius: 2rem;
    transition: all 0.5s ease;

}

.scene-inside .scene-item:hover {
    transform: scale(1.03);
    box-shadow: 1rem 1rem 3rem #e5e5e5;
}

.scene-inside .scene-item h2 {
    font-size: 2rem;
    color: #31b4b2;
    margin: 2rem 0;
}

.scene-inside .scene-item p {
    font-size: 1.6rem;
    color: #444444;
    margin: 2rem 0;
}

/* PROCESS */

.process {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 5rem auto;
    border-top: 2px solid #d5e3f3;
}

.process-header {
    font-size: 2rem;
    margin: 5rem 0 10rem 0;
}

.process-header h1 {
    position: relative;
    color: #444444;
}

.process-header h1:before {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem; /* 设置图片宽度 */
    height: 1rem; /* 设置图片高度 */
    background-image: url("../img/down.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    color: #ffffff;
}

.process .process-title h2 {
    font-size: 2rem;
    color: #444444;
}

.process .process-inside {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 5rem;
    border-top: 2px solid #e5e5e5;
}

.process .process-inside .process-item {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 6.5rem 0;
    border: 1px solid #d5e3f3;
    border-radius: 1rem;
    padding: 1rem;
    transition: all 0.5s ease;
    box-shadow: 0.5rem 0.5rem 3rem #e5e5e5;
    flex: 1;
    background-color: #31b4b2;
    text-align: center;
}

.process-item:hover {
    transform: scale(1.05);
    box-shadow: 1rem 1rem 6rem #e5e5e5;
}

.process-item .process-item-title {
    font-size: 1.6rem;
    color: #fafafa;
    margin: 2rem 0;
}

.process-item .process-item-img img {
    width: 4rem;
    height: 4rem;
}

.process-item .process-item-content {
    font-size: 1.6rem;
    margin: 2rem 0;
}

.process .download-example a {
    font-size: 1.6rem;
    padding: 1rem 2rem;
    height: 80rem;
    border-radius: 1rem;
    background-color: #31b4b2;;
}

.download-example a:hover {
    background-color: #168f8d;
}