@charset "utf-8";
@font-face {
    font-family: 'TmoneyRoundWindExtraBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


* {
    margin: 0px; padding: 0px;
    box-sizing: border-box;
}
body, html {
    height: 100%; width: 100%;
    scroll-behavior: smooth;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
}




#section {
    height: 100%;
}

#header {
    position: fixed; top: 0px; left: 0px; right: 0px;
    z-index: 9999999999;
}
#header ul {
    background: rgba(255,255,255,0.5);
    font-size: 20px; font-weight: bold;
    overflow: hidden;
    border-bottom: 2px solid #000;
}
#header ul li {
    float: left;
    border-right: 2px solid #000;
    padding: 5px 10px;
    width: 150px;
    text-align: center;
}
#header ul li a {
    display: block;
}


/* 라이언----------------------------------------------------------------------------------- */
.article1 {
    background: #313654;
    height: 100%;
    position: relative;
    /* display: none; */
}
.lion {
    width: 400px; height: 380px;
    /* margin: 0px auto; */
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.lion:hover .eyebrow.left {
    transform: rotate(30deg);
}
.lion:hover .eyebrow.right {
    transform: rotate(-30deg);
}
.lion:hover {
    animation: lion 0.2s infinite linear;
}
/* 귀 */
.lion .ear {
    width: 90px; height: 90px;
    border: 10px solid black; border-radius: 100%;
    background: #d59729;
    position: absolute; top: 0px;
}
.lion .ear.left {
    left: 50px;
}
.lion .ear.right {
    right: 50px;
}
/* 얼굴 */
.lion .face {
    width: 400px; height: 360px;
    border: 10px solid black; border-radius: 100%;
    background: #d59729;
    position: absolute; bottom: 0px;
    /* position bottom 0값은 귀 붙이기 수월하게 밑에다가 위치 */
}
/* 눈썹 */
.lion .face .eyebrow {
    width: 80px; height: 15px;
    border-radius: 15px;
    background: black;
    position: absolute; top: 110px;
}
.lion .face .eyebrow.left {
    left: 60px;
}
.lion .face .eyebrow.right {
    right: 60px;
}
/* 눈 */
.lion .face .eye {
    width: 25px; height: 25px;
    border-radius: 50%;
    background: black;
    position: absolute; top: 150px;
    /* animation: lion-eye 10s infinite; */
}
.lion .face .eye.left {
    left: 90px;
}
.lion .face .eye.right {
    right: 90px;
}
/* 코 */
.lion .face .nose {
    width: 32px; height: 33px;
    background: black;
    border-radius: 80% 80% 100% 100%;
    position: absolute; top: 200px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
/* 입 */
.lion .face .mouth {
    width: 73px; height: 68px;
    border: 10px solid black; border-radius: 50%;
    background: #fff;
    position: absolute; top: 205px;
    z-index: 1;
}
.lion .face .mouth.left::before {
    content: "";
    position: absolute; top: 8px; left: 98%;
    width: 30px; height: 30px;
    background: #fff;
    border-radius: 0px 0px 10px 0px;
    transform: rotate(50deg);
    z-index: 2;
}
.lion .face .mouth.left {
    left: 33%;
    z-index: 3;
}
.lion .face .mouth.right {
    right: 33%;
    z-index: 2;
}



/* 어피치------------------------------------------------------------------------------- */
.article2 {
    background: rgb(249, 209, 211);
    height: 100%;
    position: relative;
}
.apeach {
    width: 450px; height: 380px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* background: red; */
}
/* 얼굴본판 */
.apeach .face {
    width: 500px; height: 400px;
    border: 10px solid black; border-radius: 300px 300px 200px 200px;
    /* border-radius: 115px 300px 500px 300px / 200px 300px 500px 300px; */
    /* border-radius: t-le-x t-ri-x bo-ri-x bo-le-x / t-le-y t-ri-y bo-ri-y bo-le-y */
    /* transform: rotate(45deg); */
    background: rgb(249, 209, 211);
    position: absolute; bottom: -30px;
}
.apeach .face::before {
    content: "";
    position: absolute; top: -40px; left: 70px;
    border: 10px solid black; border-radius: 5% 20% 30% 30%;
    width: 300px; height: 300px;
    background: rgb(249, 209, 211);
    transform: rotate(35deg);
    /* z-index: 2; */
}
.apeach .face::after {
    content: "";
    width: 480px; height: 380px;
    border-radius: 300px 300px 200px 200px;
    /* border: 1px solid black; */
    transform: rotate(0deg);
    background: rgb(249, 209, 211);
    position: absolute; top: 0px; left: 0px;
    /* z-index: 1; */
}
/* 눈 */
.apeach .eye {
    position: absolute; top: 40%;
    width: 100px; height: 110px;
    /* background: red; */
    z-index: 2;
}
.apeach .eye.left {
    left: 90px;
}
.apeach .eye.right {
    right: 90px;
}
.apeach .eye .eye1 {
    width: 110px; height: 15px;
    background: black;
    border-radius: 10px;
    position: relative; left: 50%;
    transform: translateX(-50%);
}
.apeach .eye .eye2 {
    width: 105px; height: 15px;
    background: black;
    border-radius: 10px;
    position: relative; left: 50%;
    transform: translateX(-50%);
}
.apeach .eye .eye3 {
    width: 105px; height: 15px;
    background: black;
    border-radius: 10px;
    position: relative; left: 50%;
    transform: translateX(-50%);
}
.apeach .eye .eye4 {
    width: 100px; height: 15px;
    background: black;
    border-radius: 10px;
    position: relative; left: 50%;
    transform: translateX(-50%);
}
.apeach .eye .eye5 {
    width: 105px; height: 15px;
    background: black;
    border-radius: 10px;
    position: relative; left: 50%;
    transform: translateX(-50%);
}
.apeach .eye .eye6 {
    width: 110px; height: 15px;
    background: black;
    border-radius: 10px;
    position: relative; left: 50%;
    transform: translateX(-50%);
}
/* 눈에 반짝이 */
.apeach .eye .twinkle1 {
    width: 50px; height: 50px;
    background: #fff;
    overflow: hidden;
    position: relative; bottom: 90px; left: 10px;
}
.apeach:hover .eye .twinkle1 {
    width: 50px; height: 50px;
    background: #fff;
    overflow: hidden;
    position: relative; bottom: 90px; left: 10px;
    animation: apeach 1s infinite linear;
}
.apeach .eye .twinkle1 .t {
    width: 50px; height: 50px;
    background: black;
    border-radius: 50%;
    position: absolute;
}
.apeach .eye .twinkle1 .t1 {
    top: -50%;
    left: -50%;
}
.apeach .eye .twinkle1 .t2 {
    top: -50%;
    right: -50%;
}
.apeach .eye .twinkle1 .t3 {
    bottom: -50%;
    left: -50%;
}
.apeach .eye .twinkle1 .t4 {
    bottom: -50%;
    right: -50%;
}
.apeach .eye .twinkle2 {
    width: 40px; height: 40px;
    background: #fff;
    overflow: hidden;
    position: relative; bottom: 90px; left: 50px;
}
.apeach:hover .eye .twinkle2 {
    width: 40px; height: 40px;
    background: #fff;
    overflow: hidden;
    position: relative; bottom: 90px; left: 50px;
    animation: apeach 0.7s infinite linear;
}
.apeach .eye .twinkle2 .t {
    width: 40px; height: 40px;
    background: black;
    border-radius: 50%;
    position: absolute;
}
.apeach .eye .twinkle2 .t1 {
    top: -50%;
    left: -50%;
}
.apeach .eye .twinkle2 .t2 {
    top: -50%;
    right: -50%;
}
.apeach .eye .twinkle2 .t3 {
    bottom: -50%;
    left: -50%;
}
.apeach .eye .twinkle2 .t4 {
    bottom: -50%;
    right: -50%;
}
/* 볼 */
.apeach .cheek {
    width: 90px; height: 25px;
    background: rgb(246, 113, 113);
    border-radius: 40%;
    position: absolute; top: 68%;
    z-index: 2;
}
.apeach .cheek.left {
    left: 90px;
}
.apeach .cheek.right {
    right: 90px;
}
/* 입 */
.apeach .mouth {
    width: 90px; height: 50px;
    background: rgb(249, 209, 211);
    border-radius: 50%; border: 10px solid black;
    position: absolute; top: 70%; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.apeach .mouth::before {
    content: "";
    position: absolute; top: -10px; left: -10px;
    width: 100px; height: 25px;
    background: rgb(249, 209, 211);
    z-index: 2;
}


/* 보노보노------------------------------------------------------------------------------- */
.article3 {
    height: 100%;
    background: skyblue;
    position: relative;
}
/* 얼굴 본판 */
.bonobono {
    width: 400px; height: 400px;
    position: absolute; top: 60%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%; border: 3px solid black;
}
/* 얼굴 */
.bonobono .face {
    width: 390px; height: 390px;
    background: skyblue;
    border-radius: 50%; border-bottom: 3px solid black;
    position: absolute; left: 50%; bottom: 0px;
    transform: translateX(-50%);
    margin-bottom: -3px;
    /* 보더 굵기만큼 곂치게 마진 음수값 */
}
/* 눈 */
.bonobono .eye {
    position: absolute; bottom: 55%;
    width: 25px; height: 25px;
    background: #000;
    border-radius: 50%;
}
.bonobono .e-left {
    left: 40px;
}
.bonobono .e-right {
    right: 40px;
}
/* 코 */
.bonobono .nose {
    position: absolute; top: 50%; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #000;
    z-index: 99999;
}
/* 입 */
.bonobono .mouth {
    position: relative;
    width: 70px; height: 70px;
    background: #fff;
    border: 3px solid #000;
}
/* 입왼쪽 */
.bonobono .mouth.m-left {
    border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius: 50%;
    transform: rotate(-10deg);
    position: absolute; top: 55%; right: 49%;
}
/* 입오른쪽 */
.bonobono .mouth.m-right {
    border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-right-radius: 50%;
    transform: rotate(10deg);
    position: absolute; top: 55%; left: 49%;
}
/* 수염 */
.bonobono .mouth span {
    display: inline-block;
    width: 50px; height: 4px;
    background: #000;
    position: absolute;
}
.bonobono .mouth.m-left span:nth-child(1) {
    transform: rotate(30deg);
    top: 0px; right: 50%;
}
.bonobono .mouth.m-left span:nth-child(2) {
    transform: rotate(10deg);
    top: 20px; right: 70%;
}
.bonobono .mouth.m-left span:nth-child(3) {
    transform: rotate(-20deg);
    top: 50px; right: 65%;
}
.bonobono .mouth.m-right span:nth-child(1) {
    transform: rotate(-30deg);
    top: 0px; left: 50%;
}
.bonobono .mouth.m-right span:nth-child(2) {
    transform: rotate(-10deg);
    top: 20px; left: 70%;
}
.bonobono .mouth.m-right span:nth-child(3) {
    transform: rotate(20deg);
    top: 50px; left: 65%;
}
/* 땀표시 */
.bonobono .sweat {
    position: relative;
}
.bonobono .sweat > div {
    position: absolute;
    width: 300px; height: 30px;
    /* background: #000; */
    text-align: right;
    transform: rotate(30deg);
    opacity: 0;
}
.bonobono .face:hover + .sweat > div:nth-child(1) {
    bottom: 100%; left: 50%;
    animation: bonobono 2s infinite linear;
}
.bonobono .face:hover + .sweat > div:nth-child(2) {
    bottom: 100%; left: 60%;
    margin-bottom: 50px;
    animation: bonobono 2s 0.5s infinite linear;
}
.bonobono .face:hover + .sweat > div:nth-child(3) {
    bottom: 100%; left: 70%;
    margin-bottom: 100px;
    animation: bonobono 2s 1s infinite linear;
}
.bonobono .face:hover + .sweat > div:nth-child(4) {
    bottom: 100%; left: 80%;
    margin-bottom: 150px;
    animation: bonobono 2s 1.5s infinite linear;
}
.bonobono .sweat > div span {
    display: inline-block;
    width: 50px; height: 30px;
    border-top-left-radius: 50%; border-top-right-radius: 50%;
    background: #fff;
    margin: 0px 10px;
}





/* 펭수------------------------------------------------------------------------------- */
.article4 {
    height: 100%;
    background: #ddd;
    position: relative;
}
.pengsoo {
    width: 600px; height: 600px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
/* 헤드셋 */
.pengsoo .headset {
    width: 550px; height: 500px;
    background: #eccb03;
    border: 3px solid #000;
    border-top-left-radius: 50%; border-top-right-radius: 50%;
    border-bottom-left-radius: 45%; border-bottom-right-radius: 45%;
    position: absolute; top: 0px; left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}
/* 밑에 동그란 반원 숨기기 */
.pengsoo .headset::before {
    content: "";
    position: absolute; top: 60%;
    width: 600px; height: 300px;
    background: #ddd;
}
/* 왼쪽 헤드셋 */
.pengsoo .headset .left {
    width: 100px; height: 150px;
    background: #eccb03;
    border: 3px solid #000;
    border-radius: 40px;
    position: absolute; right: 85%; top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}
/* 왼쪽 빨간불빛 부모 */
.pengsoo .headset .le-red {
    width: 100px; height: 100px;
    background: #eccb03;
    border: 3px solid #000;
    border-radius: 40%;
    position: absolute; right: 92%; top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    z-index: 99;
}
/* 빨간색 불빛 */
.pengsoo .headset .le-red span {
    display: inline-block;
    width: 20px; height: 100%;
    background: red;
    border-right: 3px solid #000;
}
/* 오른쪽 헤드셋 */
.pengsoo .headset .right {
    width: 100px; height: 150px;
    background: #eccb03;
    border: 3px solid #000;
    border-radius: 40px;
    position: absolute; left: 85%; top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}
/* 오른쪽 빨간불빛 부모 */
.pengsoo .headset .ri-red {
    width: 100px; height: 100px;
    background: #eccb03;
    border: 3px solid #000;
    border-radius: 40%;
    position: absolute; left: 92%; top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    z-index: 99;
}
/* 빨간색 불빛 */
.pengsoo .headset .ri-red span {
    float: right;
    width: 20px; height: 100%;
    background: red;
    border-left: 3px solid #000;
}

/* 얼굴 본판 */
.pengsoo .face-back {
    width: 500px; height: 450px;
    background: #231f20;
    border: 3px solid #000;
    border-top-left-radius: 50%; border-top-right-radius: 50%;
    border-bottom-left-radius: 45%; border-bottom-right-radius: 45%;
    position: absolute; top: 30px; left: 50%;
    transform: translateX(-50%);
    z-index: 99;
}
/* 메인얼굴 */
.pengsoo .face-back .face {
    width: 430px; height: 370px;
    background: #eee;
    border-top-left-radius: 50%; border-top-right-radius: 50%;
    border-bottom-left-radius: 45%; border-bottom-right-radius: 45%;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.pengsoo .face-back:hover .face .eye span {
    display: inline-block;
    width: 25px; height: 25px;
    background: #000;
    border-radius: 50%;
    position: absolute; top: 30%; left: 30%;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
}
/* 눈 */
.pengsoo .face-back .face .eye {
    width: 100px; height: 80px;
    background: #fff;
    border: 3px solid #fff;
    position: absolute; top: 30%;
    border-radius: 50%;
}
.pengsoo .face-back .face .eye.left {
    left: 15%;
}
.pengsoo .face-back .face .eye.right {
    right: 15%;
}
/* 눈동자 */
.pengsoo .face-back .face .eye span {
    display: inline-block;
    width: 25px; height: 25px;
    background: #000;
    border-radius: 50%;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
/* 코 */
.pengsoo .face-back .face .nose-back {
    width: 55px; height: 55px;
    background: yellow;
    position: absolute; top: 50%; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 20px; border: 3px solid #000;
    z-index: 99;
}
/* 콧구멍 왼쪽 */
.pengsoo .face-back .face .nose.left {
    width: 5px; height: 15px;
    background: #000;
    position: absolute; top: 52%; left: 48%;
    border-radius: 50%;
    z-index: 999999999999;
}
/* 콧구멍 오른쪽 */
.pengsoo .face-back .face .nose.right {
    width: 5px; height: 15px;
    background: #000;
    position: absolute; top: 52%; right: 48%;
    border-radius: 50%;
    z-index: 999999999999;
}
/* 입 */
/* 윗입술 왼쪽 */
.pengsoo .face-back .mouth .left {
    width: 120px; height: 40px;
    background: yellow;
    position: absolute; top: 57%; right: 47%;
    transform: rotate(-10deg);
    border-radius: 30px; border: 3px solid #000;
    z-index: 99;
}
.pengsoo .face-back .mouth .left::before {
    content: "";
    position: absolute; right: -7px; top: -8px;
    width: 40px; height: 40px;
    background: yellow;
    border-radius: 10px;
}
/* 윗입술 오른쪽 */
.pengsoo .face-back .mouth .right {
    width: 120px; height: 40px;
    background: yellow;
    position: absolute; top: 57%; left: 47%;
    transform: rotate(10deg);
    border-radius: 30px; border: 3px solid #000;
    z-index: 99;
}
.pengsoo .face-back .mouth .right::before {
    content: "";
    position: absolute; left: -14px; top: -6px;
    transform: rotate(-10deg);
    width: 50px; height: 40px;
    background: yellow;
    border-radius: 10px;
}
/* 입안 */
.pengsoo .face-back .mouth .center {
    width: 110px; height: 65px;
    background: #000;
    position: absolute; top: 60%; left: 50%;
    transform: translateX(-50%);
    border-radius: 50%; border: 3px solid #000;
    z-index: 9;
    overflow: hidden;
}
/* 입안 혓바닥 */
.pengsoo .face-back .mouth .center::after {
    content: "";
    position: absolute; bottom: 0px;
    width: 100%; height: 30px;
    background: red;
    border-radius: 50%;
}
/* 아랫입술 */
.pengsoo .face-back .mouth .bottom {
    width: 150px; height: 100px;
    background: yellow;
    position: absolute; top: 55%; left: 50%;
    transform: translateX(-50%);
    border-radius: 50%; border: 3px solid #000;

}
/* 볼터치 */
.pengsoo .face-back .cheek {
    width: 90px; height: 50px;
    background: pink;
    border-radius: 50px;
    position: absolute; top: 55%;
}
/* 볼터치 왼쪽 */
.pengsoo .face-back .cheek.left {
    left: 5px;
}
/* 볼터치 오른쪽 */
.pengsoo .face-back .cheek.right {
    right: 5px;
}
/* 땀 */
.pengsoo .face-back + .sweat {
    position: relative;
    opacity: 0;
    z-index: 999999999999999999999999999;
    transform: translateY(100px);
}
.pengsoo .face-back:hover + .sweat {
    position: relative;
    opacity: 0;
    z-index: 999999999999999999999999999;
    transform: translateY(100px);
    animation: pengsoo 1s both linear;
}
.pengsoo .sweat span:nth-child(1) {
    display: inline-block;
    position: absolute; top: 0px; right: 10%;
    background: linear-gradient(to top, deepskyblue, white, white, rgba(255,255,255,0));
    width: 50px; height: 100px;
    border-radius: 50%; 
    /* border: 3px solid #000; */
    z-index: 999999999999999999999999999;
}
.pengsoo .sweat span:nth-child(2) {
    display: inline-block;
    position: absolute; top: 0px; right: 20%;
    background: linear-gradient(to top, deepskyblue, white, white, rgba(255,255,255,0));
    width: 30px; height: 70px;
    border-radius: 50%; 
    /* border: 3px solid #000; */
    z-index: 999999999999999999999999999;
}




/* 몰랑------------------------------------------------------------------------------- */
.article5 {
    height: 100%;
    background: #fff;
    position: relative;
}
.molang {
    width: 500px; height: 550px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.molang .face {
    width: 500px; height: 550px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid #555;
    border-radius: 50% 50% 45% 45%;
    background: #fff;
    z-index: 999;
}
/* 눈 */
.molang .face .eye {
    width: 30px; height: 30px;
    background: #333;
    border-radius: 50%;
    position: absolute; top: 30%;
}
/* 왼쪽눈 */
.molang .face .eye.left {
    right: 70%;
}
/* 왼쪽눈 볼터치 */
.molang .face .eye.left::after {
    content: "";
    position: absolute; right: 0%; top: 0%;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(255,192,203,0.5);
    z-index: -1;
}
/* 오른쪽 눈 */
.molang .face .eye.right {
    left: 70%;
}
/* 오른쪽 눈 볼터치 */
.molang .face .eye.right::after {
    content: "";
    position: absolute; left: 0%; top: 0%;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(255,192,203,0.5);
    z-index: -1;
}
/* 입 */
.molang .face .mouth {
    position: absolute; top: 35%; left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 900; font-size: 70px;
    font-family: 'TmoneyRoundWindExtraBold';
    color: #333;
}
/* 귀 */
.molang .ear {
    width: 150px; height: 70px;
    border: 10px solid #555; border-radius: 50%;
    position: absolute; bottom: 100%;
    z-index: 99;
    background: #fff;
}
/* 왼쪽 귀 */
.molang .ear.left {
    right: 41%;
    transform: rotate(95deg);
}
/* 오른쪽 귀 */
.molang .ear.right {
    left: 41%;
    transform: rotate(85deg);
}
/* 팔, 다리 */
.molang .body {
    border: 10px solid #555; border-radius: 100px;
    background: #fff;
}
/* 팔 */
.molang .body.arm {
    width: 150px; height: 80px;
}
/* 왼쪽 팔 */
.molang .body.arm.left {
    position: absolute; top: 40%; right: 85%;
    transform: rotate(30deg);
}
/* 팔이 안으로 들어오면 필요함 */
/* .molang .body.arm.left::before {
    content: "";
    position: absolute; right: -10px; top: -10px;
    width: 40px; height: 80px;
    background: #fff;
} */
/* 오른쪽 팔 */
.molang .body.arm.right {
    position: absolute; top: 40%; left: 85%;
    transform: rotate(-30deg);
}
/* 팔이 안으로 들어오면 필요함 */
/* .molang .body.arm.right::before {
    content: "";
    position: absolute; left: -10px; top: -10px;
    width: 40px; height: 80px;
    background: #fff;
} */
/* 팔 흔들기 */
.molang:hover .body.arm.left {
    transform-origin: right center;
    animation: molang-left 1s infinite linear;
}
.molang:hover .body.arm.right {
    transform-origin: left center;
    animation: molang-right 1s infinite linear;
}
/* 다리 */
.molang .body.leg { 
    width: 120px; height: 80px;
    position: absolute; top: 90%;
    z-index: 9999;
}
/* 왼쪽 다리 */
.molang .body.leg.left {
    left: 25%;
    transform: rotate(95deg);
}
.molang .body.leg.left::before {
    content: "";
    position: absolute; left: -15px; top: -20px;
    transform: rotate(5deg);
    width: 50px; height: 90px;
    background: #fff;
}
/* 오른쪽 다리 */
.molang .body.leg.right {
    right: 25%;
    transform: rotate(85deg);
}
.molang .body.leg.right::before {
    content: "";
    position: absolute; left: -15px; top: -10px;
    transform: rotate(-5deg);
    width: 50px; height: 90px;
    background: #fff;
}


/* 뿌까------------------------------------------------------------------------------- */
.article6 {
    height: 100%;
    background: #f00;
    position: relative;
}
.pucca {
    width: 450px; height: 400px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* 머리 */
.pucca .hair {
    width: 230px; height: 230px;
    border-radius: 50%;
    background: #000;
    position: absolute; bottom: 60%;
}
/* 머리 왼쪽 */
.pucca .hair.left {
    right: 75%;
}
/* 머리 오른쪽 */
.pucca .hair.right {
    left: 75%;
}
/* 머리띠 */
.pucca .hair .band {
    width: 130px; height: 130px;
    background: #ff0;
    border-radius: 50%;
    position: absolute; top: 50%;
}
/* 머리띠 왼쪽 */
.pucca .hair.left .band {
    left: 55%;
}
/* 머리띠 오른쪽 */
.pucca .hair.right .band {
    right: 55%;
}
/* 얼굴배경 */
.pucca .face-back {
    width: 450px; height: 400px;
    background: #000;
    border-radius: 50% 50% 45% 45%;
    position: relative;
}
/* 얼굴 */
.pucca .face-back .face {
    width: 400px; height: 300px;
    background: #fcded4;
    position: absolute; bottom: 10px; left: 50%;
    transform: translateX(-50%);
    border-radius: 50% 50% 45% 45%;
    overflow: hidden;
}
/* 눈썹 */
.pucca .face-back .face .eyebrow {
    width: 100px; height: 50px;
    /* background: #000; */
    position: absolute; top: 20%;
    border-radius: 50%; border: 10px solid #000;
}
/* 왼쪽 눈썹 */
.pucca .face-back .face .eyebrow.left {
    left: 0%;
    transform: rotate(0deg);
}
.pucca .face-back .face .eyebrow.left::before {
    content: "";
    width: 100px; height: 30px;
    background: #fcded4;
    position: absolute; bottom: -10px; left: -10px;
}
/* 오른쪽 눈썹 */
.pucca .face-back .face .eyebrow.right {
    right: 0%;
    transform: rotate(0deg);
}
.pucca .face-back .face .eyebrow.right::before {
    content: "";
    width: 100px; height: 30px;
    background: #fcded4;
    position: absolute; bottom: -10px; right: -10px;
}
/* 눈 */
.pucca .face-back .face .eye {
    width: 130px; height: 10px;
    background: #000;
    position: absolute; top: 50%;
    border-radius: 10px;
}
/* 왼쪽 눈 */
.pucca .face-back .face .eye.left {
    left: 5%;
    transform: rotate(15deg);
}
/* 오른쪽 눈 */
.pucca .face-back .face .eye.right {
    right: 5%;
    transform: rotate(-15deg);
}
/* 웃는 입 */
.pucca .face-back .face .smile {
    width: 70px; height: 60px;
    border-radius: 50%; border: 10px solid #000;
    position: absolute; bottom: 30px; left: 50%;
    transform: translateX(-50%);
}
.pucca .face-back .face .smile::before {
    content: "";
    width: 70px; height: 30px;
    background: #fcded4;
    position: absolute; top: -10px; left: -10px;
}
.pucca .face-back .face .smile span {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: hotpink;
    position: absolute; top: -10px;
}
.pucca .face-back .face .smile span:nth-child(1) {
    right: 250%;
}
.pucca .face-back .face .smile span:nth-child(2) {
    left: 250%;
}
/* 호버하면 웃는입 실종 */
.pucca:hover .face-back .face .smile {
    display: none;
}
/* 입 */
.pucca .face-back .face .mouth {
    width: 300px; height: 70px;
    background: #fff;
    border: 10px solid #000; border-radius: 100% 100% 500% 500%;
    position: absolute; bottom: 30px; left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    display: none;
}

/* 이빨 */
.pucca .face-back .face .mouth span {
    display: inline-block;
    width: 10px; height: 90px;
    background: #000;
    position: absolute;
}
.pucca .face-back .face .mouth span:nth-child(1) {
    left: 20%;
}
.pucca .face-back .face .mouth span:nth-child(2) {
    left: 50%;
}
.pucca .face-back .face .mouth span:nth-child(3) {
    right: 20%;
}
.pucca:hover .face-back .face .mouth {
    display: block;
}