@charset "UTF-8";
/*****************************************************************

******************************************************************/

#ft {margin: 0 auto; width: 100vw; position: relative; /*border-top: 1px solid #E8E8E8;*/ background: #181c17;}
#ft_wr {padding: 0; position: relative; text-align: left; background: #181c17;}
#ft_company h2 {margin-bottom: 12px; color: #fff; font-size: 20px;}
#ft-logo {margin: 0; width: 330px; padding-top:30px !important;}
#ft-logo > img {width: auto; height: 24px; object-fit: cover; padding-right: 10px;}
.ft-top-row {display: flex; justify-content: space-between; align-items: center; margin:0;}
#ft_link {display: flex; justify-content: flex-end; align-items: center; gap: 0;}
#ft_link a {padding: 0 14px; position: relative; display: block; color: rgba(255, 255, 255, 0.9); font-family:'Pretendard'; transition: all .3s;}
#ft_link a:not(:last-child):after {content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 13px; background: rgba(255, 255, 255, 0.7);}
#ft_link a:hover {color: var(--main-color);}
.ft_info {font-size: 14px; color: rgba(255, 255, 255, 0.5); font-weight: 400; line-height: 1.7; letter-spacing:0 !important; font-family:'Pretendard'; padding-bottom:40px;}
.ft_info > p > span {position: relative;}
.ft_info > p > span:not(:last-child):after {content: ''; display: block; width: 1px; height: 12px; position: absolute; right: -6px; top: 50%; margin-top: -6px; background: rgba(255, 255, 255, 0.3);}
.ft-bottom {padding: 20px 0; margin: 0 auto; color: rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14px; text-align: center; font-weight: 400;}
.ft_info .tel {font-family:'Pretendard'; font-size:18px; color: rgba(255, 255, 255, 0.7); font-weight:500; padding-bottom:10px;}
.ft-mob {display:none;}
@media screen and (max-width:576px){
#ft_link{display:none;}
#ft .logo_txt {font-size:18px;}
.ft_info .tel {font-size:16px;}
#ft_wr {padding: 0 20px !important;}
.ft-top-row {margin:0}
.ft-mob {display: flex; justify-content: center; margin:0px; padding-top:20px;}
.ft-mob a {padding: 0 14px; position: relative; display: block; color: rgba(255, 255, 255, 0.6); font-family:'Pretendard'; transition: all .3s;}
.ft-mob  a:not(:last-child):after {content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 13px; background: rgba(255, 255, 255, 0.4);}
.ft-mob  a:hover {color: var(--main-color);}
}

/* 퀵버튼 */
.ft-quick-container{position:fixed;bottom:15px;right:40px;z-index: 100;opacity: 1;}
.ft-quick-container > li {margin-bottom: 10px;display:flex;align-items:center;place-content:center;width: calc((100vw - (100vw - 143px)) / 2);height: calc((100vw - (100vw - 143px)) / 2);box-shadow: 0px 4px 10px rgba(0,0,0,.15);border-radius: 100%;border:none;background:#fff;font-size: 14px;transition: all .3s;}
.ft-quick-container > li:last-child{margin-bottom:0;background: #333;border-left: none;}
.ft-quick-container .tnb_darkmode {flex-direction: column;gap: 5px;color: #666;cursor: pointer;transition: all .3s;}
.ft-quick-container .tnb_darkmode:hover{color: var(--main-color);}
.ft-quick-container .tnb_admin > a {display: flex;flex-direction: column;align-items: center;gap: 5px;color: #666;transition: all .3s;}
.ft-quick-container .tnb_admin > a:hover{color: var(--main-color);}
#moon-top_btn {display: flex;flex-direction: column;gap: 5px;align-items: center; color: #fff !important; font-family: "Play", sans-serif;font-weight: 700;text-transform: uppercase;z-index:90;transition: all .3s;}
#moon-top_btn > i{color: #fff !important;}
.ft-quick-container > li:last-child:hover {background: var(--main-color);}


/*스크롤 했을 때 상단버튼 움직임*/
#moon-top_btn.scrolled{transform: rotate(0);}