@charset "utf-8";

* { padding: 0; margin: 0; position: relative; box-sizing: border-box; font-family:'notosansKR', sans-serif; color: #292E42; letter-spacing: -1px;}

::selection { background: #2C598E; color: #FFFFFF;}

html, body { width: 100%; min-width: 600px; height: 100%; position: relative; background-color: #F4F6FA; cursor: default;}

/*----RESET & SETTING----*/
select {-webkit-appearance:none;/* for chrome */-moz-appearance:none;/*for firefox*/appearance:none;}
select::-ms-expand{ display:none;/*for IE10,11*/}

ul { list-style: none;} 
a { cursor: pointer; display: block; text-decoration: none;}

table { /*border-spacing: 0; border-collapse: 0;*/ table-layout: fixed; width: 100%; text-align: center;}
table td { word-wrap: break-word;}

.middle { position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.ctmd { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.right { }
.mgbt { margin-bottom: 30px;}
.no_mgbt { margin-bottom: 0 !important;}


.flex_con { display: flex; flex-direction: row; justify-content: space-between;}


/*----FONT----*/
h1 { font-size: calc(22px + 2pt); font-weight: 600; color: #00B6BD;}
h2 { font-size: 24px; font-weight: 400; font-family: 'GmarketSans';}
h3 { font-size: 20px; font-weight: 700;}


/*----GRADE----*/
.grade_0 { color: #686868 !important;}  /* grade0: 기본값 */
.grade_1 { color: #38A4FF !important;}  /* grade1: 좋음  */
.grade_2 { color: #8DCC30 !important;}  /* grade2: 보통  */
.grade_3 { color: #FF7114 !important;}  /* grade3: 나쁨  */
.grade_4 { color: #F00700 !important;}  /* grade3: 나쁨  */

.bg_grade_0 { background: #686868 !important;}
.bg_grade_1 { background: #38A4FF !important;}
.bg_grade_2 { background: #8DCC30 !important;}
.bg_grade_3 { background: #FF7114 !important;}
.bg_grade_4 { background: #F00700 !important;}


/*----COLOR----*/
.bg_gradient { background: linear-gradient(105deg, #189aa9 0%, #206487 100%) !important;}



/*----HEADER & FOOTER----*/
header { position: fixed; width: 100%; height: 90px; background: #FFFFFF; box-shadow: 0 9px 12px -6px rgba(244, 246, 250, .2); z-index: 999;}
header > .width_con { height: inherit;}

.h_title { height: inherit;}
.h_title > * { display: inline-block; vertical-align: middle;}
.h_title .logo_con { position: relative; margin-right: 15px; width: 88px; height: inherit;}
.h_title .logo_con > img { height: calc(45px * 1.5);}

.nav_con { position: absolute; top: 50%; right: 0%; transform: translate(0, -50%); height: 100px;}
.nav_con > * { display: inline-block;}
.nav_con ul.nav { height: 100%; vertical-align: top;}
.nav_con ul.nav > li { position: relative; display: inline-block; margin-left: 30px; height: 100%;}
.nav_con ul.nav > li a { position: relative; color: rgba(30, 61, 91, .8); font-size: 20px; font-weight: 500; letter-spacing: -1px; transition: all 100ms linear; padding: 0 15px;}
.nav_con ul.nav > li a:hover { color: rgba(30, 61, 91, 1);}

.go_gunp, .go_gunp a { height: inherit;}
.go_gunp { position: relative; width: 60px;}
.go_gunp a { position: relative;}
.go_gunp a > span { width: max-content; font-size: 16px; font-weight: 500; color: rgba(48, 53, 72, .5); text-decoration: underline;}


footer { height: 90px;}
footer > .width_con { height: inherit; text-align: center;}
footer > .width_con > img { height: 30px;}


/*-----wrap-----*/
.wrap { position: relative; padding: 120px 0 0;}

.width_con { position: relative; margin: 0 auto; width: 1280px;}
.map { margin-bottom: 30px; width: 100%; height: 50dvh; min-height: 400px;}
.box { padding: 30px; background: #FFF; border-radius: 15px;}
.box_title_con { margin-bottom: 15px;}

.grade_con {}
.grade_con .grade_legend { display: inline-block; padding: 3px 0; width: 80px; height: 25px; text-align: center; font-size: 12px; font-weight: 400; color: #FFF; vertical-align: top;}

.table_con { overflow-x: auto;}
.t_style { min-width: 650px;}
.t_style tr {}
/*.t_style tr:hover td { background: rgba(48, 53, 72, .05);}*/
.t_style tr th, .t_style tr th * { color: #FFF; font-size: 12px; font-weight: 200;}
.t_style tr th, .t_style tr td { height: 50px; font-size: 16px; font-weight: 400; line-height: 1.15em; word-break: keep-all;}
.t_style tr th {}
.t_style tr td {}
.t_style tr th:nth-child(1), 
.t_style tr td:nth-child(1) { width: 55px;}
.t_style tr td:nth-child(4), 
.t_style tr td:nth-child(5) { font-weight: 500;}



/*-----반응형-----*/
@media all and (min-width: 0px) and (max-width:1280px) {
	
	.width_con { width: 100%;}
	
	header { padding: 0 30px;}
	.h_title .logo_con { margin-right: 5px; width: 60px;}
	.h_title .logo_con > img { height: calc(30px * 1.5);}
	h1 { font-size: calc(20px + 2pt);}
	h2 { font-size: 20px;}

	.wrap { padding: 120px 30px 0;}

	.grade_con .grade_legend { width: 60px;}
}