#ft {background: #3c3c3c; position: relative}
#ft .footer_head {display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px; border-bottom: 1px solid var(--font)}
#ft .footer_head .footer_menu {display: flex; align-items: center; gap: 0 45px}
#ft .footer_head .footer_menu li {position: relative}
#ft .footer_head .footer_menu li + li::before {content: ''; display: block; width: 1px; height: 15px; background: var(--white); position: absolute; left: -24px; top: 3px}
#ft .footer_head .footer_menu li a {color: var(--white); font-weight: 200; transition: all .2s}
#ft .footer_head .footer_menu li a:hover {color: var(--main-color)}
#ft .footer_head .footer_link_wrap {display: flex; gap: 0 10px; align-items: center}
#ft .footer_head .footer_link_wrap > ul {display: flex; gap: 0 10px}
#ft .footer_head .footer_link_wrap > ul li a img {width: 29px}

.family_site_wrap {display: inline-block; position: relative}
.family_site_wrap::after {content: ''; display: block; width: 7px; height: 11px; background: var(--white); position: absolute; right: 15px; top: 10px; transform: rotate(90deg)}
.footer-menu-button {color: #fff; border: none; padding: 5px 35px 5px 15px; cursor: pointer; background: transparent; border: 1px solid var(--white); transition: all .2s}
.family_site_wrap.down::after {transform: rotate(270deg)}
  
.footer-menu-button:hover,
.footer-menu-button:focus {background: #555}
.footer-menu-list{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid #ccc;list-style:none;padding:0;margin:0;width:130px;z-index:10; max-height: 150px; overflow-y: auto}
.footer-menu-list[aria-hidden=false]{display:block}
.footer-menu-list li{border-bottom:1px solid #eee}
.footer-menu-list li:last-child{border-bottom:none}
.footer-menu-list a{display:block;padding:10px;font-size:14px;color:#333;text-decoration:none}
.footer-menu-list a:focus,.footer-menu-list a:hover{background:#f0f0f0;color:#000;outline:0}

#ft .footer_info {padding-top: 25px}
#ft .footer_info > ul li,
#ft .footer_info p {text-align: left}
#ft .footer_info > ul li {position: relative}
#ft .footer_info > ul li::before {content: ''}
#ft .footer_info > ul {display: flex; gap: 0 30px}
#ft .footer_info > ul li,
#ft .footer_info > ul li a,
#ft .footer_info p {color: rgba(255,255,255,0.4) ; font-weight: 200;}
#ft .footer_info > ul li + li::before {content: ''; width: 1px; height: 15px; background: rgba(255,255,255,0.4); position: absolute; left: -15px; top: 3px}
#ft .footer_info p {padding-top: 2px}

/*quick menu*/
.quick_menu {position: fixed; right: 0; top: 181px; z-index: 999; width: 70px; margin-left: auto; transition: all .4s}
.quick_menu.sub {top: 253px}
.quick_menu.scroll {margin-top: -40px;}
.quick_menu.sub.scroll {top: 181px}
.quick_menu.bottom {position: absolute; top:-427px}
.quick_menu.sub.bottom {top:-427px; right: 0!important}
.quick_menu ul {background: #3b3b3b}
.quick_menu ul li {width: 100%; height: 74px; border-bottom: 3px solid var(--black)}
.quick_menu ul li a {width: 100%; height: 100%; display: block; text-align: center; color: var(--white); display: flex; flex-direction: column; justify-content: center; gap: 10px 0; transition: all .2s}
.quick_menu ul li a::before {content: ''; display: block; background: var(--white); margin: 0 auto}
.quick_menu ul li:hover a {background: rgba(255, 255, 255, .1)}
.quick_menu ul li.reservation {height: 130px}
.quick_menu ul li.reservation a::before {width: 60px; height:60px; background: url(../img/common/illu_character.png) no-repeat center / cover}
.quick_menu ul li.blog a::before {width: 30px; height: 24px; -webkit-mask-image:url(../img/common/quick_icon01.png)}
.quick_menu ul li.facebook a::before {width: 23px; height: 23px; -webkit-mask-image:url(../img/common/quick_icon02.png)}
.quick_menu ul li.youtube a::before {width: 23px; height: 23px; -webkit-mask-image:url(../img/common/quick_icon03.png)}
.quick_menu ul li.location a::before {width: 18px; height: 24px; -webkit-mask-image:url(../img/common/quick_icon04.png)}
.quick_menu ul li.top a::before { width: 25px; height: 14px; -webkit-mask-image:url(../img/common/top_icon.png)}
.quick_menu ul li.top {background: var(--key-color); height: 65px; border-bottom: none} 


/****************** Media Query ******************/

/* laptop ~ table */

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

/* table ~ mobile */

@media (max-width: 1024px) {
    .quick_menu {display: none;}

    .footer_link_wrap .flex_box {display: flex;  justify-content: space-between;  align-items: center;padding-top: 20px;}
    .footer_link_wrap .flex_box > ul { display: flex;  gap: 0 5px;}
    .footer_link_wrap .flex_box > ul li a img {  width: 29px;}
    .footer-menu-list {top: auto;  bottom: 100%;}

    #ft .footer_info {text-align: left;}
    #ft .footer_info > ul { display: block;}
    #ft .footer_info > ul li {display: inline-block;   margin-right: 2em;  line-height: 1.4em;}
   /* #ft .footer_head .footer_menu li + li::before {content: none;} */
	 #ft .footer_head .footer_menu li + li::before {left: -16px;  top: 1px;}
    #ft .footer_head .footer_menu {gap: 0 30px;}
    #ft .footer_head .footer_menu li a {font-size: 1.2rem;}
    #ft .footer_info p {font-size: 1.2rem;  line-height: 1.4em;}
    #ft .footer_info p a {font-size: inherit; color: inherit;}
}

/* mobile only */

@media (max-width: 768px) {
   #ft .footer_head .footer_menu { display: grid;   grid-template-columns: repeat(3, 1fr);   gap: 8px 5px; }
	 #ft .footer_head .footer_menu li + li::before {left: -11px;  top: 1px;}
    
}


@media (max-width: 480px) {
    #ft .full_container {padding: 20px 0 25px;}
    #ft .footer_head .footer_menu li a { font-size: 1.03rem; }
    #ft .footer_head .footer_menu li {text-align: left;}
    #ft .footer_head {padding-bottom: 15px;}
    #ft .footer_info {  padding-top: 15px;}
    #ft .footer_info p {font-size: 12px; letter-spacing: -0.02em;}
    #ft .footer_info p.copyright {padding-top: 15px;}
    .footer_link_wrap .flex_box > ul li a img {  width: 24px;}
    .footer-menu-button {font-size: 12px;}
    .footer-menu-list a {font-size: 13px;}
    .footer-menu-list {width: 115px;}
		 #ft .footer_head .footer_menu li + li::before {left: -17px;  top: 1px;   height: 12px;}
}