/* ===============================================================
    * header
=============================================================== */
.cm-header {position: fixed; left: 0; right: 0; top: 0; height: 100px; z-index: 999; background: rgba(17,17,17,.8);}
/* .header-contact {padding: 5px 0;} */
/* .contact-list {display: flex; justify-content: flex-start; align-items: center;} */
/* .contact-item {height: 28px; line-height: 25px; padding: 0 7px; z-index: 999;} */


.header {display: flex; justify-content: space-between; align-items: center; height: 100px;}
.header-left {position: relative;}
.header-logo {position: relative;}
.header-logo a img {width: 175px;}
.header-logo .logo-fixed {display: none;}


.contact-list p {height: 19px; line-height: 19px; font-size: 16px; text-align: center; color: #fff; padding: 0 10px;}
.contact-list p a {font-size: 16px; color: #fff;}
.contact-list p.bg1 {border-top-left-radius: 6px; border-top-right-radius: 6px;}
.contact-list p.bg-dark {background: #222; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;}


.nav-list {display: flex; justify-content: flex-end;}
.nav-main {position: relative; height: 100px; line-height: 100px;}
.nav-main span {cursor: pointer; position: relative; font-size: 16px; line-height: 60px; display: inline-block; margin-left: 50px; color: #fff;}
.nav-main:first-of-type span {margin-left: 0;}
.nav-main span.font1 {font-size: 17px;}
.nav-main span:after {opacity: 0; z-index: -1; content: ''; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 110%; height: 6px; background: #61848c; transition: .3s;}
.nav-main:hover span:after {opacity: 1;}
.nav-sub {display: none; position: absolute; width: 220px; padding: 20px 0 20px 20px; top: 100%; left: 30px; background: #eee; line-height: 34px;}
.nav-main:first-of-type .nav-sub {left: -20px;}
.nav-sub a {font-size: 14px; line-height: 34px;}
.nav-sub a:hover {color: #61848c;}
.nav-main:hover .nav-sub {display: block;}

/* fixed style */
.cm-header.fixed {background: #fff; height: 100px;}
.cm-header.fixed .width-max {position: relative;}
.cm-header.fixed .header-contact {position: absolute; right: 0px; top: 0;}
.cm-header.fixed .header-logo {margin-top: 5px;}
.cm-header.fixed .logo-fixed {display: block;}
.cm-header.fixed .logo-normal {display: none;}
.cm-header.fixed .header {height: 100px;}
.cm-header.fixed .nav-main span {color: #222; line-height: 1; margin-top: 40px;}
.cm-header.fixed .nav-main span:after {background: #c5d1d9;bottom: 0;}
.cm-header.fixed .nav-sub {top: 100px;}

@media (max-width: 820px){
    .cm-header {height: 60px; background: #fff;}
    .cm-header.fixed {height: 60px;}
    .cm-header.fixed .header {height: 60px;}
    .cm-header.fixed .header-logo {margin-top: 0;}
    .cm-header.fixed .header-icon span {background: #222;}
    .header-contact {display: none;}
    .header {height: 60px; display: flex; justify-content: space-between; align-items: center;}
    .nav-list {display: none;}
    .header-logo a img {width: 145px;}
    .header-logo .logo-normal {display: none;}
    .header-logo .logo-fixed {display: block;}
    .header-icon {position: relative; width: 18px; height: 16px; cursor: pointer;}
    .header-icon span {position: absolute; height: 2px; background: #222;}
    .line-a {width: 18px; left: 50%; top: 0; transform: translateX(-50%); transition: .3s;}
    .line-b {width: 18px; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: .3s;}
    .line-c {width: 18px; left: 50%; bottom: 0; transform: translateX(-50%); transition: .3s;}

    body.nav-active .line-a {top: 50%;-webkit-transform: translateX(-50%) rotate(45deg);transform: translateX(-50%) rotate(45deg);}
    body.nav-active .line-b {display: none;}
    body.nav-active .line-c {bottom: initial;top: 50%;-webkit-transform: translateX(-50%) rotate(-45deg);transform: translateX(-50%) rotate(-45deg);}

    body.nav-active .cm-header {background: #e8e8e8;}
    body.nav-active .cm-header .logo-normal {display: none;}
    body.nav-active .cm-header .logo-fixed {display: block;}
    body.nav-active .header-icon span {background: #222;}

    body.nav-active .mo-nav {position: fixed; left: 0; right: 0; top: 60px; height: calc(100vh - 60px); background: #fff; display: flex; flex-direction: column; justify-content: space-between;}
    .mo-nav {display: none;}
    .mo-nav__list {padding-top: 20px;}
    .mo-nav__item {position: relative; height: 65px; line-height: 65px; border-bottom: 1px solid #e0e0e0; padding: 0 20px;}
    .mo-nav__item:after {content: '\f054'; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-family: 'Font Awesome 5 Pro'; font-size: 15px;}
    .mo-nav__item a {font-size: 15px; display: block; width: 100%;}
    .mo-nav__item a.font1 {font-size: 18px;}
    .mo-contact {height: 50px; line-height: 50px; text-align: center; display: flex; justify-content: center; align-items: center;}
    .mo-contact p span {display: inline-block; margin-right: 10px;}
    .mo-contact .line {display: inline-block; width: 1px; height: 20px; background: #9bb7be; margin: 0 10px;}
}


/* ===============================================================
    * footer
=============================================================== */
footer {background: #333; padding: 60px 0;}
.footer-wrap {display: flex; justify-content: space-between;}
.footer-logo {width: 300px;}
.footer-info {width: 45%;}
.footer-list {color: #fff;}
.footer-item {display: inline-block; font-size: 14px; line-height: 24px; margin-right: 15px;}
.footer-item a {color: #fff;}
.footer-copy {font-size: 14px; color: #aaa; margin-top: 20px;}
.footer-icon {display: flex; justify-content: space-between; height: 105px;}
.footer-icon__box {width: 100px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; margin-right: 15px;}
.footer-icon__box img {width: 100%;}
@media (max-width: 820px){
    footer {padding: 40px 0;}
    .footer-wrap {display: block;}
    .footer-logo {width: 100%; margin-bottom: 40px;}
    .footer-info {width: 100%;}
    .footer-item {font-size: 12px; line-height: 21px; margin-right: 10px;}
    .footer-copy {font-size: 11px;}
    .footer-icon {height: auto; margin-top: 30px;}
    .footer-icon__box {width: 50%; flex-direction: row; margin-right: 10px;}
    .footer-icon__box:last-of-type {margin-right: 0;}
    .footer-icon__box img {width: calc(50% - 5px);}
}