@charset "UTF-8";
/**
 * Created by Bruce on 16-11-30.
 */

/* class */

.l { float: left; }
.r { float: right; }
.cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alertbg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.bodyer { width: 1200px; margin: 0 auto; position: relative; }
.page { display: flex; justify-content: center; height: 32px; margin-top: 40px; }
.page a { display: inline-block; height: 28px; line-height: 28px; padding: 0 10px; margin-left: 8px; border: 1px solid #cc3333; border-radius: 14px; }
.page a:hover { background: #cc3333; color: #fff; }
.page span { display: inline-block; height: 28px; line-height: 28px; padding: 0 10px; margin-left: 8px; }
.page .current { border: 1px solid #cc3333; border-radius: 14px; background: #cc3333; color: #fff; }
.page .disabled { display: none; border: 1px solid #ccc; border-radius: 14px; background: #ccc; }
.icon0 { width: 12px; height: 12px; border-radius: 50%; background: #555; margin: 2px 10px 0 0; }
.icon1 { width: 10px; height: 10px; border-radius: 50%; border: 4px solid #555; background: #fff; margin: 10px 0 0 -38px; }
.icon2 { width: 0; height: 0; border: 10px solid transparent; border-top: 16px solid #555; margin: 14px 0 0 10px; cursor: pointer; }
.icon2.active { transform: rotateX(180deg); margin: 4px 0 0 10px; }
.button { font-size: 20px; border-radius: 8px; padding: 8px 16px; color: #fff; background: #cc3333 }
.flex { display: flex; }
.lc { justify-content: center; }
.vc { align-items: center; }
.j-s { justify-content: space-between; }
.w-88 { width: 88%; }
.fs-20px { font-size: 20px; }
.fs-24px { font-size: 24px; }
.fs-28px { font-size: 28px; }
.c-3399cc { color: #3399cc; }
.c-cc3333 { color: #cc3333; }
.m-20px-0 { margin: 20px 0; }
.m-t-10px { margin-top: 10px; }
.m-t-100px { margin-top: 100px; }
.m-r-30px { margin-right: 30px; }
.m-l-30px { margin-left: 30px; }
.m-b-50px { margin-bottom: 50px; }
.m-bl-30px { margin: 0 0 30px 30px; }
.p-10px { padding: 10px; }
.p-30px { padding: 30px; }
.p-0-20px { padding: 0 20px; }
.p-t-20px { padding-top: 20px; }
.p-50px-0 { padding: 50px 0; }
.lh-16 { line-height: 1.6; }
.lh-22 { line-height: 2.2; }
.w-100px { width: 100px; }
.w-220px { width: 220px; }
.w-250px { width: 250px; }
.w-350px { width: 350px; }
.w-450px { width: 450px; }
.w-550px { width: 550px; }
.w-680px { width:680px; }
.w-950px { width: 950px; }
.w-9999px { width: 9999px; }
.h-36px { height: 36px; }
.h-230px { height: 230px; }
.h-290px { height: 290px; }
.h-350px { height: 350px; }
.border { border: 1px solid #ccc; }
.b-b-1px { border-bottom: 1px solid #ccc; }
.b-b-2px { border-bottom: 2px solid #cc3333; }
.b-b-4px { border-bottom: 4px solid #cc3333; margin-bottom: -4px; }
.bg-eee { background: #eee; }
.bg-fff { background: #fff; }
.transition-1 { transition: all 1s; }
.v-tt { vertical-align: text-top; }
.t-c { text-align: center; }
.o-h { overflow: hidden; }
.o-a { overflow: auto; }
.v-h { visibility: hidden; }

@keyframes hint {
    from { right: 0; }
    to { right: 100px; }
}
@keyframes move{
	0%{ margin-top: 0; }
	100%{ margin-top: 10px; }
}

.newsfirst { width: 610px; margin: auto; cursor: pointer; }
.newcont { color: #666; margin-top: 28px; }
.newcont:after { content: "[详细]"; color: #3399cc; }
.newsrow { padding: 12px; border-bottom: 1px dashed #ccc; cursor: pointer; }
.newsrow:first-child { border-top: 1px dashed #ccc; margin-top: 20px; }
.newsrow:hover .icon0 { background: #cc3333; }
.newsrow:hover .nowrap { color: #cc3333; }
.aboutcont { margin-left: 46px; padding-left: 28px; border-left: 1px dashed #ccc; }
.aboutrow { width: 550px; max-height: 280px; padding-left: 64px; overflow: auto; }
.onlinerow { position: relative; padding: 14px 100px; }
.onlinerow:nth-child(2n+1) { background: #eee; }
.onlinerow:nth-child(2n):after { content: "*"; color: #cc3333; margin: 8px; vertical-align: sub; }
.hint { position: absolute; top: 50%; right: 100px; margin-top: -10px; animation: hint 1s; }
.justify { display: inline-block; text-align: justify; line-height: 0; width: 4em; margin-top: 26px; }
.justify > span { display: inline-block; padding-left: 100%; }
.onlinerow:last-child { border-top: 1px solid #ccc; background: #fff; }
.border.bg-fff:before { content: ""; float: left; height: 540px; border-left: 1px solid #ccc; position: relative; top: 56px; left: 212px; z-index: 9; }
.honorlist { padding: 6px; margin-right: 20px; }
.honorlist.active { transform: scale(1.2); }

#scrollbar { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; }
.mCS-mytheme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #cc3333; }
.mCS-mytheme.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; }
.swiper-pagination-bullet { border: 2px solid #cc3333; background: transparent; }
.swiper-pagination-bullet-active { background: #cc3333; }
header { margin-bottom: 80px; }
footer { margin-top: 80px; line-height: 80px; text-align: center; color: #fff; background: #333; }
.nav { border-top: 8px solid #cc3333; border-bottom: 4px solid #ccc; }
.navs { margin-left: 70px; }
.navs a { display: block; width: 110px; line-height: 1.6; text-align: center; padding: 36px 0; }
.navs p { color: #ccc; font-size: 12px; }
.navs a:hover ,.navs a:hover p { color: #cc3333; }
.hover { position: absolute; bottom: -4px; width: 110px; border-bottom: 4px solid #cc3333; }
.online{ position: fixed; top: 56%; left: 0; z-index: 9; width: 150px; height: 206px; background: url(../img/icon.png) no-repeat; }
.online img:nth-child(1) { display: block; width: 130px; height: 32px; margin: 60px auto 10px; cursor: pointer; }
.online img:nth-child(2):hover { margin-left: 100px; transform: scale(3); }
.product { width: 210px; padding: 6px; margin: 20px 20px 0 0; cursor: pointer; }
.product:nth-child(4n) { margin-right: 0; }
.product:hover { box-shadow: #cc3333 0 0 20px; }

.menus { margin-top: 20px; background: #fff; cursor: pointer; }
.menus li { position: relative; width: 160px; height: 56px; line-height: 1.2; padding: 0 10px; border-bottom: 1px dashed #ccc; display: flex; align-items: center; }
.menus li:hover > p { color: #cc3333; }
.menus li:last-child { border: none; }
.menus > li { width: 200px; height: 82px; border: none; justify-content: center; }
.menus > li:hover { background: #cc3333; }
.menus > li:hover > p { color: #fff; }
.menus li:hover > ul { right: -182px; opacity: 1; transform: rotateY(0); transition: all .4s; }
.menus ul { position: absolute; z-index: 9; top: 0; right: -90px; border: 1px dashed #ccc; background: #fff; opacity: 0; transform: rotateY(90deg); }