.container{position: relative;padding: 100px 0 80px;box-sizing: border-box;-webkit-animation: fade 0.7s ease-in-out both;-moz-animation: fade 0.7s ease-in-out both;-ms-animation: fade 0.7s ease-in-out both;-o-animation: fade 0.7s ease-in-out both;animation: fade 0.7s ease-in-out both;}
.section01 {position: relative;overflow: hidden;padding: 30px 0 104px;background: #FFF6E2;box-sizing: border-box;}
.visualWrap:after{content: "";position: absolute;right: calc((50% - 540px) - 37px);bottom: 55px; display: block;width: 350px;height: 196px;background-image: url(../images/main/img_character_D.png);background-position: center;background-size: 100%;background-repeat: no-repeat;z-index: 2;}
.visualSwiper .swiper-slide{width: 50%;width: 1080px;max-width: 100%;}
.visualControl .swiper-button-prev, .visualControl .swiper-button-next{width: 34px;height: 34px;border-radius: 35px;border: 1px solid #C5C5C5;box-sizing: border-box;background-color: var(--white-color);background-image: url(../images/layout/icon_arrow_right_black.svg);background-position: center;background-size: 6px 12px;background-repeat: no-repeat;overflow: hidden;text-indent: -9999px;white-space: nowrap;-webkit-transition: .3s;transition: .3s;}
.visualControl .swiper-button-prev{left: calc((50% - 540px) - 94px);transform: rotate(180deg);}
.visualControl .swiper-button-next{right: calc((50% - 540px) - 94px);}
.visualControl .swiper-button-prev:after, .visualControl .swiper-button-next:after{display: none;}
.visualControl .swiper-button-prev:hover, .visualControl .swiper-button-next:hover{border-color: #F2B715;background-color: var(--main-color);background-image: url(../images/layout/icon_arrow_right_white.svg);}
.visualControl .pagination{position: absolute;bottom: 56px;left: 50%;transform: translateX(-50%);width: auto;padding: 8px 10px;border-radius: 20px;background: #5C5C5C;color: var(--white-color);font-size: 12px;font-weight: 400;line-height: 100%;letter-spacing: -0.6px;z-index: 99;}
.visualControl .pagination .swiper-pagination-current{font-weight: 800;}

.section02{margin: -36px 0 25px;}
.section02 .inner{position: relative;max-width: 1124px;width: 100%;margin: 0 auto;padding: 0 22px;box-sizing: border-box;}
.searchGroup{position: relative;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: space-between;width: 100%;padding: 10px;border-radius: 5px;background: var(--white-color);border: 1px solid #111;box-sizing: border-box;}
.searchGroup .search_M{display: none;}
.searchGroup .package, .searchGroup .personnel{position: relative;display: flex;align-items: center;justify-content: flex-start;width: 250px;height: 53px;padding-left: 48px;border-radius: 5px;border: 1px solid #D1D1D1;box-sizing: border-box;}
.searchGroup .dateGroup{position: relative;display: flex;align-items: center;justify-content: flex-start;width: 495px;height: 53px;border-radius: 5px;border: 1px solid #D1D1D1;box-sizing: border-box;}
.searchGroup .dateGroup:before{content: "";position: absolute;left: 50%;top: 50%;transform: translateY(-50%);width: 1px;height: 14px;background: #DBDBDB;}
.searchGroup .dateGroup span{position: relative;width: 247px;padding-left: 48px;box-sizing: border-box;}
.searchGroup .btnSearch{width: 36px;height: 36px;background-color: var(--main-color);background-image: url(../images/main/icon_search.svg);background-position: center;background-repeat: no-repeat;border-color: var(--main-color);border-radius: 30px;overflow: hidden;text-indent: -9999px;white-space: nowrap;}
.searchGroup a{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.searchGroup .package:before, .searchGroup .personnel:before, .searchGroup .dateGroup span:before{content: "";position: absolute;left: 20px;top: 50%;transform: translateY(-50%);width: 20px;height: 20px;background-position: center;background-repeat: no-repeat;}
.searchGroup .package:before{background-image: url(../images/main/icon_package.svg);}
.searchGroup .personnel:before{background-image: url(../images/main/icon_personnel.svg);}
.searchGroup .dateGroup span:before{background-image: url(../images/main/icon_calendar.svg);}
.searchGroup .package:after, .searchGroup .personnel:after, .searchGroup .dateGroup span:after{content: "";position: absolute;right: 20px;top: 50%;transform: translateY(-50%);width: 20px;height: 20px;background-image: url(../images/layout/arrow_select.svg);background-position: center;background-repeat: no-repeat;}
.searchGroup > div > span{color: var(--black-color);font-size: 15px;font-weight: 700;line-height: normal;letter-spacing: -0.8px;}

.section03{margin-bottom: 100px;}
.section03 .inner{position: relative;max-width: 1124px;width: 100%;margin: 0 auto;padding: 0 22px;box-sizing: border-box;display: flex;flex-direction: row;flex-wrap: wrap;align-items: flex-start;justify-content: flex-start;gap: 25px;}
.specialsaleGroup{position: relative;width: calc(63.889% - 25px);height: 420px;border-radius: 5px;overflow: hidden;}
.specialsaleGroup .labelArea{position: absolute;left: 10px;top: 10px;width: 60px;height: 60px;border-radius: 5px;overflow: hidden;z-index: 2;}
.specialsaleGroup .labelArea span{position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 17px;color: var(--white-color);font-weight: 800;line-height: 20px;letter-spacing: -0.6px;}
.specialsaleGroup .labelArea video{width: 100%;height: 100%;}
.specialsaleGroup .labelArea video::-webkit-media-controls{display: none !important;}
.specialsaleGroup .videoArea{position: relative;width: 100%;height: 100%;}
.specialsaleGroup .videoArea video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.specialsaleGroup .videoArea video::-webkit-media-controls{display: none !important;}
.specialsaleGroup .textArea{position: absolute;left: 10px;bottom: 10px;}
.specialsaleGroup .textArea a{display: block;width: 410px;padding: 30px;background: var(--white-color);border-radius: 5px;box-sizing: border-box;}
.specialsaleGroup .textArea strong{display: inline-block;color: #111;font-size: 20px;font-weight: 700;line-height: 120%;letter-spacing: -0.6px;word-break: keep-all;}
.specialsaleGroup .textArea strong:after{content: "";display: inline-block;width: 20px;height: 19px;margin-left: 5px;background-image: url(../images/main/icon_fire.svg);background-position: center;background-repeat: no-repeat;vertical-align: -3px;}
.specialsaleGroup .textArea ul{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;gap: 5px 0;margin-top: 10px;}
.specialsaleGroup .textArea ul li{color: #111;font-size: 14px;font-weight: 700;line-height: 120%;letter-spacing: -0.3px;word-break: keep-all;}
.specialsaleGroup .textArea ul li:after{content: "";display: inline-block;width: 1px;height: 8px;margin: 0 7px;background: #C1C1C1;}
.specialsaleGroup .textArea ul li:last-child:after{display: none;}
.specialsaleGroup .textArea em{display: block;margin-top: 15px;color: #666;font-size: 14px;font-weight: 400;line-height: 120%;letter-spacing: -0.6px;word-break: keep-all;}
.specialsaleGroup .textArea .price{margin-top: 17px;color: var(--black-color);font-size: 16px;font-weight: 800;line-height: 100%;letter-spacing: -0.6px;}
.specialsaleGroup .textArea .price .percent{color: var(--red-color);}
.noticeGroup{width: 36.111%;}
.noticeGroup .noticeArea{width: 100%;height: 200px;padding: 20px;border-radius: 5px;border: 1px solid #D1D1D1;box-sizing: border-box;background: var(--white-color);}
.noticeGroup .noticeArea dt{margin-bottom: 15px;}
.noticeGroup .noticeArea dt:after{content: "";display: inline-block;width: 5px;height: 10px;margin-left: 8px;background-image: url(../images/layout/icon_arrow_right_black.svg);background-position: center;background-size: 100%;background-repeat: no-repeat;-webkit-transition: .3s;transition: .3s;}
.noticeGroup .noticeArea dt a{color: #111;font-size: 16px;font-weight: 800;line-height: normal;letter-spacing: -0.8px;}
.noticeGroup .noticeArea dd{position: relative;}
.noticeGroup .noticeArea dd:before{content: "·";position: absolute;left: 0;top: 5px; display: block;}
.noticeGroup .noticeArea dd a{display: block;padding-left: 10px;box-sizing: border-box;color: #222;font-size: 15px;font-weight: 400;line-height: 200%;letter-spacing: -0.9px;word-break: keep-all;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;-webkit-transition: .3s;transition: .3s;}
.noticeGroup .noticeArea dd a:hover{font-weight: 800;}
.noticeGroup .askArea{width: 100%;height: 200px;margin-top: 20px;padding: 20px;border-radius: 5px;border: 1px solid #D1D1D1;box-sizing: border-box;background: var(--white-color);}
.noticeGroup .askArea dt{margin-bottom: 15px;}
.noticeGroup .askArea dt:after{content: "";display: inline-block;width: 5px;height: 10px;margin-left: 8px;background-image: url(../images/layout/icon_arrow_right_black.svg);background-position: center;background-size: 100%;background-repeat: no-repeat;-webkit-transition: .3s;transition: .3s;}
.noticeGroup .askArea dt a{color: #111;font-size: 16px;font-weight: 800;line-height: normal;letter-spacing: -0.8px;}
.noticeGroup .askArea dd a{display: block;color: #222;font-size: 15px;font-weight: 400;line-height: 200%;letter-spacing: -0.9px;word-break: keep-all;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;-webkit-transition: .3s;transition: .3s;}
.noticeGroup .askArea dd a:hover{font-weight: 800;}
.noticeGroup .askArea dd a span{color: var(--red-color);}
.saleGroup{width: 100%;}
.saleGroup > ul{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;gap: 20px;}
.saleGroup > ul > li{flex: 1;}
.saleGroup .imagesArea{position: relative;width: 100%;padding: 0 0 58.825%;border-radius: 5px;overflow: hidden;}
.saleGroup .imagesArea img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.saleGroup .textArea{margin-top: 20px;}
.saleGroup .textArea strong{display: block;color: #111;font-size: 17px;font-weight: 700;line-height: 150%;letter-spacing: -0.6px;word-break: keep-all;-webkit-transition: .3s;transition: .3s;}
.saleGroup .textArea ul{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;gap: 5px 0;margin-top: 5px;}
.saleGroup .textArea ul li{color: #444;font-size: 13px;font-weight: 400;line-height: 100%;letter-spacing: -0.3px;word-break: keep-all;}
.saleGroup .textArea ul li:after{content: "";display: inline-block;width: 1px;height: 8px;margin: 0 6px;background: #C1C1C1;}
.saleGroup .textArea ul li:last-child:after{display: none;}
.saleGroup .textArea .price{margin-top: 13px;color: var(--black-color);font-size: 16px;font-weight: 800;line-height: 100%;letter-spacing: -0.6px;}
.saleGroup .textArea .price .percent{color: var(--red-color);}
.saleGroup > ul > li > a:hover .textArea strong{color: var(--red-color);text-decoration: underline;}
.saleGroup > ul > li > a:hover .imagesArea:before{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.50);z-index: 2;}
.saleGroup > ul > li > a:hover .imagesArea:after{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: block;width: 30px;height: 30px;background-image: url(../images/main/icon_resort_more.svg);background-position: center;background-repeat: no-repeat;z-index: 2;-webkit-animation: fadeOn 0.5s ease-in-out 1;animation: fadeOn 0.5s ease-in-out 1;animation-fill-mode: forwards;}

.section04 .inner{position: relative;max-width: 1124px;width: 100%;margin: 0 auto;padding: 0 22px;box-sizing: border-box;}
.resortGroup .titleArea{margin-bottom: 35px;}
.resortGroup .titleArea h2{color: var(--black-color);font-size: 30px;font-weight: 800;line-height: 110%;letter-spacing: -0.6px;}
.resortGroup .titleArea p{color: var(--black-color);font-size: 20px;font-weight: 400;line-height: 33px;letter-spacing: -0.6px;}
.resortList{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: center;max-width: 100%;height: 380px;overflow: hidden;}
.resortList li{position: relative;width: 182px;height: 100%;background-position: center;background-size: cover;background-repeat: no-repeat;border-radius: 5px;-webkit-transition: width .6s;transition: width .6s;}
.resortList li.item1{background-image: url("../images/main/img_resort01_D.jpg");}
.resortList li.item2{background-image: url("../images/main/img_resort02_D.jpg");}
.resortList li.item3{background-image: url("../images/main/img_resort03_D.jpg");}
.resortList li a{position: relative;display: block;width: 100%;height: 100%;padding: 30px 20px;box-sizing: border-box;}
.resortList li dl{position: absolute;left: 20px;bottom: 30px;width: calc(100% - 40px);z-index: 2;-webkit-transition: all 0.6s;transition: all 0.6s;}
.resortList li dl dt{color: var(--white-color);font-size: 16px;font-weight: 800;line-height: 22px;letter-spacing: -0.4px;}
.resortList li dl dd{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: center;opacity: 0;height: 0;}
.resortList li dl dd .textArea strong{color: var(--white-color);font-size: 18px;font-weight: 800;line-height: normal;letter-spacing: -0.4px;}
.resortList li dl dd .textArea p{margin-top: 10px;color: var(--white-color);font-size: 15px;font-weight: 400;line-height: normal;letter-spacing: -0.4px;}
.resortList li dl dd span{display: block;width: 30px;height: 30px;background-image: url(../images/main/icon_resort_more.svg);background-position: center;background-repeat: no-repeat;overflow: hidden;text-indent: -9999px;white-space: nowrap;}
.resortList li.on{width: 665px;}
.resortList li.on a{padding: 30px;}
.resortList li.on dl{left: 30px;width: calc(100% - 60px);}
.resortList li.on dl dt{-webkit-animation: fadeOut 0.5s ease-in-out 1;animation: fadeOut 0.5s ease-in-out 1;animation-fill-mode: forwards;}
.resortList li.on dl dd{-webkit-animation: fadeUp 1s ease-in-out 1;animation: fadeUp 1s ease-in-out 1;animation-fill-mode: forwards;}

@media screen and (max-width: 1299px){

    .section01{padding: 50px 0 110px;}
    .visualWrap:after{right: 62px;width: 285px;height: 160px;background-image: url(../images/main/img_character_T.png);}
    .visualSwiper .swiper-slide{padding: 0 83px;box-sizing: border-box;}
    .visualControl .swiper-button-prev{left: 22px;}
    .visualControl .swiper-button-next{right: 22px;}
    .resortList{gap: 15px;}
    .resortList li{width: calc(20% - 10px);}
    .resortList li.on{width: calc(60% - 10px);}

}
@media screen and (max-width: 1079px){

    .container{padding: 90px 0 40px;}

    .section02{margin: -35px 0 22px;}
    .searchGroup{gap: 10px;}
    .searchGroup .package, .searchGroup .personnel{width: calc(25% - 20px);height: 43px;padding-left: 38px;}
    .searchGroup .dateGroup{width: calc(50% - 26px);height: 43px;}
    .searchGroup .dateGroup span{width: 50%;padding-left: 38px;}
    .searchGroup .package:before, .searchGroup .personnel:before, .searchGroup .dateGroup span:before{left: 10px;}
    .searchGroup .package:after, .searchGroup .personnel:after, .searchGroup .dateGroup span:after{right: 5%;}

    .section03{margin-bottom: 60px;}
    .section03 .inner{gap: 0;}
    .specialsaleGroup{order: 1;width: 100%;height: auto;}
    .specialsaleGroup .labelArea span{font-size: 16px;}
    .specialsaleGroup .videoArea{height: 0;padding: 0 0 51.022%;}
    .specialsaleGroup .textArea a{width: 390px;}
    .specialsaleGroup .textArea strong{font-weight: 800;}
    .specialsaleGroup .textArea em{margin-top: 10px;}
    .specialsaleGroup .textArea .price{margin-top: 15px;}
    .noticeGroup{order: 3;display: flex;flex-direction: row;flex-wrap: wrap;gap: 20px;width: 100%;margin-top: 60px;}
    .noticeGroup .noticeArea{width: calc(50% - 10px);}
    .noticeGroup .askArea{width: calc(50% - 10px);margin-top: 0;}
    .saleGroup{order: 2;margin-top: 20px;}
    .saleGroup > ul{gap: 36px 20px;}
    .saleGroup > ul > li{flex: calc(50% - 10px);}
    .saleGroup .textArea{margin-top: 15px;}

    .resortGroup .titleArea{margin-bottom: 30px;}
    .resortGroup .titleArea h2{font-size: 25px;}
    .resortGroup .titleArea p{margin-top: 5px;font-size: 18px;}
    .resortList{flex-direction: column;flex-wrap: nowrap;height: auto;gap: 10px;}
    .resortList li, .resortList li.on{width: 100%;height: 240px;}
    .resortList li.item1{background-image: url("../images/main/img_resort01_T.jpg");}
    .resortList li.item2{background-image: url("../images/main/img_resort02_T.jpg");}
    .resortList li.item3{background-image: url("../images/main/img_resort03_T.jpg");}
    .resortList li a{padding: 30px;}
    .resortList li dl{left: 30px;width: calc(100% - 60px);}
    .resortList li dl dt{display: none !important;}
    .resortList li dl dd{display: flex !important;height: auto !important;opacity: 1 !important;transform: translateY(0) !important;}
    .resortList li dl dd .textArea p{margin-top: 5px;}

}
@media screen and (max-width: 767px){

    .container{padding: 66px 0 30px;}

    .section01{padding: 30px 0 95px;}
    .visualWrap:after{bottom: 75px;right: 4%;width: 194px;height: 109px;background-image: url(../images/main/img_character_M.png);}
    .visualSwiper{max-width: 520px;}
    .visualSwiper .swiper-slide{width: 300px;padding: 0 12px;}
    .visualControl .pagination{bottom: 47px;}

    .section02{margin: -27px 0 12px;}
    .section02 .inner{padding: 0 12px;}
    .searchGroup .package, .searchGroup .dateGroup, .searchGroup .personnel{display: none;}
    .searchGroup .search_M{position: relative;display: flex;align-items: center;justify-content: flex-start;height: 33px;padding-left: 28px;box-sizing: border-box;color: var(--black-color);font-size: 15px;font-weight: 700;line-height: normal;letter-spacing: -0.8px;}
    .searchGroup .search_M:before{content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 20px;height: 20px;background-image: url(../images/main/icon_package.svg);background-position: center;background-repeat: no-repeat;}
    .searchGroup .btnSearch{width: 33px;height: 33px;}

    .section03 .inner{padding: 0 12px;}
    .specialsaleGroup .labelArea{width: 55px;height: 55px;}
    .specialsaleGroup .labelArea span{font-size: 15px;line-height: 18px;}
    .specialsaleGroup .videoArea{height: 356px;padding: 0;}
    .specialsaleGroup .textArea{width: calc(100% - 20px);}
    .specialsaleGroup .textArea a{width: 340px;max-width: 100%;padding: 20px;}
    .specialsaleGroup .textArea strong{font-size: 17px;}
    .specialsaleGroup .textArea ul li{font-size: 13px;}
    .specialsaleGroup .textArea em{margin-top: 8px;font-size: 12px;}
    .specialsaleGroup .textArea .price{margin-top: 12px;}
    .saleGroup{margin-top: 12px;}
    .saleGroup > ul{gap: 30px;}
    .saleGroup > ul > li{flex: 100%;}
    .saleGroup .imagesArea{padding: 0 0 40.654%;}
    .noticeGroup{gap: 10px;}
    .noticeGroup .noticeArea{width: 100%;height: auto;padding: 20px 15px;}
    .noticeGroup .askArea{width: 100%;height: auto;padding: 20px 15px;}
    .noticeGroup .noticeArea dd a, .noticeGroup .askArea dd a{font-size: 14px;}

    .section04 .inner{padding: 0 12px;}
    .resortGroup .titleArea{margin-bottom: 20px;}
    .resortGroup .titleArea h2{font-size: 20px;line-height: 150%;}
    .resortGroup .titleArea p{margin-top: 0;font-size: 15px;line-height: 30px;}
    .resortList li, .resortList li.on{height: 180px;}
    .resortList li.item1{background-image: url("../images/main/img_resort01_M.jpg");}
    .resortList li.item2{background-image: url("../images/main/img_resort02_M.jpg");}
    .resortList li.item3{background-image: url("../images/main/img_resort03_M.jpg");}
    .resortList li a, .resortList li.on a{padding: 0;}
    .resortList li dl, .resortList li.on dl{bottom: 20px;left: 15px;width: calc(100% - 30px);}
    .resortList li dl dd{gap: 5px;}
    .resortList li dl dd .textArea strong{font-size: 16px;}
    .resortList li dl dd .textArea p{font-size: 14px;}
    
}
@media screen and (max-width: 630px){

    .visualControl .swiper-button-prev, .visualControl .swiper-button-next{display: none;}

}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-ms-keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-o-keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadeOn {
    0% {
        opacity: 0;
        transform: translate(-50%, 0%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@keyframes fadeOn {
    0% {
        opacity: 0;
        transform: translate(-50%, 0%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@-webkit-keyframes fadeOut {
    0% {
        display: block;
        opacity: 1;
        transform: translateY(0px);
    }
    100% {
        display: none;
        opacity: 0;
        transform: translateY(-20px);
    }
}
@keyframes fadeOut {
    0% {
        display: block;
        opacity: 1;
        transform: translateY(0px);
    }
    100% {
        display: none;
        opacity: 0;
        transform: translateY(-20px);
    }
}
@-webkit-keyframes fadeUp {
    0% {
        display: none;
        opacity: 0;
        height: 0;
        transform: translateY(50px);
    }
    100% {
        display: flex;
        opacity: 1;
        height: auto;
        transform: translateY(0);
    }
}
@keyframes fadeUp {
    0% {
        display: none;
        opacity: 0;
        height: 0;
        transform: translateY(50px);
    }
    100% {
        display: flex;
        opacity: 1;
        height: auto;
        transform: translateY(0);
    }
}