@charset "utf-8";

body {
    padding: 0 !important;
}

.guide-box {
    width: 100%;
    height: 100vh;
    background-size: cover !important;
    position: relative;
}

.guide-box>div {
    position: relative;
    z-index: 2;
}

.guide-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/gd-zzc.png) repeat-x top;
}

.gd-hd {
    max-width: 15.7rem;
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    padding: .5rem 0;
    position: relative;
    z-index: 1;
}


.g-btn>a {
    width: .42rem;
    height: .42rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: block;
    border-radius: .05rem;

    display: inline-block;
}

.g-btn>a.g-menu {
    background: url(../images/gd-menu.png) no-repeat center center;
    background-size: .2rem;
    margin-right: .25rem;
}

.g-btn>a.g-ser {
    background: url(../images/ser.png) no-repeat center center;
    background-size: .2rem;
}

.gd-c ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    padding-right: .5rem;
}

.gd-c ul li a .ico {
    width: 1.11rem;
    height: 1.11rem;
    margin: 0 auto;
    position: relative;
}

.gd-c ul li a .ico::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/gd-q1.png) no-repeat;
    background-size: 100% 100%;
    animation: rotate 8s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.gd-c ul li a:hover .ico::before {
    background: url(../images/gd-q2.png) no-repeat;
    background-size: 100% 100%;
}

.gd-c ul li a .ico img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: .6rem;
}

.gd-c ul li {
    margin-left: .88rem;
}

.gd-c ul li:first-child {
    margin-left: 0;
}

.gd-c ul li a {
    display: block;
    padding: .37rem .9rem .3rem 90px;

    transition: all 0.5s;
    position: relative;
    z-index: 2;
}

.gd-c ul li {
    position: relative;
}

.gd-c ul li:nth-child(1):before {}

.gd-c ul li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    transition: all 0.5s;


}

.gd-c ul li:nth-child(1):before {
    background: linear-gradient(0deg, rgba(5, 85, 199, 0.9) 0%, rgba(7, 169, 232, 0.9) 100%);
}

.gd-c ul li:nth-child(2):before {
    background: linear-gradient(0deg, rgba(246, 128, 45, 0.84) 0%, rgba(241, 178, 84, 0.37) 100%);
}

.gd-c ul li:nth-child(3):before {
    background: linear-gradient(0deg, rgba(14, 203, 203, 0.59) 0%, rgba(178, 246, 246, 0.26) 100%);
}

.gd-c ul li::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 95%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    opacity: 0;
    transition: all 0.5s;
}

.gd-c ul li:hover:after {
    opacity: 1;
}

.gd-c ul li:nth-child(3){
    display: none;
}


.gd-c ul li a h3 {
    margin: .2rem 0;
    text-align: center;
}

.gd-c ul li a h3 b {
    display: block;
    font-family: 'sy';
    font-size: .27rem;
    color: #ffffff;
    margin-bottom: .05rem;
}

.gd-c ul li a h3 span {
    font-size: .12rem;
    color: #FFFFFF;
    display: block;
}

.g-motto img {
    width: 1.02rem;
    display: block;
    margin: 0 auto;
    display: none;
}
.g-motto {
    height: .4rem;
}

.g-enter p {
    font-size: .18rem;
    color: #FFFFFF;
    text-align: center;
    margin-top: .15rem;
    padding-bottom: .26rem;
    transition: all 0.5s;
}

.g-enter p {
    opacity: 0;
}

.g-enter img {
    display: block;
    margin: 0 auto;
    width: .3rem;
    transition: all 0.5s;
}

.gd-c ul li a:hover .g-enter>img {
    transform: rotateX(180deg);
}

.gd-c ul li a:hover .g-enter>p {
    opacity: 1;
}

.guide-box>.gd-top {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
}

.gd-mid {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

}


.gd-c {

    max-width: 15.7rem;
    margin: 0 auto;
    width: 100%;
}

.guide-box>.gd-bot {
    background: #004391;

    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.gd-foot {
    max-width: 15.7rem;
    margin: 0 auto;
    width: 100%;
}

.gd-bot a {
    font-size: .16rem;
    color: #ffffff;
    line-height: .54rem;
    display: inline-block;
    margin: 0 .05rem;
}

.gd-mt>div {
    width: .3rem;
    height: .3rem;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: .2rem;
    position: relative;
}


.g-wx {
    background: url(../images/g-wx.png) no-repeat;
    background-size: 100% 100%;
}

.g-wb {
    background: url(../images/g-wb.png) no-repeat;
    background-size: 100% 100%;
}

.g-dy {
    background: url(../images/g-dy.png) no-repeat;
    background-size: 100% 100%;
}


.gd-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
}


.gd-mt>div img {
    position: absolute;
    left: 50%;
    bottom: 150%;
    transform: translateX(-50%);

    width: .8rem;
    height: .8rem;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
}

.gd-mt>div:hover img {
    visibility: visible;
    opacity: 1;
    bottom: 120%;
}



/* 弹出搜索框 */
.mt-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    display: none;
}

.mt-bj {
    position: fixed;
    z-index: 998;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
}

.mt-info {
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 600px;
    height: 60px;
}

.ipt_tx {
    width: 100%;
    height: 60px;
    display: block;
    padding: 10px;
    padding-right: 100px;
    font-size: 22px;
}

.ipt_btn {
    position: absolute;
    width: 80px;
    height: 60px;
    right: 0;
    top: 0;
    cursor: pointer;
    background: url(../images/ser.png) no-repeat #004391;
    background-position: center center;
    background-size: 30px;
}

/* ser --- end */

.g-lg a img {
    width: 3.23rem;
}


/* 全局导航 */
.yd-close {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    text-align: center;
    line-height: .5rem;
    font-size: .3rem;
    color: #333333;
    border: 1px solid #004391;
    color: #004391;
    position: absolute;
    right: .5rem;
    top: .5rem;
    cursor: pointer;
    transition: all 0.5s;
}
.yd-close:hover {
    transform: scale(1.2);
}
.yd-nav {
    position: fixed;
    right: 0;
    top: 0;
    background: #ffffff;

    width: 80%;
    height: 100%;
    z-index: 999;
    padding: 1rem;
    border-top-left-radius: 1.2rem;

    overflow-y: auto;
    transition: all 0.5s;
    transform: translateX(100%);
}

.yd-nav.on {
    transform: translateX(0%);
}

.gz-nav h3 {
    font-size: .26rem;
    color: #333333;
    margin-bottom: .2rem;
}

.gz-nav a {
    line-height: .6rem;
    margin-right: .3rem;
    font-size: .18rem;
    color: #333333;
}

.gz-nav a:hover {
    color: #004391;
}

.gz-nav>div>a {
    color: #004391;
    position: relative;
    display: block;
    padding-left: .2rem;
    font-weight: 600;
}

.gz-nav>div>a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: .08rem;
    height: .08rem;
    background: #004391;
    border-radius: 50%;
}

.gz-nav>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dashed #ddd;
    margin-left: 0.5rem;
}



.gz-nav>div>ul {
    min-width: 0;
    flex: 1;
}
.gz-nav>div>ul>li:last-child a {
    margin-right: 0;
}
.gz-nav>div>ul>li {
    display: inline-block;
}

.gz-nav {
    margin-bottom: .5rem;
}




@media screen and (max-width: 1500px) {
    .guide-box>div {
        padding-left: .1rem;
        padding-right: .1rem;
    }
}

@media screen and (max-width: 1200px) {
    .gd-c ul  {
        padding-right: 0;
    }
    .gd-foot>div {
        width: 100%;
        text-align: center;
    }

    .gd-bot a {
        line-height: .45rem;
    }

    .gd-foot {
        padding: .1rem 0;
    }

    .gd-c ul li {
        width: 31%;
        margin: 0;
    }

    .gd-c ul {
        justify-content: space-around;
    }

    .gd-c ul li a {
        padding: 30px 0;
    }

    .gd-hd {
        padding: .2rem 0;
    }

}

@media screen and (max-width: 768px) {
    .mt-info {
        width: 80%;
    }

    .g-lg a img {
        width: 2.6rem;
    }

    .guide-box>.gd-top,
    .guide-box>.gd-bot {
        position: static !important;
    }

    .guide-box {
        height: auto;
    }

    .gd-c ul li {
        width: 45%;
        margin: .3rem 0;
    }


    .yd-nav {
        padding: .5rem .2rem;
        width: 100%;
        border-radius: 0;
    }
    .gz-nav>div>ul {
        flex: auto;
    }
}

@media screen and (max-width: 540px) {
    .gd-c ul li {
        width: 90%;
        margin: .2rem 0;
    }
}