@charset "utf-8";
@import url("reset.css");
@import url("animate.css");
@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;
}






body, html {
    height: 100%; width: 100%;
    overflow-x: hidden;
    /* 세로 스크롤바는 마우스가 맨 밑으로 가면 .cursor때문에 스크롤이 생기는걸 방지 */
    overflow-y: hidden;
}
.magic {
    height: 100%; width: 500%;
    overflow: hidden;
}
.float {
    height: 100%; width: 20%;
    float: left;
}


/* 로딩페이지--------------------------------------------------------------------------------- */
.waiting-box {
    width: 100%; height: 100%;
    position: fixed; top: 0px; left: 0px;
    background: #fff;
    z-index: 99999;
}
/* 전체로고 */
.wait-all {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
/* 로고 애니메이션 */
.wait-all img {
    animation: wait-all 1.8s 2.7s both;
}
.wait-each img:nth-child(1) {
    animation: wait1 3s both ease-in-out;
}
.wait-each img:nth-child(2) {
    animation: wait2 3s both ease-in-out;
}
.wait-each img:nth-child(3) {
    animation: wait3 3s both ease-in-out;
}
.wait-each img:nth-child(4) {
    animation: wait4 3s both ease-in-out;
}
.wait-each img:nth-child(5) {
    animation: wait5 3s both ease-in-out;
}
.wait-each img:nth-child(6) {
    animation: wait6 3s both ease-in-out;    
}
/* 튜토리얼 텍스트---------------------------------------------------------------------------- */
#header {
    position: relative;
    height: 100%;
}
.tuto-box {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
}
/* 튜토리얼 이미지---------------------------------------------------------------------------- */
.tuto-box .img-box {
    /* position: absolute; bottom: 55%; left: 45%;
    transform: translateX(-45%); */
    /* width: 300px; height: 151px; */
    /* border: 1px solid black; */
    /* height: 300px; */
    margin-bottom: 20px;
    /* text-align: center; */
}
.tuto-box .img-box img:nth-child(1) {
    transform: translateX(20px);
    /* border: 1px solid black; */
    display: inline-block;
}
.tuto-box .img-box img:nth-child(2) {
    transform: translateX(120px);
    display: inline-block;
}
.tuto-box .img-box img:nth-child(3) {
    display: block;
    /* margin: 0px auto; */
}
/* 튜토리얼 텍스트---------------------------------------------------------------------------- */
.tuto-box .tuto-txt {
    /* position: absolute; top: 50%; left: 50%;
    transform: translateX(-50%); */
    /* border: 1px solid black; */
    /* width: 40%; */
    /* min-width: 300px; */
}
.tuto-box .tuto-txt h2 {
    font-size: 40px; font-family: 'TmoneyRoundWindExtraBold';
    padding: 20px 0px;
}
.tuto-box .tuto-txt h3 {
    font-size: 30px; font-family: 'TmoneyRoundWindExtraBold';
    padding-bottom: 30px;
    color: brown;
}
.tuto-box .tuto-txt p {
    font-size: 20px; font-family: 'TmoneyRoundWindExtraBold';
    padding-bottom: 10px;
}
/* 아이콘 */
.tuto-box .tuto-txt i {
    padding: 0px 5px;
}
/* 버튼 */
.tuto-box .tuto-txt .start-btn {
    padding: 30px 0px;
}
.tuto-box .tuto-txt .start-btn input {
    border-radius: 20px;
    font-family: 'TmoneyRoundWindExtraBold'; font-size: 15px;
    width: 100px; height: 50px;
}
/* 메인 페이지1----------------------------------------------------------------------------- */
#section {
    height: 100%; 
    /* position: relative; */
}
.article1 {
    position: relative;
    height: 100%;
    /* 아티클2,3 으로 넘어가면 개복치가 뒤로 숨으면서 호버가 안먹힘 그래서 아티클1을 맨위로 올림 */
    z-index: 999999999999999999;
}
.article1 .img-box {
    height: 100%;
}
.article1 .img-box .window-t {
    height: 25%;
    /* background: red; */
    position: relative;
}
.article1 .img-box .window-b {
    height: 75%;
    /* background: pink; */
    position: relative;
}
/* 파도----------------------------------------------------------------------------------- */
.article1 .img-box .window-t .wave {
    position: absolute; bottom: 0px;
    z-index: 9;
    width: 100%;
}
.article1 .img-box .window-t .wave img {
    width: 100%;
}
/* 파도 멘트 */
.article1 .img-box .window-t .wave p {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 50px; line-height: 50px;
    border-radius: 50%;
    background: #333; color: #fff;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transition: all 0.5s;
}
.article1 .img-box .window-t .wave p:after {
    content: "";
    position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%);
    border-bottom: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.article1 .img-box .window-t .wave:hover p {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 50px; line-height: 50px;
    border-radius: 50%;
    background: #333; color: #fff;
    font-weight: bold;
    text-align: center;
    opacity: 1;
    transition: all 0.5s;
}
/* 종이배---------------------------------------------------------------------------------- */
.article1 .img-box .window-t .boat {
    animation: boat1 30s infinite linear;
    position: absolute; bottom: 10px; left: 100%;
    z-index: 8;
    max-width: 150px; width: 15%; height: 120px;
}
.article1 .img-box .window-t .boat img {
    width: 100%; height: 100%;
}
/* 종이배 멘트 */
.article1 .img-box .window-t .boat p {
    position: absolute; left: 100%; bottom: 100%;
    width: 200px; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article1 .img-box .window-t .boat p::after {
    content: "";
    position: absolute; right: 90%; top: 60%;
    transform: rotate(50deg);
    border-top: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.article1 .img-box .window-t .boat:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 200px; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 개복치-------------------------------------------------------------------------------- */
.article1 .img-box .window-b .fish {
    position: absolute; bottom: 120px; left: 100px;
    width: 100px; height: 100px;
    animation: fish1 25s infinite linear;
    display: none;
}
.article1 .img-box .window-b .fish.on {
    display: block;
}
.article1 .img-box .window-b .fish img {
    width: 100%; height: 100%;
}
/* 개복치 멘트 호버는 제이쿼리로 넘김 */
.article1 .img-box .window-b .fish p {
    position: absolute; left: 120%; bottom: 50%;
    width: 120px; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article1 .img-box .window-b .fish p::after {
    content: "";
    position: absolute; right: 85%; top: 60%;
    transform: rotate(60deg);
    border-top: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

/* 갈매기 */
/* .article1 .img-box img:nth-child(4) {
    position: absolute; top: 80px; left: 75%;
    max-width: 30px; width: 15%;
} */
/* 모래바닥-------------------------------------------------------------------------------- */
.article1 .img-box .window-b .sand {
    position: absolute; bottom: 0px;
    width: 100%; height: 68px;
}
.article1 .img-box .window-b .sand img {
    width: 100%; height: 100%;
}
/* 모래바닥 멘트 */
.article1 .img-box .window-b .sand p {
    position: absolute; left: 50%; bottom: 120%;
    width: 50px; height: 30px; line-height: 30px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article1 .img-box .window-b .sand p::after {
    content: "";
    position: absolute; left: 50%; top: 90%;
    transform: translateX(-50%);
    border-top: 10px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article1 .img-box .window-b .sand:hover p {
    position: absolute; left: 50%; bottom: 120%;
    width: 50px; height: 30px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 산호초1------------------------------------------------------------------------------- */
.article1 .img-box .window-b .coral1 {
    position: absolute; bottom: 68px; left: 25%;
    max-width: 80px; width: 15%;
}
.article1 .img-box .window-b .coral1 img {
    width: 100%; height: 100%;
}
/* 산호초1 멘트 */
.article1 .img-box .window-b .coral1 p {
    position: absolute; left: 50%; bottom: 120%;
    transform: translateX(-50%);
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article1 .img-box .window-b .coral1 p::after {
    content: "";
    position: absolute; left: 50%; top: 100%;
    transform: translateX(-50%);
    border-top: 10px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article1 .img-box .window-b .coral1:hover p {
    position: absolute; left: 50%; bottom: 120%;
    transform: translateX(-50%);
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 치어떼--------------------------------------------------------------------------------- */
.article1 .img-box .window-b .sub-fish {
    position: absolute; top: 10%; left: 70%;
    max-width: 150px; width: 20%;
    padding-top: 50px;
    animation: sub-fish1 10s infinite linear;
}
.article1 .img-box .window-b .sub-fish img {
    width: 100%; height: 100%;
}
/* 치어떼 멘트 */
.article1 .img-box .window-b .sub-fish p {
    position: absolute; left: 100%; top: 0px;
    width: 100%; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article1 .img-box .window-b .sub-fish p::after {
    content: "";
    position: absolute; right: 87%; top: 60%;
    transform: rotate(50deg);
    border-top: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.article1 .img-box .window-b .sub-fish:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 100%; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}

/* about me 미역----------------------------------------------------------------------------- */
.article1 .seaweed1 {
    position: absolute; bottom: 68px; right: 25%;
    /* border: 1px solid black; */
    max-width: 91px;
    width: 15%;
}
.article1 .seaweed1 img {
    vertical-align: bottom;
    width: 44%;
}
/* about me 미역 텍스트---------------------------------------------------------------------- */
.article1 .seaweed1 .click {
    display: block;
    text-align: center;
    padding-top: 5px;
    font-weight: bold; font-size: 20px;
    position: absolute; top: 100%;
    width: 100%;
}
.article1 .seaweed1 .click i {
    animation: click 1s infinite;
    transform: translateY(20%);
    color: blue;
}
/* about me 미역 멘트 */
.article1 .seaweed1 p {
    position: absolute; left: 100%; bottom: 100%;
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article1 .seaweed1 p::after {
    content: "";
    position: absolute; right: 85%; top: 65%;
    transform: rotate(50deg);
    border-top: 15px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article1 .seaweed1:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* about me 페이지---------------------------------------------------------------------------- */
.article1 .about-me {
    z-index: 999999;
    position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;
    background: rgba(0,0,0,0.5);
    /* transition: all 1s; */
    display: none;    
}
/* 클릭 이벤트 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
.article1 .about-me.on {
    display: block;
}
/* 클릭 이벤트 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
.article1 .about-me .about-list {
    background: #fff;
    /* display: inline-block; */
    position: fixed; top: 0; left: 18%; right: 18%; bottom: 0px;
    min-width: 1230px;
    /* 반응형 패스 */
}
/* 한줄코멘트 */
.article1 .about-me .about-list .comment {
    text-align: center;
    font-size: 60px; font-family: 'TmoneyRoundWindExtraBold';
    padding: 30px 0px;
}
/* 어바웃미 내용 */
.article1 .about-me .about-list .profile {
    /* position: absolute; top: 20%; left: 50%; */
    /* transform: translateX(-50%); */
    width: 100%; height: 100%;
}
.article1 .about-me .about-list .profile .text {
    /* width: 50%; */
    padding-top: 50px;
}
/* 타임라인------------------------------------------------------------------------------------- */
/* 이미지 */
.article1 .about-me .about-list .text > div {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    text-align: center;
    padding-top: 10px;
    /* 옆에 텍스트 제목에 패딩 탑값 10px 들어가있어서 맞추기 위해 넣는다. */
}
/* 텍스트 */
.article1 .about-me .about-list .text > ul {
    display: inline-block;
    vertical-align: middle;
}
.article1 .about-me .about-list .text > ul:nth-child(1) {
    width: 100%;
}
.article1 .about-me .about-list .text > ul li {
    padding-bottom: 5px;
    font-size: 16px;
}
.article1 .about-me .about-list .text > ul li span:nth-child(1) {
    font-size: 20px; font-family: 'TmoneyRoundWindExtraBold';
}
.article1 .about-me .about-list .text p {
    font-size: 25px; font-family: 'TmoneyRoundWindExtraBold';
    color: lightcoral;
    padding-top: 10px;
}
/* about me 나가기 버튼--------------------------------------------------------------------- */
.article1 .about-me .about-list .close {
    position: absolute; top: 50px; left: 5%;
    text-align: center;
    font-weight: bold;
}
.article1 .about-me .about-list .close i {
    font-size: 50px;
    padding-bottom: 5px;
    cursor: pointer;
}
/* 메인 페이지2----------------------------------------------------------------------------- */
.article2 {
    height: 100%;
    position: relative;
}
.article2 .img-box {
    height: 100%;
}
.article2 .img-box .window-t {
    height: 25%;
    position: relative;
}
.article2 .img-box .window-b {
    height: 75%;
    position: relative;
}
/* 파도----------------------------------------------------------------------------------- */
.article2 .img-box .window-t .wave {
    position: absolute; bottom: 0px;
    z-index: 9;
    width: 100%;
}
.article2 .img-box .window-t .wave img {
    width: 100%;
}
/* 파도 멘트 */
.article2 .img-box .window-t .wave p {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 50px; line-height: 50px;
    border-radius: 50%;
    background: #333; color: #fff;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transition: all 0.5s;
}
.article2 .img-box .window-t .wave p:after {
    content: "";
    position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%);
    border-bottom: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.article2 .img-box .window-t .wave:hover p {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 50px; line-height: 50px;
    border-radius: 50%;
    background: #333; color: #fff;
    font-weight: bold;
    text-align: center;
    opacity: 1;
    transition: all 0.5s;
}
/* 종이배---------------------------------------------------------------------------------- */
.article2 .img-box .window-t .boat {
    animation: boat1 30s infinite linear;
    position: absolute; bottom: 10px; left: 100%;
    z-index: 8;
    max-width: 150px; width: 15%; height: 120px;
}
.article2 .img-box .window-t .boat img {
    width: 100%; height: 100%;
}
/* 종이배 멘트 */
.article2 .img-box .window-t .boat p {
    position: absolute; left: 100%; bottom: 100%;
    width: 200px; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article2 .img-box .window-t .boat p::after {
    content: "";
    position: absolute; right: 90%; top: 60%;
    transform: rotate(50deg);
    border-top: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.article2 .img-box .window-t .boat:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 200px; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 갈매기 */
/* .article2 .img-box img:nth-child(3) {
    position: absolute; top: 80px; left: 75%;
} */
/* 모래바닥-------------------------------------------------------------------------------- */
.article2 .img-box .window-b .sand {
    position: absolute; bottom: 0px;
    width: 100%; height: 68px;
}
.article2 .img-box .window-b .sand img {
    width: 100%; height: 100%;
}
/* 모래바닥 멘트 */
.article2 .img-box .window-b .sand p {
    position: absolute; left: 50%; bottom: 120%;
    width: 50px; height: 30px; line-height: 30px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article2 .img-box .window-b .sand p::after {
    content: "";
    position: absolute; left: 50%; top: 90%;
    transform: translateX(-50%);
    border-top: 10px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article2 .img-box .window-b .sand:hover p {
    position: absolute; left: 50%; bottom: 120%;
    width: 50px; height: 30px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 산호초1------------------------------------------------------------------------------- */
.article2 .img-box .window-b .coral1 {
    position: absolute; bottom: 68px; left: 15%;
    max-width: 80px; width: 15%;
}
.article2 .img-box .window-b .coral1 img {
    width: 100%; height: 100%;
}
/* 산호초1 멘트 */
.article2 .img-box .window-b .coral1 p {
    position: absolute; left: 50%; bottom: 120%;
    transform: translateX(-50%);
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article2 .img-box .window-b .coral1 p::after {
    content: "";
    position: absolute; left: 50%; top: 100%;
    transform: translateX(-50%);
    border-top: 10px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article2 .img-box .window-b .coral1:hover p {
    position: absolute; left: 50%; bottom: 120%;
    transform: translateX(-50%);
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 미역2------------------------------------------------------------------------------- */
.article2 .img-box .window-b .seaweed2 {
    position: absolute; bottom: 68px; right: 10%;
    max-width: 51px; width: 15%;
}
.article2 .img-box .window-b .seaweed2 img {
    width: 100%; height: 100%;
}
/* 미역2 멘트 */
.article2 .img-box .window-b .seaweed2 p {
    position: absolute; left: 50%; bottom: 120%;
    transform: translateX(-50%);
    width: 200px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article2 .img-box .window-b .seaweed2 p::after {
    content: "";
    position: absolute; left: 50%; top: 100%;
    transform: translateX(-50%);
    border-top: 10px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article2 .img-box .window-b .seaweed2:hover p {
    position: absolute; left: 50%; bottom: 120%;
    transform: translateX(-50%);
    width: 200px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 치어떼--------------------------------------------------------------------------------- */
.article2 .img-box .window-b .sub-fish {
    position: absolute; top: 10%; left: 35%;
    max-width: 150px; width: 20%;
    padding-top: 50px;
    animation: sub-fish1 10s infinite linear;
}
.article2 .img-box .window-b .sub-fish img {
    width: 100%; height: 100%;
}
/* 치어떼 멘트 */
.article2 .img-box .window-b .sub-fish p {
    position: absolute; left: 100%; top: 0px;
    width: 100%; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article2 .img-box .window-b .sub-fish p::after {
    content: "";
    position: absolute; right: 87%; top: 60%;
    transform: rotate(50deg);
    border-top: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.article2 .img-box .window-b .sub-fish:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 100%; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* portfoilo 산호초2----------------------------------------------------------------------------- */
.article2 .seaweed1 {
    position: absolute; bottom: 68px; right: 40%;
    /* border: 1px solid black; */
    max-width: 60px; width: 15%;
}
.article2 .seaweed1 img {
    vertical-align: bottom;
    width: 100%;
}
/* portfolid 산호초 텍스트---------------------------------------------------------------------- */
.article2 .seaweed1 .click {
    display: block;
    text-align: center;
    padding-top: 5px;
    font-weight: bold; font-size: 18px;
    position: absolute; top: 100%;
    width: 100%;
}
.article2 .seaweed1 .click i {
    animation: click 1s infinite;
    transform: translateY(20%);
    color: blue;
}
/* portfolid 산호초 멘트 */
.article2 .seaweed1 p {
    position: absolute; left: 100%; bottom: 100%;
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article2 .seaweed1 p::after {
    content: "";
    position: absolute; right: 85%; top: 65%;
    transform: rotate(50deg);
    border-top: 15px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article2 .seaweed1:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}

/* 포트폴리오 페이지--------------------------------------------------------------------------- */
.article2 .portfolio {
    /* 개복치가 상세페이지 눌렀을 때 더 위로 올라오는걸 방지 */
    z-index: 999999999999999999;
    position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;
    background: rgba(0,0,0,0.5);
    display: none;
}
/* 클릭 이벤트 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
.article2 .portfolio.on {
    display: block;
}
/* 클릭 이벤트 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
.article2 .portfolio .port-list {
    position: absolute; top: 0; left: 18%; right: 18%; bottom: 0px;
    background: #fff;
    min-width: 1230px;
}
.article2 .portfolio .port-list .comment {
    text-align: center;
    font-size: 60px; font-family: 'TmoneyRoundWindExtraBold';
    padding: 30px 0px;
}
/* 메뉴 텍스트 */
.article2 .portfolio .port-list .title {
    position: absolute; top: 30%; left: 50%;
    transform: translateX(-50%);
    width: 80%;
}
.article2 .portfolio .port-list .title ul {
    width: 100%; height: auto;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 3px solid black; 
}
.article2 .portfolio .port-list .title li {
    display: inline-block;
    font-size: 30px; font-family: 'TmoneyRoundWindExtraBold';
    padding: 0px 30px;
    /* border: 1px solid black; */
}
/* 메뉴 클릭 이벤트 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
.article2 .portfolio .port-list .title li.on {
    font-size: 50px;
    color: hotpink;
    /* border: 1px solid black; */
}
/* 메뉴 클릭 이벤트 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
/* 포트폴리오 페이지 메뉴 이미지------------------------------------------------------------- */
.article2 .portfolio .port-list .content {
    width: 80%; overflow: hidden;
    position: absolute; top: 40%; left: 50%;
    transform: translateX(-50%);
    /* border: 1px solid black; */
    text-align: center;
}
.article2 .portfolio .port-list .content li {
    position: relative;
    /* p태그 position */
    display: inline-block;
    width: 20%;
    padding: 15px 10px;
    animation: port 2s both;
}
/* 메뉴 클릭 이벤트 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
.article2 .portfolio .port-list .content ul {
    display: none;
}
.article2 .portfolio .port-list .content ul.on {
    display: block;
}
/* 메뉴 클릭 이벤트 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
/* 포트폴리오 페이지 메뉴 이미지 박스-------------------------------------------------------- */
.article2 .portfolio .port-list .content li div {
    position: relative;
    transition: all 0.5s;
    padding: 10px;
    /* background: url(../images/tube.png) no-repeat;
    background-position: center; */
}
.article2 .portfolio .port-list .content li div img {
    width: 100%;
}
.article2 .portfolio .port-list .content li div:hover {
    position: relative;
    transition: all 0.5s;
    /* transform: scale(1.2); */
}
.article2 .portfolio .port-list .content li div::before {
    content: "";
    position: absolute; top: 40px; bottom: 40px; left: 40px; right: 40px;
    background: rgba(155,203,67,0);
    border-radius: 50%;
    transition: all 0.5s;
}
.article2 .portfolio .port-list .content li div:hover::before {
    content: "";
    position: absolute; top: 40px; bottom: 40px; left: 40px; right: 40px;
    background: rgba(155,203,67,0.4);
    border-radius: 50%;
    transition: all 0.5s;
}
/* 메뉴 이미지 텍스트 */
.article2 .portfolio .port-list .content li div:hover p {
    opacity: 1;
    transition: all 0.5s;
}
.article2 .portfolio .port-list .content p {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    padding-bottom: 5px;
    color: #ffffff;
    border: 1px solid #ffffff; border-radius: 5px;
    opacity: 0;
}
.article2 .portfolio .port-list .content p:hover {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    padding-bottom: 5px;
    color: #73767e; background: #ffffff;
    border: 2px solid #ffffff; border-radius: 5px;
    opacity: 1;
}
/* portfoilo 나가기 버튼--------------------------------------------------------------------- */
.article2 .portfolio .port-list .close {
    position: absolute; top: 50px; left: 5%;
    text-align: center;
    font-weight: bold;
}
.article2 .portfolio .port-list .close i {
    font-size: 50px;
    padding-bottom: 5px;
    cursor: pointer;
}

/* 메인 페이지3----------------------------------------------------------------------------- */
.article3 {
    height: 100%;
    position: relative;
}
.article3 .img-box {
    height: 100%;
}
.article3 .img-box .window-t {
    height: 25%;
    position: relative;
}
.article3 .img-box .window-b {
    height: 75%;
    position: relative;
}
/* 파도----------------------------------------------------------------------------------- */
.article3 .img-box .window-t .wave {
    position: absolute; bottom: 0px;
    z-index: 9;
    width: 100%;
}
.article3 .img-box .window-t .wave img {
    width: 100%;
}
/* 파도 멘트 */
.article3 .img-box .window-t .wave p {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 50px; line-height: 50px;
    border-radius: 50%;
    background: #333; color: #fff;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transition: all 0.5s;
}
.article3 .img-box .window-t .wave p:after {
    content: "";
    position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%);
    border-bottom: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.article3 .img-box .window-t .wave:hover p {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 50px; line-height: 50px;
    border-radius: 50%;
    background: #333; color: #fff;
    font-weight: bold;
    text-align: center;
    opacity: 1;
    transition: all 0.5s;
}
/* 종이배---------------------------------------------------------------------------------- */
.article3 .img-box .window-t .boat {
    animation: boat2 30s infinite linear;
    position: absolute; bottom: 10px; left: 90%;
    z-index: 8;
    max-width: 150px; width: 15%; height: 120px;
}
.article3 .img-box .window-t .boat img {
    width: 100%; height: 100%;
}
/* 종이배 멘트 */
.article3 .img-box .window-t .boat p {
    position: absolute; left: 100%; bottom: 100%;
    width: 200px; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article3 .img-box .window-t .boat p::after {
    content: "";
    position: absolute; right: 90%; top: 60%;
    transform: rotate(50deg);
    border-top: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.article3 .img-box .window-t .boat:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 200px; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 갈매기 */
/* .article3 .img-box img:nth-child(3) {
    position: absolute; top: 80px; left: 75%;
} */
/* 치어떼--------------------------------------------------------------------------------- */
.article3 .img-box .window-b .sub-fish {
    position: absolute; top: 10%; left: 50%;
    max-width: 150px; width: 20%;
    padding-top: 50px;
    animation: sub-fish1 10s infinite linear;
}
.article3 .img-box .window-b .sub-fish img {
    width: 100%; height: 100%;
}
/* 치어떼 멘트 */
.article3 .img-box .window-b .sub-fish p {
    position: absolute; left: 100%; top: 0px;
    width: 100%; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article3 .img-box .window-b .sub-fish p::after {
    content: "";
    position: absolute; right: 87%; top: 60%;
    transform: rotate(50deg);
    border-top: 20px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.article3 .img-box .window-b .sub-fish:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 100%; height: 70px; line-height: 70px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* article3 산호초2----------------------------------------------------------------------------- */
.article3 .coral2 {
    position: absolute; bottom: 68px; right: 40%;
    /* border: 1px solid black; */
    max-width: 60px; width: 15%;
}
.article3 .coral2 img {
    vertical-align: bottom;
    width: 100%;
}
/* portfolio 산호초 텍스트---------------------------------------------------------------------- */
.article3 .coral2 .click {
    display: block;
    text-align: center;
    padding-top: 5px;
    font-weight: bold;
    position: absolute; top: 100%;
    width: 100%;
}
.article3 .coral2 .click i {
    animation: click 1s infinite;
    transform: translateY(20%);
    color: blue;
}
.article3 .coral2 .click {
    font-size: 20px;
}
/* portfolio 산호초 멘트 */
.article3 .coral2 p {
    position: absolute; left: 100%; bottom: 100%;
    width: 200px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article3 .coral2 p::after {
    content: "";
    position: absolute; right: 85%; top: 65%;
    transform: rotate(50deg);
    border-top: 15px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article3 .coral2:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 200px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 모래바닥-------------------------------------------------------------------------------- */
.article3 .img-box .window-b .sand {
    position: absolute; bottom: 0px;
    width: 100%; height: 68px;
}
.article3 .img-box .window-b .sand img {
    width: 100%; height: 100%;
}
/* 모래바닥 멘트 */
.article3 .img-box .window-b .sand p {
    position: absolute; left: 50%; bottom: 120%;
    width: 50px; height: 30px; line-height: 30px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article3 .img-box .window-b .sand p::after {
    content: "";
    position: absolute; left: 50%; top: 90%;
    transform: translateX(-50%);
    border-top: 10px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article3 .img-box .window-b .sand:hover p {
    position: absolute; left: 50%; bottom: 120%;
    width: 50px; height: 30px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* skill 미역----------------------------------------------------------------------------- */
.article3 .seaweed1 {
    position: absolute; bottom: 68px; left: 10%;
    /* border: 1px solid black; */
    max-width: 91px; width: 15%;
}
.article3 .seaweed1 img {
    vertical-align: bottom;
    width: 43%;
}
/* skill 미역 멘트 */
.article3 .seaweed1 p {
    position: absolute; left: 100%; bottom: 100%;
    width: 70px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article3 .seaweed1 p::after {
    content: "";
    position: absolute; right: 85%; top: 65%;
    transform: rotate(50deg);
    border-top: 15px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article3 .seaweed1:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 70px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* 컨택트 미역----------------------------------------------------------------------------- */
.article3 .seaweed2 {
    position: absolute; bottom: 68px; right: 10%;
    max-width: 70px;
    width: 15%;
    text-align: center;
}
/* skill 미역 멘트 */
.article3 .seaweed2 p {
    position: absolute; left: 100%; bottom: 100%;
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.article3 .seaweed2 p::after {
    content: "";
    position: absolute; right: 85%; top: 65%;
    transform: rotate(50deg);
    border-top: 15px solid #333;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.article3 .seaweed2:hover p {
    position: absolute; left: 100%; bottom: 100%;
    width: 100px; height: 50px; line-height: 50px;
    text-align: center;
    font-weight: bold;
    background: #333; color: #fff;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.5s;
}
/* skills 미역 텍스트---------------------------------------------------------------------- */
.article3 .seaweed1 .click {
    display: block;
    text-align: center;
    padding-top: 5px;
    font-weight: bold;
    position: absolute; top: 100%;
    width: 100%;
}
.article3 .seaweed1 .click i {
    animation: click 1s infinite;
    transform: translateY(20%);
    color: blue;
}
.article3 .seaweed1 .click {
    font-size: 20px;
}
/* 컨택트 미역 텍스트---------------------------------------------------------------------- */
.article3 .seaweed2 .click {
    display: block;
    text-align: center;
    padding-top: 5px;
    font-weight: bold;
    position: absolute; top: 100%;
    width: 100%;
}
.article3 .seaweed2 .click i {
    animation: click 1s infinite;
    transform: translateY(20%);
    color: blue;
}
.article3 .seaweed2 .click {
    font-size: 20px;
}



/* skills 페이지---------------------------------------------------------------------------- */
.article3 .skills {
    /* 개복치가 상세페이지 눌렀을 때 더 위로 올라오는걸 방지 */
    z-index: 999999999999999999;
    position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;
    background: rgba(0,0,0,0.5);
    display: none;
}
/* 클릭 이벤트 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
.article3 .skills.on {
    display: block;
}
/* 클릭 이벤트 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
.article3 .skills .skills-list {
    background: #fff;
    position: absolute; top: 0px; bottom: 0px; left: 18%; right: 18%;
    min-width: 1230px;
}
/* 한줄코멘트 */
.article3 .skills .skills-list .comment {
    text-align: center;
    font-size: 60px; font-family: 'TmoneyRoundWindExtraBold';
    padding: 30px 0px;
}
/* skills 구역-------------------------------------------------------------------------- */
.article3 .skills .skills-list .skills-box {
    width: 100%; height: 350px;
    position: absolute; bottom: 30%;
    /* left: 50%; transform: translateX(-50%); */
    text-align: center;
}
/* 각각의 스킬구역 박스 */
.article3 .skills .skills-list .skills-box > div {
    display: inline-block;
    /* border: 1px solid black; */
    height: 100%; width: 200px;
    margin: 0px 10px;
}
.article3 .skills .skills-list .skills-box .score {
    /* border: 1px solid black; */
    height: 100%;
    position: relative;
    background: url(../images/whale1.png) no-repeat;
    background-position: bottom;
}
/* 분수 */
.article3 .skills .skills-list .skills-box .score .myscore {
    height: 0%; width: 4px;
    display: block;
    opacity: 0;
    background: rgb(35,31,32);
    position: absolute; bottom: 5px; left: 50%;
    transform: translateX(-50%);
    font-size: 25px; font-family: 'TmoneyRoundWindExtraBold';
}
/* 분수 애니메이션------------------------------------------------------------------------- */
.article3 .skills .skills-list .skills-box .html .myscore { 
    animation: htmlscore 1s both 0s;
}
.article3 .skills .skills-list .skills-box .html .myscore p { 
    animation: score 1s infinite 1s linear;
}
.article3 .skills .skills-list .skills-box .css .myscore {
    animation: cssscore 1s both 0.5s;
}    
.article3 .skills .skills-list .skills-box .css .myscore p {
    animation: score 1s infinite 1.5s linear;
}    
.article3 .skills .skills-list .skills-box .js .myscore {
    animation: jsscore 1s both 1s;
}
.article3 .skills .skills-list .skills-box .js .myscore p {
    animation: score 1s infinite 2s linear;
}    
.article3 .skills .skills-list .skills-box .jq .myscore {
    animation: jqscore 1s both 1.5s;
}
.article3 .skills .skills-list .skills-box .jq .myscore p {
    animation: score 1s infinite 2.5s linear;
}    
.article3 .skills .skills-list .skills-box .react .myscore {
    animation: reactscore 1s both 2s;
}
.article3 .skills .skills-list .skills-box .react .myscore p {
    animation: score 1s infinite 3s linear;
}    
/* 분수이미지 보류 */
/* .article3 .skills .skills-list .skills-box .score .myscore img {
    position: fixed; bottom: 100%; left: 50%;
    transform: translateX(-50%);
} */
/* 분수 끝에 갈라지는 표현 */
.article3 .skills .skills-list .skills-box .score .myscore::before {
    content: "∩";
    font-weight: 900;
    position: absolute; top: -20px; right: 0px;
    color: rgb(35,31,32);

    /* background: blue;
    width: 20px; height: 20px;
    border-radius: 50%; */
}
.article3 .skills .skills-list .skills-box .score .myscore::after {
    content: "∩";
    position: absolute; top: -20px; left: 0px;
    color: rgb(35,31,32);
    
    /* background: blue;
    width: 20px; height: 20px;
    border-radius: 50%; */
}
/* 점수 % */
.article3 .skills .skills-list .skills-box .score .myscore p {
    position: absolute; bottom: 105%; left: 50%;
    color: #0080ff;
    transform: translateX(-50%);
}
/* 스킬 텍스트 */
.article3 .skills .skills-list .skills-box span {
    font-size: 25px; font-family: 'TmoneyRoundWindExtraBold';
    display: block;
    text-align: center;
    padding-top: 10px;
    /* border: 1px solid black; */
}
/* skills 나가기 버튼--------------------------------------------------------------------- */
.article3 .skills .skills-list .close {
    position: absolute; top: 50px; left: 5%;
    text-align: center;
    font-weight: bold;
}
.article3 .skills .skills-list .close i {
    font-size: 50px;
    padding-bottom: 5px;
    cursor: pointer;
}


/* contact 페이지---------------------------------------------------------------------------- */
.article3 .contact {
    /* 개복치가 상세페이지 눌렀을 때 더 위로 올라오는걸 방지 */
    z-index: 999999999999999999;
    position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;
    background: rgba(0,0,0,0.5);
    display: none;
}
/* 클릭 이벤트 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
.article3 .contact.on {
    display: block;
}
/* 클릭 이벤트 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
.article3 .contact .contact-list {
    background: #fff;
    /* display: inline-block; */
    position: absolute; top: 0; left: 18%; right: 18%; bottom: 0px;
    min-width: 1230px;
}
/* 한줄코멘트 */
.article3 .contact .contact-list .comment {
    text-align: center;
    font-size: 60px; font-family: 'TmoneyRoundWindExtraBold';
    padding: 30px 0px;
}
/* 컨택트 투역 생선가시 박스----------------------------------------------------------------- */
.article3 .contact .contact-list .die-fish img:nth-child(1) {
    position: absolute; top: 50%; left: 25px;
    transform: translateY(-50%);
}
.article3 .contact .contact-list .die-fish img:nth-child(2) {
    position: absolute; top: 50%; right: 25px;
    transform: translateY(-50%);
}
/* 애니메이션 이벤트 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
.article3 .contact .contact-list > .die-fish {
    /* animation: contact 1s infinite; */
}
/* 전송버튼을 누르면 생선가시+우편물이 날라가는 효과를 넣고 싶음 */
.article3 .contact .contact-list .inquiry-form {
    /* border: 1px solid black; */
    /* animation: contact 1s infinite; */
}
/* 애니메이션 이벤트 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
/* 컨택트 구역------------------------------------------------------------------------------- */
.article3 .inquiry-form {
    border: 3px solid black;
    width: 600px; height: 400px;
    padding: 0px 10px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
/* 폼태그 안에 라벨속성 */
.article3 .inquiry-form label {
    display: block;
    font-size: 20px; font-family: 'TmoneyRoundWindExtraBold';
    padding: 15px 0px 10px 10px;
}
/* 폼태그 안에 인풋+셀렉트 속성 */
.article3 .inquiry-form input,
.article3 .inquiry-form select {
    width: 100px; height: 25px;
    padding-left: 10px;
    border: 1px solid #ccc; border-radius: 10px;
    background: #eee;
    vertical-align: top;
}
/* 셀렉트 옵션 백그라운드 */
.article3 .inquiry-form select option {
    background: #fff;
}
/* 사진등록 구역---------------------------- */
.article3 .inquiry-form .photo {
    display: inline-block;
    text-align: center;
    vertical-align: top;
}
.article3 .inquiry-form .photo img {
    padding: 50px 50px 10px;
}
/* 사진등록 텍스트 */
.article3 .inquiry-form .photo input {
    width: 60px; height: 25px;
    display: block;
    margin: 0px auto; padding: 0px;
    border-radius: 50px;
    font-weight: bold;
}
.article3 .inquiry-form .photo input:hover {
    width: 60px; height: 25px;
    display: block;
    margin: 0px auto; padding: 0px;
    border-radius: 50px;
    font-weight: bold;
    background: hotpink; border: 1px solid pink; color: #fff;
    transition: all 0.5s;
}
/* 인포메이션 구역---------------- */
.article3 .inquiry-form .infor {
    /* display: inline-block; */
    /* border: 1px solid black; */
    float: right;
}
/* 메모하기 */
.article3 .inquiry-form .memo textarea {
    resize: none;
    width: 570px; height: 100px;
    padding: 10px 0px 0px 10px;
}
.article3 .inquiry-form .memo textarea::placeholder {
    font-size: 16px; font-weight: bold;
}
/* 용궁으로 전송버튼----------------------------------------------------------------------- */
.article3 .inquiry-form .submit {
    position: absolute; top: 105%; left: 50%;
    transform: translateX(-50%);
}
.article3 .inquiry-form .submit button {
    font-size: 20px; font-weight: bold;
    /* font-family: 'TmoneyRoundWindExtraBold'; */
    padding: 15px 25px; 
    border-radius: 50px;
    background: #ddd; color: #555;
}
.article3 .inquiry-form .submit button:hover {
    font-size: 20px; font-weight: bold;
    /* font-family: 'TmoneyRoundWindExtraBold'; */
    padding: 15px 25px; 
    border-radius: 50px;
    background: skyblue; color: #333;
    transition: all 0.5s;
}
/* contact 나가기 버튼--------------------------------------------------------------------- */
.article3 .contact .contact-list .close {
    position: absolute; top: 50px; left: 5%;
    text-align: center;
    font-weight: bold;
}
.article3 .contact .contact-list .close i {
    font-size: 50px;
    padding-bottom: 5px;
    cursor: pointer;
}



/* 게임오버 페이지-------------------------------------------------------------------------- */
.article4 {
    height: 100%;
    position: relative;
}
/* 재도전 구역------------------------------------------------------------------------------- */
.article4 .return {
    text-align: center;
    /* background: red; */
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
/* 게임오버 텍스트 */
.article4 .gameover {
    text-align: center;
    /* color: blue; */
}
.article4 .gameover p {
    font-size: 4.5vw; font-weight: bold;
    letter-spacing: 0.5em;
    color: #a52a2a;
}
/* 죽은 개복치 이미지 */
/* .article4 .return .fish {
    animation: die-fish 30s both linear;
    z-index: 2;
} */
/* 재도전 버튼 구역 */
.article4 .return .retu {
    width: 250px; height: 250px;
    margin: 0px auto;
}
.article4 .return .retu div {
    position: relative;
    /* border: 5px solid black; */
    margin: 70px 0px 40px 0px;
}
.article4 .return .retu img:nth-child(1) {
    animation: turn 3s infinite linear;
    min-width: 180px;
}
.article4 .return .retu img:nth-child(2) {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: auto;
    /* animation: die-fish 10s both linear; */
}
/* 재도전 텍스트 */
.article4 .return .retu h3 {
    font-size: 2.5vw; font-family: 'TmoneyRoundWindExtraBold';
    padding-top: 20px; padding-left: 20px;
    letter-spacing: 0.5em;
}




/* 물방울 커서----------------------------------------------------------------------------- */

/* .cursor {    마우스를 따라다니는 html의 간단한 풀이방법
    position: absolute; top: 0px; left: 0px;
    z-index: 9999999999999999999999999999999999999999999999999999;
    width: 50px; height: 50px;
    margin: 10px 0px 0px 10px;
    마진값으로 빈공간을 안만들어주면 클릭이 안됨
    display: none;
}
.cursor span {
    display: inline-block;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(135, 206, 235, 1);
    animation: bubble 2s infinite linear;
    position: absolute; top: 50%; left: 0px;
}
.cursor span:nth-child(1) {left: 10px; animation-delay: 1.5s;}
.cursor span:nth-child(2) {left: 30px; animation-delay: 0.6s;}
.cursor span:nth-child(3) {left: 23px; animation-delay: 0.3s;}
.cursor span:nth-child(4) {left: 17px; animation-delay: 1.2s;}
.cursor span:nth-child(5) {left: 5px; animation-delay: 0.1s;}
.cursor span:nth-child(6) {left: 13px; animation-delay: 0.9s;}
.cursor span:nth-child(7) {left: 30px; animation-delay: 1.2s;}
.cursor span:nth-child(8) {left: 18px; animation-delay: 1.3s;}
.cursor span:nth-child(9) {left: 43px; animation-delay: 1.4s;}
.cursor span:nth-child(10) {left: 35px; animation-delay: 0.5s;} */

.bubble {
    pointer-events: none;
    position: absolute; 
    width: 0px;
    height: 0px;
    margin: 0px 0px 0px 0px;
    border-radius: 50%; 
    background: gray;
    animation: bubble 1s both ease-in-out;
    opacity: 0.5;
  }