.row {
    height: 1280px;
    position: relative;
    background-repeat: no-repeat;
    overflow: hidden;
}
.wp {
    max-width: 1400px;
    margin: 0 auto;
}
.row-0{
	background: url(p1-bg.jpg);
    background-size: cover;
    height: 1280px;
    background-repeat: no-repeat;
    background-position: center top;
}
.row-1{
	background: url(p2-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
	
}
.row-2{
	background: url(p3-bg.jpg);
    background-size: cover;
    height:1150px;
    background-repeat: no-repeat;
    background-position: center top;
}
.row-4,.row-4-0{
    background-color: #f2f2f2;
    height: 950px;
}
.row-5{
	background: url(p5-bg-0.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}
.row-7{
    height: 1350px;
}
.row-8{
	background: url(p8-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: 1150px;
}
.row-9{
	background: url(p9-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: 1150px;
}
.row-10{
	background: url(p10-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    overflow: hidden;
    height: 1150px;
}
.row-11{
	background: url(packaging.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: 1150px;
}
.hero-title{
	padding-top:25%;
	width:100%;
	text-align: left;
	font-weight: 500;
}
.hero-title .mT{
	font-size: 36px;
}
.hero-title .sT{
	font-size: 55px;
}
.hero-title .sS{
	font-size: 42px;
	width: 600px;
	font-weight: 500;
}
.hero-title .sB{
    margin-top: 25px;
    text-align: left;
    width:280px;
}
.hero-title .sB a{
	font-size: 20px;
	color: #00adfe;
}
.hero-title .sB a:hover{
	color: #00adfe;
	text-decoration: underline;
}
.row-title{
	padding-top: 55px;
	color: #FFF;
	text-align: center;
}
.black{
	color:#000;
}
.txt-right{
	text-align: right;
}
.txt-left{
	text-align: left;
}
.row-title h2{
	font-size: 44px;
	font-weight: 500;
	line-height: 56px;
}
.row-title h3{
	font-size: 50px;
	font-weight: 600;
	line-height: 60px;
}
.row-title p{
	margin-top:50px;
	font-size: 22px;
	line-height: 42px;
}
.video-div {
    margin-top: -167px;
    text-align: center;
    overflow: hidden;
    width: 100%;
}
.video-div video {
    width: auto;
    height: 1350px;
    margin-left: calc((100% - 2560px)/2);
}
.p6P{
    float: left;
	width:50%;
	height: 100%;
	background: url(Q-M.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}
.p6L{
    float: right;
	width:50%;
	height: 100%;
	background: url(Q-L.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
}
.p5-pic{
	text-align: center;
	margin-top: 150px;
}
.p6-p1{
    margin-left: 50%;
    padding-left:50px;
}
.p6-p1-0{
	width:100%;
	margin-left: auto;
	margin-right: auto;
	max-width:1400px;
}
.sW{
	width: 98%;
	max-width: 700px;
}

/* for More screen Media resize; */
@media only screen and (min-width:1600px) and (max-width:1920px)  {
	.row {
    	height: 900px;
	}
	.row-0{
    	height: 1000px;
	}
	.hero-title{
		padding-top:16%;
	}
	.row-4, .row-4-0 {
    	height: 750px;
	}
	.row-7 {
    	height: 1200px;

	}
	.video-div video{
		height: 1200px;
	}
}


@media only screen and (min-width:1440px) and (max-width:1599px)  {
	.row {
    	height: 800px;
	}
	.row-0{
    	height: 900px;
	}
	.hero-title{
		padding-top:16%;
	}
	.row-4, .row-4-0 {
    	height: 650px;
	}
	.row-7 {
    	height: 800px;

	}
	.video-div {
	    margin-top: -151px;
	}
	.video-div video{
		height: 800px;
		margin-left:0px;
	}
	.row-title h2{
		font-size: 36px;
		line-height: 48px;
	}
	.row-title p{
		margin-top:50px;
		font-size: 18px;
		line-height: 40px;
	}
}



@media only screen and (min-width:1280px) and (max-width:1439px) {
	
	.row {
    	height: 700px;
	}
	.row-0{
    	height: 760px;
	}
	
	.hero-title{
		padding-top:16%;
		padding-left:40px;
	}
	.hero-title .mT{
		font-size: 34px;
	}
	
	.hero-title .sT{
		font-size: 34px;
		line-height: 30px;
	}
	.row-4, .row-4-0 {
    	height: 550px;
	}
	.row-7 {
    	height: 800px;

	}
	.video-div {
	    margin-top: -132px;
	}
	.video-div video{
		height: 800px;
		margin-left:0px;
	}
	
	.row-title p{
		margin-top:50px;
		font-size: 18px;
		line-height: 40px;
	}
	.row-title{
		padding-top: 60px;
	}
	.row-title h3,.row-title h2{
		font-size: 28px;
		line-height: 36px;
	}
	.row-title p{
		margin-top: 30px;
		font-size: 16px;
		line-height: 28px;
	}

	.p6-p1-0 {
		margin-left: 40px;
	}
	.txt-left{
		margin-left: 40px;
	}
	.txt-right{
		margin-right: 40px;
	}
}




@media screen and (min-width:960px) and (max-width:1279px) {
	.row {
    	height: 600px;
	}
	.row-0{
    	height: 700px;
	}
	
	.hero-title{
		padding-top:16%;
		padding-left:40px;
	}
	.hero-title .mT{
		font-size: 24px;
	}
	
	.hero-title .sT{
		font-size: 24px;
		line-height: 30px;
	}

	.hero-title .sB a{
		font-size: 16px;
	}
	.row-4, .row-4-0 {
    	height: 450px;
	}
	.row-7 {
    	height: 700px;

	}
	.video-div {
	    margin-top: -94px;
	}
	.video-div video{
		height: 700px;
		margin-left:0px;
	}
	.row-title p{
		margin-top:50px;
		font-size: 18px;
		line-height: 40px;
	}
	.row-title{
		padding-top: 30px;
	}
	.row-title h3,.row-title h2{
		font-size: 24px;
		line-height: 32px;
	}
	.row-title p{
		margin-top: 30px;
		font-size: 14px;
		line-height: 25px;
	}

	.p6-p1{
	    padding-left:20px;
	}
	.sX{
		width:80%;

	}
	.p6-p1-0 {
		margin-left: 20px;
	}
	.txt-left{
		margin-left: 20px;
	}
	.txt-right{
		margin-right: 20px;
	}

}

@media screen and (min-width:768px) and (max-width:959px) {
	
	.row {
    	height: 800px;
	}
	.row-0{
    	height: 900px;
    	background-position:58%
	}
	.row-1{
		background-position: 70%;
	}
	.hero-title{
		padding-top:30%;
		padding-left:20px;
		width:100%;
		text-align: left;
	}
	.hero-title .mT{
		font-size: 22px;
	}
	
	.hero-title .sT{
		font-size: 22px;
		line-height: 30px;
	}
	.hero-title .sS{
		font-size: 14px;
    	width: 300px;
	}
	.hero-title .Tmp{
		width:200px;

	}
	.hero-title .sB{
   		margin-top: 10px;
	    width:200px;
	}
	.hero-title .sB a{
		font-size: 18px;
	}
	.row-4, .row-4-0 {
    	height: 430px;
	}
	.row-7 {
    	height: 450px;

	}
	.video-div {
	    margin-top: -100px;
	}
	.video-div video{
		height: 450px;
		margin-left:0px;
	}

	.row-title{
		padding-top: 40px;
	}

	.row-title h3,.row-title h2{
		font-size: 24px;
		line-height: 30px;
	}
	.row-title p{
		margin-top: 30px;
		font-size: 14px;
		line-height: 26px;
	}
	.p6-p1 {
    	padding-left: 10px;
	}
	.p6-p1-0 {
		margin-left: 10px;
	}
	.txt-left{
		margin-left: 10px;
	}
	.txt-right{
		margin-right: 10px;
	}
}

@media only screen and (min-width:480px) and (max-width:767px) {
	
	
}

@media only screen and (max-width:479px) {
	.row {
    	height: 600px;
	}
	.row-0{
    	height: 720px;
    	background-position: 62%;
	}
	.row-1{
		background-position: 66%;
	}
	.row-8{
		background-position: 57%;
	}
	.hero-title{
		padding-top:15%;
		padding-left:5px;
		width:100%;
		text-align: left;
	}
	.hero-title .mT{
		font-size: 20px;
	}
	
	.hero-title .sT{
		font-size: 20px;
		line-height: 26px;
	}

	.hero-title .sS{
		font-size: 14px;
    	width: 220px;
	}
	.hero-title .sB{
   		margin-top: 0px;
	    width:130px;
	}
	.hero-title .sB a{
		font-size: 12px;
	}
	.row-title{
		padding-top: 20px;
	}

	.row-title h3,.row-title h2{
		font-size: 16px;
		line-height: 24px;
	}
	.row-title p{
		margin-top: 20px;
		font-size: 12px;
		line-height: 20px;
	}
	.row-4, .row-4-0 {
    	height: 300px;
	}
	.row-7 {
    	height: 250px;

	}
	.video-div {
	    margin-top: -68px;
	}
	.video-div video{
		height: 250px;
		margin-left:0px;
	}

	.p6-p1 {
    	padding-left: 3px;
	}
	.p6-p1-0 {
		margin-left: 5px;
	}
	.txt-left{
		margin-left: 5px;
	}
	.txt-right{
		margin-right: 5px;
	}
	.p6P{
		width:40%;
	}
	.p6-p1 {
		margin-left: 40%

	}

}

@media only screen and (max-width:320px) {
	.row {
    	height: 400px;
	}
	.row-0{
    	height: 450px;
    	background-position: 60%;
	}
	.row-1{
		background-position: 66%;
	}
	.row-8{
		background-position: 57%;
	}
	.hero-title{
		padding-top:15%;
		padding-left:5px;
		width:100%;
		text-align: left;
	}
	.hero-title .mT{
		font-size: 16px;
	}
	
	.hero-title .sT{
		font-size: 16px;
		line-height: 26px;
	}

	.hero-title .sS{
		font-size: 14px;
    	width: 220px;
	}
	.hero-title img{
		width:auto;
		height:50px;
	}
	.hero-title .sB{
   		margin-top: 0px;
	    width:130px;
	}
	.hero-title .sB a{
		font-size: 12px;
	}
	.row-title{
		padding-top: 20px;
	}

	.row-title h3,.row-title h2{
		font-size: 16px;
		line-height: 24px;
	}
	.row-title p{
		margin-top: 20px;
		font-size: 12px;
		line-height: 20px;
	}
	.row-4, .row-4-0 {
    	height: 250px;
	}
	.row-7 {
    	height: 200px;

	}
	.video-div {
	    margin-top: -68px;
	}
	.video-div video{
		height: 200px;
		margin-left:0px;
	}

	.p6-p1 {
    	padding-left: 3px;
	}
	.p6-p1-0 {
		margin-left: 5px;
	}
	.txt-left{
		margin-left: 5px;
	}
	.txt-right{
		margin-right: 5px;
	}
	.p6P{
		width:43%;
	}
	.p6-p1 {
		margin-left: 43%

	}
}