.stone-carving-art {
    --navigation-button: #9d8050;
    --title-circle: #2e2d1e;

    background-image: url(../images/exhibition/permanent/stone-carving-art/page-bg.png);
}

.section-title {
    color: var(--font-white);
    font-size: var(--larger-size);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: var(--title-circle);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}

.section-title.align-left {
    margin-left: auto;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
}

.section-sub-title {
    color: var(--font-white);
    font-size: var(--medium-to-large);
}

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

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

.vertical-rl {
	-webkit-box-orient: vertical;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

/* =================== banner ==================== */
.banner {
    position: relative;
    z-index: 5;
    background-image: url(../images/exhibition/permanent/stone-carving-art/banner.png);
}

.page-title {
    position: absolute;
    top: 200px;
    left: 50%;
}

.page-title-text {
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    margin-top: 15px;
    letter-spacing: 1.5px;
    color: var(--font-light-brown);
    font-size: var(--medium-size);
}

/* =================== preface ==================== */
.stone-carving-top {
    -webkit-transform: translateY(-6%);
    -moz-transform: translateY(-6%);
    -ms-transform: translateY(-6%);
    -o-transform: translateY(-6%);
    transform: translateY(-6%);
}

.section-preface {
    position: relative;
    background-image: url(../images/exhibition/permanent/stone-carving-art/section-preface-lines.png);
}

.preface-content-wrap {
    position: absolute;
    top: 30%;
    left: 50%;
}

/* =================== 壹 ==================== */
.section-content-exhibits {
    background-image: url(../images/exhibition/permanent/stone-carving-art/lines-2.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.first-content-wrap {
    position: absolute;
    left: 50%;
    bottom: 8%;
}

.first-content .section-text {
    margin-top: 15px;
}

.first-content .section-sub-title,
.first-content .section-text {
    padding-left: 130px;
}

.first-exhibits-left .first-exhibits-item {
    padding: 20px;
    text-align: center;
    border: 1px solid var(--font-white);
}

.first-exhibits-left .first-exhibits-item+.first-exhibits-item {
    margin-top: 20px;
}

.first-exhibits-left .first-exhibits-name {
    margin-top: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.first-exhibits-left .first-exhibits-name::after,
.first-exhibits-left .first-exhibits-name::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--font-white);
}

.first-exhibits-right .first-exhibits-item {
    padding-left: 80px;
    padding-right: 80px;
    background-image: url(../images/exhibition/permanent/stone-carving-art/first-exhibits5.png);
    background-size: cover;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid var(--font-white);
}

.first-exhibits-right .first-exhibits-name:first-of-type {
    margin-top: 20px;
}

.first-exhibits-right .first-exhibits-name + .first-exhibits-name { margin-top: 10px; }

.first-content-exhibits-wrap {
    margin: -20px 0 0 -20px;
}

.first-exhibits-right,
.first-exhibits-left {
    margin: 20px 0 0 20px;
}

/* =================== 贰 ==================== */
.second-wrapper {
    position: relative;
    margin-top: 260px;
}

.second-content .section-title+div,
.third-content .section-title+div,
.fourth-content .section-title+div {
    height: 520px;
    margin-top: 20px;
}

.second-content .section-title+div {
    padding-left: 150px;
}

.second-content .section-sub-title {
    padding-right: 30px;
}

.second-exhibits-left-backdrop {
    width: 56.5%;
    position: relative;
    padding: 100px 0;
}

.swiper-button-next,
.swiper-button-prev {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--navigation-button);
}

.second-exhibits-left-backdrop .swiper-button-next,
.second-exhibits-left-backdrop .swiper-button-prev {
    left: unset;
    right: 0;
    top: unset;
    bottom: 0;
}

.second-exhibits-left-backdrop .swiper-button-prev {
    right: 140px;
}

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

.second-content-wrap {
    position: absolute;
    top: 0;
    left: 50%;
}

.second-exhibits-left-list {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100%;
}

.second-exhibits-item {
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 100%;
}

.second-exhibits-item .exhibits-name {
    position: absolute;
    left: 0; bottom: 0; right: 0;
    padding: 0 50px 30px 0;
    width: 100%; text-align: right;
}

.second-exhibits-item img {
    height: 100%; width: auto;
}

/* =================== 叁 ==================== */
.third-wrapper {
    position: relative;
}

.third-content-wrap {
    position: absolute;
    top: 60%;
    width: 100%;
}

.third-exhibits-list .row+.row {
    margin-top: 30px;
}

.third-exhibits-item {
    padding: 80px;
    text-align: center;
    border: 1px solid rgba(243, 237, 224, .5);
    background-color: rgba(79, 118, 91, .12);
}

.third-exhibits-name {
    margin-top: 30px;
}

.third-exhibits-list {
    -webkit-transform: translateY(-30%);
    -moz-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    -o-transform: translateY(-30%);
    transform: translateY(-30%);
}

.third-content .section-sub-title {
    padding-left: 30px;
}

/* =================== 肆 =================== */
.stone-carving-bottom {
    margin-top: -15%;
    /*-webkit-transform: translateY(-8%);
    -moz-transform: translateY(-8%);
    -ms-transform: translateY(-8%);
    -o-transform: translateY(-8%);
    transform: translateY(-8%);*/
    background-image: url(../images/exhibition/permanent/stone-carving-art/lines-3.png);
}

.fourth-right-image {
    width: 35.15%;
    position: absolute;
    right: 0;
    -webkit-transform: translateY(-35%);
    -moz-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    -o-transform: translateY(-35%);
    transform: translateY(-35%);
}

.fourth-right-inner-image {
    width: 59%;
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}

.fourth-content .section-sub-title {
    padding-left: 130px;
    padding-right: 30px;
}

.fourth-swiper-wrap {
    background-image: url(../images/exhibition/permanent/stone-carving-art/fourth-exhibits-backdrop.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
}

.fourth-swiper-wrap .swiper-slide {
    text-align: center;
    padding-top: 10%;
}

.fourth-swiper-wrap .swiper-slide .exhibits-name { margin-top: 20px; }

.fourth-swiper-wrap .swiper-slide img {
    width: 12.9%;
    height: auto;
}

.fourth-swiper-wrap,
.fourth-exhibits-list {
    margin-top: 100px;
}

.fourth-exhibits-list img {
    width: 100%;
    height: calc(100% - 75px);
    max-height: 921px;
    -o-object-fit: contain;
    -o-object-position: center;
    object-fit: contain;
    object-position: center;
}

.fourth-exhibits-list .fourth-exhibits-name {
    text-align: center;
    margin-top: 30px;
}

#footer { margin-top: 0; }

@media (max-width: 1599px) {
    :root {
        --larger-size: 56px;
        --medium-to-large: 32px;
        --medium-size: 24px;
        --small-size: 24px;
        --smaller-size: 18px;
    }

    .section-title {
        width: 120px;
        height: 120px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 70px;
        height: 70px;
    }

    .second-exhibits-left-backdrop .swiper-button-prev {
        right: 140px;
    }

    .second-exhibits-left-backdrop {
        padding: 80px 0;
    }

    .second-exhibits-left-list { top: -80px; }
}

@media (max-width: 1399px) {
    .second-content .section-title+div,
    .third-content .section-title+div,
    .fourth-content .section-title+div {
        height: 420px;
    }

    .fourth-exhibits-list img {
        max-height: 620px;
    }

    .fourth-content .section-sub-title,
    .second-content .section-title+div,
    .first-content .section-sub-title, .first-content .section-text {
        padding-left: 60px;
    }
	
	.section-text {
        font-size: var(--minimum-size);
    }
}

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

    .page-title { width: 50%; top: 25%; }

    .page-title img { width: 100%; }
}

@media (max-width: 991px) {
    :root {
        --larger-size: 36px;
        --medium-to-large: 22px;
        --medium-size: 18px;
        --small-size: 18px;
        --smaller-size: 16px;
        --minimum-size: 15px;
    }

    .preface-content-wrap { top: 30%; }

    .section-title {
        width: 80px;
        height: 80px;
    }

    .fourth-content .section-sub-title,
    .second-content .section-title+div,
    .first-content .section-sub-title, .first-content .section-text {
        padding-left: 0px;
    }

    .fourth-exhibits-list img {
        max-height: 480px;
    }

    .second-exhibits-left-backdrop {
        padding: 60px 0;
    }

    .second-exhibits-left-list { top: -60px; }

    .first-content-exhibits-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }

    .first-exhibits-right .first-exhibits-item { padding: 20px; }

    .first-exhibits-right .first-exhibits-item .exhibits-name {
        margin-top: 20px;
    }

    .section-title { 
        width: auto; 
        height: auto; 
        display: block;
        background-color: transparent;
    }

    .first-content-wrap { margin-top: 30px; }

    .preface-content-wrap,
    .first-content-wrap,
    .second-content-wrap {
        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);
    }

    .second-exhibits-left-backdrop {
        width: 100%;
    }

    .preface-content-wrap { margin-top: -60%; }

    .vertical-rl {
        -ms-writing-mode: initial;
        writing-mode: initial;
    }

    .swiper-button-next, .swiper-button-prev {
        width: 50px; height: 50px;
    }

    .second-wrapper { margin-top: 160px; }

    .second-content .section-title+div, .third-content .section-title+div, .fourth-content .section-title+div {
        height: auto;
    }

    .third-content-wrap { position: static; margin-top: -20%; }

    .stone-carving-top {
        -webkit-transform: translate(0, -2%);
        -moz-transform: translate(0, -2%);
        -ms-transform: translate(0, -2%);
        -o-transform: translate(0, -2%);
        transform: translate(0, -2%);
    }

    .stone-carving-bottom { margin-top: 50px; }

    .stone-carving-bottom, .third-exhibits-list, .third-content-wrap {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .third-exhibits-list { margin-top: 30px; }

    .second-exhibits-left-backdrop .swiper-button-next, 
    .second-exhibits-left-backdrop .swiper-button-prev {
        right: 15px;
    }

    .second-exhibits-left-backdrop .swiper-button-prev {
        right: 100px;
    }
}

@media (max-width: 767px) {
    .third-exhibits-list .row div + div { margin-top: 30px; }

    
}

@media (max-width: 576px) {
    :root {
        --smaller-size: 15px;
    }
    
    .preface-content-wrap {
        margin-top: -50%;
    }

    .second-exhibits-left-backdrop .swiper-button-prev {
        right: 90px;
    }
}