@import url('/css/community.css');

/* workframe */
.workframe{width: 1000px;}

/* header */
header.headerfixed {position: fixed;top: 0;box-shadow: 0 0 40px rgb(0 0 0 / 40%);}

/* footer */
footer{position:relative}
footer:after{content:'';position: absolute;top: -12.5px;left: -20px;width: 80%;height: 25px;background: linear-gradient(to right, #00476e, #00b2ee);transform: skewX(60deg);}

/* BannerBox */
#BannerBox { position: relative; }
#BannerBox:after{content:'';position: absolute;bottom: -12.5px;right: -20px;width: 80%;height: 25px;background: linear-gradient(to left, #00476e, #00b2ee);transform: skewX(-60deg);z-index: 2;}
#BannerBox #sbanner {z-index: 1;}
#BannerBox #sbanner a.photo {width: 100%;background-size: cover;}
#BannerBox #sbanner a.photo img { max-height: 100%; }
#BannerBox .bar {position: relative;background: rgba(0, 0, 0, .75);z-index: 2;display: none;}
#BannerBox .bar .waylink { padding: 10vw; text-align: center; }
#BannerBox .bar .waylink h1 { line-height: 130%; color: #fff; }
#BannerBox .bar .waylink ol { margin-top: 20px; font-size: 0; }
#BannerBox .bar .waylink ol li { display: inline-block; color: #ff5860; }
#BannerBox .bar .waylink ol li a { color: #fff; }
#BannerBox .bar .waylink ol li a:after { margin: 0 5px; display: inline-block; color: #fff; content: ">"; }
#BannerBox .bar .waylink ol li:last-child a { color: #ff5860; }
#BannerBox .bar .waylink ol li:last-child a:after { content: ""; }

/* wrap */
.wrap {padding: 60px 0;position: relative;}
.wrap:after{content:'';}
.wrap .img { overflow: hidden; }
.wrap .img a.photo { text-align: center; -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
.wrap #content .articlebar { margin-top: 20px; }
.wrap #content .articlebar a { padding: 2px 15px; background: #ffdddf; display: inline-block; color: #ff575f; }
.wrap #content .articlebar font { margin-left: 15px; font-family: 'Rubik', sans-serif; color: #656565; }
.wrap #content h2 { margin-top: 5px; font-size: 40px; }
.wrap .quoteBox font , .wrap .quoteBox a { display: inline-block; color: #6e6e6e; vertical-align: middle; }
.wrap .quoteBox a { color: #127e91; }
.wrap #describe {margin: 150px 0;}
.wrap.contact{padding: 150px 0 100px;}
.wrap.contact:after{content:url(/images/33/img-con-bottom.png);position: absolute;bottom: -20px;right: -40px;}

/* aboutBox */
.wrap.aboutBox, .wrap.contact{background-image:url(/images/33/about-bg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow: hidden;}
.wrap.aboutBox:after{content:url(/images/33/about-bg-left.png);position: absolute;left: 100px;bottom: 0;}
.wrap.aboutBox:before{content:url(/images/33/about-bg-right.png);position: absolute;top: 0;right: 100px;display: block;}

/* productBox */
.wrap.productBox{background-image: url(/images/33/product-bg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow: hidden;}
.wrap.productBox:after{content:url(/images/33/product-bg-left.png);position: absolute;left: 100px;bottom: 0;}
.wrap.productBox:before{content:url(/images/33/product-bg-right.png);position: absolute;top: 0;right: 100px;display: block;}

/* sideNav */
#sideNav {margin: 50px 0 30px;text-align: center;font-size: 0;display: none;}
#sideNav >li { margin: 10px; min-width: 250px; display: inline-block; }
#sideNav >li h3 { position: relative; border: 1px #ff575f solid; }
#sideNav >li h3 a { padding: 5px 45px 5px 15px; display: block; font-size: 16px; color: #1b1c38; }
#sideNav >li h3 b { position: absolute; padding: 5px 15px; font-size: 16px; color: #333; cursor: pointer; right: 0; bottom: 0; }
#sideNav >li h3 b i { font-size: 12px; color: #1b1c38; -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; }
#sideNav >li.openlist h3 b i { -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }
#sideNav >li h3 b i:before { content: "\f078" }
#sideNav >li .subUL { position: absolute; margin-top: 4px; width: 250px; background: #1b1c38; box-shadow: 0 0 0 1px rgba(68, 68, 68, .5); z-index: -1; opacity: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; }
#sideNav >li.openlist .subUL { z-index: 10; opacity: 1; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
#sideNav >li .subUL li a { padding: 5px 15px; display: block; color: #fff; }
#sideNav >li .subUL li b { display: none; }
#sideNav >li >.subUL >li.action >div >p a { color: #ff575f; }
#sideNav >li .sub2UL { background: rgba(0, 0, 0, .5); }
#sideNav >li .sub2UL >li >div >p a { color: #88899c; }
#sideNav >li .sub2UL >li >div >p a:before {  content: "- " }

/* listBox */
#listBox ul { text-align: center; font-size: 0; }
#listBox ul li { margin: 30px 15px; width: calc((100% / 3) - 32px); border: 1px #e7e7e7 solid; display: inline-block; }
#listBox ul li .info { padding: 30px; border-top: 1px #e7e7e7 solid; }
#listBox ul li .info h3 a { height: 30px; font-size: 20px; color: #292929; -webkit-line-clamp: 1; }
#listBox ul li .info article { margin-top: 15px; height: 55px; font-size: 15px; color: #7b7b7b; -webkit-line-clamp: 2; }

/* faqList */
#faqList li { margin-bottom: 20px; padding: 5px 40px; border: 1px #ccc solid; }
#faqList li a { position: relative; padding-right: 30px; display: block; }
#faqList li a font { padding: 25px 0; display: inline-block; font-weight: bold; font-size: 20px; color: #000; }
#faqList li a i { position: absolute; width: 25px; height: 25px; background: #cacacd; border-radius: 50%; display: inline-block; text-align: center; line-height: 25px; color: #16162e; font-size: 14px; top: calc((100% - 25px) / 2); right: 0; }
#faqList li .menu_body { overflow: hidden; margin: 0; height: 0; color: #636363; }

#faqList li.current .menu_body { margin: 0 0 25px; height: auto; }
#faqList li.current a i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

/* pagenav */
#pagenav { overflow: hidden; margin: 2vw auto 5vw; text-align: center; font-size: 0; }
#pagenav a , #pagenav strong { position: relative; margin: 0 2px; width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px; color: #111; vertical-align: middle; }
#pagenav a { line-height: 34px; }
#pagenav strong { background: #ff575f; color: #fff; }
#pagenav p[class^="page-"] { float: left; width: 50%; }
#pagenav p[class^="page-"] a { padding: 0 10px; width: auto; height: auto; display: block; text-align: left; }
#pagenav p[class^="page-"] a i { margin: 0 5px 0 0; }
#pagenav p.page-next { float: right; }
#pagenav p.page-next a { text-align: right; }
#pagenav p.page-next a i { margin: 0 0 0 5px; }

/* form1 */
#form1 {font-size: 0;display: flex;flex-wrap: wrap;justify-content: space-between;}
#form1 p {margin: 15px 0;width: calc(100% - 40px);display: inline-block;vertical-align: text-bottom;}
#form1 p:nth-child(5){width: 100%;}
#form1 p.col-2 {width: calc(50% - 20px);}
#form1 p.col-3 { width: calc((100% / 3) - 40px); }
#form1 p.col-4 { width: calc(25% - 40px); }
#form1 p label {margin-bottom: 7px;display: block;color: #2d577d;font-size: 20px;font-weight: bold;letter-spacing: 3px;}
#form1 p label b {margin-left: 5px;color: #ff575f;font-size: 20px;}
#form1 p input , #form1 select , #form1 textarea {padding: 10px 15px;width: calc(100% - 30px);display: block;border-radius: 10px;}
#form1 p select { padding: 10px 15px; width: 100%; }
#form1 p input#Checknum {margin-right: 10px;width: 150px;display: inline-block;}
#form1 p.send {text-align: center;width: 100%;}
#form1 p.send a {padding: 10px 45px;background: linear-gradient(to bottom,#00a8e9 0%,#004165 100%);display: inline-block;color: #fff;border-radius: 10px;font-weight: bold;font-size: 18px;letter-spacing: 2px;}

/* coninfo */
.coninfo{display:flex;justify-content:space-between;position: relative;}
.coninfo:after{content:'';position: absolute;bottom: -12.5px;left: -20px;width: 90%;height: 25px;background: linear-gradient(to right, #00476e, #00b2ee);transform: skewX(60deg);z-index: 2;}
.coninfo .left{width:25%;display:flex;align-items:center;justify-content:center;background-image:url(/images/33/con-bg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
.coninfo .right{width:calc(75% - 400px);background: linear-gradient(to right,#d9d8d5 80%,#9a9fa4 95%);padding: 160px 200px 50px;position: relative;}
.coninfo .right:after{content:url(/images/33/img-contact-company.png);position: absolute;top: 160px;left: -35px;}
.contactBox footer:after{display:none;}
.wrap.contact h6{font-size:20px;color:#2d577d;letter-spacing: 5px;padding-left: 20px;border-left: 10px solid transparent;border-image: linear-gradient(to bottom,#00a8e9 0%,#004165 100%);border-image-slice: 1;margin-bottom: 90px;}

@media screen and (max-width:1680px) {
	.wrap.aboutBox:before, .wrap.aboutBox:after, .wrap.productBox:before, .wrap.productBox:after{zoom: 60%;}
}
@media screen and (max-width:1440px) {
	.wrap.aboutBox:before, .wrap.aboutBox:after, .wrap.productBox:before, .wrap.productBox:after{zoom: 40%;}
	.coninfo .right{padding: 160px 90px 50px 200px;width: calc(75% - 290px);}
}
@media screen and (min-width:1281px) {
	.wrap ul li:hover .img a.photo { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2); }
	.wrap ul li:hover .img a.photo img { background: rgba(47, 47, 47, .8); }
	#sideNav >li .subUL li:hover >div >p a {  color: #ff575f; }
	#listBox ul li:hover .info { background: #fff; }
	#pagenav a:hover { background: #ff575f; color: #fff; }
}
@media screen and (max-width: 1280px) {
	#BannerBox #sbanner a.photo img{padding: 40px 0;}
	#BannerBox #sbanner a.photo { background-size: cover; }
	#listBox ul li { margin: 30px 10px; width: calc((100% / 3) - 22px); }
	.workframe{width: 90%;}
	.wrap.aboutBox:before, .wrap.aboutBox:after, .wrap.productBox:before, .wrap.productBox:after{display:none;}
	.wrap #describe{margin: 80px 0;}
	.coninfo{flex-wrap:wrap}
	.coninfo .left img{width:180px;margin:70px 0}
	.coninfo .left{width:100%}
	.coninfo .right{padding:90px;width:calc(100% - 180px)}
	.coninfo .right:after{top:90px;left:-140px}
}
@media screen and (max-width:980px) {
	footer:after{height:15px;top: -6.5px;}
	#BannerBox:after{height:15px;bottom: -8.5px;}
	#listBox ul li { width: calc(50% - 22px); }
	#form1 p.col-2 , #form1 p.col-3 { width: calc(100% - 40px); }
	#form1 p.col-4 { width: calc(50% - 40px); }
	#form1 p.send { text-align: center; }
}
@media screen and (max-width: 640px) {
	#form1 p.col-2,#form1 p.col-3{width:100%}
	.wrap.contact h6{margin-bottom:30px}
	.wrap.contact{padding:70px 0}
	.coninfo .right{padding:30px;width:calc(100% - 60px)}
	#listBox ul li{width:calc(80% - 22px)}
	#form1 p.col-4{width:calc(100% - 40px)}
	.wrap #describe{margin:40px 0}
	.wrap.contact:after{zoom:40%;bottom:-40px;opacity:.5}
}
@media screen and (max-width:480px) {
	#listBox ul li { width: calc(100% - 22px); }
}