@charset "utf-8";

/* .mainRenew section{background-color: #f9f9f9;} */
/* .mainRenew {background: #fff;} */

/*** 비주얼 ***/
.secVisual{height:100vh; }
.swiper123{height: inherit;}

.swiper123 .sliderImg{height: 100%; width: 100%; object-fit: cover;}
.sliderImg1st{transition: 4s; transform: scale(1.5); }
.sliderImg1st.on{transform: scale(1);}

.swiper123 span{display: block; font-size: 30em; letter-spacing: -0.75px; color:var(--color-blue);}
.swiper123 h2{margin:2.5vh 0 4.5vh; font-size: 100em; letter-spacing: -0.25px; color:#fff; font-family: 'S-CoreDream-6Bold';}
.swiper123 p{font-size: 30em; letter-spacing: -0.75px; color:#fff; line-height: 1.6;}

.swiper123 .swiper-slide {display:flex; align-items:center;}
.swiper123 .secContainer{position: absolute; color:#fff;}
.swiper123 .secContainer span{display:block;}
.swiper123 .secContainer span, .swiper123 .secContainer h2, .swiper123 .secContainer p{transition: 1.6s; transform: translateX(-100px); opacity:0;}
.swiper123 .secContainer span.transOn, .swiper123 .secContainer h2.transOn, .swiper123 .secContainer p.transOn{transform: translateX(0px); opacity:1;}
.swiper123 .secContainer p.transOn{transition-delay: 500ms; /*transition-property: transform;*/}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{display:none;}
.swiper123 .swiper-button-prev, .swiper123 .swiper-button-next, .swiper123 .swiper-button-pause,  .swiper123 .swiper-button-start{margin: 0; width: auto; position: static; background: none; font-size:30em; color:rgba(255, 255, 255, 0.4) !important;}
.swiper123 .swiper-button-prev:hover, .swiper123 .swiper-button-next:hover, .swiper123 .swiper-button-pause:hover,  .swiper123 .swiper-button-start:hover{color: rgba(255, 255, 255, 1) !important}
.swiper123 .swiper-button-pause, .swiper123 .swiper-button-start{margin-top:5px; font-size: 20px;}
.swiper123 .swiper-button-prev{margin-left:30px;}
.swiper123 .swiper-button-start{display: none;}
.swiper123 .swiper-button-next:after, .swiper123 .swiper-container-rtl .swiper-button-prev:after, .swiper123 .swiper-button-prev:after, .swiper123 .swiper-container-rtl .swiper-button-next:after{display: none; }


.swiper123 .paginationWrap{position: absolute; bottom:14vh; left:12.5vw; z-index: 1; width: 50%;display: flex; align-items: center;}
.swiper123 .swiper-pagination{display: flex; position: static; width:93%; color:rgba(255, 255, 255, 0.4);}
.swiper123 .swiper-pagination-bullet{opacity:1; position:relative; width:33.33%; height: 4px; border-radius: 0; font-size: 20em; letter-spacing: -0.5px; background: rgba(255, 255, 255, 0.2);}
.swiper123 .swiper-pagination-bullet-active {color: #fff; background:rgba(255, 255, 255, 0.1);} 
.swiper123 .swiper-pagination-bullet i{position: absolute; left:0; bottom: 17px; font-style: normal; opacity: .4;}
.swiper123 .swiper-pagination-bullet-active i{opacity: 1;}
.swiper123 .bar { position: absolute; top: 0; left: 0; width:0; height: 4px; background: #fff; } 
.swiper123 .swiper-pagination-bullet-active .bar {opacity:1; animation-name: countingBar; animation-duration: 5s; /*animation-delay:.8s;*/ animation-timing-function: linear; animation-fill-mode:forwards; } 
@keyframes countingBar {
    0% { width: 0; } 
    100% { width:100%; } 
}

@media all and (max-width:1439px) {
    .swiper123 .paginationWrap{left:6vw;}
}
@media all and (max-width:767px) {
    .swiper123 h2{font-size: 80em;}
    .swiper123 .paginationWrap{width:80%}
}
@media all and (max-width:479px) {
    .swiper123 .secContainer{margin-top:-30px; }
    .swiper123 span, .swiperMainVisual p{font-size: 18px;}
    .swiper123 h2{font-size: 72em;}
    .swiper123 .paginationWrap{width:calc(90% - 6vw);}
    .swiper123 .swiper-button-prev{margin-left: 10px;}
}

/*** 제품소개 ***//* https://www.w3schools.com/howto/howto_css_flip_card.asp */
.secProduceInfo {position: relative; width: 100%; height: 100vh; background: url('../../_images/main/bg_productInfo.webp') left bottom no-repeat #000402; background-size: cover; overflow: hidden; z-index: 10;}
.secProduceInfo .titWrap h2, .secProduceInfo .titWrap p{color:#fff;}
.secProduceInfo .titWrap p {color: #fff; line-height: 1.3; word-break: keep-all;}

.secProduceInfo .itemWrap {position: absolute; top: 0; right:12.5vw; width: 36%; height: 100vh; font-family: 'S-CoreDream-6Bold';
    top:150px;
}
.secProduceInfo .itemWrap ul {position: absolute; /*중요 top: 200px;*/ right: 0; width: 100%; height: 60vh/*****140vh*****/;}
.secProduceInfo .itemWrap ul li {position: relative; width: 100%; height:100vh /**100vh**/; /*border-bottom: 1px solid red;*/}
.secProduceInfo .itemWrap a{font-size:32em; color:#fff; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
    width:100%; height:100%; display: flex; flex-wrap: wrap; justify-content: space-between;
}
.flipCardWrap{transition: all 1s ease; position: relative; top:5%; width:calc(50% - 25px); border-radius:0;  
    height:390px; /*****300px;*****/ 
}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(odd){margin-top:-45px; }
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(even){margin-top:45px; }
.secProduceInfo .itemWrap ul li .flipCard {
    position: relative; margin: auto; /*overflow: hidden;*/ 
    -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0);
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; transition: 1s; perspective: 1000px;
}
.secProduceInfo .itemWrap ul li .flipCardWrap.hehe .flipCard{width:100%; height:100%;}
.flipCardInner {width: inherit; height: inherit; transition: all 0.8s; transform-style: preserve-3d; width: 100%; height: 100%;}
.flipCard__front, .flipCard__back {position: absolute; width: inherit; height: inherit; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; overflow: hidden; transform:skew(-0.199999deg);}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(1) .flipCard__front{background-image: url('../../_images/main/bg_productInfo--bando.png');}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(2) .flipCard__front{background-image: url('../../_images/main/bg_productInfo--susi.png');}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(3) .flipCard__front{background-image: url('../../_images/main/bg_productInfo--functionalsusi.png');}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(4) .flipCard__front{background-image: url('../../_images/main/bg_productInfo--basic.png');}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(5) .flipCard__front{background-image: url('../../_images/main/bg_productInfo--hoero.png');}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(6) .flipCard__front{background-image: url('../../_images/main/bg_productInfo--infochem.png');}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(7) .flipCard__front{background-image: url('../../_images/main/bg_productInfo--gyemyeon.png');}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(8) .flipCard__front{background-image: url('../../_images/main/bg_productInfo--2cha.png');}
.secProduceInfo .itemWrap li .flipCardWrap:nth-child(9) .flipCard__front{background-image: url('../../_images/main/bg_productInfo--product.png');}
.flipCard__front {display: flex; justify-content: center; align-items: center; background-repeat: no-repeat; background-size: cover; 
        transition: 1s; /*border-radius: 50%;*/ border-radius: 40px; background-position: center center;
        
}
/* .flipCardWrap.hehe .flipCard__front {border-radius: 40px;} */

.flipCard__back {padding:13% 11.31%; transform: rotateY(180deg); background: url('../../_images/main/bg_productInfo-line.png'); color: white; border-radius: 40px; background-repeat: no-repeat;  background-size: cover;}
.flipCard__back dt{margin-bottom:12.29%; font-size: 32px;}
.flipCard__back dd{font-size: 22px; font-family: "SCDream3"; line-height:1.4;}
.flipCard__back i{transition: all .5s ease; padding: 5px; border: 3px solid #fff; border-radius: 50%; text-align: center; vertical-align: middle; position: absolute; bottom: 6.25%; left: 50%; transform: translateX(-50%);}


@media screen and (min-width:768px) { 
    .flipCardWrap:hover .flipCardInner {transform: rotateY(180deg);}  
    .flipCard__back i:hover{color:var(--color-red); border: 3px solid var(--color-red);}

    .onPaddingTop{padding-top:230px;}
}
@media all and (max-width:1600px) {
    .secProduceInfo .itemWrap ul li .flipCard {margin-top: 50px;}
}
@media all and (max-width:1279px) {
    .flipCardWrap{height:300px;}
}
@media all and (max-width:767px) {
    .secProduceInfo .secContainer .titWrap{margin-top:65px;}

    .secProduceInfo .itemWrap {top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 68%;}
    .secProduceInfo .itemWrap ul {display: flex; position: relative; top: 0; width: 1500px; /*2500px;*/ height: 100%; 
        left: 30px; /***** 0; *****/ 
    }   
    .secProduceInfo .itemWrap li .flipCardWrap:nth-child(odd), .secProduceInfo .itemWrap li .flipCardWrap:nth-child(even){margin-top:0;}
    .secProduceInfo .itemWrap a{flex-wrap: nowrap; gap:15px; justify-content: flex-start;}
    .flipCardWrap{width:300px;}
    .secProduceInfo .itemWrap ul li .flipCard{width: 100%;}
    .flipCardWrap .flipCard__front, .flipCardWrap.hehe .flipCard__front{border-radius: 20px;}
    /* .flipCard__front, .flipCard__front.on{border-radius: 200px;} */
}

@media screen and (max-width:479px) { 
    .secProduceInfo .itemWrap a{font-size:22px;}
    .flipCardWrap{width:140px; height:200px;}
}

/*** 회사소개 ***/
.secCompanyInfo{background: url('../../_images/main/bg_companyInfo.png') bottom left no-repeat; background-size: contain;}
.secCompanyInfo .secContainer{text-align: center;}
.secCompanyInfo .list{margin-bottom:5vw; display: flex; gap:8px; justify-content: center;}
.secCompanyInfo .list a{margin-top:40px; padding:0 30px; font-size: 22em; height:56px; line-height: 56px; background: #e4e4e4; color: #111; border-radius: 50px; }

/* 카운팅 */
.secCount{position: relative; background: none;}
/* .secCount .videoWrap{position: absolute; top: 0; left: 0; height: 100%; width:100%;}
.secCount video{width: 100%; height: 100%; object-fit: cover;} */
  
.secCount{position: relative; display: flex; justify-content: space-between; text-align: left; gap:13px; }
.secCount dl{transition: background 1.3s ease; padding:46px 42px; width: 100%; background-color: #00000020; border-radius: 20px; overflow: hidden; border:1px solid #cacaca; background-repeat: no-repeat; background-size: cover;}
    .secCount dt{font-size: 26em;}
    .secCount .count{margin:30px 0 50px; display: flex; align-items: flex-end;}
        .secCount .num{font-size: 56em; font-family: 'S-CoreDream-6Bold';}
        .secCount .unit{font-size: 26em;}
    .secCount .des{font-size: 16px; line-height: 1.6; word-break: break-all;}

@media (hover: hover) {
    .secCompanyInfo .list a:hover{font-family:'S-CoreDream-6Bold'; color:#fff; background-color: var(--color-red2);}
    
    .secCount dl:hover{color:#fff;}
    .secCount dl:nth-child(1):hover{background-image: url('../../_images/main/main_compInfo1.png'); }
    .secCount dl:nth-child(2):hover{background-image: url('../../_images/main/main_compInfo2.png');}
    .secCount dl:nth-child(3):hover{background-image: url('../../_images/main/main_compInfo3.png');}
    .secCount dl:nth-child(4):hover{background-image: url('../../_images/main/main_compInfo4.png');}
}

@media screen and (max-width:1023px) {
    .secCount{flex-wrap: wrap;}
    .secCount dl{width:calc(50% - 7px);}
}
@media screen and (max-width:767px) {
    .secCompanyInfo .list{flex-wrap: wrap;}
    .secCompanyInfo .list a{width: calc(50% - 4px); margin-top:10px;}
}
@media screen and (max-width:479px) {
    .secCompanyInfo .list a{margin-top: 5px;; height:40px; line-height: 40px;}
    .secCompanyInfo .list a span{display: none;}

    .secCount dl{width:100%; padding:30px 20px; color: #fff;}
    .secCount dl:nth-child(1){background-image: url('../../_images/main/main_compInfo1.png');}
    .secCount dl:nth-child(2){background-image: url('../../_images/main/main_compInfo2.png');}
    .secCount dl:nth-child(3){background-image: url('../../_images/main/main_compInfo3.png');}
    .secCount dl:nth-child(4){background-image: url('../../_images/main/main_compInfo4.png');}
    .secCount .count {margin: 15px 0 20px;}
    .secCount .des{font-size: 14px;}
    .secCount .num{font-size: 50em;}
}

/*** 인재채용 ***/
.secHRWrap{margin: auto; overflow: hidden; opacity: .3; border-radius: 300px; width:60%; transition: all .5s ease-in-out;}
.secHRWrap.srlOn{transition: all 1s ease-out; opacity: 1; border-radius: 0; width: 100%;}
.secHR{transition: all .5s ease-in; position: relative; background-image: url('../../_images/main/bg_hr1.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.secHRBg img{position: absolute; top:0; left:0; object-fit: cover; width: 100%; height: 100%;}

.secHR .secContainer{text-align: center; color:#fff; display: flex; justify-content: center;}

.lines p{height: 100%; border-right: 1px solid #ffffff50; position: absolute; top: 0; left: 0;}
.lines p:nth-child(1){width: 25%;}
.lines p:nth-child(2){width: 50%;}
.lines p:nth-child(3){width: 75%;}

.secHR .titWrap{position: absolute; top:8vw;}

.secHR .list{display: flex; text-align: center; justify-content: center; position: relative; z-index: 1;}
.secHR .list a{padding:26vw 0 8vw; width: 100%; display:block; /*transition: .5s;*/ /*color:#ffffff50;*/ opacity: .5; }
.secHR .list a:hover{/*color:#ffffff;*/ opacity: 1;}
.secHR .list img{margin-bottom:3.125vw; height:114px;}
.secHR .list p{font-size: 32em; font-family: 'S-CoreDream-6Bold'; color: #ffffff;}

@media screen and (min-width:1024px) {
    .secHR .secContainer{padding-top: 0; padding-bottom: 0;
    }
    /* .secHR .list{margin-top:7vw; } */
    
}
@media screen and (max-width:1439px) {
    .secHR .list p{font-size: 28em;}
}
@media screen and (max-width:1279px) {
    .secHR .list img{height: 90px;}
}
@media screen and (max-width:767px) {
    .lines{display: none;}

    .secHR .titWrap {position: relative; top:0;}

    .secHR .list{flex-wrap: wrap;}
    .secHR .list a{width:50%; margin-bottom:30px; padding:0 0 20px;}
    .secHR .list img{height: 70px;}
}
@media screen and (max-width:479px) {
    .secHR .secContainer{padding-bottom: 10px;}
    .secHR .list img{height: 60px;}
    .secHR .list p {font-size: 24em; font-weight: 500;}
}


/*** 공지 뉴스 ***/
.secNews{background: url('../../_images/main/bg_news.webp') no-repeat #f9f9f9; background-size: cover; background-position: bottom left; color:#fff; }
.secNews .secContainer{display: flex; justify-content:flex-end; }
.secNews .secContainer .titWrap h2{margin:20px 0 35px;}
.secNews .secContainer .titWrap p{font-size: 26em;}

.secNews .left{margin-right:4vw; width:280px;}
.secNews .left a{border-bottom: 1px solid #ffffff20; padding: 18px 0; display: flex; justify-content: space-between; transition:all 300ms ease-out; font-size: 24em; color:#ffffff80}
.secNews .left a i{transition:all 300ms ease-out; color:#808080;}

.secNews .right{background: #262222; padding: 3vw; width: 740px;}
.secNews .right .viewMore{display: inline-block; float: right; margin:50px 0 20px; color:var(--color-red2); text-align: right; font-size: 16px;}
.secNews .right .viewMore:hover{color:var(--color-blue);}
.secNews .right .list{clear: right;}
.secNews .right .list a{color: #dfdfdf; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ffffff20; padding: 48px 0; font-size: 20em; line-height: 1.4;}
.secNews .right .list a:first-child{border-top: 1px solid #ffffff20; }
.secNews .right .date{color:#ffffff40; font-size: 14px; margin-top:5px;}
.secNews .right i{transition: all 300ms ease-out; font-size: 37px;}

@media (hover: hover) {
    .secNews .left a:hover, .secNews .right .list a:hover{color:var(--color-red2);}
    .secNews .left a:hover i, .secNews .right .list a:hover i{transform: translateX(15px);}
}
@media screen and (max-width:767px) {
    .secNews .secContainer{flex-direction: column;}
    .secNews .left, .secNews .right{width: 100%;}
    .secNews .left{margin-bottom: 30px;}
    .secNews .right i{font-size: 20px;}
}
@media screen and (max-width:479px) {
    .secNews .right{padding:20px;}
    .secNews .secContainer .titWrap h2{margin:20px 0;}
    .secNews .secContainer .titWrap p{font-size: 22em;}
    .secNews .right .viewMore{margin:20px 0;}
    .secNews .right .list a{padding:20px 0;}
}