#NewsBox{padding:100px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#NewsBox .speBox{display:inline-block;width:611px;vertical-align:top}
#NewsBox .speBox .titleSet{margin:0 100px}
#NewsBox .speBox .titleSet .speBoxTitle{font-size:50px;line-height:120%;font-weight:400;font-family:'Merriweather',serif}
#NewsBox .speBox .titleSet .subBoxTitle{color:#9a9a9a;font-size:15px;font-weight:400;margin:30px 0 50px;line-height:160%}
#NewsBox .speBox .titleSet .submore a,#product .subBoxTitle a{display:inline-block;border:1px solid #d0d0d0;font-size:13px;padding:12px 55px;color:#545454;position:relative;transition:all linear .2s}
#NewsBox .speBox .titleSet .submore a:before,#product .subBoxTitle a:before{content:'+';position:absolute;left:12px;top:10px;color:#d0d0d0;font-size:24px}
#news{display:inline-block;width:calc(100% - 615px);margin-right:-4px}
#news .newsList >div{margin-bottom:35px}
#news .newsList .border{position:relative;overflow:hidden}
#news .newsList .border a,#product #prolay .p-box a{position:absolute;display:block;width:100%;height:100%;left:0;top:0;z-index:5}
#news .newsList .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;float:left}
#news .newsList .photo img,#product #prolay .photo img{width:100%}
#news .newsList .news-info{float:left;margin-left:30px;width:calc(100% - 340px)}
#news .newsList .news-info p{font-size:14px;color:#000}
#news .newsList .news-info h3{font-size:24px;line-height:110%;font-weight:400;margin:7px 0 20px;color:#3c3838;font-family:'Noto Serif TC',serif;transition:all linear .2s}
#news .newsList .news-info .describe{color:#888;font-weight:400;font-size:16px;position:relative}
#news .newsList .news-info .describe h4{font-weight:400;width:calc(100% - 80px)}
#news .newsList .more{position:absolute;right:0;top:0;font-family:'Merriweather',serif;padding-bottom:15px;font-size:13px}
#news .newsList .more b{font-weight:400;color:#5f5f5f}
#news .newsList .more:after{content:'';display:block;position:absolute;left:21px;bottom:0;width:15px;height:1px;background:#bd8655;transform:rotate(35deg);transform-origin:center right;transition:all linear .2s}
#news .newsList .more:before{content:'';display:block;position:absolute;left:6px;bottom:0;width:30px;height:1px;background:#bd8655;transition:all linear .2s;transition-delay:.2s}
#aboutFunc{
    padding: 70px 0;
}
#aboutFunc .speBox{
    width: 1160px;
    margin: 0 auto;
    overflow: hidden;
}
#aboutFunc .youtubebox{
    float: left;
    width: 340px;
}
#aboutFunc #about-slide{
    float: right;
    width: calc(100% - 450px);
}
#youtube{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;height:100%}
#youtube .UTwo{
    position: relative;
}
#youtube .UTwo:after {
    content: '';
    position: absolute;
    right: -10px;
    top: 10px;
    width: 340px;
    height: 336px;
    background: #192d66;
    z-index: -1;
}
#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 .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%}
#about-slide .slick-prev{opacity:0}
#about-slide .slick-next{right:30px;height:40px}
#about-slide .slick-next:before{background-image:url(/images/23/index-about-sccrow.jpg);width:23px;height:46px;content:'';display:block}
#about-slide .slick-dots{top:10px;text-align:right;height:30px;width:auto;right:0}
#about-slide .slick-dots li button:before{font-size:10px;color:#fff}
#about-slide .about,#about-slide .free{}
#about-slide .about .speBoxTitle, #abouteam .speBoxTitle, #familyBox .speBoxTitle{font-size: 28px;line-height:120%;font-weight: normal;position: relative;}
#about-slide .about .speBoxTitle:after, #abouteam .speBoxTitle:after, #familyBox .speBoxTitle:after {
    margin-bottom: 20px;
    width: 76px;

    height: 1px;
    background: #192d66;
    display: block;
    content: "";
    margin-top: 20px;
}
#about-slide .about .subBoxTitle, #abouteam .subBoxTitle, #familyBox .subBoxTitle{font-weight: bold;font-size: 45px;color: #192d66;line-height:110%;font-family: 'Roboto', sans-serif;text-transform: uppercase;}
#about-slide .about .arts, #abouteam .arts, #familyBox .arts{font-size: 16px;line-height: 220%;margin: 30px 0;color: #151515;text-align: justify;}
#about-slide .about .more a, #sloganBox .more a{font-weight:400;font-size:14px;transition:all linear .2s;background: #b3ce17;color: #fff;display: inline-block;padding: 10px 60px;}
#about-slide .about .more a:hover, #sloganBox .more a:hover{
    background: #99b112;
}
#abouteam{
    background: #f8f8fa;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}
#abouteam:after{
	position: absolute;
	content: '';
	width: 608px;
	height: 750px;
	left: -90px;
	bottom: -300px;
	background-image: url(/images/23/abouteam-afterimg.png);
	background-repeat: no-repeat;
	background-position: 100% 0;
	z-index: 0;
	animation-name:newsbg;
	animation-duration:3s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}
@keyframes newsbg{
	0%{
		background-position: 110% 30%;
	}
	100%{
		background-position: 100% 0;
	}
}

#abouteam .webframe{
    width: 1160px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#abouteam .row{    animation: fadeIn 1.5s both;
    -webkit-animation: fadeIn 1.5s both;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;}
#abouteam .left{
    float: left;
    width: 43%;
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInLeft;
    -ms-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    }
#abouteam .right{
    animation-name: fadeInRight;
    -webkit-animation-name: fadeInRight;
    float: right;
    width: 51%;
    }
#sloganBox{overflow:hidden;position:relative;padding: 70px 0;background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#sloganBox .webframe{width: 1280px;}
#sloganBox h3{
    text-align: center;
    font-size: 28px;
    margin-bottom: 5px;
    font-weight: normal;
    position: relative;
}
#sloganBox h3:after {
	margin-bottom: 20px;
	width: 40px;
	height: 1px;
	background: #192d66;
	display: block;
	content: "";
	margin-top: 20px;
	margin: 0 auto;
	margin-top: 20px;
}
#sloganBox article.Boxtext{
    font-size: 145px;
    text-align: center;
    color: #f7f7f7;
    line-height: 100%;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin-top: 40px;
}
#sloganBox ul{text-align:center;margin-top: -60px;}
#sloganBox ul li{margin: 0 10px;width: calc((100%/6) - 25px);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: 45px;top: 40px;}
#sloganBox ul li:hover p i{background:#fff;color:#2eb1a5;}
#sloganBox ul li h4{font-size: 16px;text-align:center;font-weight: normal;}
#sloganBox ul li article{margin:auto;width: 60%;height:65px;text-align:center;font-size:16px;color:#fff;overflow:hidden;}
#sloganBox .more{
    text-align: center;
    margin-top: 60px;
}
.abgne-loading-20140104-2 {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 0 auto 20px;
    background: #fff;
    border-radius: 50%;
}
.abgne-loading-20140104-2 .loading {
    border: 6px solid #192d66;
    border-right: 6px solid #dcdcdc;
    border-bottom: 6px solid #dcdcdc;
    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);
	}
}
#familyBox {
    background-position: 80% 50%;
    background-image: url(/images/23/index-familyBg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 70px 0;
}
#familyBox .webframe{
    overflow: hidden;
    width: 980px;
    margin-left: 150px;
}
#familyBox .left{
    float: left;
    width: 450px;
    margin-right: 70px;
}
#familyBox .left ul li {
    float: left;
    width: calc(100%/3);
    margin: 0 0 20px;
}
#familyBox .left ul li .item{padding-top: 10px;}
#familyBox .left ul li .item .circle{
    text-align: center;
}
#familyBox .left ul li:hover .item .circle{
    -webkit-filter: grayscale(1);
    -webkit-animation: tada 1s;
    animation: tada 1s;}
#familyBox .left ul li .item p{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 150%;
    margin-top: 10px;
    color: #fff;
}
#familyBox .right {
    float: right;
    width: calc(100% - 520px);
}
#familyBox .arts, #familyBox .speBoxTitle{
    color: #fff;
}
#familyBox .subBoxTitle{
    color: #99b111;
}
#familyBox .speBoxTitle:after{
    background: #99b111;
}
#familyBox .right .about .more a{font-weight: 400;font-size: 14px;transition: all linear .2s;background: #aac52a;color: #fff;display: inline-block;padding: 10px 60px;}
#familyBox .right .about .more a:hover{
    background: #99b112;
}
#product{padding:50px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#product .titleSet{margin:70px}
#product .titleSet .speBoxTitle,#bookBox .speBox h2{font-weight:400;text-align:center;font-size:36px;line-height:110%;font-family:'Merriweather',serif}
#product .titleSet .subBoxTxt,#bookBox .speBox p a{text-align:center;font-size:17px;font-weight:400;color:#6d6d6d;margin-top:5px}
#product #prolay .p-box{position:relative;margin:10px 30px}
#product #prolay .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;position:relative}
#product #prolay .photo:after{content:'';display:block;width:50px;height:1px;background:#e2b774;position:absolute;left:calc(50% - 25px);top:50%;z-index:2;transition:all linear .2s;opacity:0}
#product #prolay .photo:before{content:'';display:block;width:20px;height:1px;background:#e2b774;position:absolute;left:calc(50% - 15px);top:50%;z-index:2;transform:rotate(35deg) translate(17px,-12px);transform-origin:right center;transition:all linear .2s;opacity:0}
#product #prolay .photo img{transition:all linear .2s}
#product #prolay .p-info{margin-top:20px}
#product #prolay .p-info .describe{color:#ac793c;font-weight:400;font-size:15px;position:relative;padding-bottom:5px}
#product #prolay .p-info .describe:after{content:'';display:block;background:#ac793c;width:30px;height:1px;position:absolute;bottom:0;left:0}
#product #prolay .p-info h3{line-height:130%;font-weight:400;font-size:24px;letter-spacing:.05em;color:#1d1c1c;margin:25px 0 18px;font-family:'Noto Serif TC',serif}
#product #prolay .p-info .price span{line-height:120%;display:block;color:#999;font-size:12px}
#product #prolay .p-info .price span b{font-weight:400;vertical-align:initial}
#product #prolay .p-info .price span.now{line-height:150%}
#product #prolay .p-info .price span.now b{font-size:18px;margin:0 5px;font-family:'Merriweather',serif;color:#000}
#product .subBoxTitle{text-align:center;margin-top:80px}
#bookBox{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding:70px 0 100px}
#bookBox .speBox{margin-bottom:50px}
#bookBox .speBox p{text-align:center}
#bookBox .speBox p a{transition:all linear .2s}
#bookBox #book{width:900px;margin:0 auto}
#bookBox #book .bList{overflow:hidden}
#bookBox #book .bList >div{float:left;width:50%;text-align:center;margin-bottom:30px}
#bookBox #book .bList >div:nth-child(even){margin-top:80px}
#bookBox #book .mofd{display:inline-block;position:relative}
#bookBox #book .photo{background-repeat:no-repeat;background-position:50%;background-size:auto 100%;margin-right:50px;background-color:#000;transition:all linear .2s}
#bookBox #book .photo a{display:block}
#bookBox #book .photo img{width:100%}
#bookBox #book h3{background:#fff;padding:25px 30px;position:absolute;bottom:-22px;right:0;max-width:calc(60% - 60px);word-break: break-all;}
#bookBox #book h3 a{color:#383838;font-size:20px;font-family:'Noto Serif TC',serif}
@media (min-width: 1025px) {
#NewsBox .speBox .titleSet .submore a:hover,#product .subBoxTitle a:hover{background:#d0d0d0;color:#fff}
#familyBox{
    background-attachment: fixed;
}
#product #prolay .p-box:hover .photo img{background:rgba(0,0,0,0.41)}
#product #prolay .p-box:hover .photo:after,#product #prolay .p-box:hover .photo:before{opacity:1}
#bookBox #book .photo:hover{background-size:auto 110%}
#news .newsList .border:hover .more:after{transform:rotate(0deg);opacity:0}
#news .newsList .border:hover .more:before{width:0;left:30px}
#news .newsList .border:hover .news-info h3{color:#d2ab52}
#bookBox .speBox p a:hover{color:#ad925f}
}
@media screen and (max-width: 1440px) {
#NewsBox .speBox{width:500px}
#news{width: calc(100% - 510px);}
#familyBox .right{
}
}
@media screen and (min-width: 1281px) {
}
@media screen and (max-width: 1280px) {
#NewsBox .speBox{width:400px}
#news{width:calc(100% - 400px)}
#news .newsList .photo{width:100px}
#news .newsList .news-info{width:calc(100% - 190px)}
#news .newsList .news-info h3{margin:4px 0 15px;font-size:20px}
#NewsBox .speBox .titleSet .speBoxTitle{font-size:42px}
#NewsBox .speBox .titleSet{margin:0 70px}
#sloganBox .webframe, #aboutFunc .speBox, #abouteam .webframe{
    width: 95%;
}
}
@media screen and (max-width: 1024px) {
#NewsBox .speBox{width:100%}
#news{width:calc(100% - 140px);margin:70px 70px 0}
#news .newsList .news-info{width:calc(100% - 130px)}
#bookBox #book{width:95%}
#sloganBox article.Boxtext{
    font-size: 95px;
}
#sloganBox ul{
    margin-top: -30px;
}
#familyBox .webframe{
    margin: 0 auto;
    width: 90%;
}
}
@media screen and (max-width: 768px) {
#aboutFunc .youtubebox{
    float: none;
    width: 90%;
    margin: 0 auto;
    }
    #youtube .UTwo:after{
    height: 100%;
    width: 100%;
}
#aboutFunc #about-slide{
    float: none;
    width: 90%;
    margin: 40px auto 0;
    }
    #abouteam .right{
    float: none;
    width: 100%;
}
    #abouteam .left{
    float: none;
    width: 95%;
    margin: 20px auto 0;
}
#sloganBox article.Boxtext{
    font-size: 60px;
    margin-top: 20px;
}
#sloganBox ul{
    margin: 0;
}
#sloganBox ul li{
    width: calc((100%/3) - 25px);
    margin-bottom: 30px;
}
#familyBox .left{
    float: none;
    width: 100%;
}
#familyBox .right{float: none;width: 90%;margin: 0 auto 40px;}
}
@media screen and (max-width: 640px) {
#news{width:calc(100% - 60px);margin:70px 30px 0}
#NewsBox .speBox .titleSet{margin:0 30px}
#news .newsList .news-info p.more{display:none}
#news .newsList .news-info .describe h4,#about-slide .about .arts,#about-slide .free p,#about-slide .about .more{width:100%}
#about-slide .about,#about-slide .free{}
#product #prolay .p-info h3{font-size:20px;margin:17px 0 10px}
#bookBox #book .bList .photo{    margin-right: 0;}
#bookBox #book .bList >div{margin-bottom: 0;}
#bookBox #book .bList h3{    bottom: 0;
    padding: 15px 20px;max-width: calc(60% - 40px);}
#bookBox #book .bList h3 a{font-size: 18px;}
#bookBox #book .bList >div:nth-child(even){margin-top: 0;}

}
@media screen and (max-width: 480px) {
#NewsBox{padding:70px 0}
#news{width:100%;margin:50px 0 0}
#news .newsList .news-info .describe h4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#news .newsList .news-info h3{margin:0 0 10px;font-size:18px}
#news .newsList .news-info{margin-left:20px;width:calc(100% - 120px)}
#NewsBox .speBox .titleSet .speBoxTitle{font-size:35px}
#NewsBox .speBox .titleSet .subBoxTitle{margin:10px 0 30px}
#about-slide .slick-next{right:15px}
#about-slide .about .speBoxTitle, #abouteam .speBoxTitle, #familyBox .speBoxTitle, #ssbanner-title h2, #sloganBox h3{font-size: 22px;}
#about-slide .about,#about-slide .free{}
#about-slide .about .arts, #abouteam .arts, #familyBox .arts{margin:20px 0;font-size: 15px;line-height: 190%;}
#about-slide .slick-dots li{margin:0}
#product .titleSet .speBoxTitle,#bookBox .speBox h2{font-size:30px}
#product .titleSet{margin:40px}
#product #prolay .p-box{margin:0 10px}
#product #prolay .p-info h3{font-size:18px}
#product #prolay .p-info .price span.now b{font-size:16px}
#bookBox #book .photo{margin-right:20px}
#bookBox #book h3{padding:15px 20px;max-width:calc(70% - 40px)}
#bookBox #book h3 a{font-size:17px}
#bookBox #book .bList h3{
    padding: 10px 15px;
    max-width: calc(80% - 30px);
}
#ssbanner .imgg{
    margin: 0 10px;
}
#bookBox #book .bList h3 a{
    font-size: 16px;
}
#aboutFunc, #abouteam{    padding: 40px 0;}
#about-slide .about .subBoxTitle, #abouteam .subBoxTitle, #familyBox .subBoxTitle, #ssbanner-title h3{
    font-size: 35px;
}
#sloganBox ul li{
    width: calc((100%/2) - 25px);
}
#sloganBox article.Boxtext{
    font-size: 35px;
}
}