@charset "utf-8";
/* layout - 공통 22/11/09 수정*/
body {overflow-x: hidden; overflow-y: scroll;}/* 세로 스크롤 : 화면흔들림*/
.header {position:fixed;top:0;width:100%;height:146px;background-color:rgba(255,255,255,1);border-bottom:1px solid #ededed;z-index:1000;box-sizing:border-box;} /* 23/03/17 수정 */
.container {padding-bottom:100px;} 
.header_mo {display:none}
#container:after {display:block;content:"";clear:both;}

.header.change {height:96px;} 
/* .change{background-color: rgba(255,255,255,1);} 23/03/17 삭제 */
.change .util {display:none}

.inner {width:90%;max-width:1200px;margin:0 auto}
.inner_n {width:90%;max-width:1000px;margin:0 auto}
.inner_w {width:100%;max-width:1200px;margin:0 auto}
.blind {position:absolute;width:0;height:0;line-height:0;text-indent:-9999px;overflow:hidden;}

/* 공통 */
.blackBg{display:none;width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.64); z-index:50; }
.blackBg.on {display:block;}

/* 체크박스 */
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {position: relative;display: block;padding-left: 30px;color: #333;font-size: 14px;line-height:20px;}
input[type="checkbox"] + label:before {content: '';position: absolute;top: 0;left: 0;display: inline-block;width: 18px;height: 18px;background-color: #fff;border: 1px solid #aaa;cursor: pointer;text-align: center;line-height: 18px;}
input[type="checkbox"]:checked + label:before {content: '\2714';font-size: 18px;}
input:focus {outline: none;}
textarea:focus {outline: none;}	  
select::-ms-expand {display: none;}
select:hover {border-color: #e3e6f0;}	  
select:focus {border-color: #e3e6f0; outline: none;}	

/*TOP메뉴 - 22/12/21 수정*/
.util {background: #004299; height: 50px;box-sizing: border-box;}
.util .inner {display: flex;justify-content: space-between;}
.util .left,
.util .right {display:flex;height: 50px;align-items: center;}
.util .left {flex:0 1 30%}
.util .right {flex:0 1 70%;justify-content: flex-end}
.util li { margin: 0 5px; font-size: 12px; cursor: pointer;}
.util li a {color: #fff;}

/* header - 22/12/21 수정*/
#header .logo {display:flex;align-items: center;width:22%;max-width:101px}
#header .logo a {width:100%;height:auto;}
#header .logo img {width:100%}
#header:after {display:block;content:"";clear:both;}

/* header 메뉴 - 22/12/08 수정 */
.menu-container{display:flex;color:#333;z-index: 100;}
.menu-container .manu {display: flex;height:96px;width:auto;}
.menu-container .manu ul {display: flex;flex-wrap: wrap;justify-content: flex-end;}
.menu-container .manu ul li {position: relative;display: flex;align-items: center;}
.menu-container .manu ul a {display: block; /* 중요 */text-decoration: none;color: #666;text-align: center;}
/* header 1Lv 메뉴 */
.menu-container .manu ul li a.title {display: block;min-height: 70px;line-height: 70px;padding: 0 30px;color: #666;font-size: 16px;transition: .2s;text-align:center;font-family: 'Noto Sans KR'; font-weight:400;}
.menu-container .manu ul li a.title:hover{color: #004299;font-weight:400;}
.menu-container .manu ul li a.title.selec{color: #004299}
/* header 2,3Lv 서브 메뉴 */
.menu-container .manu ul li ul.sub_menu {display: none;/* 서브메뉴들 숨김 */flex-direction: column;width:100%;}
.menu-container .manu ul li ul li {display: flex;flex-direction: column;width:100%;padding: 0;}
.menu-container .manu ul li ul li a {display: block;width:100%;padding: 0;height:34px;line-height:34px;margin:0;font-size: 14px;box-sizing:border-box;}
.menu-container .manu ul li ul.snd_menu {position: absolute;top:82px;right: calc(50% - 70px);width:140px;background: #fff;box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.1);}
.menu-container .manu ul li ul li ul.trd_menu a {color:rgba(0, 66, 153, 0.6);}
.menu-container .manu ul li ul li.on .lv2 {background: rgba(0, 66, 153, 1.0); color: #fff; }
.menu-container .manu ul li ul li a:hover{background: rgba(0, 66, 153, 0.3);color: #fff!important}

/* 전체메뉴 헴버거 버튼 */
.menu-container .menu_btn {display: flex;padding: 0;} 
.menu-container .menu_btn a.menu__btn {position: relative;width:32px;margin-left: 10px;} /* 22/12/08 수정 */
.menu_btn a span{width: 32px;right: 0;top:50%}
.menu_btn span,
.menu_btn span::before,
.menu_btn span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: #3c3c3c; transition-duration: .25s;}
.menu_btn span::before {content: ''; top: -8px;}
.menu_btn span::after {content: ''; top: 8px;}
.menu_btn.on a span {transform: rotate(45deg);}
.menu_btn.on a span::before {top: 0; transform: rotate(0);}
.menu_btn.on a span::after {top: 0; transform: rotate(90deg);}

/* 전체메뉴 헴버거 버튼 bg */
.m_bg {position: absolute; z-index: 997; background: #fff;visibility: hidden;right:0;top:82px;width:1200px;height: 0;box-sizing: border-box;}
.m_bg.on {visibility: visible;height:auto !important;max-height:640px;-webkit-transition: all .3s;transition: all .3s;}
.m_bg .menu {opacity: 0;display: flex;justify-content: space-between;height: 0;border: 1px solid #fff;box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.0);box-sizing: border-box;}
.m_bg.on .menu.on {visibility: visible;opacity: 1;z-index: 9999;overflow-y: scroll;height:auto !important;max-height:640px;border: 1px solid #dee1e7;box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);-webkit-transition: all .3s;transition: all .3s;}
/* 전체메뉴 헴버거 버튼 bg 스크롤 추가 22/11/21  */
.menu::-webkit-scrollbar {width: 6px;  /* 스크롤바의 너비 */}
.menu::-webkit-scrollbar-thumb {height: 10%; /* 스크롤바의 길이 */background: #d8d8d8; /* 스크롤바의 색상 */  border-radius: 3px;}
.menu::-webkit-scrollbar-track {background: rgba(230, 230, 230, 0.1);  /*스크롤바 뒷 배경 색상*/}

/* 전체메뉴 헴버거 버튼 클릭했을 때 전체매뉴22/11/25 수정 */
.menu-container .menu_btn .menu ol {display: flex;flex-direction: column;}
.menu-container .menu_btn .menu ol + ol {border-left: 1px solid #eee}
.grp + .grp{border-left:1px solid #eee}
.menu-container .menu_btn .menu ol.grp {flex:0 0 14.2%;display:flex;flex-direction:column;justify-content: flex-start;padding:20px 0}
.menu-container .menu_btn .menu ol.grp .sub_grp + .sub_grp {margin-top:16px}
.menu-container .menu_btn .menu ol.grp li {width:100%;padding: 0;}
.menu-container .menu_btn .menu ol.grp .sub_grp a {display: flex;align-items:center;width:100%;height: 26px;padding-left: 20px;font-size: 14px;box-sizing:border-box}
.menu-container .menu_btn .menu ol.grp .sub_grp a.dep2 {color: #555;font-weight: 600;pointer-events: none;}
.menu-container .menu_btn .menu ol.grp .sub_grp a.dep3 {color: #777;padding-left: 26px;}
.menu-container .menu_btn .menu ol.grp .sub_grp a:hover{color: #004299;font-weight: 500;text-decoration: underline;text-underline-offset:2px}

/* header  서비스 바로가기 */
.header .inner {position: relative;display: flex;justify-content: space-between;}/* 22/12/06 수정 */
.top_link {position: absolute; top:0;right:-160px;display: flex;flex-direction: column;box-shadow: 4px 4px 3px 2px rgba(0, 0, 0, 0.1); background: #fff;}
.top_link .qck_link {display: flex;justify-content: center;align-items: center;width:160px;height: 48px;font-size:15px;font-weight: 600;color: #002882;letter-spacing: -0.5px;background: #e6eeff}
.top_link .qck_link.go_inquiry {margin-top: 1px;}
.top_link .qck_link.cs_number {display: flex;flex-direction: column;height: 66px;font-weight: 400;color: #fff;background: #002882;}
.top_link .qck_link.cs_number s {margin-top: 7px;font-size: 20px;font-weight: 500;font-family: 'Century Gothic','Segoe UI', Tahoma;text-decoration: none;}
.top_link .qck_link.kitech {height: 66px;background: #5b90d6;}
.top_link .qck_link.kitech b {margin-left:4px;color: #fff;font-size: 14px;font-weight: 300;text-align: left;line-height: 18px;letter-spacing: -0.8px;}

/* footer - 22/11/09 수정 */
#footer {background:#004299; color:#fff;font-family: 'Noto Sans KR', sans-serif;font-weight:500}
#footer .inner {display: flex;align-items: center;}
#footer .f_logo {width:calc(20% - 20px);margin-right:20px}
#footer .f_logo a.footer_logo {display: block;text-align: left;}
#footer .f_logo img {width:100%;max-width: 101px;}
#footer .front,
#footer .rear {display: flex;flex-direction: column;width:50%; padding:60px 0 50px}
#footer .rear {width:30%;justify-content: center;align-items: flex-end;}
/* #footer .front .footer_link {float:left;width:100%;} */
#footer .front .footer_link a.link_item {position:relative;display:inline-block;width:auto;height:20px;margin:0 10px;font-size:13px;line-height:20px;color:#fff;}
#footer .front .footer_link .link_item:before {display: inline-block;position: absolute;top: 50%;left: -10px;width: 1px;height: 13px;margin-top: -6px;background-image: none;background-color:#999;content: "";}
#footer .front .footer_link .link_item:first-child {margin:0 10px 0 0}
#footer .front .footer_link .link_item:first-child:before {display: none}
#footer .front p {font-size:13px;line-height:22px;word-break:keep-all;font-weight: 300;}
#footer .front p.company_info {margin-top:20px;}
#footer .front p.copyright {margin-top:10px;}
#footer .rear .footer_support {display: flex;flex-direction:column;color:#fff;word-break:keep-all;}
#footer .rear .footer_support .tit {font-size:24px;font-weight: 500;}
#footer .rear .footer_support .phone {margin-top:8px;font-size:30px;line-height:34px;font-weight: 500;font-family: 'Century Gothic','Segoe UI', Tahoma;}
#footer .rear .footer_support .time {margin-top:8px;font-size:14px;line-height:20px;font-weight: 300;color: #fff;}
a.biz_regist {padding: 0 4px 0 2px;color: #fff;background: #4b74ff;border-radius: 2px;}
a.biz_regist:hover {color: #dfe7f1;}
.img_biz_regist {max-width: 1000px;}
.img_biz_regist img {width: 100%;max-width: 1000px;}

/* Top 위로이동버튼 22/11/09 수정*/
#movtop{position:fixed;bottom:12px;right:18px;}
#movtop a {display:flex;flex-direction: column;padding: 14px 21px 12px;justify-content: center;align-items: center;border:1px solid #999;background: #fff;border-radius: 3px;}
#movtop a .top_arrow {position: relative;;width:100%;height: 16px;color:#333;text-decoration: none;}
#movtop a .top_arrow:before {content: ''; position: absolute; width: 2px; height: 16px; background: #333; display: block; top:0px; right: 50% }
#movtop a .top_arrow:after {content: ''; position: absolute; width: 10px; height: 10px; display: block; top: 0px; right: 50%; margin-right: -5px; border-top: #333 2px solid; border-right: #333 2px solid; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }

/* 우측 퀵메뉴 22/12/06 수정 */
.floating {position: fixed;right:10px;bottom: 260px;}
.frt_tab ul li {display: flex;align-items: center;justify-content: center;width:80px;height: 80px;background: #003172;border-radius: 50%;box-shadow: -2px 4px 3px 0 rgb(0 0 0 / 20%);}
.frt_tab ul li + li {margin-top:10px}
.frt_tab ul li a {display:flex;flex-direction: column;align-items: center;}
.frt_tab ul li a .title {color: #fff;font-size: 13px;}
.frt_tab ul li a i {display: flex;justify-content: center;width:38px;margin-bottom: 10px;}
.frt_tab ul li a i:before {color: #fff;font-size: 18px;}

/* 마우스 포인터 22/12/21 수정 */
.custom_cursor {width: 26px;height: 22px;position: absolute;background-size: 26px 22px;background-image: url("../images/common/fllow_img.png");z-index: 9999;}


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

	/* header  서비스 바로가기 */
	.top_link {position: absolute; top:0;right:-60px;}

	/* 전체메뉴 헴버거 버튼 bg - 22/1207 수정 */
	.m_bg {width:100%;}
	

	}

	/* 태플릿_가로 - 22/12/21 추가*/
@media screen and (max-width:1198px){

   /* 마우스 포인터 */
   .custom_cursor {display: none;}

   }


/* 태플릿 */
@media screen and (max-width:1024px){

	 /* header 1Lv 메뉴- 22/12/21 수정 */
	 .menu-container .manu ul li a.title {padding: 0 14px;font-size: 15px;}

	 /* 우측 퀵메뉴 22/12/08 추가 */
	.floating {display: none;}


	}



/* 태플릿용2 */
@media screen and (max-width:768px){
	
	/* header_모바일 */  
	.header {display:none} 
	.header_mo {display:block;position: fixed;top: 0;width: 100%;background-color:rgba(255,255,255,1);border-bottom: 1px solid #ededed;z-index: 1000;box-sizing:border-box}/* 23/03/28 수정 */
	.header_mo .inner {display: flex;justify-content: space-between;height: 52px;}
	.header_mo .inner .logo {display: flex; align-items: center;justify-content: center;}
	.header_mo .inner .logo a {display: block;width:auto}
	.header_mo .inner .logo img {height:28px;}
	.header_mo .inner .user_mo {display: flex;width:32px;}
	.header_mo .inner .user_mo a {display: flex;align-items: center}
	.header_mo .inner .user_mo a i {display: flex;font-size: 32px;color: #004299;}
	.header_mo .inner .menu_btn_mo {position: relative;width:32px;}
	.header_mo .inner .menu_btn_mo a span{width: 32px;right: 0;top:50%}
	.header_mo .inner .menu_btn_mo span,
	.header_mo .inner .menu_btn_mo span::before,
	.header_mo .inner .menu_btn_mo span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: #3c3c3c; transition-duration: .25s;}
	.header_mo .inner .menu_btn_mo span::before {content: ''; top: -8px;}
	.header_mo .inner .menu_btn_mo span::after {content: ''; top: 8px;}
	
	/* 모바일-슬라이드메뉴 - 23/02/22 */
	.header_mo .menu_mo {position:fixed; top:0; right:-100%; z-index:60; width:65.5%; height:100%; padding-bottom:100%; background:#f5f5f5; -webkit-transition-duration:500ms; transition-duration:500ms;overflow-y: auto;}
	.header_mo .menu_mo.on {right:0;}
	.header_mo .menu_mo .holder {position: relative;width:100%;height:100%;overflow-y: auto;}
	.header_mo .menu_mo .top {display:flex;justify-content: flex-end;align-items: center;height: 40px; background: #fff}
	.header_mo .menu_mo .top a {vertical-align:middle;display:inline-block;}
	.header_mo .menu_mo .top a.user_no_name {font-weight: 500;}	
	.header_mo .menu_mo .top a.user_name {width:auto;}
	.header_mo .menu_mo .menu_close {position: relative;width:28px;margin-right:10px}
	.header_mo .menu_mo .menu_close span{width: 28px; right: 0; top:50%}
	.header_mo .menu_mo .menu_close span::before,
	.header_mo .menu_mo .menu_close span::after {display: block; position: absolute; width: 100%; height: 2px; background-color: #3c3c3c; transition-duration: .25s;}
	.header_mo .menu_mo .menu_close span::before {content: '';top: 0; transform: rotate(45deg);}
	.header_mo .menu_mo .menu_close span::after {content: ''; top: 0; transform: rotate(-45deg);}
	.header_mo .menu_mo .mid {display: flex;justify-content: space-between;align-items: center;height: 80px;padding: 0 10px;background: #fff; border-bottom:1px solid #d5d5d5;}
	.header_mo .menu_mo .mid a {width:50%;height: 36px;display:flex;justify-content: center;align-items: center;}
	.header_mo .menu_mo .mid a.login_link {color: #fff;background: #004299;}
	.header_mo .menu_mo .mid a.join_link {color: #004299;border:1px solid #004299;box-sizing: border-box;}
	.header_mo .menu_mo .mid a.user_name {width:100%;color: #333;font-size: 14px;}
	.header_mo .menu_mo .mid a.user_name b {font-weight: 500;}
	.header_mo .menu_mo .mid a.user_name i {margin-left: 4px;margin-top: 2px;font-size: 13px;}
	.header_mo .menu_mo .gnb {width:100%;overflow-y:scroll;position:relative;right:0}
	.header_mo .menu_mo .gnb > li > a {display:flex; align-items: center;width:100%;height: 46px;padding-left: 12px;border-bottom:1px solid #d5d5d5; font-size:14px;color:#424140; font-weight:bold;background:#fff;box-sizing: border-box}
	.header_mo .menu_mo .gnb > li.on > a {color:#39c1cd;}
	.header_mo .menu_mo .bottom {display: flex;position: absolute;bottom: 0;width: 100%;}
	.header_mo .menu_mo .bottom a {width:100%;height: 36px;display:flex;justify-content: center;align-items: center;color: #666;font-size: 15px;}
	/* 23/02/22 추가 */
	.header_mo .menu_mo .gnb > li > ul {display:none; background:#f5f5f5;}
	.header_mo .menu_mo .gnb > li > ul > li > a {display:flex; align-items: center;width:100%;height: 36px;padding-left: 30px; border-bottom:1px solid #d5d5d5; font-size:13;color:#424140;box-sizing: border-box}
	
	/* 모바일- 카테고리 슬라이드 */
	.header_mo .category_mo {position:fixed; top:0; left: -100%; z-index:60; width:65.5%; height:100%; padding-bottom:100%; background:#f5f5f5; -webkit-transition-duration:500ms; transition-duration:500ms;}
	.header_mo .category_mo.on {left:0;}
	.header_mo .category_mo .holder {position:relative;width:100%;height:100%;overflow-y: auto;}
	.header_mo .category_mo .top {display:flex;justify-content: flex-end;align-items: center;height: 40px; color: #fff;background: #fff;border-bottom:1px solid #d5d5d5;}
	.header_mo .category_mo .gnb {width:100%;overflow-y:scroll;position:relative;right:0}
	.header_mo .category_mo .gnb > li > a {display:flex; align-items: center;width:100%;height: 46px;padding-left: 12px;border-bottom:1px solid #d5d5d5; font-size:14px;color:#424140; font-weight:bold;background:#fff;box-sizing: border-box}
	.header_mo .category_mo .gnb > li.on > a {color:#39c1cd;}
	.header_mo .category_mo .gnb > li > ul {display:none; background:#f5f5f5;}
	.header_mo .category_mo .gnb > li > ul > li > a {display:flex; align-items: center;width:100%;height: 36px;padding-left: 30px; border-bottom:1px solid #d5d5d5; font-size:13;color:#424140;box-sizing: border-box}
	.header_mo .category_mo .gnb > li > ul > li.lv2 a { padding-left: 20px;font-weight: 500;}
	.header_mo .category_mo .menu_close {position: relative;width:28px;margin-right:10px}
	.header_mo .category_mo .menu_close span{width: 28px; right: 0; top:50%}
	.header_mo .category_mo .menu_close span::before,
	.header_mo .category_mo .menu_close span::after {display: block; position: absolute; width: 100%; height: 2px; background-color: #3c3c3c; transition-duration: .25s;}
	.header_mo .category_mo .menu_close span::before {content: '';top: 0; transform: rotate(45deg);}
	.header_mo .category_mo .menu_close span::after {content: ''; top: 0; transform: rotate(-45deg);}

	/* 우측 퀵메뉴 22/11/09 추가 */
	.floating {display: none;}
	
	/* footer - 23/02/22 수정 */
	#footer .front .footer_link a.link_item.m_hide {display: none;}

	}


/* 모바일용 */
@media screen and (max-width:425px){
	
	/* 모바일-슬라이드메뉴 */ 
	.header_mo .menu_mo .top a.log_out {top:21%;width:24%}
	.header_mo .menu_mo .gnb > li > ul > li > a {line-height:4.5vw;}
	
	/* footer  22/11/10 수정*/
	#footer .inner {display: flex;flex-direction: column;}
	#footer .front {width:100%;padding:30px 0 0}
	#footer .rear {width:100%;align-items: flex-start;padding:40px 0 60px}
	#footer .f_logo {width:100%;margin-right:0px;margin-top: 20px;}	
	#footer .f_logo img {max-width: 100px;}
	

	}
		
	
@media screen and (max-width:375px){
	
	/* 모바일-슬라이드메뉴 */ 
	.header_mo .menu_mo .top a.log_out p {vertical-align:-3%}
		
	
	}
	
@media screen and (max-width:360px){
	
	/* 모바일-슬라이드메뉴 */ 
	.header_mo .menu_mo .top a.log_out {top:19%;width:26%}
	.header_mo .menu_mo .top a.log_out p {vertical-align:-14%}
	
	
	}
	
@media screen and (max-width:320px){
	
	/* 모바일-슬라이드메뉴 */ 
	.header_mo .menu_mo .top a.log_out {top:18%;width:27%}
	.header_mo .menu_mo .top a.log_out p {vertical-align:-16%} 
	


	}