@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;600;700;900&display=swap');

/*root 변수 설정*/
:root {
  --tooltip2-min-width: 150px;
}

/*main_common*/
.main_wrap {background: #f3f4f6;}
.main_wrap > article:last-child {margin-bottom: 100px;}

.title_box {display:flex; justify-content: space-between; align-items:center; margin-bottom:30px;}

.m_title {position: relative; font-size:30px;font-weight: 700; color: #111; box-sizing:border-box; padding-left: 18px; line-height: 1;}
.m_title:before {content: ''; display: block; position: absolute; left: 0; top: 5px; width: 4px; height: 12px; background: #158fea;}
.m_title:after {content: ''; display: block; position: absolute; left: 0; top: 17px; width:4px; height: 12px; background: #073e80;}

.m_view {position: relative; font-size:15px;font-weight: 500; color: #111; box-sizing:border-box; padding-left: 20px; transition:.3s;}
.m_view:before {content: ''; display: block; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; background:url(/images/main/m_view-e438c488c6780229e867c4d21cd298af.png); transition:.3s;}
.m_view:hover {color: #073e80;}
.m_view:hover:before {background:url(/images/main/m_view_ov-4ae245bee0bdf3ff7f8159bb9661e277.png);}

.m_ul {display:flex; justify-content: space-between;}
/* .m_ul li,
.marti03 .right {width:48.83%; background: #fff; box-sizing:border-box; border-radius:15px; padding:2.9%; box-shadow:5px 5px 15px rgba(0,0,0,0.1);} */


/*marti01*/
/* .marti01 {position: relative; margin-top: 150px; margin-bottom: 70px;} */
.marti01 .box {background: #fff; display:flex; align-items: center; height: 310px; box-sizing:Border-box; padding:40px 2.9%; border-radius:15px; box-shadow:5px 5px 15px rgba(0,0,0,0.1);}
.marti01 .box .title {width: 14.19%; max-width:230px;}
.marti01 .box .title h2 {font-size:30px; font-weight: 700; color: #073e80; margin-bottom: 10px;}
.marti01 .box .title p {font-size: 17px; font-weight: 400; color: #333;}
.marti01 .box ul {display:flex; justify-content: space-between; width: 85.8%;}
.marti01 .box ul li {box-sizing:border-box; padding:0; border:1px solid #ddd; border-radius:15px; width:13.1%; max-width:210px; transition:.3s;}
.marti01 .box ul li a {width:100%; height:230px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.marti01 .box ul li a figure {width: 80px; height:80px; background: #f3f4f6; border-radius:50%; display: flex; justify-content: center; align-items: center; transition:.3s;}
.marti01 .box ul li a h3 {font-size:18px; font-weight: 700; color: #333; margin:15px 0 10px;}
.marti01 .box ul li a p {font-size: 15px; }
.marti01 .box ul li a p span {display:inline-block; font-weight: 500; margin-right: 20px;}
.marti01 .box ul li a p span.month {color: #3f83d5;}
.marti01 .box ul li a p span.total {color: #073e80;}
.marti01 .box ul li a p b {display:inline-block; font-weight: 400; color: #808080;}
.marti01 .box ul li a:hover figure {background: #fff;}
.marti01 .box ul li:hover {background:#f3f9fe;} 

/*marti02*/
.marti02 table {}
.marti02 table th {background: #f3f4f6; font-size: 16px; font-weight: 500; color: #333; padding:12px 0;}
.marti02 table th:first-child {border-radius:5px 0 0 5px;}
.marti02 table th:last-child {border-radius:0 5px 5px 0;}
.marti02 table td {font-size: 16px; font-weight: 400; color: #808080; padding:12px 0; border-bottom: 1px solid #ddd;}
.marti02 table tr:hover {background-color: #f3f9fe; cursor: pointer;}
span.type {box-sizing:border-box; display: block; width: 62px; height: 26px; font-size: 14px; font-weight: 400; color: #fff; background: #9ea3aa; border-radius:5px;  display: flex;  justify-content: center;   align-items: center; margin:0 auto;}
span.type1_1 {background: #fff9e6; color: #dfaf01; border:1px solid #dfaf01}
span.type1_2 {background: #fff9e6; color: #dfaf01; border:1px solid #dfaf01}
span.type1_3 {background: #e6f3f7; color: #0e8cb5; border:1px solid #0e8cb5}
span.type1_4 {background: #f2f8ed; color: #63a628; border:1px solid #63a628}
span.type1_5 {background: #fbe5e7; color: #e73945; border:1px solid #e73945}
span.type1_6 {background: #e7f4fd; color: #158fea; border:1px solid #158fea}

span.type2_1 {background: #fff9e6; color: #dfaf01; border:1px solid #dfaf01}
span.type2_2 {background: #fff9e6; color: #dfaf01; border:1px solid #dfaf01}
span.type2_3 {background: #e6f3f7; color: #0e8cb5; border:1px solid #0e8cb5}
span.type2_4 {background: #f2f8ed; color: #63a628; border:1px solid #63a628}
span.type2_5 {background: #fbe5e7; color: #e73945; border:1px solid #e73945}
span.type2_6 {background: #e7f4fd; color: #158fea; border:1px solid #158fea}
span.type2_7 {background: #fbe5e7; color: #e73945; border:1px solid #e73945}
span.type2_8 {background: #051a28; color: #d9d920; border:1px solid #d9d920}
span.type2_9 {background: #051a28; color: #d9d920; border:1px solid #d9d920}
span.type2_10 {background: #FCD9F9; color: #FF33FF; border:1px solid #FF33FF}
span.type2_11 {background: #f9c28780; color: #d7851a; border:1px solid #d7851a}

span.type3_1 {background: #fff9e6; color: #dfaf01; border:1px solid #dfaf01}
span.type3_2 {background: #fff9e6; color: #dfaf01; border:1px solid #dfaf01}
span.type3_3 {background: #e6f3f7; color: #0e8cb5; border:1px solid #0e8cb5}

/*marti03*/
/* .marti03 {margin-top: 70px; display:flex; justify-content: space-between; } */
.marti03 > div.left {width: 48.83%;}
.marti03 > div.left ul {display:flex; flex-wrap:wrap;}
.marti03 > div.left ul li {width: 50%; background: #073e80; position: relative;}
.marti03 > div.left ul li:before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); transition:.3s;}
.marti03 > div.left ul li:nth-child(2) {background: #158fea;}
.marti03 > div.left ul li:nth-child(3) {background: #0b63b7;}
.marti03 > div.left ul li:nth-child(4) {background: #10a5d6;}
.marti03 > div.left ul li a{width: 100%; height: 185px; display:flex; align-items: center; color: #fff; box-sizing:border-box; padding-left: 14.31%; position: relative;}
.marti03 > div.left ul li a:before {content: ''; display: block; position: absolute; right: 0; bottom: 0; width: 0;
  height: 0;
  border-bottom: 15px solid #063266;
  border-top: 15px solid transparent;
  border-left: 15px solid transparent;
  border-right: 15px solid #063266;}
.marti03 > div.left ul li:nth-child(2) a:before {
	border-bottom: 15px solid #127ac7;
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-right: 15px solid #127ac7;
}
.marti03 > div.left ul li:nth-child(3) a:before {
	border-bottom: 15px solid #09539a;
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-right: 15px solid #09539a;
}
.marti03 > div.left ul li:nth-child(4) a:before {
	border-bottom: 15px solid #0e8cb6;
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-right: 15px solid #0e8cb6;
}

.marti03 > div.left ul li a .title {max-width:137px; width: 100%; margin-right: 17%;}
.marti03 > div.left ul li a h2 {font-size: 26px; font-weight: 500; margin-bottom: 10px;}
.marti03 > div.left ul li a h3 {font-size: 14px; font-weight:500; position: relative; padding-right: 20px; box-sizing:border-box; width: 90px; color: rgba(255,255,255,0.8);}
.marti03 > div.left ul li a h3:before {content: ''; display: block; position: absolute; right: 0; top: calc(50% - 4px); width: 7px; height: 8px;   background:url(/images/main/marti03_dir-da2d2e34620a0be37b82a64f2743fd25.png); transition:.3s;}
.marti03 > div.left ul li a figure {width: 100px; min-width: 100px; min-height: 100px; height: 100px; border-radius:50%; background: #06356d;}
.marti03 > div.left ul li:nth-child(2) a figure {background: #127ac7;}
.marti03 > div.left ul li:nth-child(3) a figure {background: #09549c;}
.marti03 > div.left ul li:nth-child(4) a figure {background: #0e8cb6;}

.marti03 > div.left ul li a:hover h3:before {right: -20px;}
.marti03 > div.left ul li:hover:before {background: rgba(0,0,0,0.2);}
.marti03 > div.right .title_box {}

/*marti04*/
/* .marti04 {position: relative; margin-top: 150px; margin-bottom: 70px;} */
.marti04 {position: relative; margin-top: 150px !important; margin-bottom: -80px !important;} /* important 추가 */
.marti04 .box {background: #fff; display:flex; align-items: center; height: 210px; box-sizing:Border-box; padding:40px 2.9%; border-radius:15px; box-shadow:5px 5px 15px rgba(0,0,0,0.1);}
.marti04 .box .title {width: 18%; max-width:230px;}
.marti04 .box .title h2 {font-size:30px; font-weight: 700; color: #073e80; margin-bottom: 10px;}
.marti04 .box .title p {font-size: 17px; font-weight: 400; color: #333;}
.marti04 .box ul {display:flex; justify-content: space-evenly; width: 85.8%;}
.marti04 .box ul li {box-sizing:border-box; padding:0; border:1px solid #ddd; border-radius:15px; width:31.1%; max-width:210px; transition:.3s;}
.marti04 .box ul li a {width:100%; height:130px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.marti04 .box ul li a figure {width: 80px; height:80px; background: #f3f4f6; border-radius:50%; display: flex; justify-content: center; align-items: center; transition:.3s;}
.marti04 .box ul li a h3 {font-size:18px; font-weight: 700; color: #333; margin:15px 0 10px;}
.marti04 .box ul li a p {font-size: 15px; }
.marti04 .box ul li a p span {display:inline-block; font-weight: 500; margin-right: 20px;}
.marti04 .box ul li a p span.month {color: #3f83d5;}
.marti04 .box ul li a p span.total {color: #073e80;}
.marti04 .box ul li a p b {display:inline-block; font-weight: 400; color: #808080;}
.marti04 .box ul li a:hover figure {background: #fff;}
.marti04 .box ul li:hover {background:#f3f9fe;} 

.board_wrap {border-top: 1px solid #ddd; padding-top:40px; box-sizing:border-box;}
.board_wrap ul li {margin-bottom: 20px;}
.board_wrap ul li:last-child {margin-bottom: 0;}
.board_wrap ul li a {display:flex; justify-content: space-between;}
.board_wrap ul li a .title {font-size: 17px; font-weight: 400; color: #333; position: relative; display:flex; box-sizing:border-box; padding-right: 30px;}
.board_wrap ul li a .title p {position: relative; transition:.3s; box-sizing:border-box; padding-left: 15px; width: 100%; max-width:400px;  overflow:hidden;   text-overflow:ellipsis;   white-space:nowrap;}
.board_wrap ul li a .title p:before {content: ''; display: block; position: absolute; left: 0; top: 50%; transform:translate(0,-50%); transition:.3s; width: 4px; height:4px; background: #9ea3aa; border-radius:50%;}
.board_wrap ul li a .title span {position: absolute; font-weight: 700; font-size:12px; color:#d6000f; display: block; right: 0; top: 50%; transform:translatE(0,-50%);}
/* .board_wrap ul li a .name {display:flex; font-size: 15px; font-weight: 400; color: #808080; width:140px;} */
.board_wrap ul li a .name span {display: block; margin-right: 25px; position: relative;}
.board_wrap ul li a .name span:before {content: ''; display: block; position: absolute; right: -14px; top: 6px; width: 1px; height: 13px; background: #d1d1d1;}
.board_wrap ul li a .name b {display: block; font-weight: 400;}
.board_wrap ul li a:hover .title p {color: #073e80;	 font-weight: 500;}
.board_wrap ul li a:hover .title p:before  {background: #073e80;}

/*marti05*/
/* .marti05 {margin-top: 70px; display:flex; justify-content: space-between; } */
.marti05 > div.left {width: 48.83%;}

.marti05 {margin-top: 70px !important; display:flex; justify-content: space-between; } /* important 추가 */
.marti05 {position: relative; margin-top: 150px !important; margin-bottom: -80px !important;} /* important 추가 */
.marti05 .box {background: #fff; box-sizing:Border-box; padding:61px 2.9%; border-radius:15px; box-shadow:5px 5px 15px rgba(0,0,0,0.1);}
.marti05 .box .title {width: 18%; max-width:230px;}
.marti05 .box .title h2 {font-size:30px; font-weight: 700; color: #073e80;}
.marti05 .box .title p {font-size: 17px; font-weight: 400; color: #333;}
.marti05 .box ul {display:flex; justify-content: space-evenly; width: 65%; height: 100px;}
.marti05 .box ul li {box-sizing:border-box; padding:0; border:1px solid #ddd; border-radius:15px; width:31.1%; max-width:210px; transition:.3s;}
.marti05 .box ul li a {width:100%; height:85px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.marti05 .box ul li a figure {width: 80px; height:80px; background: #f3f4f6; border-radius:50%; display: flex; justify-content: center; align-items: center; transition:.3s;}
.marti05 .box ul li a h3 {font-size:18px; font-weight: 700; color: #333; margin:15px 0 10px;}
.marti05 .box ul li a p {font-size: 15px; }
.marti05 .box ul li a p span {display:inline-block; font-weight: 500; margin-right: 20px;}
.marti05 .box ul li a p span.month {color: #3f83d5;}
.marti05 .box ul li a p span.total {color: #073e80;}
.marti05 .box ul li a p b {display:inline-block; font-weight: 400; color: #808080;}
.marti05 .box ul li a:hover figure {background: #fff;}
.marti05 .box ul li:hover {background:#f3f9fe;} 

/*알림(확성기 아이콘) 툴팁*/
[class ^="notice-tooltip"] {
	position: absolute!important;
	float: left;
	left: 5px;
	top: 3px;
	content: '';
	display: block;
	width: 25px;
	height: 25px;
	background: url(/images/icon/question_mark-33f711d7c4757b3a8a76046acf741256.jpg) no-repeat center/contain;
	background-color: rgba(231,244,253, 0.8);
	transition: .3s;
	border-radius: 15px;
	border: 3px solid rgba(231,244,253, 0.8);
}

[data-tooltip-text]::after {
	position: absolute;
	-webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	-moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	background-color: #e7f4fd;
	-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #666;
	font-size: 13px;
	margin-bottom: 10px;
	padding: 7px 12px;
	width: auto;
	min-width: 150px;
	max-width: 240px;
	word-wrap: break-word;
	z-index: 9999;
	opacity: 0;
	left: -9999px;
	top: 90%;
	content: attr(data-tooltip-text);
}

[data-tooltip-text]:hover::after {
	top: 20%;
	left: 140%;
	opacity: 1;
}

/*알림2(확성기 아이콘) 툴팁*/
[class ^="notice2-tooltip"] {
	position: relative; /* 기준점 */
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url(/images/icon/question_mark-33f711d7c4757b3a8a76046acf741256.jpg) no-repeat center/contain;
	transition: .3s;
	margin: 0 10px 0 4px;
	vertical-align: sub;
}

[data-tooltip2-text]::after {
	position: absolute;
	-webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	-moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	background-color: #e7f4fd;
	-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #666;
	font-size: 13px;
	margin-bottom: 10px;
	padding: 7px 12px;
	width: auto;
	min-width: var(--tooltip2-min-width);
	max-width: 240px;
	word-wrap: break-word;
	z-index: 9999;
	opacity: 0;
	left: -9999px;
	top: 90%;
	content: attr(data-tooltip2-text);
	white-space: pre-line;
	text-align: left;
}

[data-tooltip2-text]:hover::after {
	top: 20%;
	left: 140%;
	opacity: 1;
}