@import url("../font/ccrick.css");

html {
    width: 100%;
    height: 100vh;
}

body {
    margin: 0;
    font-family: Helvetica Now Text;
}

.header {
    padding: 20px 20px 0px;
    display: flex;
    justify-content: center;
}

.header ul {
    display: flex;
    align-items: center;
}



.menu a {
    color: #2B2A44;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 32px;
}


.header li:first-child a {
    font-size: 24px;
    text-decoration: underline;
    font-weight: 700;

}

.menu a:hover {
    text-decoration: underline;
}






/* 贴纸 */
.sticker {
    position: absolute;
    top: 67px;
    width: 100%;
    height: calc(100vh - 67px);
    z-index: -3;
    overflow: hidden;

}

.san {
    position: absolute;

    left: 82px;
    top: 113px;
    z-index: -3;
    filter: drop-shadow(0px 1.1642857789993286px 1.1642857789993286px rgba(0, 0, 0, 0.36));




}

.qiu {
    position: absolute;

    right: 106px;
    top: 197px;
    z-index: -3;
    filter: drop-shadow(0px 1.1642857789993286px 1.1642857789993286px rgba(0, 0, 0, 0.36));
}

.shi {
    position: absolute;

    left: 186px;
    bottom: 113px;
    z-index: -3;
    filter: drop-shadow(0px 1.1642857789993286px 1.1642857789993286px rgba(0, 0, 0, 0.36));
}

.li {
    position: absolute;

    right: 161px;
    bottom: 2px;
    z-index: -3;
    filter: drop-shadow(0px 1.1642857789993286px 1.1642857789993286px rgba(0, 0, 0, 0.36));
}

#main-skin {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 20px 67px;
    width: 100%;
    height: calc(100vh - 67px);
}

#main {
    position: relative;
    width: 824px;
    height: 560px;

}


#main .guideline-mb {
    position: absolute;
    left: 224px;
    top: 52px;
    display: none;
    clip-path: inset(0px 0px 0px 0px);

}

#main .guideline-pc {
    position: absolute;
    left: 224px;
    top: 52px;
    clip-path: inset(0px 0px 0px 0px);

}

#main h1 {
    position: absolute;
    top: 48px;
    left: 114px;
    color: #2B2A44;
    font-size: 36px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -2.16px;
    text-transform: uppercase;
}

#main h1 span {
    font-size: 62px;
    font-weight: 900;
    letter-spacing: -3.72px;
    font-weight: 900;
}

#main h2 {
    position: absolute;
    top: 137px;
    left: 318px;
    color: #2B2A44;
    font-size: 46px;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -2.76px;
    text-transform: uppercase;
}

#main h3 {
    position: absolute;
    left: 127px;
    top: 224px;
    color: #2B2A44;
    font-family: Helvetica Now Text;
    font-size: 46px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -2.3px;
    text-transform: uppercase;
}

#main h4 {
    width: 470px;
    position: absolute;
    top: 323px;
    left: 283px;
    color: #2B2A44;
    font-family: Helvetica Now Text;
    font-size: 46px;
    font-style: normal;
    font-weight: 700;
    line-height: 100.5%;
    letter-spacing: -0.92px;
    text-transform: uppercase;
}

#main h5 {
    position: absolute;
    left: 218px;
    bottom: 93px;
    display: inline-flex;
    padding: 0px 12px;
    flex-direction: column;
    border-radius: 50px;
    border: 1px solid #2B2A44;

    color: #2B2A44;
    font-family: Helvetica Now Text;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: uppercase;
}

#main h6 {
    position: absolute;
    left: 219px;
    bottom: 20px;
    color: #5552E2;
    font-family: 'Rick Veitch';
    font-size: 59px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.59px;
    text-transform: uppercase;

}

#main p {
    color: rgba(0, 0, 0, 0.54);
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.18px;
}

#main .p1 {
    width: 169px;

    position: absolute;
    left: 120px;
    top: 144px;
}

#main .p2 {
    width: 190px;

    position: absolute;
    left: 634px;
    top: 234px;
}

@media (max-width: 1080px) {


    .san {
        left: 20px;
        top: 113px;
    }

    .qiu {
        right: 40px;
        top: 220px;
    }

    .shi {
        left: 80px;
        bottom: 113px;
    }

    .li {
        right: 100px;
        bottom: 2px;
    }
}


@media (max-width: 800px) {

    .menu a {
        font-size: 12px;
        padding: 16px 12px;
    }


    #main-skin {
        padding: 0px 10px 101px;
        width: 100%;
        height: calc(100vh - 67px);
    }

    #main {
        width: 350px;
        height: 391px;
    }

    #main .guideline-mb {
        left: 110px;
        top: 46px;
        display: block;
    }

    #main .guideline-pc {
        display: none;
    }

    #main h1 {
        font-size: 18px;
        letter-spacing: -0.9px;
        top: 0px;
        left: 46px;

    }

    #main h1 span {
        font-size: 36px;
        letter-spacing: -1.8px;
    }

    #main h2 {
        top: 72px;
        left: 128px;
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    #main h3 {
        left: 9px;
        top: 129px;
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    #main h4 {
        left: 128px;
        top: 201px;
        width: 223px;
        font-size: 24px;
        line-height: 100.5%;
        letter-spacing: -1.2px;
    }

    #main h5 {
        left: 157px;
        bottom: 63px;
        padding: 0px 6px;
        font-size: 10px;
    }

    #main h6 {
        left: 71px;
        bottom: 0px;
        font-size: 32px;
        letter-spacing: -0.3px;

    }

    #main p {
        font-size: 8px;
        letter-spacing: 0.12px;
    }

    #main .p1 {
        width: 99px;
        left: 12px;
        top: 78px;
    }

    #main .p2 {
        width: 102px;
        left: 254px;
        top: 254px;
    }


    .san {
        left: 20%;
        top: auto;
        bottom: 0px;
        transform: translate(-50%, 0);
    }

    .qiu {
        left: 40%;
        top: auto;
        bottom: -20px;
        transform: translate(-50%, 0);

    }

    .shi {

        left: 60%;
        top: auto;
        bottom: -20px;
        transform: translate(-50%, 0);

    }

    .li {

        left: 80%;
        top: auto;
        bottom: -18px;
        transform: translate(-50%, 0);

    }


}