@charset "utf-8";
/*-------------------------------------------------
Basic Style Sheet
Version : 1.0
Author : LODEV. Lee hyun ju
Create date : 2021. 01. 19.
-------------------------------------------------*/

@import url(common.css);

/*container*/
#container {width:100%; border-bottom:1px solid #ccc;}
#container .sub_visual {width:100; height:400px;}
.top_bg1{background:url('../z00_images/sub_1_1.jpg') 0 80px no-repeat; background-size:cover}
.top_bg2{background:url('../z00_images/sub_2.jpg') no-repeat; background-size:cover}
.top_bg3{background:url('../z00_images/sub_3.jpg') no-repeat; background-size:cover}
.top_bg4{background:url('../z00_images/sub_4.jpg') no-repeat; background-size:cover}
.contents {width:1320px; margin:-100px auto 80px;  position:relative; overflow:Hidden; }
.contents h2 {text-align:right; margin-right:50px; color:#fff; font-size:2.2em; font-weight:400; margin-bottom:10px;}
.contents .home {position:absolute; right:0; top:10px;}
.contents .tab_list {background:#3bbcce; padding:0 0 0 10px; width:100%; overflow:hidden; margin-bottom:60px;}
.contents .tab_list li {display:inline-block;  width: 15%; position:relative; text-align:center;     vertical-align: middle;}
.contents .tab_list li:after {content: ''; position: absolute; bottom: 0; left: 0%; width: 0; height: 5px; background: #fff; transition: all 0.2s;}
.contents .tab_list li a {color:#fff; margin:0 5%; padding:30px 0; display: block; font-size:1.1em; font-weight:600}
.contents .tab_list li:hover:after {content: ''; position: absolute; bottom: 0; left: 0%; width: 100%; height: 5px; background: #fff; transition: all 0.2s}  
.contents .tab_list li.on:after {content: ''; position: absolute; bottom: 0; left: 0%; width: 100%; height: 5px; background: #fff; transition: all 0.2s}
.contents .tab_list li.big {width:16%; letter-spacing:-0.02em}
.contents .tab_list li.big2 {width:19%; letter-spacing:-0.05em}
.contents .tab_list li.big a, .contents .tab_list li.big2 a {padding:18px 0 17px 0 }
.contents h3 {float:left; width:20%;  margin-right:5%; font-size:1.7em; padding-bottom:20px}
.contents h3 span {padding-bottom:10px;}
.contents h4 {font-size:1.4em; color:#119aad; padding:10px 0 15px 0;}
.contents h5 {color:#d87b17; font-size:1.3em;  border-bottom: 1px solid #d87b17; margin-bottom:10px; display: inline-block; margin-left: 10px;}
.bor_color1 {border-bottom:3px solid #9b9b9b}
.bor_color2 {border-bottom:3px solid #9b9b9b}
.contents .body_view {float:left; width:75%; line-height:1.6}
.contents .ph3 {padding-bottom:10px; line-height:1.6; }
.contents .ph5 {padding-bottom:20px; padding-left:20px; position:relative;}
.contents .ph5:before {content:''; position:absolute; left:10px; width:5px; height:1px; background:#bcbcbc; top:10px;}
.name {font-size:2em; }

/*slide_down*/
.dcore_wrap {position:relative;}
.board_list {display:block; width:100%;}
.board_list li {position:relative; display:block; width:100%;}
.board_list li .board_tit {color: #999; transition: .3s color,.3s border-color; border-bottom: 1px solid #fff; position: relative;}
.board_list li .board_tit > a {webkit-transition: all .3s ease; width:100%; overflow:Hidden; position:relative;  font-size:1.5em; font-weight:600; display:block; padding:20px 0; border-bottom:1px solid #ccc;}
/*.board_list  li .board_tit > a:after {content:'';right:0; top:10px; width:40px; height:40px;  position:absolute; background:url('../z00_images/more_btn.png') center no-repeat #3bbcce; border-radius:50%}*/
.board_list li .board_tit > a:after {content:''; background:#000; width:40px; height:40px; position:absolute; background:#3bbcce; border-radius:50%; right:0; top:22%}
.board_list li .board_tit:before {right:9px;height: 2px; width: 22px; top: calc(23px + 0.75em);}
.board_list li .board_tit:before, .board_list li .board_tit:after {content: ""; display: block; position: absolute; background-color: #fff; transition: .3s all; z-index:1}
.board_list li .board_tit:after {right:19px;width: 2px; height: 22px;top: calc(23px + 0.75em - 10px);}
.board_list  li.on > .board_tit > a {color:#3bbcce}
.board_list  li.on > .board_tit > a:after {background:#989898}
.board_list .board_con {width:100%; display:none; position:relative; padding:30px; border-bottom:1px solid #ccc;}
.board_list .board_con p {padding-bottom:15px;}
.board_list  li.on .board_con {display:block;}
.board_list  li.on .board_tit a {color:#3bbcce}
.board_list  li.on > .board_tit:before {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);  background-color: #fff;}
.board_list  li.on > .board_tit:after {-webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);  background-color: #fff;}

/*depth*/
.depth_sub {display:block; text-align:center;}
.depth_sub li {display:inline;}
.depth_sub li button {background:#ccc; _padding:10px 40px; text-align:center; border-radius:50px; font-weight:600; font-size:1.2em;margin:0 10px; width:100px;}
.depth_sub li.active button {background:#3bbcce; color:#fff;}
.gallery_contents {_display:none; padding:20px 0 }
.slick-list,.slick-slider,.slick-track{position:relative;display:block}
.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}
.slick-slider{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{top:0;left:0}
.slick-track:after,.slick-track:before{display:table;content:''}
.slick-track:after{clear:both}
.slick-slide{display:none;float:left;height:100%;min-height:1px; width:450px;}[dir=rtl] 
.slick-slide{float:right}
.slick-slide img{display:block; width:100% !important}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block; margin:0 20px 0 0;}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}
.slick-dots,.slick-next,.slick-prev{position:absolute;display:block;padding:0}
.slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:slick;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-loading .slick-list{background:url(ajax-loader.gif) center center no-repeat #fff}
.slick-next,.slick-prev{font-size:1.2em;line-height:0;bottom:-70px;width:40px;height:40px;margin-top:-10px\9;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;}
.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;}
.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}
.slick-next:before,.slick-prev:before{font-size:1.5em;line-height:1;opacity:.75;color:#000}
.slick-prev{right:10px}[dir=rtl] 
.slick-prev{right:-25px;left:auto}
.slick-prev:before{content:'<'}
.slick-next:before,[dir=rtl] .slick-prev:before{content:'>'}
.slick-next{right:-20px}[dir=rtl] .slick-next{right:auto;left:-25px}[dir=rtl] 
.slick-next:before{content:'>'}
.slick-slider{margin-bottom:30px}
.slick-dots{bottom:-45px;width:100%;list-style:none;text-align:center}
.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}
.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}
.slick-dots li button:before{font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'●';text-align:center;opacity:.25;color:#000}
.slick-dots li.slick-active button:before{opacity:.75;color:#000}
.fraction-list {bottom: 40px; left: 50%; right: auto; margin-left: -37.5px;}
.fraction-list li.slick-active {display: block;}
.fraction-list li span {color: #4864f4; font-weight: 700;}
.media {width:450px; height:250px;}

/*ul*/
.ul_list {padding:10px;}
.ul_list > li {padding-bottoM:10px;}
.ul_list > li span {padding-left:15px;}
.ul_list > li img {vertical-align:middle;}

/*organization*/
.organization {text-align:center;}
.organization .root_top, .organization .root_top2 {position:relative; font-size:0; margin-bottom:30px;}
.organization .root_top h4 {background:#119aad; color:#fff !important}
.organization .root_top h4, .organization .root_top2 h4 {display:inline-block; min-width:200px; border:1px solid #119aad;     margin: 0; line-height: 46px; border: 1px solid #119aad; color: #119aad; padding: 0 10px; font-size: 18px; font-weight: 600; border-radius:5px;}
.organization .root_top:before, .organization .root_top2:before{content:''; display:block; background:#119aad; position:absolute;}
.organization .root_top:before, .organization .root_top2:before {top:100%; left:50%; height:30px; width:1px;}
.organization .root_top2:after {content: ""; display: block; background-color: #119aad; position: absolute;}
.organization .root_top2:after {top: calc(100% + 30px); left: 8px; right: 8px; height: 1px;}
.organization > ul {display:table; }
.organization > ul > li {display: table-cell; width: 1%; padding-top: 30px; padding-left: 8px; padding-right:11px;}
.organization > ul > li:first-child > .l1:after {left: 0;}
.organization > ul > li:first-child> .l1:after, .organization > ul > li:last-child > .l1:after{content: ""; display: block; background-color: #fff; position: absolute; bottom: calc(100% + 29px); height: 1px; width: 50%;}
.organization > ul > li > .l1 {background-color: #d6ebee; color: #444; line-height: 1.4666666667; padding: 11px; text-align:center; font-weight: 600; position: relative; border-radius:5px;}
.organization > ul > li > .l1:before {content: ""; display: block; position: absolute; left: 50%; bottom: 100%; width: 1px; background-color: #119aad; height: 30px;} 
.organization > ul > li:last-child > .l1:after {left: calc(50% + 1px);}
.organization > ul > li > ul  {padding:10px 0;}
.organization > ul > li > ul > li {color: #777; text-align: left; padding: 0 15px; position:relative; margin-left:10px;}
.organization > ul > li > ul > li:before {position:absolute; content:""; width:3px; height:1px; background:#000; top:14px; left:5px;}


/*Resource*/
.search_area {border-radius:5px; margin-bottom:50px; border:1px solid #3bbcce; padding:15px; background:#f4f4f4}
.search_area .txt_search {overflow:hidden; width:100%;}
.search_area .txt_search select {float:left; width:12%; margin-right:1%; border:1px solid #ccc; padding:10px 10px;}
.search_area .txt_search input {width:75%; float:left; border:1px solid #ccc; padding:10px; margin-right:1%}
.search_area .search_btn {background:#3bbcce; padding:11px; float:left; width:11%; color:#fff}
.book_div {width:100%; overflow:hidden}
.book_div ul li {float:left; margin:0 0.6% 40px; width:23.5%; border:1px solid #dedede; border-radius:10px; overflow:hidden}
.book_div ul li.no {width:100%; padding:20px; text-align:center; font-weight:600; display:block; margiN:0}
.book_div ul li:hover {box-shadow:5px 5px 10px rgba(0,0,0,0.25);}
.book_div ul li:hover img {width:300px;}
.book_div ul li .img {line-height:1; height:322px; overflow:hidden}
.book_div ul li .img img {width:100%; }
.book_div .info_div {border-top:1px solid #dedede; padding:15px; font-weight:600; }
.book_div .info_div .txt {text-overflow: ellipsis;white-space: nowrap; word-wrap: normal; overflow: hidden;display:block; font-weight:600; font-size:1.2em}
.book_div .info_div .date {font-size:0.9em; color:#c9c9c9}

.depth_sub2 {display: block; text-align: center;}
.depth_sub2 li {display:inline-block; width:20%}
.depth_sub2 li button {width:block; }

.Insights {clear:both; padding-top:30px; overflow:hidden}
.Insights li {float:left; margin:0 1% 30px; width:31%; overflow:Hidden; border:1px solid #ccc; height:347px; position:relative}
.Insights li:hover {box-shadow:5px 5px 10px rgba(0,0,0,0.25);}
.Insights li.no {width:100%; padding:20px; text-align:center; font-weight:600; display:block; margiN:0}
.Insights li .photo {display:block; width:100%; overflow:hidden; height:200px;}
.Insights li .photo img {width:100%}
.Insights li .info {padding:20px;border-top: 1px solid #ccc;}
.Insights li .info > .cat {font-weight:600; color:#098a97; }
.Insights li .info > .tit {width: 100%; margin-bottom:5px; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  font-weight: 500;}
.Insights li .info > .date {color:#ccc; position:absolute; bottom:15px;}
.select_cate {float: right; padding: 10px 90px 10px 10px; font-size: 14px; border: 1px solid #ddd; outline: none;}

.notice_ta {width:100%; border-top:2px solid #666; table-layout:fixed;}
.notice_ta th {padding:18px 0; border-bottom:1px solid #666; font-weight:500}
.notice_ta th span {border-right:1px solid #ccc; display:block; line-height:1}
.notice_ta th:last-child span {border:none}
.notice_ta td {padding:15px 0; text-align:center; vertical-align:middle; border-bottom:1px solid #ccc;}
.notice_ta td.tit {text-align:left; padding:0 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.notice_ta td img {vertical-align:bottom}

/*view*/
.view_area .top {margin-bottom:50px;}
.view_area .top > .cat {font-weight: 600; color: #098a97; padding-bottoM:10px}
.view_area .top > .tit {display: block; padding-right: 24px; margin-bottom: 15px; font-size: 2em; font-weight: 500; line-height:1}
.view_area .top > .day {color:#c1c1c1}
.view_area .top > .inquiry {float:right;}
.view_area .top > .file_area {overflow:hidden; clear:both; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:10px 0;}
.view_area .top > .file_area li {display:block;}
.view_area .txt_view {padding:10px;}
.view_area .txt_view p {padding-bottom:20px;}
.view_area .view_btn {margin-top: 50px;}
.view_area .view_btn a.list_btn {float:right; width:100px; padding:10px 0; text-align:center; color:#fff; background:#666}





@media all and (max-width:1319px) {
	#container .sub_visual {width:100%; height:280px;}
	.contents {margin-top:-150px; width:100%}
	.contents h2 {text-align:center; margin-right:0;font-size: 2em;padding-bottom: 40px;}
	.contents .home {display:none}
	.contents .tab_list {width:1320px; margin-bottom:0}
	.contents .tab {width:100%; overflow-x:scroll;}
	.contents h3 {float:none; width:77%; margin:30px 20% 30px 3%; padding-bottoM:20px; font-size:1.3em}
	.contents .tab_list {line-height:1}
	.contents .tab_list li {font-size:1em;    vertical-align: bottom;}
	.contents .tab_list li a {vertical-align: bottom;}
	.contents .body_view {width:100%; padding:0 3%}
	.board_list li .board_tit > a {font-size:1.1em; padding:20px 40px 20px 0}
	.board_list li .board_tit > a:after,.board_list li.on > .board_tit > a:after {width:30px; height:30px; background-size:15px; top:20px; right:5px}
	.board_list li .board_tit:before {width:15px; right:12px; top:calc(22px + 0.75em)}
	.board_list li .board_tit:after {width:2px; height:15px; right:19px; top:calc(25px + 0.75em - 10px)}
	.board_list .board_con {padding:30px 0}
	.depth_sub li button {}
	.slick-prev {right: 40px;}
	.slick-next {right:0}
}

@media all and (max-width: 800px) {
	.ul_list > li {position: relative; padding-left: 80px; border-bottom: 1px dashed #ccc; margin-bottom: 20px; height:80px;}
	.ul_list > li img {position: absolute; left: 0}
	.ul_list > li span {padding-left:0}
	.book_div ul li {width:31.5%; margin:0 0.7 40px}
}

@media all and (max-width: 700px) {
	.Insights li {width:45%; margin:0 2.3% 30px}
	.search_area .txt_search select {width:15%}
	.search_area .txt_search input {width:68%}
	.search_area .search_btn {width:15%}
	.view_area .txt_view p img {width:100%}
}

@media all and (max-width: 600px) {
	.search_area .txt_search select {width:24%; padding:10px 3px 10px; margin-right: -1px;}
	.search_area .txt_search input {width:58%; margin:0; padding:10px 3px}
	.search_area .search_btn {width:18%; padding:11px 3px}
	.book_div ul li {width:48%}
	.book_div ul li .img {height:280px; overflow:hidden}
}

@media all and (max-width: 500px) {
	.contents h3 {width:94%; margin:30px 3%}
	.organization .root_top h4, .organization .root_top2 h4 {display:block; width:100%; }
	.organization .root_top2:after {display:none}
	.organization > ul > li {width:100%; display:block; border:1px solid #d6ebee; border-radius:5px; margin-bottom:10px; padding:0}
	.organization > ul {display:block;}
	.organization > ul > li.first {padding-top:0}
	.organization > ul > li > .l1:before {display:none}
	.organization > ul > li:first-child> .l1:after, .organization > ul > li:last-child > .l1:after {display:none}
	.contents .tab_list.sen {margin-left:-3%}
	.contents .tab_list.thi {margin-left:-3%}	
	.Insights li {width:100%; margin:0 0 30px; height:auto; _line-height:1}
	.Insights li .photo {_height:auto; line-height:0}
	.Insights li .info > .tit {padding-bottoM:20px; }
	.view_area .top > .tit {font-size:1.3em;}
	.select_cate {width:100%}
	.view_area .txt_view p img,.view_area .txt_view p strong img {width:100% !important; height:auto !important }
	.slick-slide {width:350px}
}

@media all and (max-width: 400px) {
	.search_area {padding:10px; font-size:0.9em}
	.book_div ul li {width:70%; margin:0 15% 5% 15%}
	.book_div ul li .img {height:auto}
}