@charset "utf-8";

/* 탑 */
#slider {
    width: 100%;
    height: 100%;
    position: relative;
}

#slider video {
    width: 100%;
    height: 100%;
    position: relative;
}

#slider .text_wrap {
    position: absolute;
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

#slider .text_wrap span {

    color: #f5daaf;
    font-size: 56px;
    white-space: nowrap
}

#slider .text_wrap p {
    top: 170px;
    color: #f5daaf;
    font-size: 16px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    white-space: nowrap
}


/* 섹션1 */
#section1 {
    width: 1400px;
    height: 800px;
    margin: 0 auto;
    padding-top: 183px;
    padding-bottom: 183px;
    position: relative;
}

#hank {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#section1 h1 {
    font-size: 32px;
    font-weight: bold;
    color: #3E290C;
    margin-bottom: 24px;
}


#section1 p {
    font-weight: 400;
    color: #3E290C;
    line-height: 54px;
    margin: 0 auto;
    max-width: 600px;
    margin-left: 514px;
}


/* 섹션2 */
#section2 {
    width: 1400px;
    height: 694px;
    margin: 0 auto;

}

#section2 .clothes {
    width: 684px;
    height: 684px;
    background-color: rgb(255, 6, 6);
    background-image: url(../img2/cdefdaeb35d44579c8c907513f49f89564cffd980f785b701e1c24745863.jpg.webp);
    float: left;
    border-radius: 30px;
}



#section2 .clothes .type {
    height: 125px;
    margin: 72px;
    color: #FFF7EB;
    cursor: pointer; 
}

#section2 .clothes .type h6 {
    font-size: 32px;
    font-weight: bold;
}

#section2 .clothes .type p {
    font-size: 64px;
    font-weight: 900;
    margin-top: 30px;
    font-family: "Nanum Myeongjo"
}

#clothes-content{
    width: 684px;
    height: 684px;
    border-radius: 30px;
    float: right;
    position: relative;
    overflow: hidden;
}
#clothes-content .cfh:not(:first-child){display:none;}

#section2 .cfh {
    width: 100%;
    height: 100%;
    position: absolute; top:0; left:0;
}

#section2 .cfh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(50%)
}

#section2 .cfh .type2 {
    height: 529px;
    width: 282px;
    position: absolute;
    right: 58px;
    top: 91px;
    z-index: 2;
    border-radius: 10px;

}

#section2 .cfh .type2 h6 {
    /* position: absolute;
    z-index: 3; */
    font-size: 32px;
    font-weight: bold;
    color: #FFF7EB;
    text-align: right;
}

#section2 .cfh .type2 p {
    /* position: relative;
    z-index: 3; */
    font-size: 24px;
    font-weight: 700;
    color: #FFF7EB;
    text-align: right;
    margin-top: 420px;
}


/* 섹션3 */
#section3 {
    width: 1400px;
    height: 1020px;
    margin: 0 auto;
    position: relative;
}

#kaka {
    text-align: center;
    margin-top: 147px;
    margin-bottom: 147px;
}

#section3 h3 {
    font-size: 32px;
    font-weight: bold;
    color: #3E290C;
    margin-bottom: 24px;
   
}

#section3 iframe {
    width: 1400px;
    height: 832px;
    margin-top: 107px;
    border-radius: 30px;
}

/* 섹션4 */
#section4 {
    width: 1400px;
    height: 328px;
    margin: 0 auto;
}

#section4 .marquee h3 {
    font-size: 96px;
    font-weight: bold;
    text-align: center;
    margin-top: 80px;

    /* 그라데이션 색상 적용 */
    background: linear-gradient(to bottom, #CFFF1F, #0B7203);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;}

  
        .marquee {
            white-space: nowrap;
            position: absolute;
            right: -100%;  /* 화면 밖에서 시작 */
            font-weight: bold;
            animation: marquee-animation 10s linear infinite;
        }


@keyframes marquee-animation {
    from {
        right: -100%;
    }
    to {
        right: 100%;
    }
}

/* 섹션5 */
#section5 {
    width: 1400px;
    height: 800px;
    margin: 0 auto;

    position: relative;
}

#section5 .photo {
    width: 331px;
    height: 331px;
    background-color: rgb(1, 51, 95);
    border-radius: 30px;
    position: absolute;
}
#section5 .photo img{width:100%;
height:100% ;  border-radius: 30px;}

#section5 .photo:nth-of-type(1) {
    top: 0;
    left: 0;
}

#section5 .photo:nth-of-type(2) {
    top: 0px;
    left: 360px;
}

#section5 .photo:nth-of-type(3) {
    top: 360px;
    left: 360px;
}

#section5 .photo:nth-of-type(4) {
    top: 360px;
    left: 1068px;
}