@charset "UTF-8"; .aboutArea .Img,.aboutArea .Txt,.roomArea .leftBox,.roomArea .rightBox,.newsArea .leftBox,.newsArea .rightBox,.newsTextList .Txt {
    box-sizing: border-box
}

@-webkit-keyframes bannerTxtAnimation{
    0%{
        opacity:0;
        -webkit-transform:translateY(10px);
        transform:translateY(10px)
    }

    to{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}

@keyframes bannerTxtAnimation{
    0%{
        opacity:0;
        -webkit-transform:translateY(10px);
        transform:translateY(10px)
    }
    
    to{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}

@-webkit-keyframes bubble{
    0%,100%{
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }

    5%{
        opacity: 1;
    }

    70%{
        opacity: 1;
        -webkit-transform:translateY(-157px);
        transform:translateY(-157px)
    }

    90%{
        opacity: 0;
        -webkit-transform:translateY(-197px);
        transform:translateY(-197px)
    }
}

@keyframes bubble{
    0%,100%{
        opacity: 0;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }

    70%{
        opacity: 1;
        -webkit-transform:translateY(-157px);
        transform:translateY(-157px)
    }

    90%{
        opacity: 0;
        -webkit-transform:translateY(-197px);
        transform:translateY(-197px)
    }
}

@-webkit-keyframes bubble2{
    0%,100%{
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }

    5%{
        opacity: 1;
    }

    70%{
        opacity: 1;
        -webkit-transform:translateY(-85px);
        transform:translateY(-85px)
    }

    90%{
        opacity: 0;
        -webkit-transform:translateY(-107px);
        transform:translateY(-107px)
    }
}

@keyframes bubble2{
    0%,100%{
        opacity: 0;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }

    70%{
        opacity: 1;
        -webkit-transform:translateY(-85px);
        transform:translateY(-85px)
    }

    90%{
        opacity: 0;
        -webkit-transform:translateY(-107px);
        transform:translateY(-107px)
    }
}

.roomTextList h3::before,.newsTextList h3 a::before,.travelArea .Txt::before,.travelArea h3,.travelArea p {
    transition: all .5s
}

.travelArea h3,.travelArea p {
    opacity: 0
}

.travelArea h3,.travelArea p {
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px)
}

.bannerArea{
    z-index: 3;
}

.bannerArea li em {
    display: block;
}

.bannerArea li em,
.bannerArea li .title,
.bannerArea li .line{
    opacity: 0;
}

.bannerArea li.slick-current em{
    animation: bannerTxtAnimation 0.8s ease-in-out forwards;
}

.bannerArea li.slick-current .title,
.bannerArea li.slick-current .line{
    animation: bannerTxtAnimation 0.8s .4s ease-in-out forwards;
}

.bannerBox {
    position: relative;
}

@media (min-width: 1181px) {
    .bannerBox::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: url(../images/bg/banner_wave.png) no-repeat center bottom/cover;
        width: 100%;
        height: 127px;
        pointer-events: none;
        z-index: 1;
    }
}

.bannerText {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    max-width: 1500px;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: auto;
}

@media (max-width: 1180px) {
    .bannerText {
        display: none;
    }
}

.bannerContent {
    position: relative;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: -3px -3px 21px rgb(0 0 0 / 14%);
    padding-bottom: 160px;
}

@media (max-width: 640px) {
    .bannerContent {
        font-size:14px;
        letter-spacing: 0
    }
}

.bannerContent em {
    font-size: 20px;
    letter-spacing: 2px;
}

.bannerContent .title {
    font-size: 80px;
    font-weight: 400;
    font-family: "Lobster", cursive;
    font-style: italic;
    letter-spacing: 2.5px;
}

@media (min-width: 641px) and (max-width: 1180px) {
    .bannerContent .title {
        font-size:80px
    }
}

@media (max-width: 640px) {
    .bannerContent .title {
        font-size:40px
    }
}

@media (max-width: 400px) {
    .bannerContent .title {
        display:none
    }
}

.bannerContent .line {
    position: absolute;
    left: calc(50% - 0.5px);
    bottom: -12px;
    width: 1px;
    height: 141px;
    background-color: #fff;
}

.bannerArea .illustration {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 1180px) {
    .bannerArea .illustration {
        display: none;
    }
}

.bannerArea .bubbleBox1 span,
.bannerArea .bubbleBox2 span{
    position: absolute;
    bottom: 0;
    background: url(../images/illustration/banner_bubble.png) no-repeat center/cover;
    opacity: 0;
}

.bannerArea .bubbleBox1 {
    bottom: 28%;
    left: 20%;
    width: 132px;
    height: 356px;
}

.bannerArea .bubbleBox1 span.bubble-1{
    right: 0;
    width: 12.12121212121212%;
    height: 4.49438202247191%;
    animation: bubble 3s linear infinite;
}

.bannerArea .bubbleBox1 span.bubble-2{
    left: 0;
    width: 15.90909090909091%;
    height: 5.89887640449438%;
    animation: bubble 5s linear infinite;
}

.bannerArea .bubbleBox1 span.bubble-3{
    left: 45%;
    width: 7.57575757575758%;
    height: 2.80898876404494%;
    animation: bubble 8s linear infinite;
}

.bannerArea .bubbleBox1 span.bubble-4{
    right: 30%;
    width: 20.45454545454545%;
    height: 7.58426966292135%;
    animation: bubble 4s linear infinite;
}

.bannerArea .bubbleBox1 span.bubble-5{
    left: 25%;
    width: 5.3030303030303%;
    height: 1.96629213483146%;
    animation: bubble 6s linear infinite;
}

.bannerArea .bubbleBox1 span.bubble-6{
    left: 10%;
    width: 9.84848484848485%;
    height: 3.65168539325843%;
    animation: bubble 7s linear infinite;
}

.bannerArea .bubbleBox1 span.bubble-7{
    left: 0;
    width: 15.90909090909091%;
    height: 5.89887640449438%;
    animation: bubble 2s linear infinite;
}

.bannerArea .bubbleBox1 span.bubble-8{
    left: 0;
    width: 32.57575757575758%;
    height: 12.07865168539326%;
    animation: bubble 6s linear infinite;
}

.bannerArea .bubbleBox2 {
    right: 28%;
    bottom: 15%;
    width: 108px;
    height: 285px;
}

.bannerArea .bubbleBox2 span.bubble-1{
    left: 0;
    width: 39.81481481481481%;
    height: 15.08771929824561%;
    animation: bubble 3s linear infinite;
}

.bannerArea .bubbleBox2 span.bubble-2{
    right: 0;
    width: 19.44444444444444%;
    height: 7.36842105263158%;
    animation: bubble 5s linear infinite;
}

.bannerArea .bubbleBox2 span.bubble-3{
    left: 20%;
    width: 12.03703703703704%;
    height: 4.56140350877193%;
    animation: bubble 2s linear infinite;
}

.bannerArea .bubbleBox2 span.bubble-4{
    right: 50%;
    width: 6.48148148148148%;
    height: 2.45614035087719%;
    animation: bubble 6s linear infinite;
}

.bannerArea .bubbleBox2 span.bubble-5{
    right: 2%;
    width: 25%;
    height: 9.47368421052632%;
    animation: bubble 4s linear infinite;
}

.bannerArea .bubbleBox2 span.bubble-6{
    right: 20%;
    width: 9.25925925925926%;
    height: 3.50877192982456%;
    animation: bubble 8s linear infinite;
}

.bannerArea .flower {
    bottom: 9%;
    right: 0;
    width: 14.84375%;
    height: 290px;
    background: url(../images/illustration/banner_flower.png) no-repeat right;
}

.mainArea {
    padding-top: 0;
}

.mainArea::before {
    height: 441px
}

@media (max-width: 1180px) {
    .mainArea::before {
        background-position-x:70%
    }
}

.titleBox .tag::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 58px;
    height: 1px;
    margin-left: 13px;
    background-color: #ccc
}

.aboutArea{
    position: relative;
    padding-top: 96px;
    z-index: 4;
}

@media (max-width: 1180px) {
    .aboutArea {
        padding-top: 50px;
    }
}

.aboutArea::before {
    content: '';
    position: absolute;
    top: 7%;
    left: -4px;
    background: url(../images/illustration/home_about_left.png) no-repeat top/contain;
    width: 11.66666666666667%;
    height: 130.2158273381295%;
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 960px) {
    .aboutArea::before {
        height: 380px;
        max-height: 100%;
        width: 112px;
    }
}

.aboutArea .decorate{
    position: absolute;
    top: 35%;
    left: 9.7%;
    width: 2.70833333333333%;
    height: 56px;
    background: url(../images/illustration/home_about_decorate.png) no-repeat center/contain;
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 960px) {
    .aboutArea .decorate{
        width: 35px;
        height: 38px;
    }
}

.aboutArea .wrap {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 1200px;
}

@media (max-width: 1299px) {
    .aboutArea .wrap {
        width:100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

@media (max-width: 960px) {
    .aboutArea .wrap {
        -webkit-flex-direction:column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.aboutArea .Img {
    position: relative;
    width: 55.5%;
    max-width: 730px;
    padding-right: 7px;
}

@media (max-width: 960px) {
    .aboutArea .Img {
        width:100%;
        margin: 0 auto;
    }
}

.aboutArea .Img::before {
    content: '';
    position: absolute;
    bottom: -7px;
    right: 0;
    width: calc(100% - 7px);
    height: calc(100% - 7px);
    background: url(../images/mask/about.png) no-repeat center/contain;
    pointer-events: none;
    z-index: -1;
}

.aboutArea .mask {
    -webkit-mask-image: url(../images/mask/about.png);
    mask-image: url(../images/mask/about.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;   
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aboutArea .Img img {
    position: relative;
    display: block;
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin: 0 auto;
}

.aboutArea .fish {
    position: absolute;
    bottom: 2.7%;
    right: 3%;
    background: url(../images/illustration/home_about_fish.png) no-repeat center/contain;
    width: 25.22522522522523%;
    height: 15.8695652173913%;
    pointer-events: none;
    z-index: 1;
}

.aboutArea .Txt {
    width: 44.5%;
    margin-top: 11px;
}

@media (min-width: 1281px) {
    .aboutArea .Txt {
        padding-left: 68px;
    }
}

@media (min-width: 961px) and (max-width: 1280px) {
    .aboutArea .Txt {
        padding-left:40px;
    }
}

@media (max-width: 960px) {
    .aboutArea .Txt {
        display:-webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
    }
}

.aboutArea .Txt h2 {
    margin-bottom: 13px;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 1.2px;
    color: #4d4d4d
}

@media (max-width: 400px) {
    .aboutArea .Txt h2 {
        font-size:18px
    }
}

.aboutArea .Txt p {
    color: #767676;
    line-height: 1.95;
    letter-spacing: 0.9px;
}

@media (max-width: 680px) {
    .aboutArea .Txt p {
        text-align:center
    }

    .aboutArea .Txt p br {
        display: none
    }
}

.aboutArea .titleBox {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 30px;
}

.roomArea {
    position: relative;
    z-index: 4;
    padding-top: 160px;
    padding-bottom: 68px;
    z-index: 1;
}

.roomArea::before {
    content: '';
    position: absolute;
    top: -5%;
    right: 0;
    width: 7.8125%;
    height: 672px;
    max-height: 100%;
    background: url(../images/illustration/room_right.png) no-repeat top/contain;
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 960px) {
    .roomArea::before {
        width: 75px;
        height: 340px;
    }
}

@media (max-width: 640px) {
    .roomArea::before {
        width: 60px;
        height: 270px;
    }
}

.roomArea::after {
    content: '';
    position: absolute;
    top: 23.2%;
    left: 41.2%;
    width: 4.375%;
    height: 79px;
    background: url(../images/illustration/room_center.png) no-repeat top/contain;
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 960px) {
    .roomArea::after {
        width: 42px;
        height: 40px;
    }
}

@media (max-width: 640px) {
    .roomArea::after {
        width: 32px;
        height: 30px;
    }
}

.roomArea .wrap {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

@media (max-width: 1299px){
    .roomArea .wrap {
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}


@media (max-width: 960px) {
    .roomArea .wrap {
        -webkit-flex-direction:column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.roomArea .titleBox {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.roomArea .titleBox h2 {
    margin-top: 28px;
    margin-bottom: 0
}

@media (min-width: 961px) {
    .roomArea .leftBox {
        width:38%;
        padding-top: 32px;
    }
}

@media (max-width: 960px) {
    .roomArea .leftBox {
        -webkit-order:1;
        -ms-flex-order: 1;
        order: 1;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        margin-top: 40px;
    }
}

.roomArea .rightBox {
    position: relative;
    width: 62%;
    padding-top: 10px;
    padding-left: 11px;
    z-index: 1;
}

@media (max-width: 960px){
    .roomArea .rightBox{
        width: 100%; 
        padding-top: 0;
        padding-left: 0;
    }
}

@media (max-width: 960px){
    .roomList li{
        padding-left: 7px;
    }
}

.roomList .Img {
    position: relative;
    max-width: 730px;
    padding-left: 7px;
    padding-bottom: 7px;
}

@media (max-width: 960px){
    .roomList .Img {
        width: 100%;
        margin: 0 auto;
        padding-left: 0;
    }
}

.roomList .Img::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 7px);
    height: calc(100% - 7px);
    background: url(../images/mask/room.png) no-repeat center/contain;
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 960px){
    .roomList .Img::before {
        left: -7px;
    }
}

.roomList .mask {
    -webkit-mask-image: url(../images/mask/room.png);
    mask-image: url(../images/mask/room.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;   
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.roomList img {
    display: block;
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all .5s;
}

.roomList img:hover {
    transform: scale(1.03);
}

.roomList .Txt {
    display: none
}

@media (min-width: 961px) {
    .roomTextList {
        padding-right: 30px;
    }
}

@media (max-width: 960px) {
    .roomTextList {
        max-width:640px;
        width: 100%;
    }
}

.roomTextList h3 {
    margin-bottom: 16px;
}

.roomTextList h3 a {
    position: relative;
    display: inline-block;
    color: #58579f;
    font-size: 20px;
    font-weight: 400;
}

.roomTextList h3 a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #7f7f7f;
    transition: all .5s;
}

.roomTextList h3 a:hover {
    color: #E45B8A;
}

.roomTextList h3 a:hover::before {
    background-color: #E45B8A;
}

.roomTextList .price {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 960px) {
    .roomTextList .price {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.roomTextList .price span,
.roomTextList p {
    color: #767676;
    letter-spacing: 0.8px;
    line-height: 1.95;
}

@media (min-width: 961px) {
    .roomTextList p {
        height:117px
    }
}

@media (max-width: 960px) {
    .roomTextList p br {
        display:none
    }
}

@media (min-width: 961px) {
    .roomTextList .slick-dots {
        margin-left: -8px;
    }
}

.roomArea .illustration {
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.roomArea .fish {
    top: 4.5%;
    left: 4.3%;
    width: 14.89583%;
    height: 204px;
    background: url(../images/illustration/room_fish.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .roomArea .fish {
        width: 143px;
        height: 104px;
    }
}

@media (max-width: 640px) {
    .roomArea .fish {
        width: 110px;
        height: 80px;
    }
}

.roomArea .seaweed {
    bottom: -100px;
    left: 0;
    width: 23.177083%;
    height: 276px;
    background: url(../images/illustration/room_seaweed.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .roomArea .seaweed {
        width: 222.5px;
        height: 140px;
    }
}

@media (max-width: 640px) {
    .roomArea .seaweed {
        bottom: -60px;
        width: 170px;
        height: 110px;
    }
}

.roomArea .shell {
    top: 17.2%;
    right: 5.9%;
    width: 4.21875%;
    height: 79px;
    background: url(../images/illustration/room_shell.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .roomArea .shell {
        top: 6%;    
        width: 45.5px;
        height: 50px;
    }
}

@media (max-width: 640px) {
    .roomArea .shell {
        top: 11%;
        right: 15%;
        width: 25px;
        height: 30px;
    }
}

.roomArea .snorkeling .bubbleBox {
    position: absolute;
    bottom: 90%;
    right: 0;
    width: 60px;
    height: 197px;
    z-index: 1;
}

@media (max-width: 1180px) {
    .roomArea .snorkeling .bubbleBox{
        display: none;
    }
}

.roomArea .snorkeling .bubbleBox span{
    position: absolute;
    bottom: 0;
    background: url(../images/illustration/room_bubble.png) no-repeat center/cover;
    opacity: 0;
}

.roomArea .snorkeling .bubbleBox span.bubble-1{
    left: 0;
    width: 6.66666666666667%;
    height: 2.03045685279188%;
    animation: bubble 8s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-2{
    left: 25%;
    width: 11.66666666666667%;
    height: 3.55329949238579%;
    animation: bubble 4s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-3{
    left: 33%;
    width: 8.33333333333333%;
    height: 2.53807106598985%;
    animation: bubble 3s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-4{
    left: 60%;
    width: 28.33333333333333%;
    height: 8.62944162436548%;
    animation: bubble 10s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-5{
    left: 22%;
    width: 0.1%;
    height: 3.04568527918782%;
    animation: bubble 11s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-6{
    left: 66%;
    width: 13.33333333333333%;
    height: 4.06091370558376%;
    animation: bubble 5s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-7{
    left: 20%;
    width: 8.33333333333333%;
    height: 2.53807106598985%;
    animation: bubble 7s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-8{
    right: 0;
    width: 16.66666666666667%;
    height: 5.0761421319797%;
    animation: bubble 11s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-9{
    left: 0;
    width: 13.33333333333333%;
    height: 4.06091370558376%;
    animation: bubble 8s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-10{
    left: 50%;
    width: 8.33333333333333%;
    height: 2.53807106598985%;
    animation: bubble 9s linear infinite;
}

.roomArea .snorkeling .bubbleBox span.bubble-11{
    left: 18%;
    width: 25%;
    height: 7.61421319796954%;
    animation: bubble 6s linear infinite;
}

.roomArea .snorkeling {
    top: -3.3%;
    right: 10%;
    width: 21.35416666666667%;
    height: 296px;
    background: url(../images/illustration/room_snorkeling.png) no-repeat center/contain;
    z-index: 1;
}

@media (max-width: 1180px) {
    .roomArea .snorkeling {
        width: 21.66666666666667%;
        height: 310px;
        background: url(../images/illustration/room_snorkeling2.png) no-repeat center/contain;
        z-index: -1;
    }
}

@media (max-width: 960px) {
    .roomArea .snorkeling {
        right: 15%;
        width: 208px;
        height: 260px;
    }
}

@media (max-width: 640px) {
    .roomArea .snorkeling {
        top: 1%;
        right: 20%;
        width: 150px;
        height: 180px;
    }
}

.roomArea .starfish {
    bottom: 0;
    right: 13.5%;
    width: 6.92708333333333%;
    height: 144px;
    background: url(../images/illustration/room_starfish.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .roomArea .starfish {
        width: 66.5px;
        height: 70px;
    }
}

@media (max-width: 640px) {
    .roomArea .starfish {
        width: 45px;
        height: 50px;
    }
}

.roomArea .decorate {
    bottom: 22.6%;
    right: 11.8%;
    width: 2.29166666666667%;
    height: 52px;
    background: url(../images/illustration/room_decorate.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .roomArea .decorate {
        width: 22px;
        height: 30px;
    }
}

@media (max-width: 640px) {
    .roomArea .decorate {
        bottom: 60px;
        width: 15px;
        height: 18px;
    }
}

.roomArea .decorate2 {
    bottom: 11.3%;
    right: 6.4%;
    width: 3.80208333333333%;
    height: 66px;
    background: url(../images/illustration/room_decorate2.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .roomArea .decorate2 {
        width: 36.5px;
        height: 38px;
    }
}

@media (max-width: 640px) {
    .roomArea .decorate2 {
        bottom: 110px;
        width: 25px;
        height: 25px;
    }
}

.newsArea {
    position: relative;
    background: url(../images/bg/news_bg.png) no-repeat center bottom/cover;
    padding-top: 36px;
    padding-bottom: 190px;
    margin-top: 123px;
    z-index: 2;
}

@media (max-width: 960px) {
    .newsArea {
        margin-top: 173px;
    }
}

@media (max-width: 768px) {
    .newsArea {
        margin-top: 155px;
    }
}

@media (max-width: 640px) {
    .newsArea {
        margin-top: 130px;
    }
}

@media (max-width: 480px) {
    .newsArea {
        margin-top: 120px;
    }
}

.newsArea::before {
    content: '';
    position: absolute;
    top: -123px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/bg/news_wave.png) no-repeat center top/cover;
    width: 100%;
    height: 123px;
    z-index: 2;
}

.newsArea .wrap {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    width: 1400px;
    padding-left: 17px;
}

@media (max-width: 1540px) {
    .newsArea .wrap {
        width:100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

@media (max-width: 960px) {
    .newsArea .wrap {
        -webkit-flex-direction:column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.newsArea .leftBox,.newsArea .rightBox {
    position: relative;
    width: 100%;
}

@media (min-width: 961px) {
    .newsArea .leftBox {
        width: 48.0115690527838%;
        padding-top: 13px;
    }
}

@media (min-width: 961px) {
    .newsArea .rightBox {
        width: 51.9884309472162%;
        padding-left: 19px;
    }
}

@media (max-width: 960px){
    .newsArea .rightBox{
        width: 100%;
        padding-left: 0;
        margin-top: 40px;
    }
}

.newsArea .titleBox {
    width: 100%;
}
@media (min-width: 961px) {
    .newsArea .titleBox {
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-bottom: 63px;
    }
}

.newsArea .titleBox .tag {
    color: #fff;
}

.newsArea .titleBox em {
    color: #fff;
}

.newsArea .titleBox h2 {
    color: #fff;
    margin-top: 28px;
    margin-bottom: 0
}

@media (min-width: 961px) {
    .newsArea .titleBox em[data-tag]::after {
        color:#fff
    }
}

.newsArea .illustration {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.newsArea .decorate {
    top: -3.5%;
    left: 11%;
    width: 10.3125%;
    height: 187px;
    background: url(../images/illustration/news_decorate.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .newsArea .decorate {
        top: 5%;
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 640px) {
    .newsArea .decorate {
        top: -3.5%;
        left: 5%;
    }
}

.newsArea .turtle {
    bottom: -3%;
    left: 44.2%;
    width: 10%;
    height: 184px;
    background: url(../images/illustration/news_turtle.png) no-repeat center/contain;
}

@media (max-width: 1180px) {
    .newsArea .turtle {
        width: 17.08333333333333%;
        height: 216px;
        background: url(../images/illustration/news_turtle2.png) no-repeat center/contain;
    }
}

@media (max-width: 960px) {
    .newsArea .turtle {
        bottom: 3%;
        left: calc(50% - 82px);
        width: 164px;
        height: 106px;
    }
}

.newsArea .turtle .bubbleBox {
    position: absolute;
    top: -30px;
    right: -100px;
    width: 80px;
    height: 107px;
    z-index: 1;
}

@media (max-width: 1180px) {
    .newsArea .turtle .bubbleBox{
        display: none;
    }
}

.newsArea .turtle .bubbleBox span{
    position: absolute;
    bottom: 0;
    background: url(../images/illustration/news_bubble.png) no-repeat center/cover;
    opacity: 0;
}

.newsArea .turtle .bubbleBox span.bubble-1{
    left: 0;
    width: 7.5%;
    height: 5.60747663551402%;
    animation: bubble2 6s linear infinite;
}

.newsArea .turtle .bubbleBox span.bubble-2{
    left: 40%;
    width: 13.75%;
    height: 10.2803738317757%;
    animation: bubble2 4s linear infinite;
}

.newsArea .turtle .bubbleBox span.bubble-3{
    right: 35%;
    width: 10%;
    height: 7.47663551401869%;
    animation: bubble2 5s linear infinite;
}

.newsArea .turtle .bubbleBox span.bubble-4{
    right: 0;
    width: 33.75%;
    height: 25.23364485981308%;
    animation: bubble2 3s linear infinite;
}

.newsList::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.newsList .mask {
    -webkit-mask-image: url(../images/mask/news.png);
    mask-image: url(../images/mask/news.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;   
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.newsList .Img {
    position: relative;
    max-width: 660px;
    padding-right: 6px;
    padding-bottom: 6px;
    margin: 0 auto;
}

.newsList .Img::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background: url(../images/mask/news.png) no-repeat center/contain;
    pointer-events: none;
    z-index: -1;
}

.newsList img {
    display: block;
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin: 0 auto;
    transition: all .5s;
}

.newsList img:hover {
    transform: scale(1.03);
}

.newsList .Txt {
    display: none
}

.newsTextList {
    max-width: 1180px
}

@media (min-width: 1181px) {
    .newsTextList {
        margin-left:-25px;
        margin-right: -25px
    }
}

@media (min-width: 481px) {
    .newsTextList .Txt {
        padding-left:25px;
        padding-right: 25px
    }
}

@media (min-width: 400px) and (max-width: 480px) {
    .newsTextList .Txt {
        padding-left:15px;
        padding-right: 15px
    }
}

.newsTextList .slick-current .dateBox .month,
.newsTextList .slick-current .dateBox .day,
.newsTextList .slick-current .mTitleBox .mTitle,
.newsTextList .slick-current .mTitleBox .year {
    color: #fff;
}

/* .newsTextList .slick-current h3 a {
    color: #fff;
} */

.newsTextList .slick-current h3 a::before,
.newsTextList .slick-current .newsDataBox .dateBox::before {
    background-color: #fff;
}

.newsTextList h3 a {
    position: relative;
    display: block;
    margin-bottom: 10px;
    padding-bottom: 3px;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 1px;
}

.newsTextList h3 a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 2px;
    background-color: rgb(255 255 255 / 20%);
    margin-top: 6px;
}

.newsTextList h3 a:hover:before {
    background-color: #fff;
}

.newsTextList .mTitleBox .mTitle {
    color: #c5c5c5;
}

.newsTextList .mTitleBox .year {
    color: #c4c4c4;
}

.newsTextList p {
    height: 48px;
    color: #fff;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.9px;
}

.newsTextList .slick-dots {
    margin-top: 0;
    text-align: center
}

.newsDataBox .dateBox {
    color: #fff;
}

.newsDataBox .dateBox::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 1;
    width: 90px;
    height: 1px;
    background-color: rgb(255 255 255 / 50%);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

@media (max-width: 480px) {
    .newsDataBox .dateBox::before {
        top:20px;
        left: 15px;
        width: 50px
    }
}

.newsDataBox .month {
    font-size: 20px;
    font-family: "Lobster", cursive;
    letter-spacing: 1px;
}

.newsDataBox .day {
    font-size: 80px;
    font-family: "Lobster", cursive;
    margin-left: 40px;
}

@media (max-width: 480px) {
    .newsDataBox .day {
        margin-left:20px;
        font-size: 40px
    }
}

.travelArea {
    position: relative;
    padding-top: 102px;
    z-index: 1;
}

@media (max-width: 960px) {
    .travelArea {
        padding-top: 50px;
    }
}

.travelArea .wrap {
    width: 1200px;
}

@media (max-width: 1360px) {
    .travelArea .wrap {
        width:100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.travelArea .titleBox h2 {
    margin-top: 30px;
    margin-bottom: 0;
}

@media (min-width: 1701px) {
    .travelArea .titleBox em[data-tag]::after {
        color:#fff
    }
}

@media (min-width: 681px) {
    .travelArea .titleBox {
        -webkit-align-items:flex-start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.travelArea .imgBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
}

@media (min-width: 961px) {
    .travelArea .imgBox {
        margin-top: -40px;
    }
}

@media (min-width: 681px) {
    .travelArea .imgBox {
        -webkit-align-items:flex-start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

@media (max-width: 680px) {
    .travelArea .imgBox {
        -webkit-align-items:center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.travelArea img {
    display: block;
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.travelArea .leftBox,.travelArea .rightBox {
    position: relative;
    z-index: 1;
}

.travelArea .leftBox {
    padding-right: 9px;
    padding-bottom: 9px;
}

@media (min-width: 681px) {
    .travelArea .leftBox {
        width: 48.75%;
    }
}

.travelArea .leftBox::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - 9px);
    height: calc(100% - 9px);
    background: url(../images/mask/travel.png) no-repeat center/contain;
    pointer-events: none;
    z-index: -1;
}

.travelArea .rightBox {
    padding-left: 10px;
    padding-bottom: 10px;
}

@media (min-width: 681px) {
    .travelArea .rightBox {
        width: 43.75%;
    }
}

@media (min-width: 961px) {
    .travelArea .rightBox {
        margin-top: -180px
    }
}

@media (min-width: 681px) and (max-width: 960px) {
    .travelArea .rightBox {
        margin-top:-60px;
        margin-left: 20px
    }
}

@media (max-width: 680px) {
    .travelArea .rightBox {
        margin-top: 20px
    }
}

.travelArea .rightBox::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background: url(../images/mask/travel2.png) no-repeat center/contain;
    pointer-events: none;
    z-index: -1;
}

.travelArea .leftBox a,.travelArea .rightBox a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

@media (min-width: 1181px) {
    .travelArea .leftBox:hover .Txt h3,.travelArea .leftBox:hover .Txt p,.travelArea .rightBox:hover .Txt h3,.travelArea .rightBox:hover .Txt p {
        -webkit-transform:translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
        opacity: 1
    }

    .travelArea .leftBox:hover .Txt p,.travelArea .rightBox:hover .Txt p {
        transition-delay: .2s
    }

    .travelArea .leftBox:hover .Txt::before,.travelArea .rightBox:hover .Txt::before {
        opacity: .5
    }
}

@media (max-width: 1180px) {
    .travelArea .leftBox .Txt h3,.travelArea .leftBox .Txt p,.travelArea .rightBox .Txt h3,.travelArea .rightBox .Txt p {
        -webkit-transform:translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
        opacity: 1
    }

    .travelArea .leftBox .Txt p,.travelArea .rightBox .Txt p {
        transition-delay: .2s
    }

    .travelArea .leftBox .Txt::before,.travelArea .rightBox .Txt::before {
        opacity: .5
    }
}

.travelArea .leftBox .Img img, .travelArea .rightBox .Img img{
    position: relative;
    display: block;
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin: 0 auto;
}

.travelArea .mask {
    position: relative;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;   
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.travelArea .leftBox .mask {
    -webkit-mask-image: url(../images/mask/travel.png);
    mask-image: url(../images/mask/travel.png);
}

.travelArea .rightBox .mask {
    -webkit-mask-image: url(../images/mask/travel2.png);
    mask-image: url(../images/mask/travel2.png);
}

.travelArea .Txt {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    pointer-events: auto;
    border-radius: 15px;
}

.travelArea .Txt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #58579f;
    opacity: 0;
    pointer-events: none;
    border-radius: 15px;
}

.travelArea h3 {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 400
}

@media (max-width: 960px) {
    .travelArea h3 {
        font-size:18px
    }
}

.travelArea p {
    max-width: 240px;
    line-height: 1.8
}

@media (max-width: 960px) {
    .travelArea p {
        max-width:200px
    }
}

.travelArea .illustration {
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.travelArea .fish {
    top: -9%;
    left: 25.2%;
    width: 14.89583333333333%;
    height: 204px;
    background: url(../images/illustration/travel_fish.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .travelArea .fish {
        top: -5%;
        left: 6%;
        width: 143px;
        height: 100px;
    }
}

.travelArea .decorate {
    bottom: 41.5%;
    left: 3.1%;
    width: 6.92708333333333%;
    height: 162px;
    background: url(../images/illustration/travel_decorate.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .travelArea .decorate {
        width: 66.5px;
        height: 80px;
    }
}

.travelArea .conch {
    bottom: 9%;
    left: 0;
    width: 10.20833333333333%;
    height: 266px;
    background: url(../images/illustration/travel_conch.png) no-repeat center/contain;
}

@media (max-width: 960px) {
    .travelArea .conch {
        bottom: -50px;
        width: 98px;
        height: 140px;
    }
}

footer{
    margin-top: -100px;
}

@media (max-width: 1180px){
    footer{
        margin-top: 0;
    }
}

footer::before {
    height: 815px;
}