@import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Italianno|Nothing+You+Could+Do&display=swap');
.wrapper{width: 100%;overflow: hidden;}
/*小廣告*/
#ssbanner{padding: 40px 0px;margin-bottom: 50px;background: #fbf8f0;}
#ssbanner .container{width: 1115px;}
#ssbanner .ssbanner-item{margin: 0 15px;background-size: 100% auto;background-position: center;background-repeat: no-repeat;}
#ssbanner .ssbanner-item a{display: block;position: relative;transition: ease .3s;}
#ssbanner .ssbanner-item a:hover{background: rgba(121, 85, 26, 0.5);}
#ssbanner .ssbanner-item .title{position: absolute;padding: 15px; width: 100%; top: 50%;transform: translateY(-50%); text-align: center;color: #fff;opacity: 0;transition: ease .3s;}
#ssbanner .ssbanner-item a:hover .title{opacity: 1;}
#ssbanner .slick-slider{margin-bottom: 0px;background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
#ssbanner .arrow{display: block;position: absolute;top: 50%;height: 20px;width: 20px;cursor: pointer;opacity: .5;transition: ease .3s;}
#ssbanner .arrow:hover{opacity: 1;}
#ssbanner .prev{left: 0px; transform: translateY(-50%); margin-left: -35px;background: url(/images/27/ico_arrow_prev.svg) no-repeat;}
#ssbanner .next{right: 0px; transform: translateY(-50%); margin-right: -35px;background: url(/images/27/ico_arrow_next.svg) no-repeat;}

.sectionTitle{margin-bottom: 20px;}
.sectionTitle h2{font-size: 32px;display: inline-block;}
.sectionTitle .btn{display: inline-block;margin-left: 30px;}
.sectionTitle .btn a{font-size: 16px;}
.sectionTitle .btn a i{margin-right: 5px;color: #79551a;}

.index-btn{text-align: center;}
.index-btn a{display: inline-block;font-size: 16px; background: #fbf8f0;transition: ease .3s; color: #000;font-weight: bold; box-sizing: border-box;width: 380px;height: 56px;line-height: 56px;}
.index-btn a i{margin: 0 5px;color:#79551a;}
.index-btn a:hover{background:#79551a;color: #fff; }
.index-btn a:hover i{color: #fff;}
/*news*/
#content{background:#f5f5f5}
.topic{position:relative;padding: 70px 0 30px;}
.topic .topic-title{display:inline-block;position:relative;z-index:3;color:#333}
.topic .topic-title h2{font-family:'Rubik',sans-serif;text-align: left;font-size: 62px;line-height:110%;}
.topic .topic-title p{text-align:center;font-size:14px;line-height:110%;margin-top:7px}
.topic b{font-family:'Marck Script',cursive;position:absolute;z-index:2;left:0;width:100%;height:100%;display:block;top:0;font-size:170px;color:#eaeaea;line-height:197px;text-align:center;font-style:italic;transform:rotate(-5deg);font-weight:400}

#news li .readmore a b,#news li .readmore:before{background: linear-gradient(90deg,#1dbcfc 20%,#56ceff 80%);}#news li .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative;}
#NewsBox .topic .topic-title h2,#news li .readmore a{background: linear-gradient(90deg,#1dbcfc 20%,#56ceff 80%);-webkit-background-clip: text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom: 10px;letter-spacing: .02em;font-family: "Times New Roman", "Noto Sans TC", sans-serif;}#news li .photo a img{width:100%}
#NewsBox{padding-bottom: 90px;background-repeat: no-repeat;background-position: 0% 50%;background-size: auto;}
#NewsBox .webframe {
    width: 880px;
    margin: 0px auto;
    margin-right: 155px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
#NewsBox:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: .9;
}
#NewsBox:after {
    background: -webkit-gradient(linear,left top,right top,color-stop(20%,#fff),color-stop(80%,#ffffff));
    background: -webkit-linear-gradient(left,#fff 20%,#ffffff 80%);
    background: linear-gradient(90deg,rgba(255, 255, 255, 0.41) 10%,rgb(255, 255, 255) 40%);
}

:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#news li{float:left;width: calc((100% - 40px) / 2);}
#news li:nth-child(3n-1){margin:0 20px}
#news li .border{margin-bottom:50px}
#news li .news-info{margin:20px}
#news li .news-info .news-bottom{margin-top:10px}
#news li .news-info .news-bottom h4{color: #56ceff;font-size:10pt;}
#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;margin-bottom:20px}
#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}
.same-btn a{background: #cccccc;font-weight:700;transition:all linear .2s;position: relative;z-index: 0;display: inline-block;min-width: 150px;background-color: #1dbcfc;text-align: center;color: #fff;padding: 10px;}
.same-btn a:hover{opacity:.8;}
#prolay .same-btn{margin-top:40px}
/*product*/
#product{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative;padding-bottom:80px;padding-top:90px;position: relative;z-index: 2;overflow: hidden;}
#product .webframe{
        width: 1440px;
        margin: 0 auto;
        text-align: center;
}
#product .speBox{position:relative}
.slick-initialized .slick-slide:nth-of-type(2n+1) {
    padding-top: 80px;
}

.slick-initialized .slick-slide {
	animation: fadeIn 1.5s both;
	-webkit-animation: fadeIn 1.5s both;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;	
}
.slick-initialized .slick-slide:nth-child(1) {
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}
.slick-initialized .slick-slide:nth-child(2) {
	animation-delay: 1.0s;
	-webkit-animation-delay: 1.0s;
}
.slick-initialized .slick-slide:nth-child(3) {
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}
.slick-initialized .slick-slide:nth-child(4) {
	animation-delay: 2.0s;
	-webkit-animation-delay: 2.0s;
}

#prolay .p-box a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:4}
#prolay .p-box .p-border{position:relative;overflow:hidden;text-align: center;}
#prolay .p-box .p-border:after{/* content:''; */display:block;/* width:80%; *//* height:100%; */position:absolute;left:50%;top:0;opacity:0;background:rgba(255,255,255,0.3);z-index:2;transition:all cubic-bezier(0.49,0.01,0,1) .7s;}
#prolay .p-box .p-border .deco-text {
    display: block;
    position: absolute;
    right: 5px;
    top: 0;
    transform: translate(100%, 0%) rotate(90deg);
    transform-origin: left top;
    color: #191919;
    letter-spacing: 2px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.75rem;
}
#prolay .p-box .p-border .more {
    position: absolute;
    right: 20px;
    bottom: 40px;
    background-color: #1dbcfc;
    color: #fff;
    padding: 10px 15px;
    line-height: 1em;
    border: none;
    font-size: .8125rem;
}
#prolay .p-box .p-border .photo{position:relative;background-repeat:no-repeat;background-position: 42% 50%;background-size: cover;background-color:#CCC;display: block;width: 90%;height: auto;}
#prolay .p-box .p-border .photo img{width:100%}
#prolay .p-box .p-border .p-info{padding: 7px;z-index:3;color: #000000;transition:all linear .4s;text-align: center;width: 90%;}
#prolay .p-box .p-border .p-info:after{height:100%;content:'';background-position:50%;background-size:auto;opacity:.9;position:absolute;left: 0%;top:0;width:100%;display:block;z-index:-1;transition:all linear .4s;}
#prolay .p-box .p-border .p-info h3{font-size: 19px;text-align: center;}
#prolay .p-box .p-border .p-info .describe{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{font-size:13px;margin-right:15px}
#prolay .p-box .p-border .p-info .price span.now{font-size:17px;color:#fff}

/*about*/
#aboutFunc{position:relative;background-repeat:no-repeat;background-position: 50% 90%;background-size: auto;overflow:hidden;background-color: #ffffff;color:#fff;padding: 50px 0 0;position: relative;z-index: 2;overflow: hidden;}
#aboutFunc .abBox{z-index:3;}
#aboutFunc .abBox #youtube{width: 64%;background-repeat:no-repeat;background-position: 100% 50%;background-size: auto;margin-top: 100px;}
#aboutFunc .abBox .aboutart{width: 48%;position:absolute;left: 22%;top: 90px;animation-duration:2s;animation-name: fadeInRight;}
#aboutFunc .abBox .aboutart h2{font-size:42px;line-height:110%;color: #000;margin-left: 40px;}
#aboutFunc .abBox .aboutart .arts{font-size:15px;line-height:160%;color: #2f2f2f;margin-top: 30px;margin-bottom:60px;max-height: 96px;overflow:hidden;width: 70%;margin-left: 40px;}
#aboutFunc .abBox .aboutart .more{display:inline-block;background:#fff;color:#741111;font-size:13px;font-weight:700;line-height:110%;padding:20px 50px;display: none;}
#aboutBox #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;margin-top:20px}

/* contactL */
#contactL{
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
    padding-bottom: 140px;
    padding-top: 140px;
    background: url(/images/27/icon-bg.png) no-repeat fixed center top / cover;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
#contactL::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: auto;
    background: linear-gradient(45deg, rgba(43, 149, 255, 0.7) 0, rgba(0, 0, 0, 0.25) 20%, rgba(29, 188, 252, 0.41) 50%, rgba(57, 93, 233, 0.7) 80%, rgba(43, 149, 255, 0.7) 100%) 0 100%/200% no-repeat;
    -webkit-animation: bgSlide 15s ease-out both alternate infinite;
    animation: bgSlide 15s ease-out both alternate infinite;
}
#contactL .workframe {z-index: 100;    overflow: hidden;
    margin: 0 auto;
    width: 1160px;}
#contactL .firstBox { overflow: hidden; width: 100%; background: url(/images/13/material-op60.png) #2951b0 center; border-radius: 20px 20px 0 0; box-shadow: 0 0 10px 5px rgba(0,0,0,.05); }
#contactL .firstBox:before { position: absolute; width: 396px; height: 408px; background: url(/images/13/img-about.png) no-repeat; background-size: 100% auto; display: block; left: -40px; bottom: 210px; z-index: 10; content: ""; }
#contactL .firstBox .iconBox p { position: absolute; width: 55px; animation: triangle 2s infinite cubic-bezier(.455,.03,.515,.955); }
#contactL .firstBox .iconBox p:nth-child(1) { top: 80px; right: calc(25% + 55px); animation-delay: .35s; }
#contactL .firstBox .iconBox p:nth-child(2) { top: 110px; right: -20px; animation-delay: .7s; }
#contactL .firstBox .iconBox p:nth-child(3) { width: 35px; top: 290px; right: -50px; animation-delay: 1.4s; }
#contactL .firstBox .iconBox p:nth-child(4) { width: 40px; top: 130px; right: 25%; animation-delay: 1.05s; }
#contactL .item { position: relative; float: left; }
#contactL .item article { padding: 	60px; }
#contactL .item h3 {margin-bottom: 10px;font-size: 30px;text-align: center;color: #fff;}
#contactL .item font { display: block; }
#contactL .item.c1 { width: 33%; background: url(/images/13/material-op60.png) #2951b0 center; color: #fff; }
#contactL .item.c1 article { animation-name: fadeInLeft; -webkit-animation-name: fadeInLeft; }
#contactL .item.c1 h3 , #contactL .item.c1 font { text-align: center; }
#contactL .item.c2 { width: calc(67% + 0.01px); background: url(/images/13/img-customBg.jpg) #2c95e6 center; }
#contactL .item.c2 .box { padding-bottom: 15px; float: left; width: calc(50% + 0.01px); background: #fff; }
#contactL .item.c2 .box:first-child { padding-bottom: 0; width: 100%; background-position: right bottom; background-repeat: no-repeat; background-size: 50% auto; background-color: #fff; }
#contactL .item.c2 .box:first-child article { width: calc(50% - 120px); animation-name: fadeInRight; -webkit-animation-name: fadeInRight; }
#contactL .item.c2 .box:first-child h3 { color: #e0a31a; }
#contactL .item.c2 .box:nth-child(2) { width: 50%; background: url(/images/13/img-customBg.jpg) #2c95e6 center; color: #fff; }
#contactL .item.c2 .box:nth-child(2) article { animation-name: fadeInDown; -webkit-animation-name: fadeInDown; }
#contactL .item.c2 .box:nth-child(3) article { animation-name: fadeInUp; -webkit-animation-name: fadeInUp; }
#contactL .item.c3 {overflow: hidden;padding: 0px 0;float: none;}
#contactL .item.c3  ul li{
    position: relative;
    margin: 10px 0;
    float: left;
    width: 33%;
    color: #565656;
    text-align: center;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}
#contactL .item.c3 p {z-index: 2;}
#contactL .item.c3 p {margin-bottom: 5px;padding: 3px 0px;border-radius: 40px;display: inline-block;font-weight: 400;margin: 0 10px;font-size: 18px;color: #ffffff;text-align: justify;}
#contactL .item.c3 .bgBox {position: absolute;top: -110%;left: -150px;animation: bgWhirligig 80s infinite linear;z-index: 1;display: none;}

/*book*/
#bookbox{padding-bottom: 150px;position: relative;z-index: 2;overflow: hidden;}
#bookbox .container{width: 83%;}
#bookbox .sectionTitle{text-align: center;position: relative;}
#bookbox .sectionTitle h2{position: relative;}
#bookbox .sectionTitle b{
    font-family: 'Nothing You Could Do', cursive;
    font-family: 'Italianno', cursive;
    position: absolute;
    left: -20px;
    width: 100%;
    height: 100%;
    display: block;
    top: -95px;
    font-size: 150px;
    line-height: 197px;
    text-align: center;
    font-style: italic;
    transform: rotate(-9deg);
    font-weight: 400;
    letter-spacing: 10px;
    color: rgba(239, 231, 218, 0.5);
    z-index: -1;
}
#bookbox .index-btn{margin-bottom: 30px;}
#bookbox .swiper-wrapper{}
.book-item > div{position: relative;}
.book-item > div a.photo{width: 70%;}
.book-item .info{float: right;margin-top: 150px;width: 25%; margin-left: 30px;}
.book-item .info a.title{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; transition: ease .3s; line-height: 1;opacity: 0;font-size: 42px; color: #fff;font-weight: bold;width: 100%;text-align: left; }
.book-item .info a.btn{
	display: block;
    font-size: 16px;
    background: #fbf8f0;
    transition: ease .3s;
    color: #000;
    font-weight: bold;
    box-sizing: border-box;
    width: 180px;
    padding: 15px;
    margin-top: 45px;
    opacity: 0;
}
.book-item .info a.btn i {
    margin: 0 5px;
    color: #79551a;
}
.book-item .info a.btn:hover i {
    color: #fff;
}
.book-item .info a.btn:hover {

    background: #79551a;
    color: #fff;
}
.book-item.swiper-slide-active .info a.btn,.book-item.swiper-slide-active .info a{opacity:1;}
#bookbox .book-content{}
#bookbox .book-bg{position: relative;}
#bookbox .book-bg::after{z-index:-1;position: absolute;top: 50px;left: 0;width: 100%;height: 100%;background: linear-gradient(270deg,#efe7da,#efe7da 70%,#fff 0,#fff);content: "";}

/*otherset*/
#other-content{padding-bottom: 80px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: relative;padding-bottom: 170px;padding-top: 90px;background-image: url(/images/27/cn-bg.png);}
#other-content.noneCI{display: none;}
.other-set .item{position: relative;}

.other-set .item article{position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;padding: 47px 58px 52px;display: flex;align-items: center;justify-content: space-between;color: #fff;}
.other-set .item article .othertitle{width: 30%;}
.other-set .item article .othertitle p{font-size: 24px;font-weight: bold;-webkit-line-clamp: 3;line-height: 1.2;}
.other-set .item article font{width: 40%;font-weight: bold;-webkit-line-clamp: 5;}
.other-set .item article .index-btn{width: 180px;}
.other-set .item article .index-btn a{width: 100%;height: 43px;line-height: 43px;font-size: 14px;}
.other-set a.photo{position: relative;}
.other-set a.photo::after{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.52)}
.other-set .swiper-slide{opacity: 0 !important;}
.other-set .swiper-slide-active{opacity: 1 !important;}


/*自定欄位*/
.anyconactway{
}

.anyconactway .photo{
	    width: 100%;
    margin: auto;
    text-align: center;
}
.anyconactway li{
	float:left;
    width: 30%;
    overflow: hidden;
    padding: 0 1.5%;
}
.anyconactway li .icon{
	float:left;
	color:#07b0bd;
	width: 50px;
}
.anyconactway li .icon i{
	font-size: 30px;
	position: relative;
	color: #7cb228;
}
.anyconactway li .txt{
	float:left;
	width: calc(100% - 80px);
}
.anyconactway li .txt h3{
	color:#434343;
	font-size: 18px;
	line-height: 180%;
	display: inline-block;
	font-weight: 500;
	letter-spacing: -0.025em;
}
.anyconactway li .txt p{
	color:#434343;
	font-size:16px;
	line-height: 180%;
	display: inline-block;
	font-weight: 500;
	letter-spacing: -0.025em;
}
.anyconactway li .txt .gray{
	color:#707071;
}
#order .anyconactway {
	margin: 20px 0;
	padding-bottom: 20px;
}

@media screen and (max-width: 1680px){
#NPBox .news-item h3{width: 60%;}
}
@media screen and (max-width: 1440px){
.book-item .info a.title{font-size: 36px;}
#aboutFunc .abBox .aboutart{top:80px}
#product .webframe {
    width: 90%;
}
}
@media screen and (max-width: 1240px){
#ssbanner .container{width: 83%;}
#contactL .workframe {
    width: 90%;
}
}
@media screen and (max-width: 1280px){
	#aboutFunc .abBox .aboutart{top: 0px;}
#aboutFunc .abBox .aboutart h2{font-size:32px}
#aboutFunc .abBox .aboutart h3{margin-bottom:30px}
}
@media screen and (max-width: 1100px){
}
@media screen and (max-width: 1025px){
#aboutFunc .abBox .aboutart .more a,#book .bookStyle .info h5 a{position:relative;transition:transform 1s cubic-bezier(0.23,1,0.32,1)}
#aboutFunc .abBox .aboutart .more a:hover,#book .bookStyle .info h5 a:hover{color:#fff}
#aboutFunc .abBox .aboutart .more a span,#book .bookStyle .info h5 a span{position:relative;z-index:2}
#aboutFunc .abBox .aboutart .more a:after,#book .bookStyle .info h5 a:after{top:0;position:absolute;transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1);content:'';display:block;width:100%;height:100%;left:0;background:#292929;z-index:1}
#aboutFunc .abBox .aboutart .more a:hover:after,#book .bookStyle .info h5 a:hover:after{transform:scale(1,1);transform-origin:left center 0}

	}
@media screen and (min-width: 1025px) {
#aboutFunc .youtubebox,.controller #bookBox{background-attachment:fixed}
#prolay .p-box:hover .p-border:after{width: 105%;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% + 250px);right: 110px;font-size:22px;}
#product .titleSet{display:inline-block;text-align:center;position:relative;vertical-align:middle;padding: 0 100px 0 0;}
#product .titleSet .speBoxTitle{font-size: 16px;color: #545454;margin:0;letter-spacing: 1px;-moz-transform:rotate(-90deg);padding: 20px 0;}
#product .titleSet .subBoxTitle{font-size: 20px;display: none;}
#prolay{display:inline-block;width: calc(100% - 0px);margin-left: 0px;}
#news li .readmore:before{content:'';display:block;width:0;height:1px;position:absolute;bottom:-15px;z-index:2;left:0;transition:all linear .3s}
#news li .readmore:hover:before{width:100%}
}
@media screen and (max-width: 1024px){
    .sectionTitle h2{font-size: 30px;}
    .index-btn a{width: 250px;}
    .book-item .info a.btn{width: 120px;padding: 10px;font-size: 14px;}
    .book-item .info a.title{font-size: 28px;}
    #bookbox .book-bg::after{height: 90%;}
    .other-set .item article .index-btn{width: 120px;}
    .other-set .item article .othertitle p{font-size: 20px;}
#aboutFunc{padding: 0px 0;}
#aboutFunc .abBox .aboutart{position: sticky;width: 80%;z-index: 999;left: 6%;}
#aboutFunc .abBox #youtube{width: 80%;background-size: cover;background-position: 0% 0%;margin-top: 40px;}
#aboutFunc:before{top:0;bottom:inherit;bottom:initial}
#aboutFunc:after{width:100%;top:inherit;top:initial;bottom:0;height:70%}
#product .titleSet .speBoxTitle{font-size: 15px;font-weight: 500;margin-top: 20px;}
#product .titleSet .subBoxTitle a{font-size:16px;margin:0 0 30px}
#product .flytxt{text-align:center;font-size:17px;line-height:120%;color:#2d2c2c}
#prolay{margin-top: 30px;}
#product .speBox .titleSet p{text-align:center}
#product .titleSet .speBoxTitle{text-align:center}
#product .titleSet .subBoxTitle{text-align:center;margin-top:10px;display: none;}
#product .titleSet .subBoxTitle a{color:#696969;font-weight:400;display:block;margin-bottom:20px}
#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}
#contactL {overflow: hidden;padding-bottom: 80px;padding-top: 30px;}
#NewsBox .webframe {
    width: 90%;
    margin: 0px auto;
    margin-right: 20px;
}
#NewsBox {
    padding-bottom: 40px;
    background-repeat: no-repeat;
    background-size: auto;
}
#NewsBox:after {
    background: -webkit-gradient(linear,left top,right top,color-stop(20%,#fff),color-stop(80%,#ffffff));
    background: -webkit-linear-gradient(left,#fff 20%,#ffffff 80%);
    background: linear-gradient(90deg,rgba(255, 255, 255, 0.41) 0%,rgb(255, 255, 255) -20%);
}
}
@media screen and (max-width: 980px){
#contactL .item.c1 , #contactL .item.c2 , #NPBox #newBox { width: 100%; }
	#contactL .item.c1 h3 , #contactL .item.c1 font { text-align: left; }
	#contactL .firstBox:before { width: 206px; top: 40px; bottom: auto; }
	#contactL .item.c2 .box:first-child { background-size: cover; }
	#contactL .item.c2 .box:first-child article { padding-top: 60px; width: calc(100% - 120px); background-color: rgba(255, 255, 255, 0.37); }
.topic b{font-size:120px}
.slick-initialized .slick-slide:nth-of-type(2n+1) {
    padding-top: 0px;
}
#product {
    padding-bottom: 0px;
    padding-top: 50px;
}
}
@media screen and (max-width:768px){
.topic b{font-size:100px}
    #bookbox .container{width: 85%;}
    #ssbanner .container{width: 88%;}
    .book-item .info{margin-left: 0px;margin-top: 95px;}
    #ssbanner .prev{margin-left: -20px;}
    #ssbanner .arrow{margin-right: -20px;}
#prolay .p-box .p-border .p-info h3{font-size:18px}
#prolay .p-box .p-border .p-info{max-width:calc(75% - 60px);padding:30px;}
#prolay .p-box .p-border:after{width:55%}
#prolay .p-box .p-border .p-info .describe{overflow:hidden;}
#prolay .p-box .p-border .p-info .price span{display:block}
	.anyconactway li{
		width:97%;
		margin:0 1.5% 30px;
	}
#aboutFunc .abBox .aboutart .arts {
    font-size: 15px;
    line-height: 160%;
    color: #2f2f2f;
    margin-top: 40px;
    margin-bottom: 0px;
    max-height: 96px;
    width: 90%;
    margin-left: 0px;
}
#other-content {
    padding-bottom: 10px;
    padding-top: 10px;
}
#product .speBox .titleSet p img{
    /* text-align: center; */
    max-width: 230px;
}
#NewsBox .topic .topic-title h2{
    font-size: 42px;
}
.same-btn{margin: 20px 0;}
}
@media screen and (max-width:640px){
    #newBox{padding: 16px;}
    #NPBox .new-slider{width: 100%;}
    #NPBox .sectionTitle{margin-bottom: 0px;background: #79551a;color: #fff;padding: 5px 0 5px 16px;}
    #NPBox .sectionTitle .btn a,#NPBox .sectionTitle .btn a i{color: #fff;}
    .book-item > div a.photo{width: 100%;}
    .book-item .info{width: 100%;float:inherit;margin: 45px 0px 0px;padding-left: 70px;}
    .book-item .info a.btn{margin-top: 20px;}
    #bookbox .book-bg::after{height: 100%;background: linear-gradient(270deg,#efe7da,#efe7da 85%,#fff 0,#fff);}
    .other-set a.photo{min-height: 250px;background-size: cover;}
    .other-set .item article{display: block;}
    .other-set .item article .othertitle,.other-set .item article font,.other-set .item article .index-btn{width: 100%;}
    .other-set .item article .othertitle p{text-align: center; -webkit-line-clamp: 2;}
    .other-set .item article font{-webkit-line-clamp: 3;text-align: center;padding: 15px 0px;}
    .other-set .item article .index-btn{position: absolute;left: 0px;bottom: 35px;}
    .other-set .item article .index-btn a{width: 70%;}
#aboutFunc{padding:70px 0 100px}
#aboutFunc:after{height:75%}
#prolay .p-box .p-border .p-info{max-width:calc(75% - 40px);padding:20px;}
#prolay .p-box .p-border .p-info{position:initial;max-width: calc(100% - 30px);width:calc(100% - 40px);}
#prolay .p-box .p-border:after{display:none}
#prolay .p-box{margin:10px}
#prolay .p-box .p-border .p-info:after {
    left: 0;
}
#news li{width:calc(50% - 10px);margin:0 5px}
#news li:nth-child(3n-1){margin:0 5px}
#product {
    padding-bottom: 0px;
    padding-top: 70px;
}
#aboutFunc .abBox #youtube {
    width: 100%;
    background-size: cover;
    background-position: 120% 0%;
    margin-top: 30px;
}
#aboutFunc .abBox .aboutart {
    left: 8%;
}
}
@media screen and (max-width:540px){
    .sectionTitle h2{font-size: 26px;}
    #NPBox .sectionTitle .btn a{font-size: 14px;}
}
@media screen and (max-width:480px){
#aboutFunc{padding: 0px 0 0px;background-position: 53% 60%;}
#aboutFunc .abBox .aboutart .more a,#book .bookStyle .info h5 a{width:calc(100% - 100px);text-align:center}
#aboutFunc .abBox .aboutart h3{font-size:7pt;line-height:8pt}
	.sectionTitle h2{font-size: 24px;}
    #bookbox .sectionTitle b{font-size: 120px;}
    #ssbanner .arrow{display: none !important;}
#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;display: none;}
	#contactL .firstBox:before , #contactL .firstBox .iconBox { display: none; }
	#contactL .item.c2 .box , #contactL .item.c2 .box:nth-child(2) { width: 100%; }
	#contactL .item.c3 p a{
    margin: 10px auto;
    }
	#contactL .item h3{    font-size: 26px;}
#contactL .item.c3 ul li {
    width: 50%;
}
#contactL .item.c3 ul li:nth-child(3) {
    width: 100%;
}
#news li .news-info{margin:0}
#news li .news-info h3 a{font-size:13pt}
#news li .news-info h3,#news li .news-info p{margin-bottom:10px}
.topic b{font-size:70px}
.same-btn a{padding: 6px 20px;font-size:10pt;margin-bottom: 0px;}
}
@media screen and (max-width:375px){
    #bookbox .sectionTitle b{font-size: 100px;}
}