@charset "utf-8";

/* visual */
.mainVisual{position:relative; width:100%; height: calc(100vh - 100rem);}
.mainVisual_swiper{height:100%;}
.mainVisual_swiper-slide{display:flex; align-items:center; height:100%; background:#000;}
.mainVisual_swiper-slide:before{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%;}
.mainVisual .slide1:before{background:url('/images/main/mainVisual1.webp')no-repeat 60% 50% / cover;}
.mainVisual .slide2:before{background:url('/images/main/mainVisual2.webp')no-repeat 60% 50% / cover;}
.mainVisual .slide3:before{background:url('/images/main/mainVisual3.webp')no-repeat 60% 50% / cover;}
.mainVisual .swiper-slide-active:before{animation:visualBg 2s both;}
.mainVisual__h3{margin-top:-50rem; font-size:var(--fs30); color:#fff; font-weight:500; opacity:0; transform:translateX(30rem);}
.mainVisual__h2{margin-top:10rem; font-size:120rem; color:#fff; line-height:1; font-family:var(--font-mont); font-weight:900; opacity:0; transform:translateX(30rem);}
.mainVisual .swiper-slide-active .mainVisual__h3{animation:visualTxt1 .8s both;}
.mainVisual .swiper-slide-active .mainVisual__h2{animation:visualTxt1 1s .2s both;}
.mainVisual_ctrl{position:absolute; margin-top:20rem; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; overflow:hidden;}
.mainVisual_ctrl__pager{margin-bottom:15rem; font-family:var(--font-mont); font-weight:600; font-size:18rem; color:#fff; width:auto; text-align:end;}
.mainVisual_ctrl__pager span.bar{display:inline-block; margin:0 5rem; opacity:0.6;}
.mainVisual_ctrl__pager span.swiper-pagination-total{opacity:0.6;}
.mainVisual_ctrl__bar{position:relative; width:350rem; height:3px; background:rgba(255,255,255,0.4); float:right;}
.mainVisual_ctrl__bar:before{content:''; position:absolute; inset:0; width:0; background:#fff;}
.mainVisual_ctrl__bar.active:before{animation:pager_bar 5s linear both;}
@keyframes visualTxt1{
    100%{opacity:1; transform:translateX(0);}
}
@keyframes visualBg{
    0%{transform:scale(1.1);}
    100%{transform:scale(1);}
}
@keyframes pager_bar{
	100%{width:100%;}
}
@media(max-width:1279px){
    .mainVisual__h2{font-size:90rem;}
    .mainVisual_ctrl{top:auto; bottom:50rem; transform:translateX(-50%);}
}
@media(max-width:767px){
    .mainVisual{min-height:320rem;}
/*    .mainVisual_swiper-slide:before{opacity:0.9;}*/
    .mainVisual__h3{margin-top:-20rem; font-size:20rem;}
    .mainVisual__h2{margin-top:5rem; font-size:50rem;}
    .mainVisual_ctrl{bottom:40rem;}
}


/* main common */
.p140{padding:140rem 0;}

.mainTit em{display:block; margin-bottom:2rem; font-size:16rem; font-family:var(--font-mont); color:var(--primary); font-weight:600;}
.mainTit h2{font-size:var(--fs45); color:#000;}
.mainTit.white em{color:#fff;}
.mainTit.white h2{color:#fff;}

.btnMore{display:flex; align-items:center; justify-content:center; position:relative; font-size:18rem; font-weight:500; color:#222; background:#fff; width:200rem; height:50rem; border-radius:25rem; border:1px solid #222; z-index:1; overflow:hidden; text-align:center; transition:0.2s ease;}
.btnMore:before{content:''; display:block; position:absolute; left:0; top:0; width:0; height:100%; border-radius:25rem; transition:0.3s ease; background:#222; z-index:-1;}
.btnMore.white{background:none; border-color:#fff; color:#fff;}
.btnMore.white:before{background:#fff;}
@media(hover:hover){
    .btnMore:hover{color:#fff;}
    .btnMore:hover:before{width:100%;}
    .btnMore.white:hover{color:#222;}
}
@media(max-width:1279px){
    .p140{padding:100rem 0;}
}
@media(max-width:767px){
    .p140{padding:80rem 0;}
}


/* 회사소개 퀵 */
.quick .inr{display:grid; grid-template-columns:repeat(3, 1fr); gap:40rem;}
.quickBox{position:relative; padding:50rem 40rem;}
.quickBox.box1{background:url(../images/main/quickAbout1.webp)no-repeat 50%/cover;}
.quickBox.box2{background:url(../images/main/quickAbout2.webp)no-repeat 50%/cover;}
.quickBox.box3{background:url(../images/main/quickAbout3.webp)no-repeat 50%/cover;}
.quickBox em{display:block; font-size:16rem; font-family:var(--font-mont); color:var(--primary); font-weight:600; text-transform:uppercase;}
.quickBox h3{margin:140rem 0 20rem; color:#000; font-size:var(--fs30);}
.quickBox p{font-size:17rem; color:#666;}
.quickBox_btn{display:flex; justify-content:center; align-items:center; position:absolute; top:22rem; right:40rem; width:60rem; height:60rem; border-radius:50%; background:#fff; transition:0.2s;}
.quickBox_btn svg{display:block; width:19rem;}
.quickBox_btn .cls-1{fill:#222; transition:0.2s;}
@media(hover:hover){
    .quickBox_btn:hover{background:#222;}
    .quickBox_btn:hover .cls-1{fill:#fff;}
}
@media(max-width:1279px){
    .quick .inr{gap:20rem;}
    .quickBox{padding:30rem 20rem;}
    .quickBox h3{margin:70rem 0 15rem;}
    .quickBox p > br{display:none;}
    .quickBox_btn{top:32rem; right:20rem; height:auto; width:auto; background:none; pointer-events:none;}
    .quickBox_link{display:block; position:absolute; left:0; top:0; width:100%; height:100%;}
}
@media(max-width:767px){
    .quick .inr{display:block;}
    .quickBox+.quickBox{margin-top:15rem;}
    .quickBox h3{margin:40rem 0 10rem;}
}


/* 제품소개 */
.prd{padding:0 50rem;}
.prdInr{display:flex; position:relative; align-items:center; height:600rem; width:100%; background:#000;}
.prdInr:before{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/main/productBg.webp)no-repeat 50%/cover;}
.prdTxt p{margin-top:25rem; font-size:17rem; color:#fff; opacity:0.9; font-weight:300;}
.prd .btnMore{margin-top:60rem;}
@media(max-width:1279px){
    .prd{padding:0 2%;}
    .prdInr{height:400rem;}
    .prdTxt{padding-left:30rem;}
    .prdTxt p{margin-top:15rem;}
    .prd .btnMore{margin-top:40rem;}
}
@media(max-width:767px){
    .prdInr:before{opacity:0.6;}
    .prdTxt{padding-left:10rem;}
    .prd .btnMore{margin-top:30rem;}
}


/* 공지사항 */
.noticeTxt{display:flex; justify-content:space-between; align-items:flex-end;}
.notice .btnMore{margin-bottom:12rem;}
.noticeSwiper{overflow:visible; margin-top:40rem;}
.noticeSwiper a{display:block; position:relative; padding:50rem 40rem; background:#fff; box-shadow:20rem 20rem 50rem rgba(0,46,63,0.25);}
.noticeSwiper em{display:block; position:relative; margin-bottom:12rem; width:82rem; height:26rem; border-radius:15rem; background:#004862; transition:0.2s ease; font-size:0;}
.noticeSwiper em:after{content:'NOTICE'; display:block; position:absolute; left:0; top:0; width:100%; font-size:14rem; color:#fff; text-align:center; font-family:var(--font-mont); line-height:26rem; z-index:1; font-weight:500;}
.noticeSwiper .title{display:block; margin-bottom:20rem; font-size:20rem; font-weight:600; color:#222; height:58rem; transition:0.2s ease;}
.noticeSwiper .comment{font-size:16rem; color:#777; height:48rem;}
.noticeSwiper .date{display:block; margin-top:30rem; font-size:14rem; color:#999; font-family:var(--font-mont);}
.noticeCtrl{display:flex; align-items:center; justify-content:space-between; margin-top:40rem;}
.noticeCtrl .swiper-pagination{position:relative; width:calc(100% - 185rem); height:3px; background:rgba(0,0,0,0.15);}
.noticeCtrl .swiper-pagination-progressbar-fill{background:#222;}
.noticeCtrl .naviWrap{display:flex; align-items:center;}
.noticeCtrl .navi{display:flex; position:relative; left:auto; bottom:auto; top:auto; right:auto; margin-top:0; align-items:center; justify-content:center; width:60rem; height:60rem; border-radius:50%; border:1px solid #ddd; transition:0.2s ease;}
.noticeCtrl .navi:after{display:none;}
.noticeCtrl .navi+.navi{margin-left:15rem;}
.noticeCtrl .navi svg{display:block; width:23rem;}
.noticeCtrl .navi .cls-1{fill:#222;}
.noticeCtrl .swiper-button-prev svg{transform:rotate(180deg);}
.noticeCtrl .swiper-button-disabled{opacity:1;}
.noticeCtrl .swiper-button-disabled .cls-1{opacity:0.3;}
.notice .btnMore.mo{display:none;}
@media(hover:hover){
    .noticeSwiper a:hover em{background:var(--primary);}
    .noticeSwiper a:hover .title{color:var(--primary);}
    .noticeCtrl .navi:hover{border-color:#222;}
}
@media(max-width:1279px){
    .noticeSwiper a{padding:30rem 20rem;}
    .noticeCtrl .swiper-pagination{width:100%;}
    .noticeCtrl .naviWrap{display:none;}
}
@media(max-width:767px){
    .notice .btnMore{display:none;}
    .noticeSwiper{margin-top:30rem;}
    .noticeCtrl{display:none;}
    .notice .btnMore.mo{display:flex; margin-top:40rem;}
}


/* 온라인문의 */
.inquiry{display:flex; align-items:center;  background:url(../images/main/inquiryBg.webp)no-repeat 50%/cover; height:300rem;}
.inquiryTxt{display:flex; justify-content:space-between; align-items:flex-end;}
.inquiry .btnMore{margin-bottom:12rem;}
@media(max-width:1279px){
    .inquiry{height:220rem;}
}
@media(max-width:767px){
    .inquiry{height:300rem;}
    .inquiryTxt{display:block;}
    .inquiry .btnMore{margin-bottom:0; margin-top:30rem;}
}