.top{position:relative;width:100%;list-style:none;padding:0;z-index:1;background:#000;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0c231b), to(#000));overflow:hidden;}
.top-main{position:relative;box-sizing:content-box;z-index:1;text-align:center;color: #fff;overflow: hidden;}
.top-main::before{content: "";position: absolute;left:0;right:0;top:0;width:100%;height:100%;background:url(map/ph.svg?ph);z-index:-1;background-repeat:no-repeat;}
.topbody h1{font-weight:500;}
@media only screen and (min-width:768px){
.top-main{height:36.8rem;}
.top-main::before{top:6rem;background-position:center -23rem;background-size:55rem;opacity: 1;}
.topbody{margin:0 auto;width:120rem;position:relative;top:0;z-index:99;text-shadow: #666 0.2rem 0 0.3rem;}
.topbody h1{padding:10rem 0 1.6rem;font-size:6.8rem;letter-spacing:0.1rem;}
.topbody p{margin:0 auto;padding:0 0 3.8rem;width:68%;font-size:2.8rem;letter-spacing:0.1rem;line-height:5.3rem;}
 }
@media only screen and (max-width:768px){
.top-main{height:28rem;}
.top-main::before{top:5.2rem;background-position:center -18rem;background-size:100%;opacity: 0.9;} 
.topbody{position:absolute;top:0;left:0;z-index:99;width:100%;text-shadow: #666 0.1rem 0 0.2rem;}
.topbody h1{padding:7.5rem 0 1rem;font-size:4.2rem;}
.topbody p{margin:0 auto;padding:0 0 1.2rem;width:86%;font-size:2rem;line-height:3.6rem;overflow:hidden;}
}