/* =================== Cultural Product =================== */
#masonry-grid .masonry-item:nth-child(n + 4) {
    margin-top: 30px;
}

.masonry-item {
    position: relative;
    display: block;
    overflow: hidden;
}

.masonry-item img {
    display: block;
}

.masonry-item:hover .masonry-item-inner {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}

.masonry-item-inner {
    position: absolute;
    top: 0;
    left: 15px;
    width: calc(100% - 30px);
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    padding: 20px;
    transition: transform .6s;
}

.masonry-item-inner .exhibits-name {
    color: var(--font-white);
    font-size: 22px;
    letter-spacing: .1em;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
}

.masonry-item-inner .exhibits-name img {
    margin: 30px auto;
    width: 50px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/* =================== Cultural Store =================== */
.goods-item {
    display: block;
    position: relative;
    margin-bottom: 80px;
}

.goods-item .goods-content {
    position: absolute;
    left: 15px;
    bottom: 0;
    width: 100%;
    height: 52.8%;
}

.goods-item .cultural-relic,
.goods-item .means-of-purchase,
.goods-item .means-of-purchase .means-of-purchase-inner {
    height: 100%;
}

.goods-item .cultural-relic img {
    width: 100%;
}

.goods-item:nth-child(odd) .cultural-relic img {
    -webkit-transform: translateY(-30%);
    -moz-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    -o-transform: translateY(-30%);
    transform: translateY(-30%);
}

.goods-item .go {
    width: auto;
    height: 100%;
}

.goods-item .cultural-relic-intro,
.goods-item .means-of-purchase .means-of-purchase-inner {
    color: var(--font-white);
    justify-content: space-evenly;
}

.goods-item .means-of-purchase .means-of-purchase-inner {
    font-size: 36px;
}

.cultural-relic-intro {
    letter-spacing: 1px;
    line-height: 2;
}

.cultural-relic-intro .cultural-relic-title {
    font-size: 20px;
}

/* =================== Cultural About =================== */
.about-cultural-list .about-cultural-item:not(:first-child){
    padding-top: 50px;
    border-top: 1px dashed var(--font-brown);
}

.about-cultural-list .about-cultural-item:not(:last-child){
    padding-bottom: 50px;
}

.cultural-intro .intro-left-image {
    width: 12%;
    position: absolute;
    top: 0;
    right: 60px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cultural-intro .left-image {
    width: 100%;
    height: auto;
}

.about-cultural-title {
    margin-bottom: 30px;
    font-size: 36px;
    color: var(--font-brown);
    font-family: "font", system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
}

.about-cultural {
    margin-top: 100px;
}

.about-cultural .common-component-content-container {
    padding-top: 60px;
    padding-bottom: 60px;
}

.contact-info dt {
    margin-bottom: 20px;
}

.contact-store-list .contact-store-icon {
    margin-bottom: 8px;
}

.contact-store-title {
    font-size: 24px;
    margin-bottom: 8px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    color: var(--font-brown);
}

.contact-info-des {
    font-size: 18px;
    line-height: 2;
}

.contact-store-icon svg {
    width: 30px;
    height: 30px;
}

.contact-store-list .contact-store-item{
    margin-bottom: 30px;
}

/* =================== Cultural IP =================== */
.cultural-row, .cultural-ip-foreword {
    margin-top: 85px;
}

.cultural-split {
    margin-top: 150px;
}

.cultural-ip-foreword-right,
.cultural-row-padding > :not(.cultural-ip-item),
.cultural-split[aspect-ratio] [aspect-ratio-content] {
    padding: 50px;
}

.cultural-split[aspect-ratio]::before {
    padding-bottom: 23.969465%;
}

.ware-split-background {
    background-image: url(../images/cultural/ware.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% auto;
}

.ware-row-background {
    background-image: url(../images/cultural/ware.png);
    background-position:  bottom right;
    background-repeat: no-repeat;
    background-size: 200% auto;
}

.cultural-row.left .ware-row-background {
    order: -1;
    margin-left: 0;
}

.cultural-row .cultural-ip-item,
.cultural-row.right .cultural-ip-item + .cultural-ip-item,
.cultural-row.right .ware-row-background {
    margin-left: 10px;
}

.cultural-row.right .cultural-ip-item { margin-left: 0px; }

.cultural-ip-foreword-left .foreword-left-image img,
.cultural-tgyy-band img,
.cultural-chch-jybh-band img {
    width: 100%; height: auto;
}

.cultural-ip-item {
    display: block;
    -webkit-transition: transform .5s;
    transition: transform .5s;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.cultural-ip-item:hover > img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.cultural-ip-item > img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    -o-object-fit: cover;
    -o-object-position: center;
    -webkit-transition: transform .3s .1s;
    transition: transform .35s;
}

.cultural-item-caption {
    font-size: 28px;
    margin-bottom: 20px;
    text-align: right;
    white-space: nowrap;
}

.ware-row-background.left .cultural-item-caption {
    text-align: left;
}

.ware-row-background.left .cultural-item-link {
    justify-content: flex-start;
}

.ware-row-background.right .cultural-item-link {
    justify-content: flex-end;
}

.cultural-item-caption,
.cultural-item-link,
.cultural-item-link:hover {
    color: var(--font-white);
}

.cultural-item-link {
    font-size: 20px;
    font-family: "font", system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    transition: .35s;
}
.cultural-item-link img {
    height: 30px; margin-left: 15px;
}
.cultural-item-link.scale {
    font-size: 22px;
}

/* 前言 */
.cultural-ip-foreword {
    background-color: #f0e9df;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
}

.cultural-ip-foreword-left {
    height: 100%;
    background-image: url(../images/cultural/1.png);
    background-size: cover;
    position: relative;
}

.cultural-ip-foreword-left .foreword-left-image {
    position: absolute;
    left: 50%; top: 0;
    width: 67.333333%;
    -webkit-transform: translate(-50%, -16.5%);
    transform: translate(-50%, -16.5%);
}

.cultural-ip-foreword-right {
    background-image: url(../images/cultural/3.png);
    background-size: auto 130%;
    background-position: 200% center;
    background-repeat: no-repeat;
}

.cultural-ip-foreword-right .ip-foreword-caption {
    font-family: "font", system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    color: var(--font-brown);
    font-size: 32px;
}

.cultural-ip-foreword-right p {
    text-indent: 2em;
    text-align: justify;
    line-height: 1.8;
    margin-top: 30px;
}

.cultural-ip-foreword-right p:last-child {
    margin-top: 0px;
}

/* 意趣插画 */
.cultural-yqch {
    margin-top: 85px;
}

.cultural-yqch .ware-row-background {
    background-color: #968261;
}

/* 唐宫夜宴 */
.cultural-tgyy {
    background-color: #668364;
}

.cultural-tgyy-band {
    position: absolute;
    bottom: 0;
    -webkit-transform: translateY(8%);
    transform: translateY(8%);
}

.cultural-tgyy-band-1 {
    left: -6%;
    width: 13.969465%;
}

.cultural-tgyy-band-2 {
    left: 9.969465%;
    width: 23.511450%;
}

/* 彩绘插画 */
.cultural-chch .ware-row-background {
    background-color: #648991;
}

/* 镜圆壁合 */
.cultural-chch-jybh {
    background-color: #454d72;
}

.cultural-chch-jybh-band {
    position: absolute;
    top: 0; left: 0;
    width: 44.885497%;
    height: auto;
    transform: translate(-8%, -30%);
}

/* 华夏古乐 */
.cultural-chch-hxgy .ware-row-background {
    background-color: #b19772;
}

/* Q版插画 */
.cultural-qbch .ware-row-background {
    background-color: #656644;
}

/* 豫博王牌 */
.cultural-ybwp .ware-row-background {
    background-color: #3e5068;
}

/* 列表 */
.viewer-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

.cultural-ip-list .row .common-component-box {
    cursor: pointer;
}

.cultural-ip-list [aspect-ratio]::before {
    padding-bottom: 72.093023%;
}

.cultural-ip-list [aspect-ratio-content] {
	background-color: #FFFFFF;
}

.cultural-ip-list [aspect-ratio-content] img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    -o-object-fit: cover;
    -o-object-position: center;
    -webkit-transition: transform .35s;
    transition: transform .35s;
}

.cultural-ip-list [aspect-ratio-content]:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.cultural-ip-list-title-wrap {
    padding: 20px;
    background-color: #968261;
    background-image: url(../images/cultural/ware-title.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: right bottom;
    margin-top: -45px;
    margin-bottom: 40px;
}

@media (max-width: 1480px) {
    .cultural-tgyy-band-1 {
        left: -3%;
    }

    .cultural-tgyy-band-2 {
        left: 12.969465%;
    }

    .cultural-ip-foreword-right .ip-foreword-caption {
        font-size: 30px;
    }
}

@media (max-width: 1399px) {
    .goods-item .means-of-purchase a {
        font-size: 30px;
    }

    .cultural-row, .cultural-ip-foreword {
        margin-top: 60px;
    }

    .cultural-ip-foreword {
        margin-top: 40px;
    }

    .cultural-ip-foreword-right .ip-foreword-caption {
        font-size: 28px;
    }

    .cultural-split {
        margin-top: 120px;
    }

    .cultural-ip-foreword-right {
        background-position: 450% center;
    }

    .cultural-ip-foreword-right p {
        font-size: 16px;
        margin-top: 15px;
    }

    .cultural-item-caption {
        font-size: 26px;
    }

    .cultural-item-link {
        font-size: 18px;
    }
    .cultural-item-link.scale {
        font-size: 20px;
    }

    .cultural-item-link img {
        height: 26px;
    }
}

@media (max-width: 1199px) {
    .goods-item .means-of-purchase a {
        font-size: 24px;
    }

    .goods-item .cultural-relic-intro {
        font-size: 16px;
        line-height: 1.75;
    }

    .masonry-item-inner .exhibits-name {
        font-size: 20px;
    }

    .masonry-item-inner .exhibits-name img {
        margin: 20px auto;
        width: 40px;
    }

    .cultural-ip-foreword-right .ip-foreword-caption {
        font-size: 26px;
    }

    .cultural-ip-foreword-right,
    .cultural-row-padding > :not(.cultural-ip-item),
    .cultural-split[aspect-ratio] [aspect-ratio-content] {
        padding: 30px;
    }

    .cultural-ip-foreword-right {
        background-position: right center;
        background-size: 100%;
    }

    .cultural-ip-list-title-wrap {
        background-blend-mode: soft-light;
        margin-top: -25px;
    }
}

@media (max-width: 991px) {
    .masonry-item-inner {
        padding: 15px;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
        background-color: transparent;
        background-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .6) 100%);
    }

    .masonry-item-inner .exhibits-name {
        font-size: 18px;
    }

    .masonry-item-inner .exhibits-name img {
        display: none;
    }

    .cultural-relic-intro .cultural-relic-title {
        font-size: 18px;
    }

    .goods-item .cultural-relic-intro {
        font-size: 14px;
        line-height: 1.5;
    }

    .about-cultural-title {
        font-size: 30px!important;
        margin-bottom: 20px!important;
    }

    .contact-store-list .contact-store-item:not(:first-child) {
        margin-top: 20px;
    }

    .contact-store-list .contact-store-item{
        margin-bottom: 0!important;
    }

    .cultural-row.left .ware-row-background {
        margin-left: 0;
    }

    .cultural-row {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .cultural-row-padding > :not(.cultural-ip-item) {
        width: 100%; order: -1;
    }

    .cultural-ip-foreword-right .ip-foreword-caption {
        font-size: 25px;
    }

    .cultural-split[aspect-ratio] {
        height: 165px;
    }

    .cultural-split[aspect-ratio]::before {
        content: none;
    }

    .cultural-item-caption {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .cultural-item-link {
        font-size: 16px;
    }
    .cultural-item-link.scale {
        font-size: 16px;
    }

    .ware-row-background {
        background-size: 100% auto;
        margin-bottom: 15px;
    }

    .ware-split-background,
    .ware-row-background {
        background-blend-mode: soft-light;
    }

    .cultural-row.right .ware-row-background { margin-left: 0; }

    .cultural-row .cultural-ip-item {
        margin-left: 0px;
        flex-grow: 1;
        max-width: calc(calc(100% - 20px) / 3);
    }

    .cultural-row-0 .cultural-ip-item {
        max-width: calc(calc(100% - 10px) / 2);
    }

    .cultural-row .cultural-ip-item + .cultural-ip-item {
        margin-left: 10px;
    }

    .cultural-row, .cultural-ip-foreword {
        margin-top: 50px;
    }

    .cultural-ip-foreword {
        margin-top: 0 !important;
    }

    .cultural-split {
        margin-top: 80px;
    }

    .cultural-ip-list-title-wrap {
        margin-top: -10px;
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    :root {
        --minimum-size: 16px;
    }

    .about-cultural-list .about-cultural-item:not(:first-child){
        padding-top: 40px;
    }

    .about-cultural-list .about-cultural-item:not(:last-child){
        padding-bottom: 40px;
    }

    .contact-store-title {
        font-size: 20px!important;
    }

    .contact-info-des {
        font-size: 16px!important;
    }

    #masonry-grid .masonry-item:nth-child(n + 3) {
        margin-top: 30px;
    }

    .goods-item {
        position: relative;
        margin-bottom: 50px;
    }

    .about-cultural {
        margin-top: 50px;
    }

    .cultural-intro .intro-left-image {
        width: 15%;
    }

    .masonry-item-inner .exhibits-name {
        font-size: 16px;
    }

    .cultural-item-caption {
        font-size: 18px;
    }

    .cultural-item-link {
        font-size: 14px;
    }

    .cultural-item-link img {
        height: 20px;
    }

    .cultural-row, .cultural-ip-foreword, .cultural-split {
        margin-top: 40px;
    }

    .cultural-ip-foreword-right .ip-foreword-caption {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    #masonry-grid .masonry-item:nth-child(n + 2) {
        margin-top: 30px;
    }

    .cultural-relic-intro .cultural-relic-title {
        font-size: 4vw;
    }

    .goods-item {
        position: relative;
        margin-bottom: 30px;
    }

    .about-cultural-title {
        font-size: 26px;
    }

    .about-cultural-list .about-cultural-item:not(:first-child){
        padding-top: 30px;
    }

    .about-cultural-list .about-cultural-item:not(:last-child){
        padding-bottom: 30px;
    }


    .cultural-intro .intro-left-image {
        width: 20%;
    }

    .cultural-split[aspect-ratio] {
        height: 125px;
    }

    .cultural-ip-foreword-right,
    .cultural-row-padding > :not(.cultural-ip-item),
    .cultural-split[aspect-ratio] [aspect-ratio-content] {
        padding: 20px;
    }

    .cultural-chch-jybh-band {
        top: unset; bottom: 10%;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .cultural-ip-foreword-right .ip-foreword-caption {
        font-size: 20px;
    }

    .cultural-ip-foreword-right p {
        font-size: 14px;
    }
}

@media (max-width: 499px) {

    .about-cultural-title {
        margin-bottom: 10px!important;
        font-size: 22px!important;
    }

    .contact-store-title {
        font-size: 18px!important;
    }
    .contact-info-des {
        font-size: 14px !important;
    }
}