@charset "utf-8";
@import url(./fontawesome-pro-5.15.1-web/css/all.css);
@import url(font.notoSansKr.css);

@font-face {
		font-family: 'GyeonggiBatang';
		src: local('sdmisaeng'),
			url('/fonts/GyeonggiBatang_Regular.woff') format('woff'),
}


/* CSS Document */
@keyframes topbottom {
		from {
				transform:translateY(-5px);
		}

		to {
				transform:translateY(2px);
		}
}

@keyframes fadein {
		from {
				opacity: 0;
		}

		to {
				opacity: 1;
		}
}

@keyframes slide-left {
		from {
				margin-left: -50px;
		}

		to {
				margin-left: 0%;
		}
}

@keyframes slide-bottom {
		from {
				margin-bottom: -50px;
		}

		to {
				margin-bottom: 0%;
		}
}

@-moz-keyframes fadein {

		/* Firefox */
		from {
				opacity: 0;
		}

		to {
				opacity: 1;
		}
}

@-webkit-keyframes fadein {

		/* Safari and Chrome */
		from {
				opacity: 0;
		}

		to {
				opacity: 1;
		}
}

@-o-keyframes fadein {

		/* Opera */
		from {
				opacity: 0;
		}

		to {
				opacity: 1;
		}
}

input[type="submit"] { font-family:'Font Awesome 5 Pro'}
body {margin:0;padding:0;background-color:#fff; font-family: "Pretendard", sans-serif !important; font-weight: 400; position: relative; width: 100%; height: 100%;}
hr {display:none;clear:both;}
img {border:0 none;}
h1,h2,h3,h4,h5,dl,dt,dd,ul,li,ol,th,td,p,blockquote,form {margin:0;padding:0;}
table {border-collapse:collapse;border:0 none; }
table th, table td {vertical-align: middle !important; text-align: center;}
form, p {margin: 0px;}
button {margin:0;padding:0;border:0 none;background:transparent;*overflow:visible;cursor:pointer;}
button::-moz-focus-inner {padding:0;border:0;}
ul, li, ol, dt, dd { list-style: none; margin-block-start:0; margin-block-end:0; padding-inline-start: 0px;}
body,table,th,td,input,select,textarea,div {
font-size: 12px;
font-style: normal;
line-height:18px;
margin:0;
word-break:keep-all;
}

a{text-decoration:none; color:#222;}
a:hover{text-decoration:none}

#wrap { position: relative; width: 1610px; margin:0 auto;}

#header {
		display: flex;
		z-index:12;
		justify-content: space-between;
		align-items: center;
/* 		background-color: rgba(255, 255, 255, 0.1); */
		background-color: #fff;
		position: relative;
		top: 0;
		height: 100px;
		width:100%;
		min-width: 1903px;
		transition: .5s all;
		border-bottom:1px solid #ddd;
}

#header > #wrap { position: absolute; display: flex; width: 1610px; margin:0 auto; justify-content: space-between; align-items: center; top:0; left:0; right:0;}
#header > #wrap h1{ width:15%; position: absolute; top: 23px;}
#header > #wrap h1 a img.blind{display:none;}
#header > #wrap .nav{width:45%; margin: 0 auto; position: absolute; top:0; left:-6%; right: 0;}
#header > #wrap .util-menu{width:auto; position: absolute; top: 25px; right: 0;}

#header > #wrap .nav > ul{ display: flex; width:100%; justify-content: space-between; flex-direction: row; position: relative;}
#header > #wrap .nav > ul > li{ width: 20%; height: 100%; text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: center; transition: .5s ease; }
#header > #wrap .nav > ul > li:hover { background-color: rgba(255, 255, 255, 0.1);}
#header > #wrap .nav  ul  li  a { color:#000; font-size:16px; display: inline-block; width: 100%; height: 100%;  display: flex; align-items: center; justify-content: center;}
#header > #wrap .nav  ul  li  a:hover{color:#ffd900 !important;}
#header > #wrap .nav  ul  li  a.on{color:#fff;}
#header > #wrap .nav ul li .depth1 {height: 100px; font-size: 20px; font-weight: 500;}


.all_menu { display: none;}
.menu_open > #gnb {display: none;}

#nav-icon4 {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    width: 30px;
    height: 23px;
  }

#nav-icon4 span {
    display: block;
    position: absolute;
    height: 2px;
    width: 30px;
    background: #fff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }



#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
	width: 25px;
  top: 9px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top:18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0px;
  left: 0px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 21px;
  left: 0px;
}













/* .mouse {
		width: 60px;
		position: absolute;
		bottom: 7%;
		left: 0;
		right: 0;
		margin:0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 9;
}

.mouse .mousediv { background: url(../img/mouse.png) no-repeat; width: 20px; height: 26px; display: flex; align-items: center; justify-content: center; margin-left: -3px;}
.mouse .mousediv::after { background: url(../img/mouse2.png) no-repeat; width: 6px; height: 8px; display: flex; content: ''; animation: topbottom 1.5s infinite;}
.mouse .mouseh5 { color:#fff; letter-spacing: 0.5em; margin-top:10px; text-align: justify;}
 */
.nav-bg {
	/* background: linear-gradient( to right, #370043, #07105d ) !important; */
	background-color: #0066b3 !important;;
	position: absolute;
	display: block;
	height: /* 340px; */ 260px;
	top: 100px;
	width: 100%;
}

.header-open {
	/* background: linear-gradient( to right, #4b1955, #1f276d ) !important; */
	background-color: #005b9f !important;
	transition: .5s all;
}




#gnb .submenu{
		display: flex;
		flex-direction: column !important;
		width: 100% !important;
		align-items: center;
		/* padding-bottom:40px; */
		justify-content: flex-start;
		height: 260px !important;
}
#gnb .submenu > li a{padding:/* 20px */ 18px 0px;}

#header > #wrap .util-menu form {
	display: flex;
	justify-content: space-between;
}
#header > #wrap .util-menu form .globe { display: flex; align-items: center;}
#header > #wrap .util-menu form .globe li a { color: #fff; font-size: 16px;}
#header > #wrap .util-menu form .globe li:first-child {margin-right:0px;}

#header > #wrap .util-menu .search-ul { display: flex; flex-direction: row; justify-content: flex-end;}
#header > #wrap .util-menu .search-ul li { margin-left:10px; width: 235px; height: 47px; background-color: #ffae00; border-radius: 35px; display: flex; flex-direction: row;}
#header > #wrap .util-menu .search-ul li input[type=text] { outline: none; padding: 0px 20px; background-color: rgba(0, 0, 0, 0.0); border:0 none; color:#fff}
#header > #wrap .util-menu .search-ul li input[type=text]::placeholder { color:#fff}
#header > #wrap .util-menu .search-ul li input[type=text]:placeholder-shown { color:#fff}
#header > #wrap .util-menu .search-ul li input[type=submit] {  outline: none;  cursor: pointer; background-color: rgba(0, 0, 0, 0.0); border: 0; color: #fff; font-size: 15px;}

/* content start */
#content { display: flex; height: 100%;min-width: 1903px; width:100%;flex-direction: column;}

/* main visual :: S :: */
#content .main-visual {display: flex; flex-direction: column; position: relative; width:1610px; height: 100%; margin: 30px auto 0;}
#content .main-visual .visual {position: relative; height: 450px;}
#content .main-visual .visual .swiper-container{width: 100%; height: 100%; overflow: hidden; border-radius: 15px; border: 1px solid #ccc;}
#content .main-visual .visual .swiper-container .visual-img{height:100%;}
#content .main-visual .visual .swiper-container .visual-img img{position: relative; width:100%; height: 100%; object-fit:cover;}

.visual .swiper-button-next, .visual .swiper-button-prev{display:none; width: 49px; height: 49px; border: 1px solid #444;background-color:#fff; border-radius: 50%; transform: translate(0, -50%); margin-top:0; opacity:70%;}
.visual .swiper-button-next:hover, .visual .swiper-button-prev:hover{box-shadow: 0 10px 10px rgba(28, 101, 183, 0.1);}
.visual .swiper-button-next{right: 20px;}
.visual .swiper-button-prev{left: 20px;}
.visual .swiper-button-next:after, .visual .swiper-button-prev:after{width: 7px; height: 11px; font-size: 0;}
/* .visual .swiper-button-next:after{background: url(../img/ic_arrow_right.png) no-repeat center center;}
.visual .swiper-button-prev:after{background: url(../img/ic_arrow_left.png) no-repeat center center;} */

/* 가상 요소로 화살표 만들기 */
.swiper-button-next::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 2px solid black;  /* 왼쪽 선 */
  border-top: 2px solid black; /* 아래쪽 선 */
 /* 기울여서 '<' 모양 만들기 */
  position: absolute;
  left: 48%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.swiper-button-prev::before {
  content: "";
  width: 5px;
  height: 5px;
  border-left: 2px solid black;  /* 왼쪽 선 */
  border-bottom: 2px solid black; /* 아래쪽 선 */
  transform: rotate(45deg); /* 기울여서 '<' 모양 만들기 */
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.visual:hover .swiper-button-next{display:flex;}
.visual:hover .swiper-button-prev{display:flex;}

#content .main-visual .visual .visual-text {position: absolute; top: 80px; left: 109px; line-height:45px; z-index: 1; color:#fff;}
#content .main-visual .visual .visual-text .ti{line-height: 70px; font-size: 65px; font-weight: bold; font-family: 'pretendard';}
#content .main-visual .visual .visual-text .disc{display: inline-block; margin-top: 30px; font-size: 40px;}
#content .main-visual .visual .visual-text .btn-about{display: block; width: 170px; height: 51px; line-height: 51px; margin-top: 25px; border: 1px solid #fff; font-size: 18px; color: #fff; border-radius: 26px; text-align: center; font-weight: 200; transition: all .2s ease;}
#content .main-visual .visual .visual-text .btn-about:hover{background-color: #1c65b7;}

/* main content :: S :: */
#content-wrap {width:1610px; margin: 50px auto 0;}
#content-wrap .section{}
#content-wrap .section .ti-box{position: relative; width: 100%; display: inline-block; margin-bottom: 40px;}
#content-wrap .section .ti-box .main-ti{display: inline-block; line-height: normal; font-family: 'pretendard'; font-size: 40px; color: #0066b3; font-weight: 700;}
#content-wrap .section .ti-box .btn-arrow{position: absolute; top: 8px; right: 0; display: block; width: 41px; height: 41px; border-radius: 50%; border: 1px solid #444;}
#content-wrap .section .ti-box .btn-arrow:hover::after{animation: moving 0.5s ease;}
#content-wrap .section .ti-box .btn-arrow::after{content: ''; position: absolute; top: 50%; right: 15px; transform: translate(0, -50%); display: block; width: 40px; height: 12px; background: url(../img/ic_arrow.png) no-repeat;}
@keyframes moving {
	0%, 100% {
	  right:15px;
	}
	30% {
	  right: 25px;
	}
	70% {
	  right: 10px;
	}
  }

/* section 01 :: Archive, News :: */
#content-wrap .section01{display: flex; flex-direction: row; gap: 5.9%; margin-bottom: 50px;}

#content-wrap .section01 .con-arch{width: 55.5%;}
#content-wrap .section01 .con-arch .box{display: flex; flex-direction: row; justify-content: space-between; width: 100%; gap: 31px;}
#content-wrap .section01 .con-arch .box .item{display: inline-block; width: 431px; border-radius: 15px; overflow: hidden; background-color: #eeeeee; border: 1px solid #eee; transition: all .4s ease; margin-left:0;}
#content-wrap .section01 .con-arch .box .item:hover{border: 1px solid #ffae00; outline: 1px solid #ffae00; box-shadow: 0 10px 10px rgba(255, 174, 0, 0.1);}
#content-wrap .section01 .con-arch .box .item .imgs{position: relative; height: 236px; overflow: hidden; background-color: #f5f5f5;}
#content-wrap .section01 .con-arch .box .item .imgs img{width: 100%; height: 100%; object-fit: scale-down;}
#content-wrap .section01 .con-arch .box .item .imgs .num{position: absolute; top: 13px; left: 15px; display: inline-block; width: 98px; height: 25px; line-height: 25px; text-align: center; color: #fff;
	border-radius: 12.5px; background: rgba(0, 0, 0, 0.7); font-size: 14px; letter-spacing: 0; font-weight: 300;}
#content-wrap .section01 .con-arch .box .item .text-box{padding: 25px;}
#content-wrap .section01 .con-arch .box .item .text-box .ti{line-height: normal; margin-bottom: 17px; font-size: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#content-wrap .section01 .con-arch .box .item .text-box .date{font-size: 16px; color: #555;}

#content-wrap .section01 .con-news{width: 38.6%;}
#content-wrap .section01 .con-news .box{display: flex; flex-direction: column; gap: 18px;}
#content-wrap .section01 .con-news .box .item{position: relative; display: flex; flex-direction: row; margin-left:0;}
#content-wrap .section01 .con-news .box .item:hover .imgs{border:3px solid #ffae00;}
#content-wrap .section01 .con-news .box .item:hover .imgs::before{opacity: 1;}
#content-wrap .section01 .con-news .box .item:hover .imgs::after{opacity: 1;}
#content-wrap .section01 .con-news .box .item:hover .text-box .ti{color: #ffae00;}
#content-wrap .section01 .con-news .box .item .imgs{position: relative; display: block; min-width: 149px; height: 99px; margin-right: 22px; overflow: hidden; border-radius: 15px; border: 1px solid #ccc; box-sizing:border-box;}
#content-wrap .section01 .con-news .box .item .imgs::before{content: ''; position: absolute; display: block; width: 100%; height: 100%; background-color: rgba(0,102,179,0.7); opacity: 0; transition: all .2s ease;}
#content-wrap .section01 .con-news .box .item .imgs::after{content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 14px; height: 14px; background: url(../img/ic_plus.png); transform: translate(-50%, -50%); opacity: 0; transition: all .2s ease;}
#content-wrap .section01 .con-news .box .item .imgs img{width: 100%; height: 100%; object-fit: cover;}
#content-wrap .section01 .con-news .box .item .text-box{overflow: hidden; text-overflow: ellipsis;}
#content-wrap .section01 .con-news .box .item .text-box .ti{line-height: 26px; margin-bottom: 10px; font-family: 'pretendard'; font-size: 22px; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; overflow: hidden;}
#content-wrap .section01 .con-news .box .item .text-box .disc{display: block; width: 100%; margin-bottom: 7px; font-size: 15px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#content-wrap .section01 .con-news .box .item .text-box .date{font-size: 15px; color: #aaa;}

/* section 02 :: Elements :: */
#content-wrap .section02{margin-bottom: 50px;}

#content-wrap .section02 .con-elem{}
#content-wrap .section02 .con-elem .box{display: flex; flex-direction: row; gap: 2.1%;}
#content-wrap .section02 .con-elem .box li{width: 23.4%;}
#content-wrap .section02 .con-elem .box li .item{position: relative; display: inline-block; width: 100%; height: 263px; overflow: hidden; border-radius: 15px; border: 1px solid #eee; margin-left:0;}
#content-wrap .section02 .con-elem .box li .item:hover .imgs::before{background-color: rgba(0,102,179,0.8);}
#content-wrap .section02 .con-elem .box li .item:hover .ti{text-decoration-line:underline; text-underline-position: under; text-decoration-thickness: 1px; color:#ffd900;}
#content-wrap .section02 .con-elem .box li .item .imgs{position: relative; width: 100%; height: 100%; background-color: #f5f5f5;}
#content-wrap .section02 .con-elem .box li .item .imgs::before{content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); transition: all .2s ease;}
#content-wrap .section02 .con-elem .box li .item .imgs img{width: 100%; height: 100%; object-fit: scale-down;}
#content-wrap .section02 .con-elem .box li .item .ti{position: absolute; top: 50%; left: 50%; display: block; width: 90%; line-height: 30px; font-size: 22px; color: #000; transform: translate(-50%, -50%); color: #fff; white-space: wrap; text-align: center;}

/* section 03 :: Materials :: */
#content-wrap .section03{margin-bottom: 50px;}

#content-wrap .section03 .con-mate{}
#content-wrap .section03 .con-mate .con .tab{display: flex; flex-direction: row; gap: 13px; margin-top: -20px;}
#content-wrap .section03 .con-mate .con .tab .menu{display: block; width: 170px; height: 51px; line-height: 51px; border: 1px solid #444; border-radius: 26px; text-align: center; font-size: 18px; transition: all .2s ease;}
#content-wrap .section03 .con-mate .con .tab .menu:hover{background-color: #ffae00; border: 1px solid #ffae00; color:#fff;}
#content-wrap .section03 .con-mate .con .tab li.on .menu{background-color: #ffae00; border: 1px solid #ffae00; color:#fff;}

#content-wrap .section03 .con-mate .con .box{display: flex; flex-direction: row; gap: 2.1%; margin-top: 32px;}
#content-wrap .section03 .con-mate .con .box li{width: 23.4%;}
#content-wrap .section03 .con-mate .con .box li .item{display: inline-block; width: 100%; border-radius: 15px; border: 1px solid #ccc; overflow: hidden; transition: all .4s ease; margin-left:0;}
#content-wrap .section03 .con-mate .con .box li .item:hover{border: 1px solid #ffae00; outline: 1px solid #ffae00; box-shadow: 0 10px 10px rgba(255, 174, 0, 0.1);}
#content-wrap .section03 .con-mate .con .box li .item .imgs{position: relative; width: 100%; height: 217px; background-color: #f5f5f5;}
#content-wrap .section03 .con-mate .con .box li .item .imgs .ic{position: absolute; top: 0; left: 0; display: inline-block; width: 45px; height: 45px; background-color: #0066b3; border-radius: 0 0 15px 0;}
#content-wrap .section03 .con-mate .con .box li .item .imgs .ic::after{content: ''; position: absolute; display: block; width: 100%; height: 100%;}
#content-wrap .section03 .con-mate .con .box li .item .imgs .ic-pho::after{background: url(../img/ic_sort01_01.png) no-repeat center center;}
#content-wrap .section03 .con-mate .con .box li .item .imgs .ic-vid::after{background: url(../img/ic_sort01_02.png) no-repeat center center;}
#content-wrap .section03 .con-mate .con .box li .item .imgs .ic-aud::after{background: url(../img/ic_sort01_03.png) no-repeat center center;}
#content-wrap .section03 .con-mate .con .box li .item .imgs .ic-pub::after{background: url(../img/ic_sort01_04.png) no-repeat center center;}
#content-wrap .section03 .con-mate .con .box li .item .imgs img{width: 100%; height: 100%; object-fit: scale-down;}
#content-wrap .section03 .con-mate .con .box li .item .text-box{padding: 25px; min-height: 160px; box-sizing:border-box;}
#content-wrap .section03 .con-mate .con .box li .item .text-box .ti{min-height: 56px; line-height: 28px; margin-bottom: 18px; font-size: 22px; font-weight: 600;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
#content-wrap .section03 .con-mate .con .box li .item .text-box .disc{width: 100%; font-size: 15px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

/* section 04 :: Skateholders :: */
#content-wrap .section04{margin-bottom: 70px;}
#content-wrap .section04 .con-skat .con .tab{display: flex; flex-direction: row; gap: 13px; margin-top: -20px;}
#content-wrap .section04 .con-skat .con .tab .menu{display: block; width: 170px; height: 51px; line-height: 51px; border: 1px solid #444; border-radius: 26px; text-align: center; font-size: 18px; transition: all .2s ease;}
#content-wrap .section04 .con-skat .con .tab .menu:hover{background-color: #ffae00; border: 1px solid #ffae00; color:#fff;}
#content-wrap .section04 .con-skat .con .tab li.on .menu{background-color: #ffae00; border: 1px solid #ffae00; color:#fff;}

#content-wrap .section04 .con-skat .con .box{display: flex; flex-direction: row; gap: 2.1%; margin-top: 32px;}
#content-wrap .section04 .con-skat .con .box li{width: 23.4%;}
#content-wrap .section04 .con-skat .con .box li .item{display: inline-block; width: 100%; border-radius: 15px; border: 1px solid #ccc; overflow: hidden; transition: all .4s ease; margin-left:0;}
#content-wrap .section04 .con-skat .con .box li .item:hover{border: 1px solid #ffae00; outline: 1px solid #ffae00; box-shadow: 0 10px 10px rgba(255, 174, 0, 0.1);}
#content-wrap .section04 .con-skat .con .box li .item .imgs{position: relative; width: 100%; height: 217px; background-color: #f5f5f5;}
#content-wrap .section04 .con-skat .con .box li .item .imgs .ic{position: absolute; top: 0; left: 0; display: inline-block; width: 45px; height: 45px; background-color: #0066b3; border-radius: 0 0 15px 0;}
#content-wrap .section04 .con-skat .con .box li .item .imgs .ic::after{content: ''; position: absolute; display: block; width: 100%; height: 100%;}
#content-wrap .section04 .con-skat .con .box li .item .imgs .ic-comu::after{background: url(../img/ic_sort02_01.png) no-repeat center center;}
#content-wrap .section04 .con-skat .con .box li .item .imgs .ic-exp::after{background: url(../img/ic_sort02_02.png) no-repeat center center;}
#content-wrap .section04 .con-skat .con .box li .item .imgs .ic-org::after{background: url(../img/ic_sort02_03.png) no-repeat center center;}
#content-wrap .section04 .con-skat .con .box li .item .imgs img{width: 100%; height: 100%; object-fit: scale-down;}
#content-wrap .section04 .con-skat .con .box li .item .text-box{padding: 25px; min-height: 160px; box-sizing:border-box;}
#content-wrap .section04 .con-skat .con .box li .item .text-box .ti{min-height: 56px; line-height: 28px; margin-bottom: 18px; font-size: 22px; font-weight: 600;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
#content-wrap .section04 .con-skat .con .box li .item .text-box .disc{width: 100%; font-size: 15px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}


/* Footer 페이지 하단 */
#footer { display: flex; border-top:1px solid #ccc; width: 100%; min-width: 1903px; flex-direction: column;}

.banner {width:1610px; margin: 0 auto; overflow: hidden; position: relative;}
.banner .swiper-banner { display: flex; flex-direction: row; padding:70px 0px; justify-content: space-between; align-items: center;}
.banner .swiper-banner .bannerdiv a  {border:1px solid #ccc;  display: flex; flex-direction: row; align-items: center; justify-content: center;}

.ban-btn { display: flex; flex-direction: row; position: absolute; right: 0; top:20px}
.ban-btn div { padding: 10px; outline: none; cursor: pointer;}
.ban-btn div i { font-size: 25px; color:#404040;}


.footer_address { background-color:#2b2b2b; padding:/* 70px */ 40px 0px;}
.footer_address ul { width:1610px; margin: 0 auto; display: flex; flex-direction: column; }
.footer_address ul li { font-size:20px; font-weight: 300; line-height: /* 30px */ 35px; color:#fff; margin-top:/* 30px */0;}

.footer_copy { background-color:#fff; padding:30px 0px;}
.footer_copy ul { width:1610px; margin: 0 auto;}
.footer_copy ul li { font-size:20px; font-weight: 300;; color:#404040;}


.footer_copy ul {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.footer_btn a{
	color: #fff;
	font-size: 14px;
	padding: 10px 20px;
	background-color: #504069;
	letter-spacing: 0.01em;
	border-radius: 20px;
	transition: all .3s;
}
.footer_btn a:hover {text-decoration: underline;}
.footer_btn a i {margin-left: 10px; font-size: 16px;}

/* popup */
.pop { display: flex; align-items: center; justify-content: space-between;  flex-direction: row;}
.pop > div {display: flex; align-items: center; justify-content: center;}
.pop > div input[type='checkbox'] { width: 15px; height: 15px; margin-right: 3px;}
.pop > div label { font-size: 12px;}
.pop > div #close {
	font-size: 13px;
	display: flex;
		align-items: center;
		justify-content: center;
}
.pop > div #close i{ margin-left: 5px; font-size: 15px;}

/* swiper btn */
.swiper-btn-area { display: none;}


/* 반응형 */
@media (max-width:1920px){
	#content {min-width: auto;}
}
@media (max-width:1903px){
	#header {min-width: 100%;}
	#footer { min-width: 100%;}
	.horizontal-accordion ul li.js-active-accordion { width: 50%;}

	#header > #wrap h1 { width: 13%;}
	#header > #wrap > h1 > a { display: inline-block; width: 100%;}
	#header > #wrap > h1 > a img { width: 100%;}
	/* #header > #wrap .util-menu { right: 20px;} */
 	#content-wrap {width:1610px; box-sizing: border-box;}
	.banner{ width: 100%; box-sizing: border-box; padding: 0px 20px;}
	.footer_copy ul { width: 100%;}
	.footer_address ul { width: 100%;}

}
@media (max-width:1800px){
	.visual .swiper-button-next, .visual .swiper-button-prev{background-color: #fff;}
}
@media (max-width:1700px){
	#content-wrap{width: 100%; padding: 0 20px;}

	.visual .swiper-button-next{right: 20px;}
	.visual .swiper-button-prev{left: 20px;}

	#content .main-visual{width: 100%; padding: 0 20px; box-sizing: border-box;}
	#content .main-visual .visual .visual-text{left: 125px;}

	#content-wrap .section01{gap: 3%;}
	#content-wrap .section01 .con-arch{width: 57%;}
	#content-wrap .section01 .con-news{width:40%;}
	#content-wrap .section01 .con-arch .box{gap: 2%;}
	#content-wrap .section01 .con-arch .box li{width: 49%;}
	#content-wrap .section01 .con-arch .box li .item{width: 100%;}
}
@media (max-width:1610px){

}
@media (max-width:1609px){
	#header > #wrap { width: 100%; height: 100%; padding: 0px 20px; box-sizing: border-box;}
	#header > #wrap h1 { position: relative; top: 0;}
	#content-wrap { width: 100%; box-sizing: border-box; padding: 0px 0px;}

	/* header */
	#header{ min-width: 100%;}
	#header > #wrap .nav ul li .depth1 { font-size: 18px;}
	#header > #wrap .nav ul li a { font-size: 15px;}


	/* content */
	#wrap { position: relative; width: 100%; margin:0 auto;}
	#content { display: flex; height: 100%; min-width: 100%; width: 100%; flex-direction: column;}

	#content .main-visual .visual-text {width: 70%;}
	#content .main-visual .visual .visual-text .disc{display: inline-block; margin-top: 30px; font-size: 40px;}
	#content .main-visual .visual .visual-text .btn-about{margin-top:25px;}

	/* footer */
	#footer { min-width: 100%; width: 100%; box-sizing: border-box; padding: 0px 0px;}

	.footer_address ul { width: 100%;}
	.footer_address ul, .footer_copy ul { box-sizing: border-box; padding: 0px 20px;}
	.footer_copy ul {flex-wrap: wrap; width: 100%;}

	.banner { width: 100%; box-sizing: border-box; padding: 0px 20px;}
	.banner .swiper-banner .bannerdiv a {width: 100%; height: 100%;}
	.banner .swiper-banner .bannerdiv a  img { width: 100%;}

	/* se01 */
	.section {padding: 0px 20px;}

	/* se06 */
	.section06 { flex-wrap: wrap; width: 100%; box-sizing: border-box; padding: 0px 20px;}
	.section06 .news { width: 100%;}
	.section06 .news .news-box {width:100%;}
	.section06 .news .news-box .news-div {width:25%;}
}
@media (max-width:1500px){
	/* se01 */
	.archive .archive-box .archive-box01 { width: 36%;}
	.archive .archive-box .archive-box02 { width: 20% !important;}

	/* .section06 .news .news-box .news-div {width:25%;} */
}
@media (max-width:1440px){
	#header > #wrap .util-menu{right:20px;}
	#header > #wrap .util-menu .search-ul li{width: 200px;}
	#header > #wrap .util-menu .search-ul li input[type=text] { padding: 0px 0px 0px 20px;}
	#header > #wrap .nav { width: 45%; left: -10%;}

	#content-wrap .section01 .con-arch .box .item .text-box{padding: 20px;}
	#content-wrap .section01 .con-arch .box .item .text-box .ti{font-size: 20px;}
	#content-wrap .section01 .con-news .box .item .text-box .ti{font-size: 20px; margin-bottom: 6px; line-height: 25px;}
	#content-wrap .section03 .con-mate .con .box li .item .text-box{padding: 20px;}
	#content-wrap .section04 .con-skat .con .box li .item .text-box{padding: 20px;}
}

@media (max-width:1240px){
	.visual .swiper-button-next, .visual .swiper-button-prev{display:none;}
	.visual:hover .swiper-button-next{display:none;}
	.visual:hover .swiper-button-prev{display:none;}

    #header {height:90px; background-color: rgba(0, 0, 0, 0.5); border:0;}
	.nav, .util-menu { display: none;}
	#nav-icon4 { display: flex;}
	#header > #wrap h1 { width: 200px;}
	#header > #wrap h1 .logo-b{display:none;}

	.all_menu { display: none;}
	.menu_open {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #1c65b7;
		z-index: 11;
	}
	#header > #wrap {height: 90px; z-index: 12; background-color: rgba(255, 255, 255, 0.1);}
	.all_menu_bg { height: 100vh !important; overflow: hidden;}

	.menu_open .m-lang{position:absolute; top:110px; width:100%;}
	.menu_open .m-lang .m-clickbtn{position:relative; left:50%; display:inline-block; width:89%; padding:15px 20px; color:#fff; font-size:18px; border:1px solid #fff; border-radius:5px; box-sizing:border-box; transform:translate(-50%, 0);}
	.menu_open .m-lang .m-clickbtn::after{content: ""; position: absolute; top: 50%; right: 1.3em; display: inline-block; width: 1em; height: 1em; background-image: url(../img/lang_btn_on.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;
		transition: transform 0.2s linear; -webkit-transition: transform 0.2s linear; background-image: url(../img/lang_btn_arrow_down.png); transform:translate(0,-50%); filter: brightness(10);}
	.menu_open .m-lang .m-clickbtn.on::after{
			transform: translate(0, -50%) rotate(-180deg); -webkit-transform: translate(0, -50%) rotate(-180deg);
	}
	.menu_open .m-lang .m-clickbtn::before{content: ""; display: inline-block; width: 1.2em; height: 1.2em; margin-right: 0.2em; background-image: url(../img/lang_btn_on.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; vertical-align: middle; filter: brightness(10);}

	.menu_open .m-lang a{color:#000; font-size:18px;}
	.menu_open .m-lang ul{display:none; background: #fff; width: 89%; position: relative; left: 50%; transform: translate(-50%, 0);
    top: 10px; border-radius: 5px;
    }

	.menu_open > #gnb{
		display: block;
		align-items: flex-start;
		height:100%;
		overflow-y: auto;
		justify-content: flex-start;
		width: 100%;
		flex-direction: column;
		margin-top: 180px;
		box-sizing: border-box;
		padding-bottom: 90px;
	}
	.menu_open > #gnb > li { box-sizing: border-box; height: auto; display: flex; flex-direction: column; width: 100%; padding-bottom: 30px;}
	.menu_open > #gnb > li:last-child { padding-bottom: 90px;}
	.menu_open > #gnb > li > a {
		font-size: 20px;
		display: flex;
		position: relative;
		line-height: 1.0em;
		color: #fff;
		font-weight: 900;
		width: 100%;
		margin-bottom: 10px;
		background-color:rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		padding:30px 30px 30px 30px;
	}
	.menu_open > #gnb > li > .submenu { display: block !important; height: 100% !important; padding-bottom: 0px; box-sizing: border-box; padding:0px 30px 0px 30px;}
	.menu_open > #gnb > li > .submenu li { margin-top: 10px; height: auto;}
	.menu_open > #gnb > li > .submenu li a { color: #fff; display: flex; align-items: center; line-height: 1.0em; font-weight: 400; font-size: 15px; padding: 10px 0px;}
	.menu_open > #gnb > li > .submenu li a::before{ content: ''; display: flex; margin-right: 15px; width: 4px; height: 4px; background-color: #fff;}

	.menu_open > #gnb::-webkit-scrollbar-track
	{
		background-color: rgba(255,255,255,0.1);
	}

	.menu_open > #gnb::-webkit-scrollbar
	{
		width: 7px;
		border-radius: 15px;
	}

	.menu_open > #gnb::-webkit-scrollbar-thumb
	{
		background-color: rgba(255,255,255,0.1);
	}

	#content-wrap .section01 .con-news .box .item .imgs{min-width: 128px; margin-right: 20px;}


}

@media (max-width:1200px){
	#content .main-visual .visual .swiper-container .visual-img{height: 100%;}
	#content .main-visual .visual .swiper-container .visual-img img{width: 100%; height: 100%; object-fit: cover;}
}

@media (max-width:1024px){
	#content-wrap{margin: 50px auto 0;}
	#content .main-visual .visual{height: 350px;}
	#content .main-visual .visual .visual_img { background-position: center center !important;}
	#content .main-visual .visual .visual-text{top: 65px; left: 0; width: 100%; text-align: center; padding: 0 90px; box-sizing: border-box;}
	#content .main-visual .visual .visual-text .ti{line-height: 64px; font-size: 60px;}
	#content .main-visual .visual .visual-text .disc{margin-top: 10px; line-height:25px;}
	#content .main-visual .visual .visual-text .btn-about{position: relative; left: 50%; transform: translate(-50%, 0); margin-top: 20px;}
	.archive-box02 a .archive-type02-img .archive-type02-imgbg { background-size: cover !important;}
	.archive-box02, .archive-box03, .archive-box04 { border:0 none;}

	#content-wrap .section01{flex-direction: column; margin-bottom: 50px;}
	#content-wrap .section01 .con-arch{width: 100%; margin-bottom: 50px;}
	#content-wrap .section01 .con-news{width: 100%;}

	#content-wrap .section02{margin-bottom: 50px;}
	#content-wrap .section02 .con-elem .box{flex-wrap: wrap; gap: 2%;}
	#content-wrap .section02 .con-elem .box li{width: 49%;}
	#content-wrap .section02 .con-elem .box li:first-child{margin-bottom: 1.1%;}

	#content-wrap .section03 .con-mate .con .tab{gap: 10px;}
	#content-wrap .section03 .con-mate .con .tab li .menu{width: auto; height: auto; line-height: normal; padding: 10px 15px; font-size: 15px;}

	#content-wrap .section03 .con-mate .con .box{flex-wrap: wrap; gap: 2%;}
	#content-wrap .section03 .con-mate .con .box li{width: 49%;}
	#content-wrap .section03 .con-mate .con .box li:first-child{margin-bottom: 1.1%;}

	#content-wrap .section04 .con-skat .con .tab{gap: 10px;}
	#content-wrap .section04 .con-skat .con .tab li .menu{width: auto; height: auto; line-height: normal; padding: 10px 15px; font-size: 15px;}

	#content-wrap .section04 .con-skat .con .box{flex-wrap: wrap; gap: 2%;}
	#content-wrap .section04 .con-skat .con .box li{width: 49%;}
	#content-wrap .section04 .con-skat .con .box li:first-child{margin-bottom: 1.1%;}
}


@media (max-width:900px){

	.more-btn a .mbtn-text { font-size: 16px;}
	.more-btn a:hover .mbtn-text { font-size: 16px;}
	.visual-text-box { border-top:none; border-bottom: none;}
	#content .main-visual .visual .visual-text{padding: 0 100px;}
	#content .main-visual .visual .visual-text .ti{font-size: 54px; letter-spacing:5px;}
	#content .main-visual .visual .visual-text .disc{font-size: 25px;}
    #content .main-visual .visual-text .visual-textS { text-align: center;}
    #content .main-visual .visual-text .visual-textB {
        font-size: 40px;
        line-height: 1.2em;
        letter-spacing: -0.03em;
        font-weight: 300;
        text-align: center;
    }
    .visual-text-box {width: 100%; padding-bottom: 0px; padding: 0px 20px; box-sizing: border-box;}
	.swiper-pagination {
		bottom: 25%;
		margin: 0 auto;
		left: 0;
		right: 0;
	}
    #content .main-visual .visual .visual_img01 { display: block; background: url(../img/main01.jpg) center center no-repeat; width: 100%; min-height:545px; background-size: cover;}
    #content .main-visual .visual .visual_img02 { display: block; background: url(../img/main02.jpg) center center no-repeat; width: 100%; min-height:545px; background-size: cover;}
    #content .main-visual .visual .visual_img03 { display: block; background: url(../img/main03.jpg) center center no-repeat; width: 100%; min-height:545px; background-size: cover;}
	#content .main-visual .visual .visual_img {display: block; background: url(../img/main03.jpg) center center no-repeat; width: 100%; min-height:545px; background-size: cover;}
	.archive .archive-box .archive-box01, .archive .archive-box .archive-box02 { min-width: 100%; width: 100% !important;}



}

@media (max-width:768px){
	.horizontal-accordion ul li {
		width: 100%;
		height: 100%;
		font-size: 12px;
		line-height: 100px;
		cursor: pointer;
		transition: 0.5s;
		text-align: center;
		position: relative;
		transition: all ease 1s;
		overflow: hidden;
	}
	.horizontal-accordion ul li:first-child{ display: inline-block;}

	#content-wrap .section01 .con-arch .box{flex-direction: column; gap: 0;}
	#content-wrap .section01 .con-arch .box li{width: 100%;}
	#content-wrap .section01 .con-arch .box li:last-child{display: none;}

	#content-wrap .section03 .con-mate .con .box li .item .text-box{padding: 15px;}
	#content-wrap .section03 .con-mate .con .box li .item .text-box .ti{font-size: 20px; margin-bottom: 12px;}

	#content-wrap .section04 .con-skat .con .box li .item .text-box{padding: 15px;}
	#content-wrap .section04 .con-skat .con .box li .item .text-box .ti{font-size: 20px; margin-bottom: 12px;}

}

@media (max-width:660px){
	.section06 .news .news-box { flex-wrap: wrap; height: auto;}
	.section06 .news .news-box .news-div { width: 100%; margin-bottom: 30px;}

}

@media (max-width:620px){
	#content .main-visual .visual{height: 320px;}
	#content .main-visual .visual .visual-text{padding: 0 60px;}
	#content .main-visual .visual .visual-text .ti{font-size: 50px;}
	#content .main-visual .visual .visual-text .disc{margin-top: 15px; line-height: 22px;}
	#content .main-visual .visual .visual-text .btn-about{margin-top: 15px;}

	#content-wrap .section03 .con-mate .con .tab{flex-wrap: wrap; gap:2%;}
	#content-wrap .section03 .con-mate .con .tab li{width: 32%; margin-bottom: 2%;}

	#content-wrap .section04 .con-skat .con .tab{flex-wrap: wrap; gap:2%;}
	#content-wrap .section04 .con-skat .con .tab li{width: 32%; margin-bottom: 2%;}

	.visual .swiper-button-prev{left: -13px;}
	.visual .swiper-button-next{right:-13px;}

	.ui-dialog { width: 95% !important; margin:  0 auto;}
	.footer_address ul li { font-size: 17px;}
	.footer_copy ul li { font-size: 17px;}
}

@media (max-width:500px){

	#content .main-visual .visual{height: 320px;}
	#content .main-visual .visual .visual-text{padding: 0 50px;}
	#content .main-visual .visual .visual-text .ti{font-size: 40px; line-height: 46px;}
	#content .main-visual .visual .visual-text .btn-about{font-size: 15px;}
	.visual .swiper-button-next, .visual .swiper-button-prev{width: 40px; height: 40px;}

	#content-wrap .section .ti-box{margin-bottom: 30px;}
	#content-wrap .section .ti-box .main-ti{font-size: 32px;}
	#content-wrap .section .ti-box .btn-arrow{width: 36px; height: 36px; top: 5px;}

	#content-wrap .section02 .con-elem .box li{width: 100%;}
	#content-wrap .section02 .con-elem .box li .item{height: 176px;}

	#content-wrap .section03 .con-mate .con .tab li{width: 49%;}
	#content-wrap .section03 .con-mate .con .box{gap: 5%; flex-direction:column;}
	#content-wrap .section03 .con-mate .con .box li{width: 100%;}
	#content-wrap .section03 .con-mate .con .box li .item{margin-bottom: 10px;}
	#content-wrap .section03 .con-mate .con .box li .item .imgs{height: 190px;}
	#content-wrap .section03 .con-mate .con .box li .item .text-box{min-height:auto;}
	#content-wrap .section03 .con-mate .con .box li .item .text-box .ti{min-height: auto;}

	#content-wrap .section04 .con-skat .con .tab li{width: 49%;}
	#content-wrap .section04 .con-skat .con .tab li{width: 49%;}
	#content-wrap .section04 .con-skat .con .box{gap: 5%; flex-direction:column;}
	#content-wrap .section04 .con-skat .con .box li{width: 100%;}
	#content-wrap .section04 .con-skat .con .box li .item{margin-bottom: 10px;}
	#content-wrap .section04 .con-skat .con .box li .item .imgs{height: 190px;}
	#content-wrap .section04 .con-skat .con .box li .item .text-box{min-height:auto;}
	#content-wrap .section04 .con-skat .con .box li .item .text-box .ti{min-height: auto;}
}

@media (max-width:486px){
	.footer_copy { padding: 0;}
	.footer_copy ul { flex-direction: column-reverse; padding: 0 0;}
	.footer_copy ul li{ width: 100%;}
	.footer_copy ul li:first-child { box-sizing: border-box; padding: 15px 20px;}
	.footer_btn a { width: 100%; border-radius: 0; display: block; box-sizing: border-box; text-align: right;}
	.section06 .cvideo-box .cv-box .cv-image-box {height: 330px;}
	.section-title { font-size: 22px;}
	.sh-more-btn { width: 120px !important; font-size: 14px !important;}
	.more-btn {width: 120px !important; height: 40px !important;}
}

@media (max-width:400px){
	#header > #wrap h1 {width: 170px;}
	#content .main-visual .visual-text .visual-textS { font-size: 15px;}
	#content .main-visual .visual .visual-text{padding: 0 30px;}
	#content .main-visual .visual .visual-text .ti{font-size: 36px;}
}

@media (max-width:360px){

}

#header > #wrap .util-menu [data-skin="select"] >a {transition: border 0.3s, background 0.3s, color 0.3s;}

#header > #wrap .util-menu [data-skin="select"] >a{
		position: relative; display: block; padding: 1em; background-color: rgba(0, 0, 0, 0.5); line-height: 1; text-decoration: none; box-sizing: border-box; border: 1px solid #ddd;}
#header > #wrap .util-menu [data-skin="select"] >a:before{content: ""; display: inline-block; width: 2em; height: 2em; margin-right: 0.75em; background-image: url(../img/lang_btn_on.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; vertical-align: middle;}
#header > #wrap .util-menu [data-skin="select"] >a:after{
		content: ""; position: absolute; top: 1.3em; right: 1.3em; display: inline-block; width: 1em; height: 1em; background-image: url(../img/lang_btn_on.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;
		transition: transform 0.2s linear; -webkit-transition: transform 0.2s linear;
}
#header > #wrap .util-menu  div >a.on:after{
		transform: rotate(-180deg); -webkit-transform: rotate(-180deg);
}
#header > #wrap .util-menu  div >a span{position:relative; display:inline-block; top:1px; font-size: 1.3em; line-height: 1; color: #fff; font-weight:400;}

#header > #wrap .util-menu [data-skin="select"] >a:focus-visible,
#header > #wrap .util-menu [data-skin="select"] >a:hover {border-color: var(--color-gray-80); color: var(--color-gray-90);}
#header > #wrap .util-menu [data-skin="select"] >a.on {border-color: var(--color-gray-80); background-color: var(--color-gray-80);}
/* #header > #wrap .util-menu [data-skin="select"] >a.on:before {background-image: url(/img/i_lang_white.svg);} */
/* #header > #wrap .util-menu [data-skin="select"] >a.on span {color: #fff;} */
#header > #wrap .util-menu [data-skin="select"]{min-width: 12em;}
#header > #wrap .util-menu [data-skin="select"] >a{margin-top:0; margin-left:0; background-color: rgba(255, 255, 255, 1); border-radius:35px; border-color: #ddd;}
#header > #wrap .util-menu [data-skin="select"] >a span{color: #444;}
#header > #wrap .util-menu [data-skin="select"] >a:before{ background-image: url(../img/lang_btn_on.svg);}
#header > #wrap .util-menu [data-skin="select"] >a:after{ background-image: url(../img/lang_btn_arrow_down.png);}

#header > #wrap .util-menu div ul {display:none; padding:0.5em 0; border: 1px solid var(--color-gray-30); background-color: #fff; box-shadow: 3px 3px 6px 2px rgba(0,0,0,0.1); border-radius: 10px; margin-top:6px;}
#header > #wrap .util-menu div ul li:first-child,
#header > #wrap .util-menu div ul li:last-child {border-radius: 0;}

#header > #wrap .util-menu div ul li a {margin-left: 0;}
#header > #wrap .util-menu div ul li a:focus-visible,
#header > #wrap .util-menu div ul li a:hover {background-color: var(--color-gray-80); color: #fff;}
#header > #wrap .util-menu div ul li a:focus-visible span,
#header > #wrap .util-menu div ul li a:hover span {color: #004993;}