@charset "utf-8";
/* CSS Document */


/* CSS Information ----------------------------------------

Site Name : 반응형 기본디자인 A4
Part : 기본세팅
Last edit : 2020.07.29
Author : Gautech(PDH)

관련폰트 :
font-family: 'Noto Sans KR', sans-serif; (100,300,400,500,700,900)
font-family: 'Noto Serif KR', serif; (200,300,400,500,600,700,900)
font-family: 'Roboto', sans-serif; (100,300,400,500,700,900)
font-family: 'NanumSquareRound', sans-serif; (300,400,700,800)
font-family: 'NanumBarunGothic', sans-serif; (200,300,400,700)

--------------------------------------------------------- */



footer>h2 { display:none;}
.footer_wrap { width:100%; color:rgba(255,255,255,0.8); background-color:#444;}

.footer_menu { width:100%; height:50px; background-color:#343434;}
.footer_menu_box { position:relative; height:50px; width:100%; max-width:1200px; margin:0 auto; text-align:left;}
.footer_menu_box>a { display:inline-block; padding:0 10px; line-height:50px; background-image:url(/spn/images/icon/menu_bar.png); background-repeat:no-repeat; background-position:100% 50%;}
.footer_menu_box>a:nth-child(5) { background-image: none;}
.footer_menu_box>div { position:absolute; top:0; right:10px; text-align:right; line-height:50px;}
.footer_menu_box>div>a { display:inline-block; padding:0 10px; line-height:50px; background-image:url(/spn/images/icon/menu_bar.png); background-repeat:no-repeat; background-position:100% 50%;}

.f_site { display:inline-block; line-height:22px; position:relative; background-color:#666; color:rgba(255,255,255,0.8); padding:3px 60px 3px 10px; margin:11px 0 0 10px; background-image:url(/spn/images/icon/ar_down_w.png); background-repeat:no-repeat; background-position:90% 50%; cursor:pointer;}
.f_site_box { display:none; position:absolute; top:26px; left:0; width:100%; padding:10px; background-color:#FFF;}
.f_site_box>a { display:block; line-height:20px; color:#999; text-align:left;}
.f_site_box_wrap>p { margin-top:10px;}

.footer_copy { position:relative; width:1200px; margin:0 auto; text-align:left; padding:50px 0;}
.footer_copy>p { width:100%; padding:0; line-height:1.4;}
.footer_copy>p>span { display:inline-block; padding:0 10px;}
.f_site_box_wrap { position:absolute; top:40px; right:10px; text-align:right; width:380px;}


/* 1024 ~ 768까지 태블릿 설정 */

@media screen and (max-width:1024px){


.footer_wrap { width:100%; color:rgba(255,255,255,0.8); background-color:#444; font-size:13px;}

.footer_menu { width:100%; height:50px; background-color:#343434;}
.footer_menu_box { position:relative; height:50px; width:100%; max-width:1200px; margin:0 auto; text-align:left; padding:0 20px;}
.footer_menu_box>a { display:inline-block; padding:0 10px; line-height:50px; background-image:url(/spn/images/icon/menu_bar.png); background-repeat:no-repeat; background-position:100% 50%;}
.footer_menu_box>a:nth-child(5) { background-image: none;}
.footer_menu_box>div { position:absolute; top:0; right:30px; text-align:right; line-height:50px;}

.f_site { display:inline-block; line-height:22px; position:relative; background-color:#666; color:rgba(255,255,255,0.8); padding:3px 60px 3px 10px; margin:11px 0 0 10px; background-image:url(/spn/images/icon/ar_down_w.png); background-repeat:no-repeat; background-position:90% 50%; cursor:pointer;}
.f_site_box { display:none; position:absolute; top:26px; left:0; width:100%; padding:10px; background-color:#FFF;}
.f_site_box>a { display:block; line-height:20px; color:#999; text-align:left;}
.f_site_box_wrap>p { margin-top:15px; margin-left:30px;}

.footer_copy { position:relative; width:100%; margin:0 auto; text-align:left; padding:50px 0;}
.footer_copy>p { width:100%; padding:0 20px; line-height:1.4;}
.footer_copy>p>span { display:inline-block; padding:0 10px;}
.f_site_box_wrap { position: relative; top: auto; right: auto; text-align:left; width:100%;}


}



/* 767 ~ 320까지 모바일 설정 */

@media screen and (max-width:767px){


.footer_wrap { width:100%; color:rgba(255,255,255,0.8); background-color:#444; font-size:12px;}

.footer_menu { width:100%; height:auto; background-color:#343434;}
.footer_menu_box { position:relative; height: auto; width:100%; max-width:1200px; margin:0 auto; text-align:left; padding:20px 10px;}
.footer_menu_box>a { display:inline-block; padding:0 10px; line-height:30px; background-image:url(/spn/images/icon/menu_bar.png); background-repeat:no-repeat; background-position:100% 50%;}
.footer_menu_box>a:nth-child(5) { background-image:url(/spn/images/icon/menu_bar.png); background-repeat:no-repeat; background-position:100% 50%;}
.footer_menu_box>div { position: relative; display:inline-block; top: auto; right: auto; text-align:left; line-height:30px;}
.footer_menu_box>div>a { line-height:30px;}

.f_site { display:inline-block; line-height:22px; position:relative; background-color:#666; color:rgba(255,255,255,0.8); padding:3px 60px 3px 10px; margin:0 0 0 10px; background-image:url(/spn/images/icon/ar_down_w.png); background-repeat:no-repeat; background-position:90% 50%; cursor:pointer;}
.f_site_box { display:none; position:absolute; top: auto; bottom:26px; left:0; width:100%; padding:10px; background-color:#FFF; z-index:50;}
.f_site_box>a { display:block; line-height:20px; color:#999; text-align:left;}
.f_site_box_wrap>p { margin-top:15px; margin-left:20px;}

.footer_copy { position:relative; width:100%; margin:0 auto; text-align:left; padding:20px 0 20px 0;}
.footer_copy>p { width:100%; padding:0 10px; line-height:1.4;}
.footer_copy>p>span { display:inline-block; padding:0 10px;}
.f_site_box_wrap { position: relative; top: auto; right: auto; text-align:left; width:100%;}


}