@charset "utf-8";
.flex{ display: flex; display: -ms-flexbox; justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: justify;}
header{ position: relative; z-index: 1;}
.logo{ width: 465rem;}
.logo a{ display: block; font-size: 0;}
.header > .flex{ padding-top: 45rem;}
.header-rt{ padding-top: 15rem; text-align: right; font-size: 0;}
.header-rt span{ vertical-align: middle;}
.motto{ display: inline-block; margin-right: 40rem; width: 295rem;}
.head-link{ margin-right: 10rem;}
.head-link a{ color: #e1be54;}
/* PC端搜索 */
/*默认展开的搜索*/
.gp-search{ position: relative; width:220rem; height: 46rem; border-radius: 23rem; box-sizing: border-box; border: 1rem solid rgba(210, 210, 210,0.15); overflow: hidden;display: inline-block; background: rgba(0,0,0,0.15); vertical-align: middle;transition: all 0.35s ease-in-out;*display: inline;*zoom:1;}
.gp-ser{width:100%; height:46rem; z-index:9999994; margin:0 auto;position: relative;}
.gp-search input,.gp-search button{position:absolute; height: 46rem;line-height:46rem; border:none; background:none; top:0rem;overflow: hidden;
    -webkit-text-fill-color: rgba(255,255,255,0.77) !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color:transparent; background-image: none; transition: background-color 50000s ease-in-out 0s;}
.gp-search input.notxt{color:rgba(255,255,255,0.77); width:calc(100% - 44rem);left: 0;padding-left: 25rem; outline: none; box-sizing: border-box;}
.gp-search input.notxt::placeholder{ color: rgba(255,255,255,0.77);}
.gp-search .notxt1 {position: absolute;width: 44rem; text-align: left; right:0;cursor:pointer;color:rgba(255,255,255,0.77);}
.navSwitch{ position: relative; display: inline-block; width: 46rem; height: 46rem; line-height: 42rem; text-align: center; border-radius: 50%; margin-left: 10rem; background: rgba(0,0,0,0.15); border: 1rem solid rgba(210, 210, 210,0.15); transition: background 0.2s ease;}
.navSwitch.open{ line-height: 46rem; background: #e0c67e;}
.navSwitch::before{ font-size: 22rem; color: rgba(255,255,255,0.77);}
.navSwitch.open::before{ color: #b00c1d;}
.nav{ display: none; width: 200rem; padding: 25rem 0 39rem; box-sizing: border-box; text-align: left; line-height: 1; background: #fff; position: absolute; top: 0; right: calc(100% + 17rem);}
.nav::before{ content: ''; display: block; width: 7rem; height: 14rem; background: url(../images/triangle_white.png) no-repeat center left; position: absolute; top: 16rem; left: 100%;}
.nav dd{ padding-left: 40rem; position: relative;}
.nav dd::before{ content: ''; display: block; width: 0rem; height: 2rem; background: #b00c1d; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: width 0.35s ease;}
.nav dd:hover::before, .nav dd.on::before{ width: 16rem;}
.nav a{ display: block; padding: 15rem 0; border-bottom: 1rem solid rgba(0,0,0,0.1); transition: all 0.35s ease;}
.nav dd:hover a, .nav dd.on a{ color: #b00c1d;}


@media screen and (min-width: 996px) {
    .effect0 {
        opacity: 0;
        transition: all 0.5s ease-out;
    }
    .effect0.isView {
        opacity: 1;
        -webkit-animation-name: effect0;
        animation-name: effect0;
    }
    @-webkit-keyframes effect0 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
    @keyframes effect0 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
    .effect1, .effect11, .effect11 li {
        opacity: 0;
        transition: all 1s ease-out;
        transform: translateY(70px);
    }
    .effect1.isView, .effect11.isView, .effect11.isView li {
        opacity: 1;
        transform: none;
        -webkit-animation-name: effect1;
        animation-name: effect1;
    }
    @-webkit-keyframes effect1 {
        from {
            opacity: 0;
            transform: translateY(70px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
    @keyframes effect1 {
        from {
            opacity: 0;
            transform: translateY(70px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
    .effect2, .effect21, .effect21 li {
        opacity: 0;
        transition: all 1s ease-out;
        transform: translateX(50px);
    }
    .effect2.isView, .effect21.isView, .effect21.isView li {
        opacity: 1;
        transform: none;
        -webkit-animation-name: effect2;
        animation-name: effect2;
    }
    @-webkit-keyframes effect2 {
        from {
            opacity: 0;
            transform: translateX(50px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
    @keyframes effect2 {
        from {
            opacity: 0;
            transform: translateX(50px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
    .effect3, .effect31, .effect31 li {
        opacity: 0;
        transition: all 1s ease-out;
        transform: translateY(-70px);
    }
    .effect3.isView, .effect31.isView, .effect31.isView li {
        opacity: 1;
        transform: none;
        -webkit-animation-name: effect3;
        animation-name: effect3;
    }
    @-webkit-keyframes effect3 {
        from {
            opacity: 0;
            transform: translateY(-70px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
    @keyframes effect3 {
        from {
            opacity: 0;
            transform: translateY(-70px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
    .effect4, .effect41, .effect41 li {
        opacity: 0;
        transition: all 1s ease-out;
        transform: translateX(-50px);
    }
    .effect4.isView, .effect41.isView, .effect41.isView li {
        opacity: 1;
        transform: none;
        -webkit-animation-name: effect4;
        animation-name: effect4;
    }
    @-webkit-keyframes effect4 {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
    @keyframes effect4 {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
    .effect {
        transition: transform 1s, opacity 1s ease-in-out;
        animation-duration: 1s;
        -webkit-animation-duration: 1s;
        animation-timing-function: ease-in-out;
        -webkit-animation-timing-function: ease-in-out;
    }
}


footer{ background: url(../images/footer_bg.png) no-repeat center/cover; padding: 60rem 0; font-size: 0;}
.footer-motto{ width: 506rem;}
.copy{ align-items: center; flex-wrap: wrap; line-height: 36px;}
.copy span:nth-of-type(1){ margin-right: 30px; line-height: 1; width: 41rem;}
.copy span:nth-of-type(2){ margin-right: 39px;}


/* 响应式样式 */
@media screen and (max-width:1600rem){
  
}

@media screen and (max-width:1480px) {
  
}

@media screen and (max-width:1400px) {
  
}

@media screen and (max-width:1280px) {
  
}

@media screen and (max-width:1200px) {
    footer{ padding: 30rem 0;}
    .footer > .flex{ flex-direction: column; align-items: center;}
    .footer-motto{ width: auto; max-width: 506rem;}
}

@media screen and (max-width:1100px) {
  
}
@media screen and (max-width:1024px) {
  
}

@media screen and (max-width:997px) {
  .motto, .head-link{ display: none;}
  .header > .flex{ padding-top: 20rem;}
  .logo{ width: auto; max-width: 320rem;}
  .header-rt{ padding-top: 0;}
  .gp-search{ width: 140rem; height: 30rem; line-height: 30rem;}
  .gp-search input, .gp-search button{ height: 30rem; line-height: 30rem; font-size: 14rem;}
  .navSwitch{ margin-left: 5rem;}
}

@media screen and (max-width:767px) {
    .footer-motto{ max-width: 340rem;}
    .copy{ flex-wrap: wrap; justify-content: center; line-height: 2;}
    .copy span:nth-of-type(1){ margin-right: 10rem;}
    .copy span:nth-of-type(2){ margin-right: 0rem;}
    /* .copy span:nth-last-of-type(1){ width: 100%;} */
}

@media screen and (max-width:680px) {
  
}

@media screen and (max-width:540px) {
  
}

@media screen and (max-width:414px) {
    .logo{ max-width: 250rem;}
    .gp-search{ width: 100rem;}
    .gp-search input.notxt{ padding-left: 12rem;}
    .gp-search .notxt1{ width: 24rem;}
    .navSwitch{ width: 40rem; height: 40rem; line-height: 38rem;}
    .footer-motto{ max-width: 300rem; margin-bottom: 10rem;}
    .copy span:nth-of-type(2){ margin-bottom: 10rem;}
}

@media screen and (max-width:320px) {
  
}