.page-detail-product .page-banner {
    background-image: linear-gradient(#075b7d99, #075b7d99), url('../images/waterpark_twist.jpg')
}

.page-detail-product .content {
    max-width: 960px;
    margin: auto;
    padding: 42px 52px;
    border: 1px solid #e2edf1;
    background: #fff;
    box-shadow: 0 12px 32px #0b5c7d12
}

.page-detail-product .content>img {
    height: 470px;
    object-fit: cover
}

.page-detail-product .detail-title {
    font-size: 34px;
    color: #075b7d
}

.page-detail-case .page-banner {
    background-image: linear-gradient(#075b7d99, #075b7d99), url('../images/waterpark_resort.jpg')
}

.page-detail-case .content {
    max-width: 1050px;
    margin: auto
}

.page-detail-case .content>img {
    height: 420px;
    object-fit: cover;
    border-radius: 0 42px 0 42px
}

.page-detail-case .detail-title {
    padding-left: 18px;
    border-left: 4px solid #f1ab3b
}

.page-detail-news .page-banner {
    background-image: linear-gradient(#075b7d99, #075b7d99), url('../images/waterpark_sky.jpg')
}

.page-detail-news .content {
    max-width: 820px;
    margin: auto
}

.page-detail-news .content .detail-title {
    font-size: 28px;
    line-height: 1.45
}

.page-detail-news .content>img {
    height: 300px;
    object-fit: cover
}

.page-detail-news .content .lead {
    padding: 20px 24px;
    background: #f3fafc;
    border-left: 3px solid var(--blue)
}

.page-detail-service .page-banner {
    background-image: linear-gradient(#075b7d99, #075b7d99), url('../images/waterpark_aerial.jpg')
}

.page-detail-service .content {
    padding: 32px 0 32px 42px;
    border-left: 1px solid #c9e5ee
}

.page-detail-service .content>img {
    height: 360px;
    object-fit: cover
}

.page-detail-design .page-banner {
    background-image: linear-gradient(#075b7d99, #075b7d99), url('../images/waterpark_green.jpg')
}

.page-detail-design .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 38px
}

.page-detail-design .content .detail-title,
.page-detail-design .content .meta,
.page-detail-design .content .lead,
.page-detail-design .content p,
.page-detail-design .content .share,
.page-detail-design .content .back {
    grid-column: 1
}

.page-detail-design .content>img {
    grid-column: 2;
    grid-row: 1 / span 5;
    height: 420px;
    margin: 0;
    object-fit: cover
}

@media(max-width:900px) {
    .page-detail-product .content {
        padding: 28px 24px
    }

    .page-detail-product .content>img,
    .page-detail-case .content>img {
        height: 300px
    }

    .page-detail-design .content {
        display: block
    }

    .page-detail-design .content>img {
        height: 300px;
        margin: 24px 0
    }

    .page-detail-service .content {
        padding: 24px 0 24px 22px
    }
}

@media(max-width:900px) {
    .nav-group:hover .sub {
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .nav-group.open:hover .sub {
        display: grid
    }
}

.content-about .inner-kicker,
.content-culture .inner-kicker,
.content-environment .inner-kicker,
.content-honor .inner-kicker,
.content-install .inner-kicker,
.content-install-site .inner-kicker,
.content-install-production .inner-kicker {
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px
}

.content-about .about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px;
    align-items: center;
    margin-top: 28px
}

.content-about .about-story p {
    margin: 0 0 14px
}

.content-about .about-story img {
    height: 300px;
    margin: 0;
    object-fit: cover
}

.inner-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 28px
}

.inner-metrics div {
    padding: 20px;
    background: #f3fafc
}

.inner-metrics b {
    display: block;
    color: var(--blue);
    font-size: 28px
}

.inner-metrics span {
    display: block;
    margin-top: 5px;
    color: #73848d;
    font-size: 13px
}

.content-culture .culture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 30px 0
}

.culture-grid article {
    padding: 24px;
    background: #f4fafc;
    border-top: 3px solid #f3ad3b
}

.culture-grid b {
    font-size: 18px
}

.culture-grid p {
    margin: 12px 0 0
}

.content-culture .culture-image {
    height: 300px;
    margin: 0;
    object-fit: cover
}

.content-environment .environment-layout,
.content-install-site .site-layout,
.content-install-production .production-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
    align-items: center;
    margin-top: 28px
}

.environment-layout img,
.site-layout img,
.production-layout img {
    height: 350px;
    margin: 0;
    object-fit: cover
}

.check-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none
}

.check-list li {
    padding: 10px 0;
    border-bottom: 1px solid #e5eef2;
    color: #59717c;
    font-size: 14px
}

.check-list li:before {
    content: "✓";
    margin-right: 10px;
    color: var(--blue);
    font-weight: 700
}

.content-honor .honor-image {
    height: 300px;
    margin: 24px 0 0;
    object-fit: cover
}

.honor-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 20px
}

.honor-list article {
    padding: 18px;
    background: #f4fafc
}

.honor-list b {
    display: block;
    color: #f0a83b;
    font-size: 26px
}

.honor-list span {
    display: block;
    margin: 5px 0;
    font-weight: 700
}

.honor-list p {
    margin: 0;
    font-size: 13px
}

.content-install .install-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 28px
}

.install-overview img {
    height: 370px;
    margin: 0;
    object-fit: cover
}

.install-process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px
}

.install-process span,
.production-tags span {
    padding: 13px;
    background: #f3fafc;
    color: #5d737d;
    font-size: 13px
}

.install-process b {
    margin-right: 8px;
    color: var(--blue)
}

.production-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px
}

.content-install-site .page-banner {
    background-image: linear-gradient(#075b7d99, #075b7d99), url('../images/waterpark_hero.jpg')
}

.content-install-production .page-banner {
    background-image: linear-gradient(#075b7d99, #075b7d99), url('../images/building.jpg')
}

.content-about .content:before,
.content-culture .content:before {
    display: none
}

.content-environment .content {
    display: block
}

.content-environment .content img {
    grid-column: auto;
    grid-row: auto
}

.content-honor .content {
    text-align: left
}

.content-honor .content .honor-image {
    height: 300px
}

@media(max-width:900px) {

    .content-about .about-story,
    .content-environment .environment-layout,
    .content-install .install-overview,
    .content-install-site .site-layout,
    .content-install-production .production-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .inner-metrics,
    .content-culture .culture-grid,
    .honor-list {
        grid-template-columns: 1fr 1fr
    }

    .content-about .about-story img,
    .environment-layout img,
    .site-layout img,
    .production-layout img,
    .install-overview img {
        height: 280px
    }

    .content-culture .culture-grid {
        gap: 10px
    }
}

@media(max-width:560px) {

    .inner-metrics,
    .content-culture .culture-grid,
    .honor-list {
        grid-template-columns: 1fr
    }

    .content-about .about-story img,
    .environment-layout img,
    .site-layout img,
    .production-layout img,
    .install-overview img {
        height: 240px
    }

    .install-process {
        grid-template-columns: 1fr
    }

    .content-culture .content {
        padding: 0
    }
}

.inner-consistent {
    padding: 38px 42px !important;
    background: #fff;
    border: 1px solid #e1edf2;
    border-top: 3px solid #0a96d2;
    box-shadow: 0 12px 30px #0b5c7d0d
}

.inner-consistent .inner-kicker {
    margin: 0 0 12px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px
}

.inner-consistent h2 {
    margin: 0 0 16px;
    font-size: 32px;
    line-height: 1.3;
    color: #243d4c
}

.inner-consistent>.lead {
    max-width: 760px;
    margin: 0;
    color: #647985;
    font-size: 16px;
    line-height: 1.9
}

.inner-consistent .about-story,
.inner-consistent .environment-layout,
.inner-consistent .install-overview,
.inner-consistent .site-layout,
.inner-consistent .production-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 42px;
    align-items: center;
    margin-top: 30px
}

.inner-consistent .about-story img,
.inner-consistent .environment-layout img,
.inner-consistent .install-overview img,
.inner-consistent .site-layout img,
.inner-consistent .production-layout img {
    width: 100%;
    height: 320px !important;
    margin: 0;
    object-fit: cover
}

.inner-consistent .about-story p,
.inner-consistent .environment-layout p,
.inner-consistent .install-overview p,
.inner-consistent .site-layout p,
.inner-consistent .production-layout p {
    margin: 0 0 14px;
    line-height: 2
}

.inner-consistent .inner-metrics,
.inner-consistent .culture-grid,
.inner-consistent .honor-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 30px
}

.inner-consistent .inner-metrics div,
.inner-consistent .culture-grid article,
.inner-consistent .honor-list article {
    min-height: 112px;
    padding: 20px;
    background: #f4fafc;
    border: 1px solid #e0eef2;
    border-top: 2px solid #f2ae3e
}

.inner-consistent .inner-metrics b {
    font-size: 26px
}

.inner-consistent .culture-grid b,
.inner-consistent .honor-list span {
    font-size: 17px;
    color: #294654
}

.inner-consistent .culture-grid p,
.inner-consistent .honor-list p {
    margin: 10px 0 0;
    line-height: 1.7
}

.inner-consistent .culture-image,
.inner-consistent .honor-image {
    width: 100%;
    height: 320px !important;
    margin: 30px 0 0;
    object-fit: cover
}

.inner-consistent .install-process {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px
}

.inner-consistent .install-process span,
.inner-consistent .production-tags span {
    display: block;
    padding: 14px 16px;
    background: #f4fafc;
    border: 1px solid #e0eef2;
    color: #58717d
}

.inner-consistent .production-tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 22px
}

.inner-consistent .check-list {
    margin-top: 18px
}

.page-culture .inner-consistent,
.page-honor .inner-consistent {
    border-top: 3px solid #0a96d2;
    background: #fff;
    text-align: left
}

.page-culture .inner-consistent:before,
.page-about .inner-consistent:before {
    display: none
}

.page-environment .inner-consistent,
.page-install .inner-consistent {
    display: block !important;
    padding-left: 42px !important;
    border-left: 1px solid #e1edf2 !important
}

.content-install-site .inner-consistent,
.content-install-production .inner-consistent {
    border-left: 1px solid #e1edf2 !important
}

@media(max-width:900px) {
    .inner-consistent {
        padding: 30px 24px !important
    }

    .inner-consistent h2 {
        font-size: 28px
    }

    .inner-consistent .about-story,
    .inner-consistent .environment-layout,
    .inner-consistent .install-overview,
    .inner-consistent .site-layout,
    .inner-consistent .production-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .inner-consistent .inner-metrics,
    .inner-consistent .culture-grid,
    .inner-consistent .honor-list {
        grid-template-columns: repeat(2, 1fr)
    }

    .inner-consistent .about-story img,
    .inner-consistent .environment-layout img,
    .inner-consistent .install-overview img,
    .inner-consistent .site-layout img,
    .inner-consistent .production-layout img,
    .inner-consistent .culture-image,
    .inner-consistent .honor-image {
        height: 280px !important
    }

    .page-environment .inner-consistent,
    .page-install .inner-consistent {
        padding-left: 24px !important
    }
}

@media(max-width:560px) {
    .inner-consistent {
        padding: 26px 18px !important
    }

    .inner-consistent h2 {
        font-size: 25px
    }

    .inner-consistent .inner-metrics,
    .inner-consistent .culture-grid,
    .inner-consistent .honor-list,
    .inner-consistent .install-process,
    .inner-consistent .production-tags {
        grid-template-columns: 1fr
    }

    .inner-consistent .about-story img,
    .inner-consistent .environment-layout img,
    .inner-consistent .install-overview img,
    .inner-consistent .site-layout img,
    .inner-consistent .production-layout img,
    .inner-consistent .culture-image,
    .inner-consistent .honor-image {
        height: 230px !important
    }

    .page-environment .inner-consistent,
    .page-install .inner-consistent {
        padding-left: 18px !important
    }
}

.standard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 42px;
    align-items: center;
    margin-top: 30px
}

.standard-layout>div {
    min-width: 0
}

.standard-layout p {
    margin: 0 0 14px;
    line-height: 2
}

.standard-layout img {
    width: 100%;
    height: 320px !important;
    margin: 0;
    object-fit: cover
}

.standard-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 30px
}

.standard-cards article {
    min-height: 112px;
    padding: 20px;
    background: #f4fafc;
    border: 1px solid #e0eef2;
    border-top: 2px solid #f2ae3e
}

.standard-cards b {
    font-size: 17px;
    color: #294654
}

.standard-cards p {
    margin: 10px 0 0;
    line-height: 1.7;
    font-size: 13px
}

.content-about .side:before,
.content-culture .side:before,
.content-environment .side:before,
.content-honor .side:before,
.content-install .side:before,
.content-install-site .side:before,
.content-install-production .side:before {
    display: none
}

.content-about .inner-consistent,
.content-culture .inner-consistent,
.content-environment .inner-consistent,
.content-honor .inner-consistent,
.content-install .inner-consistent,
.content-install-site .inner-consistent,
.content-install-production .inner-consistent {
    display: block !important;
    padding: 38px 42px !important;
    background: #fff !important;
    border: 1px solid #e1edf2 !important;
    border-top: 3px solid #0a96d2 !important;
    box-shadow: 0 12px 30px #0b5c7d0d
}

.content-environment .inner-consistent,
.content-install .inner-consistent,
.content-install-site .inner-consistent,
.content-install-production .inner-consistent {
    border-left: 1px solid #e1edf2 !important
}

@media(max-width:900px) {
    .standard-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .standard-layout img {
        height: 280px !important
    }

    .standard-cards {
        grid-template-columns: repeat(2, 1fr)
    }

    .content-about .inner-consistent,
    .content-culture .inner-consistent,
    .content-environment .inner-consistent,
    .content-honor .inner-consistent,
    .content-install .inner-consistent,
    .content-install-site .inner-consistent,
    .content-install-production .inner-consistent {
        padding: 30px 24px !important
    }
}

@media(max-width:560px) {
    .standard-layout img {
        height: 230px !important
    }

    .standard-cards {
        grid-template-columns: 1fr
    }

    .content-about .inner-consistent,
    .content-culture .inner-consistent,
    .content-environment .inner-consistent,
    .content-honor .inner-consistent,
    .content-install .inner-consistent,
    .content-install-site .inner-consistent,
    .content-install-production .inner-consistent {
        padding: 26px 18px !important
    }
}