/*
	Copyright 2020 Raonbnp
	http://raonbnp.com, http://raonwebstore.com
*/
@charset "UTF-8";
@import '/_css/common.css'; /* front, admin 공통*/
@import '/_css/member.css'; /* front member 공통*/
@import '/_css/board.css'; /* front member 공통*/
@import 'loading.css';
@import 'fontSet.css';
@import 'basic.css';
@import 'layout.css';


/*인사말*/
#intro_sec01{ display:flex; flex-wrap:wrap;}
#intro_sec01 > div{ width:50%; }
#intro_sec01 .img_area{ padding-right:3rem;}
#intro_sec01 .txt_area h4{ font-size:2.8rem; font-weight:300; line-height:1.5;}
#intro_sec01 .txt_area h4 b{ font-weight:700;}
#intro_sec01 .txt_area p{ margin:4rem 0; font-size:1.8rem; font-weight:400; line-height:2.2;}
#intro_sec01 .txt_area .sign{ display:block; font-size:1.6rem; text-align:right;  }
#intro_sec01 .txt_area .sign img{ display:inline-block; vertical-align:bottom; margin-left:2rem;}

@media all and (max-width:1630px) {
    #intro_sec01 .txt_area p br{ display:none; }
}

@media all and (max-width:1199.98px) {
    #intro_sec01 > div{ width:100%; }
    #intro_sec01 .img_area{ text-align:center; margin-bottom:3rem; padding-right:0;}
    #intro_sec01 .txt_area{ max-width:720px; margin:0 auto; }
    #intro_sec01 .txt_area h4{ font-size:2.3rem;}
    #intro_sec01 .txt_area p{ margin:2rem 0; font-size:1.7rem;}
    
}@media all and (max-width:991.98px) {
    #intro_sec01 .txt_area h4{ font-size:2rem;}
}

@media all and (max-width:575.98px) {
    #intro_sec01 .txt_area .sign img:last-child{ width:10rem;}
}


/*경영이념*/
#story_sec01 .story_list{ display:flex; flex-wrap:wrap;}
#story_sec01 .story_list > li{ display:flex; flex-wrap:wrap; width:calc(50% - 1rem); margin-right:2rem; margin-top:2rem; padding:5rem 3rem; border:1px solid #ddd; }
#story_sec01 .story_list > li:nth-child(2n+2){ margin-right:0;}
#story_sec01 .story_list > li:nth-child(-n+2){ margin-top:0;}
#story_sec01 .story_list > li .ico_area{ width:21%;}
#story_sec01 .story_list > li .txt_area{ width:79%; padding:4rem 0 0 3rem;}
#story_sec01 .story_list > li .txt_area h4{ font-size:2rem; font-weight:700; margin-bottom:1rem;}
#story_sec01 .story_list > li .txt_area p{ font-size:1.8rem; font-weight:400;}

@media all and (max-width:1199.98px) {
    #story_sec01 .story_list > li{ display:block; width:calc(50% - .75rem); margin-right:1.5rem; margin-top:1.5rem; }
    #story_sec01 .story_list > li .ico_area{ width:100% ;  }
    #story_sec01 .story_list > li .txt_area{ width:100%; padding:3rem 0 0 0;}
    #story_sec01 .story_list > li .txt_area p{ font-size:1.7rem;}
    #story_sec01 .story_list > li .txt_area p br{ display:none;}
}

@media all and (max-width:767.98px) {
    #story_sec01 .story_list > li{ width:100%; margin-right:0; }
    #story_sec01 .story_list > li .ico_area img{ width:10rem;}
    #story_sec01 .story_list > li:nth-child(-n+2){ margin-top:1.5rem;}
    #story_sec01 .story_list > li:nth-child(-n+1){ margin-top:0;}
}



/*특허 및 인증서*/
#certification_sec01 ul{ display:flex; flex-wrap:wrap; margin-bottom:6rem; }
#certification_sec01 ul:last-child{ margin-bottom:0; }
#certification_sec01 ul li{ width:calc(20% - 1.6rem); margin-right:2rem; margin-top:4rem;}
#certification_sec01 ul li:nth-child(5n+5){ margin-right:0;}
#certification_sec01 ul li:nth-child(-n+5){ margin-top:0;}
#certification_sec01 ul li img{ border:1px solid #ddd; }
#certification_sec01 ul li strong{ display:block; margin-top:1rem; font-size:1.6rem; color:#333;  }


@media all and (max-width:1199.98px) {
    #certification_sec01 ul li{ width:calc(20% - 1.2rem); margin-right:1.5rem; margin-top:3rem;}
}

@media all and (max-width:991.98px) {
    #certification_sec01 ul li{ width:calc(25% - 1.125rem); }
    #certification_sec01 ul li:nth-child(5n+5){ margin-right:1.5rem;}
    #certification_sec01 ul li:nth-child(-n+5){ margin-top:3rem;}
    #certification_sec01 ul li:nth-child(4n+4){ margin-right:0;}
    #certification_sec01 ul li:nth-child(-n+4){ margin-top:0;}
}

@media all and (max-width:767.98px) {
    #certification_sec01 ul li{ width:calc(33.33% - 1rem); }
    #certification_sec01 ul li:nth-child(4n+4){ margin-right:1.5rem;}
    #certification_sec01 ul li:nth-child(-n+4){ margin-top:3rem;}
    #certification_sec01 ul li:nth-child(3n+3){ margin-right:0;}
    #certification_sec01 ul li:nth-child(-n+3){ margin-top:0;}
}

@media all and (max-width:575.98px) {
    #certification_sec01 ul li{ width:calc(50% - .75rem); }
    #certification_sec01 ul li:nth-child(3n+3){ margin-right:1.5rem;}
    #certification_sec01 ul li:nth-child(-n+3){ margin-top:3rem;}
    #certification_sec01 ul li:nth-child(2n+2){ margin-right:0;}
    #certification_sec01 ul li:nth-child(-n+2){ margin-top:0;}
}

/*연혁*/
#history_sec01 .state{ display:block; text-align: center; font-size:10rem; color:#f4f4f4; line-height:1; font-weight:900;}
#history_sec01 .content_area{ display:flex; flex-wrap:wrap; }
#history_sec01 .img_area{ display:flex; flex-wrap:wrap; width:50%; padding-right:3rem;}
#history_sec01 .img_area > div{ width:100%; margin-top:auto; margin-bottom:20rem; }
#history_sec01 .img_area > div:last-child{ margin-bottom:0;}
#history_sec01 .history_list{ width:50%;}
#history_sec01 .history_list > li{ position:relative;   padding-bottom:8rem; }
#history_sec01 .history_list > li:last-child{ padding-bottom:0; }
#history_sec01 .history_list > li:before{ content:""; position:absolute; top:0; left:-.5px; width:1px; height:100%; background:#ddd;}
#history_sec01 .history_list > li h4{ position:relative; padding-left:5rem; font-size:4rem; margin-bottom:1rem; font-weight:700;   }
#history_sec01 .history_list > li h4:after,
#history_sec01 .history_list > li h4:before{ content:""; z-index:11; position:absolute; border-radius:100%; }
#history_sec01 .history_list > li h4:after{ top:0; left:-1.4rem; width:2.8rem; height:2.8rem; border:1px solid #ddd; background:#fff; 
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
#history_sec01 .history_list > li h4:before{ z-index:12; top:.9rem; left:-.5rem;  width:1rem; height:1rem; background:#00529c; }
#history_sec01 .history_list > li p{ position:relative;  padding-left:12rem; font-size:1.5rem; color:#333; margin-bottom:.5rem; }
#history_sec01 .history_list > li p:last-child{ margin-bottom:0; }
#history_sec01 .history_list > li p b{ position:absolute; top:0; left:5rem;  }

@media all and (max-width:991.98px) {
    #history_sec01 .state{ font-size:6rem;}
    #history_sec01 .history_list > li{ padding-bottom:5rem;}
    #history_sec01 .history_list > li h4{ font-size:2rem;}
    #history_sec01 .history_list > li p{ font-size:1.6rem;}
}
@media all and (max-width:575.98px) {
    #history_sec01 .state{ font-size:4rem;}
    #history_sec01 .img_area{ display:none; }
    #history_sec01 .history_list{ width:100%;}
}
    



/*오시는길*/
#location_sec01 .root_daum_roughmap_landing{ width:100%; height:50rem; border:1px solid #ddd; }
#location_sec01 .root_daum_roughmap .wrap_map{ height:100%; }
#location_sec01  .root_daum_roughmap .map_border{ display:none;}
#location_sec01 .info_area{ position:relative; padding:2rem 4rem 0;}
#location_sec01 .info_area ul{ display:flex; flex-wrap:wrap;}
#location_sec01 .info_area ul li{ position:relative; width:50%; padding:.5rem 15px .5rem 6rem; margin:1.5rem 0; }
#location_sec01 .info_area ul li i{ position:absolute; top:0; left:0; width:4rem; height:4rem; line-height:4rem; text-align:center; border-radius:100%; background:#00529c; font-size:2rem; color:#fff; }
#location_sec01 .info_area .map_link{ position:absolute; top:0; right:0; display:flex; flex-wrap:wrap; align-items:center; width:16rem; height:16rem; background:#00529c; }
#location_sec01 .info_area .map_link div{ width:100%; text-align:center; font-size:1.8rem; color:#fff; font-weight:400;  }
#location_sec01 .info_area .map_link div img{ display:block; margin:0 auto 1rem;}

@media all and (max-width:1199.98px) {
    #location_sec01 .root_daum_roughmap_landing{ height:40rem;  }
}

@media all and (max-width:991.98px) {
    #location_sec01 .root_daum_roughmap_landing{ height:30rem;  }
}

@media all and (max-width:767.98px) {
    #location_sec01 .info_area ul li{ margin:1rem 0;}
    #location_sec01 .info_area .map_link{ position:static; display:block; margin:3rem auto 0; width:20rem; height:5rem; }
    #location_sec01 .info_area .map_link div{ height:100%; line-height:5rem; }
    #location_sec01 .info_area .map_link div img{ display:inline-block; width:3rem; margin-right:.5rem;}
}

@media all and (max-width:575.98px) {
    #location_sec01 .info_area{ padding:2rem 0 0;}
    #location_sec01 .info_area ul li{ width:100%; }
}

/*사업분야*/
#business_sec01{ text-align:center; }



/*공사실적*/
#construction_sec01 .state{ display:block; text-align: center; font-size:10rem; color:#f4f4f4; line-height:1; font-weight:900;}
#construction_sec01 .content_area{ display:flex; flex-wrap:wrap; padding-bottom:4rem; margin-bottom:4rem; border-bottom:1px solid #ddd;  }
#construction_sec01 .content_area:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
#construction_sec01 .construction_list{ position:relative;  width:50%;}
#construction_sec01 .construction_list:before{ content:""; position:absolute; top:0; left:-.5px; width:1px; height:100%; background:#ddd;}
#construction_sec01 .construction_list > li{ display:flex; flex-wrap:wrap;  padding-bottom:6rem; }
#construction_sec01 .construction_list > li:last-child{ padding-bottom:0; }
#construction_sec01 .construction_list > li > strong{ position:relative; display:block; width:11rem; padding-left:3rem; font-size:2.2rem; margin-bottom:1rem; font-weight:700;   }
#construction_sec01 .construction_list > li > strong:after,
#construction_sec01 .construction_list > li > strong:before{ content:""; z-index:11; position:absolute; border-radius:100%; }
#construction_sec01 .construction_list > li > strong:after{ top:0; left:-1.4rem; width:2.8rem; height:2.8rem; border:1px solid #ddd; background:#fff; 
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
#construction_sec01 .construction_list > li > strong:before{ z-index:12; top:.9rem; left:-.5rem;  width:1rem; height:1rem; background:#00529c; }
#construction_sec01 .construction_list > li > div{ width:calc(100% - 11rem); }
#construction_sec01 .construction_list > li p{  font-size:1.8rem; color:#333; margin-bottom:1rem; }
#construction_sec01 .construction_list > li p:last-child{ margin-bottom:0; }

#construction_sec01 .img_area{ width:50%; padding-left:3rem;}
#construction_sec01 .img_area > div{ width:100%; margin-bottom:2rem; }
#construction_sec01 .img_area > div:last-child{ margin-bottom:0;}

@media all and (max-width:991.98px) {
    #history_sec01 .state{ font-size:6rem;}
    #construction_sec01 .construction_list > li{ padding-bottom:5rem;}
    #construction_sec01 .construction_list > li > strong{ font-size:2rem;}
    #construction_sec01 .construction_list > li  p{ font-size:1.6rem;}
}
@media all and (max-width:767.98px) {
    #construction_sec01 .img_area{ display:none; }
    #construction_sec01 .construction_list{ width:100%;}
}