* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.screen {
    position: relative;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    display: block;
}
.screen.active {
    opacity: 1;
    pointer-events: all;
    z-index: 10;
}
.screen-intro {
    background: url(../img/intro.png) no-repeat center;
}
.screen-intro .img-gif {
    position: absolute;
    left: 50%;
    top: 64%;
    transform: translate(-50%, -50%);
}
.screen-intro .title {
    width: 1099px;
    height: 474px;
    background: url(../img/title.png) no-repeat center / 100%;
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.g-star {
    position: relative;
    width: 692px;
    height: 669px;
}
.g-star .star {
    position: absolute;
    z-index: 5;
}
.g-star .star1 {
    width: 150px;
    height: 148px;
    background: url(../img/star.png) no-repeat center;
    left: 397px;
    bottom: -90px;
    animation: star2 10s linear infinite;
}
.g-star .star2 {
    width: 196px;
    height: 192px;
    background: url(../img/star-1.png) no-repeat center;
    left: 1134px;
    bottom: -232px;
    animation: star2 10s linear infinite;
}
@keyframes star2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.g-star .star3 {
    width: 149px;
    height: 148px;
    background: url(../img/star-2.png) no-repeat center;
    left: 1297px;
    bottom: -180px;
    animation: star2 5s linear infinite reverse;
    transform-origin: 47% 41%;
}
.g-star .star4 {
    width: 196px;
    height: 192px;
    background: url(../img/star-3.png) no-repeat center;
    left: 543px;
    bottom: -195px;
    animation: star2 10s linear infinite reverse;
}
.g-star .circle {
    position: absolute;
}
.g-star .circle1 {
    width: 91px;
    height: 91px;
    background: url(../img/dot.png) no-repeat center;
    left: 1435px;
    bottom: -82px;
    animation: float 3s ease-in-out infinite;
}
.g-star .circle2 {
    width: 91px;
    height: 91px;
    background: url(../img/dot.png) no-repeat center;
    left: 412px;
    bottom: 22px;
    animation: float 4s ease-in-out infinite;
}
.g-star .circle3 {
    width: 102px;
    height: 102px;
    background: url(../img/dot-2.png) no-repeat center;
    left: 1278px;
    bottom: -211px;
    animation: float 5s ease-in-out infinite;
}
.g-star .circle4 {
    width: 102px;
    height: 102px;
    background: url(../img/dot-2.png) no-repeat center;
    left: 484px;
    bottom: -141px;
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}
.big-star {
    position: relative;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 778px;
    height: 755px;
}
.big-star:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 620px;
    height: 597px;
    background: url(../img/star2.png) no-repeat center;
    z-index: 1;
}
.big-star:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 778px;
    height: 755px;
    background: url(../img/star1.png) no-repeat center;
    z-index: 3;
}

.big-star .ch {
    position: absolute;
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%);
    width: 286px;
    height: 414px;
    background: url(../img/p1.png) no-repeat center / 100%;
    z-index: 2;
}

.btn-start {
    width: 414px;
    height: 130px;
    background: url(../img/start-btn.png) no-repeat center / 100%;
    cursor: pointer;
    position: absolute;
    right: 120px;
    bottom: 90px;
    text-indent: -9999px;
}

.screen1 {
    background: url(../img/bg.png) no-repeat center;
}
.screen .content {
    display: flex;
}
.view-wrap,
.options-wrap {
    width: 960px;
    height: 1080px;
}
.options-wrap {
    padding-top: 80px;
}
.tab-wrap {
}

.tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 749px;
    height: 69px;
    background: url(../img/bar.png) no-repeat center;
    margin: 0 auto 35px;
}
.tabs .tab {
    position: relative;
    width: 113px;
    height: 69px;
    font-size: 32px;
    color: #717171;
    font-family: 'Cafe24Ssurround';
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.tabs .tab.active {
    width: 113px;
    height: 69px;
    background: url(../img/top-btn.png) no-repeat center;
}
.tab-contents .tab-content {
    display: none;
}

.tab-contents .tab-content.active {
    display: block;
}
.tab-contents .tab-content .items {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 670px;
    height: 439px;
    margin: 0 auto;
    gap: 23px;
    flex-wrap: wrap;
}
.tab-contents .tab-content .items .item {
    width: 203px;
    height: 203px;
    background: #f7f7f7;
    border-radius: 15px;
    border: 3px solid #e0e0e0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-contents .tab-content .items .item.active {
    border: 3px solid #b6e614;
    background: #eeffb3;
}
.color-sets {
    height: 148px;
    width: 800px;
    border-bottom: 2px solid #c2c2c2;
    margin: 0 auto;
    padding-top: 35px;
}
.color-sets > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    display: none;
}
.color-sets > div.active {
    display: flex;
}
.color-sets > div > div {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.color-sets > div > div.active {
    outline: 11px solid #fff;
    box-shadow: 0 12px 0px 8px rgba(0, 0, 0, 0.2);
}

.color-sets2 {
    margin-top: 64px;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
}
.color-sets2 > div {
    display: flex;
}
.color-sets2 > div > div:nth-child(9) {
    border: 3px solid #d2cccd;
}
.color-sets2 > div > div.title {
    position: relative;
    width: 113px;
    height: 69px;
    font-size: 32px;
    border-radius: 0px;
    color: #717171;
    font-family: 'Cafe24Ssurround';
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/top-btn.png) no-repeat center;
}
.color-sets2 > div.color-backgrounds > div:not(.title) {
    background-image: url(../img/circle.png);
    background-repeat: no-repeat;
    background-position: center;
}
.color-sets2 > div.color-backgrounds > div:not(.title):nth-child(9) {
    background-image: url(../img/circle2.png);
}

.view-wrap {
    padding-top: 45px;
    position: relative;
}
.view-wrap .btn-wrap {
    gap: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.screen-intro .btn-bgm,
.view-wrap .btn-wrap > button {
    background: none;
    border: none;
    width: 310px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-indent: -9999px;
}
.view-wrap .btn-wrap .btn-reset {
    background: url(../img/reset.png) no-repeat center;
}
.view-wrap .btn-wrap .btn-save {
    background: url(../img/save.png) no-repeat center;
}
.screen-intro .btn-bgm {
    position: absolute;
    right: 81px;
    top: 45px;
}
.screen-intro .btn-bgm,
.view-wrap .btn-wrap > button.btn-bgm {
    width: 110px;
    height: 90px;
    background: url(../img/music_on.png) no-repeat center;
}
.screen-intro .btn-bgm.off,
.view-wrap .btn-wrap > button.btn-bgm.off {
    background: url(../img/music_off.png) no-repeat center;
}

.view-box {
    width: 600px;
    height: 600px;
    position: absolute;
    top: 284px;
    left: 50%;
    transform: translate(-50%, 0%);
}
.view-box-inner-img {
}
.arrow-wrap {
    width: 600px;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.arrow-wrap > a {
    position: absolute;
    width: 200px;
    height: 80px;
    background: url(../img/arrow.png) no-repeat center;
    display: block;
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* .arrow-wrap > a:active {
    background: url(../img/arrow-over.png) no-repeat center;
    outline: none;
} */
.arrow-wrap.active > a {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
.arrow-wrap .left {
    left: -140px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}
.arrow-wrap .right {
    right: -140px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}
.arrow-wrap .top {
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
}
.arrow-wrap .bottom {
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
}
.viewer {
    position: relative;
    width: 600px;
    height: 600px;
    overflow: hidden;
    border-radius: 50px;
    z-index: 10;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.15);
}

.viewer-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 99%;
    height: 99%;
    overflow: hidden;
    border-radius: 50px;
}
.capture {
    position: relative;

    width: 100%;
    height: 100%;
}
.viewer .bgf {
    border: 20px solid #c8f13c;
    border-radius: 50px;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.2) inset;
}
.viewer .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 1;
    background-color: #fff;
}
.viewer .bg-p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.viewer .bg-p.active8 #star {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}
.viewer .bg-p #star .cls-1 {
    fill: rgba(255, 255, 255, 0.35);
}
.viewer .bg-p.active8 #star .cls-1 {
    fill: #e3e3e3;
}

.viewer .ch {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.svg {
    display: none;
}
.svg.active {
    display: block;
}
.viewer .face .svg {
    width: 230px;
}
.viewer .ch .face {
    position: absolute;
    left: 50%;
    top: 168px;
    transform: translateX(-50%);
    z-index: 5;
}

.viewer .ch .body {
    position: absolute;
    left: 50%;
    top: 356px;
    transform: translateX(-50%);
    z-index: 2;
}

.viewer .eyes {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}
.viewer .ch .eyebrows {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    z-index: 11;
}

.viewer .ch .nose {
    position: absolute;
    left: 50%;
    top: 54.5%;
    transform: translate(-50%, -50%);
    z-index: 11;
}

.viewer .ch .eyebrows5,
.viewer .ch .eyebrows6 {
    top: 50%;
}
.viewer .ch .mouth {
    position: absolute;
    left: 50%;
    top: 58.5%;
    transform: translate(-50%, -50%);
    z-index: 11;
}

.viewer .ch .hair {
    position: absolute;
    left: 50.5%;
    top: 38.5%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.viewer .ch .hair-2 {
    position: absolute;
    left: 50.5%;
    top: 43.5%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.viewer .ch .hair5 {
    top: 45.5%;
}
.viewer .ch .hair3,
.viewer .ch .hair6 {
    top: 40.5%;
}
#face1 .cls-1,
#face1 .cls-2 {
    fill: #ffebdc;
}

#face1 .cls-3 {
    opacity: 0.46;
}

#face1 .cls-4 {
    fill: #995945;
}

#face1 .cls-5 {
    clip-path: url(#faceclippath-1);
}

#face1 .cls-6 {
    fill: none;
}

#face1 .cls-6,
#face1 .cls-2 {
    stroke: #fcae7a;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3.42px;
}

#face1 .cls-7 {
    fill: #efa775;
}

#face1 .cls-8 {
    clip-path: url(#faceclippath);
}

#face2 .cls-1,
#face2 .cls-2 {
    stroke: #f9ab75;
    stroke-width: 2.57px;
}

#face2 .cls-1,
#face2 .cls-2,
#face2 .cls-3 {
    stroke-linecap: round;
    stroke-linejoin: round;
}

#face2 .cls-1,
#face2 .cls-3 {
    fill: none;
}

#face2 .cls-2,
#face2 .cls-4 {
    fill: #ffebdc;
}

#face2 .cls-5 {
    opacity: 0.46;
}

#face2 .cls-6 {
    clip-path: url(#face2clippath-1);
}

#face2 .cls-3 {
    stroke: #fcae7a;
    stroke-width: 3.42px;
}

#face2 .cls-7 {
    fill: #efa775;
}

#face2 .cls-8 {
    clip-path: url(#face2clippath);
}

#face3 .cls-1 {
    fill: #efa775;
}

#face3 .cls-2,
#face3 .cls-3 {
    fill: #ffebdc;
}

#face3 .cls-4 {
    opacity: 0.46;
}

#face3 .cls-5 {
    fill: none;
}

#face3 .cls-5,
#face3 .cls-3 {
    stroke: #fcae7a;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3.42px;
}

#face3 .cls-6 {
    fill: #995945;
}

#face3 .cls-7 {
    clip-path: url(#face3clippath-1);
}

#face3 .cls-8 {
    clip-path: url(#face3clippath);
}

#face4 .cls-1,
#face4 .cls-2 {
    stroke: #fcae7a;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3.42px;
}

#face4 .cls-1,
#face4 .cls-3 {
    fill: #ffebdc;
}

#face4 .cls-4 {
    opacity: 0.46;
}

#face4 .cls-5 {
    fill: #efa775;
}

#face4 .cls-6 {
    fill: #995945;
}

#face4 .cls-7 {
    clip-path: url(#face4clippath-1);
}

#face4 .cls-2 {
    fill: none;
}

#face4 .cls-8 {
    clip-path: url(#face4clippath);
}

#face5 .cls-1 {
    fill: #efa775;
}

#face5 .cls-2,
#face5 .cls-3 {
    stroke: #fcae7a;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3.42px;
}

#face5 .cls-2,
#face5 .cls-4 {
    fill: #ffebdc;
}

#face5 .cls-5 {
    opacity: 0.46;
}

#face5 .cls-3 {
    fill: none;
}

#face5 .cls-6 {
    fill: #995945;
}

#face5 .cls-7 {
    clip-path: url(#face5clippath-1);
}

#face5 .cls-8 {
    clip-path: url(#face5clippath);
}

#face6 .cls-1,
#face6 .cls-2 {
    stroke: #f9ab75;
    stroke-width: 2.57px;
}

#face6 .cls-1,
#face6 .cls-2,
#face6 .cls-3 {
    stroke-linecap: round;
    stroke-linejoin: round;
}

#face6 .cls-1,
#face6 .cls-3 {
    fill: none;
}

#face6 .cls-2,
#face6 .cls-4 {
    fill: #ffebdc;
}

#face6 .cls-5 {
    opacity: 0.46;
}

#face6 .cls-6 {
    fill: #efa775;
}

#face6 .cls-7 {
    clip-path: url(#face6clippath-1);
}
#face6 .cls-3 {
    stroke: #fcae7a;
    stroke-width: 3.42px;
}

#face6 .cls-8 {
    fill: #efa775;
}

#face6 .cls-9 {
    clip-path: url(#face6clippath);
}
#cloth {
    width: 230px;
}
#cloth .cls-1,
#cloth .cls-2,
#cloth .cls-3,
#cloth .cls-4 {
    stroke-linecap: round;
    stroke-linejoin: round;
}

#cloth .cls-1,
#cloth .cls-3 {
    fill: none;
}

#cloth .cls-1,
#cloth .cls-4 {
    stroke: #d3d3d3;
    stroke-width: 2.47px;
}

#cloth .cls-5 {
    fill: #efa775;
}

#cloth .cls-6,
#cloth .cls-4 {
    fill: #fff;
}

#cloth .cls-2,
#cloth .cls-7 {
    fill: #ffebdc;
}

#cloth .cls-2,
#cloth .cls-3 {
    stroke: #fcae7a;
    stroke-width: 1.75px;
}

#cloth .cls-8 {
    fill: #e5e5e5;
}

#cloth .cls-9 {
    clip-path: url(#clothclippath-1);
}

#cloth .cls-10 {
    clip-path: url(#clothclippath);
}
#eyes1 {
    width: 106px;
}
#eyes2 {
    width: 140px;
}
#eyes3 {
    width: 151px;
}
#eyes4 {
    width: 147px;
}
#eyes5 {
    width: 147.7px;
}
#eyes6 {
    width: 130px;
}
#eyes2 .cls-1 {
    fill: #ff9648;
}

#eyes2 .cls-2 {
    fill: #fff;
}

#eyes2 .cls-3 {
    fill: none;
}

#eyes2 .cls-3,
#eyes2 .cls-4 {
    stroke: #11100f;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.05px;
}

#eyes2 .cls-5 {
    clip-path: url(#eyes2clippath-1);
}

#eyes2 .cls-6 {
    fill: #51443b;
}

#eyes2 .cls-7,
#eyes2 .cls-4 {
    fill: #2b2520;
}

#eyes2 .cls-8 {
    fill: #262423;
}

#eyes2 .cls-9 {
    clip-path: url(#eyes2clippath);
}

#eyes3 .cls-1 {
    fill: none;
}

#eyes3 .cls-1,
#eyes3 .cls-2 {
    stroke: #11100f;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
}

#eyes3 .cls-3 {
    fill: #fff;
}

#eyes3 .cls-4 {
    clip-path: url(#eyes3clippath-1);
}

#eyes3 .cls-2,
#eyes3 .cls-5 {
    fill: #2b2520;
}

#eyes3 .cls-6 {
    fill: #51443b;
}

#eyes3 .cls-7 {
    fill: #f471ff;
}

#eyes3 .cls-8 {
    clip-path: url(#eyes3clippath);
}

#eyes4 .cls-1 {
    fill: #fff;
}

#eyes4 .cls-2 {
    fill: none;
}

#eyes4 .cls-2,
#eyes4 .cls-3 {
    stroke: #11100f;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.05px;
}

#eyes4 .cls-4 {
    clip-path: url(#eyes4clippath-1);
}

#eyes4 .cls-5 {
    fill: #51443b;
}

#eyes4 .cls-6,
#eyes4 .cls-3 {
    fill: #2b2520;
}

#eyes4 .cls-7 {
    fill: #262423;
}

#eyes4 .cls-8 {
    fill: #73fffb;
}

#eyes4 .cls-9 {
    fill: #423e3c;
}

#eyes4 .cls-10 {
    clip-path: url(#eyes4clippath);
}

#eyes5 .cls-1 {
    fill: #fff;
}

#eyes5 .cls-2 {
    fill: #ffc299;
}

#eyes5 .cls-3 {
    fill: none;
}

#eyes5 .cls-3,
#eyes5 .cls-4 {
    stroke: #11100f;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.05px;
}

#eyes5 .cls-5 {
    clip-path: url(#clippath-1);
}

#eyes5 .cls-6 {
    fill: #a7ff4a;
}

#eyes5 .cls-7 {
    fill: #51443b;
}

#eyes5 .cls-8,
#eyes5 .cls-4 {
    fill: #2b2520;
}

#eyes5 .cls-9 {
    fill: #fedac0;
}

#eyes5 .cls-10 {
    clip-path: url(#clippath);
}

#eyes6 .cls-1 {
    fill: #231815;
}
#eyebrows1 {
    width: 134px;
}
#eyebrows2 {
    width: 138px;
}
#eyebrows3 {
    width: 134px;
}
#eyebrows4 {
    width: 134px;
}
#eyebrows5 {
    width: 196px;
}
#eyebrows6 {
    width: 195px;
}
#eyebrows1 .cls-1 {
    fill: #443f3c;
}

#eyebrows2 .cls-1 {
    fill: #443f3c;
}

#eyebrows3 .cls-1 {
    fill: #443f3c;
}

#eyebrows4 .cls-1 {
    fill: #443f3c;
}

/* .cls-1 {
    stroke-width: 6px;
} */

#eyebrows5 .cls-1,
#eyebrows5 .cls-2 {
    fill: none;
    stroke: #c1561b;
}

#eyebrows5 .cls-1,
#eyebrows5 .cls-2,
#eyebrows5 .cls-3 {
    stroke-linecap: round;
    stroke-linejoin: round;
}

#eyebrows5 .cls-4,
#eyebrows5 .cls-3 {
    fill: #fff;
}

#eyebrows5 .cls-5 {
    fill: #c1561b;
}

#eyebrows5 .cls-6 {
    opacity: 0.32;
}

#eyebrows5 .cls-2 {
    stroke-width: 4.11px;
}

#eyebrows5 .cls-3 {
    stroke: #231815;
    stroke-width: 3.09px;
}

#eyebrows6 .cls-1 {
    opacity: 0.43;
}

#eyebrows6 .cls-1,
#eyebrows6 .cls-2 {
    fill: #fff;
}

#eyebrows6 .cls-3 {
    stroke-width: 4.8px;
}

#eyebrows6 .cls-3,
#eyebrows6 .cls-4 {
    fill: none;
    stroke: #a2519e;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#eyebrows6 .cls-4 {
    stroke-width: 4.48px;
}
#nose1 {
    width: 14px;
}
#nose2 {
    width: 18px;
}
#nose3 {
    width: 26px;
}
#nose4 {
    width: 16px;
}
#nose5 {
    width: 27px;
}
#nose6 {
    width: 18px;
}
#nose1 .cls-1 {
    fill: #f2a36d;
}

#nose1 .cls-2 {
    fill: #96694a;
}

#nose2 .cls-1 {
    fill: #f2a36d;
}

#nose2 .cls-2 {
    fill: #96694a;
}

#nose3 .cls-1 {
    fill: #efa775;
}

#nose3 .cls-2 {
    fill: #96694a;
}

#nose4 .cls-1 {
    fill: #f2a36d;
}

#nose4 .cls-2 {
    fill: #96694a;
}

#nose5 .cls-1 {
    fill: #f2a36d;
}

#nose5 .cls-2 {
    fill: #96694a;
}

#nose6 .cls-1 {
    fill: #f2a36d;
}

#nose6 .cls-2 {
    fill: #f9c198;
}

#nose6 .cls-3 {
    fill: #a3785a;
}
#mouth1 {
    width: 31px;
}
#mouth2 {
    width: 63px;
}
#mouth3 {
    width: 54px;
}
#mouth4 {
    width: 40px;
}
#mouth5 {
    width: 51px;
}
#mouth6 {
    width: 38px;
}
#mouth1 .cls-1 {
    fill: #f98a8a;
    opacity: 0.4;
}

#mouth1 .cls-2 {
    fill: #e07373;
}

#mouth2 .cls-1 {
    fill: none;
}

#mouth2 .cls-1,
#mouth2 .cls-2 {
    stroke: #e07373;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.35px;
}

#mouth2 .cls-3,
#mouth2 .cls-2 {
    fill: #ea7765;
}

#mouth2 .cls-4 {
    fill: #fff;
}

#mouth2 .cls-5 {
    fill: #ffa89f;
}

#mouth2 .cls-6 {
    clip-path: url(#mouth2clippath);
}

#mouth3 .cls-1,
#mouth3 .cls-2 {
    fill: #fff;
}

#mouth3 .cls-2,
#mouth3 .cls-3 {
    stroke: #e07373;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.82px;
}

#mouth3 .cls-4 {
    fill: #c1c1c1;
}

#mouth3 .cls-3 {
    fill: none;
}

#mouth3 .cls-5 {
    clip-path: url(#mouth3clippath);
}

#mouth3 .cls-6 {
    fill: #e8e8e8;
}

#mouth4 .cls-1 {
    fill: #f98a8a;
    opacity: 0.4;
}

#mouth4 .cls-2 {
    fill: #e07373;
}

#mouth5 .cls-1 {
    fill: #f98a8a;
    opacity: 0.4;
}

#mouth5 .cls-2 {
    fill: #e07373;
}

#mouth6 .cls-1 {
    fill: #f98a8a;
    opacity: 0.4;
}

#mouth6 .cls-2 {
    fill: #e07373;
}
#hair1 {
    width: 248px;
}
#hair2 {
    width: 214px;
}
#hair3 {
    width: 246px;
}
#hair4 {
    width: 199px;
}
#hair4-1 {
    width: 295px;
}
#hair5 {
    width: 211px;
}
#hair5-1 {
    width: 295px;
    margin-left: 59px;
}
#hair6 {
    width: 217px;
}
#hair6-1 {
    width: 325px;
    margin: 122px 0 0 -39px;
}
#hair1 .cls-1 {
    fill: #c9881f;
}

#hair1 .cls-2 {
    fill: #f9bc12;
}

#hair1 .cls-3 {
    fill: #ffec3e;
}

#hair1 .cls-4 {
    fill: #c9881f;
}

#hair1 .cls-5 {
    clip-path: url(#hair1clippath-1);
}

#hair1 .cls-6 {
    fill: #ffec3e;
}

#hair1 .cls-7 {
    fill: #f9bc12;
}

#hair1 .cls-8 {
    clip-path: url(#hair1clippath);
}

#hair2 .cls-1 {
    fill: #f9bc12;
}

#hair2 .cls-2 {
    clip-path: url(#hair2clippath-1);
}

#hair2 .cls-3 {
    fill: #c9881f;
}

#hair2 .cls-4 {
    fill: #ffec3e;
}

#hair2 .cls-5 {
    fill: #8f6016;
}

#hair2 .cls-6 {
    clip-path: url(#hair2clippath-2);
}
#hair2 .cls-6-1 {
    fill: #a5701a;
}
#hair2 .cls-7 {
    clip-path: url(#hair2clippath);
}

#hair3 .cls-1 {
    fill: #f9bc12;
}

#hair3 .cls-2 {
    fill: #ffec3e;
}

#hair3 .cls-3 {
    fill: #c9881f;
}

#hair3 .cls-4 {
    fill: #ffec3e;
}

#hair3 .cls-5 {
    clip-path: url(#hair3clippath);
}

#hair4 .cls-1 {
    fill: #ffec3e;
}

#hair4 .cls-2 {
    fill: #f9bc12;
}

#hair4 .cls-3 {
    clip-path: url(#hair4clippath);
}

#hair4 .cls-4 {
    fill: #c9881f;
}

#hair4-1 .cls-1 {
    fill: #ffec3e;
}

#hair4-1 .cls-2 {
    fill: #f9bc12;
}

#hair4-1 .cls-3 {
    clip-path: url(#hair4-1clippath);
}

#hair4-1 .cls-4 {
    fill: #c9881f;
}

#hair5 .cls-1 {
    fill: #c9881f;
}

#hair5 .cls-2 {
    fill: #f9bc12;
}

#hair5 .cls-3 {
    fill: #ffec3e;
}

#hair5 .cls-4 {
    clip-path: url(#hair5clippath);
}
/* 
#hair5-1 .cls-1 {
    fill: #c9881f;
}

#hair5-1 .cls-2 {
    clip-path: url(#hair5-1clippath);
}

#hair5-1 .cls-3 {
    fill: #c9881f;
}

#hair5-1 .cls-4 {
    fill: #f9bc12;
}

#hair5-1 .cls-5 {
    fill: #ffd62c;
}

#hair5-1 .cls-6 {
    fill: #ffec3e;
}

#hair5-1 .cls-7 {
    clip-path: url(#hair5-1clippath-1);
} */

#hair5-1 .cls-1 {
    fill: #f9bc12;
}

#hair5-1 .cls-2 {
    clip-path: url(#clippath-1);
}

#hair5-1 .cls-3 {
    fill: #c9881f;
}

#hair5-1 .cls-4 {
    fill: #f9bc12;
}

#hair5-1 .cls-5 {
    fill: #bc1919;
}

#hair5-1 .cls-6 {
    fill: #ffec3e;
}

#hair5-1 .cls-7 {
    clip-path: url(#clippath);
}
#hair6 .cls-1 {
    fill: #fff;
}

#hair6 .cls-2 {
    fill: #ffec3e;
}

#hair6 .cls-3 {
    fill: #c9881f;
}

#hair6 .cls-4 {
    fill: #c9881f;
}

#hair6 .cls-5 {
    clip-path: url(#hair6clippath);
}

#hair6 .cls-6 {
    fill: #f9bc12;
}

#hair6-1 .cls-1 {
    clip-path: url(#hair6-1clippath-1);
}

#hair6-1 .cls-2 {
    fill: #ffec3e;
}

#hair6-1 .cls-3 {
    fill: #c9881f;
}

#hair6-1 .cls-4 {
    clip-path: url(#hair6-1clippath);
}

#hair6-1 .cls-5 {
    fill: #f9bc12;
}

.pop-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
.pop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 818px;
    height: 369px;
    background: url(../img/pop.png) no-repeat center center / 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pop:before {
    content: '';
    position: absolute;
    left: 234px;
    top: -52px;

    width: 369px;
    height: 132px;
    background: url(../img/pop-title.png) no-repeat center center / 100% 100%;
}
.pop .close {
    position: absolute;
    right: 45px;
    top: 40px;
    width: 43px;
    height: 42px;
    background: url(../img/close.png) no-repeat center center / 100% 100%;
    cursor: pointer;
}
.pop .text {
    font-size: 0;
    text-align: center;
    width: 477px;
    height: 120px;
    text-indent: -9999px;
    background: url(../img/pop-text.png) no-repeat center center;
}

#star .cls-1 {
    fill: #e3e3e3;
}

#star2 .cls-1 {
    fill: #fff;
}
