@charset "utf-8";
@import url(/css/basic.css);

html,body{position:relative; overflow-x:hidden; overflow-y:hidden; padding:0;
	margin:0;} 


#wrap {width:100%; overflow-x:hidden; overflow-y:hidden;}
#header {width:100%; }
#container {width:100%; }
main{width:100%; overflow-x:hidden; overflow-y:hidden;}
section{width:100%;}


/************* 위생적인 사업 *************/
#intro{width:100%; position:relative; height:100vh; clear:both; overflow:hidden; }
#intro h3{position:absolute; width:100%; height:110px; left:0; right:0; top:0; bottom:0; margin:0 auto;  z-index:10;}
#intro h3 img{ position:absolute; left:0; right:0; top:20%; bottom:0; margin:0 auto; display:none;}
#intro h3 span{ display:none;}
.intro_wrap {position:relative; clear:both; width:100%; }

.intro_list{position:relative; width:100%; height:auto; display:block; clear:both; }

.intro_list .arch {position:absolute; top:0%; left:50%; margin-left:-60%; width:60%; height:100vh; display:inline-block; }
.intro_list  a{width:100%; height:100%; display:inline-block; cursor:pointer}
.intro_list .arch .arch_img{position:relative; height:100%; overflow:hidden; height:90vh;  }
.intro_list .arch .arch_img span{position:absolute; top:12%; right:0px; width:100%; height:80%; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.intro_list .arch .arch_img .on-img{z-index:1; opacity:0;filter:Alpha(opacity=0); }
.intro_list a:hover .arch .arch_img .on-img{opacity:1.0;filter:Alpha(opacity=100); top:-2%;  right:0px; }
.intro_list a:hover .arch .arch_img .on-img img{width:100%; }
.intro_list a:hover .arch .arch_img .off-img{z-index:1; opacity:0;filter:Alpha(opacity=0); }
.intro_list a:hover .arch .arch_img .off-img img{width:100%; }
.intro_list a:hover .arch .arch_img {height:; }
.intro_list .arch .arch_img:after{content:""; display:block; clear:both;}
.intro_list .arch .arch_img img{ display:block; width:100%; right:0; top:0; }
.intro_list .arch .arch_img .off-img img{ display:block; right:0; bottom:0; width:100%;}
.intro_list .arch .arch_img .on-img img{ display:block; right:0; top:0; width:100%;}
.intro_list .arch p{position:absolute; top:45%; right:0; font-size:52px; color:#fff; font-weight:300; line-height:140%; text-align:right; z-index:100; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.intro_list a:hover  .arch p{top:43%;}
.intro_list .arch p b{font-weight:bold; }
.intro_list .arch .btn_arch{position:absolute; top:60%; right:30%; width:230px; height:50px; font-size:18px; color:#ffffff; letter-spacing:-0.02em; line-height:50px; background:url(/intro/img/btn_arch.png) left bottom no-repeat;	 font-weight:400; text-transform:uppercase; z-index:10; text-align:left; opacity:0.6; filter:Alpha(opacity=60); -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; text-indent:50px;}
.intro_list a:hover .arch .btn_arch{ opacity:1.0;filter:Alpha(opacity=100); }


.intro_list .inex {position:absolute; top:0%; left:50%; width:100%; height:100vh; display:inline-block; }
.intro_list  a{width:100%; height:100%; display:inline-block; cursor:pointer}
.intro_list .inex .inex_img{position:relative; height:100%; overflow:hidden; height:90vh;  }
.intro_list .inex .inex_img span{position:absolute; top:12%; left:0px; width:100%; height:80%; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.intro_list .inex .inex_img .on-img{z-index:1; opacity:0;filter:Alpha(opacity=0); }
.intro_list a:hover .inex .inex_img .on-img{opacity:1.0;filter:Alpha(opacity=100);  top:-2%;  left:0px; }
.intro_list a:hover .inex .inex_img .on-img img{width:50%; }
.intro_list a:hover .inex .inex_img .off-img{z-index:1; opacity:0;filter:Alpha(opacity=0); }
.intro_list a:hover .inex .inex_img .off-img img{width:100%; }
.intro_list a:hover .inex .inex_img {height:; }
.intro_list .inex .inex_img:after{content:""; display:block; clear:both;}
.intro_list .inex .inex_img img{ display:block; width:100%; left:0; bottom:0; }
.intro_list .inex .inex_img .off-img img{ display:block; left:0; top:0; width:100%; }
.intro_list .inex .inex_img .on-img img{ display:block; left:0; bottom:0; width:100%; }
.intro_list .inex p{position:absolute; top:45%;  left:0; font-size:52px; color:#333; font-weight:300; line-height:140%; text-align:left; z-index:100;  -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.intro_list a:hover  .inex p{top:43%; color:#fff; }
.intro_list .inex p b{font-weight:bold; }
.intro_list .inex .btn_inex{position:absolute; top:60%; left:30%; width:230px; height:50px; font-size:18px; color:#333333; letter-spacing:-0.02em; line-height:50px; background:url(/intro/img/btn_inex.png) right bottom no-repeat;	 font-weight:400; text-transform:uppercase; z-index:10; text-align:left; opacity:0.6; filter:Alpha(opacity=60); -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s} 
.intro_list a:hover .inex .btn_inex{ opacity:1.0;filter:Alpha(opacity=100); color:#fff; }





/************* 하단정보 *************/
footer{width:100%; position:absolute; bottom:0; left:0; right:0; clear:both;  z-index:10;}
.copyWrap .company{line-height:1.8; font-size:14px; color:#f2f2f2; padding-left:10px; display:none;}
.copyWrap .company b{font-size:18px; display:block; font-weight:normal;}
.copyWrap .company span{margin-right:30px}
.copyWrap .copy{ display:block; font-size:13px; font-weight:400; color:#222; padding-bottom:2%; letter-spacing:0.2em; text-align:center; text-transform:uppercase;}



/* 20200612 내가 작업한 스타일[반응형] */

@media all and (max-width:85em){


}

@media all and (max-width:65em){

#intro h3{ height:0px; display:none;}
.intro_list .arch {position:relative; top:0%; left:0; right:0; margin-left:0; width:100%; height:45vh; display:inline-block; }
.intro_list .arch .arch_img{position:relative; height:100%;  }
.intro_list .arch .arch_img span{position:absolute; top:0%; left:0; right:0px; width:100%; height:45vh; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.intro_list a:hover .arch .arch_img .on-img{opacity:1.0;filter:Alpha(opacity=100); top:0%; left:0px;  z-index:5;}
.intro_list a:hover .arch .arch_img .on-img img{width:100%; }
.intro_list a:hover .arch .arch_img .off-img{z-index:1; opacity:0;filter:Alpha(opacity=0); }
.intro_list a:hover .arch .arch_img .off-img img{width:100%; }
.intro_list a:hover .arch .arch_img {overflow:hidden; }
.intro_list .arch .arch_img:after{content:""; display:block; clear:both;}
.intro_list .arch .arch_img img{ display:block; width:100%; left:0; bottom:0;  }
.intro_list .arch .arch_img .off-img img{ display:block; right:0; top:0; width:100%;  height:100%;  }
.intro_list .arch .arch_img .on-img img{ display:block; right:0; top:0; width:100%;  height:100%;  }
.intro_list .arch p{position:absolute; top:45%; right:20%; font-size:3em; color:#fff; font-weight:300; line-height:140%; text-align:right; z-index:100; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.intro_list a:hover  .arch p{top:43%;}
.intro_list .arch p b{font-weight:bold; }
.intro_list .arch .btn_arch{position:absolute; top:60%; left:20%; width:150px; height:50px; font-size:1.2em; color:#ffffff; letter-spacing:-0.02em; line-height:50px; background:url(/intro/img/btn_arch.png) left bottom no-repeat;	 font-weight:400; text-transform:uppercase; z-index:10; text-align:right; opacity:0.6; filter:Alpha(opacity=60); -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.intro_list a:hover .arch .btn_arch{ opacity:1.0;filter:Alpha(opacity=100); }


.intro_list .inex {position:relative; top:0%; left:0; right:0; width:100%; height:45vh; display:inline-block; }
.intro_list .inex .inex_img{position:relative; height:100%;  }
.intro_list .inex .inex_img span{position:absolute; top:0%; left:0px; right:0px; width:100%; height:45vh;  -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.intro_list a:hover .inex .inex_img .on-img{opacity:1.0;filter:Alpha(opacity=100);  top:0%; bottom:0;  left:0px;}
.intro_list a:hover .inex .inex_img .on-img img{width:100%; }
.intro_list a:hover .inex .inex_img .off-img{z-index:1; opacity:0;filter:Alpha(opacity=0); }
.intro_list a:hover .inex .inex_img .off-img img{width:100%; }
.intro_list a:hover .inex .inex_img {overflow:hidden; }
.intro_list .inex .inex_img:after{content:""; display:block; clear:both;}
.intro_list .inex .inex_img img{ display:block; width:100%; left:0; bottom:0; }
.intro_list .inex .inex_img .off-img img{ display:block; left:0; top:0; width:100%;  height:100%;  }
.intro_list .inex .inex_img .on-img img{ display:block; left:0; top:0; width:100%;  height:100%;  }
.intro_list .inex p{position:absolute; top:45%;  left:20%; font-size:3em; color:#333; font-weight:300; line-height:140%; text-align:left; z-index:100;  -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.intro_list a:hover  .inex p{top:43%; color:#fff; }
.intro_list .inex p b{font-weight:bold; }
.intro_list .inex .btn_inex{position:absolute; top:60%; right:20%; width:200px; height:50px; font-size:1.2em; color:#333333; letter-spacing:-0.02em; line-height:50px; background:url(/intro/img/btn_inex.png) right bottom no-repeat;	 font-weight:400; text-transform:uppercase; z-index:10; text-align:left; opacity:0.6; filter:Alpha(opacity=60); -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s} 
.intro_list a:hover .inex .btn_inex{ opacity:1.0;filter:Alpha(opacity=100); color:#fff; }



footer{position:relative; height:8vh; padding-top:2em}
.copyWrap .company b{font-size:0.8em;}
.copyWrap .company span{margin-right:30px}
.copyWrap .copy{ display:block; font-size:.8em; letter-spacing:-0.02em; }

}

@media all and (max-width:45em){



}

@media all and (max-width:35em){


}

/* 20200612 내가 작업한 스타일[반응형] */