@charset "utf-8";

html{font-size: 20px;}
body{font-size: 1rem;}

/* IE에서 스크롤바 감춤 */
.header .m_gnb {-ms-overflow-style:none;} 


/* 윈도우 크롬 등 스크롤바 감춤 */
.header .m_gnb::-webkit-scrollbar {display:none;}

/* header */ 
.header{width: 100%; height: 6.5rem; float: left;}

.topmeun{width: 100%; height: 2rem; border-bottom: 1px solid #d7d7d7;}
.topmeun ul.user_set {float: right; line-height: 2rem; font-size: 0;}
.topmeun ul.user_set > li{display: inline-block;}
.topmeun ul.user_set > li.btn_home{position: relative;}
.topmeun ul.user_set > li > a{color:#666; padding: 0.3rem 0.65rem; font-size:0.75rem; }
.topmeun ul.user_set > li:first-child > a{padding: 0.3rem 0.65rem 0.3rem 0.9rem;}
.topmeun ul.user_set > li:last-child > a{padding-right: 0;}
.topmeun ul.user_set > li.btn_home a::before{content:""; position:absolute; left:-3px; top:12px; width:16px; height:13px; background: url('../image/main/icon_home.png');}

.home_wrap{width:100%; height:4.5rem; position: relative;} /* 햄버거btn(all_menu)- po:a */
.home_wrap h1.logo{width: 22rem; height: 2rem; margin-top: 1.5rem; display:inline-block;} 
.home_wrap h1.logo > a{width: 18rem; height: 2.3rem; display: block;}
.home_wrap h1.logo > a > img{vertical-align:top; width: 18rem;}

/* pc 메뉴 */
.home_wrap .gnb{height:3.5rem;}
.home_wrap .gnb > ul{font-size: 0; text-align: center; margin-top:0.75rem }
.home_wrap .gnb > ul > li{display:inline-block; position: relative;}
.home_wrap .gnb > ul > li > a{font-size: 1rem; padding: 0.5rem 1.5rem 1.6rem; display: block; font-weight: bold; font-family:'NanumSquare','Malgun Gothic', '맑은 고딕', sans-serif; font-weight:bold;}  
.home_wrap .gnb > ul > li:last-child > a{padding-right: 0;} 
.home_wrap .gnb > ul > li.gnb_tit > a.on:after{content:""; position:absolute; left:50%; top:2.25rem; width:44px; height:2px; background:#24a1d5; margin-left:-22px}
.home_wrap .gnb > ul > li.gnb_tit:last-child > a.on:after{margin-left: -9px}

.home_wrap .gnb .nav{position:absolute; top:3.45rem; left:50%; margin-left: -4.5rem; background:#f9f9f9; width:9rem; z-index: 9; border-radius: 0 0 5px 5px; border: 1px solid #d7d7d7; padding: 0.5rem 0; display: none; }
.home_wrap .gnb .nav > li > a{font-size:16px; color:#666; padding:0.3rem 0.4rem; display: block;}
.home_wrap .gnb .nav > li > a:hover{color:#003399; text-decoration: underline;}

/*모바일 메뉴*/
.home_wrap .m_gnb{display: none;}
.home_wrap .all_menu{display: none;}


/* footer */ 
.footer{width: 100%; height: auto; float: left;}
.footer_family{width:100%; height:2.75rem;  border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; font-size: 0.8rem;}
.footer_family ul.rule_link:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}
.footer_family ul.rule_link > li{float: left; padding:0.65rem 0; }
.footer_family ul.rule_link > li:first-child{padding-right: 3rem;}
.footer_family ul.rule_link > li > a {color: #666;}

.footer_family .family_wrap{position: absolute; top: 0; right: 0;}
.footer_family .family_wrap .family_btn{width: 12rem; height: 2.75rem; line-height: 2.75rem; border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; text-align: left; padding: 0 1.5rem; color: #666;}
.footer_family .family_wrap .family_btn span.icon_more{display:block; position: relative;}
.footer_family .family_wrap .family_btn span.icon_more:before{content:""; position:absolute; right: 0; margin-top: -1px; width: 10px; height: 2px; background: #666; top: 50%;}
.footer_family .family_wrap .family_btn span.icon_more:after{content:""; position:absolute; right: 4px; margin-top: -5px; width: 2px; height: 10px; background: #666; top: 50%;}
.footer_family .family_wrap ul.family_list{position: absolute; display: block; width: 12rem; background:#fff; padding: 1rem 1.5rem; top:-4.9rem; border: 1px solid #d7d7d7;}
.footer_family .family_wrap ul.family_list > li:first-child{margin-bottom: 0.4rem;}
.footer_family .family_wrap ul.family_list > li > a{display:block; color: #666;}
.footer_family .family_wrap ul.family_list > li:hover > a{text-decoration: underline;}

.footer_info{width: 100%; height: auto; padding: 1.25rem 0;}
.footer_info .footer_logo{width: 17rem; height: 2rem; float: left;}
.footer_info .footer_logo > a{display: block;}
.footer_info .footer_logo > a > img{width: 17rem;}
.footer_info .footer_address{width: 68%; float:right; word-break: keep-all; font-size:0.7rem; color: #666;}


/* sub_container_wrap - sub_nav */
.sub_left_nav{float: left; width:11rem; height: auto;}
.sub_left_nav .nav_title{width: 100%; font-size:1rem; font-weight: bold; background: #00185b; padding:1.5rem 1rem; border-radius: 5px 5px 0 0; color: #fff; text-align: center;}
.sub_left_nav .nav_wrap{width:100%; border: 1px solid #d7d7d7}
.sub_left_nav .nav_wrap > ul.nav_lnb > li{width: 100%; border-bottom: 1px solid #d7d7d7; } 
.sub_left_nav .nav_wrap > ul.nav_lnb > li:last-child{border-bottom: 0}
.sub_left_nav .nav_wrap > ul.nav_lnb > li > a{font-size:0.8rem; display: block; line-height:2.35rem; position:relative; text-indent:13px; padding:0 1rem;}
.sub_left_nav .nav_wrap > ul.nav_lnb > li > a:after{content:""; position: absolute; left: 1rem; top: 50%; margin-top:-2px; width: 4px; height: 4px; background: #c5c9d6; border-radius: 50%;}
.sub_left_nav .nav_wrap > ul.nav_lnb > li > a.on{font-weight: bold; color:#00185b; background:#eeeff2}
.sub_left_nav .nav_wrap > ul.nav_lnb > li > a.on:after{background: #24a1d5;}
.sub_left_nav .nav_wrap > ul.nav_lnb > li:hover > a{color: #00185b; text-decoration: underline;}


/* ======================== 반응형 ======================== */



/* 태블릿 */
@media (max-width: 1024px) {

/* header */ 
.header{height: 3rem; position:fixed; z-index:100; background:#fff; border-bottom: 1px solid #d7d7d7;}
.header .topmeun{display: none;}
.home_wrap{width:100%; height:100%;}
.home_wrap h1.logo{display: none;}
.header .gnb{display: none;}

.home_wrap h1.logo{width: 13rem; height: 1rem; margin-top: 1rem; display:inline-block; background: url('../image/main/logo.png') no-repeat center; background-size: 13rem;} 
.home_wrap h1.logo > a{width: 100%; height: 1.5rem; display: block;}
.home_wrap h1.logo > a > img{display: none;}

/* 메뉴 on/off 버튼 */
.home_wrap .all_menu {display:block; position:absolute; right:15px; top:21px; width:20px; height:18px; font-size:0;line-height:0}
.home_wrap .all_menu .ico_cate,
.home_wrap .all_menu .ico_cate:before,
.home_wrap .all_menu .ico_cate:after {display:block;position:absolute;left:0;width:100%;height:2.3px;background:#000;content:"";-webkit-transition:.25s ease-in;transition:.25s ease-in}
.home_wrap .all_menu .ico_cate {top:8px}
.home_wrap .all_menu .ico_cate:before {top:-8px}
.home_wrap .all_menu .ico_cate:after {top:8px}

.home_wrap .all_menu .ico_cate2,
.home_wrap .all_menu .ico_cate2:before,
.home_wrap .all_menu .ico_cate2:after {display:block;position:absolute;left:0;width:100%;height:2.3px;background:#fff;content:"";}
.home_wrap .all_menu .ico_cate2 {background-color:transparent;}
.home_wrap .all_menu .ico_cate2:before {transform:rotate(135deg);top:0}
.home_wrap .all_menu .ico_cate2:after {transform:rotate(45deg);top:0}

/* 모바일 메뉴 - topmeun */
.m_topmeun .user_info{padding: 0.75rem; background:#003399; border-bottom: 0.2px solid #d4edf8;}
.m_topmeun .user_info > ul{width:100%; height: 2rem;}
.m_topmeun .user_info > ul > li{float:left}
.m_topmeun .user_info > ul > li.my_img{width: 2rem; height: 2rem; border-radius:50%;border: 1px solid #d7d7d7; background: url('../image/main/icon_login.png') no-repeat center #fff; background-size: 1rem; margin-right: 0.1rem;}
.m_topmeun .user_info > ul > li.my_info{width: 9.1rem; height:100%; color:#fff; margin-left:0.5rem;font-size:0.8rem; line-height: 2rem;}
.m_topmeun .user_set{width: 100%;}
.m_topmeun .user_set > ul > li{width: 50%; height: 2.25rem; background:#003399; float: left; text-align: center;}
.m_topmeun .user_set > ul > li:first-child{border-right: 0.2px solid #d4edf8;}
.m_topmeun .user_set > ul > li > a{display: block; width: 100%; color: #fff; font-size: 0.8rem; line-height: 2.25rem;}

/* 모바일 메뉴 - m_gnb */
.home_wrap .m_gnb {position:fixed; z-index:110; top:0; bottom:0; overflow-x:hidden; overflow-y:auto; width:100%; height: 100%; background:#fff; right: -100%; display: block;}
.home_wrap .m_gnb .m_gnb_item {position:relative; width:100%;}
.home_wrap .m_gnb .m_gnb_item:before {content:'';position:absolute;z-index:2;left:15px;top:23px;width:3px;height:3px;background-color:#dcddde;border-radius:50%}
.home_wrap .m_gnb .m_gnb_item > a {position:relative;display:block;padding-left:28px;border-bottom:1px solid #d7d7d7;line-height:50px;color:#363636;font-size:15px;font-weight:bold;}
.home_wrap .m_gnb .m_gnb_item > a:before {content:'';display:inline-block;position:absolute;right:20px;top:50%;margin-top:-4px;width:10px;height:6px;background:url(../image/main/m_gnb_arrow.png) no-repeat 100% 50%;-webkit-transition:.25s ease-in;transition:.25s ease-in}
.home_wrap .m_gnb .m_gnb_item:last-child > a:before{background-image: none;}
.home_wrap .m_gnb .m_gnb_item > a.icon_none:before {background:#fff;}
.home_wrap .m_gnb .m_gnb_item.show > a {color:#003399;}
.home_wrap .m_gnb .m_gnb_item.show > a:before {transform:rotate(180deg)}
.home_wrap .m_gnb .m_gnb_over {}
.home_wrap .m_gnb .m_gnb_over li:before {}
.home_wrap .m_gnb .m_gnb_over li a {display:block;padding-left:28px;border-bottom:1px solid #e2e6e9;line-height:50px;color:#4e4e4e;font-size:15px;font-weight:bold;background:#f9f9f9;}
.home_wrap .m_gnb .m_gnb_over li a span.icon_link {display:inline-block;width:14px;height:14px;top:9px;margin:-2px 6px 0;background:url(../image/main/gnb_icon_link.png) no-repeat;vertical-align:middle;}
.home_wrap .m_gnb .m_gnb_over > ul > li > a {position:relative;}
.home_wrap .m_gnb .m_gnb_over > ul > li.icon_plus > a:before {content:'';display:inline-block;position:absolute;right:20px;top:50%;margin-top:-4px;width:11px;height:11px;background:url(../image/comm/m_gnb_plus.png) no-repeat 100% 50%;}

/* footer */ 
.footer_info .footer_logo{float:none; margin: 0 auto; width: 12rem; height: 1.5rem}
.footer_info .footer_logo > a{display: block;}
.footer_info .footer_logo > a > img{width: 12rem;}
.footer_info .footer_address{width: 100%; float:none; margin-top:0.5rem;}

/* sub_container_wrap - sub_nav */
.sub_left_nav{display: none;}


}



/* 저해상도 태블릿, 모바일(가로) */
@media (max-width: 768px) {

/* footer */ 
.footer_family{font-size: 0.8rem;}
.footer_family ul.rule_link > li:first-child{padding-right: 1rem;}

.footer_family .family_wrap .family_btn{width: 9rem; padding: 0 1rem; color: #666;}
.footer_family .family_wrap .family_btn span.icon_more{display:block; position: relative;}
.footer_family .family_wrap ul.family_list{width: 9rem; padding: 1rem; top:-4.5rem; font-size: 0.75rem;}
.footer_family .family_wrap ul.family_list > li:first-child{margin-bottom: 0.2rem;}



}



/* 모바일(세로) */
@media (max-width: 480px) {

/* footer */ 
.footer_family{height:5.5rem;}
.footer_family ul.rule_link{text-align: center;}
.footer_family ul.rule_link > li{float: left; padding:0.8rem 0; }
.footer_family ul.rule_link > li:first-child{padding-right:2rem}
.footer_family .family_wrap{position: static;}
.footer_family .family_wrap .family_btn{width:100%; border-left:0; border-right:0; border-top: 1px solid #d7d7d7; padding: 0;}
.footer_family .family_wrap ul.family_list{width:100%; padding: 1rem; top:5.4rem; left
	:0; z-index: 10; border:0; border-bottom: 1px solid #d7d7d7; border-top: 1px solid #d7d7d7; background: #f6f6f6;}
.footer_family .family_wrap ul.family_list > li:first-child{margin-bottom: 0.4rem;}
.footer_family .family_wrap ul.family_list > li > a{display:block; color: #666;}


}