.wow { animation-duration: 1.5s; animation-name: fadeInUp; }

#content {position: relative;z-index: 5;/* padding: 30px 0 0px; */}
#content .tri {position: absolute;width: 100%;background: url(/images/22/index_ban_tri.png) no-repeat;background-size: 100% 100px;left: 0;top: 0;transition: all .5s cubic-bezier(0,.4,.4,1) 1s;-ms-transition: all .5s cubic-bezier(0,.4,.4,1) 1s;-moz-transition: all .5s cubic-bezier(0,.4,.4,1) 1s;-webkit-transition: all .5s cubic-bezier(0,.4,.4,1) 1s;height: 100px;top: -90px;}

/* aboutFunc */
#aboutFunc {padding: 60px 0 0;background-image: url(/images/22/index_abbg.jpg);background-position: 50% 100%;background-size: cover;background-repeat: no-repeat;}
#aboutFunc .speBox {overflow: hidden;position: relative;min-height: 710px;}
#aboutFunc .youtubebox {position: absolute;padding: 70px 70px 70px 0;width: calc(34% - 0px);right: 260px;top: -50px;}
#aboutFunc #youtube {background: no-repeat 50% 0%;background-size: auto;animation-name: fadeInLeft;animation-name: newsbg;animation-duration: 4s;animation-iteration-count:infinite;animation-direction: alternate;}
@keyframes newsbg{
	0%{
		background-position: 95% 35%;
	}
	100%{
		background-position: 95% 90%;
	}
}
#youtube .UTwo {overflow: hidden;position: relative;padding: 30px 0 72.25%;height:0;}
#youtube .UTwo a { position: absolute; width: 100px; height: 100px; background: rgba(0, 0, 0, .6); border-radius: 50%; display: block; text-align: center; line-height: 100px; font-size: 30px; color: #dcdcdc; left: calc(50% - 50px); top: calc(50% - 50px); z-index:5; transition: all linear .3s; }
#youtube .UTwo iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#aboutFunc #about {position: relative;padding: 80px 0 90px;float: left;width: calc(50% - 420px);padding-left: 320px;}
#aboutFunc #about h2, #ssbanner .bigname h2.speBoxTitle,#NewsBox .topic .topic-title h2.speBoxTitle {line-height: 120%;font-size: 40px;font-weight: 600;text-transform: uppercase;font-family: 'Poppins', 'Noto Sans TC', sans-serif;margin-bottom: 10px;}
#aboutFunc #about .speBoxtitleBox,#ssbanner .bigname .speBoxtitleBox{line-height: 120%;font-size: 26px;letter-spacing: 2.2px;display: -webkit-box;display: -ms-flexbox;display: flex;margin-bottom: 30px;}
#ssbanner .bigname .speBoxtitleBox{color: #fff;}
#aboutFunc #about .speBoxtitleBox::before,#ssbanner .bigname .speBoxtitleBox::before {content: "";width: 13px;height: 30px;display: block;background: url(/images/22/titleBox-line.png);margin-right: 20px;}
#ssbanner .bigname .speBoxtitleBox::before {background: url(/images/22/titleBox-line.png);-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#aboutFunc #about .subBoxTitle {font-weight: 600;line-height: 120%;color: #720a00;font-size: 22px;text-transform: uppercase;margin-bottom: 10px;font-family: 'Poppins', 'Noto Sans TC', sans-serif;}
#aboutFunc #about .arts {padding-bottom: 20px;color: #444;font-size: 16px;line-height: 180%;letter-spacing: 0.5px;}
#aboutFunc #about .itemTitleBox .itemEnSubTitle strong{font-weight: 600;line-height: 120%;color: #5f5f5f;font-size: 24px;text-transform: uppercase;margin-bottom: 10px;font-family: 'Poppins', 'Noto Sans TC', sans-serif;}
#aboutFunc #about .itemTitleBox .itemEnSubTitle{margin: 20px 0 10px;}
#aboutFunc #about .itemTitleBox .itemEnSubTitleBox{display: flex;}
#aboutFunc #about .itemTitleBox p{padding-right: 22px;margin-top: 10px;font-size: 23px;letter-spacing: 0.5px;display: block;}
#aboutFunc #about .itemTitleBox p:first-letter{margin-right: 1px; font-size: 25px; line-height: 100%; color: #720400;}
#aboutFunc #about .more,.tit.wow.wrap .more {position: absolute;padding-bottom: 10px;bottom: 0;}
#aboutFunc #about .more a,.tit.wow.wrap .more a {position: relative;display: block;width: 130px;height: 38px;text-transform: uppercase;margin-top: 10px;font-family: 'Poppins', 'Noto Sans TC', sans-serif;font-weight: 400;color: #585858;font-size: 16px;line-height: 110%;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;overflow: hidden;z-index: 1;font-style: italic;padding: 18px 0px 0px 86px;}
#aboutFunc #about .more a:before,.tit.wow.wrap .more a:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #720400;
    z-index: -1;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
}
.tit.wow.wrap .more a:before{background-color: #717171;}
.tit.wow.wrap .more a{
    color: #ffffff;
    width: 150px;
}
#aboutFunc #about .more a:hover:before,.tit.wow.wrap .more a:hover:before {
    content: '';
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
}
#aboutFunc #about .more a:after,.tit.wow.wrap .more a:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 0px;
    display: block;
    width: 74px;
    height: 20px;
    background-image: url(/images/22/arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all .8s;
    -o-transition: all .8s;
    transition: all .8s;
    vertical-align: top;
}
#aboutFunc #about .more a:hover:after,.tit.wow.wrap .more a:after{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}

/* product */
#product { position: relative; padding: 90px 0 80px; background: no-repeat 50% / cover; }
#product .speBox { position: relative; }
#prolay .p-box { position: relative; margin: 20px; }
#prolay .p-box a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 4; }
#prolay .p-box .p-border { overflow: hidden; position: relative; }
#prolay .p-box .p-border:after { position: absolute; width: 80%; height: 100%; background: rgba(255, 255, 255, .3); display: block; left: 50%; top: 0; opacity: 0; z-index: 2; transition: all cubic-bezier(.49, .01, 0, 1) .7s; }
#prolay .p-box .p-border .photo { position: relative; background: #ccc no-repeat 50% / contain; z-index: 2; }
#prolay .p-box .p-border .photo img { width: 100%; }
#prolay .p-box .p-border .p-info { position: absolute; padding: 50px; max-width: calc(70% - 100px); color: #fbcd62; top: 15%; left: 15%; z-index: 3; opacity: 0; transition: all linear .4s; }
#prolay .p-box .p-border .p-info:after { position: absolute; width: 100%; height: 100%; background: url(/images/22/index_recommend_text_bg.jpg) 50% / auto; display: block; opacity: .9; left: -100%; top: 0; z-index: -1; transition: all linear .4s; }
#prolay .p-box .p-border .p-info h3 { font-size: 22px; line-height: 130%; font-weight: 400; }
#prolay .p-box .p-border .p-info .describe { margin: 20px 0; font-size: 15px; line-height: 150%; color: #d4a66b; }
#prolay .p-box .p-border .p-info .price { color: #d4a66b; }
#prolay .p-box .p-border .p-info .price span { margin-right: 15px; font-size: 13px; }
#prolay .p-box .p-border .p-info .price span.now { font-size: 17px; color: #fff; }

/* controller */
.controller {position: relative;overflow: hidden;z-index: 10;}


/* NewsBox */
#news li .readmore a b,#news li .readmore:before,#aboutFunc:after{background:-webkit-gradient(linear,left top,right top,color-stop(20%,#f93),color-stop(80%,#ff7166));background:-webkit-linear-gradient(left,#f93 20%,#ff7166 80%);background:linear-gradient(90deg,#f93 20%,#ff7166 80%)}
#news li .readmore a{background-color:#f93;background:-webkit-gradient(linear,left top,right top,color-stop(20%,#f93),color-stop(80%,#ff7166));background:-webkit-linear-gradient(left,#f93 20%,#ff7166 80%);background:linear-gradient(90deg,#f93 20%,#ff7166 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#news li .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative}
#news li .photo a img{width:100%}
#NewsBox{padding-bottom:80px;padding-top: 30px;position: relative;overflow: hidden;}

.controller:after {
    content: '';
    position: absolute;
    top: 0;
    right: -15%;
    width: 35.5%;
    height: 100%;
    background-color: #f9f9f9;
    z-index: 0;
    -webkit-transform: skew(
-18deg
) translateX(0);
    -ms-transform: skew(-18deg) translateX(0);
    transform: skew(
-18deg
)
    -webkit-transition: all cubic-bezier(0.16, 1.08, 0.38, 0.98) 0.8s;
    -o-transition: all cubic-bezier(0.16, 1.08, 0.38, 0.98) 0.8s;
    transition: all cubic-bezier(0.16, 1.08, 0.38, 0.98) 0.8s;
}
#NewsBox .topic .topic-title::before {
    content: '';
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 400px;
    background-image: url(/images/22/index_news_tri.png);
    background-repeat: no-repeat;
    background-position: 40% 10%;
    pointer-events: none;
}
#NewsBox .topic .topic-title h2.speBoxTitle{
    text-align: center;
    padding: 60px 0 0;
}
#NewsBox .topic .topic-title p{
    text-align: center;
    padding-bottom: 50px;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #720a00;
}
#news li{float:left;width: calc((100% - 46px) / 3);border: 1px solid #e5e5e5;margin: 0 10px;}
#news li:nth-child(3n-1){/* margin:0 20px; */}
#news li .border{padding-bottom: 30px;background-color: #fff;}
#news li .news-info{margin:20px}
#news li .news-info .news-bottom{margin-top:10px}
#news li .news-info .news-bottom h4{color: #720400;font-size: 13pt;margin-bottom: 10px;}
#news li .news-info .news-bottom h4 b{position: relative;padding: 0 18px;}
#news li .news-info .news-bottom h4 b:after {
    content: '';
    position: absolute;
    left: 4%;
    top: 45%;
    margin: -6px 0 0 -0.5px;
    width: 2px;
    height: 18px;
    background-color: #a30803;
}
#news li .news-info .news-bottom h4 b:before {
    content: '';
    position: absolute;
    left: 95%;
    top: 45%;
    margin: -6px 0 0 -0.5px;
    width: 2px;
    height: 18px;
    background-color: #a30803;
}
#news li .news-info .news-bottom h4 span{
    vertical-align: top;
}
#news li .news-info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:20px}
#news li .news-info h3 a{color:#2b2b2b;font-size:14pt}
#news li .news-info p{font-size: 11pt;line-height:150%;color:#6b6b6b;height:34pt;overflow:hidden;padding-top: 20px;position: relative;}
#news li .readmore{text-align:right;position:relative;display: none;}
#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 .news-info p:after{content:'';display:block;width:100%;height:1px;position:absolute;top: 5px;background:#d8d8d8;left:0;z-index:1;}


@media screen and (min-width:1025px) {
	#prolay .p-box:hover .p-border:after { width: 45%; left: 0; opacity: 1; }
	#prolay .p-box:hover .p-border .p-info:after { left: 0; }
	#prolay .p-box:hover .p-border .p-info { left: 0; opacity: 1; }
	#product .flytxt { position: absolute; bottom: calc(100% + 90px); font-size: 22px; right: 60px; }
	#product .titleSet { position: relative; display: inline-block; width: 248px; text-align: center; vertical-align: middle; }
	#product .titleSet .speBoxTitle { position: absolute; margin: -8px 0 0 -115px; padding-left: 15px; width: 280px; letter-spacing: 12px; text-align: center; line-height: 16px; font-size: .9375rem; color: #8c8c8c; top: 50%; left: 50%; text-transform: uppercase; transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); }
	#product .titleSet .subBoxTitle { display: inline-block; writing-mode: tb-rl; font-size: 30px; line-height: 110%; letter-spacing: .6em; vertical-align: top; text-align: center; text-align-last: justify; }
	#prolay { margin-left: -4px; width: calc(100% - 248px); display: inline-block; }
	#aboutFunc #about .more a:hover, .tit.wow.wrap .more a:hover{letter-spacing: 0.2px;color: #fff;}
#news li .news-info p:before{content:'';display:block;width:0;height:1px;position:absolute;top: 5px;z-index:2;left:0;transition:all linear .3s;background: #d8d8d8;}
#news li:hover .news-info p:before{width:100%;background: #720400;}
#NewsBox .webframe{
    max-width: 1140px;
}
.tit.wow.wrap .more{position: absolute;right: 0px;bottom: 0;}

}
@media screen and (max-width:1600px) {
	#youtube .UTwo a:hover { width: 110px; height: 110px; line-height: 110px; font-size:34px; left: calc(50% - 55px); top: calc(50% - 55px); }
	#aboutFunc #about {padding: 30px 0 90px;float: left;width: calc(50% - 250px);padding-left: 100px;}
	#aboutFunc .youtubebox  {background-attachment: fixed;padding: 40px 70px 70px 0;width: calc(35% - 0px);right: 120px;top: 0px;}
	#youtube .UTwo{padding: 106px 0 72.25%;}
	#aboutFunc .speBox{min-height: 600px;}
}
@media screen and (max-width:1280px) {
.tit.wow.wrap .more{position: absolute;right: -20px;bottom: -80px;}

}

@media screen and (max-width:1140px) {
	#aboutFunc #about {padding: 30px 0 90px;float: left;width: calc(50% - 250px);padding-left: 100px;}
	#aboutFunc .youtubebox  {background-attachment: fixed;padding: 40px 0px 30px 0;width: calc(40% - 0px);right: 120px;top: 0px;}
	#youtube .UTwo{padding: 190px 70px 37.25%;}
}
@media screen and (max-width:1024px) {
	#aboutFunc {padding: 0px 0;background-position: 90% 80%;}
	#aboutFunc .speBox { min-height: initial; }
	#aboutFunc .youtubebox {position: initial;width: calc(100% - 190px);float: left;margin: 0 70px;}
#content .tri{
    display: none;
}
#content{
    padding: 0;
}
#aboutFunc #youtube{
    background-size: 60%;
}
	#aboutFunc #about {padding: 50px 30px 90px;width: calc(100% - 60px);}
	#aboutFunc #about .speBoxTitle , #product .titleSet .speBoxTitle { font-size: 32px; }
	#aboutFunc #about .subBoxTitle , #product .titleSet .subBoxTitle a { margin: 0 0 30px; font-size: 16px; }
	#product .flytxt { text-align: center; font-size: 17px; line-height: 120%; color: #2d2c2c; }
	#prolay { margin-top: 10px; }
	#product .titleSet .speBoxTitle { text-align: center; }
	#product .titleSet .subBoxTitle { margin-top: 10px; text-align: center; }
	#product .titleSet .subBoxTitle a { margin-bottom: 20px; display: block; font-weight: 400; color: #696969; }
	#prolay .p-box .p-border:after { width: 45%; left: 0; opacity: 1; }
	#prolay .p-box .p-border .p-info:after { left: 0; }
	#prolay .p-box .p-border .p-info { left: 0; opacity: 1; }
	#freebox #freeboxlist >div { margin-right: 0; width: 100%; }
}
@media screen and (max-width:768px) {
	#prolay .p-box .p-border .p-info h3 { font-size: 18px; }
	#prolay .p-box .p-border .p-info { padding: 30px; max-width: calc(75% - 60px); }
	#prolay .p-box .p-border:after { width: 55%; }
	#prolay .p-box .p-border .p-info .describe { overflow: hidden; height: 46px; }
	#prolay .p-box .p-border .p-info .price span { display: block; }
	#freebox #freeboxlist .free { padding: 70px 50px; }
}
@media screen and (max-width:640px) {
	#aboutFunc .youtubebox {margin: 10px 15px;padding: 0px 0px 0px 0;width: calc(100% - 40px);}
#aboutFunc #youtube {
    background-size: 71%;
    background-position: 50% 40%;
}
	#aboutFunc #about .more { width: 50%; }
	#aboutFunc #about .more a { font-size: 17px; }
	#prolay .p-box .p-border .p-info { padding: 20px; max-width: calc(75% - 40px); }
	#prolay .p-box .p-border .p-info { position: initial; width: calc(100% - 40px); max-width: calc(100% - 40px); }
	#prolay .p-box .p-border:after { display: none; }
	#prolay .p-box { margin: 10px; }
#news li{width:calc(50% - 10px);margin:0 5px}
#news li:nth-child(3n-1){margin:0 5px}
#aboutFunc #about h2, #ssbanner .bigname h2.speBoxTitle, #NewsBox .topic .topic-title h2.speBoxTitle{
    font-size: 30px;
}
.controller:after{
    display: none;
}
}
@media screen and (max-width:480px) {
	#prolay .p-box { margin: 15px; }
	#prolay .p-box .p-border .p-info h3 { font-size: 17px; }
	#prolay .p-box .p-border .p-info .describe { margin: 10px 0; }
	#freebox #freeboxlist .free { padding: 50px 30px; }
	#freebox #freeboxlist .free h3 { font-size: 24px; }
#news li .news-info{margin: 20px;}
#news li .news-info h3 a{font-size:13pt}
#news li .news-info h3,#news li .news-info p{margin-bottom:10px}
#news li .border{
    padding-bottom: 10px;
}
}