@charset "utf-8"; 

/**********************
**********************
**********************
1. 기본 스타일 (모바일 우선)
**********************
**********************
**********************/
html, body{width: 100%; overflow-x: hidden; height: auto; overflow-y: auto;  -webkit-overflow-scrolling: touch;}
table {width:100%; border-spacing:0; border-collapse:collapse;}
li {list-style:none;}
.container {width: 100%; max-width: 1242px; margin: 0 auto;}

#header{position: fixed; z-index: 11; top: 0;}
#header.responsive{width: 100%; transition: .3s ease; position: fixed; top: 0;}

/*flex*/
.flexbox{display: block;}
.flexboximp{display: flex;}
.al-item-center{align-items: center;}


.nav {overflow: hidden; height: 0; transition:all 0.3s ease-in-out; }
.nav.active {position: fixed; top: 0; width: 100%; background: #f5f5f5; height: 100vh; padding: 57px 44px; overflow-y: scroll;}

.nav li{}
.dep1_tit{}
.dep1_tit span{font-weight: 700; font-size: 1.1rem;}
.nav.active .dep1_tit{display: block; text-align: left; font-weight: 700; font-size: 15px; padding: 16px 0;}
.nav.active .dep1_tit span{font-size: 15px;}
.nav .dep2 a.dep2_tit br{display: contents;}	
.dep1{ border-bottom: 1px solid #dbdbdb;}
.dep2 {height: 0; overflow: hidden; }
.dep2.active{height: auto; overflow: visible; padding: 10px 0;}
.nav.active .dep2.active li a{display: block; text-align: left; padding: 3px 0px 3px 15px; font-size: 14px;}
.nav.active .dep2.active li a:hover{color: #024387; font-weight: 700;}


#gnb a img {width: 82px;}
.pc-logo{display: none;}
.mobile-logo{padding: 10px; display: block;}
.mobile-logo img{}







  .dep1:hover .dep2 {
  }

  .dep1.active .dep2 {
  }
/* 햄버거 버튼 스타일 */
.menu-toggle {display: block; position: fixed; top: 24px; right: 20px; width: 40px; height: 40px; z-index: 1000; cursor: pointer; background: #ffffffb3; padding: 10px; border-radius: 15px; box-shadow: 0 0 5px 4px #2b2b2b26;}

.menu-toggle span {display: block; width: 100%; height: 3px; background: #024287; margin: 3px 0; transition: all 0.3s ease-in-out;}

/* 햄버거 버튼 애니메이션 */
.menu-toggle.on span:nth-child(1) { transform: translateY(6px) rotate(45deg);}
.menu-toggle.on span:nth-child(2) {opacity: 0;}
.menu-toggle.on span:nth-child(3) {transform: translateY(-6px) rotate(-45deg);}

/*slide*/
#visual {width: 100%; margin: 0 auto;  transition: opacity 0.3s ease, transform 0.3s ease;}
.swiper { width: 100%; height: 563px; }
.swiper-slide { display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; clip-path: polygon(100% 0, 100% 87%, 50% 100%, 0 87%, 0 0)}
.bg1 { background:url("../images/slide/slide01.jpg") no-repeat center; }
.bg2 { background:url("../images/slide/slide02.jpg") no-repeat center; }

.bg1-1 { background:url("../../images/main/slide01.jpg") no-repeat center; }
.bg2-1 { background:url("../../images/main/slide02.jpg") no-repeat right; }
.slideTitle{position: absolute; top: 187px; z-index: 1; left: 25%; transform: translate(-25%,0); width: 100%;}
.slideTitle img{width: 70%; margin-left: 10px;}

.v-mask-wrapper{position: relative;}

.v-mask-wrapper::before,
.v-mask-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 116px;
  z-index: 2;
  pointer-events: none;
}

/* 왼쪽 파란색 띠 */
.v-mask-wrapper::before {
  left: 0;
  background: #024287;
  clip-path: polygon(-100% 0%, 0% 0, 100% 100%, 100% 100%);
}

/* 오른쪽 초록색 띠 */
.v-mask-wrapper::after {
  right: 0;
  background: #50a73f;
  clip-path: polygon(0% 100%, 100% 0, 100% 100%, 100% 56%);
}

.slidePrev, .slideNext{opacity: 0; transform: translateX(-30px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; pointer-events: none; /* 숨겨진 동안 클릭 방지 */}
#visual:hover .slidePrev{display: flex; background: #0000009c; padding: 10px ; border-radius: 14px; height: 65px !important; width: 65px !important; color: #fff; opacity: 1; transform: translateX(0); pointer-events: auto; /* 보일 때 클릭 가능 */}
#visual:hover .slideNext{display: flex; background: #0000009c; padding: 10px ; border-radius: 14px; height: 65px !important; width: 65px !important; color: #fff; opacity: 1; transform: translateX(0); pointer-events: auto; /* 보일 때 클릭 가능 */}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{color: #fff;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{color: #fff;}




.wcenter{width: 100%; margin: 0 auto; justify-content: space-between; padding: 0 20px; flex-direction: column-reverse; display: flex;}
@media (max-width: 1257px) {
	.newBox{width: 55%;}}
.newBox{width: 100%; padding-top: 30px;}
/* Style the tab */
.tab {
  overflow: hidden; border-bottom: 2px solid #e4e4e4; width: 100%;
}

/* Style the buttons inside the tab */
.tab a {
  background-color: inherit;
  float: left;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 20px; font-weight: 500; text-align: center; color: #d0d0d0; display: block; width: 50%;}
.tab a.active{border-bottom: 2px solid #000; color: #181818;}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 10px 10px;
  border-top: none;
}
.newsSlide{display: flex; gap:10px; transition: transform 0.5s ease; padding: 0; margin: 0; list-style: none; min-width: 100%; height: 295px; position: relative;}
.newsSlide .slick-list{width: 100%; overflow: hidden;}
.newsSlide .slick-track{}
.newsSlide li{background: #f3f3f3; padding: 28px; width: 100%; height: 211px; margin-right: 8px;}
.newsSlide li p{color: #181818; text-align: left; min-height: 135px; font-size: 15px;}
.newsSlide li span{color: #aeaeae; text-align: right; display: block; font-size: 13px;}
.slick-arrow{color: transparent; position: absolute; bottom: 0px; right: 0; z-index: 1;}
.slick-next{width: 66px; height: 66px; transition: .3s ease;}
.slick-next::before{position: absolute; border: 2px solid #d0d0d0; content: ">"; color:#d0d0d0; right: 0; padding: 14px 25px; font-size: 23px; top: 0;}
.slick-next:hover.slick-next::before{color: #181818; border: 2px solid #181818;}
.slick-prev{right: 71px; width: 66px; height: 66px; transition: .3s ease;}
.slick-prev::before{position: absolute; border: 2px solid #d0d0d0; content: "<"; color:#d0d0d0;  padding: 14px 25px; font-size: 23px; top: 0;}
.slick-prev:hover.slick-prev::before{color: #181818; border: 2px solid #181818;}


/*date*/
@media (max-width: 1257px) {
	.dateBox{width: 45%;}
}
.dateBox{width: 100%;}
.dateBox li{display: flex; align-items: center; width: auto; gap:0px; border-bottom: 2px solid #f5f5f5; padding: 20px 0;}
.dateBox li:last-of-type{padding-bottom: 0; border-bottom: none;}
.dateBox li div{font-weight: 600;}
.dateBox li div img{width: 79%; display: block;}
.dateBox li div.txt{width: 100%;}
.dateBox li div.txt h3{margin: 0; font-size: 14px; font-weight: 600; line-height: normal; display: flex; align-items: center; gap:48px; justify-content: space-between;}
.dateBox li div.txt p{text-align: left; font-weight: 200; font-size: 15px;}


.count{background: var(--main-black); color: var(--main-white); padding: 4px; border-radius: 20px; width: 25%; text-align: center; font-size: 12px;}
.count.orange{background: var(--main-orange);}


/*다운로드*/
.downList{display: flex; flex-wrap: wrap; gap:10px; align-items: center; width: 100%; justify-content: space-between;}
.downList li{width: 48%;}
.downList li a{display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #000; text-align: center; padding: 30px 10px; font-size: 14px;}

.icon svg {cursor: pointer; height: 30px; width: 29px; overflow: visible;}
.downList li a:hover .arrow {
  -webkit-animation: bounce 0.75s both ease-out 1;
          animation: bounce 0.75s both ease-out 1;
}

@-webkit-keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}



/* footer */

.logoWrap{width: 100%;  display: flex; flex-wrap: wrap; gap:19px; margin: 20px; padding-bottom: 90px;}
.logoWrap > div{display: flex; align-items: center;}
.logoWrap > div > span{float: left; font-weight: 800; font-size: 14px; margin-right: 18px; white-space: nowrap; letter-spacing: -0.5px;}
.logoWrap > div > div{width: 86%; display: flex; align-items: center; flex-wrap: wrap;}
.logoWrap > div > div > a{margin-right: 12px;}
.logoWrap > div > div > a img{max-width: 68%; height: auto; object-fit: contain;}


.footer {
  background: #024287; /* 파란색 영역 */
  position: relative;
  height: 200px; /* 원하는 전체 높이 */ margin-top: 76px;
}

.footer::before{position: absolute; display: block; width: 0; height: 0; border-bottom: 0px solid transparent; border-top: 102px solid transparent; border-left: 0px solid transparent; border-right: 912px solid #e9ecef; content: ''; top: -102px; right: 0;}
.footer::after{position: absolute; display: block; width: 0; height: 0; border-bottom: 63px solid #024287; border-top: 0px solid transparent; border-left: 0px solid transparent; border-right: 986px solid transparent; content: ''; top: -62px; left: 0;}
.footer-inner {
  color: white;
  padding: 0px 20px;
}

.footer-content {
  width: 100%;
  margin: 0 auto;
}

.footer-logo {
  position:relative;
}
.footer-logo img {max-width: 39%;}

.footer-content h4{font-size: 20px; font-weight: 800;}
.footer-content p{line-height: 1.9; font-size: 13px; margin-top: 10px; margin-bottom: 10px; text-align: left;}
.link{color: #fff;}
.link:hover{color: #b7ffa9;}













/**********************
**********************
**********************
1. 2. 태블릿 사이즈 (768px 이상)
**********************
**********************
**********************/
@media (min-width: 768px) {
	.slideTitle img{width: 50%;}
	.flexbox{display: block;}
	
	/*date*/
.dateBox{display: flex; width: 100%; gap:31px; padding: 17px 0;}
.dateBox li{display: block; align-items: center; padding: 12px; border-right: 2px solid #f5f5f5; border-bottom: none; width: 33.333%; gap:22px;}
.dateBox li:last-of-type{padding-bottom: 0; border-bottom: none; border-right: none;}
.dateBox li div{text-align: center;}
.dateBox li div.txt{width: 100%;}
.dateBox li div.txt h3{font-size: 22px; flex-direction: column; gap:0;}
.dateBox li div.txt p{text-align: center; font-size: 17px;}
.count{width: 100%; margin: 10px 0;}
	.dateBox li div img{width: auto; display: inline-block;}
	.swiper{height: 669px;}	
	.logoWrap > div > span{font-size: 16px;}
	.footer-content p{font-size: 15px;}
	.footer-logo img{}
}


/**********************
**********************
**********************
3. 데스크탑 사이즈 (1244px 이상)
**********************
**********************
**********************/
@media (min-width: 1244px) {
.flexbox{display: flex;}
	/*gnb*/
#header{width: 100%; position: relative;}
.h_inner{width: 1242px; margin: 0 auto;}
.h_inner h1{text-align: center; margin: 25px 0 5px;}
#gnb{display: flex;}
#gnb a img {width: 109px;}	
.nav{display: flex; justify-content: space-between; text-align: center; align-items: center; width: 100%; overflow: visible; height: 100%; transform: unset;}
.nav li.dep1{position: relative; width: calc(100%/7); height: 123px; border-bottom: none;}
.nav li.dep1 a.dep1_tit{display: flex; text-transform: uppercase; align-items: center; justify-content: center; height: 100%;}
.nav li.dep1 a.dep1_tit_single{display: flex; justify-content: center; align-items: center; padding: 12px 0;}
.dep1_tit span{font-weight: 400; font-size: 16px;}
	
.dep2 {display: block;
    position: absolute;
    background: #fff;
    top: 117px;
    left: 0px;
    width: 161px;
    z-index: 100;

    /* 기본적으로 숨김 */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out; padding: 0;}
.w162{width: 162px;}
.dep2.active { max-height: max-content; /* 적당한 높이로 설정 */ padding: 10px; opacity: 1; visibility: visible; background: #024387; }
.dep2.active li a{padding: 0;}	
.nav .dep2 a.dep2_tit{font-size: 13px; letter-spacing: -0.5px; line-height: 26px; display: block; color: #fff;}
.nav .dep2 a.dep2_tit br{display: block;}	
.nav .dep2 a.dep2_tit:hover{color: #92ff7c; font-weight: 600;}
.nav li.dep1.on a{background: #024387; color: #fff;}

.menu-toggle {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
	
	.pc-logo{display: block;}
	.mobile-logo{display: none;} #mobile-logo{display: none;}
	
	.swiper {height: 772px; }
 .slideTitle{position: absolute; top: 187px; z-index: 1; left: 25%; transform: translate(-25%,0); width:auto;}
 .slideTitle img{width: auto;}	

	
	.v-mask-wrapper::before,
.v-mask-wrapper::after {
  height: 155px;
}
	
	.wcenter{width: 1242px; padding:30px 0; display: flex; justify-content: space-between; flex-direction: row; gap:10px;}
	
	.newBox{width: 761px; padding-top: 0;}
	.newsSlide{display: flex; gap:10px; transition: transform 0.5s ease; padding: 0; margin: 0; list-style: none; min-width: 300px; height: 295px; position: relative;}	
	.newsSlide .slick-list{width: 761px; overflow: hidden;}	
	.dateBox{flex-direction: column; gap:0;}	
	.dateBox li{width: 459px; display: flex; gap:22px; padding: 12px 0; border-right: none;}
	.newsSlide li{width: 247px;}
	.dateBox li div.txt h3{flex-direction: row; gap:0; font-size: 25px;}
	.count{width: 25%; font-size: 19px;}
	.dateBox li div.txt p{text-align: left; font-size: 20px;}
	.dateBox li div img{width: 100%;}
	
	.tab a {font-size: 25px;}
	
	.newsSlide li p{font-size: 18px;}
	.newsSlide li span{font-size: 15px;}
	/*다운로드*/
	.downList{width: 741px;}
	.downList li{width: 49%;}
	.downList li a{font-size: 20px; padding: 42px;}
	
	/*footer*/
	.logoWrap{width: 1242px; margin: 20px auto; padding-bottom: 0px;}
	.footer {height: 205px; /* 원하는 전체 높이 */ margin-top: 76px;}
	.footer-content {width: 1200px;}
	.footer-inner {padding: 60px 0px; display: flex; width: 1242px; margin: 0 auto; align-items: end;}
	.footer-logo img {width: 100%; max-width: 100%;}
	.footer-content p{font-size: 18px; margin-top: 0; margin-bottom: 0; line-height: 1.5;}
	.logoWrap > div > div > a img{max-width: 100%;}
	.logoWrap > div > span{font-size: 19px;}
}

/**********************
**********************
**********************
BREAK (1169px 이상)
**********************
**********************
**********************/


@media (max-width: 1169px) {
	.h_inner{width: 100%;}
	.dep2{width: 100%;}
	.w162{width: 100%;}
	.flexBox{display: block;}
	.wcenter{width: 100%;}
	ul.dateBox{width: 100%;}
	.dateBox li{width: 100%;}
	
}