@charset "utf-8";


/* common */
.mp-tit {font-size: 58px; font-weight: 700; color:#fff; line-height: 1.25; text-transform: uppercase;}
.mp-desc {font-size: 18px; line-height: 1.75; color:#fff; padding-top: 25px;}

.link-more {width: 176px; font-size: 17px; font-weight: 700; color:#fff; border-bottom: 2px solid #fff; transition: 0.2s;}
.link-more .btn {display: flex; align-items: center; justify-content: space-between;padding-bottom: .2em; transition: 0.2s;}
.link-more .icon {transition: 0.2s;}

.bg {position: absolute;top: 0; left:0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}

@media screen and (hover:hover) {
  .link-more:hover {border-color:var(--primary);}
  .link-more:hover .btn {color:var(--primary);}
  .link-more:hover .btn .icon svg path{stroke:var(--primary);}
}
@media screen and (max-width: 1399px) {
  .fp-section {height: auto !important;}
  .fp-tableCell {height: auto !important;}
  .mp-tit {font-size: 48px;}
  .mp-desc {font-size: 17px;}
}
@media screen and (max-width: 767px) {
  .mp-tit {font-size: 38px;}
  .mp-desc {font-size: 16px;}
}


.main-visual {width: 100%; height: 100%;}
.main-visual .visual-slide {width: 100%; height: 100%; position: relative;}
.main-visual .visual-slide.shadow::before {content:""; position: absolute;width: 50%; height: 100%; background:linear-gradient(to right, rgba(0, 0, 0,.3) , transparent); top:0; left:0;}
.main-visual .visual-slide .visual-slide-video {width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; z-index: -1;}
.main-visual .visual-slide .container { height: 100%; display: flex; align-items: flex-end; }
.main-visual .visual-slide .text-cont {color:#fff;margin-bottom: 200px;}
.main-visual .visual-slide .title { font-size: 66px; font-weight: 700; line-height: 1.25; opacity: 0; transform: translateY(50px); transition: opacity 1s, transform 1s;}
.main-visual .visual-slide .desc {font-size: 20px; font-weight: 500; color:rgba(255, 255, 255,0.8); opacity: 0; margin-top: 1.2em; display: block; transform: translateY(50px); transition: opacity 1s, transform 1s;}

.main-visual.swiper .controller {bottom: 520px; position: relative; display: flex;  margin: 0 auto; height: 35px;}
.main-visual.swiper .controller .inner {width: 211px; position: relative; display: flex; align-items: center; justify-content: center;}
.main-visual.swiper .controller .pagination {z-index: 111; font-size: 23px; pointer-events: none; color:rgba(255, 255, 255,0.5); text-align: center;}
.main-visual.swiper .controller .pagination .swiper-pagination-current {font-weight: 600; color: #fff;}
.main-visual.swiper .controller .pagination .swiper-pagination-total {font-weight: 400;}
.main-visual.swiper .controller .navi {width: 100%; height: 100%; position: absolute;top: 0;}
.main-visual.swiper .controller .navi .swiper-button-prev:after {display: none;}
.main-visual.swiper .controller .navi .swiper-button-next:after {display: none;}

.init.main-visual .visual-slide.swiper-slide-active .title {opacity: 1; transform: translateY(0);}
.init.main-visual .visual-slide.swiper-slide-active .desc {opacity: 1; transform: translateY(0);}

@media screen and (max-width:1399px) {
  #mp-fp-visual-01.fp-section {height: 100vh !important;}
  #mp-fp-visual-01 .fp-tableCell {height: 100vh !important;}
  .main-visual .visual-slide .title {font-size: 34px;}
  .main-visual .visual-slide .desc {font-size: 18px;}

  .main-visual.swiper .controller {bottom: 480px;}
  .main-visual.swiper .controller .inner {width: 190px;}
  .main-visual.swiper .controller .pagination {font-size: 20px;}
}
@media screen and (max-width:767px) {
  .main-visual .visual-slide .text-cont {margin-bottom: 30%;}
  .main-visual .visual-slide .title  {font-size: 24px;}
  .main-visual .visual-slide .desc {font-size: 16px;}

  .main-visual.swiper .controller {bottom: 42%;}
}


/* company */
.company {position: relative;}
.company .head {margin-bottom: 40px;}
.company .mp-tit {color: #707070;}

.company .contents {position: relative;}
.company .contents .txt-box {padding-left: 360px; margin-top: 98px;}
.company .contents .txt-box p {font-size: 22px; font-weight: 700; color: #4A4B4C; line-height: 1.7; word-break: keep-all; margin-bottom: 35px;}
.company .contents .txt-box .link-more {color:#707070; border-bottom: 2px solid #707070;}


@media (hover: hover) {
  .company .contents .txt-box .link-more:hover {border-bottom: 2px solid var(--primary);}
}
@media screen and (max-width: 1399px) {
  .company .container {padding: 180px 0;}
  .company .contents img {width: 500px;}
  .company .contents .txt-box {padding-left: 0;}
  .company .contents .txt-box p {font-size: 22px;}
}
@media screen and (max-width: 767px) {
  .company .container {padding: 120px 0;}
  .company .contents img {width: 100%;}
  .company .contents .txt-box {display: block;}
  .company .contents .txt-box p {font-size: 18px; margin-bottom: 40px;}
}





/* product */

.product {overflow: hidden;}
.product .mp-tit-tag {color:#c7c7c7}
.product .mp-desc {padding-bottom: 50px;}
.product .prod-container {height: 100%;}
.product .prod-content {height: 100%; display: flex; position: relative;}
.product .prod-content .container {position: relative;}
.product .prod-content .content {display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-block: 180px 160px;}
.product .prod-content .content.moView {display: none;}
.product .prod-content .content .mp-tit {color:#fff;}

.product .prod-content .content .mathread-box {}
.product .prod-content .content .mathread-box img {width: 400px; transform: translateY(22px);}
.product .prod-content .content .mathread-box p {font-size: 16px; font-weight: 400; line-height: 1.75; color: #CBCBCB;}

.product .prod-content .item-ls {}
.product .prod-content .item-ls .item {position: absolute; width: auto; display: flex; align-items: center; cursor: pointer; padding: 4px; backdrop-filter: blur(10px); border-radius: 45px; background: rgba(0, 0, 0, 0.2); transition: all .4s ease-in-out;}

.product .prod-content .item-ls .item.item-1 {left: 36%; top: 67%;}
.product .prod-content .item-ls .item.item-2 {left: 44%; top: 50%;}
.product .prod-content .item-ls .item.item-3 {left: 63%; top: 68%;}
.product .prod-content .item-ls .item.item-4 {left: 75%; top: 52%;}
.product .prod-content .item-ls .item.item-5 {left: 87%; top: 40%;}

.product .prod-content .item-ls .item .bullet {width: 35px; height: 35px; background: var(--primary); border-radius: 50%; position: relative; margin-right: 0; transition: all .4s ease-in-out;}
.product .prod-content .item-ls .item .bullet::before {content: ''; position: absolute; top: 50%; left: 50%; width: 19px; height: 3px; background: #fff; transform: translate(-50%, -50%);}
.product .prod-content .item-ls .item .bullet::after {content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 19px; background: #fff; transform: translate(-50%, -50%);}
.product .prod-content .item-ls .item h3 {font-size: 0; font-weight: 700; color: #fff; transition: all .4s ease-in-out;}

@media (hover: hover) {
  .product .prod-content .item-ls .item:hover {padding-right: 16px;}
  .product .prod-content .item-ls .item:hover .bullet {margin-right: 12px;}
  .product .prod-content .item-ls .item:hover h3 {font-size: 20px;}
}

@media screen and (max-width:1399px){
  .product .prod-container {padding-top: 0; height: auto;}
  .product .prod-content {height: 100%;}
  .product .prod-content .visual {top:50%; width: 50%; transform: translate(0,-50%);}
  .product .prod-content .content .cont-top {padding-bottom: 250px;}
  .product .prod-content .content .mathread-box img {width: 360px; transform: translateY(18px);}
  .product .prod-content .content .mathread-box p {font-size: 15px;}

  .product .prod-content .item-ls .item.item-1 {left: 22.5%; top: 58.5%;}
  .product .prod-content .item-ls .item.item-2 {left: 34.5%; top: 46.5%;}
  .product .prod-content .item-ls .item.item-3 {left: 67.5%; top: 61%;}
  .product .prod-content .item-ls .item.item-4 {left: 80%; top: 48%;}
  .product .prod-content .item-ls .item.item-5 {left: 90%; top: 42%;}

  .product .prod-content .item-ls .item .bullet {width: 30px; height: 30px;}
  .product .prod-content .item-ls .item .bullet::before {width: 15px; height: 2px;}
  .product .prod-content .item-ls .item .bullet::after {width: 2px; height: 15px;}
}
@media screen and (max-width:767px){
  .product .prod-content .content {padding: 120px 0;}
  .product .prod-content .content.moHide {display: none;}
  .product .prod-content .content.moView {display: flex;}
  .product .prod-content .item-ls {display: none;}

  .product .prod-content {flex-direction: column; height: auto; justify-content: space-between;}
  .product .prod-content .item-ls .item {display: none;}
}





/* Technology */
.technology.container {width: 100%; height: 100vh; display: flex; justify-content: right; align-items: center; position: relative; background: #000;}

.technology .contents {width: 700px;}
.technology .contents .head {margin-bottom: 80px;}
.technology .mp-tit {color: #fff;}
.technology .mp-desc {color: #ACACAC;}

.technology .content {width: 600px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 30px; margin-bottom: 100px;}
.technology .content .item .top {width: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #707070;}
.technology .content .item .top .tit {font-size: 24px; font-weight: 600; color: var(--secondary);}
.technology .content .item .top img {}
.technology .content .item p {font-size: 16px; font-weight: 400; color: #fff; line-height: 1.5; margin-top: 14px;}

.technology .img-box {width: 50vw; height: 100vh; position: relative; overflow: hidden;}
.technology .img-box .bg {z-index: 1;}


@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .technology.container {flex-direction: column; height: auto;}
  .technology .contents {width: min(calc(100% - 30px), 720px);}
  .technology .contents .head {padding: 120px 0 50px; margin-bottom: 0;}
  .technology .content {width: 100%; margin-bottom: 50px;}
  .technology .img-box {width: 100%; height: 500px;}
  .technology .link-more {margin-bottom: 120px;}
}
@media screen and (max-width: 767px) {
  .technology .content {grid-template-columns: 1fr;}
  .technology .img-box {width: 100%; height: 400px;}
}


/* ETC */
.etc {width: 100%; height: 100%; background-color: #302F2F;}
.etc .container {padding-block: 150px;}
.etc .mp-head .mp-tit {color: #5B5B5B; margin-bottom: 20px;}
.etc .more-btn {color:var(--primary-dark); font-weight: 600; display: flex; align-items: center;  gap: 7px; line-height: 1; cursor: pointer; transition: .2s ease;}
.etc .body {display: flex; gap:17px ;}
.etc .cont-head {display: flex; justify-content: space-between; width: 100%; margin-bottom: 30px; position: relative; padding: 33px 25px; min-height: 262px; flex-direction: column; }
.etc .cont-head .wrap {}
.etc .cont-head .sbj {font-size: 30px; color:#fff; margin-bottom: 8px; line-height: 1.2; font-weight: 600;}
.etc .more-link {width: 122px; margin-left: auto;}

.etc .news-cont {width: 684px; flex-shrink: 0;}
.etc .news-cont .news-thumb {position: absolute;top:0; left:0; width: 100%; height: 100%; z-index: -1; border-radius: 10px;}
.etc .news-cont .news-ls {display: flex; flex-direction: column; border-bottom: 2px solid #C8C8C8;}
.etc .news-cont .news-ls > li a {font-size: 20px; display: flex; align-items: center; padding: 20px 19px; border-bottom: 1px solid #e5e5e5;cursor: pointer; transition: .2s ease;font-size: 17px; gap: 1em;}
.etc .news-cont .news-ls > li:last-child { border-bottom: none;}
.etc .news-cont .news-ls > li .sml-tit {color:#858585; font-weight: 700; width: 80px; text-transform: capitalize; flex-shrink: 0;}
.etc .news-cont .news-ls > li:first-child .sml-tit {color:var(--primary);}
.etc .news-cont .news-ls > li .tit {font-weight: 400; color:#fff;}
.etc .news-cont .news-ls > li .date {margin-left: auto; color:#ACACAC; flex-shrink: 0;}

.etc .etc-cont {width: 100%; display: flex; flex-direction: column; gap: 16px;}
.etc .etc-cont .cont {border-radius: 10px; padding: 33px 29px; display: flex;  justify-content: space-between;  min-height: 208px; position: relative; cursor: pointer; transition: .2s ease;}
.etc .etc-cont .cont .text-cont {position: relative;display: flex; flex-direction: column; justify-content: space-between;}
.etc .etc-cont .cont .text-cont .tit {font-size: 30px; font-weight: 600; font-family: var(--ff-primary); color:#fff;}
.etc .etc-cont .cont .text-cont .tit .sml {font-size: 17px; font-weight: 600; line-height: 1.1; color:rgba(255, 255, 255, 0.6); display: block; margin-bottom: 5px;}

.etc .etc-cont .cont .text-cont .icon {}
.etc .etc-cont .cont .text-cont .icon svg {display: block;}
.etc .etc-cont .top {display: flex; gap: 16px; height: 265px;} 
.etc .etc-cont .top .cont {width: 50%}
.etc .etc-cont .etc-icon {position: absolute; bottom: 28px; right: 34px; width: 120px; height: 120px;}
.etc .etc-cont .etc-icon.filter {filter: brightness(0.5);}

.etc .etc-cont .cont.pr-cont {position: relative; background: #1A46C7;}
.etc .etc-cont .cont.pr-cont .icon svg path {stroke: #fff;}
.etc .etc-cont .cont.pr-cont .icon svg line {stroke: #fff;}

.etc .etc-cont .cont.recruit-cont {background: #21409A;}
.etc .etc-cont .cont.pr-cont .pr-img {width: 100%;height: 100%;object-fit: cover;position: absolute;top:0; left:0;z-index: 0;} 

.etc .etc-cont .inquiry-cont {background: #707070;}

.etc .etc-cont .cont:hover {opacity: 0.9;}

@media (hover:hover) {
.etc .link-more:hover {border-color:var(--primary);}
.etc .link-more:hover .btn {color:var(--primary);}
.etc .link-more:hover .btn svg path {stroke:var(--primary);}
}

@media screen and (max-width: 1399px) {
  .wrap.etc {height: auto !important; overflow: visible !important;}
  .wrap.etc .container {height: auto !important; overflow: visible !important;}
  .wrap.etc .body {display: block; height: auto !important; overflow: visible !important;}
  .etc .cont-head .sbj {font-size: 24px;}
  
  .more-link {gap: 15px;}
  .more-link .val {font-size: 18px;}
  .more-link .icon {width: 30px; height: 30px;}

  .etc .news-cont {width: 100%; margin-bottom: 50px;}


  .mp-mp-sc-etc-0block:first-child {padding-top: 0;}
  .mp-mp-sc-etc-0block:not(:last-child) {margin-bottom: 50px;}
  .mp-news .wrap {gap: 50px; grid-template-columns: repeat(1, 1fr); padding-top: 35px; margin-bottom: 50px;}
  .mp-news__head .title {font-size: 32px;}
  .mp-news__head .desc {font-size: 16px;}
  .mp-news__ls {grid-column: span 1;}
  .mp-news__ls li a {padding-left: 0; padding-bottom: 15px; font-size: 16px;}
  .quick_card {gap: 20px;}

  .etc .etc-cont .top {height: 208px;}
  .etc .etc-cont .cont .text-cont .tit {font-size: 24px;}
  .etc .etc-cont .etc-icon {bottom: 20px; right: 20px; width: 90px; height: 90px;}
  .etc .etc-cont .cont.pr-cont .icon {width: 30px; height: 30px;}
}
@media screen and (max-width: 767px) {
  .etc .container {padding-block: 120px;}
  .etc .cont-head .sbj {font-size: 22px;}

  .more-link {gap: 12px;}
  .more-link .val {font-size: 16px;}
  .more-link .icon {width: 26px; height: 26px;}
  .more-link .icon svg {width: 60%;}
  .mp-mp-sc-etc-0block:not(:last-child) {margin-bottom: 50px;}
  .mp-news .bar {border-top-width: 2px;}
  .mp-news .wrap {padding-top: 25px; gap: 30px;}
  .mp-news__head .title {font-size: 26px;}
  .mp-news__ls li a {font-size: 16px; padding: 10px 0;}
  .quick_card {grid-template-columns: repeat(1, 1fr);}
  .quick_card__item {padding-bottom: 15px;}
  .quick_card__item .thumb {margin-bottom: 15px;}

  .etc .text-cont .icon svg {width: 30px; height: 30px;}
  .etc .etc-cont .cont .text-cont .tit {font-size: 22px;}
  .etc .etc-cont .etc-icon {width: 60px; height: 60px;}
}
@media screen and (max-width: 499px) {
  .etc .etc-cont .cont {padding: 20px;}
  .etc .news-cont .news-ls > li .date {display: none;}
}








/* Base */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}