@charset "UTF-8";

.main-visual {position:relative; overflow:hidden;}
.main-visual .item {height:950px; position: relative; z-index:1;}
.main-visual .item > a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 51;
}
.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%; padding:0 10%;color:#151515; transform:translateY(-80%); z-index:50;}
.main-visual .content .tit {font-size:120px; line-height:1.2em; font-weight:700; margin-bottom:20px;}
.main-visual .content .txt {font-size:32px; line-height:1.2em; color:#002b60; font-weight:600; margin-bottom:20px;}
.main-visual .content .cnt {font-size:26px; line-height:1.38em; opacity:.80;}
.main-visual .slick-arrow {position:absolute; top:50%; width:25px; height:44px; transform:translateY(-50%); font-size:0; line-height:0; border:0; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%;  background-size:contain; z-index:10;}
.main-visual .slick-arrow:before {display:none;}
.main-visual .slick-arrow:focus {outline:0}
.main-visual .slick-prev {left:50px; background-image:url('../img/main/slide_prev.png');}
.main-visual .slick-next {right:50px; background-image:url('../img/main/slide_next.png');}
.main-visual .slide-btns {width:20px;height:75px; font-size:0; line-height:0; border:0; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; z-index:50}
.main-visual .slide-btns:focus {outline:0}
.main-visual .slide-prev {margin-right:20px;background-image:url('../img/main/slide_prev2.png');}
.main-visual .slide-next {margin-left:20px;background-image:url('../img/main/slide_next2.png');}
.main-visual .controler-wrap {position:absolute; bottom:200px; left:0; width:100%; z-index:52; }
.main-visual .controler-wrap .inner {display:flex; align-items:center;}
.main-visual .controler {width:75px; height:75px; margin-right:40px; position:relative;}
.main-visual .controler .slick-playback {position:absolute; top:0; left:0; width:75px; height:75px;  text-indent:-9999em; border:0; border-radius:100%;  background-color:transparent; z-index:5}
.main-visual .controler .slick-playback:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; background:url('/html/_skin/img/main/bt_pause.png') 50% 50% no-repeat;}
.main-visual .controler .slick-playback.play:after {background-image:url('/html/_skin/img/main/bt_play.png')}
.main-visual .controler .slick-playback:focus {outline:0}
.main-visual .controler .slider-progress {position:absolute;}
.main-visual .controler .slider-progress:after {content:""; position:absolute; top:0; left:0; width:74px; height:74px; border:4px solid #151515; border-radius:100%; opacity:.2;}
.main-visual .controler .slick-progress circle {fill: transparent; stroke: #151515;stroke-width: 4; }
.main-visual .slick-counter {line-height:75px; display:flex; color:#151515; z-index:6}
.main-visual .slick-counter .current-wrap {font-weight:700;}
.main-visual .slick-counter .bar {padding:0 6px;}

.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;}

.main-visual .scroll {position:absolute; bottom:80px; right:50px; width:141px; height:141px;  z-index:10;}
.main-visual .scroll .circle {position:absolute; top:0; left:0; width:100%; height:100%;  background: url('/html/_skin/img/main/scroll_txt.png') no-repeat center/100%; animation: mainVisScrollRatate 20s infinite linear;}
.main-visual .scroll .scrollDown {position: relative;display: flex;justify-content: center; align-items: center;  text-align: center; font-size: 0; background: none; outline: none;  border: 0; width: 100%;  height: 100%;  border-radius: 50%;}
.main-visual .scroll .scrollDown img {animation: mainVisScrollMove 2s infinite linear;}

@keyframes mainVisScrollRatate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes mainVisScrollMove {
  0% {
    transform: translateY(0);
  }

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

  75% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

.main-title {margin-bottom:40px;}
.main-title h2 {font-size:60px; line-height:1em; font-weight:700;}
.main-title .cnt {font-size:20px; line-height:1.4em; opacity:.80; margin-top:20px;}

.main-more a {display:inline-flex; align-items:center; position:relative; padding:0 22px; width:175px; height:50px; font-size:14px; line-height:1.3em; border:1px solid rgba(21,21,21,.70);}
.main-more a:after {content:""; position:absolute; top:0; right:22px; width:42px; height:100%; background:url('../img/main/more.png') 50% 50% no-repeat; background-size:contain; transition:.3s}
.main-more a:hover {background:#002b60; border-color:#002b60; color:#fff;}
.main-more a:hover:after {background-image:url('../img/main/more_on.png');}

.main-product {background:url('../img/main/bg_product.jpg') 50% 50% no-repeat; background-size:cover;}
.main-product .inner {display:flex; align-items:center; height:990px;}
.main-product .background {display:none; margin-top:60px;}

.main-atoms {background:#f2f5f8; padding:140px 0 60px;}
.main-atoms .inner {display:flex; align-items:center;}
.main-atoms .info {flex:1 1 auto; min-width:0; width:1%; padding-right:20px;}
.main-atoms .photo {width:840px;}

.main-feature {background:url('../img/main/bg_ray.jpg') 50% 50% no-repeat; background-size:cover; padding:220px 0;}
.main-feature ul {display:flex; margin:0 -50px;}
.main-feature ul li {width:33.33333%; padding:0 50px;}
.main-feature ul li .ico {width:100%; height:85px; margin-bottom:35px;}
.main-feature ul li .number {font-size:100px;line-height:1.2em;color:#002b60; font-weight:900; font-family:"Pretendard", sans-serif; margin-bottom:25px;}
.main-feature ul li .number .txt {font-size:30px;}
.main-feature ul li p {font-size:20px;line-height:1.6em; opacity:.80;}
.main-feature ul li:nth-child(1) .ico {padding-left:20%;}
.main-feature ul li:nth-child(2) {text-align:center;}
.main-feature ul li:nth-child(3) {text-align:right;}
.main-feature ul li:nth-child(3) .ico {padding-right:30%;}
.main-feature ul li:nth-child(3) p {padding-right:20%;}

.main-service {position:relative;}
.main-service .inner {display:flex; align-items:center; height:890px;}
.main-service .main-title {color:#fff;}
.main-service .bg {position:fixed; top:50%; left:0; transform:translateY(-50%); width:100%; height:100%; background:url('../img/main/bg_service.jpg') 50% 50% no-repeat; background-size:cover; z-index:-1;}

.main-news {padding:150px 0; background:#f5f5f5;}
.main-news .inner {position:relative;}
.main-news .main-more {position:absolute; top:10px; right:20px;}
.main-news .list ul {display:flex; margin:0 -25px;}
.main-news .list ul li {width:33.333333%; padding:0 25px;}
.main-news .list ul li a {display:block;position:relative; border-top:1px solid #151515; padding-top:35px;}
.main-news .list ul li .tit {font-size:22px; line-height:1.4em; font-weight:700; margin-bottom:24px; transition:0.3s; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.main-news .list ul li .cnt {font-size:20px ;line-height:1.6em; opacity:.80; height:calc(1.6em * 1 * 2); -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box;  -webkit-box-orient:vertical; transition:0.3s;}
.main-news .list ul li .date {margin:24px 0 55px; font-size:16px; line-height:1.4em; opacity:.80; transition:0.3s;}
.main-news .list ul li .pic {position:relative; height:0; padding-bottom:51.8%; overflow:hidden;}
.main-news .list ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100% !important; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.main-news .list ul li .pic:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #dedede;}
.main-news .list ul li .more {position:absolute; top:20px; right:0; width:27px; height:16px; background:url('../img/main/more2.png') 0 0 no-repeat; background-size:contain; transition:0.3s;}
.main-news .list ul li a:hover .tit,
.main-news .list ul li a:hover .cnt,
.main-news .list ul li a:hover .date {color:#002b60}
.main-news .list ul li a:hover .pic img {transform:translateY(-50%) scale(1.04,1.04); -ms-transform:translateY(-50%) scale(1.04,1.04); -webkit-transform:translateY(-50%) scale(1.04,1.04);}
.main-news .list ul li a:hover .more {right:10px;}

.main-company {background:#fff; padding:150px 0;}
.main-company ul {display:flex; margin:0 -10px;}
.main-company ul li {width:18%; padding:0 10px; height:592px; overflow:hidden; transition: all 0.3s ease-in-out;}
.main-company ul li .box {display:block; position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; border-radius:20px;}
.main-company ul li:nth-child(1) .box {background-image:url('../img/main/slide_1.jpg');}
.main-company ul li:nth-child(2) .box {background-image:url('../img/main/slide_2.jpg');}
.main-company ul li:nth-child(3) .box {background-image:url('../img/main/slide_3.jpg');}
.main-company ul li .content {position:absolute; top:55px; left:0; width:100%; padding:0 30px; color:#fff; z-index:1; transition: all 0.3s ease-in-out;}
.main-company ul li .tit {font-size:30px; line-height:1.3em;font-weight:700;}
.main-company ul li .more {display:none; margin-top:30px; align-items:center; position:relative; padding:0 22px; width:175px; height:50px; font-size:14px; line-height:1.3em; border:1px solid #fff; opacity:0; z-index:-9999; transition: all 0.3s ease-in-out;}
.main-company ul li .more:after {content:""; position:absolute; top:0; right:22px; width:42px; height:100%; background:url('../img/main/more_on.png') 50% 50% no-repeat; background-size:contain; transition:.3s}
.main-company ul li.active {width:72%;}
.main-company ul li.active .content {top:auto; bottom:80px; padding:0 80px;}
.main-company ul li.active .tit {font-size:60px;}
.main-company ul li.active .more {display:inline-flex; opacity:1; z-index:1;}
.main-company ul li .more:hover {background:#002b60; border-color:#002b60;}



/* 일본어 */
html:lang(ja) .main-feature ul li .number {
    font-family: "Pretendard JP", sans-serif;
}
html:lang(ja) .main-feature ul li .number {
    font-size: 80px;
}

@media (max-width: 1399px) {
    html:lang(ja) .main-feature ul li .number {
        font-size: 60px;
    }
}

@media (max-width: 1100px) {
    html:lang(ja) .main-feature ul li .number {
        font-size: 50px;
    }
}
@media (max-width: 1024px) {
    html:lang(ja) .main-feature ul li .number {
        font-size: 40px;
    }
}

@media (min-width: 641px) {
    html:lang(ja) .main-company ul li:not(.active) .tit {
        font-size: 22px;
    }
}