*{margin:0; padding:0;}
ul,ol,li{list-style:none;}
.clear:after{display:block; clear:both; content:"";}
html,body{max-width:600px;  width: 100%;
  height: 100%;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 14px;
  background:#fff;font-weight:300; font-size:14px; margin:auto;}
a{text-decoration:none; color:#111; cursor: pointer;}
i{ color: #a0a0a0;}
.center{max-width:320px; margin:auto; width:100%; height:auto;}
.wrap{overflow:hidden;}
/* .grid_wrap{width:100%; top:0; left:10%; height:100%; position:fixed; z-index:-1;}
.grid_wrap .grid{width:100%; height:100%; border-left:1px solid #36363623;}
.grid_wrap .grid span{display:block; border-right: 1px solid #36363623; width:19.9%; height:100%; float:left; background:transparent;} */

/* MAIN  */
header{width:100;height:auto; z-index: 999;}
header.scroll{width:100%; box-shadow: 2px 2px 5px #ededed; box-sizing: border-box; position:fixed; background:#fff; z-index:9999; }
.head_wrap{display:flex; align-items: center; padding:1rem 0; justify-content: space-between; width:100%; z-index:99;}
header.scroll .logo{width:20%; float:left;}
header.scroll .logo img{width:100%;} 
header.scroll .menu{float:right; position: absolute; right:2rem;}
.menu{width:17px; height:auto; float: right; display:none;}
.menu span{display: block; width:100%; height:2px; background:#111;}
.menu span:nth-child(2){margin:0.22rem 0;}
.menu i{display:none;}

.logo{width:100%;}
.logo a{width:100%; }
.logo a img{width:70%; }
.nav_wrap{width:100%; height:auto; background:#fff; position:fixed;  z-index:999; }

.nav_wrap .nav{width:100%; height:100vh; right:0; text-align: center; box-sizing: border-box; padding:8rem; background:#fff; top:-1000px; position: absolute;}
.nav_wrap .nav li{padding:0.5rem 0;}
.nav_wrap .nav span{display:block; padding-top:5rem; border-top:1px dashed #a0a0a0; font-size:0.7rem;}

.subIcon{width:100%; z-index:8; padding-bottom:4rem;}
.subIcon i{padding:1rem 0.5rem;}

.headLine p{padding-bottom:1rem;}

.win{width:100%; height:100%; z-index:3; background:transparent;}
.win.scroll{padding-top:9rem;}

.headLine{width:100%; height:100%; }
.mainImg{background:url(../img/main_img.jpg) no-repeat ; background-size: contain; width:100%; height:380px; z-index:99999;}
.subLine{width:100%; padding:2rem 0 4rem 0;}
.subLine h2{font-size:1rem;}
.subLine .left{float:left; width:20%; position: relative; font-size:2.2rem; transform:rotate(90deg); top:1rem;  color: rgb(253, 253, 253); text-shadow: -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000; left:-3rem;}

.subLine .right{float:right; width:80%;}
.subLine .right p{font-size:0.8rem;}

footer{width:100%; height:auto; background:#a0a0a0; display:block; padding:1rem 0; color:#fff;}
footer .sns{text-align: center; color:#fff;}
footer .sns i{color:#fff; padding:0.4rem;}
footer .copy_wrap b{font-weight:200; font-size:0.7rem;}