section { position: relative; padding: 5vw 0; background: #fff; }
section >.bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; opacity: .3; }
section >.info { position: relative; font-size: 0; z-index: 2; }
section .title , #secabout #youtubeBox .right .tit {line-height: 120%;text-align: center;letter-spacing: 10px;font-size: 45px;color: #fff;}
section .title b{
    font-size: 45px;
    display: inline-block;
    vertical-align: baseline;
    color: #7eafda;
}
section .more { margin-top: 40px; text-align: center; }
section .more a {position: relative;padding: 15px 100px;display: inline-block;color: #fff;border-radius: 10px;background: #b00110;}
section .more font {text-align: center;font-family: 'Montserrat', 'Noto Sans TC', sans-serif;font-weight: 500;text-transform: uppercase;letter-spacing: 3px;color: #fff;}
section .more a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); }
section .more.white a , section .more.white font { border-color: #fff; color: #fff; }

/* news */
#news {}
#news:after { position: absolute; top: 0; left: 0; width: 100%; background: #eaf3f1; height: 50%; display: block; content: ''; z-index: -1; }
#news .workframe #section2 ,
#ssbanner-wrap #section6 { text-align: center; }
#news .workframe .entitle h2 ,
#ssbanner-wrap .entitle h2 { text-align: center; color: #7beeb2; padding: 120px 0 90px; font-size: 40px; font-family: 'Josefin Sans', sans-serif, "微軟正黑體", "蘋果儷中黑"; }
#news .news-slide{
    text-align: center;
    margin-top: 3vw;
}
#news .news-slide >div{
    display: inline-block;
    width: calc(50% - 25px);
    margin: 10px;
}
#news .list { margin: 15px; }
#news .list p {color: #7eafda;margin: 20px 0 0;transition: all linear 0.3s;opacity: 1;}
#news .list h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 110%; margin-top: 5px; transition: all linear 0.3s; }
#news .list:hover p { transform: translateY(24px); opacity: 0; }
#news .list:hover h2 { transform: translateY(-24px); }
#news .list h2 a {color: #fff;font-size: 20px;display: block;font-weight: 400;letter-spacing: 3px;}
#news .enmore { margin-top: 80px; text-align: center; }
#news .enmore h3 { text-align: center; }
#news .enmore h3 a { color: #464646; display: inline-block; background: #7beeb2; width: 360px; padding: 15px 35px; font-weight: normal; font-size: 14px; overflow: hidden; }
#news .enmore h3 a b { float: right; }
#news #section2 .entitle { width: 100%; }
#news .list .photo a {transition: all linear 0.3s;display: block;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#news .list .photo a img{width:100%;}
#news .list:hover .photo a { box-shadow: 0 0 7px rgba(0, 0, 0, 0.16); }

/* productBox */
#productBox .bg {
    opacity: 1;
}
#productBox >.info { margin: 0 100px; }
#productBox ul {margin-top: 3vw;overflow: hidden;}
#productBox ul li {position: relative;float: left;width: calc(25% - 45px);margin: 20px;border: 1px solid #4c5156;border-radius: 10px;overflow: hidden;}
#productBox ul li .info h3 a {
    color: #fff;
    font-size: 20px;
    margin-bottom: 10px;
    height: 34px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
#productBox ul li .img a{display:block;}
#productBox ul li .img img {position: relative;width: 100%;height: 300px;object-fit: cover;z-index: 1;}
#productBox ul li .info {overflow: visible;position: relative;padding: 25px;z-index: 2;}
#productBox ul li .login {
    padding: 0 25px 25px;
    text-align: center;
}
#productBox ul li .login a {display: inline-block;font-weight: 300;color: #fff;background: #b00110;padding: 10px 50px;border-radius: 50px;}
#productBox ul li:hover .login a {
    background: #c6a353;
}
#productBox ul li .info h3 {margin-bottom: 10px;height: 34px;font-weight: 400;font-size: 20px;color: #fff;}
#productBox ul li .info article {height: 43px;font-weight: 400;font-size: 14px;color: #777777;-webkit-line-clamp: 2;}

/* aboutBox */
#aboutBox {z-index: 5;padding: 0;position: relative;}
#aboutBox .bg {width: 60%;height: 100%;background-attachment: fixed;top: 0;right: 0;left: auto;opacity: 1;z-index: 3;background-size: cover;}
#aboutBox .bg:after{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgb(0 0 0 / 60%);}
#aboutBox .info { width: 45%; }
#aboutBox .info .title {
    text-align: left;
    color: #333;
}
#aboutBox .info .txtBox {position: relative;padding: 7vw 10vw 7vw 5vw;}
#aboutBox .info .txtBox >div { position: relative; z-index: 2; }
#aboutBox .info .txtBox h3 {margin-bottom: 20px;font-size: 35px;color: #fff;letter-spacing: 2px;}
#aboutBox .info .txtBox article {line-height: 230%;font-size: 17px;color: #232323;margin-bottom: 20px;text-align: justify;}
#aboutBox .info .txtBox .more { margin-top: 80px; text-align: left; }
#SeoStarRating{display:none;}
#aboutBox #SeoStarRating font { vertical-align: middle; }
#aboutBox #SeoStarRating font:last-child {color: #8a8686;}
#aboutBox #SeoStarRating .fa { vertical-align: initial; }
#aboutBox .text{
    position: absolute;
    right: 12%;
    z-index: 4;
    bottom: 15%;
    width: 630px;
    text-align: center;
}
#aboutBox .text h3{
    color: #fff;
    text-align: center;
    font-size: 60px;
    letter-spacing: 5px;
    line-height: 120%;
    margin-bottom: 30px;
}
#aboutBox .text h6{
    color: #333;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    padding: 5px 70px;
    background: #fff;
}

/* secabout */
#secabout { margin-top: -5vw; padding: 20vw 0 10vw; background: url(/images/37/img-secaboutBg.jpg) no-repeat 50% / cover; z-index: 1; }
#secabout:before { position: absolute; width: 87vw; height: calc(100% - 20vw); background: #fff; display: block; top: 15vw; left: 0; content: ""; z-index: 1; }
#secabout >div { position: relative; margin: 0 auto 50px; width: 50vw; z-index: 2; }
#secabout #customBox ul li article { margin: 3vw 0 5vw; text-align: center; line-height: 190%; color: #1f1f1f; }
#secabout #youtubeBox { width: 85vw; background: rgba(31, 31, 31, .9); }
#secabout #youtubeBox a { position: absolute; width: 100%; height: 100%; display: block; z-index: 2; }
#secabout #youtubeBox .left { position: absolute; width: calc(100% - 400px); height: 100%; top: 0; left: 0; z-index: 3; }
#secabout #youtubeBox .left iframe { width: 100%; height: 100%; }
#secabout #youtubeBox .right { position: relative; margin: 0 0 0 auto; padding: 150px 50px; width: 300px; text-align: center; z-index: 1; }
#secabout #youtubeBox .right .tit { font-size: 24px; color: #fff; }
#secabout #youtubeBox .right .more { padding: 0 3px 5px; border-bottom: 1px #fff solid; display: inline-block; color: #fff; }
#secabout #youtubeBox .right .more font { margin-right: 20px; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; text-transform: uppercase; letter-spacing: 3px; font-size: 13px; }

/* bookBox */
#bookBox .topBox { position: relative; margin: 0 auto 5vw; width: 80vw; }
#bookBox .topBox .title { position: absolute; }
#bookBox .topBox .more { text-align: right; }
#bookBox .list ul li .img { overflow: hidden; position: relative; margin: 0 40px 0 60px; z-index: 1; }
#bookBox .list ul li .img:before { position: absolute; width: 100%; height: 100%; background: rgb(240 244 247 / .6); display: block; top: 0; left: 0; opacity: 0; z-index: 2; content: ""; }
#bookBox .list ul li .img img { position: relative; width: 100%; height: 30vw; object-fit: cover; z-index: 1; }
#bookBox .list ul li .info { position: relative; margin-top: -14%; padding: 7% 5%; width: 350px; background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 2; }
#bookBox .list ul li .info h3 { height: 40px; font-weight: 400; font-size: 24px; color: #fff; }
#bookBox .list ul li .info .more { text-align: left; }
#bookBox .list ul li:nth-child(2n) .img { margin: 0 0 0 100px; }
#bookBox .list ul li:nth-child(2n) .info { margin-left: 40px; }

@media screen and (max-width:1440px) {
	#newsBox { width: calc(100% - 160px); }
	#productBox >.info { margin: 0 5%; }
	#productBox ul li {
    width: calc(25% - 25px);
    margin: 10px;
}
#aboutBox .text{
    top: 27%;
    right: 3%;
}
	#productBox ul li .info {
    padding: 15px 15px 25px;
}
	#aboutBox .bg { width: 50%; }
	#aboutBox .info { width: 55%; }
}
@media screen and (min-width:1281px) {
	section .more a:hover { background: #1f1f1f; }
	section .more a:hover font { color: #fff; }
	section .more a:hover svg { fill: #fff; }
	section .more.white a:hover {background: #013765;}
	section .more.white a:hover font {}
	section .more.white a:hover svg {}
	#productBox ul li:hover .img:before , #bookBox .list ul li:hover .img:before { opacity: 1; }
	#productBox ul li:hover .img img , #bookBox .list ul li:hover .img img {
    -webkit-filter: saturate(0.5);
}
}
@media screen and (max-width:1280px) {
	#aboutBox .text h3{font-size: 70px;}
	#aboutBox .text{width: 460px;right: 6%;}
	#secabout #youtubeBox { width: 90vw; }
	#bookBox .list ul li .img { margin: 0 20px 0 60px; }
}
@media screen and (max-width:1024px) {
	#productBox ul li {
    width: calc(50% - 25px);
}
    #aboutBox .text{display:none;}
	section .more a { padding: 10px 80px 10px 20px; }
	#newsBox { margin-top: -86px; }
	#newsBox .info { padding: 15px 30px; }
	#newsBox .info .row { width: 100%; display: block; }
	#newsBox .info ul li { padding: 0; }
	#newsBox .info ul li a , #aboutBox .info { width: 100%; }
	#newsBox .info ul li .noBox , #newsBox .info .btn , #secabout #youtubeBox .right { display: none; }
	#aboutBox .bg {width: 100%;height: 100%;top: 0;z-index: 1;}
	#aboutBox:after{content:'';position:absolute;background: #000;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;opacity: .75;}
	#aboutBox .info .txtBox {padding: 7vw 10vw;background: #fff;}
	#secabout:before { width: 90vw; }
	#secabout #customBox { width: 70vw; }
	#secabout #youtubeBox .left { position: relative; width: 100%; height: 400px; }
}
@media screen and (max-width:980px) {
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
	#bookBox { padding-bottom: 5vw; }
	#bookBox .info { padding-bottom: 90px; }
	#bookBox .topBox , #bookBox .topBox .title { position: initial; }
	#bookBox .topBox .more { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; }
}
@media screen and (max-width:768px) {
	#bookBox .list ul li .img { margin: 0 0 0 100px; }
	#bookBox .list ul li .img img { height: 55vw; }
}
@media screen and (max-width:640px) {
	section{
    padding: 50px 0;
}
	section .title, section .title b{
    font-size: 30px;
}
#productBox ul li{
    width: calc(100% - 25px);
}
#news .news-slide >div{
    width: calc(100% - 25px);
}
	#newsBox { margin-top: 0; width: 100%; }
	#bookBox .list ul li .img , #bookBox .list ul li:nth-child(2n) .img { margin: 0 5vw; }
	#bookBox .list ul li .info , #bookBox .list ul li:nth-child(2n) .info { margin: -10% auto 0; width: 70%; }

}