*{margin:0; padding:0; list-style: none;}
body {font-family:Gotham-Book, -apple-system, "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", SimSun, sans-serif; font-size:16px;font-weight: 300;}
/* 清理浮动 */
html{padding: 10px;background: #eef0f6}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1;}
.pagewidth{ width: 1280px; margin:0 auto;}
a{ text-decoration: none; transition-duration: 0.1s;}
a:hover{  text-decoration: none;}
.hide{display:none;}
img{ border:none; display: block;}
body,html{ height: 100%; }
button,textarea{-webkit-appearance: none;border-radius: 0;outline: none;}
body{
    --color:rgba(217,41,40,1);
}

.height10{height: 10px;display: block;}
/* loading screen background color */
#bonfire-pageloader {background-color:#111;}
/* loading icon color */
#bonfire-pageloader svg {fill:#fff;}
#bonfire-pageloader {position:absolute;z-index:99999999999999;width:100%;height:1000%;left:0;right:0;top:0;bottom:0;margin-top:-50px;}
.bonfire-pageloader-fade {opacity:0 !important;-webkit-transition: all .75s ease;-moz-transition: all .75s ease;-o-transition: all .75s ease;-ms-transition: all .75s ease;transition: all .75s ease;}
.bonfire-pageloader-hide {display:none;}
/* the loading icon */
.bonfire-pageloader-icon {width:160px;position:fixed ;opacity:1;top:44%;left: 50%; margin-left: -80px;text-align: center;color: #fff;}
.bonfire-pageloader-icon img{width: 100%;display: block;margin-bottom: 30px;}
.bonfire-pageloader-icon-hide {opacity:0 !important;-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-o-transition: all .25s ease;-ms-transition: all .25s ease;transition: all .25s ease;}
#bonfire-pageloader svg {
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;width:36px;height:36px;}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
.bonfire-html-onload {  -webkit-transform: translateY(-50px);-moz-transform: translateY(-50px);-ms-transform: translateY(-50px);-o-transform: translateY(-50px);transform: translateY(-50px);
-webkit-transition: all 0s ease;-moz-transition: all 0s ease;-o-transition: all 0s ease;-ms-transition: all 0s ease;transition: all 0s ease;}
html {
    height:100%;
    -webkit-backface-visibility: hidden;
    -webkit-transform-origin:top;
    -moz-transform-origin:top;
    -ms-transform-origin:top;
    -o-transform-origin:top;
    transform-origin:top;
    -webkit-transition: all .75s ease;
    -moz-transition: all .75s ease;
    -o-transition: all .75s ease;
    -ms-transition: all .75s ease;
    transition: all .75s ease;
}
.bonfire-html-onload {  
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px);
    -webkit-transition: all 0s ease;
    -moz-transition: all 0s ease;
    -o-transition: all 0s ease;
    -ms-transition: all 0s ease;
    transition: all 0s ease;
}






@font-face {
    font-family: 'Gotham-Black';
    src: url('../font/Gotham/Gotham-Black.eot');
    src: url('../font/Gotham/Gotham-Black.eot?#iefix') format('embedded-opentype'),
        url('../font/Gotham/Gotham-Black.woff2') format('woff2'),
        url('../font/Gotham/Gotham-Black.woff') format('woff'),
        url('../font/Gotham/Gotham-Black.ttf') format('truetype'),
        url('../font/Gotham/Gotham-Black.svg#Gotham-Black') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Medium';
    src: url('../font/Gotham/Gotham-Medium.eot');
    src: url('../font/Gotham/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
        url('../font/Gotham/Gotham-Medium.woff2') format('woff2'),
        url('../font/Gotham/Gotham-Medium.woff') format('woff'),
        url('../font/Gotham/Gotham-Medium.ttf') format('truetype'),
        url('../font/Gotham/Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Bold';
    src: url('../font/Gotham/Gotham-Bold.eot');
    src: url('../font/Gotham/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/Gotham/Gotham-Bold.woff2') format('woff2'),
        url('../font/Gotham/Gotham-Bold.woff') format('woff'),
        url('../font/Gotham/Gotham-Bold.ttf') format('truetype'),
        url('../font/Gotham/Gotham-Bold.svg#Gotham-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Gotham-Book';
    src: url('../font/Gotham/Gotham-Book.eot');
    src: url('../font/Gotham/Gotham-Book.eot?#iefix') format('embedded-opentype'),
        url('../font/Gotham/Gotham-Book.woff2') format('woff2'),
        url('../font/Gotham/Gotham-Book.woff') format('woff'),
        url('../font/Gotham/Gotham-Book.ttf') format('truetype'),
        url('../font/Gotham/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


.page { text-align:center; padding:30px 0px;width:100% }
.page a{ border:#e6e6e6 solid 1px; height: 40px;line-height: 40px; display: inline-block; padding-left: 18px; border-radius: 3px; padding-right: 18px; background: #fff; margin-left: 3px; margin-right: 3px; color: #666; font-size: 14px; display: inline-block; transition-duration: 0.3s; /*box-shadow: 0px 5px 5px rgba(0,0,0,0.0)*/ }
.page a:hover{height: 40px; line-height: 40px; padding-left: 18px; padding-right: 18px; background: #fff; color: #555; font-size: 14px; display: inline-block; /*box-shadow: 0px 5px 5px rgba(0,0,0,0.05);*/transform: translateY(-2px)  }
.page a.active{ background: var(--color); color: #fff; cursor:not-allowed; }


.header{ height:40px; padding-top: 20px; background: #fff; padding-top: 20px;  padding-bottom: 20px;  transition-duration: 0.3s;border-radius: 6px 6px 0px 0px; }
.header .pagewidth{ position: relative; width: auto;padding-left: 20px;padding-right: 20px}
.header .logo{ float: left;transition-duration: 0.3s; position: relative; padding-top:5px; margin-right: 17%}
.header .logo img{ display: block; height: 30px; transition-duration: 0.3s}
.header .lang{float: right;padding-top: 8px;}
.header .lang a{color: #333;font-size: 11px;background: #fff; margin-left: 10px; border-radius: 12px;float: left;height: 24px;width: 24px; line-height: 24px; text-align: center;}
.header .lang a.active{color: #fff;font-size: 11px;background: var(--color); margin-left: 10px; border-radius: 12px;float: left;height: 24px;width: 24px; line-height: 24px; text-align: center;}
.header .trigger{ display: none; }

.header .pc_menu {float:left; padding-top:5px; }
.header .pc_menu ul{ }
.header .pc_menu a { text-decoration: none;color: #333;font-size: 14px;display: block;height: 30px;line-height: 30px; padding-left: 20px;border-radius: 20px; margin-left: 10px; margin-right: 10px; padding-right: 20px; transition-duration: 0.3s; }
.header .pc_menu a:hover{ color: var(--color); font-weight: bold; background: #e6e6e6;}
.header .pc_menu ul {margin: 0;padding: 0;list-style: none;}
.header .pc_menu > ul > li { display: block;float: left;position: relative; z-index: 3 }
.header .pc_menu > ul > li:after{ }
.header .pc_menu > ul > li a.active {color: var(--color);  position: relative;background: #e6e6e6}
.header .pc_menu ul li:hover a{color: var(--color); font-weight:normal; }
.header .pc_menu ul li a i{ transition-duration: 0.3s }
.header .pc_menu ul li:hover a i{-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);}
.header .pc_menu > ul > li > ul { background-color: #fff;position: absolute;display: none;top: 100%; width: 200px; padding-top: 6px; padding-bottom: 6px; border-radius: 3px; z-index: 444; box-shadow: 0px 0px 10px rgba(0,0,0,0.2)}
.header .pc_menu > ul > li > ul:after{ position: absolute; content: ""; left:44px;  top: -6px; border: 6px solid transparent; border-top-width: 0; border-bottom-color: #fff; }
.header .pc_menu > ul > li:hover > ul { display: block; }
.header .pc_menu > ul > li > ul > li { position: relative; }
.header .pc_menu > ul > li > ul > li > ul { display:none;position: absolute;left: 100%;top: 0;}
.header .pc_menu > ul > li > ul > li:hover > ul { display:block;background-color: #333; }
.header .pc_menu > ul > li > ul{ }
.header .pc_menu > ul > li > ul > li  { height: 44px; line-height: 44px;  }
.header .pc_menu > ul > li > ul > li a { height: 44px; line-height: 44px; font-size: 14px;  color: #333!important; font-weight: normal!important; margin-left: 0; margin-right: 0; padding-left: 20px;}
.header .pc_menu > ul > li > ul > li  a:hover {  background: #f5f5f5; color: #b6343f!important; }



.bgwhite {}
.bgwhite .pc_menu a { text-decoration: none;color: #333;}
.bgwhite .pc_menu > ul > li a.active {color:var(--color);  position: relative;}
.bgwhite .pc_menu > ul > li a.active:after{ position: absolute; content: ""; bottom: 0px;  width: auto; margin-left: 0px; left: 10px; right: 10px; height: 2px; background:var(--color); border-radius: 3px;  }
.bgwhite .pc_menu a:hover{ color: var(--color)!important; font-weight: bold;}

.bgwhite .logo img.color{display: block;}
.bgwhite .logo img.white{display: none;}

.blackbg{ background: #201e24; padding-top: 10px; padding-bottom: 10px; } 



.position{  height: 50px; line-height: 50px; font-size: 14px; color: #666; border-bottom: #e6e6e6 solid 1px;  }
.position a{ margin-left: 5px; margin-right: 5px; }


.footer{ background: #222222; padding-top: 60px; padding-bottom: 60px;}
.footer .pagewidth{display: flex;justify-content:space-between;}
.footer .contact{color: #999999;width: 70%;}
.footer .contact .add{font-size: 20px; margin-bottom: 20px;}
.footer .contact .tel{font-size: 18px;margin-bottom: 10px;}
.footer .contact .fax{font-size: 18px;}
.footer .contact span{color: var(--color);}
.footer .focus{ }
.footer .focus h2{color: #999;font-size: 14px; margin-bottom: 10px;padding-top: 10px;}
.footer .focus ul{display: flex;justify-content:left; }
.footer .focus ul li { margin-right:15px; }
.footer .focus ul li a{background: #181818;transition-duration: 0.3s; height: 32px; width:32px;display: block;color: #595959;font-size: 16px; line-height: 32px; text-align: center;border-radius: 40px;}
.footer .focus ul li a:hover{background: var(--color); color: #fff}
.footer .qrcode img{width: 90px;}
.footer .qrcode p{color: #e6e6e6; font-size: 14px; text-align: center; padding-top: 10px; padding-bottom: 20px;}

.copy{background: #222222; padding-top: 30px; padding-bottom: 30px;font-size: 14px; color: #666; border-top: #373737 solid 1px; border-radius:0px 0px  6px 6px ;}
.copy span.beian{ padding-left: 30px; margin-right:30px; }
.copy span.goToTop{ float: right; }
.copy span.goToTop a{ cursor: pointer;}
.copy a{ color: #666; }
.copy a:hover{ color: #fff; }


.inner {width: 20px;height: 16px;position: absolute;top: 12px;right: 0px; }
.inner .icon-bar {width: 100%;height: 1.5px;position: absolute;left: 0;background: var(--color);-webkit-transition: all 0.3s;transition: all 0.3s;}
.inner .icon-bar.top {top: 0;}
.inner .icon-bar.middle {top: 50%;margin-top: -1px;}
.inner .icon-bar.bottom {bottom: 0;}
.bgwhite .inner .icon-bar {background:var(--color);}
.main_nav {display: table;width: 50%;height: 100%;position: fixed;top: 0;right: -50%;bottom: 0;background: #fff;z-index: 100;-webkit-transition: all 0.4s cubic-bezier(0.63, 0.35, 0.1, 0.95);transition: all 0.4s cubic-bezier(0.63, 0.35, 0.1, 0.95);}
.main_nav .close_nav {width: 20px;height: 20px;position: absolute;  top: 25px;  right: 25px;cursor: pointer;}
.main_nav .close_nav:before,
.main_nav .close_nav:after {content: '';width: 100%;height: 1px;background: #111111;position: absolute;top: 50%;left: 0;margin-top: -1px;-webkit-transition: all 0.3s 0.3s;transition: all 0.3s 0.3s;}
.main_nav .close_nav:before {-webkit-transform: rotate(0);transform: rotate(0);}
.main_nav .close_nav:after {-webkit-transform: rotate(0);transform: rotate(0);}
.main_nav.open {right: 0;}
.main_nav.open .close_nav:before {-webkit-transform: rotate(45deg);transform: rotate(45deg);transition-delay: 0;}
.main_nav.open .close_nav:after {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);transition-delay: 0;}
.main_nav .menu {display: table-cell;vertical-align: middle;text-align: center;}
.main_nav .menu li {display: block;position: relative;}
.main_nav .menu li:not(:last-child) {margin-bottom: 5px;}
.main_nav .menu li.animated {left: 25px;opacity: 0;-webkit-transition: all 0.3s;transition: all 0.3s; margin-bottom: 20px;}
.main_nav .menu li.animated.show {left: 0;opacity: 1;}
.main_nav .menu li a {display: block;font-size: 20px;font-weight: 700;color: #111111;}
.main_nav .menu li a.active {color: var(--color);}
.main_nav .menu li ul {display: none;max-width: 80%;margin: 10px auto;}
.main_nav .menu li ul li {display:block;position: relative;}
.main_nav .menu li ul li a {font-size: 14px;font-weight: normal;color: rgba(17, 17, 17, 0.6);padding: 0 5px;-webkit-transition: all 0.3s;transition: all 0.3s;}
.main_nav .menu li ul li a.active,
.main_nav .menu li ul li a:hover {color: #111111;}
.main_nav .menu li ul li a.active {font-weight: bold;}
.main_overlay {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 99;background: rgba(17, 17, 17, 0.9);opacity: 0;visibility: hidden;cursor: pointer;-webkit-transition: all 0.4s cubic-bezier(0.63, 0.35, 0.1, 0.95);transition: all 0.4s cubic-bezier(0.63, 0.35, 0.1, 0.95);}
.main_overlay.open {opacity: 1;visibility: visible;}

/* 返回顶部
================================================== */
.progress-wrap {position: fixed;right: 50px;bottom: 50px;height: 46px;width: 46px;cursor: pointer;display: block;border-radius: 50px;box-shadow: inset  0 0 0 2px rgba(0,0,0,0.4);z-index: 10000;opacity: 0;visibility: hidden;transform: translateY(15px);-webkit-transition: all 200ms linear;transition: all 200ms linear;}
.progress-wrap.active-progress {opacity: 1;visibility: visible;transform: translateY(0);}
.progress-wrap::after {position: absolute;font-family: 'remixicon';content: '\ea76';text-align: center;line-height: 46px;font-size: 16px;color: var(--color);left: 0;top: 0;height: 46px;width: 46px;cursor: pointer;display: block;z-index: 1;-webkit-transition: all 200ms linear;transition: all 200ms linear;}
.progress-wrap:hover::after {opacity: 0;}
.progress-wrap::before {position: absolute;font-family: 'remixicon';content: '\ea76';text-align: center;line-height: 46px;font-size: 16px;opacity: 0;background-image: linear-gradient(298deg, var(--color), var(--color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;left: 0;top: 0;height: 46px;width: 46px;cursor: pointer;display: block;z-index: 2;-webkit-transition: all 200ms linear;transition: all 200ms linear;}
.progress-wrap:hover::before {opacity: 1;}
.progress-wrap svg path { fill: none; }
.progress-wrap svg.progress-circle path {stroke: var(--color);stroke-width: 4;box-sizing:border-box;-webkit-transition: all 200ms linear;transition: all 200ms linear;}
body.light .progress-wrap {box-shadow: inset  0 0 0 2px rgba(0,0,0,0.2);}
body.light .progress-wrap::after {color: var(--color);}
body.light .progress-wrap svg.progress-circle path {stroke: var(--color);}
.switch,
.circle {-webkit-transition: all 300ms linear;transition: all 300ms linear; } 
.switch {width: 80px;height: 4px;border-radius: 27px;background-image: linear-gradient(298deg, var(--color), var(--color));position: fixed;left: 50px;top: 75px;display: block;margin: 0 auto;text-align: center;opacity: 1;
  z-index: 33333;transition: all 300ms linear;}
.circle {cursor: pointer;position: absolute;top: 50%;transform: translateY(-50%);left: -5px;width: 40px;height: 40px;border-radius: 50%;background: var(--color);box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);animation: border-transform 10s linear infinite alternate forwards;}
.circle:hover {box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);}
.circle:before {position: absolute;font-family: 'unicons';content: '🌙';top: 0;left: 0;z-index: 2;font-size: 20px;line-height: 40px;text-align: center;width: 100%;height: 40px;opacity: 1;color: var(--color);-webkit-transition: all 300ms linear;transition: all 300ms linear; }
.circle:after {position: absolute;font-family: 'unicons';content: '🌞';top: 0;left: 0;z-index: 2;font-size: 20px;line-height: 40px;text-align: center;width: 100%;height: 40px;color: var(--color);opacity: 0;-webkit-transition: all 300ms linear;transition: all 300ms linear; }
.switched {}
.switched .circle {left: 45px;box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);background: var(--color);}
.switched .circle:hover {box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);}
.switched .circle:before {opacity: 0;}
.switched .circle:after {opacity: 1;}




/*大屏幕*/
@media screen and (max-width: 1920px) {}
/*中屏幕*/
@media screen and (max-width: 1440px) {}
/*平板*/
@media screen and (max-width: 768px) {
.pagewidth{ width: auto; margin: 0 20px;display:inherit!important;}
html{padding: 0px;background: #eef0f6}
.height10{height: 0px;display: block;}

.page { text-align:center; padding:20px 0px; }
.page a{ border:#e6e6e6 solid 1px; height: 40px;line-height: 40px; display: inline-block; padding-left: 18px; border-radius: 3px; padding-right: 18px; background: #fff; margin-left: 3px; margin-right: 3px; color: #666; font-size: 14px; display: inline-block; transition-duration: 0.3s; /*box-shadow: 0px 5px 5px rgba(0,0,0,0.0)*/ }
.page a:hover{height: 40px; line-height: 40px; padding-left: 18px; padding-right: 18px; background: #fff; color: #555; font-size: 14px; display: inline-block; /*box-shadow: 0px 5px 5px rgba(0,0,0,0.05);*/transform: translateY(-2px)  }
.page a.active{ background:var(--color); color: #fff; cursor:not-allowed; }

.header{ height:40px; padding-top: 5px; background: #fff;   padding-bottom: 5px;  transition-duration: 0.3s;position: fixed; z-index: 22; left: 0px;right: 0px; top: 0px;border-radius:0 }
.header .pagewidth{ position: relative;padding:0 }
.header .logo{ float: left;transition-duration: 0.3s; position: relative;height:40px; }
.header .logo img{ display: block; height: 30px; transition-duration: 0.3s}
.header .trigger{ display:block; }
.header .pc_menu {display: none;}

.header .logo{margin-right: 0%}
.header .logo img{ display: block; height: 30px; transition-duration: 0.3s}
.header .lang{float: right;padding-top: 8px; margin-right: 100px;}
.header .lang a{color: #333;font-size: 11px;background: #fff; margin-left: 10px; border-radius: 12px;float: left;height: 24px;width: 24px; line-height: 24px; text-align: center;}
.header .lang a.active{color: #fff;font-size: 11px;background: var(--color); margin-left: 10px; border-radius: 12px;float: left;height: 24px;width: 24px; line-height: 24px; text-align: center;}

.bgwhite {position: fixed; z-index: 22; left: 0px;right: 0px; top: 0px;}


.footer{ background: #222222; padding-top: 30px; padding-bottom: 30px;}
.footer .pagewidth{display: initial;justify-content:space-between;}
.footer .contact{color: #999999;width: auto;padding-left: 15px; padding-right: 15px;}
.footer .contact .add{font-size: 20px; margin-bottom: 20px;}
.footer .contact .tel{font-size: 18px;margin-bottom: 10px;}
.footer .contact .fax{font-size: 18px;}
.footer .contact span{color: var(--color);}
.footer .focus{ padding-left: 15px; padding-right: 15px;padding-top: 30px;}
.footer .focus h2{color: #999;font-size: 14px; margin-bottom: 10px;padding-top: 10px;}
.footer .focus ul{display: flex;justify-content:left; }
.footer .focus ul li { margin-right:15px; }
.footer .focus ul li a{background: #181818;transition-duration: 0.3s; height: 32px; width:32px;display: block;color: #595959;font-size: 16px; line-height: 32px; text-align: center;border-radius: 40px;}
.footer .focus ul li a:hover{background: var(--color); color: #fff}
.footer .qrcode{display: none;}

.copy{background: #222222; padding-top: 20px; padding-bottom: 20px;font-size: 14px; line-height: 1.6em; text-align: center; color: #666; border-top: #373737 solid 1px; border-radius:0px}
.copy span.beian{ padding-left: 0px;display:block; }
.copy span.goToTop{ float: none; }
.copy span.goToTop a{ cursor: pointer;}
.copy a{ color: #666; }
.copy a:hover{ color: #222; }

.progress-wrap {right: 20px;bottom: 100px;}

}
/*手机*/
@media screen and (max-width: 480px) {}
/*小尺寸手机*/
@media screen and (max-width: 320px) {}
/*横屏*/
@media all and (orientation : landscape) {} 
/*竖屏*/
@media all and (orientation : portrait){}