@charset "UTF-8"; 

/*
*   name : layout
*	header, footer, aside 등 공통 레이아웃과 관련된 요소들을 모아놓습니다.
*/

/*--------------------- z-index ---------------------*/
#header {z-index:100;}
.gnb-bg-pc {z-index:90;}


/*--------------------- default ---------------------*/
#wrap{position:relative;}
#wrap.add .h_counter{display:none;}
#wrap.add #header{top:0;}
#wrap.add .gnb_bg_pc {top:11.5rem;}
#wrap.change #header{background: var(--point-color);}
.no-scroll {overflow:hidden;}

.sub_inwrap {width: 142rem;max-width:100%;padding: 0 2rem;margin:0 auto;}

/*--------------------- header ---------------------*/
.h_counter{width: 100%;height: 12rem;display: flex;align-items: center;justify-content: center;gap: 0 13rem;background: #fff;flex-wrap: wrap;}
.h_counter .counter_lst:last-child{display:none;}
.h_counter .counter_lst{display: flex;align-items: center;gap: 5rem; }
.h_counter .counter_lst.active{opacity: 1; transform: translateY(0);}
.h_counter .text_t {text-align:center;}
.h_counter .text_t p{font-size:3.2rem; color:#242424; line-height:1.2;}
.h_counter .text_t span{font-size:3.2rem; color:#242424; line-height:1.2;}
.h_counter .text_t .date{font-size:2rem;font-weight:500;color:#555;margin-top: 0.5rem;}
.h_counter .number{width:21.5rem; text-align:center; font-size: 6.5rem; font-weight: 900; color: var(--point-color); }

#header{ width: 100%; position: fixed; top: 12rem;  left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: all .3s;}
.header_inwrap{max-width:174rem; height:11.5rem; width:100%; padding: 0 2rem; margin:0 auto; display: flex; align-items: center; justify-content: space-between;}

#header #logo{filter: brightness(0) invert(1);}
#header #logo a{ width: 11.3rem; height: 7.2rem;  display: block;}
#header #logo a img{max-width:100%;}
.gnb-pc{height:100%;}
.gnb-pc #gnb{height:100%;}
.gnb-pc #gnb .gnb_ul{ display: flex;  height: 100%;  gap: 0 10rem;}
.gnb-pc .mn_l1 { height: 100%; display: flex; align-items: center;  flex-wrap: wrap;  position: relative;}
.gnb-pc .mn_a1, .gnb-pc .mn_a1 span { font-family: 'Pretendard';  font-weight: 500;  font-size:1.8rem;  letter-spacing: -0.02em;  color: #fff; }
.gnb-pc .mn_a1:before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:0;background:transparent; opacity:0; transition:all 0.3s;}
.gnb-pc .mn_l1.act .mn_a1:before {content:"";display:block;position:absolute;bottom: -3px;left:0;width:100%;height: 4px;background:var(--point-color);opacity:1;}
/* .gnb-pc .mn_l1.act_on .mn_a1:before {content:"";display:block;position:absolute;bottom: -3px;left:0;width:100%;height: 4px;background:#fff;opacity:1;}
#header.scroll .gnb-pc .mn_l1.act_on .mn_a1:before {content:"";display:block;position:absolute;bottom: -3px;left:0;width:100%;height: 4px;background:var(--point-color); opacity:1;}
#header.act .gnb-pc .mn_l1.act_on .mn_a1:before {content:"";display:block;position:absolute;bottom: -3px;left:0;width:100%;height: 4px;background:var(--point-color); opacity:1;}
 */
.gnb-pc #gnb .depth2_wrap{ display: none; position: absolute;  top: 100%;  padding:3rem 0;}
.gnb-pc #gnb .mn_l2 + .mn_l2{margin-top:3rem;}
.gnb-pc .mn_a2 span {font-size:1.8rem; color:#1c1c1c; white-space: nowrap;transition:all .3s;}
.gnb-pc #gnb .arrowadd{width: 13rem;}
.gnb-pc #gnb .arrowadd .mn_a2{ display:flex; align-items:center; justify-content:space-between; }
.gnb-pc #gnb .arrowadd .mn_a2 .arrow{display:block; width:1.6rem; height:1.6rem; background:url(../img/layout/icon_arrow_down.png) no-repeat center center / 1.6rem; }
.gnb-pc #gnb .arrowadd .mn_a2 .link{display:block; width:1.4rem; height:1.4rem; background:url(../img/layout/icon_link.png) no-repeat center center / 1.4rem; }
.gnb-pc #gnb .arrowadd .mn_a2.act .arrow{background:url(../img/layout/icon_arrow_up.png) no-repeat center center / 1.6rem;}
.gnb-pc #gnb .arrowadd .mn_a2.act .txt{color:var(--point-color); font-weight:500; text-decoration: underline; text-underline-position: under;}
.gnb-pc .mn_l2.has .mn_a2 span{color: var(--point-color);  font-weight: 500;text-decoration: underline; text-underline-position: under;}
.gnb-pc #gnb .mn_l2.has .depth3_wrap.act{display: block;}

.gnb-pc #gnb .depth3_wrap{display:none;}
.gnb-pc #gnb .depth3{margin:2rem 0 1rem 1.5rem;}
.gnb-pc #gnb  .mn_l3 + .mn_l3{margin-top:2rem;}
.gnb-pc .mn_l3 span { font-size: 1.4rem;  white-space: nowrap;}
.gnb-pc .mn_l3.act .mn_a3 span{color: var(--point-color);  font-weight: 500;text-decoration: underline; text-underline-position: under;}

.gnb_bg_pc {z-index:90; display:none;position:fixed;top:23.5rem;left:0;width:100%;background:#ededed;box-shadow:0px 10px 30px rgba(0, 0, 0, 0.01);}
.gnb_bg_pc.scroll{top:11.5rem;}
.gnb_bg_pc.act{top:23.5rem;}

.header_right{display:flex; align-items:center; gap:2rem;}
.header_right a{position:relative;}
.header_right a:before{content:''; display:block; width:1px; height:1.2rem; background:#fff; opacity:0.5; position:absolute; top:50%;     left: -10px; transform: translateY(-50%);}
.header_right a:first-child:before{display:none;}
.header_right a span{color:#fff; font-size:1.3rem;}

.mb_menu{display:none; width:4rem; height:4rem; filter:brightness(0) invert(1); background:url(../img/layout/mb_menu.png) no-repeat center center / 4rem; cursor:pointer;}

#header.scroll{top:0;  background: #fff; border-bottom: 1px solid var(--border-gray);}
#header.scroll #logo{filter:none;}
#header.scroll .header_inwrap{height:11.5rem;}
#header.scroll .gnb-pc .mn_a1, 
#header.scroll .gnb-pc .mn_a1 span{color:var(--point-color);}
#header.scroll .header_right a span{color:#222;}
#header.scroll .header_right a:before{background:#222;}
#wrap.change #header.scroll{background:#fff;}

#header.act{background: #fff; border-bottom: 1px solid var(--border-gray);  }
#header.act #logo{filter:none;}
#header.act .header_inwrap{height:11.5rem;}
#header.act .gnb-pc .mn_a1, 
#header.act .gnb-pc .mn_a1 span{color:var(--point-color);}
#header.act .header_right a span{color:#222;}
#header.act .header_right a:before{background:#222;}
#wrap.change #header.act{background:#fff;}

.gnb-mobile{display:none;}

	@media screen and (min-width:1200px){
		.gnb-pc #gnb .mn_a2:hover span,
		.gnb-pc #gnb .mn_a2:focus span{color:var(--point-color); font-weight:500;}
		
		.gnb-pc .mn_a3:hover span,
		.gnb-pc .mn_a3:focus span{text-decoration: underline; text-underline-position: under;}
		
	}
	
	@media screen and (max-width:1200px){		
		.gnb-pc{display:none;}
		.header_right{display:none;}
		.gnb_bg_pc.scroll{display:none;}
		
		.h_counter {height:12rem;  gap: 0 8rem; padding:0 2rem;}		
		.h_counter .counter_lst{gap:2.5rem;}
		.h_counter .text_t p{font-size: 2.4rem;}
		.h_counter .text_t span{display:none;}
		.h_counter .number{width:16rem; font-size: 4.8rem;}

		#header{top:12rem;  background: var(--point-color);}
		.header_inwrap{height:10rem;}
		#header #logo{margin-left: calc(50% - 5.65rem);}
		#header.scroll{background:var(--point-color);  border-bottom: 0;  box-shadow: 0px 12px 22px rgba(0, 0, 0, 0.07);}
		#header.scroll .header_inwrap{height:10rem;}
		#header.scroll #logo{filter:brightness(0) invert(1);}
		#wrap.add #header{background:transparent;}
		#wrap.add #header.scroll{background:var(--point-color);}
		#wrap.change #header {background: var(--point-color);}

		.mb_menu{display:block;}
		.gnb-mobile{display:block; overflow: hidden; position: fixed; width: calc(100% - 6rem);  height: 100%; top: 0;  bottom: 0; right: -100%;  background: #ddd;  z-index: 102; transition: right 0.8s;}
		.gnb-mobile.open{right:0;}
		.gnb-mobile .mb-gnb_top{ width: 100%; height:10rem; display: flex;  align-items: center;  justify-content: space-between;  padding: 2rem;  background: var(--point-color);} 
		.gnb-mobile .mb-gnb_top .left{ width: 10.3rem; height: 7.2rem;filter: brightness(0) invert(1);}
		.gnb-mobile .mb-gnb_top .left img{width:100%;}
		.gnb-mobile .mb-gnb_top .right{display:flex;  align-items: center;   gap:3rem; }
		.gnb-mobile .mb-gnb_top .right a{width: 5rem;height: 5rem;display: flex;justify-content: center;padding-top: 3.8rem;color: #fff;}
		.gnb-mobile .mb-gnb_top .right .login_btn{background: url(../img/layout/icon_lock.png) no-repeat top center / 2.2rem;}
		.gnb-mobile .mb-gnb_top .right .join_btn{background: url(../img/layout/icon_user.png) no-repeat top center / 2.8rem;}
		.gnb-mobile .mb-gnb_mid{position:relative; width:100%; height: calc(100% - 25.7rem); background:#f7f7f7; transition: all 0.5s;}
		.gnb-mobile .mb-gnb_mid:before{ content: ""; display: block;  width: 60%; height: 100%;  background: #fff;  position: absolute;  top: 0; right: 0;}
		.gnb-mobile #gnb{width:40%; height:100%;}
		.gnb-mobile #gnb .mn_a1{ display: block;  width: 100%; position: relative;  padding:2.5rem 2rem;  border-bottom: 1px solid var(--border-gray);}
		.gnb-mobile #gnb .depth2_wrap{ display:none; position: absolute; width: 60%; right: 0; top: 0; height: 100%; overflow-y: auto; opacity:0; transition: all .3s; transform: translateY(-2rem);}
		.gnb-mobile #gnb .depth2{padding:0 0 2rem 1rem;}
		.gnb-mobile #gnb .mn_l1.act .depth2_wrap{display:block; opacity:1; transform: none;}
 		.gnb-mobile #gnb .mn_a1 span{font-size:2.2rem; font-weight: 500;}
		.gnb-mobile #gnb .mn_a2{display: block; width: 100%; padding: 2rem;}
		.gnb-mobile #gnb .depth3{padding-left:2rem;  margin-bottom: 1.5rem;}
		.gnb-mobile #gnb .mn_a3{display: block; width: 100%; padding: 0 2rem;}
		.gnb-mobile .mb-gnb_btm{width: 100%; height:16rem; background: #fff; padding: 2rem;  border-top: 1px solid var(--border-gray);}
		.gnb-mobile .mb-gnb_btm .tit{ font-size: 2rem;  font-weight: 500; margin-bottom:2rem;}
		.gnb-mobile .mb-gnb_btm .sns{width:100%;display:flex;align-items:center;justify-content: space-between;padding: 0 2rem;}
		.gnb-mobile .mb-gnb_btm .sns li a{width: 5rem;height: 5rem;display: flex;justify-content: center;border-radius: 50%;padding-top: 5rem;}
		.gnb-mobile .mb-gnb_btm .sns li .youtube{background:#dadada url(../img/layout/sns_icon_youtube.png) no-repeat center center;}
		.gnb-mobile .mb-gnb_btm .sns li .instagram{background:#dadada url(../img/layout/sns_icon_insta.png) no-repeat center center;}
		.gnb-mobile .mb-gnb_btm .sns li .cafe{background:#dadada url(../img/layout/sns_icon_cafe.png) no-repeat center center;}
		.gnb-mobile .mb-gnb_btm .sns li .blog{background:#dadada url(../img/layout/sns_icon_blog.png) no-repeat center center;}
		.gnb-mobile .mb-gnb_btm .sns li a span{display:flex; padding-top:1rem;}
		.gnb_bg_mb{display:none; position: fixed; top: 0;  bottom: 0;  left: 0; right: 0;  width: 100%; height: 100%; background: rgba(33, 33, 33, 0.7); z-index: 101;}
		.mb-gnb_close{display: none;position: fixed;top: 3.2rem; left: 1.8rem;width: 2.8rem;height: 2.8rem;background: url(../img/layout/icon_close.png) no-repeat center center / 2.8rem; cursor:pointer; z-index: 102;}
		.gnb-mobile #gnb .mn_a2 span{font-size:2.2rem;}
		.gnb-mobile #gnb .mn_a3 span{font-size:2rem; }
		.gnb-mobile #gnb .mn_l3 +.mn_l3{margin-top:2rem;}
		.gnb-mobile #gnb .mn_l1.act_on .mn_a1 span{color: var(--point-color);}
		.gnb-mobile #gnb .mn_l1.act_on .mn_l2.act .mn_a2 .txt{color: var(--point-color);}
		.gnb-mobile #gnb .mn_l1.act_on .mn_l3.act span{  text-decoration: underline; text-underline-position: under;  color: inherit;}
	}

	@media screen and (max-width:680px){
		.h_counter{ gap: 0 3rem; align-items: stretch;}
		.h_counter .counter_lst:last-child{display:block;  width: 100%;}
		.h_counter .text_t .date{font-size:1.8rem;}		
		.h_counter .text_t .date.pc{display:none;}
		.h_counter .number{ width: 14rem;  font-size: 4.4rem;}
		
	}
	
	@media screen and (max-width:640px){
		.h_counter{ gap: 0 3rem; align-items: stretch;}
		.h_counter .counter_lst:last-child{display:block;  width: 100%;}
		.h_counter .text_t .date{font-size:1.8rem;}		
		.h_counter .text_t .date.pc{display:none;}
		.gnb-mobile #gnb .depth2 { padding: 0.4rem 0 2rem 1rem; }
		.gnb-mobile #gnb .mn_a2 span{font-size:2rem;}
		.gnb-mobile #gnb .mn_a3 span{font-size:1.8rem; }
		
	}

	@media screen and (max-width:480px){
		.h_counter{height:10rem;}
		.h_counter .counter_lst{gap:1.5rem;}
		.h_counter .text_t p{font-size:2rem;}
		.h_counter .number{width:10.5rem; font-size:3.2rem;}

		#header{top:10rem;}
		.gnb-mobile #gnb .mn_a1 span{font-size:2rem;}
		.gnb-mobile #gnb .mn_a2 span{font-size:1.8rem;}
		.gnb-mobile .mb-gnb_btm .sns{padding:0;}
	}

	@media (min-width: 320px) and (max-width: 420px){
		.h_counter{padding:0; gap:0 2rem;}
		.h_counter .number{font-size:2.4rem;}

		.gnb-mobile #gnb .mn_a1{ padding: 2.2rem 1.2rem;}
		.gnb-mobile #gnb .depth2{padding:0.3rem 0 0 0;}
	}

/*--------------------- quickmenu ---------------------*/
.quick_menu{position: fixed;  right: 0; bottom: 20rem;  z-index: 100;border-radius: 2rem; box-shadow: 0px 12px 22px rgba(0, 0, 0, 0.07);}
.quick_menu ul{ background: var(--point-color);  border-radius: 2rem 0 0 2rem; padding: 2rem 1.5rem 1rem;}
.quick_menu ul li + li{border-top:1px solid #fff; padding: 2.4rem 0 1.5rem; }
.quick_menu ul li:nth-child(2){border-top:none; padding-top:0;}
.quick_menu ul li a, .quick_menu ul li span{display:block; color:#fff; font-size:1.5rem;}
.quick_menu ul li a{text-align:center; padding-top:4.5rem;  filter: brightness(0) invert(1);}
.quick_menu ul .call_inquiry a {background: url(../img/layout/quick_icon_call.png) no-repeat top center / 3.5rem;}
.quick_menu ul .online_inquiry a {background: url(../img/layout/quick_icon_online.png) no-repeat top center / 3.5rem;}
.quick_menu ul .online_res a {background: url(../img/layout/quick_icon_booking.png) no-repeat top 0.5rem center / 2.7rem;}
.quick_menu ul .direction a {background: url(../img/layout/quick_icon_map.png) no-repeat top center / 3.5rem;}
.quick_menu ul .community a {background: url(../img/layout/quick_icon_community.png) no-repeat top center / 3.5rem;}
.quick_menu .call_inquiry{display:none;}
.quick_menu ul .call_inquiry a , .quick_menu ul .call_inquiry a span{ color: var(--point-color);}

	@media screen and (min-width:1200px){
		.quick_menu ul li:hover a span{font-weight:600;}
	}
	@media screen and (max-width:1200px){
	
		.quick_menu{ width: 100%; bottom: 0; box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.2);}
		.quick_menu ul{display: flex;  align-items: center; justify-content: space-between; border-radius: 0;  background:#fff;  padding: 1.8rem 3.5rem;}
		.quick_menu ul li{}
		.quick_menu ul li + li{padding:0; border-top:0;}
		.quick_menu ul li a, .quick_menu ul li span{color:#222;  font-weight:500; }
		.quick_menu ul li a{ filter: contrast(0.6);}
		.quick_menu .call_inquiry{display:block;}

	}

	@media screen and (max-width:390px){
		.quick_menu ul{ padding: 1.8rem 2.5rem;}
	}


/*--------------------- subnavi ---------------------*/
.sub-header-wrap{position:relative; overflow:hidden; padding-top:11.5rem; width: 100%;  height: 57rem;}
.sub-header-wrap:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transform: scale(1.2); transition: transform 1.5s ease-out; z-index:-1;}
.sub-header-wrap.vis-01:before{background-image: url(../img/layout/sub_vis01.png);}
.sub-header-wrap.vis-02_1:before{background-image: url(../img/layout/sub_vis02_1.png);}
.sub-header-wrap.vis-02_2:before{background-image: url(../img/layout/sub_vis02_2.png);}
.sub-header-wrap.vis-02_3:before{background-image: url(../img/layout/sub_vis02_3.png);}
.sub-header-wrap.vis-02_4:before{background-image: url(../img/layout/sub_vis02_4.png);}
.sub-header-wrap.vis-03:before{background-image: url(../img/layout/sub_vis03.png);}
.sub-header-wrap.vis-04:before{background-image: url(../img/layout/sub_vis04.png);}
.sub-header-wrap.vis-05:before{background-image: url(../img/layout/sub_vis05.png);}
.sub-header-wrap.loaded:before {transform: scale(1.0);}
.sub-header-wrap .sub_inwrap{height:100%;}
.sub-header-wrap #sub-header{width:100%; height:100%; display: flex; flex-direction: column;  justify-content: space-between;}
#sub-header .breadcrumb{display: flex;  align-items: center; gap:3rem; justify-content: flex-end; margin-top: 2rem;}
#sub-header .breadcrumb li{position:relative; color:#fff;}
#sub-header .breadcrumb .home { width:1.6rem; height:1.6rem; background:url(../img/layout/icon_home.png) no-repeat center center /1.6rem;}
#sub-header .breadcrumb li:before{content:'';display:block;position:absolute;top:50%;left:-1.7rem;transform:translateY(-50%);background: url(../img/layout/breadcrumb_arrow.png) no-repeat center center /0.8rem;width: 0.8rem;height: 1.4rem;}
#sub-header .breadcrumb .home:before{display:none;}
#sub-header h2{ text-align: center; color: #fff; font-size: 5.7rem; font-weight: 500;}
#sub-header .sub-navi .depth2_w{ width: 100%;  display: flex;  align-items: flex-start;}
#sub-header .sub-navi .depth2_w .depth2{position:relative; width:calc(100% / 4);}
#sub-header .sub-navi .depth2_w.other .depth2{width:calc(100% / 3);}
#sub-header .sub-navi.ty01 .depth2_w .depth2{width:calc(100% / 3);}
#sub-header .sub-navi .depth2_w .depth2 > a{position:relative; display: flex;  align-items: center; justify-content: center; padding:2.5rem 1rem;  background: rgba(115, 16, 63, 0.4);}
#sub-header .sub-navi .depth2_w .depth2 > a span{ color:#fff; font-size:2.2rem;}
#sub-header .sub-navi .depth2_w .depth2.active > a{background:var(--point-color);}
#sub-header .sub-navi .depth2_w .depth2.active > a span{font-weight:600;}
#sub-header .sub-navi .depth3_w{display:none;}

	@media screen and (max-width:1200px){	
		.sub-header-wrap .sub_inwrap{width: 100%; padding: 0;}
		.sub-header-wrap {padding-top: 10rem;}
		#sub-header .breadcrumb{display:none;}
		#sub-header h2{margin-top:12rem;  font-size: 5.5rem;}

		#sub-header .sub-navi{background: #fff; overflow-y: auto;box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.07);}
		#sub-header .sub-navi .depth2_w{ width: 98rem;}
		#sub-header .sub-navi .depth2_w .depth2{width:auto;}
		#sub-header .sub-navi .depth2_w.other .depth2{width:auto;}
		#sub-header .sub-navi .depth2_w .depth2 > a{background:#fff; padding: 2.5rem 2rem;}
		#sub-header .sub-navi .depth2_w .depth2 > a span{color:#222;}
		#sub-header .sub-navi .depth2_w .depth2.active > a{background:#fff;} 
		#sub-header .sub-navi .depth2_w .depth2.active > a:before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--point-color);}
		#sub-header .sub-navi .depth2_w .depth2.active > a span{ color: var(--point-color);}
		#sub-header .sub-navi .depth3_w{position: absolute;left: 2rem;bottom: -4rem;min-width: 70rem;width: 100%;}
		#sub-header .sub-navi .depth3_w.active{display:block;}
		#sub-header .sub-navi .depth3_w .depth3_l{width: auto; display: flex;  align-items: center;  gap: 2.5rem;}
		#sub-header .sub-navi .depth3_w .depth3_l li{}
		#sub-header .sub-navi .depth3_w .depth3_l li a{padding: 1.2rem 1rem;}
		#sub-header .sub-navi .depth3_w .depth3_l li a span{font-size:2rem;}
		#sub-header .sub-navi .depth2_w .mn_l3.active > a{background:#fff;} 
		#sub-header .sub-navi .depth2_w .mn_l3.active > a span{ color: var(--point-color);}

		#sub-header .sub-navi.act_height{height:14rem;}
        .sub-header-wrap.act_height{height:66rem;}
	}

	@media screen and (max-width:640px){
		.sub-header-wrap{ height: 52rem;}
		.sub-header-wrap.vis-01:before{background-image: url(../img/layout/sub_vis01_m.png);}
		.sub-header-wrap.vis-02_1:before{background-image: url(../img/layout/sub_vis02_1_m.png);}
		.sub-header-wrap.vis-02_2:before{background-image: url(../img/layout/sub_vis02_2_m.png);}
		.sub-header-wrap.vis-02_3:before{background-image: url(../img/layout/sub_vis02_3_m.png);}
		.sub-header-wrap.vis-02_4:before{background-image: url(../img/layout/sub_vis02_4_m.png);}
		.sub-header-wrap.vis-03:before{background-image: url(../img/layout/sub_vis03_m.png);}
		.sub-header-wrap.vis-04:before{background-image: url(../img/layout/sub_vis04_m.png);}
		.sub-header-wrap.vis-05:before{background-image: url(../img/layout/sub_vis05_m.png);}
	
		#sub-header .sub-navi ul{ width: 76rem;}
	} 

/*--------------------- footer ---------------------*/
#footer{width:100%; background:var(--bg-gray);    padding: 5rem 0;}
.footer_inwrap{width: 154rem;  max-width: 100%;  padding: 0 2rem;  margin:0 auto;  display: flex; gap:6rem;}
.footer_logo{width:17rem; height:11rem; background:url(../img/layout/yuba_logo_gray.png) no-repeat center center; }
.footer_info .link{display: flex; align-items: center; gap: 2rem;}
.footer_info .link a{position:relative; font-size:1.4rem;}
.footer_info .link a:before{content:''; display:block; width:1px; height:1.2rem; background:#222; opacity:0.5; position:absolute; top:50%;     left: -10px; transform: translateY(-50%);}
.footer_info .link a:first-child:before{display:none;}
.footer_info .address{ margin: 3rem 0; display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; max-width: 70rem;font-style: normal;}
.footer_info .address > div{font-size:1.4rem; color:#757575;}
.footer_info .sns{display: flex;  align-items: center;  gap: 1rem;}
.footer_info .sns li a{width:3.4rem;height:3.4rem; display:block;border-radius: 50%;  transition:all .3s;}
.footer_info .sns li .youtube{background:#dadada url(../img/layout/sns_icon_youtube.png) no-repeat center center;}
.footer_info .sns li .instagram{background:#dadada url(../img/layout/sns_icon_insta.png) no-repeat center center;}
.footer_info .sns li .cafe{background:#dadada url(../img/layout/sns_icon_cafe.png) no-repeat center center;}
.footer_info .sns li .blog{background:#dadada url(../img/layout/sns_icon_blog.png) no-repeat center center;}

.footer_familysite{width: 18.6rem; margin-left:auto;display: flex; align-items: center; gap:2rem;}
.footer_familysite .tit{position:relative; line-height:1.2; }
.footer_familysite .tit:before{content:''; display:block; width:1px; height:2.4rem; background:#222; opacity:0.5; position:absolute; top:50%; right: -10px; transform: translateY(-50%);}
.footer_familysite .familysite{width:14rem;}

.pageTopbtn{display: none;  position: absolute; bottom: 5.5rem;  right: 2rem;   width: 5rem;  height: 5rem;  background: #fff url(../img/default/icon_move_arrow.svg) no-repeat center center / 2.2rem; border-radius: 50%;  cursor: pointer;   box-shadow: 1px 2px 14px rgba(0, 0, 0, 0.15);   transition: opacity 0.3s, transform 0.3s;transform: rotate(-90deg);}

	@media screen and (min-width:1200px){
	
		.footer_info .sns li a:hover{background-color: #fff;}


	}

	@media screen and (max-width:1200px){
	
		#footer{margin-bottom:8.5rem;}
		.footer_logo{display:none;}
		.footer_familysite{display:none;}
		.pageTopbtn{display:block;}
	}

	@media screen and (max-width:640px){
		.footer_info .sns li a{width:4.2rem; height:4.2rem;}
	}