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

@font-face {
    font-family: 'YPairing';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-4@1.1/YPairingFont.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

header {
    width: 100%;
    height: 40px;
    background-color: rgb(130, 188, 255);
    font-family: 'YPairing';
}
header> ul {
    text-align: center;
    /* border: 1px solid red; */
}
header> ul> li {
    /* margin-left: -20px; */
    display: inline-block;
    padding: 0 30px;
}
header> ul> li>a>i {
    font-size: 25px;
    padding-top: 8px;
    color: white;
}
.sky {
    height: 500px;
    background-image: url(../img/back1.png);
    background-size: 100% 100%;
    text-align: center;
}
.sky> p {
    font-family: 'YPairing';
}
.sky>.pixely {
    padding-top: 200px;
    font-size: 80px;
    font-weight: 600;
    text-shadow: 4px 4px #4d3a2c;
    
}
.sky> .pixely > .c1 {
    color: #ee4646;
}
.sky> .pixely > .c2 {
    color: #ffa34e;
}
.sky> .pixely > .c3 {
    color: #ffdf6d;
}
.sky> .pixely > .c4 {
    color: #83ba57;
}
.sky> .pixely > .c5 {
    color: #4fcdff;
}
.sky> .pixely > .c6 {
    color: #db8ef4;
}
.sky> .tell{
    font-size: 16px;
    color: #4d3a2c;
    font-weight: bold;
    text-shadow: none;
    padding-top: 50px;
}
.sky> .tell>span {
    color: #8b705c;
    line-height: 40px;
    font-size: 13px;


}

.members {
    background-image: url(../img/back2.png);
    background-repeat: repeat;
    font-family: 'YPairing';
    font-weight: 600;
    /* background-color: darkorange; */
    height: 500px;
    width: 100%;
    /* margin-top: 400px; */

}
.members>ul {
    text-align: center;
}

.members>ul> li {
    width: 150px;
    height: 200px;
    background-color: white;
    display: inline-block;
    margin-left: 50px;
    margin-top: 100px;
    text-align: center;
    transition: all 0.4s;
    filter: drop-shadow(4px 4px #665046);

}
.members>ul> li:hover {
    transform: scale(1.3);
}
.members>ul> li> a {
    text-decoration: none;
    width: 130px;
    font-size: 18px;
    display: inline-block;
    margin-top: 10px;
    color: black;
    /* border: 1px solid red; */
}
.members>ul> li> a>img {
    width: 130px;
    height: 150px;
    padding-bottom: 5px;
}











.under {
    background-color: rgb(146, 187, 85);
    height: 20px;
} 

.under>p {
    color: #3f1313;
    font-size: 15px;
    font-family: 'YPairing';
    text-align: right;
}

#rwrap {
    background-color: #ff9783;
    text-align: center;
}

#rwrap> header {
    height: 40px;
    background-color: rgb(221, 73, 73);
    font-family: 'YPairing';
}
#rwrap> header > .gnb> li{
    display: inline-block;
}
header > .gnb> li>a>i {
    transition: all 0.4s;
}
header > .gnb> li> .home:hover>i{
    color: rgb(255, 220, 177);
}
header > .gnb> li> .fire:hover>i{
    color: rgb(255, 100, 100);
}
header > .gnb> li> .dog:hover>i{
    color: rgb(255, 167, 59);
}
header > .gnb> li> .star:hover>i{
    color: rgb(255, 226, 59);
}
header > .gnb> li> .dino:hover>i{
    color: rgb(119, 226, 48);
}
header > .gnb> li> .cloud:hover>i{
    color: rgb(121, 206, 255);
}
header > .gnb> li> .rabbit:hover>i{
    color: rgb(215, 113, 255);
}

#rwrap{
    background-color: #ffbdba;
    text-align: center;
}
#rwrap>header {
    background-color: #e93933;
}
#rwrap >.all > img {
    width: 500px;
    height: 600px;
    z-index: 1;
}
#rwrap> .all {
    padding-top: 90px;
    height: 900px;
    margin-left: 150px;
}

#rwrap >.all> .rathtell {
    display: inline-block;
    width: 650px;
    height: 400px;
    font-family: 'YPairing';
    text-align: justify;
    padding-top: 130px;
    background-color: rgb(255, 222, 222);
    border-radius: 45px;
    margin-top: -50px;
    margin-left: 40px;
}
#rwrap >.all> .rathtell> .telling> .cont5>ul>li {
    display: inline-block;
}

#rwrap> .all {
    text-align: center;
}
#rwrap >.all> .rathtell> .telling> .nickname {
    font-size: 38px;
    color: #b82828;
}
#rwrap >.all> .rathtell> .telling> p {
    line-height: 30px;
    font-size: 20px;
    margin-bottom: 30px;
}
#rwrap >.all> .rathtell> .telling {
    width: 650px;
    height: 400px;
    margin-top: -80px;
    padding-left: 40px;
    z-index: 3;
}
#rwrap >.all> .rathtell> .telling> .cont> {
    width: 600px;
    height: 70px;
    margin-top: -20px;
}
#rwrap >.all> .rathtell> .telling> .cont>ul >li {
    text-align: center;
    display: inline-block;
    margin-left: 20px;

}
#rwrap >.all> .rathtell> .telling> .cont>ul >li>a>i {
    font-size: 20px;
    transition: all 0.4s;
    /* padding: 0px 20px; */
    color: #b82828;
}
#rwrap >.all> .rathtell> .telling> .cont>ul >li>a:hover>i {
    transform: scale(1.2);
    color: #ee4646;
}

#rwrap>footer {
    background-color: #ffbdba;
    text-align: center;
    width: 100%;
    height: 70px;
}
.rathback{
    filter: drop-shadow(3px 3px #ee4646);
}
footer> .rathback:hover>p>a {
    color: #ee4646;
}

footer>button {
    width: 100px;
    height: 50px;
    border-radius: 45px;
    border: none;
}

footer>button>p>a {
    margin-bottom: 20px;
    width: 100px;
    height: 50px;
    font-size: 15px;
    font-family: 'YPairing';
    text-decoration-line: none;
    font-weight: 600;
    color: black;
    transition: all 0.4s;
}
footer>button>p {
    transition: all 0.4s;
}

footer>button:hover>p {
    transform: scale(1.2);
}

#dwrap{
    background-color: #ffc28a;
    text-align: center;
}
#dwrap>header {
    background-color: #f78c28;
}
#dwrap >.all > img {
    width: 500px;
    height: 600px;
    z-index: 1;
}
#dwrap> .all {
    padding-top: 90px;
    height: 900px;
    margin-left: 150px;
}

#dwrap >.all> .ducktell {
    display: inline-block;
    width: 650px;
    height: 400px;
    font-family: 'YPairing';
    text-align: justify;
    padding-top: 130px;
    background-color: rgb(255, 225, 191);
    border-radius: 45px;
    margin-top: -50px;
    margin-left: 40px;
}
#dwrap >.all> .ducktell> .telling> .cont1>ul>li {
    display: inline-block;
}

#dwrap> .all {
    text-align: center;
}
#dwrap >.all> .ducktell> .telling> .nickname1 {
    font-size: 38px;
    color: #f78c28;
}
#dwrap >.all> .ducktell> .telling> p {
    line-height: 30px;
    font-size: 20px;
    margin-bottom: 30px;
}
#dwrap >.all> .ducktell> .telling {
    width: 650px;
    height: 400px;
    margin-top: -80px;
    padding-left: 40px;
    z-index: 3;
}
#dwrap >.all> .ducktell> .telling> .cont1> {
    width: 600px;
    height: 70px;
    margin-top: -20px;
}
#dwrap >.all> .ducktell> .telling> .cont1>ul >li {
    text-align: center;
    display: inline-block;
    margin-left: 20px;

}
#dwrap >.all> .ducktell> .telling> .cont1>ul >li>a>i {
    font-size: 20px;
    transition: all 0.4s;
    /* padding: 0px 20px; */
    color: #c96100;
}
#dwrap >.all> .ducktell> .telling> .cont1>ul >li>a:hover>i {
    transform: scale(1.2);
    color: #ff922d;
}

#dwrap>footer {
    background-color: #ffc28a;
    text-align: center;
    width: 100%;
    height: 70px;
}
.duckback{
    filter: drop-shadow(3px 3px #ff9a3c);
    
}
footer> .duckback:hover>p>a {
    color: #ee9246;
}




#hwrap{
    background-color: #fff38a;
    text-align: center;
}
#hwrap>header {
    background-color: #ffd722;
}
#hwrap >.all > img {
    width: 500px;
    height: 600px;
    z-index: 1;
}
#hwrap> .all {
    padding-top: 90px;
    height: 900px;
    margin-left: 150px;
}

#hwrap >.all> .heptatell {
    display: inline-block;
    width: 650px;
    height: 400px;
    font-family: 'YPairing';
    text-align: justify;
    padding-top: 130px;
    background-color: white;
    border-radius: 45px;
    margin-top: -50px;
    margin-left: 40px;
}
#hwrap >.all> .heptatell> .telling> .cont1>ul>li {
    display: inline-block;
}

#hwrap> .all {
    text-align: center;
}
#hwrap >.all> .heptatell> .telling> .nickname2 {
    font-size: 38px;
    color: #e9ad09;
}
#hwrap >.all> .heptatell> .telling> p {
    line-height: 30px;
    font-size: 20px;
    margin-bottom: 30px;
}
#hwrap >.all> .heptatell> .telling {
    width: 650px;
    height: 400px;
    margin-top: -80px;
    padding-left: 40px;
    z-index: 3;
}
#hwrap >.all> .heptatell> .telling> .cont2> {
    width: 600px;
    height: 70px;
    margin-top: -20px;
}
#hwrap >.all> .heptatell> .telling> .cont2>ul >li {
    text-align: center;
    display: inline-block;
    margin-left: 20px;

}
#hwrap >.all> .heptatell> .telling> .cont2>ul >li>a>i {
    font-size: 20px;
    transition: all 0.4s;
    /* padding: 0px 20px; */
    color: #e9ad09;
}
#hwrap >.all> .heptatell> .telling> .cont2>ul >li>a:hover>i {
    transform: scale(1.2);
    color: #ffdf77;
}

#hwrap>footer {
    background-color: #fff38a;
    text-align: center;
    width: 100%;
    height: 70px;
}
.heptback{
    filter: drop-shadow(3px 3px #e9ad09);
}
footer> .heptback:hover>p>a {
    color: #e9ad09;
}



#gwrap{
    background-color: #bde292;
    text-align: center;
}
#gwrap>header {
    background-color: #72ad2f;
}
#gwrap >.all > img {
    width: 500px;
    height: 600px;
    z-index: 1;
}
#gwrap> .all {
    padding-top: 90px;
    height: 900px;
    margin-left: 150px;
}

#gwrap >.all> .dinotell {
    display: inline-block;
    width: 650px;
    height: 400px;
    font-family: 'YPairing';
    text-align: justify;
    padding-top: 130px;
    background-color: #d3f0b3;
    border-radius: 45px;
    margin-top: -50px;
    margin-left: 40px;
}
#gwrap >.all> .dinotell> .telling> .cont3>ul>li {
    display: inline-block;
}

#gwrap> .all {
    text-align: center;
}
#gwrap >.all> .dinotell> .telling> .nickname3 {
    font-size: 38px;
    color: #72ad2f;
}
#gwrap >.all> .dinotell> .telling> p {
    line-height: 30px;
    font-size: 20px;
    margin-bottom: 20px;
}
#gwrap >.all> .dinotell> .telling {
    width: 650px;
    height: 400px;
    margin-top: -80px;
    padding-left: 40px;
    z-index: 3;
}
#gwrap >.all> .dinotell> .telling> .cont3> {
    width: 600px;
    height: 70px;
    margin-top: -20px;
}
#gwrap >.all> .dinotell> .telling> .cont3>ul >li {
    text-align: center;
    display: inline-block;
    margin-left: 20px;

}
#gwrap >.all> .dinotell> .telling> .cont3>ul >li>a>i {
    font-size: 20px;
    transition: all 0.4s;
    /* padding: 0px 20px; */
    color: #699932;
}
#gwrap >.all> .dinotell> .telling> .cont3>ul >li>a:hover>i {
    transform: scale(1.2);
    color: #a0c971;
}

#gwrap>footer {
    background-color: #bde292;
    text-align: center;
    width: 100%;
    height: 70px;
}
.dinoback{
    filter: drop-shadow(3px 3px #699932);
}
footer> .dinoback:hover>p>a {
    color: #699932;
}



#swrap{
    background-color: #b8dfff;
    text-align: center;
}
#swrap>header {
    background-color: rgb(130, 188, 255);
}
#swrap >.all > img {
    width: 500px;
    height: 600px;
    z-index: 1;
}
#swrap> .all {
    padding-top: 90px;
    height: 900px;
    margin-left: 150px;
}

#swrap >.all> .sleeptell {
    display: inline-block;
    width: 650px;
    height: 400px;
    font-family: 'YPairing';
    text-align: justify;
    padding-top: 130px;
    background-color: white;
    border-radius: 45px;
    margin-top: -50px;
    margin-left: 40px;
}
#swrap >.all> .sleeptell> .telling> .cont4>ul>li {
    display: inline-block;
}

#swrap> .all {
    text-align: center;
}
#swrap >.all> .sleeptell> .telling> .nickname4 {
    font-size: 38px;
    color: rgb(130, 188, 255);
}
#swrap >.all> .sleeptell> .telling> p {
    line-height: 30px;
    font-size: 20px;
    margin-bottom: 30px;
}
#swrap >.all> .sleeptell> .telling {
    width: 650px;
    height: 400px;
    margin-top: -80px;
    padding-left: 40px;
    z-index: 3;
}
#swrap >.all> .sleeptell> .telling> .cont4> {
    width: 600px;
    height: 70px;
    margin-top: -20px;
}
#swrap >.all> .sleeptell> .telling> .cont4>ul >li {
    text-align: center;
    display: inline-block;
    margin-left: 20px;

}
#swrap >.all> .sleeptell> .telling> .cont4>ul >li>a>i {
    font-size: 20px;
    transition: all 0.4s;
    /* padding: 0px 20px; */
    color: rgb(82, 147, 221);
}
#swrap >.all> .sleeptell> .telling> .cont4>ul >li>a:hover>i {
    transform: scale(1.2);
    color: #7ec8fa;
}

#swrap>footer {
    background-color: #b8dfff;
    text-align: center;
    width: 100%;
    height: 70px;
}
.sleepback{
    filter: drop-shadow(3px 3px #41a7e2);
}
footer> .sleepback:hover>p>a {
    color: #41a7e2;
}



#shwrap{
    background-color: #ecc2ff;
    text-align: center;
}
#shwrap>header {
    background-color: rgb(197, 102, 226);
}
#shwrap >.all > img {
    width: 500px;
    height: 600px;
    z-index: 1;
}
#shwrap> .all {
    padding-top: 90px;
    height: 900px;
    margin-left: 150px;
}

#shwrap >.all> .shutell {
    display: inline-block;
    width: 650px;
    height: 400px;
    font-family: 'YPairing';
    text-align: justify;
    padding-top: 130px;
    background-color: rgb(247, 223, 255);
    border-radius: 45px;
    margin-top: -50px;
    margin-left: 40px;
}
#shwrap >.all> .shutell> .telling> .cont5>ul>li {
    display: inline-block;
}

#shwrap> .all {
    text-align: center;
}
#shwrap >.all> .shutell> .telling> .nickname5 {
    font-size: 38px;
    color: rgb(161, 59, 192);
}
#shwrap >.all> .shutell> .telling> p {
    line-height: 30px;
    font-size: 20px;
    margin-bottom: 30px;
}
#shwrap >.all> .shutell> .telling {
    width: 650px;
    height: 400px;
    margin-top: -80px;
    padding-left: 40px;
    z-index: 3;
}
#shwrap >.all> .shutell> .telling> .cont5> {
    width: 600px;
    height: 70px;
    margin-top: -20px;
}
#shwrap >.all> .shutell> .telling> .cont5>ul >li {
    text-align: center;
    display: inline-block;
    margin-left: 20px;

}
#shwrap >.all> .shutell> .telling> .cont5>ul >li>a>i {
    font-size: 20px;
    transition: all 0.4s;
    /* padding: 0px 20px; */
    color: rgb(136, 52, 161);
}
#shwrap >.all> .shutell> .telling> .cont5>ul >li>a:hover>i {
    transform: scale(1.2);
    color: #ea83ff;
}

#shwrap>footer {
    background-color: #ecc2ff;
    text-align: center;
    width: 100%;
    height: 70px;
}
.shuback{
    filter: drop-shadow(3px 3px rgb(197, 102, 226));
}
footer> .shuback:hover>p>a {
    color: rgb(197, 102, 226);
}