.page-permanent-central-plains {
    background-image: url(../images/exhibition/permanent/central-plains/main-bg.png);
    background-size: 100% auto;
}

.section-text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif; font-size: 20px;
    line-height: 1.8; text-indent: 2em; font-weight: 500;
}

.section-text.white { color: var(--font-light-brown); }

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

.pc-show { display: flex !important; }

.h5-show { display: none !important; }

/* =================== banner ==================== */
.banner { position: relative; z-index: 10; }

.banner .common-component-box-cover-half {
    background-image: url(../images/exhibition/permanent/central-plains/banner-bg.png);
}

.preface-container { position: relative; }

.preface-background {
    position: absolute; bottom: -3%;
}

.preface-background .text {
    display: block; color: var(--font-light-brown);
    font-size: var(--large-size); opacity: .9;
    position: absolute; text-align: center;
    top: 50%; width: 100%;
}

/* =================== Preface ==================== */
.introduce-wrap { padding: 20px; border: 9px solid var(--font-light-brown); }

.introduce-title {
    --radius-size: 12px !important;
    --radius-blur: 13px !important;

    text-align: center; line-height: 80px;
    margin-bottom: 50px; color: var(--font-light-brown);
    font-size: var(--medium-to-large);
}

.introduce-title::before, .introduce-title::after {
    content: ""; display: block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background-color: var(--font-white);
}

.introduce-wrap {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px);
}

.introduce-inner {
    background-color: var(--font-light-brown);
    padding: 100px 50px 50px;
}

.tab-pane .section-text { 
    margin-top: 50px;
}

.tab-pane > .section-text { margin-bottom: 50px; }

.swiper-slide .section-text { 
    margin-bottom: 0px; 
    text-indent: 0em;
}

.tab-pane-swiper-wrap {
    position: relative;
    padding: 30px 70px;
    border: 1px solid var(--font-light-brown);
}

.tab-pane-swiper-wrap .swiper-button-next,
.tab-pane-swiper-wrap .swiper-button-prev {
    width: 100px; height: 100px;
    border-radius: 50%;
    background-color: var(--font-light-brown);
}

.tab-pane-swiper-wrap .swiper-button-next::after,
.tab-pane-swiper-wrap .swiper-button-prev::after {
    color: var(--background-red);
}

.tab-pane-swiper-wrap .swiper-button-next {
    right: 0;
    -webkit-transform: translateX(50%);
	-moz-transform: translateX(50%);
	-ms-transform: translateX(50%);
	-o-transform: translateX(50%);
	transform: translateX(50%);
}

.tab-pane-swiper-wrap + .section-text { margin-top: 50px; }

#myTabContent { margin-bottom: 120px; }

.common-shape-box-wrapper.h5-show {
    --radius-size: 10px;
    --radius-blur: 11px;
}

@media (max-width: 1399px) {
    .section-text {
        font-size: var(--minimum-size);
    }
}

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

    .tab-pane-swiper-wrap .swiper-button-next,
    .tab-pane-swiper-wrap .swiper-button-prev {
        width: 60px; height: 60px;
    }

    .tab-pane-swiper-wrap .swiper-button-next::after,
    .tab-pane-swiper-wrap .swiper-button-prev::after {
        font-size: var(--medium-to-large);
    }

    #myTabContent { margin-bottom: 80px; }
}

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

    .introduce-inner {
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 80px;
    }

    .introduce-title { 
        line-height: 60px;
        margin-bottom: 30px;
    }

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

    .introduce-title::before, .introduce-title::after {
        width: 6px; height: 6px;
    }

    .pc-show { display: none !important; }

    .h5-show { display: flex !important; }

    .tab-pane-swiper-wrap { padding-left: 30px; padding-right: 30px; }

    .tab-pane-swiper-wrap .swiper-button-next, .tab-pane-swiper-wrap .swiper-button-prev {
        width: 40px; height: 40px;
    }

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

@media (max-width: 767px) {
	:root {
        --large-size: 26px !important;
        --medium-to-large: 18px !important;
        --small-size: 16px !important;
        --smaller-size: 16px !important;
    }

    .tab-pane-swiper-wrap + .section-text { margin-top: 20px; }

    .tab-pane .section-text { margin-top: 30px; }
    .tab-pane > .section-text { margin-bottom: 30px; }

    #myTabContent { margin-bottom: 30px; }

    .tab-pane-swiper-wrap { padding: 15px; }

    .tab-pane-swiper-wrap .swiper-button-next, .tab-pane-swiper-wrap .swiper-button-prev {
        height: 30px; width: 30px;
    }

    .tab-pane-swiper-wrap .swiper-button-prev {
        left: 0px;
    }

    .tab-pane-swiper-wrap .swiper-button-next {
        right: 0px;
    }

    .introduce-title {
        --radius-size: 10px !important;
        --radius-blur: 11px !important;
    }

    .section-text {
        font-size: 14px;
    }

    .section-text p + p { margin-top: 0; }

    .introduce-inner { padding-top: 50px; }

    .introduce-wrap { 
        padding: 0px; 
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

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

    .tab-pane .section-text { margin: 20px 0px 0px; }

    .tab-pane > .section-text { margin: 20px 0px 20px; }

    .introduce-inner { padding: 50px 20px 20px; }
}