@charset "utf-8";

/*로그인*/
.login_bg{ width:100%; height:100%; background: url('/safe_inst/images/common/bg_login.png') repeat-x center center; display:flex; justify-content:center; align-items:center}
.login_bg > div.login{ width:1200px;display:flex; justify-content:center; align-items:center; height:500px;padding:0 90px 0 40px;}
.login_bg > div.login > div{  min-height:468px}
.login_bg > div.login > div.login_title{width:calc(100% - 460px);  text-align:center; color:#fff;  background: url('/safe_inst/images/common/img_login.jpg') no-repeat center bottom; padding-top:60px; font-size:1.1em; line-height:2em}
.login_bg > div.login > div.login_title > p:nth-child(2){font-size:2em; font-weight:600; }
.login_bg > div.login > div.login_box{ width:460px; height:600px;background:#fff; border-radius:50px; display:flex; flex-direction:column;gap:50px;  justify-content:center; align-items:center; padding:0 50px;box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);}
.login_bg > div.login > div.login_box > ul{width:100%; display:flex; flex-direction:column;gap:10px;}
.login_bg > div.login > div.login_box > ul > li{width:100%; display:flex; align-items:center;border:1px solid #5379f7; border-radius:50px; padding:5px 20px }
.login_bg > div.login > div.login_box > ul > li:nth-child(3){border:1px solid #333399; background:#333399; text-align:center;  }
.login_bg > div.login > div.login_box > ul > li:nth-child(3):hover{background:#000; }
.login_bg > div.login > div.login_box > ul > li .loginBtn{border:0; background:transparent; width:100%; height:40px; color:#fff; text-align:center; font-size:1.05em; font-weight:600 }
.login_bg > div.login > div.login_box > ul > li a.joinBtn{border:0; background:#f2f2f2; width:100%; height:40px; line-height:40px; color:#336699; text-align:center; font-size:1.05em; font-weight:600 }

.login_bg > div.login > div.login_box > ul > li  span{vertical-align:middle}

div.login_box > ul > li input[type=text],div.login_box > ul > li input[type=password]{width:100%;border:0; text-align:center; color:#5379f7; font-size:0.9em}

@media (max-width:1200px) {
.login_bg > div.login{ padding:0 50px 0 20px;}
.login_bg > div.login > div.login_box{  height:500px;border-radius:30px; }
 }
@media (max-width:840px) {
.login_bg{height:auto;  background: url('/safe_inst/images/common/bg_login.png') repeat-x center top; }
.login_bg > div.login{  width:100%; height:auto; display:flex; flex-wrap:wrap;padding:0 20px 0 20px;}


.login_bg > div.login > div{  min-height:368px}
.login_bg > div.login > div.login_title{width:calc(100% - 0px); background-size:200px }
.login_bg > div.login > div.login_title > p:nth-child(2){margin-top:0px; }

.login_bg > div.login > div.login_box{width:100%;height:400px; padding:0 20px; gap:20px }

}
@media (max-width:640px) {
.login_bg > div.login{  width:100%; height:auto; display:flex; flex-wrap:wrap;padding:0 10px 0 10px;}


.login_bg > div.login > div{  min-height:208px}
.login_bg > div.login > div.login_title{width:calc(100% - 0px); background-size:90px }


.login_bg > div.login > div.login_box{width:100%;height:400px; }

.login_bg > div.login > div.login_box > ul > li .loginBtn{height:30px;font-weight:400 }


}
/*사이트 공통*/

/* header 헤더 */
#header{width:100%;
	position:fixed;
	top:0;left:0;
	padding:15px 20px 10px 50px;box-sizing:border-box;
	background-color:#fff;
	z-index:600; font-size:18px;
	height:90px;
	margin: 0 auto;
	
	z-index: 9;
	color:#000;
	border-bottom: 1px solid rgba(128,128,128, 0.6);
	*-webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
	*-moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
	*box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);	
}

#header.headerin{ background-color:#fff; color:#000;}
#header.headerin #top_inst #navi_inst ul.topngb li a {color:#000;}
#header #top_inst { max-width: 100%; width:100%; vertical-align: middle; display: block; position:relative}


#header #top_inst > #navi_inst:after{clear:both; display:block; content:'';}
#header #top_inst h1 { display: block;  width: 230px; position: absolute; top:5px;  left: 0; right:0;}
#header #top_inst #navi_inst { margin-left:250px; margin-top:5px;  }
#header #top_inst #navi_inst ul.topngb{ display:flex; }
#header #top_inst #navi_inst > ul.topngb > li {text-align:center; display:inline-block;}
#header #top_inst #navi_inst > ul.topngb > li:after{clear:both; display:block; content:'';}
#header #top_inst #navi_inst > ul.topngb > li > a{color:#000; display:block; padding:10px 20px; font-size:20px;}
#header #top_inst #navi_inst ul.topngb > li:hover > a{font-weight:500;}

#header #top_inst #navi_inst > ul.topngb > li > a::after{content:""; display:block; border-bottom:2px solid #009999; transform: scaleX(0); transition: transform 250ms ease-in-out; padding-bottom:10px;}
#header #top_inst #navi_inst > ul.topngb > li > a:hover::after{transform: scaleX(1);}

#header #top_inst #navi_inst ul.topngb li div.submenu{display: none; overflow: hidden; position: fixed; left: 0px; width: calc(100% - 110px); background-color: rgba(255,255,255,1); top:105px; padding:20px 0;}
#header.headerin #top_inst #navi_inst ul.topngb li div.submenu {background-color: rgba(255,255,255,1); border-top:1px solid #e7e7e7}
#header #top_inst #navi_inst ul.topngb li div.submenu:after{clear:both; display:block; content:'';}

#header #top_inst #navi_inst ul.topngb li div.submenu > .submenu_div {width:1100px; float:right; text-align:left;}
#header #top_inst #navi_inst ul.topngb li:nth-child(1) div.submenu > .submenu_div {padding-left:10px;}
#header #top_inst #navi_inst ul.topngb li:nth-child(2) div.submenu > .submenu_div {padding-left:160px}
#header #top_inst #navi_inst ul.topngb li:nth-child(3) div.submenu > .submenu_div {padding-left:220px;}
#header #top_inst #navi_inst ul.topngb li:nth-child(4) div.submenu > .submenu_div {padding-left:400px}
#header #top_inst #navi_inst ul.topngb li:nth-child(5) div.submenu > .submenu_div {padding-left:500px}
#header #top_inst #navi_inst ul.topngb li:nth-child(6) div.submenu > .submenu_div {padding-left:580px}
#header #top_inst #navi_inst ul.topngb li:nth-child(7) div.submenu > .submenu_div {padding-left:600px}
#header #top_inst #navi_inst ul.topngb li:nth-child(8) div.submenu > .submenu_div {padding-left:570px}

#header #top_inst #navi_inst ul.topngb li div.submenu > .submenu_div ul li {display:inline-block; font-size:16px;}
#header #top_inst #navi_inst ul.topngb li div.submenu > .submenu_div ul li a {color:#292929;display:block; padding:5px 20px 0 20px }
#header #top_inst #navi_inst ul.topngb li div.submenu > .submenu_div ul li:hover a {display:block; color:#3366cc;}
#header.headerin #top_inst #navi_inst ul.topngb li a {text-shadow: none;}
#header.headerin #top_inst #navi_inst ul.topngb li:hover > .submenu{display:block;}
div.gnb_right{position:absolute; right:20px; top:10px; font-size:0.8em}
div.gnb_right a{display:inline-block; border-radius:30px; border:1px solid #3366cc; padding:5px 20px 5px 10px; color:#3366c}
div.gnb_right a span{display:inline-block;vertical-align:middle; padding-right:5px}
/*상세페이지 상단 _ 사이트 네비 맵바 */
.subcontent{width:100%; overflow:hidden; font-size:18px; line-height:1.5em}
.sub_div{ max-width:1200px; min-height:800px; margin:0 auto; display:block;  background:#fff; margin:100px auto 50px auto; padding:50px;box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%); border-radius:30px}

.sub_div h2 { display:block; width:100%; text-align:center; font-size:1.5em}
.sub_div h2 > span:after { display:block; width:200px;height:1px; background:#000; margin:10px auto 50px auto; content:""}

table.list {width:100%; border-top:2px solid #000 }
table.list tr td{padding:10px 20px; border-bottom:1px solid #e5e5e5;border-right:1px solid #e5e5e5; color:#1c5086; text-align:center; }
table.list tr td:last-child{border-right:0px }
table.list tr th{padding:10px 20px; border-bottom:1px solid #e5e5e5; border-right:1px solid #e5e5e5; background:#f2f2f3; text-align:center; font-weight:normal}
table.list tr th:last-child{border-right:0px }
table.list th.business_year{ font-weight:600; font-size:2.2em; color:#009999; border-right:1px solid #e5e5e5;}
table.list th.th_02{background:#f2f2f2; font-weight:600}
table.list td.td_02{background:#f2f2f2;}
table.list tr td div.state{display:flex;gap:3px; justify-content:center}
table.list tr td div.state a{display:inline-block; border:1px solid #ccc; padding:0px 10px; border-radius:20px; font-size:0.8em; color:#006699}
table.list tr td div.state a.state03{display:inline-block; border:1px solid #006699;background:#006699; color:#fff}
table.list tr td div.state a.state03 span{display:inline-block; vertical-align:middle; color:#fff; padding-left:2px; font-size:18px}

table.wirte_req {width:100%; border-top:2px solid #000 }
table.wirte_req tr td{padding:10px 20px; border-bottom:1px solid #e5e5e5;border-right:1px solid #e5e5e5; color:#1c5086;  }
table.wirte_req tr td:last-child{border-right:0px }
table.wirte_req tr th{padding:10px 20px; border-bottom:1px solid #e5e5e5; border-right:1px solid #e5e5e5; background:#f2f2f3; text-align:center; font-weight:normal}
table.wirte_req tr th:last-child{border-right:0px }
table.wirte_req th.business_year{ font-weight:600; font-size:2.2em; color:#009999; border-right:1px solid #e5e5e5;}
table.wirte_req th.th_02{background:#f2f2f2; font-weight:600}
table.wirte_req td.td_02{background:#f2f2f2;}

ul.ul_input{width:100%; display:flex; flex-wrap:wrap; gap:20px }
p.btn_area{width:100%; text-align:center; padding:40px  }
a.btnRequest{display:inline-block; border:1px solid #5379f7;background:#5379f7; color:#fff; border-radius:50px; padding:10px 40px }
@media(max-width:640px){
#content_title { min-height:200px; margin:0 auto; display:block; position:relative; }
#content_title >div.content_title_div > div.content_title_text > h2 {font-size:2em; }

}






/*media*/

@media (max-width:1200px) {


}



/*공통하단*/
#footer {width:100%; padding:40px 10px; text-align:center; position:relative; font-size:0.9em}
#footer p span:after{display:inline-block; content:"|";  padding:0px 5px;font-size:0.9em; color:#999}



@media (max-width:840px) {

#header{width:100%;padding:5px 10px 10px 5px; overflow:hidden; }
#header #top_inst h1 { display: block;  width: 100%; position:static}
#header #top_inst h1 a { display: block;  width: 200px; margin:0 auto;}
#header #top_inst h1 img {}	
#header #top_inst #navi_inst { margin-left:0;  }
#header #top_inst #navi_inst ul.topngb{ justify-content:center;width:100%; border-top:1px solid #ccc;  }
#header #top_inst #navi_inst > ul.topngb > li > a{color:#000; display:block; padding:10px 10px 5px 10px; font-size:16px;}
div.gnb_right{position:absolute; right:5px; top:5px; font-size:0.7em}
div.gnb_right a{display:inline-block; border-radius:30px; border:1px solid #3366cc; padding:3px 10px 3px 10px; color:#3366c}
.sub_div{ padding:20px 10px;border-radius:10px}

.sub_div h2 {  font-size:1.3em}
.sub_div h2 > span:after { width:150px;margin:10px auto 50px auto; content:""}
.subcontent{padding:0 10px}
}


@media (max-width:640px) {

	
	#footer {width:100%; font-size:14px; line-height:1.5em; margin-top:0}
	#footer .addr{font-size:14px}
	#footer > ul.f_menu > li {border:1px solid #ccc;  line-height:28px;}
#footer > ul.f_menu > li > a{display:inline-block; padding:5px 10px; }
#footer > div.add > ul{margin-bottom:10px}
#footer > div.add > ul > li > span:after{margin:0 5px; }
div.family1{display:none; }
#footer > ul.f_menu > li:last-child{border:none;}
	
}












