@charset "UTF-8";
:root {
  --cursor-size: 10px;
  --cursor-bg: #0c3482;
  --cursor-text-color: #fff;
  --cursor-font-size: 0;
}

.main-visual {position:relative; overflow:hidden;}
.main-visual .item {height:948px; position: relative; z-index:1;}
.main-visual .item .background-image {position:absolute;  top:0; left:0; width:100%; height:100%; object-fit:cover; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;  opacity: 1 !important; animation-duration: 3s; transition: all 1s ease;}
.main-visual .content {position:absolute; top:50%; left:0; width:100%; color:#fff; transform:translateY(-50%); z-index:50;}
.main-visual .content .tit {font-size:65px; line-height:1.15em; font-weight:700; margin-bottom:35px;}
.main-visual .content p {font-size:20px; line-height:1.3em;}
.main-visual .slick-dots {position:absolute; bottom:200px; left:50%; margin-left:-700px; display:flex; align-items:center; width:1400px; z-index:10}
.main-visual .slick-dots li {margin-right: 11px; width:78px; height:5px;}
.main-visual .slick-dots li button {position:relative; width:100%; height:5px; padding:0; background:rgba(255,255,255,.25); border:0;}
.main-visual .slick-dots li button:after {content:"";position:absolute;top:0; left:0; width:0; height:5px; background:#fff; opacity:0;  transition: all 1s; z-index:2;  pointer-events:none;}
.main-visual .slick-dots li.slick-active button {background:rgba(255,255,255,.50);}
.main-visual .slick-dots li.slick-active button:after {opacity:1; width:100%; display:block; animation: dotSlider 1s ease;}
.animated {transition: all .5s ease;}
.main-visual [data-animation-in] {opacity: 0;animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;transition:1s;}

@keyframes zoomInImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
	transition:1s;
  }
  to {
    transform: scale3d(1, 1, 1);
	transition:1s;
  }
}
.zoomInImage {animation-name: zoomInImage;}

@keyframes zoomOutImage {
  from {
    transform: scale3d(1, 1, 1);
	transition:1s;
  }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
	transition:1s;
  }
}
.zoomOutImage {animation-name: zoomOutImage;transition:1s;}


@keyframes dotSlider {
    from {
      width:0;
      opacity: 0;
    }
    to {
     width:100%;
     opacity:1;
    }
  }


.main-visual .scroll {position:absolute; bottom:60px; left:0; width:100%; text-align:center; transform: translateY(-50%); z-index:10;  transform:translate(-50%,-50%); animation: 2s scrollUpDown linear infinite;}
.main-visual .scroll .txt {font-size:18px; line-height:1.4em; color:#fff; opacity: .80; margin-bottom:5px; font-weight: 200;}
.main-visual .scroll .down { width:100%; height:13px; background:url('../img/main/scrolldown.png') 50% 50% no-repeat; background-size:contain; }


@keyframes scrollUpDown {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

.main-title {margin-bottom:40px;}
.main-title em {font-style: normal; font-size:20px; line-height:1.4em;font-weight: 700; color:#0c3482; margin-bottom:10px;}
.main-title h2 {color:#151515; font-size:80px; line-height:1.4em; font-weight: 700;}

.main-more a {display:inline-flex; align-items: center; font-size:18px; line-height:1.4em; color:#151515; font-weight: 200;height:50px; border:1px solid #000; border-radius:50px; padding: 0 20px;}
.main-more a .arrow {margin-left:14px; width:10px; height:9px; background:url('../img/main/more.png') 50% 50% no-repeat; background-size:contain; transition: .3s;}
.main-more a:hover {background:#25314c; color:#fff;}
.main-more a:hover .arrow {background-image:url('../img/main/more_on.png');}

.main-product {position:relative; background:url('../img/main/main_product_bg.jpg') 50% 50% no-repeat; display:flex; align-items: center; height:933px; background-size:cover;}
.main-product .inner {position:relative; z-index:2;}
.main-product .text-inner .main-title {margin-bottom:30px;}
.main-product .text-inner .txt {color:#151515; font-size:20px; line-height:1.4em; font-weight: 700; margin-bottom:16px;}
.main-product .text-inner .cnt {font-size:18px; line-height:1.6em; color:#151515; margin-bottom:40px;}
.main-product .scroll-txt {position:absolute; top:50%; transform: translateY(-50%); left:0; width:100%; z-index:0;}
.main-product .scroll-txt ul {display:flex;}
.main-product .scroll-txt ul li {animation: scrollRight 12s linear infinite;white-space: nowrap; animation-delay: 1.6s;}
.main-product .pic {position:absolute; top:0; right:0; z-index:3;}


/* 우측에서 부드럽게 흘러가는 무한 반복 애니메이션 키프레임 */
@keyframes scrollRight {
    0% {
        transform: translateX(100%);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
    }
}


.main-prod-inner {background:hsl(0, 0%, 0%); padding: 160px 0; position:relative;}
.main-prod-inner .wrap,
.main-prod-inner .inner {position:relative;}
.main-prod-inner .productSlide {overflow:visible; max-width: 1400px; width:100%;}
.main-prod-inner .text-inner {opacity:0;position:absolute; bottom:75px; left:0; z-index:2; color:#fff; transform: translateX(-100px); transition: all 0.8s ease;}
.main-prod-inner .text-inner h2 {font-size:80px; line-height:1.1em; font-weight: 700; margin-bottom:26px; opacity:0; transform: translateX(-80px); transition: all 0.6s ease 0.2s;}
.main-prod-inner .text-inner p {font-size:22px; line-height:1.3em; font-weight: 200; opacity:0; transform: translateX(-80px); transition: all 0.6s ease 0.4s;}
.main-prod-inner .photo {max-width:1400px; width:100%; margin:0 auto; text-align:center; display:flex; align-items: center; justify-content: center;} 
.main-prod-inner .pic {position:relative;}
.main-prod-inner .pic:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7; transition:all .3s;}
.main-prod-inner .swiper-slide {cursor: none; }
.main-prod-inner .swiper-slide .pic {transform: scale(0.8)}
.main-prod-inner .swiper-slide.swiper-slide-active {padding:0;}
.main-prod-inner .swiper-slide.swiper-slide-active .pic {transform: scale(1);}
.main-prod-inner .swiper-slide-active .text-inner {opacity:1; transform: translateX(0);}
.main-prod-inner .swiper-slide-active .text-inner h2 {opacity:1; transform: translateX(0);}
.main-prod-inner .swiper-slide-active .text-inner p {opacity:1; transform: translateX(0);}
.main-prod-inner .swiper-slide-active .pic:after {opacity:0;}
.main-prod-inner .counter-inner {position:absolute; top:42%; left:22.5%; z-index:1;}
.main-prod-inner .counter {display:flex; align-items: center; margin-bottom:50px; font-size:18px; line-height:1.4em;font-weight: 700; color:#fff;}
.main-prod-inner .counter .counter-current {color:#104fc7;}
.main-prod-inner .counter .counter-total {color:#fff; margin-left:220px;}
.main-prod-inner .swiper-pagination {position:absolute; left:33px; top:12px; height:3px; width:194px; background:rgba(255,255,255,.50);}
.main-prod-inner .swiper-pagination .swiper-pagination-progressbar {background:#104fc7; height:100%; width:0; transition: width 0.3s ease;}
@media (max-width: 1920px) {
  .main-prod-inner .counter-inner {left:13.5%;}
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 114px;
  height: 114px;
  background: #0c3482 ;
  font-size:0; 
  line-height:0;
  display: flex;
  opacity:0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  z-index: 9999;
  transition: background-color 0.3s, color 0.3s, font-size 0.3s, width 0.3s,
    height 0.3s, transform 0.15s ease-in-out;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  font-weight: bold;
}
.cursor.drag {opacity:1; background: #0c3482 url('../img/main/drag.png') 50% 50% no-repeat;}




.main-business {padding:75px 0 120px;}
.main-business .card-inner {padding:0 20px;}
.main-business .cards {position:relative; display:flex; flex-direction: column; align-items: center; max-width:1860px; width:100%; height:1010px; margin:0 auto;  border-radius: 26px; overflow: hidden;}
.main-business .card {position:absolute; width:100%; top:0; height:100%; overflow: hidden; border:0; background-color:transparent;} 
.main-business .card .content {position:absolute; top:50%; transform: translateY(-50%); left:100px; width:100%;}
.main-business .card .content .main-title em,
.main-business .card .content .main-title h2 {color:#fff;}
.main-business .card .content .main-title h2 {font-size:60px;}
.main-business .card .content .main-title .text {margin-top:10px;}
.main-business .card .content .main-title .text ul {display:flex;}
.main-business .card .content .main-title .text ul li {position: relative; font-size:20px; line-height:1.3em; color:#fff; font-weight: 700; padding-left:14px; margin-right:20px;}
.main-business .card .content .main-title .text ul li:before {content:"";position:absolute; top:8px; left:0; width:7px; height:7px; background:#fff; border-radius:100%;}
.main-business .card .content .main-more a {border-color:#fff; color:#fff;}
.main-business .card .content .main-more a .arrow {background-image:url('../img/main/more_on.png');}
.main-business .card .content .main-more a:hover {border-color:#25314c}
.main-business .card .pic {border-radius:26px; height:1010px; overflow:hidden; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
@media (max-width: 1920px) {
  .main-business .cards,
  .main-business .card .pic {height:660px;}
}


.main-board {padding-bottom: 120px;}
.main-board .inner {position:relative;}
.main-board .menu {position:absolute; top:0; left:20px; z-index:2;}
.main-board .menu ul {display:flex;}
.main-board .menu ul li {margin-right:24px;}
.main-board .menu ul li a {display:block; font-size:20px; line-height:1.4em;font-weight: 700; color:rgba(21,21,21,.33);}
.main-board .menu ul li.active a {color:#0c3482}
.main-board .board-tabs-inner {display:flex;}
.main-board .title-inner {width:500px; position:relative; padding-top: 40px;}
.main-board .board-inner {flex:1 1 auto; min-width:0; width:1%;}
.main-board .board-inner ul li {border-bottom: 1px solid #dedede; display:flex; align-items: center; font-weight: 700; padding-bottom:30px; margin-bottom:30px; transition: .3s;}
.main-board .board-inner ul li:last-child {margin-bottom:0;}
.main-board .board-inner ul li .title {flex:1 1 auto; min-width:0; width:1%; font-size:22px; line-height:1.4em; color:#151515; transition: .3s; margin-right:20px;}
.main-board .board-inner ul li .title a {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.main-board .board-inner ul li .title img {display:none;}
.main-board .board-inner ul li .dates {display:flex; align-items: center;}
.main-board .board-inner ul li .dates .year {width:65px; height: 65px; margin-right:17px; border:1px solid #dedede; transition: .3s; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size:22px; line-height:1.4em; color:rgba(21,21,21,.40);}
.main-board .board-inner ul li .dates .date {font-size:40px ;line-height:1.4em;font-weight: 700; color:#151515; transition: .3s;}
.main-board .board-inner ul li:hover .title {color:#0c3482}
.main-board .board-inner ul li:hover .dates .year {background:#0c3482; color:#fff; border-color:#0c3482;}
.main-board .board-inner ul li:hover .dates .date {color:#0c3482}
.main-board .gallery-inner {flex:1 1 auto; min-width:0; width:1%;}
.main-board .gallery-inner .gallery-list {padding-top:0; border-top:0;}
.main-board .gallery-inner .gallery-list ul li {width:50%; margin-bottom:20px;}