@charset "utf-8";

.visual_wrap { position:relative; width:100%; height:764px; margin:0 auto; background:url('/monitor/images/main/visual_img01.jpg') no-repeat center top; }
.visual_wrap .visual { background:url('/monitor/images/main/slogun_bg.png') no-repeat center top; text-align:center; height:529px; }
.visual_wrap .visual .slogun { text-align:center; padding-top:165px; }

.main_banner { position:absolute; z-index:99; margin-top:-260px; overflow:hidden; }
.main_banner>div { float:left; width:259px; height:223px; margin-left:44px; background:#fff; border:4px solid #2e72c6; border-radius:7px; }
.main_banner>div:first-child { margin-left:0; }
.main_banner>div>p { margin-bottom:15px; padding-top:110px; font-family:'Noto Sans KR', sans-serif; font-size:24px; /*font-weight:bold;*/ color:#2e72c6; text-align:center; }
/* Fade */
.main_banner>div.hvr-fade { display:inline-block; vertical-align:middle; -webkit-transform:translateZ(0); transform:translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-osx-font-smoothing:grayscale; overflow:hidden; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-property:color, background-color; transition-property:color, background-color; }
.main_banner>div.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { background:#2e72c6; }

.main_banner>div.ico01>p { background:url('/monitor/images/main/main_ico01.png') no-repeat center 27px; }
.main_banner>div.ico02>p { background:url('/monitor/images/main/main_ico02.png') no-repeat center 22px; }
.main_banner>div.ico03>p { background:url('/monitor/images/main/main_ico03.png') no-repeat center 21px; }
.main_banner>div.ico04>p { background:url('/monitor/images/main/main_ico04.png') no-repeat center 27px; }
.main_banner>div>.btns { text-align:center; }
.main_banner>div>.btns a { display:inline-block; padding:6px 70px; font-family:'Noto Sans KR', sans-serif; font-size:14px; /*font-weight:bold;*/ background:#fff; color:#4a4a4a; border:1px solid #343434; border-radius:5px; }

.main_banner>div:hover { background:#2e72c6; }
.main_banner>div:hover>p{ color:#fff; }
.main_banner>div:hover>.btns a { border:1px solid #fff; font-weight:bold; color:#2e72c6; }
.main_banner>div:hover.ico01>p { background:url('/monitor/images/main/main_ico01_ov.png') no-repeat center 27px; }
.main_banner>div:hover.ico02>p { background:url('/monitor/images/main/main_ico02_ov.png') no-repeat center 22px; }
.main_banner>div:hover.ico03>p { background:url('/monitor/images/main/main_ico03_ov.png') no-repeat center 21px; }
.main_banner>div:hover.ico04>p { background:url('/monitor/images/main/main_ico04_ov.png') no-repeat center 27px; }

.board_wrap { position:relative; padding-bottom:40px; background:#f4f4f4; }
.board_wrap p.tit { padding:50px 0; text-align:center; font-family:'Noto Sans KR', sans-serif; font-size:28px; color:#2c2c2c; }
.board_wrap>div>.btns { margin-top:43px; text-align:center; }
.board_wrap>div>.btns a { display:inline-block; padding:10px 28px; font-family:'Noto Sans KR', sans-serif; font-size:14px; /*font-weight:bold;*/ color:#4a4a4a; border:1px solid #343434; border-radius:5px; }
.board_wrap ul { overflow:hidden; padding:0 74px; }
.board_wrap ul li { float:left; width:22.7%; margin-left:3%; height:299px; background:#fff; border:1px solid #ededed; margin-bottom:2px; box-shadow:0 2px 0 #e0e0e0; border-radius:10px; box-sizing:border-box; }
.board_wrap ul li:first-child { margin-left:0; }
.board_wrap ul li .subject { padding:20px; background:#2e72c6; font-family:'Noto Sans KR', sans-serif; font-size:18px; /*font-weight:bold;*/ color:#fff; text-align:center; border-radius:10px 10px 0 0; }
.board_wrap ul li .subject.long { padding:12px 20px; line-height:22px; }
.board_wrap ul li .text { padding:20px 27px; height:142px; font-family:'Noto Sans KR', sans-serif; font-size:14px; color:#5a5a5a; line-height:21px; overflow-y:hidden; }
.board_wrap ul li .btns { margin:0 27px; border-top:1px solid #ececec; text-align:center; }
.board_wrap ul li .btns a { display:block; padding:12px 0; font-family:'Noto Sans KR', sans-serif; font-size:14px; /*font-weight:bold;*/ color:#2e72c6; }
.board_wrap ul li .btns a span { padding-right:16px; background:url('/monitor/images/main/arrow_blue.png') no-repeat center right; }
.board_wrap .control { width:1200px; position:relative; }
.board_wrap .control>div { position:absolute; top:130px; }
.board_wrap .control>div.left { left:0; }
.board_wrap .control>div.right { right:0; }

.assignment { overflow:hidden; }
.assignment>div>div { float:left; padding:54px 0; width:50%; box-sizing:border-box; border-right:1px solid #ddd; }
.assignment>div>div:last-child { border-right:0; }
.assignment>div>div:last-child>p { padding-left:54px; }
.assignment>div>div>p { float:left; font-size:14px; color:#787b7d; }
.assignment>div>div>p>strong { display:block; margin-bottom:20px; font-family:'Noto Sans KR', sans-serif; font-size:24px; color:#2c2c2c; }
.assignment>div>div>ul { float:right; }
.assignment>div>div>ul>li { float:left; text-align:center; margin-right:50px; padding-bottom:3px; }
.assignment>div>div>ul>li.ico01 { background:url('/monitor/images/main/bottom_ico01.png') no-repeat center top; }
.assignment>div>div>ul>li.ico02 { background:url('/monitor/images/main/bottom_ico02.png') no-repeat center top; }
.assignment>div>div>ul>li.ico03 { background:url('/monitor/images/main/bottom_ico03.png') no-repeat center top; }
.assignment>div>div>ul>li.ico04 { background:url('/monitor/images/main/bottom_ico04.png') no-repeat center top; }
.assignment>div>div>ul>li>a { display:block; padding-top:80px; color:#2b2b2b; text-decoration:none; }
/* Underline From Center */
.assignment>div>div>ul>li.hvr-underline-from-center { display:inline-block; vertical-align:middle; -webkit-transform:translateZ(0); transform:translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-osx-font-smoothing:grayscale; position:relative; overflow:hidden; }
.assignment>div>div>ul>li.hvr-underline-from-center:before { content:""; position:absolute; z-index:-1; left:50%; right:50%; bottom:0; background:#333; height:1px; -webkit-transition-property:left, right; transition-property:left, right; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out; }
.assignment>div>div>ul>li.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { left:0; right:0; }

@media screen and (max-width:1200px){
	.visual_wrap { position:relative; width:100%; height:100%; background-size:auto 100%; }
	.visual_wrap .visual { height:490px; }
	.visual_wrap .visual .slogun { padding-top:215px; }

	.main_banner { position:relative; margin-top:0; overflow:hidden; }
	.main_banner>div { width:47%; height:223px; margin:1%; }
	.main_banner>div:first-child { margin:1%; }

	.board_wrap ul { padding:0 6%; }
	.board_wrap ul li { width:48%; margin:1%; height:299px; }
	.board_wrap ul li:first-child { margin-left:1%; }
	.board_wrap ul li .subject { padding:20px 0; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:100%; }
	.board_wrap ul li .subject.long { padding:20px 0; line-height:28px; }
	.board_wrap ul li .text { padding:20px 27px; height:142px; font-family:'Noto Sans KR', sans-serif; font-size:14px; color:#5a5a5a; line-height:21px; overflow-y:hidden; }
	.board_wrap .control { width:100%; top:120px;}
	.board_wrap .control>div { top:175px; }
	.board_wrap .control>div.left { left:10px; }
	.board_wrap .control>div.right { right:10px; }

	.assignment>div>div { padding-left:54px; width:100%; border-right:0; border-bottom:1px solid #ddd; }
	.assignment>div>div:last-child { border-bottom:0; }
	.assignment>div>div:last-child>p { padding-left:0; }
}

@media screen and (max-width:801px){
	.visual_wrap .visual { height:380px; }
	.visual_wrap .visual .slogun { padding-top:165px; }

	.main_banner { padding:20px; }
	.main_banner>div { width:21.9%; height:auto; margin:1%; }
	.main_banner>div>p { padding-top:90px; font-size:18px; }
	.main_banner>div.ico01>p { background-size:30% auto; }
	.main_banner>div.ico02>p { background-size:30% auto; }
	.main_banner>div.ico03>p { background-size:30% auto; }
	.main_banner>div.ico04>p { background-size:30% auto; }
	.main_banner>div>.btns a { margin-bottom:20px; padding:6px 20px; }
	.main_banner>div:hover.ico01>p { background-size:30% auto; }
	.main_banner>div:hover.ico02>p { background-size:30% auto; }
	.main_banner>div:hover.ico03>p { background-size:30% auto; }
	.main_banner>div:hover.ico04>p { background-size:30% auto; }
}

@media screen and (max-width:770px){
	.main_banner>div { width:46.5%; }
	.main_banner>div.ico01>p { background-size:20% auto; }
	.main_banner>div.ico02>p { background-size:20% auto; }
	.main_banner>div.ico03>p { background-size:20% auto; }
	.main_banner>div.ico04>p { background-size:20% auto; }
	.main_banner>div:hover.ico01>p { background-size:20% auto; }
	.main_banner>div:hover.ico02>p { background-size:20% auto; }
	.main_banner>div:hover.ico03>p { background-size:20% auto; }
	.main_banner>div:hover.ico04>p { background-size:20% auto; }

	.board_wrap ul li { width:100%; margin:3% 0 0; height:auto; }
	.board_wrap ul li:first-child { margin:0; }
	.board_wrap ul li .text { height:auto; }
	.board_wrap .control { display:none; }

	.assignment>div>div { padding-left:0; }
	.assignment>div>div>p { width:100%; text-align:center; }
	.assignment>div>div>p>strong { display:block; margin-bottom:20px; font-size:24px; color:#2c2c2c; }
	.assignment>div>div>ul { width:100%; margin-top:40px; text-align:center; }
	.assignment>div>div>ul>li { float:none; display:inline-block; }
	.assignment>div>div>ul>li:last-child { margin-right:0; }
}

@media screen and (max-width:574px){
	.visual_wrap .visual .slogun { padding-top:165px; }
	.visual_wrap .visual .slogun img { max-width:80%; }

	.main_banner>div { width:97%; }
	.main_banner>div.ico01>p { background-size:50px auto; }
	.main_banner>div.ico02>p { background-size:50px auto; }
	.main_banner>div.ico03>p { background-size:50px auto; }
	.main_banner>div.ico04>p { background-size:50px auto; }
	.main_banner>div:hover.ico01>p { background-size:50px auto; }
	.main_banner>div:hover.ico02>p { background-size:50px auto; }
	.main_banner>div:hover.ico03>p { background-size:50px auto; }
	.main_banner>div:hover.ico04>p { background-size:50px auto; }
}