/* css 初始化 */

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #000;
}

button {
    background: none;
    border: 0;
}

/* 设置 62.5% ，方便使用rem */
html {
    font-size: 62.5%;
}

body {
    font-size: 1.4rem;
    font-family: Arial, Helvetica, sans-serif;
}


:root {
    --line-color: #ECEBEB;
    --hover-color: #ECEBEB;
    --color-green: #39C388;
    --max-width: 96%;
}


.max_wraper {
    width: var(--max-width);
    margin: 0 auto;
}

.header {
    height: 6rem;
    padding: 0 4%;
    background-color: #fff;
    border-bottom: 1px solid var(--line-color);
}

.header .max_wraper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.logo {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 6rem;
    /* 字间距 */
    letter-spacing: 0;
    color: #000;
}

.nav_items {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav_items a {
    color: #6A717F;
}

.nav_items a:hover {
    color: #000;
}

.slider_r {
    display: flex;
    gap: 2rem;
}

.slider_r button {
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: .6rem;
    position: relative;
}

.slider_r button ul {
    display: none;
    width: fit-content;
    line-height: 3rem;
    text-align: left;
    /* 禁止换行 */
    white-space: nowrap;
    border: .1rem solid var(--line-color);
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
    position: absolute;
    top: 5rem;
    color: #6A717F;
}

.slider_r button ul li {
    padding: .4rem 2rem;

}

.slider_r button ul li:hover {
    background: var(--hover-color);
    color: #000;
}

.slider_r button svg {
    width: 2rem;
    height: 2rem;
}

.slider_r button:hover {
    background: var(--hover-color);
}

.slider_r button:hover ul {
    display: block;
}

.main {
    text-align: center;
    padding-top: 12.8rem;
}

.h1_title {
    font-size: 6.4rem;
    text-align: center;
    position: relative;
}

.h1_title .bubble {
    padding: .2rem 1rem;
    border-radius: 2rem;
    position: absolute;
    margin-left: 1rem;
    font-size: 2rem;
    color: #fff;
    background: var(--color-green);
}

.description {
    font-size: 2rem;
    margin-top: 2rem;
    color: #6A717F;
}

.start_now {
    width: 18rem;
    margin-top: 4rem;
    height: 5.2rem;
    line-height: 5.2rem;
    border-radius: 1rem;
    background: #000;
    color: #fff;
    font-size: 2rem;
    vertical-align: middle;
    cursor: pointer;
    opacity: .8;
    overflow: hidden;
}

.start_now:hover {
    opacity: 1;
}

.start_now svg {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: .6rem;
    transform: translateY(-.2rem);
    vertical-align: middle;
    /* transition: all .3s; */
}

.start_now:hover svg {
    /* 左右平移10像素 */
    transform: translateY(0);
    transform: translateX(5rem);
    transition: all .2s;
}

.start_now:hover i {
    display: inline-block;
    transform: translateX(20rem);
    transition: all .5s;
}

.covers {
    width: 100%;
    display: flex;
    justify-content: center;
}

.covers .max_wraper {
    display: flex;
    justify-content: center;
    gap: 3rem;
    align-items: end;
}

.covers svg {
    margin: 0 1rem;
}

.block {
    margin-top: 10rem;
    margin-bottom: 4rem;
}

.block .head {
    margin-bottom: 4rem;
}

.block .head h3 {
    font-size: 4rem;
}

.latests .description {
    font-size: 1.6rem;
    margin-top: 1rem;
}

.list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.list .item {
    /* 每行3个 */
    flex-basis: calc((100% - 4rem) / 3);
    height: 33rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    overflow: hidden;
}

.more {
    width: fit-content;
    padding: 0 1rem;
    line-height: 4rem;
    margin: 8rem auto;
    border: .1rem solid #B8C0D0;
    border-radius: .6rem;
    color: #B8C0D0;
    cursor: pointer;
    text-align: center;
}


.advantages {
    background: #F1F1F1;
    padding: 8rem 0;
}

.advantages .cards_list {
    display: flex;
    gap: 2rem;
    height: 100%;
    text-align: left;
}

.cards {
    height: 42rem;
}

.card_item {
    background: linear-gradient(45deg, #000000, #0A3282);
    border-radius: 2rem;
    padding: 2rem;
    color: #fff;
    cursor: pointer;
    position: relative;
}

.cards_l {
    flex: 3;
}

.cards_l .card_item,
.cards_r .card_item {
    flex: 1;
    height: 100%;
}

.cards_c {
    flex: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.cards_r {
    flex: 2;
}

.cards_c .card_item {
    width: calc((100% - 2rem) / 2);
}

.card_item h5 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.card_item p {
    font-size: 1.4rem;
    line-height: 2rem;
    opacity: .7;
}

.card_item picture {
    width: 10rem;
    height: 10rem;
    display: block;
    background: #fff;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    border-radius: 50%;
    opacity: .1;
    overflow: hidden;
}


.contact_cards {
    display: flex;

    gap: 2rem;
}

.contact_item {
    width: calc((100% - 8rem) / 5);
    /* height: 35rem; */
    text-align: center;
    border-radius: 2rem;
    padding: 4rem 2rem;
    position: relative;
    cursor: pointer;
    background: #FAFBFC;
}

.contact_item picture {
    width: 70%;
    margin: 0 auto;
    display: block;
}

.contact_item picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact_item h5,
.contact_item p {
    color: #6A717F;
}

.contact_item h5 {
    font-size: 1.6rem;
    margin-top: 2rem;
}

.contact_item p {
    margin-top: 1rem;
}

.banner_start {
    text-align: left;
}

.banner_start .max_wraper {
    background: #000000;
    color: #fff;
    border-radius: 2rem;
    padding: 6rem 8rem;
    position: relative;
}

.banner_start .max_wraper::after {
    content: "";
    display: block;
    background-image: url("../images/linebg.png");
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /* 事件穿透 */
    pointer-events: none;
}

.banner_start h2 {
    font-size: 4.8rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

.banner_start p {
    opacity: .6;
}

.banner_start .start_now {
    background: var(--color-green);
}

.banner_start .max_wraper .illustration {
    display: block;
    width: 30rem;
    height: 30rem;
    position: absolute;
    right: 5%;
    bottom: 5%;
}

.banner_start .max_wraper .illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer_main {
    margin: 8rem auto;
}

.footer_main .max_wraper {
    display: flex;
    justify-content: space-between;
    gap: 8rem;
}

.footet_info {
    flex: 3;
}

.footer_logo {
    font-size: 6.4rem;
    font-weight: 600;
}

.footet_info .description {
    font-size: 1.4rem;
    line-height: 2.4rem;
    color: #6A717F;
}

.contents {
    flex: 6;
    display: flex;
    gap: 10rem;
}

.contents .item {
    font-size: 1.4rem;
    line-height: 3rem;
    color: #6A717F;
}

.contents a {
    color: #6A717F;
}

.contents a:hover {
    color: #000;
}

.contents .item h5 {
    font-size: 1.6rem;
    color: #000;
}

.follows {
    flex: 2;
    line-height: 3rem;
}

.follows ul {
    display: flex;
    gap: 4rem;
    font-size: 2rem;
    color: #6A717F
}

.copyright {
    height: 6rem;
    border-top: .1rem solid var(--line-color);
    line-height: 6rem;
    text-align: center;
}

.copyright,
.copyright a {
    color: #B8C0D0;
}