:root {
    --font-grey: #b8b3aa;
    --font-brown2: #c8a551;
    --font-brown3: #816435;
    --font-brown4: #9d8050;

    --deep-yellow: #836a42;
    --deep-brown: #5f322d;
    --deep-green: #364541;
    --deep-green2: #4e4029;
    --deep-yellow-green: #50422b;
}

.page-permanent-huaxia {
    width: 100%; max-width: 100%;
    overflow: hidden;
}

.section-title {
    font-size: var(--medium-to-large);
    color: var(--font-brown2);
    position: relative; margin-bottom: 30px;
}
.section-title.white { color: var(--font-white); }

.section-title .circle {
    position: relative; display: block;
    margin-left: 25px; margin-right: 10px;
    z-index: 1;
}

.section-title .circle::before {
    content: ""; position: absolute;
    top: 45%; left: -60%;
    width: 50px; height: 50px;
    border-radius: 50%; z-index: -1;
    background-color: var(--font-brown4);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.section-year {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif; color: var(--font-brown3);
    font-size: var(--small-size); font-weight: bold;
    margin-bottom: 30px;
}

.section-year.brown { color: var(--deep-brown); }

.section-year.white { color: var(--font-white); }

.section-text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    color: var(--font-white); text-indent: 2em;
    font-size: var(--smaller-size); line-height: 1.8;
    text-align: justify;
}
.section-text p { letter-spacing: 0.5px; }

.section-text + .section-text, .section-text p + p { margin-top: 30px; }

.common-component-shape-box-wrapper { --box-bg: var(--deep-green); }
.common-component-shape-box-wrapper.brown { --box-bg: var(--deep-brown); }
.common-component-shape-box-wrapper.green { --box-bg: var(--deep-green2); }
.common-component-shape-box-wrapper.yellow { --box-bg: var(--deep-yellow); }
.common-component-shape-box-wrapper.yellow-green { --box-bg: var(--deep-yellow-green); }

.swiper-slide.common-component-shape-box-wrapper,
.common-component-shape-box-wrapper {
    height: 350px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    position: relative;
}

.exhibits-introduce { color: var(--font-white); font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif; }

.exhibits-name { font-size: var(--small-size); font-weight: 500; margin-bottom: 30px; letter-spacing: 1px; }

.exhibits-other { color: var(--font-white); font-size: var(--smaller-size); letter-spacing: 0.5px; }

.exhibits-other + .exhibits-other { margin-top: 15px; }

.exhibition-introduce-container { width: 80%; max-width: 1720px; margin-left: auto; margin-right: auto; }

/* =================== First part ==================== */
#first-part {
    padding-top: 140px;
    background-image: url(../images/exhibition/permanent/huaxia/huaxia-page-bg-1.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.page-title-wrap { padding-bottom: 11%; }

.page-title-wrap .page-title { width: 57.24%; max-width: 100%; }

.page-foreword-font .section-title { font-size: var(--large-size); }

.page-foreword-font .section-title.foreword { margin-top: 50px; }

.page-foreword-font .section-title:first-child { margin-bottom: 120px; }

.page-foreword-font .foreword span { position: absolute; left: 50%; bottom: 0; }

.page-foreword-font .section-text:not(.foreword-font) p:first-child { text-indent: 2em; }

/* =================== First exhibition hall ==================== */
.first-exhibition-hall .first-exhibition-introduce { position: relative; }

.first-exhibition-hall-left {
    position: absolute; width: 100%;
    top: 50%; left: 50%;
}

.first-exhibits-wrapper { margin-top: 60px; position: relative; }

.first-exhibits-wrapper .exhibits-left-image { width: 55%; }
.first-exhibits-wrapper .exhibits-introduce { width: 45%; padding: 0 20px; }

.first-exhibits-list {
    position: absolute; z-index: 10;
    top: 0; left: 15px; right: 15px;
    width: 100%; height: 100%;
    pointer-events: none;
}

.first-exhibits-inner .swiper-slide {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.first-exhibits-list .exhibits-item {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 0px 60px 0px;
}

.first-exhibits-list .exhibits-left-image {
    text-align: center;
    -webkit-transform: translateY(-25%);
    -moz-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    -o-transform: translateY(-25%);
    transform: translateY(-25%);
}

.swiper-button-next, .swiper-button-prev {
    width: 100px; height: 100px;
    margin-top: -50px;
    border-radius: 50%; background-color: var(--font-brown4);
}

.swiper-button-next::after, .swiper-button-prev::after { color: var(--font-white); }

.swiper-button-prev {
    left: 15px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.swiper-button-next {
    right: 15px;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%);
}

/* =================== Second part ==================== */
#second-part {
    margin-top: -21%; padding-top: 21%; padding-bottom: 35%;
    background-image: url(../images/exhibition/permanent/huaxia/huaxia-page-bg-2.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.second-exhibition-hall { margin-top: 120px; }

.second-exhibits-inner { position: relative; z-index: 1; }

.second-exhibits-inner-swiper { position: absolute; top: 50%; width: 100%; }

.second-exhibits-list { position: relative; z-index: 1; pointer-events: none; }

.second-exhibits-list .exhibits-image {
    width: max-content;
    -webkit-transform: translateX(-30%);
    -moz-transform: translateX(-30%);
    -ms-transform: translateX(-30%);
    -o-transform: translateX(-30%);
    transform: translateX(-30%);
}

.second-exhibits-list .exhibits-introduce { padding-left: 30%; }

/* =================== Third part ==================== */
/* =================== Third exhibition hall ==================== */
#third-part {
    margin-top: -36%; padding-top: 30%; padding-bottom: 40%;
    background-image: url(../images/exhibition/permanent/huaxia/huaxia-page-bg-3.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
}

#third-part::after {
    content: "";
    position: absolute;
    top: 10%; left: 0; z-index: -1;
    width: 100%; height: 90%;
    background-image: url(../images/exhibition/permanent/huaxia/huaxia-page-bg-3-supplement.png);
    background-size: 100%;
}

.third-exhibition-hall-right-image { position: absolute; top: 0; right: 0; }

.third-exhibits-inner { position: relative; }

.third-exhibits-inner-swiper {
    position: absolute; top: 50%; left: 15px; width: calc(100% - 30px);
    -webkit-transform: translate(50%, -50%);
    -moz-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    -o-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}

.third-exhibits-list { pointer-events: none; }

.third-exhibits-list .exhibits-image { text-align: right; }

.third-exhibits-list .exhibits-introduce { padding-left: 30%; }

/* =================== Forth exhibition hall ==================== */
.forth-exhibition-hall-wrapper {
    background-image: url(../images/exhibition/permanent/huaxia/huaxia-page-bg-4-1.png);
    background-size: auto; background-repeat: no-repeat;
    background-position: left 30%;
    position: relative;
}

.forth-exhibition-hall-left-image {
    width: max-content;
    -webkit-transform: translate(-10%, 50%);
    -moz-transform: translate(-10%, 50%);
    -ms-transform: translate(-10%, 50%);
    -o-transform: translate(-10%, 50%);
    transform: translate(-10%, 50%);
}

.forth-exhibits { position: relative; }

.forth-exhibits .exhibits-introduce { position: absolute; top: 50%; }

.forth-exhibits-bg {
    pointer-events: none;
    position: absolute;
    left: 0; top: 0%;
    width: 100%;
    transition: 5s;
}

.forth-exhibits .exhibits-image img { width: 53.28%; }

.nine-cauldrons-item { text-align: center; position: relative; }

.nine-cauldrons-item:nth-child(n + 4) { margin-top: 80px; }

.nine-cauldrons-item .nine-cauldrons-image {
    position: absolute; z-index: 3;
    left: 50%;  top: 30%;
}

.nine-cauldrons-back::before {
    padding-top: 100%;
}

.nine-cauldrons-back .circle,
.nine-cauldrons-back .bg,
.nine-cauldrons-back .circle::before,
.nine-cauldrons-back .circle::after {
    position: absolute;
    left: 0; top: 0;
}

.nine-cauldrons-back .circle::before,
.nine-cauldrons-back .circle::after {
    content: "";
}

.nine-cauldrons-back .circle {
    width: 100%; height: 100%;

    -webkit-animation: rotate 35s linear 0s infinite;
    -moz-animation: rotate 35s linear 0s infinite;
    -o-animation: rotate 35s linear 0s infinite;
    animation: rotate 35s linear 0s infinite;

    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.nine-cauldrons-back .circle::before {
    width: 100%; height: 100%;
    border: 1px solid #f0eadc;
    border-radius: 50%;
}

.nine-cauldrons-back .circle::after {
    top: -8px; left: calc(50% - 8px);
    width: 16px; height: 16px;
    border-radius: 50%;
    background-color: #f0eadc;
}

.nine-cauldrons-back .bg {
    top: 20px; left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
}

.nine-cauldrons-item:hover .circle {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

/* =================== Forth part ==================== */
#forth-part {
    background-image: url(../images/exhibition/permanent/huaxia/huaxia-page-bg-5.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}

/* =================== Fifth exhibition hall ==================== */
.fifth-exhibition-hall { border-top: 1px solid transparent; }

.fifth-exhibition-hall-inner { margin-top: -30%; }

.fifth-exhibition-swiper-wrap { position: relative; z-index: 3; }

.swiper-navigation-container {
    pointer-events: none;
    position: absolute;
    top: 0; left: 50%; z-index: 10;
    width: 100%; height: 100%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.swiper-navigation-container .swiper-button-prev,
.swiper-navigation-container .swiper-button-next {
    pointer-events: auto;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.sishen-cloud-chart {
    position: relative; z-index: 1;
}

.sishen-cloud-chart img {
    width: 42.13%;
    max-width: 828px;
}

.sishen-cloud-chart-figcaption { 
	color: var(--font-white); font-size: var(--small-size); margin-bottom: 50px; 
	font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
}

.sishen-cloud-chart-bg {  
    margin-top: -18%; 
    position: relative; 
    overflow: hidden;
}

.fifth-exhibition-hall-content {
    padding-top: 24%; 
    padding-bottom: 10%;
    text-align: center;
    position: relative;
    z-index: 1;
}

.fifth-exhibition-hall-content::before,
.fifth-exhibition-hall-content::after {
    content: "";
    position: absolute;
    left: 0; right: 0; 
    bottom: 0; width: 100%; 
    z-index: -1;
}

.fifth-exhibition-hall-content::before {
    background-image: url(../images/exhibition/permanent/huaxia/sishen-cloud-chart-bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: 100%; z-index: -2;
}

.fifth-exhibition-hall-content::after {
    background-image: url(../images/exhibition/permanent/huaxia/sishen-cloud-chart-supplement-bg.png);
    background-position: center;
    height: 70%; 
    z-index: -1;
}

/* =================== Sixth exhibition hall ==================== */
.sixth-exhibition-hall { padding-top: 100px; padding-bottom: 35%; position: relative; }

.sixth-exhibition-left-image {
    position: absolute;
    left: 0; top: -11%; z-index: 1;
    -webkit-transform: translateX(-40%);
    -moz-transform: translateX(-40%);
    -ms-transform: translateX(-40%);
    -o-transform: translateX(-40%);
    transform: translateX(-40%);
    width: 40.26%;
}

.sixth-exhibition-left-image img {
    width: 100%;
}

.sixth-exhibition-left-image .exhibits-name {
    padding-left: 45%;
    color: var(--font-white);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
}

.sixth-exhibitions-line-item .sixth-exhibitions-name,
.sixth-exhibitions-item .sixth-exhibitions-name,
.sixth-exhibitions-name {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    text-align: center; font-size: var(--smaller-size);
    color: var(--font-white); margin-top: 20px;
}

.sixth-exhibitions-item { margin: 50px 0 200px; }

.sixth-exhibitions-line.common-component-shape-box-wrapper { width: 200%; }

.sixth-exhibitions-line { position: relative; }

.sixth-exhibitions-line-item { margin-top: -8%; margin-left: 120px; }

/* =================== Fifth part ==================== */
#fifth-path {
    margin-top: -30%;
    background-image: url(../images/exhibition/permanent/huaxia/fifth-part-bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
}

#fifth-path::after {
    content: "";
    position: absolute;
    top: 10%; left: 0; z-index: -1;
    width: 100%; height: 90%;
    background-image: url(../images/exhibition/permanent/huaxia/fifth-part-bg-supplement.png);
    background-size: 100%;
}

.fifth-part-bottom-split { margin-top: 260px; }

/* =================== Seventh exhibition hall ==================== */
.seventh-exhibition-hall { position: relative; }

.seventh-exhibition-wrapper {
    position: absolute;
    top: 9%; left: 50%;
}

.seventh-exhibition-hall-top-exhibits { margin-bottom: 80px; }

.seventh-exhibition-hall-top-exhibits .exhibits-name { margin-right: 30px; }

.seventh-exhibits-introduce { margin-top: -18%; }

.seventh-exhibits-introduce .exhibits-item { position: relative; width: max-content; }

.seventh-exhibits-introduce .exhibits-item-inner {  position: absolute; top: 0;  }

.seventh-exhibits-introduce .exhibits-name { margin-bottom: 0; }

.seventh-exhibits-right { margin-left: auto; }

.seventh-exhibits-left { margin-top: -18%; }

.seventh-exhibits-right .exhibits-item-inner {
    right: 10%;
    -webkit-transform: translateY(-22%);
    -moz-transform: translateY(-22%);
    -ms-transform: translateY(-22%);
    -o-transform: translateY(-22%);
    transform: translateY(-22%);
}

.seventh-exhibits-right .exhibits-item-inner {
    right: 10%;
    -webkit-transform: translateY(-22%);
    -moz-transform: translateY(-22%);
    -ms-transform: translateY(-22%);
    -o-transform: translateY(-22%);
    transform: translateY(-22%);
}

.seventh-exhibits-left .exhibits-item-inner {
    right: -15%;
    -webkit-transform: translateY(-10%);
    -moz-transform: translateY(-10%);
    -ms-transform: translateY(-10%);
    -o-transform: translateY(-10%);
    transform: translateY(-10%);
}

/* =================== eight exhibition hall ==================== */
.eight-exhibition-hall { margin-top: 80px; }

.eight-exhibition-hall .eight-exhibition-wrapper {
    position: relative; z-index: 1;
}

.eight-exhibition-hall-left-exhibits {
    pointer-events: none; margin-top: -13%;
}

.eight-exhibits-swiper-wrapper { position: relative; margin-top: -6%; }

.eight-exhibits-swiper-wrapper .swiper { position: absolute; width: calc(100% - 30px); top: 50%; }

.eight-exhibits-swiper-common-image {
    position: relative; z-index: 5; pointer-events: none;
}

.eight-exhibits-swiper-common-image img {
    -webkit-animation: rotate 35s linear infinite;
    -moz-animation: rotate 35s linear infinite;
    -o-animation: rotate 35s linear infinite;
    animation: rotate 35s linear infinite;
}

.eight-exhibits-list, .eight-exhibits-list .exhibits-item {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; z-index: 3;
    text-align: center;
}

.eight-exhibits-list .exhibits-item .exhibits-name {
    margin-bottom: 0;
}

.eight-exhibits-list { 
	z-index: 15; pointer-events: none; 
	-webkit-transform: translateY(20%);
    transform: translateY(20%);
}

/* =================== Sixth part ==================== */
#sixth-part {
    margin-top: -20%; padding-top: 30%;
    background-image: url(../images/exhibition/permanent/huaxia/sixth-part-bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
}

#sixth-part::after {
    content: "";
    position: absolute;
    top: 10%; left: 0; z-index: -1;
    width: 100%; height: 90%;
    background-image: url(../images/exhibition/permanent/huaxia/sixth-part-bg-supplement-1.png);
    background-size: 100%;
}

.sixth-part-exhibition-hall-right-image {
    position: absolute; top: 15%;
    right: 0; text-align: right;
}

/* =================== ninth exhibition hall ==================== */
.ninth-exhibition-hall { position: relative; }

.ninth-exhibition-hall-right-image {
    width: max-content; margin-left: auto;
    pointer-events: none; margin-top: -25%;
}

.ninth-image-wrap { text-align: right; }

.ninth-image-wrap:nth-child(2) { margin-top: -40%; }

.ninth-exhibition-hall-left-exhibits, .ninth-left-exhibits { position: relative; }

.ninth-left-exhibits { z-index: 3; }

.ninth-left-exhibits .exhibits-introduce { padding-left: 10%; margin-top: 20px; }

.ninth-exhibition-hall-left-exhibits .common-component-shape-box-wrapper { position: absolute; top: 50%; width: 100%; z-index: 1; }

/* =================== Tenth exhibition hall ==================== */
.tenth-exhibition-hall {
    background-image: url(../images/exhibition/permanent/huaxia/tenth-exhibition-hall-left-bg.png);
    background-size: auto; background-repeat: no-repeat;
    background-position: left 80%;
}

.tenth-exhibition-hall-right-image { text-align: right; }

.tenth-exhibition-hall-left-introduce { padding-bottom: 8%; }

.tenth-exhibition-hall-inner { margin-top: -33%; }

.tenth-exhibition-hall-right-image .exhibits-introduce {
    text-align: right; padding-right: 20%; margin-top: 30px;
}

.tenth-exhibition-hall-swiper-wrapper {
    position: relative;
    width: 800px; height: 800px;
    margin-left: auto; margin-top: 80px;
    -webkit-transform: translateX(15%);
    -moz-transform: translateX(15%);
    -ms-transform: translateX(15%);
    -o-transform: translateX(15%);
    transform: translateX(15%);
    z-index: 1;
}

.tenth-exhibits-list {
    position: absolute;
    top: 50%; left: 0;
    width: calc(100% - 100px); height: calc(100% - 100px);
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
}

.tenth-exhibits-list .exhibits-item {
    position: absolute;
    top: 0; right: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 55px;
}

.tenth-exhibition-hall-swiper-wrapper .tenth-exhibition-hall-swiper-box {
    width: 800px; height: 800px; padding: 50px;
    border-radius: 50%;
    border: 1px solid var(--font-white);
}

.tenth-exhibition-hall-swiper-wrapper .swiper {
    height: 100%;
    border-radius: 50%;
    background-color: var(--deep-yellow-green);
}

.tenth-exhibition-hall-swiper-wrapper .swiper-slide {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.tenth-swiper-image {
    width: 80%; height: 80%; border-radius: 50%;
}

.tenth-swiper-image img { 
    max-width: 100%; 
    max-height: 100%;
}

/* =================== Seventh part ==================== */
#seventh-part {
    background-image: url(../images/exhibition/permanent/huaxia/caudal-hall-bg.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: relative;
}

/* =================== Caudal hall ==================== */
.caudal-hall-content { margin-top: -8%; }

.caudal-hall-content .section-title {
    writing-mode: vertical-rl;
    height: 400px; margin-left: auto;
}

.caudal-hall-circle {
    font-size: var(--large-size); color: var(--font-white);
    position: relative; z-index: 1;
    writing-mode: vertical-lr;
    padding-left: 30px;
}

.caudal-hall-circle::before {
    content: ""; top: -100%;
    position: absolute; z-index: -1;
    width: 180px; height: 180px;
    border-radius: 50%;
    background-color: var(--font-brown4);
}

@media (max-width: 1860px) {
    :root {
        --large-size: 42px;
        --medium-to-large: 32px;
        --small-size: 22px;
        --smaller-size: 18px;
    }

    .page-foreword-font .section-title:first-child { margin-bottom: 100px; }

    /* =================== First ==================== */
    .first-exhibition-hall-right { width: 26.05%; }

    .first-exhibition-hall-right img,
    .second-exhibits-list .exhibits-image img,
    .third-exhibition-hall-right-image img {
        width: 100%;
    }

    /* =================== Second ==================== */
    .section-text + .section-text, .section-text p + p { margin-top: 20px; }

    .section-title, .section-year { margin-bottom: 20px; }

    .second-exhibits-list .exhibits-image { width: 61.39%; }

    /* =================== Third ==================== */
    .third-exhibition-hall-right-image { width: 45.157%; }
}

@media (max-width: 1699px) {
    :root {
        --large-size: 40px;
        --medium-to-large: 30px;
        --small-size: 20px;
        --smaller-size: 18px;
    }

    .swiper-slide.common-component-shape-box-wrapper,
    .common-component-shape-box-wrapper {
        height: 300px;
    }

    .page-foreword-font .section-title:first-child { margin-bottom: 80px; }

    /* =================== Second ==================== */
    .second-exhibits-list .exhibits-image {
        width: 45%;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    .second-exhibits-inner-swiper,
    .third-exhibits-inner-swiper {
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .second-exhibits-list, .third-exhibits-list { margin-top: 80px; }

    .third-exhibits-list .exhibits-item,
    .second-exhibits-list .exhibits-item {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        justify-content: center;
    }

    .second-exhibits-list .exhibits-introduce,
    .third-exhibits-list .exhibits-introduce {
        width: 45%; padding: 0 20px;
    }

    .third-exhibits-list .exhibits-image { width: 40%; }
    .third-exhibits-list .exhibits-image img { width: 100%; }

    .seventh-exhibits-introduce { margin-top: 180px; }

    .seventh-exhibition-wrapper {
        position: static;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .seventh-exhibition-hall > img {
        position: absolute;
        left: 0;
    }

    .sixth-exhibitions-line-item { margin-left: 100px; height: 80%; }

    .sixth-exhibitions-line-item img { height: 100%; width: auto; }

    .forth-exhibition-hall-left-image {
        width: 36.35%;
    }
    .forth-exhibition-hall-left-image img { width: 100%; }

    .sixth-exhibition-left-image {
        top: -5%;
    }
}

@media (max-width: 1499px) {
    #first-part {
        background-size: cover;
    }

    .first-exhibits-wrapper .exhibits-left-image { width: 40%; }

    .first-exhibits-wrapper .exhibits-left-image img { width: 100%; }

    .sishen-cloud-chart-figcaption { margin-bottom: 20px; }

    .sishen-cloud-chart-bg { margin-top: -13%; }

    .fifth-exhibition-hall-content { padding-top: 18%; }

    .seventh-exhibition-hall-top-exhibits {
        margin-bottom: 50px;
    }
}

@media (max-width: 1399px) {
    .nine-cauldrons-back img,
    .nine-cauldrons-item .nine-cauldrons-image img {
        width: 100%;
    }

    .nine-cauldrons-item .nine-cauldrons-image { width: 80.5%; }

    .caudal-hall-top-image { width: 60%; }
    .caudal-hall-top-image img { width: 100%; }

    .caudal-hall-content { margin-top: 0; }
    .caudal-hall { border: 1px solid transparent; }
    .caudal-hall-top-image { margin-top: 150px; }

    .tenth-exhibition-hall-swiper-wrapper,
    .tenth-exhibition-hall-swiper-wrapper .tenth-exhibition-hall-swiper-box {
        width: 700px; height: 700px;
    }

    .fifth-exhibition-hall-content {
        padding-top: 22%;
        padding-bottom: 6%;
    }
	
	.fifth-part-bottom-split {
        margin-top: 200px;
    }

    .sixth-exhibition-left-image {
        top: 0%;
    }

    .nine-cauldrons-back .circle::after {
        top: -7px; left: calc(50% - 7px);
        width: 14px; height: 14px;
    }
    
    .nine-cauldrons-back .bg {
        top: 15px; left: 15px;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
    }
}

@media (max-width: 1199px) {
    .page-foreword-font .section-title img { width: 120px; }

    #first-part { padding-top: 80px; }

    .first-exhibition-hall-right { opacity: .35 !important; }

    .swiper-button-next, .swiper-button-prev {
        width: 80px; height: 80px; margin-top: -40px;
    }

    .swiper-button-next::after, .swiper-button-prev::after { font-size: var(--small-size); }

    .first-exhibits-wrapper .exhibits-left-image {
        width: 30%;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .first-exhibits-wrapper .exhibits-introduce { width: 60%; }

    .first-exhibits-inner .common-component-shape-box-wrapper {
        justify-content: space-around;
    }

    #second-part { padding-bottom: 40%; }

    .third-exhibition-hall-right-image { display: none; }

    .second-exhibits-list .exhibits-image,
    .third-exhibits-list .exhibits-image { width: 30%; }
    .second-exhibits-list .exhibits-introduce,
    .third-exhibits-list .exhibits-introduce { width: 60%; }

    .forth-exhibition-hall { 
        margin-top: 100px;
    }

    .forth-exhibition-hall-wrapper {
        background-size: auto 100%;
    }

    .forth-exhibition-hall-left-image,
    .forth-exhibits-bg {
        display: none;
    }

    .sishen-cloud-chart-bg { margin-top: -16%; }

    .fifth-exhibition-hall-content {
        padding-top: 20%;
    }

    .nine-cauldrons-item:nth-child(n + 4) {
        margin-top: 60px;
    }

    .fifth-exhibition-introduce { padding: 0 30px; }

    .sixth-exhibition-left-image { display: none; }

    .sixth-exhibitions-line.common-component-shape-box-wrapper {
        width: 100%;
        justify-content: space-evenly !important;
    }

    .sixth-exhibitions-line-item {
        margin-left: 0;
        height: 100%;
        margin-top: -15%;
    }

    .sixth-exhibitions-line-item img,
    .sixth-exhibitions-item img { width: 100%; }

    .seventh-exhibition-hall-top-exhibits { margin: 50px 0 35px; }

    .seventh-exhibits-right .exhibits-item-inner,
    .seventh-exhibits-left .exhibits-item-inner {
        height: 100%;
    }

    .seventh-exhibits-right .exhibits-image,
    .seventh-exhibits-left .exhibits-image {
        flex: 1;
    }

    .seventh-exhibits-right .exhibits-image img,
    .seventh-exhibits-left .exhibits-image img {
        width: 100%;
    }

    .seventh-exhibits-left { margin-top: 0; }

    .eight-exhibition-hall-left-exhibits {
        display: none;
    }
    .eight-exhibits-swiper-wrapper {
        margin-top: 50px;
    }
    .fifth-part-bottom-split {
        margin-top: 120px;
    }

    .ninth-exhibition-hall-right-image {
        width: 100%;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .ninth-exhibition-hall-right-image .ninth-image-wrap:first-child {
        display: none;
    }
    .ninth-exhibition-hall-right-image .ninth-image-wrap:nth-child(2) {
        margin-top: 0px; text-align: center;
    }

    .eight-exhibits-swiper-common-image { width: 50%; margin: 0 auto; }
    .eight-exhibits-swiper-common-image img { width: 100%; }

    .eight-exhibits-list .exhibits-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .eight-exhibits-list .exhibits-left-image {
        height: 88%;
    }
    .eight-exhibits-list .exhibits-left-image img { 
        max-width: 100%; height: 100%; 
    }

    .ninth-exhibition-hall-left-exhibits .common-component-shape-box-wrapper {
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    .ninth-left-exhibits { text-align: center; }

    .tenth-exhibition-hall-right-image {
        display: none;
    }
    .tenth-exhibition-hall-swiper-wrapper {
        margin-top: 0;
    }

    .ninth-left-exhibits .exhibits-introduce,
    .tenth-exhibition-hall-right-image .exhibits-introduce { padding: 0; text-align: center; }

    .tenth-exhibition-hall { 
        margin-top: 50px; 
        background-size: auto 100%;
    }
    .sixth-part-exhibition-hall-right-image {
        display: none;
    }

    .tenth-exhibition-hall-inner { margin-top: 0; }

    .tenth-exhibition-hall-swiper-wrapper {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        margin-left: auto; margin-right: auto;
    }
    .tenth-exhibits-list, .tenth-exhibits-list .exhibits-item { position: static; }

    .tenth-exhibits-list { 
        top: unset; left: unset; 
        width: auto; height: auto;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .tenth-exhibits-list .exhibits-item { padding-right: 0; }

    .caudal-hall-content .section-title, .caudal-hall-circle {
        writing-mode: inherit; height: auto;
    }

    .caudal-hall-circle::before { width: 120px; height: 120px; top: unset; bottom: 0; }

    .tenth-exhibition-hall-swiper-wrapper,
    .tenth-exhibition-hall-swiper-wrapper .tenth-exhibition-hall-swiper-box {
        width: 600px; height: 600px;
    }
    .tenth-exhibition-hall-swiper-wrapper .tenth-exhibition-hall-swiper-box {
        padding: 40px;
    }
}

@media (max-width: 991px) {
    :root {
        --large-size: 36px;
        --medium-to-large: 26px;
        --small-size: 20px;
        --smaller-size: 16px;
    }

    #second-part { background-size: auto 100%; margin-top: -25%; }

    .page-foreword-font .section-title img { width: 100px; }

    .page-foreword-font .section-title:first-child { margin-bottom: 50px; }

    .section-text + .section-text, .section-text p + p { margin-top: 10px; }

    .swiper-button-next, .swiper-button-prev {
        width: 60px; height: 60px; margin-top: -30px;
    }

    .forth-exhibition-introduce {
        margin-bottom: 30px;
    }

    .forth-exhibits .exhibits-introduce {
        position: static;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }

    .forth-exhibits .exhibits-image img {
        width: auto; max-width: 100%;
    }
	
	.fifth-part-bottom-split {
        margin-top: 80px;
    }

    .nine-cauldrons-item:nth-child(n + 4) {
        margin-top: 40px;
    }

    .sixth-exhibitions-line.common-component-shape-box-wrapper {
        padding: 0 30px;
    }

    .sixth-exhibitions-line-item { margin-top: -30%; }

    .ninth-left-exhibits img { width: 50%; }

    .fifth-exhibition-introduce {
        padding: 0px 15px;
        max-width: 100%;
    }
    .sishen-cloud-chart-bg {
        width: 100%;
    }
    .sixth-exhibition-hall {
        padding-top: 80px;
    }
    .section-text + .section-text, .section-text p + p {
        margin-top: 0;
    }
    .caudal-hall-circle::before {
        width: 80px; height: 80px;
    }

    .nine-cauldrons-back .circle::after {
        top: -5px; left: calc(50% - 5px);
        width: 10px; height: 10px;
    }
    
    .nine-cauldrons-back .bg {
        top: 10px; left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }
}

@media (max-width: 767px) {
    :root {
        --large-size: 32px;
        --medium-to-large: 20px;
        --small-size: 18px;
        --smaller-size: 15px;
    }
    .section-title .circle { margin-left: 15px; margin-right: 0px; }
    .section-title .circle::before { width: 30px; height: 30px; }
    .page-foreword-font .section-title img { width: 80px; }
    .page-foreword-font .section-title:first-child { margin-bottom: 30px; }
    .first-exhibition-hall { margin-top: 50px; }
    .first-exhibition-hall-left {
        position: static;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .first-exhibition-hall-right { display: none; }

    .first-exhibits-list .exhibits-item { padding: 0; }
    .first-exhibits-wrapper .exhibits-left-image { width: 40%; }
    .first-exhibits-wrapper .exhibits-introduce { width: 50%; }

    .exhibits-name { margin-bottom: 12px; }
    .exhibits-other + .exhibits-other { margin-top: 3px; }

    .swiper-slide.common-component-shape-box-wrapper,
    .common-component-shape-box-wrapper {
        height: 220px;
    }
    .swiper-button-next, .swiper-button-prev {
        width: 40px; height: 40px; margin-top: -20px;
        -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        -o-transform: translateX(0) !important;
        transform: translateX(0) !important;
        opacity: .8;
    }
    .swiper-button-next { right: 5px; }
    .swiper-button-prev { left: 5px; }

    #second-part { margin-top: -30%; background-color: #1e2624; }

    .first-exhibits-wrapper .exhibits-introduce { padding: 0; }

    .sixth-exhibitions-line.common-component-shape-box-wrapper {
        background: none; height: auto; padding: 0px;
        justify-content: space-between !important;
    }
    .sixth-exhibitions-item { margin: 50px 0; }
    .sixth-exhibitions-line-item {
        margin-top: 0;
        margin-left: 0;
        width: 50%; height: auto;
    }
    .sixth-exhibitions-line-item + .sixth-exhibitions-line-item { width: 37.1%; }

    .seventh-exhibits-introduce .exhibits-item,
    .seventh-exhibits-introduce .exhibits-item > img,
    .seventh-exhibits-right .exhibits-item-inner,
    .seventh-exhibits-left .exhibits-item-inner,
    .seventh-exhibits-right .exhibits-image,
    .seventh-exhibits-left .exhibits-image {
        width: 100%;
    }

    .seventh-exhibits-right .exhibits-image img,
    .seventh-exhibits-left .exhibits-image img {
        width: 100%; height: 100%;
        -o-object-fit: contain;
        -o-object-position: center;
        object-fit: contain;
        object-position: center;
    }

    .seventh-exhibits-introduce .exhibits-item + .exhibits-item { margin-top: 50px; }

    .seventh-exhibits-right .exhibits-image {
        height: 90%;
    }

    .seventh-exhibits-right .exhibits-item-inner {
        right: 0;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        flex-direction: column-reverse;
    }

    .seventh-exhibits-introduce .exhibits-name {
        align-self: center !important;
    }

    .seventh-exhibits-left .exhibits-item-inner { right: 0; }

    #seventh-part { background-position: right; }

    .tenth-exhibition-hall-swiper-wrapper,
    .tenth-exhibition-hall-swiper-wrapper .tenth-exhibition-hall-swiper-box {
        width: 400px; height: 400px;
    }
    .tenth-exhibition-hall-swiper-wrapper .tenth-exhibition-hall-swiper-box {
        padding: 20px;
    }

    .seventh-exhibition-hall-top-exhibits .exhibits-image img {
        height: 300px;
    }

    .exhibition-introduce-container {
        padding-right: 15px;
        padding-left: 15px;
        max-width: initial;
    }
    .sixth-exhibition-hall {
        padding-top: 60px;
    }
    .section-title, .section-year {
        margin-bottom: 15px;
    }
    .seventh-exhibits-introduce {
        margin-top: 50px;
    }
    .caudal-hall-circle::before {
        width: 60px; height: 60px;
    }

    .nine-cauldrons-back .circle::after {
        top: -3px; left: calc(50% - 3px);
        width: 6px; height: 6px;
    }
}

@media (max-width: 576px) {
    :root {
        --large-size: 26px;
        --medium-to-large: 20px;
        --small-size: 16px;
        --smaller-size: 14px;
    }

    .exhibits-name { margin-bottom: 8px; }

    .first-exhibits-wrapper .exhibits-left-image { width: 30%; }
    .first-exhibits-wrapper .exhibits-introduce { width: 55%; }

    .exhibition-introduce-container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        max-width: initial;
    }

    .sixth-exhibitions-item,
    .ninth-exhibition-hall-right-image { 
        margin: 30px 0; 
    }

    .ninth-image-wrap img { width: 100%; }

    .tenth-exhibition-hall-swiper-wrapper {
        width: calc(100% - 30px);
        margin: 0 auto;
    }

    .tenth-exhibition-hall-swiper-wrapper .tenth-exhibition-hall-swiper-box {
        width: 100%; height: auto; aspect-ratio: 1/1;
    }
    .tenth-exhibits-list { padding: 15px; }
    .seventh-exhibits-introduce {
        margin-top: 30px;
    }
}

@media (min-width: 768px) {
    .exhibition-introduce-container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        max-width: 95%;
    }
}

@media (min-width: 992px) {
    .exhibition-introduce-container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        max-width: 95%;
    }
}

@media (min-width: 1200px) {
    .exhibition-introduce-container {
        width: 80%;
        padding-right: 0;
        padding-left: 0;
        max-width: 1720px;
    }
}

@media (min-width: 2400px) {
    #seventh-part {
        background-size: 100% auto;
    }
}