#aboutNews{padding-top:30px;}
#bannerNews{
    position: relative;
}
#newsBox{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: rgb(0 0 0 / 50%);
}
#aboutBox{float:left;width:50%;padding: 40px 0;-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-ms-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;}
#newsBox h3{float: left;font-size:20px;width: 100px;color: #fff;padding: 18.5px 0;letter-spacing: 2px;position: relative;}
#newsBox .tempWrap{
    float: right;
    width: calc(100% - 150px);
}
#newsBox h3:after{content:'/';position:absolute;right: -25px;}
#newsBox .bd{
    width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}
#newsBox ul li{padding: 20px 0;overflow:hidden;}
#newsBox ul li > div{}
#newsBox ul li .info{
    position: relative;
}
#newsBox ul li .info h4 a ,
#newsBox ul li .info article ,
#productBox ul li .info h4 a ,
#productBox ul li .info article{overflow:hidden;height:27px;font-size:18px;color: #fff;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
#newsBox ul li .info article{font-size:14px;color: #fff;position: absolute;right: 0;top: 0;height: 27px;line-height: 27px;}
#newsBox p{text-align:left;margin-top:15px;}
#newsBox p a{display:inline-block;color:#3ca18e;}
#aboutBox{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-ms-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight;}
#aboutBox h3{overflow:hidden;position:relative;margin-bottom:20px;font-size:22px;}
#aboutBox h3 b{margin-left:10px;font-size:14px;color:#38d0c2;}
#aboutBox #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;margin-top:20px;}
#youtube .UTwo{position:relative;padding-bottom: 28.55%;padding-top:30px;height:0;overflow:hidden;}
#youtube .UTwo a{display:block;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;background:rgba(0, 0, 0, 0.6);position:absolute;z-index:5;color:#dcdcdc;font-size:30px;left:calc(50% - 50px);top:calc(50% - 50px);transition:all linear 0.3s;}
#youtube .UTwo a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px;}
#youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
#aboutBox h3:after{position:absolute;margin-left:15px;width:100%;height:6px;background:url(/images/12/index/img-aboutTitBg.png);display:inline-block;bottom:9px;content:"";}
#aboutBox article{padding:0 20px;font-size:16px;}
#aboutBox article .arts{
    text-align: justify;
    line-height: 200%;
}
#aboutBox article p.more a{color:#2eb1a5;}
#aboutNews .line{margin:70px 0 0;float:left;width:100%;border-top:1px solid #eee;text-align:center;}
#aboutNews .line i{position:relative;width:33px;height:33px;background:#fff;display:inline-block;border:1px #ddd solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;line-height:35px;color:#ddd;top:-17px;}
/* page-form */
#page-form {float: left;width: calc(50% - 40px);padding: 40px 40px 40px 0;-webkit-animation-name: fadeInLeft;-moz-animation-name: fadeInLeft;-ms-animation-name: fadeInLeft;-o-animation-name: fadeInLeft;animation-name: fadeInLeft;}
#page-form form , #page-form fieldset { margin: 0; padding: 0; border: 0; }
#page-form p { overflow: hidden; color: #000; font-size: 16px; margin: 5px 0; }
#page-form .btn p{
    float: left;
    width: 50%;
}
#page-form label { float: left; width: 100px; text-align: right; padding: 5px 0; }
#page-form span {display: block;}
#page-form .ra span { width: auto; float: left; margin-left: 10px; padding: 5px 0; }
#page-form input[type="text"] , #page-form select {width: calc(100% - 32px);padding: 15px;border: 1px solid #bdbdbd;margin-bottom: 10px;color: #000;border-radius: 0;}
#page-form input#Checknum {width: 80px;margin: 0 10px 0 0;}
#page-form select {width: calc(100% - 1px);border-top-right-radius: 0;border-top-left-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0;-webkit-appearance: none;background: url(/images/12/arrow.png) no-repeat scroll 99% center transparent;background-repeat: no-repeat;background-position: 97% 50%;padding: 17px;}
#page-form p.send input {background: #eeba2b;color: #fff;text-align: center;width: 100%;padding: 10px 0;font-size: 14px;outline: none;cursor: pointer;}
#page-form p.send input:hover{
    opacity: .8;
}
#page-form h2 {text-align: center;color: #353535;margin-bottom: 10px;font-size: 25px;}
#page-form article{
    font-size: 15px;
    line-height: 170%;
}
#page-form h2 img { margin-right: 5px; vertical-align: bottom; }
#page-form h2 b { display: inline-block; font-size: 24px; color: #353535; margin-right: 10px; vertical-align: baseline; }

#productBox{overflow:hidden;width:100%;padding:50px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position: relative;}
#productBox:before{content:'';position:absolute;width: 100%;height: 50%;top: 0;left: 0;background: #000;opacity: .5;}
#productBox:after{content:'';position:absolute;bottom: 0;left: 0;width: 100%;height: 50%;background: #fff;}
#productBox h3.tit ,
#book h3.tit{margin-bottom:30px;text-align:center;font-size: 40px;font-weight:700;color: #fff;position: relative;z-index: 2;}
#productBox .bd{overflow:hidden;padding: 25px 0 0;width: 95%;margin: 0 auto;position: relative;z-index: 2;}
#productBox .bd .slick-slider{
    margin: 0;
}
#productBox .slick-prev{left:calc(50% - 40px);top:calc(100% + 40px);z-index:9;width:40px;height:40px;}
#productBox .slick-next{right:calc(50% - 40px);top:calc(100% + 40px);z-index:9;width:40px;height:40px;}
#productBox .slick-prev:before, #productBox .slick-next:before{color:#91cec8;font-size:26px;}
#productBox >.more{text-align:center;margin-top:30px;overflow:hidden;}
#productBox .more a{display:inline-block;background:rgba(46, 177, 165, 0.79);color:#fff;padding:7px 20px;border-radius:5px;border:1px solid #108076;transition:all ease-in-out 0.3s;}
#productBox .tempWrap{margin:auto;}
#productBox ul li{float:left;width:16%;margin: 0 40px;}
#productBox ul li > div{}
#productBox ul li .productPhoto{overflow:hidden;}
#productBox ul li .productPhoto .photo ,
#adBox .list .photo{background-size: 45%;background-color: #bc9c22;background-repeat: no-repeat;background-position: 50% 50%;border-radius: 50%;margin: 10px 20px;}
#productBox ul li:hover .productPhoto .photo{
    -webkit-filter: grayscale(1);
    -webkit-animation: tada 1s;
    animation: tada 1s;}
#productBox ul li:hover .productPhoto a.photo ,
#adBox .list:hover .photo{}
#productBox ul li .info{padding: 20px 0;}
#productBox ul li .info h4 a{margin-bottom:10px;color: #2d2d2d;text-align: center;font-size: 22px;}
#productBox ul li .info article{height: 42px;font-size:14px;-webkit-line-clamp:2;color: #969696;}
#productBox ul li .info p.price{overflow:hidden;height:24px;}
#productBox ul li .info p.price span{float:right;color:#094b45;font-size:16px;}
#productBox ul li .info p.price span b{margin:0 3px;}
#productBox ul li .info p.price span.old{float:left;color:#7e7e7e;text-decoration:line-through;font-size:12px;}
#productBox ul li .info p.price span.old b{}
#productBox ul li .info a.more{color: #bc9c22;text-align: center;font-size: 14px;opacity: 0;transition: all linear 0.3s;}
#productBox .arrow{text-align:center;}
#productBox .arrow a{margin:10px 5px;width:40px;height:40px;display:inline-block;border:1px #ddd solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;line-height:33px;color:#ddd;font-size:20px;}
#productBox .arrow a:hover{border-color:#2eb1a5;color:#2eb1a5;}
/* #poheee contact-way */
#poheee {
    margin-bottom: 50px;
}
#poheee h2 {
    text-align: center;
    /* color: #fff; */
    /* text-shadow: 0 0 8px #484848; */
    margin-top: 30px;
    font-size: 25px;
}
#poheee .contact-way {}
#poheee .contact-way ul { text-align: center; }
#poheee .contact-way ul li {display: inline-block;width: calc((55% /3) - 3px);float: none;margin: 0 5px;}
#poheee .contact-way ul li a {padding: 25px 10px 25px 68px;background: url(/images/12/img01.png) #e82525 no-repeat 50px 50%;display: block;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;text-align: center;font-size: 18px;color: #fff;}
#poheee .contact-way ul li.usus a{
	background: #f44336;
	padding: 11px 10px 11px 5px;
}
#poheee .contact-way ul li.usus a .fa{
    display: inline-block;
    font-size: 3em;
    margin-right: 30px;
}
#poheee .contact-way ul li.usus a b{
	display:inline-block;
}
#poheee .contact-way ul li #lineme {background: url(/images/12/img02.png) #019c01 no-repeat 50px 50%;}
#poheee .contact-way ul li #fbookfan{
    background: url(/images/12/img03.png) #43609c no-repeat 50px 50%;
}
#poheee .contact-way ul li a.fb { background: url(/images/12/img03.png) #3b5999 no-repeat 10px 50%; }
#poheee .contact-way ul li a b {display: block;}

#sloganBox{overflow:hidden;position:relative;padding:60px 0;background-image: url(/images/12/term-agreement.png);color:#fff;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#sloganBox h2{
    text-align: center;
    font-size: 40px;
}
#sloganBox h3{
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 50px;
}
#sloganBox:before{position:absolute;width:100%;height:22px;display:block;-webkit-border-radius:60%;-moz-border-radius:60%;border-radius:60%;-webkit-box-shadow:0px 0 22px rgba(0, 0, 0, 0.5);-moz-box-shadow:0px 0 22px rgba(0, 0, 0, 0.5);box-shadow:0px 0 22px rgba(0, 0, 0, 0.5);bottom:-22px;content:"";}
#sloganBox ul{text-align:center;}
#sloganBox ul li{margin: 0 30px;width: calc((100%/3) - 65px);display:inline-block;-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-ms-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;vertical-align:top;}
#sloganBox ul li:nth-child(2){-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-ms-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s;}
#sloganBox ul li:nth-child(3){-webkit-animation-delay:1s;-moz-animation-delay:1s;-ms-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s;}
#sloganBox ul li:nth-child(4){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;-ms-animation-delay:1.5s;-o-animation-delay:1.5s;animation-delay:1.5s;}
#sloganBox ul li:nth-child(5){-webkit-animation-delay:2s;-moz-animation-delay:2s;-ms-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s;}
#sloganBox ul li:nth-child(6){-webkit-animation-delay:2.5s;-moz-animation-delay:2.5s;-ms-animation-delay:2.5s;-o-animation-delay:2.5s;animation-delay:2.5s;}
#sloganBox ul li p{    width: 60px;
    height: 60px;
    display: block;
    text-align: center;
    line-height: 70px;
    position: absolute;
    left: 30px;
    top: 24px;}
#sloganBox ul li:hover p i{background:#fff;color:#2eb1a5;}
#sloganBox ul li h4{margin-bottom:10px;text-align:center;color: #fff;font-size: 22px;}
#sloganBox ul li article{margin:auto;width:80%;height:65px;text-align:center;font-size:16px;color:#fff;overflow:hidden;}
.abgne-loading-20140104-2 {
    position: relative;
    height: 120px;
    width: 120px;
    margin: 0 auto 20px;
}
.abgne-loading-20140104-2 .loading {
    border: 6px solid #eeba2b;
    border-right: 6px solid #fff;
    border-bottom: 6px solid #fff;
    height: calc(100% - 12px);
    width: calc(100% - 12px);
    border-radius: 50%;
    -webkit-animation: loading 1s infinite linear;
    -moz-animation: loading 1s infinite linear;
    -ms-animation: loading 1s infinite linear;
    -o-animation: loading 1s infinite linear;
    animation: loading 5s infinite linear;
}
@-webkit-keyframes loading {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes loading {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@-o-keyframes loading {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}
@keyframes loading {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
#news{
	background:#fff;
	padding:65px 0;
	position: relative;
    z-index: 2;
}
#news h2{
	text-align:center;
	display:block;
	font-size: 40px;
	margin-bottom: 50px;
}

#news div{
	outline:none;
}
#news .newslist >div{
	overflow:hidden;
}
#news .newslist .photo{
	float:left;
	margin-right: 5%;
    max-width: 27%;
}
#news .newslist .photo a{
	display: block;
	width: 100%;
	height: 100%;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	outline:none;
	border-radius: 50%;
}
#news .newslist .news-info{
	float:right;
	width: 63%;
    margin-right: 5%;
}
#news .newslist .news-info h3{
	font-size:20px;
	margin: 10px 0;
	line-height: 130%;
	height: 25px;
	overflow: hidden;
}
#news .newslist .news-info h3 a{
	color: #000000;
	font-size: 18px;
}
#news .newslist .news-info p{
	font-size: 13px;
	color: #e2b15b;
}
#news .newslist .news-info p b{
    color: #fff;
    padding: 2px 20px;
    margin-right: 10px;
    background: #4f663d;
    border-radius: 5px;
    display: inline-block;
}
#news .newslist .news-info article{
	color:#212020;
	height: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	text-align: justify;
}
.newslist{
	margin:50px 0;
}
#adBox{margin:30px 0;text-align:center;}
#adBox .list{overflow:hidden;margin:0 1%;width:22%;display:inline-block;-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-ms-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig;}
#adBox .list:nth-child(2){-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-ms-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;}
#adBox .list:nth-child(3){-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-ms-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;}
#adBox .list:nth-child(4){-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-ms-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig;}
#bookBox{padding-top:50px;background-repeat:no-repeat;background-position:50% 100%;background-size:cover;}
#book h3.tit{margin:0;}
#book >span{text-align:center;display:block;margin:0 auto 40px;}
#book >span a{color:#3d3d3d;}
#bookBox .bookSli .box{position:relative;}
#bookBox .bookSli .box .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#bookBox .bookSli .box .photo a img{width:100%;}
#bookBox .bookSli .box .info{width:calc(100% - 100px);position:absolute;left:30px;bottom:30px;background:rgba(255, 255, 255, 0.46);padding:20px;}
#bookBox .bookSli .box .info h3 a{font-size:20px;line-height:110%;color:#000;}
@media screen and (min-width:1281px){#productBox .more a:hover{background:rgb(27, 150, 139);}
#productBox ul li:hover .info a.more{
    opacity: 1;
}
#productBox, #sloganBox{background-attachment: fixed;}
}
@media screen and (max-width:1440px){
	#newsBox .bd{width: 95%;}
}
@media screen and (max-width:1280px){#productBox ul li{width:24%;}
}
@media screen and (max-width:1024px){
#poheee .contact-way ul li{
    width: calc((85% /3) - 3px);
}
}
@media screen and (max-width:768px){#aboutBox{margin:0 auto 50px;float:none;width: 90%;}
#aboutBox article{padding:0;}
#productBox ul li{width:32%;margin: 0 20px;}
#aboutNews .line{margin:40px 0 0;}
#sloganBox ul li{width: calc(50% - 65px);}
#page-form{
    float: none;
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
}
#poheee .contact-way ul li{
    width: 50%;
    display: block;
    margin: 0 auto 10px;
}
}
@media screen and (max-width:640px){#bookBox .bookSli .box .info h3 a{font-size:17px;}
#bookBox .bookSli .box .info p{font-size:12px;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#bookBox .bookSli .box .info{width:calc(100% - 40px);left:10px;bottom:10px;padding:10px;}
}
@media screen and (max-width: 480px){#aboutBox{}
#productBox ul li{width:50%;}
#adBox .list{margin:10px 1%;width:47%;}
#newsBox ul li{
    padding: 0 0 20px;
}
#newsBox ul li .info h4 a{
    display: inline-block;
    width: calc(100% - 110px);
}
#page-form .btn p{
    float: none;
    width: 100%;
}
#page-form .btn p.send{
    margin-top: 20px;
}
#poheee .contact-way ul li{
    width: 80%;
}
#sloganBox ul li{
    width: calc(50% - 35px);
    margin: 0 15px 30px;
}
	input {
    -webkit-appearance: none;  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
    -moz-appearance: none;     /* FireFox */
    appearance: none;
}
}
@media screen and (max-width:450px){#productBox ul li{width:100%;}
}