/*前端样式*/
/*====全局基础样式（开始）============================================================*/
/* 颜色变量 */
:root { --primary-color: #00a0ea; --secondary-color: #6c757d; --success-color: #28a745; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #17a2b8; --light-color: #f8f9fa; --dark-color: #343a40; --text-color: #333; --text-light: #666; --border-color: #eaeaea; --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }

* { margin: 0; padding: 0; box-sizing: border-box }

html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% }

body { font: 14px/1.5 Arial, microsoft yahei; color: #555; background: #eee; padding-top: 80px }

a { color: #333; text-decoration: none }

a:hover,
a:focus { text-decoration: none }

p,
ul,
li { margin: 0; padding: 0 }

input,
button { border: none; font-family: microsoft yahei }

label { font-weight: normal }

ul,
li { list-style: none }

.container { width: 100%; padding: 0 15px; margin-right: auto; margin-left: auto }

.btn-more { float: right; font-size: 12px; background: #00a0ea; color: #fff; padding: 5px 10px; text-transform: uppercase; }

.btn-more:hover { background: #0080c0; color: #fff; }

.btn-primary { text-decoration: none; color: var(--primary-color); border: 1px solid var(--primary-color); padding: 8px 20px; display: inline-block; text-transform: uppercase; transition: transform 0.2s ease; }

.btn-primary:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); }

/*====全局基础样式（结束）============================================================*/
/*====头部样式（开始）============================================================*/
header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #fff; /* box-shadow: 0 0 2px #999; */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); min-height: 80px; }

header .container { display: flex; justify-content: space-between; align-items: center; height: 80px; }

header .logo img { height: 60px; display: block; }

/* 桌面端的菜单 */
header .nav { display: flex; }

header .nav a { display: block; padding: 30px 20px; font-size: 16px; line-height: 20px; color: #666; }

header .nav a:hover { color: #157efb; }

header .nav > li > a:hover,
header .nav > .active > a,
header .nav > .active > a:focus,
header .nav > .active > a:hover { background: #00a0ea; color: #fff; font-weight: bold }

/* 移动端的菜单 */
header .mobile-nav-button { display: none; }

header .mobile-nav-toggle { width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 1.2rem; }

/* 移动端导航菜单 */
.mobile-nav,
.mobile-nav-menu { position: fixed; top: 0; right: -300px; width: 300px; height: 100vh; background-color: #fff; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); z-index: 9999; transition: all 0.3s ease; overflow-y: auto; }

.mobile-nav.active,
.mobile-nav-menu.active { right: 0; }

/* 移动端导航头部 */
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--border-color); }

.mobile-logo img { height: 40px; }

.mobile-nav-close { width: 35px; height: 35px; border: none; background-color: transparent; font-size: 1.25rem; color: var(--dark-color); cursor: pointer; display: flex; align-items: center; justify-content: center; }

.mobile-nav-list { list-style: none; padding: 20px; }

.mobile-nav-list li { margin-bottom: 10px; }

.mobile-nav-list a { display: block; font-size: 1rem; font-weight: 500; color: var(--text-color); padding: 10px 0; border-bottom: 1px solid var(--border-color); }

.mobile-nav-list a.active,
.mobile-nav-list a:hover { color: var(--primary-color); font-weight: 800; }

.mobile-dropdown-menu { list-style: none; padding-left: 20px; display: none; }

.mobile-dropdown.active .mobile-dropdown-menu { display: block; }

.mobile-dropdown-toggle::after { content: ' \f107'; font-family: 'Font Awesome 5 Free'; font-weight: 900; float: right; }

.mobile-dropdown.active .mobile-dropdown-toggle::after { content: ' \f106'; }

/*====头部样式（结束）============================================================*/
/*====尾部样式（开始）============================================================*/
footer { background: #333; color: rgba(255, 255, 255, 0.7); border-top: 1px solid #444; padding: 60px 0 30px; }

footer a { color: #fff; }

footer > .wrapper { display: flex; flex-wrap: wrap; gap: 30px; }

footer .company,
footer .copyright,
footer .links { flex: 1; min-width: 250px; }

footer h5 { font-size: 1.2rem; line-height: 20px; color: #fff; margin-bottom: 20px; }

footer .company-infos { line-height: 1.8; margin-top: 10px; }

footer .company-contact { line-height: 2; }

footer .company-contact i { margin-right: 5px; color: #00a0ea; }

footer .copyright { display: flex; flex-direction: column; /* align-items: center; */ }

footer .form-search { margin-bottom: 20px }

footer .input-group { position: relative; display: flex; width: 100%; max-width: 300px }

footer .input-group .form-control { width: 100%; padding: 6px 12px; border: 1px solid #ddd; border-right: none; border-radius: 4px 0 0 4px }

footer .input-group .btn { padding: 6px 12px; background: #00a0ea; color: #fff; border: none; border-radius: 0 4px 4px 0; cursor: pointer; min-width: 60px; }

footer .input-group .btn:hover { background: #0090d0 }

/*====尾部样式（结束）============================================================*/
/*====网格（开始）============================================================*/
.row { display: flex; flex-wrap: wrap; }

.row .col { padding: 0 15px; }

.m1 { flex: 0 0 8.333333%; max-width: 8.333333% }

.m2 { flex: 0 0 16.666667%; max-width: 16.666667% }

.m3 { flex: 0 0 25%; max-width: 25% }

.m4 { flex: 0 0 33.333333%; max-width: 33.333333% }

.m5 { flex: 0 0 41.666667%; max-width: 41.666667% }

.m6 { flex: 0 0 50%; max-width: 50% }

.m7 { flex: 0 0 58.333333%; max-width: 58.333333% }

.m8 { flex: 0 0 66.666667%; max-width: 66.666667% }

.m9 { flex: 0 0 75%; max-width: 75% }

.m10 { flex: 0 0 83.333333%; max-width: 83.333333% }

.m11 { flex: 0 0 91.666667%; max-width: 91.666667% }

.m12 { flex: 0 0 100%; max-width: 100% }

/*====网格（结束）============================================================*/

/*====分页（开始）============================================================*/
.pagination { display: block; text-align: center; margin: 50px 0 }
.pagination > li { display: inline-block }
.pagination > li > a, .pagination > li > span { border: 0; margin: 0; padding: 10px 16px; color: #666 }
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus { background-color: var(--primary-color); color: #fff }



/*====响应式样式（开始）============================================================*/
@media (min-width:768px) {
    .container { max-width: 750px }
}

@media (min-width:992px) {
    .container { max-width: 970px }
}

@media (min-width:1200px) {
    .container { max-width: 1170px }
}

/* 响应移动端 */
@media (max-width:767px) {
    footer > .wrapper { flex-direction: column; align-items: flex-start; gap: 40px; }

    header .mobile-nav-button { display: block; }

    .desktop-nav { display: none; }
}

/*====响应式样式（结束）============================================================*/
@keyframes fadeOut {
    0% { opacity: 1 }

    100% { opacity: 0 }
}