/*----------Base----------*/
body { font-family: Arial; font-size: 12px; color: #222; line-height: 145%; }

a:link, a:visited, a:active { color: #222; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/*font*/
.font_red { color: #c9151d; }
.font_blue { color: #1a8acc; }
.font_green { color: #c4d700; }
.font_yellow { color: #fabe00; }
.font_deepblue { color: #00478b; }

/*title item*/
.titleItem { position: relative; }
.titleItem h2 { position: absolute; left: 40px; top: 30px; color: #00478b; font-size: 18px; font-weight: bolder; }
.titleItem span { position: absolute; display: block; right: 340px; top: 80px; width: 460px; text-align: right; }

/*pager*/
#pager { text-align: center; }
#pager a { display: inline-block; width: 18px; height: 18px; border: 2px solid #222; line-height: 20px; color: #222; font-weight: bolder; }

/*----------Page----------*/
.wrap { width: 1120px; margin: 0 auto; background: #ddd; border-top: solid 10px #fff100; }

.wrap > * { margin: 0 auto; width: 1020px; }

/*header*/
.header { width: 880px; background: #fff; padding: 40px 70px 10px; }
.header > a { display: block; float: left; }
.header > div { float: right; }
.header > div > * { display: inline-block; vertical-align: middle; }
.header > div > a { margin: 0 5px; }

/*menu*/
.menu { clear: right; margin-top: 20px; }
.menu a { padding-left: 20px; padding-right: 5px; border-left: 2px solid #999; line-height: 10px; }
.menu a:first-child { border-left: none; }
.menu .active, .menu a:hover { color: #e4007f; }

/*search*/
.search { position: relative; background: url("../images/base/search-bg.png") no-repeat center center; width: 147px; height: 25px; margin-left: 10px; }
.search input { border: none; width: 96px; height: 25px; margin: 0 12px; padding: 0; background-color: transparent; line-height: 25px; }
.search input:-moz-placeholder { color: #222; }
.search input::-moz-placeholder { color: #222; }
.search input:-ms-input-placeholder { color: #222; }
.search input::-webkit-input-placeholder { color: #222; }
.search a { position: absolute; right: 0; top: 0; display: block; }

/*banner*/
.banner { border-top: 6px solid #888; }

/* top_btn */
.top_btn { width: 25px; height: 25px; background: url(../images/page/top.png) 0 0 no-repeat; display: block; position: fixed; bottom: 100px; left: 50%; margin-left: 470px; }

/*main*/
.main { width: 900px; margin-top: 10px; background: #fff; padding: 50px 60px 100px; }
.index .main { margin-top: 0; }

/*footer*/
.footer { text-align: center; position: relative; }
.footer p { font-weight: bolder; font-size: 15px; padding: 5px 0; }
.footer div { background: #a40000; height: 40px; color: #fff; line-height: 40px; }
.footer a { color: #fff; }
.footer span:first-child img { margin: 0 10px; }
.footer span + span { position: absolute; right: 30px; bototm: -2px; }
.footer span + span img { margin-left: 5px; }

/*index*/
.index .banner { border: none; height: 446px; }
.index .main { padding: 0; width: 1020px; background: none; }
.index .main > div { position: relative; background: url("../images/page/index/main.png") no-repeat; width: 1022px; height: 1038px; }
.index .main > div > * { position: absolute; color: #fff; }
.index .main > div > div:first-child { top: 40px; right: 50px; width: 390px; }
.index .main > div > div:first-child a { float: right; margin-top: 15px; }
.index .main > div > div:first-child ~ div h6 { position: absolute; }
.index .main > div > div:first-child ~ div h6 a { color: #e61673; font-weight: bolder; }
.index .main > div > div:first-child ~ div h6 + img + a { display: block; padding: 20px 0; background: url("../images/page/index/bg.png"); }
.index .main > div > div:first-child ~ div ul { background: url("../images/page/index/bg-green.png"); }
.index .main > div > div:first-child ~ div li { list-style-type: disc; }
.index .main > div .pig2 { top: 490px; left: 140px; }
.index .main > div .pig2 ul { padding: 40px 45px 100px; }
.index .main > div .pig2 h6 { left: 40px; top: 40px; }
.index .main > div .pig1 { top: 195px; left: 535px; }
.index .main > div .pig1 ul { padding: 20px 0 30px 30px; }
.index .main > div .pig1 h6 { left: 40px; top: 40px; }
.index .main > div .pig3 { top: 365px; left: 760px; }
.index .main > div .pig3 ul { padding: 40px 30px 100px 45px; }
.index .main > div .pig3 h6 { left: 40px; top: 40px; }
.index .bar_top { position: absolute; top: 541px; left: 534px; width: 37px; height: 89px; background: url(../images/page/index/bar_top.png) 0 0 no-repeat; }

/*about*/
.about table { width: 100%; }
.about table th { background: url("../images/page/about/pic-02.jpg") no-repeat right top; width: 50%; height: 87px; color: #00a0e9; font-size: 18px; font-weight: bolder; text-align: left; padding: 0 0 30px 110px; }
.about table th:first-child { background: url("../images/page/about/pic-01.jpg") no-repeat left top; padding-left: 50px; }
.about table td { width: 50%; padding-left: 50px; vertical-align: top; }
.about table td:first-child { padding-left: 0; padding-right: 50px; border-right: 2px solid #333; }

/*product*/
.product h2 { font-size: 20px; height: 20px; color: #00478b; margin-bottom: 40px; font-weight: bold; background: url("../images/page/product/title-bg.png") repeat-x left center; }
.product h2 > * { float: right; }
.product h2 img:first-child { float: left; }
.product h2 span { background: #fff; line-height: 20px; padding-left: 20px; }
.product .item { position: relative; margin-bottom: 40px; }
.product .item h3 { position: absolute; width: 640px; font-size: 20px; font-weight: bolder; height: 20px; right: 7px; top: 42px; background: url("../images/page/product/title-bg.png") repeat-x left center; }
.product .item h3 > * { float: left; }
.product .item h3 img:first-child { float: right; }
.product .item h3 span { background: #efefef; line-height: 20px; padding-right: 8px; }
.product .deepGray { background: #dcdddd !important; }

.bars .category { text-align: center; }
.bars .category > li { float: left; display: inline-block; position: relative; width: 180px; text-align: center; margin: 0 22px 35px 23px; padding-bottom: 15px; background: url("../images/page/product/bars/category-bg.png") no-repeat center bottom; }
.bars .category > li > img:first-child { position: absolute; left: 10px; top: -10px; }
.bars .category h3 { width: 120px; display: inline-block; border: 10px solid; text-align: left; min-height: 34px; padding: 15px 10px 15px 30px; font-size: 15px; font-weight: bolder; background: #fff; line-height: normal; }
.bars .category .s1 { background-color: #c9151d; }
.bars .category .s1 h3 { border-color: #c9151d; }
.bars .category .s2 { background-color: #1a8acc; }
.bars .category .s2 h3 { border-color: #1a8acc; }
.bars .category .s3 { background-color: #c4d700; }
.bars .category .s3 h3 { border-color: #c4d700; }
.bars .category .s4 { background-color: #fabe00; }
.bars .category .s4 h3 { border-color: #fabe00; }
.bars h4 { font-size: 20px; font-weight: bolder; }
.bars h4 span, .bars h4 img { vertical-align: middle; }
.bars h4 img { margin-left: 10px; }
.bars > ul { margin-bottom: 45px; }
.bars > ul li { margin-top: 20px; }
.bars > ul li > div { text-align: left; padding: 15px 0; }
.bars > ul li > div img { border: 2px solid #666; width: 130px; height: auto; margin: 10px 10px 0; }
.bars > ul li > div a:first-child img, .bars > ul li > div > .big { width: auto; }
.bars > ul > li > div { margin-top: 0; padding: 0; }
.bars h5 { width: 340px; font-size: 15px; font-weight: bolder; background: repeat-x left center; }
.bars h5 div { display: inline-block; padding-right: 20px; background: #fff; text-align: left; }
.bars h5 span { display: inline-block; padding: 5px 10px; border: 5px solid; }
.bars .line-type1 { background-image: url("../images/page/product/bars/line-blue.jpg"); }
.bars .line-type1 span { border-color: #01478c; }
.bars .line-type2 { background-image: url("../images/page/product/bars/line-red.jpg"); }
.bars .line-type2 span { border-color: #d80051; }
.bars .line-type3 { background-image: url("../images/page/product/bars/line-green.jpg"); }
.bars .line-type3 span { border-color: #00913a; }
.bars > img { display: block; margin: 0 auto; }

.plates .item h3 { left: 50px; top: 50px; width: 588px; }
.plates .itemAnditem { margin-bottom: 15px; }
.plates .itemAnditem img { border: 2px solid #666; margin: 10px 13px 10px 0; }

.collars .item h3 { left: 50px; top: 50px; width: 588px; }
.collars .itemAnditem { margin-bottom: 15px; }
.collars .itemAnditem img { border: 2px solid #666; margin: 10px 13px 10px 0; }

/* proInfo */
.proInfo { width: 936px; overflow: hidden; background-color: #fff; padding-left: 37px; padding-top: 30px; padding-bottom: 20px; border-radius: 8px; }
.proInfo__heading { width: 100%; float: left; clear: both; margin-bottom: 27px; position: relative; }
.proInfo__heading > .proInfo__heading--ca, .proInfo__heading > img { position: relative; float: left; }
.proInfo__heading .proInfo__heading--ca { height: 28px; color: #fff; font-size: 17px; padding-left: 49px; display: inline-block; vertical-align: middle; z-index: 1; }
.proInfo__heading .proInfo__heading--ca span { display: inline-block; vertical-align: middle; float: left; padding-right: 16px; height: 28px; line-height: 28px; }
.proInfo__heading .proInfo__heading--ca i { display: inline-block; vertical-align: middle; width: 72px; height: 28px; }
.proInfo__heading > img { margin-top: -6px; margin-right: 18px; }
.proInfo__heading--bg { width: 80%; height: 28px; margin-right: 55px; position: absolute; top: 4px; right: 0; background: url(../images/page/proinfo/bg-bg1.jpg) right 0 repeat-x; }
.proInfo__heading--bg:after { content: " "; width: 16px; height: 17px; display: block; position: absolute; right: 0; top: 0; background: url(../images/page/proinfo/bg-bg2.png) 0 0 no-repeat; }
.proInfo__heading.s1 .proInfo__heading--ca { background: url(../images/page/proinfo/bg-heading-red1.png) 0 0 no-repeat; }
.proInfo__heading.s1 span { background-color: #D71651; }
.proInfo__heading.s1 i { background: url(../images/page/proinfo/bg-heading-red2.png) 0 0 no-repeat; }
.proInfo__heading.s2 .proInfo__heading--ca { background: url(../images/page/proinfo/bg-heading-blue1.png) 0 0 no-repeat; }
.proInfo__heading.s2 span { background-color: #1a8acc; }
.proInfo__heading.s2 i { background: url(../images/page/proinfo/bg-heading-blue2.png) 0 0 no-repeat; }
.proInfo__heading.s3 .proInfo__heading--ca { background: url(../images/page/proinfo/bg-heading-green1.png) 0 0 no-repeat; }
.proInfo__heading.s3 span { background-color: #c4d700; }
.proInfo__heading.s3 i { background: url(../images/page/proinfo/bg-heading-green2.png) 0 0 no-repeat; }
.proInfo__heading.s4 .proInfo__heading--ca { background: url(../images/page/proinfo/bg-heading-yellow1.png) 0 0 no-repeat; }
.proInfo__heading.s4 span { background-color: #fabe00; }
.proInfo__heading.s4 i { background: url(../images/page/proinfo/bg-heading-yellow2.png) 0 0 no-repeat; }
.proInfo__object { width: 375px; margin-right: 28px; float: left; }
.proInfo__object .zoomWrapper { border: 2px solid #666; }
.proInfo__object #gallery_01 { margin-top: 13px; margin-left: 1px; }
.proInfo__object #gallery_01 > a { display: inline-block; border: 2px solid #ccc; margin-right: 14px; margin-right: 12px \9; float: left; }
.proInfo__object #gallery_01 > a:last-child { margin-right: 0; }
.proInfo__object #gallery_01 > a.active { border-color: #666; }
.proInfo__body { width: 496px; min-height: 395px; float: left; overflow: hidden; background: url(../images/page/proinfo/bg-content.jpg) 0 0 no-repeat; }
.proInfo__body > h1 { width: 427px; min-height: 28px; line-height: 1.6em; padding: 5px 0; background-color: #898989; font-size: 16px; color: #fff; text-align: center; }
.proInfo__body--content { width: 427px; line-height: 130%; padding: 20px 0 0 50px; }
.proInfo__body--pic { margin-left: 16px; }

/*technology*/
.technology .titleItem span { top: 75px; line-height: 135%; }
.technology .left { margin-left: 0; }

.technologyCon { position: relative; width: 796px; height: 608px; margin: 65px auto 0; background: url(../images/page/technology/technology_bg.jpg) 0 0 no-repeat; }

/*contact*/
.form_default { margin: 60px auto 0; width: 795px; height: 490px; background: url("../images/page/contact/bg.jpg") no-repeat; }
.form_default table { float: right; width: 360px; margin: 30px 45px; }
.form_default input[type=text], .form_default textarea { display: block; padding: 0 10px; border: none; letter-spacing: 0.1em; margin-bottom: 10px; }
.form_default input[type=text] { background: url("../images/page/contact/input.jpg") no-repeat; width: 146px; height: 26px; line-height: 18px; }
.form_default textarea { width: 100%; padding: 10px; width: 340px; height: 170px; margin-bottom: 15px; background: url("../images/page/contact/textarea.jpg") no-repeat center center; }
.form_default tr td + td { padding-left: 30px; }
.form_default .line { background: url("../images/page/contact/line.jpg") repeat-x left top; }
.form_default .line td { padding-top: 15px; text-align: right; }
.form_default .line a { display: inline-block; background: url("../images/page/contact/btn.jpg"); width: 100px; height: 35px; text-align: center; line-height: 35px; }

.contact .titleItem span { line-height: 135%; top: 70px; }

/*faq*/
.faq .titleItem span { top: 60px; line-height: 135%; }
.faq > ul { margin: 40px auto; }
.faq > ul li { background: url("../images/page/faq/line.jpg") repeat-x left bottom; padding-bottom: 20px; margin-top: 30px; position: relative; }
.faq > ul h6 { background: url("../images/page/faq/question.jpg") no-repeat left center; height: 35px; padding-top: 40px; padding-left: 90px; padding-right: 100px; font-size: 15px; font-weight: bolder; }
.faq > ul div { display: none; margin: 15px 0 0; padding: 25px 50px 25px 120px; background: url("../images/page/faq/a.png") no-repeat left bottom #efefef; font-size: 13px; }
.faq .qaItem { display: block; width: 80px; height: 30px; position: absolute; right: 18px; top: 25px; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; background: url(../images/page/faq/btn-more.png) center center no-repeat; }
.faq .qaItem.is-active { background: url(../images/page/faq/btn-more-active.png) center center no-repeat; }