@charset="utf-8";
 
.logo { background-image: url('../../images/logo.png'); padding:55px; background-size: contain; transition: all .5s; position:absolute; left:2%; }
.logo_bl {  background-image: url('../../images/logo_bl.png'); transition: all .5s;}

#header { position: fixed; top:0; z-index: 9; width:100%;   transition: all .1s;  cursor: pointer;  }
#header:hover { background-color: #fff;}
#header:hover .logo {  background-image: url('../../images/logo_bl.png'); transition: all .5s; }
#header:hover .ham span { background-color: #222;}
#header:hover .lnb a { color:#222; } 
#header:hover .subnavbtn { color:#222; }
.nav_bar {overflow: hidden; z-index: -1; padding-right:20%; float:right; }
.nav_bar a {float: left; font-size: 16px; text-align: center; padding: 14px 16px; text-decoration: none; }

.subnav { float:left; overflow: hidden;  }
.subnav .subnavbtn {  font-size: .9em;    border: none;  outline: none;  padding: 45px 30px;  margin: 0;  color:#fff;   font-weight:500; } 

.subnavbtn span { transition: all .5s; width:0%; }

.subnav:hover .subnavbtn { color: #955528 !important; position: relative;}
.subnav:hover .subnavbtn span { background-color: #955528; display:block; width:73%; height:3px; position:absolute; left:15%; bottom:0;}

.nav_bar:hover  {    color:#222;   background-color: #fff;  transition: .3s;}
.nav_bar:hover button { color:#222;  transition: all .5s; }
.subnav-content {  display: none;  position: absolute;  top:111px;  left: 0;  background-color:rgba(255, 255, 255, .9);  width: 100%;  z-index: 1;  transition: all .3s;  padding:10px 0;}
.subnav-content div {    margin:0 auto;  max-width:500px;  display: flex;  align-items: center;  justify-content: center;}
.subnav-content a {   flex:1; font-size: .9em; transition: all .3s;}
.subnav-content a:hover { color: #955528; transition: all .3s;}

.subnav:hover .subnav-content {display: block;}



.ham_bl { background-color: #222!important; }
.bgc_wh { background-color:#fff;  border-bottom:1px solid #eee; transition: all .5s;}  
.c_bl { color: #222 !important;}
.c_or { color: #caa992 !important;}
 
.lnb { position:absolute; right:4%; top:38%; font-size:.75rem; width:170px; }
.lnb a { display: block; float:left; margin:0 1% 0 0; width: 23%; text-align: center; color:#fff;}
.lnb a:first-child { margin-right:8px;}
.lnb a span { width:5px; height:5px; background-color: #caa992; display:block; margin:0 auto;  border-radius: 50%; opacity: 0; transition: all .2s; }

.lnb a:hover span { opacity: 1; transition: all .2s; }
.closebtn {   display: none; }



/* 제품 메뉴 설정 */
.subnav-content-products div { max-width:700px; }
.subnav-content-products div a span { background-size: contain; padding:25px; display: block; margin-bottom:10px; }
.s-combi span { background-image: url('../../images/i-combi.png');  transition: all .3s;}
.s-roll span { background-image: url('../../images/i-roll.png');  transition: all .3s;}
.s-wood span { background-image: url('../../images/i-wood.png');  transition: all .3s;}
.s-honeycom span { background-image: url('../../images/i-honeycom.png');  transition: all .3s; }
.s-alu span { background-image: url('../../images/i-alu.png');  transition: all .3s;}

.s-combi:hover span { background-image: url('../../images/i-combi_on.png');  transition: all .3s;}
.s-roll:hover span { background-image: url('../../images/i-roll_on.png'); transition: all .3s;}
.s-wood:hover span { background-image: url('../../images/i-wood_on.png'); transition: all .3s;}
.s-honeycom:hover span { background-image: url('../../images/i-honeycom_on.png'); transition: all .3s;}
.s-alu:hover span { background-image: url('../../images/i-alu_on.png'); transition: all .3s; }




@media only screen  and (max-width:680px){     
  .logo { top:-10px; } 
  #header { height:80px;}
  .nav_bar { height:100vh; width:300px; float:right; position:absolute; right:-300px; top:0; font-size:1.1em; background-color: #fff; color:#222; padding:110px 0 0; 
    transition: 0.5s; overflow-x: hidden;  z-index: 9998;}
  .subnav { float:none; overflow: visible;   }
  .nav_bar > a { 
    position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  }
  .subnav .subnavbtn {  font-size: .9em;    border: none;  outline: none;  padding: 20px;  margin: 0;  color:#222; width:100%;  font-weight:500; border-bottom:1px solid #eee;  } 

  .subnavbtn span { transition: all .5s; width:0%; }

  .subnav:hover .subnavbtn { color: #955528 !important; position: relative;}
  .subnav:hover .subnavbtn span { background-color: #955528; display:block; width:100%; height:3px; position:absolute; left:0%; bottom:0;}

  .nav_bar:hover  {    color:#222;   background-color: #fff;  transition: .3s;}
  .nav_bar:hover button { color:#222;  transition: all .5s; }
  .subnav-content {  display: none;  position: relative; top:0; left:0;  background-color:rgba(255, 255, 255, .9);  width: 100%;  z-index: 1;  transition: all .3s;  padding:10px 0;}
  .subnav-content div {    display: flex; flex-direction: column; align-items: center;  justify-content: flex-start;}
  .subnav-content a { color:#222;  flex:1; text-align: center;}
  .subnav-content a:hover { color: #955528;}

  .subnav:hover .subnav-content {display: block;}

  .ham { position:absolute; right:2%; top:25px; display: block;}
  .ham  span { display: block; margin:8px; width:30px; height:1px; background-color: #fff; } 
  .ham  span:nth-child(2) { width:20px;}
  
   
  .lnb { position:absolute; right:-300px; top:80px; font-size:.75rem; width:300px; display: block;  z-index:9999; transition: 0.5s; }
  .lnb a { display: block; float:left; margin:0; width: 24%; text-align: center; color:#222;}
  .lnb a:first-child { margin-right:8px;}
  .lnb a span { width:5px; height:5px; background-color: #caa992; display:block; margin:0 auto;  border-radius: 50%; opacity: 0; transition: all .2s; }

  .lnb a:hover span { opacity: 1; transition: all .2s; }

  .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    display: block;
  }
  .subnav-content-products div a span { display: none;}
}




#main { height:100%;}
.main_wrap > div { overflow: hidden;
  width:100%; height:100%; position:relative; 
}
.main_wrap .company_area{ background-image: url("../../images/main_2.jpg");}

.main_wrap section span { width:70px; height:2px; background-color: #fff; margin:30px auto; display: block;}
.main_wrap section p { color:#fff;  max-width:600px; margin:0 auto; text-align: center;}
.main_wrap section a { width:80px; height:80px; display: block; border:1px solid #eee; color:#fff; text-align: center; line-height:80px; margin:30px auto; font-size:.75em; font-weight:400;  background-color: rgba(255, 255, 255, .2);  transition: all .3s;}
.main_wrap section a:hover { background-color: rgba(255, 255, 255, .8); color:#222; transition: all .3s; } 
.visual_area { height:100%; }
.visual_area div.main-c p { color: #25a21c !important;} 
.visual_area div { overflow: hidden; height:100%; background-position: center center;}
.visual_area div.main_a { background-image: url('../../images/main_a.jpg');}
.visual_area div.main_b { background-image: url('../../images/main_b.jpg');}



/* 슬라이더 스크롤 설정 */  
.slide_text .description { font-size: 1rem; color: #fff; line-height: 1.75; font-weight: 300; margin-bottom: 20px; text-align: center; max-width:600px; width:80%; margin:0 auto;  }
.slide_text .button { font-size: 1rem; color: #333; line-height: 1; font-weight: 700; background: hsla(0,0%,100%,.82); }
.slide_text img { transition: all .3s; }
.slide_dots_wheel a { font-size: .875rem; color: #fff; line-height: 1.2em; }
#slide-01 .slide_text img { max-width:588px; width:80%; display: block; margin:0 auto;  transition: all .3s; }
#slide-02 .slide_text img { max-width:130px; width:40%; display: block; margin:0 auto;  transition: all .3s;}

.slide_text a { width:80px; height:80px; display: block; border:1px solid #eee; color:#fff; text-align: center; line-height:80px; margin:30px auto; font-size:.75em; font-weight:400;  background-color: rgba(255, 255, 255, .2);  transition: all .3s;}
.slide_text a:hover { background-color: rgba(255, 255, 255, .8); color:#222; transition: all .3s; }

.slide_text span { width:70px; height:2px; background-color: #fff; margin:30px auto; display: block; }
.slide_dots_wheel a:first-child .slide_dot,
.slide_dots_wheel a:hover       .slide_dot { background-color: #0078d4; }
.slide_dots_wheel .slide_dot { background-color: #fff; }


















.products_area { position: relative;}
.products_area .txt { position:absolute; top:0; left:0; z-index: 1; padding:9% 2%;  height:80vh; width:25.2%; background: linear-gradient( to bottom, rgba(255,255,255,1), rgba(255,255,255,0) );   }
.products_area .txt p { font-size:1.8em; font-weight:400; }
.products_area .txt span { font-size:.9em; margin-top: 10px; display: block; }
.products_slick{ width:100%; height:100%;}
.products_slick div {   position: relative; height:100vh; border-left:1px solid #ddd; }
.products_slick div a { font-size:.9em; font-weight:400; position:absolute; right:10%; bottom:6%; padding:2% 3%; border:1px solid #ddd; background-color: rgba(255, 255, 255, .5); transition: all .3s; }
.products_slick div a:hover { background-color: #955528; color:#fff;  transition: all .3s;}
.products_slick div a:hover span { color:#fff; transition: all .3s; }
.products_slick div a span { color:#955528;  font-weight:400; }
.products_slick .pr_01 { background-image: url("../../images/pr_01.jpg");}
.products_slick .pr_02 { background-image: url("../../images/pr_02.jpg");}
.products_slick .pr_03 { background-image: url("../../images/pr_03.jpg");}
.products_slick .pr_04 { background-image: url("../../images/pr_04.jpg");}
.products_slick .pr_05 { background-image: url("../../images/pr_02.jpg");}
.products_slick .pr_06 { background-image: url("../../images/pr_03.jpg");} 


@media only screen  and (max-width:800px){  
  .products_area .txt { width:50.5%; padding:80px 20px; }
  .products_slick div a { font-size:1.05em; right:auto;  left:5%;  bottom:15%;  }
  .products_slick div { height:90vh; }
  .products_area .txt {  height:50vh; }
  
  }
@media only screen  and (max-width:480px){  
  .products_area .txt { width:100%; }


}






.promote_area {  }

.promote_area .video_wrap { padding:200px 0;} 

@media only screen  and (max-width:480px){  
  .promote_area .video_wrap { padding:100px 0;} 
}

.footer { width:100%;  font-size:.85em;  background-color: #121212; padding:1.3%; color:rgb(173, 173, 173);}
.footer section {  position: relative;  padding:0; }