@charset "utf-8";

/*main start*/

#main{ width:100%; height:100vh; position: relative; overflow: hidden; }
#main > img { position: absolute; z-index: 101; bottom: 0; width: 100%;}

#main .sec1_slider { float: right; width: calc(100% - 350px); height:100%; }
#main .sec1_slider .swiper-slide { position: relative; width:100%; height:100%;}

#main .sec1_slider .swiper-slide.img1{background: url(../img/main/image1.jpg) no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img2{background: url(../img/main/image2.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img3{background: url(../img/main/image3.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img4{background: url(../img/main/image4.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img5{background: url(../img/main/image5.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img6{background: url(../img/main/image6.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img7{background: url(../img/main/image7.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img8{background: url(../img/main/image8.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img9{background: url(../img/main/image9.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img10{background: url(../img/main/image10.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img11{background: url(../img/main/image11.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img12{background: url(../img/main/image12.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img13{background: url(../img/main/image13.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img14{background: url(../img/main/image14.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img15{background: url(../img/main/image15.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img16{background: url(../img/main/image16.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img17{background: url(../img/main/image17.jpg)no-repeat 50% 50%; background-size: cover;}
#main .sec1_slider .swiper-slide.img18{background: url(../img/main/image18.jpg)no-repeat 50% 50%; background-size: cover;}


#main .sec1_slider .swiper-slide .catchphrase { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
#main .sec1_slider .swiper-slide .catchphrase img {  opacity: .8; }
#main .sec1_slider .swiper-slide .catchphrase p { font-family: 'Josefin Sans'; font-size: 15px; color: #FFF; font-weight: 300; }


.sec1_slider .swiper-navi-wrapper > div { position: relative; width: 100%; height: 100%; }

.sec1-prev { content: ''; position: absolute; top: 50%; left: 40px; transform: translateY(-50%); width: 22px; height: 43px; background: url(../img/arrow3.png);  filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));}
.sec1-next { content: ''; position: absolute; top: 50%; right: 40px; transform: rotateY(180deg) translateY(-50%); width: 22px; height: 43px; background: url(../img/arrow3.png); filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));}

.sec1-next { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.insertBefore(document.createElement("i"), this.firstChild).className = "next-after", this.firstChild.innerHTML = '>' ) }
.sec1_pagi { left: 50%; bottom: 10%; transform: translateX(-50%); }
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .sec1_pagi {
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    letter-spacing: 1;
    font-size: 14px;
    color: rgba(255,255,255,1);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));
}

.sec1_slider .swiper-navi-wrapper > div .main-txt{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 155px; color: #fff; z-index: 10; font-family: 'GangwonEdu_OTFBoldA'; text-align: center;}
.sec1_slider .swiper-navi-wrapper > div .main-txt h1 { font-size: 55px; margin: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));}
.sec1_slider .swiper-navi-wrapper > div .main-txt p { font-family: 'Noto Sans KR'; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));}
/*main end*/

section { float: right; width: calc(100% - 350px); height: auto; }

section div .subject { position: relative; padding-top: 130px; text-align: center;}
section div .subject img { position: absolute; top: 80px; left: 50%; transform: translate(-50%); width: 60px; }
section div .subject h2 { position: relative; /*margin: 0px 0px 30px; padding: 0;*/     font-family: 'GangwonEdu_OTFBoldA'; font-size: 28px; font-weight: 600; margin-top: 0;}
section div .subject > p { margin: 8px 0px; font-size: 14px; line-height: 18px; font-family: 'Noto Sans KR'; font-weight: 300; }



/*rooms start*/

#rooms { position: relative; }
#rooms > img:nth-of-type(1) { position: absolute; }
#rooms > img:nth-of-type(2) { position: absolute; right: 0px; bottom: 0px; }

#rooms .rooms-in .room-list { width: 1200px; margin: 75px auto 0px; }
#rooms .rooms-in .room-list .room_slider{ display: block;width:100%;height:670px;}
#rooms .rooms-in .room-list .room_slider .swiper-slide{ display: block;width:100%;height:630px;}
#rooms .rooms-in .room-list .room_slider .swiper-slide .room { position: relative; width: 100%; height: 100%; }
#rooms .rooms-in .room-list .room_slider .swiper-slide .room .info { padding: 40px; position: absolute; z-index: 1; bottom: 0; left: 0; width: 86%; height: auto; background: #fbfbfc;}
#rooms .rooms-in .room-list .room_slider .swiper-slide .room .image { position: absolute; z-index: 2; top: 0; right: 0; width: 93%; height: 400px; transition: background-position .2s ease-in-out; }

#rooms .rooms-in .room-list .room_slider .swiper-slide.room1 .room .image {background: url("http://haneulsanjangp.cdn1.cafe24.com/sub2/image2.jpg");background-size: cover;background-position: 45% 55%;}


#rooms .rooms-in .room-list .room_slider .swiper-slide .room .image:hover { background-position: 40% 50%; }

#rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in { position: relative; width: 100%; height: auto; }
#rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in h3 { margin: 320px 0px 0px 0px; font-family: 'GangwonEdu_OTFBoldA';  font-size: 28px; font-weight: 400; }
#rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in p { font-family: 'Noto Sans KR'; font-size: 13px; line-height: 28px; margin-bottom: 25px; }
#rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in p:nth-of-type(1) { margin: 10px 0px 0px 0px; color: #296a8a; }
#rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in a { font-family: 'Josefin Sans', sans-serif; font-size: 14px; letter-spacing: 3px; transition: 0.4s; }
#rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in a:hover { color: #296a8a; }




/*rooms end*/

/*banner1 start*/

#banner1 { margin-top: 80px; }
#banner1 .image { position: relative; width: 100%; height: 450px; background: url("../img/main/image8.jpg") no-repeat; background-size: 110%; background-position: 10% 70%; transition: background-position .2s ease-in-out; background-attachment: fixed;}


#banner1 .image .box { padding-left: 0px; position: absolute; top: calc(50% - 85px); width: 435px; height: 170px; text-align: center; transition: padding-left .2s ease-in-out;  background: #fbfbfc; }
#banner1 .image .box:hover { padding-left: 15px;   }

#banner1 .image .box h3 { margin: 45px 0px 20px; font-family: 'Cormorant Garamond'; font-size: 32px; font-weight: 500; }
#banner1 .image .box a { font-family: 'Josefin Sans', sans-serif; font-size: 14px; letter-spacing: 3px; transition: 0.4s; }
#banner1 .image .box a:hover { color: #296a8a;}

/*facility start*/

#facility { position: relative; }

#facility > img:nth-of-type(1) { position: absolute; }
#facility > img:nth-of-type(2) { position: absolute; right: 0px; bottom: 0px; }

#facility .facility-in { width: 100%; text-align: center; }

#facility .sec2_slider { position: relative; float: right; margin-top: 75px; width: 100%; height: 525px; }
#facility .sec2_slider .swiper-box { position: absolute; left: calc(50% - 35%); margin-top: 133px; width: 70%; height: 393px; background: #fbfbfc; }

#facility .sec2_slider .swiper-box .swiper-navi-wrapper > div { position: relative; width: 100%; height: 100%; }
.sec2-prev { content: ''; position: absolute; top: 310px; left: 5%; width: 22px; height: 43px; background: url(../img/arrow2.png); }
.sec2-next { content: ''; position: absolute; top: 310px; right: 5%; width: 22px; height: 43px;  transform: rotateY(180deg); background: url(../img/arrow2.png); }

#facility .sec2_slider .swiper-wrapper { position: absolute; }
#facility .sec2_slider .swiper-wrapper .swiper-slide { position: relative; width: 624px; height: 407px;}

#facility .sec2_slider .swiper-slide.img1{background: url(../img/sub3/1/image3.jpg) no-repeat 50% 50%; background-size: cover; transition: background-position .2s ease-in-out; }
#facility .sec2_slider .swiper-slide.img2{background: url(../img/sub3/2/image4.jpg) no-repeat 50% 50%; background-size: cover; transition: background-position .2s ease-in-out; }
#facility .sec2_slider .swiper-slide.img3{background: url(../img/sub3/3/image2.jpg) no-repeat 50% 50%; background-size: cover; transition: background-position .2s ease-in-out; }
#facility .sec2_slider .swiper-slide.img4{background: url(../img/sub3/4/image5.jpg) no-repeat 50% 50%; background-size: cover; transition: background-position .2s ease-in-out; }
#facility .sec2_slider .swiper-slide.img5{background: url(../img/sub3/5/image2.jpg) no-repeat 50% 50%; background-size: cover; transition: background-position .2s ease-in-out; }
#facility .sec2_slider .swiper-slide a { position: absolute; width: 100%; height: 100%; }

#facility .sec2_slider .swiper-slide:hover { background-position: 20% 50%; }

#facility .sec3_slider { position: absolute; top: 420px; left: 50%; transform: translateX(-50%); width: 50%; height: 100px; text-align: center; }
#facility .sec3_slider .swiper-wrapper { top: 0px; }
#facility .sec3_slider .swiper-slide { background: #fafaf6; text-align: center; background: #fbfbfc;; }
#facility .sec3_slider .swiper-slide h3 { margin: 15px 0px 10px; font-family: 'GangwonEdu_OTFBoldA'; font-size: 24px; line-height: 24px; font-weight: 500; }
#facility .sec3_slider .swiper-slide p { margin: 0; font-size: 14px; color: #296a8a;}


/*banner2 start*/

#banner2 { margin-top: 120px; }
#banner2 .image { position: relative; width: 100%; height: 450px; background: url("../img/sub1/image9.jpg"); background-size: 110%; background-position: 10% 70%; transition: background-position .2s ease-in-out; }

#banner2 .image .box { padding-left: 0px; position: absolute; top: calc(50% - 85px); width: 435px; height: 170px; text-align: center; transition: padding-left .2s ease-in-out; background: #fbfbfc;}
#banner2 .image .box:hover { padding-left: 15px; }

#banner2 .image .box h3 { margin: 45px 0px 20px; font-family: 'Cormorant Garamond'; font-size: 32px; font-weight: 500; }
#banner2 .image .box a { font-family: 'Josefin Sans', sans-serif; font-size: 14px; letter-spacing: 3px; transition: 0.4s; }
#banner2 .image .box a:hover { color: #296a8a; }


/*travel start*/

#travel { position: relative; }
#travel > img:nth-of-type(1) { position: absolute; }
#travel > img:nth-of-type(2) { position: absolute; right: 0px; bottom: 0px; }


#travel .travel-in .place-list { width: 1200px; margin: 75px auto 0px; }
#travel .travel-in .place-list .place { position: relative; width: 49%; border-right: 2px solid #fbfbfc; background: #FFF; }
#travel .travel-in .place-list .place:nth-child(1) { float: left; }
#travel .travel-in .place-list .place:nth-child(2) { float: right; }

#travel .travel-in .place-list .place div { position: absolute;  width: 120px; height: 100%; background: #fbfbfc;}
#travel .travel-in .place-list .place ul { margin: 0; padding: 10px 40px 40px; position: relative; }
#travel .travel-in .place-list .place ul li h3 { margin: 30px 0px 0px 0px; font-family: 'GangwonEdu_OTFBoldA'; font-size: 24px; font-weight: 600; }
#travel .travel-in .place-list .place ul li p { margin: 10px 0px 0px 0px; font-size: 14px; font-weight: 400; }



@media (max-width: 1580px) {
    #rooms .rooms-in { padding: 0px 20px; }
    #rooms .rooms-in .room-list { width: 100%; margin: 75px auto 0px; }
    
    #travel .travel-in { padding: 0px 20px; }
    #travel .travel-in .place-list { width: 100%; margin: 75px auto 0px; }
}

@media (max-width: 1477px) {
    #facility .sec2_slider { height: 545px; }
    #facility .sec2_slider .swiper-box { height: 413px; }
    .sec2-prev, .sec2-next { top: 320px; }
    .sec2-prev { transform: scale(.8); }
    .sec2-next { transform: rotateY(180deg) scale(.8); }
}

@media (max-width: 1450px) {
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .image{ height: 370px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in h3 { margin: 320px 0px 0px 0px; }
}

/*@media (max-width: 1234px) {
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .image{ height: 340px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in h3 { margin: 300px 0px 0px 0px; }
}*/

@media (max-width: 1134px) {
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .image{ height: 340px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in h3 { margin: 270px 0px 0px 0px; }
}

@media (max-width: 1110px) {
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .image
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in h3 { margin: 240px 0px 0px 0px; }
}

@media (max-width: 1044px) {
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .image{ height: 310px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in h3 { margin: 200px 0px 0px 0px; }
}

@media (max-width: 1028px) { 
    
    #main .sec1_slider { float: none;  width: 100%; height:100%; }
    section { width: 100%; height: auto; clear: both; float: none; overflow: hidden; }
    
    #rooms .rooms-in .room-list .room_slider{ height:570px;}
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room { height: 530px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .image{ height: 280px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in h3 { margin: 240px 0px 0px 0px; font-size: 22px; }
    
    #facility .sec2_slider .swiper-box { left: calc(50% - 40%); width: 80%; height: 413px; }
    .sec2-prev, .sec2-next { top: 330px; }
    
    #travel .travel-in { height: auto; }
    #banner1{margin-top:40px;}
    #banner1 .image { background-attachment: initial; }
}

@media (max-width: 884px) {
    #rooms .rooms-in { height: auto; }
    #rooms .rooms-in .room-list .room_slider{ height:650px;}
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room { clear: both; width: 100%; height: 610px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .image{ position: relative; width: 100%; height: 400px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info{ padding: 30px; position: relative; width: 100%; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in h3 { margin: 0px; }
    
    #travel .travel-in .place-list .place:nth-child(1) { width: 100%; float: none; }
    #travel .travel-in .place-list .place:nth-child(2) { width: 100%; float: none; display: none;}
    
    #travel .travel-in .place-list .place:nth-child(1) ul { padding: 10px 40px 30px; }
    /* #travel .travel-in .place-list .place:nth-child(2) ul { padding: 0px 40px 40px; }
    
    #travel .travel-in .place-list .place:nth-child(2) ul li:nth-child(1) h3 { margin: 0; } */
    
}

@media (max-width: 680px) {
    #main{height:75vh;}

    
    .sec1-prev { left: 20px;  width: 14px; }
    .sec1-next { right: 20px; width: 14px;}

    .sec1_slider .swiper-navi-wrapper > div .main-txt { top: 50%; }
    .sec1_slider .swiper-navi-wrapper > div .main-txt h1 { font-size: 40px; }
    .sec1_slider .swiper-navi-wrapper > div .main-txt p { font-size: 13px; margin-top: 0;}
    
    section div .subject { padding-top: 100px; text-align: center;}
    section div .subject img { top: 60px; left: 50.6%; width: 70px; }
    section div .subject h2 { /*margin: 0px 0px 20px;*/ font-size: 24px; }
    section div .subject > p { font-size: 13px; line-height: 18px; }
    
    #rooms .rooms-in { height: auto; }
    #rooms .rooms-in .room-list { margin: 65px auto 0px; }
    #rooms .rooms-in .room-list .room_slider{ height:520px;}
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room { height: 590px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .image{ height: 280px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in p { line-height: 22px; }
    #rooms .rooms-in .room-list .room_slider .swiper-slide .room .info .info-in a { font-size: 12px;}
    
    #facility .sec2_slider { margin-top: 65px; }
    #facility .sec2_slider .swiper-box { left: calc(50% - 50%); width: 100%; }
    #facility .sec3_slider .swiper-slide h3 { font-size: 20px; }
    #facility .sec3_slider { transform: translateX(-50%); width: 60%; }
    #facility .sec3_slider .swiper-slide p { font-size: 13px; }
    
    #banner1 { margin-top: 30px; }
    #banner1 .image { height: 240px;}
    #banner1 .image .box { top: calc(50% - 70px); width: 50%; height: 140px; }
    #banner1 .image .box h3 { margin: 35px 0px 20px; font-size: 24px; }
    #banner1 .image .box a { font-size: 12px;}
    
    #travel .travel-in .place-list { margin: 65px auto 0px; }
    #travel .travel-in .place-list .place ul li h3 { font-size: 22px; }
    #travel .travel-in .place-list .place ul li p { font-size: 13px; }
    
    #banner2 { margin-top: 60px; }
    #banner2 .image { height: 240px;}
    #banner2 .image .box { top: calc(50% - 70px); width: 50%; height: 140px; }
    #banner2 .image .box h3 { margin: 35px 0px 20px; font-size: 22px; }
    #banner2 .image .box a { font-size: 12px;}
    
}

@media (max-width: 528px) {
    
    
    
    #banner1 .image .box { width: 60%; background: rgba(250, 250, 246, 0.8);}
    #banner1 .image .box:hover { padding-left: 10px; }
    
    #banner2 .image .box { width: 60%;  background: rgba(250, 250, 246, 0.8);}
    #banner2 .image .box:hover { padding-left: 10px; }
    
    #facility .sec2_slider .swiper-wrapp .swiper-slide { height: 307px; }
    #facility .sec2_slider { height: 455px; }
    #facility .sec2_slider .swiper-box { height: 323px; }
    .sec2-prev, .sec2-next { top: 230px; }
    #facility .sec3_slider { top: 320px; }
    
}

@media (max-width: 520px) { 
    
    #main .sec1_slider .swiper-slide .catchphrase img { width: 180px; }
    #main .sec1_slider .swiper-slide .catchphrase p { line-height: 0px; }
    
}

@media (max-width: 515px) {
    
    section div .subject img { top: 60px; left: 50.6%; width: 70px; }
    section div .subject h2 { /*margin: 0px 0px 20px;*/ font-size: 20px; margin-top: 12px;}
    
    #rooms .rooms-in .room-list .room .info .info-in h3 { font-size: 20px; }
    
    #facility .sec2_slider .swiper-wrapper .swiper-slide { height: 307px; }
    #facility .sec2_slider .swiper-box { height: 323px; }
    .sec2-prev, .sec2-next { top: 230px; }
    #facility .sec3_slider { top: 320px; height: 130px; }
    
    #travel .travel-in .place-list .place ul li h3 { font-size: 20px; }
    
}

@media (max-width:500px){
    #main{height:60vh;}
    #main .sec1_slider .swiper-slide .catchphrase{top:55%;}
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .sec1_pagi{bottom:30px;}
    .sec1-prev,.sec1-next{top:55%}
    #rooms div .subject > p{letter-spacing: -1.3px;}
    section div .subject img { top: 65px; left: 50.6%; width: 60px; }
}

@media (max-width:480px){
    #rooms .rooms-in .room-list .room_slider{ height:540px;}
}


@media (max-width: 360px) {
    #main{height:75vh;}
    
    .sec1-prev { left: 20px; transform: scale(.8) translateY(-50%); }
    .sec1-next {right: 20px; transform: scale(.8) rotateY(180deg) translateY(-50%); }
    
    #banner1 .image { height: 200px; }
    #banner2 .image { height: 200px; }
    
    #facility .sec2_slider .swiper-wrapper .swiper-slide { height: 220px; }
    #facility .sec2_slider { height: 430px; }
    #facility .sec2_slider .swiper-box { height: 263px; }
    .sec2-prev, .sec2-next { top: 150px; }
    #facility .sec3_slider { top: 230px; }
    
    section div .subject > p{font-size:12px;padding:0 5px;letter-spacing: -1px;}    
}