@import url('/css/popup.css');

/* visual */
.visual{position:relative; width:100%; height:calc(100vh - 100rem);}
.visualSlide:before{content:''; display:block; position:absolute; left:0; top:0; transform-origin:center; width:100%; height:100%;}
.visualSlide.swiper-slide-active:before{animation:visualBg 3s both;}
.visualSlide.slide1:before{background:url(../images/main/mainVisual01.jpg)no-repeat center/cover;}
.visualSlide.slide2:before{background:url(../images/main/mainVisual02.jpg)no-repeat center/cover;}
.visualSlide.slide3:before{background:url(../images/main/mainVisual03.jpg)no-repeat center/cover;}
.visual_inr{display:flex; align-items:center; position:relative; margin:0 auto; max-width:calc(1600 * 1rem); width:calc(var(--inr-width) * 100%); height:100%;}
.visual_inr h2{margin-top:-20rem; font-size:var(--fs55); color:#fff; font-weight:600; opacity:0;}
.visualSlide.swiper-slide-active .visual_inr h2{animation:visualTxt 1.5s both;}
.visualCtrl_bar{position:relative; margin-right:60rem; width:300rem; height:3rem; background:rgba(255,255,255,0.35);}
.visualCtrl_bar:before{content:''; position:absolute; inset:0; width:0; background:#fff;}
.visualCtrl_bar.active:before{animation:pager_bar 5s linear both;}
.visualCtrl{display:flex; justify-content:flex-end; align-items:center; position:absolute; bottom:120rem; left:50%; transform:translateX(-50%); height:auto; z-index:1;}
.visualCtrl_prev, .visualCtrl_next{display:block; position:relative; width:30rem; height:40rem; overflow:hidden; cursor:pointer; transition:0.2s;}
.visualCtrl_prev:after, .visualCtrl_next:after{content:''; display:block; position:absolute; top:50%; left:50%; width:20rem; height:20rem; border-top:3px solid #fff; border-right:3px solid #fff;}
.visualCtrl_prev:after{transform:translate(-50%,-50%) rotate(-135deg); margin-left:7rem;}
.visualCtrl_next:after{transform:translate(-50%,-50%) rotate(45deg); margin-left:-7rem;}
.visualCtrl_num{padding:0 20rem; width:auto; font-family:var(--font-mont); font-weight:600; font-size:18rem; color:rgba(255,255,255,0.5);}
.visualCtrl_num .swiper-pagination-current{padding-right:3rem; color:#fff;}
.visualCtrl_num .swiper-pagination-total{padding-left:3rem;}
@media(hover:hover){
    .visualCtrl_prev:hover, .visualCtrl_next:hover{opacity:0.6;}
}
@keyframes pager_bar{
	0%{width:0%;}
	100%{width:100%;}
}
@keyframes visualBg{
    0%{transform:scale(1.1);}
    100%{transform:scale(1);}
}
@keyframes visualTxt{
    0%{transform:translateY(40rem); opacity:0;}
    100%{transform:translateY(0); opacity:1;}
}
@media(max-width:1279px){
    .visualCtrl{bottom:8%;}
}
@media(max-width:767px){
    .visual{height:65vh; min-height:460rem;}
    .visualCtrl{justify-content:space-between;}
    .visualCtrl_prev, .visualCtrl_next{display:none;}
    .visualCtrl_bar{margin-right:0; width:365rem;}
    .visualCtrl_num{padding:0;}
}



/* main common */
main section{ --btnMore-size: clamp(230rem, calc( 280 / var(--inr) * 100vw ), 280rem); position:relative; padding:150rem 0;}
h2.mainTit{font-size:var(--fs45); line-height:1.43; font-weight:500; color:#000;}
h2.mainTit em{display:block; margin-bottom:18rem; font-family:var(--font-mont); line-height:1; font-size:16rem !important; font-weight:bold; color:var(--primary); text-transform:uppercase;}
h2.mainTit b{font-weight:bold;}
h2.mainTit_w{color:#fff;}
h2.mainTit_w em{color:#fff; opacity:0.9;}
a.btnMore{display:inline-flex; justify-content:center; align-items:center; position:relative; margin-top:65rem; min-width: var(--btnMore-size); width:fit-content; height:60rem; padding:0 2ch; line-height:60rem; font-size:18rem; color:#333; border-radius:35rem; border:1px solid #aaa; transition:0.3s ease; z-index:2; overflow:hidden;}
a.btnMore:before{content:''; display:block; position:absolute; left:0; top:0; width:0; height:100%; background:#111; border-radius:35rem; z-index:-1; transition:0.5s ease;}
a.btnMore svg{display:block; margin-left:20rem; width:24rem;}
a.btnMore svg .cls-1{fill:#333; transition:0.3s ease;}
a.btnMore_w{border-color:rgba(255,255,255,0.5); color:#fff;}
a.btnMore_w:before{background:#fff;}
a.btnMore_w svg .cls-1{fill:#fff;}
@media(hover:hover){
    a.btnMore:hover{color:#fff; border-color:#111;}
    a.btnMore:hover:before{width:100%;}
    a.btnMore:hover svg .cls-1{fill:#fff;}
    a.btnMore_w:hover{border-color:#fff; color:#333;}
    a.btnMore_w:hover svg .cls-1{fill:#333;}
}
@media(max-width:1279px){
    main section{padding:100rem 0;}
    a.btnMore{margin-top:45rem; /*width:250rem;*/ height:52rem;}
    a.btnMore svg{width:22rem;}
}
@media(max-width:767px){
    main section{padding:80rem 0;}
    h2.mainTit{font-size:30rem;}
    h2.mainTit em{margin-bottom:12rem;}
    a.btnMore{margin-top:35rem; /*width:230rem;*/}
}


/* about = 회사소개 */
main{overflow:hidden;}
main .about{padding-bottom:0 !important; z-index:1;}
main .aboutObj{position:absolute; top:100rem; right:4%; font-family:var(--font-mont); font-size:140rem; color:#000; opacity:0.05; line-height:1; font-weight:800;}
main .aboutTxt{position:relative;}
main .aboutTxt p{margin-top:25rem; font-size:16rem; color:#666;}
main .aboutTxt_more{position:absolute; bottom:5rem; right:0;}
main .aboutImg{margin-top:80rem; width:calc(700rem + 50%);}
main .aboutImg img{display:block; width:100%; height:100%; object-fit:cover;}
@media(min-width:768px){
    main .aboutTxt p{ padding-right: calc(var(--btnMore-size) + 4ch + 80rem); text-wrap: balance; }
}
@media(max-width:1279px){
    main .aboutObj{top:70rem; font-size:75rem;}
    main .aboutImg{margin-top:60rem; padding-right:4%; width:100%;}
}
@media(max-width:767px){
    main .aboutObj{display:none;}
    main .aboutTxt_more{position:relative; bottom:auto;}
    main .aboutTxt p > br{display:none;}
    main .aboutImg{margin-top:40rem; height:230rem;}
}


/* prd = 제품소개 */
main .prd{margin-top:-250rem; padding-top:400rem; background:url(../images/main/prd_bg.jpg)no-repeat bottom/cover;}
main .prdInr{display:flex; margin-left:auto; width:calc(700rem + 50%);}
main .prdTxt{display:flex; flex-direction:column; justify-content:center; position:relative; padding-right:100rem; width:800rem;}
main .prdTxt_tit{margin-top:-50rem;}
main .prdSwiper{margin:0; width:calc(100% - 800rem);}
main .prdSwiper_slide{padding-right:50rem; width:650rem;}
main .prdSwiper_img{display:block; width:100%;}
main .prdSwiper_img img{display:block; width:100%;}
main .prdSwiper_info{display:flex;}
main .prdSwiper_info__name{display:flex; flex-direction:column; justify-content:center; padding:0 30rem; width:calc(100% - 112rem); height:112rem; background:var(--primary);}
main .prdSwiper_info__name h2{font-size:var(--fs25); color:#fff; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
main .prdSwiper_info__name em{display:block; font-family:var(--font-mont); font-size:18rem; opacity:.8; color:#fff;}
main .prdSwiper_info__more{display:flex; justify-content:center; align-items:center; width:112rem; height:112rem; background:#fff;}
main .prdSwiper_info__more i{display:block; position:relative; width:60rem; height:60rem; border-radius:50%; border:1px solid var(--primary); transition:0.2s ease;}
main .prdSwiper_info__more i:before,
main .prdSwiper_info__more i:after{content:''; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2px; height:25rem; background:var(--primary); transition:0.2s ease;}
main .prdSwiper_info__more i:after{transform:translate(-50%,-50%) rotate(90deg);}
main .prdTxt_ctrl{display:flex; align-items:center; margin-top:80rem; z-index:1;}
main .prdTxt_ctrl__prev, 
main .prdTxt_ctrl__next{display:block; position:relative; width:30rem; height:40rem; overflow:hidden; cursor:pointer;}
main .prdTxt_ctrl__prev:after, 
main .prdTxt_ctrl__next:after{content:''; display:block; position:absolute; top:50%; left:50%; width:20rem; height:20rem; border-top:3px solid #333; border-right:3px solid #333;}
main .prdTxt_ctrl__prev:after{transform:translate(-50%,-50%) rotate(-135deg); margin-left:7rem;}
main .prdTxt_ctrl__next:after{transform:translate(-50%,-50%) rotate(45deg); margin-left:-7rem;}
main .prd .swiper-button-disabled:after{opacity:0.4;}
main .prdTxt_ctrl__num{padding:0 20rem; width:auto; font-family:var(--font-mont); font-weight:600; font-size:18rem; color:#aaa;}
main .prdTxt_ctrl__num .swiper-pagination-current{padding-right:3rem; color:#333;}
main .prdTxt_ctrl__num .swiper-pagination-total{padding-left:3rem;}
@media(hover:hover){
    main .prdSwiper_info__more i:hover{background:var(--primary);}
    main .prdSwiper_info__more i:hover:before,
    main .prdSwiper_info__more i:hover:after{background:#fff;}
}
@media(max-width:1279px){
    main .prd{margin-top:-150rem; padding-top:250rem;}
    main .prdInr{padding-left:4%; width:100%;}
    main .prdTxt{padding-right:60rem; width:55%;}
    main .prdSwiper{width:45%;}
    main .prdSwiper_slide{width:424rem;}
    main .prdSwiper_info__name{padding:0 20rem; width:calc(100% - 90rem); height:90rem;}
    main .prdSwiper_info__name h2{font-size:20rem;}
    main .prdSwiper_info__more{width:90rem; height:90rem;}
}
@media(max-width:767px){
    main .prd{margin-top:-100rem; padding-top:180rem;}
    main .prdInr{display:block;}
    main .prdTxt{padding-right:0; width:100%;}
    main .prdTxt_tit{margin-top:0;}
    main .prdTxt_ctrl{position:absolute; right:0; bottom:12rem;}
    main .prdTxt_ctrl__prev, main .prdTxt_ctrl__next{display:none;}
    main .prdSwiper{margin-top:40rem; width:100%;}
    main .prdSwiper_slide{padding-right:20rem; width:400rem;}
    main .prdSwiper_info__name{width:calc(100% - 84rem); height:84rem;}
    main .prdSwiper_info__name h2{font-size:18rem;}
    main .prdSwiper_info__name em{font-size:17rem;}
    main .prdSwiper_info__more{width:84rem; height:84rem;}
    main .prdSwiper_info__more i{width:50rem; height:50rem;}
}


/* status = 설비현황 */
main .status{height:650rem; background:url(../images/main/status_bg.jpg)no-repeat 40% 100%/cover;}
main .status .inr{display:flex; flex-direction:column; align-items:flex-end; text-align:end;}
@media(max-width:1279px){
    main .status{height:479rem;}
}
@media(max-width:767px){
    main .status{height:430rem;}
}


/* partner = 파트너쉽 */
main .partner{text-align:center; background:url(../images/main/partner_bg.jpg)no-repeat top/cover;}
main .partner .mainTit > br{display:none;}
main .partner .btnMore{margin:0 auto !important;}
main .partnerLogo{display:flex; position:relative; padding:90rem 0 100rem; overflow:hidden;}
main .partnerLogo:after{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(to right, #fff, rgba(255,255,255,0), rgba(255,255,255,0), #fff); z-index:1;}
main .partnerLogo_wrap{flex:none; display:flex;}
main .partnerLogo_holder{flex:none; align-items:center; display:flex; white-space:nowrap; will-change:transform; animation:marquee 50s linear infinite;}
main .partnerLogo__list{flex:none; display:flex; align-items:center;}
main .partnerLogo__list a{display:block; margin:0 50rem;}
main .partnerLogo__list a img{display:block; max-width:260rem; max-height:80rem;}
@keyframes marquee {
  0% {transform: translateX(0);}
  100% {transform: translateX(-70%)}
}
@media(max-width:1279px){
    main .partnerLogo{padding:60rem 0 70rem;}
    main .partnerLogo_holder{animation:marquee 70s linear infinite;}
    main .partnerLogo__list a img{max-width:200rem; max-height:60rem;}
}
@media(max-width:767px){
    main .partnerLogo{padding:40rem 0 50rem;}
    main .partnerLogo__list a{margin:0 30rem;}
    main .partnerLogo__list a img{max-width:150rem; max-height:50rem;}
}


/* quick = 퀵메뉴 */
main .quick{display:flex; padding:0 !important;}
main .quickBox{padding:60rem 100rem; width:50%; background:linear-gradient(45deg, #44b292, #1f8757);}
main .quickBox2{border-left:1px solid rgba(255,255,255,0.3);}
main .quickBox_top{display:flex; justify-content:space-between; margin-bottom:50rem;}
main .quickBox_top img{display:block; height:80rem;}
main .quickBox_top a{display:flex; align-items:center; width:70rem; transition:0.2s ease;}
main .quickBox_top a svg{display:block; width:100%;}
main .quickBox_top a svg .cls-1{fill:#fff;}
@media(hover:hover){
    main .quickBox_top a:hover{opacity:0.5;}
}
@media(max-width:1279px){
    main .quickBox{padding:40rem 50rem;}
    main .quickBox_top img{height:60rem;}
    main .quickBox_top a{width:50rem;}
}
@media(max-width:767px){
    main .quickBox{padding:30rem 20rem;}
    main .quickBox_top{margin-bottom:30rem;}
    main .quickBox_top img{height:35rem;}
    main .quickBox_top a{width:30rem;}
    main .quickBox_tit{font-size:20rem;}
}