.g_kv{ position: relative; width: 100%; height: 580px; z-index: -1; background: url('../img/product/green/g_top_bg.jpg')  50% -170px no-repeat,#fdfdfd; background-size: auto;}
.g_d_title{ position: absolute; top: -460px; bottom: 0; left: 0; right: 0; max-width: 280px; width: 100%; margin: 0 auto;}
.g_top { position: relative; display: inline-block; width: 100%; }
#pd_g section .container { max-width: 640px; padding-bottom: 60px;}
.sec_title{ width: 100%; margin-bottom: 40px; text-align: center; }
.sec_title:after{ content: ''; display: block; margin: 0 auto; width: 150px; height:4px; background: url(../img/gold_bg.png)0 0 repeat-y; }
h2{ position: relative; display: inline-block; width: auto; padding: 70px 0 15px; font-size: 2.5rem; line-height: 1.4; text-align: center; color: #067d47; }
h3{ margin-bottom: 15px; font-size: 1.5rem; font-weight: 400; color: #067d47; text-shadow: 0 0 5px #fff;}
h4{ margin-bottom: 5px; font-size: 1.4rem; font-weight: 400; line-height: 1.4; color: #009848; text-shadow: 0 0 5px #fff;}
.textwrap{ text-align: center; }
.textwrap p{ font-size: 18px; line-height: 1.5 }
.g_top:before { position: absolute; top: -120px; left: 0; content: ''; width: 100%; height: 220px;
    z-index: 0; background: url(../img/product/green/g_wave.png) no-repeat; background-size: contain;}

/* feature1 */
.feature{ width: 100%; max-width: 1000px; margin: 0 auto;}
.feature01{ 
	position: relative; text-align: center; overflow: hidden; z-index: -1;
	background: rgb(253,253,253); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(253,253,253,1) 23%, rgba(204,206,212,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(253,253,253,1) 23%,rgba(204,206,212,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(253,253,253,1) 23%,rgba(204,206,212,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ccced4',GradientType=0 ); /* IE6-9 */
}
.feature_content{ width: 100%; padding-bottom: 20px; overflow: hidden; }
.feature01 h3{ padding-bottom: 30px; font-weight: bold; }
.feature01 .text_wrap p{ margin-bottom: 10px; }
.feature_content img{ float: left; width: 40%; max-width: 244px; margin-right: 3%; }
.feature_content h4{ position: relative; display: inline-block; width: auto; padding-bottom: 5px; margin-bottom: 10px;  }
.feature_content h4:after{ position: absolute; left: 0; bottom: 0px; content: ''; width: 100%; height: 1px; background:#009848; }
.feature_content .textwrap { margin-left: 43%; width: 57%; line-height: 1.5; text-align: left; z-index: 0;  }
.feature_content .textwrap ul{ list-style-position: inside;}
.feature_content .textwrap li{ position: relative; text-indent: 20px; }
.feature_content .textwrap li:before { position: absolute; left:0; list-style-position: inside; bottom: 8px; content: ''; display: block; width: 8px; height: 8px; background:#009848;}
.feature01 .container:before{ position: absolute; bottom: 18vh; left:-10%; content: ''; width: 280px; height: 135px; z-index: -1; background: url('../img/product/green/g_leave2.png') no-repeat;}
.feature01 .container:after{ position: absolute; top: 20vh; right: -5%; content: ''; width: 280px; height: 135px; z-index: -1; background: url('../img/product/green/g_leave.png') no-repeat;}

/* feature2 */
.rrr{ position: absolute; left: -110px; bottom: 9px; display: inline-block; width:109px; height: 68px; background: url(../img/product/green/rrr_g.png) no-repeat; }
.rrr_title h2 { margin-left: 83px;}
.feature02{ position: relative; background: url('../img/product/blue/milk_bg.jpg') top no-repeat; background-size: auto; text-align: center; }
.feature02 .content{ display: inline-block; width: 49%; margin-top: 150px; min-height: 550px;}
.feature02 img { width: 100%; padding: 40px 0 0;}

/* feature3 */
.feature03{ position: relative; background: url('../img/product/green/f3_bg.jpg') 120% 0 no-repeat; background-size: cover; min-height: 750px; padding-bottom: 100px; }
.feature03 .container{ padding: 0px 0 40px; overflow: hidden; }
.feature03 h2{ text-shadow: 0 0 5px #fff;}
.feature03 .textwrap{ text-shadow: 0 0 5px #fff; text-align: center; }
.feature03 .textwrap p{ line-height: 1.6; padding-bottom: 20px; width: 100%; margin: 0 auto; text-shadow: 0 0 5px #fff; }
.dha{ text-align: center; }
.dha h3{ line-height: 1.3; }
.dha li{ padding: 20px 0 0; }
.dha li:nth-child(2) .dha_pic{ background-position:-159px 0; }
.dha_pic{ display: inline-block; width: 145px; height: 145px; background: url(../img/product/green/dha_g.png) no-repeat; }

/* feature4 */
.feature04 { position: relative; min-height: 750px; background: url('../img/product/blue/f5_bg.jpg') 0 0 no-repeat; background-size: cover; text-align: center;}
.feature04:before{ content: ''; position: absolute; top: -80px; right: 0; bottom: 0; left: 0; margin: 0 auto; background: url(../img/m_drop.png) no-repeat; width: 66px; height: 119px; }
.feature04 h2,.feature04 h3,.feature04 .textwrap{ color: #fff; text-shadow: 0 0 5px #062c31;}
.feature04 img{ display: block; width:100%; margin:  20px auto 0; }

/* feature5 */
.feature05 { position: relative; background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,1) 39%, rgba(235,235,235,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 39%,rgba(235,235,235,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 39%,rgba(235,235,235,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); min-height: 680px; z-index: -1;}
.feature05 h3{ display: inline-block; position: relative; width: auto; font-size: 1.5rem; text-indent: 20px; font-weight: 400; color: #009848; margin-bottom: 20px; }
.feature05 h3:before{ position: absolute; bottom: 8px; content: ''; display: block; width: 8px; height: 8px; background: #009848;  }
.feature05 p{ text-indent: 20px;}
.feature05 .content:before { content: ''; position: absolute; top: 0; left: 0; width:338px; height: 738px; background: url(../img/product/green/g_note.png) no-repeat; background-position: 100px 0;}
.feature05 .sec_title img{ display: block; width: auto; margin:  0 auto 10px; }
.feature05 ul{ width: 100%; max-width: 310px; margin:0px auto; list-style-type: decimal; text-align: left; }
.feature05 li{ display: block; padding-bottom: 40px; vertical-align: top; list-style-type: decimal; list-style-position: inside;}
.pd_circle{ text-align: center; }
.pd_circle img{ width: 100%;}

footer{ overflow: hidden; }

@media only screen and (min-width: 1281px) {
	.g_kv { background-size: cover; background-position: 100% -235px; }
	.g_top:before{ top: -170px; background-size: cover;}
	.feature03{ position: relative; background: url('../img/product/green/f3_bg.jpg') left top no-repeat; background-size: initial; }
}
@media only screen and (min-width: 1360px) {
	.g_kv{ background-position: 100% -345px;}
	.g_top:before { top: -200px;}
}
@media only screen and (min-width: 1500px) {
	.g_kv{ background-position: 50% -435px;}
	.g_top:before { top: -230px; height: 270px;}
}
@media only screen and (min-width: 1680px) {
	.g_kv{ background-position: 50% -500px;}
}
@media only screen and (min-width: 1720px) {
	.g_kv{ background-position: 50% -600px;}
}


@media only screen and (max-width: 1280px) {
	.g_top:before{ top: -150px;}
	.feature03 { background-size: 80%; background-position: -65% 0;}
}

@media only screen and (max-width: 1024px) {
	#feature03 .container{ padding: 50px 4% }
	#feature02 { background-position: 170% 0;}
}
@media only screen and (max-width: 889px) {
	.g_kv { background-position: 50% 60%;}
	.g_top:before { top: -120px;}
}
@media only screen and (max-width: 768px) {
	.g_top:before { top: -90px;}
}
@media only screen and (max-width: 640px) {
	#pd_g section .container { padding: 0 6% 60px; }
	.g_kv { background-size: cover;}
	.feature05 .content:before { height: 450px; width: 100%; background-position: 0px 0; background-size: contain;}
}
@media only screen and (max-width: 540px) {
	.feature01:after { top: 100px;}
	.sec_title{ padding: 0 4%;}
	.textwrap p{ font-size: 16px; line-height: 1.6; }
	.b_g_title{ padding: 0 4%; }
	.feature03 { background-size: 200%; background-position: 77% 0%;}
	.feature_content img { float: none; width: 100%;}
	.feature_content .textwrap { margin-left: 0; margin-top: 15px; text-align: center; width: 100%;}
	.feature_content h4{ display: block; width: auto;}
	.feature_content .textwrap ul { display: inline-block; list-style-position: inside; width: auto; text-align: left;}
}
@media only screen and (max-width: 480px) {
	#pd_g section .container { padding: 0 4% 60px; }
	.g_top:before { top: -55px;}
	.feature01 .container:after { top: 30vh; right: -40%;}
}
@media only screen and (max-width: 414px) {
	.feature03 { background-size: 280%; background-position: 67% 0%;}
}
@media only screen and (max-width: 375px) {
	.g_top:before { top: -45px;}
}