@charset "utf-8";

main .main-slide div .s1 { background: url(../img/main/image1.jpg) no-repeat center/cover; }
main .main-slide div .s2 { background: url(../img/main/image2.jpg) no-repeat center/cover; }
main .main-slide div .s3 { background: url(../img/main/image3.jpg) no-repeat center/cover; }
main .main-slide div .s4 { background: url(../img/main/image4.jpg) no-repeat center/cover; }
main .main-slide div .s5 { background: url(../img/main/image5.jpg) no-repeat center/cover; }
main .main-slide div .s6 { background: url(../img/main/image6.jpg) no-repeat center/cover; }
main .main-slide div .s7 { background: url(../img/main/image7.jpg) no-repeat center/cover; }
main .main-slide div .s8 { background: url(../img/main/image8.jpg) no-repeat center/cover; }
main .main-slide div .s9 { background: url(../img/main/image9.jpg) no-repeat center/cover; }
main .main-slide div .s10 { background: url(../img/main/image10.jpg) no-repeat center/cover; }
main .main-slide div .s11 { background: url(../img/main/image11.jpg) no-repeat center/cover; }
main .main-slide div .s12 { background: url(../img/main/image12.jpg) no-repeat center/cover; }
main .main-slide div .s13 { background: url(../img/main/image13.jpg) no-repeat center/cover; }
main .main-slide div .s14 { background: url(../img/main/image14.jpg) no-repeat center/cover; }
main .main-slide div .s15 { background: url(../img/main/image15.jpg) no-repeat center/cover; }
main .main-slide div .s16 { background: url(../img/main/image16.jpg) no-repeat center/cover; }
main .main-slide div .s17 { background: url(../img/main/image17.jpg) no-repeat center/cover; }
main .main-slide div .s18 { background: url(../img/main/image18.jpg) no-repeat center/cover; }
main .main-slide div .s19 { background: url(../img/main/image19.jpg) no-repeat center/cover; }
main .main-slide div .s20 { background: url(../img/main/image20.jpg) no-repeat center/cover; }
main .main-slide div .s21 { background: url(../img/main/image21.jpg) no-repeat center/cover; }


.p-intro { display: flex; justify-content: space-between; padding: 40px; }
.p-intro .lefts { display: flex; flex-direction: column; justify-content: space-between; padding-top: 110px; }
.p-intro .lefts h1 { margin-bottom: 80px; }
.p-intro .lefts p { margin-bottom: 40px; }
.p-intro .lefts .imgs { display: flex; margin-top: auto;  margin-bottom: 0; }
.p-intro .lefts .imgs .imgbox { width: 200px; aspect-ratio: 1/1; display: inline-block; }
.p-intro .lefts .imgs> :not(:last-child) { margin-right: 2.314%; }
.p-intro .lefts .imgs .img1 { background-image: url('../img/main/image8.jpg'); }
.p-intro .lefts .imgs .img2 { background-image: url('../img/main/image5.jpg'); }
.p-intro .lefts .imgs .img3 { background-image: url('../img/main/image11.jpg'); }
.p-intro .img4 { width: 50%; height: 100%; background-image: url('../img/main/image3.jpg'); }


.r-intro { padding: 150px 40px 0; }
.r-intro .topbox { display: flex; justify-content: space-between; align-items: end; margin-bottom: 60px; }
.r-intro .topbox a { width: auto; padding: 5px 0 0 10px; }
.r-intro .rooms-slide { width: 100%; margin-bottom: 60px; overflow: hidden; }
.r-intro .rooms-slide div .swiper-slide .imgbox { width: 100%; aspect-ratio: 1.618/1; margin-bottom: 40px; }
.r-intro .rooms-slide div .s1 .imgbox { background-image: url('../img/sub2/1/image5.jpg'); }
.r-intro .rooms-slide div .s2 .imgbox { background-image: url('../img/sub2/1/image3.jpg'); }
.r-intro .rooms-slide div .s3 .imgbox { background-image: url('../img/sub2/1/image2.jpg'); }
.r-intro .rooms-slide div .s4 .imgbox { background-image: url('../img/sub2/2/image2.jpg'); }
.r-intro .rooms-slide div .s5 .imgbox { background-image: url('../img/sub2/3/image5.jpg'); }
.r-intro .rooms-slide div .swiper-slide .imgbox a { display: block; width: 100%; height: 100%; }
.r-intro .rooms-slide div .swiper-slide h2 { margin-bottom: 30px;  }
.r-intro .controls { display: flex; justify-content: center; align-items: center; }

.r-intro .controls .swiper-button-prev::after, .r-intro .controls .swiper-button-next::after { font-size: 14px; color: #5b4a26; }
.r-intro .swiper-button-prev, .r-intro .swiper-button-next, .r-intro .swiper-pagination { position: static; height: auto; }
.r-intro .swiper-button-prev, .r-intro .swiper-button-next { margin-top: 0; }
.r-intro .swiper-pagination { width: auto; } 


.e-intro { position: relative; }
.e-intro> div { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; width: 100%; height: 610px; padding-right: 40px; }
.e-intro> div> div { width: 50%; height: 100%; }
.e-intro> div .lefts { position: relative; }
.e-intro> div .lefts> ul { position: absolute; left: 50%; transform: translateX(-50%); width: 610px; }
.e-intro> div .lefts ul li { display: flex; justify-content: space-between;  }
.e-intro> div .lefts ul> :not(:last-child) { margin-bottom: 80px; }
.e-intro> div .lefts ul li h1 { text-align: right; }
.e-intro> div .lefts ul li .imgbox { width: 150px; aspect-ratio: 1/1; }
.e-intro> div .lefts ul li .img1 { background-image: url('../img/sub3/1/image3.jpg'); }
.e-intro> div .lefts ul li .img2 { background-image: url('../img/sub3/2/image3.jpg'); }
.e-intro> div .lefts ul li .img3 { background-image: url('../img/sub3/3/image1.jpg'); }
.e-intro> div .lefts ul li .img4 { background-image: url('../img/sub3/4/image4.jpg'); }
.e-intro> div .lefts ul li .img5 { background-image: url('../img/sub3/5/image1.jpg'); }
.e-intro> div .lefts ul li .img6 { background-image: url('../img/sub3/6/image1.jpg'); }
.e-intro> div .lefts ul li .blankbox { width: 150px; aspect-ratio: 1/1; }

.e-intro> div .rights { display: flex; flex-direction: column; justify-content: space-between;  }
.e-intro> div .rights .imgbox { position: relative; width: 100%; aspect-ratio: 1.618/1; background-image: url('../img/sub3/1/image3.jpg'); }
/* .e-intro> div .rights .imgbox:hover a { opacity: 0.8; } */
.e-intro> div .rights .imgbox a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 130px; height: 130px; background: #fffbf6; opacity: 0; border-radius: 50%; line-height: 130px; text-align: center; transition: all .3s ease-in-out; }
.e-intro> div .rights .imgbox:hover a { opacity: .8; }
.e-intro> div .rights .txtbox.on { display: flex; }
.e-intro> div .rights .txtbox { display: none; justify-content: space-between; align-items: end; }
.e-intro> div .rights .txtbox p { text-align: right; }


footer .imgbox { background-image: url('../img/main/image5.jpg'); }

@media screen and (max-width: 1440px){
    .p-intro .lefts { width: 50%; }
    .p-intro .img4 { width: 45%; }
    .r-intro .rooms-slide div .swiper-slide h2 { margin-bottom: 20px; }
    .e-intro> div .lefts> ul { width: 90%; }
}

@media screen and (max-width: 1024px){
    main .txtbox { font-size: 16px; width: 80%; }

    .p-intro { padding: 80px 4% 40px;  }
    .p-intro .lefts .imgs .imgbox { width: 100px;  }
    .p-intro .img4 { width: 70%; }

    .r-intro { padding: 130px 4% 0; }
    .r-intro .topbox { margin-bottom: 40px; }
    .r-intro .rooms-slide { margin-bottom: 40px; }

    .e-intro> div { width: 100%; height: auto; padding: 0 4%; }
    .e-intro> div .lefts { width: 40%; }
    .e-intro> div .lefts> ul { position: static; transform: none; width: auto; }
    .e-intro> div .lefts ul> :not(:last-child) { margin-bottom: 40px; }
    .e-intro> div .lefts ul li .imgbox { width: 100px; }
    .e-intro> div .lefts ul li .blankbox { width: 100px; }
    .e-intro> div .rights { display: block; width: 55%; }
    .e-intro> div .rights .imgbox { margin-bottom: 40px; aspect-ratio: 4/3; }
    .e-intro> div .rights .imgbox a { opacity: 0.8; width: 100px; height: 100px; line-height: 100px; }
    .e-intro> div .rights .imgbox a i { display: none; }
}

@media screen and (max-width: 840px){
    .p-intro { display: block; padding: 80px 4% 40px; }
    .p-intro .lefts { width: 100%; padding-top: 0; margin-bottom: 20px; }
    .p-intro .lefts .txtbox { margin-bottom: 40px; }
    .p-intro .lefts h1 { margin-bottom: 40px; }
    .p-intro .lefts .imgs .imgbox { width: 33%; }
    .p-intro .img4 { width: 100%; aspect-ratio: 4/3; }

    .r-intro { padding: 80px 4% 40px; }
    .r-intro .rooms-slide div .swiper-slide .imgbox { margin-bottom: 20px; }

    .e-intro { padding: 80px 4% 120px; }
    .e-intro> div { position: static; transform: none; display: block; padding: 0; }
    .e-intro> div> div { width: 100%; }
    .e-intro> div .lefts { width: 100%; margin-bottom: 20px; padding: 0; }
    .e-intro> div .lefts ul> :not(:last-child) { margin-bottom: 20px; }
    .e-intro> div .lefts ul li h1 { order: -1; text-align: left; margin-bottom: 20px; } 
    .e-intro> div .lefts ul li .imgbox { width: 30%; aspect-ratio: 4/3; }
    .e-intro> div .lefts ul li .img1 { background: none; aspect-ratio: initial; }
    .e-intro> div .lefts ul li .blankbox { width: 30%; aspect-ratio: 4/3; background: url('../img/sub3/1/image3.jpg') no-repeat center/cover; }
    .e-intro> div .rights { width: 100%; }
    .e-intro> div .rights .imgbox { aspect-ratio: 1.618/1; }
    .e-intro> div .rights .txtbox.on { display: block; }
    .e-intro> div .rights .txtbox h2 { margin-bottom: 20px; }
    .e-intro> div .rights .txtbox p { text-align: left; }
}

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

    main .txtbox { font-size: 14px; }
    .p-intro, .r-intro  { padding: 80px 4% 0;  }
    .e-intro { padding: 80px 4%; }

    
}