@charset "utf-8";
@import "reset.css";
@import "common.css";

/* stie common */
html,body{font-family:'Noto Sans KR', 'Roboto',  'Malgun Gothic', dotum, sans-serif;  width:100%; font-size:16px; letter-spacing: -0.5px;color:#262626;} /* transition:all ease-in .4s; */
.point {color:#b9a48e;}
.bold {font-weight:600;}
.medium {font-weight:500;}
.m_block {display:inline-block;}
.pc_block {display:inline-block;}

/* hamberger */

.hamburger .line{
    height: 2px;
    background-color: #1a1a1a;
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out;
  }
  .hamburger .line:nth-child(1){width:20px; }
  .hamburger .line:nth-child(2){width:20px; margin:5px 0 0 0px; }
  .hamburger .line:nth-child(3){width:20px; margin:5px 0 0 0px; }
  
  .hamburger:hover{
    cursor: pointer;
  }
    
  #hamburger-1.is-active .line:nth-child(2){
    opacity: 0;
  }
  
  #hamburger-1.is-active .line:nth-child(1){
    width:20px!important;
    margin:0;
    -webkit-transform: translateY(6px) rotate(45deg);
    -ms-transform: translateY(6px) rotate(45deg);
    -o-transform: translateY(6px) rotate(45deg);
    transform: translateY(6px) rotate(45deg);
  }
  
  #hamburger-1.is-active .line:nth-child(3){
    width:20px!important;
    margin:0;
    -webkit-transform: translateY(-3px) rotate(-45deg);
    -ms-transform: translateY(-3px) rotate(-45deg);
    -o-transform: translateY(-3px) rotate(-45deg);
    transform: translateY(-3px) rotate(-45deg);
  }

/** top **/
.btn-top {
  width:70px;
  height:20px;
  color:#1a1a1a;
  position:fixed;  
  bottom: 60px;
  right:20px;
  z-index:999;
  display:none;
  -ms-transform: rotate(-90deg); /* IE 9 */
  transform: rotate(-90deg); /* Standard syntax */
}
.btn-top:hover {cursor: pointer;}


.btn_top02 {
  display:inline-block; margin-right:10px;
  font-size:12px; font-weight:400; color:#1a1a1a;
}


/*common layout*/
.h_head {height:90px; text-align:right;}
    .logo {display:inline-block; width:190px; line-height:90px; float:left;}
    .logo > img {vertical-align: middle;}
    .menu {display:inline-block; }
    /* .menu {display:inline-block; padding-left:218px;} */
        .gnb {display:inline-block;}
        .gnb > li {display:inline-block; padding:0 25px;}
        .gnb > li > a  {display:inline-block; line-height:90px; font-size:17px; padding:0px 0px 0 0px; font-weight:400; color:#1a1a1a; letter-spacing: -0.03em;}
        .gnb > li > a:hover {border-bottom:2px solid #f25126;}
        .gnb > li > ul {display:block; position:absolute; top:90px; z-index:999;}
        .gnb > li > ul > li {display:inline-block;}
        .gnb > li > ul > li > a { width:100%;  display:inline-block; font-size:15px; color:#666666; padding:15px 30px 0 0px;}
    .h_plus {display:none;}
    .gnb2 {display:none;}
    .menu_btn {display:none;}
    .menu_on {display:block;}
    .gnb_hover_wrap {width:100%; height:60px; background:white; position:absolute; top:90px; z-index:998; border-top:1px solid #e6e6e6; display:block; content:"";}
.slide {width:100%; position:relative; text-align:center; color:white; letter-spacing:-0.03em; font-weight:300;}
    .slide01 {background:url('../images/slide01.png'); height:720px;}
    .slide02 {background:#3e6b88; height:720px;}
    .slide > .slick-arrow {display:none!important;}
    .slide > .slick-dots {position:absolute; left:calc(50% - 25px); bottom:180px;}
    .slide > .slick-dots > li {display:inline-block; width:8px; height:8px; text-indent: -9999px; border-radius: 50%; margin-right:15px; background:white; vertical-align: middle;}
    .slide > .slick-dots > .slick-active {width:14px; height:14px; background:url("../images/slide_active.png");}
    .slide_txt01 {margin-top:200px; font-size:15px; margin-bottom:30px; }
    .slide_txt02 {font-size:44px; line-height:55px;}
    .slide_txt03 {font-size:44px; line-height:45px; font-weight:500; margin-bottom:35px;}
    .slide_txt04 {font-size:18px;}
.sec01 {padding:75px 0;}
    .sec01_txt01 {text-align:center; margin-bottom:35px; font-size:30px; color:#1a1a1a; letter-spacing: -0.03em; font-weight:500;}
    .sec01_box {display:block; width:370px;  float:left; margin-right:45px;}
    .sec01_box:last-child {margin-right:0;}
    .sec01_box_img {display:block; background:skyblue; width:370px; height:400px;}
    .sec01_txt02 {font-size:24px; font-weight:500; margin-top:20px;}
    .sec01_txt03 {font-size:18px; font-weight:300; color:#666666; margin-top:5px;}
    .sec01_box_left {width:90%; float:left;}
    .sec01_box_right {width:10%; float:right;}
        .sec01_box_right_img {margin-top:55px;}
    .sec01_box2 {width:370px; height:400px; background:url(../images/sec01_img03.png); padding:10px; color:white; letter-spacing: -0.03em;}
        .sec01_box2_in {border:1px solid #f25126; background:rgba(0,0,0,0.1); height:380px; padding:0 20px;}
        .sec01_box2_txt01 {font-size:24px; font-weight:500; margin-top:25px;}
        .sec01_box2_txt02 {font-size:18px; font-weight:300;}
        .sec01_box2_txt03 {margin-top:255px;}
        .sec01_box2_txt04 {font-size:14px; line-height:19x; border-bottom:1px solid white; display:inline-block; font-weight:500; vertical-align: middle; }
        .sec01_box2_in_img {vertical-align: middle;margin-left:10px;}
.sec02 {background:#f7f7f7; padding:75px 0;}
  .sec02_txt02wrap {display:block; position:relative;}
  .sec02_txt02 {font-size:16px; font-weight:300; color:#666666; text-align:center; margin-bottom:35px;}
  .sec02_txt03 {position:absolute; display:block; top:0; right:0;}
  .sec02_txt04 {margin-top:15px; font-size:18px; font-weight:500; color:#1a1a1a;}
  .sec02_txt05 {margin-top:5px; font-size:16px; font-weight:300; color:#666666;}
  .sec02_list {margin-left:-15px; margin-right:-15px;}
  .sec02_box {float:left; margin:30px 13px;}
  .sec02_box > img {width:280px;}
.sec03 {background:white; padding:70px 0; text-align:center;}
  .sec03_box{display:block; position:relative; width:220px; padding:0 15px; text-align:center;}
  .sec03_img {width:208px; display:block; position:absolute; top:0;}
  .sec03_img_in {margin:0 auto;}
  .sec03_sq{border:1px solid #e6e6e6; margin-top:35px; padding-top:40px; padding-bottom:20px;}
  .sec03_txt01 {font-size:18px; font-weight:500; color:#1a1a1a; margin-bottom:5px;}
  .sec03_txt02 {font-size:16px; font-weight:300; color:#666666;}
  .sec03_slide > .slick-prev {position:absolute; left:-50px; top:80px; text-indent: -9999px; width:36px; height:11px; background:url('../images/sec03_left.png') no-repeat 0 0; border:0px;}
  .sec03_slide > .slick-next {position:absolute; right:-50px; top:80px;  text-indent: -9999px;width:36px; height:11px; background:url('../images/sec03_right.png') no-repeat 0 0; border:0px;}
  .wrap_sec03{width:1230px; margin:0 auto;}
.sec04 {padding:0 0 70px 0;}
  .sec04 > .wrap {border-top:1px solid #e6e6e6;}
  .sec04_list {margin-top:70px;}
  .sec04_box {float:left; width:360px; margin-right:60px;}
  .sec04_box:last-child {margin-right:0px;}
  .sec04_txt01 {float:left;font-size:26px; line-height:26px; font-weight:500; color:#1a1a1a;}
  .sec04_txt02 {float:right;}
  .sec04_head {margin-bottom:20px;}
  .sec04_head2 {margin-bottom:26px;}
  .sec04_list2 {border-top:1px solid #e6e6e6;}
  .sec04_txtbox {border-bottom:1px solid #e6e6e6; line-height:45px; display:block;}
  .sec04_circle {border-radius:60px; margin-bottom:2px; margin-right:5px; background:Black; width:4px;  height:4px; content:""; display:inline-block; vertical-align: middle;}
  .sec04_txt03 {font-size:15px; font-weight:300; color:#666666; width:250px; overflow:hidden; display:inline-block; vertical-align: middle;}
  .sec04_txt03_2 {font-size:15px; font-weight:300; color:#666666; width:300px; overflow:hidden; display:inline-block; vertical-align: middle;}
  .sec04_txt04 {display:inline-block; width:94px; text-align:center; font-size:14px; font-weight:300; color:#666666; vertical-align: middle;}
  .sec04_txt04_2 {display:inline-block; width:44px; text-align:center; font-size:14px; font-weight:300; color:#666666; vertical-align: middle;}
  .sec04_list3 {border:1px solid #e6e6e6; padding:30px;}
  .sec04_txt05 {display:inline-block; padding-left:15px; padding-right:45px; font-size:18px; font-weight:300; color:#666666;}
  .sec04_txt05_2 {display:inline-block; padding-left:15px; padding-right:79px; font-size:18px; font-weight:300; color:#666666;}
  .sec04_txt06 {font-size:22px; font-weight:500; color:#1a1a1a;}
  .sec04_list3_box {margin-bottom:25px;}
  .sec04_list3_box > img {vertical-align: middle;}
  .sec04_list3_box2 > img {vertical-align: middle;}
.footer {padding:50px 0; background:#f7f7f7; margin-top:150px; }
  .footer01 {width:152px ; margin-right:75px; float:left; font-size:26px; font-weight:900; color:#b2b2b2; letter-spacing: 0.02em;}
  .footer02 {width:500px; margin-right:190px; float:left; font-size:14px; font-weight:300; color:#666666; line-height:24px;}
  .footer03 {width:250px; text-align:right; float:left;}
  .footer_txt01 {font-size:14px; font-weight:600; color:#666666; display:inline-block; margin-right:5px;}
  .footer_txt02 {font-size:13px; margin-top:20px; font-weight:300; color:#999999;}
  .footer_txt03 {font-size:16px; font-weight:400; color:#1a1a1a; margin-bottom:5px;}
  .footer_txt04 {font-size:22px; font-weight:500; color:#1a1a1a; margin-bottom:15px;}
  .footer_txt05 {font-size:16px; font-weight:300; color:#666666; line-height: 30px;}


/* subpage */
.subhead {text-align:center; height:310px; }
.sub1010_head {background:url('../images/sub1010_bg.png') no-repeat 0 0; background-size:cover;}
.sub2010_head {background:url('../images/sub2010_bg.png') no-repeat 0 0; background-size:cover;}
.sub3010_head {background:url('../images/sub3010_bg.png') no-repeat 0 0; background-size:cover;}
.sub4010_head {background:url('../images/sub4010_bg.png') no-repeat 0 0; background-size:cover;}
.sub5010_head {background:url('../images/sub5010_bg.png') no-repeat 0 0; background-size:cover;}
.subhead_txt01 {font-size:38px; font-weight:500; color:white; padding-top:100px; margin-bottom:20px;}
.subhead_txt02 {font-size:22px; font-weight:300; color:#ffffff;}
.subhead_title {font-size:30px; font-weight:500; color:#1a1a1a; margin:70px 0 35px; text-align:center;}

/* sub1010 - 회사소개 */
.sub1010_tabmenu {text-align:center; margin-bottom:90px;}
.tabbtn {width:25%; float:left; font-size:18px; font-weight:500; color:#1a1a1a; height:60px; border:1px solid #e6e6e6; line-height:60px;}
.on {border-bottom:3px solid #f25126;}

.sub1010_sec01_left {width:585px;  float:left;}
.sub1010_sec01_right {width:540px; float:right;}
.sub1010_txt03_1 {margin:70px 0 ;float:left; width:32.5%; text-align:center; border-right:1px solid #e6e6e6;}
.sub1010_txt01 {font-size:28px; font-weight:500; color:#1a1a1a;}
.sub1010_txt02 {font-size:28px; font-weight:300; color:#1a1a1a;}
.sub1010_txt03_1 {font-size:18px; font-weight:300; color:#1a1a1a;}
.sub1010_txt03_1:last-child {border-right:0px;}
.sub1010_txt04 {font-size:22px; font-weight:400; color:#1a1a1a; margin-bottom:30px;}
.sub1010_txt05 {font-size:16px; font-weight:300; color:#1a1a1a;margin-bottom:15px; }
.sub1010_txt06_1 {font-size:16px; font-weight:500; color:#1a1a1a; display:inline-block; vertical-align: middle; }
.sub1010_txt06_1 > img {margin-left:5px;}
.sub1010_txt06_box {float:left; margin-right:10px;}

/* sub1020 - 연혁 */
.sub1020_left {vertical-align: middle; float:left; width:380px;}
.sub1020_right {float:left; width:calc(100% - 380px); border-bottom:1px solid #e6e6e6; padding-bottom:30px; margin-bottom:50px; color:#1a1a1a;}
.sub1020_left > img {vertical-align: middle; display:inline-block; margin-right:15px;}
.sub1020_txt01 {vertical-align: middle; font-size:76px; font-weight:500; color:#1a1a1a;}
.sub1020_txt01_2 {vertical-align: middle; font-size:76px; font-weight:500; color:#cccccc;}
.sub1020_txt02 {font-size:18px; font-weight:300; color:#1a1a1a; margin-bottom:20px; }
.dot {width:3px; height:3px; background:#1a1a1a; border-radius: 30px; display:inline-block; vertical-align: middle; margin-right:6px; margin-bottom:6px;}


/* sub1030 - 조직도 */
.sub1030_sec01 {padding-left:5%; padding-right:5%;}


/* sub1040 - 오시는길 */
.sub1040_adress {margin-top:50px;}
.sub1040_adress_box {width:25%; float:left;  border-right:1px solid #e0e0e0; text-align:center;}
.sub1040_map > iframe {width:100%; height:500px;}
.sub1040_adress_box:last-child {border-right:0px;}
.sub1040_txt02 {font-size:18px; margin-top:15px;  margin-bottom: 10px; font-weight:500; color:#1a1a1a;}
.sub1040_txt03 {font-size:15px; font-weight:300; color:#333333;}

/* sub2010 - cibi소개 */
.sub2010_sec01 {color:#1a1a1a;}
.sub2010_txt01 {font-size:28px; font-weight:500; margin-bottom:20px;}
.sub2010_txt02 {font-size:16px; font-weight:300; margin-bottom:35px;}
.sub2010_txt03_box {width:50%; float:left;}
.sub2010_txt03_box_inner {margin-right:30px; border:1px solid #e6e6e6}
.sub2010_txt03_box_inner2 {margin-left:30px; border:1px solid #e6e6e6;}
.sub2010_txt04 {text-align:center; background:#f7f7f7; font-size:16px; font-weight:400; padding:15px 0; border-top:1px solid #e6e6e6;}
.sub2010_txt04_down {width:387px; float:left; text-align:center; background:#f7f7f7;  padding:15px 0; }
.sub2010_txt04_down2 {width:calc(100% - 387px); float:left; background:#d9d9d9; text-align:center; vertical-align: middle; padding:15px 0;}
.sub2010_txt04_down_wrap {border-top:1px solid #e6e6e6;}
.sub2010_txt05 {margin-top:85px; border-bottom:1px solid #e6e6e6; padding-bottom:95px; font-size:16px; font-weight:400;}
.sub2010_txt06 {margin-top:45px;}
.sub2010_txt06_left {height:80px; width:50%; float:left; background:#f5821e;}
.sub2010_txt06_right {height:80px; line-height:80px; text-align:center; width:50%; float:left; background:#f7f7f7; font-size:14px; font-weight:400; }
.sub2010_txt06_1 {display:inline-block; margin-right:5px; font-weight:500;}
.sub2010_txt06_2 {margin-right:35px;}
.sub2010_txt07 {margin-top:100px; }
.sub2010_txt08 {margin-top:35px; font-size:16px; font-weight:300;}
.sub2010_txt09 {font-size:28px; font-weight:500; margin-bottom:40px;}
.down_icon {display:inline-block; margin-right:5px; vertical-align: middle;}

.sub2010_txt10{font-size: 28px; font-weight: 500; margin-bottom: 20px; margin-top: 70px;}

.sub2010_txt01_wrap_download{width:100%; max-width: 1200px; margin:0 auto;}
.tabbtn2010{width: 33%; text-align: center; font-weight: 500;float:left; font-size:18px; color:#1a1a1a; height:60px; border:1px solid #e6e6e6; line-height:60px;} 

/* sub2020 - 시공사례 */
.sub2020_sec01 {color:#1a1a1a;}
.sub2020_list {margin:-25px -13.3px;}
.sub2020_box {display:block; width:280px; float:left; margin:25px 13.3px;}
.sub2020_box:hover {cursor : pointer;}
.sub2020_box > img {width:280px; height:300px;}
.sub2020_txt01 {font-size:16px; font-weight:500; margin-top:10px;}

/* sub2021 - 시공사례_상세 */
.sub2021_left {width:520px; float:left; margin-right:80px;}
.sub2021_right {width:calc(100% - 600px); float:left; color:#1a1a1a;}
.sub2021_txt01 {font-size:24px; font-weight:500; padding-bottom:20px; border-bottom:1px solid #1a1a1a;}
.sub2021_txt02_wrap {padding:15px 0; border-bottom:1px solid #e6e6e6; margin-bottom:45px;}
.sub2021_txt02 {padding:10px 0;}
.sub2021_txt02_tit {width:150px; float:left; padding-left:20px; font-size:16px; font-weight:300;}
.sub2021_txt02_con {width:calc(100% - 150px); float:left; padding-left:65px; font-size:16px; font-weight:300; color:#808080;}


.sub2021_txt03 {text-align:right;}
.sub2021_txt03_1 {vertical-align: middle;}
.sub2021_txt03_1 > img {vertical-align: middle;}

/* sub2030 - 주거시설 */
.sub2030_sec01 {color:#1a1a1a;}
.sub2030_list {margin-top:60px;}
.sub2030_box {float:left; width:191.6px; margin-right:10px; text-align:center; height:140px; background:#f2f2f2; padding: 36px 0 0 0 ;}
.sub2030_box > img {display:inline-block; vertical-align: baseline; height:36px; }
.sub2030_box:last-child {margin-right:0px;}
.sub2030_txt01 {margin-top:5px; font-size:15px; font-weight:300;}
.sub2030_sec02 {margin-top:60px; padding-top:60px; background:#f7f7f7; position:relative; height:1000px; margin-bottom:0;}
.sub2030_sec02_box {width:380px; margin-right:30px; float:left;}
.sub2030_sec02_box:last-child {margin-right:0px;}
.sub2030_sec02_absolute {position:absolute;}
.sub2030_sec02_box p
{
	text-align: center;
	margin: 20px 0;
	font-size: 17px;
}

/* sub2040 - 상업시설 */
.sub2040_circle {border-radius:60px; margin-bottom:2px; margin-right:5px; background:#f25126; width:4px;  height:4px; content:""; display:inline-block; vertical-align: middle;}
.sub2040_box {background:white; padding:30px 30px 20px 30px;}
.sub2040_txt01 {margin-bottom:10px;}

/* sub3010 - 시행계열사 */
.sub3010_sec01 {padding-left:5%; padding-right:5%; text-align:center;}
.sub3010_tabmenu {text-align:center; margin-bottom:90px;}
.tabbtn_3010 {width:50%; float:left; font-size:18px; font-weight:500; color:#1a1a1a; height:60px; border:1px solid #e6e6e6; line-height:60px;}
.on {border-bottom:3px solid #f25126;}
.sub3010_imgbox {width:568px; height:245px; text-align:center; padding:52.5px 0;}
.sub3010_imgbox > img {height:140px;}
.sub3010_img {width:100%; margin:0 auto; max-width:844px;}

/* sub3020 - 협력사 */
.sub3020_sec01 {color:#1a1a1a;}
.sub3020_list {margin-bottom:26px;}
.sub3020_box {border:1px solid #e6e6e6; padding:30px 20px; width:280px; float:left; margin-right:26px;}
.sub3020_box:last-child{margin-right:0px;}
.sub3020_txt01_wrap {margin-bottom:15px;}
.sub3020_txt01_wrap > img {width:50px; height:50px; vertical-align: middle;}
.sub3020_txt01 {font-size:18px; font-weight:500; display:inline-block; margin-left:10px;}
.sub3020_txt02 {font-size:14px; font-weight:300; color:#666666; margin-bottom:10px; display:inline-block; margin-right:30px;}
.sub3020_txt02:last-child{margin-bottom:0px;}
.sub3020_txt03 {font-size:14px; font-weight:300; color:#000000; }

/* modal css */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  position:Absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.modal-content > img {max-width:500px;}
/* Caption of Modal Image */
.caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 500px;
  text-align: center;
  color: #ccc;
}

/* Add Animation */
/* .modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
} */

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  z-index:999;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 80%;
  }
}
.modal_on {display:block;}