@charset "utf-8";

/*main start*/

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

#main > .txt { position: absolute; top: auto; bottom: 115px; left: 50%; transform: translateX(-50%); z-index: 101; color: #FFF; text-align: center; width: 100%; transition: .4s; }
#main > .txt > .txt-in { display: inline-block; margin: 0px auto; width: 1200px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.5); }
#main > .txt > .txt-in > h1 { display: inline-block; position: relative; z-index: 1; position: relative; margin: 0px auto; font-family: 'Cormorant'; font-size: 64px; font-weight: 400; letter-spacing: -2px; line-height: 72px; }
#main > .txt > .txt-in > p { display: block; width: 300px; margin: 20px auto 0px; font-family: 'Noto Serif KR'; font-size: 13px; font-weight: 400; line-height: 24px; }

#main .sec1_slider { position: relative; }


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

.sec1-navi-wrapper { position: relative; width: 100%; height: 100%; top: 0px; }

.sec1-next:after, .sec1-prev:after { content: "";  }
.sec1-next { right: 480px; top: auto; bottom: -100px; width: 50px; height: 8px; background: url(../img/arrow2.png); background-size: cover; transform: translateY(-50%); z-index: 999; transition: .4s; }
.sec1-prev { left: 480px; top: auto; bottom: -100px; width: 50px; height: 8px; background: url(../img/arrow.png); background-size: cover; transform: translateY(-50%); z-index: 999; transition: .4s; }

#main .swiper-pagination-fraction, #main .swiper-pagination-custom, #main .swiper-container-horizontal > #main .swiper-pagination-bullets { bottom: -102.5px;  font-family: 'Noto Serif KR'; font-size: 18px; color: #FFF; color: transparent; text-align: center; }
#main .swiper-pagination-current { font-family: 'Crimson Text'; font-size: 18px; font-weight: 600; color: #FFF; letter-spacing: -2; }
#main .swiper-pagination-total { margin-left: 35px; position: relative; font-family: 'Crimson Text'; font-size: 18px; font-weight: 600; color: #FFF; letter-spacing: -2; }
#main .swiper-pagination-total::before { content: ''; position: absolute; left: -32.5px; width: 19px; height: 32px; background: url(../img/slash.png); }

/*main end*/  

section > .defalt-w { margin: 0px auto; width: 1200px; }
section > .defalt-w > .title { text-align: center; }
section > .defalt-w > .title > p { font-size: 13px; line-height: 22px; }
section > .defalt-w > .title > h2 { margin-top: 30px; font-family: "a Auto Signature"; font-size: 60px; font-weight: 400; }
section > .defalt-w > .title > p:nth-of-type(2) { margin-top: 30px; }

/*intro start*/

#intro { padding-top: 180px; }

#intro > .intro-in > .greeting { margin-top: 100px; }
#intro > .intro-in > .greeting > .greeting-in > .top { overflow: hidden; }
#intro > .intro-in > .greeting > .greeting-in > .top > div { float: left; }
#intro > .intro-in > .greeting > .greeting-in > .top > .txt { background: #f8f7f4; width: 555px; text-align: center; height: auto; }
#intro > .intro-in > .greeting > .greeting-in > .top > .txt { padding: 35px 0px 50px; }
#intro > .intro-in > .greeting > .greeting-in > .top > .txt > h3 { margin-top: 10px; font-family: 'Cormorant'; font-size: 40px; }
#intro > .intro-in > .greeting > .greeting-in > .top > .txt > p { margin-top: 20px; font-size: 13px; }
#intro > .intro-in > .greeting > .greeting-in > .top > .txt > .link { margin-top: 30px; }
#intro > .intro-in > .greeting > .greeting-in > .top > .txt > .link > a { display: inline-block; position: relative; font-family: 'Crimson Text'; }
#intro > .intro-in > .greeting > .greeting-in > .top > .txt > .link > a::after { content: ''; position: absolute; left: 0px; bottom: -5px; width: 100%; height: 1px; background: #8e877c; }
#intro > .intro-in > .greeting > .greeting-in > .top > .pic { margin-top: -15px; float: right; }
#intro > .intro-in > .greeting > .greeting-in > .top > .pic > img { width: 100%; }
#intro > .intro-in > .greeting > .greeting-in > .bottom { margin-top: -327px; }

#intro > .intro-in > .service { margin-top: 125px; }
#intro > .intro-in > .service > .service-in > .service-li { display: flex; justify-content: space-between; text-align: center; }
#intro > .intro-in > .service > .service-in > .service-li > .list { width: 30%; }
#intro > .intro-in > .service > .service-in > .service-li > .list > .ico { position: relative; margin: 0px auto; width: 110px; height: 110px;  background: #f8f7f4; border-radius: 50%; }
#intro > .intro-in > .service > .service-in > .service-li > .list > .ico > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#intro > .intro-in > .service > .service-in > .service-li > .list > .txt { margin-top: 30px; }
#intro > .intro-in > .service > .service-in > .service-li > .list > .txt > h3 { font-family: 'Cormorant'; font-size: 30px; font-weight: 500; }
#intro > .intro-in > .service > .service-in > .service-li > .list > .txt > p { margin-top: 25px; font-size: 13px; line-height: 22px; }

/*intro end*/
/*rooms start*/

#rooms { position: relative; padding-top: 170px; }
#rooms > img { position: absolute; right: 0px; bottom: -480px; }

#rooms > .rooms-in > .rooms-list { margin-top: 100px; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in { display: flex; justify-content: space-between; }

#rooms > .rooms-in > .rooms-list > .rooms-list-in > .list { width: 364px; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li { font-family: 'Cormorant'; font-size: 24px; line-height: 74px; border-bottom: 1px solid #d1ceca; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li:nth-of-type(n+4) { font-family: 'Noto Serif KR'; font-size: 20px; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li > a { position: relative; display: block; width: 100%; line-height: 74px; color: #cac8c3; transition: .4s; cursor: pointer;}
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li.on > a { color: #8c857a; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li > a > img { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); opacity: 0; transition: .4s; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li.on > a > img { opacity: 1; }

#rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic { width: 60%; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul { position: relative; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul > li { position: absolute; opacity: 0; transition: .4s; z-index: 0; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul > li > img { width: 100%; } 
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul > li.on { opacity: 1; z-index: 1; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul > li > .link { position: absolute; width: 142px; height: 45px; left: 50%; top: 45%; transform: translateX(-50%); border: 1px solid #8c857a; background: #f8f7f4; text-align: center; opacity: 0; transition: .4s; }
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul > li:hover > .link { opacity: 1; } 
#rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul > li > .link > a { display: block; width: 100%; font-family: 'Crimson Text'; line-height: 45px; }

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

#banner { padding-top: 380px; text-align: center; }

#banner > .banner-in > .connect > h4 { margin-top: 30px; }
#banner > .banner-in > .reserve { margin-top: 190px; height: 85vh; color: #fff; background: #837b6d; }
#banner > .banner-in > .reserve > .reserve-in { position: relative; height: 100%; }
#banner > .banner-in > .reserve > .reserve-in > img:nth-of-type(1) { position: absolute; left: 0px; top: -5%; width: 32.5%; }
#banner > .banner-in > .reserve > .reserve-in > img:nth-of-type(2) { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); width: 30%; }

#banner > .banner-in > .reserve > .reserve-in > .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; }
#banner > .banner-in > .reserve > .reserve-in > .txt > h3 { font-family: "a Auto Signature"; font-size: 60px; font-weight: 400; }
#banner > .banner-in > .reserve > .reserve-in > .txt > p { margin-top: 20px; font-size: 13px; line-height: 22px; }
#banner > .banner-in > .reserve > .reserve-in > .txt > .link { margin: 55px auto 0px; width: 142px; height: 45px; border: 1px solid rgba(255,255,255,1); text-align: center; transition: .4s; }
#banner > .banner-in > .reserve > .reserve-in > .txt > .link:hover { border: 1px solid rgba(255,255,255,0.3); }
#banner > .banner-in > .reserve > .reserve-in > .txt > .link > a { display: block; width: 100%; line-height: 45px; font-family: 'Crimson Text'; color: #fff; }

/*banner end*/
/*facility start*/

#facility { position: relative; padding-top: 170px; }
#facility > img { position: absolute; left: 0px; z-index: 1; }

#facility .fac-slide { position: relative; }
#facility .swiper-container { margin-top: 55px; }
#facility .fac-slider .swiper-slide { position: relative; height: 48.5vh; }

#facility .fac-slider .swiper-slide.img1{background: url(../img/sub3/1/image1.jpg) no-repeat; background-size: cover; background-position: 50% 50%; position: relative; z-index: 1;}
#facility .fac-slider .swiper-slide.img2{background: url(../img/sub3/2/image1.jpg) no-repeat; background-size: cover; background-position: 50% 50%; position: relative; z-index: 1;}
#facility .fac-slider .swiper-slide.img3{background: url(../img/sub3/3/image1.jpg) no-repeat; background-size: cover; background-position: 65% 50%; position: relative; z-index: 1;}
#facility .fac-slider .swiper-slide.img4{background: url(../img/sub3/4/image2.jpg) no-repeat; background-size: cover; background-position: 50% 0%; position: relative; z-index: 1;}

#facility .fac-slider .swiper-slide .link { position: absolute; width: 142px; height: 45px; left: 50%; top: 45%; transform: translateX(-50%); border: 1px solid #8c857a; background: #f8f7f4; text-align: center; opacity: 0; transition: .4s; }
#facility .fac-slider .swiper-slide:hover .link { opacity: 1; }
#facility .fac-slider .swiper-slide .link { opacity: 0; } 
#facility .fac-slider .swiper-slide .link a { display: block; width: 100%; font-family: 'Crimson Text'; line-height: 45px; }

#facility .fac-slider { margin-top: 60px; }
#facility .swiper-wrapper { height: auto; }

.fac-next:after, .fac-prev:after { content: "";  }
.fac-next { right: 480px; top: auto; bottom: -80px; width: 50px; height: 8px; background: url(../img/arrow4.png); background-size: cover; transform: translateY(-50%); z-index: 999; transition: .4s; }
.fac-prev { left: 480px; top: auto; bottom: -80px; width: 50px; height: 8px; background: url(../img/arrow3.png); background-size: cover; transform: translateY(-50%); z-index: 999; transition: .4s; }

#facility .swiper-pagination-fraction, #main .swiper-pagination-custom, #main .swiper-container-horizontal > #main .swiper-pagination-bullets { bottom: -82.5px; font-family: 'Noto Serif KR'; font-size: 18px; color: #FFF; color: transparent; text-align: center; }
#facility .swiper-pagination-current { font-family: 'Crimson Text'; font-size: 18px; font-weight: 600; color: #8c857a; letter-spacing: -2; }
#facility .swiper-pagination-total { margin-left: 35px; position: relative; font-family: 'Crimson Text'; font-size: 18px; font-weight: 600; color: #8c857a; letter-spacing: -2; }
#facility .swiper-pagination-total::before { content: ''; position: absolute; left: -32.5px; width: 19px; height: 32px; background: url(../img/slash2.png); }


/*facility end*/
/*map start*/

#map { margin-top: 215px; background: #f8f7f4; }
#map > .map-in { margin: 0px auto; padding: 110px 0px 160px; width: 1200px; }

#map > .map-in > .adress > .adress-in { display: flex; justify-content: space-between; }
#map > .map-in > .adress > .adress-in > .title { position: relative; display: none; }
#map > .map-in > .adress > .adress-in > .title > img { position: absolute; right: 0px; bottom: 10px; }
#map > .map-in > .adress > .adress-in > .title > h2 { margin-top: 120px; font-family: "Cormorant"; font-weight: 400; font-size: 40px; margin-top: 60px; }
#map > .map-in > .adress > .adress-in > .title > p { margin-top: 20px; font-size: 12px; line-height: 22px; }

#map > .map-in > .adress > .adress-in > .kakao-m { width: 48%; }
#map > .map-in > .adress > .adress-in > .txt { width: 45%; }
#map > .map-in > .adress > .adress-in > .txt > .title { position: relative; text-align: left; }
#map > .map-in > .adress > .adress-in > .txt > .title > img { position: absolute; top: -30px; left: 250px; }
#map > .map-in > .adress > .adress-in > .txt > .title > h2 { margin-top: 120px; font-family: "Cormorant"; font-size: 50px; font-weight: 400; }
#map > .map-in > .adress > .adress-in > .txt > .title > p { margin-top: 30px; font-size: 13px; line-height: 22px;  }

#map > .map-in > .adress > .adress-in > .txt > .direct { margin-top: 40px; }
#map > .map-in > .adress > .adress-in > .txt > .direct > ul > li { display: flex; justify-content: space-between; padding: 30px 0px; border-bottom: 1px solid #d1ceca; }
#map > .map-in > .adress > .adress-in > .txt > .direct > ul > li > p { display: block; font-size: 13px; }
#map > .map-in > .adress > .adress-in > .txt > .direct > ul > li > p:nth-of-type(2) {text-align: right; }

#map > .map-in > .adress > .adress-in > .txt > .direct > .link { margin-top: 60px; width: 142px; height: 45px; border: 1px solid rgba(140,133,122,1); background: #f8f7f4; text-align: center; transition: .4s; }
#map > .map-in > .adress > .adress-in > .txt > .direct > .link:hover { border: 1px solid rgba(140,133,122,0.3); }
#map > .map-in > .adress > .adress-in > .txt > .direct > .link a { display: block; width: 100%; font-family: 'Crimson Text'; line-height: 45px; }

#map > .map-in > .title { margin-top: 140px; text-align: center; }
#map > .map-in > .title > p { font-size: 13px; line-height: 22px; }
#map > .map-in > .title > h2 { margin-top: 30px; font-family: "a Auto Signature"; font-size: 60px; font-weight: 400; }
#map > .map-in > .title > p:nth-of-type(2) { margin-top: 20px; }


/* 반응형 시작 */


@media (max-width: 1200px) {
    
    #main > .txt > .txt-in { width: 100%; }
    .sec1-prev { left: 20px; }
    .sec1-next { right: 20px; }
    
    section > .defalt-w { width: 100% !important; padding: 0px 20px; }
    
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt { width: 45%; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .pic { width: 50%; }
    #intro > .intro-in > .greeting > .greeting-in > .bottom { margin-top: -15%; }
    #intro > .intro-in > .greeting > .greeting-in > .bottom > img { width: 70%; }
    
    #rooms > img { width: 300px; }
    #rooms > .rooms-in > .rooms-list { margin-top: 60px; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .list { width: 30%; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic { width: 65%; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul > li { top: 10%; }
    
    #banner > .banner-in > .reserve > .reserve-in > .txt { width: 100%; padding: 0px 20px; }
    #banner > .banner-in > .reserve > .reserve-in > img:nth-of-type(2) { top: auto; bottom: 3%; transform: none;  width: 40%; }
    
    #facility > img { width: 300px; }
    .fac-prev { left: 0px; }
    .fac-next { right: 0px; }
    
    #map > .map-in { width: 100%; padding: 110px 20px 160px; }
    
}

@media (max-width: 980px) {
    
    #map > .map-in > .adress > .adress-in > .kakao-m { width: 45%; }
    #map > .map-in > .adress > .adress-in > .txt { width: 50%; }
    
    
}


@media (max-width: 768px) {

    #main .main_slider .swiper-slide.img10{background: url(../img/main/image11.jpg) no-repeat; background-size: cover; background-position: center; display: block;}
    #main .main_slider .swiper-slide.img11{background: url(../img/main/image12.jpg) no-repeat; background-size: cover; background-position: center; display: block;}
    #main .main_slider .swiper-slide.img12{background: url(../img/main/image13.jpg) no-repeat; background-size: cover; background-position: center; display: block;}
    
    #main > .txt > .txt-in > h1 { font-size: 42px; line-height: 48px; }
    #main .swiper-pagination-current { font-size: 14px; }
    #main .swiper-pagination-total { font-size: 14px; }
    
    section > .defalt-w > .title > p { font-size: 12px; }
    section > .defalt-w > .title > h2 { margin-top: 20px; font-size: 38px; }
    section > .defalt-w > .title > p:nth-of-type(2) { margin-top: 20px; }
    
    #intro { padding-top: 100px; }
    #intro > .intro-in > .greeting { margin-top: 60px; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt { padding: 25px 0px 30px; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt > img { width: 30px; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt > h3 { font-size: 28px; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt > p { margin-top: 10px; font-size: 12px; }#intro > .intro-in > .greeting > .greeting-in > .top > .txt > .link { margin-top: 20px; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt > .link > a { font-size: 12px; }
    #intro > .intro-in > .service { margin-top: 60px; }
    #intro > .intro-in > .service > .service-in > .service-li > .list { width: 32%; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .txt { margin-top: 20px; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .txt > h3 { font-size: 20px; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .txt > p { margin-top: 10px; font-size: 12px; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .txt > p > br { display: none; }
    
    #rooms { padding-top: 120px; }
    #rooms > img { width: 200px; bottom: -320px; }
    #rooms > .rooms-in > .rooms-list { margin-top: 20px; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in { display: block; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .list { width: 100%; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul { display: flex; justify-content:center;}
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li { font-size: 20px; width: 25%; text-align: center; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li > a { line-height: 60px; }
	#rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li:nth-of-type(n+4) { font-size: 14px; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li > a > img { display: none; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic { width: 100%; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul { height: auto; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul > li { position: relative; display: none; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .pic > ul > li.on { display: block; }
    
    #banner { padding-top: 100px; }
    #banner > .banner-in > .connect > img { width: 30px; }
    #banner > .banner-in > .connect > h4 { font-size: 14px; margin-top: 20px; }
    #banner > .banner-in > .reserve { margin-top: 120px; }
    #banner > .banner-in > .reserve > .reserve-in > .txt > h3 { font-size: 42px; }
    #banner > .banner-in > .reserve > .reserve-in > .txt > p { font-size: 12px; }
    #banner > .banner-in > .reserve > .reserve-in > .txt > .link { margin: 40px auto 0px; }
    #banner > .banner-in > .reserve > .reserve-in > .txt > .link > a { font-size: 12px; }
    
    #facility { padding-top: 100px; }
    #facility > img { width: 200px; }
    #facility .fac-slider .swiper-slide { height: 40vh; }
    #facility .swiper-pagination-current { font-size: 14px; }
    #facility .swiper-pagination-total { font-size: 14px; }
    #facility .swiper-pagination-fraction, #main .swiper-pagination-custom, #main .swiper-container-horizontal > #main .swiper-pagination-bullets { bottom: -62.5; }
    .fac-prev { bottom: -60px; }
    .fac-next { bottom: -60px; }
    
    #map { margin-top: 160px; }
    .wrap_map { height: 200px !important; margin-top: 30px !important; }
    #map > .map-in { padding: 20px 20px 160px; }
    #map > .map-in > .adress > .adress-in { display: block; }
    #map > .map-in > .adress > .adress-in > .title { display: block; }
    #map > .map-in > .adress > .adress-in > .kakao-m { width: 100%; }
    #map > .map-in > .adress > .adress-in > .txt { width: 100%; }
    #map > .map-in > .adress > .adress-in > .txt > .title { display: none; }
    #map > .map-in > .adress > .adress-in > .txt > .direct { margin-top: 20px; }
    #map > .map-in > .adress > .adress-in > .txt > .direct > ul > li > p { font-size: 12px; }
    #map > .map-in > .adress > .adress-in > .txt > .direct > .link { margin: 40px auto 0px; }
    #map > .map-in > .adress > .adress-in > .txt > .direct > .link a { font-size: 12px; }
    #map > .map-in > .title { margin-top: 80px; } 
    #map > .map-in > .title > p { font-size: 12px; }
    #map > .map-in > .title > h2 { margin-top: 20px; font-size: 38px; }
    #map > .map-in > .title > p:nth-of-type(2) { margin-top: 20px; }

}


@media (max-width: 628px) {
    
    #intro > .intro-in > .service > .service-in > .service-li { display: block; }
    #intro > .intro-in > .service > .service-in > .service-li > .list { margin-top: 25px; width: 100%; display: flex; justify-content: space-between; }
    #intro > .intro-in > .service > .service-in > .service-li > .list:nth-of-type(1) { margin-top: 0px; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .txt { margin-top: 15px; margin-left: 20px; width: 70%; text-align: left; }
    
    
    
}


@media (max-width: 548px) {
    
    #intro > .intro-in > .greeting > .greeting-in > .bottom { margin-top: 20px; }
    #intro > .intro-in > .greeting > .greeting-in > .bottom > img { width: 100%; } 
    
    
}


@media (max-width: 480px) {
    
    #main > .txt { bottom: 95px; }
    #main > .txt > .txt-in { padding-bottom: 30px; }
    #main > .txt > .txt-in > h1 { font-size: 32px; line-height: 38px; }
    #main > .txt > .txt-in > p { width: 100%; font-size: 12px; }
    #main .swiper-pagination-fraction, #main .swiper-pagination-custom, #main .swiper-container-horizontal > #main .swiper-pagination-bullets { bottom: -85.5px; }
    .sec1-prev { bottom: -85px; }
    .sec1-next { bottom: -85px; }
    
    
    #intro > .intro-in > .service > .service-in > .service-li > .list > .ico { margin: 0px; }

    
}


@media (max-width: 420px) {
    
    section > .defalt-w > .title > p { font-size: 11px; }
    section > .defalt-w > .title > h2 { font-size: 30px; }
    section > .defalt-w > .title > p:nth-of-type(2) { line-height: 20px; }
    
    #intro { padding-top: 60px; }
    #intro > .intro-in > .greeting { margin-top: 40px; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt { width: 100%; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt > img { width: 25px; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt > h3 { font-size: 24px; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .txt > p { font-size: 11px; }
    #intro > .intro-in > .greeting > .greeting-in > .top > .pic { margin-top: 20px; width: 100%; }
    #intro > .intro-in > .greeting > .greeting-in > .top > div { float: none; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .ico { width: 90px; height: 90px; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .ico > img { width: 28px; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .txt { margin-top: 0px; width: 65%; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .txt > h3 { font-size: 20px; }
    #intro > .intro-in > .service > .service-in > .service-li > .list > .txt > p { font-size: 11px; }
    
    #rooms { padding-top: 80px; }
    #rooms > img { width: 120px; bottom: -220px; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li { font-size: 14px; }
    #rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li > a { line-height: 40px; }
	#rooms > .rooms-in > .rooms-list > .rooms-list-in > .list > ul > li:nth-of-type(n+4) { font-size: 12px; }
    
    #banner { padding-top: 70px; }
    #banner > .banner-in > .connect > img { width: 25px; }
    #banner > .banner-in > .connect > h4 { font-size: 12px; margin-top: 15px; }
    #banner > .banner-in > .reserve { margin-top: 100px; }
    #banner > .banner-in > .reserve > .reserve-in > .txt > h3 { font-size: 30px; }
    #banner > .banner-in > .reserve > .reserve-in > .txt > p { font-size: 11px; }
    
    #facility { padding-top: 60px; }
    #facility > img { width: 120px; }
    #facility .fac-slider { margin-top: 40px; }
    section > .defalt-w > .title > p:nth-of-type(2) > br { display: none; }
    
    #map > .map-in { padding: 20px 20px 140px; }
    #map > .map-in > .adress > .adress-in > .title > h2 { font-size: 32px; margin-top: 20px; }
    #map > .map-in > .adress > .adress-in > .title > p { font-size: 11px; margin-top: 10px; }
    #map > .map-in > .adress > .adress-in > .title > img { width: 80px; }
    #map > .map-in > .adress > .adress-in > .txt > .direct > ul > li { display: block; padding: 20px 0px; }
    #map > .map-in > .adress > .adress-in > .txt > .direct > ul > li > p:nth-of-type(2) { text-align: left; margin-top: 10px; }
    #map > .map-in > .title { margin-top: 60px; }
    #map > .map-in > .title > p { font-size: 11px; }
    #map > .map-in > .title > h2 { font-size: 30px; }
    #map > .map-in > .title > p:nth-of-type(2) { line-height: 10px; }
    
    
}


@media (max-width: 320px) {
    
    #main > .txt > .txt-in > h1 { font-size: 28px; line-height: 34px; }
    
}