@import 'https://fonts.googleapis.com/css?family=Raleway:400,800|Open+Sans:600|Source+Sans+Pro:200,300|Titillium+Web:400';
/*-----------------------------------------------------------------------------------*/
/*	0.	CSS Reset
/*-----------------------------------------------------------------------------------*/
* {	padding:0;		margin:0;	}
html, body { height: 100%; width: 100%; margin: 0; }
html,body,div,span,applet,object,iframe,h1,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	padding:0;
	margin:0;
	/*font:inherit;*/
	vertical-align:baseline;
	border:0;
}

article,aside,details,figcaption,figure,footer,,hgroup,menu,nav,section {	display:block;}

body {
	line-height:1;
	height:100%;
}

ol,ul {
	list-style:none;
}

blockquote,q {
	-webkit-font-smoothing:antialiased;
	quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content:none;
}

@media screen and (min-width: 1440px){
	font-size:105%;
}

/*-----------------------------------------------------------------------------------*/
/*	0.	Document Setup (body, common classes, vertical rhythm, etc)
/*-----------------------------------------------------------------------------------*/
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

html {
	/*font-size:62.5%;*/
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}

body {
	-ms-word-wrap:break-word;
	word-wrap:break-word;
	background:#fff;
	-webkit-font-smoothing:antialiased;
}

a:focus {
	outline:thin dotted;
}

a:hover,a:active {
	outline:0;
}

a img {
	vertical-align:bottom;
	border:0;
}

/* Global --- */
body,button,input,select,textarea {
	font-weight:300;
	color:#595c61;
}

.clearfix{font:16px/26px;}

h1 {
	font-size:45px;
	line-height:60px;
}

h3 {
	font-size:30px;
	line-height:33px;
}

h4 {
	font-size:22px;
	line-height:30px;
}

h5 {
	font-size:16px;
	line-height:26px;
	color:#595c61;
}

hr {
	height:1px;
	margin-top:1em;
	background-color:#ccc;
	border:0;
}

/*lala*/


ul,ol {margin:0 0 1.5em 2em;}

ul {	list-style:disc;}

ol {	list-style:decimal;}

li > ul,li > ol {
	margin-bottom:0;
	margin-left:1.5em;
}

dt {	font-weight:700;}

dd {	margin:0 1.5em 1.5em;}

b,strong {	font-weight:600;}

dfn,cite,em,i {	font-style:italic;}

blockquote,blockquote p {
	margin-bottom:1em;
	font:22px/33px;
	font-style:italic;
}

blockquote p:last-of-type {	margin-bottom:0!important;}

blockquote footer,blockquote footer cite {
	font:16px/26px;
}

address {
	margin:0 0 1.5em;
}

pre {
	max-width:100%;
	padding:10px 15px;
	margin-bottom:2em;
	overflow:auto;
	font:15px/1.5em;
	background:#fff;
	border:1px solid #f0f1f2;
}

code,kbd,tt,var {	font:.9em;}

abbr,acronym {
	cursor:help;
	border-bottom:1px dotted #666;
}

mark,ins {
	text-decoration:none;
	background:#fff9c0;
}

ins {	background:#e5ffd9;}

sup,sub {
	position:relative;
	height:0;
	font-size:75%;
	line-height:0;
	vertical-align:baseline;
}

sup {	bottom:1ex;}

sub {	top:.5ex;}

small {	font-size:75%;}

big {	font-size:125%;}

figure {	margin:0;}

table {
	width:100%;
	margin:0 0 1.5em;
	/*border:1px solid #ccc;*/
}

table .even {	background:#eee;}

th {	font-weight:700;}

tr {	border-bottom:1px solid #ccc;}

th,td {	padding:5px;}

img {
	height:auto;
	max-width:100%;
}


/* Form Elements --- */
button,input,select,textarea {
	margin:0;
	font-size:100%;
	vertical-align:baseline;
	*vertical-align:middle;
}

button,input {
	line-height:normal;
}

input[type="checkbox"],input[type="radio"] {
	padding:0;
}

input[type="search"] {
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
	-webkit-appearance:textfield;
}

input[type="seach"]::-webkit-search-decoration {
	-webkit-appearance:none;
}

button::-moz-focus-inner,input::-moz-focus-inner {
	padding:0;
	border:0;
}

textarea {
	width:100%;
	overflow:auto;
	vertical-align:top;
}


/* Alignment --- */
.alignleft,.alignright,.aligncenter,.alignnone {
	margin-bottom:1.5em;
}

.alignleft {
	display:inline;
	float:left;
	margin-right:1.5em;
}

.alignright {
	display:inline;
	float:right;
	margin-left:1.5em;
}

.aligncenter {
	display:block;
	margin-right:auto;
	margin-left:auto;
	clear:both;
}

/* Clears --- */
.clear {
	display:block;
	width:100%;
	height:0;
	clear:both;
	font-size:0;
	line-height:0;
}

.clear:before,.clear:after,.entry-content:before,.entry-content:after,.site-header:before,.site-header:after,.site-navigation:before,.site-navigation:after,
.site-content:before,.site-content:after,
.site-footer:before,.site-footer:after,.page-navigation:before,.page-navigation:after,.single-page-navigation:before,.single-page-navigation:after {
	display:table;
	content:' ';
}

.clear:after,.entry-content:after,.site-header:after,.site-navigation:after,
.site-content:after,.site-footer:after,.page-navigation:after,.single-page-navigation:after{
	clear:both;
}

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

.clearfix {
	display:inline-block;
}

/* Hide from IE Mac \*/
.clearfix {
	display:block;
}

/* End hide from IE Mac */
.none {
	display:none;
}

/* End Clearfix */
/* Helpers --- */
.hidden {
	display:none;
}


/*-----------------------------------------------------------------------------------*/
/*	0.	section define
/*-----------------------------------------------------------------------------------*/
/*
#section1,	#section2,	#section3,	#section4 {
	background-size: cover;
	margin:0; 
	padding:0;
}

/*section1 .content , #section2 .content,	#section3 .content, #section4 .content  .content{	height:100vh;}*/

#section1{
	background-image: url("/1LVlangLNxxSVyySNindexpic") ;
	/*background-position:70% 65%;*/
	background-position:100% 60%;
	background-size:cover;
	
   	background-repeat:no-repeat;
	height:100%;
}
#section2{
	/*background-image: url(../images/page2_1.jpg);*/
	background-image: url(../images/readmore2w.jpg);
	background-size:cover;
	z-index:-999;
}
#section3{
	background-image: url(../images/readmore5.jpg);
	background-size:cover;
	z-index:-999;
}
#section4{
	background-image: url(../images/img_030s.jpg);
	background-size:cover;
	background-position:center center;
	z-index:-999;
}

/*-----------------------------------------------------------------------------------*/
/* 0 pagepiling 
/*-----------------------------------------------------------------------------------*/

.pp-section {
  /*  height:100%;
    position:absolute;*/
    width:100%;
}
.pp-easing {
    -webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
}
#pp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}
#pp-nav.right {
    right: 17px;
}
#pp-nav.left {
    left: 17px;
}
.pp-section.pp-table{
    display: table;
}
.pp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.pp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}
.pp-slidesNav.bottom {
    bottom: 17px;
}
.pp-slidesNav.top {
    top: 17px;
}
#pp-nav ul,
.pp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#pp-nav li,
.pp-slidesNav li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
.pp-slidesNav li {
    display: inline-block;
}
#pp-nav li a,
.pp-slidesNav li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#pp-nav li .active span,
.pp-slidesNav .active span {
    background: #333;
}
#pp-nav span,
.pp-slidesNav span {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}
.pp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
}
.pp-tooltip.right {
    right: 20px;
}
.pp-tooltip.left {
    left: 20px;
}
.pp-scrollable{
    overflow-y: scroll;
    height: 100%;
}
@media screen and (max-width:414px){
	#pp-nav.right {
	    right: 0;
	}
}

/*-----------------------------------------------------------------------------------*/
/*	1.	Page1
/*-----------------------------------------------------------------------------------*/
/*slogon*/
.height100percent{ height:100%;}

/*begin*/
.logo_area{
	display:flex;
	align-items: center;
  	justify-content: center;
}
.logo_area div{
	align-self: center;
	
}

.logo_fit{
	font-size: 2em;
	font-weight: bold;
	padding: 0.5em;
}
.site-logo-shadow{
	filter: drop-shadow(3px 2px 2px #000);	
}
.aohai_log_index{padding-top:1em;}
/*end*/


.site-logo {
	/*padding-left:30px;*/
	padding-left:100px;
	float:left;
	position:absolute;
	z-index:1;
	/*margin-top:100px;*/
	margin-top:250px;
	-webkit-filter: drop-shadow(3px 2px 2px #000);
    	filter: drop-shadow(3px 2px 2px #000); 
}


.site-logo a:hover {	opacity:.9;}



.slogon {
	
	/*padding-top:230px;
	padding-left:30px;*/
	clear:both;
	font-size:16px;
	line-height:26px;
	color:#fff;
	text-align:center;
	position:absolute;
	/*right:15px;*/
	/*left:15px;
	bottom:100px;*/
	right:0px;
	left:0px;
	top:350px;
	max-width:900px;
	text-shadow: -1px -1px 0 #000, 
               1px -1px 0 #000,
              -1px 1px 0 #000, 
              1px 1px 0 #000,1px 1px 1px rgba(0,0,0,0.8), 2px 2px 1px rgba(0,0,0,0.8);
}



.slogon h1,.slogon h2,.slogon h3,.slogon h4,.slogon h5,.slogon h6 {
	/*color:rgba(255, 153, 51,1);*/
	color:#FFFFFF;
}
/*
.slogon h1 {
	margin:8px 0 22px;
	font-size:54px;
	line-height:60px;
}*/
.slogon h1,
.slogon h2 {
	margin:8px 0 22px;
	font-size:45px;
	line-height:60px;
	font-family: Raleway, "Microsoft JhengHei UI" ,"Microsoft JhengHei" , Arial;
	/*-webkit-text-fill-color: rgba(255,153,51,1);
	-webkit-text-stroke: 1px black;*/
	
	
}

.slogon h3 {
	margin:8px 0 22px;
	font-size:30px;
	line-height:33px;
}

.slogon h4 {
	margin:8px 0 22px 0;
	font-size:22px;
	line-height:30px;
}

.slogon p {
	margin:15px 0 0;
}

.slogon .slogon-button {
	/*margin:0 10px 22px!important;*/
}


/*slogon-button*/
.slogon-button,.slogon-button:visited {
	display:inline-block;
	padding:7px 13px;
	margin:0 .1em 1.5em 0;
	font-size:14px;
	font-weight:700;
	line-height:1em;
	color:#2b2e33;
	text-align:center;
	text-decoration:none;
	text-shadow:0 1px 0 rgba(0,0,0,0.2);
	vertical-align:middle;
	cursor:pointer;
	background:#ffb031;
	background:-webkit-gradient(linear,left top,left bottom,from(#ffce4f),to(#ffb031));
	background:-webkit-linear-gradient(top,#ffce4f,#ffb031);
	background:-moz-linear-gradient(top,#ffce4f,#ffb031);
	background:-ms-linear-gradient(top,#ffce4f,#ffb031);
	background:-o-linear-gradient(top,#ffce4f,#ffb031);
	border:1px solid #dc9014;
	-webkit-border-radius:16px;
	-moz-border-radius:16px;
	-o-border-radius:16px;
	border-radius:16px;
	outline:none;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.4);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.4);
	-o-box-shadow:0 1px 2px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.4);
	box-shadow:0 1px 2px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.4);
	
	
	
	
	text-shadow:none!important;
	/*background:#fff!important;*/
	/*border:2px solid #fff!important;*/
	border:2px solid #FFB031!important;
	background:#ffc531;
	background:-webkit-gradient(linear,left top,left bottom,from(#ffdb4f),to(#ffc531))!important;
	background:-webkit-linear-gradient(top,#ffdb4f,#ffc531)!important;
	background:-moz-linear-gradient(top,#ffdb4f,#ffc531)!important;
	background:-ms-linear-gradient(top,#ffdb4f,#ffc531)!important;
	background:-o-linear-gradient(top,#ffdb4f,#ffc531)!important;
}

.slogon-button.square {
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}

.slogon-button.medium {
	padding:11px 16px;
	font-size:16px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
	border-radius:20px;
}

.slogon-button.large {
	padding:15px 20px;
	font-size:18px;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	-o-border-radius:25px;
	border-radius:20px;
}


.slogon-button.border:hover {
	color:#fff!important;
	
	text-shadow:none!important;
	/*background:#fff!important;*/
	/*border:2px solid #fff!important;*/
	border:2px solid #FFB031!important;
	background:#ffdb4f;
	background:-webkit-gradient(linear,left top,left bottom,from(#ffc531),to(#ffdb4f))!important;
	background:-webkit-linear-gradient(top,#ffc531,#ffdb4f)!important;
	background:-moz-linear-gradient(top,#ffc531,#ffdb4f)!important;
	background:-ms-linear-gradient(top,#ffc531,#ffdb4f)!important;
	background:-o-linear-gradient(top,#ffc531,#ffdb4f)!important;
}


.slogon-button:active {
	position:relative;
	top:1px;
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
	-o-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}




/*
1920x1080	.slogon{top:400px;  	left:300px;}
1280x720	.slogon{top:200px;	left:130px;}
1024¥H¤U	

#section1{
	background-image:url("/1LVlangLNxxSVyySNindexpic")
   	background-size:contain;
   	background-repeat:no-repeat;
}

*/



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

}


@media screen and (min-width: 361px) and (max-width: 480px) {

}

@media screen and (min-width: 481px) and (max-width: 768px) {
	#section1{
		background-image:url("/1LVlangLNxxSVyySNindexpic")
	   	background-size:contain;
	   	background-repeat:no-repeat;
	}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
	
	.slogon{top:200px;	left:130px;}
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
	
	.slogon{top:250px;  	left:100px;	right:auto;}
}


@media screen and (min-width: 1281px) and (max-width: 1920px) {
	
}





/*ipad*/
@media screen and (max-width:1024px){
	.slogon{	bottom:20px;}
	.slogon h2 {font-size:2rem; margin:0; text-align:left;}
	#gp_slogon_bt {text-align:center;}
}
@media screen and (max-width: 640px) {
	/*.slogon {	position:absolute;	}*/
	.slogon h2 {
		margin:8px 0 22px;
		font-size:24px;
		line-height:32px;
	}
	.site-logo {
		float:left;
		margin-top:50px;
	}
	
}


@media screen and (max-width: 414px) {
	.gp_logo{ width:80%; height:80%;}
	.slogon {	padding-top:20px!important;	margin:0; }
	.slogon h2{margin:0; line-height:24px;}
	.slogon-button,.slogon-button:visited {
		padding:0;
		margin:0;
		font-size:14px;
	}
	.slogon-button.medium{ font-size:14px; padding:5px;}
	
}

/*-----------------------------------------------------------------------------------*/
/*	2.	Page2
/*-----------------------------------------------------------------------------------*/


.major_area{
	padding:0;
	min-height: 100%;
	margin: 0 auto;
	height:100%;

}
.widget {
	margin:0;
	height:100%;
	z-index:2000;
	text-align:center; 
	color:#000;
	line-height:30px;
	width:50%;
	display:table-cell;
	padding:3em;
	
	height:100%;
}
.widget div{display:block;}
.widget img{width:80% auto; height:80% auto; max-width:80%;}


.widget  h3{
	font-family: Arial,"Microsoft JhengHei", 'Raleway';
	font-weight:800; 
	text-shadow: 1px 1px 1px rgba(255,255,255,1), 2px 2px 1px rgba(255,255,255,1);
}

.major_img{position:relative;height:200px;margin:0;}
.major_desc {
	margin:1em 10% 0 10%;
	font-weight:300;
	line-height:1.5em;
	text-align:left;
	font-size:18px;
	color:#fff;
	color:#000;
	font-family:Arial,"Microsoft JhengHei", 'Source Sans Pro';
	padding:2em 2em 4em 2em; 
	border-radius:10px;
	min-height:300px;
}
.widget .readmore_bt{height:100% auto;}
.major_readmore {width:100% auto; }
.major_readmore span{display:table-cell;margin:0; padding:0.5em; width:auto;}




/*test begin*/
.table {
    display: table;
    height:50vh auto; width:100%;
    border-spacing:2em;
}

.cell {
    border: 2px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    width:50%;
}
.major_img{max-width:100%; max-height:100%;width:100%; height:100%;}
.container {
	height:300px;
	-moz-box-sizing: border-box;
	margin:0 1em 0 1em;
    
}


@media screen and (max-width:1500px)
{
	.widget .major_desc{min-height:290px;}	
}

@media screen and (max-width:1440px)
{
	.widget .major_desc{min-height:320px;}	
}


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

	.widget major_desc {
		font-weight:400;
		font-size:16px;
		font-family: Arial,"Microsoft JhengHei",'Titillium Web';
	}

}


@media screen and (max-width:1250px)
{
	.widget .major_desc{min-height:450px;}	
}


@media screen and (max-width: 1249px) and (min-width:1024px)
{	.widget .major_desc{min-height:380px;}}

@media screen and (max-width: 1023px){
	
	/*page2*/
	#major_product{width:100%;display:block;}
	.widget img{width:50% auto; height:50% auto;}
	#section2 .major_area .widget{
		display:block;
		float:none;
		width:100%;
	}	
	.widget .major_desc {
		height:100% auto;
		min-height:0;
		font-weight:300;
		font-size:16px;
		font-family:  Arial,"Microsoft JhengHei" , 'Titillium Web';
	}
	
}



@media screen and (max-width:1100px)
{
	.major_desc{min-height:500px;}	
}







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

	/*page2*/
	.widget {line-height:20px;}
	.widget img{width:70% auto; height:70% auto;}
	.widget  h3{font-size:1.5em;}
	.widget .major_desc {font-size:0.9em;}
}

@media screen and (max-width: 414px) {
	
	.major_desc {
		margin:0.5em 2% 0 2%;
		padding:1em 2em 1em 2em; 
	}
	.widget{ padding:1em;}
	.widget:first-child .major_img{margin-top:3em;}
	
}

/*-----------------------------------------------------------------------------------*/
/*	3.	Page3
/*-----------------------------------------------------------------------------------*/
.index3{ height:100% auto;}
.site-content {
	/*max-width:1200px;*/
	width:100%;
	padding:0 20px;
	margin:0 auto;
	height:90%;
}

/*product container*/
.prod_content{ 
	height:100%; 
	width:100%;
	padding: 5em;
	display:inline-block;
	vertical-align:middle;
	text-align:center;
}
/*product list*/
.divid3{
	width:30%;
	height:100%;
	display:inline-block; 
	margin:1.5em 1em 1.5em 0.5em;
	vertical-align:top;text-align:left; height:100%;
	background:#fff;
}

.divid3 .prod_img{ 
	width:100% auto;
	height:100% auto;
	background-image:url("../images/prod09.jpg");
	}

.prod_subject {
	font-size:1.5em;
	line-height:30px;
	padding:1em 1em 0.5em 1em;
	color:#333;
	font-family: Arial,"Microsoft JhengHei" , Raleway;
}

.prod_subject_h3 {
	font-size:1.5em;
	line-height:30px;
	padding:1em 1em 0em 1em;
	color:#00468C;
	font-family: Arial,"Microsoft JhengHei", Raleway;
	
}

.prod_subject_h4 {
	text-align:right;
	font-size:1.2em;
	line-height:30px;
	padding:0.3em 1em 0.3em 1em;
	color:#333;
	font-family:Arial,"Microsoft JhengHei", Raleway;
}

.prod_subject,#content .prod_subject a {
	color:#2b2e33;
}

#subject1 p , #subject2 p , #subject3 p{
	padding:0 1em 0 1em; 
	font-weight:300;
	font-family: Arial,"Microsoft JhengHei",'Source Sans Pro';
	line-height:30px;
}

#content .prod_subject a:hover {
	color:#2b2e33;
	opacity:.62;
}

.prod_desc{padding:0 1em 0 1em; font-size:0.9em; height:100% auto;}

.readmore_bt{
	background-color:rgba(255,102,0,1); 
	padding:0.5em;
	font-family: 'Open Sans', Arial,"Microsoft JhengHei";;
	color:#fff;
	margin:1em;
	height:100% auto;
	display:inline-block; 
	clear:both;
   	float:left;
   	font-size:0.8em;
}

/*°ÊºA«ö¶s*/
.readmore_bt:hover{ cursor:pointer;background-color:rgba(255,102,0,0.8);}
.readmore_bt_i{ -webkit-animation-name: example; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
	animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
	0%   { opacity: 1;}
	50% {opacity: 0;		}
	100%{opacity: 1;	}
}

/* Standard syntax */
@keyframes example {
	0%   { opacity: 1;}
	50% {opacity: 0;		}
	100%{opacity: 1;	}
}

#subject1 , #subject2, #subject3 {min-height:380px;}

@media screen and (max-width: 1600px){
	#subject1 , #subject2, #subject3 {min-height:420px;}	
}

@media screen and (max-width: 1440px){
	#subject1 , #subject2, #subject3 {min-height:460px;}	
}

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

	/*page3*/
	.divid3{ width:100%;
		margin:0.5em;	}
	.divid3 div {display:inline-block;margin:0; padding:0;}
	.divid3 div:first-child{width:50%;}
	.divid3 div:last-child{width:48%; vertical-align:top;}
	
}


@media screen and (max-width: 900px) {
	.prod_content{padding:5em 2em 2em 2em;}
	.divid3{width:100%;
		height:100%;
		display:inline-block; 
		margin-bottom:1em;
	}
	.divid3 div {display:block;}
	.divid3 div:first-child{width:100%;}
	.divid3 div:last-child{width:100%; vertical-align:top;}
	
	.prod_subject_h3 { font-size:1.1em;}
	.prod_subject_h4	{ font-size:1em;}
	
	#subject1 p , #subject2 p , #subject3 p{	font-size:0.9em;	}
	#subject1 , #subject2, #subject3 {min-height:200px;}
}
@media screen and (max-width:414px)
{
	.prod_subject_h4 {line-height:25px; font-weight:bold; border-bottom:dotted 1px #eee;}
	#subject1 p , #subject2 p , #subject3 p{line-height:1.5em;}
	.prod_content{  padding:3em 1em 1em 0 ;}

}

/*-----------------------------------------------------------------------------------*/
/*	4.	Page4
/*-----------------------------------------------------------------------------------*/





.site-footer {
	position: absolute; 
	right:0;
	z-index:0;
	font-size:14px;
	text-shadow: 1px 1px 2px #000;
	line-height:1.6em;
	color:rgba(255,255,255,1);
	background-color:#8C8C8C;
	opacity:.90;
	right:0px;
	bottom:0px;
	width: 100% auto;
}

.site-footer-padding{padding:50px 50px 0 50px;}
.site-footer .footer-share{
	text-shadow:none;
	width:100%;
	padding:5px 50px 5px 50px;
}
.site-footer .footer-share #facebook,
.site-footer .footer-share #youtube,
.site-footer .footer-share #googleplus{color:rgba(0,0,0,0.9);}

.site-footer .footer-share #googleplus:hover,
.site-footer .footer-share #youtube:hover{ color: #dd4b39; text-shadow:0px 0px 3px #fff;}

.site-footer .footer-share #facebook:hover{color: #3b5998;; text-shadow:0px 0px 3px #fff;}

.site-footer .site-logo{
	font-size:36px;
	font-weight:700;
	line-height:1.2;
	color:#fff;
	position:relative;
	margin-top:10px;
}


.site-footer  {
	position:relative;
	width:100% auto;
}
.footer-content{ font-family: Arial,"Microsoft JhengHei",'Raleway'; font-weight:400;color:#fff;font-size:1.1em;}


.site-footer .site-logo {
	float:none;
}

.site-footer a {
	color:#fff;
}

.site-footer a:hover {
	color:rgba(255,255,255,0.5);
}

.site-footer .site-tagline {
	margin:0;
	max-width:100% auto;
	font-size:0.8em;
}

.hsContainer {
	width: 80%;
	height: 65%;
	position: relative;
	-webkit-overflow-scrolling: touch;
}
.hsContent {
	-webkit-overflow-scrolling: touch;
	max-width: 700px;
	position: absolute;
	left: 50%;
	top: 50%;
}
.hsContent h3  {
	color: #fff;
	font-size: 30px;
	line-height: 38px;
	font-weight:bold;
	text-shadow: 3px 3px 2px #000;
}

.join{	color:#fff;}

.join:hover{
	text-decoration:underline;
	color:#fff;
}

.join:hover::after
{	content:"! :-) "; 
	opacity:0;	
}

@media screen and (max-width: 1280px) {
	/*page4*/
	.site-footer-padding
	{	padding:22px}
}

@media screen and (max-width: 767px) 
{
	.site-footer-padding
	{	padding:22px}
	.site-footer .inner .site-logo{
		font-size:24px;
		line-height:30px;
	}
	.site-footer .footer-content {	font-size:0.8em;	}
	.site-footer .site-tagline {	font-size:0.7em;	}
}

@media screen and (max-width: 640px) {
	/*page4*/
	.site-footer .site-tagline {	max-width:none;	}
	
	.site-footer .site-logo{	font-size:20px;	}
	.hsContent h3  {	font-size: 20px;	}
}

/*-----------------------------------------------------------------------------------*/
/*	5.	Page5 (webinar)
/*-----------------------------------------------------------------------------------*/
@media screen and (min-width: 481px) 
{	.webinar_readmore{
		position:absolute;
		bottom:20px; right:20px;
	}
}


@media screen and (max-width: 480px) 
{
	.webinar_readmore{
		position:absolute;
		bottom:20px; 
		left:20px;	
	}
	
}