@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');
@import url('reset.css');

* { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }

a { text-decoration: none; }

.container { width: 90%; width: 1192px; margin: 0 auto;  }
.container::after { display: block; content: ""; clear: both; }
.cfixed::after { display: block; content: ""; clear: both; }

/* header */
.top_menu { height: 37px; border-bottom: 1px solid #eeeeee; }
.top_nav { text-align: right;  }
.top_nav li { display: inline-block; }
.top_nav li:nth-child(1) { margin-left: 0px; }
.top_nav li:nth-child(1)::after,
.top_nav li:nth-child(2)::after { display: inline-block; content: ""; width: 1px; height: 11px; background-color: #676767; margin: 0 15px;  }
.top_nav li:nth-child(4)::before { display: inline-block; content: ""; width: 24px; height: 15px; background: url('../images/tae.png') no-repeat; margin: 0 7px 0 50px; vertical-align: middle; }
.top_nav li:nth-child(4)::after { display: inline-block; content: ""; width: 10px; height: 7px; background: url('../images/downArrow.png') no-repeat; background-size: 100% auto; margin-left: 5px; vertical-align: middle; cursor: pointer;}
.top_nav li a { font-size: 13px; color: #676767; line-height: 37px; }

.header_inner { height: 129px; display: flex; justify-content: space-between; align-items: center; }
.logo a { display: block; text-indent: -9999px; width: 97px; height: 81px; background: url('../images/logo.png') no-repeat; }
.gnb li { display: inline-block; margin-right: 46px; }
.gnb li:nth-child(1) { margin-left: 137px; }
.gnb li:nth-child(6) { margin-right: 96px; }
.gnb li a { font-size: 16px; color: #1a1a1a; font-weight: 600; }
.header_inner button { width: 144px; height: 63px; border: none; background-color: #1a1a1a; color: #f3f2ed; font-size: 18px; font-weight: 500; }

.subMenu { display: none; position: absolute; top: 167; left: 0; background-color: #fff; width: 100%; height: 350px; border-top: 1px solid#1a1a1a; z-index: 10; }
.sub_inner { padding: 38px 0 0 55px; width: 986px; height: 100%; margin: 0 auto; position: relative; }
.sub_inner ul::before { display: block; position: absolute; content: ""; width: 1px; height: 281px; background-color: #b8b8b8; margin-left: -30px;}
.sub_inner ul { float: left; margin-right: 60px; text-align: center; }
.sub_inner ul:nth-child(6) { margin-right: 0px;  }
.sub_inner ul:nth-child(6)::after { display: block; position: absolute; right: 50px; top: 38px; content: ""; width: 1px; height: 281px; background-color: #b8b8b8;  }
.sub_inner ul li { margin-bottom: 20px; }
.sub_inner ul li a { font-size: 15px; color: #787878; }
.sub_inner ul li a:hover { color: #000; }

/* slider */
.slider { width: 100%; height: 500px; z-index: 1; }
.slider_inner { max-width: 100%; width: 100%; height: 100%; position: relative; }
.imgTxt { position: absolute; top: 290px; left: 20%; transition: all 0.5s; }

/* reservation */
.reservation_inner { padding-top: 43px; padding-left: 30px; background-color: #fff;  width: 1104px; height: 147px; margin: 0 auto; border-bottom: 1px solid #d1d1d1; }
.reservation_inner ul li { float: left; text-align: center; }
.reservation_inner ul li span { display: block; font-size: 15px; font-weight: bold; color: #787878; }
.reservation_inner ul li:nth-child(1) { margin-right: 63px; }
.reservation_inner ul li:nth-child(2) { margin-right: 63px; }
.reservation_inner ul li:nth-child(3) { margin-right: 105px; }
.reservation_inner ul li:nth-child(4) { margin-right: 36px; }
.reservation_inner ul li:nth-child(5) { margin-right: 36px; }
.reservation_inner ul li:nth-child(6) { margin-right: 36px; }
.reservation_inner ul li:nth-child(7) { margin-right: 67px; }

.checkIn span::after { display: inline-block; content: ""; width: 14px; height: 14px; background: url('../images/cal.png') no-repeat; margin-left: 4px;}
.checkOut span::after { display: inline-block; content: ""; width: 14px; height: 14px; background: url('../images/cal.png') no-repeat; margin-left: 4px;}

.stayDay span { display: block; content: ""; width: 32px; height: 34px; background: url('../images/night.png') no-repeat; }
.stayDay input { margin-top: 10px; border: none; font-size: 18px; text-align: center; width: 40px; color: #818181; background-color: transparent;  }
.checkIn input,
.checkOut input { margin-top: 24px; width: 139px; border: none; color: #2a2a2a; font-size: 18px; text-align: center; }

.reservation_inner ul li select { margin-top: 25px; border: none; color: #2a2a2a; font-size: 18px; }

.search button { width: 175px; height: 73px; border: none; background-color: #1a1a1a; color: #fff; font-size: 18px; }

/* offer */
.offer { margin-top: 150px; z-index: 999; }
.offer_title { text-align: center; }
.offer_title h2 { font-size: 30px; font-weight: bold; margin-bottom: 11px; }
.offer_title span { font-size: 14px; color: #7c7c7c; }

.offer_card { margin-top: 61px; }
.offer_card ul { display: flex; justify-content: space-between; }
.card_body { overflow: hidden; }
.card_body img:hover { opacity: 0.8; transition: all 0.8s; }
.card_body p { padding: 30px 0 23px 21px; background-color: #fff; }
.card_body strong { font-size: 17px; color: #1a1a1a; font-weight: 600; display: block; margin-bottom: 13px; }
.card_body span { display: block; font-size: 14px; line-height: 30px; color: #646363;}
.card_body span:last-child { font-weight: bold; text-align: right; margin: 10px 28px 0 0; }

/* bg01 */
.bg01 { position: absolute; top: 1200px; left: 0; width: 100%; height: 409px; background-color: #ededed; z-index: -1;   }

/* info */
.info { margin-top: 200px; }
.offer_info { text-align: center; margin-bottom: 73px; }
.offer_info h2  { font-size: 30px; font-weight: bold; margin-bottom: 11px; }
.offer_info span { font-size: 14px; color: #7c7c7c; }
.info_inner .room { float: left; position: relative; }
.room p { font-size: 24px; font-weight: bold; position: absolute; color: #fff; bottom: 24px; left: 30px; line-height: 25px; }
.room p span { font-size: 15px; font-weight: normal; }
.room img { cursor: pointer; }

.etc { position: relative; }
.overlay { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 5px; width: 332px; height: 156px; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: all 0.8s; }
.etc .etc01:hover .overlay { opacity: 1; }
.overlay .txt { font-weight: bold; color: #fff; font-size: 16px; }

.overlay02 { display: flex; justify-content: center; align-items: center; position: absolute; top: 156px; right: 5px; width: 332px; height: 298px; background-color: rgba(0, 0, 0, 0.5); transition: all 0.8s; opacity: 0; }
.etc .etc02:hover .overlay02 { opacity: 1; }
.overlay02 .txt02 { color: #fff; font-size: 16px; font-weight: bold; }

.intro {  padding-top: 79px; display: flex; }
.pale { padding-left: 26px; position: relative; }
.pale h3 { display: block; text-indent: -9999px; width: 164px; height: 24px; background: url('../images/content_word.png') no-repeat; margin-left: 15px;  }
.pale h3::after { position: absolute; top: 5px; left: 26px; display: block; width: 4px; height: 19px; background-color: #1469bc; content: "";  }
.pale p { font-size: 14px; color: #313131; margin-top: 44px; line-height: 24px; }
.pale p span { display: block; margin: 27px 0 35px 0; font-size: 15px; color: #1a1a1a; }
.pale ul { float: left; }

.wTime li { font-size: 15px; color: #1a1a1a; font-weight: 600; }
.wTime li:nth-child(1) { margin-bottom: 22px; }
.wTime li:nth-child(1)::before { display: inline-block; content: ""; width: 20px; height: 14px; background: url('../images/wifi.png') no-repeat; margin-right: 11px; }
.wTime li:nth-child(2)::before { display: inline-block; content: ""; width: 20px; height: 19px; background: url('../images/time-icon.png') no-repeat; margin-right: 11px; vertical-align: text-top; }

.pale ul:last-child { float: right; padding-right: 23px; }
.pale ul:last-child li span { font-size: 13px; color: #a3a3a3; vertical-align: text-top; }

/* bg02 */
.bg02 { position: absolute; width: 50%; height: 367px; top: 2160px; left: 0; background-color: #ededed; z-index: -10; }

/* sns */
.sns { margin-top: 147px; }
.sns_inner { width: 90%; margin: 0 auto; }
.sns ul { display: flex; }
.sns ul li { overflow: hidden; }
.sns ul li img:hover { transform: scale(1.1); transition: all 1s; }
.sns ul:first-child li:nth-child(1) img:hover { transform: none; }

/* footer */
.footer { margin-top: 147px; background-color: #1a1a1a; }
.footer_inner { padding-top: 47px; display: flex; justify-content: space-between; width: 90%; margin: 0 auto; height: 265px; }
.r_menu { display: flex; }
.r_menu ul { padding-left: 25px; }
.r_menu li { font-size: 14px; color: #a8a8a8; }
.r_menu li:nth-child(1) { margin-bottom: 34px; }
.r_menu li:nth-child(2) { font-size: 13px; margin-bottom: 12px; }
.r_menu li:nth-child(3) { font-size: 11px; }

.l_menu { display: flex; flex-direction: column; align-items: flex-end; }
.l_menu nav ul { text-align: right; }
.l_menu nav ul li { display: inline-block; }
.l_menu nav ul li:nth-child(1)::after,
.l_menu nav ul li:nth-child(2)::after { display: inline-block; content: ""; width: 2px; height: 11px; background-color: #a8a8a8; margin: 0 15px;}
.l_menu nav ul li a { font-size: 14px; color: #a8a8a8; }

.snsBtns { margin-top: 25px; }
.snsBtns li { display: inline-block; margin-right: 35px; }
.snsBtns li:nth-child(4) { margin-right: 0px; }
.snsBtns li a { display: block; text-indent: -9999px; }
.snsBtns li:nth-child(1) a { width: 36px; height: 35px; background: url('../images/insta-icon.png') no-repeat; }
.snsBtns li:nth-child(2) a { width: 22px; height: 35px; background: url('../images/face.png') no-repeat; }
.snsBtns li:nth-child(3) a { width: 48px; height: 35px; background: url('../images/youtube.png') no-repeat; }
.snsBtns li:nth-child(4) a { width: 39px; height: 33px; background: url('../images/blog.png') no-repeat; }

/* top 버튼 */
.topBtn { position: fixed; right: 45px; bottom: 35px;  }
.topBtn img { width: 60%; }