html {
  scroll-behavior: smooth;
 }


body{ background: #fff; font-family:helve,Tahoma, Geneva, sans-serif; color:#fff;   }

span,p,a{  text-decoration:none;  font-family: helve,Tahoma, Geneva, sans-serif; color:#000;}
a{cursor: pointer; }
h1{  font-size:40px; font-family:azfont,Tahoma, Geneva, sans-serif; text-transform:uppercase; color:#000; }
h2{  font-size:37px; font-family:helve,Tahoma, Geneva, sans-serif;text-transform:uppercase; color:#000; }
h3{  font-size:18px; font-family:helve-bc,Tahoma, Geneva, sans-serif; text-transform:uppercase; color:#000; }
h4{  font-size:30px; font-family:helve-bc,Tahoma, Geneva, sans-serif; text-transform:uppercase; color:#000;  }

a:hover{ color:#0071a7;}





@font-face {
    font-family:helve-bc;
    src:url(../font/HelveticaNeueLTStd-BdCn.otf);
    font-weight:400;
}

@font-face {
    font-family:helve;
    src:url(../font/HelveticaNeueLTStd-Cn.otf);
    font-weight:200;
}

@font-face {
    font-family:helve-b;
    src:url(../font/HelveticaNeueLTStd-Roman.otf);
    font-weight:200;
}

@font-face {
    font-family:azfont;
    src:url(../font/az.otf);
    font-weight:200;
}



.pagewarp{ width: 1280px; margin:0px auto; position: relative; height: 100%;}

#sec1{ width:100%; float: left;  height: 1193px; background: url("../images/sec1-bg.jpg")  bottom center no-repeat fixed #fe3d2f; }
img.sec1-again{ position:absolute; z-index: 2; top: 0; right: -200px; }
img.sec1-banana{position:absolute; z-index: 0; top: 0; left:0;}
img.sec1-hd{position:absolute; z-index: 1; bottom: -37px; left:-50px;}

#sec1-2{ float:left; width:100%; padding-top:20px; background: #fff; }
.sec1-2-comment{float:left; padding: 10px 10px 10px 50px; width: 40%; }
.sec1-2-comment img{float: left; margin:0 20px 20px 0;}
.sec1-2-comment h1{ font-size: 37px; color:#fe3d2f; margin-top:26px; margin-bottom: 10px;}


#sec2{ width:100%; float: left;  height: 1646px; background: url("../images/sec2-bg.jpg")  bottom center no-repeat #ffdd0b; border-bottom: 10px solid #000;}
img.sec2-hd{ position: absolute; z-index:0; bottom: 0; left: 0; }
img.sec2-milk{ position: absolute; z-index:2; right: -228px;   bottom: 208px; width:1250px;}
img.sec2-pinapple-top{ position: absolute; z-index:3; top: 95px;   right: 0;}
img.sec2-pinapple-bottom{ position: absolute; z-index:1; bottom: 500px;}
img.sec2-yeah{ position: absolute; z-index:4; top:200px;}


#sec3{ width:100%; float: left;   background: url("../images/sec3-bg.jpg")  top center no-repeat #000; padding-bottom: 100px; border-top:5px solid #ffdd0b; text-align: center; color:#fff; background-position-y:236px;}
img.sec3-logo{margin-top:650px;}
img.sec3-concept{margin: 50px 0 50px;}
#sec3 p{color:#fff; width:500px; margin: auto;}
#sec3 a{color:#E0E0E0; text-decoration: underline; cursor: pointer;}
#sec3 a:hover{text-decoration: none;}

#social{float: left; width:100%; padding:100px 0; background:#ca1c65; text-align: center;}
#social h2{letter-spacing: 18px; font-size:61px; text-transform: uppercase; color:#fff; margin-bottom: 32px;}
.social-icn-box{ margin: auto; width:565px;}
.social-icn{float:left; margin-right: 40px;}

#footer{float:left; width:100%; background:#000; color:#fff; text-align: center; padding: 50px 0; font-size:20px;}


img.sec1-banana-res{display: none; position: absolute; width:100%;}
img.sec1-hd-res{display: none; position: absolute; width:100%; z-index: 1; bottom: 0; }




@media screen and (max-width: 1800px) {
	#sec1, #sec2 { overflow:hidden; }
}
@media screen and (max-width: 1700px) {

	
}


@media screen and (max-width: 1600px) {
	
}

@media screen and (max-width: 1400px) {
	img.sec1-hd{ width: 97%;     left: 0;    right: 0;    margin: auto;}	
}
@media screen and (max-width: 1280px) {
	.pagewarp{width:100%; float: left;}
	#sec1{width:100%; float: left;  height: 1193px; background: url("../images/sec1-bg.jpg")  top center no-repeat fixed #fe3d2f;}
	img.sec1-again{right:-100px;}
	img.sec2-hd{ width: 97%;    left: auto;    right: -36px;}	
	img.sec2-milk{right:-122px}
	
	
	img.sec1-banana{width: 92%;    left: -10%;}
	img.sec2-yeah{width:47%; left: 5%;}
	.procomment{margin: auto; width:90%;}
	.sec1-2-comment h1{font-size: 31px;}

}

@media screen and (max-width: 1100px) {
	#sec1{height: 1057px; background-size: 1800px auto; }
}

@media screen and (max-width: 1080px) {
	img.model-sec2{margin-left: 0%;}
	
}


@media screen and (max-width: 1024px) {
	#sec2{margin-top: 50px;}
	img.sec2-pinapple-top{ width:450px; top:450px;}
	
	img.sec2-pinapple-bottom{width:270px; bottom:400px;}
	
	img.sec2-yeah{width:43%;}
	
	
}


@media screen and (max-width: 1000px) { 
	#sec1{height: 1057px; background-size: 1700px auto; }
	img.sec1-banana{ width: 95%;    left: -15%; }
	img.sec1-hd{ bottom: -27px;}
	.sec1-2-comment img{float: none;}
	  img.sec2-milk {    right: -100px;    width: 1000px;    bottom: 129px;  }
	#sec2{background-size: 1600px auto; background-color: #fff; height: 1400px;}
	
}

@media screen and (max-width: 900px){ 
	#sec1{height: 1000px;     background-size: 1500px auto;}
	#sec2{  height: 1200px;}
	img.sec2-milk{width:900px;}
 	img.sec2-pinapple-top {     width: 380px;    top: 202px;    right: -50px;	}
	
	img.sec3-logo{width:50%;}
	
}	
@media screen and (max-width: 800px)/*flip mobile samsung view*/ { 
	#sec1{height: 850px;}
	img.sec1-again {    right: -80px;    width: 300px;  }
	img.sec1-banana {    width: 106%;    left: -16%;  }
}	




@media screen and (max-width: 700px) { 
	#sec1{height: 700px;  background-size: 1200px auto;}
	img.sec1-again {    right: -80px;    width: 300px;  }
	 img.sec1-hd {    bottom: -3px;  }
	.sec1-2-comment{padding: 10px 2% 10px 3%; width: 45%;}
	img.sec2-pinapple-top{top:300px;}
	img.sec2-pinapple-bottom{display: none;}
	  img.sec2-yeah {    width: 55%; top:100px; }
	img.sec2-hd{width:100%;}
	#social h2 {  letter-spacing: 14px;		font-size: 40px;}
	.social-icn-box{width:80%;}
	img.social-icn{width:22%; margin-right: 3%;}


}

@media screen and (max-width: 600px) { 

	img.sec1-banana{width: 125%; left: -22%;}
	img.sec1-again{width:250px;}
	
	 img.sec2-milk {    width: 650px; right: -88px; bottom: 91px;  }
	#sec2{height: 900px;}
	img.sec2-pinapple-top{top: 241px; right: -3px; width: 272px;}
	  img.sec2-yeah {    width: 65%;    top: 19px;  }
	#sec3 p{width:90%;}
	#sec3{background-position-y: 150px;}
	  #social h2 {    letter-spacing: 9px;    font-size: 40px;  }
	.social-icn-box {    width: 70%;  }
	
}




@media screen and (max-width: 450px){
	
	#sec1{height: 800px;}
	img.sec1-banana{display: none;}
	img.sec1-banana-res{display: block; width:100%;}
	img.sec1-hd{display:none;}
	img.sec1-hd-res{display:block;}
	.sec1-2-comment{width:95%;}
	.sec1-2-comment img{float:left; width:120px;}
	img.sec2-hd{left: 16px;}
	img.sec2-yeah{width:74%;}
	  #social h2 {    letter-spacing: 9px;    font-size: 26px;  }
}



@media screen and (max-width: 400px) {	
	
	
}