@charset "utf-8";

.skip_snb_menu {display:none;}

/* 비주얼 */
.fs_main_visual {background:url("../../images/fs/main/mvis_img.png") no-repeat center/cover;height:100vh;position:relative;}
.main_visual_text {position:absolute;z-index:99;top:50%;transform:translateY(-50%);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:2rem;font-weight:700;font-size:4.8rem;line-height:1.3;text-align:center;color:#fff;}
.btn_down {position:absolute;left:50%;transform:translateX(-50%);z-index:99;animation:spotArrow 0.5s linear 0s infinite alternate;font-size:6rem;color:#fff;opacity:.5;}
.main_visual_text .stb {display:inline-block;position:relative;background: linear-gradient(90deg, #2b9cff 0%, #64e369 33%, #2b9cff 66%, #64e369 100%) 0 0 / 600% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:animatedgradient 6s linear 0s infinite forwards;animation-direction : alternate-reverse;}
    @keyframes animatedgradient {
	  0% {
		background-position: 0%;
	  }
	  100% {
		background-position: 100%;
	  }
}
	@keyframes spotArrow {	0% {bottom:1.6rem;} to {bottom:3rem;}}
.btn_down:is(:hover,:focus,:active) {opacity:1;}
    

/* 컨텐츠 공통 */
.fs_main_contents {}
.con_box {padding:10rem 0;}
.con_box .con_title {font-weight:800;font-size:6.8rem;line-height:1.2;text-align:center;margin-bottom:7rem;}
    @media only screen and (max-width:1199px){
		.con_box .con_title {font-size:6rem;margin-bottom:6rem;}
	}
    @media only screen and (max-width:1023px){
		.con_box .con_title {font-size:5rem;margin-bottom:5rem;}
	}
    @media only screen and (max-width:767px){
		.con_box {padding:8rem 0;}
		.con_box .con_title {font-size:4rem;margin-bottom:3rem;}
	}

/* 박스호텔 소개 */
#intro {padding-top:13rem;background:#f4f4f4;}
#intro .intro_list {display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;}
#intro .intro_list li {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2rem;background:#fff;border-radius:2rem;box-shadow:0 5px 10px rgba(0,0,0,.05);padding:4rem;}
#intro .intro_list li span {font-weight:800;font-size:2.2rem;}
    @media only screen and (max-width:1023px){
		#intro .intro_list li {padding:3rem;}
		#intro .intro_list li span {font-size:2rem;}
	}
    @media only screen and (max-width:767px){
		#intro .intro_list {display:flex;flex-wrap:wrap;gap:1rem;}
		#intro .intro_list li {flex:1 1 40%;padding:2.5rem;gap:1.5rem;}
		#intro .intro_list li img {max-width:4rem;max-height:4rem;}
		#intro .intro_list li span {font-size:1.8rem;}
	}

/* 이용방법 */
#howtouse {background:url("../../images/fs/main/howtouse_bg.png") no-repeat left bottom;}
.step_use {display:flex;flex-wrap:wrap;justify-content:end;gap:3rem;margin-top:3rem;}
.step_use li {background:#24313d;color:#fff;padding:4rem;border-radius:2rem;width:calc(33.33% - 2rem);position:relative;min-height:32rem;}
.step_use li > span {font-size:1.8rem;display:block;font-weight:700;}
.step_use li strong {font-size:2.2rem;display:block;padding:1rem 0 2rem 0;border-bottom:1px dashed #566069;margin-bottom:2rem;}
.step_use li p {font-size:1.7rem;font-weight:300;opacity:0.8;align-items:baseline;}
.step_use .icon {margin-top:2rem;}
.step_use .icon p {display:flex;flex-wrap:wrap;}
.step_use .icon p i {font-size:2rem;}
.step_use .icon p span {width:calc(100% - 3rem);padding-left:1rem;}
.step_use1 li:before {font-family:remixicon;font-size:4rem;color:#808c96;content:"\EA6E";position:absolute;top:calc(50% - 3rem);right:-3.6rem;}
.step_use1 li:last-child:before {content:"\EA4E";right:calc(50% - 3rem);bottom:-4.4rem;top:unset;}
.step_use2 {flex-direction:row-reverse;}
.step_use2 li:before {font-family:remixicon;font-size:4rem;color:#808c96;content:"\EA64";position:absolute;top:calc(50% - 3rem);left:-3.6rem;}
.step_use2 li:last-child:before {display:none;}
    @media only screen and (max-width:1199px){
		#howtouse {background-size:50%;}
		.step_use li {padding:3rem;}
        .step_use li p br {display:none;}
	}
    @media only screen and (max-width:1023px){
		.step_use {gap:3rem 0;}
		.step_use li {width:100%;min-height:auto;background:rgba(36,49,61,0.9);}
		
		.step_use1 li:before {content:"\EA4E";right:0;left:0;bottom:-4.4rem;top:unset;margin:0 auto;text-align:center;}
		.step_use1 li:last-child:before {right:0;}
		.step_use2 li:before {content:"\EA4E";right:0;left:0;bottom:-4.4rem;top:unset;margin:0 auto;text-align:center;}
	}
    
/* 이용가격 */
#price {background:url("../../images/fs/main/price_bg.png") no-repeat center bottom;background-size:cover;}
.type {display:flex;flex-wrap:wrap;justify-content:space-between;}
.type > li {width:32%;background:#fff;padding:0 4rem 3rem 4rem;border-radius:20px;position:relative;}
.type > li em {position:absolute;top:0;right:0;background:url("../../images/fs/main/price_label.png") no-repeat top right;width:170px;height:69px;text-align:right;color:#8cc1ef;font-size:2.2rem;font-weight:600;padding:8px 3rem 0 0;}
.type > li em i {color:#fff;font-weight:800;}
.type > li .img {height:28rem;justify-content:center;align-items:center;display:flex;}
.type > li .title {border-bottom:1px dashed #d3d6d8;padding-bottom:2rem;}
.type > li h4 {font-size:1.8rem;font-weight:700;}
.type > li .price_txt {display:flex;flex-wrap:wrap;justify-content:end;align-items: flex-end;padding-top:2rem;}
.type > li .price_txt span {text-decoration:line-through;color:#24313d;opacity:0.7;}
.type > li .price_txt p {color:#24313d;font-weight:600;padding:0 0.5rem;}
.type > li .price_txt strong {color:#1a88e8;font-size:3.2rem;line-height:1;}
.benefit {font-size:2.2rem;display:flex;flex-wrap:wrap;align-items:center;margin-top:3rem;}
.benefit span {background:#4caf50;width:20rem;height:4.5rem;border-radius:3rem;font-size:3rem;color:#fff;display:flex;justify-content:center;align-items:center;font-weight:700;margin-right:3.5rem;}
.benefit div {color:#24313d;}
    @media only screen and (max-width:1350px){
		.type > li .price_txt span {display:inline-block;width:100%;text-align:right;}
	}
    @media only screen and (max-width:1199px){
		.type > li {padding:0 3rem 2rem 3rem;}
		.type > li h4 {font-size:1.6rem;}
		.type > li .price_txt p {}
		.type > li .price_txt strong {font-size:2.8rem;}
		.benefit span {width:15rem;margin-right:2rem;}
	}
    @media only screen and (max-width:1023px){
		.type {gap:1rem;}
		.type > li {width:100%;}
		.type > li em {padding:10px 3rem 0;}
		.type > li .img {padding-top:4rem;height:32rem;margin-bottom:2rem;}
		.type > li .price_txt span {width:auto;}
		.type > li .price_txt strong {font-size:3.5rem;}
		.benefit span {width:100%;margin-right:0;}
		.benefit div {width:100%;margin-top:1rem;text-align:center;}
	}

/* 오시는길 */
#map .root_daum_roughmap {max-width:100%;}
#map .root_daum_roughmap .cont {display:none;}
.root_daum_roughmap_landing .border2 {display:block;}
.map_box {position:relative;}
.map_box ul {position:absolute;left:0;right:0;margin:0 auto;bottom:0;background:#24313d;z-index:1;width:89rem;display:flex;justify-content:center;align-items:center;height:6rem;border-radius:2rem 2rem 0 0;gap:1rem 2rem;} 
.map_box ul li {color:#fff;display:flex;flex-wrap:wrap;align-items:center;font-weight:300;}
.map_box ul li i {padding-right:0.5rem;}
    @media only screen and (max-width:1199px){
		.map_box ul {width:80rem;}
	}
    @media only screen and (max-width:1023px){
		.map_box ul {width:90%;}
	}
    @media only screen and (max-width:767px){
		#map .root_daum_roughmap {height:40rem;}
		.map_box ul {flex-wrap:wrap;padding:2rem;height:auto;}
		.map_box ul li {width:100%;justify-content:center;}
	}

/* Q&A */
#qna {background:#f4f4f4;}
.faq_box .faq_cont em {display:inline-block;margin:0 4rem 0 5rem;padding-right:4rem;border-right:1px solid rgba(36,49,61,.5);font-weight:700;font-size:2.7rem;vertical-align:middle;text-decoration:none;}
.faq_box .faq_cont dt {position:relative;z-index:1;margin-top:1.5rem;background:#fff;border-radius:2rem;transition:.3s;}
.faq_box .faq_cont dt:first-child {margin-top:0;}
.faq_box .faq_cont dt a {display:flex;align-items:center;padding:3rem 0;font-weight:600;font-size:2.2rem;text-decoration:none;}
.faq_box .faq_cont dt a span {margin:12px 60px 0 auto;transition:.3s;}
.faq_box .faq_cont dt a .etc {position:relative;}
.faq_box .faq_cont dt a .etc:before {content:"";position:absolute;left:-10px;top:-7px;display:block;width:22px;height:2px;background:#24313d;}
.faq_box .faq_cont dt a .etc:after {content:"";position:absolute;left:0;top:-17px;display:block;width:2px;height:22px;background:#24313d;}
.faq_box .faq_cont dt em {color:#1a88e8;}
.faq_box .faq_cont dd {position:relative;z-index:0;display:none;align-items:flex-start;margin-top:-3rem;padding:8rem 0 5rem;line-height:1.5;background:#fff;border-radius:2rem;}
.faq_box .faq_cont dd:after {content:"";display:block;clear:both;}
.faq_box .faq_cont dd em {float:left;color:#222;}
.faq_box .faq_cont dd p {overflow:hidden;}
.faq_box .faq_cont dt.on {background:#1a88e8;border:1px solid #1a88e8;color:#fff;}
.faq_box .faq_cont dt.on a {font-weight:600;}
.faq_box .faq_cont dt.on a .etc:before {background:#fff;}
.faq_box .faq_cont dt.on a .etc:after {display:none;}
.faq_box .faq_cont dt.on em {color:#fff;border-right:1px solid rgba(255,255,255,.5);}
.faq_box .faq_cont dt.on span {transform:rotate(-180deg);margin-top:-12px;}
.faq_box .faq_cont dt.on span img {filter:hue-rotate(315deg) brightness(10);}
	@media only screen and (max-width:1399px){
		.faq_box {padding:0;}
	}
	@media only screen and (max-width:1023px){
		.faq_box .faq_cont em {margin:1px 1rem 0 2rem;padding-right:1rem;}
		.faq_box .faq_cont dt a {padding:2rem 0;font-size:2rem;}
		.faq_box .faq_cont dt a span {margin:1rem 3rem 0 auto;}
		.faq_box .faq_cont dt a .etc:before {left:-8px;top:-6px;width:18px;height:2px;}
		.faq_box .faq_cont dt a .etc:after {left:0;top:-14px;width:2px;height:18px;}
		.faq_box .faq_cont dd {padding:5rem 4rem 3rem 0;}
		.faq_box .faq_cont dd em {margin-right:1rem;}
	}
	@media only screen and (max-width:767px){
		.faq_box .faq_cont dt a {line-height:1.5;padding:15px 0;font-size:1.8rem;}
	}