@font-face {font-family: "iconfont";
   src: url('../font/iconfont.eot'); 
   src: url('../font/iconfont.eot') format('embedded-opentype'), 
   url('') format('woff2'),
   url('../font/iconfont.woff') format('woff'),
   url('../font/iconfont.ttf') format('truetype'), 
   url('') format('svg'); 
}
@font-face {
   font-family: 'Gotham Bold';
   src: url('');
}

@font-face {
   font-family: 'Gotham Book';
   src: url('');
}

@font-face {
   font-family: 'Gotham BookItalic';
   src: url('');
}

.iconfont {font-family: "iconfont" !important;}
* {
   margin: 0;
   padding: 0;
}
a {text-decoration:none !important;}
li {list-style: none;}
input {outline: none;}
i {font-style: normal;}


@media (max-width: 768px) {
   #header {height: 50px;}
   #header .navbar-default {width: 100%;position: fixed;top: 0;left: 0;z-index: 100;}
   #header .navbar-header {line-height: 50px;background-color: #FFF;}
   #header .navbar-header .navbar-toggle {border: none;background-color: #FFF;}
   #header .navbar-header .navbar-toggle .icon-bar {background-color: #000;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
   #header .navbar-header .on .icon-bar:nth-child(1) {transform:rotate(45deg);margin-top: 8px;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
   #header .navbar-header .on .icon-bar:nth-child(2) {opacity: 0;-webkit-transition-duration: 0ms;transition-duration: 0ms;}
   #header .navbar-header .on .icon-bar:nth-child(3) {transform:rotate(-45deg);margin-top: -8px;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
   #header .navbar-header .logo {width: 95px;height: 20px;margin-left: 10px;}
   #header .navMenu {background-image: url("../image/navBg.png");background-repeat: no-repeat;background-size: 100% 100%;padding: 50px 0 40px;}
   #header .navMenu .nav .list {text-align: center;margin-bottom: 8px;}
   #header .navMenu .nav .list ul {display: none;}
   #header .navMenu .nav a {font-size: 20px;color: #FFF;font-weight: 100;}
   #header .navMenu .nav .on a{font-size: 22px;font-weight: initial;}
   #header .navMenu .search {width: 80%;height: 40px;margin: 50px auto 0;position: relative;}
   #header .navMenu .search input {width: 100%;height: 100%;border-radius: 50px;border: none;padding: 0 20px;font-size: 20px;}
   #header .navMenu .search input#header .navMenu .search i {height: 40px;line-height: 40px;color: #4ec401;font-size: 31px;position: absolute;top: 0;right: 7px;}

   #footer {background-color: #323030;margin-top: 60px;}
   #footer .bottomNav {margin-bottom: 0;padding: 15px 40px 40px;}
   #footer .bottomNav > li {padding: 14px 0;color: #FFF;font-size: 18px;letter-spacing: 2px;border-bottom: 1px solid rgba(255, 255, 255, .07);position: relative;}
   #footer .bottomNav > li i {display: inline-block;width: 40px;height: 40px;position: absolute;right: 0;top: 7px;}
   #footer .bottomNav > li i::before, #footer .bottomNav > li i::after {content: "";width: 16px;height: 2px;background-color: #FFF;position: absolute;right: 12px;top: 19px;}
   #footer .bottomNav > li i::after {transform: rotate(90deg);-webkit-transition-duration: 300ms;transition-duration: 300ms;}
   #footer .bottomNav .on {padding: 14px 0 0;}
   #footer .bottomNav .on i::after{transform: rotate(0deg);}
   #footer .bottomNav .navList {height: 0;overflow: hidden;}
   #footer .bottomNav .navList li {height: 40px;line-height: 40px;color: rgba(255, 255, 255, .5);font-size: 16px;}
   #footer .contact {padding: 0 40px 50px;}
   #footer .contact p:nth-child(1) {color: #01DD62;letter-spacing: 1px;margin-bottom: 4px;}
   #footer .contact p:nth-child(2) {color: #01DD62;font-size: 30px;font-weight: bold;}
   #footer .contact p:nth-child(3) img {width: 40px;height: 40px;margin-right: 10px;}
   #footer .siteinfo {background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%);}
   #footer .siteinfo .keepOnRecordInfo {padding: 30px 0 30px 30px;color: #FFF;}
   #footer .siteinfo .keepOnRecordInfo span:nth-child(1) {display: block;letter-spacing: 1px;}
   #footer .siteinfo .keepOnRecordInfo span:nth-child(2) {display: block;margin-top: 10px;}
   #footer .siteinfo .backUp {height: 50px;line-height: 50px;color: #FFF;padding: 0 30px 0;background-color: rgba(255, 255, 255, .2);}
   #footer .siteinfo .backUp span {font-weight: bold;}
   #footer .siteinfo .backUp i {float: right;}
}

@media (min-width: 769px) and (max-width: 1100px) {
   #header {height: 80px;}
   #header .navbar-default {width: 100%;height: 80px;line-height: 80px;padding: 0 20px;position: fixed;top: 0;left: 0;z-index: 100;background-color: #FFF;transition: all 1s;}
   #header .navbar-header .logo {width: 95px;height: 20px;}
   #header .navMenu {display: block;float: right;}
   #header .navMenu .nav {float: left;}
   #header .navMenu .nav .list {width: 80px;text-align: center;float: left;}
   #header .navMenu .nav .list>a {padding: 0;color: #41210f;background-color: #FFF;}
   #header .navMenu .nav .list ul {display: none;background-color: rgba(255, 255, 255, .94);}
   #header .navMenu .nav .list ul li {height: 40px;line-height: 40px;font-size: 12px;cursor: pointer;}
   #header .navMenu .nav .list ul li a {width: 100%;display: inline-block;color: #41210f;}
   #header .navMenu .nav .list:hover ul {display: block;}
   #header .navMenu .nav .list ul li:hover a {color: #01DD62;}
   #header .navMenu .nav .on>a {color: #01DD62;}
   #header .navMenu .search {width:40px;height: 40px;float: left;position: relative;top: 21px;margin-left: 10px;}
   #header .navMenu .search input {width: 268px;height: 0%;font-size: 14px;position: absolute;top: 59px;left: -210px;transition: all .3s;border: none;box-shadow: 0 8px 16px rgba(0, 0, 0, .1);box-sizing: border-box;text-indent: 15px;}
   #header .navMenu .search input::-webkit-input-placeholder,
   #header .navMenu .search input::-moz-placeholder,
   #header .navMenu .search input:-ms-input-placeholder,
   #header .navMenu .search input:-moz-placeholder {color: #999;}
   #header .navMenu .search i {position: absolute;top: 0;right: 0;cursor: pointer;height: 40px;line-height: 40px;font-size: 30px;width: 40px;text-align: center;color: #FFF;border-radius: 50%;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);transition: all .3s;}

   #footer {background-color: #323030;}
   #footer .bottomNav {margin-bottom: 0;padding: 15px 40px 40px;}
   #footer .bottomNav > li {padding: 14px 0;color: #FFF;font-size: 18px;letter-spacing: 2px;border-bottom: 1px solid rgba(255, 255, 255, .07);position: relative;}
   #footer .bottomNav > li i {display: inline-block;width: 40px;height: 40px;position: absolute;right: 0;top: 7px;cursor: pointer;}
   #footer .bottomNav > li i::before, #footer .bottomNav > li i::after {content: "";width: 16px;height: 2px;background-color: #FFF;position: absolute;right: 12px;top: 19px;}
   #footer .bottomNav > li i::after {transform: rotate(90deg);-webkit-transition-duration: 300ms;transition-duration: 300ms;}
   #footer .bottomNav .on {padding: 14px 0 0;}
   #footer .bottomNav .on i::after{transform: rotate(0deg);}
   #footer .bottomNav .navList {height: 0;overflow: hidden;}
   #footer .bottomNav .navList li {height: 40px;line-height: 40px;color: rgba(255, 255, 255, .5);font-size: 16px;cursor: pointer;}
   #footer .contact {padding: 0 40px 50px;}
   #footer .contact p:nth-child(1) {color: #01DD62;letter-spacing: 1px;margin-bottom: 4px;}
   #footer .contact p:nth-child(2) {color: #01DD62;font-size: 30px;font-weight: bold;}
   #footer .contact p:nth-child(3) img {width: 40px;height: 40px;margin-right: 10px;}
   #footer .siteinfo {background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%);}
   #footer .siteinfo .keepOnRecordInfo {padding: 30px 0 30px 30px;color: #FFF;}
   #footer .siteinfo .keepOnRecordInfo span:nth-child(1) {display: block;letter-spacing: 1px;}
   #footer .siteinfo .keepOnRecordInfo span:nth-child(2) {display: block;margin-top: 10px;}
   #footer .siteinfo .backUp {height: 50px;line-height: 50px;color: #FFF;padding: 0 30px 0;background-color: rgba(255, 255, 255, .2);}
   #footer .siteinfo .backUp span {font-weight: bold;}
   #footer .siteinfo .backUp i {float: right;}
}

@media (min-width: 1100px) {
   #header {height: 80px;}
   #header .navbar-default {width: 100%;height: 80px;line-height: 80px;padding: 0 80px;position: fixed;top: 0;left: 0;z-index: 100;background-color: #FFF;transition: all 1s;}
   #header .navbar-header .logo {width: 160px;height: 35px;}
   #header .navMenu {display: block;float: right;}
   #header .navMenu .nav {float: left;}
   #header .navMenu .nav .list {width: 100px;text-align: center;float: left;}
   #header .navMenu .nav .list>a {padding: 0;color: #41210f;background-color: #FFF;}
   #header .navMenu .nav .list ul {display: none;background-color: rgba(255, 255, 255, .94);}
   #header .navMenu .nav .list ul li {height: 40px;line-height: 40px;font-size: 12px;cursor: pointer;}
   #header .navMenu .nav .list ul li a {width: 100%;display: inline-block;color: #41210f;}
   #header .navMenu .nav .list:hover ul {display: block;}
   #header .navMenu .nav .list ul li:hover a {color: #01DD62;}
   #header .navMenu .nav .on>a {color: #01DD62;}
   #header .navMenu .search {width:40px;height: 40px;float: left;position: relative;top: 21px;margin-left: 10px;}
   #header .navMenu .search input {width: 268px;height: 0%;font-size: 14px;position: absolute;top: 59px;left: -210px;transition: all .3s;border: none;box-shadow: 0 8px 16px rgba(0, 0, 0, .1);box-sizing: border-box;text-indent: 15px;}
   #header .navMenu .search input::-webkit-input-placeholder,
   #header .navMenu .search input::-moz-placeholder,
   #header .navMenu .search input:-ms-input-placeholder,
   #header .navMenu .search input:-moz-placeholder {color: #999;}
   #header .navMenu .search i {position: absolute;top: 0;right: 0;cursor: pointer;height: 40px;line-height: 40px;font-size: 30px;width: 40px;text-align: center;color: #FFF;border-radius: 50%;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);transition: all .3s;}

   #footer {background-color: #323030;}
   #footer .bottomNav {margin-bottom: 0;padding: 60px 80px 40px;display: flex;flex-wrap: nowrap;justify-content: space-between;}
   #footer .bottomNav > li {padding: 14px 0;color: #FFF;font-size: 18px;letter-spacing: 2px;position: relative;}
   #footer .bottomNav .navList {margin-top: 15px;}
   #footer .bottomNav .navList li {height: 40px;line-height: 40px;font-size: 15px;cursor: pointer;}
   #footer .bottomNav .navList li a {color: rgba(255, 255, 255, .5);}
   #footer .bottomNav .navList li:hover a {color: #e0dfdf;}
   #footer .contact {padding: 40px 0;margin: 0 80px;border-top: 1px solid rgba(211, 211, 211, .04);position: relative;}
   #footer .contact p:nth-child(1) {color: #01DD62;letter-spacing: 1px;margin-bottom: 4px;}
   #footer .contact p:nth-child(2) {color: #01DD62;font-size: 30px;font-weight: bold;}
   #footer .contact p:nth-child(3) {position: absolute;bottom: 60px;right: 0;}
   #footer .contact p:nth-child(3) span {position: relative;}
   #footer .contact p:nth-child(3) span::after {content: "";width: 20px;height: 20px;display: none;transform: rotate(45deg);position: absolute;top: -35px;left: 10px;z-index: 0;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);}
   #footer .contact p:nth-child(3) span .icon {width: 40px;height: 40px;margin-right: 10px;cursor: pointer;}
   #footer .contact p:nth-child(3) span .code {width: 110px;height: 110px;position: absolute;top: -130px;left: -35px;z-index: 1;display: none;padding:5px;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);}
   #footer .contact p:nth-child(3) span:hover::after, #footer .contact p:nth-child(3) span:hover .code {display: block;}
   #footer .siteinfo {background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%);position: relative;}
   #footer .siteinfo .keepOnRecordInfo {padding: 15px 80px;color: #FFF;}
   #footer .siteinfo .keepOnRecordInfo span:nth-child(1) {letter-spacing: 1px;}
   #footer .siteinfo .keepOnRecordInfo span:nth-child(2) {margin-left: 10px;}
   #footer .siteinfo .backUp {height: 50px;line-height: 50px;color: #FFF;padding: 0 30px 0;background-color: rgba(255, 255, 255, .2);position: absolute;top: 0;right: 80px;cursor: pointer;}
   #footer .siteinfo .backUp span {font-weight: bold;}
   #footer .siteinfo .backUp i {float: right;}
}