@charset "utf-8";

/* MAIN-VISUAL */
.main-visual {position: relative; width: 100%;}
.main-visual .main-slide .item {position: relative; width: 100%; height: 100vh;}
.main-visual .main-slide .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; transform: scale(1.1); z-index: 1;}
/* .main-visual .main-slide .item:nth-child(1) .img-box {background-image: url('../img/main/main-visual01.jpg');}
.main-visual .main-slide .item:nth-child(2) .img-box {background-image: url('../img/main/main-visual02.jpg');}
.main-visual .main-slide .item:nth-child(3) .img-box {background-image: url('../img/main/main-visual03.jpg');} */
.main-visual .item.slick-active .img-box {transform: scale(1); transition: all 3.5s;}
.main-visual .text-slide {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1550px; width: 100%; padding: 0 15px; z-index: 5;}
.main-visual .text-slide .item {height: 100%; padding-top: 30px;}
.main-visual .text-slide .text-box {height: 100%; margin-top: 30px;}
.main-visual .text-slide .text-box h2 {font-size: 60px; font-weight: 700; line-height: 1.4em; color: #fff;}
.main-visual .text-slide .slick-active .text-box h2 {animation: text-down 1.2s both 0.5s;}
@keyframes text-down {
    0% {
        transform: translateY(-60px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}
@keyframes text-up {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }

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

.main-visual .paging {margin-top: 48px;}
.main-visual .slick-dots {display: flex; gap: 20px;}
.main-visual .slick-dots button {position: relative; width: 12px; height: 12px; border-radius: 50%; background: rgba(0, 0, 0, 0.60); border: 0; font-size: 0; transition: all 0.5s;}
.main-visual .slick-dots .slick-active button {width: 16px; height: 16px; background: #0F87E9;}

/* SECTION 공통 */
.section .cont-wrap {display: flex; flex-direction: column; justify-content: center; height: 100%;}
.section-title {margin-bottom: 60px; text-align: left;}
.section-title .eng {opacity: 0; font-family: "Poppins", sans-serif; font-size: 28px; font-weight: 600; line-height: 1.4em; letter-spacing: 0.84px; text-transform: uppercase; color: #2050B8; margin-bottom: 10px;}
.section-title .title {opacity: 0; font-size: 46px; font-weight: 700; line-height: 1.3em; color: #070707;}
.section.on .section-title .eng {animation: text-up 1.2s both .4s;}
.section.on .section-title .title {animation: text-up 1.2s both .5s;}

.m-product {background: rgba(16, 0, 105, 0.04);}
.m-product .title-wrap {display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 60px;}
.m-product .section-title {margin-bottom: 0;}
.m-product .tab-btn {opacity: 0;}
.m-product .tab-btn ul {display: flex; gap: 12px;}
.m-product .tab-btn ul li a {font-size: 22px; font-weight: 700; line-height: 1.8em; color: #999; text-align: center; padding: 9px 49px; background: #fff; border: 1px solid #CCC; border-radius: 30px; transition: all 0.5s;}
.m-product .tab-btn ul li a:hover {color: #131752; border: 1px solid #131752;}
.m-product .tab-btn ul li.active a {background: #131752; border: 1px solid #131752; color: #fff;}
.m-product .slide-wrap {opacity: 0; position: relative; height: 484px;}
.m-product .slide-items {position: absolute; opacity: 0; z-index: -1; width: 1828px; margin: 0 -20px;}
.m-product .slide-items.active {opacity: 1; z-index: 1;}
.m-product .slide-item {padding: 0 20px;}
.m-product .slide-item a {position: relative; padding: 32px 32px 24px 32px; background: url('../img/main/product-item-bg.jpg') no-repeat center center/cover; border-radius: 25px 25px 0 25px; overflow: hidden; transition: all 0.5s;}
.m-product .slide-item a:before {position: absolute; bottom: 0; right: -1px; content: ''; width: 106px; height: 106px; background: url('../img/main/product-btn-bg.jpg') no-repeat left top; z-index: 5; transition: all 0.5s;}
.m-product .slide-item a:after {transform: translateY(10px); opacity: 0; position: absolute; bottom: 72px; right: -18px; content: ''; width: 223px; height: 159px; background: url('../img/main/product-item-deco.png') no-repeat center center; z-index: 10;}
.m-product .slide-item .img-box {margin-bottom: 28px; border-radius: 20px; overflow: hidden;}
.m-product .slide-item .img-box .pic {position:relative; height:0; padding-bottom:82.15%; overflow:hidden; z-index: 20; transition:all 0.6s;}
.m-product .slide-item .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.6s;}
.m-product .slide-item .text-box {padding-right: 47px;}
.m-product .slide-item .text-box h4 {font-size: 26px; font-weight: 700; line-height: 1.4em; color: #070707; height:calc(1.4em * 1 * 3); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; transition: all 0.5s;}
.m-product .slide-item .btn {position: absolute; bottom: 8px; right: 8px; width: 54px; height: 54px; border-radius: 50%; background: transparent; z-index: 10; transition: all 0.5s;}
.m-product .slide-item .btn:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; width: 14px; height: 2px; background: #999; transition: all 0.5s;}
.m-product .slide-item .btn:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; width: 14px; height: 2px; background: #999; transition: all 0.5s;}
.m-product .slide-item a:hover {background-image: url('../img/main/product-item-active-bg.jpg');}
.m-product .slide-item a:hover:before {background-image: url('../img/main/product-btn-active-bg.jpg');}
.m-product .slide-item a:hover:after {transform: translateY(0); opacity: 0.08; transition: all 0.6s 0.1s;}
.m-product .slide-item a:hover .text-box h4 {color: #fff;}
.m-product .slide-item a:hover .btn {background: #2050B8;}
.m-product .slide-item a:hover .btn:before {background: #fff;}
.m-product .slide-item a:hover .btn:after {transform: translate(-50%,-50%) rotate(90deg); background: #fff;}

.m-product.on .tab-btn {animation: text-up 1.2s both .5s;}
.m-product.on .slide-wrap {animation: text-up 1.2s both .8s;}

.m-company {background: url('../img/main/company-bg.jpg') no-repeat center center/cover;}
.m-company ul {display: flex; gap: 40px;}
.m-company ul li {opacity: 0;}
.m-company ul li a {position: relative; border-radius: 24px; overflow: hidden; transition: all 0.5s;}
.m-company ul li .img-box img {transition: all 0.5s;}
.m-company ul li .text-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; z-index: 5; transition: all 0.5s;}
.m-company ul li .text-box h4 {font-size: 28px; font-weight: 700; line-height: 1.4em; color: #fff; margin-bottom: 7px;}
.m-company ul li .text-box p {font-size: 20px; font-weight: 700; line-height: 1.6em; color: #F8F8F8;}
.m-company ul li a:hover .img-box img {transform: scale(1.06);}
.m-company ul li a:hover {transform: translateY(-30px);}
.m-company.on ul li:nth-child(1) {animation: text-up 1.2s both .6s;}
.m-company.on ul li:nth-child(2) {animation: text-up 1.2s both .8s;}
.m-company.on ul li:nth-child(3) {animation: text-up 1.2s both 1s;}

.m-resources ul {display: flex; gap: 36px;}
.m-resources ul li {opacity: 0;}
.m-resources ul li a {position: relative;}
.m-resources ul li .img-box {position: relative; border-radius: 24px; overflow: hidden;}
.m-resources ul li :before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: rgba(19,23,82,0.8); transition: all 0.4s;}
.m-resources ul li a:hover .img-box:before {opacity: 1;}
.m-resources ul li .img-box:after {opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin-top: 20px; content: ''; width: 120px; height: 120px; background-repeat: no-repeat; background-position: center center; transition: all 0.8s;}
.m-resources ul li a:hover .img-box:after {opacity: 1; margin-top: 0;}
.m-resources ul li:nth-child(1) .img-box:after {background-image: url('../img/main/icon-resources-manual.png');}
.m-resources ul li:nth-child(2) .img-box:after {background-image: url('../img/main/icon-resources-catalog.png');}
.m-resources ul li:nth-child(3) .img-box:after {background-image: url('../img/main/icon-resources-msds.png');}
.m-resources ul li:nth-child(4) .img-box:after {background-image: url('../img/main/icon-resources-youtube.png');}
.m-resources ul li .text-box {position: relative; height: 95px; align-content: center; border-bottom: 1px solid #eee;}
.m-resources ul li .text-box:after {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ''; width: 0; height: 1px; background: #131752; transition: all 0.6s;}
.m-resources ul li a:hover .text-box:after {width: 100%;}
.m-resources ul li .text-box h4 {font-size: 28px; font-weight: 700; line-height: 1.4em; color: #070707; text-align: center; transition: all 0.5s;}
.m-resources ul li a:hover .text-box h4 {color: #131752;}
.m-resources.on ul li:nth-child(1) {animation: text-up 1.2s both .6s;}
.m-resources.on ul li:nth-child(2) {animation: text-up 1.2s both .8s;}
.m-resources.on ul li:nth-child(3) {animation: text-up 1.2s both 1s;}
.m-resources.on ul li:nth-child(4) {animation: text-up 1.2s both 1.2s;}

.m-contact .box-wrap {display: flex; flex-direction: column; height: calc(100vh - 90px); margin-top: 90px;}
.m-contact .contact-wrap {display: flex; flex: 1 1 auto; }
.m-contact .contact-wrap > div {width: 50%;}
.m-contact .contact-wrap .map .root_daum_roughmap {width:100% !important; height:100% !important;}
.m-contact .contact-wrap .map .root_daum_roughmap .wrap_map {height:100% !important;}
.m-contact .contact-wrap .map .root_daum_roughmap .border1,
.m-contact .contact-wrap .map .root_daum_roughmap .border2 {border: none;}
.m-contact .contact-wrap .map .root_daum_roughmap .border3, 
.m-contact .contact-wrap .map .root_daum_roughmap .border4 {background-color: transparent;}
.m-contact .contact-wrap .info-location {background: #EDEDED;}
.m-contact .contact-wrap .info-contact {background: #1C216B;}
.m-contact .contact-wrap .info {height: 50%; align-content: center;}
.m-contact .contact-wrap .info .inner {max-width: 738px; width: 100%; padding: 20px 15px 20px 60px;}
.m-contact .contact-wrap .info .title {opacity: 0; font-size: 28px; font-weight: 700; line-height: 1.4em; margin-bottom: 20px;}
.m-contact .contact-wrap .info-location .title {color: #131752;}
.m-contact .contact-wrap .info-contact .title {color: #fff;}
.m-contact .contact-wrap .info .details-wrap {opacity: 0; display: flex; gap: 10px;}
.m-contact .contact-wrap .info .details-wrap .text {width: 1%; flex: 1 1 auto;}
.m-contact .contact-wrap .info .details-wrap .btn {max-width: 32px; width: 100%;}
.m-contact .contact-wrap .info .details-wrap .btn-more {transition: all 0.5s;}
.m-contact .contact-wrap .info .details-wrap .btn-more:hover {transform: rotate(-45deg);}
.m-contact .contact-wrap .info dl {display: flex;}
.m-contact .contact-wrap .info-location dt {max-width: 112px; width: 100%; font-size: 20px; font-weight: 700; line-height: 1.6em; color: #222;}
.m-contact .contact-wrap .info-location dd {width: 1%; flex: 1 1 auto; font-size: 18px; font-weight: 400; line-height: 1.6em; color: #222;}
.m-contact .contact-wrap .info-contact .details-wrap p {font-size: 20px; line-height: 1.6em; color: #F8F8F8; margin-bottom: 20px;}
.m-contact .contact-wrap .info-contact .details-wrap .wrap {display: flex; flex-wrap: wrap;}
.m-contact .contact-wrap .info-contact .details-wrap dl {font-size: 22px; font-weight: 700; line-height: 1.6em; color: #eee; margin-right: 32px;}
.m-contact .contact-wrap .info-contact .details-wrap dt {margin-right: 16px;}

.m-contact .partner-wrap {flex-shrink: 0;  background: url('../img/main/partner-bg.jpg') no-repeat center center/cover; padding: 56px 0;}
#main .m-contact .partner-wrap .container {max-width: 1294px;}
.m-contact .partner-wrap .title {opacity: 0; font-size: 36px; font-weight: 700; line-height: 1.4em; color: #070707; text-align: center; margin-bottom: 30px;}
.m-contact .partner-wrap .logo-wrap {opacity: 0;}
.m-contact .partner-wrap .logo-wrap ul {display: flex; flex-wrap: wrap; margin: -8px;} 
.m-contact .partner-wrap .logo-wrap ul li {width: 20%; padding: 8px;}

.m-contact.on .contact-wrap .info .title {animation: text-up 1.2s both .4s;}
.m-contact.on .contact-wrap .info .details-wrap {animation: text-up 1.2s both .4s;}
.m-contact.on .partner-wrap .title {animation: text-up 1.2s both .9s;}
.m-contact.on .partner-wrap .logo-wrap {animation: text-up 1.2s both 1.1s;}

/* FULLPAGE NAV */
#fp-nav {position: absolute; top: 50%; left: 40px; z-index: 50;}
#fp-nav ul {display: flex; flex-direction: column; gap: 20px;}
#fp-nav li a {width: 10px; height: 10px; border: 2px solid #999; border-radius: 5px; transition: all 0.5s;}
#fp-nav li a.active {height: 20px; background: #E75731; border: 2px solid #E75731;}
#fp-nav li:last-child {display: none;}