/* visual */
/* visual */
.area_visual{position:relative; width:100%; height:540rem;}
.area_visual .swiper{height:100%;}
.area_visual a{display:block; width:100%; height:100%;}
.area_visual .inr{position:relative; height:100%; margin:0 auto; width:72.9%;}
.area_visual .swiper-slide:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%;}
.area_visual .swiper-slide.slide01:before{background:url(/images/main/main_visual07.jpg)no-repeat center/cover;}
.area_visual .swiper-slide.slide02:before{background:url(/images/main/main_visual06.jpg)no-repeat center/cover;}
.area_visual .swiper-slide.slide03:before{background:url(/images/main/main_visual05.jpg)no-repeat center/cover;}
.area_visual .swiper-slide.slide04:before{background:url(/images/main/main_visual04.jpg)no-repeat center/cover;}
.area_visual .swiper-slide-active:before{animation:visual_bg 2.5s both}
.area_visual .swiper-slide-active .txt{animation:visual_txt 2s both}
.area_visual .txt{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; opacity:0; text-align:center;}
.area_visual .txt p{font-size:var(--font_size50); color:#fff;}
.area_visual .control{display:flex; justify-content:center; align-items:center; position:absolute; bottom:50rem; left:50%; transform:translateX(-50%); z-index:1;}
.area_visual .pager_num{font-size:0; width:auto;}
.area_visual .pager_num span{color:#fff; font-size:var(--font_size16); font-weight:bold;}
.area_visual .pager_num .swiper-pagination-total{display:none;}
.area_visual .pager_num_total{color:#fff; font-size:var(--font_size16); font-weight:bold;}
.area_visual .pager_bar{ position: relative; margin:0 18rem;  width:120rem; height: 3rem; background: rgba(255, 255, 255, 0.4); }
.area_visual .pager_bar:before{ content: ''; position: absolute; inset: 0; width: 0; background: #fff; }
.area_visual .pager_bar.active:before{ animation: visual_bar 5s linear both; }
.area_visual .swiper-button-next,
.area_visual .swiper-button-prev{position:relative; top:auto; left:auto; right:auto; bottom:auto; margin-top:0; width:30rem; height:30rem; transition:0.3s ease;}
.area_visual .swiper-button-next{margin-left:40rem;}
.area_visual .swiper-button-prev{margin-right:40rem;}
.area_visual .swiper-button-next:after,
.area_visual .swiper-button-prev:after{font-size:30rem; font-weight:bold; color:#fff;}
@media(hover:hover){
    .area_visual .swiper-button-next:hover,
    .area_visual .swiper-button-prev:hover{opacity:0.6;}
}
@keyframes visual_bg{
    0%{transform:scale(1.06);}
    100%{transform:scale(1);}
}
@keyframes visual_txt{
    0%{margin-top:0; opacity:0;}
    100%{margin-top:-50px; opacity:1;}
}
@keyframes visual_bar {
	0%{ width: 0%; }
	100%{ width: 100%; }
}
@media(hover:hover){
    .area_visual .control .arrow > div:hover{opacity:0.5;}
}
@media(max-width:1279px){
    .area_visual{margin-top:85rem; height:55vh;}
    .area_visual .pager_num span{font-size:var(--font_size18);}
}
@media(max-width:767px){
    .area_visual{margin-top:70rem; height:45vh;}
    .area_visual .txt{top:55%;}
    .area_visual .txt p > br{display:none;}
    .area_visual .swiper-button-next:after, .area_visual .swiper-button-prev:after{font-size:25rem; font-weight:normal;}
}


/* main_common */
article{padding:120rem 0;}
.main_tit{margin-bottom:40rem;}
.main_tit h2{font-size:var(--font_size35); color:#111;}
.btn_more{display:inline-flex; padding-bottom:3rem; font-size:var(--font_size18); border-bottom:2px solid #aaa; color:#aaa; transition:0.3s ease;}
.btn_more i{display:inline-block; margin-top:-3rem; margin-left:8rem; font-size:30rem; line-height:1; vertical-align:middle;}
.main .arrow{display:flex;}
.main .arrow > div{position:relative; margin-top:0; top:auto; left:auto; bottom:auto; right:auto; width:50rem; height:50rem; border-radius:50%; border:1px solid #333;}
.main .arrow > div:after{font-size:22rem; font-weight:bold; color:#333;}
.main .arrow > div.next:after{margin-left:4rem;}
.main .arrow > div.prev:after{margin-right:4rem;}
.main .arrow > div+div{margin-left:15rem;}
.main .progressbar{position:relative; top:auto; left:auto; bottom:auto; right:auto; background:#ddd;}
.main .progressbar span{background:#333;}
.main_list_tit{display:block; margin-top:25rem; font-size:var(--font_size18); color:#222; font-weight:600;}
.main_list_info{display:block; margin-top:10rem; font-size:var(--font_size16); color:#a0acb9; overflow:hidden; text-overflow:ellipsis; text-align:left; word-wrap:break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
@media(hover:hover){
    .btn_more:hover{color:var(--primary); border-color:var(--primary);}
}
@media(max-width:1279px){
    article{padding:100rem 0;}
    .btn_more{padding-bottom:0;}
}
@media(max-width:767px){
    article{padding:60rem 0;}
    .main_tit{margin-bottom:30rem;}
}
        

/* intro */
.area_intro{position:relative; text-align:center;}
.area_intro:before{content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:150rem; background:#ccc;}
.area_intro p{margin-top:50rem; font-size:var(--font_size40); color:#aaa; font-weight:500;}
.area_intro p b{color:var(--primary);}
@media(max-width:1279px){
    .area_intro:before{height:100rem;}
    .area_intro p{margin-top:25rem;}
}
@media(max-width:767px){
    .area_intro:before{height:70rem;}
    .area_intro p > br{display:none;}
}
        

/* product */
.area_product{background:#f8f8f8;}
.area_product .top{overflow:hidden; margin-bottom:40rem;}
.area_product .top .main_tit{display:flex; align-items:center; float:left; margin-bottom:0 !important;}
.area_product .top .main_tit h2{margin-right:40rem;}
.area_product .top .tab_btn{display:flex; float:right; margin-top:16rem;}
.area_product .top .tab_btn li{font-size:var(--font_size20); color:#aaa; font-weight:500; cursor:pointer;}
.area_product .top .tab_btn li.active{font-weight:bold; color:#111;}
.area_product .top .tab_btn li+li{margin-left:40rem;}
.area_product .img{display:block; position:relative; padding-top:100%; width:100%; overflow:hidden;}
.area_product .img img{display:block; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.area_product .control{display:flex; margin-top:50rem; align-items:center;}
.area_product .control .arrow{width:150rem;}
.area_product .control .progressbar{width:calc(100% - 150rem);}
@media(max-width:1279px){
    .area_product .top{margin-bottom:30rem;}
    .area_product .top .main_tit{float:none;}
    .area_product .top .tab_btn{float:none; margin-top:30rem;}
    .area_product .control{margin-top:30rem;}
    .area_product .control .arrow{display:none;}
    .area_product .control .progressbar{width:100%;}
}
@media(max-width:767px){
    .area_product .top{margin-bottom:10rem;}
    .area_product .top .main_tit h2{margin-right:25rem;}
    .area_product .top .tab_btn{flex-wrap:wrap;}
    .area_product .top .tab_btn li{margin-bottom:20rem; width:calc(100% / 3);}
    .area_product .top .tab_btn li+li{margin-left:0;}
}


/* 시공실적 */
.area_gallery{overflow:hidden;}
.area_gallery .inr{display:flex;}
.area_gallery .main_tit{display:flex; flex-direction:column; justify-content:center; position:relative; width:400rem; margin-bottom:0; z-index:2; background:#fff;}
.area_gallery .main_tit:before{content:''; display:block; position:absolute; top:0; right:0; width:100vw; height:100%; background:#fff; z-index:-1;}
.area_gallery .main_tit h2{margin-top:-100rem;}
.area_gallery .main_tit p{margin-top:20rem; font-size:var(--font_size18); color:#444;}
.area_gallery .main_tit .control{display:flex; margin-top:50rem; align-items:center;}
.area_gallery .main_tit .control .btn_more{}
.area_gallery .swiper{overflow:visible; width:calc(100% - 400rem);}
.area_gallery .swiper ul li{width:320rem;}
.area_gallery .swiper ul li:nth-child(odd){margin-top:80rem;}
.area_gallery .swiper ul li .img{display:block; position:relative; padding-top:116%; width:100%; overflow:hidden;}
.area_gallery .swiper ul li .img img{display:block; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.area_gallery .swiper .progressbar{display:none;}
@media(max-width:1279px){
    .area_gallery .main_tit{width:360rem;}
    .area_gallery .swiper{width:calc(100% - 360rem);}
    .area_gallery .swiper ul li{width:250rem;}
}
@media(max-width:767px){
    .area_gallery .inr{display:block;}
    .area_gallery .main_tit{position:relative;}
    .area_gallery .main_tit:before{display:none;}
    .area_gallery .main_tit h2{margin-top:0;}
    .area_gallery .main_tit .control{position:absolute; margin-top:0; top:2rem; left:105rem;}
    .area_gallery .arrow{display:none;}
    .area_gallery .main_tit .control .btn_more{margin-left:0;}
    .area_gallery .swiper{width:100%; margin-top:30rem;}
    .area_gallery .swiper ul li:nth-child(odd){margin-top:50rem;}
    .area_gallery .swiper .progressbar{display:block; width:100%; margin-top:30rem;}
}


/* cs */
.area_cs{display:flex; padding:0; background:#f8f8f8;}
.area_cs .cs_box{padding:80rem 150rem; width:800rem; height:680rem;}
.area_cs .cs_box .info+.info{margin-top:40rem;}
.area_cs .cs_box .info h3{margin-bottom:5rem; font-size:var(--font_size18); font-weight:bold; color:#222;}
.area_cs .cs_box .info p{font-size:var(--font_size18); color:#444;}
.area_cs .cs_box .info .num{margin-top:30rem;}
.area_cs .cs_box .info .num li{display:flex; align-items:center;}
.area_cs .cs_box .info .num li+li{margin-top:20rem;}
.area_cs .cs_box .info .num li .icon{display:flex; justify-content:center; align-items:center; width:70rem; height:70rem; border-radius:50%; background:#333;}
.area_cs .cs_box .info .num li .icon img{height:30rem; width:auto;}
.area_cs .cs_box .info .num li a{display:block; padding-left:20rem; cursor:pointer; width:calc(100% - 70rem); font-size:var(--font_size25); color:#222; font-weight:bold;}
.area_cs .cs_box .info i{display:block; margin-top:30rem; font-size:16rem; color:#888;}
.area_cs .cs_box .info i b{display:inline-block; margin-right:5rem; color:#333;}
.area_cs .cs_map{width:calc(100% - 800rem); }
.area_cs .cs_map .root_daum_roughmap{width:100% !important;}
.area_cs .cs_map .wrap_map{height:680rem !important;}
.area_cs .cs_map .root_daum_roughmap .map_border,
.area_cs .cs_map .root_daum_roughmap .wrap_controllers{display:none;}
@media(max-width:1279px){
    .area_cs .cs_box{padding:60rem 50rem; width:45%; height:615rem;}
    .area_cs .cs_box .info p > br{display:none;}
    .area_cs .cs_map{width:55%;}
    .area_cs .cs_map .wrap_map{height:615rem !important;}
}
@media(max-width:767px){
    .area_cs{display:block;}
    .area_cs .cs_box{padding:40rem 4%; width:100%; height:auto;}
    .area_cs .cs_box .info+.info{margin-top:30rem;}
    .area_cs .cs_box .info .num{margin-top:20rem;}
    .area_cs .cs_box .info .num li .icon{width:40rem; height:40rem;}
    .area_cs .cs_box .info .num li .icon img{height:20rem;}
    .area_cs .cs_box .info .num li a{padding-left:12rem; width:calc(100% - 40rem);}
    .area_cs .cs_box .info i{margin-top:20rem;}
    .area_cs .cs_map{width:100%; }
    .area_cs .cs_map .wrap_map{height:280rem !important;}
}


/* banner */
.area_banner{position:relative;}
.area_banner .main_tit{text-align:center; margin-bottom:0 !important;}
.area_banner .main_tit h2{color:#fff;}
.area_banner .main_tit h2 > br{display:none;}
.area_banner .main_tit .btn_inquiry{display:inline-block; margin-top:60rem; padding:12rem 25rem; background:var(--primary); font-size:var(--font_size25); color:#fff; border-radius:35rem;}
.area_banner .control{display:flex; position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%);}
.area_banner .control .next:after,
.area_banner .control .prev:after{color:#fff;}
.area_banner .swiper-pagination{display:none;}
.area_banner .swiper{position:absolute; top:0; left:0; width:100%; height:100%;}
.area_banner .swiper ul li{height:100%; width:100%;}
@media(max-width:767px){
    .area_banner .control{display:none;}
    .area_banner .swiper-pagination{display:block;}
    .area_banner .swiper-pagination-bullet,
    .area_banner .swiper-pagination-bullet-active{background:#fff;}
    .area_banner .main_tit .btn_inquiry{margin-top:40rem;}
    .area_banner .main_tit h2 > br{display:block;}
}