@charset "utf-8";
#footer { background-color: #F6F7F9; padding: 80px 0 72px; position: relative; }
#footer .inner > div { display: flex; justify-content: space-between; align-items: center; }
#footer .ft-top { margin-bottom: 48px; }
#footer .f_logo { width: 300px; }
#footer .ft-top .ft-gnb ul { display: flex; gap: 40px; }
#footer .ft-top .ft-gnb ul a { font: 500 16px/100% var(--font-family); color: var(--gray-deep); }

#footer .ft-middle .name { font: 400 18px/100% var(--font-family); color: var(--gray-deep); }
#footer .ft-middle .family-site { width: 240px; border-radius: 12px; border: 1px solid var(--gray-lite); position: relative; }
#footer .ft-middle .fm-site-txt { padding: 20px 30px; font: 500 16px/100% var(--font-family); color: var(--sub-black); cursor: pointer; position: relative; }
#footer .ft-middle .fm-site-txt::after { content: ''; width: 19px; height: 14px; background: url('/resources/img/common/ft_ico_arrdw.png') no-repeat center/contain; position: absolute; right: 30px; top: calc(50% - 7px); }
#footer .ft-middle .fm-site-txt.on::after { transform: rotate(180deg); }
#footer .ft-middle .family-site > ul { width: 100%; background: #ffffff88; border-radius: 12px; border: 1px solid #eee; margin-top: 4px; position: absolute; left: 0; display: none; }
#footer .ft-middle .family-site > ul a { display: block; padding: 20px 30px; border-radius: 10px; }
#footer .ft-middle .family-site > ul li:hover a { background-color: #fff; }

#footer .ft-btm { margin-top: 8px; }
#footer .ft-btm .ft-info ul { display: flex; flex-wrap: wrap; gap: 12px 24px; max-width: 700px; }
#footer .ft-btm .ft-info li { display: flex; gap: 4px; }
#footer .ft-btm .ft-info li > p { font: 400 18px/125% var(--font-family); color: var(--gray-deep); }
#footer .ft-btm .ft-info li > p.itm { font-weight: 600; }
#footer .ft-btm .sns-set ul { display: flex; gap: 16px; }
#footer .ft-btm .sns-set .ico-box { width: 40px; height: 40px; padding: 12px; border-radius: 50%; background-color: var(--gray-lite); }

#footer .copy-box { margin-top: 64px; font: 400 16px/100% var(--font-family); color: var(--gray-lite); }


@media screen and (max-width:1024px){
   #footer { padding: 60px 0; }
   #footer .inner > div.ft-top { align-items: flex-start; flex-direction: column-reverse; gap: 24px; margin-bottom: 32px; }
}
@media screen and (max-width:768px){
   #footer .ft-top .ft-gnb ul { gap: 32px; }
   #footer .f_logo { width: 280px; }
   #footer .ft-middle .family-site > ul { background: #ffffffdd; }
   #footer .inner > div.ft-btm { flex-direction: column; gap: 24px; margin-top: 24px; }
}
@media screen and (max-width:640px){
   #footer { padding: 48px 0 40px; }
   #footer .ft-top .ft-gnb ul { gap: 20px; }
   #footer .ft-top .ft-gnb ul a { font-size: 14px; }
   #footer .f_logo { width: 240px; }
   #footer .ft-middle .name { display: none; }
   #footer .ft-middle .family-site { width: 220px; }
   #footer .ft-middle .fm-site-txt { padding: 15px 26px; font-size: 15px; }
   #footer .ft-middle .fm-site-txt::after { right: 24px; }
   #footer .ft-btm .ft-info ul { gap: 10px 20px; }
   #footer .ft-btm .ft-info li > p { font-size: 16px; }
   #footer .copy-box { margin-top: 48px; }
}
@media screen and (max-width:480px){
   #footer .inner > div { align-items: center;  }
   #footer .inner > div.ft-top { align-items: center; gap: 20px; }
   #footer .ft-top .ft-gnb ul li:nth-child(1),
   #footer .ft-top .ft-gnb ul li:nth-child(5) { display: none; }
   #footer .ft-middle .family-site { width: 100%; margin: 0 auto; }

   #footer .ft-btm .ft-info ul { justify-content: center; gap: 8px 20px; }
   #footer .ft-btm .ft-info li > p { font-size: 15px; }
}

@media screen and (max-width:360px){
   #footer .t_inform a {display: block; margin: 3px 0;}
   #footer .t_inform a:first-child {margin-top: 0;}
   #footer .top_btn {padding-top: 25px;}
}



/*layer popup style s*/
body.noneScroll {overflow: hidden;}

.dim {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 101;}
.dim.active {display: block;}

.popup {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 102;}
.popup.active {display: block;}
.popup .inner {height: 100%;}
.popup .pop_wrap {background: #fff; position: absolute; width: 100%; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.popup .title {position: relative; height: 80px; padding: 0 3%; border-bottom: 1px solid #ddd; background: #fff; box-sizing: border-box;}
.popup .title p {line-height: 80px; font-size: 30px; font-weight: 600;}
.popup .title .close {position: absolute; height: 100%; width: 80px; right: 0; top: 0; background-color: #ddd; cursor: pointer;}
.popup .title .close span {display: block; background-color: #333; position: absolute; width: 3px; height: 30px; top: 25px; left: 40px; transform: rotate(45deg);}
.popup .title .close span:last-child {transform: rotate(-45deg);}

.popup .cont {height: calc(100% - 80px); padding: 30px 3%; overflow-y: auto; box-sizing: border-box;}

.popup .cont::-webkit-scrollbar {width: 8px;}
.popup .cont::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 5px;}
.popup .cont::-webkit-scrollbar-track {background-color: #eee;}

@media screen and (max-width:768px){
   .popup .title {height: 60px;}
   .popup .title p {line-height: 60px; font-size: 20px;}
   .popup .title .close {width: 60px;}
   .popup .title .close span {height: 20px; top: 21px; left: 29px;}

   .popup .cont {height: calc(100% - 60px);}

}

/* 내부 스타일 */
:root {
   --big-tit : 21px;
   --dep1-tit: 18px;
   --pop-txt : 16px;
}
.tos-wrap { width: 100%; }
.dep1-wrap { margin-bottom: 60px; }
.dep1-wrap .big-tit { font-size: var(--big-tit); font-weight: 600; padding-bottom: 25px; }

.dep1-box { padding-bottom: 15px; }
.dep1-box .dep1-tit { font-size: var(--dep1-tit); font-weight: 500; line-height: 1.2; padding-bottom: 7px; }
.dep1-box p { font-size: var(--pop-txt); line-height: 1.3; }
.dep1-box .dep1-txt { padding-left: 10px; padding-bottom: 10px; }
.dep1-box .in-dep-list1 li { margin-bottom: 3px; padding-left: 15px; }
.dep1-box .in-dep-list1 > ul > li { margin-bottom: 5px; }
.dep1-box .in-dep-list1 li > p { padding-left: 20px; text-indent: -18px; }
.dep1-box .in-dep-list1 li > p.in-dep1-tit { padding-left: 10px; font-weight: 400; }
.dep1-box .in-dep-list2,
.dep1-box .in-dep-list3 { padding-top: 5px; }

@media screen and (max-width:768px){
   :root {
      --big-tit : 19px;
      --dep1-tit: 16px;
      --pop-txt : 14px;
   }
}



 /*layer popup style e*/