@charset "utf-8";
@import url("font.css");

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
img {
    vertical-align: top;
}


@keyframes floating {
        0% {
            transform:translateY(0);
        }
        50% {
            transform:translateY(-10px);
        }
        100% {
            transform:translateY(0);
        }
    }
@keyframes banner-scale {
    0% {
        scale: 1.5;
    }
    100% {
        scale: 1;
    }
}
@keyframes text-ani {
    0% {
        transform: translateY(300px);
        visibility: hidden;
    }
    100% {
        transform: translateY(0);
        visibility: visible;
    }
}
@keyframes text-ani-btn {
    0% {
        transform: translateY(50px);
        visibility: hidden;
    }
    100% {
        transform: translateY(0);
        visibility: visible;
    }
}
@keyframes slideRight {
  from {
    left: 100%;
    opacity: 0;
  }
  to {
    left: 50%;
    opacity: 1;
  }
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes img1show{
    0%{
        opacity: 0;
        right: 0%;
    }
    10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 36%;
    }
}
@keyframes img2show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 28%;
    }
}
@keyframes img2showmb{
    0%{
        opacity: 0;
        right: -50%;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 17%;
    }
}
@keyframes img3show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 18%;
    }
}
@keyframes img3showmb {
    0%{
        opacity: 0;
        right: -50%;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 0%;
    }
}
@keyframes img4show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 22%;
    }
}
@keyframes img4showmb{
    0%{
        opacity: 0;
        right: -50%;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 0%;
    }
}
@keyframes img5show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 37%;
    }
    
}
@keyframes img6show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 15%;
    }
}
@keyframes img6showmb{
    0%{
        opacity: 0;
        right: -50%;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: -10%;
    }
}
@keyframes img7show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 15%;
    }
}
@keyframes img7showmb{
    0%{
        opacity: 0;
        right: -50%;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: -10%;
    }
}
@keyframes img8show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 38%;
    }
}
@keyframes img9show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 29%;
    }
}
@keyframes img10show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 42%;
    }
}
@keyframes img11show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 20%;
    }
}
@keyframes img11showmb{
    0%{
        opacity: 0;
        right: -50%;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: -10%;
    }
}
@keyframes img12show{
    0%{
        opacity: 0;
        right: 0;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 23%;
    }
}
@keyframes img12showmb{
    0%{
        opacity: 0;
        right: -50%;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        right: 5%;
    }
}

/* common */
.container {
    max-width: 1680px;
    margin: 0 auto;
    position: relative;
}
.section {
    padding: 100px 0;
}
/* typo */
h2 {
    font-family: 'paperlogyBold';
    font-weight: 700;
    font-size: 120px;
}
h3 {
    font-family: 'pretendardBold';
    font-weight: 700;
    font-size: 44px;
}
p {
    font-family: 'pretendardMedium';
    font-weight: 500;
    font-size: 24px;
}
p.small {
    font-family: 'pretendardRegular';
    font-weight: 400;
    font-size: 14px;
    color: #555;
}
body {
    font-family: 'pretendardRegular';
}
/* mobile menu */
.mb-menu {
    padding: 30px !important;
}
.mb-menu .mb-menu-title {}
.mb-menu .mb-main-menu {}
.mb-menu .mb-main-menu > li {}
.mb-menu .mb-main-menu li a {}
.mb-menu .mb-main-menu li a span {}
.mb-menu .mb-main-menu .mb-submenu {}
.mb-menu .mb-main-menu .mb-submenu li {}
.mb-menu .mb-main-menu .mb-submenu li a {
    font-size: 18px !important;
    padding: 0 0 10px 20px;
}

/* header */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
    transition: all .5s;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0px 4px 5px rgba(0,0,0,0.1);
}
header.down {
    height: 430px;
} 
header .container {}
header .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .top h1.logo {
    width: 240px;
    line-height: 100px;
    padding: 0 20px 0 25px;
}
header .top h1.logo a {
    display: block;
    width: 100%;
}
header .top h1.logo img {
    margin-top: 30px;
    width: 100%;
}
header .top nav {
    display: flex;
    /* padding: 0 20px; */
}
header .top nav .nav-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 60px;
}
header .top nav .nav-wrap > li {}
header .top nav .nav-small {
    display: flex;
    gap: 20px;
    margin-left: 80px;
    position: relative;
}
header .top nav .nav-small .search {
    position: absolute;
    top: 20%;
    left: -35px;
    color: #777;
}
.search-input{}
header .top nav .nav-small .search.active {
    
}
header .top nav .nav-small .search span {
    font-size: 20px;
}

header .top nav .nav-small a.small {
    font-size: 15px;
    color: #777;
    margin-top: 5px;
    white-space: nowrap;
}
header .top nav .nav-wrap > li.nav_product span {
    font-size: 20px;
    position: absolute;
    top: 50%;
    transform: rotate(90deg) translateX(-50%);
}
header.down .top nav .nav-wrap > li.nav_product span {
    top: 50%;
    transform: rotate(270deg) translateX(50%);
}
header .top nav .nav-wrap > li .nav_title {
    font-size: 20px;
    white-space: nowrap;
    padding: 35px 0;
    transition: all .5s linear;
}
header .top nav .nav-wrap > li:hover .nav_title {
    opacity: 0.7;
}
header .top nav .nav-wrap > li .product_all {
    position: absolute;
    bottom: -20px;
    left: 15%;
    z-index: 1000;
    font-size: 18px;
    font-family: 'pretendardMedium';
}
header .top nav .nav-wrap > li .depth1 {
    display: flex;
    gap: 100px;
    position: absolute;
    top: 100px;
    left: 15%;
    z-index: 100;
    padding: 50px 650px 0 0;
}
header .top nav .nav-wrap > li .depth1 > li {}
header .top nav .nav-wrap > li .depth1 > li .nav_subtitle {
    font-size: 18px;
    font-weight: 500;
}
header .top nav .nav-wrap > li .depth1 > li .depth2 {
    margin-top: 20px;
}
header .top nav .nav-wrap > li .depth1 > li .depth2 > li {
    padding: 10px 0;
}
header .top nav .nav-wrap > li .depth1 > li .depth2 > li a {
    font-size: 16px;
}
header .top .nav_right {
    position: absolute;
    bottom: -300px;
    right: 10%;
}
header .top nav .nav_img {
    width: 406px;
    /* height: 200px; */
    object-fit: cover;
    overflow: hidden;
    z-index: 1000;
}
header .top nav .nav_img a {}
header .top nav .nav_img a img {
    width: 100%;
}
header .top nav .nav_right p {
    padding: 10px 0;
    font-size: 18px;
    font-weight: 500;
}
/* menuBtn */
header .menuBtn {
    display: none;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 30px;
    left: 30px;
}
header .menuBtn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    left: 0;
}
header .menuBtn span:nth-child(1){top: 2px;}
header .menuBtn span:nth-child(2){top: 9px;}
header .menuBtn span:nth-child(3){top: 16px;}
/* mobile search */
header .mb-search {
    display: none;
    
}
header .mb-search span {
    display: block;
    font-size: 28px;
    position: absolute;
    top: 30px;
    right: 20px;
}

.mb-menu {
    position: fixed;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    padding: 22px 3%;
    overflow-y: auto;
    transition: left 0.3s linear;
}
.mb-menu.active {
    left: 0;
}
.mb-menu .mb-menu-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
}
.mb-menu .mb-menu-title .mb-logo {}
.mb-menu .mb-menu-title .mb-logo a {
    display: block;
    width: 180px;
}
.mb-menu .mb-menu-title .mb-logo a img {
    width: 100%;
}

.mb-menu .mb-menu-title .mb-btn-close {
    display: block;
    width: 30px;
    height: 30px;
}
.mb-menu .mb-menu-title .mb-btn-close span {
    font-size: 30px;
    color: #222;
}
.mb-menu .mb-main-menu {}
.mb-menu .mb-main-menu > li {}
.mb-menu .mb-main-menu > li .mb-menu-list {
    display: block;
    padding: 15px 0;
    font-size: 20px;
    color: #222;
    font-weight: 700;
    width: 100%;
    position: relative;
}
.mb-menu .mb-main-menu > li .mb-menu-list span {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    color: #333;
    font-size: 30px;
    transition: all .3s linear;
}
.mb-menu .mb-main-menu > li .mb-menu-list.active span {
    transform: translateY(-50%) rotate(180deg);
    color: #078F00;
}
.mb-menu .mb-main-menu > li .mb-submenu {
    padding-bottom: 20px;
    display: none;
}
.mb-menu .mb-main-menu > li .mb-submenu li {
    padding: 8px 0;
}
.mb-menu .mb-main-menu > li .mb-submenu li a {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.466667px;
}
/* main */
/* visual */
.visual {
    position: relative;
    margin-top: 100px;
}
.visual .sw-visual {
    width: 100%;
}
.visual .sw-visual .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.visual .sw-visual .swiper-slide .visual-banner {
    width: 100%;
    height: 100%;
}
.visual .sw-visual .swiper-slide-active .visual-banner {}
.visual .sw-visual .swiper-slide .visual-banner img {
    max-width: 100%;
    /* height: 100%; */
    /* object-fit: cover; */
    animation: banner-scale 1000ms linear;
}
.visual .sw-visual .swiper-slide .visual-banner-mb {
    display: none;
    width: 100%;
}
.visual .sw-visual .swiper-slide .visual-banner-mb img {
    width: 100%;
}
.visual .btn-wrap {
    overflow: hidden;
    position: absolute;
    bottom: 25%;
    left: 6%;
}
.visual .detail-btn {
    display: inline-block;
    width: 127px;
    height: 45px;
    line-height: 45px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 30px;
    z-index: 1000;  
    padding: 0 25px 0 15px;
    background-color: rgba(255,255,255,0.3);
    transition: all .5s;
    white-space: nowrap;
    font-size: 16px;
    transform: translateY(100%);  
}
.visual .sw-visual .swiper-slide-active .detail-btn {
    animation: text-ani-btn 1000ms ease-in-out forwards;
    animation-delay: 1.5s;
}
.visual .detail-btn:hover {
    border: 1px solid transparent;
    background-color: rgba(255,255,255,1);
}
.visual .detail-btn span {
    font-size: 18px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}
.visual .visual-txt {
    position: absolute;
    top: 13.5%;
    left: 120px;
    overflow: hidden;
}
.visual .visual-txt .visual-title {
    font-family: 'PaperlogyBold';
    font-size: 96px;
    z-index: 1000;
    line-height: 87px;
    overflow: hidden;
}
.visual .visual-txt .visual-desc {
    margin-top: 10%;
    font-family: 'PaperlogyRegular';
    font-weight: 400;
    font-size: 28px;
    color: #444;
    transform: translateY(1000%);
}

.visual .sw-visual .swiper-slide-active .visual-desc {
    animation: text-ani 1000ms ease-in-out forwards;
    animation-delay: 1.5s;
}
.visual .visual-txt .visual-title .greentea {
    color: #95e64c;
    transform: translateY(100%);

} 
.visual .sw-visual .swiper-slide-active .greentea {
    animation: text-ani 1000ms ease-in-out forwards;
    transform: translateY(100%);
}
.visual .visual-txt .visual-title .white {
    color: #fff;
    transform: translateY(100%);
}
.visual .sw-visual .swiper-slide-active .white {
    animation: text-ani 1000ms ease-in-out forwards;
    animation-delay: 0.5s;
}
.visual .visual-txt .visual-title .cherry {
    color: #f7b6c8;
    transform: translateY(100%);
}
.visual .sw-visual .swiper-slide-active .cherry {
    animation: text-ani 1000ms ease-in-out forwards;
    animation-delay: .5s;
}
.visual .visual-txt .visual-title .retinol {
    color: #61ddfe;
    transform: translateY(100%);
}
.visual .sw-visual .swiper-slide-active .retinol {
    animation: text-ani 1000ms ease-in-out forwards;
    animation-delay: .5s;
}
.visual .swiper-pagination-progressbar {
    position: absolute;
    top: auto;
    bottom: 15%;
    left: 120px;
    width: 450px;
    background-color: #fff;
    z-index: 100;
}
.visual .swiper-pagination-progressbar-fill {
    background-color: #3b961d;
}

.visual .scroll-btn {
    z-index: 1000;
    position: absolute;
    bottom: 13.5%;
    left: 600px;
}
.visual .scroll-btn span {
    color: #fff;
    font-size: 20px;
}
.visual .scroll-btn.play {
    display: none;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.visual .swiper-button-prev,
.visual .swiper-button-next {
    color: #fff;
    transition: all .3s linear;
}

.visual .swiper-button-prev:hover,
.visual .swiper-button-next:hover {
    color: #078F00;
}
.visual .scrolldown-btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}
.visual .scrolldown-btn a {}
.visual .scrolldown-btn a span {
    font-size: 30px;
    color: #fff;
    transition: all .2s linear;
}
.visual .scrolldown-btn a:hover span {
    opacity: 0.5;
}


/* holiday */
.holiday {}
.holiday .sw-holiday {
    width: 100%;
}
.holiday .sw-holiday .swiper-slide {
    position: relative;
}
.holiday .sw-holiday .swiper-slide .holiday-txt {
    position: absolute;
    top: 15%;
    left: 15%;
}
.holiday .sw-holiday .swiper-slide .holiday-txt h2 {
    line-height: 100px;
    font-size: 80px;
}
.holiday .sw-holiday .swiper-slide .holiday-txt p {
    margin-top: 50px;
    font-family: 'PaperlogyBold';
}
.holiday .sw-holiday .swiper-slide .holiday-txt.green {
    color: #078F00;
}
.holiday .sw-holiday .swiper-slide .holiday-txt.pink {
    color: #FF217F;
}
.holiday .sw-holiday .swiper-slide .subpackage {
    width: 350px;
    position: absolute;
    top: 50%;
    left: 18%;
    opacity: 0;
}
.holiday .sw-holiday .swiper-slide .subpackage img {
    width: 100%;
}
.holiday .sw-holiday .swiper-slide-active .subpackage {
    animation: fade 1s linear forwards;
    animation-delay: 0.5s;
}
.holiday .sw-holiday .swiper-slide .package {
    position: relative;
    
}
.holiday .sw-holiday .swiper-slide .package img {
    position: absolute;
}
.holiday .sw-holiday .swiper-slide .package img.pack1 {
    width: 230px;
    bottom: 520px;
    right: 36%;
}
.holiday .sw-holiday .swiper-slide-active img.pack1 {
    animation: img1show 2000ms,
               floating 3000ms infinite;

}
.holiday .sw-holiday .swiper-slide .package img.pack2 {
    width: 250px;
    bottom: 300px;
    right: 28%;
    z-index: 100;

}
.holiday .sw-holiday .swiper-slide-active .package img.pack2 {
    animation: img2show 3000ms,
               floating 4000ms infinite;
}
.holiday .sw-holiday .swiper-slide .package img.pack3 {
    width: 220px;
    bottom: 440px;
    right: 18%;
    z-index: 10;

}
.holiday .sw-holiday .swiper-slide-active .package img.pack3 {
    animation: img3show 2500ms,
               floating 2500ms infinite;
}
.holiday .sw-holiday .swiper-slide .package img.pack4 {
    width: 255px;
    bottom: 120px;
    right: 22%;
    z-index: 10;
}
.holiday .sw-holiday .swiper-slide-active .package img.pack4 {
     animation: img4show 3300ms,
                floating 2500ms infinite;
}
.holiday .sw-holiday .swiper-slide .package img.pack5 {
    width: 300px;
    bottom: 90px;
    right: 37%;
}
.holiday .sw-holiday .swiper-slide-active .package img.pack5 {
    animation: img5show 2200ms,
               floating 3500ms infinite;
}
.holiday .sw-holiday .swiper-slide .package img.pack6 {
    width: 290px;
    bottom: 300px;
    right: 15%;
    transform: rotate(-20deg);
}
.holiday .sw-holiday .swiper-slide-active .package img.pack6 {
    animation: img6show 2900ms,
               floating 2700ms infinite;    
}


.holiday .sw-holiday .swiper-slide .package img.pack7 {
    width: 165px;
    bottom: 220px;
    right: 15%;
}
.holiday .sw-holiday .swiper-slide-active .package img.pack7 {
    animation: img7show 3100ms,
               floating 3300ms infinite;
}
.holiday .sw-holiday .swiper-slide .package img.pack8 {
    width: 85px;
    bottom: 100px;
    right: 38%;
}
.holiday .sw-holiday .swiper-slide-active .package img.pack8 {
    animation: img8show 2500ms, 
               floating 3200ms infinite;
}
.holiday .sw-holiday .swiper-slide .package img.pack9 {
    width: 75px;
    bottom: 650px;
    right: 29%;
}
.holiday .sw-holiday .swiper-slide-active .package img.pack9 {
    animation: img9show 2300ms,
               floating 3500ms infinite;
}
.holiday .sw-holiday .swiper-slide .package img.pack10 {
    width: 248px;
    bottom: 20px;
    right: 42%;
}
.holiday .sw-holiday .swiper-slide-active .package img.pack10 {
    animation: img10show 2600ms,
               floating 3300ms infinite;
}
.holiday .sw-holiday .swiper-slide .package img.pack11 {
    width: 200px;
    bottom: 480px;
    right: 20%;
    z-index: 10;
}
.holiday .sw-holiday .swiper-slide-active .package img.pack11 {
    animation: img11show 2800ms,
               floating 3600ms infinite;
}
.holiday .sw-holiday .swiper-slide .package img.pack12 {
    width: 540px;
    bottom: 80px;
    right: 23%;
}
.holiday .sw-holiday .swiper-slide-active .package img.pack12 {
    animation: img12show 2600ms,
               floating 3800ms infinite;
}




/* product */
.product {}
.product .sw-product-wrap {
    display: flex;
}
.product .sw-product {
    width: 100%;
}
.product .sw-product .swiper-slide {
    width: 50%;
}
.product .sw-product .swiper-slide img {
    width: 100%;
    object-fit: cover;
}
.product .sw-product.left-slide {
    position: relative;
    overflow: hidden;
}
.product .sw-product.left-slide h2 {
    position: absolute;
    bottom: 15%;
    left: 120px;
    font-size: 80px;
    line-height: 80px;
    color: #fff;
}
.product .sw-product .swiper-slide-active h2 {
    animation: text-ani 1000ms ease-in-out forwards;
}
.product .sw-product.right-slide {
    position: relative;
}
.product .sw-product.right-slide .right-text {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}
.product .sw-product.right-slide .right-text h3 {
    color: #333;
}
.product .sw-product.right-slide .right-text p {
    margin-top: 50px;
    color: #333;
}
.product .sw-product.right-slide .btn-wrap {
    display: flex;
}
.product .sw-product.right-slide .product-btn {
    position: absolute;
    bottom: 7.8%;
    left: 59%;
    z-index: 100;
}
.product .sw-product.right-slide .product-btn span {
    color: #3b961d;
    font-size: 22px;
}
.product .sw-product.right-slide .product-btn.play {
    display: none;
}
/* progress pagination */
.sw-product .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 8%;
}

.sw-product .swiper-pagination .swiper-pagination-bullet {
    background: transparent;
    width: 28px;
    height: 28px;
    font-size: 16px;
    opacity: 1;
    border: none;
    margin: 0 8px;
}
.sw-product .swiper-pagination .swiper-pagination-bullet svg {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.sw-product .swiper-pagination .fp-arc-loader {
  width: 16px;
  height: 16px;
}

.sw-product .swiper-pagination .path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;   
}

/* 2) 활성화 시 6초 동안 dashoffset 을 0까지 줄이는 애니메이션 */
.sw-product .swiper-pagination-bullet.swiper-pagination-bullet-active .path {
  animation: progress 6s linear forwards;
}
@keyframes progress {
    from {stroke-dashoffset: 50;}
    to {stroke-dashoffset: 0;}
}

/* new & bestseller */
.swiper-slide {
    position: relative;
}

.new .swiper-slide .swiper-hover {
    display: none;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    transition: all .3s linear;
}
.bestseller .swiper-slide .swiper-hover {
    display: none;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    transition: all .3s linear;
}
.swiper-slide .swiper-hover span {
    color: #078F00;
    padding: 7.5px 15px;
    margin: 7.5px 0;
    font-size: 30px;
}
.swiper-slide .swiper-hover span:first-child {
    border-right: 1px solid #ddd;
}
.swiper-slide:hover .swiper-hover {
    display: block;
}
.swiper-slide:hover .new-img,
.swiper-slide:hover .best-img {
    opacity: 0.5;
}

.swiper-slide a > p {
    text-align: center;
    margin: 30px 0;
    white-space: nowrap;
    color: #333;
}
.new-txt {
    display: block;
    /* width: 200px; */
}
.swiper-slide a .price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'pretendardMedium';
    white-space: nowrap;
    padding: 0 40px;
}
.swiper-slide a .price .price1 {
    font-size: 24px;
    color: #777;
    text-decoration: line-through;
}
.swiper-slide a .price .price2 {
    font-size: 32px;
    color: #FB6C39;
}
.swiper-slide a .star {
    display: flex;
    margin-left: 10%;
}
.swiper-slide a .star span.material-symbols-outlined {
    font-size: 20px;
}
.swiper-slide a .star span:last-child {
    margin-left: 5px;
    color: #999;
    font-size: 16px;
}
/* new */
.new {}
.new .container {
    position: relative;
}
.new h3 {
    color: #2E601D;
}
.new .sw-new {
}
.new .sw-new .swiper-slide {}
.new .sw-new .swiper-slide a {}
.new .sw-new .swiper-slide a .new-img {
    max-width: 325px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 10px;
}
.new .sw-new .swiper-slide a .new-img img {
    width: 100%;
    transition: all .3s linear;
}

.new .swiper-button-prev,
.new .swiper-button-next {
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .5s;
}
.new .swiper-button-prev {
    left: 10px;
}
.new .swiper-button-next {
    right: 10px;
}
.new .swiper-button-prev::after,
.new .swiper-button-next::after {
    font-size: 30px;
}
.new .swiper-button-prev:hover,
.new .swiper-button-next:hover {
    color: #078F00;
} 
/* bestseller */ 
.bestseller {}
.bestseller .container {}
.bestseller h3 {
    color: #2E601D;
}
.bestseller .sw-best {}
.bestseller .sw-best .swiper-slide {}
.bestseller .sw-best .swiper-slide a {}
.bestseller .sw-best .swiper-slide a .best-img {
    max-width: 404px;
    border-radius: 20px;
    margin: 0 10px;
    overflow: hidden;
}

.bestseller .sw-best .swiper-slide a .best-img img {
    width: 100%;
}
.bestseller .sw-best .swiper-slide a:hover .best-img img {
}
.bestseller .sw-best .swiper-slide a .price {}
.bestseller .sw-best .swiper-slide a .price .price1 {}
.bestseller .sw-best .swiper-slide a .price .price2 {}

.bestseller .sw-best .swiper-slide a .best-price .star .span {}

.bestseller .swiper-button-prev,
.bestseller .swiper-button-next {
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .5s;
}
.bestseller .swiper-button-prev {
    left: 10px;
}
.bestseller .swiper-button-next {
    right: 10px;
}
.bestseller .swiper-button-prev::after,
.bestseller .swiper-button-next::after {
    font-size: 30px;
}
.bestseller .swiper-button-prev:hover,
.bestseller .swiper-button-next:hover {
    color: #078F00;
}

/* event */
.event {}
.event .container {}
.event h3 {
    color: #2E601D;
}
.event .sw-event {}
.event .sw-event .swiper-slide {
    max-width: 400px;
    padding: 0px 10px;
}
.event .sw-event .swiper-slide a {
    width: 100%;
    height: 100%;
}
.event .sw-event .swiper-slide.vertical a:first-child {
    padding-bottom: 10px;
}
.event .sw-event .swiper-slide a img {
    width: 100%;
    padding-bottom: 13px;
}


/* footer */
footer {
    padding: 50px;
    background-color: #EAF7FF;
}
footer .container {}
.footer-wrap {}
.footer-top {
    display: flex;
    justify-content: space-between;
}
.footer-top .footer-left {}
.footer-top .footer-left li {
    padding: 10px 0;
    color: #333;
}
.footer-top .footer-left li:first-child {
    padding: 0 0 10px 0;
}
.footer-top .footer-left li a {
    font-size: 27px;
}
.footer-top .betterforus p {
    font-family: 'PretendardSemibold';
    font-size: 27px;
    color: #2E601D;
    padding-bottom: 15px;
}
.footer-top .betterforus span {
    color: #333;
}

.footer-top .support {
    color: #333;
}
.footer-top .support span {
    display: block;
}
.footer-top .support span.tel {
    font-family: "pretendardSemibold";
    font-size: 20px;
    padding: 10px 0;
}
.footer-top .support span.time {
    font-size: 14px;
}
.footer-top .sns {
    display: flex;
    gap: 30px;
}
.footer-top .sns li {}
.footer-top .sns li a {
    width: 20px;
    height: 20px;
}
.footer-top .sns li a img {
    width: 100%;
}
.footer-bottom {
    padding-top: 20px;
    color: #333;
}
.footer-bottom .terms {
    display: flex;
    gap: 16px;
    font-size: 14px;
}
.footer-bottom .terms li {}
.footer-bottom .footer-bold {
    font-family: 'pretendardSemibold';
    text-decoration: underline;
}
.footer-bottom .terms li a {}
.footer-bottom .bottom {
    font-size: 11px;
    padding: 7px 0;
}
.footer-bottom .bottom .bottom1 {
    padding-top: 20px;
}
.footer-bottom .bottom .bottom2 {}
.footer-bottom .bottom .bottom3 {}
.footer-bottom .bottom .bottom4 {}