/* a.more */
a.more { margin-top: 15px; padding: 5px 30px; background: #0d3275; border-radius: 20px; display: inline-block; color: #fff; }
a.more i { margin-left: 6px; vertical-align: baseline; }

/* sloganBox */
#sloganBox{overflow:hidden;position:relative;padding:60px 0;color: #252525;}
#sloganBox ul{text-align:center;}
#sloganBox ul li{margin: 10px;padding: 55px 35px;width: calc((100%/3) - 90px);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;box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);}
#sloganBox ul li:first-child{
    margin-left: 0;
}
#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;margin-right: 0;}
#sloganBox ul li p{margin:0 auto 20px;width: 80px;height: 80px;display:block;padding: 19px;background-color: #eab946;border-radius: 50px 0 50px 0;}
#sloganBox ul li:hover p i{background:#fff;color:#2eb1a5;}
#sloganBox ul li h4{margin-bottom:10px;font-size: 24px;text-align:center;}
#sloganBox ul li article{margin:auto;text-align:center;font-size:16px;overflow:hidden;}

/* aboutBox */
#about{overflow: hidden;padding-bottom: 25px;}
#about section{
	background-repeat:no-repeat;
	background-position:0 100%;
	padding: 30px 0;
}
#about .about-wrap{
	/* background:url(/images/10/index-about-img.png)no-repeat 0 0; */
	width:50%;
	float: left;
	overflow:hidden;
}
#about .about-wrap article{
	/* width: calc(100% - 100px); */
	/* float: right; */
	/* margin-top: 15px; */
	line-height: 180%;
	color:#444444;
}
#about .about-wrap article h2{color: #313131;font-size: 40px;/* margin-bottom: 10px; */}
#about .about-wrap article h2 b{font-size: 85px;margin-left: 10px;color: #f7f7f7;font-weight: bold;font-family: 'Poppins', sans-serif;}
#about .about-wrap article h3{font-weight: normal;font-size: 17px;line-height: 200%;letter-spacing: 1px;margin-bottom: 25px;}
#about .about-wrap p{/* display: none; */font-weight: bold;color: red;font-size: 20px;}
#about .about-wrap p a{
	color:#fff;
	background: #eab107;
	display: inline-block;
	padding: 10px 50px;
	line-height: 110%;
	transition:all linear 0.3s;
	border-radius: 0;
}
#about .bgimg{width: 45%;float: right;}
#about #youtube{
	position:relative;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size: cover;
}
#youtube .UTwo{
	position:relative;
	padding-bottom:56.25%;
	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(255, 0, 0, 0.85);
	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%;	
}

/* InnerpageTxt */
#InnerpageTxt{
    padding: 80px 0;
    background-color: #f1f1f1;
    background-image: url(/images/09/content-bg2.png);
    background-repeat: repeat-x;
    background-position: 100% 300%;
    animation-name: bgm;
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-direction: alternate;
}
@keyframes bgm {
	0% { background-position:0 300%; }
	100% { background-position:100% 330%; }
}
#InnerpageTxt h3{
    text-align: center;
    font-size: 48px;
    line-height: 120%;
}
#InnerpageTxt p{
    text-align: center;
    font-size: 18px;
    margin: 15px auto;
    width: 60%;
}
#InnerpageTxt .contact-btn{
    text-align: center;
    font-size: 16px;
    margin-top: 41px;
}
#InnerpageTxt .contact-btn a{
    border: 1px solid #000;
    padding: 15px 30px;
    color: #313131;
    border-radius: 5px;
}

/* news */
#NewsBox{padding: 40px 0 0;}
#NewsBox .topic .topic-title h2{
    font-size: 40px;
    text-align: center;
}
#news li .border{margin: 20px 10px 50px 10px;}
#news li .border .photo a{
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
}
#news li .news-info{margin:20px;border-bottom: 1px solid #eaeaea;}
#news li:hover .news-info{border-bottom: 1px solid #d4d4d4;}
#news li .news-info .news-bottom{margin-top:10px}
#news li .news-info .news-bottom h4{color:#ff7b58;font-size:10pt}
#news li .news-info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom: 5px;text-align: center;font-weight: normal;}
#news li .news-info h3 a{color:#2b2b2b;font-size: 12pt;}
#news li .news-info p{font-size: 18pt;line-height:150%;color:#6b6b6b;margin-bottom:20px;text-align: center;}
#news li .readmore{text-align:right;position:relative}
#news li .readmore a{display:block;font-size:10pt;font-family:'Viga',sans-serif;padding-right:30px}
#news li .readmore a b{display:block;color:#fff;-webkit-text-fill-color:#fff;position:absolute;right:0;top:calc(50% - 10px);width:20px;height:20px;line-height:20px;border-radius:50%;text-align:center;font-size:8pt}
#news li .readmore:after{content:'';display:block;width:100%;height:1px;position:absolute;bottom:-15px;background:#d8d8d8;left:0;z-index:1}


/* NPBox */
#NPBox { overflow: hidden; position: relative; margin-top: 30px; background: url(/images/13/material-op60.png) #254899 center; }
#NPBox h2 , #bookBox h2 { margin-bottom: 15px; font-size: 25px; color: #e4aa2a; }

#NPBox .product { position: relative; }
#NPBox .product:before { position: absolute; width: 100%; height: 100%; background: url(/images/13/productBg.svg) no-repeat 0 bottom; background-size: 2000px auto; top: -20px; left: 0; content: ""; z-index: 10; }
#NPBox .product #productBox { position: relative; margin-top: 20px; padding: 30px; background-repeat: no-repeat; background-color: #fff; background-size: cover; border-radius: 0 0 20px 20px; box-shadow: 0 0 10px 5px rgba(0,0,0,.05); z-index: 11; }
#NPBox .product #productBox:before { position: absolute; width: 100%; height: 17px; background: url(/images/13/img-wave-shadow-outset.png) repeat-x left bottom; top: -17px; left: 0; z-index: 50; content: ""; }
#NPBox .product #productBox .pro-list p , #NPBox .product #productBox .pro-list h3 { margin: 10px; }
#NPBox .product #productBox .pro-list a.photo img ,
#NPBox #leftPhoto .box a.photo img ,
#bookBox .item .bookList ul li a.photo img { width: 100%; }
#NPBox .product #productBox .pro-list h3 , #NPBox #newBox h3 { height: 27px; -webkit-line-clamp: 1; }
#NPBox .product #productBox .pro-list h3 a { font-size: 18px; color: #333; }
#NPBox .product #productBox .pro-list .slick-list p.price { display: block; color: #3f3f3f; font-size: 18px; }
#NPBox .product #productBox .pro-list .slick-list p.price span.old { margin-right: 10px; font-size: 15px; text-decoration: line-through; color: #858585; }
#NPBox .product #productBox .pro-list .slick-list p.price b { font-size: 20px; margin: 0 2px 0 10px; color: #e42d2d; }
#NPBox .product #productBox .pro-list .slick-list p.price span.old b { font-size: 15px; font-weight: normal; margin: 0; color: #858585; }
#NPBox .product #productBox .readM { text-align: center; }

#NPBox .bgBox { position: absolute; top: 3%; right: 5%; animation: bgWhirligig-2 80s infinite linear; z-index: 1; }

#NPBox #newBox { position: relative; margin: 55px 0; width: 60%; z-index: 2; }
#NPBox #newBox p , #NPBox #newBox h3 , #NPBox #newBox a { margin-bottom: 10px; color: #fff; }
#NPBox #newBox h3 a { font-size: 18px; }
#NPBox #newBox p.describe { height: 50px; -webkit-line-clamp: 2; }
#NPBox #newBox .readM a { background: #f2b103; color: #694e14; }

#NPBox #leftPhoto { overflow: hidden; position: relative; z-index: 2; }
#NPBox #leftPhoto:before , #NPBox #leftPhoto:after { position: absolute; width: 100%; height: 9px; background: url(/images/13/header-white-wave.svg) left top repeat-x; bottom: 150px; left: 0; z-index: 1; content: ""; }
#NPBox #leftPhoto .workframe { z-index: 2; }
#NPBox #leftPhoto .box { margin: 15px 10px; float: left; width: calc((100% / 4) - 20px); }
#NPBox #leftPhoto:after { height: 150px; background: #fff; bottom: 0; }

/* bookBox */
#bookBox { margin-top: 50px; }
#bookBox h2 { text-align: center; color: #2b3f70; }
#bookBox .readM { text-align: center; }
#bookBox .item { overflow: hidden; margin-top: 20px; background: url(/images/13/material-op50.png) #f7f7f7 center; }
#bookBox .item > div , #bookBox .item .bookList ul li { float: left; width: 50%; }
#bookBox .item .bookList ul { overflow: hidden; }

#bookBox .item .bookList ul li { width:  calc(100% / 3); }
#bookBox .item .bookList ul li:nth-child(2n) { background:  #fff; }
#bookBox .item .bookList ul li a.photo { position: relative; background-size: cover; }
#bookBox .item .bookList ul li a font { position: absolute; padding: 0 10px; width: calc(90% - 20px); height: 36px; background: rgba(26, 37, 62, 0.7); display: block; text-align: center; line-height: 200%; font-size: 18px; color: #fff; left: 5%; bottom: 20px; -webkit-line-clamp: 1; }

/* page-form */
#page-form {padding: 0 0 50px;}
#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;display: inline-block;vertical-align: top;width: calc((100%/2) - 25px);margin: 10px;}
#page-form p.send{
    display: block;
    margin: 0 auto;
    width: 20%;
}
#page-form label {float: left;width: 100px;padding: 5px 0;}
#page-form span { float: right; width: calc(100% - 110px); 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% - 25px);margin-left: 5px;border-top-right-radius: 0;border-top-left-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0;padding-bottom: 10px;padding: 7px 8px;border: 1px solid #ccc;}
#page-form input#Checknum {width: 80px;margin-left: 15px;}
#page-form select {width: calc(100% - 1px);font-size: 16px;padding: 8px 10px;border-top-right-radius: 0;border-top-left-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0;-webkit-appearance: none;background-image: url(/images/13/arrow.png);background-repeat: no-repeat;background-position: 95% 50%;width: calc(100% - 7px);padding: 10px;background-color: rgb(255, 255, 255);padding: 8px 8px;border: 1px solid #ccc;}
#page-form p.send input {background: #e9b20a;color: #fff;text-align: center;width: 100%;padding: 10px 0;border-radius: 5px;font-size: 16px;outline: none;margin-top: 15px;}
#page-form h2 {text-align: center;margin-bottom: 10px;font-size: 40px;}
#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; }


/* transform */
@keyframes triangle { 0% , 100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes triangle-sm { 0% , 100%{ transform: translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes bgWhirligig { 0% { transform: rotate(360deg); } 100% { transform: rotate(0); } }
@keyframes bgWhirligig-2 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

@media screen and (max-width: 1440px) {
	
}
@media screen and (max-width: 1024px) {
	#aboutBox { overflow: hidden; }
	#bookBox .item > div { width: 100%; }
	#about .about-wrap article h2 b{font-size: 65px;}
	#news li .news-info p{font-size: 16pt;}
}
@media screen and (max-width: 960px) {
	#aboutBox .item.c1 , #aboutBox .item.c2 , #NPBox #newBox { width: 100%; }
	#aboutBox .item.c1 h3 , #aboutBox .item.c1 font { text-align: left; }
	#aboutBox .firstBox:before { width: 206px; top: 40px; bottom: auto; }
	#aboutBox .item.c2 .box:first-child { background-size: cover; }
	#aboutBox .item.c2 .box:first-child article { padding-top: 60px; width: calc(100% - 120px); background-color: rgba(255, 255, 255, 0.37); }
	#NPBox .bgBox { top: 0; }
	#NPBox #leftPhoto:before { bottom: 100px; }
	#NPBox #leftPhoto:after { height: 100px; }
	#sloganBox ul li {    padding: 30px 35px;    width: calc(100% - 90px);}
	#about .about-wrap, #about .bgimg {    width: 100%;    float: none;}
	#InnerpageTxt h3, #NewsBox .topic .topic-title h2, #page-form h2, #about .about-wrap article h2{    font-size: 35px;}
	#InnerpageTxt p{    width: 80%;    font-size: 16px;}
}
@media screen and (max-width: 480px) {
	#aboutBox .firstBox:before , #aboutBox .firstBox .iconBox { display: none; }
	#aboutBox .item.c2 .box , #aboutBox .item.c2 .box:nth-child(2) { width: 100%; }
	#NPBox #leftPhoto .box { width: calc((100% / 2) - 20px); }
	#bookBox .item .bookList ul li { width: calc(100% / 2); }
	#about .about-wrap article h2 b {    font-size: 30px;}
	#page-form p {    width: calc(100% - 25px);}
	#page-form p.send {    width: 40%;}
	#page-form p.send input{-webkit-appearance: none;  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
    -moz-appearance: none;     /* FireFox */
    appearance: none;}
}
@media screen and (max-width: 450px) {
}