@charset "utf-8";
/* CSS Document */
html,
body {
    width: 100%;
    height: 100%;
    background: #d8d8d8;
}

@font-face {
    font-family: 'ali-regular';
    /*src: url("../font/Alibaba-PuHuiTi-Regular.otf");*/
}

.ali-regular {
    font-family: 'Microsoft Yahei','PingFang SC','arial';
}

@font-face {
    font-family: 'ali-light';
    src: url("../font/Alibaba-PuHuiTi-Light.otf");
}

.ali-light {
    font-family: 'Microsoft Yahei','PingFang SC','arial';
}

@font-face {
    font-family: 'ali-media';
   src: url("../font/Alibaba-PuHuiTi-Medium.otf");
}

.ali-media {
    font-family: 'Microsoft Yahei','PingFang SC','arial';
}

@font-face {
    font-family: 'flt-book';
    src: url("../font/FUTURAN_0.TTF");
}

.flt-book {
    font-family: 'flt-book';
}

@font-face {
    font-family: 'flt-media';
    src: url("../font/FuturaLT.otf");
}

.flt-media {
    font-family: 'flt-media';
}
@font-face {
    font-family: 'flt-light';
    src: url("../font/FuturaLTLight.otf");
}

.flt-light {
    font-family: 'flt-light';
}
@font-face {font-family: "iconfont";
    src: url('//at.alicdn.com/t/font_2017521_ke0fgejedxq.eot?t=1597893096538'); /* IE9 */
    src: url('//at.alicdn.com/t/font_2017521_ke0fgejedxq.eot?t=1597893096538#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
    url('//at.alicdn.com/t/font_2017521_ke0fgejedxq.woff?t=1597893096538') format('woff'),
    url('//at.alicdn.com/t/font_2017521_ke0fgejedxq.ttf?t=1597893096538') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_2017521_ke0fgejedxq.svg?t=1597893096538#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .iconxiaoxitongzhi:before {
    font-size: 24px;
    content: "\e681";
    color:#000;
    margin: 0 auto;
  }
  
  .iconweixin:before {
    font-size: 24px;
    content: "\e600";
    color:#000;
    margin: 0 auto;
    line-height: 2;
    cursor: pointer;
  }
  
  .icon-temgoo:before {
    content: "\e617";
    color:#000;
    font-size: 1.14rem;
  }
  
.the-sider {
    position: fixed;
    z-index: 199;
    width: 1.04rem;
    height: 100%;
    min-height: 100%;
    padding-top: 0.15rem;
    box-sizing: border-box;
    border-right: 0.01rem solid #bebebe;
    background-color: #d8d8d8;
    color: #4e4e4e;
    text-align: center;
}

#the-sider-menu {
    position: fixed;
    z-index: 199;
    width: 1.04rem;
    height: 100%;
    min-height: 100%;
    padding-top: 0.15rem;
    box-sizing: border-box;
    border-right: 0.01rem solid #a4a4a4;
    background-color:rgba(186, 186, 186, 0);
    color: #4e4e4e;
    text-align: center;
}

    .the-sider .the-sider-dot {
        padding-top: 0.54rem;
        margin: 0 auto;
        cursor: pointer;
    }

    .the-sider .main-dot {
        width: 0.23rem;
        height: 0.05rem;
        background: url(../images/dot.png) center no-repeat;
        background-size: contain;
    }

    .the-sider .lang {
        width:100%;
        height:auto;
        padding: 0.1rem 0 0.48rem; 
    }

        .the-sider .lang .lang-chinese, .the-sider .lang .lang-english {
            width: 40%;
            height: auto;
            margin: 0 auto;
            position: relative;
        }

        .the-sider .lang .lang-chinese {
            margin-bottom:0.05rem;
        }

            .the-sider .lang a {
                width: 100%;
                height: auto;
                display: inline-block;
                margin: 0 auto;
                font-size:12px;
                color: #000;
                padding: 0.08rem 0;
            }

        .the-sider .lang i {
            display:none;
        }

        .the-sider .lang i.on {
            display:inline-block;
            width: 30%;
            height: 1px;
            background: #000;
            position: absolute;
            left: 35%;
            bottom: 1px;
        }

    .the-sider .nav {
        width:100%;
        height:auto;
        position: absolute!important;
        left:0!important;
        top:29%!important;
        position:relative;
    }

    .the-sider .common-contact {
        width:100%;
        height:auto;
        position:absolute;
        bottom:0.4rem;
        left:0;
    }
    /* .the-sider .nav {
        position: relative;
    }*/
    .the-sider .nav-item {
        display: block;
        margin-top: 0.66rem;
        color: #000;
        cursor: pointer;
    }

        .the-sider .nav-item.active {
            color: #bf0008;
            position: relative;
            bottom: 0;
        }

            .the-sider .nav-item.active::after {
                position: absolute;
                content: "";
                width: 74%;
                height: 0;
                left: 13%;
                bottom: -0.08rem;
                border-bottom: 0.03rem solid #bf0008;
                animation: navLine 0.6s;
            }
            .the-sider .nav-item2 {
        display: block;
        margin-top: 0.66rem;
        color: #000;
        cursor: pointer;
    }

        .the-sider .nav-item2.active2 {
            color: #bf0008;
            position: relative;
            bottom: 0;
        }

            .the-sider .nav-item2.active2::after {
                position: absolute;
                content: "";
                width: 74%;
                height: 0;
                left: 13%;
                bottom: -0.08rem;
                border-bottom: 0.03rem solid #bf0008;
                animation: navLine 0.6s;
            }

    .the-sider .wechat {
        position: relative;
        width: 60%;
        height: 0.4rem;
        margin:0 auto;
        background: url(../images/wechat.png) center center no-repeat;
        background-size: cover cover;
        cursor: pointer;
        margin-bottom:0.1rem;
    }

#container-sider .qr-code {
    position: absolute;
    width: 117px;
    height: 109px;
    opacity: 0;
    left: 1.2rem;
    bottom: 0.2rem;
    transition: opacity 0.3s ease-in;
    background: url(../images/qr_code.png) center center no-repeat;
    background-size: auto 100%;
}

    #container-sider .qr-code img {
        width: 100px;
        height: 100px;
        border: none;
        margin-left: 8.5px;
        margin-top:4.5px;
    }


#the-content .qr-code {
    position: absolute;
    width: 117px;
    height: 109px;
    opacity: 0;
    left: 1.2rem;
    bottom: 0.2rem;
    transition: opacity 0.3s ease-in;
    background: url(../images/qr_code.png) center center no-repeat;
    background-size: auto 100%;
}

    #the-content .qr-code img {
        width: 100px;
        height: 100px;
        border: none;
        margin-left: 8.5px;
        margin-top: 4.5px;
    }

    .the-sider .comment {
        width: 60%;
        height: 0.4rem;
        display:inline-block;
        margin:0 auto;
        background: url(../images/comment.png) center center no-repeat;
        background-size: cover cover;
    }

.right-container {
    position: relative;
    padding-left: 1.04rem;
}

.common-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.animation-show {
    animation: animationShow 0.8s forwards;
}

.animation-hide {
    animation: animationHide 0.8s forwards;
}
/****定义显示*****/
@keyframes projectAttachShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes projectAttachShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes projectAttachShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes projectAttachShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes projectAttachShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/****定义隐藏*****/
@keyframes animationHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes animationHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes animationHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes animationHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes animationHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.contanier-main {
    position: relative;
}

    .contanier-main.blur {
        filter: blur(10px);
    }

.the-content,
#the-content {
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(186, 186, 186, 0.6);
    overflow: hidden;
}

.content-dot {
    width: 0.24rem;
    height: 0.24rem;
    background: url(../images/content-close.png) center 0.18rem no-repeat;
    background-size: contain;
}

.content-main {
    position: relative;
    margin: 0.5rem 0 0 4.62rem;
    width: 100%;
    height: 8.46rem;
    z-index: 999;
    box-sizing: border-box;
}
    .content-main .content-item {
        position: absolute;
        width: 13rem;
    }

    .content-main .content-product {
        height: 0.54rem;
        left: 1.16rem;
        top: 0.46rem;
        background: url(../images/content-product.png) no-repeat;
        background-size: auto 100%;
    }

        .content-main .content-product .line {
            top: 0.1rem;
        }

    .content-main .content-contact {
        height: 0.52rem;
        left: 8.05rem;
        top: 1.38rem;
        background: url(../images/content-contact.png) no-repeat;
        background-size: auto 100%;
    }

        .content-main .content-contact .line {
            top: 0.07rem;
        }

    .content-main .content-brand {
        height: 0.55rem;
        left: 5rem;
        top: 2.8rem;
        background: url(../images/content-brand.png) no-repeat;
        background-size: auto 100%;
    }

        .content-main .content-brand .line {
            top: 0.1rem;
        }

    .content-main .content-download {
        height: 0.52rem;
        left: 2.42rem;
        top: 3.72rem;
        background: url(../images/content-download.png) no-repeat;
        background-size: auto 100%;
    }

        .content-main .content-download .line {
            top: 0.1rem;
        }

    .content-main .content-projects {
        height: 0.55rem;
        left: 8.05rem;
        top: 4.64rem;
        background: url(../images/content-projects.png) no-repeat;
        background-size: auto 100%;
    }

        .content-main .content-projects .line {
            top: 0.1rem;
        }

    .content-main .content-news {
        height: 0.52rem;
        left: 0;
        top: 5.56rem;
        background: url(../images/content-news.png) no-repeat;
        background-size: auto 100%;
    }

        .content-main .content-news .line {
            top: 0.07rem;
        }

    .content-main .content-strategy {
        height: 0.52rem;
        left: 5.35rem;
        top: 6.48rem;
        background: url(../images/content-strategy.png) no-repeat;
        background-size: auto 100%;
    }

        .content-main .content-strategy .line {
            top: 0.1rem;
        }

    .content-main .line-wraper {
        position: absolute;
        left: -100%;
        width: 13.34rem;
        height: 1rem;
        overflow: hidden;
    }

    .content-main .line {
        position: absolute;
        height: 0.09rem;
        background-color:#bf0008;
        width: 0;
        z-index: 999;
    }

    .content-main .hover-area {
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
    }

    .content-main .product-hover-area {
        width: 1.42rem;
        height: 100%;
    }

    .content-main .contact-hover-area {
        width: 1.45rem;
        height: 100%;
    }

    .content-main .brand-hover-area {
        width: 1.22rem;
        height: 100%;
    }

    .content-main .download-hover-area {
        width: 1.72rem;
        height: 100%;
    }

    .content-main .projects-hover-area {
        width: 1.42rem;
        height: 100%;
    }

    .content-main .news-hover-area {
        width: 1.19rem;
        height: 100%;
    }

    .content-main .strategy-hover-area {
        width: 1.5rem;
        height: 100%;
    }

#the-content .menu-copy {
    height: 0.3rem;
    width: auto;
    position: absolute;
    left: 1.5rem;
    bottom: 0.5rem;
    line-height: 0.3rem;
    font-size: 0.14rem;
    color: #161616;
    font-family: 'ali-regular';
}

    #the-content .menu-copy a {
        font-size: 0.14rem;
        color: #161616;
        font-family: 'ali-regular';
    }


.the-footer {
    width: 100%;
    border-top: 0.01rem solid #bebebe;
    padding: 1.5rem 0 0.73rem 0.8rem;
    box-sizing: border-box;
}

    .the-footer .footer-statement .footer-statement-text {
        font-size: 12px;
        line-height: 1.7;
        margin-left: 0.8rem;
        padding-top: 0.88rem;
        font-family: 'ali-regular';
    }

        .the-footer .footer-statement .footer-statement-text a {
            font-size: 12px;
            color: #000;
            text-decoration: none;
            font-family: 'ali-regular';
        }


.footer-nav-line {
    margin-bottom: 0.6rem;
}

    .footer-nav-line .nav-item {
        width: 2.83rem;
        float: left;
        padding-left: 0.8rem;
    }

    .footer-nav-line .nav-item-1 {
        font-size: 21px;
        color: #000;
    }

    .footer-nav-line .nav-item-2 {
        font-size: 15px;
        color: #000;
    }

    .footer-nav-line .footer-up-arrow {
        float: right;
        margin-right: 1.85rem;
        width: 0.32rem;
        height: 0.32rem;
        background: url('/images/up-arrow.png') center center no-repeat;
        background-size: 100% auto;
        cursor: pointer;
    }

.the-item-bg {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
}

.the-item-attach {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 0.8s;
}

.delay {
    animation-duration: 1s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
}

.full-size-pic {
    display: block;
    width: 100%;
}

.common-tiangu {
    width: 1.14rem;
    height: 0.73rem;
    display: inline-block;
    position: absolute;
    left: 17.28rem;
    top: 0.73rem;
    z-index: 9999;
}

.common-tiangu a {
    width: 100%;
    height: auto;
    display: inline-block;
}

    .common-tiangu img {
        width: 100%;
        height: auto;
        display: inline-block;
        border: none;
    }

.common-banquan {
    height: 0.3rem;
    width: auto;
    position: absolute;
    top: 5rem;
    right: -0.7rem;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -moz-transform: rotate(90deg); /* Firefox */
    -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
    -o-transform: rotate(90deg); /* Opera */
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    word-break: normal;
    -ms-word-break: normal;
    line-height: 0.3rem;
    font-size: 12px;
    color: #161616;
    font-family: 'ali-regular';
}

    .common-banquan a {
        font-size: 12px;
        color: #161616;
        font-family: 'ali-regular';
    }


@media screen and (max-width:1366px){
.content-main {
    position: relative;
    margin: 0.6rem 0 1.05rem 4.4rem;
    width: 100%;
    height: 8.46rem;
    box-sizing: border-box;
    }

.footer-nav-line .nav-item-1 { /*底部导航英文*/
        font-size: 18px;
        color: #000;
    }

.footer-nav-line .nav-item-2 {/*底部导航中文*/
        font-size: 13px;
        color: #000;
    }
.the-sider {/*左侧导航宽度*/
        width: 1.3rem;
    }
#the-sider-menu {/*左侧菜单宽度*/
        width: 1.3rem;
    }
.icon-temgoo:before {/*LOGO*/
        font-size:1.5rem!important;
      }    
.common-banquan {/*首页右侧版权*/
        right: -1.2rem;
        font-size: 10px;
    }     
.right-container {/*案例页面左侧菜单宽度*/
        position: relative;
        padding-left: 1.3rem;
    } 
#container-sider{
    font-size:12px;
}
}
@media screen and (max-width:768px){ 
    .footer-nav-line .nav-item-1 { /*底部导航英文*/
            font-size:14px;
            color: #000;
        }
    
    .footer-nav-line .nav-item-2 {/*底部导航中文*/
            font-size: 12px;
            color: #000;
        }
    .the-sider {/*左侧导航宽度*/
            width: 1.8rem;
        }
    #the-sider-menu {/*左侧菜单宽度*/
            width: 1.8rem;
        }
    .icon-temgoo:before {/*LOGO*/
            font-size:1.5rem!important;
          }      
    .right-container {/*案例页面左侧菜单宽度*/
            position: relative;
            padding-left: 1.8rem;
        } 
    .nav-item-name,.nav .flt-book,.the-sider .lang a{/*左侧菜单字体大小*/
        font-size:12px;
    }
    .the-footer .footer-statement .footer-statement-text,.the-footer .footer-statement .footer-statement-text a {/*底部版权字体大小*/
        font-size: 12px;
        }
    }

@media screen and (max-width:760px){ 
    .footer-nav-line .nav-item-1 { /*底部导航英文*/
            font-size:8px;
            color: #000;
        }
    
    .footer-nav-line .nav-item-2 {/*底部导航中文*/
            font-size: 8px;
            color: #000;
        }
        .footer-nav-line .nav-item {
            width: 3.23rem;
            float: left;
            padding-left: 0.4rem;
        }
    .the-sider {/*左侧导航宽度*/
            width: 1.9rem;
        }
    #the-sider-menu {/*左侧菜单宽度*/
            width: 1.9rem;
        }
    .icon-temgoo:before {/*LOGO*/
            font-size:1.5rem!important;
          }    
    .common-banquan {/*首页右侧版权*/
            top: 6rem;
            right: -2.5rem;
            font-size: 4px;
        }     
    .right-container {/*案例页面左侧菜单宽度*/
            position: relative;
            padding-left: 1.6rem;
        } 
    .nav-item-name,.nav .flt-book,.the-sider .lang a{/*左侧菜单字体大小*/
        font-size:7px;
    }
    .the-footer .footer-statement .footer-statement-text,.the-footer .footer-statement .footer-statement-text a {/*底部版权字体大小*/
        font-size: 7px;
        }
        .iconweixin:before,.iconxiaoxitongzhi:before {
            font-size: 12px;
        }
    }