@charset "utf-8";

section div .subject { position: relative; text-align: center;}
section div .subject > h3 { margin: 0px; padding: 0px; font-family: 'Asul'; font-size: 12px; font-weight: 400; color: #929292; letter-spacing: 1px; }
section div .subject > h2:nth-of-type(1) { position: relative; margin: 15px 0px 0px; padding: 0; font-family: 'Noto Serif KR'; font-size: 20px; font-weight: 500; letter-spacing: 3; }
section div .subject > h2:nth-of-type(2) { position: relative; margin: 0px 0px 0px; padding: 0px 0px 0px 16px; font-family: 'Noto Serif KR'; font-size: 32px; font-weight: 500; letter-spacing: 18; }

/*main start*/
 
#main { position: relative; overflow: hidden; width:100%; height:100vh; }

#main > img { position: fixed; }

#main > .text { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 101; color: #FFF; text-align: center; }
#main > .text > h1 { margin: 0px; padding: 0px; font-family: 'Frank Ruhl Libre'; font-size: 38px; font-weight: 600; letter-spacing: 3px; }
#main > .text > h1 > span { font-family: 'Noto Serif KR'; }
#main > .text h3 { margin: 0px auto; padding: 0px; font-family: 'Noto Sans KR'; width: 220px; font-size: 12px; font-weight: 400; letter-spacing: 1.5px; }
#main > .text > a { position: relative; display: block; margin: 0px auto; width: 120px; color: #FFF;}
#main > .text > a::after { content: ""; position: absolute; bottom: -8px; left: 50%; width: 120px; height: 1px; background: #FFF; transform: translateX(-50%)}

#main .sec1_slider { padding: 0px; width: 100%; height:100%; }
#main .sec1_slider .swiper-slide { position: relative; width:100%; height:100%;}
#main .sec1_slider .swiper-slide h3 { font-family: 'Cormorant'; font-size: 21px; font-style: italic; color: #FFF; }

#main .sec1_slider .swiper-slide.img1{background: url(../img/main/image1.jpg) no-repeat; background-size: cover; background-position: center; }
#main .sec1_slider .swiper-slide.img2{background: url(../img/main/image2.jpg) no-repeat; background-size: cover; background-position: center;}
#main .sec1_slider .swiper-slide.img3{background: url(../img/main/image3.jpg)no-repeat; background-size: cover; background-position: center;}
#main .sec1_slider .swiper-slide.img4{background: url(../img/main/image4.jpg) no-repeat; background-size: cover; background-position: center;}
#main .sec1_slider .swiper-slide.img5{background: url(../img/main/image5.jpg) no-repeat; background-size: cover; background-position: center;}
#main .sec1_slider .swiper-slide.img6{background: url(../img/main/image6.jpg) no-repeat; background-size: cover; background-position: center;}
#main .sec1_slider .swiper-slide.img7{background: url(../img/main/image7.jpg) no-repeat; background-size: cover; background-position: center;}
#main .sec1_slider .swiper-slide.img8{background: url(../img/main/image8.jpg) no-repeat; background-size: cover; background-position: center;}
#main .sec1_slider .swiper-slide.img9{background: url(../img/main/image9.jpg) no-repeat; background-size: cover; background-position: center;}
#main .sec1_slider .swiper-slide.img10{background: url(../img/main/image10.jpg) no-repeat; background-size: cover; background-position: center;}

.sec1-navi-wrapper { position: absolute; width: 100%; height: 100vh; top: 0px; }
.sec1-navi-wrapper > div { position: relative; margin: 0px auto; width: 1280px; height: 100vh; }

.sec1-next:after, .sec1-prev:after { content: "";  }
.sec1-next { right: 0%; top: 54%; width: 18px; height: 21px; background: url(../img/arrow2.png); transform: translateY(-50%); z-index: 999; }
.sec1-prev { left: 0%; top: 54%; width: 18px; height: 21px; background: url(../img/arrow.png); transform: translateY(-50%); z-index: 999; }

#main .swiper-pagination-fraction, #main .swiper-pagination-custom, #main .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 55px; font-weight: 'Noto Sans KR'; color: #FFF; }
.swiper-pagination-current { margin-right: 10px; }
.swiper-pagination-total { margin-left: 10px; }

#main .swiper-pagination-bullet { height: 8px; width: 8px; background: #FFF; opacity: 0.5; }
#main .swiper-pagination-bullet-active { width: 8px; opacity: 1; }

/*main end*/  
/*info start*/

#info { position: relative; width: 100%; padding: 100px 0px 0px; }
#info .info-in { margin: 0px auto; padding: 0px; width: 1280px; text-align: center; }

#info .info-in img { margin: 0px 0px 20px; }
#info .info-in h2 { margin: 0px; font-family: 'Frank Ruhl Libre'; font-size: 34px; font-weight: 400; letter-spacing: 3; }
#info .info-in h3 { margin: 0px; margin-top: 12.5px; font-size: 14px; }

#info .info-in > .image { margin-top: 60px; width: 100%; height: 420px; background: url(../img/sub1/image3.jpg) no-repeat; background-position: 50% 30%; background-size: cover; }

/*info end*/  
/*rooms start*/

#rooms { position: relative; width: 100%; padding: 120px 0px 140px; }
#rooms .rooms-in { margin: 0px auto; padding: 0px; width: 1280px; text-align: center; }

#rooms .rooms-in .room-list { position: relative; }

#rooms .rooms-in .left { padding-top: 40px; float: left; width: 35%; text-align: left; }
#rooms .rooms-in h2 { margin: 0px; font-family: 'Frank Ruhl Libre'; font-size: 34px; font-weight: 400; letter-spacing: 3; line-height: 34px; }
#rooms .rooms-in h3 { margin: 0px; margin-top: 15px; font-size: 14px; }

#rooms .rooms-in .right { display: inline-block; width: 65%; }
#rooms .rooms-in .right .room-list { display: flex; flex-wrap: wrap; justify-content: space-between; }
#rooms .rooms-in .right .room-list .room { padding-bottom: 50px; width: 48.5%; text-align: left; }
#rooms .rooms-in .right .room-list .room a img { width: 100%; }

#rooms .rooms-in .right .room-list .room h3 { margin: 20px 0px 0px; font-size: 18px; }
#rooms .rooms-in .right .room-list .room h4 { margin: 7.5px 0px 0px; font-size: 13px; position: relative; }
#rooms .rooms-in .right .room-list .room h4::after { content: ""; position: absolute; top: 42.5px; left: 0px; width: 100%; height: 1px; background: #383838; }
#rooms .rooms-in .right .room-list .room a { position: relative; display: block; font-family: 'Noto Sans KR'; font-size: 13px; text-align: right; transition: .2s; }
#rooms .rooms-in .right .room-list .room .black::after { content: ""; position: absolute; left: 0px; width: 100%; height: 100%; background: rgba(255,255,255,.0); transition: .3s; }
#rooms .rooms-in .right .room-list .room a p { margin: 0px; margin-top: 40px; }

#rooms .rooms-in .right .room-list .room a:hover { color: #ccc; }
#rooms .rooms-in .right .room-list .room .black:hover::after { background: rgba(255,255,255,.5); }

/*rooms end*/
/*banner start*/

#banner { position: relative; width: 100%; height: 420px; background: url(../img/sub1/image12.jpg); background-size: cover; background-position: 50% 50%; }
#banner::after { content: ""; position: absolute; width: 1px; height: 120px; background: #FFF; bottom: 0px; left: 50%; transform: translateX(-50%); }
#banner > .image { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
#banner > .image > h3 { margin: 15px 0px 0px; font-size: 14px; font-weight: 300; color: #FFF; }

/*banner end*/
/*enjoy start*/

#enjoy { position: relative; padding: 250px 0px 0px; width: 100%;  }
#enjoy::after { content: ""; position: absolute; width: 1px; height: 120px; background: #c2c2c2; top: 0px; left: 50%; transform: translateX(-50%); }

#enjoy .enjoy-in { position: relative; margin: 0px auto; padding: 0px; width: 1280px; text-align: center; clear: both; overflow: hidden; }

#enjoy .enjoy-in .enjoy-wrap { position: relative; float: left; width: 65%; }

#enjoy .enjoy-in .enjoy-wrap .picture { position: relative; height: 420px; background: #000; }
#enjoy .enjoy-in .enjoy-wrap .picture > .tap { transition: .3s; }
#enjoy .enjoy-in .enjoy-wrap .picture > .tap:nth-child(1) { position: absolute; width: 100%; height: 100%; background: url(../img/sub3/1/image3.jpg); background-size: cover; background-position: center; opacity: 0; }
#enjoy .enjoy-in .enjoy-wrap .picture > .tap:nth-child(2) { position: absolute; width: 100%; height: 100%; background: url(../img/sub3/2/image1.jpg); background-size: cover; background-position: center; opacity: 0;  }
#enjoy .enjoy-in .enjoy-wrap .picture > .tap:nth-child(3) { position: absolute; width: 100%; height: 100%; background: url(../img/sub3/3/image1.jpg); background-size: cover; background-position: center; opacity: 0;  }
#enjoy .enjoy-in .enjoy-wrap .picture > .tap:nth-child(4) { position: absolute; width: 100%; height: 100%; background: url(../img/sub3/4/image1.jpg); background-size: cover; background-position: center; opacity: 0;  }
#enjoy .enjoy-in .enjoy-wrap .picture > .tap.on { opacity: 1; z-index: 1; }


#enjoy .enjoy-in .enjoy-wrap .picture .tap .black{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;  background: rgba(0,0,0,0); transition: .3s; }
#enjoy .enjoy-in .enjoy-wrap .picture:hover .tap .black { background: rgba(0,0,0,.5); }

#enjoy .enjoy-in .enjoy-wrap .picture .tap .black > div { position: absolute; top: calc(50% - 25px); left: calc(50% - 65px); width: 130px; height: 50px; background: #FFF; opacity: 0; transition: .3s; }
#enjoy .enjoy-in .enjoy-wrap .picture .tap .black > div > h3 { margin: 0; padding: 0; font-size: 13px; font-weight: 100; line-height: 50px; }
#enjoy .enjoy-in .enjoy-wrap .picture:hover .tap .black > div { opacity: 1;  }


#enjoy .enjoy-in .text { padding-top: 20px; padding-left: 164px; width: 440px; float: right; text-align: right; }
#enjoy .enjoy-in .text h2 { margin: 0px; font-family: 'Frank Ruhl Libre'; font-size: 34px; font-weight: 400; letter-spacing: 3; line-height: 38px; }
#enjoy .enjoy-in .text h3 { margin: 0px; margin-top: 15px; font-size: 14px; }
#enjoy .enjoy-in .text ul { margin-top: 40px; padding-top: 35px; border-top: 1px solid #383838; text-align: left; }
#enjoy .enjoy-in .text ul li { display: inline-block; width: 48%; height: 25px; font-size: 13px; }
#enjoy .enjoy-in .text ul li p { display: inline-block; margin: 0px; width: auto; cursor: pointer; }


/*enjoy end*/
/*out start*/

#out { position: relative; width: 100%; padding: 150px 0px 80px; }
#out .out-in { margin: 0px auto; padding: 0px; width: 1280px; text-align: center; }

#out .out-in > p { margin: 0px; font-size: 14px; color: #adadad; font-style: italic; }

#out .out-in .box-wrap { display: flex; position: relative; z-index: 1; flex-wrap: wrap; justify-content: space-between; padding-top: 120px; }
#out .out-in .box-wrap div { width: 19%; }
#out .out-in .box-wrap div img { width: 100%; }

#out .box-gray { position: absolute; bottom: 0px; width: 100%; height: 200px; background: #e9e9e9; }

/*out end*/

@media (max-width: 1280px) {
    
    .sec1-navi-wrapper > div { width: 100%; }
    .sec1-prev { left: 20px; }
    .sec1-next { right: 20px; }
    
    #info { position: relative; width: 100%; padding: 80px 0px 0px; }
    #info .info-in { padding: 0px 20px; width: 100%; }
    
    #rooms { position: relative; width: 100%; padding: 80px 0px 60px; }
    #rooms .rooms-in { padding: 0px 20px; width: 100%; }
    
    #banner::after { height: 80px; }
    
    #enjoy { position: relative; width: 100%; padding: 160px 0px 0px; }
    #enjoy::after { height: 80px; }
    #enjoy .enjoy-in { padding: 0px 20px; width: 100%; }
    #enjoy .enjoy-in .enjoy-wrap { width: 65%; }
    #enjoy .enjoy-in .text { padding-left: 60px; width: 340px; }
    
    #out { position: relative; width: 100%; padding: 130px 0px 80px; }
    #out .box-gray { display: none; }
    #out .out-in { padding: 0px 20px; width: 100%; }
    #out .out-in .box-wrap { padding-top: 100px; }
    
}

@media (max-width: 1040px) {

    #rooms .rooms-in .left { float: none; padding-top: 0px; padding-bottom: 30px; width: 100%; }
    #rooms .rooms-in .right { float: none; width: 100%; }

    #enjoy .enjoy-in .enjoy-wrap { width: 100%; }
    #enjoy .enjoy-in .text { width: 100%; padding-left: 0px; }
    #enjoy .enjoy-in .text ul { text-align: right; }
    #enjoy .enjoy-in .text ul li { width: 15%; padding-left: 10px; }
    
    #out { padding: 100px 0px 80px; }
    #out .out-in .box-wrap { padding-top: 80px; }
    
}

@media (max-width: 780px) { 

    #enjoy .enjoy-in .text ul li { width: 48%; }
    
    #out { padding: 100px 0px 60px; }
}

@media (max-width: 740px) {
    
    #main { height: 70vh; }
    #main > .text { top: 56%; }
    #main > .text > h1 { font-size: 28px; }
    .sec1-prev { top: 42%; }
    .sec1-next { top: 42%; }
    
    #main .swiper-pagination-fraction, #main .swiper-pagination-custom, #main .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 40px; }
    
    #info { padding: 60px 0px 0px; }
    #info .info-in h2 { font-size: 32px; letter-spacing: 1; }
    #info .info-in h3 { font-size: 13px; margin-top: 7.5px; }
    #info .info-in > .image { margin-top: 50px; height: 320px; }
    
    #rooms { padding: 70px 0px 50px; }
    #rooms .rooms-in h2 { font-size: 32px; letter-spacing: 1; }
    #rooms .rooms-in h3 { font-size: 13px; margin-top: 7.5px; }
    #rooms .rooms-in .right .room-list .room h3 { font-size: 16px; }
    #rooms .rooms-in .right .room-list .room h4 { font-size: 12px; }
    #rooms .rooms-in .right .room-list .room a p { font-size: 12px; }
    
    #banner { height: 320px; }
    #banner::after { height: 60px; }
    
    #enjoy { padding: 120px 0px 0px; }
    #enjoy::after { height: 60px; }
    #enjoy .enjoy-in .enjoy-wrap .picture { height: 320px; }
    #enjoy .enjoy-in .text h2 { font-size: 32px; letter-spacing: 1; }
    #enjoy .enjoy-in .text h3 { font-size: 13px; margin-top: 7.5px; }
    #enjoy .enjoy-in .text ul { margin-top: 30px;; padding-top: 20px; }
    
    #out .out-in p { font-size: 13px; }
    
}

@media (max-width: 640px) {
    
    #rooms .rooms-in .right .room-list .room h4::after { top: 60px; }
    #rooms .rooms-in .right .room-list .room a p { margin-top: 50px }
    
}


@media (max-width: 380px) {
    
    #info .info-in h2 { font-size: 22px; }
    #info .info-in > .image { height: 200px; }
    
    #rooms { padding: 50px 0px 10px; }
    #rooms .rooms-in h2 { font-size: 22px; line-height: 28px; }
    
    #banner { height: 200px; }
    #banner::after { height: 40px; }
    #banner > .image { width: 100%; }
    
    #enjoy { padding: 80px 0px 0px; }
    #enjoy::after { height: 40px; }
    #enjoy .enjoy-in .text h2 { font-size: 22px; line-height: 28px; }
    #enjoy .enjoy-in .text ul li { width: 48%; }
    #enjoy .enjoy-in .enjoy-wrap .picture { height: 200px; }
    
    #out { padding: 80px 0px 60px; }
    #out .out-in .box-wrap { padding-top: 40px; }
    
}