body{background:#f5f5f5}
.bg{position:relative;z-index:1;float:left;width:100%;height:100%}
.bg img{float:left;width:100%;height: auto; opacity:0}
.wrap{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%}
.logo{position:relative;float:left;width:100%;height:50px;text-align:center}
.logo img{width:auto;height:100%}
.top{position:relative;float:left;margin-top:20%;width:100%;height:auto;text-align:center;opacity:0}
.top img{width:50%}
.top2{position:relative;float:left;margin-top:5%;width:100%;height:auto;text-align:center;opacity:0}
.top2 img{width:50%;}
.content{position:relative;float:left;width:100%;height:auto;text-align:center;opacity:0;right:-99%;}
.content img.hat{position:relative;margin-top:10px;width:90%;}
.coco{position:relative;float:left;width:100%;height:auto;text-align:center;opacity:0}
.coco3{position:relative;float:left;width:100%;height:auto;text-align:center;}
.coco2{position:relative;float:left;width:100%;height:100%;text-align:center;opacity:0}
.coco img.coconut{position:relative;margin-top:40px;width:80%;}
.coco img.circle{position:relative;z-index:2;float:left;padding:20% 0 15% 0;width:100%}
.coco2 ul{position:absolute;width:100%;height:100%}
.a{position:absolute;display:block;opacity:1}
.a a{width:100%}
.a a img{width:80%}
.a.a0{top:20%;left:3%}
.a.a1{top:66%;left:74%}
.a.a2{top:76%;left:42%}
.a.a3{top:40%;left:80%}
.a.a4{top:66%;left:9%}
.a.a5{top:66%;left:9%}
.bot{position:relative;float:left;width:100%;height:auto;margin-top:30%;text-align:center;}
/*.bot{position:relative;width:100%;height:auto;text-align:center;margin-bottom:0px}*/
.bot img{width:25%}
.bot2{position:relative;float:left;width:100%;height:auto;margin-top:80%;text-align:center;}
.bot2 img{margin-top:40%;width:25%}