/* #region 大数据可视化定制 */
/* card */
body > main > main .card > img {
    width: 100%;
}
body > main > main .card > div {
    margin: 20px;
}
body > main > main .card > div > div {
    padding-bottom: 10px;

    border-bottom: solid 1px var(--c_border_dark);

    font-size: 20px;
    color: var(--c_text_dark);
}
body > main > main .card > div > p {
    margin-top: 10px;

    color: var(--c_text_light);
}

/* #region li_card */
body > main > main .li_card {
    position: relative;

    padding: 30px 20px;

    border: solid 2px var(--c_theme);
}

body > main > main .li_card > .num {
    position: absolute;
    left: 20px;
    top: -23px;

    width: 100px;

    background-color: var(--c_bg_light);

    text-align: center;

    font-size: 30px;
    color: var(--c_theme);
    font-family: 'din';
    font-weight: 700;
}
body > main > main .li_card > .num::before,
body > main > main .li_card > .num::after {
    content: '';

    position: absolute;
    top: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background-color: var(--c_theme);
}
body > main > main .li_card > .num::before {
    left: 0;
}
body > main > main .li_card > .num::after {
    right: 0;
}

body > main > main .li_card > .tittle {
    font-size: 22px;
}

body > main > main .li_card > p {
    margin: 0;
    margin-top: 10px;

    color: var(--c_text_light);
}
/* #endregion li_card */

/* ol_li */
body > main > main .ol_li > div {
    font-size: 24px;
}
body > main > main .ol_li > div > span {
    margin-right: 0.4em;

    font-size: 30px;
    color: var(--c_theme);
    font-family: 'din';
    font-weight: 700;
}
body > main > main .ol_li > p {
    margin: 0;
    margin-top: 10px;
}

/* ol_1 */
body > main > main .ol_1 > li + li {
    margin-top: 10px;
}

/* ol_2 */
body > main > main .ol_2 > li + li {
    margin-top: 30px;
}
body > main > main .ol_2 .ol_li > p {
    height: 4em;
}

/* #region swiper_nav */
body > main > main .swiper_nav {
    display: flex;
    align-items: center;
}

body > main > main .swiper_nav > .pagination {
    margin: 0 10px;

    width: unset;

    font-size: 30px;
    font-family: 'din';
}
body > main > main .swiper_nav > .pagination .red {
    color: var(--c_theme);
}

body > main > main .swiper_nav > button {
    position: relative;

    width: 60px;
    height: 30px;
}
body > main > main .swiper_nav > button img {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
}
body > main > main .swiper_nav > button img:nth-child(2) {
    opacity: 0;
}
body > main > main .swiper_nav > button:hover img:nth-child(2) {
    opacity: 1;
}
/* #endregion swiper_nav */

/* swiper_1 */
body > main > main .swiper_1 .swiper-slide img {
    display: block;

    width: 100%;
}

/* swiper_2 */
body > main > main .swiper_2 {
    margin-bottom: 30px;
}
body > main > main .swiper_2 .swiper-slide {
    display: grid;
    grid-template-columns: repeat(4, 24%);
    justify-content: space-between;
}
body > main > main .swiper_2 .card {
    background-color: var(--c_bg);
}

body > main > main .swiper_2 {
    position: relative;
}
body > main > main .swiper_2 .swiper_nav {
    position: absolute;
    right: 0;
    top: -60px;
}

/* swiper_3 */
body > main > main .swiper_3 .swiper-slide {
    display: grid;
    grid-template-columns: repeat(3, 32%);
    justify-content: space-between;
}
body > main > main .swiper_3 .card {
    background-color: var(--c_bg_light);
}

body > main > main .swiper_3 {
    position: relative;
}
body > main > main .swiper_3 .swiper_nav {
    position: absolute;
    right: 0;
    top: -60px;
}

/* bgimg_card */
body > main > main .bgimg_card {
    background-position: bottom, center center;
    background-size: 100% 50%, cover;
    background-repeat: no-repeat;
}
body > main > main .bgimg_card {
    display: grid;
    align-items: end;
}
body > main > main .swiper_4 .bgimg_card > div {
    padding: 30px 80px;
}
body > main > main .bgimg_card > div > div {
    font-size: 20px;
}

/* #region swiper_4 */
body > main > main .swiper_4 {
    color: #fff;
}
body > main > main .swiper_4 .swiper-slide {
    width: 60%;
    max-width: 1200px;
}

body > main > main .swiper_4 .bgimg_card {
    width: 100%;
    height: 460px;
}

/* #region ---- button */
body > main > main .swiper_4 {
    position: relative;
}
body > main > main .swiper_4 button {
    position: absolute;
    top: 50%;

    transform: translate(0, -50%);

    padding: 10px 20px;

    box-sizing: content-box;
    width: 60px;
    height: 30px;
}
body > main > main .swiper_4 button.prev {
    left: calc(20% - 70px);
}
body > main > main .swiper_4 button.next {
    right: calc(20% - 70px);
}

/* -------- button img */
body > main > main .swiper_4 button > div {
    position: relative;

    width: 100%;
    height: 100%;
}
body > main > main .swiper_4 button img {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
}

/* -------- hover */
body > main > main .swiper_4 button img:nth-child(2) {
    opacity: 0;
}
body > main > main .swiper_4 button:hover img:nth-child(2) {
    opacity: 1;
}
body > main > main .swiper_4 button {
    background-color: #fff;
}
body > main > main .swiper_4 button:hover {
    background-color: var(--c_theme);
}
/* #endregion ---- button */
/* #endregion swiper_4 */

/* #region component_1 */
body > main > main .component_1 {
    display: grid;
    /* fr会使swiper抽风 */
    grid-template-columns: 35% 65%;

    margin: 40px 0;
}

/* #region ---- article */
body > main > main .component_1 > article {
    position: relative;
}
body > main > main .component_1 > article .swiper_nav {
    position: absolute;
    left: 0;
    bottom: 0;
}
body > main > main .component_1 > article .swiper-slide > p {
    margin: 20px 10% 40px 0;
}
/* #endregion ---- article */

/* #region ---- aside */
body > main > main .component_1 > aside {
    display: flex;
    gap: 5px;

    height: 350px;
}
body > main > main .component_1 > aside > section {
    flex: none;

    width: 100px;

    overflow: hidden;
}

/* #region -------- section */
/* ------------ tittle */
body > main > main .component_1 > aside > section {
    position: relative;
}
body > main > main .component_1 > aside > section > .tittle {
    position: absolute;
    left: 0;
    top: 0;
}
body > main > main .component_1 > aside > section > .tittle {
    padding-left: 28px;
    padding-top: 50px;

    font-size: 30px;
}
body > main > main .component_1 > aside > section > .tittle {
    width: 100%;
    height: 100%;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
body > main > main .component_1 > aside > section > .tittle {
    writing-mode: vertical-lr;

    color: #fff;
}

/* #region ------------ carousel */
body > main > main .component_1 > aside > section {
    display: grid;
    grid-auto-rows: 100%;
    justify-content: center;
}

body > main > main .component_1 .carousel {
    width: 650px;
    height: 100%;

    overflow: hidden;
}
body > main > main .component_1 .carousel > div {
    display: flex;

    width: 100%;
    height: 100%;

    transition: 0.3s;
}
body > main > main .component_1 .carousel > div > img {
    flex: none;

    width: 100%;
    height: 100%;
}
/* #endregion ------------ carousel */

/* #region ------------ show */
body > main > main .component_1 > aside > section.show {
    flex-grow: 1;
}
body > main > main .component_1 > aside > section {
    transition: 0.6s;
}

body > main > main .component_1 > aside > section.show > .tittle {
    opacity: 0;
}
body > main > main .component_1 > aside > section > .tittle {
    transition: 0.3s;
}
/* #endregion ------------ show */
/* #endregion -------- section */
/* #endregion ---- aside */
/* #endregion component_1 */
/* #endregion 大数据可视化定制 */