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

/* waylink */
.waylink { margin-bottom: 30px; }
.waylink .pagetitle { margin: 25px 0 10px; line-height: 1; color: #254899; }
.waylink ol { overflow:hidden; font-size:12px; }
.waylink ol li { position:relative; margin-left:5px; padding-left:10px; float:left; list-style: none; color:#6f6f6f; }
.waylink ol li:first-child { margin-left:0; padding-left:0; }
.waylink ol li a { color: #969696; }
.waylink ol li .h3 { font-weight:normal; font-size:12px; color: #6f6f6f; }
.waylink ol li:after { position:absolute; font-size:12px; color:#6f6f6f; left:0; top:0; content: ">"; }
.waylink ol li:first-child:after { content: ""; }

/* content-wrapper */
.content-wrapper { overflow: hidden; position: relative; }
.content-wrapper:before { position: absolute; width: 765px; height: 574px; top: 90px; right: -90px; animation: bgWhirligig-2 80s infinite linear; z-index: 1; content: url(/images/13/img-layoutBg.png); }
.content-wrapper:after { position: absolute; width: 2000px; height: 467px; background: url(/images/13/blue-curve.png) no-repeat 0 0; background-size: 100% auto; bottom: 0; left: 0; z-index: 1; content: ""; }
.content-wrapper .workframe { z-index: 10; }
#content { overflow: hidden;; position: relative; margin: 10px 0; background: #1a233e; border-radius: 20px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.22); }

/*#sub-banner*/
#sub-banner a.photo{ background-size: cover; }
#sub-banner a.photo img{ height: 500px; }

/* sideNav Cate */
#sideNav { float: left; padding-bottom: 40px; width: 280px; height: 100%; background: #1a233e; top: 0; left: 0; }
#sideNav h2.sideTitle { position: relative; padding: 10px 20px; background: url(/images/13/material-op60.png) #254899 center; font-size: 18px; color: #fff; }
#sideNav h2.sideTitle i { position: absolute; display: none; top: calc(50% - 9px); right: 20px; }
#sideNav ul.Cate >li { border-bottom: 1px #2a375a solid; }
#sideNav #contact-extra ul.Cate >li { padding: 10px 20px; color: #fff; }
#sideNav ul.Cate li h3 { position:  relative; }
#sideNav ul.Cate li.action h3:before { position: absolute; border-style: solid; border-width: 22px 0 22px 10px; border-color: transparent transparent transparent #e7a71c; right: -10px; top: 0; content: ""; }
#sideNav ul.Cate li a { padding: 10px 0 10px 20px; display: block; color: #fff; }
#sideNav #contact-extra ul.Cate li a { padding: 0; display: inline-block; }
#sideNav ul.Cate >li.action >h3 a { background: #e7a71c; }
#sideNav ul.Cate li b[data-action="sideOpen"] { position: absolute; padding: 10px; top: 0; right: 0; color: #fff; }
#sideNav ul.Cate li ul.subUL { background: #263869; display: none; transition: none; }
#sideNav ul.Cate >li.action ul.subUL { display: block; }
#sideNav ul.Cate >li.action ul.subUL li.action { background: #404f71; }
#sideNav ul.Cate >li ul.subUL li .subULHead { position: relative; }
#sideNav ul.Cate >li ul.subUL li ul.sub2UL { background: #5f739e; display: none; box-shadow: inset 0px 1px 4px #435375; transition: none; }
#sideNav ul.Cate >li ul.subUL li.action ul.sub2UL { display: block; }
#sideNav ul.Cate >li ul.subUL li.action ul.sub2UL li.action { background: rgba(31, 77, 161, 0.6); }

/* sideNav contact-nav */
#sideNav #contact-nav { margin-top: 25px; }

#sideNav #fb-wrap , #sideNav #youtube  { margin: 10px auto; width: calc(100% - 40px); }
#sideNav #youtube iframe { width: 100%; }

/* articleBox */
#articleBox { padding: 20px 20px 40px; float: left; width: calc(100% - 320px); background: #fff; }
#articleBox ul.articleList { overflow: hidden; }
#articleBox ul.articleList li { overflow: hidden; margin: 15px 20px; float: left; width: calc((100% / 2) - 40px); }
#articleBox ul.articleList li .photoBox { margin: 0 10px; padding: 10px; background: url(/images/13/material-op50.png) #f7f7f7 center; border-radius: 10px; box-shadow: 7px 5px 10px -2px rgba(0,0,0,.1); }
#articleBox ul.articleList li .photoBox a.photo { background-color: #fff; }
#articleBox ul.articleList li .photoBox a.photo img { height: 150px; }
#articleBox ul.articleList li .info { margin: 10px 25px; }
#articleBox ul.articleList li .info h3 { height: 27px; -webkit-line-clamp: 1; }
#articleBox ul.articleList li .info h3 a { font-size: 18px; color: #333; }
#articleBox ul.articleList li .info p.cate , #articleBox ul.articleList li p.cate a { color: #4869b9; }
#articleBox ul.articleList li .info p.cate font { margin-right: 10px; }
#articleBox ul.articleList li .info p.cate font i { margin-right: 5px; }

/* sidewrap */
#sidewrap { background: url(/images/13/material-op60.png) center #254899; }

/* sidewrap sidead-list */
#sidewrap #sidead-list { position: relative; }
#sidewrap #sidead-list:before , #sidewrap #sidead-list:after { position: absolute; width: 100%; height: 9px; background: url(/images/13/header-white-wave.svg) left top repeat-x; bottom: 150px; left: 0; z-index: 1; content: ""; }
#sidewrap #sidead-list h3 , #best-product h3 { padding: 25px 0; text-align: center; font-size: 28px; color: #f0b220; }
#sidewrap #sidead-list .workframe { z-index: 2; }
#sidewrap #sidead-list ul { overflow: hidden; }
#sidewrap #sidead-list ul li { margin: 15px 10px; float: left; width: calc((100% / 4) - 20px); }
#sidewrap #sidead-list ul li a.photo img ,
#best-product .item .productsList ul li a.photo img ,
#best-product #g-map iframe { width: 100%; }
#sidewrap #sidead-list:after { height: 150px; background: #fff; bottom: 0; }

/* best-product */
#best-product { margin-top: 50px; }
#best-product h3 { color: #2b3f70; }
#best-product .item { overflow: hidden; margin-top: 20px; background: url(/images/13/material-op50.png) #f7f7f7 center; }
#best-product .item > div , #best-product .item .productsList ul li { float: left; width: 50%; }
#best-product .item .productsList ul { overflow: hidden; }
#best-product .item .productsList ul li { width: 25%; }
#best-product .item .productsList ul li:nth-child(2n) { background:  #fff; }
#best-product .item .productsList ul li a.photo { position: relative; background-size: cover; }
#best-product .item .productsList ul li a font { position: absolute; padding: 0 10px; width: calc(90% - 20px); height: 36px; background: rgba(26, 37, 62, 0.7); display: block; text-align: center; line-height: 200%; font-size: 18px; color: #fff; left: 5%; bottom: 20px; -webkit-line-clamp: 1; }

/* serchBox */
#serchBox { padding-bottom: 20px; }

/* form */
.wrap input[type="number"] , .wrap input[type="text"] , .wrap textarea { padding: 10px 20px; background: #fff; border: 2px solid #f0f0f0; border-radius: 10px; }

/* transform */
@keyframes bgWhirligig-2 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

@media screen and (max-width: 1024px) {
	.content-wrapper:before { display: none; }
	#best-product .item > div { width: 100%; }
	#sideNav { float: none; padding-bottom: 0; width: 100%; height: auto; }
	#sideNav:before { display: none; }
	#sideNav h2.sideTitle i { display: block; transition: all linear 0.3s; }
	#sideNav h2.current i {	-moz-transform: rotate(3.14159rad); -webkit-transform: rotate(3.14159rad); -o-transform: rotate(3.14159rad); -ms-transform: rotate(3.14159rad); transform: rotate(3.14159rad); }
	#sideNav .mobnav { overflow: hidden; display: none; transition: none; }
	#articleBox{ margin-left: 0; padding: 10px; float: none; width: calc(100% - 20px); }
	#sub-banner a.photo img{ height: 400px; }
}
@media screen and (max-width: 960px) {
	#sub-banner a.photo img{ height: 300px; }
}
@media screen and (max-width: 550px) {
	#sub-banner a.photo img{ height: 280px; }
	#articleBox ul.articleList li { width: calc(100% - 40px); }
	#sidewrap #sidead-list ul li { width: calc((100% / 2) - 20px); }
	#best-product .item .productsList ul li { width: 50%; }
}