@charset "UTF-8";

html, body{margin:0; border:0; padding: 0;}
*{margin:0; padding: 0; border: 0; outline: 0;
 list-style: none; text-decoration: none; color:#333333;
 font-family: sans-serif; font-size: 16px;}
header, nav, article, section, footer{display: block;}
a{color: inherit; text-decoration: none;}


#wrap {width: 100%; height:auto;}
#headBox {position: relative; z-index: 500; 
 width: 100%; height:100px;
 background-color: #eee}
h1{float: left; width: 200px; height: 40px;}
#gnb{float:right; width: 800px; height: auto;
 margin-right: 20px; margin-top: 30px;}
#gnb>ul{position:absolute; width:100%; height: 100%; }
#gnb ul:after,
#gnb ul::after{content: " "; display: block;
 position:absolute; top:0; left: 0; z-index: -1;
 width:800px; height: 0; background-color: #fff;
 clear:both; transition: height 500ms ease;}
#gnb ul.action:after,
#gnb ul.action::after{height: 270px;}

#gnb>ul>li{float: left; width:200px; height: auto;}
.head_area {width: 1200px; height:100px; margin:auto;
 background-color: #777}
#gnb dl{width: 100%; height: auto; background-color: #fff;}
#gnb dt{width: 100%; height: auto;}
#gnb dl a{display: block; width: 100%; height: 50px;
 text-align: center; line-height: 50px;}
#gnb dl a:hover{background-color: #e66b27;}
#gnb dl a:focus{background-color: #e66b27;}
#gnb dd{display: none;}
#viewBox {overflow: hidden;
 width: 1200px; height:300px; margin:auto;
 background-color: #eef}
.slide_wrap{width: 300%; height: 300px;}
.slide{float: left; width: 1200px; height: 300px;}

.sl1{background-color: #f00}
.sl2{background-color: #00f}
.sl3{background-color: #0f0}
#conBox {width: 1200px; height:200px; margin:auto;
 background-color: #efe}

#footBox {width: 100%; height:100px;
 background-color: #fee}
.foot_area {width: 1200px; height:100px; margin:auto;
 background-color: #eee}