:root {

    --theme-color: #108CEE;

    --header-height: 80px;

    --font-size60: calc(0.875rem + 2.39vw);

    --font-size48: calc(0.875rem + 1.77vw);

    --font-size36: calc(0.875rem + 1.14vw);

    --font-size30: calc(0.875rem + 0.83vw);

    --font-size24: calc(14px + 0.52vw);

    --font-size20: calc(14px + 0.3125vw);

    --font-size18: calc(14px + 0.208vw);





}







blockquote,

body,

button,

dd,

div,

dl,

dt,

form,

h1,

h2,

h3,

h4,

h5,

h6,

input,

li,

ol,

p,

pre,

td,

textarea,

th,

ul,

input {

    margin: 0;

    padding: 0;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

}



* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    outline: 0;

    -webkit-text-size-adjust: none;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

html{

    overflow-x: hidden;

}

body {

    font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;

    overflow-x: hidden;

    color: #202124;

}



a {

    text-decoration: none;

    color: #333;

}



i,

em {

    font-style: normal;

}



a:active,

a:hover {

    outline: 0;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 400;

}



img {

    border: none;

    display: inline-block;

    vertical-align: middle;

    max-width: 100%;

}



li {

    list-style: none;

}



table {

    border-collapse: collapse;

    border-spacing: 0;

}



h4,

h5,

h6 {

    font-size: 100%

}



button,

input,

optgroup,

option,

select,

textarea {

    font-family: inherit;

    font-size: inherit;

    font-style: inherit;

    font-weight: inherit;

    outline: 0

}



select::-ms-expand {

    display: none;

}



input::-ms-clear {

    display: none;

}



/*scroll*/

::-webkit-scrollbar {

    width: 4px;

    height: 4px

}



::-webkit-scrollbar-button:vertical {

    display: none

}



::-webkit-scrollbar-corner,

::-webkit-scrollbar-track {

    background-color: #f6f6f6;

}



::-webkit-scrollbar-thumb {

    background-color: #255dbc;

}



::-webkit-scrollbar-thumb:vertical:hover {

    background-color: #255dbc;

}



::-webkit-scrollbar-thumb:vertical:active {

    background-color: #255dbc;

}



html {

    font-size: 16px;

}



@media (max-width: 1440px) {

    html {

        font-size: 15px;

    }

}



@media (max-width: 768px) {

    html {

        font-size: 14px;

    }

}





body {

    font-size: 1rem;

    font-family: "微软雅黑";

}









.container {

    width: 90%;

    max-width: 1440px;

    margin-left: auto;

    margin-right: auto;

}



.theme_btn {

    width: calc(100px + 5.2vw);

    height: calc(40px + 0.625vw);

    max-width: 200px;

    max-height: 52px;

    background: var(--theme-color);

    border-radius: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 1rem;

    transition: all .35s ease;

    -webkit-transition: all .35s ease;

    -moz-transition: all .35s ease;

    -ms-transition: all .35s ease;

    -o-transition: all .35s ease;

}







.btn_wrap {

    display: flex;

    align-items: center;

    justify-content: center;

}

.banner {

    position: relative;

}

.banner > img{

    width: 100%;

}

.banner>.container {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate3d(-50%, -50%, 0);

    -webkit-transform: translate3d(-50%, -50%, 0);

    -moz-transform: translate3d(-50%, -50%, 0);

    -ms-transform: translate3d(-50%, -50%, 0);

    -o-transform: translate3d(-50%, -50%, 0);

}



.banner>.container h2 {

    font-size: var(--font-size60);

    color: #fff;

}









.sub_banner p{

    font-size: var(--font-size24);

    color: rgba(255, 255, 255, .5);

    text-transform: uppercase;

    margin-top: 7px;

    font-style: italic;

    display: none;

}



/* list */

.s_list {

    display: flex;

    flex-wrap: wrap;

}



.s_list .s_item {

    display: flex;

    align-items: center;

}

.s_list .s_item .left_date h3 {

    font-size: var(--font-size36);

    color: var(--theme-color);

    font-weight: bold;

    line-height: 1;

    margin-bottom: 12px;

}

.s_list .s_item .left_date p {

    font-size: var(--font-size18);

    color: #202124;

}

.s_list .s_item .left_date {

    flex-shrink: 0;

    border-right: 1px solid rgba(0, 0, 0, .1);

}

/* header 

*******************

header

*******************

*/

.header .navbar-toggle .icon-bar,

header .logo img,

.header-nav-wrap,

.header-nav .header-nav-item a {

    transition: all .35s ease;

    -webkit-transition: all .35s ease;

    -moz-transition: all .35s ease;

    -ms-transition: all .35s ease;

    -o-transition: all .35s ease;

}

header .logo img {
    height: 40px;
}

/* logo */

header {

    background-color: transparent;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 100;

    width: 100%;

    border-bottom: 1px solid rgba(255, 255, 255, .3);



}



header .container {

    height: 100%;

    width: calc(100% - 120px);

    max-width: 100%;

    margin: 0 60px;



    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

}



header .logo_scroll {

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    opacity: 0;

}



.header-right-wrap {

    display: flex;

    align-items: center;

}







/* 

**********************

nav 

**********************

*/

.header-nav {

    display: flex;

    align-items: center;

}



.header-nav * {

    /* font-size: 1.125rem; */

    font-size: 14px;

}



.header-nav .header-nav-item {

    position: relative;

}



.header-nav .header-nav-item:after {

    content: "";

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: 0;

    width: 0;

    height: 4px;

    pointer-events: none;

    background-color: var(--theme-color);

    transition: all .35s ease;

    -webkit-transition: all .35s ease;

    -moz-transition: all .35s ease;

    -ms-transition: all .35s ease;

    -o-transition: all .35s ease;

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);



}





.header-nav .header-nav-item a {

    padding: 0;

    display: block;

}



.header-nav .header-nav-item a:hover {

    color: var(--theme-color);

}



/* 

*********************

icon-bar 

*********************

*/

.header .navbar-toggle {

    position: absolute;

    right: 0;

    top: 50%;

    cursor: pointer;

    z-index: 999;

    display: none;

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

}



.header .navbar-toggle .icon-bar {

    display: block;

    width: 22px;

    height: 2px;

    border-radius: 1px;

    background-color: #393D49;

}



.header .navbar-toggle .icon-bar+.icon-bar {

    margin-top: 4px;

}





/* 

******************

phone show in 

******************

*/

.header.in .header-nav-wrap {

    width: 100%;

    left: 0;

}



.header.in .icon-bar:nth-child(2) {

    width: 0;

}



.header.in .icon-bar:nth-child(1) {

    -webkit-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    margin-top: 8px;

}



.header.in .icon-bar:nth-child(3) {

    -webkit-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

    margin-top: -8px;

}







.left_date.pc{

    display: block;

}

.left_date.mobile{

    display: none;

}

.page-main-footer{

    min-width: 1300px;

}



.footer.mobile {

    background: none;

    z-index: 10;

    padding: 2rem 0 1rem;

    border-top: 0.1rem solid #108cee;

    color: #000;

    text-align: left;

    width: 340px;

    margin: 0 auto;

}

.footer.mobile .zl {

    float: left;

    width: 64%;

}



.page-main-footer .footBom{

    width: 100%;

    display: flex;

    justify-content: space-between;

}



.footer.mobile .ul-info-z .tit{

    font-size: 13px;

    line-height: 2;

    display: block;

    color: #afafaf;

}

.footer.mobile .center {

    margin-bottom: 0.9rem;

}

.footer.mobile .ul-info-z .tel {

    font-size: .24rem;

    line-height: 2;

    color: #0f8cee;

    font-weight: 700;

}

.footer.mobile .g-tit-z1 {

    font-size: 14px;

    line-height: 2;

    margin-bottom: 0.1rem;

}

.footer.mobile .top {

    margin-bottom: 2.6rem;

}

.footer.mobile .bot, .footer.mobile .bot a {

    font-size: .22rem;

    line-height: 2;

    color: #96aab9;

    display: inline-block;

    text-align: center;

}



.footer.mobile .bot a {

    font-size: 13px;

}





/* media */

@media (min-width: 1025px) {



    .theme_btn:hover {

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

        transform: translateY(-5px);

    

        -webkit-transform: translateY(-5px);

        -moz-transform: translateY(-5px);

        -ms-transform: translateY(-5px);

        -o-transform: translateY(-5px);

    }

    



    .header-nav .header-nav-item:hover::after,

    .header-nav .nav-this:after {

        width: 12px;

    }



    .header-nav .header-nav-item a {

        color: #fff;

        white-space: nowrap;

    }



    .header-nav .header-nav-item {

        display: inline-block;

        line-height: 98px;

        /* margin-left: 34px; */

        margin-left: calc(10px + 1.25vw);

    }



    header.scroll {

        background-color: #fff;

        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);

    }

    

    header.scroll .header-nav .header-nav-item a {

        color: #333;

        line-height: 80px;

    }

    

    header.scroll .logo_default {

        opacity: 0;

    }

    

    header.scroll .logo_scroll {

        opacity: 1;

    }





}



@media (max-width: 1440px) {

    header .container{

        width: calc(100% - 100px);

        margin: 0 50px;

    }

}

@media (max-width: 1280px) {

    header .container{

        width: 97%;

        margin: 0 auto;

    }

}



@media (max-width: 1024px) {

    body{

        padding-top: 60px;

    }

    header {

        height: 60px;

        background-color: #fff;

        padding-left: 1rem;

        padding-right: 1rem;

    }



    header .container {

        width: 100%;

        margin: 0 auto;

    }

    header .logo_default {

        opacity: 1;

    }

    header .logo_scroll {

        opacity: 1;

    }



    header .logo img {

        max-height: 30px;

    }



    header.fixed .logo img {

        transform: scale(1);

    }



    /* show phone */

    .header-nav,

    .header .navbar-toggle {

        display: block;

    }



    .header .header-nav-wrap {

        position: fixed;

        left: 100%;

        top: 60px;

        bottom: 0;

        background-color: #fff;

        width: 100%;

    }



    .header .header-nav .header-nav-item {

        display: block;

        padding-left: 1rem;

        line-height: 44px !important;

        border-bottom: 1px solid #f0f0f0;

    }







}

@media (max-width: 768px) {

    .left_date.pc{

        display: none;

    }

    .left_date.mobile{

        display: block;

    }

    .left_date h3{

        text-align: center;

    }

}

@media (max-width: 480px) {

    .banner>.container p{

        font-size: var(--font-size18);

    }

    .header-nav .header-nav-item {

        line-height: 50px;

    }

}





/* :right arrow */

.right_arrow em {

    transition: all .5s ease;

    -webkit-transition: all .35s ease;

    -moz-transition: all .5s ease;

    -ms-transition: all .5s ease;

    -o-transition: all .5s ease;



    display: flex;

    align-items: center;

    justify-content: flex-end;

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

}



.right_arrow {

    width: 30px;

    height: 20px;

    flex-shrink: 0;

    position: relative;

    overflow: hidden;

}



.right_arrow .icon_arrow1 {

    background: url("../images/icon_arrow_right.png") no-repeat right center;

}



.right_arrow .icon_arrow2 {

    background: url("../images/icon_arrow_right_hover.png") no-repeat right center;

    opacity: 0;

    left: -100%;



}