html, body, header, section, article, nav, header, footer,
div, span, p, h1, h2, h3, h4,
ul, ol, li, dl, dt, dd,
table, tr, th, td, tbody, thead, tfoot {
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*, :after, :before {
  box-sizing: inherit; }

a {
  text-decoration: none;
  outline: none; }

a,
a:link,
a:visited,
a:hover,
a:active {
  outline: none;
  text-decoration: none; }

ul {
  list-style: none; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

/* End hide from IE-mac */


html {
    box-sizing: border-box;
    font-family: sans-serif;
    height: 100%;
    width: 100%;
    min-width: 1000px; }
  
body {
margin: 0;
background: #fff;
font-size: 16px;
color: #000;
background-color:#fde9df ;
overflow-x: hidden;
width: 100%; }

a {
text-decoration: none;
color: #555; }

a:hover {
text-decoration: none;
opacity: 0.8; }

.txt_left {
text-align: left !important; }

.color_blue {
color: #0cf; }

.font_l {
font-size: 30px !important; }

.font_l80p {
font-size: 26px !important; }

.font_m {
font-size: 16px !important; }

.font_bold {
font-weight: bold; }

.font_red {
color: #ff0000; }

.txt_shadow {
text-shadow: 0 0 3px black; }

.txt_shadow02 {
text-shadow: 0 0 3px white; }

.font_w600 {
font-weight: 600; }

.sponly {
display: none !important; }

.pconly {
display: block !important; }

.mt10 {
margin-top: 10px !important; }

.mt20 {
margin-top: 20px !important; }

.mt30 {
margin-top: 30px !important; }

.mt-30 {
    margin-top: -30px !important; }

.mt40 {
margin-top: 40px !important; }

.mt80 {
margin-top: 80px !important; }

.mb10 {
margin-bottom: 10px !important; }

.mb20 {
margin-bottom: 20px !important; }

.mb30 {
margin-bottom: 30px !important; }

.mb40 {
margin-bottom: 40px !important; }

.m0auto {
margin: 0 auto !important; }

#wrap {
    overflow: hidden;
}


/* banner */

header {
	margin: 0 auto;
    position: relative;
	max-width: 2000px;
}

.logo {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 16%;
}

.topbg {
    position: absolute;
    top:0;
    width: 100%;
    z-index: 0;
}

.topwater {
    position: absolute;
    bottom:0;
    width: 100%;
    z-index: 2;
}

.topicon1 {
    position:absolute;
    left:0;
    bottom:-300px;
	z-index: 100;
    width: 25%;
}
.topicon2 {
    position:absolute;
    right:5%;
    bottom:-100px;
    z-index: 100;
    width: 18%;
}


.girl{
    z-index: 1;
    top:1%;
    width:70%;
    text-align: center;
	animation:girlmove 4s 3s infinite;
    -webkit-animation:girlmove 4s 3s infinite;
}

.girl img.girlimg{
    margin-top: -50px;
}

.girlimg {
    margin-top:-50px;
}

@keyframes girlmove
{
    0%    {margin-top: 0px}
    50%   {margin-top: 10px}
    100%  {margin-top: 0px}
}

.toplogo {
    z-index: 99;
    text-align: center;
    position: absolute;
    bottom: 3%;
    width: 40%;
    margin:0 auto;
}

.txt01{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
    bottom: -84px;
	margin: 0 auto;
}
/* part 1 */

.part1 {
    margin: 0 auto;
    padding:0px 0 400px;
    position: relative;
    background: url("../images/part1bg.jpg") bottom center no-repeat;
    background-size: cover;
}

.part1icon3 {
    position:absolute;
    right:0;
    top:200px;
    z-index: 100;
    width: 10%;
}

.part1icon5 {
    position:absolute;
    left:0;
    top:25%;
    z-index: 100;
    width: 15%;
}

.part1icon4 {
    position:absolute;
    right:-5%;
    top:45%;
    width: 15%;
    z-index: 100;
}

.part1icon6 {
    position:absolute;
    left:-5%;
    top:60%;
    width: 15%;
    z-index: 100;
}

.part1icon7 {
    position:absolute;
    right:0;
    bottom:3%;
    z-index: 100;
    width: 18%;
}


h1 {
	font-size:48px;
	font-weight:bold;
	color:#fff;
}
.txt_store_button01{
	margin: 40px auto 0;
	display: block;
}
.downicon .icon{
    margin:0 20px;
    transition: all 1s ease;
}


.container {
    min-width: 990px;
}


/* PART 2 */

.part2 {
    margin: -200px auto 0;
	background-size:100%;
}

.part2main {
    background: #79e8f8;
    text-align: center;
    margin-top: -3px;
    padding:100px 0 300px 0;
    background: url("../images/part2bg.jpg") top center no-repeat;
    background-size: cover;
}

.part2icon8 {
    position:absolute;
    left:5%;
    top:100px;
    z-index: 100;
    width: 18%;
}

.part2icon9 {
    position:absolute;
    right:0;
    top:38%;
    z-index: 100;
    width: 13%;
}

.part2icon10 {
    position:absolute;
    left:5%;
    top:50%;
    z-index: 100;
    width: 14%;
}

.part2icon11 {
    position:absolute;
    left:5%;
    bottom:5%;
    z-index: 100;
    width: 11%;
}

.part2icon12 {
    position:absolute;
    right:5%;
    bottom:5%;
    z-index: 100;
    width: 14%;
}


.textbox {
    width: 94%;
    margin: 0 auto;
    background: url("../images/textboxbg.png") top center no-repeat;
    background-size: cover;
    text-align: left;
    padding: 40px;
    color: #222;
    font-size: 18px;
    line-height: 32px;
}

.textbox p {
    margin-bottom: 14px;
}

.textbox h4 {
    font-weight: bold;
    font-size: 24px;
    line-height: 38px;

}

.textbox h4 i {
    display: block;
    background: url(../images/staricon.png) center center no-repeat;
    width: 26px;
    background-size: cover;
    height: 26px;
    margin-right: 10px;
}

.event {
    margin:30px auto;
    position: relative;
}

a.eventbtn0 {
    display: block;
    position: absolute;
    background: url(../images/btnbg.png) center center no-repeat;
    background-size: cover;
    right:calc(50% - 298px/2);
    text-align: center;
    line-height: 62px;
    font-size: 28px;
    font-weight: 900;
    width: 298px;
    color:#fff;
    height:62px;
    bottom:65px;
    transition: all 0.2s ease-in;
}

a.eventbtn0:hover{
    display: block;
    position: absolute;
    background: url(../images/btnbg2.png) center center no-repeat;
    background-size: cover;
    right:calc(50% - 298px/2);
    text-align: center;
    line-height: 62px;
    font-size: 28px;
    font-weight: 900;
    width: 298px;
    color:#fff;
    height:62px;
    bottom:70px;
}

.eventbtn0:hover .icon{
    border:2px solid #e40203;    
}

a.eventbtn {
    display: block;
    position: absolute;
    background: url(../images/btnbg.png) center center no-repeat;
    background-size: cover;
    right:calc(50% - 298px/2);
    text-align: center;
    line-height: 62px;
    font-size: 28px;
    font-weight: 900;
    width: 298px;
    color:#fff;
    height:62px;
    bottom:50px;
    transition: all 0.2s ease-in;
}

a.eventbtn2 {
    display: block;
    position: absolute;
    bottom:50px;
    right:calc(50% - 500px/2);
    width: 500px;
}

.eventicon {
    position: absolute;
    right: -20px;
    top: -30px;
    display: block;
    width: 120px;
    height: 104px;
    color: #f74e79;
    text-align: center;
    font-weight: bolder;
    line-height: 100px;
    font-size: 30px;
    font-style: normal;
    background: url(../images/numicon.png);
    background-size: cover;
}

.eventicon .font {
    transform:rotate(-15deg);
    -ms-transform:rotate(-15deg); /* Internet Explorer */
    -moz-transform:rotate(-15deg); /* Firefox */
    -webkit-transform:rotate(-15deg); /* Safari 和 Chrome */
}

.eventicon span {
    font-size:48px;
}

.eventbtn .icon {
    margin-left: 10px;
    border:2px solid #000;
    border-radius: 50%;
    line-height:36px;
    width: 40px;
    height: 40px;
    display: inline-block;
    font-size: 1.7rem;
}

a.eventbtn:hover{
    display: block;
    position: absolute;
    background: url(../images/btnbg2.png) center center no-repeat;
    background-size: cover;
    right:calc(50% - 298px/2);
    text-align: center;
    line-height: 62px;
    font-size: 28px;
    font-weight: 900;
    width: 298px;
    color:#fff;
    height:62px;
    bottom:55px;
}

.eventbtn:hover .icon{
    border:2px solid #e40203;    
}

/* FOOTER */

footer {
    text-align: center;
    margin-top: -50px;
}

.footermain {
    background: url(../images/footbg.png) top center repeat;
    margin-top: -200px;
    padding:200px 0 170px;
}


#footer h2 {
    font-weight: 900;
    color:#fff;
}

#footer .btn_follow_top {
    padding-top: 10px;
    z-index: 1000;
    margin: 0 auto 20px;
    text-align: center; 
}

#footer .btn_follow_top .title_share {
    display: block;
    margin: 10px auto;
    width: 25%;
    max-width: 80px; 
}

#footer .btn_follow_top .btn_tw_follow {
    display: inline-block;
    margin-right: 10px;
    margin-top: 4px;
    width: 30px;
    height: 30px;
    background: url(../images/btn_tw_share02.png) no-repeat center center/100% 100%;
    border-radius: 5px; 
}

#footer .btn_follow_top .btn_fb_follow {
    display: inline-block;
    margin-right: 10px;
    margin-top: 4px;
    width: 30px;
    height: 30px;
    background: url(../images/btn_fb_share02.png) no-repeat center center/100% 100%;
    border-radius: 5px; 
}

#footer .btn_follow_top .btn_line_follow {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../images/btn_line_share02.png) no-repeat center center/100% 100%;
    border-radius: 5px; 
}

#footer .footer_nav {
    margin: 20px auto;
    width: 90%; 
}

#footer .footer_nav a {
    color: #fff !important;
    font-size: 0.8rem; 
}

#footer .copylight {
    margin-top: 0;
    color: #fff;
    font-size: 0.8rem; 
}

#footer .copylight img {
    width: 350px;
    margin: 0 auto; 
}


/* gotop */

#gotop a {
    position: fixed;
    z-index: 100;
    right: 40px;
    bottom: 40px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    text-decoration: none;
    color:#fff;
    /*transform: rotate(-180deg);*/
    background-size: 30%; 
    transition: all 0.5s ease-in;
}

#godown {
    position: fixed;
    z-index: 100;
    right: calc(50% - 30px);
    bottom: 40px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    text-decoration: none;
    color:#fff;
    background: rgba(180, 219, 86, 0.6) 50% 50% no-repeat;
    transform: rotate(-180deg);
    background-size: 30%; 
    transition: all 0.5s ease-in;
	animation: flash 2s linear infinite;
}
  
@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


/*
#gotop a:hover {
    text-decoration: none;
    transform: rotate(0deg);
    border-radius: 40%; 
}*/