@charset "utf-8";
/* CSS Document */
img{ display:block;}
.bor-r{ border-right:1px solid #e6e6e6;}
.h53{ height:53px; line-height:53px;}.h60{ height:60px;}.h90{ height:90px;}.h55{ height:55px;}.h22{ height:22px; overflow:hidden;}.h44{ height:44px; overflow:hidden;}.h66{ height:66px; line-height:22px; overflow:hidden;}
.mt20{ margin-top:20px;}.mt25{ margin-top:25px;}.mt30{ margin-top:30px;}.mt40{ margin-top:40px;}.mt80{ margin-top:80px;}.ml115{ margin-left:115px;}.mb30{ margin-bottom:30px;}
.w335{ width:335px; overflow:hidden;}.w310{ width:310px; overflow:hidden;}.w380{ width:380px; overflow:hidden;}.w500{ width:500px; overflow:hidden;}.w100{ width:100px; overflow:hidden;}.w890{ width:890px; overflow:hidden;}.w280{ width:280px; overflow:hidden;}
.c106{ color:#1067b4;}.cbec{ color:#beccdd}
.f36{ font-size:36px;}
.lh40{ line-height:40px; height:40px;}
.pt50{ padding-top:50px;}
.h50{ height:50px;}

/*头部*/
header{height:100px; z-index:10; background-color:#fff;position: relative;}
header .wrap{height:100px;}
header .logo{ display:block; width:172px; height:60px; position: absolute; top: 50%; margin-top: -30px; left: 0;}
header .logo img{ display:block;}
header span.slogn{display: block; width: 174px; height: 32px; position: absolute; left: 190px; top: 50%; margin-top: -16px; line-height: 32px; font-size: 18px; border-left: 1px solid #ececec;}
header .pho{ background:url(../image/phone_icon1.png) no-repeat left center; width:180px; height:44px; line-height:20px; margin-top:25px; padding-left:50px;}

/*导航*/
.nav{ position:absolute;height: 100px; right: 240px; top:0 }
.nav .firstnav{display:block;float:left;position:relative;margin-right: 10px;}
.nav .firstnav h3{ float:left; height:100px;}
.nav .firstnav h3 a:hover span{ color: #fff; height:50px; display:inline-block;}
.nav .firstnav h3 a{display:inline-block; padding:0 20px; height:100px; line-height:100px; font-size:16px; color:#000; text-align:center; font-weight:normal; vertical-align:middle;}
.nav .firstnav h3 a:hover,.nav .firstnav h3 a.active{background: #042d72;color:#fff;text-decoration:none;}
.nav .subList{display:none;width: 397px;top:100px;left:0;position:absolute;background: rgba(255,255,255,0.9);border-radius: 0px 10px 10px 10px;justify-content:start;align-items: flex-start;transition: all 0.2s;}
.nav .subList .subList_ul{float:left;min-width: 130px;height: 180px;background-color: #042d72;padding:15px 0;border-top-left-radius: 0px;border-bottom-left-radius: 10px;display: flex;flex-direction:column;flex-wrap: wrap}
.nav .subList .subList_ul li{ display: inline-block; width: 130px;}
.nav .subList a{ display:block; text-align: center;height:36px; line-height:36px; color:#fff; font-size:14px; padding:0 5px; overflow: hidden;}
.nav .subList a:hover,.nav .subList a.on{ background-color:#fff; color:#042d72; text-decoration:none;}
.nav .subList .nav_img {padding: 20px; float: left;}
.subList_show{ display:flex;}
.nav .firstnav:hover .subList{}
.nav .firstnav:hover h3 a{color:#fff;}

/*banner图*/
.banner{height:755px; overflow:hidden;}

/*关于我们*/
.about{ background-color: #f9f9f9;padding-top:50px; position: relative;}
.about .bgcolor{ background-color: #eee;height: 270px; position: absolute; width: 100%; left: 0; top: 0;}
.about_con{position: absolute; left: 450px; top: 0;}
.title h2{ font-size: 30px; padding-bottom: 15px;}
.title h4{ font-size:13px; color: #666666; font-weight: normal;}
.about_con .brief{ font-size:14px; line-height: 30px;height: 90px;  padding-top:30px;text-overflow: ellipsis; overflow: hidden;}
/*关于我们*/
.about_list{ position: absolute; left:370px; top:202px;}
.about_list li{float:left;text-align:center;margin-top:60px;padding: 0 20px;width: 235px;overflow: hidden;}
.about_list li a{ display: block; width: 100%; height: 100%; transition: all 0.2s; -webkit-transition:all 0.2s;}
.about_list li a span{ width:114px; height:114px; display:inline-block; background:url(../images/about1.png) no-repeat;}
.about_list li a span.icon-1{ background-position:0px 0px;}
.about_list li a span.icon-2{ background-position:-154px 0px;}
.about_list li a span.icon-3{ background-position:-308px 0px;}
/*.about_list li a:hover span.icon-1{ background-position:0px -134px;}
.about_list li a:hover span.icon-2{ background-position:-154px -134px;}
.about_list li a:hover span.icon-3{ background-position:-308px -134px;}*/
.about_list li a h4{ color:#042d72; font-size:16px; margin-top:40px; line-height:30px;}
.about_list li a p{ line-height:22px; height:44px; font-size:14px; color:#999; margin-top:10px; margin-bottom:20px;overflow:hidden;}
.about_list li a:hover{ transform: translateY(-5px); -webkit-transform: translateY(-5px);}

/*产品展示*/
.product{ padding:50px 0; background-color: #eee;}
.slideTxtBox .hd{ position:relative; margin-bottom: 30px;}
.slideTxtBox .hd ul{position:absolute; right:0px; top:5px; height:32px; display: flex;}
.slideTxtBox .hd ul li{ display:block; height:32px; line-height: 32px; padding:0 15px; cursor:pointer; background-color: #042d72; color:#fff; font-size: 14px;margin-left: 10px;}
.slideTxtBox .hd ul li.on{ background:#fff;color:#042d72;}
/*内容部分*/
.slideTxtBox .bd ul{ display: flex; justify-content: space-between; flex-wrap: wrap}
.slideTxtBox .bd li{ display: block; width: 396px; height: 297px; margin-bottom: 6px; position: relative; }
.slideTxtBox .bd li div{position: absolute; left: 0; top: 0; width: 100%;height: 100%; background: rgba(0,0,0,0.6);opacity: 0; transition:all 0.3s;}
.slideTxtBox .bd li div p{ color: #fff;display: block; height: 38px; line-height: 38px; font-size: 18px; text-align: center; margin-top: 113px;}
.slideTxtBox .bd li div em{ display: block;width: 100%; height: 32px; background:url(../images/more.png) no-repeat center;}
.slideTxtBox .bd li a:hover div{ opacity: 1;}
.product_more{ padding-top:40px;}
.product_more a{display: inline-block; line-height: 46px; background: #042d72; border-radius: 30px; color: #fff; padding: 0 30px; font-size: 13px; text-decoration: none; -webkit-transition: all .2s; transition: all .2s; }
.product_more a:hover{ padding:0 60px;}

/*行业应用*/
.industry {
    padding: 50px 0;
}

    .industry .title {
        margin-bottom: 40px;
    }

    .industry ul {
        display: flex;
        justify-content: space-around;
    }

        .industry ul li, .industry ul li a {
            display: block;
            width: 220px;
            text-align: center;
        }

            .industry ul li a img {
                display: inline-block;
                width: 112px;
                height: 112px;
            }

            .industry ul li a .icon {
                display: inline-block;
                width: 112px;
                height: 112px;
                border-radius: 100%;
                margin-bottom: 10px;
                transition: all 0.2s;
                -webkit-transition: all .2s;
                overflow: hidden;
            }

            .industry ul li a:hover .icon {
                transform: translateY(-5px);
                -webkit-transform: translateY(-5px);
            }

            .industry ul li a:hover .icon-01 {
                display: none;
            }

            .industry ul li a:hover .icon-on1 {
                position: absolute;
                left: 0;
                top: 0;
            }

            .industry ul li a h3 {
                font-size: 16px;
                padding: 12px 0;
            }

            .industry ul li a p, .industry ul li a:hover p {
                font-size: 12px;
                color: #888888;
                line-height: 20px;
            }

            .industry ul li a:hover h3 {
                color: #042d72;
            }
/*仁泰博客*/
.news{ padding: 50px 0;background-color: #f4f4f4;}
.news .title{ margin-bottom:55px;}
/*新闻条目*/
.news_items{ width: 383px; float: left; background-color: #fff; margin-right: 24px; box-shadow: 2px 2px 30px rgb(0 0 0 / 10%);transition: all 0.2s;-webkit-transition: all .2s;}
.news_items:hover{transform: translateY(-5px); -webkit-transform: translateY(-5px);}
.news_items .items_con{padding:30px 26px 44px;}
.news_items .items_con h3{ font-size: 18px; display: inline-block; height: 28px; line-height: 28px; overflow: hidden; margin-bottom: 15px; font-weight: normal;}
.news_items .items_con div{ display: block; height: 60px; line-height: 20px; overflow: hidden; text-overflow: ellipsis;font-size: 14px; color: #666666; margin-bottom: 15px;}
.news_items .items_con p{ color: #929292; font-size: 14px;}
.news_items .items_img{ width:383px; height: 214px; position: relative;}
.news_items .items_img img{ display: block;}
.news_items .items_img em{ display: inline-block; width: 0; height: 0; border-left:12px solid transparent; border-right:12px solid transparent;border-top:12px solid #fff; position: absolute; left: 50px; top: 0;}
/*新闻列表*/
.news_list{ float: right;}
.news_list li{width: 331px; padding:22px 26px; background-color: #fff;margin-bottom: 25px;box-shadow: 2px 2px 30px rgb(0 0 0 / 10%);transition: all 0.2s;-webkit-transition: all .2s;}
.news_list li:hover{transform: translateY(-5px); -webkit-transform: translateY(-5px);}
.news_list  h3{ font-size: 18px; display: inline-block; height: 28px; line-height: 28px; overflow: hidden; font-weight: normal; margin-bottom: 6px;}
.news_list  div{ display: block; height: 48px; overflow: hidden; text-overflow: ellipsis;font-size: 14px; color: #666666;}


/*底部*/
footer{ background-color: #3a3a3a; padding: 70px 0;}
footer .wrap{ display:flex; justify-content: space-between}
footer .footer_logo{width: 280px; height: 88px;}
footer .contact_info li{ font-size: 14px; line-height: 34px; color: #fff;}
footer .footer_wecode{width:150px;}
footer .footer_wecode div{ width:138px; height: 138px; padding: 6px; background: rgba(255,255,255,0.3); border-radius: 5px; margin-bottom: 15px;}
footer .footer_wecode div img{ display:block;}
footer .footer_wecode p{font-size: 14px; color: #999999; text-align: center;}

/*版权所有*/
.copyright{ color:#999; background-color: #000; font-size: 14px;padding: 20px 0; text-align: center;}
.copyright a{ color: #999;}
.copyright a:hover{ text-decoration: underline;}

/*内页banner图*/
.inbanner { height: 300px; position: relative; color: #fff; display: table; width: 100%; z-index: 2;overflow: hidden; }
.inbanner:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; }
.inbanner .title { position: absolute; text-align: center; display: table-cell;vertical-align: middle; width: 100%; margin: 110px auto; }
.inbanner .title .cn { font-size: 38px; line-height: 38px; letter-spacing: 5px; font-weight: bold; margin-bottom: 5px; }
.inbanner .title .en { font-size: 20px; text-transform: uppercase; font-family: arial; }


/*内页左侧二级导航*/
.side{width:280px; background-color:#f5f5f5;}
.sub_menu{ padding-bottom:10px;}
.sub_menu_hd{ padding:30px 0 30px 20px; color:#042d72;}
.sub_menu_bd li{ line-height:45px;}
.sub_menu_bd li a{ display:block; font-size:16px; padding-left:30px;}
.sub_menu_bd li a:hover{ color:#fff; background-color:#BBBBBB;}
.sub_menu_bd li a.active,.sub_menu_bd li dl dd a.active,.sub_menu_bd li dl dd a.active:hover{ background-color:#042d72; color:#fff;}
.sub_menu_bd li dl{ display:none;}
.sub_menu_bd li dl.current{ display:block;}
.sub_menu_bd li dl dd a{ font-size:13px; padding-left:60px; color:#666; height: 38px; line-height: 38px;}
.sub_menu_bd li dl dd a:hover{ background-color: #ccc;}

/*内页产品左侧三级菜单*/

/*内页左侧联系方式*/
.side_contact{ border-top: 1px solid #e3e3e3}
.side_contact ul{padding:0 20px;}
.side_contact ul li{ margin-bottom: 5px;}

/*内页右侧标题*/
.inner_title{ border-bottom:1px solid #EBEBEB; padding-bottom:8px;}
.inner_title em{display:inline-block; font-size:28px; line-height: 40px; color:#3d3d3d; position:relative; font-weight: normal;}
.inner_title em:after{ content:""; display:inline-block; width:110%; height:2px; background-color:#042d72; position:absolute; left:0; bottom:-9px;}

/*面包屑导航*/
.location_box{height:32px; line-height:32px; background-color:#f5f5f5; border-bottom:1px solid #e3e3e3;}
.location{font-size:12px;  padding:10px 10px 0 0; font-weight:normal; color:#666;}
.location i{display:inline-block; width:0; height:0; line-height:0; border-style:solid; border-width:4px 0 4px 4px; border-color:transparent transparent transparent #666666; margin:0 10px;}
.location a{ color:#666666;}.location a:hover{ color:#C80900; text-decoration:underline;}

/*内页关于我们*/
/**/
.solution h3{ height:60px; line-height: 60px; background-color: #f5f5f5; text-align: center; font-size: 22px; margin: 20px 0; color: #042d72; }
/*关于我们下方下载*/
.download{ margin-top: 30px; background-color: #ecf3fe; border: 1px dashed #b0c2da;padding: 20px;}
.download ul li{padding: 15px 0; border-bottom: 1px dashed #c2d2e7; line-height: 22px; display: flex; justify-content: space-between;}
.download ul li div{ padding-left:45px; background: url(../images/file_icon.png) no-repeat left center;}
.download ul li div .file_size{font-size:12px; color: #c5c5c5;}
.download a.download_btn {color:#3f7aeb;padding-left: 25px; background: url(../images/download.png) no-repeat left center;line-height: 44px;}
.download a:hover{color:#3f7aeb; text-decoration: underline;}

/*内页资质荣誉*/
.inner_honor{}
.inner_honor li{ display: block; width: 280px; margin:0 8px 15px 8px; float: left;}
.inner_honor li img{ display:block; width: 280px; height: 210px; border:1px solid #dedede; box-sizing: border-box;}
.inner_honor li p{ line-height: 30px; font-size: 16px; text-align: center;}

/*内页新闻*/
.inner_news{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.inner_news .item {width: 100%;margin-bottom: 20px;box-sizing: border-box;border: 1px solid #dedede;-webkit-transition: all .4s;transition: all .4s;background: #fff;padding: 30px;}
.inner_news .item:nth-child(2n) { margin-right: 0; }
.inner_news .item:hover { -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1); box-shadow: 0 15px 30px rgba(0,0,0,0.1); -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); }
.inner_news .item .time { font-size: 12px; line-height: 20px; margin-bottom: 10px; color: #999; }
.inner_news .item .time .split { margin: 0 10px; color: #ccc; }
.inner_news .item .name { font-size: 18px; line-height: 28px; margin-bottom: 25px; height: 28px; overflow: hidden; }
.inner_news .item .name a { color: #111; }
.inner_news .item .name a:hover { color: #042d72; }
.inner_news .item .text { color: #777; font-size: 14px; line-height: 24px; height: 72px; overflow: hidden; margin-bottom: 16px; }
.inner_news .item .link { overflow: hidden; margin-bottom: -12px; }
.inner_news .item .link a { width: 24px; height: 24px; display: block; background: url(../images/hb01img01.png) no-repeat center; float: left; }
.inner_news .item .link a.l02 { float: right; background-image: url(../images/hb01img02.png); }

/*新闻详情*/
.news_title { font-size: 24px; text-align: center; line-height: 30px; font-family: microsoft yahei; margin-bottom: 5px; font-weight:normal;}
.news_time { font-size: 12px; text-align: center; line-height: 30px; color: #999;}
.news_text { margin: 20px 0;}
.news_text img { max-width: 100%; }
.news_text p{ margin-bottom: 20px;}

/*内业产品中心*/

.inner_pro li{ transition:all 0.2s;}
.inner_pro li a{display:block;}
.inner_pro li:hover { -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1); box-shadow: 0 0px 10px rgba(0,0,0,0.1); -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); z-index: 1; }
.inner_pro li img{ border-bottom: none;}
.inner_pro li p{ height:48px; line-height: 48px; background-color: #f5f5f5; border: 1px solid #eee; border-top: none; overflow: hidden; padding: 0 10px;}
.inner_pro li:hover p{ background-color: #042d72; color: #fff;}

/*内页产品二级菜单*/
.inner_prolist{ margin-bottom:15px;}
.inner_prolist li{ display:inline-block; margin:0 14px 10px 0; }
.inner_prolist li:nth-child(4n){margin-right: 0;}
.inner_prolist li a{ display: inline-block; width: 199px; height: 36px; line-height: 36px; padding: 0 5px; text-align: center; background-color: #f2f2f2; font-size:14px;}
.inner_prolist li a:hover,.inner_prolist li a.active{ background-color: #042d72; color: #fff;}

/*发展历程*/
.development{ width:550px; margin-left: auto; margin-right: auto;}
.development ul{ position:relative;}
.development ul::before{ content:""; display: inline-block; width: 3px; height: 100%; background-color: #4a6076; position: absolute; left: 50%; top:-15px;margin-left: -1px;}
.development ul li{margin-bottom: 15px; width:288px;}
.development ul li h4{ font-weight:normal; font-size: 22px; margin-bottom: 15px; position: relative; overflow:hidden;}
.dot{ display:inline-block; width: 9px; height: 9px; border-radius: 11px; background-color: #6a84a4; position: absolute; left: 80px; top: 50%; margin-top: -4px;}
.big_circle{ display: inline-block;width: 13px; height: 13px; border-radius: 16px; padding: 5px; background-color: #fff; border:1px solid #6681a3; position: absolute; right: 0; top: 50%; margin-top: -12px;}
.small_circle{ display: inline-block;width: 13px; height: 13px; border-radius: 16px; background-color: #6681a3;}
.line{ display: inline-block; height: 1px; width: 95%; position: absolute; left: 83px; top: 50%;background-color: #6681a3;}
.development ul li div{ width:70%; font-size:16px; color: #7f7f7f; line-height: 24px; min-height: 48px;}
.development ul li:nth-child(n),.development ul li:nth-child(2n+1){ float:left;}
.development ul li:nth-child(2n){ float: right; text-align: right;}
.development ul li:nth-child(2n) div{float: right;}
.development ul li:nth-child(2n) .dot{left:auto; right:80px;}
.development ul li:nth-child(2n) .big_circle{left:0px;}
.development ul li:nth-child(2n) .line{left:auto; right:83px;}

.development ul li:nth-child(1) .dot,.development ul li:nth-child(1) .line,.development ul li:nth-child(1) .small_circle{background-color: #ba68c8;}
.development ul li:nth-child(1) .big_circle{border:1px solid #ba68c8;}
.development ul li:nth-child(2) .dot,.development ul li:nth-child(2) .line,.development ul li:nth-child(2) .small_circle{background-color: #64b5f6;}
.development ul li:nth-child(2) .big_circle{border:1px solid #64b5f6;}
.development ul li:nth-child(3) .dot,.development ul li:nth-child(3) .line,.development ul li:nth-child(3) .small_circle{background-color: #4dd0e1;}
.development ul li:nth-child(3) .big_circle{border:1px solid #4dd0e1;}
.development ul li:nth-child(4) .dot,.development ul li:nth-child(4) .line,.development ul li:nth-child(4) .small_circle{background-color: #81c784;}
.development ul li:nth-child(4) .big_circle{border:1px solid #81c784;}
.development ul li:nth-child(5) .dot,.development ul li:nth-child(5) .line,.development ul li:nth-child(5) .small_circle{background-color: #fbc02d;}
.development ul li:nth-child(5) .big_circle{border:1px solid #fbc02d;}
.development ul li:nth-child(6) .dot,.development ul li:nth-child(6) .line,.development ul li:nth-child(6) .small_circle{background-color: #f57c00;}
.development ul li:nth-child(6) .big_circle{border:1px solid #f57c00;}
.development ul li:nth-child(7) .dot,.development ul li:nth-child(7) .line,.development ul li:nth-child(7) .small_circle{background-color: #e57373;}
.development ul li:nth-child(7) .big_circle{border:1px solid #e57373;}

.development ul li:nth-child(7n+1) .dot,.development ul li:nth-child(7n+1) .line,.development ul li:nth-child(7n+1) .small_circle{background-color: #ba68c8;}
.development ul li:nth-child(7n+1) .big_circle{border:1px solid #ba68c8;}
.development ul li:nth-child(7n+2) .dot,.development ul li:nth-child(7n+2) .line,.development ul li:nth-child(7n+2) .small_circle{background-color: #64b5f6;}
.development ul li:nth-child(7n+2) .big_circle{border:1px solid #64b5f6;}
.development ul li:nth-child(7n+3) .dot,.development ul li:nth-child(7n+3) .line,.development ul li:nth-child(7n+3) .small_circle{background-color: #4dd0e1;}
.development ul li:nth-child(7n+3) .big_circle{border:1px solid #4dd0e1;}
.development ul li:nth-child(7n+4) .dot,.development ul li:nth-child(7n+4) .line,.development ul li:nth-child(7n+4) .small_circle{background-color: #81c784;}
.development ul li:nth-child(7n+4) .big_circle{border:1px solid #81c784;}
.development ul li:nth-child(7n+5) .dot,.development ul li:nth-child(7n+5) .line,.development ul li:nth-child(7n+5) .small_circle{background-color: #fbc02d;}
.development ul li:nth-child(7n+5) .big_circle{border:1px solid #fbc02d;}
.development ul li:nth-child(7n+6) .dot,.development ul li:nth-child(7n+6) .line,.development ul li:nth-child(7n+6) .small_circle{background-color: #f57c00;}
.development ul li:nth-child(7n+6) .big_circle{border:1px solid #f57c00;}
.development ul li:nth-child(7n+7) .dot,.development ul li:nth-child(7n+7) .line,.development ul li:nth-child(7n+7) .small_circle{background-color: #e57373;}
.development ul li:nth-child(7n+7) .big_circle{border:1px solid #e57373;}
/* 分页*/
.fpage{line-height: 36px; font-size: 14px; }
.fpage font{ color: #042D72; padding: 0 5px;}
.fpage a{display:inline-block; padding: 0px 5px; height:34px; line-height:34px; text-align:center; border:1px solid #D5CEC4; font-size:14px; margin:0 5px;}
.fpage span{ min-width: 24px !important;display:inline-block; padding: 0px 5px; height:34px; line-height:34px; text-align:center; border:1px solid #D5CEC4; font-size:14px; margin:0 5px;background-color:#042D72; color:#fff;}
.fpage a:hover{background-color:#042D72; border:1px solid #042D72; color:#fff;}

/* 中英文切换*/
.link{ position: absolute;  right: 0;top: 10px;}
.link a{padding: 0px 5px;}
.link a:hover{color: #042D72;}

/* 在线客服 */
.box {width: 52px;height: 212px;right: 0;top: 30%;position: fixed; z-index: 999;}
.box ul li {width: 30px;height: 30px;display: block; padding: 10px; margin: 0 auto; text-align: center; border-bottom: 1px solid #fff ;background: #ccc; overflow: hidden}
.box ul li:hover{ cursor: pointer;background: #28A745}
.box ul li img{ display: inline-block;}
.weixin:hover .weixin-logo {background: url(/images/ewm.jpg) no-repeat;background-position: 0 0;width:130px;height:130px;overflow: hidden;position: absolute;top:0px; right: 52px;-webkit-transition: all .3s;-moz-transition: all .3s;-ms-transition: all .3s;-o-transition: all .3s;}
.phone:hover .tel{ display: block; background: #fff; white-space: nowrap; height: 50px; line-height: 52px; color: #333; padding: 0 10px; position: absolute; top: 51px; right:-100px; animation: moveRight 1s forwards;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2)}
.email:hover .email-text{display: block; background: #fff; white-space: nowrap; height: 50px; line-height: 52px; color: #333; padding: 0 10px; position: absolute; top: 102px; right:-100px; animation: moveRight 1s forwards;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2)}
@keyframes moveRight { 0% {right: -100px; }100% {right:52px; }}