@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#m_conts .inner.pos-rel {position:relative;}
#m_conts .inner:after {content:""; display:block; clear:both;}


@media all and (max-width:1440px) {
	.visualWrap,
	.boardWrap .inner {padding-left:2rem !important; padding-right:2rem !important;}
}
@media all and (max-width:480px) {
	.visualWrap,
	.boardWrap .inner {padding-left:1rem !important; padding-right:1rem !important;}
}



/***********************************************
	Visual Area
***********************************************/

.visualWrap {display:block; position:relative; padding-top:7.5rem; background:url('../img/main/bak_visual.jpg') no-repeat 50% 0%; background-size:cover; z-index:0;}
.visualWrap:before {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:8.4rem; background:#fff; z-index:-1;}
.visualWrap .inner {position:relative; max-width:120rem; z-index:0;}
.visualWrap .tit {text-align:center;}
.visualWrap .tit img {max-width:95%;}
.visualWrap .tit span {display:block; padding-top:2rem; color:#fff; font-size:1.7rem; word-break:keep-all;}

.mainSearch {display:block; position:relative; padding:4.5rem 0 4rem;}
.mainSearch dl {display:block; position:relative; max-width:68rem; margin:0 auto; background:#fff; border-radius:9em; height:7rem; padding:.5rem .7rem .5rem 21rem;
	-webkit-box-shadow: 0px 5px 3rem 0px rgba(37,54,93,0.25);
	-moz-box-shadow: 0px 5px 3rem 0px rgba(37,54,93,0.25);
	box-shadow: 0px 5px 3rem 0px rgba(37,54,93,0.25);
}
.mainSearch dt {display:block; position:absolute; top:0; left:6rem; bottom:0; line-height:7rem; width:13.5rem; font-size:1.8rem; color:#333333; font-weight:600; background:url('../img/main/bak_search_title.png') no-repeat 100% 50%;}
.mainSearch dd {position:relative; width:100%; margin:0; padding-right:6.6rem;}
.mainSearch dd input[type="text"] {display:block; position:relative; width:100%; height:6rem; border:none;}
.mainSearch dd input[type="submit"] {display:block; position:absolute; width:6rem; height:6rem; top:0; right:0; background:url('../img/main/ico_search.png') no-repeat 50% 50% #0e4898; background-size:2.3rem auto; border-radius:9em; overflow:hidden; text-indent:-999px;}

@media all and (max-width:1024px) {
	.visualWrap {padding-top:4rem;}
}
@media all and (max-width:640px) {
	.mainSearch dl {padding-left:14rem; height:6rem;}
	.mainSearch dt {left:2rem; line-height:6rem; font-size:1.6rem; width:10rem;}
	.mainSearch dd input[type="text"] {height:5rem;}
	.mainSearch dd input[type="submit"] {width:5rem; height:5rem;}
}


/***********************************************
	Category Search Area
***********************************************/

.mainSearchCategory {position:relative; max-width:120rem; margin:0 auto; box-sizing:border-box; padding:0 3.5rem 0 6.5rem;}
.mainSearchCategory:before {content:""; display:block; position:absolute; top:0; left:6.5rem; right:3.5rem; bottom:0; border-radius:1.5rem; z-index:-1;
	background: rgb(0,81,172);
	background: -moz-linear-gradient(90deg, rgba(0,81,172,1) 0%, rgba(13,202,230,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,81,172,1) 0%, rgba(13,202,230,1) 100%);
	background: linear-gradient(90deg, rgba(0,81,172,1) 0%, rgba(13,202,230,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0051ac",endColorstr="#0dcae6",GradientType=1);

	-webkit-box-shadow: 0px 0px 6rem 0px rgba(27,56,85,.32);
	-moz-box-shadow: 0px 0px 6rem 0px rgba(27,56,85,.32);
	box-shadow: 0px 0px 6rem 0px rgba(27,56,85,.32);
}
.mainSearchCategory:after,
.mainSearchCategory .flip-group:after {content:""; display:block; clear:both;}

.mainSearchCategory .search-text{color:#fff;text-align: center;padding: 2.5rem 2rem 0;opacity: 0.9;font-size: 1.6rem;line-height: 1.4;font-weight: 300;}

.mainSearchCategory .flip-group {display:block; position:relative; width:78.6%; float:left; z-index:0; padding:4rem 0 4rem 0;}
.mainSearchCategory .flip-group > * {height:23.5rem; box-sizing:border-box;}
.mainSearchCategory .f-depth1 {width:20%; float:left;}

.mainSearchCategory .f-depth2 {float:left; width:78%; transition:.3s all; -webkit-transition:.3s all;}
.mainSearchCategory .f-depth3 {float:right; width:0%; transition:.3s all; -webkit-transition:.3s all;}

.mainSearchCategory.open-depth3 .f-depth2,
.mainSearchCategory.open-depth3 .f-depth3 {width:39%;}

.mainSearchCategory .scrollbar-rail {height:100%;}
.mainSearchCategory .scrollbar-rail > .scroll-element.scroll-y .scroll-element_size {background:rgba(255,255,255,.4) !important; border-radius:9em;}
.mainSearchCategory .scrollbar-rail > .scroll-element.scroll-y .scroll-bar {background:#072246;}

.mainSearchCategory .flip-group .flip-list {display:none;}
.mainSearchCategory .flip-group .flip-list.on {display:block;}

.mainSearchCategory .control {position:absolute;top: 8rem;bottom:4rem;right:7.5rem;width:14.3rem;box-sizing:border-box;}
.mainSearchCategory .control button {display:block; position:relative; width:100%; height:100%; background:url('../img/main/btn_category_search.png') no-repeat 100% 100% #0747a0; background-size:16.4rem; border-radius:1rem 1rem 0 1rem; box-sizing:border-box; padding-bottom:10rem; color:#fff; font-size:2.2rem; font-family:'yg-jalnan';}

.mainSearchCategory .f-depth1 li {display:block; position:relative; transition:.3s all; -webkit-transition:.3s all; z-index:0;}
.mainSearchCategory .f-depth1 li + li {margin-top:.7rem;}
.mainSearchCategory .f-depth1 li button {display:block; position:relative;height:5rem; padding-left:4rem; width:100%; box-sizing:border-box; text-align:left; color:rgba(255,255,255,.6); font-size:1.7rem; transition:.3s all; -webkit-transition:.3s all;}
.mainSearchCategory .f-depth1 li button:before {content:""; display:block; position:absolute; left:0; top:50%; margin-top:-1.2rem; width:3rem; height:2.4rem; background:url('../img/main/spr_main.png') no-repeat -11.9rem -4.3rem; background-size:32rem auto; opacity:0;}
.mainSearchCategory .f-depth1 li button[data-flip="견학해설관광"]:before {background-position:-16.5rem -4.3rem;}
.mainSearchCategory .f-depth1 li button[data-flip="시설대관"]:before {background-position:-20.8rem -4.3rem;}
.mainSearchCategory .f-depth1 li button[data-flip="지원신청"]:before {background-position:-25.4rem -4.3rem;}

.mainSearchCategory .f-depth1 li:before,
.mainSearchCategory .f-depth1 li:after {content:""; display:block; position:absolute; top:0; bottom:0; opacity:0;}
.mainSearchCategory .f-depth1 li:before {width:0; left:auto; right:0; border:1.4rem solid transparent; border-left-width:0; border-top-width:0; border-bottom-color:#003e9b; z-index:-1;}
.mainSearchCategory .f-depth1 li:after {left:-2.5rem; right:1.4rem; background:#003e9b; border-radius:.5rem .5rem 0 .5rem; z-index:-2;
	-webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
}
.mainSearchCategory .f-depth1 li.tab-active {margin-left:-1.7rem;}
.mainSearchCategory .f-depth1 li.tab-active:before,
.mainSearchCategory .f-depth1 li.tab-active:after {opacity:1;}
.mainSearchCategory .f-depth1 li.tab-active button {padding-left:4.2rem; color:#fff;}
.mainSearchCategory .f-depth1 li.tab-active button:before {opacity:1;}

.mainSearchCategory .flip-list ul {padding:0 2rem;}
.mainSearchCategory .flip-list li {position:relative;}
.mainSearchCategory .flip-list li + li {margin-top:1rem;}
.mainSearchCategory .flip-list li > * {display:block; position:relative; padding:1.3rem 3.5rem 1.3rem 3rem; border-radius:.5rem; line-height:1.3; color:rgba(255,255,255,.7); font-weight:300; font-size:1.5rem; background:rgba(255,255,255,.15); width:100%; box-sizing:border-box;}
.mainSearchCategory .flip-list li.tab-active > * {background:#0c3b7b; color:#fff;}
.mainSearchCategory .flip-list li button {text-align:left;}
.mainSearchCategory .flip-list li a:after {content:""; display:block; position:absolute; top:50%; margin-top:-.55rem; right:2rem; width:1.1rem; height:1.1rem; background:url('../img/main/spr_main.png') no-repeat 0rem -3.2rem; background-size:32rem auto;}

@media all and (max-width:1024px) {
	.mainSearchCategory {max-width:100%; padding:0;}
	.mainSearchCategory:before {left:0; right:0;}
	.mainSearchCategory .flip-group {width:auto; float:none; margin-right:14.3rem; padding:2rem 0 2rem 15rem;}
	.mainSearchCategory .control {right:2rem;top: 6rem;bottom:2rem;width:12.3rem;}
	.mainSearchCategory .f-depth1 {display:block; position:absolute; top:2rem; bottom:2rem; left:0; width:16rem;}
	.mainSearchCategory .f-depth1 li button {font-size:1.5rem;}

	.mainSearchCategory .f-depth2 {width:100%;}
	.mainSearchCategory.open-depth3 .f-depth2,
	.mainSearchCategory.open-depth3 .f-depth3 {width:50%;}
}
@media all and (max-width:810px) {
	.mainSearchCategory .flip-group {margin-right:0;}
	.mainSearchCategory .flip-list li > * {padding-left:2rem;}
	.mainSearchCategory .control {position:relative; width:auto; height:auto; top:auto; left:auto; bottom:auto; right:auto; padding:1.5rem; clear:both;}
	.mainSearchCategory .control button {background:#0747a0; width:100%; height:5rem; padding:0; font-size:1.5rem; border-radius:1.5rem;}
}
@media all and (max-width:640px) {
	.mainSearchCategory .flip-group {padding-left:0;}
	.mainSearchCategory .control {padding:1rem;}
	.mainSearchCategory .f-depth1 {position:Relative; top:auto; left:auto; right:auto; bottom:auto; width:auto; height:auto; float:none; clear:both; padding:0rem 2rem 2rem;}
	.mainSearchCategory .f-depth1:after {content:""; display:block; clear:both;}
	.mainSearchCategory .f-depth1 li {width:25%; float:left;}
	.mainSearchCategory .f-depth1 li + li {margin:0;}
	.mainSearchCategory .f-depth1 li:before {display:none;}
	.mainSearchCategory .f-depth1 li:after {left:0; right:0; border-radius:.5rem;}
	.mainSearchCategory .f-depth1 li.tab-active {margin-left:0;}
	.mainSearchCategory .f-depth1 li button {padding:0 1rem; text-align:center; word-break:keep-all;}
	.mainSearchCategory .f-depth1 li button:before {display:none; left:1rem;}
	.mainSearchCategory .f-depth1 li.tab-active button {padding:0 1rem;}

	.mainSearchCategory .flip-list li > * {padding:1rem 2rem 1rem 1rem;}
	.mainSearchCategory .flip-list li a {padding-right:2.2rem;}
	.mainSearchCategory .flip-list li a:after {right:1rem;}
}
@media all and (max-width:410px) {
	.mainSearchCategory .flip-group {padding:1rem 0;}
	.mainSearchCategory .f-depth1 {padding:0 1rem 2rem;}
	.mainSearchCategory .f-depth1 li {width:50%;}
	.mainSearchCategory .f-depth1 li button {font-size:1.4rem; height:4rem;}
	.mainSearchCategory .flip-list ul {padding:0 1rem;}
	.mainSearchCategory .flip-list li > * {font-size:1.3rem;}
	.mainSearchCategory .control button {font-size:1.4rem; height:4rem;}
}


/* Popup */
.popupWrap {display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.2); z-index:999999;}
.popupWrap .popup {display:block; position:absolute; width:100%; height:100%; max-width:82.8rem; max-height:51.4rem; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); background:#fff; border-radius:1.8rem;}
.popupWrap .popup .pop-close {display:block; position:absolute; right:4em; top:-2em; overflow:hidden; text-indent:-999px; width:3.75em; height:3.75em; background:url('../img/main/ico_pop_close.png') no-repeat 50% 50% #3c4756; background-size:2.2rem auto; border-radius:9em; z-index:101;}
.popupWrap .popup .pop-title {height:14.5rem; text-align:center; padding:5rem 0 2.5rem; font-size:1.8rem;}
.popupWrap .popup .pop-title span {display:block; padding-top:1.4rem;}
.popupWrap .popup .pop-title strong {font-size:1.88em; font-weight:800;}
.popupWrap .popup .pop-title strong em {color:#0747a0;}
.popupWrap .popup .list-area {position:absolute; top:18.5rem; left:3rem; bottom:4rem; right:3rem; padding:1.6rem; border:1px solid #cfd9de; border-radius:.5rem; overflow:hidden;}
.popupWrap .popup .scroll-wrapper {position:static !important;}
.popupWrap .popup .scrollbar-rail {height:100%;}
.popupWrap .popup .scroll-content.scroll-scrolly_visible {margin-right:1rem !important;}
.popupWrap .popup .scrollbar-rail > .scroll-element.scroll-y .scroll-element_size {background:#e2e8eb !important; border-radius:9em;}
.popupWrap .popup .scrollbar-rail > .scroll-element.scroll-y .scroll-bar {background:#072246;}
.popupWrap .popup .tbl-box {display:block; position:relative;}
.popupWrap .popup table {width:100%; table-layout:fixed;}
.popupWrap .popup table th,
.popupWrap .popup table td { vertical-align:middle; height:5rem; text-align:center;}
.popupWrap .popup table thead tr {background:#f1f4f5; border-radius:.5em;}
.popupWrap .popup table thead th {font-size:1.7rem; color:#000000;}
.popupWrap .popup table tbody tr {border-bottom:1px solid #e2e8eb;}

.popupWrap .popup table tbody .button.small {height:3.5rem; line-height:3.3rem;}

.popupWrap .popup .pop-title p {margin-top: 10px;}
.popupWrap .popup .pop-title input[type="text"], input[type="password"] {border: 1px solid #c5c9d6; padding: 0.8rem; margin: 3px 0; border-radius: 3px;}
.popupWrap .popup .pop-title input[type="submit"] {margin-left: 0.7rem; padding: 0.7rem 2.4rem; background: #216cda; color: #fff; border: 2px solid transparent; border-radius: 3px;}

@media all and (max-width:1024px) {
	.popupWrap .popup .pop-close {right:1em;}
	.popupWrap .popup {font-size:14px;}
	.popupWrap .list {top:6.5em; left:1em; right:1em; bottom:1em;}
	.popupWrap .popup .pop-title {padding:2em 0 1em; font-size:1.6rem; height:12rem;}
	.popupWrap .popup .list-area {top:16rem; left:2rem; right:2rem; bottom:2rem;}

	.popupWrap .popup table thead th {font-size:1.6rem;}
}
@media all and (max-width:640px) {
	.popupWrap .popup table,
	.popupWrap .popup table tbody,
	.popupWrap .popup table tr,
	.popupWrap .popup table td,
	.popupWrap .popup table th {display:block; padding:0; text-align:left; height:auto; word-break:keep-all;}
	.popupWrap .popup table thead,
	.popupWrap .popup table colgroup {display:none;}

	.popupWrap .popup table tr {padding:1.5rem 0;}
	.popupWrap .popup table td {display:inline-block; line-height:1.5;}
	.popupWrap .popup table td + td {margin-left:1.5rem;}
	.popupWrap .popup table td.subj {display:block; font-size:1.2em; font-weight:800; padding-bottom:.5rem;}
	.popupWrap .popup table td.subj + td {margin-left:0;}
	.popupWrap .popup table td.date {color:#666;}
	.popupWrap .popup table td.date:before {content:""; display:inline-block; vertical-align:middle; width:1.9rem; height:1.6rem; background:url('../img/main/spr_main.png') no-repeat -13.4rem 0rem; background-size:32rem auto; margin-right:1rem;}
	.popupWrap .popup table tbody .button.small {height:3rem; line-height:2.8rem; font-size:1.4rem !important;}
}
@media all and (max-width:420px) {
	.popupWrap .popup .pop-title {font-size:1.4rem; height:11rem;}
	.popupWrap .popup .list-area {top:14.5rem;}
}
@media all and (max-width:380px) {
	.popupWrap .popup table td.view {display:block; margin:.5rem 0 0;}
	.popupWrap .popup table td.view .button {display:block;}
}


/***********************************************
	Board Layout
***********************************************/

.boardWrap {position:relative; padding-top:6rem; padding-bottom:8rem; overflow:hidden;}

.mainBoard {margin-right:62rem; min-height: 32rem;}
.mainBoard .tit {position:relative; z-index:0; height:6rem; padding-top:1.2rem; padding-left:2rem; font-size:2rem; color:#333; font-weight:600;}
.mainBoard .board-list {position:relative; z-index:1;}
.mainBoard .control {display:block; position:absolute; top:-5rem; right:.3rem; height:3rem;}
.mainBoard .control .pager {display:inline-block; vertical-align:middle; position:relative; margin:0 0 0 3rem; line-height:3rem; bottom:auto; width:auto; font-family:'Raleway'; color:#454545; font-size:1.8rem; font-weight:400; letter-spacing:.1em;}
.mainBoard .control .pager em {font-size:2.4rem; color:#0d4faa; font-weight:700;}
.mainBoard .control button,
.mainBoard .control a {display:inline-block; vertical-align:middle; width:3rem; height:3rem; overflow:hidden; text-indent:-999px; background:url('../img/main/spr_main.png') no-repeat -18rem 1rem; background-size:32rem auto;}
.mainBoard .control button {opacity:.3;}
.mainBoard .control button:hover {opacity:1;}
.mainBoard .control button.prev {position:absolute; top:0; left:0;}
.mainBoard .control button.next {background-position:-21.3rem 1rem;}
.mainBoard .control a.more {background-position:-24.3rem 1rem;}

.board-item {display:block; position:relative; padding:4rem 3rem; height:26rem; box-sizing:border-box; z-index:0; margin-bottom:3rem;}
.board-item:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:#fff; border-radius:.8rem; background:#fff; border:1px solid #dfe0e8; z-index:-1; transition:.3s all; -webkit-transition:.3s all;}
.board-item:hover:before {border-width:2px;
	-webkit-box-shadow: 10px 10px 30px 0px rgba(74,85,106,0.15);
	-moz-box-shadow: 10px 10px 30px 0px rgba(74,85,106,0.15);
	box-shadow: 10px 10px 30px 0px rgba(74,85,106,0.15);
}
.board-item .subj {display:block; font-size:1.6rem; line-height:1.4; height:2.9em; overflow:hidden; color:#333; font-weight:600; margin-bottom:1.5rem;}
.board-item .subj .new {display:inline-block; vertical-align:middle; width:2.1rem; height:2.1rem; background:url('../img/main/spr_main.png') no-repeat -4.7rem -6.1rem; background-size:32rem auto; overflow:hidden; text-indent:-999px;}
.board-item .txt {display:block; position:relative; line-height:1.5; font-size:1.4rem; color:#888; font-weight:300; height:4.6em; overflow:hidden; margin-bottom:4rem;}
.board-item .date {display:block; position:relative; line-height:2rem; font-size:1.4rem; color:#888; font-weight:300;}
.board-item .date:before {content:""; display:inline-block; position:relative; width:1.9rem; height:1.5rem; vertical-align:middle; margin-right:.8rem;background:url('../img/main/spr_main.png') no-repeat -13.4rem -.1rem; background-size:32rem auto;}


.mainPopup {position:absolute; top:0; right:0; width:57rem;}
.mainPopup .tit {display:block; position:relative; float:left; font-size:2rem; color:#363c5a; font-weight:600; padding:0 0 2rem; line-height:3rem;}
.mainPopup .control {display:block; position:absolute; right:5rem; bottom:3rem; z-index:99; height:4rem; background:#fff; border-radius:9em 0 0 9em; padding:.2rem 2.5rem .4rem .5rem; box-sizing:border-box;}
.mainPopup .control .pager {display:inline-block; vertical-align:middle; position:relative; margin:0 0 0 4rem; line-height:3rem; bottom:auto; width:auto; font-family:'Raleway'; color:#454545; font-size:1.8rem; font-weight:400; letter-spacing:.1em;}
.mainPopup .control .pager em {font-size:2.4rem; color:#0d4faa; font-weight:700;}
.mainPopup .control button,
.mainPopup .control a {display:inline-block; vertical-align:middle; width:3rem; height:3rem; overflow:hidden; text-indent:-999px; background:url('../img/main/spr_main.png') no-repeat -18rem 1rem; background-size:32rem auto;}
.mainPopup .control button {opacity:.3;}
.mainPopup .control button:hover {opacity:1;}
.mainPopup .control button.prev {position:absolute; top:.4rem; left:.5rem;}
.mainPopup .control button.next {margin-top:.2rem; background-position:-21.3rem 1rem;}

.mainPopup .control button.stop,
.mainPopup .control button.play {display:block; position:absolute; top:-.1rem; right:-2rem; width:4.2rem; height:4.2rem; border-radius:9em; background-position:0rem 1rem; background-color:#0d4faa; opacity:1;}

.mainPopup .control button.stop {background-position:1.7rem 1.4rem;}
.mainPopup .control button.play {display:none; background-position:-1.9rem 1.4rem;}
.mainPopup .slider {position:relative; height:32rem; clear:both;}
.mainPopup .slider:after {content:""; display:block; position:absolute; top:3rem; left:3rem; border-radius:2rem; width:100%; height:100%; box-sizing:border-box; border:1rem solid #edeff4;}
.mainPopup .slider .swiper-container {height:100%; border-radius:2rem; overflow:hidden;}
.mainPopup .slider .swiper-slide {background:url(/common/img/board/sample_noimage.jpg) no-repeat 50% 50% #edf1fa;}
.mainPopup .slider .swiper-slide img[src*="no_image"] {opacity:0;}

@media all and (max-width:1440px) {
	.mainPopup {right:2rem;}
}
@media all and (max-width:1024px) {
	.boardWrap {padding-top:2rem;}
	.mainBoard {margin:0 -2rem; padding:1rem 2rem 3rem;}
	.mainPopup {position:relative; top:auto; right:auto; margin:0 auto 8rem; padding-top:3rem;}

	.mainBoard .board-list {text-align:center;}
	.mainBoard .slider {text-align:left;}
	.mainBoard .control {display:inline-block; position:relative; top:auto; right:auto; }

	.mainPopup .control {bottom:-5rem; left:50%; right:auto; transform:translate(-50%, 100%); -webkit-transform:translate(-50%, 100%); margin-top:2rem;}
}

@media all and (max-width:640px) {
	.mainPopup {max-width:100%;}
	.mainPopup .slider {height:auto;}

}