@charset "UTF-8";

/*=*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*=*=*=
									
							COMMON STYLE & LAYOUT

=*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*=*/


.visually-hidden {display:none;}
.no-tel {pointer-events: none; cursor: default;}

.sub_section {width: 100%; padding: 100px 0;}
.sub_section h3, h4 {text-align: center;}
.sub_section p {font-size: 15px; line-height: 1.7; text-align: center;}
.sub_section h3+p, .sub_section h4+p {margin-top: 1.5rem;}
.sub_section.gray {background-color: #f8f8fa;}

.visually-hidden+.sub_section {padding-top: 170px;}

.section_title {margin-bottom: 5rem;}

.half-devided {display: flex; justify-content: center; flex-wrap: wrap;  align-items: center;}
.half-devided .box {width: 50%}

.show768 {display: none;}

@media (max-width: 1920px) {
}

@media (max-width: 1200px) {
	.sub_section {padding: 90px 0;}
	.sub_section h3+p, .sub_section h4+p {margin-top: 1rem;}
}

@media (max-width: 980px) {
	.sub_section {padding: 70px 0;}
	
	.section_title {margin-bottom: 3rem;}
	
	.visually-hidden+.sub_section {padding-top: 110px}
	
}

@media (max-width: 768px) {
	.sub_section {padding: 50px 0;}
	.sub_section p {font-size: 14px; line-height: 1.5;}
	.sub_section h3+p, .sub_section h4+p {margin-top: 0.8rem;}
	.section_title {margin-bottom: 3rem;}
	
	.half-devided .box {width: 100%}
	
	.visually-hidden+.sub_section {padding-top: 100px}
	
	.show768 {display: block;}
	
		.mypage_user { margin-top:70px }
}



/*=*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*=*=*=
									
								1.공간공감 소개

=*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*=*/

#intro-section02 {background: url("../_img/sub/intro-sec1-bg.jpg") no-repeat center; background-size: cover; padding: 0;}
#intro-section02 .box {position: relative; min-height: 600px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#intro-section02 .box * {color: #fff;}
#intro-section02 .box:first-of-type::before {position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 60%; background-color: #fff; opacity: .3; content: '';}


.businessIntro {position: relative; gap:10rem}
.businessIntro .box {border:1px solid #000; border-left: 0; border-right: 0; padding: 0 30px;}
.businessIntro::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px;  border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 1; pointer-events: none; font-size: 1.5rem; font-weight: 700; box-sizing: border-box;}

#intro-section03 .businessIntro::before {background-color: #000; color: #fff; content: "or";}
#intro-section04 .businessIntro::before {background-color: #fff; color: #000; content: "+"; border: 1px solid #000;}


.ceoInfo {justify-content: space-between; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; margin: 0 auto; }
.ceoInfo .box {background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 500px; width: auto; box-sizing: border-box; padding: 60px; display: flex; align-items: flex-end; justify-content: space-between; }
.ceoInfo .box#ceo1 {background-image: url("../_img/sample/intro-sample2.png");}
.ceoInfo .box#ceo2 {background-image: url("../_img/sample/intro-sample1.jpg");}
.ceoInfo .box .name {text-align: left;}
.ceoInfo .box p {color: #fff; text-align: left;}
.ceoInfo .box p span {font-size: 30px;}
.ceoInfo .box .num a {font-size: 16px; color: #fff; border: 1px solid #fff; width: 140px; height: 45px; line-height: 45px; text-align: center; display: block;}


@media (max-width: 1200px) {
	#intro-section02 .box {min-height: 400px;}
	.businessIntro {gap:7rem;}
	.businessIntro::before {width:60px; height: 60px; font-size: 1.3rem}
	
	.ceoInfo {gap:2rem}
	.ceoInfo .box {min-height: 400px; padding: 30px;}
	.ceoInfo .box p {line-height: 1.5;}
	.ceoInfo .box p span {font-size: 25px;}
	.ceoInfo .box .num a {width: 120px; height: 40px; line-height: 40px; font-size: 14px;}
}

@media (max-width: 1024px) {
	
}

@media (max-width: 980px) {
	#intro-section02 .box {min-height: 350px;}
	.businessIntro .box { min-height: 250px; box-sizing: border-box; align-items: center; display: flex; flex-direction: column; justify-content: center;}
	
	.ceoInfo .box {min-height: 300px;}
	.ceoInfo .box p {font-size: 12px;}
	.ceoInfo .box p span {font-size: 20px;}
}

@media (min-width: 768px) {
	.businessIntro .box {max-width: 500px; flex:1; padding: 60px 0;}
	
}
@media (max-width: 768px) {
	#intro-section02 .box {min-height: 0; padding: 5.5rem 0;} 
	#intro-section02 .box:first-of-type::before {width: 90%; height: 1px; top: auto; transform: translate(-50%,0); left: 50%; bottom: 0; right: auto;}
	
	.businessIntro {gap:0}
	.businessIntro .box {width: 90%; min-height: auto; padding: 45px 0;}
	.businessIntro .box:first-of-type {border-bottom: 0; }
	.businessIntro .box:last-of-type {border-top: 0; }
	.businessIntro .box p br {display: none;}
	.businessIntro::before {width:40px; height: 40px; font-size: 1rem} 
	
	
	.ceoInfo {grid-template-columns: auto; gap:0; display: block;}
	.ceoInfo .box {width: 100%; min-height: 250px; padding: 25px;}
	.ceoInfo .box#ceo1 {margin-bottom: 1rem;}
	.ceoInfo .box .num a {width: 110px; height: 35px; line-height: 35px; font-size: 13px;}
}




/*=*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*=*=*=
									
								2.숙소상세페이지

=*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*=*//**/

.stayInfo-head {position: relative; margin-top: 100px;}
.stayInfo-head #stay_title {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;}
.stayInfo-head #stay_title * {color: #fff; text-align: center;}
.stayInfo-head #stay_title h2 {margin-bottom: 2rem}
.stayInfo-head #stay_title p {}
.stayInfo-head  #stay_headImg {width: 100%; height: 780px; max-height: 780px; background-color: #000;}
.stayInfo-head  #stay_headImg img {inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover; opacity: 0.6;}



.stayInfo-body {padding: 40px 32px; display: flex; justify-content: center; align-items: flex-start; gap: 32px;}
.stayInfo-body .stay_detail {flex: 1 1 0; max-width: 995px; min-width: 0;}
.stayInfo-body .sub_section+.sub_section {border-top: 1px solid #ddd; padding: 60px 0}
.stayInfo-body .sub_section {padding: 60px 0}
.stayInfo-body .sub_section h5 {font-size: 20px !important; font-weight: 500}
.stayInfo-body .sub_section>h5 {margin-bottom: 20px;}
.stayInfo-body .sub_section p {text-align: left;}
.stayInfo-body .sub_section p span#address {background: url("../_img/resource/map-pin.svg") no-repeat center left; background-size: 15px; padding-left: 17px}


.stayInfo-body .stay_quaick_reservation {position: sticky; top: 102px; flex-shrink: 0; width: 370px; padding:30px; box-sizing: border-box; border: 1px solid #000; border-left: 0; border-right: 0; height: fit-content; }
.stayInfo-body .stay_quaick_reservation h5 {font-size: 20px !important; font-weight: 500; margin-bottom: 5px}
.stayInfo-body .stay_quaick_reservation p {font-size: 13px; line-height: 1.3;}
.stayInfo-body .stay_quaick_reservation p+p {margin-top: 10px;}
.stayInfo-body .stay_quaick_reservation p span {position: relative; padding: 0 10px; color: #7a7a7a}
.stayInfo-body .stay_quaick_reservation p:first-of-type span:first-of-type {padding-left: 0;}
.stayInfo-body .stay_quaick_reservation p span:first-of-type::before, .new_stay-list .new_stay-item .new_stay-content .info p.tag span::before {display: none;}
.stayInfo-body .stay_quaick_reservation p span::before {position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 12px; content: ''; background: #ddd}
.stayInfo-body .stay_quaick_reservation p.tag {display: flex; flex-wrap: wrap; justify-content: flex-start;}
.stayInfo-body .stay_quaick_reservation p.tag span {border: 1px solid #dedede; border-radius: 5rem; padding-top: 3px; padding-bottom: 3px; margin-left: 6px; font-size: 12px;}
.stayInfo-body .stay_quaick_reservation p.tag span:first-of-type {margin-left: 0;}
.stayInfo-body .stay_quaick_reservation p.tag span::before {display: none;}
.stayInfo-body .stay_quaick_reservation dl {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 0; border-top: 1px solid #ddd; margin-top: 20px;}
.stayInfo-body .stay_quaick_reservation dl dt, .stayInfo-body .stay_quaick_reservation dl dd {font-weight: 500; }
.stayInfo-body .stay_quaick_reservation dl dt {}
.stayInfo-body .stay_quaick_reservation dl dd {}
.stayInfo-body .stay_quaick_reservation a {display: block; width: 100%; border-radius: 5rem; background: #000; color: #fff; text-align: center; line-height: 50px; height: 50px; margin-top: 20px;}


.navigation_bar {position: sticky; top: 102px; background: #fff; border: 1px solid #000; border-left: 0; border-right: 0; z-index: 50;}
.navigation_bar ul {display: flex; justify-content:space-around; align-items: center; flex-wrap: wrap;}
.navigation_bar ul li {position: relative; width: 20%; text-align: center;}
.navigation_bar ul li::after {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 15px; background-color: #dedede; content: '';}
.navigation_bar ul li:first-of-type::after {display: none;}
.navigation_bar ul li button { background: none; border: none; font-size: 15px; color: #a3a3a3; cursor: pointer; transition: color 0.3s; line-height: 55px}
.navigation_bar ul li button:hover, .navigation_bar ul li button.active { color: #000; position: relative;}
.navigation_bar ul li button.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 2px; background: #000; border-radius: 2px;}


.stay_point {}
.stay_point * {text-align: left !important}
.stay_point h4 {font-size: 18px !important; line-height: 1.4 !important;}
.stay_point h4+p {margin-top: 5px;}
.stay_point p {/*color: #777;*/}
.stay_point+.stay_point {margin-top: 60px }
.stay_point .stay_pointImg {}
.stay_point .stay_pointImg img {width: 100%}

.stayInfo-pics-slider,.stayInfo-outPics-slider {position: relative; width:100%; overflow: hidden; margin-top: 20px;}
.stayInfo-pics-slider .swiper-slide img,.stayInfo-outPics-slider .swiper-slide img {width:100%;}

.stayInfo-outPics-slider .stayInfo-outPics-slider-button {position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background-color: rgba(0,0,0,0.5); text-align: center; align-items: center; cursor: pointer; z-index: 10; display: flex; justify-content: center;}
.stayInfo-outPics-slider .stayInfo-outPics-slider-button img {width: 20px}
.stayInfo-outPics-slider #stayInfo-outPics-slider-button-prev {left: 0;}
.stayInfo-outPics-slider #stayInfo-outPics-slider-button-next {right: 0;}
#map-wrapper {margin: 30px 0; width: 100%; height: 450px; min-height: 250px; background-color: #f8f8f8; box-sizing: border-box; border: 1px solid #dedede;}
#around_list {}
#around_list li {font-size: 15px; color: #777; display: flex; justify-content: flex-start; gap:10px; align-items: center; font-weight: 300;} 
#around_list li+li {margin-top: 15px}
#around_list li span {color: #fff; border-radius: 50px; background: #000; display: block; width: 100px; height: 35px; line-height: 35px; text-align: center;}

/*.room-info-table {width: 100%; border-collapse: collapse; font-size: 15px; border-top: 1px solid #e1e1e1; margin-top: 20px;}
.room-info-table th, .room-info-table td { border-bottom: 1px solid #e1e1e1; padding: 0 16px; height: 60px; vertical-align: middle; font-weight: 300;}
.room-info-table th {background-color: #fbfbfb; font-weight: 400; width: 20%; text-align: center;}
.room-info-table td {width: 30%; text-align: left;}*/

.room-info-table {width: 100%; border-top: 1px solid #e1e1e1; margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: flex-start;}
.room-info-table dl {width: 50%; display: flex; flex-wrap: wrap; justify-content: flex-start;}
.room-info-table dt, .room-info-table dd { font-size: 15px; border-bottom: 1px solid #e1e1e1; padding: 0 16px; height: 60px; line-height: 60px;  vertical-align: middle; font-weight: 300; box-sizing: border-box;}
.room-info-table dt {background-color: #fbfbfb; font-weight: 400; width: 30%; text-align: center;}
.room-info-table dd {width: 70%; text-align: left;}

ul.amenities-list {display: grid; flex-wrap: wrap; justify-content: space-between; gap:0; grid-template-columns: repeat(4, 1fr); margin-top: -10px;}
ul.amenities-list li {font-size: 15px; background-size: 22px; padding-left: 30px; background-position: center left; background-repeat: no-repeat; margin-top: 30px;}
ul.amenities-list li.ameni-bath {background-image: url("../_img/resource/bath.svg");}
ul.amenities-list li.ameni-barbecue {background-image: url("../_img/resource/beef.svg");}
ul.amenities-list li.ameni-cook {background-image: url("../_img/resource/cooking-pot.svg");}
ul.amenities-list li.ameni-cold {background-image: url("../_img/resource/air-vent.svg");}
ul.amenities-list li.ameni-warm {background-image: url("../_img/resource/thermometer-sun.svg");}
ul.amenities-list li.ameni-shampoo {background-image: url("../_img/resource/soap-dispenser-droplet.svg");}
ul.amenities-list li.ameni-bodywash {background-image: url("../_img/resource/bubbles.svg");}
ul.amenities-list li.ameni-wifi {background-image: url("../_img/resource/wifi.svg");}
ul.amenities-list li.ameni-dry {background-image: url("../_img/resource/Hair-Dryer-Light--Streamline-Phosphor.svg"); background-size: 20px; padding-left: 26px}
ul.amenities-list li.ameni-pet {background-image: url("../_img/resource/paw-print.svg");}
ul.amenities-list li.ameni-swim {background-image: url("../_img/resource/waves-ladder.svg");}


.notice_list-wrap {width: 100%; box-sizing: border-box; padding:50px; background: #fafafa}
.notice_list-wrap dl {}
.notice_list-wrap dl dt {font-size: 17px; font-weight: 500;}
.notice_list-wrap dl dd {font-size: 15px; color: #4a4a4a; margin-top: 10px; font-weight: 300;}
.notice_list-wrap dl+dl {margin-top: 40px;}


@media (max-width: 1100px) {
	.stayInfo-head .contents {padding-left: 20px; padding-right: 20px;}
	.stayInfo-body {padding: 40px 20px}
	.stay_point p {line-height: 1.5;}
	.notice_list-wrap {padding: 30px;}
	
}

@media (max-width: 980px) {
	.stayInfo-head {margin-top: 80px;}
	.stayInfo-head .contents {padding-left: 0; padding-right: 0;}
	.stayInfo-head #stay_headImg {height: 680px;} 
	.stayInfo-body {display: block;}
	
	.navigation_bar {top: 81px;}
	.navigation_bar ul li button {line-height: 50px;}
	.stayInfo-body .stay_quaick_reservation {position: fixed; top:auto; left: 0; bottom: 0; width: 100%; padding: 15px; background: #fff; z-index: 9; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-bottom: 0}
	.stayInfo-body .stay_quaick_reservation h5 {font-size: 18px !important; margin-bottom: 2px}
	.stayInfo-body .stay_quaick_reservation p {display: none !important;}
	.stayInfo-body .stay_quaick_reservation a {font-size: 13px; height: 40px; line-height: 40px; width: 140px; margin-top: 0}
	.stayInfo-body .stay_quaick_reservation dl {padding: 0; margin-top: 0px; border-top:none;  opacity: 0.5;}
	.stayInfo-body .stay_quaick_reservation dl dt {margin-right: 7px;}
	.stayInfo-body .stay_quaick_reservation dl dt span {font-size: 13px;}
	.stayInfo-body .stay_quaick_reservation dl dd {font-weight: 600;}
	
	.room-info-table dt, .room-info-table dd {font-size: 14px;}
	
}




@media (max-width: 768px) {
	.stayInfo-head #stay_headImg {height: 480px;}
	.stayInfo-head #stay_title {width: 90%;}
	.stayInfo-head #stay_title h2 {font-size:1.7rem; margin-bottom: 1rem;}
	.stayInfo-head #stay_title p {font-size:15px;}
	
	
	.stayInfo-body .stay_detail .sub_section {padding: 40px 0}
	.stayInfo-body .stay_detail .sub_section h5 {font-size: 18px !important;}
	.stayInfo-body .stay_detail .sub_section>h5 {margin-bottom: 10px;}
	.stay_point+.stay_point {margin-top: 40px}
	.stay_point h4 {font-size: 16px !important}

	.navigation_bar {top: 75px}
	.navigation_bar ul li button {font-size: 14px; }
	#map-wrapper {height: 300px;}
	

	.room-info-table dl { width: 100%;}
	.room-info-table dt, .room-info-table dd {line-height: 1.5; height: auto; padding: 15px 10px}
	
	ul.amenities-list li {font-size: 14px; background-size: 20px; padding-left: 27px; margin-top: 20px;}
	ul.amenities-list li.ameni-dry {background-size: 18px; padding-left: 25px;}
	
	.notice_list-wrap {padding: 20px;}
	.notice_list-wrap dl+dl {margin-top: 30px;}
	.notice_list-wrap dl dt {font-size: 15px;}
	.notice_list-wrap dl dd {font-size:14px; line-height: 1.5; margin-top: 8px;}
	
	
}


@media (max-width: 640px) {
	.stayInfo-outPics-slider .stayInfo-outPics-slider-button {width: 35px; height: 35px;}
	.stayInfo-outPics-slider .stayInfo-outPics-slider-button img {width: 15px;}
	.navigation_bar ul {justify-content: flex-start; box-sizing: border-box; padding-left: 10px; padding-right: 10px; column-gap: 10px}
	.navigation_bar ul li {width: auto;}
	.navigation_bar ul li::after {display: none;}
	.navigation_bar ul li button {font-size: 13px; line-height: 45px;}
	#around_list li {font-size: 13px; line-height: 1.3;}
	#around_list li span {flex-shrink: 0; width: 80px; height: 30px; line-height: 30px;}
	
	#map-wrapper {height: 200px;}
	
	ul.amenities-list {grid-template-columns: repeat(3, 1fr);}

	.stayInfo-body .stay_quaick_reservation h5 {font-size: 16px;}
}




/*=*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*=*=*=
									
								3.숙소 저널

=*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*==*=*=*//**/

#journal-head  #stay_headImg { height: 470px; max-height: 470px;}
#journal-body { padding-top: 0; padding-bottom: 0}
#journal-body .inner_cont {max-width: 980px;}
#journal-body .journal_pics {margin-top: 60px;}
#journal-body .journal_pics img {width: 100%; display: block;}
.quick_reservation-btn {/*position: sticky; bottom: 0; left: 50%; transform: translate(-50%, -50%); */width: 90%; max-width: 300px;  margin: 0 auto; margin-top: 100px;}
.quick_reservation-btn a {display: block; width: 100%; height: 50px; border-radius: 5px; background-color: #000; color: #fff; font-size: 15px; text-align: center; line-height: 50px;}



@media (max-width: 640px) {
	#journal-head #stay_headImg {height: 320px;}
	
	#journal-body {padding-left: 0; padding-right: 0}
	#journal-body .journal_pics {margin-top: 40px;}
	
	
	.quick_reservation-btn {max-width: 200px;}
	.quick_reservation-btn a {font-size: 13px; line-height: 45px; height: 45px;}
}