@charset "utf-8";

/*font*/
@import 'https://fonts.googleapis.com/css?family=Teko:400,500,600';

/* CSS Document */
html, body, ul, li, h1, h2, h3, h4, h5, h6, p, fieldset, legend {padding:0; margin:0;}
body {font-family:'Helvetica W01 Light', Helvetica, Arial, "微軟正黑體","Microsoft Jhenghei",sans-serif;	background: #fff;}
a{	outline: none; /* for Firefox Google Chrome  */
	behavior:expression(this.onFocus=this.blur()); /* for IE */    
	/*text-decoration: none;*/
}	  
img {border: 0px; display: block;}	  
ul,li {list-style-type:none; text-transform:none;}
input{-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -webkit-box-shadow:  0px inset;-moz-box-shadow:  0px inset; box-shadow:  0px inset; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ outline: none; -webkit-appearance:none;}

.noborder{ border: 0px !important;}
a{ -webkit-transition: all 0.4s; -moz-border-radius: all 0.4s; transition: all 0.4s;}

/********************************************************************************************************************************************************************/
/*body*/
/* body{ background: #fff url(../image/body_bg.jpg) repeat-x center top; background-attachment: fixed;} */

/********************************************************************************************************************************************************************/

/*float_banner*/
#float_banner{ display: block; width: 40px; position: absolute; z-index: 1004; cursor: pointer; top: 40%; right: 0px;}
#float_banner img{ width: 100%;}



/*btn_center_box*/
.btn_center_box{ text-align: center;}
.btn_center_box a{ display: inline-block;}

.center {width: 100%; max-width: 1200px; margin: auto; position: relative;}
.cleardiv {clear: both;}

/*new-head*/
header {display:block; width:100%; height:80px; position:fixed; top:0px; background:white; z-index:99999;}
header .hd_logo {display:block; height:80px; margin-left:15px; position:relative;}
header .hd_logo img {display:block; height:80px; width:auto;}
header .mb_abot {display:none;}
header .nav {display:block; position:absolute; right:15px; top:0px; height:80px;}
header .nav .ab_logo_pc {height:80px; width:auto;}
header .nav li {display:inline-block; vertical-align:top; position:relative; height:80px; padding:0px 15px; overflow:visible;}
header .nav li a {display:block; font-size:16px; font-weight: bold; line-height:80px; text-align:center; font-family: '微軟正黑體', 'Microsoft Jhenghei', sans-serif; color:#007130; text-decoration:none;}
header .nav .sub {display:block; position:absolute; top:80px; left:0; padding:15px; background:white;}
header .nav .sub li {height:40px; padding:0px 15px;}
header .nav .sub a {display:block; min-width:80px; font-size:16px; text-align:left; color:black; line-height:40px;}
header .nav .sub2 a {min-width:376px;}

header .nav .arrow {display:none;}

header #mbmnu {display:none;}

/*head*/
/*
.head_full{ width: 100%; height: 68px; position: fixed; top: 0px; left: 0px; z-index: 1005;  background: #fff;}
.head_center{ width: 100%; max-width: 1000px; height: 68px; margin: 0 auto; background: #fff; position: relative;}
.head_logo{ float: left; margin-left: 45px;}
.head_logo img{ }

.head_menu{ overflow: hidden; float: right; margin: 0px 10px 0 0px; font-size: 18px;}
.head_menu > li{ display: inline-block; float: left; height: 68px;}
.head_menu > li.active{ }
.head_menu > li.active > a{ color: #ff9900;}
.head_menu > li > a{ color: #009944; display: block; padding: 5px 20px; border-right: 1px solid #009944; margin-top: 18px;}
.head_menu > li > a:hover{ color: #ff9900;}

.head_menu > li:last-child a{border-right: 0px solid #009944;}

.head_menu .newitem:after{ display: block; width: 44px; height: 27px; position: absolute; background: url(../image/new_alt.gif) no-repeat top left;content: ""; top: 8px; right: 103px; }

.head_menu .head_son_menu{ display: none; width: 180px; height: 55px; position: absolute; top: 50px; left: 530px; background: url(../image/son_menu_bg.png) no-repeat; text-align: center; padding: 21px 0 0 32px; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ /*-webkit-box-sizing:border-box;*/ /* Safari */ /*}
.head_menu .head_son_menu li{ display: inline-block; border-right: 1px solid #fff; float: left;}
.head_menu .head_son_menu li a{ display: block; color: #fff; padding: 0 15px 0 15px;}
.head_menu .head_son_menu li a:hover{ color: #ff9900;}
.head_menu .head_son_menu li:last-child{border-right: 0px solid #fff;}

.fb_icon{width: 30px; float: right; margin: 19px 45px 0 0; cursor: pointer;}
.fb_icon img{ width: 100%;}

*/


/*shadow_full*/
.shadow_full{ width: 100%; height: 25px; position: fixed; top: 68px; left: 0px; z-index: 1004;}
.shadow_center{ width: 100%; max-width: 1000px; height: 25px; margin: 0 auto;}



/*index kv*/
.index_kv_row_full{ overflow: hidden; width: 100%; height: 530px; z-index: 1; margin-top: 80px; background: url(../image/index_kv.jpg) no-repeat center top;}
.index_kv_row_center{ width: 100%; max-width: 1000px; height: 530px; margin: 0px auto 0px auto; position: relative;}



/*index content*/
.index_row_full{ width: 100%; z-index: 2;}
.index_row_center{ width: 100%; max-width: 1000px; margin: 0px auto; position: relative;}
.index_row_center .index_buy{ margin: 10px 0 30px 80px; position: relative;}
.index_row_center .index_buy .index_buy_popup{ position: absolute; top: 20px; left: 0px;}
.index_row_center .index_kv_product{ position: absolute; top: -208px; right: 67px;}
.index_row_center .index_btn_more{ display: block; position: absolute; top: 100px; right: 135px;}
.index_row_center .index_remark{ margin: 20px 45px; font-size: 12px; color: #666; text-align: center;}



/*page kv*/
.page_kv_row_full{ overflow: hidden; width: 100%; height: 360px; z-index: 1; margin-top: 68px; }
.page_kv_news{ background: url(../image/page_kv_news.jpg) no-repeat center top;}
.page_kv_a3{ background: url(../image/page_kv_a3.jpg) no-repeat center top;}
.page_kv_a4{ background: url(../image/page_kv_a4.jpg) no-repeat center top;}
.page_kv_store{ background: url(../image/page_kv_store.jpg) no-repeat center top;}



/*page content*/
.page_row_full{ width: 100%; z-index: 2; background: #fff;}
.page_row_center{ width: 100%; max-width: 1000px; margin: 0px auto; padding: 20px 45px 100px 45px; position: relative; background: #fff;  box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */}


.news_list{ width: 800px; margin: 0 auto;}
.news_list li{ padding-bottom: 30px; background: url(../image/news_list_shadow.jpg) no-repeat center bottom;}




.page_row_center h3{ font-size: 28px; color: #009944; margin-bottom: 20px;}
.page_row_center p{ font-size: 16px; color: #666; line-height: 24px; margin-bottom: 20px;}
.page_row_center h4 img{ margin: 80px auto;}

.product_good_list{ margin: 0 0 0 50px;}
.product_good_list li{ background: url(../image/product_2part_left_hit.png) no-repeat left top; padding: 13px 0 10px 40px;}
.product_good_list li .text1{ color: #009944; font-size: 24px; margin-bottom: 10px; font-weight: bold;}
.product_good_list li .text2{ font-size: 18px;}

.product_a3_img1{ position: absolute; top: 385px; left: 660px;}

.product_a3{ margin: 50px 0; }

.product_ingredient_list{ background: #e6f4e6; padding:15px 40px; margin-bottom: 50px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
.product_ingredient_list li{ margin: 15px 0; font-size: 18px; color: #666;}
.product_ingredient_list li span{ font-size: 22px; color: #e56c0a; padding-right: 14px; margin-right: 10px; background: url(../image/product_ingredient_list_hit.png) no-repeat right center;}


/*new-footer*/
footer {display:block; width:100%; position:relative; background:#009944; box-sizing:border-box; padding:50px; margin-top:50px;}

footer .ft_abot {display:block; float:left; position:relative;}
footer .ft_abot img {width:100px; height:auto;}
footer .ft_mid {display:block; float:left; position:relative; margin-left:100px; padding-top:5px;}
footer .ft_sns {display:block; float:right; position:relative;}
footer .ft_sns a {display:inline-block; margin-left:6px;}
footer .ft_sns a img {width:35px; height:auto;}

footer p, footer a {font-size:14px; line-height:24px; color:white; font-family: '微軟正黑體', 'Microsoft Jhenghei', sans-serif;}
footer p {margin-bottom:15px;}

footer p.copy {font-size:12px; line-height:18px; margin-top:30px; text-align: center;}

footer .ft_lks {position: fixed; right: 80px; bottom: 0px;}
footer .ft_lks a {display: inline-block; vertical-align: bottom; line-height: 1rem; color: white; padding: 18px 20px; text-decoration: none; border-top-left-radius: 10px;border-top-right-radius: 10px;}
footer .ft_lks a:hover {padding:24px 20px;}
footer .ft_lks a i {margin: 0px 10px;}

footer .ft_lks a:first-child {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#027d39+0,1d709f+100 */
  background: #027d39;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#027d39), to(#01441f));
  background: linear-gradient(to bottom, #027d39 0%, #01441f 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#027d39', endColorstr='#01441f', GradientType=0);
  /* IE6-9 */
  
}
footer .ft_lks a:nth-child(2) {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#238ac3+0,1d709f+100 */
  background: #238ac3;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#238ac3), to(#1d709f));
  background: linear-gradient(to bottom, #238ac3 0%, #1d709f 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#238ac3', endColorstr='#1d709f', GradientType=0);
  /* IE6-9 */
}




/*footer*/
/*
.footer_full{overflow: hidden; width: 100%; z-index: 2; background: #009944;}
.footer_center{width: 100%; max-width: 1000px;  margin: 0px auto; padding: 20px 0; overflow: hidden; text-align: center; color: #fff; font-size: 14px;}

.footer_link_list{ margin-bottom: 5px;}
.footer_link_list li{ display: inline-block; border-right: 1px solid #fff;}
.footer_link_list li a{ text-decoration: none; color: #fff; padding: 0 10px;}
.footer_link_list li a:hover{ color: #ffcc00;}
.footer_link_list li:last-child{ border-right: 0px solid #fff;}

.footer_center .coopyright{ font-size: 13px;}
.footer_center .footer_logo{ display: inline-block; width: 70px; margin-left: 10px;}

*/







/*fancybox*********************************************************************************************************************************************************************/
/*plan*/
#plan{ width: 840px; padding: 30px; background: #fff;}
#plan h2{ color: #0371c9; font-size: 32px; text-align: center;}
#plan h3{ color: #9c7f26; font-size: 20px; border-top: 1px dashed #ccc; margin-top: 10px; padding: 20px 0 5px 0;}
#plan p{ font-size: 16px; margin-bottom: 30px; line-height: 24px;}
.plan_remark{ overflow: hidden; }
.plan_remark li{ list-style: decimal; margin-left: 25px; font-size: 12px; color: ; line-height: 20px;}

.award_h3{ }
.award_list{ overflow: hidden; margin-top: 20px;}
.award_list li{ display: inline-block; width: 260px; float: left; margin: 0 10px 20px 10px;}
.award_list li p{ font-size: 16px; text-align: center; display: block; margin-bottom: 0px !important; line-height: 20px !important;}
.award_list li p span{ font-size: 14px; display: block;}


/*teacher_people_info*/
.teacher_people_info{ width: 540px; padding: 30px; background: #fff;}
.teacher_people_info h2{ color: #cc3333; font-size: 32px; text-align: center; margin-bottom: 10px;}
.teacher_people_info h3{ color: #9c7f26; font-size: 18px; border-top: 1px dashed #ccc; margin-top: 10px; padding: 10px 0 5px 0;}
.teacher_people_info p{ font-size: 16px; margin-bottom: 30px; line-height: 24px;}

/*teacher_no_popup*/
.teacher_no_popup{ width: 100%; max-width: 840px; padding: 30px; background: #fff;}
.teacher_no_popup h2{ color: #cc3333; font-size: 32px; text-align: center; margin-bottom: 10px;}
.teacher_no_popup h3{ color: #9c7f26; font-size: 24px; border-top: 1px dashed #ccc; margin-top: 10px; padding: 10px 0 5px 0;}
.teacher_no_popup p{ font-size: 16px; margin-bottom: 30px; line-height: 24px;}
.teacher_no_popup h4{ color: #fff; font-size: 18px; background: #9c7f26; margin-top: 10px; padding: 15px 20px; text-align: justify; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.share_icon_list{ overflow: hidden; text-align: right; margin: 5px 0 -20px 0;}

.share_icon_list li{ display: inline-block; height: 45px;}
.share_icon_list li a{ display: block; height: 45px;}
.share_icon_list li img{ height: 100%;}
.share_icon_list_line{ display: none!important;}



/* RWD *******************************************************************************************************************************************************************/

.mobile_menu_list,.icon_mobile_menu,.mobile_index_kv,.mobile_index_buy,.mobile_page_kv,.mobile_product_a3_img1,.mobile_product_a3{ display: none;}


@media screen and (max-width:1100px) {
  footer p.copy {text-align: left;}
}


@media screen and (max-width: 700px) {
	.mov_youtube iframe{ width: 100%; height:auto;}
	.teacher_no_popup .mov iframe{width: 100%;height: auto;}	
}



@media screen and (max-width: 899px) {
	
	/*float_banner*/
	#float_banner{ display: none;}
		
	
	/*head*/
	.head_full{height: 50px;}
	.head_center{ width: 100%; height: 50px; position: relative; z-index: 1006;}
	.head_logo{ margin-left: 10px;}
	.head_logo img{ height: 50px; }		
	.head_menu{ display: none;}
	
	.icon_mobile_menu{ display: block; width: 30px; float: right; margin: 10px 10px 0 0;}	
	.icon_mobile_menu img{ width: 100%;}
	.icon_line{ display: block; width: 30px; float: right; margin: 10px 10px 0 0;}
	.icon_line img{ width: 100%;}
	.fb_icon{ width: 30px!important; margin: 10px 10px 0 0!important; }
	
	
	/*mobile_menu*/
	.mobile_menu_list{ width: 100%; position: absolute; top: 50px; left: 0px; background: #009944;; border-top: 0px solid #000; overflow: hidden; padding: 20px 0;}
	.mobile_menu_list li{ text-align: center; }		
	.mobile_menu_list li a{ display: block; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #fff;}
	.mobile_menu_list li:last-child{ }
	.mobile_menu_list .current a{ color: #f2b800;}
	.mobile_menu_list .newitem{ display: inline-block; /* width: 44px; height: 27px; position: absolute; top: 8px; right: 92px;  */}
	
	.mobile_menu_list .head_son_menu{ padding: 0px; margin-bottom: 10px;}
	.mobile_menu_list .head_son_menu li{ display: inline-block; margin: 0 2px;}
	.mobile_menu_list .head_son_menu li a{ background: #89b34b; display: inline-block; padding: 0 20px;}	
	.mobile_menu_list .head_son_menu li:last-child a{ background: #357cb9;}
	
	/*shadow_full*/
	.shadow_full{ top: 50px;}
	.shadow_center img{ width: 100%; height: 25px;}
	
	
	
	/*index kv*/
	.index_kv_row_full{ height: auto; margin-top: 50px; background: none;}
	.mobile_index_kv{ display: block;}
	.mobile_index_kv img{ width: 100%;}
	
	/*index content*/
	.index_row_center .index_kv_product{ display: none;}
	.index_row_center .index_buy{ display: none;}
	.mobile_index_buy{ display: block; padding: 0px 10px 10px 10px;}
	.mobile_index_buy img{ width: 100%;}
	.index_row_center .index_btn_more{ position: relative; top: auto; right: auto; margin: 0 auto; width: 220px;}
	.index_row_center .index_btn_more img{ width: 100%;}
	.index_row_center .index_remark{ margin: 20px; text-align: justify;}
		
	
	/*page kv*/
	.page_kv_row_full{ background: none; margin-top: 50px; height: auto;}
	.mobile_page_kv{ display: block;}
	.mobile_page_kv img{ width: 100%;}
	
	.page_row_center{ padding: 10px 20px 30px 20px;}
	.news_list{ width: 100%;}
	.news_list li{ background-size: contain;}
	.news_list li a img{ width: 100%;}
	
	.page_row_center h3{ font-size: 24px;}
	.page_row_center p{ }
	
	.page_row_center h4 img{ margin: 40px auto 20px auto; width: 100%;}
	.product_good_list{ margin: 0px;}
	.product_good_list li .text1{ font-size: 18px;}
	.product_good_list li .text2{ font-size: 16px; margin-bottom: 5px;}
	.product_a3_img1{ display: none;}
	.mobile_product_a3_img1{ display: block; margin: 0px 0 10px 0;}
	.mobile_product_a3_img1 img{ width: 100%;} 
	
	.product_a3{ display: none;}
	.mobile_product_a3{ display: block; margin: 0 0 20px 0;}
	.mobile_product_a3 img{ width: 100%;} 
	
	.product_ingredient_list{ padding: 5px 15px;}
	.product_ingredient_list li{ font-size: 16px;}
	.product_ingredient_list li span{ font-size: 18px; background-size: 5px 11px; }
	
		
	/*footer*/
	.footer_center{ padding: 10px 0; font-size: 12px;}
	.footer_link_list li a{ padding: 0 5px;}
	.footer_center .coopyright{ font-size: 12px; padding: 0 10px;}
	
		
}


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

	#warp{margin-top: 50px;}

	header {height:50px; background:white; width:100%;}

	header .nav {display:none; background:white; width:100vw; height:100vh; top:50px; right:0px; padding-top:25px;}
	header .nav li {display:block; width:100%; position:relative; padding:0px; height:auto;}
	header .nav li a {display:block; width:80%; margin:auto; font-size:18px; line-height:60px; text-align:left; border-bottom:1px solid #e9e9e9;}

	header .nav .sub {position:relative; top:0; left:0; transform:translate(0,0); padding:0px; width:100%;}
	header .nav .sub li {height:auto; padding:0px;}
	header .nav .sub a {height:auto; line-height:30px; border-bottom:0px; padding:8px 0px;}
	header .nav .sub2 a {height:auto;}

	.index_kv_row_full{ margin-top: 50px; }
	header .hd_logo{ height: 50px; }
	header .hd_logo img {height:50px; width:auto;}

	header .mb_abot {display:block; position:absolute; top:13px; right:60px;}
	header .mb_abot img {height:25px; width:auto;}

	header .nav .ablogopc {display:none;}
  
	header .nav .arrow {
		width: 15px;
		height: 15px;
		display: inline-block;
		position: absolute;
		top:22px;
		right:10%;
	}

	header .nav .arrow span {
		top: 8px;
		position: absolute;
		width: 9px;
		height: 2px;
		background-color: #009944;
		display: inline-block;
		-webkit-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	header .nav .arrow span:first-of-type {
		left: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	header .nav .arrow span:last-of-type {
		right: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	header .nav .arrow.active span:first-of-type {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	header .nav .arrow.active span:last-of-type {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	header #mbmnu {display:block; position:absolute; right:17px; top:13px; width:30px; height:25px;}
	header #mbmnu span {display:block; width:30px; height:3px; background:#009944;}
	header #mbmnu span:first-child {position:absolute; top:2px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
	header #mbmnu span:nth-child(2) {position:absolute; top:11px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
	header #mbmnu span:nth-child(3) {position:absolute; top:20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

	header #mbmnu.open span:first-child {top:13px; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
	header #mbmnu.open span:nth-child(2) {display:none;}
	header #mbmnu.open span:nth-child(3) {top:13px; -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
	header .nav .ablogopc {display: none;} 

}


/*縮放時錯誤解決*/
@media screen and (min-width: 899px) {
	
	.icon_close,.mobile_menu_list{ display: none !important;}
	
}


@media screen and (max-width:796px) {
	footer {padding:20px}
	footer .ft_abot, footer .ft_mid {float:none;}
	footer .ft_mid {margin-left:0px; margin-top:15px;}
	footer .ft_sns {float:none; position:absolute; right:0px; top:0px;}
	footer p, footer a {font-size:12px; line-height:18px;}

	footer .ft_lks {left: 0px; width: 100vw;}
	footer .ft_lks a {float: left; width: 100vw; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 15px 0px; text-align:center;}
	footer .ft_lks a:hover {padding: 15px 0px;}
	footer .ft_lks a i {display: none;}

}