1#aboutNews{padding: 70px 0;position: relative;}
#aboutNews:after {position: absolute;content: 'ABOUT';left: -280px;top: -65px;color: rgba(218, 218, 218, 0.3);font-size: 300px;letter-spacing: 15px;font-family: 'Anton', sans-serif;transform: rotate(-90deg) translateX(-50%);z-index: -1;}
#newsBox ,
#aboutBox{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-ms-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;}
#newsBox .bd{overflow: hidden;}
#newsBox ul li{}
#newsBox ul li > div{}
#newsBox ul li .info{float:right;width:65%;}
#newsBox .border{overflow:hidden;position:relative;padding:20px 0 20px 20px;border-bottom:1px solid rgba(255,255,255,0.1)}
#newsBox a{display:block;position:absolute;width:100%;height:100%;left:0;top:0;z-index:2;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out}
#newsBox .news-info{overflow:hidden;font-size:11pt}
#newsBox .news-info:after{content:'>';display:block;position:absolute;right:20px;bottom:calc(50% - 15px);width:30px;height:30px;text-align:center;border-radius:50%;background:rgba(255,255,255,0.1);line-height:30px;font-size:8pt;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;color:#e1dcb1}
#newsBox .news-info .news-bottom{float:left;overflow:hidden;width:217px}
#newsBox .news-info h3{float:left;font-weight:400;font-size:1rem;width:calc(100% - 280px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#newsBox .news-info p{float:left;color:#75a4ba}
#newsBox .news-info .catalog{line-height:150%;float:left;background:rgba(255,255,255,0.2);padding:0 8px;border-radius:5px;width:80px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 20px;color:#a7ccd2}

#newsBox ul li .info h4 a ,
#newsBox ul li .info article ,
#productBox ul li .info h4 a ,
#productBox ul li .info article{overflow:hidden;height: 30px;font-size:18px;color: #6b6b6b;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
#newsBox ul li .info article{margin-top:20px;height:72px;line-height:180%;font-size:14px;color:#777;-webkit-line-clamp:3;}
#newsBox p{}
#newsBox p a{display:inline-block;color:#3ca18e;}
#aboutNews {position: relative;overflow: hidden;}
#aboutBox{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-ms-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight;}
#aboutBox h3{overflow:hidden;position:relative;margin-bottom: 20px;font-size: 30px;}
#aboutBox h3 b{margin-left:10px;font-size:14px;color:#38d0c2;}
#aboutBox #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#youtube .UTwo{position:relative;padding-bottom: 81.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(0, 0, 0, 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;}
#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%;}
#aboutBox article{overflow: hidden;position: relative;}
#aboutBox article .left{float: right;width: calc(50% - 50px);margin-left: 50px;position: absolute;right: 0;top: 0;}
#aboutBox article .right{float: left;width: 30%;margin-left: 350px;position: relative;padding: 60px 0;z-index: 5;}
#aboutBox article:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 110vh 200px 0 0;
    border-color: rgb(255 255 255) transparent transparent;
    position: absolute;
    right: calc(50% - 250px);
    top: 0;
}
#aboutBox article .right .arts{font-size: 16px;line-height: 180%;}
#aboutBox article p.more{background-color: #343041;margin-top: 30px;display: inline-block;}
#aboutBox article p.more:hover{background-color: #c8a45d;}
#aboutBox article p.more a{color: #ffffff;padding: 10px 60px;display: block;}
#aboutNews .line{margin:70px 0 0;float:left;width:100%;border-top:1px solid #eee;text-align:center;}
#aboutNews .line i{position:relative;width:33px;height:33px;background:#fff;display:inline-block;border:1px #ddd solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;line-height:35px;color:#ddd;top:-17px;}
#productBox{overflow:hidden;width:100%;padding:50px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#productBox section{width: 1440px;}
#productBox h3.tit ,
#book h3.tit{text-align:center;font-size: 30px;font-weight:700;margin-bottom: 20px;}
#productBox .bd{overflow:hidden;padding: 25px 10px;}
#productBox .slick-prev{left:calc(50% - 40px);top:calc(100% + 40px);z-index:9;width:40px;height:40px;}
#productBox .slick-next{right:calc(50% - 40px);top:calc(100% + 40px);z-index:9;width:40px;height:40px;}
#productBox .slick-prev:before, #productBox .slick-next:before{color: #229cdd;font-size:26px;}
#productBox >.more{text-align:center;margin-top:30px;overflow:hidden;}
#productBox .more a{display:inline-block;background:rgba(46, 177, 165, 0.79);color:#fff;padding:7px 20px;border-radius:5px;border:1px solid #108076;transition:all ease-in-out 0.3s;}
#productBox .tempWrap{margin:auto;}
#productBox ul li{margin: 0 10px 20px;display: inline-block;width: calc((100%/2) - 25px);}
#productBox ul li > div{}
#productBox ul li .productPhoto{overflow:hidden;}
#productBox ul li .productPhoto .photo ,


#adBox .list .photo{}
#productBox ul li:hover .productPhoto a.photo ,
#productBox ul li .info{}
#productBox ul li .info{
    padding: 20px;
    background: whitesmoke;
    display: flex;
    flex-direction: column;
}
#productBox ul li .info h4 a{margin-bottom:10px;color: #229cdd;font-size: 23px;}
#productBox ul li .info article{height:45px;font-size:14px;-webkit-line-clamp:2;}
#productBox ul li .info p.price{overflow:hidden;height:24px;}
#productBox ul li .info p.price span{float:right;color:#094b45;font-size:16px;}
#productBox ul li .info p.price span b{margin:0 3px;}
#productBox ul li .info p.price span.old{float:left;color:#7e7e7e;text-decoration:line-through;font-size:12px;}
#productBox ul li .info p.price span.old b{}
#productBox ul li .info a.more{color: #56acdb;padding: 5px 5px;margin: 16px 0 3px;}
#productBox .arrow{text-align:center;}
#productBox .arrow a{margin:10px 5px;width:40px;height:40px;display:inline-block;border:1px #ddd solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;line-height:33px;color:#ddd;font-size:20px;}
#productBox .arrow a:hover{border-color:#2eb1a5;color:#2eb1a5;}
#sloganBox{overflow:hidden;position:relative;padding:60px 0;}
#sloganBox {background-image: url(/images/12/content-bg2.png);background-repeat: repeat-x;background-position: 50% 0%;animation-name: bgm;animation-timing-function: linear;animation-duration: 8s;animation-iteration-count: infinite;animation-play-state: running;animation-direction: alternate;}
@keyframes bgm {
 0% { background-position:50% 90%; }
 100% { background-position:50% 170%; }
}
#sloganBox h3{text-align: center;font-size: 30px;margin-bottom: 10px;}
#sloganBox h6{text-align: center;font-size: 18px;font-weight: normal;width: 60%;margin: 0 auto 50px;}
#sloganBox ul{text-align:center;width: 80%;margin: 0 auto;}
#sloganBox ul li{margin: 0 20px;display:inline-block;width: calc((100%/4) - 45px);-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-ms-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;vertical-align:top;}
#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;}
#sloganBox ul li:nth-child(4){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;-ms-animation-delay:1.5s;-o-animation-delay:1.5s;animation-delay:1.5s;}
#sloganBox ul li p i{margin:0 auto 20px;width:100px;height:100px;display:block;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;line-height:100px;font-size:40px;box-shadow: 0 0 5px rgb(0 0 0 / 0.15);}
#sloganBox ul li:hover p i{background:#fff;color: #c8a45d;}
#sloganBox ul li h4{margin-bottom:10px;font-size:18px;text-align:center;}
#sloganBox ul li article{margin:auto;width:80%;height:65px;text-align:center;font-size:16px;color:#fff;overflow:hidden;}
#adBox{margin:30px 0;text-align:center;}
#adBox .list{overflow:hidden;margin:0 1%;width:22%;display:inline-block;-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-ms-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig;}
#adBox .list:nth-child(2){-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-ms-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;}
#adBox .list:nth-child(3){-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-ms-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;}
#adBox .list:nth-child(4){-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-ms-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig;}
#bookBox{padding-top:50px;background-repeat:no-repeat;background-position:50% 100%;background-size:cover;}
#book h3.tit{margin:0;}
#book >span{text-align:center;display:block;margin:0 auto 40px;}
#book >span a{color:#3d3d3d;}
#bookBox .bookSli .box{position:relative;}
#bookBox .bookSli .box .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#bookBox .bookSli .box .photo a img{width:100%;}
#bookBox .bookSli .box .info{width:calc(100% - 100px);position:absolute;left:30px;bottom:30px;background:rgba(255, 255, 255, 0.46);padding:20px;}
#bookBox .bookSli .box .info h3 a{font-size:20px;line-height:110%;color:#000;}
@media screen and (min-width:1281px){#productBox .more a:hover{background:rgb(27, 150, 139);}
#newsBox p a:hover,
#aboutBox article p.more a:hover,
#productBox ul li .info a.more:hover{}
}
@media screen and (min-width:1025px){
#newsBox .border:hover .news-info:after{right:10px}
#newsBox .border:after{content:'';display:block;width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(255,255,255,0.05);transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1)}
#newsBox .border:hover:after{transform:scale(1,1);transform-origin:left center 0}
}
@media screen and (max-width:1680px){
#aboutBox article .right:after {    right: -230px;}
#youtube .UTwo {padding-bottom: 90.25%;}
}
@media screen and (max-width:1440px){
#productBox section {    width: 90%;}
#aboutBox article .right{
    margin-left: 290px;
    width: 50%;
}
#youtube .UTwo{
    padding-bottom: 99.25%;
}
#aboutBox article:after{
    right: calc(50% - 440px);
    width: 190px;
}
}
@media screen and (max-width: 1366px){
#youtube .UTwo {
    padding-bottom: 104.25%;
}
#aboutNews:after {}
}
@media screen and (max-width:1280px){#youtube .UTwo{
    padding-bottom: 112.25%;
}
}
@media screen and (max-width:1024px){
#aboutNews:after {top: initial;transform: unset;left: 0;bottom: 85px;}
@keyframes bgm {
 0% { background-position:50% 70%; }
 100% { background-position:50% 100%; }
}
#aboutBox article .left{width: calc(25% - 50px);}
#aboutBox article .right{
    margin-left: 50px;
    width: 70%;
}
#aboutBox article:after{
    display: none;
}
#youtube .UTwo{
    padding-bottom: 332.25%;
}
}
@media screen and (max-width:768px){#newsBox ,
#aboutBox{margin:0 auto 50px;float:none;width: 90%;}
#productBox ul li{
    margin: 0 0 20px;
    width: 100%;
}
#aboutNews .line{margin:40px 0 0;}

#aboutBox article .left{
    position: relative;
    margin-top: 40px;
}
#youtube .UTwo{
    padding-bottom: 62.25%;
}
#aboutBox article .left, #aboutBox article .right {    float: none;    width: 100%;    margin-left: 0;}
#aboutBox article .right{padding-top: 20px;}
}

@media screen and (max-width:640px){#bookBox .bookSli .box .info h3 a{font-size:17px;}
#bookBox .bookSli .box .info p{font-size:12px;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#bookBox .bookSli .box .info{width:calc(100% - 40px);left:10px;bottom:10px;padding:10px;}
}
@media screen and (max-width:480px){#newsBox ,
#aboutBox{width:100%;margin-bottom: 0;}
#aboutNews:after{    font-size: 120px;    bottom: 20px;}
#productBox h3.tit, #book h3.tit {    margin-bottom: 0;}
#productBox ul li{width:50%;}
#adBox .list{margin:10px 1%;width:47%;}
#sloganBox ul li{    width: calc((100%/2) - 25px);    margin: 10px;}
#sloganBox h6{    width: 100%;    font-size: 16px;    margin: 0 auto 30px;}
@keyframes bgm {
 0% { background-position:50% 100%; }
 100% { background-position:50% 170%; }
}
#aboutNews{
    width: 90%;
    margin: 0 auto;
}
#aboutBox article .left{
    margin-top: 20px;
}
#sloganBox ul{
    width: 100%;
}
}
@media screen and (max-width:450px){#productBox ul li{width:100%;}
}