@charset "utf-8";

/*skip*/
#skipToContent {
    display: block;
    position: absolute;
    top: -66px;
    left: 0;
    background-color: #f8f8f8;
    z-index: 999999;
}
#skipToContent a {
    display: block;
    padding: 5px 0;
    text-align: center;
    line-height: 21px;
}
#skipToContent a:hover, #skipToContent a:active, #skipToContent a:focus{color: #333;}

/* a:focus, button:focus{outline: 3px solid #4171b8;} */

/* HEADER */
.header		{position: relative;}
.headerWrap	{background-color: #fff;}

.gnb_wrap	{max-width: 1200px; width: 100%; margin: 13px auto; }

.gray_gnb		{background: #f2f2f2;}
.gray_gnb .wrap	{max-width: 1200px; width: 100%; margin: 0 auto; padding: 7px 0; display: flex; justify-content: space-between;}
.gray_gnb .logo	{}
.gray_gnb .logo a		{display: inline-block; width: 103px; height: 34px; background: url(../images/common/logo_pc.png) no-repeat 50% 50%;}
.gray_gnb .gnb_member 	{margin-top: 10px;}
.gray_gnb .gnb_member a	{display: inline-block; padding: 0 9px; font: 400 14px/15px 'Noto Sans KR', sans-serif; color: #666;}
.gray_gnb .gnb_member a:last-child	{padding-right: 0;}

.nav{float: right; position: relative;}

.logoPc		{display: inline-block;}
.logoPc a	{display: inline-block; width: 165px; height: 54px; background: url(../images/common/mLogo_pc.png) no-repeat 50% 77% / 165px;}


/* login & member*/
.userName		{font: 500 14px/14px 'Noto Sans KR', sans-serif; color: #454545; padding-right: 10px; position: relative;}
.userName span	{font: 600 14px/14px 'Noto Sans KR', sans-serif; }
.userName:after	{content: ''; color: #787878; background: #ccc; width: 1px; height: 12px; position: absolute; right: 0; top: 5px;}
.joinus			{position: relative;}
.joinus:before	{content: ''; background: #ccc; width: 1px; height: 12px; position: absolute; left: 0; top: 3px;}
.gnb_member .joinus{padding: 0;}
/* .gnb_menu a{display: inline-block; padding: 20px 25px 25px; font-size: 16px; font-weight: 700;} */
.gnb_menu a{display: block; float: left; padding: 20px 43px 20px 0; font: 400 18px/18px 'Noto Sans KR', sans-serif; color: #333; text-align: center;}
.gnb_menu a:hover{color: #4276bb;}

.gnb_menu a:last-child	{padding-right: 0;}
.gnb_menu a.hamburger	{font-size: 0; width: 18px; height: 14px; background:  url(../images/common/hamburger.png) no-repeat 50% 50%; margin-top: 2px;}
 

/*GNB MENU*/
.sub_menu{display: none; position: absolute; top: 133px; left: 0; width: 100%; z-index: 888; background-color: #fff; border-top: 4px solid #4171b8; border-bottom: 1px solid #e6e6e6;}

.subM			{width: 1206px; margin: 0 auto; padding-right: 21px; box-sizing: border-box;}
.subWrap		{/* width: 825px; */ float: right;}
.subWrap .sub	{float: left; height: 239px; border-left: 1px solid #e6e6e6; box-sizing: border-box; padding: 20px 17px; text-align: center; margin: 0 auto;}
.subWrap .depth01:hover, .subWrap .depth02:hover {color: #4276bb; text-decoration: underline;}
.subWrap .sub01		{width: 105px;}
.subWrap .sub02		{width: 144px;}
.subWrap .sub03		{width: 152px;}
.subWrap .sub07		{width: 135px;}
.subWrap .sub04		{width: 151px;}
.subWrap .sub06		{width: 125px; border-right: 1px solid #e6e6e6;}
.subWrap .depth01	{color: #4276bb; font: 500 15px/15px "Noto Sans KR", sans-serif;}
.subWrap .depth02	{display: block; padding-top: 10px; font: 400 14px/24px "Noto Sans KR", sans-serif;}
.depth02wrap		{padding-top: 3px; text-align:center; }




/* FOOTER */
.footer			{background-color: #43464d;}
.footer_wrap	{max-width: 1200px; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; padding: 35px 0 40px; box-sizing: border-box;}
.copy_wrap		{}
.copy_wrap ul	{margin-bottom: 30px; display: flex;}
.copy_wrap p	{color: #a1a3a6; font: 400 15px/25px "Noto Sans KR", sans-serif;}
.site_wrap		{display: flex;}
.f_sub07 li		{}
.f_sub07 li a					{display: inline-block; padding: 0 30px 0 0; color: #fff; font: 400 16px/16px "Noto Sans KR", sans-serif;}
.f_sub07 li.blue a				{color: #6498cf;}
.f_adress, .copyright			{font-size: 14px; color: #666666; line-height: 24px;}

.fam_wrap				{position: relative;}
.fam_label				{display: block; border-bottom: 2px solid #fff; cursor: pointer; color: #fff; font: 400 15px/19px "Noto Sans KR", sans-serif; width: 180px; padding-bottom: 10px;}
.fam_label .fam_arrow	{display: inline-block; float: right; height: 18px; width: 17px; background: url(../images/common/select_btn_pc.png) no-repeat left center;}
.familySite				{display: none; z-index: 110; position: absolute; bottom: 0; right: 0; width: 180px; padding: 10px 15px 10px; background-color: #fff; border: 1px solid #d1d1d1; box-sizing: border-box;}
.familySite.on			{display: block;}
.familySite li a		{font: 400 14px/25px "Noto Sans KR", sans-serif; color: #555;}
.familySite li:hover a	{color: #0c45a4;}
.f_bar					{padding-left: 8px;}
.f_bar:before			{content: '|'; font-size: 13px; padding-right: 8px; color: #cdcdcd;}
.footer_wrap.clearfix::after	{display: none;}

.colorLG{color: #666;}


/* 퀵메뉴 */
.quick_wrap			{position: fixed; z-index: 100; bottom: 30%; right: 60px;}
.quick_wrap > div	{box-sizing: border-box; padding: 21px 18px; border: 1px solid #ddd; background: #fff;}
.quick_wrap > div img	{display: block; text-align: center; margin: 0 auto 8px;}
.quick_wrap > div span	{transition: transform 0.3s ease; font: 400 14px/17px "Noto Sans KR", sans-serif; color: #999; display: block; margin: 0 auto; text-align: center;}
.quick_wrap > div p + p	{margin-top: 30px;}
.quick_wrap .toBtn		{margin: 20px auto 0; display: block; text-align: center;}

.quick_wrap > div p:hover a img	{transform: translateY(0); transition: transform 0.3s ease;}
.quick_wrap > div p:hover a img	{transform: translateY(-3px);}
.quick_wrap > div p:hover a span{color: #0c45a4;}

.quick_wrap.pc_quick	{display: block;}
.quick_wrap.mo_quick	{display: none;}


.mobile_type{display: none;}

.toggle{display: none; position: absolute; right: 10px; top: 2px; width: 47px; height: 47px; cursor: pointer;}
.m_gnb{position: fixed; left: -95%; top: 0; width: 80%; height: 100%; z-index: 88888; background-color: #fff;}
.toggle.close{right: 0; top: 0px; background: #000 url(/images/common/quick_top_close.png)no-repeat 50% 50%/20px;}
.dim{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 500; background-color: rgba(0,0,0,0.7); cursor: pointer;}
.m_gnb.on .toggle.close	{right: -47px;}

.m_tnb a{display: block; float: left; width: 50%; line-height: 47px; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 16px; text-align: center;}
.m_tnb a.m_joinus{background-color: rgba(0,0,0,0.7);}

.m_depth01, .m_depth02{display: block; padding: 0 20px; cursor: pointer;}
.m_depth01.on{background-color: rgba(65,113,184,0.8); color: #fff;}
.m_depth01 {line-height: 46px;font-size: 16px; border-bottom: 1px solid #ddd;}
.m_depth02{text-indent: 20px; line-height: 30px; font-size: 14px; border-bottom: 1px solid rgba(65,113,184,0.5);}
.m_depthWrap{display: none; background-color: #f3f3f3;}

@media screen and (max-width: 1600px){
    	.subWrap{padding-left: 20%;}
 
}

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

/* 퀵메뉴  */
.quick_wrap.pc_quick	{display: none;}
.quick_wrap.mo_quick	{display: block; right: 10px; width: 94px; margin: 0 auto; text-align: center; bottom: 20px;}
.quick_wrap > div			{display: none; height: 310px; position: relative; top: 21px; z-index: 98;}
.quick_wrap > div.on		{display: block;}
.quick_wrap a.togglemenu	{width: 69px; display: block; text-align: center; height: 69px; box-sizing: border-box; background: #0c45a4; border-radius: 69px; padding-top: 22px; font: 400 14px/16px "Noto Sans KR", sans-serif; color: #fff; margin: 0 auto;}
.quick_wrap a.togglemenu.on	{font-size: 0; margin: 0 auto; background: #0c45a4 url(/images/common/quick_top_close.png)no-repeat 50% 50%/20px; z-index: 100;  position: relative; width: 45px; height: 45px;}
.quick_wrap.mo_quick .toBtn	{margin-top: 10px;}

 
}

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

/* 푸터 */
.footer_wrap	{display: block;}
.site_wrap		{margin-top:28px;}
.fam_label .fam_arrow	{background: url("../images/common/select_btn_mo.png") no-repeat left center/16px;}

}


@media screen and (max-width: 1366px){
	/* .gnb_menu a{padding: 39px 15px 32px;} */
	.subWrap{padding-left: 147px;}
}


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

/* 헤더 */
.gray_gnb		{display: none;}
.gnb_wrap 		{margin: 8px auto;}
.gnb_wrap h1 a	{width: 160px; background: url("/images/common/mLogo_pc.png") no-repeat 50% 61% / 130px;}
.gnb_wrap nav	{display: none;}
.mobile_type, .toggle{top: 5px; display: block; background: url("../images/common/hamburger_mo.png") no-repeat 50% 50%/ 27px;}


/* 푸터 */
.footer_wrap	{padding: 35px 15px 40px;}
.footer_wrap.clearfix::after	{display: none;}

}


@media screen and (max-width: 1080px){
	.subWrap{padding-left: 0;}
}

@media screen and (max-width: 1024px){
   
   .nav{display: none;}
	.logo {padding: 20px 0 15px;}
}

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

/* 푸터 */
.footer_wrap	{display: block; text-align: center;}
.copy_wrap ul	{display: inline-block; text-align: left; width: 100%; margin: 0 auto 18px;}
.copy_wrap ul li	{width: fit-content; display: inline-block;}
.f_sub07 li a		{padding: 0 15px 0 0; font: 400 15px/28px "Noto Sans KR", sans-serif;}
.site_wrap .fam_wrap	{margin: 20px 0 0; display: block; }
.site_wrap .fam_wrap .fam_label	{text-align: left;}
.copy_wrap p	{text-align: left;}

}
	
	

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

}

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

}

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

}