.wrap {position: relative;z-index: 10;}
.wrap h4.stitle { margin-bottom: 10px; text-transform: uppercase; font-family: 'Rubik', sans-serif; font-weight: 300; font-size: 20px; color: #db4048; }
.wrap h2.title { margin-bottom: 30px; font-size: 40px; color: #222; }
.wrap p.more a { padding: 14px 40px; background: #ff575f; display: inline-block; color: #fff; }
.wrap p.more a span { margin-right: 30px; }

/* productBox */
#productBox  {margin-top: -140px;}
#productBox  .workframe{
    box-shadow: 0 0 10px rgb(0 0 0 / 0.25);
}
#productBox .bgTxt { position: absolute; width: 100%; font-weight: 700; text-align: center; font-family: 'Rubik', sans-serif; font-size: 10vw; color: #f1f1f1; z-index: 1; bottom: -8vw; left: 0; }
#productBox .list { position: relative; z-index: 2; }
#productBox .list .second{
    box-shadow: 0 0 10px rgb(0 0 0 / 0.25);
    padding: 40px;
}
#productBox .list .second p{
    text-align: center;
    margin-top: 20px;
}
#productBox .list .item {position: relative;background: #fff;width: 117px;margin: 0 auto;}
#productBox .list .item img { position: relative; width: 100%; z-index: 1; }
#productBox .list .item a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox .list .item .info { position: absolute; width: 100%; height: 100%; top: 150%; z-index: 2; }
#productBox .list .item .info h3 { margin: calc((100% - 117px) / 2) 0; padding: 0 15%; height: 61px; font-weight: normal; font-size: 20px; color: #fff; -webkit-line-clamp: 2; }
#productBox .list .item .info p { padding: 13px 20px; background: #fff; }

/* aboutBox */
#aboutBox {
    padding: 30px 0;
}
#aboutBox h2.title{
    font-size: 50px;
    text-align: center;
    font-weight: normal;
}
#aboutBox h2.title b{
    font-size: 50px;
    vertical-align: bottom;
    margin-left: 15px;
}
#aboutBox h3{
    text-align: center;
    font-size: 25px;
    font-weight: normal;
    letter-spacing: 10px;
    margin-bottom: 10px;
}
#aboutBox >div , #customBox .row {}
#aboutBox .info , #customBox .youtubeBox {}
#aboutBox .info p.arts {margin-bottom: 50px;color: #585858;width: 960px;margin: 0 auto 50px;text-align: center;font-size: 15px;}
#aboutBox article{
    font-size: 30px;
    text-align: center;
    position: relative;
}
#aboutBox article:after {
    width: 40%;
    height: 1px;
    background: #e0dddd;
    display: block;
    content: "";
    bottom: 22px;
    position: absolute;
    right: 0;
}
#aboutBox article:before {
    width: 40%;
    height: 1px;
    background: #e0dddd;
    display: block;
    content: "";
    bottom: 22px;
    position: absolute;
}
#aboutBox .info p.more , #aboutBox .info #SeoStarRating { margin-bottom: 15px; text-align: right; }

/* fakeNumber */
#fakeNumber{
    padding-top: 50px;
}
#fakeNumber ul{text-align:center}
#fakeNumber ul li{display:inline-block;width: calc(25% - 10px);color:#fff;text-align:center;position:relative;}
#fakeNumber ul li .eva{padding:50px 35px;margin:0 auto;display:inline-block;}
#fakeNumber ul li .eva p{line-height:100%;text-align: center;}
#fakeNumber ul li .eva p b{font-size: 80px;color: #196da9;line-height:100%;font-family: 'Roboto', sans-serif;font-weight: 400;}
#fakeNumber ul li .eva h2{text-align: center;font-size:18px;margin-top:10px;line-height:120%;color: #292727;font-weight: normal;}


/* customBox */
#customBox {position: relative;padding: 70px 0;font-size: 0;z-index: 2;overflow: hidden;}

#customBox:after{
	position: absolute;
	content: '';
	width: 54%;
	height: 531px;
	left: -160px;
	top: -170px;
	background-image: url(/images/33/worldabout.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	z-index: -3;
	animation-name:newsbg;
	animation-duration:3s;
	animation-iteration-count:infinite;
	animation-direction:alternate;    
}

#indexBox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.48);
    position: fixed;
    z-index: 999999;
    top: 0;
}
#indexBox #ask-wrap {
    margin: 0 auto;
    padding: 5px;
    width: 1000px;
    position: relative;
    top:0px;
}
#indexBox #ask-wrap #close-wrap {
    width: 29px;
    height: 25px;
    background: #d3d018;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    right: 104px;
    text-align: center;
    color: #f2f2f2;
    padding-bottom: 3px;
}
#indexBox #ask-wrap #close-wrap a{
    color: #1b1b1b;
}
#indexBox #ask-wrap article {
    overflow: hidden;
    background-color: #ffffffeb;
    margin: 114px;
    margin-top: 28px;
}

@keyframes newsbg{
	0%{
		background-position: 102% 5%;
	}
	100%{
		background-position: 100% 0;
	}
}
#customBox .workframe {z-index: 2;}
#customBox .row { vertical-align: top; }
#customBox .row ul {
    text-align: end;
    margin-top: 50px;
}
#customBox .row ul li {
    display: inline-block;
    width: calc((100%/3) - 205px);
}
#customBox .listBox ul li h3 {margin: 20px 0 10px;font-size: 20px;color: #1b1b1b;letter-spacing: 5px;}
#customBox .listBox ul li article {font-size: 15px;color: #464646;padding-right: 50px;}
#customBox .listBox .btn { text-align: right; }
#customBox .listBox .btn a { position: relative; color: #eee; text-align: center; }
#customBox .listBox .btn a#nextBtn:before { color: #6b6b78; content: "|"; }
#customBox .listBox .btn a span { position: absolute; width: 80px; height: 27px; display: block; text-align: center; line-height: 27px; top: 0; left: 0; -webkit-transform: translate(0) scale(0); transform: translate(0) scale(0); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }
#customBox .listBox .btn a i { text-align: center; width: 80px; height: 27px; font-size: 27px; -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }
#customBox .youtubeBox { position: relative; }
#customBox .youtubeBox:before { position: absolute; width: 40%; height: 100%; background: url(/images/33/dote.png) 0 0; top: -2vw; left: 90%; z-index: -1; opacity: 0.4; content: ""; }
#customBox .youtubeBox iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#customBox .youtubeBox .playBtn { position: absolute; width: 100px; height: 100px; background: #ff5860; border-radius: 50%; display: block; text-align: center; line-height: 100px; top: calc((100% - 100px) / 2); left: -50px; -webkit-animation: playbtn 1s infinite alternate ease-in-out; animation: playbtn 1s infinite alternate ease-in-out; }
#customBox .youtubeBox .playBtn i { font-size: 36px; color: #fff; }
#customBox .contact { position: absolute; padding-left: calc((100% - 1300px) / 2); width: 650px; height: 110px; background: #21bcd8; line-height: 110px; bottom: 0; left: 0; z-index: 3; }
#customBox .contact a { display: inline-block; }
#customBox .contact font { text-transform: uppercase; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 40px; color: #fff; }
#customBox .contact i { margin: 10px 0 10px 30px; font-size: 30px; color: #fff; -webkit-animation: arrowright 1s infinite alternate ease-in-out; animation: arrowright 1s infinite alternate ease-in-out; }

/* NewsBox */
#NewsBox {position: relative;padding: 80px 0 100px;background-repeat: no-repeat;background-position: 50% 90%;}
#NewsBox .workframe, #fakeNumber .workframe, footer .workframe{
    width: 1160px;
}
#NewsBox .bg , #bookBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }
#NewsBox h2.title {text-align: center;font-size: 35px;color: #fff;letter-spacing: 8px;}
#NewsBox h2.title:after {
    width: 30px;
    height: 4px;
    margin: 15px auto 0;
    background: #ffffff;
    display: block;
    content: "";
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#NewsBox #newList li {
    margin: 25px;
}
#NewsBox #newList li .info {background-color: rgb(255 255 255 / 0.2);padding: 40px;color: #fff;text-align: center;}
#NewsBox #newList li .info h3{
    font-size: 18px;
    text-align: center;
    letter-spacing: 3px;
}
#NewsBox #newList li .info span i{
    margin: 0 1px;
}
#NewsBox #newList li .info p{
    font-size: 15px;
    overflow: hidden;
    height: 70px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 10px;
}
#NewsBox #newList li .img a.photo img , #bookBox ul li a.photo img { width: 100%; }
#NewsBox #newList li .info p a { margin-right: 15px; padding: 2px 15px; background: #ffd9db; display: inline-block; color: #ff5860; }
#NewsBox #newList li .info p font { font-family: 'Rubik', sans-serif; color: #656565; }
#NewsBox #newList li .info h3 a { margin-top: 10px; height: 70px; font-weight: 500; font-size: 22px; color: #434343; -webkit-line-clamp: 2; }
#NewsBox p.more , #bookBox p.more { margin-top: 60px; text-align: center; }

/* NewsBox2 */
#NewsBox2{
    position: relative;
    padding: 5vw 0;
}
#NewsBox2 h2.title{
    display: flex;
    justify-content: center;
    position: relative;
}


#NewsBox2 .info{
    display: flex;
    flex-direction: column;
}
#NewsBox2 .info p{
    color: #909090;
    margin-top: 10px;
    border-left: #196daa 3px solid;
    padding-left: 8px;
    display: flex;
}
#NewsBox2 .info p a{
	font-size:14px;
}
#NewsBox2 .info p font{
    font-size: 14px;
}
#NewsBox2 .info a{
    color: #676767;
}
#NewsBox2 .info a.text-clamp
{
	 overflow: hidden;
	 margin: 10px 0;
	 height: 72px;
	 text-align: left;
	 text-overflow: ellipsis;
	 display: -webkit-box;
	 -webkit-line-clamp: 2;
	 -webkit-box-orient: vertical;
	 font-size: 18px;
	 width: 95%;
	 margin: 3px auto;
}
#NewsBox2 p.more{
    display: flex;
    justify-content: center;
}
#NewsBox2 p.more a{
    background: #196daa;
}
#NewsBox2 ul li{
	margin: 0px 7px;
}
/* bookBox */
#bookBox { position: relative; padding: 80px 0; background: #222; }
#bookBox h2.title { text-align: center; color: #fff; }
#bookBox ul li a.photo , #bookBox ul li h3 { margin: 0 20px; background-color: #fff; }
#bookBox ul li h3 a { padding: 15px 25px; height: 32px; font-size: 19px; color: #222; -webkit-line-clamp: 1; }

@keyframes playbtn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@-webkit-keyframes playbtn { 0%, 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } }
@keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }
@-webkit-keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }

@media screen and (max-width:1500px) {
	#customBox .contact { padding-left: calc((100% - 1280px) / 2); width: 640px; }
	#fakeNumber ul li .eva p b{}
}
@media screen and (max-width:1360px) {
	#customBox .contact { padding-left: calc((100% - 1160px) / 2); width: 580px; }
}
@media screen and (min-width:1281px) {
	#NewsBox{
    background-attachment: fixed;
}
	#productBox .list .item:hover img {}
	#productBox .list .item:hover .info { top: 0; }
	#customBox .listBox .btn a:hover span { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
	#customBox .listBox .btn a:hover i { -webkit-transform: rotate(0) scale(0); transform: rotate(0) scale(0); }
	#customBox .youtubeBox .playBtn:hover { background: #2c2a2a; }
	#NewsBox #newList li .info p a:hover { background: #ff5860; color: #fff; }
	#bookBox ul li:hover a.photo img { background: rgba(44, 44, 44, .6); }
}
@media screen and (max-width:1280px) {
	#customBox .row ul li{
    width: calc((100%/3) - 145px);
}
    #aboutBox article:before, #aboutBox article:after{
    width: 35%;
}
    #NewsBox .workframe, #fakeNumber .workframe, footer .workframe{
    width: 95%;
}
    #fakeNumber ul li .eva p b{
    font-size: 60px;
}
	#productBox .list .item .info { top: 0; }
}
@media screen and (max-width: 1024px) {
	#customBox { padding: 7vw 0; }
	#customBox:before { height: 100%; }
    
	#customBox .row ul li {
    width: calc((100%/3) - 85px);
}
	#customBox .youtubeBox { margin: 10px 0 0; width: auto; }
	#customBox .contact { padding-left: 5%; width: 85%; bottom: -20px; }
}
@media screen and (max-width: 980px) {
	#productBox .bgTxt { font-size: 15vw; bottom: -12vw; }
	#aboutBox {position: relative;}
	#aboutBox .aboutImg { position: absolute; width: 100%; height: 100%; display: block; left: 0; top: 0; z-index: 1; }
	#aboutBox .aboutImg a.photo { height: 100%; }
	#aboutBox .info { position: relative; margin: 0; width: 100%; display: block; z-index: 2; }
	#NewsBox #newList {margin: 0 auto;}
	#aboutBox .info p.arts{
    width: 90%;
}
    #customBox .row ul li{

    width: calc((100%/3) - 5px);
}
    #customBox .row ul li p{
    text-align: center;
}
    #customBox .row ul li h3 {
    text-align: center;
}
    #customBox .row ul li article{
    text-align: center;
    padding: 0 20px;
}
    #customBox:after{
    left: 50px;
    width: 665px;
    top: -210px;
}
    #customBox .row ul{
    margin-top: 280px;
}
    #aboutBox article:before, #aboutBox article:after{
    width: 20%;
}
    #fakeNumber ul li{
    width: calc(50% - 4px);
}
    #fakeNumber ul li .eva{
    padding: 10px 0;
}
}
@media (max-width: 768px) {
    #indexBox #ask-wrap article {
        margin: 40px 55px; /* 手機板改成較小的 margin */
        margin-top: 10px;
		width:650px;
    }
    #indexBox #ask-wrap #close-wrap {
    top: 3px;
    right: 285px;
}
}
@media screen and (max-width:640px) {
	#indexBox #ask-wrap article {
	margin: 40px 35px; /* 手機板改成較小的 margin */
	margin-top: 10px;
	width:550px;
}
	#indexBox #ask-wrap #close-wrap {
    top: 3px;
    right: 415px;
}
    #indexBox #ask-wrap {
    top:246px;
}
}
@media screen and (max-width:600px) {
	#productBox .list .item {}
	#indexBox #ask-wrap article {
	margin: 20px 65px; /* 手機板改成較小的 margin */
	margin-top: 10px;
	width:450px;
}
	#indexBox #ask-wrap #close-wrap {
    top: 3px;
    right: 475px;
}
}
@media screen and (max-width:500px) {
	#customBox .contact { height: 14vw; line-height: 14vw; }
	#customBox .contact font { font-size: 9vw; }
	#customBox .contact i { font-size: 8vw; }
	#NewsBox #newList { width: 100%; }
	#productBox{    margin: -30px;}
    #productBox .workframe{    width: 100%;    box-shadow: 0 0 10px rgb(0 0 0 / 0%);}
    #productBox .list .second{    box-shadow: 0 0 1px rgb(0 0 0 / 0.25);}
    #aboutBox h2.title, #aboutBox h2.title b{    font-size: 30px;    margin-bottom: 10px;}
    #aboutBox h3{    font-size: 20px;}
    #aboutBox article{    font-size: 20px;}
    #aboutBox article:before, #aboutBox article:after{    bottom: 16px;}
    #customBox:after{    left: -250px;}
    #customBox .row ul li{
    width: 100%;
    margin: 0 0 30px;
}
    #NewsBox h2.title{
    font-size: 30px;
}
    footer .workframe{
    width: 90%;
}
    #gotop{
    bottom: 65px;
    right: 15px;
}
	#indexBox #ask-wrap article {
	margin: 10px 20px; /* 手機板改成較小的 margin */
	margin-top: 10px;
	width:350px;
}
	#indexBox #ask-wrap #close-wrap {
    top: 3px;
    right: 625px;
}
}