/* -------------------------------- 公共 --------------------------------------- */
body { color: #3a3a3a; transition: all 0.3s ease 0s; font: 14px Arial, sans-serif; background: url("../images/noise.png"); }

.mt-55 { margin-top: 55px; }

/* ------------------------------- icon ----------------------------------------- */
[class^="icon-"], [class*=" icon"] { display: inline-block; width: 14px; height: 14px; line-height: 14px; vertical-align: text-top; opacity: 1; background: url("../images/glyphicons-mini.png") no-repeat  14px 14px; }
.icon-large { height: 48px; width: 48px; line-height: 48px; background: url("../images/glyphicons.png") no-repeat  48px 48px; }
.icon-email { background-position: -72px 0; }


/* -------------------------------- btn ------------------------------------ */
.btn { padding: 8px 12px; background-color: #fff; font-size: 16px; cursor: pointer; }
.btn.blue { background-image: linear-gradient(rgb(91, 143, 229), rgb(71, 121, 203) 99%); color: #fff; }
.btn:hover {
  opacity: 0.96;
}
.btn.download-btn { padding: 12px 22px; color: #fff; position: relative; font-weight: 600; box-shadow: rgb(0 0 0 / 30%) 0px 15px 20px -10px; font-size: 20px; background: linear-gradient(rgb(250, 84, 0) -7%, rgb(250, 62, 0) 105%); }

/* -------------------------------- header -------------------------------------------- */
.wraper { width: 100%; max-width: 1030px; background-color: #fff; margin: .5rem auto 0 auto; box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 20%);}
.header { width: 100%; background-color: var(--headerBgColor); }
.header .header-com { width: 100%; padding: .4rem .35rem .1rem .35rem; }
.header .logo { height: 100%;}
.header .logo h1 { height: 100%; width: 1.52rem; height: .55rem; padding-left: .1rem; }
.header .logo h1 a { display: block; width: 100%; height: 100%; }
.header .logo h1 a img { display: block; height: 100%; width: auto;}
.header .logo strong { margin-left: .3rem; padding: 0 .3rem; font-size: .14rem; font-weight: normal; border-left: 1px solid var(--headerColor); color: var(--headerColor); }

.header .logo-email i { margin-right: 4px; }
.header .logo-email a { font-size: .12rem; color: var(--headerEmailColor); }
.header .logo-email a:hover { color: var(--headerEmailHoverColor); }

.nav { width: 100%; padding: .2rem .35rem; background-color: var(--navBgColor); }
.nav .nav-main { height: .52rem; margin: 0 .1rem; background-color: var(--navMainBgColor); color: var(--navColor); }
.nav .nav-main ul { width: 100%; height: 100%;}
.nav .nav-main ul li { cursor: pointer; display: block; height: 100%; }
.nav .nav-main ul li a { display: block; width: 100%; height: 100%; line-height: .52rem; padding: 0 .25rem; position: relative; }
.nav .nav-main ul li:hover  { background-color: var(--navLiHoverBgColor); color: var(--navLiHoverColor); }

.nav .nav-main ul li a::after { content: ""; width: 1px; height: .2rem; background-color: #484848; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.nav .nav-main ul li:hover a::after { display: none;}

.footer { width: 100%; background-color: var(--footerBgColor); }
.footer .footer-main { width: 100%; padding: .15rem .45rem .3rem .45rem; position: relative;}
.footer .footer-main .footer-main-top { width: 100%; border-bottom: 1px solid #3c3c3c; margin-top: .2rem; }
 
.footer .footer-main .footer-info { font-size: .12rem; margin-top: .2rem; color: var(--footerColor); }
.footer .footer-main .footer-info .company-of-footer { margin-bottom: .04rem;}
.footer .footer-main .footer-info a { color: var(--footerLinkColor);}

.footer .footer-main .scoll-top-btn { padding: 16px 18px; background: var(--footerTopBtnBgColor) url("../images/scroll-top-top.png") no-repeat center center; position: absolute; right: .45rem; bottom: .35rem; }

@media screen and (max-width: 768px) {
  .header .logo strong { display: none;}
  .footer .footer-main .scoll-top-btn { display: none;}
}