@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

body{font-family: 'Josefin Sans';-ms-overflow-style: none;scrollbar-width: none;}
body::-webkit-scrollbar {display: none;}

#wrap{width:calc(100% - 320px);float:right;}

#sec1{height:100vh;width:100%;transition: .5s;overflow:hidden;}
#sec1 .sec1_slide{height:100%;width:100%;}

#sec1 .sec1_slide .swiper-slide{background: #fff;position: relative;}

#sec1 .sec1_slide .swiper-slide .tit{position: absolute;left:50%;top:50%;z-index: 10;color:#fff;transform: translate(-50%,-50%);text-align: center;width:400px;padding:20px;opacity: 0;}
#sec1 .sec1_slide .swiper-slide .tit h2{font-size:36px;font-weight: 700;line-height:1.3em;opacity:.8;}
#sec1 .sec1_slide .swiper-slide .tit h3{font-size:18px;line-height:1.3em;font-weight: 700;letter-spacing: 2px;opacity:.8;}
#sec1 .sec1_slide .swiper-slide .tit span{position: absolute;width:100%;height:100%;left:0;top:0;}

#sec1 .sec1_slide .swiper-slide .tit .frame_1:before{content: '';display: block;position: absolute;left:0;top:0;width:20px;height:20px;opacity: 0.8;border-top:5px solid #fff;border-left:5px solid #fff;}
#sec1 .sec1_slide .swiper-slide .tit .frame_1:after{content: '';display: block;position: absolute;left:0;bottom:0;width:20px;height:20px;opacity: 0.8;border-bottom:5px solid #fff;border-left:5px solid #fff;}

#sec1 .sec1_slide .swiper-slide .tit .frame_2:before{content: '';display: block;position: absolute;right:0;top:0;width:20px;height:20px;opacity: 0.8;border-top:5px solid #fff;border-right:5px solid #fff;}
#sec1 .sec1_slide .swiper-slide .tit .frame_2:after{content: '';display: block;position: absolute;right:0;bottom:0;width:20px;height:20px;opacity: 0.8;border-bottom:5px solid #fff;border-right:5px solid #fff;}

@keyframes tit_top{
    0%{transform: translate(-50%,-10%);opacity: 0;}
    100%{opacity: 1;}
}

.week_date p { font-family: 'Noto Sans KR' !important; font-size: 14px !important; }

#sec1 .sec1_slide .swiper-slide-active .tit{animation: tit_top .5s .8s ease-in-out forwards;}

#sec1 .sec1_slide .sec1_pagi{left:auto;right:66px;color:#fff;font-size:24px;letter-spacing: 1px;width:auto;bottom:44px;line-height:42px;opacity: 0;transition: all .4s ease-in-out;}
#sec1 .sec1_slide .sec1_prev{left:auto;top:auto;bottom:44px;right:145px;width:44px;height:44px;opacity: 0;transition: all .4s ease-in-out;outline: none;}
#sec1 .sec1_slide .sec1_prev:after{display: none;}
#sec1 .sec1_slide .sec1_prev:before{content: '';width:15px;height:30px;background: url(../img/btn/prev_2.png)no-repeat 50% 50%;}
#sec1 .sec1_slide .sec1_next{left:auto;top:auto;bottom:44px;right:20px;width:44px;height:44px;opacity: 0;transition: all .4s ease-in-out;outline: none;}
#sec1 .sec1_slide .sec1_next:after{display: none;}
#sec1 .sec1_slide .sec1_next:before{content: '';width:15px;height:30px;background: url(../img/btn/next_2.png)no-repeat 50% 50%;}

#sec1 .sec1_slide:hover .sec1_pagi,#sec1 .sec1_slide:hover .sec1_prev,#sec1 .sec1_slide:hover .sec1_next{opacity: 1;}

#sec1 .sec1_slide .scroll_wrap{position: absolute;right:30px;bottom:12px;line-height:30px;margin-top:-15px;font-size:10px;font-weight: bold;z-index: 10;}
#sec1 .sec1_slide .scroll_wrap .box{width:20px;height:30px;float:left;border:2px solid rgba(255,255,255,1);border-radius: 5px;margin-right: 20px;}
#sec1 .sec1_slide .scroll_wrap .box .scr{width:2px;height:6px;background: #fff;position: relative;left:50%;top:6px;margin-left:-1px;border-radius: 25%;animation: scrollDown 1s ease-in-out infinite;}
#sec1 .sec1_slide .scroll_wrap span{position: relative;color:#fff;}
#sec1 .sec1_slide .scroll_wrap span:before{content: '';width:34px;height:2px;background: #fff;position: absolute;bottom:-5px;left:0;}
@keyframes scrollDown{
    0%{top:6px}
    100%{opacity: 0;top: 14px;}
}


/*sec2*/

#sec2{width:100%;padding-top:100px;padding-bottom:0px;box-sizing: border-box;;}

#sec2 .sec2_in{width:1020px;box-sizing: border-box;padding:0 15px;margin:auto;}
#sec2 .sec2_in h2{font-weight: 700;font-family: 'NanumSquare';font-size:30px;line-height:38px;margin-bottom:8px;color:#333;}
#sec2 .sec2_in h3{color:#333;opacity: .8;margin-bottom:16px;line-height:24px;}

#sec2 .sec2_in .room_box{margin-top:48px;align-items: center;display: flex;}

#sec2 .sec2_in .room_box .room_txt{flex: 2;margin-left:48px;box-sizing: border-box;}
#sec2 .sec2_in .room_box .room_txt #room_des{font-family: 'Nanum Gothic';}
#sec2 .sec2_in .room_box .room_txt #room_des h1{display: none;}
#sec2 .sec2_in .room_box .room_txt #room_des ul{padding:0;}
#sec2 .sec2_in .room_box .room_txt #room_des ul li{margin-top:1.5rem;}
#sec2 .sec2_in .room_box .room_txt #room_des ul li:first-child{margin-top:0;}
#sec2 .sec2_in .room_box .room_txt #room_des ul li .tit{padding:0;color:#333;font-size:18px;line-height:24px;font-weight: 700;letter-spacing: 1px;margin-bottom:8px;}
#sec2 .sec2_in .room_box .room_txt #room_des ul li .data{padding:0;font-size:14px;color:#999;flex: 1;box-sizing: border-box;font-weight: 400;line-height:28px;letter-spacing: .5px; font-family: 'Noto Sans KR'; font-weight: 300; }
#sec2 .sec2_in .room_box .room_txt #room_des ul li .data p{letter-spacing: .5px;display: inline-block;margin-right:10px; font-family: 'Noto Sans KR'; font-weight: 300 }
#sec2 .sec2_in .room_box .room_txt #room_des ul li .data table{display: none;}
#sec2 .sec2_in .room_box .room_txt a{color:#333;font-weight: 700;display: inline-block;margin-top:48px;font-weight: 700;letter-spacing: 1px;transition: all .4s ease-in-out;}
#sec2 .sec2_in .room_box .room_txt a:after{content: '';border-top:2px solid #333;width:36px;height:5px;display: inline-block;margin-left:20px;transition: all .4s ease-in-out;transform-origin: top left;}
#sec2 .sec2_in .room_box .room_txt a:hover:after{transform: scale(2, 1);border-color: #5c7798;}
#sec2 .sec2_in .room_box .room_txt a:hover{color:#5c7798;}

#sec2 .sec2_in .room_re{margin-top:70px;}
#sec2 .sec2_in .room_re .room_rprice{padding:0;margin-top:16px;border-radius: 10px;}

/*sec3*/

#sec3{margin:100px 0;padding-left:calc((100% - 1020px)/2 + 15px);position: relative;overflow: hidden;}
#sec3 .tit{width:25%;float:left;box-sizing: border-box;position: absolute;top:50%;transform: translateY(-50%);}
#sec3 .tit h2{font-size:32px;font-weight: 700;line-height:1.2;margin-bottom:8px;color:#333;font-family: 'NanumSquare';}
#sec3 .tit h3{opacity: .7;color:#333;margin-bottom:16px;}
#sec3 .tit a{margin-top:48px;display: inline-block;font-weight: 700;color:#333;letter-spacing: .5px;position: relative;cursor: auto;}
#sec3 .tit a:after{content: '';width:36px;height:2px;background: #333;margin-left:20px;transition: all .4s ease-in-out;position: absolute;top:6px;}
#sec3 .tit a:hover:after{width:72px;}

#sec3 .out_room{height:400px;width:75%;float:right;}
#sec3 .out_room .swiper-slide{box-sizing: border-box;border-radius: 5px;}
#sec3 .out_room .swiper-slide a{display: block;position: relative;height:400px;border-radius: 40px 80px;}

#sec3 .out_room .img1 a .img{background: url(../img/sub2/1/image4.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:7px;}
#sec3 .out_room .img2 a .img{background: url(../img/sub2/2/image7.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:7px;}
#sec3 .out_room .img3 a .img{background: url(../img/sub2/3/image5.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:7px;}
#sec3 .out_room .img4 a .img{background: url(../img/sub2/4/image6.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:7px;}


#sec3 .out_room .swiper-slide a .cover{position: absolute;left:0;right:0;bottom:0;top:50%;background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);z-index: 3;border-radius: 6px;border-radius: 0 0 7px 7px}

#sec3 .out_room .swiper-slide a .txt{position: absolute;padding:20px;color:#fff;bottom:0;left:0;right:0;z-index: 3;transition: all .4s ease-in-out;}
#sec3 .out_room .swiper-slide a:hover .txt{transform: translateY(-30%);}
#sec3 .out_room .swiper-slide a .txt h2{color:#fff;font-size:16px;font-weight: 400;line-height:1.5;margin:0;}
#sec3 .out_room .swiper-slide a .txt h3{color:#fff;font-size:22px;font-weight: 900;line-height:1.5;margin:0;opacity: 1;}

#sec3 .out_room .swiper-slide a .txt_up{position: absolute;color:#fff;padding:20px;bottom:0;left:0;right:0;z-index: 3;font-size:12px;opacity: 0;font-weight: 700;transform: translateY(400%);transition: all .4s ease-in-out;}
#sec3 .out_room .swiper-slide a:hover .txt_up{opacity: 1;transform: translateY(0);}


#sec3 .out_room .room_next{width:50px;height:50px;background:#fff;border-radius: 50%;transition: all .5s .1s ease-in-out;right:25px;box-shadow: 15px 15px 30px rgba(0,0,0,.16);outline: none;}
#sec3 .out_room .room_next:after{display:none;}
#sec3 .out_room .room_next:before{width:15px;height:30px;position: absolute;left:50%;top:50%;content: '';transform: translate(-40%,-50%) scale(.8);background: url(../img/btn/next_b.png)no-repeat 50% 50%;background-size: cover;transition: all .3s ease-in-out;}
#sec3 .out_room .room_next:hover:before{transform:translate(-40%,-50%) scale(1);}

#sec3 .out_room .room_prev{width:50px;height:50px;background:#fff;border-radius: 50%;transition: all .5s .1s ease-in-out;left:25px;box-shadow: 15px 15px 30px rgba(0,0,0,.16);outline: none;}
#sec3 .out_room .room_prev:after{display: none;}
#sec3 .out_room .room_prev:before{width:15px;height:30px;position: absolute;left:50%;top:50%;content: '';transform: translate(-60%,-50%) scale(.8);background: url(../img/btn/prev_b.png)no-repeat 50% 50%;background-size: cover;transition: all .3s ease-in-out;}
#sec3 .out_room .room_prev:hover:before{transform:translate(-60%,-50%) scale(1);}

#sec3 .out_room  .swiper-button-prev.swiper-button-disabled, #sec3 .out_room .swiper-button-next.swiper-button-disabled{opacity: 0;}

@media (max-width:1340px){
    #sec2 .sec2_in{width:100%;}
}

/*태블릿 화면*/
@media (max-width:1240px){
    #wrap{width:100%;}
    
    #sec1 .sec1_slide .sec1_pagi, #sec1 .sec1_slide .sec1_prev, #sec1 .sec1_slide .sec1_next{opacity: 1}
    
    #sec2{padding:80px 0;}
    
    #sec3{padding-left:15px;margin:80px 0;}
    
}
/*모바일*/
@media (max-width:767px){
    #sec1{height:55vh;}
    #sec1 .sec1_slide .swiper-slide .tit{width:80%;}
    
    #sec2{padding:50px 0 30px;}
    #sec2 .sec2_in h2{font-size:26px;line-height:30px;margin-bottom:4px;}
    #sec2 .sec2_in h3{font-size:14px;line-height:20px;margin-bottom:8px;}
    
    #sec2 .sec2_in .room_box{margin-top:24px;display: block;}
    #sec2 .sec2_in .room_box .room_img{display: block;height:350px !important;margin-bottom:24px;}
    #sec2 .sec2_in .room_box .room_txt{display: block;margin:0;}
    
    #sec2 .sec2_in .room_box .room_txt #room_des ul li{margin-top:1.2em;}
    #sec2 .sec2_in .room_box .room_txt #room_des ul li .tit{font-size:14px;}
    #sec2 .sec2_in .room_box .room_txt #room_des ul li .data{font-size:13px;line-height:20px;}
    
    #sec2 .sec2_in .room_box .room_txt a{margin-top:34px;}
    .week_date p{padding:0 !important;}
    
    #sec3{margin:50px 0;padding:0 15px;}
    #sec3 .tit{width:100%;position: static;float:none;transform: translateY(0);}
    #sec3 .tit h2{font-size:20px;margin-bottom:6px;}
    #sec3 .tit h3{margin-bottom:24px;font-size:14px;}
    #sec3 .tit a{margin:24px 0;display: none;}
    
    #sec3 .out_room{width:100%;}
}