@charset "utf-8";

/* main slider */
.slider { max-height:100%; position:relative;}
.slider .main-slider {
	position:relative;
	width:100%;
}

.slider .main-slider .slider-img:before {content:""; position:absolute; top:0; left:0; width:100%; height:600px; background:url(../img/main_slide_pattern.png) repeat; opacity:0.2;}

.slider .main-slider .slider-img {
	background:url('../img/main_slider_1.png') 0px 0px repeat;
	background-size:cover;
	background-attachment:fixed;
	max-width:100%;
	height:600px;
}

.slider .main-slider .slider-txt {
	position:absolute;
	top:30%;
	width:100%;
}
.slider-txt .slider-txt-box {
	width:100%;
	max-width:1580px;
	margin:0 auto;
	color:#fff;
	text-align:left;
}

.slider-txt-box p {position:relative; font-size:3rem; font-weight:600; text-shadow: 0px 0px 4px #000; }
.slider-txt-box h1 {position:relative; font-size:5rem; font-weight:600; text-shadow:0px 0px 4px #000; margin-bottom:10px; }
.slider-txt-box a {margin-top:20px; position:relative; color:#fff; font-weight:400; display:inline-block; height:50px; line-height:50px; padding:0 20px; border:1px solid #fff; border-bottom:0;}
.slider-txt-box a span {position:absolute; left:50px; bottom:0; background:url('../img/img_arrow2_w.png') no-repeat; width:40px; height:5px; vertical-align:middle; margin-top:-5px; transition:all .5s;}
.slider-txt-box a:after {content:""; position:absolute; left:0; bottom:0; width:50px; height:1px; background-color:#fff; transition:all .5s; }
.slider-txt-box a:hover:after {width:90px;}
.slider-txt-box a:hover span {left:90px;}

/* mouse mover */
.mouse-mover {display:block;position:absolute;width:24px;height:690px;left:50%;bottom:30px;margin:0 0 0 -12px;z-index:100;}
.mouse-mover div {position:absolute; animation:mouse_action 1s infinite; animation-timing-function:linear;display:block;width:100%;height:69px;left:0;bottom:0;background:url('../img/mouse_scroll.png') no-repeat center center;}
@keyframes mouse_action{
	0%{bottom:0;animation-timing-function:ease;}
	50%{bottom:10px}
	100%{bottom:0;animation-timing-function:ease;}
}

/* main wrap */
.main-content-wrap {position:relative; width:100%; height:auto; z-index:102; overflow:hidden;}
.main-content-title {position:relative; margin-bottom:30px;}
.main-content-title h2 {font-size:2.4rem;}

/* main -> top */
.main-top-container {position:relative; width:100%; background-color:#fff;}
.main-top-wrap {position:relative; padding:80px 0;}
.main-top-wrap ul li{position:relative; float:left; width:33.3333%;}
.main-top-wrap .item {text-align:center;}
.main-top-wrap .item .icon {display:block; text-align:center; padding:0 0 10px 0;}
.main-top-wrap .item .txt {display:block; position:relative; width:100%;}
.main-top-wrap .item .txt p.en {font-weight:600; color:#222;}
.main-top-wrap .item .txt p.en b {font-weight:600; color:#428bca;}

/* main -> board */
.main-board-container {position:relative; width:100%; background-color:#f5f5f5;}
.main-notice-bg {position:absolute; top:0; right:0; width:50%; background-color:#01589d;}
.main-board-wrap {position:relative; box-sizing:border-box;}
.main-board-wrap .main-board-left {position:relative; float:left; width:44%; padding:58px 0 52px 0;}

.main-board-left .main-content-title {margin-bottom:50px;}
.tab-head-list li {display:inline-block; position:relative; padding-right:40px; font-weight: 400;}
.tab-head-list li:nth-child(2n):before {content:""; position:absolute; left:-21px; top:6.5px; width:1px; height:18px; background-color:#d1d1d1;}
.tab-head-list li a {color:#909090; font-size:2.4rem;}
.tab-head-list li a.active, .tab-head-list ul li a.fix {color:#000;}

.main-board-wrap .board-challenges-wrap {position:relative; width:100%; background-color:#fff; padding:16px 30px;}
.main-board-wrap .board-challenges-wrap.not-board ul {border-top:0px;}
.main-board-wrap .board-challenges-wrap.not-board:after {content:"게시글이 존재하지 않습니다."; font-family: 'Noto Sans KR'; position:absolute; top:50%; left:0; margin-top:-15px; width:100%; height:30px; line-height:30px; text-align:center;}
.board-challenges-wrap ul {display:block;}
.board-challenges-wrap .first-wrap {display:table; position:relative; width:100%; height:180px;padding:0 0 14px 0;}
.board-challenges-wrap .first-wrap .first-cont {display:table-cell; vertical-align:middle;}
.board-challenges-wrap .first-cont .date-area {padding-top:24px; line-height:20px; text-align:left; }

.board-challenges-wrap .first-cont a {color:#434343; text-decoration:none; width:100%; vertical-align: top;}
.board-challenges-wrap .first-cont a p.title { position:relative; max-width:100%; color:#000; font-weight:400;  white-space:pre-wrap; margin-top:5px; margin-bottom:12px;}
.board-challenges-wrap .first-cont p.txt {overflow:hidden; height:40px; line-height:20px; word-break:break-all; color:#696969; letter-spacing:0rem;}
.board-challenges-wrap .first-cont a:hover p.title {text-decoration:underline;}

.board-challenges-wrap ul {padding-top:24px; border-top:1px solid #e9e9e9;}
.board-challenges-wrap ul li {display:inline; float:left; width:100%; margin:0 0 12px; padding:0;}
.board-challenges-wrap ul li:last-child{margin:0;}
.board-challenges-wrap ul li a {display:block; float:left; width:80%; padding:0; color:#333; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.board-challenges-wrap ul li a:hover {text-decoration:underline;}
.board-challenges-wrap ul li span.writer {display:inline-block; overflow:hidden; width:100px; text-align:center; white-space:nowrap; text-overflow:ellipsis;}
.board-challenges-wrap ul li span.date {float:right; color:#565656; }

.main-board-wrap .main-board-right {position:relative; float:right; margin-left:4%; width:52%;}
.board-notice-wrap {position:relative; width:100%; background-color:#01589d; padding:48px 30px;}
.board-notice-wrap .main-content-title h2 {font-weight:400; display:inline-block; margin-left:5px; color:#fff;}
.board-notice-wrap .main-content-title a.btn-link {background:url(../img/icon_more_w.png) no-repeat; background-size:16px 16px;}
.board-notice-wrap .board-challenges-wrap {background-color:#01589d; padding:0;}
.board-notice-wrap .board-challenges-wrap  ul li a {color:#fff;}
.board-notice-wrap .board-challenges-wrap ul li span.date {color:#d1d1d1;}

.quick-menu-wrap {width:100%; padding:58px 10px 58px 30px;}
.quick-menu-wrap .main-content-title h2 {font-size:2.8rem; font-family: 'Titillium Web', sans-serif; font-weight:600; font-style:italic;}

.quick-menu-list {width:100%;}
.quick-menu-list li {display:inline-block; float:left; width:16.66666666666667%; text-align:center;}
.quick-menu-list li a {display:block;}
.quick-menu-list li span.quick-icon {position:relative; width:100px; height:100px; display:block; background-color:#fff; border-radius:50% 50%; margin:0 auto;}
.quick-menu-list li span.quick-icon span {position:absolute; display:block; top:32px; left:28px; width:44px; height:36px;}
.quick-menu-list li:nth-child(1) span.quick-icon span {background:url(../img/icon_quick_01.png) 0 0 no-repeat;}
.quick-menu-list li:nth-child(2) span.quick-icon span {background:url(../img/icon_quick_02.png) 0 0 no-repeat; left:32px;}
.quick-menu-list li:nth-child(3) span.quick-icon span {background:url(../img/icon_quick_03.png) 0 0 no-repeat;}
.quick-menu-list li:nth-child(4) span.quick-icon span {background:url(../img/icon_quick_04.png) 0 0 no-repeat;}
.quick-menu-list li:nth-child(5) span.quick-icon span {background:url(../img/icon_quick_05.png) 0 0 no-repeat;}
.quick-menu-list li:nth-child(6) span.quick-icon span {background:url(../img/icon_quick_06.png) 0 0 no-repeat;}
.quick-menu-list li span.quick-name {display:block; margin-top:20px; color:#333;}
.quick-menu-list li a:hover span.quick-icon{background-color:#0178bf;}
.quick-menu-list li:nth-child(1) a:hover span.quick-icon span {background:url(../img/icon_quick_01_hov.png) 0 0 no-repeat;}
.quick-menu-list li:nth-child(2) a:hover span.quick-icon span {background:url(../img/icon_quick_02_hov.png) 0 0 no-repeat; left:32px;}
.quick-menu-list li:nth-child(3) a:hover span.quick-icon span {background:url(../img/icon_quick_03_hov.png) 0 0 no-repeat;}
.quick-menu-list li:nth-child(4) a:hover span.quick-icon span {background:url(../img/icon_quick_04_hov.png) 0 0 no-repeat;}
.quick-menu-list li:nth-child(5) a:hover span.quick-icon span {background:url(../img/icon_quick_05_hov.png) 0 0 no-repeat;}
.quick-menu-list li:nth-child(6) a:hover span.quick-icon span {background:url(../img/icon_quick_06_hov.png) 0 0 no-repeat;}


/* response */
@media screen and (max-width:1580px) {
	.quick-menu-list li:nth-child(2) span.quick-icon span {left:22px;}
	.quick-menu-list li:nth-child(2) a:hover span.quick-icon span {left:22px;}

    /* slider */
    .slider-txt .slider-txt-box {padding:0 40px;}

    /* board - quick menu */
    .quick-menu-list li span.quick-icon {width:80px; height:80px;}
    .quick-menu-list li span.quick-icon span {top:23.5px; left:20px; width:40px; height:33px;}
    .quick-menu-list li:nth-child(1) span.quick-icon span, .quick-menu-list li:nth-child(2) span.quick-icon span, .quick-menu-list li:nth-child(3) span.quick-icon span, .quick-menu-list li:nth-child(4) span.quick-icon span, .quick-menu-list li:nth-child(5) span.quick-icon span, .quick-menu-list li:nth-child(6) span.quick-icon span,
    .quick-menu-list li:nth-child(1) a:hover span.quick-icon span, .quick-menu-list li:nth-child(2) a:hover span.quick-icon span, .quick-menu-list li:nth-child(3) a:hover span.quick-icon span, .quick-menu-list li:nth-child(4) a:hover span.quick-icon span, .quick-menu-list li:nth-child(5) a:hover span.quick-icon span, .quick-menu-list li:nth-child(6) a:hover span.quick-icon span {background-size:40px 33px;}
    /*.quick-menu-list li:nth-child(6) span.quick-icon span, .quick-menu-list li:nth-child(6) a:hover span.quick-icon span {left:24px;} */
}

@media screen and (min-width:1100px) {
    .main-board-left .board-challenges-wrap {height:auto; min-height:364px;}
    .board-notice-wrap .board-challenges-wrap{min-height:164px;}
}

@media screen and (max-width:1100px) {
    /* slider */
    .slider-txt-box h1 {font-size:4.6rem;}
    .slider-txt-box p {font-size:2.6rem;}
	.slider-txt-box a { height:40px; line-height:40px;}
	.slider-txt-box a:hover:after {width:80px;}
	.slider-txt-box a:hover span {left:80px;}

    /* board */
    .main-board-wrap .main-board-left {width:100%;}
    .main-board-wrap .main-board-right {margin-left:0; width:100%;}
    .main-board-left .main-content-title {margin-bottom:24px;}
    .main-notice-bg {display:none;}
    .board-notice-wrap:before {content:""; position:absolute; top:0; left:-15px; width:16px; height:100%; background-color:#01589d;}
    .board-notice-wrap:after {content:""; position:absolute; top:0; right:-15px; width:16px; height:100%; background-color:#01589d;}
    .board-notice-wrap .main-content-title h2 {margin-left:0;}

    .main-board-wrap .main-board-left, .board-notice-wrap, .quick-menu-wrap  {padding:52px 0 60px;}
    .btn-more {top:4px;}

    .main-gallery-wrap .main-content-title h2, .quick-menu-wrap .main-content-title h2 {font-size:2.8rem;}
    .tab-head-list li a, .main-content-title h2 {font-size:2.3rem;}
}

@media screen and (max-width:900px) {
	/* top */
	.main-top-wrap ul li{width:50%; margin-bottom:80px;}
	.main-top-wrap ul li:last-child {margin-bottom:0;}
	.main-top-wrap .item .icon img{width:60px; height:60px;}
	.main-top-wrap .item .txt p:not(.en) {font-size:1.4rem;}
}

@media screen and (max-width:600px) {
    /*slider */
	.slider-txt .slider-txt-box {padding:0 20px;}
	.slider .main-slider .slider-img {height:460px;}
	.slider .main-slider .slider-img:before {height:460px;}
	.slider .main-slider .slider-img {background-position:-1400px 0;}
	.slider-txt-box h1 {font-size:3.2rem;}
    .slider-txt-box p {font-size:2.2rem;}
	
	/* top */
	.main-top-wrap {position:relative; padding:40px 0;}
	.main-top-wrap ul li{width:100%; margin-bottom:40px;}
	.main-top-wrap ul li:last-child {margin-bottom:20px;}
	.main-top-wrap .item .icon {position:absolute; top:16px; left:16px; padding:0;}
	.main-top-wrap .item .icon img {width:50px; height:50px;}
	.main-top-wrap .item .txt {padding:0 0 0 90px; text-align:left;}

    /* board - ntis */
    .main-board-wrap .board-challenges-wrap {padding:12px 16px;}

    /* board - quick menu */
	.quick-menu-list li:nth-child(2) span.quick-icon span {left:30px;}
	.quick-menu-list li:nth-child(2) a:hover span.quick-icon span {left:30px;}

    .quick-menu-list li {width:33.3333333333333%; margin-bottom:60px;}
    .quick-menu-list li:nth-child(4),.quick-menu-list li:nth-child(5), .quick-menu-list li:nth-child(6) {margin-bottom:0;}
    .quick-menu-list li span.quick-icon {width:100px; height:100px;}

    .quick-menu-list li span.quick-icon span {top:32px; left:28px; width:44px; height:36px;}
    .quick-menu-list li:nth-child(1) span.quick-icon span, .quick-menu-list li:nth-child(2) span.quick-icon span, .quick-menu-list li:nth-child(3) span.quick-icon span, .quick-menu-list li:nth-child(4) span.quick-icon span, .quick-menu-list li:nth-child(5) span.quick-icon span, .quick-menu-list li:nth-child(6) span.quick-icon span,
    .quick-menu-list li:nth-child(1) a:hover span.quick-icon span, .quick-menu-list li:nth-child(2) a:hover span.quick-icon span, .quick-menu-list li:nth-child(3) a:hover span.quick-icon span, .quick-menu-list li:nth-child(4) a:hover span.quick-icon span, .quick-menu-list li:nth-child(5) a:hover span.quick-icon span, .quick-menu-list li:nth-child(6) a:hover span.quick-icon span {background-size:44px 36px;}

    .main-gallery-wrap .main-content-title h2, .quick-menu-wrap .main-content-title h2 {font-size:2.6rem;}
    .tab-head-list li a, .main-content-title h2 {font-size:2.2rem;}
}

@media screen and (max-width:450px) {
    /* slider */
	.slider .main-slider .slider-txt {top:26%;}
    .slider-txt-box h1 {font-size:2.4rem;}
    .slider-txt-box p {font-size:2rem;}
	.slider-txt-box a { height:34px; line-height:34px; padding:0 16px;}
	.slider-txt-box a:hover:after {width:76px;}
	.slider-txt-box a:hover span {left:76px;}
	.slider .main-slider .slider-img {background-position:-1560px 0;}
	

    /* board - notice / ntis */
    .board-challenges-wrap ul li a, .board-challenges-wrap ul li a {width:70%;}

    /* board - quick menu */
	.quick-menu-list li:nth-child(2) span.quick-icon span {left:22px;}
	.quick-menu-list li:nth-child(2) a:hover span.quick-icon span {left:22px;}

    .quick-menu-list li {margin-bottom:40px;}
    .quick-menu-list li span.quick-icon {width:80px; height:80px;}
    .quick-menu-list li span.quick-icon span {top:23.5px; left:20px; width:40px; height:33px;}
    .quick-menu-list li:nth-child(1) span.quick-icon span, .quick-menu-list li:nth-child(2) span.quick-icon span, .quick-menu-list li:nth-child(3) span.quick-icon span, .quick-menu-list li:nth-child(4) span.quick-icon span, .quick-menu-list li:nth-child(5) span.quick-icon span, .quick-menu-list li:nth-child(6) span.quick-icon span,
    .quick-menu-list li:nth-child(1) a:hover span.quick-icon span, .quick-menu-list li:nth-child(2) a:hover span.quick-icon span, .quick-menu-list li:nth-child(3) a:hover span.quick-icon span, .quick-menu-list li:nth-child(4) a:hover span.quick-icon span, .quick-menu-list li:nth-child(5) a:hover span.quick-icon span, .quick-menu-list li:nth-child(6) a:hover span.quick-icon span {background-size:40px 33px;}
}