/* visual */
.mainvisual{position:relative; width:100%; height:100vh;}
.mainvisual .swiper{position:relative; width:100%; height:100%;}
.mainvisual li{display:flex; align-items:center; width:100%; height:100%; overflow:hidden; text-align:center;}
.mainvisual li:before{content:''; display:block; position:absolute; top:0; left:0; transform-origin:center; width:100%; height:100%;}
.mainvisual li.slide1:before{background:url(../images/main/main_visual00.jpg)no-repeat center/cover;}
.mainvisual li.slide2:before{background:url(../images/main/main_visual02.jpg)no-repeat center/cover;}
.mainvisual li.slide3:before{background:url(../images/main/main_visual01.jpg)no-repeat center/cover;}
.mainvisual li.swiper-slide-active:before{animation:visualBg 3s both;}
.mainvisual li .inr-wide{margin-top:-100rem;}
.mainvisual li.swiper-slide-active .inr-wide{animation:visualTxt 1.5s both;}
.mainvisual li h3{font-size:32rem; font-weight:500; color:#fff;}
.mainvisual li h2{margin-top:5rem; font-size:60rem; line-height:1.2; font-weight:800; text-transform:uppercase; color:#fff;}
.mainvisual .scrollUi{position:absolute; bottom:60rem; left:50%; transform:translateX(-50%); z-index:1;}
.mainvisual .scrollUi span{display:block; position:relative; margin-bottom:25rem; width:45rem; height:70rem; border:1px solid #fff; border-radius:20rem;}
.mainvisual .scrollUi span:before{content:''; display:block; position:absolute; top:10rem; left:50%; transform:translateX(-50%); width:10rem; height:20rem; border-radius:10rem; background:#fff; animation:scrollUi 2s infinite;}
.mainvisual .scrollUi img{display:block; margin:auto; width:12rem;}
@keyframes visualBg{
    0%{transform:scale(1.1);}
    100%{transform:scale(1);}
}
@keyframes visualTxt{
    0%{transform:translateY(30rem); opacity:0;}
    100%{transform:translateY(0); opacity:1;}
}
@keyframes scrollUi{
    0%{opacity:0;}
    100%{top:40rem; opacity:1;}
}
@media(max-width:1279px){
    .mainvisual .scrollUi{bottom:40rem;}
    .mainvisual .scrollUi span{width:40rem; height:65rem;}
    .mainvisual .scrollUi span:before{width:8rem;}
    @keyframes scrollUi{
        0%{opacity:0;}
        100%{top:35rem; opacity:1;}
    }
}
@media(max-width:767px){
    .mainvisual li h3{font-size:22rem;}
    .mainvisual li h2{font-size:40rem;}
}


/* 메인 공통 */
article{position:relative; overflow:hidden;}
.articleLine{display:flex; justify-content:space-between; position:absolute; top:0; left:50%; transform:translateX(-50%); max-width:1520rem; width:96%; height:100%;}
.articleLine span{display:block; height:100%; width:1px; background:#ededed;}
.articleLine.st01 span{opacity:0.2;}
.mainTit em{display:block; margin-bottom:8rem; font-size:20rem; color:#000; font-weight:600;}
.mainTit h2{font-size:62rem; color:#000; font-weight:800; text-transform:uppercase; line-height:1.2;}
.mainTit.st02 em{color:#fff;}
.mainTit.st02 h2{color:#fff;}
.btnMore{display:block; display:flex; justify-content:center; align-items:center; margin-top:80rem; width:180rem; height:54rem; border-radius:30rem; transition:0.2s ease;}
.btnMore em{display:block; margin-right:25rem; font-size:15rem; font-weight:600; transition:0.2s ease;}
.btnMore svg{display:block; width:6rem; transition:0.2s ease;}
.btnMore svg path{transition:0.2s ease;}
.btnMore.st01{background:#fff; border:1px solid #000;}
.btnMore.st01 em{color:#000;}
.btnMore.st01 svg path{fill:#000;}
.btnMore.st02{border:1px solid #fff;}
.btnMore.st02 em{color:#fff;}
.btnMore.st02 svg path{fill:#fff;}
@media(hover:hover){
    .btnMore.st01:hover{background:#000; border:1px solid #000;}
    .btnMore.st01:hover em{color:#fff;}
    .btnMore.st01:hover svg path{fill:#fff;}
    .btnMore.st02:hover{background:#fff;}
    .btnMore.st02:hover em{color:#000;}
    .btnMore.st02:hover svg path{fill:#000;}
}
@media(max-width:1279px){
    .mainTit h2{font-size:50rem;}
    .btnMore{margin-top:60rem;}
}
@media(max-width:767px){
    .mainTit h2{font-size:40rem;}
    .btnMore{margin-top:40rem;}
}


/* 회사소개 */
.area_about{padding:160rem 0 200rem;}
.area_about .inr{display:flex; justify-content:space-between;}
.aboutTxt{padding-right:80rem; width:48%;}
.aboutTxt p{margin-top:30rem; font-size:18rem; color:#333;}
.aboutImg{display:block; margin-top:120rem; width:52%;}
.aboutImg img{display:block; width:100%;}
.aboutRolling{margin-top:10rem; white-space:nowrap;}
.aboutRolling_box{display:inline-block; font-size:120rem; font-weight:800; line-height:1; color:#000; opacity:0.15; text-transform:uppercase;}
@media(max-width:1279px){
    .area_about{padding:120rem 0 160rem;}
    .aboutTxt{padding-right:50rem; width:52%;}
    .aboutTxt p > br{display:none;}
    .aboutImg{width:48%;}
    .aboutRolling_box{font-size:90rem;}
}
@media(max-width:767px){
    .area_about{padding:100rem 0 120rem;}
    .area_about .inr{display:block;}
    .aboutTxt{padding-right:40rem; width:100%;}
    .aboutTxt p{margin-top:25rem;}
    .aboutImg{margin-top:50rem; padding-left:40rem; width:100%;}
    .aboutRolling_box{font-size:55rem;}
}


/* 제품소개 */
.area_product{padding:270rem 0 290rem; background:url(../images/main/product_bg.jpg)no-repeat center/cover;}
.area_product .inr{display:flex; align-items:flex-end; flex-direction:column; text-align:end;}
@media(max-width:1279px){
    .area_product{padding:230rem 0 250rem;}
}
@media(max-width:767px){
    .area_product{padding:190rem 0 210rem;}
}


/* 설비현황 */
.area_status{padding:130rem 0 180rem; text-align:center; background:url(../images/main/status_bg.jpg)no-repeat bottom/cover;}
.statusImg{display:block; margin-top:70rem; width:100%;}
.statusImg img{display:block; width:100%; height:100%; object-fit:cover;}
.statusBtnMore{margin-left:auto; margin-right:auto;}
@media(max-width:1279px){
    .area_status{padding:120rem 0 140rem;}
    .statusImg{margin-top:50rem;}
}
@media(max-width:767px){
    .area_status{padding:100rem 0;}
    .statusImg{margin-top:40rem; height:300rem;}
}


/* 고객지원 */
.area_cs{padding:45rem 0 200rem; background:url(../images/main/cs_bg.jpg)no-repeat top/cover;}
.area_cs .inr{display:flex; justify-content:space-between;}
.csCont1{position:relative; width:calc(50% - 20rem);}
.csCont1_btn{display:flex; justify-content:center; align-items:center; position:absolute; top:47rem; right:0; width:54rem; height:54rem; border-radius:50%; border:1px solid #000; transition:0.2s ease;}
.csCont1_btn svg{display:block; width:6rem; transition:0.2s ease;}
.csCont1_btn svg path{transition:0.2s ease; fill:#000;}
.csCont1_board{margin-top:30rem; border-top:1px solid #000;}
.csCont1_board li a{display:flex; padding:40rem 20rem; border-bottom:1px solid #e4e4e4;}
.csCont1_board li em{display:block; color:#000; font-size:18rem; font-weight:500; width:82%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.csCont1_board li i{display:block; font-size:16rem; color:#000; opacity:0.5; width:18%; text-align:end;}
.csCont2{display:flex; flex-direction:column; align-items:center; justify-content:center; width:calc(50% - 20rem); text-align:center; background:url(../images/main/contact-us.jpg)no-repeat center/cover;}
.csCont2 h2{font-size:48rem; color:#fff; line-height:1; font-weight:800; text-transform:uppercase;}
.csCont2 p{margin-top:22rem; color:#fff; font-size:18rem;}
.csCont2 .btnMore{margin-top:60rem;}
@media(hover:hover){
    .csCont1_btn:hover{background:#000;}
    .csCont1_btn:hover svg path{fill:#fff;}
}
@media(max-width:1279px){
    .area_cs{padding:20rem 0 120rem;}
    .csCont1{width:55%;}
    .csCont1_board li a{padding:30rem 0;}
    .csCont2{padding:20rem; width:calc(45% - 40rem);}
    .csCont2 h2{font-size:35rem;}
    .csCont2 .btnMore{margin-top:40rem;}
}
@media(max-width:767px){
    .area_cs{padding:20rem 0 100rem;}
    .area_cs .inr{display:block;}
    .csCont1{width:100%;}
    .csCont1_btn{top:34rem;}
    .csCont1_board li a{display:block; padding:20rem 10rem;}
    .csCont1_board li em{width:100%;}
    .csCont1_board li i{display:block; margin-top:10rem; text-align:left; width:100%;}
    .csCont2{margin-top:50rem; padding:80rem 20rem; width:100%;}
}