.wraprow{position:relative;padding:5vw 0}
.wraprow .bg{position:absolute;width:100%;height:100%;background:no-repeat 50% / cover;opacity:.3;top:0;left:0;z-index:1}
.wraprow .titBox{padding:20px 0;color:#181627}
.wraprow .titBox:before{position:relative;margin-right:10px;width:80px;border-bottom:1px solid;display:inline-block;vertical-align:baseline;top:-9px;content:""}
.wraprow .titBox font{font-weight:500;font-size:35px;vertical-align:baseline}
.wraprow .titBox font:last-child{margin-left:10px;font-weight:400;font-size:20px}
.wraprow .more{position:relative;margin:0 50px 0 auto;width:300px}
.wraprow .more a{padding:20px 0;width:250px;border:1px #1a2e61 solid;display:block;text-align:center}
.wraprow .more a font{position:relative;font-size:18px;color:#0c0b19;z-index:2;-webkit-transition-duration:.3s;transition-duration:.3s}
.wraprow .more a span{position:absolute;width:80px;height:1px;background:#000;display:block;right:0;top:calc((100% - 1px) / 2);z-index:3;-webkit-transition-duration:.2s;transition-duration:.2s}
.wraprow .more a span:before{position:absolute;width:0;height:0;border-style:solid;border-width:0 16px 7px 0;border-color:transparent transparent #0c0b19 transparent;right:-1px;bottom:50%;content:""}
.wraprow .more a:after{position:absolute;width:0;height:100%;background:#3f5ca7;display:block;top:0;left:0;content:"";z-index:1;-webkit-transition-duration:.2s;transition-duration:.2s}
.wraprow .titleJJ{margin-bottom:35px}
.wraprow .titleJJ h2{font-size:70px;text-transform:uppercase;line-height:105%;color:white}
.wraprow .titleJJ p{font-size:24px;color:white}

#index-aboutam .mminfoJ p{font-weight:300}

/* aboutBox */
#aboutBox{margin:-30px 0 0;padding:100px 0 100px;background-size:cover;background-position:50% 50%}
#aboutBox:after{content:"";position:absolute;width:100%;height:100%;right:0;top:0;background-image:url(/images/35/Jan-bg-2.webp);z-index:-1}
#aboutBox .info .more a{border:1px #ffffff solid}
#aboutBox .bg{width:70%;background:url(/images/35/Jan-bg.webp) no-repeat 50% / cover;display:block;opacity:1;-moz-transform-origin:bottom;-moz-transform:skewX(20deg);-webkit-transform-origin:bottom;-webkit-transform:skewX(20deg);-o-transform-origin:bottom;-o-transform:skewX(20deg);-ms-transform-origin:bottom;-ms-transform:skewX(20deg);transform-origin:bottom;transform:skewX(20deg)}
#aboutBox:before{content:"";-moz-transform-origin:bottom;-moz-transform:skewX(20deg);-webkit-transform-origin:bottom;-webkit-transform:skewX(20deg);-o-transform-origin:bottom;-o-transform:skewX(20deg);-ms-transform-origin:bottom;-ms-transform:skewX(20deg);transform-origin:bottom;transform:skewX(20deg);background:#3f5ca7;position:absolute;width:70%;height:90px;right:-120px;bottom:-41px;z-index:3}
#aboutBox .workframe{width:1578px;font-size:0;max-width:100%}
#aboutBox .workframe >div{width:100%;display:inline-block;vertical-align:top}
#aboutBox .titBox font{margin:0 0 5px;display:block;line-height:100%;font-size:35px;color:#fff}
#aboutBox .titBox:before{display:none}
#aboutBox .info article{margin-bottom:20px;line-height:235%;color:#9492b1}
#aboutBox .info .more{margin:-90px 0 0 auto;position:absolute;left:22px}
#aboutBox .info .more a font{color:#fff}
#aboutBox .info .more a span{background:#fff}
#aboutBox .info .more a span:before{border-color:transparent transparent #fff transparent}
#aboutBox #SeoStarRating font:last-child{color:#8e8e8e}
#aboutBox .img{position:absolute;width:45vw;height:300px;background:no-repeat 50% / cover;box-shadow:0px 15px 15px rgba(26,26,51,.2);left:0;bottom:-50px;z-index:2}

/* productBox */
#productBox .mabarbox{position:relative}
#productBox{position:relative;padding:calc(5vw + 30px) 0 5vw;background:white;border-radius:0px 0px 50px 50px;background-image:url(/images/35/index_porductBG.webp);background-size:cover;z-index:2}
#productBox ul li{position:relative;margin:10px 0 70px;padding:20px}
#productBox ul li .img{position:absolute;height:calc(100% - 50px);width:calc(100% - 50px);border:5px solid #2b4894;-webkit-box-shadow:0 7px 14px rgba(56,5,5,.37);box-shadow:0 7px 14px rgba(56,5,5,.37);-webkit-transition:-webkit-transform .3s cubic-bezier(.25,.46,.45,.94);transition:-webkit-transform .3s cubic-bezier(.25,.46,.45,.94);transition:transform .3s cubic-bezier(.25,.46,.45,.94);transition:transform .3s cubic-bezier(.25,.46,.45,.94),-webkit-transform .3s cubic-bezier(.25,.46,.45,.94);left:20px;top:-6px;background-color:white;padding:35px 0}
#productBox ul li .img:before{margin:15px;width:calc(100% - 30px);height:calc(100% - 30px);background:#fff;display:block;content:""}
#productBox ul li a{position:relative;margin:35px;z-index:2;background-size:contain}
#productBox.wraprow .titleJJ{display:flex;flex-direction:column;align-items:center}
#productBox ul li:hover a{-webkit-transform:scale(.95);transform:scale(0.9)}
#productBox.wraprow .titleJJ h2{color:#2b4894}
#productBox.wraprow .titleJJ p{color:#2b4894}
#productBox.wraprow .more{margin:0 auto}
#productBox .matextbox{display:flex;flex-direction:column;align-items:center;margin-top:60px}
#productBox .matextbox h3{font-size:24px}
#productBox .slick-prev,#productBox .slick-prev{top:calc(50% - 50px);left: -40px;}
#productBox .slick-prev,#productBox .slick-next{top:calc(50% - 50px);right: -50px;}
#productBox .slick-next{top:calc(50% - 50px);right: 0px;}
#productBox .slick-prev:before{content:'';position:absolute;background-image:url(/images/35/img-nextleft.png);background-size:contain;background-repeat:no-repeat;width:40px;aspect-ratio:1 / 1}
#productBox .slick-next:before{content:'';position:absolute;background-image:url(/images/35/img-next.png);background-size:contain;background-repeat:no-repeat;width:40px;aspect-ratio:1 / 1}

/* customBox */
#customBox { padding: 0; z-index: 5; }
#customBox:before , #customBox:after { position: absolute; width: 25px; height: 100%; background: #fff; display: inline-block; content: ""; top: 0; left: 0; z-index: 5; opacity: .4; }
#customBox:after { left: auto; right: 0; }
#customBox .btn a { position: absolute; width: 65px; height: 7px; display: block; left: 25px; top: calc((100% - 7px) / 2); z-index: 3; -webkit-transition-duration: .2s; transition-duration: .2s; }
#customBox .btn a:before { position: absolute; width: 100%; height: 1px; background: #fff; display: block; bottom: 0; content: ""; }
#customBox .btn a:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 7px 13px 0 0; border-color: transparent #fff transparent transparent; left: -1px; bottom: 0; content: ""; }
#customBox .btn a#nextBtn { left: auto; right: 25px; }
#customBox .btn a#nextBtn:after { border-width: 0 13px 7px 0; border-color: transparent transparent #fff transparent; left: auto; right: -1px; }
#customBox ul li.slick-slide { position: relative; background: #000; }
#customBox ul li .bg { opacity: .6; }
#customBox ul li .info { padding: 3vw 0 0; height: calc(400px - 3vw); z-index: 9; }
#customBox ul li .info h3 { margin-bottom: 20px; font-size: 40px; color: #fff; }
#customBox ul li .info article { width: 500px; line-height: 200%; color: #fff; }
#customBox .slick-dots li button:before { height: 5px; background: #d20320; display: inline-block; content: ""; }


/*brandsJ*/
#brandsJ{position:relative;background-image:url(/images/35/danlan_BG.webp);padding:150px 0 200px;margin:-40px;z-index:1;background-size:cover}
#brandsJ:before{content:"";-moz-transform-origin:bottom;-moz-transform:skewX(20deg);-webkit-transform-origin:bottom;-webkit-transform:skewX(20deg);-o-transform-origin:bottom;-o-transform:skewX(20deg);-ms-transform-origin:bottom;-ms-transform:skewX(20deg);transform-origin:bottom;transform:skewX(20deg);background:#3f5ca7;position:absolute;width:70%;height:90px;left:-120px;bottom:-41px;z-index:3}
#brandsJ .titleJame{display:flex;align-items:center;padding:0 0 40px;margin-left:31px}
#brandsJ ul.slick-slider{padding:30px 0 40px}
#brandsJ.wraprow .more a{border:1px #ffffff solid}
#brandsJ.wraprow .more a font{color:white}
#brandsJ.wraprow .more a span{background:white}
#brandsJ.wraprow .more a span:before{border-color:transparent transparent #ffffff transparent}
#brandsJ.wraprow .itemJPT{border:5px solid #2b4894;-webkit-box-shadow:0 7px 14px rgba(56,5,5,.37);box-shadow:0 7px 14px rgba(56,5,5,.37);margin:0px 30px}
#brandsJ.wraprow .itemJPT img{width:100%;height:200px;object-fit:contain;background-color:#fff}
#brandsJ.wraprow .slick-dots{z-index:9;bottom:-50px}
#brandsJ.wraprow .slick-dots li{margin:0 1px}
#brandsJ.wraprow .slick-dots li button:before{color:white}

/*cexbom*/
#cexbom{position:relative;background-image:url(/images/35/paJ_BG.webp);padding:107px 0 200px;background-attachment:fixed}
#cexbom:before{content:"";position:absolute;width:0;height:0;border-style:solid;border-width:0px 40px 30px 40px;border-color:transparent transparent #e4e5ea transparent;top:0px;left:calc(50% - 40px);-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-o-transform:scaleY(-1);transform:scaleY(-1)}
#cexbom .papaJJame{display:flex;flex-direction:column;align-items:center}
#cexbom .papaJJame a{width:100%;height:100%;position:absolute}
#cexbom .mmJimg{display:flex;flex-direction:column;align-items:center}
#cexbom .mmJimg img{width:48px;filter:brightness(999999999999999)}
#cexbom.wraprow .titleJJ{display:flex;flex-direction:column;align-items:center}
#cexbom .papaJJinfo{position:relative}
#cexbom .papaJJinfo .bsar{display:flex;justify-content:center}
#cexbom .papaJJinfo .bsar .listJJpa{display:flex;align-items:center;margin:10px}
#cexbom .papaJJinfo .bsar .listJJpa p{color:#e7e7e7;font-weight:400}
#cexbom .papaJJinfo .bsar .listJJpa img{width:25px}
#cexbom.wraprow .more{margin:30px auto 0}
#cexbom.wraprow .more a{border:1px #ffffff solid}
#cexbom.wraprow .more a font{color:#fff}
#cexbom.wraprow .more a span{background-color:#fff}
#cexbom.wraprow .more a span:before{border-color:transparent transparent #ffffff transparent}

/* bookBox */
#bookBox { padding: 8vw 0; }
#bookBox .bg { width: calc(100% - 5vw); height: calc(100% - 10vw); box-shadow: 0px 15px 15px rgba(26, 26, 51, .1); left: 5vw; top: 5vw; opacity: 1; }
#bookBox ul { font-size: 0; }
#bookBox ul li { position: relative; overflow: hidden; margin: 30px; width: 450px; display: inline-block; }
#bookBox ul li h3 { position: absolute; padding: 20px; width: calc(65% - 20px); background: #fff; right: 0; bottom: 0; }
#bookBox ul li h3 a { height: 70px; font-weight: 400; font-size: 20px; color: #434343; -webkit-line-clamp: 2; }

/* youtubeBox */
#youtubeBox { position: relative; padding: 3vw 0 6vw; }
#youtubeBox .bg { width: 630px; height: 575px; background: url(/images/35/img-aboutBg.jpg) no-repeat 50% / cover; top: -1vw; left: auto; right: 0; opacity: 1; }
#youtubeBox iframe { margin-top: 40px; width: 960px; height: 576px; }

/* NewsBox */
#NewsBox{padding:3vw 0 5vw}
#NewsBox.wraprow .titleJJ{display:flex;flex-direction:column;align-items:center;padding-top:90px}
#NewsBox.wraprow .titleJJ h2{color:#2b4894}
#NewsBox.wraprow .titleJJ p{color:#2b4894}
#NewsBox .listbox{position:relative;z-index:2}
#NewsBox ul{margin:3vw 0 3vw}
#NewsBox ul li{border-top:#adadad61 1px solid}
#NewsBox ul li:last-child{border:#adadad61 1px solid}
#NewsBox ul li a{display:flex;font-size:0;align-items:center;justify-content:space-between}
#NewsBox ul li a font{width:110px;display:-webkit-inline-box;color:#3e3e3e}
#NewsBox ul li a font.time{padding:40px}
#NewsBox ul li a font.txt{width:calc(50% - 192px);height:27px;-webkit-line-clamp:1}
#NewsBox ul li a font.arrow{position:relative;padding:0;width:1px;height:30px;background:#353535}
#NewsBox ul li a font.arrow:before{position:absolute;width:0;height:0;border-style:solid;border-width:13px 7px 0 0;border-color:#353535 transparent transparent transparent;left:0;bottom:-1px;content:""}
#NewsBox.wraprow .more{margin:0 auto}

@media screen and (max-width:1680px){
	#productBox .workframe{width:80%}
	#customBox .btn a{width:45px}
	#customBox ul li .info{width:calc(90% - 90px)}
}

@media screen and (max-width:1460px){
	#aboutBox .workframe{width:1366px}
	#brandsJ.wraprow .itemJPT{margin:0 10px}
	.wraprow .titleJJ h2{font-size:55px}
	.wraprow .titleJJ p{font-size:21px}
	.wraprow .titleJJ{margin-bottom:20px}
	#productBox ul li{margin:10px 0 40px;padding:10px}
}

@media screen and (min-width:1281px){
	.wraprow .more:hover a font{color:#fff}
	.wraprow .more:hover a span{right:30px}
	.wraprow .more:hover a:after{width:252px}
	#productBox .bg{width:700px;height:585px;top:calc(5vw + 30px);left:auto;right:0;opacity:1}
	#productBox ul li:hover .img{-webkit-transform:scale(.95);transform:scale(.95)}
	#customBox .btn a#prevBtn:hover{left:10px}
	#customBox .btn a#nextBtn:hover{right:10px}
	#bookBox ul li:hover a.photo{-webkit-transform:translate(0) scale(1.2);transform:translate(0) scale(1.2)}
	#NewsBox ul li:hover{}
}

@media screen and (max-width:1280px){
	#aboutBox .bg{width:100%}
	#aboutBox .workframe{width:90%}
	#bookBox .bg{width:100%;height:100%;top:0;left:0}
	#bookBox ul li{margin:15px 15px 15px 0;width:calc((100% - 30px) / 2)}
	#bookBox ul li:nth-child(2n){margin:15px 0 15px 15px}
	#bookBox ul li h3{padding:10px 20px;width:calc(100% - 40px)}
	#bookBox ul li h3 a{height:30px;-webkit-line-clamp:1}
	#youtubeBox .bg{width:55vw;height:47vw;top:0}
	#youtubeBox iframe{width:70vw;height:43vw}
	#NewsBox ul li a font.time{padding:40px 40px 40px 0}
	#NewsBox ul li a font.txt{width:calc(100% - 130px)}
}

@media screen and (max-width:1024px){
	#aboutBox{margin-top:-30px;padding:10vw 0}
	#aboutBox .workframe >div{width:100%}
	#aboutBox .info .more{margin:-30px auto 0}
	#aboutBox .img{width:80vw;position:relative;bottom:0}
	#productBox ul li{padding:0}
	#productBox ul li .img{opacity:0}
}

@media screen and (max-width:980px){
	#customBox:before,#customBox:after{opacity:0}
	#customBox ul li .info{width:80vw;height:80vw}
	#customBox ul li .info article{width:100%}
	#youtubeBox .bg{width:60vw;height:100%}
	#youtubeBox iframe{width:90vw;height:55vw}
	#aboutBox{padding-bottom:26vw}
}

@media screen and (max-width:768px){
	#productBox{padding-top:12vw}
}

@media screen and (max-width:640px){
	#aboutBox .bg{background-position:50% 50%;width:100%;webkit-transform-origin:unset;-webkit-transform:unset;-o-transform-origin:unset;-o-transform:unset;-ms-transform-origin:unset;-ms-transform:unset;transform-origin:unset;transform:unset}
	#brandsJ .titleJame{display:flex}
	.wraprow .titBox:before{width:50px}
	.wraprow .titBox font:last-child{margin-top:-10px;display:block;text-align:right}
	.wraprow .more{margin:0 auto;width:130px}
	.wraprow .more a{padding:10px 0;width:133px}
	.wraprow .more a font{font-size:17px}
	.wraprow .more a span{width:50px;right:-25px}
	.wraprow .more a span:before{border-width:0 10px 6px 0}
	#aboutBox .info .more{margin:30px 0 50px auto}
	#aboutBox .img{width:95vw}
	#customBox .btn{display:none}
	#bookBox ul{text-align:center}
	#bookBox ul li,#bookBox ul li:nth-child(2n){margin:15px 0;width:90%}
	#NewsBox ul li a{padding:10px 0;width:97%}
	#NewsBox ul li a font.time{padding:0;width:81px;display:block;font-size:10px}
	#NewsBox ul li a font.txt{width:100%;display:block}
	#NewsBox ul li a font.arrow{display:none}
	#cexbom .papaJJinfo .bsar{display:flex;flex-direction:column}
	.wraprow .titleJJ h2{font-size:48px}
	#brandsJ ul.slick-slider{padding:20px 10px 20px}
	#brandsJ.wraprow .slick-dots{width:80%;display:none!important}
	#brandsJ{padding:140px 0 140px}
}

@media screen and (max-width:480px){
	.wraprow .titleJJ h2{font-size:35px}
	#aboutBox{padding-bottom:50vw}
	#productBox{padding-top:20vw;border-radius:0px 0px 20px 20px}
	#NewsBox ul li a font.txt.subtitle{display:none}
	#NewsBox ul li{padding:5px 0}
	#NewsBox ul{margin:30px 0}
}