/* CSS Document */
body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, fieldset, button, input, textarea, th, td { margin: 0; padding: 0;}
body { font: 13px/1.8 "Gellix",sans-serif,Helvetica, "Microsoft YaHei", Tahoma, Arial, "\5b8b\4f53"; color: #000; text-align: center;}
ul, ol, li {list-style: none;}
a {text-decoration: none;}
a:hover {text-decoration: none;}
h1, h2, h3 {font-size: 16px;}
em {font-style: normal;}
.clearFix:after {display: block;clear: both;height: 0;content: "\0020"}


.header { width: 100%; background: #000 url(../images/bg.jpg) no-repeat center bottom; background-size: cover;}
.header .banner { padding-top: 20px;}
.header .banner .banner1 { margin-bottom: 20px;}
.header .banner .banner1 img { max-width: 640px; width: 90%;}
.header .banner .banner2 { margin-bottom: 20px;}
.header .banner .banner2 img { max-width: 240px; width: 50%;}
.header .banner .banner3 { margin-bottom: 50px;}
.header .banner .banner3 img { max-width: 380px; width: 70%;}

.header .planet { position: relative;}
.header .planet img.bg { display: block; max-width: 1000px; width: 90%; margin: 0 auto;}
.header .planet .info { position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); color: #fff;}
.header .planet .info img { max-width: 140px; width: 90%; margin-bottom: 15px;}
.header .planet .info p { font-size: 15px;}

.main { width: 100%;}

.i-box .btn-more { margin-bottom: 20px; padding-top: 30px;}
.i-box .btn-more a { font-size: 14px; text-align: center; display: inline-block; background-color: #dd0034; color: #fff; padding: 10px 30px; border-radius: 50px; transition: all .3s ease;}
.i-box .btn-more a:hover { background-color: #ec1548; transition: all .3s ease;}


.i-box { padding: 100px 0;}
.i-box .title { width: 90%; margin: 0 auto 20px auto;}
.i-box .title h2 { font-size: 24px; font-weight: bold; line-height: 1.3;}
.i-box .desc { font-size: 14px; width: 90%; margin: 0 auto 40px auto;}
.i-box .title h2 em.num { font-size: 56px; color: #dd0034;}

.i-box .tit { margin-bottom: 50px;}
.i-box .tit h2 { font-size: 24px; font-weight: bold;}
.i-box .tit p { font-size: 14px;}

.base-box { background: #1a003a; color: #fff;}
.base-box img.map { max-width: 900px; width: 90%; margin: 0 auto;}
.base-box ul { padding-top: 20px; display: flex; justify-content: center; max-width: 800px; width: 80%; margin: 0 auto;}
.base-box ul li { flex: 1; text-align: center;}
.base-box ul li img { max-width: 30px; width: 90%; display: block; margin: 0 auto 10px auto;}
.base-box ul li h3 { position: relative; font-size: 15px; font-weight: bold; border-top: 2px solid #fff; padding-top: 8px;}
.base-box ul li h3::after { position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%); content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 100%; background: #fff;}
.base-box ul li h4 { margin-bottom: 5px;}
.base-box ul li p { font-size: 13px;}

.service-box { background: #fff;}
.service-box ul { padding-top: 20px; max-width: 1200px; width: 90%; margin: 0 auto;}
.service-box ul li { float: left; width: 50%; margin-bottom: 30px;}
.service-box ul li .item { margin: 0 15px; padding: 30px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 0 5px rgba(100,100,100,.1); border-radius: 8px;}
.service-box ul li .item .icon { margin-bottom: 10px; background-color: #dd0034; width: 50px; height: 50px; padding: 20px; border-radius: 100%; display: inline-block;}
.service-box ul li .item .icon img { width: 100%; display: block;}
.service-box ul li .item .name { margin-bottom: 10px; line-height: 1.5;}
.service-box ul li .item .intro { font-size: 13px;}


.product-box { background: #1a003a; color: #fff;}
.product-box ul { padding: 20px 30px;}
.product-box ul li { float: left; width: 33.33%;}
.product-box ul li .item { margin: 0 15px; padding-bottom: 35px; color: #fff; border-radius: 8px;}
.product-box ul li .item.kyt { background-color: #227d53;}
.product-box ul li .item.MistTrack { background-color: #dd0034;}
.product-box ul li .item.MistEye { background-color: #1161ed;}
.product-box ul li .item img.web { width: 100%; display: block; box-shadow: 0 0 5px rgba(50,50,50,.1); border-radius: 8px 8px 0 0; margin-bottom: 30px;}
.product-box ul li .item img.logo { max-width: 200px; width: 90%; display: block; margin: 0 auto 20px auto;}
.product-box ul li .item .info { text-align: center; padding: 0 30px 20px 30px; height: 200px;}
.product-box ul li .item .info h3 { font-size: 16px; font-weight: bold; line-height: 1.5;}
.product-box ul li .item .info h3.en { margin-bottom: 10px;}
.product-box ul li .item .info p { font-size: 13px; max-width: 290px; margin: 0 auto;}
.product-box ul li .item .btn-url a { display: inline-block; background-color: #fff; color: #000; padding: 7px 28px; border-radius: 50px; box-shadow: 0 0 10px rgba(0,0,0,.1); transition: all .3s ease;}
.product-box ul li .item .btn-url a:hover { box-shadow: 0 0 30px rgba(0,0,0,.4); transition: all .3s ease;}
.product-box ul li .item.kyt .btn-url a:hover { color: #227d53; transition: all .3s ease;}
.product-box ul li .item.MistTrack .btn-url a:hover { color: #dd0034; transition: all .3s ease;}
.product-box ul li .item.MistEye .btn-url a:hover { color: #1161ed; transition: all .3s ease;}


.honor-box { background: #fff;}
.honor-box ul { max-width: 1200px; width: 90%; margin: 0 auto;}
.honor-box ul li { border: 1px solid #eee; background-color: #fff; box-shadow: 0 0 5px rgba(100,100,100,.1); line-height: 1.4; margin-bottom: 10px; border-radius: 8px; position: relative; padding: 15px 15px 15px 100px; text-align: left;}
.honor-box ul li p { margin-bottom: 3px;}
.honor-box ul li .time { color: #dd0034; background-color: #fef4f6; border: 1px solid #dd0034; line-height: 1; padding: 2px 5px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 50px; text-align: center;}
.honor-box ul li .time span { display: block; border-top: 1px solid #dd0034; margin-top: 2px; padding-top: 1px;}

/*--open-box--*/
.open-box { background-color: #1a003a; color: #fff;}
.open-box ul { margin: 0 auto; max-width: 1200px; width: 90%;}
.open-box li { float: left; width: 50%;}
.open-box li .item { margin: 0 10px; background-color: #fff; color: #000; text-align: left; position: relative; padding: 35px 60px 35px 180px; margin-bottom: 20px; border: 1px solid #eee; border-radius: 8px;}
.open-box li p { line-height: 1.4; margin-bottom: 2px; font-size: 13px;}
.open-box li p.zh { font-size: 16px; font-weight: bold; margin-bottom: 8px;}
.open-box li img { height: 80px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.open-box li .btn { position: absolute; right: 20px; border-radius: 2px; top: 50%; margin-top: -15px; display: inline-block; width: 30px; height: 30px; background: #f8f8f8 url(../images/icon-more.png) no-repeat 0 100%; border: 1px solid #eee; background-size: 100% auto;}
.open-box li .btn:hover { background: #eb1100 url(../images/icon-more.png) no-repeat 0 0; border: 1px solid #eb1100; background-size: 100% auto;}

/*--about-content--*/
.about-content { max-width: 1200px; width: 90%; margin: 0 auto; text-align: left;}

.about-content p { margin-bottom: 15px; text-align: justify;}
.about-content p em { font-weight: bold;}
.about-content .btn-more { text-align: center;}


/*---culture---*/
.culture-box { background-color: #1a003a; color: #fff;}
.culture-content { max-width: 1200px; width: 90%; margin: 0 auto;}
.culture-content li { margin-bottom: 30px; float: left; width: 33.33%;}
.culture-content li:last-child { margin-bottom: 0;}
.culture-content li h3 { font-size: 18px; font-weight: bold; margin-bottom: 8px;}
.culture-content li .item { margin: 0 15px; background-color: #fff; color: #000; text-align: center; border-radius: 8px; padding: 45px 30px;}
.culture-content li .item .icon { border-radius: 100%; margin-bottom: 20px; display: inline-block; width: 100px; height: 100px; background-color: #dd0034; background-size: 60% auto; background-repeat: no-repeat; background-position: center center;}
.culture-content li .item .icon1 { background-image: url(../images/icon-Vision.png);}
.culture-content li .item .icon2 { background-image: url(../images/icon-Mission.png);}
.culture-content li .item .icon3 { background-image: url(../images/icon-Values.png);}




.brand-content { max-width: 1200px; width: 90%; margin: 0 auto;}

.brand-content li { margin-bottom: 20px;}
.brand-content li:last-child { margin-bottom: 0;}
.brand-content .item { position: relative; text-align: center; border: 1px solid #eee; box-shadow: 0 1px 10px -2px rgba(10, 16, 34, .1); padding: 25px 30px 25px 300px; text-align: left; border-radius: 8px;}
.brand-content .item p { margin-bottom: 6px; text-align: left;}
.brand-content .item img { width: 220px; position: absolute; left: 40px; top: 50%; transform: translateY(-50%);}
.brand-content .item .website { padding-top: 6px;}
.brand-content .item .website a { display: inline-block; border: 1px solid #eee; color: #000; background-color: #f8f8f8; padding: 3px 20px; border-radius: 4px; transition: all .3s ease;}
.brand-content .item .website a:hover { color: #fff; border: 1px solid #eb1100; background-color: #eb1100; transition: all .3s ease;}


.footer { background: #000 url(../images/bg.jpg) no-repeat center center; background-size: cover; overflow: hidden;}
.footer .slogan-box { padding: 70px 20px; color: #dd0034; line-height: 2;}
.footer .slogan-box h3 { font-size: 24px; line-height: 1.5;}
.footer .slogan-box p { font-size: 14px; line-height: 2;}
.footer .logo { margin-top: 50px;}
.footer .logo img { max-width: 180px; width: 90%;}

/* 底部星球 */
.footer .planet img.bg { display: block; max-width: 800px; width: 90%; margin: 0 auto; transform: rotate(180deg);}

@media screen and (max-width: 1350px) {
    .open-box li p { font-size: 12px;}
    .open-box li .item { padding: 25px 60px 25px 145px;}
    .open-box li img { height: 60px;}
    .open-box li p.zh { font-size: 14px;}
    .culture-content li .item { height: 280px;}

}

@media screen and (max-width: 1180px) {
    
    .open-box li { float: none; width: 100%;}
    .open-box li .item { padding: 30px 60px 30px 185px;}
    .open-box li img { height: 80px;}

    .service-box ul li { float: none; width: 100%;}
    .service-box ul li .item { padding: 25px 25px 25px 180px; text-align: left; position: relative; margin: 0;}
    .service-box ul li .item .icon { margin: 0; position: absolute; left: 40px; top: 50%; transform: translateY(-50%);}

    .product-box ul li .item .info p { font-size: 12px;}
    .product-box ul li .item .btn-url a { font-size: 12px;}
    .culture-content li .item { padding: 45px 25px;}

}

@media screen and (max-width: 1052px) {
    .product-box ul li { float: none; width: 100%; margin-bottom: 30px;}
    .product-box ul li:last-child { margin-bottom: 0;}
    .product-box ul li .item .info p { max-width: none;}
    .culture-content li .item { height: 300px;}

}
@media screen and (max-width: 750px) {
    .header .planet .info p { font-size: 11px;}
    .header .planet .info img { margin-bottom: 3px; max-width: 100px;}
    .header .planet img.bg { width: 100%;}
    .header .planet .info { width: 100%;}

    .i-box { padding: 60px 0;}
    .i-box .title h2 { font-size: 20px;}
    .i-box .title h2 em.num { font-size: 36px;}
    .i-box .desc { font-size: 12px; margin-bottom: 20px;}


    .i-box .tit h2 { font-size: 20px;}
    .i-box .tit p { font-size: 12px;}
    .i-box .tit { margin-bottom: 30px;}


    .footer .slogan-box { padding: 40px 20px;}

    .brand-content .item { padding: 20px; text-align: center;}
    .brand-content .item img { position: initial; display: inline-block; margin: 5px auto 10px auto; transform: none;}
    .brand-content .item .website { margin-bottom: 10px;}
    /* .about-content .btn-more { margin-bottom: 50px;} */


    .header .banner .banner2 { margin-bottom: 10px;}
    .header .banner .banner3 { margin-bottom: 30px;}


    .base-box ul { display: block; width: 88%;}
    .base-box ul li { text-align: left; position: relative; padding: 10px 10px 10px 60px; border-bottom: 1px dotted #666;}
    .base-box ul li h3 { border: none; padding: 0; line-height: 1;}
    .base-box ul li h3::after { display: none;}
    .base-box ul li h4 { margin-bottom: 0;}
    .base-box ul li p { display: inline-block;}
    .base-box ul li img { position: absolute; left: 10px; top: 48%; transform: translateY(-50%); margin-bottom: 0;}


    .service-box ul li { margin-bottom: 20px;}
    .service-box ul li:last-child { margin-bottom: 10px;}
    .service-box ul li .item { padding: 15px 15px 15px 100px;}
    .service-box ul li .item .icon { left: 15px; width: 30px; height: 30px;}
    .service-box ul li .item .name { margin-bottom: 3px;}

    .product-box ul { padding: 20px;}
    .product-box ul li { margin-bottom: 20px;}
    .product-box ul li .item { margin: 0 auto;}

    .honor-box .title { margin-bottom: 0;}


    .open-box li { margin-bottom: 20px;}
    .open-box li:last-child { margin-bottom: 0;}
    .open-box li .item { padding: 20px 60px 20px 125px; margin: 0;}
    .open-box li img { height: 50px;}
    .open-box li p.zh { margin-bottom: 3px;}

    .footer .slogan-box h3 { font-size: 18px;}
    .footer .slogan-box p { font-size: 12px;}
    .product-box ul li .item .info { height: auto;}

    .culture-content li { float: none; width: 100%;}
    .culture-content li .item { height: auto; margin: 0; padding: 40px 20px;}
    .culture-content li .item .icon { margin-bottom: 10px; width: 80px; height: 80px;}


}
@media screen and (max-width: 400px) {
    .header .planet .info img { max-width: 80px;}

}
@media screen and (max-width: 360px) {
    .header .planet .info p { display: none;}
}