@charset "UTF-8";

.contentBox{padding: 100px 0;}

/* 상단 */
.topBox{position: relative; height: 530px; z-index: 999; overflow: hidden; z-index: 1;}
.topBox::after{content: ''; position: absolute; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,.09);}
.topBox img{position: absolute; top:0; left:0; right:0; bottom: 0;  width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transition: all 5s;}
.topBox.active img{transform: scale(1);}
.topBox .textBox{width: 100%; position: absolute; top : 55%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 9;} 
.topBox .textBox span{display: block; font-size: 18px; color: #fff; font-weight: 500; animation: textEffect 2s .7s both;}
.topBox .textBox h2{margin-bottom: 20px; font-size: 56px; color: #fff;}
.topBox .textBox em{display: inline-block; animation: textEffect 2s both;}
.topBox .textBox em:nth-child(1){animation-delay: .1s;}
.topBox .textBox em:nth-child(2){animation-delay: .2s;}
.topBox .textBox em:nth-child(3){animation-delay: .3s;}
.topBox .textBox em:nth-child(4){animation-delay: .4s;}
.topBox .textBox em:nth-child(5){animation-delay: .5s;}
.topBox .textBox em:nth-child(6){animation-delay: .6s;}
.topBox .textBox em:nth-child(7){animation-delay: .7s;}
.topBox .textBox em:nth-child(8){animation-delay: .8s;}

@keyframes textEffect {

  0%{
   opacity: 0;
   transform: translateY(50px); 
  }
  100%{
   opacity: 1;
   transform: translateY(0); 
  }
  
}

@media (max-width: 1199px){

  .topBox{height: 450px;}

  .topBox .textBox{top: 56%;}
  .topBox .textBox span{font-size: 16px;}
  .topBox .textBox h2{margin-bottom: 14px; font-size: 36px;}

  #visionBox{padding: 50px 0;}
 
}

@media (max-width: 767px){

  .topBox{height: 400px;}
  .topBox .textBox span{font-size: 16px;}
  .topBox .textBox h2{font-size: 30px;}

  #visionBox{padding: 0;}

}

@media (max-width: 480px){

  .topBox .textBox h2{margin-bottom: 10px; font-size: 24px;}

}

/* 관련기사 */
#eventBox .title span{font-weight: 700;}
#eventBox .titleBox{margin-bottom: 65px;}
#eventBox .titleBox .title{font-size: 24px;}
#eventBox .titleBox .title span{margin-bottom: 10px; font-size: 34px;}
#eventBox .titleBox .title strong{color: #5D8EFF;}
#eventBox .eventListBox{position: relative;}
#eventBox .eventList{display: flex; flex-wrap: wrap; gap: 72px 2.67%;}
#eventBox .eventList .slick-list{margin: 0 -10px;}
#eventBox .eventList .slide{width: 31.55%; margin: 0 10px;}
#eventBox .eventList .slide a{display: block;}
#eventBox .eventList .slide a .imgBox{margin-bottom: 20px; position: relative; height: 0; padding-top: 57%; border-radius: 20px; overflow: hidden;}
#eventBox .eventList .slide a .imgBox img{position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%; object-fit: cover; transition: all .3s;}
#eventBox .eventList .slide a:hover .imgBox img{transform: scale(1.05);}
#eventBox .eventList .slide a:hover .textBox h3{text-decoration: underline;}
#eventBox .eventList .slide a .textBox h3{margin-bottom: 6px; font-size: 20px; font-weight: 700; color: #333D4B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#eventBox .eventList .slide a .textBox .date{font-size: 18px; font-weight: 600; color: #A6A6A6;}

@media (max-width: 1199px){

  
  #eventBox .titleBox .title span{font-size: 30px;}
  #eventBox .titleBox{margin-bottom: 60px;}

}

@media (max-width: 1024px){

  #eventBox .eventList .slide a .textBox h3{font-size: 18px;}
  #eventBox .eventList .slide a .textBox .date{font-size: 16px;}

}

@media (max-width: 767px){

  #eventBox .eventList{gap: 60px 3%}
  #eventBox .eventList .slide{width: 48.5%;}
  
  #eventBox .titleBox{margin-bottom: 50px;}
  #eventBox .titleBox .title{font-size: 20px;}
  #eventBox .titleBox .title span{font-size: 26px;}

}

@media (max-width: 480px){

  #eventBox .eventList{gap: 60px 0}
  #eventBox .eventList .slide{width: 100%;}

  
  #eventBox .titleBox{margin-bottom: 45px;}
  #eventBox .titleBox .title{font-size: 18px;}
  #eventBox .titleBox .title span{margin-bottom: 5px; font-size: 24px;}

  #eventBox .eventList .slide a .imgBox{border-radius: 10px;}

}

@media (max-width: 414px){

  #eventBox .eventList{gap: 30px 0}
  #eventBox .eventList .slide a .imgBox{margin-bottom: 13px;}
  #eventBox .eventList .slide a .textBox h3{ margin-bottom: 0;font-size: 16px;}
  #eventBox .eventList .slide a .textBox .date{font-size: 14px;}

}

.slick-dots{margin-top: 100px; display: flex!important; flex-wrap: wrap; gap: 0 20px; align-items: center; justify-content: center; width: 100%;}
.slick-dots li.slick-active button{width: 50px; background: #5D8EFF;}
.slick-dots li button{display: block; width: 20px; height: 15px; text-indent: -9999px; border-radius: 50px; background-color:#EAEAEA; cursor: pointer;}
.comControl button{position: absolute; top: 85px; width: 20px; height: 38px;}
.comControl .prev{left:-65px;  background: url(../images/sub/arrow_icon03.svg)no-repeat center; transform: rotate(-180deg);}
.comControl .next{right:-65px;  background: url(../images/sub/arrow_icon03.svg)no-repeat center;}

@media (max-width: 1199px){

  .comControl{display: none!important;}

}

@media (max-width: 1024px){

  .slick-dots{margin-top: 35px; gap: 0 10px;}
  .slick-dots li button{width: 10px; height: 10px;}
  .slick-dots li.slick-active button{width: 20px;}

}