@charset 'UTF-8';
/* 1. mo ~767px까지 */
@media all and (max-width: 767px) {
    .main-new {
        padding-left: 1em;
    }
    .main-review-wrap {
        padding-left: 1em;
    }
    .main-review {
        padding-left: 1em;
    }
}
/* 2. tb 768px부터~ */
@media all and (min-width: 768px) {
    .main-visual-img {
        /* height: 600px; */
    }
    .main-new {
        display: flex;
        justify-content: space-between;
    }
    .main-new-container {}
    .main-new-sec {}
    .main-new-sec h2{
        font-size: 2em;
        text-align: center;
    }
    .more-btn {
        right: -1px;
        padding: 1em;
        font-size: 16px;
        }
    .new-item1 {
        background: url('../images/new1.jpg') top 100% right 80% / cover;}
    .new-item2 {
        background: url('../images/new2.jpg') top 90% right 60% / cover;}
    .new-item3 {
        background: url('../images/new3.jpg') top 90% right 80% / cover;}

     /* best영역 */
     .main-best-sec h2{
        font-size: 2em;
        text-align: center;
    }
     .main-best {
        width: 20%;
        margin-bottom: 0;
    }
    .best-img {
        background-size: 80%;
        margin-bottom: 15px;
    }

    /* 리뷰영역 */
    .main-review-txt {
        margin-bottom: 1em;
    }
    .review-item {
        width: 270px;
        height: 270px;
    }
     /* use 영역 */
}

/* 3. only tb 768px ~ 1279px */
@media all and (min-width: 768px) and (max-width: 1279px) {
    .new-txt {}
    .best-item {
        font-size: 16px;
        padding-left: 0 0.6em;
    }
    .main-review-wrap {
        padding-left: 1em;
    }
    .main-review {
        padding-left: 1em;
    }
}

/* 4. pc 1280px부터~ */
@media all and (min-width: 1280px) {
    #ww-main {}
    .main-visual-sec {
        /* height: 600px; */
    }
    .main-visual-container {}
    .main-visual-wrap {}
    .visual-item {
        position: relative;
    }
    .main-visual-img {
        height: 600px;
    }
    .main-visual-txt {
        position: absolute;
        right: 0;
        top: 70%;
        height: 320px;
        width: 600px;
        padding: 60px;
        border-radius: 30px 0 0 30px ;
        transform: translate(0, -70%);
    }
    .main-visual-txt h3{
        font-family: var(--serif-pre);
        font-size: 42px;
        line-height: 2em;
    }
    .main-visual-txt .txt-slogan{
        font-size: 20px;
        line-height: 1.8em;
    }
    .main-visual-txt .more-wh {
        font-size: 18px;
        padding-top: 10px;
    }

    /* 1. new 영역 */
    .main-new-sec {}
    .main-new-sec h2{
        font-size: 2.25em;
    }   
    .main-new-container {
        width: 100%;
        height: 100%;
    }
    .main-new {}
    .new-item {
        width: 450px;
        height: 450px;
    }
    .new-txt {
        height: 32%;
        width: 88%;
        line-height: 1.4;
        border-width: 0;
    }
    .new-txt h3{
        line-height: 1.4em;
    }

    .new-txt span{
        font-size: 18px;
    }
    .new-info {
        font-size: 18px;
    }
    .more-btn {right: 0;}
    .new-hover {
        padding: 0.5em 0;
        transition: 0.5s;
    }
    .new-hover dd{
        position: relative;
        padding: 0.5em 1.5em;
    }
    /*best 영역*/
    .main-best-sec {
        
    }
    .main-best-container {}
    .main-best-wrap {
        gap: 80px;
    }
    .main-best-sec h2{
        font-size: 2.25em;
        text-align: center;
    }
    .main-best {}
    .best-item {
        height: 400px;
        padding: 0 1.5em;
        font-size: 18px;
    }
    
    .best-img {
        margin-bottom: 20px;
    }
    /* 리뷰영역 */
    .main-review-sec {
    }
    .main-review-container {
        display: flex;
        position: relative;
        width: 100%;
    } 
    
    .main-review-wrap {
        margin-right: 2em;
        
    }
    .main-review-wrap h2{
        font-size: 2.25em;
        padding-right: 2em;
        text-align: center;

    }
    .main-review-txt {
        margin-bottom: 0;
        font-size: 20px;
    }
    .main-review-txt div{
        padding-bottom: 0;
    }
    .more-bk {
        position: static;
        margin-top: 1.5em;
        font-size: 18px;
    }
    .main-review {
        width: 100%;
        height: 100%;
    }
    
    .main-review .slick-list, .main-review .slick-track {
        width: 100%;
        height: 100%;
    }
    .review-list {}
    .review-item {
        width: 300px;
        height: 300px;
    }

    /* 리뷰버튼 */
    
    .review-control {
        position: absolute;
        left: 365px;
        top: 50%;
    }
    .review-control .slick-next{
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 50px;
        height: 50px;
        content: '';
        margin: -25px 25px;
        border-radius: 50%;
        background-color: #fff;
        opacity: 0.9;
        z-index: 1;
    }
    .review-control .slick-next:after{
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 26px;
        height: 26px;
        content: '';
        margin: 13px 9px;
        /* transform: translateY(-50%); */
        background: url('../images/arrow.png') center center / contain no-repeat;
        opacity: 0.7;
        z-index: 1;

    }


    /* use영역 */
    .main-use-sec {
    }
    .main-use-container {
        display: flex;
        flex-wrap: wrap;
    }
    
    .use-video {
        /* float: left; */
        width: 50%;
    }
    .use-item-wrap {
        width: 50%;
    }
    .use-item-ul {
        height: 100%;
    }
    .use-item-list {
        height: 100%;
    }
    .use-item {
        height: 50%;
    }
    .use-item span{
        display: none;
    }

    .use-item {
        position: relative;
    }
    .use-item:after {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        content: '';
        width: 100%;
        height: 100%;
    }
    .use-item1:after {
        background: url('../images/location.png')center center / 30% no-repeat;
        transition: 0.3s;
    }
    .use-item2:after {
        background: url('../images/guide.png')center center / 20% no-repeat;
        transition: 0.3s;
    }
    .use-item3:after {
        background: url('../images/benefit.png')center center / 25% no-repeat;
        transition: 0.3s;
    }
    .use-item4:after {
        background: url('../images/press.png')center center / 20% no-repeat;
        transition: 0.3s;
    }
}
.use-item1:hover:after {
    background-size: 35%;
    transition: 0.3s;
}    
.use-item2:hover:after, .use-item4:hover:after {
    background-size: 25%;
    transition: 0.3s;
}
.use-item3:hover:after {
    background-size: 30%;
    transition: 0.3s;
}