/* 언어설정 */
@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
/* font-family: "Pinyon Script", cursive; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
/* font-family: "Noto Sans KR", sans-serif; */





/* 전체설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
* {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

body {
    font-family: "Noto Sans KR", sans-serif;
}


.sub_title {
    font-family: "Pinyon Script", cursive;
    font-size: 60px;
    color: rgba(51, 51, 51, 0.1);
}







/* header 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.header {
    width: 100%;
    box-sizing: border-box;
    background-color: #E4A8A8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;

}


.header .gnb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px 20px;
    box-sizing: border-box;
}


.header .logo img {
    width: 100px;
    height: auto;
}


.header .menu ul {
    display: flex;
}

.header .menu ul li {
    margin: 0 40px;
}


.header .menu ul li a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
    transition: color 0.3s;
}

.header .menu ul li a:hover {
    font-weight: bold;
    color: #444C91;
}


.header .util ul {
    display: flex;
}

.header .util ul li {
    margin: 0 5px;
}

.header .util ul li a {
    font-size: 18px;
    color: #000;
    transition: color 0.3s;
}

.header .util ul li a:hover {
    color: #E56C4e;
}



/* wrap 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

#wrap {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;

}



/* main 섹션 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

.main {
    width: 100%;
    background-color: #000;
    position: relative;
    height: 100vh;
    overflow: hidden;

}

.main .txtBox {
    width: 80%;
    margin: 0 auto;
    color: #fff;
    padding: 200px;
    margin: 0 auto;
    max-width: 1440px;
}

.main .txtBox img {
    padding-bottom: 30px;
}

.main .txtBox h2 {
    font-size: 50px;
}

.main .txtBox p {
    font-size: 20px;
    padding-top: 30px;
}

.main .imgBox {
    position: absolute;
    right: -150px;
    width: 50%;
    height: 100vh;
    top: 0;
    overflow: visible;

}

.main .imgBox img {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.7s ease;
    z-index: 1;
}


.main .imgBox img:nth-child(2) {
    left: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
}



.main .imgBox .blur-circle {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background-color: #EACECA;
    filter: blur(160px);
    opacity: 0.5;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

.main .main_btn {
    color: #444C91;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 0;
    cursor: pointer;
    transition: transform 0.7s ease, left 0.7s ease;
    z-index: 1;
}


.main .main_btn:hover {
    color: #E56C4e;
    transform: scale(1.5);
}


.main.slide .imgBox img:nth-child(1) {
    transform: translateX(150%);
    opacity: 0;
}

.main.slide .imgBox img:nth-child(2) {
    opacity: 1;

}

.main.slide .main_btn {
    left: 100%;
    transform: translateX(-100%) scale(1);
}


.main .main_btn_back {
    color: #444C91;
    font-size: 30px;
    position: absolute;
    top: 50%;
    right: 0;
    cursor: pointer;
    transition: transform 0.7s ease, right 0.7s ease;
    z-index: 2;
    display: none;
    /* 처음에는 숨김 */
}

.main .main_btn_back:hover {
    color: #E56C4e;
    transform: scale(1.5);
}

/* slide 클래스일 때만 나타나게 */
.main.slide .main_btn_back {
    display: block;
}


/* 브랜드스토리 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.brand {
    width: 100%;
    height: 100vh;
    position: relative;
    margin: 120px auto;
    max-width: 1440px;

}

.brand>h2 {
    padding: 50px 0 50px 50px;
    font-size: 40px;
}

.brand .sub_title {
    position: absolute;
    top: 20px;
    left: 200px;
    font-family: "Pinyon Script", cursive;
    font-size: 60px;
    color: rgba(51, 51, 51, 0.1);
}

.brand>p {
    padding: 0 50px 100px 50px;
    font-size: 20px;
}

.brand ul {
    display: flex;
    width: 100%;
    height: 800px;
    margin-left: 60px
}

.brand ul li {
    height: 800px;
    width: 25%;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}

.brand ul li.visible {
    opacity: 1;
    transform: translateY(0);
}

.brand ul li:nth-child(1) {
    top: 0;

}

.brand ul li:nth-child(2) {
    top: 150px;

}

.brand ul li:nth-child(3) {
    top: 300px;

}

.brand ul li:nth-child(4) {
    top: 450px;

}


.brand ul li img {
    position: absolute;
    top: -10px;
    left: 25px;
}

.brand ul li .circle {
    width: 243px;
    height: 243px;
    border-radius: 50%;
}

.brand ul li:nth-child(1) .circle {
    background-color: #E4A8A8;
}

.brand ul li:nth-child(2) .circle {
    background-color: #EACECA;
}

.brand ul li:nth-child(3) .circle {
    background-color: #BCCCDC;
}

.brand ul li:nth-child(4) .circle {
    background-color: #A2A2A2;
}



.brand ul li h2 {
    text-decoration: underline;
    position: absolute;
    top: 20px;
    left: 60px;
    padding: 50px;
    font-size: 38px;
}

.brand ul li strong {
    display: inline-block;
    text-align: center;
    padding-top: 30px;
    padding-left: 30px;
}

.brand ul li p {
    position: absolute;
    text-align: center;
    padding-top: 15px;
}





/* 컬러섹션 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */


/* 기본적인 스타일 */
.spacer {
    margin-top: 400px;
}

/* 라인 애니메이션 요소 */
.line-wrapper-container {
    margin-top: 50px;
    /* 다른 요소들과의 간격을 조정 */
}

.line-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 200px;
    overflow: hidden;
}

/* 선의 애니메이션 기본 상태 */
.line {
    opacity: 0;
    transform: scaleX(0) scaleY(0.05);
    transform-origin: center top;
    transition: transform 0.5s ease-out, opacity 0.3s ease-out;
    max-width: 100%;
    height: auto;
}

/* 1단계: 중앙에서 좌우로 펼쳐지는 직선 */
.line.color-expand-x {
    opacity: 1;
    transform: scaleX(1) scaleY(0.05);
}

/* 2단계: 아래로 확장 */
.line.color-expand-y {
    transform: scaleX(1) scaleY(1);
    transition: transform 0.6s ease-in-out;
}

/* 콘텐츠 섹션 스타일 */
.line_content {
    text-align: center;
    margin-top: 100px;
}





/* 시그니처제품 설정 */
.sig {
    position: relative;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    margin: 0px auto;
    margin-bottom: 240px;
    max-width: 1440px;
}

.sig .sig_title h2 {
    padding: 50px 0 20px 50px;
    font-size: 40px;
}

.sig .sig_title .sub_title {
    position: absolute;
    top: 20px;
    left: 200px;
    font-family: "Pinyon Script", cursive;
    font-size: 60px;
    color: rgba(51, 51, 51, 0.1);
}

.sig .sig_title p {
    padding-left: 50px;
    padding-bottom: 100px;
    font-size: 20px;
}

.sig .list {
    display: flex;
    width: 100%;
    align-items: center;
}

.sig .list .liner {
    width: 2px;
    height: 800px;
    background: linear-gradient(to bottom,
            transparent,
            rgba(128, 128, 128, 0.8),
            rgba(128, 128, 128, 0.8),
            transparent);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.sig .list article {
    display: flex;
    flex-direction: column;
    width: 260px;
    height: 550px;
    position: relative;
    transition: all 0.8s ease;
    background-color: #EACECA;
    box-sizing: border-box;
    margin-right: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    top: 0;
    left: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* 이미지 튀어나오는 문제 방지 */
}

.sig .list article .num_box {
    width: 130px;
    text-align: right;
    padding: 20px 0px 20px 20px;
    margin-left: auto;
    font-size: 28px;
    transition: all 0.4s ease;
    /* 부드럽게 이동 */
}

.sig .list article .num_box h2 {
    font-size: 24px;
    background-color: #fff;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #444C91;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    padding-right: 10px;
    font-weight: 400;
}

.sig .list article .img_box {
    width: 90%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 이미지가 부모 박스를 벗어나지 않도록 */
    padding: 0 12px;
    cursor: pointer;
}

.sig .list article .img_box img {
    width: 250px;
    height: 250px;
    transition: transform 0.4s ease;
    object-fit: cover;
}

.sig .list article p {
    padding-top: 25px;
    padding-left: 10px;
    min-height: 72px;
}

.sig .list article .icon ul {
    display: flex;
    padding-top: 10px;
    justify-content: right;
    padding-right: 20px;
    padding-bottom: 10px;
}

.sig .list article .price {
    display: none;
    width: 100%;
    text-align: left;
    padding: 10px 0 0 0;
    font-size: 18px;
    font-weight: bold;
    color: #444;
}

/* 호버 시 스타일 */
.sig .list article:hover {
    width: 300px;
    /* 너무 크게 늘어나지 않도록 조절 */
}

.sig .list article:hover .num_box {
    margin-left: 30px;
}

.sig .list article:hover .num_box h2 {
    text-align: left;
    padding-left: 10px;
    font-weight: bold;
}

.sig .list article:hover .text_icon_row {
    display: block;
}

.sig .list article:hover .text_icon_row p {
    padding-left: 50px;
}

.sig .list article:hover .text_icon_row .icon {
    padding-right: 25px;
}

.sig .list article:hover .text_icon_row .icon ul li a:hover i {
    color: #E56C4E;
}

.sig .list article:hover .img_box {
    width: 100%;
    height: auto;
    padding: 30px 0;
    transform: scale(1.1);
    /* 너무 크게 확장되지 않도록 축소 */
}

.sig .list article:hover .price {
    display: block;
    padding-left: 50px;
    padding-bottom: 10px;
}





/* 비디오설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

/* .video {
    width: 100%;
    height: auto;
    margin: 0 auto;
} */

/* .video {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding-top: 200px;
}



.video img {
    width: 100%;
    
}
 */

.video {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    top: 50px;
    margin-top: 240px;
}

.video img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}





/* 추천제품 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.per {
    width: 100%;
    position: relative;
    top: 0;
    left: 50px;
    margin: 240px auto;
    max-width: 1440px;
}


.per>h2 {
    font-size: 40px;
    margin: 0 auto;
}

.per>.sub_title {
    position: absolute;
    top: -40px;
    left: 150px;
    font-family: "Pinyon Script", cursive;
    font-size: 60px;
    color: rgba(51, 51, 51, 0.1);
}




.per>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.per>ul>li {

    box-sizing: border-box;
    width: 18%;
    height: 300px;
    margin-top: 120px;
    margin-bottom: 30px;
    overflow: hidden;
    background-color: #fff;
    transform: skewY(-10deg);
    /* 사선으로 기울이기 */
    border: 5px solid #E4A8A8;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    /* 테두리, 그림자, 확대 애니메이션 */
    background: linear-gradient(45deg, #f7b731, #E56C4E);
    border-radius: 15px
}


.per>ul>li .img_box {
    width: 100%;
    height: 100%;
    /* 이미지 크기 고정 */
    overflow: hidden;
    position: relative;
    transition: opacity 0.5s ease;
    /* 이미지 사라짐 */
}

.per>ul>li .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 이미지 비율 유지 */
}


.per>ul>li:hover .img_box img {
    opacity: 0;
    /* 이미지 사라지게 하기 */
}


.per>ul>li .txt_box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    opacity: 0;
    /* 기본적으로 텍스트 숨김 */
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* 호버 시 텍스트 등장 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 텍스트 중앙 정렬 */
    align-items: center;
    /* 수평 중앙 정렬 */
    text-align: center;
    /* 텍스트 중앙 정렬 */
    border-radius: 12px;
}


.per>ul>li:hover .txt_box {
    opacity: 1;
    transform: translateY(0);
    /* 텍스트 부드럽게 나타나기 */
}


.per>ul>li .txt_box h3 {
    font-size: 20px;
    margin: 0;
    padding-bottom: 5px;
    color: #fff;
}


.per>ul>li .txt_box .pro-price {
    font-size: 22px;
    font-weight: bold;
    margin-top: 5px;
    color: #fff;
}


.per>ul>li .txt_box .ori-price {
    font-size: 16px;
    color: #aaa;
    text-decoration: line-through;
}


.per>ul>li .txt_box .discount-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin-top: 10px;
}

.per>ul>li .txt_box .disco {
    font-size: 24px;
    font-weight: bold;
    color: #E56C4E;
}


.per>ul>li:hover {
    transform: skewY(0deg) scale(1.05);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    border: 5px solid #E56C4E;
    background: linear-gradient(45deg, #E56C4E, #f7b731);
}



.per>ul>li:hover .txt_box h3,
.per>ul>li:hover .txt_box .pro-price {
    color: #fff;
}

.per>ul>li .img_box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 2;
}

.per>ul>li:hover .img_box::before {
    transform: translateX(100%);
}




/* 리뷰설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

.review {
    display: flex;
    background-color: #444C91;
    margin-top: 150px;
    margin-bottom: 200px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    margin: 120px auto;

}

.review .txt_box {
    width: 30%;
    color: #fff;
    margin: 130px 50px 250px 150px;
}

.review .txt_box h2 {
    font-size: 40px;
    margin: 0 auto;


}

.review .txt_box .sub_title {
    position: absolute;
    top: 95px;
    left: 400px;
    font-family: "Pinyon Script", cursive;
    font-size: 60px;
    color: #ffffff33;
}

.review .txt_box p {
    font-size: 20px;
    font-weight: 300;
    padding: 30px 0 80px 0;
}

.review .txt_box a {
    display: inline-block;
    width: 116px;
    /* height: 38px; */
    /* 높이값을 주면 텍스트가 조절이 안되므로 높이를 빼고 패딩값을 주는게 좋음 */
    padding: 7px;
    border-radius: 30px;
    background-color: #E56C4e;
    color: #fff;
    text-align: center;
}


.review .txt_box a:hover {
    background-color: #fff;
    color: #E56C4e;
    border: 2px solid #E56C4e;
    font-weight: bold;
}

.review .review_list {
    width: 70%;
    height: 570px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.review .review_list ul {
    display: flex;
    margin: 60px;

    height: 550px;
    position: absolute;
}

.review .review_list ul li {
    background-color: #fff;
    border: 1px solid #E56C4e;
    border-top-right-radius: 40px;
    padding: 40px;
    width: 230px;
    height: 570px;
    margin-right: 40px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.review .review_list ul:nth-child(1) {
    left: 0;
    animation: ani 40s linear infinite;
}

.review .review_list ul:nth-child(2) {
    left: 10px;
    animation: ani1 40s linear infinite;
}

.review .review_list:hover ul {
    animation-play-state: paused;
}

@keyframes ani {
    0% {
        left: 0;
    }

    100% {
        left: -1770px;
    }
}

@keyframes ani1 {
    0% {
        left: 1770px;
    }

    100% {
        left: 0;
    }
}








.review .review_list ul li .writer {
    display: flex;
    padding-bottom: 10px;
}

.review .review_list ul li .writer strong {
    color: #E56C4e;
    /* 기존 txt_box 버튼 컬러와 동일하게 */
    font-weight: 700;
}

.review .review_list ul li .writer .id {
    padding-left: 10px;
    color: #666;
    font-weight: bold;
}

.review .review_list ul li img {
    width: 230px;
    height: 230px;

    border-radius: 10px;
    object-fit: cover;
}


.review .review_list ul li .score {
    display: flex;

}

.review .review_list ul li .score .num {
    padding-right: 10px;
    font-size: 14px;

}

.review .review_list ul li .score .star {
    color: #FFBA57;
    font-size: 14px;
}


.review .review_list ul li .content {}

.review .review_list ul li .content h3 {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.review .review_list ul li .content p {
    font-size: 12px;
}


/* 이벤트 섹션 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ  */
.event {
    width: 100%;
    height: 100vh;
    position: relative;
    left: 0;
    top: 0;
    margin: 120px auto;
    max-width: 1440px;
}

.event .txt_box {
    margin-left: 60px;
    margin-bottom: 60px;
}

.event .txt_box h2 {
    font-size: 40px;

}

.event .txt_box .sub_title {
    position: absolute;
    top: -35px;
    left: 250px;
    font-family: "Pinyon Script", cursive;
    font-size: 60px;
    color: rgba(51, 51, 51, 0.1);

}

.event .txt_box p {
    padding-top: 20px;
}



.event .list_box {
    display: flex;
    width: 100%;
    margin-left: 60px;
}

.event .list_box .levent {}

.event .list_box .levent .event_01 {
    background-image: url(img/event/event_01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 712px;
    height: 650px;
    color: #fff;
    text-align: center;
    margin-right: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.event .list_box .levent .event_01 .txt_01 {
    padding: 20px;
}

.event .list_box .levent .event_01 .txt_01 h3 {
    font-size: 36px;
}

.event .list_box .levent .event_01 .txt_01 p {
    font-size: 20px;
    font-weight: normal;
    padding-top: 20px;
    padding-bottom: 25px;
}

.event .list_box .levent .event_01 .txt_01 p strong {}

.event .list_box .levent .event_01 .txt_01 a {
    display: inline-block;
    width: 217px;
    /* height: 38px; */
    /* 높이값을 주면 텍스트가 조절이 안되므로 높이를 빼고 패딩값을 주는게 좋음 */
    padding: 7px;
    border-radius: 30px;
    background-color: #E56C4e;
    color: #fff;
    text-align: center;
    margin-top: 20px;

}

.event .list_box .levent .event_01 .txt_01 a:hover {
    background-color: #fff;
    color: #E56C4e;
    border: 2px solid #E56C4e;
    font-weight: bold;
}



.event .list_box .revent {
    width: 50%;
    display: block;
}

.event .list_box .revent .event_02 {
    width: 100%;
    max-width: 712px;
    height: 317px;
    background-image: url(img/event/event_02.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
    text-align: center;
    margin-bottom: 16px;
}

.event .list_box .revent .event_02 .txt_02 {
    padding-top: 80px;
}

.event .list_box .revent .event_02 .txt_02 h3 {
    font-size: 28px;
}

.event .list_box .revent .event_02 .txt_02 p {
    font-size: 18px;
    padding-top: 20px;
    padding-bottom: 25px;
    font-weight: normal;
}

.event .list_box .revent .event_02 .txt_02 p strong {}

.event .list_box .revent .event_02 .txt_02 a {
    display: inline-block;
    width: 217px;
    /* height: 38px; */
    /* 높이값을 주면 텍스트가 조절이 안되므로 높이를 빼고 패딩값을 주는게 좋음 */
    padding: 7px;
    border-radius: 30px;
    background-color: #E56C4e;
    color: #fff;
    text-align: center;

}

.event .list_box .revent .event_02 .txt_02 a:hover {
    background-color: #fff;
    color: #E56C4e;
    border: 2px solid #E56C4e;
    font-weight: bold;
}



.event .list_box .revent .event_03 {
    width: 712px;
    height: 317px;
    background-image: url(img/event/event_03.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #fff;
    text-align: center;

}

.event .list_box .revent .event_03 .txt_03 {
    padding-top: 60px;
}

.event .list_box .revent .event_03 .txt_03 h3 {
    font-size: 28px;
}

.event .list_box .revent .event_03 .txt_03 p {
    font-size: 18px;
    padding-top: 20px;
    padding-bottom: 25px;
    font-weight: normal;
}

.event .list_box .revent .event_03 .txt_03 p strong {}

.event .list_box .revent .event_03 .txt_03 a {
    display: inline-block;
    width: 217px;
    /* height: 38px; */
    /* 높이값을 주면 텍스트가 조절이 안되므로 높이를 빼고 패딩값을 주는게 좋음 */
    padding: 7px;
    border-radius: 30px;
    background-color: #E56C4e;
    color: #fff;
    text-align: center;
}

.event .list_box .revent .event_03 .txt_03 a:hover {
    background-color: #fff;
    color: #E56C4e;
    border: 2px solid #E56C4e;
    font-weight: bold;
}



@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 공통 애니메이션 */
.event_01,
.event_02,
.event_03 {
    opacity: 0;
    animation-name: fadeDown;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

/* 순차적으로 딜레이 줘서 하나씩 등장 */
.event_01 {
    animation-delay: 0.4s;
}

.event_02 {
    animation-delay: 0.8s;
}

.event_03 {
    animation-delay: 1.2s;
}

/* show 클래스 추가 - 스크롤 시 이 클래스를 추가하여 애니메이션을 트리거 */
.event_01.show,
.event_02.show,
.event_03.show {
    opacity: 1;
    transform: translateY(0);
}



/* 고객지원설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.support {
    width: 100%;
    height: auto;
    background-image: url(img/etc/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}

.support .txt_box {
    text-align: center;
}

.support .txt_box h2 {
    font-size: 40px;
}


.support .list_box {}

.support .list_box ul {
    display: flex;
    padding: 30px;
}

.support .list_box ul li {
    border: 1px solid #e0e0e0;
    width: 20%;
    margin: 30px;
    padding: 40px;
}

.support .list_box ul li:nth-child(1):hover {
    box-shadow: 0 0 30px 0 #E4A8A8;
    transform: translateY(-5px);
    transition: all 0.5s;
    border: none;
}

.support .list_box ul li:nth-child(2):hover {
    box-shadow: 0 0 30px 0 #E56C4E;
    transform: translateY(-5px);
    transition: all 0.5s;
    border: none;
}

.support .list_box ul li:nth-child(3):hover {
    box-shadow: 0 0 30px 0 #444C91;
    transform: translateY(-5px);
    transition: all 0.5s;
    border: none;
}

.support .list_box ul li:nth-child(4):hover {
    box-shadow: 0 0 30px 0 #161616;
    transform: translateY(-5px);
    transition: all 0.5s;
    border: none;
}

.support .list_box ul li .title {
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
}

.support .list_box ul li .title h4 {
    font-size: 20px;
}

.support .list_box ul li .title a {}

.support .list_box ul li .title a:hover {
    color: #E56C4E;
    transform: translateY(-3px) scale(1.03);
}




.support .list_box ul li p {
    font-size: 12px;
}






/* 푸터설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
footer {
    background-color: #000;
    width: 100%;
    height: 200px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
}

footer .footer_txt {
    padding: 70px;
}




/* 탑버튼 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

#topBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none;
    background-color: #444C91;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;
}

#topBtn:hover {
    background-color: #E56C4e;
}







/* 장바구니설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.shopping {
    width: 350px;
    height: 92%;
    position: fixed;
    z-index: 999;
    right: -350px;
    top: 8%;
    background-color: #fff;
    color: #333333;
    transition: all 0.8s;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.shopping.on {
    right: 0;
}

.shopping .icon {
    width: 60px;
    height: 60px;
    background-color: #444C91;
    color: #fff;
    position: absolute;
    left: -60px;
    top: 100px;
    font-size: 28px;
    text-align: center;
    line-height: 2;
    cursor: pointer;
    border-radius: 50px;
}

.shopping .icon span {
    position: absolute;
    font-size: 12px;
    background-color: #ffff;
    color: #303030;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    right: 0px;
    top: 5px;
}




.shopping .cart_page .title {
    display: flex;
    justify-content: space-evenly;
}

.shopping .cart_page .cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.shopping .cart_page .cart-header .market {
    display: flex;
    align-items: center;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.shopping .cart_page .cart-header .close-btn {
    cursor: pointer;
    font-size: 20px;
    color: #333;
    flex-direction: column;
}



.shopping .cart_page .line {
    border: 1px solid #cfcfcf;
    margin: 20px;
    width: 300px;
    height: auto;
}


.shopping .cart_page .total-section {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.shopping .cart_page .cart-table {
    display: flex;
    border: 1px solid #ddd;
    width: 330px;
    height: 400px;
    margin-left: 20px;
}




.shopping .btn-group {
    display: flex;
    justify-content: space-evenly;
}





.shopping .btn-group .btn-delete {
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 5px;
    color: #333;
    width: 150px;
    padding: 5px;
    font-size: 18px;
    cursor: pointer;
}

.shopping .btn-group .btn-pay {
    border: 1px solid #E56C4E;
    background-color: #E56C4E;
    border-radius: 5px;
    color: #fff;
    width: 150px;
    padding: 5px;
    font-size: 18px;
    cursor: pointer;
}


.shopping .btn-group .btn-delete:hover {
    background-color: #ddd;
    color: #000;
    cursor: pointer;
    border: 1px solid #ddd;
}


.shopping .btn-group .btn-pay:hover {
    background-color: #fff;
    color: #E56C4E;
    font-weight: bold;
    cursor: pointer;
}




/* 서브페이지01설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ  */
#sub01 {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 80px;
    display: none;
}



/* 서브페이지02 로그인창 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
#sub02 {
    background-image: url(img/login/background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: none;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
    color: #333;
    z-index: 1;
}

#sub02 .login_box {
    background-color: #fff;
    width: 500px;
    height: 600px;
    border: 1px solid #ddd;
    margin: 10% auto;
    padding: 60px 50px 40px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#sub02 .login_box .login_logo img {
    width: 102px;
    height: 40px;
    margin-bottom: 50px;
    cursor: pointer;
}

#sub02 .login_box .login_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#sub02 .login_box .login_form input[type="text"],
#sub02 .login_box .login_form input[type="password"] {
    width: 400px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-bottom: 15px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

#sub02 .login_box .login_form input[type="text"]:focus,
#sub02 .login_box .login_form input[type="password"]:focus {
    border-color: #db9b9b;
}

#sub02 .login_box .login_form .login_btn {
    width: 400px;
    height: 36px;
    background-color: #db9b9b;
    border: none;
    border-radius: 18px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

#sub02 .login_box .login_form .login_btn:hover {
    background-color: #c78b8b;
}

#sub02 .login_box .login_form .links {
    width: 400px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 30px;
}

#sub02 .login_box .login_form .links a {
    color: #666;
    text-decoration: none;
}

#sub02 .login_box .login_form .naver_login_btn {
    width: 400px;
    height: 36px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

#sub02 .login_box .login_form .naver_login_btn img {
    width: 18px;
    height: 18px;
}



/* 네이버로그인 설정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
#naver_id_login {
    position: fixed;
    top: 50%;
}







/* 전체사이즈 설정 */




/* 전체사이즈설정 */
/* body {max-width: 1440px;
  margin: 0 auto;} */