@charset "utf-8";

/* visual */
.visual{position:relative; width:100%; height:100vh;}
.visual .swiper-slide:before{content:''; position:absolute; left:0; top:0; width:100%; height:100%;}
.visual .swiper-slide-active:before{animation:visual_img 2s both;}
.visual .s1:before{background:url('/images/main/mainVisual1.webp') no-repeat 50% / cover;}
.visual .s2:before{background:url('/images/main/mainVisual2.webp') no-repeat 50% / cover;}
.visual .s3:before{background:url('/images/main/mainVisual3.webp') no-repeat 50% / cover;}
.visual .s4:before{background:url('/images/main/mainVisual4.jpg') no-repeat 50% / cover;}
.visual .txt{display:flex; flex-direction:column; justify-content:center; height:100%; color:#fff;}
.visual .txt h3{margin-top:-50rem; font-weight:normal; font-size:40rem; opacity:0;}
.visual .txt h2{margin-top:10rem; font-weight:normal; font-size:70rem; opacity:0;}
.visual .txt b{font-weight:900;}
.visual .swiper-slide-active .txt h3{animation:visual_txt 1s both;}
.visual .swiper-slide-active .txt h2{animation:visual_txt 1s 0.3s both;}
.visual .ctrl{position:absolute; z-index:5; right:60rem; top:50%; transform:translateY(-50%);}
.visual .ctrlPlay{position:relative; margin-left:auto; aspect-ratio:1; width:70rem; height:70rem; display:flex; align-items:center; justify-content:center;}
.circle, .circle-opacity{position:absolute; inset:0; width:100%; height:100%; stroke-width:2px; stroke:#fff; fill:none; stroke-dashoffset:calc(var(--stroke-dasharray) * 1px * (1 - var(--progress))); stroke-dasharray:var(--stroke-dasharray); transform: rotate(-90deg);}
.circle{--progress:0; --stroke-dasharray:208; stroke-dashoffset:calc(var(--stroke-dasharray) * 1px * (1 - var(--progress))); stroke-dasharray:var(--stroke-dasharray) }
.circle-opacity{opacity: .3;}
.state-btn{width:100%; height:100%; display:grid; place-content:center; cursor:pointer; pointer-events:auto; z-index:1;}
.state-icon{display:block; width:16rem; height:15rem; background:#fff;}
.state-icon:not(.isPlay){margin-left:3rem; clip-path:polygon(1rem 0, 15rem 50%, 1rem 100%);}
.state-icon.isPlay{clip-path:polygon(0 100%, 0 0, 5rem 0, 5rem 100%, 11rem 100%, 11rem 0, 100% 0, 100% 100%);}
.visual .ctrlPaging{position:relative; bottom:auto; top:auto; left:auto; right:auto;}
.visual .swiper-pagination-bullet{display:block; margin:35rem auto 0; width:8rem; height:8rem; background:#fff; border-radius:50%; opacity:.4;}
.visual .swiper-pagination-bullet-active{opacity:1;}
.scrollUi{position:absolute; left:60rem; bottom:0; z-index:1;}
.scrollUi em{display:block; margin-bottom:10rem; font-size:14rem; font-family:var(--font-rhd); transform:rotate(-90deg); transform-origin:0% 50%; color:#fff; opacity:0.8;}
.scrollUi span{display:block; position:relative; width:2px; height:120rem; background:rgba(255,255,255,0.3);}
.scrollUi span:after{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:0; background:#fff; animation:scrollUi 1.5s ease-out infinite;}
@keyframes visual_img{
    0%{transform:scale(1.05);}
    100%{transform:scale(1);}
}
@keyframes visual_txt{
    0%{transform:translateY(20rem); opacity:0;}
    100%{transform:translateY(0); opacity:1;}
}
@keyframes scrollUi{
    0%{height:0;}
    100%{height:100%;}
}
@media(max-width:1279px){
    .visual .txt h3{font-size:30rem;}
    .visual .txt h2{margin-top:6rem; font-size:55rem;}
    .visual .ctrl{right:4%;}
    .scrollUi{left:4%;}
    .scrollUi span{height:100rem;}
}
@media(max-width:767px){
    .visual .txt h3{font-size:22rem;}
    .visual .txt h2{margin-top:10rem; font-size:40rem; line-height:1.45;}
    .visual .ctrl{top:auto; bottom:40rem; transform:none;}
    .visual .ctrlPaging{display:flex; align-items:center; position:absolute; left:calc(-100% + -15rem); top:50%; transform:translateY(-50%); width:fit-content;}
    .visual .swiper-pagination-bullet{margin:0 20rem 0 0;}
    .scrollUi em{display:none;}
}


/* main common */
.main{overflow:hidden;}
.main section{padding:200rem 0;}
.mainTit{position:relative;}
.mainTit em{display:block; margin-bottom:25rem; font-weight:bold; color:var(--primary); font-size:20rem; line-height:1; font-family:var(--font-rhd); text-transform:uppercase;}
.mainTit h2{font-weight:normal; color:#000; font-size:60rem; line-height:1.45;}
.mainTit h2 b{font-weight:bold;}
.btnMore{display:flex; align-items:center; position:relative; padding-left:23rem; width:fit-content; height:74rem; font-size:16rem; font-family:var(--font-rhd); color:var(--primary); transition:0.3s ease; font-weight:600; z-index:1;}
.btnMore:before{content:''; display:block; position:absolute; left:0; top:0; width:74rem; height:74rem; border-radius:40rem; background:var(--primary); transition:0.3s ease; z-index:-1;}
.btnMore img{display:block; margin-right:40rem; width:28rem; transition:0.3s ease;} 
@media(hover:hover){
    .btnMore:hover{padding-right:23rem; color:#fff;}
    .btnMore:hover:before{width:100%;}
    .btnMore:hover img{margin-right:17rem;}
}
@media(max-width:1279px){
    .main section{padding:120rem 0;}
    .mainTit em{margin-bottom:20rem; font-size:18rem;}
    .mainTit h2{font-size:40rem;}
    .btnMore{padding-left:21rem; height:66rem;}
    .btnMore:before{height:66rem; width:66rem;}
    .btnMore img{margin-right:28rem; width:24rem;}
}
@media(max-width:767px){
    .main section{padding:80rem 0;}
    .mainTit h2{font-size:27rem;}
    .btnMore{padding-left:17rem; height:52rem;}
    .btnMore:before{height:52rem; width:52rem;}
    .btnMore img{margin-right:22rem; width:20rem;}
    
    @media(hover:hover){
        .btnMore:hover{padding-right:18rem;}
        .btnMore:hover img{margin-right:13rem;}
    }
}


/* ABOUT */
.about .btnMore{margin-left:auto; margin-top:20rem;}
@media(max-width:767px){
    .about .mainTit h2 > br{display:none;}
}

/* merit */
.merit{padding-top:0 !important;}
.merit .subTit1{position:relative; padding-left:15rem; margin-bottom:25rem; font-size:28rem; color:#000;}
.merit .subTit1:before{content:''; display:block; position:absolute; left:0; top:7rem; width:4rem; height:28rem; background:var(--primary);}
.merit table.table th, table.table td{padding:20rem; font-size:18rem;}
.merit table.table td{color:#444;}
.merit table.table td{vertical-align:top;}
.merit table.table ul{text-align:left; color:#444;}
.merit table.table li{position:relative; padding-left:14rem;}
.merit table.table li:before{content:'-'; display:block; position:absolute; left:0; top:0;}
.merit table.table li+li{margin-top:8rem;}
.merit table.table .img{display:block; margin:auto; width:60%;}
.merit table.table .img img{display:block; width:100%;}
.merit table.table em{font-size:22rem; font-weight:bold; color:#222;}
@media(max-width:767px){
    .merit .subTit1{margin-bottom:20rem; font-size:24rem;}
    .merit .subTit1:before{height:24rem;}
    .merit table.table th, .merit table.table td{padding:10rem 8rem; font-size:15rem;}
    .merit table.table .img{width:100%;}
    .merit table.table em{font-size:18rem;}
}


/* PRODUCT */
.prd{background:url(../images/main/prd_bg.webp)no-repeat center/cover;}
.prd .mainTit{text-align:center;}
.prd .mainTit:after{content:''; display:block; position:relative; margin:50rem auto 70rem; width:1px; height:150rem; background:var(--primary);}
.prd .mainTit h2 > br{display:none;}
.prdList li{display:flex;}
.prdList li+li{margin-top:150rem;}
.prdList .img{display:flex; align-items:center; justify-content:center; position:relative; width:50%; height:500rem; background:#fff; box-shadow:-110rem 60rem 50rem rgba(0,1,71,0.2);}
.prdList .img:before,
.prdList .img:after{content:''; display:block; position:absolute; left:0; z-index:1;}
.prdList .img:before{top:0; width:2rem; height:100%; background:linear-gradient(to top, var(--primary), #fff);}
.prdList .img:after{bottom:0; width:100%; height:2rem; background:linear-gradient(to right, var(--primary), #fff);}
.prdList .img img{display:block; width:600rem;}
.prdList .txt{display:flex; flex-direction:column; justify-content:center; padding:0 80rem; width:50%;}
.prdList .txt em{display:block; padding:6rem 18rem 5rem; width:fit-content; font-family:var(--font-rhd); font-size:17rem; color:var(--primary); font-weight:bold; line-height:1; border:2rem solid var(--primary); border-radius:22rem;}
.prdList .txt h3{margin:25rem 0 35rem; font-size:var(--fs40); color:#111;}
.prdList .txt p{margin-bottom:60rem; font-size:18rem; color:#555;}
.prdList li:nth-child(even){flex-direction:row-reverse;}
.prdList li:nth-child(even) .img{box-shadow:110rem 60rem 50rem rgba(0,1,71,0.2);}
.prdList li:nth-child(even) .img:before{right:0; left:auto;}
.prdList li:nth-child(even) .img:after{background:linear-gradient(to left, var(--primary), #fff);}
@media(max-width:1279px){
    .prd .mainTit:after{margin:40rem auto 60rem; height:100rem;}
    .prdList li+li{margin-top:100rem;}
    .prdList .img{height:350rem;}
    .prdList .img img{width:400rem;}
    .prdList .txt{padding:0 50rem;}
    .prdList .txt h3{margin:20rem 0 25rem;}
    .prdList .txt p{margin-bottom:50rem;}
    .prdList .txt p > br{display:none;}
}
@media(max-width:767px){
    .prd .mainTit:after{margin:30rem auto 40rem; height:70rem;}
    .prd .mainTit h2 > br{display:block;}
    .prdList li{display:block;}
    .prdList li+li{margin-top:60rem;}
    .prdList .img{width:100%; height:220rem;}
    .prdList .img img{width:65%;}
    .prdList .txt{padding:0; margin-top:25rem; width:100%;}
    .prdList .txt em{padding:6rem 12rem 5rem; font-size:16rem;}
    .prdList .txt h3{margin:15rem 0 10rem; font-size:22rem;}
    .prdList .txt p{margin-bottom:25rem;}
    .prdList li:nth-child(even) .txt{text-align:end; align-items:flex-end;}
}


/*  납품실적 */
.cjmapTop{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:100rem;}
.cjmap .btnMore{margin-top:60rem;}
.cjmap .pc{display:none;}
.cjmapTop_countWrap{margin-top:65rem; padding:40rem 0 20rem; width:520rem; border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:end;}
.cjmapTop_countWrap em{display:block; margin-bottom:8rem; font-family:var(--font-rhd); font-size:17rem; font-weight:500; color:#333; line-height:1;}
.cjmapTop_count{display:flex; justify-content:flex-end;font-size:156rem; }
.cjmapTop_count__num{display:block; position:relative; font-family:var(--font-rhd);/*font-size: 200rem;*/color:#111; line-height:1; font-weight:900;}
.cjmapTop_count i{display:block; margin-top:-40rem; font-style:normal; color:#111;/*font-size:150rem;*/font-size:.75em;font-family:var(--font-rhd);}
.cjmapSwiper .img,
.cjmapSwiper .img img{display:block; width:100%;}
.cjmapSwiper .img{ aspect-ratio: 46/36; background: #eee url('/images/common/no_img.png') no-repeat 50% / 110rem; }
.cjmapSwiper .img img{ width: 100%; height: 100%; object-fit: cover; text-indent: -100vw; }
.cjmapSwiper em{display:block; margin:25rem 0 10rem; padding:0 12rem; font-size:18rem; font-weight:600; color:#aaa; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:0.3s ease;}
.cjmapSwiper h3{ margin-top: 25rem; padding:0 12rem; font-size:var(--fs22); color:#111; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cjmapSwiper .more{display:block; position:absolute; left:0; top:0; width:100%; height:100%;}
.cjmapSwiper .more svg{display:none;}
@media(hover:hover){
    .cjmapSwiper li:hover em{color:var(--primary);}
}
@media(min-width:768px){
    .cjmap .pc{display:flex;}
    .cjmap .mo{display:none;}
    .cjmapSwiper em,
    .cjmapSwiper h3{ margin-bottom: 10rem; width:calc(100% - 65rem);}
    .cjmapSwiper .more{display:flex; align-items:center; justify-content:center; top:auto; left:auto; bottom:0rem; right:12rem; width:50rem; height:50rem; border-radius:50%; background:#eaeaf4; transition:0.3s ease;}
    .cjmapSwiper .more svg{display:block; width:16rem; transform-origin:center; transition:0.3s ease;}
    .cjmapSwiper .more .cls-1{fill:var(--primary); transition:0.3s ease; }
    @media(hover:hover){
        .cjmapSwiper .more:hover{background:var(--primary);}
        .cjmapSwiper .more:hover svg{transform:rotate(180deg);}
        .cjmapSwiper .more:hover .cls-1{fill:#fff;}
    }
}
@media(max-width:1279px){
    .cjmapTop{margin-bottom:60rem;}
    .cjmap .btnMore{margin-top:50rem;}
    .cjmapTop_countWrap{margin-top:50rem; padding:25rem 0 20rem; width:350rem;}
    .cjmapTop_count{ font-size: 106rem; }
    /* .cjmapTop_count__num{font-size:140rem;} */
    .cjmapTop_count i{margin-top:-20rem; /*font-size:100rem;*/}
    .cjmapSwiper em{padding:0; margin-bottom:8rem; font-size:17rem;}
    .cjmapSwiper h3{padding:0;}
    .cjmapSwiper .more{right:0;}
}
@media(max-width:767px){
    .cjmapTop{display:block; margin-bottom:40rem;}
    .cjmapTop_countWrap{margin-top:40rem; padding:25rem 0 10rem;}
    /* .cjmapTop_count__num{font-size:100rem;} */
    /* .cjmapTop_count i{font-size:75rem;} */
    .cjmapSwiper em{margin:20rem 0 5rem;}
    .cjmapSwiper h3{margin-top: 25rem;}
}


/* CJ NAME */
.cjname{position:relative; padding-top:0 !important;}
.cjnameInr{position:relative; margin:auto; max-width:1600rem; width:96%; height:100%; background:url(../images/main/cjname_bg.webp)no-repeat center/cover; background-attachment:fixed;}
.cjnameInr img{display:block; width:100%;}
.cjnameInr img.mo{display:none;}
@media(max-width:767px){
    .cjnameInr img.pc{display:none;}
    .cjnameInr img.mo{display:block;}
}


/* INQUIRY */
.inquiry{background:transparent;}
.inquiry .mainTit > *{color:#fff;}
.inquiry .more{display:block; position:relative; margin-top:80rem; margin-left:auto; width:160rem; height:160rem;}
.inquiry .more:before{content:''; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.95); width:100%; height:100%; border-radius:50%; background:rgba(255,255,255,0.5);}
.inquiry .more span{display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; border-radius:50%; background:var(--primary); color:#fff; font-size:18rem; font-weight:500; text-align:center; width:100%; height:100%; z-index:1;}
.inquiry .more img{display:block; margin:0 auto 15rem; width:21rem;}
@keyframes inquiry_more{
    0%{transform:translate(-50%,-50%) scale(0.95); opacity:1;}
    100%{transform:translate(-50%,-50%) scale(1.3); opacity:0;}
}
@media(hover:hover){
    .inquiry .more:hover:before{animation:inquiry_more 1s ease-out infinite;}
}
@media(max-width:1279px){
    .inquiry .more{margin-top:0;}
}
@media(max-width:767px){
    .inquiry .more{margin-top:50rem; width:140rem; height:140rem;}
}