@charset 'UTF-8';
/* * {
    border: 1px solid #000;
} */

#ww-main {
}
#ww-skip a:nth-child(3) {/*서브메뉴 바로가기 숨김*/
    display: none;
}
.main-sec {
    padding: 60px 0;
}

/* 1. 비주얼 영역 */
.main-visual-sec {
}
.main-visual-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.main-visual-wrap {
    display: flex;
    width: 400%;
}
.visual-item {
    width: 100%;
}
.main-visual {
}
/* .visual-item2 {display: none;}
.visual-item3 {display: none;} */

.main-visual-img {
    height: 100vw;
    /* background-color: #0ff; */
    /* background-size: cover; */
    /* overflow: hidden; */
}
.visual-img1 {
    background: url('../images/visual/3.jpg') center center / cover no-repeat;
}
.visual-img2 {
    background: url('../images/visual/1.jpg') center center / cover no-repeat;
}
.visual-img3 {
    background: url('../images/visual/2.jpg') center center / cover no-repeat;
}


.btn-prev {
    background: url("../images/arrow.png")center center / cover no-repeat;
}
.next-prev {
    background: url("../images/arrow.png")center center / cover no-repeat;
}
.main-visual-txt {
    display: block;
    padding: 30px 15px;
    background-color: var(--main-color);
}
.main-visual-txt h3 {
    font-size: 1.75em;
    font-family: var(--serif-pre);
}
.txt-slogan {
    font-size: 0.9em;
}

.more-wh {
    float: right;
    text-align: center;
    padding-top: 0.5em;
}

.main-sec h2{
    font-size: 2em;
    margin-bottom: 2em;
    font-family: var(--serif-pre);
}


/* 1. new 영역 */

.main-new-sec {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden;
}
.main-new-sec:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background-color: var(--light-beige);
    content: '';
    z-index: -1;
}
.main-new-container {
}
.main-new .slick-list, .main-new .slick-track {
    height: 100%;
    width: 100%;
}
.slick-list .slick-current {}
.main-new {
    width: 100%;
    height: 100%;
}
.main-new div{
    height: 100%;
}
.new-item {
    position: relative;
    display: inline-block;
    height: 400px;
    width: 320px;
    margin-right: 30px;
    /* overflow: hidden; */
}
.new-item::before {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #000;
    opacity: 0;
}

.new-item1 {background: url('../images/new1.jpg') center center / cover no-repeat;}
.new-item2 {background: url('../images/new2.jpg') center center  / cover no-repeat; }
.new-item3 {background: url('../images/new3.jpg') center center / cover no-repeat;}

.main-new .new-txt {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 88%;
    height: 40%;
    background-color: #fff;
    padding: 1em 1.5em;
    line-height: 1.8;
    transition: 0.6s;
}
.new-txt h3 {
    font-size: 1.25em;
    padding-bottom: 0.5em;
}

.new-txt span {
    display: block;
}
.new-hover {
    opacity: 0;
    padding: 0.3em 0;
    transition: 0.5s;
}
.new-hover dd{
    position: relative;
    font-size: 0.95em;
    padding: 0.15em 0em 0.15em 1.25em ;
}

.more-btn {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-50%);
    padding: 1em;
    font-size: 0.9em;
    text-align: center;
    background-color: var(--main-color);
}
/* new호버 */
.new-item:hover .new-txt {
    height: 60%;
    transition: 0.3s, 0.5s;
}
.new-item:hover .new-hover{
    opacity: 1;
    transition: 0.3s 0.45s;
}
.main-new li:hover .new-item::before {
    opacity: 0.5;
}
.new-hover dd::before{
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    content: '';
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    background: url('../images/hashtag.png') center center / contain no-repeat;
}


/*2. best 영역*/
.main-best-sec {
    background-color: var(--light-beige);
}
.main-best-sec h2 {}
.main-best-container {}
.main-best-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.main-best {
    position: relative;
    width: 48%;
    margin-bottom: 10px;
    background-color: #fff;
}
.main-best1 {}
.main-best2 {}
.main-best3 {}
.main-best4 {}

.best-item {
    display: block;
    height: 300px;
    padding: 1em;
    font-size: 14px;
}
.best-item span {
    display: block;
}
.best-item1 {}
.best-item2 {}
.best-item3 {}
.best-item4 {}

.best-img {
    height: 70%;
    margin-bottom: 20px;
    transition: 0.5s;
}
.best-img1 {background: url('../images/best-item1.jpg') center center / 95% no-repeat;}
.best-img2 {background: url('../images/best-item2.jpg') center center / 95% no-repeat;}
.best-img3 {background: url('../images/best-item3.jpg') center center / 95% no-repeat;}
.best-img4 {background: url('../images/best-item4.jpg') center center / 90% no-repeat;}


/* 베스트 동작 */
.best-item:before { /*호버 흰배경*/
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    content:'';
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    transition: 0.6s;
}
.best-item:after { /*호버 버튼*/
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 50px;
    height: 50px;
    content:'';
    background: var(--main-color) url('../images/cart.png') center center / 45% no-repeat;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 0.6s;
}
.main-best:hover .best-item:before, .main-best:hover .best-item:after {
    opacity: 1;
    transition: 0.6s;
}
.best-item:hover .best-img {
    background-image: none;
    transition: 0.6s 0.6s;
}
.best-item:hover {transition: 0.5s;}
.best-item1:hover {background: url('../images/best-hover1.jpg') center center / cover no-repeat;}
.best-item2:hover {background: url('../images/best-hover2.jpg') center center / cover no-repeat;}
.best-item3:hover {background: url('../images/best-hover3.jpg') center center / cover no-repeat;}
.best-item4:hover {background: url('../images/best-hover4.jpg') center center / cover no-repeat;}
.main-best:hover .best-item span {display:none;}



/* 리뷰 영역 */
.main-review-sec {
    background-color: var(--light-beige);
    overflow: hidden;
}

.main-review-container {
    /* overflow: auto; */
}

.main-review-wrap {}
.main-review-wrap h2 {
    margin-bottom: 2em;
    line-height: 1.2em;
}
.main-review-txt {
    margin-bottom: 1em;
}
.main-review-txt div{
    padding-bottom: 1em;
}

.more-bk {
    display: inline-block;
    vertical-align: center;
    text-align: center;
    padding-bottom: 10px;
}
.main-review {}
.main-review a {}

.review-list {
    padding-right: 2em;
}
.main-review .review-list:last-child {
    padding-left: 0;
}
.review-item {
    position: relative;
    width: 260px;
    height: 260px;
}
.review-item1 {background: url('../images/review-item1.jpg') center center / cover no-repeat;}
.review-item2 {background: url('../images/review-item2.jpg') center center / cover no-repeat;}
.review-item3 {background: url('../images/review-item3.jpg') center center / cover no-repeat;}
.review-item4 {background: url('../images/review-item4.jpg') center center / cover no-repeat;}

.review-item span {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 3em;
    background-color: var(--main-color);
    color: #fff;
    font-size: 1em;
}

/* 리뷰 이전 버튼 없애기 */
.review-control .slick-prev{
    display: none !important;
}


/* use 영역 */
.main-use-sec {
}
.main-use-container {}
.use-video {
    position: relative;
    width: 100%;
    text-align: center;
}
.use-video::before {
    display: block;
    content: '';
    height: 0;
    padding-bottom: 56.25%;
}
.use-video iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.use-item-wrap {}
.use-item-ul{
}
.use-item-list {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.use-item {
    position: relative;
    display: block;
    width: 50%;
    text-align: center;
    padding: 2em;
    line-height: 2em;
    color: #fff;
    z-index: 1;
    transition: 0.6s;
}
.use-item:before {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;
    z-index: -1;
    transition: 0.3s;
}
.use-item1 {background: url('../images/use-item1.jpg') center center / 100% no-repeat;}
.use-item2 {background: url('../images/use-item2.jpg') center center / 100% no-repeat;}
.use-item3 {background: url('../images/use-item3.jpg') top 70% center / 100% no-repeat;}
.use-item4 {background: url('../images/use-item4.jpg') center center / 100% no-repeat;}

.use-item span{
    z-index: 2;
}
.use-item:hover:before {
    opacity: 0.1;
    transition: 0.5s;
}
.use-item:hover {
    background-size: 110%;
    font-weight: 600;
}
.use-item:nth-child(even):hover {
    /* color: #000; */ 
}
.ww-ft{
    margin-top: 50px;
}