.wrap { position: relative; background: #fff; z-index: 998; }
.wrap #wrapBox >div { position: relative; }
.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }
.wow {
    animation: fadeIn 1.5s both;
    -webkit-animation: fadeIn 1.5s both;
    animation-duration: 1s;
    -webkit-animation-duration: 2s;
}
/* contentBox */
#contentBox{ background-position: 50% 50%; background-image: url(/images/34/index-topBox-bg.jpg); background-repeat: no-repeat; background-size: cover; padding: 50px 0;}
#contentBox .webframe{
    width: 1160px;
    margin: 0 auto;
    text-align: center;
}
#contentBox .clearfix{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
  #contentBox .topItem{
    flex: 1;
    background: rgba(255, 255, 255, 0.85);
    position: relative;
    padding: 50px 0;
    text-align: center;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  #contentBox .topItem:nth-of-type(2)::before{
    content: '';
    width: 1px;
    height: calc(100% - 60px);
    background: #b2b2b2;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 1;
  }
  #contentBox .topItem h3{
    color: #111;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1.2px;
    margin-bottom: 25px;
    text-align: center;
  }
  #contentBox .telBox a{
    display: block;
    color: #393733;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    font-family: 'Roboto', sans-serif;
  }
  #contentBox .telBox a:hover{
  }
  #contentBox .telBox a i{
    font-size: 26px;
    display: inline-block;
    margin-right: 5px;
  }
  #contentBox .storeBox .btn{
    text-align: center;
}
  #contentBox .storeBox .btn a{
    background: #ffa60f;
    width: 225px;
    height: 45px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    display: inline-block;
    font-size: 14px;
    line-height: 45px;
    letter-spacing: 1.5px;
    text-align: center;
    position: relative;
    padding: 0;
    z-index: 5;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  #contentBox .storeBox .btn a:hover{
    background: #393733;
  }
/* more */
p.more { padding: 20px 0; text-align: center; }
p.more a { position: relative; overflow: hidden; padding: 0 30px; display: inline-block; align-items: center; border: #d3d3d3 solid; border-width: 0 0 1px 1px; letter-spacing: .06em; line-height: 30px; transition: 1.2s ease 1.8s; transform: translateX(0%); }
p.more a:before { position: absolute; width: 100%; height: 100%; background: #000; top: 0; left: 0; transform: translateX(-140%) skewX(63deg); transition: .4s cubic-bezier(.23,1,.32,1); content: "" }
p.more a:after { position: absolute; width: 85%; height: 1px; background: #d3d3d3; display: block; top: 0; left: 0; content: ""; }
p.more a font { position: relative; padding: 7px 0; display: inline-block; color: #000; z-index: 2; }
p.more a span { position: relative; margin-left: 70px; width: 100px; height: 1px; background: #000; display: inline-block; transition: transform .4s cubic-bezier(.23,1,.32,1),background .4s ease; transform-origin: center left; }
p.more a span:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 6px; border-color: transparent transparent transparent #000; display: block; right: 0; top: -3px; content: ""; }

/* bgTxt */
.bgTxt { position: absolute; z-index: 1; }
.bgTxt.stitle { -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; font-size: 70px; }
.bgTxt.title { width: 100%; text-align: right; font-size: 140px; color: #edf1f3; }

/* NewsBox */
#NewsBox , #productBox { padding-bottom: 5vw; }
#NewsBox ul , #productBox .wall { position: relative; margin-bottom: 0; padding: 7vw 0 0; display: block; font-size: 0; z-index: 2; }
#NewsBox ul li { position: relative; text-align: right; }
#NewsBox ul li .img { position: relative; padding: 0 10px 10px 0; width: calc(60% - 10px); display: inline-block; }
#NewsBox ul li .img:before { position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); background: url(/images/34/img-bgline.png); top: 10px; left: 10px; -webkit-animation: newimg 1s linear infinite; animation: newimg 1s linear infinite; content: ""; }
#NewsBox ul li .img a.photo { transform-origin: center top; transform: translate3d(0,0,-300px) rotateZ(-3deg) rotateY(30deg) rotateX(-15deg); transition-property: transform,opacity; transition-duration: 3s,.5s; transition-timing-function: cubic-bezier(.755,.05,.855,.06),ease; opacity: 0; }
#NewsBox ul li.slick-current .img a.photo { transform: translate3d(0,0,0) rotateZ(0deg) rotateY(0deg) rotateX(0deg); transition: transform 1s cubic-bezier(.23,1,.32,1) .2s,opacity .6s ease .2s; opacity: 1; }
#NewsBox ul li .info p a { padding: 2px 15px; background: #000; display: inline-block; color: #fff; vertical-align: middle; }
#NewsBox ul li .info p font { margin-left: 10px; display: inline-block; }
#NewsBox ul li .info h3 { margin: 10px 0; }
#NewsBox ul li .info h3 a { height: 60px; font-size: 18px; color: #000; -webkit-line-clamp: 2; }
#NewsBox .btn { position: absolute; left: calc(35% - 80px); bottom: 10px; z-index: 10; }
#NewsBox .btn a { margin: 0 10px; color: #000; }
#NewsBox p.more { margin-top: 50px; }

/* productBox */
#productBox .bgTxt.stitle { top: -4vw; z-index: 3; }
#productBox .producTitle{
    text-align: center;
    font-family: 'Noto Sans TC', sans serif;
    font-size: 40px;
    margin-top: 60px;
    color: #ffa60f;
}
#productBox .my-element{
    text-align: center;
    font-size: 70px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 130%;
    color: #393733;
}
#NewsBox ul , #productBox .wall { padding: 5vw 0 0; }
#productBox .wall-column { width: calc(100% / 3); display: inline-block; box-sizing: border-box; }
#productBox .article {position: relative;margin: 15px 10px;background: #fff;}
#productBox .article .imgBox {position: relative;overflow: hidden;border-radius: 15px;}
#productBox .article .imgBox img{width:100%}
#productBox .article .imgBox article {position: absolute;width: 100%;background: #fff;color: #777070;bottom: -99px;z-index: 2;overflow: hidden;}
#productBox .wall-column .article:hover .imgBox article { bottom: 0; }
#productBox .article .imgBox article p {
    display: block;
    float: left;
    width: 50%;
    background: #393733;
}
#productBox .article .imgBox article p:last-child{
    background: #ffa60f;
}
#productBox .article .imgBox article p a{
    display: block;
    text-align: center;
    padding: 12px 0;
    color: #fff;
    position: relative;
}
#productBox .article .imgBox article p a:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255,255,255,0.5);
    width: 60px;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .5;
    -webkit-filter: blur(30px);
    filter: blur(30px);
    -webkit-transform: translateX(-100px) skewX(
-15deg
);
    -ms-transform: translateX(-100px) skewX(-15deg);
    transform: translateX(-100px) skewX(
-15deg
);
}
#productBox .article .imgBox article p a:hover:before{
    -webkit-transform: translateX(300px) skewX(
-15deg
);
    -ms-transform: translateX(300px) skewX(-15deg);
    transform: translateX(300px) skewX(
-15deg
);
    opacity: 0.6;
    -webkit-transition: .7s;
    -o-transition: .7s;
    transition: .7s;
}
#productBox .article .info { position: relative; margin-top: -15px; padding: 0 20px 15px; z-index: 9; }
#productBox .article .info p span { display: inline-block; color: #d80707; }
#productBox .article .info p span.old { margin-right: 10px; color: #8f8f8f; }
#productBox .article .info h3 { margin: 20px 0; height: 30px; font-weight: 400; font-size: 18px; -webkit-line-clamp: 1; }

/* aboutBox */
#about{
    position:relative;
    z-index: 3;
}
#about .about-bg{
    width: 75%;
    height: 100%;
    background: #eee;
    position: absolute;
    left: 0px;
    top: 0px;
    animation-name: fadeInLeft;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome, #about {
		background-attachment:initial;
    }
}

.abbg{
	overflow: hidden;
	width: 55%;
	margin-right: 5%;
	padding: 177.5px 0;
}
#about .about-box{position:relative;width: 1440px;margin: 0 auto;}
#about #indexyoutube{
    display: block;
    width: 545px;
    right: -10px;
    top: 15px;
    z-index: 54;
    position: absolute;
}
/**for u2**/
.UTwo{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.UTwo a{
	display: block;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border-radius: 50%;
	background: rgba(255, 5, 5, 0.6);
    position: absolute;
    z-index: 5;
    color: #dcdcdc;
    font-size: 30px;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
	transition:all linear 0.3s;
}
.UTwo a:hover{
    width: 110px;
    height: 110px;
    line-height: 110px;
    left: calc(50% - 55px);
    top: calc(50% - 55px);
	font-size: 34px;
}
.UTwo iframe ,
.UTwo object ,
.UTwo embed{position:absolute;top:0;left:0;width:100%;height:100%;}
#about-wrap{float: left;width: 250px;}
#about-wrap h2{color: #333;font-size: 32px;font-weight: 500;line-height: 1.5;margin: 0px 0px 30px;letter-spacing: 5px;font-family: 'Noto Sans TC', sans serif;}
#about-wrap h2 b{margin-left: 20px;font-weight: normal;}

#about-wrap h3{
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.5;
    font-family: 'Roboto', sans-serif;
    position: relative;
    z-index: 1;
    color: #aaa;
    text-transform: uppercase;
    font-weight: 500;
}
#about-wrap article{
	color:#2a2a2a;
	font-size:18px;
	margin: 50px 0 30px;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff;
	line-height: 150%;
	font-weight: bold;
}
#about-wrap p .more{
	background-image: url(/images/08/index-about-more.png);
	background-repeat: repeat-x;
	background-position: 50% 50%;
	color: #fff;
	display: inline-block;
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 18px;
	padding: 0 10px;
}
#about-right{
    float: right;
    width: calc(100% - 320px);
    margin-top: 55px;
}
#about-right p{
    font-size: 16px;
    color: #333;
    letter-spacing: 3px;
    font-weight: 600;
    line-height: 2;
    margin-bottom: 18px;
    margin-top: 0px;
}
#about-right article{
    font-size: 15px;
    line-height: 200%;
    text-align: justify;
}

/* bookBox */
#bookBox { padding: 50px 0 50px calc((100% - 1100px) / 2); font-size: 0; }
#bookBox .row { position: relative; width: 50%; display: inline-block; z-index: 2; }
#bookBox #customBox .bgTxt.stitle { z-index: 2; }
#bookBox #customBox ul { position: relative; padding: 0 10% 0 20%; z-index: 3; }
#bookBox #customBox ul li h3 { font-size: 40px; }
#bookBox #customBox p.more a { border-color: #000; }
#bookBox #customBox p.more a:after { background: #000; }
#bookBox #BookList ul { overflow: hidden; }
#bookBox #BookList ul li { position: relative; margin-bottom: 1px; float: left; width: 25%; }
#bookBox #BookList ul li:nth-child(6n) { width: 50%; }
#bookBox #BookList ul li a.photo { margin-right: 1px; }
#bookBox #BookList ul li h3 { position: absolute; padding: 5px 20px; width: calc(100% - 41px); background: rgba(0, 0, 0, .7); left: 0; bottom: 0; }
#bookBox #BookList ul li h3 a { height: 30px; color: #fff; text-align: center; -webkit-line-clamp: 1; }

/* Extra-setting */
#Extra-setting{background: #1a1a1a}
#Extra-setting .workframe{display: flex;flex-wrap: wrap;padding:160px 0px 110px;}
#Extra-setting .item{overflow: hidden;}
#Extra-setting .item .item-icon{padding: 0 15px;}
#Extra-setting .item .item-icon img{width: 170px;height: 160px;}
#Extra-setting .item .item-info{
    float: left;
    width: calc((100%/4) - 100px);
    padding: 50px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 50%);
}
#Extra-setting .item .item-info .item-title{margin-bottom: 10px;color: #ffa60f;font-size: 20px;font-weight: bold;letter-spacing: 2px;font-family: 'Noto Sans TC', sans serif;}
#Extra-setting .item .item-info .item-descript{color: #888888;font-size: 14px;line-height: 170%;text-align: justify;overflow: hidden;height: 70px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}


@keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } }
@-webkit-keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } }


@media screen and (max-width: 1440px) {
#about .about-box{width:90%}
}
@media screen and (min-width: 1281px) {
	p.more a:hover { border-color: #000; }
	p.more a:hover:before { transform: translateX(0) skewX(0); }
	p.more a:hover:after { background: #000; }
	p.more a:hover font { color: #fff; }
	p.more a:hover span { background: #fff; transform: scale(1.1); }
	p.more a:hover span:after { border-color: transparent transparent transparent #fff; }
}
@media screen and (max-width: 1280px) {
	#aboutBox .imgs , #bookBox .row { width: 100%; }
	#aboutBox .imgs .list { height: 100vw; }
	#aboutBox .info { padding: 70px 15%; width: 70%; background: rgba(242, 248, 250, .7); }
	#aboutBox:before { opacity: 0; }
	#aboutBox p.more a:after { background: #000; }
	#aboutBox p.more a { border-color: #000; }
	#bookBox { padding: 50px 5%; font-size: 0; }
	#bookBox #customBox ul { padding: 0 0 0 130px; }
	#bookBox #BookList { padding: 50px 0 20px; }
	#contentBox .webframe{width: 90%;}
}
@media screen and (max-width: 1024px){
#Extra-setting .item .item-info{
    width: calc((100%/3) - 100px);
}
	.abbg{    padding: 50px 0;}
	#about-wrap{float: none;    width: 100%;}
	#about-right{float: none;    width: 100%;}
	#about #indexyoutube {    width: 450px;    right: -50px;}
}
@media screen and (min-width: 981px) {
	#NewsBox ul li .info { position: absolute; width: 39%; left: 0; bottom: 20%; }


	#contentBox{background-attachment: fixed;}
}
@media screen and (max-width: 980px) {
	.bgTxt.stitle { position: relative; font-size: 10vw; -webkit-writing-mode: inherit; writing-mode: inherit; }
	.bgTxt.title { display: none; }
	#NewsBox ul li { text-align: center; }
	#NewsBox ul li .img { width: calc(80% - 10px); }
	#NewsBox ul li .info { margin-top: 20px; width: calc(80% - 10px); display: inline-block; }
	#NewsBox .btn { left: auto; right: 0; }
	#productBox .bgTxt.stitle { padding: 6vw 0 0; top: 0; }
	#productBox .wall-column { width: 50%; }
	#aboutBox .info .title { font-size: 8vw; }
	#aboutBox .info .stitle { font-size: 5vw; }
	#bookBox #customBox ul { padding: 0; }
	#bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: calc(100% / 3); }
	#Extra-setting .item .item-info{
    width: calc((100%/2) - 100px);
}
	#about #indexyoutube {
    width: 280px;
    right: -30px;
}
	.abbg {
    width: 95%;
}
	#about .about-bg {
    width: 273px;
    height: 255px;
}
	#contentBox .clearfix {
    display: block;
}
	#contentBox .telBox, #contentBox .topItem:nth-of-type(2):before{display: none;}
	#productBox .my-element{font-size: 40px;}
	#productBox .producTitle{font-size: 28px;}
}
@media screen and (max-width: 680px) {
	#productBox .wall { margin: auto; width: 80%; }
	#productBox .wall-column { width: 100%; }
	#aboutBox .imgs .list { height: 180vw; }
	#Extra-setting .item .item-info{
    width: calc(100% - 60px);
    padding: 30px;
}
}
@media screen and (max-width: 500px) {
	#NewsBox .btn { bottom: -10px; }
	#productBox .my-element{font-size: 28px;}
	#bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: 50%; }
	#bookBox #BookList ul li:nth-child(3n) { width: 100%; }
	    #Extra-setting .workframe{padding: 40px 0px;}
    #Extra-setting .item .item-info .item-title{font-size: 16px;}
    #Extra-setting .item .item-info .item-descript{font-size: 14px;}
    #about #indexyoutube {    width: 190px;}
    #contentBox .topItem h3{padding: 0 40px;}
    #productBox .producTitle{font-size: 20px;}
}
@media screen and (max-width: 450px) {
	#productBox .wall { width: 100%; }
	#aboutBox .info { padding: 10vw 5vw; width: 90vw; }
}