/*메인 타이틀*/
.main_tit{ margin-bottom:4rem;  text-align:center;}
.main_tit h2{ font-size:4rem; font-weight:700;}
.main_tit p{ margin-top:2rem; font-size:1.8rem; }

@media all and (max-width:1199.98px) {
    .main_tit h2{ font-size:3.5rem;}
    .main_tit p br{ display:none;}
}

@media all and (max-width:991.98px) {
    .main_tit{ margin-bottom:3rem; }
    .main_tit h2{ font-size:3rem;}
    .main_tit p{ margin-top:1rem; font-size:1.7rem;}
}
    


/* 메인 비쥬얼 */
#main_visual{ position:relative;}
#main_visual .swiper-slide{ height:70rem; overflow:hidden;}
#main_visual .swiper-slide .img_area{ position:absolute; top:50%; left:50%; width:100%; height:100%; background-position:center; background-size:cover;
    transform:translate(-50%,-50%) scale(1.2); -webkit-transform:translate(-50%,-50%) scale(1.2);  -moz-transform:translate(-50%,-50%) scale(1.2); 
    transition:all 6s; -webkit-transition:all 6s; -moz-transition:all 6s;
}
#main_visual .swiper-slide-active .img_area{  transform:translate(-50%,-50%) scale(1);  -webkit-transform:translate(-50%,-50%) scale(1);  -moz-transform:translate(-50%,-50%) scale(1);  }
#main_visual .swiper-slide .txt_area{ z-index:11; opacity:0; position:absolute; top:50%; left:50%; width:100%; text-align:center;
    transform:translate(-50%,-0%); -webkit-transform:translate(-50%,-0%); -moz-transform:translate(-50%,-0%); 
    transition:all 1.5s; -webkit-transition:all 1.5s; -moz-transition:all 1.5s;
}
#main_visual .swiper-slide-active .txt_area{ opacity:1; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); }
#main_visual .swiper-slide .txt_area h2{ font-size:5rem; color:#fff; line-height:1.4; font-weight:300;}
#main_visual .swiper-slide .txt_area h2 b{ font-weight:500;}

#main_visual_paging{ z-index:11; position:absolute; top:50%; left:3rem;
    transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%);
}
#main_visual_paging .swiper-pagination-bullet{ display:block; width:1.2rem; height:1.2rem; margin:1rem 0; background:#fff; opacity:.3;
    transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s;
}
#main_visual_paging .swiper-pagination-bullet-active{ opacity:1;}

#main_visual .control_area{ z-index:11;  position:absolute; bottom:4rem; left:0; width:100%; text-align:center; font-size:0; }
#main_visual .control_area button{ display:inline-block; vertical-align: middle; outline:none;}
#main_visual .control_area .slide_btn{ position:relative; width:30%; max-width:32rem; height:4rem; border-bottom:1px solid rgba(255,255,255,0.3); }
#main_visual .control_area .slide_btn:after,
#main_visual .control_area .slide_btn:before{ content:""; position:absolute; bottom:-.5px; background:#fff;}
#main_visual .control_area .slide_btn:after{  width:1px; height:100%;}
#main_visual .control_area .slide_btn:before{  width:20%; max-width:5rem; height:1px;}
#main_visual .control_area .slide_btn#main_visual_prev:after{ left:0; 
    transform-origin: left bottom; -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom;
    transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);
} 
#main_visual .control_area .slide_btn#main_visual_prev:before{ left:0;}
#main_visual .control_area .slide_btn#main_visual_next:after{ right:0; 
    transform-origin: right bottom; -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom;
    transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg);
}
#main_visual .control_area .slide_btn#main_visual_next:before{ right:0;}


#main_visual_state{ position:relative; width:4rem; height:4rem; margin:0 2rem -3rem 2rem; border:1px solid rgba(255,255,255,0.3); border-radius:100%;  }
#main_visual_state:after{ content:"\ea3b"; font-family: xeicon; position:absolute; top:50%; left:50%; color:#fff; font-size:1.8rem;
    transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); 
}
#main_visual_state.stop:after{content:"\ea3e";}


@media all and (max-width:1199.98px) {
    #main_visual .swiper-slide{ height:60rem;}
    #main_visual .swiper-slide .txt_area h2{ font-size:4rem;}
}

@media all and (max-width:991.98px) {
    #main_visual .swiper-slide{ height:50rem;}
    #main_visual .swiper-slide .txt_area h2{ font-size:3.5rem;}
    
    #main_visual_paging{ left:15px; }
}

@media all and (max-width:767.98px) {
    #main_visual .swiper-slide{ height:45rem;}
    #main_visual .swiper-slide .txt_area h2{ font-size:2.8rem;}

    #main_visual .control_area{ bottom:3rem;}
}

@media all and (max-width:575.98px) {
    #main_visual .swiper-slide .txt_area h2 br{ display:none;}
}
    

/*메인 사업분야*/
#main_business .content_area{ display:flex; flex-wrap:wrap;}
#main_business .item_area{ display:flex; align-items: center; width:50%; height:52rem; background-position:center; background-size:cover }
#main_business .item_area01{ background-image:url('../_img/main/main_business_bak01.jpg');}
#main_business .item_area02{ margin-top:4rem; background-image:url('../_img/main/main_business_bak02.jpg');}
#main_business .item_area > div{ width:100%; padding:0 7rem; }
#main_business .item_area > div *{ color:#fff; }
#main_business .item_area > div h3{ font-size:2.8rem; font-weight:500; margin-bottom:1.5rem;}
#main_business .item_area > div p{ font-size:1.7rem; margin-bottom:3rem; font-weight:300;}

@media all and (max-width:1199.98px) {
    #main_business .item_area{ height:45rem; }
    #main_business .item_area > div{ padding:0 4rem; }
}

@media all and (max-width:991.98px) {
    #main_business .item_area{ width:90%; height:auto; padding:7rem 0; }
    #main_business .item_area02{ margin-left:auto; margin-top:-3rem; }
    #main_business .item_area > div h3{ font-size:2.3rem;}
    #main_business .item_area > div p{ font-size:1.6rem; }
}

@media all and (max-width:767.98px) {
    #main_business .item_area > div{  padding:0 3rem; }
}

@media all and (max-width:575.98px) {
    #main_business .item_area > div p br{ display:none; }
}
    

/*메인 시공실적*/
#main_construction{ position:relative; text-align:center;}
#main_construction:after{ content:""; z-index:-1; position:absolute; bottom:0; left:0; width:100%; min-width:280px; height:65%; background:#f0f0f0;}            
#main_construction .tab_list{ margin-bottom:4rem; font-size:0; text-align:center; }
#main_construction .tab_list li{ display:inline-block; margin-right:5rem;}
#main_construction .tab_list li:last-child{ margin-right:0;}
#main_construction .tab_list button{ display:inline-block; font-size:2.4rem; color:#888; font-weight:700; border-bottom:3px solid rgba(0,82,156, 0); outline:none; }
#main_construction .tab_list button.on{ color:#00529c; border-color:rgba(0,82,156, 1); }

#main_construction .construction_list{ display:flex; flex-wrap:wrap; text-align:left;  }
#main_construction .construction_list li{ width:calc(33.33% - 2.666666666666667rem); margin-right:4rem; margin-top:4rem;}
#main_construction .construction_list li:nth-child(3n+3){ margin-right:0;}
#main_construction .construction_list li:nth-child(-n+3){ margin-top:0; }
#main_construction .construction_list li .img_area{ position:relative; padding-top:100%; margin-bottom:1.5rem; background-color:#fff; border:1px solid #ddd;
    background-position:center; background-size:cover; 
}
#main_construction .construction_list li .img_area > span{ position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center;  width:100%; height:100%; font-size:2rem; color:#bbb; }
#main_construction .construction_list li .img_area .hover_area{ opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;  background:rgba(0,0,0,0.5);
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; 
}
#main_construction .construction_list li:hover .img_area .hover_area{ opacity:1;}
#main_construction .construction_list li .img_area .hover_area span{ padding-bottom:.2rem; font-size:1.7rem; color:#fff; border-bottom:2px solid #fff; }
#main_construction .construction_list li .subj{ display:block; font-size:2.2rem; color:#000;  }

#main_construction .com_link02{ margin-top:6rem; }

@media all and (max-width:1199.98px) {
    #main_construction .tab_list{ margin-bottom:3rem; }
    #main_construction .tab_list li{ margin-right:3rem; }
    #main_construction .tab_list button{ font-size:2rem; }

    #main_construction .construction_list li{ width:calc(33.33% - 1rem); margin-right:1.5rem; margin-top:3rem;  }
    #main_construction .construction_list li .subj{ font-size:1.8rem; }
}
@media all and (max-width:767.98px) {
    #main_construction:after{ height:80%; }
    #main_construction .tab_list li{ margin-right:1.5rem; }
    #main_construction .tab_list button{ font-size:1.8rem; }

    #main_construction .construction_list li{ width:calc(50% - .75rem); }
    #main_construction .construction_list li:nth-child(3n+3){ margin-right:1.5rem;}
    #main_construction .construction_list li:nth-child(-n+3){ margin-top:3rem; }
    #main_construction .construction_list li:nth-child(2n+2){ margin-right:0rem;}
    #main_construction .construction_list li:nth-child(-n+2){ margin-top:0rem; }
}
@media all and (max-width:380px) {
    #main_construction:after{ height:90%; }
    #main_construction .construction_list li{ width:100%; margin-right:0; margin-top:3rem; }
    #main_construction .construction_list li:nth-child(1){ margin-top:0; }
    #main_construction .construction_list li:nth-child(3n+3){ margin-right:0rem;}
}


/*메인 게시판*/
#main_board{ padding:10rem 0; background:#f0f0f0; }
#main_board .main_tit{ position:relative;}
#main_board .main_tit a{ position:absolute; bottom:0; right:0; font-size:3rem; line-height:1;  color:#000; }
#main_board .no_list{ text-align:center; font-size:1.6rem; color:#999; padding:5rem 0; }
#main_board .notice_list{ display:flex; flex-wrap:wrap;}
#main_board .notice_list li{ width:25%; border:1px solid #ddd; border-left:0;}
#main_board .notice_list li:nth-child(1){ border-left:1px solid #ddd; }
#main_board .notice_list li a{ position:relative; display:block; padding:5rem 3rem; background:#fff;  }
#main_board .notice_list li a:after{ content:""; opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #000;
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
#main_board .notice_list li a:hover:after{ opacity:1; }
#main_board .notice_list .date{ display:block; position:relative; font-size:1.4rem; color:#797979; margin-bottom:3rem; }
#main_board .notice_list .date:after{ content: "\e913"; font-family: xeicon; position:absolute; top:0; right:0; font-size:1.6rem; }
#main_board .notice_list .subj_area:after{ content:""; display:block; width:3rem; height:3px; background:#000; margin:3rem 0; }
#main_board .notice_list .subj{ display:block; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; height:6rem; font-size:1.8rem; color:#222;  }
#main_board .notice_list .content{ display:block; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; height:8rem; font-size:1.6rem; color:#797979;}

#main_board .bnr_area{ display:flex; flex-wrap:wrap;}
#main_board .bnr_area .item_area{ width:50%; padding:6rem 5rem; background-position:center; background-size:cover; background-color:#fff;   }
#main_board .bnr_area .item_area01{ background-image:url('../_img/main/main_board_bak01.png');}
#main_board .bnr_area .item_area02{ background-image:url('../_img/main/main_board_bak02.png');}
#main_board .bnr_area .item_area h3{ font-size:3.6rem; font-weight:500; }
#main_board .bnr_area .item_area h3:after{ content:""; display:block; width:3.6rem; height:3px; background:#000; margin:3rem 0;}
#main_board .bnr_area .item_area p{ font-size:1.8rem; margin-bottom:3rem;}
#main_board .bnr_area .item_area .com_link02{ height:5rem; line-height:5rem;}


@media all and (max-width:1199.98px) {
    #main_board{ padding:8rem 0;}
    #main_board .bnr_area .item_area{ padding:4rem 3rem; }
    #main_board .bnr_area .item_area h3{ font-size:3rem; }
    #main_board .bnr_area .item_area h3:after{ margin:1.5rem 0; }
    #main_board .bnr_area .item_area p{ font-size:1.6rem; }
}

@media all and (max-width:991.98px) {
    #main_board{ padding:6rem 0;}
    #main_board .notice_list li{ width:50%; border-top:0; }
    #main_board .notice_list li:nth-child(2n+1){ border-left:1px solid #ddd; }
    #main_board .notice_list li:nth-child(-n+2){ border-top:1px solid #ddd; }

    #main_board .bnr_area .item_area h3{ font-size:2.5rem; }
}

@media all and (max-width:767.98px) {
    #main_board .bnr_area .item_area{ width:100%;}
}

@media all and (max-width:575.98px) {
    #main_board .main_tit a{ bottom:unset; top:0; }
}
@media all and (max-width:380px) {
    #main_board .notice_list li{ width:100%; border-left:1px solid #ddd; }
    #main_board .notice_list li:nth-child(-n+2){ border-top:0; }
    #main_board .notice_list li:nth-child(-n+1){ border-top:1px solid #ddd; }
}
