*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
  
}
body {
    background-color: #222F2E;
}
/* .container {
    width: 1400px;
    max-width: 100px;
    margin: 0 auto;
} */


.container{
    width: 1400px;
    margin: 0 auto;
    

}
.slide .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu a {
    color: #C9B781;
 
}
.menu ul {
    display: flex;
    gap: 40px;
    font-size: 30px;
    font-family: "Libre Baskerville", serif;
    font-weight: 500;
    
}
.slide .logo img {
    width: 80px;
    margin-top: 20px;
}
.slide{
    background-color: #222F2E;
    height: 1000px;
    position: relative;
    background-image: url(../img/background\ pc.jpg);
    background-size: cover;
    background-position: center ; 
}
/* .slide img {
    width: 100%;
} */

/* 분홍 반짝이 */
.pinksparkle1 {
    position: absolute;
    width: 60px;
    bottom: 45%;
    left: 33%;
    animation: twinkle 0.5s infinite linear alternate;
    
}

.pinksparkle2 {
    position: absolute;
    width: 70px;
    top: 30%;
    left: 55%;
    animation: twinkle 0.9s infinite linear alternate;
}
.pinksparkle3 {
    position: absolute;
    width: 55px;
    left: 35%;
    top: 20%;
    animation: twinkle 1.5s infinite linear alternate;
}
.pinksparkle4 {
    position: absolute;
    right: 35%;
    top: 40%;
    width: 50px;
    animation: twinkle 1s infinite linear alternate;
}
.pinksparkle5 {
    position: absolute;
    right: 34%;
    top: 45%;
    width: 30px;
    animation: twinkle 1.3s infinite linear alternate;
}
.pinksparkle6 {
    position: absolute;
    left: 31%;
    top: 37%;
    width: 40px;
    animation: twinkle 0.8s infinite linear alternate;
}
.pinksparkle7 {
    position: absolute;
    right: 45%;
    bottom: 10%;
    width: 45px;
    animation: twinkle 0.8s infinite linear alternate;
}
.pinksparkle8 {
    position: absolute;
    right: 25%;
    top: 15%;
    width: 30px;
    animation: twinkle 1.2s infinite linear alternate;
}
.pinksparkle9 {
    position: absolute;
    right: 26%;
    top: 10%;
    width: 50px;
    animation: twinkle 0.8s infinite linear alternate;
}
.pinksparkle10 {
    position: absolute;
    left: 42%;
    top: 25%;
    width: 60px;
    animation: twinkle 1.4s infinite linear alternate;
}
.pinkcloudsparkle {
    position: absolute;
    bottom: -50%;
    width: 1800px;
    z-index: 1000;
}
.smokeleft {
    position: absolute;
    width: 900px;
    left: -5%;
    bottom: -55%;
    animation: smoke1 2s;
}
.smokeright {
    position: absolute;
    width: 800px;
    right: -5%;
    top: 25%;
    animation: smoke1 2s;
}
@keyframes smoke1 {
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.cloud {
    position: absolute;
    left: 0;
    bottom: -460px;
    z-index: 100;
    width: 100%;
    animation: fadeup 2s;
}
@keyframes fadeup {
    0%{
        opacity: 0;
        transform: translateY(200px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
.hand {
    width: 650px;
    position: absolute;
    left: 40%;
    transform: translate(-40%);
    bottom: -120px;
}
.topbox {
    position: absolute;
    width: 260px;
    left: 48%;
    bottom: 32%;
    z-index: 400;
}

.bluesilk {
    position: absolute;
    width: 250px;
    left:38%;
    top: 132px;
    z-index: 100;
    animation: silk3 1.5s infinite alternate linear;
}
.greensilk {
    position: absolute;
    left: 47%;
    width: 350px;
    top: 25%;
    z-index: 300;
    animation: silk1 3s infinite alternate linear;
}
.pinksilk {
    position: absolute;
    width: 320px;
    left: 42%;
    top: 45px;
    z-index: 100;
    animation: silk2 2s infinite alternate linear;
}
.whitesilk {
    position: absolute;
    width: 150px;
    top: 25px;
    left: 40%;
    animation: silk4 1s  infinite alternate linear;
}

@keyframes silk1 {
    0%{
        transform: rotate(-15deg);
    }

    100%{

    }
}

@keyframes silk2 {
    0%{
        transform: skew(10deg);
    }
    100%{

    }
}
@keyframes silk3 {
    0%{
        transform: rotate(-10deg);
    }
}
@keyframes silk4 {
    0%{
        transform: skew(10deg);
    }
}
.goldfish1 {
    position: absolute;
    left: 65%;
    top: 15%;
    width: 150px;
    animation: goldfish1 1s  infinite linear alternate;
}
.goldfish2 {
    position: absolute;
    width: 150px;
    left: 52%;
    bottom: 13px;
}
.goldfish3 {
    position: absolute;
    width: 110px;
    left: 46%;
    top: 19%;
    animation: goldfish3 1.5s infinite linear alternate;
}
@keyframes goldfish1 {
    0% {
        transform: skew(-5deg);
    }
    100% {
      
    }
}
@keyframes goldfish3 {
    0% {
        transform: rotate(20deg);
    }
    100% {

    }
}

.pinkfish1 {
    position: absolute;
    width: 220px;
    left: 65%;
    bottom: 35%;
    z-index: 100;
    animation: pink1 3s  infinite linear alternate;
}
@keyframes pink1 {
    0% {
        transform: rotate(-20deg);
    }
    100%{

    }
}
.pinkfish2 {
    position: absolute;
    left: 29%;
    bottom: 15%;
    width: 180px;
    animation: pink2 1s;
}
@keyframes pink2 {
    0% {
        transform: rotate(-30deg);
        bottom: -100px;
    }
    100%{

    }
}
.bigsparkle {
    position: absolute;
    width: 180px;
    left: 33%;
    bottom: 39%;
}
.sparkle1 {
    position: absolute;
    left: 57%;
    top: 23%;
    animation: twinkle 1.5s infinite linear alternate;
}
@keyframes twinkle {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.sparkle1-2 {
    position: absolute;
    width: 28px;
    left: 53%;
    top: 38%;
    animation: twinkle 0.8s infinite linear alternate;
}
.sparkle2 {
    position: absolute;
    left: 67%;
    top: 40%;
    animation: twinkle 0.8s infinite linear alternate;
}
.flower1 {
    position: absolute;
    width: 47px;
    left: 42%;
    top: 34%;
    animation: Flower1 3s infinite linear;
   
}
@keyframes Flower1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }

}
.flower2 {
    position: absolute;
    width: 65px;
    left: 65%;
    bottom: 30%;
    animation: flower2 3s  infinite linear;
}
@keyframes flower2 {
    0%{
        transform: rotate(360deg);
    }
    100%{

    }
}
.flower3 {
    position: absolute;
    width: 66px;
    left: 34%;
    bottom: 40%;
    animation: flower2 3s  infinite linear;
}


.folk {
    margin-top: 700px;
    margin-bottom: 100px;
}
.folk h2 {
    color: #C9B781;
    font-family: "Libre Baskerville", serif;
    font-weight: 100;
    text-align: center;
    border-bottom: 1px solid #C9B781;
    font-size: 70px;
    line-height: 150px;
}
.images1 {
    display: grid;
    height: 800px;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 3.5fr 1fr;
    margin-top: 60px;
    gap: 30px;
}

.images1 a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  position: relative; /* .explain의 상대위치 유지 */
  background-size: cover;
  background-position: center;
}


.hwajinmu {
    background-image: url(../img/hwajinmu.jpg);
    background-size: cover;
    background-position: center;
    grid-row: 1 / 2;
    border-radius: 20px;
    
}
.hwajeopdo {
    background-image: url(../img/hwajeopdo.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    grid-row: 1 / 3;
    
}
.folk3 {
    background-image: url(../img/녹음방초.png);
    border-radius: 20px;
    background-size: cover;
    background-position: center;
}
.graphic {
    margin-top: 150px;
    margin-bottom: 100px;
}
.graphic h2 {
    color: #C9B781;
    font-family: "Libre Baskerville", serif;
    font-weight: 100;
    text-align: center;
    border-bottom: 1px solid #C9B781;
    font-size: 70px;
    line-height: 150px;
}

.images2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.8fr;
    grid-template-rows: 1fr 1fr;
    height: 700px;
    margin-top: 60px;
    gap: 30px;
}

.moonlight {
    grid-row:  1 / 3;
    background-image: url(../img/달빛기행.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.pattern1 {
    background-image: url(../img/단청문양\ 남색.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.pattern2 {
    background-image: url(../img/단청문양\ 주홍.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}
.pattern3 {
    background-image: url(../img/단청문양\ 분홍.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}
.pattern4 {
    background-image: url(../img/단청문양\ 기와.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}
.mydream {
    background-image: url(../img/Mydream.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}
.newyear {
    background-image: url(../img/Newyear2023.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}
.mockup {
    margin-top: 200px;
    margin-bottom: 100px;
}
.mockup h2 {
    color: #C9B781;
    font-family: "Libre Baskerville", serif;
    font-weight: 100;
    text-align: center;
    border-bottom: 1px solid #C9B781;
    margin-top: 30px;
    font-size: 70px;
    line-height: 150px;
}
.images3 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin-top: 60px;
    height: 600px;
    gap: 30px;
}
.images4 {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    height: 300px;
    gap: 30px;
}
.images5 {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    height: 300px;
    gap: 30px;
}
.images6 {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    height: 350px;
    margin-top: 65px;
    gap: 30px;
}
.images7 {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    height: 350px;
    margin-top: 30px;
    gap: 30px;
}
.phonecase1 {
    grid-row: 1 / 2;
    background-image: url(../img/grip\ tok\ 3D\ 1.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.newyearmockup {
    grid-row: 1 / 2;
    background-image: url(../img/newyearmockup.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.mydreammockup {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    background-image: url(../img/아트워크\ 목업.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.bunsinesscard1 {
    background-image: url(../img/KakaoTalk_20231018_215705168.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.bunsinesscard2 {
    background-image: url(../img/KakaoTalk_20231018_215705168_01.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.cosmeticmockup {
    background-image: url(../img/화장품목업.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.stickermockup {
    background-image: url(../img/Sticker\ Pack.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.patternmockup {
    background-image: url(../img/전통문양카드\ 목업.png);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.postermockup {
    background-image: url(../img/국립중앙박물관\ 포스터\ 목업.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.poster {
    margin-top: 200px;
    margin-bottom: 100px;
}
.poster h2 {
    color: #C9B781;
    font-family: "Libre Baskerville", serif;
    font-weight: 100;
    text-align: center;
    border-bottom: 1px solid #C9B781;
    margin-top: 30px;
    font-size: 70px;
    line-height: 150px;
}

.images8 {
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    height: 450px;
    margin-top: 60px;
    margin-bottom: 300px;
    gap: 30px;
}
.poster1 {
    background-image: url(../img/국립중앙박물관\ 포스터1.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.poster2 {
    background-image: url(../img/국립중앙박물관\ 포스터2.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.poster3 {
    background-image: url(../img/국립중앙박물관\ 포스터3.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.poster4 {
    background-image: url(../img/한복문화주간포스터.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}

footer .container {
    color: #d2d2d2;
    font-family: "Noto Sans KR";
}

h3 {
    display: inline-block;
    border-bottom: 1px solid #fff;
    line-height: 40px;
    margin-bottom: 10px;
    font-size: 16px;
}

footer p {
    font-size: 14px;
    line-height: 25px;
}
footer {
    margin-bottom: 100px;
}


/* 마우스 오버 이벤트 */
.explain {
    position: relative;
}
.explain>div {
    display: flex;
    align-items: flex-end;
    padding: 20px;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    opacity: 0;
    transition: 1s;
    border-radius: 20px;
    font-family: "Noto Sans KR";
    font-weight: 600;
    font-size: 20px;
}
.explain>div:hover {
    opacity: 1;
}


html, body {
  overflow-x: hidden;
}

/*  반응형 */

/* 태블릿용 (예: iPad 등) */
@media (max-width: 1024px) {
  .slide {
    background-image: url(../img/background\ tablet.jpg);
  }
}

/* 모바일용 */
@media (max-width: 767px) {
  .slide {
    background-image: url(../img/background\ mobile.png);
  }
}