:root {
    --red: #72242b;
    --pink: #fbdde2;
    --yellow: #fff8d9;
    --gray: #828282
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: #3e3031;
    font-family: "Microsoft YaHei", Arial, sans-serif
}

.wrap {
    width: min(900px, 82vw);
    margin: auto
}

header {
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 9%;
    position: relative;
    background: #fff
}

.logo {
    font: 700 italic 26px "Brush Script MT", "Segoe Script", cursive;
    color: var(--red);
    text-shadow: 1px 1px #eabfc3
}

header .logo {
    margin-right: auto;
    text-decoration: none
}

nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 17px
}

nav a {
    font-size: 9px;
    color: #333;
    text-decoration: none;
    border: 1px solid #aaa;
    border-radius: 12px;
    padding: 4px 17px
}

nav .on {
    background: var(--pink);
    border-color: var(--pink)
}

.tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px
}

.tools label {
    display: flex;
    border: 1px solid #999;
    border-radius: 15px;
    height: 22px;
    width: 140px
}

.tools input {
    width: 100%;
    border: 0;
    background: none;
    outline: 0
}

.tools b {
    padding: 1px 7px
}

.hero {
    height: 420px;
    background: #454545;
    position: relative
}

.dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 13px
}

.dots i {
    width: 8px;
    height: 8px;
    background: #666;
    border-radius: 50%
}

.about {
    text-align: center;
    padding: 37px 0 64px
}

.logo.big {
    font-size: 69px
}

.about h4 {
    font-size: 10px;
    margin: 3px
}

.copy-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: auto
}

.copy-lines i {
    height: 2px;
    background: #bdbdbd;
    opacity: .45
}

.copy-lines i:nth-child(2) {
    width: 82%;
    margin: auto
}

.copy-lines i:nth-child(3) {
    width: 65%;
    margin: auto
}

.copy-lines.narrow {
    width: 330px
}

.merits {
    margin-top: 31px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative
}

.merits:before {
    content: "";
    height: 1px;
    background: #f4cbd0;
    position: absolute;
    left: 7%;
    right: 7%;
    top: 55px
}

.merits article {
    background: #fff;
    position: relative
}

.icon {
    width: 72px;
    height: 72px;
    border: 1px solid #f0b7bf;
    color: #f49aa8;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: auto;
    font-size: 31px
}

.merits h3 {
    font-size: 9px
}

.merits .copy-lines {
    width: 75px
}

.heading {
    text-align: center;
    margin: 0 0 29px
}

.heading span {
    display: block;
    width: 28px;
    height: 1px;
    background: #777;
    margin: 0 auto 19px
}

.heading h2 {
    font: 700 25px SimSun, serif;
    color: var(--red);
    margin: 0 0 6px
}

.heading p {
    font-size: 8px;
    color: #999;
    margin: 0
}

.core {
    padding-bottom: 62px
}

.band {
    width: 88%;
    height: 270px;
    margin: 0 auto 60px;
    padding: 31px 45px;
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    align-items: center
}

.pink,
.rule {
    background: var(--pink)
}

.yellow {
    background: var(--yellow)
}

.info h3 {
    font: 700 14px SimSun, serif;
    margin: 0 0 13px
}

.tags {
    display: flex;
    gap: 13px
}

.tags b {
    font-size: 8px;
    color: var(--red)
}

.copy-lines.text {
    width: 100%;
    align-items: flex-start;
    margin: 15px 0
}

.copy-lines.text i {
    height: 3px;
    width: 100%
}

.copy-lines.text i:nth-child(2) {
    width: 93%;
    margin: 0
}

.copy-lines.text i:nth-child(3) {
    width: 98%;
    margin: 0
}

.copy-lines.text i:nth-child(4) {
    width: 84%
}

.copy-lines.text i:nth-child(5) {
    width: 70%
}

.info button {
    border: 0;
    background: var(--red);
    color: #fff;
    font-size: 8px;
    padding: 7px 18px
}

.frame {
    background: #fff;
    padding: 15px;
    height: 237px;
    box-shadow: 0 1px 5px #aaa;
    transform: translate(25px, 0)
}

.frame div,
.shot,
.slider article>div,
.visual,
.cards article>div {
    height: 100%;
    background: var(--gray)
}

.band.reverse {
    grid-template-columns: 1.12fr 1fr
}

.reverse .frame {
    transform: translate(-25px, 0)
}

.reverse .info {
    text-align: right
}

.reverse .tags {
    justify-content: flex-end
}

.rule {
    height: 108px
}

.hot {
    padding: 58px 0 90px
}

.hotgrid {
    width: 70%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 68px
}

.hotgrid article {
    padding: 23px;
    position: relative
}

.hotgrid article:before {
    content: "";
    position: absolute;
    inset: 5px 40px 25% 0;
    background: var(--accent);
    z-index: -1
}

.hotgrid article:nth-child(even):before {
    inset: 25% 0 0 40px
}

.hotgrid h3 {
    font: 16px SimSun, serif;
    text-align: right;
    margin: -36px 0 11px
}

.hotgrid article:nth-child(even) h3 {
    text-align: left
}

.shot {
    height: 315px;
    border: 15px solid white;
    box-shadow: 0 1px 3px #aaa
}

.hotgrid p {
    text-align: right;
    font-size: 8px
}

.rose {
    --accent: #ffdbe1
}

.cream {
    --accent: #fff5c8
}

.purple {
    --accent: #eadcff
}

.blue {
    --accent: #d7f8ff
}

.squeeze {
    padding: 55px 0 88px
}

.slider {
    display: grid;
    grid-template-columns: 30px .75fr 1.15fr .75fr 30px;
    gap: 34px;
    align-items: center
}

.slider button {
    border: 0;
    background: none;
    color: #aaa;
    font-size: 24px
}

.slider article {
    text-align: center
}

.slider .side>div {
    height: 200px;
    border: 13px solid white;
    box-shadow: 0 1px 5px #bbb
}

.slider .center>div {
    height: 285px;
    border: 14px solid white;
    box-shadow: 0 1px 5px #bbb
}

.slider h3 {
    font: 10px SimSun, serif;
    margin: 10px 0 3px
}

.slider p {
    font-size: 7px;
    color: #999;
    margin: 0
}

.news {
    padding-bottom: 55px
}

.newscard {
    width: 76%;
    margin: auto;
    background: var(--pink);
    padding: 25px 28px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    align-items: center
}

.visual {
    height: 220px;
    border: 14px solid white
}

.newscard h3 {
    font: 14px SimSun, serif
}

.newscard p {
    font-size: 8px
}

.tiny-dots {
    text-align: center;
    font-size: 10px;
    letter-spacing: 6px
}

.featured {
    background: var(--yellow);
    padding: 39px 0 63px
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px
}

.cards article {
    text-align: center
}

.cards article>div {
    height: 290px
}

.cards h3 {
    font: 9px SimSun, serif;
    margin: -38px 0 5px
}

.cards p {
    font-size: 7px;
    color: #777
}

footer {
    background: #fff0f2;
    min-height: 132px;
    padding: 38px 15%;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr) .6fr;
    gap: 45px;
    font-size: 8px
}

footer dl {
    margin: 0
}

footer dt {
    font-weight: 700;
    margin-bottom: 10px
}

footer dd {
    margin: 0 0 5px;
    color: #777
}

.qr {
    width: 43px;
    height: 43px;
    background: #f2b4bf;
    display: grid;
    place-items: center;
    font-size: 7px
}

@media(max-width:700px) {
    .wrap {
        width: 90vw
    }

    nav,
    .tools label {
        display: none
    }

    .hero {
        height: 260px
    }

    .merits {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }

    .merits:before {
        display: none
    }

    .band,
    .band.reverse {
        height: auto;
        width: 100%;
        grid-template-columns: 1fr;
        padding: 28px
    }

    .reverse .info {
        text-align: left
    }

    .reverse .tags {
        justify-content: flex-start
    }

    .frame,
    .reverse .frame {
        height: 220px;
        transform: none;
        margin-top: 24px
    }

    .band.reverse .frame {
        order: 2
    }

    .hotgrid {
        grid-template-columns: 1fr;
        width: 90%
    }

    .slider {
        grid-template-columns: 25px 1fr 25px
    }

    .slider .side {
        display: none
    }

    .newscard {
        width: 100%;
        grid-template-columns: 1fr
    }

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

    .cards article>div {
        height: 350px
    }

    footer {
        grid-template-columns: 1fr 1fr;
        padding: 35px 25px
    }
}