.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size:0; } .rightTitle{ font-size:24px; font-weight:bold; text-align:center;} .notice{ text-align:right; padding-bottom:10px;} .main .foot { position:relative; text-align:center; height:78px; border-top:1px solid #bebebe; border-bottom:1px solid #bebebe; margin:60px 0; } .qqchat iframe{ right:0 !important;} .gridContent .child{ width:45%; float:left; text-align:center;} .gridContent .child .childImg img{ width:400px !important;} .gridContent .child .childTitle2{ padding-top:30px; font-size:30px; color:#666;} .main .foot .child { display:inline-block; *display:inline; *zoom:1; position:relative; width:193px; height:100%; border-left:1px solid #ddd; } .main .foot a:nth-child(1) .child { border-left:0; } .subs{ padding-left:20px; font-size:11px;} .main .foot .child .childIcon, .main .foot .child .childInfo { display:inline-block; *display:inline; *zoom:1; vertical-align:middle; } .main .foot .child .childIcon { margin-top:20px; position:relative; background:#666; width:38px; height:38px; text-align:center; line-height:38px; border-radius:38px; -moz-border-radius:38px; -ms-border-radius:38px; -o-border-radius:38px; -webkit-border-radius:38px; } .main .foot .child .childIcon img { vertical-align:middle; } .main .foot .child .childIcon img { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .main .foot .child:hover .childIcon img { transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg); } .main .foot .child .childInfo { padding-left:12px; text-align:left; margin-top: 18px; } .main .foot .child .childInfo p { color:#666; font-size:14px; } * { transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -webkit-transition-property: all; -o-transition-property: all; } html, body { font-size:14px; background:#fff; margin:0px; padding:0px; font-family: "Microsoft YaHei", Helvetica Neue, Tahoma, Arial, "微软雅黑", "宋体", "黑体"; } img { border:0px; } ul, li, p { margin:0px; padding:0px; } a { text-decoration: none; } ul, li { list-style-type:none; } input, button, select, textarea, select, option { outline:none; } select, option, textarea { resize:none; -webkit-appearance: none; padding:0; margin:0; font-weight:normal; } input[type="button"], input[type="submit"], input[type="reset"], input[type="text"] { -webkit-appearance: none; padding:0; margin:0; font-weight:normal; } .container2 { position:relative; width:1200px; } .container { position:relative; width:100%; } .container:after { content: "020"; display: block; height: 0; clear: both; visibility:hidden; /* width:1140px; */ padding-left:100px; } .mainTitle { width:295px; margin-left:35px; line-height:50px; color:rgb(230,120,28); font-size:30px; text-align:left; } .seach { position:relative; margin-top:40px; width:300px; height:30px; background:#fff; } .seach .seachText { width:260px; color:#999999; font-size:12px; padding:0 0 0 6px; line-height:1; margin:0; border:0; height:30px; } .seach .btn { cursor:pointer; position:absolute; top:0; right:0; width:30px; height:30px; text-align:center; line-height:30px; background:#474747; } .seach .btn { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .seach .btn:hover { background:#000; } .seach .btn img { vertical-align:middle; } .pages ul{ float:right; padding:20px 0; margin-right:110px;} .pages li{ display:inline-block;} .pages li a{ color:#666;} .pages li.thisclass{ color:#F00;} .vedioHide { display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; background:url(../images/blackbg.png); z-index:4; } .vedioContent { display:none; position:fixed; top:50%; left:50%; width:650px; height:450px; margin:-260px 0 0 -335px; z-index:5; background:#fff; padding:20px 20px 50px 20px; box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -ms-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -o-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; -webkit-border-radius:6px; } .vedioContent iframe { width:100% !important; height:100% !important; } .vedioContent .vedioClose { position:absolute; bottom:18px; right:24px; cursor:pointer; } .header { position:fixed; width:100%; height:120px; background:rgb(55,63,66); z-index:500; border-bottom:2px solid rgb(231,120,23); } .header .container { height:100%; } .header .headerLogo { position:absolute; left:100px; width:283px; } .header .nav .navTop { position:absolute; top:0px; display:none; height:4px; background:#7e308e; } .header .nav .navTop { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .nav { position:absolute; top:0px; right:0px; width:63%; height:120px; } .header .nav .child { position:relative; float:left; width:12%; height:120px; line-height:120px; text-align:center; color:#666; } .header .nav .child.navChildSearch { line-height:20px !important; } .header .nav .child:hover .title { color:#ffffff; background:rgb(231,120,23); } .header .nav #menu3{ width:150px !important; } .header .nav .child .title { font-size:16px; color:#ffffff; } .header .nav .child .title { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .nav .child.on .title { color:ffffff; } .header .nav .child .childContent { display:none; position:absolute; top:120px; width:100%; } .header .nav .child .childContent .childContentLi { background:url(../images/navchildbg.png); background: rgb(55,63,66); color:#ffffff; font-size:14px; height:38px; line-height:38px; border-bottom:1px solid #c6c5c4; -webkit-box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); -moz-box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); -ms-box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); -o-box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); } .header .nav .child .childContent .childContentLi:hover { background:rgb(231,120,23); color:#fff; } .header .nav .child .language { display:inline-block; *display:inline; *zoom:1; height:16px; line-height:16px; padding:0 8px; font-size:16px; color:#666; } .header .nav .child .language:hover { color:#7D2F8D; } .header .nav .child .language.cn { border-right:1px solid #ccc; } .header .nav .child .language.on { color:#7D2F8D; } .header .nav .child .seachIcon { cursor:pointer; } .header .list { position:relative; background:#363839; z-index:6; } .header .list .container { padding:50px 0; display:none; } .header .list .content { width:492px; } .header .list .listMTitle { color:#fff; font-size:18px; line-height:24px; padding-bottom:24px; } .header .list .listTitle { position:relative; width:100%; } .header .list .listTitle:after { content: "020"; display: block; height: 0; clear: both; visibility:hidden; } .header .list .listTitle .title { border-bottom:1px solid #999999; line-height:36px; color:#B9B9B9; font-size:14px; font-family:Arial, Helvetica, sans-serif; } .header .list .listTitle .title a { color:#B9B9B9; font-size:14px; } .header .list .listTitle .title img { margin-right:12px; } .header .list .listTitle .title .pointer { cursor:pointer; position:absolute; right:0px; top:16px; width:11px; height:11px; } .header .list .listTitle .title .pointer .sub { position:absolute; left:0px; top:5px; width:11px; height:1px; background:#999; } .header .list .listTitle .title .pointer .sub.sub2 { transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); -webkit-transform:rotate(90deg); } .header .list .listTitle .title .pointer .sub.sub2 { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .list .listTitle .title .pointer.on .sub.sub2 { transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); } .header .list .listTitle .listContent { display:none; width:94%; float:right; } .header .list .addBtn { z-index:5; cursor:pointer; position:absolute; bottom:-80px; right:0; width:80px; height:80px; background:url(../images/addicon.png) no-repeat; } .header .list .addBtn .sub { position:absolute; width:10px; height:2px; background:#fff; } .header .list .addBtn .sub.sub1 { top:12px; left:22px; } .header .list .addBtn .sub.sub2 { top:12px; left:22px; transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); -webkit-transform:rotate(90deg); } .header .list .addBtn .sub.sub2 { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .list .addBtn.on .sub.sub2 { transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); } .header .searchContent { display:none; position:absolute; bottom:-80px; right:0px; padding:25px; background-color: #f2efef; border-bottom:1px solid #dcdadb; border-left:1px solid #dcdadb; } .header .searchContent .seach { margin:0; } .content{ width:100%;} .content_index{ width:1200px; margin:0 auto;} .wapNavBtn { display:none; position:absolute; top:38px; right:32px; cursor:pointer; } .wapLanguage { display:none; position:absolute; top:35px; right:120px; } .wapLanguage .language { padding:0 14px; color:#999999; font-size:28px; line-height:28px; display:inline-block; *display:inline; *zoom:1; } .wapLanguage .language.on { color:#7D2F8D; } .wapLanguage .language.cn { border-right:3px solid #bababa; } .wapNavPointer { display:none; position:absolute; top:3px; right:3px; cursor:pointer; } .crumbs { padding-top:120px; position:relative; height:55px; line-height:55px; background:url(../images/banner.jpg) repeat-x; background-position:center bottom; border-bottom:1px solid #e0e0e0; } .crumbs .title { float:left; color:#333333; font-size:20px; font-family:""微软雅黑""; margin-left:20px; } .crumbs .childs { float:right; color:#666; font-size:14px; font-family:"Hiragino Sans GB"; } .crumbs .childs a { color:#666; } .crumbs .childs span { margin:0 6px; } .main { padding:40px 0 90px 0; margin:0 auto; width:1200px; } .main .maxTitle { position:relative; line-height:34px; padding-bottom:20px; margin-left:20px; } .main .maxTitle span { position:relative; z-index:1; padding-right:18px; background:#fff; color:#7D2F8D; font-size:30px; } .main .maxTitle .sub { position:absolute; top:18px; width:100%; height:1px; width:100%; background:#d6d6d6; } .main .top { display:none; position:fixed; right:50px; bottom:300px; z-index:1; width:60px; height:60px; background:#d4d4d4; line-height:60px; text-align:center; cursor:pointer; } .main .top { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .main .top:hover { background:#717373; } .main .top img { vertical-align:middle; } .footer { height:162px; } .footer .title { color:#dadada; font-size:16px; padding-top:18px; } .footer .head { height:160px; background:rgb(55,63,66); padding-top:5px; } .footer .head .left { text-align:center; } .footer .head .left a{ color: #dadada;} .footer .head .right { position:absolute; top:0px; right:0px; width:344px; } .footer .head .right .content { margin-top:40px; } .footer .head .right .content img { margin-right:6px; } .footer .head .right .content img { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .footer .head .right .content img:hover { transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); -webkit-transform:scale(1.1); } .footer .foot { height:40px; background:rgb(231,120,23); line-height:40px; text-align:center; color:rgb(55,63,66); font-size:12px; font-family:Arial, Helvetica, sans-serif; font-family:""微软雅黑""; } .footer .foot a { color:rgb(55,63,66); } @media (max-width: 639px) { .container { width:93.75%; } .mainTitle { width:150px; line-height:35px; font-size:20px; } .seach { margin-top:19px; width:150px; height:21px; } .seach .seachText { width:125px; font-size:12px; padding:0 0 0 5px; line-height:21px; height: 20px; } .seach .btn { width:22px; height:22px; line-height:22px; } .vedioContent { width:300px; height:210px; margin:-130px 0 0 -160px; padding:10px 10px 20px 10px; } .vedioContent iframe { width:100% !important; height:100% !important; } .vedioContent .vedioClose { bottom:5px; right:10px; } .header { height:50px !important; } .header .headerLogo { top:13px !important; left:16px; width:56px; } .header .nav .navTop { display:none !important; } /*.header .nav { display:none; top:50px; right:0px; width:100%; height:auto !important; background:#fff; padding-bottom:10px; } .header .nav .child { float:none; width:90%; text-align:left; margin:0 auto; color:#333333; background-color: #f9f9f9; border-left:1px solid #dadada; border-right:1px solid #dadada; border-bottom:1px solid #dadada; height:auto !important; line-height: 35px !important; } .header .nav .child:nth-child(2) { border-top:1px solid #dadada; } .header .nav .child .title { font-size:12px; padding:0 2%; display: inherit; } .header .nav .child .childContent { display:none; position:relative; top:0px !important; width:100%; } .header .nav .child .childContent .childContentLi { padding:0 4%; color:#666; font-size:12px; height:35px; line-height:35px; border-top:1px solid #dadada; border-bottom:0px; } .header .nav .navChildLanguage { display:none; } .header .nav .navChildSearch { display:none; }*/ .header .list { display:none !important; } .header .searchContent { display:none !important; } .wapNavPointer { display:block; top:3px; right:3px; } .wapNavBtn { display:block; top:19px; right:16px; width:24px; } .wapLanguage { display:block; top:17px; right:50px; } .wapLanguage .language { padding:0 2px; font-size:14px; line-height:14px; } .wapLanguage .language.cn { border-right:1px solid #bababa; } .crumbs { padding-top:50px !important; height:30px; line-height:30px; } .crumbs .title { font-size:12px; } .crumbs .childs { display:none; } .main { padding:20px 0 45px 0; } .main .maxTitle { line-height:20px; } .main .maxTitle span { padding-right:8px; font-size:18px; } .main .maxTitle .sub { top:10px; } .footer { height:auto; } .footer .title { font-size:12px; padding-top:10px; line-height:17px; } .footer .head { height:95px; } .footer .head .left { position:absolute; top:0px; left:0px; width:150px; } .footer .head .right { width:130px; } .footer .head .right .content { margin-top:16px; } .footer .head .right .content img { margin-right:3px; height:14px; } .footer .foot { height:auto; line-height:14px; font-size:12px; padding:8px 0; } .footer .foot p { width:80%; margin:0 auto; } } @media (min-width: 640px) and (max-width:1023px ) { .container { width:600px; } .mainTitle { width:248px; line-height:50px; font-size:25px; } .seach { margin-top:17px; width:245px; height:33px; } .seach .seachText { width:235px; font-size:16px; padding:0 0 0 10px; line-height:33px; } .seach .btn { width:33px; height:33px; line-height:33px; } .vedioContent { width:600px; height:420px; margin:-260px 0 0 -320px; padding:20px 20px 50px 20px; box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -ms-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -o-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; -webkit-border-radius:6px; } .vedioContent iframe { width:100% !important; height:100% !important; } .vedioContent .vedioClose { position:absolute; bottom:10px; right:20px; cursor:pointer; } .header { height:73px !important; } .header .headerLogo { top:23px !important; left:31px; width:94px; } .header .nav .navTop { display:none !important; } /*.header .nav { display:none; top:73px; right:0px; width:100%; height:auto !important; background:#fff; padding-bottom:20px; } .header .nav .child { float:none; width:90%; text-align:left; margin:0 auto; color:#333333; background-color: #f9f9f9; border-left:1px solid #dadada; border-right:1px solid #dadada; border-bottom:1px solid #dadada; height:auto !important; line-height: 35px !important; } .header .nav .child:nth-child(2) { border-top:1px solid #dadada; } .header .nav .child .title { font-size:12px; color:#666; padding:0 2%; display: inherit; } .header .nav .child .childContent { display:none; position:relative; top:0px !important; width:100%; }*/ .solutions{ width:100px; border:10px solid red; } .header .nav .child .childContent .childContentLi { padding:0 4%; color:#666; font-size:12px; height:35px; line-height:35px; border-top:1px solid #dadada; border-bottom:0px; } .header .nav .navChildLanguage { display:none; } .header .nav .navChildSearch { display:none; } .header .list { display:none !important; } .header .searchContent { display:none !important; } .wapNavPointer { display:block; top:3px; right:3px; } .wapNavBtn { display:block; top:29px; right:33px; width:32px; } .wapLanguage { display:block; top:29px; right:120px; } .wapLanguage .language { padding:0 14px; font-size:18px; line-height:18px; } .wapLanguage .language.cn { border-right:3px solid #bababa; } .crumbs { padding-top:73px !important; height:55px; line-height:55px; } .crumbs .title { font-size:20px; } .crumbs .childs { font-size:14px; } .crumbs .childs span { margin:0 6px; } .main { padding:40px 0 90px 0; } .main .maxTitle { line-height:34px; } .main .maxTitle span { padding-right:18px; font-size:28px; } .main .maxTitle .sub { top:18px; } .footer { height:auto; } .footer .title { font-size:16px; padding-top:18px; line-height:28px; } .footer .head { height:140px; } .footer .head .left { position:absolute; top:0px; left:0px; width:300px; } .footer .head .right { width:130px; } .footer .head .right .content { margin-top:17px; } .footer .head .right .content img { margin-right:6px; } .footer .foot { height:auto; line-height:16px; font-size:14px; padding:11px 0; } .footer .foot p { width:70%; margin:0 auto; } } @media (min-width: 1024px) and (max-width:1199px ) { .container { width:980px; } .mainTitle { width:295px; line-height:56px; font-size:36px; } .header { height:80px !important; } .header .headerLogo { top:16px !important; left:60px; width:133px; height:50px; margin-bottom:200px; } .header .nav .navTop { height:2px; } .header .nav { height:80px !important; } .header .nav .child { height:80px !important; line-height:80px !important; } .header .nav .child .title { font-size:12px; } .header .nav .child .childContent { top:80px !important; } .header .nav .child .childContent .childContentLi { font-size:12px; height:30px; line-height:30px; } .header .nav .child .language { height:12px; line-height:12px; padding:0 4px; font-size:12px; } .header .nav .child .seachIcon { width:14px; margin-top: 33px !important; } .header .list .container { padding:40px 0; } .header .list .content { width:492px; } .header .list .listMTitle { font-size:16px; line-height:20px; padding-bottom:10px; } .header .list .listTitle .title { line-height:24px; font-size:12px; } .header .list .listTitle .title a { font-size:12px; } .header .list .listTitle .title img { margin-right:12px; } .header .list .listTitle .title .pointer { top:6px; } .crumbs { padding-top:80px !important; } } @media (min-width: 1200px) and (max-width:1439px ) { } @media (min-width: 1440px) and (max-width:1920px ) { } /*animate*/ @keyframes rightOpacityShow { 0% { transform: translateX(-80px); opacity:0; } 80% { transform: translateX(20px); } 100% { transform:translateX(0); opacity:1; } } @-moz-keyframes rotateYOpacityAn { 0% { -moz-transform: translateX(-80px); opacity:0; } 80% { -moz-transform: translateX(20px); } 100% { -moz-transform:translateX(0); opacity:1; } } @-webkit-keyframes rotateYOpacityAn { 0% { -webkit-transform: translateX(-80px); opacity:0; } 80% { -webkit-transform: translateX(20px); } 100% { -webkit-transform:translateX(0); opacity:1; } } @-o-keyframes rotateYOpacityAn { 0% { -o-transform: translateX(-80px); opacity:0; } 80% { -o-transform: translateX(20px); } 100% { -o-transform:translateX(0); opacity:1; } } /*index.css*/ .tbox { width: 1200px; margin:0 auto; overflow: hidden; } .tbox dt{ padding-bottom:10px; } .tbox dd { margin:0; overflow: hidden; } .tbox dd { overflow: hidden; } .f5 li a{font-size:11px;} .tbox dt span.more { color: #596f37; float: right; line-height: 25px; padding-right: 8px; position: relative; } .tbox dt span.more a { color: #596f37; text-decoration: none; } .f5 { clear: both; height: 40px; overflow: hidden; padding-bottom: 10px; width: 100%; } .f5 li { float: left; line-height: 14px; padding: 8px 10px 0; white-space: nowrap; } .f5 li a{ color:#ffffff; } .banner { position:relative; width:100%; height:auto; overflow:hidden; padding-top:120px; } .banner .container { height:100%; } .banner .contents { position:absolute; top:120px; left:0px; width:100%; height:100%; } .banner .content { position:absolute; top:0px; width:100%; height:100%; background-size:100%; background-repeat:no-repeat; background-position:left top; text-align:center; } .banner .contentInfo { display:none; overflow:hidden; position:absolute; top:50%; left:100px; width:675px; height:200px; margin-top:-100px; z-index:1; text-align:left; } .banner .contentInfo .sub { text-shadow:0px 0px 3px #b67ebc; position:absolute; top:17px; left:8px; width:2px; height:120px; background:#fff; } .banner .contentInfo .sub { transform-origin:left bottom; -moz-transform-origin:left bottom; -ms-transform-origin:left bottom; -o-transform-origin:left bottom; -webkit-transform-origin:left bottom; } .banner .contentInfo .quan { text-shadow:0px 0px 3px #b67ebc; position:absolute; top:128px; left:0px; width:14px; height:14px; border:2px solid #fff; border-radius:16px; -moz-border-radius:16px; -ms-border-radius:16px; -o-border-radius:16px; -webkit-border-radius:16px; } .banner .contentInfo .title { text-shadow:0px 0px 3px #b67ebc; position:absolute; left:32px; top:8px; line-height:50px; font-size:40px; color:#fff; font-family:"微软雅黑"; } .banner .contentInfo .info { text-shadow:0px 0px 3px #b67ebc; position:absolute; left:32px; top:70px; line-height:32px; font-size:20px; color:#fff; } .banner .contentInfo .btn { text-shadow:0px 0px 3px #b67ebc; position:absolute; top:146px; left:32px; color:#fff; border:1px solid #fff; text-align:center; line-height:32px; width:110px; height:30px; border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; -webkit-border-radius:30px; } .banner .bannerNav { position:absolute; bottom:10px; width:100%; text-align:center; z-index:2; } .banner .bannerNav .bannerNavChild { margin:0 10px; width:10px; height:10px; display:inline-block; *display:inline; *zoom:1; background:#fff; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; cursor:pointer; } .banner .bannerNav .bannerNavChild.on { background:#000; animation:bannerNavChildOn .2s ease-in-out 0s both; -moz-animation:bannerNavChildOn .2s ease-in-out 0s both; -webkit-animation:bannerNavChildOn .2s ease-in-out 0s both; -o-animation:bannerNavChildOn .2s ease-in-out 0s both; } .banner .bannerBg { width:100%; height:auto; vertical-align:middle; } .about { padding:20px 0; background:#fff; } .about .container2{margin:0 auto;} .about .left { width:600px; height:240px; float:left; } .about .left img { width:100%; height:100%; vertical-align:middle; } .about .right { position:relative; width:500px; height:240px; float:left; left:100px; } .about .right .title { font-size:20px; color:#923AA4; line-height:20px; padding-bottom:20px; } .about .right .info { font-size:14px; color:#666; line-height:22px; } .about .right .btn { position:absolute; bottom:0px; left:0px; width:122px; height:38px; border:1px solid #dcdcdc; line-height:38px; text-align:center; color:#999999; font-size:14px; } .about .right .btn { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .about .right .btn:hover { background:#7E308E; color:#fff; border:1px solid #fff; } .products { padding:40px 0px; background:#fffff; } .news{ margin:20px auto; background:#fffff; outline-style:dashed; outline-color:#9C9A9B; outline-width:1px; } .news .container { height:415px; } .products .contents{} .news .contents { height:380px; text-align:center; } .news .content { position:absolute; top:0; left:0; } .products .child { margin:10px 20px; float:left; } .products .child .childImg{ width:342px; overflow:hidden;} .news .child { display:none; position:absolute; width:342px; } .news .child .childImg { width:300px; height:186px; overflow:hidden; } .news .child .childImg { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .products .child .childImg:hover,.news .child .childImg:hover { box-shadow:0px 0px 5px #000; -moz-box-shadow:0px 0px 5px #000; -ms-box-shadow:0px 0px 5px #000; -o-box-shadow:0px 0px 5px #000; -webkit-box-shadow:0px 0px 5px #000; } .news .child .childImg img { vertical-align:middle; width:100%; height:100%; } .products .child .childImg img,.news .child .childImg img { transition-duration: 1s; -ms-transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; } .products .child .childImg img:hover,.news .child .childImg img:hover { transform:rotate(20deg) scale(1.4); -moz-transform:rotate(20deg) scale(1.4); -ms-transform:rotate(20deg) scale(1.4); -o-transform:rotate(20deg) scale(1.4); -webkit-transform:rotate(20deg) scale(1.4); } .products .child .childTitle,.news .child .childTitle { line-height:30px; padding-top:20px; color:#666; font-size:24px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:center; } .products .child .childTitle a{ color:#666; text-align:center; font-size:18px; } .news .child .childTime { color:#999999; font-size:14px; line-height:40px; } .news .child .childInfo { color:#878787; font-size:14px; line-height:22px; } .news .navBtn { position:absolute; top:80px; height:70px; cursor:pointer; } .news .navBtn.leftBtn { left:-88px; } .news .navBtn.rightBtn { right:-88px; } .other { position:relative; background:#fff; padding:80px 0 60px 0; text-align:center; } .other .child { width:280px; display:inline-block; *display:inline; *zoom:1; margin-right:174px; vertical-align:text-top; } .other .child#vedioChild { margin-right:0px; } .other .child#vedioChild .childImg { position:relative; overflow:hidden; } .other .child .childImg { width:280px; height:280px; background:#EFEFEF; border-radius:280px; -moz-border-radius:280px; -ms-border-radius:280px; -o-border-radius:280px; -webkit-border-radius:280px; } .other .child .childImg .childImgc { vertical-align:middle; } .other .child .childImg .childImgc { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .other .child .childImg .childImgc:hover { transform:rotate(20deg) scale(1.4); -moz-transform:rotate(20deg) scale(1.4); -ms-transform:rotate(20deg) scale(1.4); -o-transform:rotate(20deg) scale(1.4); -webkit-transform:rotate(20deg) scale(1.4); } .other .child .childTitle { margin-top:46px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; line-height:52px; color:#666; font-size:24px; } .other .child .childInfo { padding-top:26px; line-height:26px; color:#999999; font-size:14px; } .other .child#vedioChild { cursor:pointer; } .other .child#vedioChild .childImg .childImgc:hover { transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; -webkit-transform:none; } .other .child#vedioChild .childImg .childHide { border-raidus:280px; -moz-border-raidus:280px; -ms-border-raidus:280px; -o-border-raidus:280px; -webkit-border-raidus:280px; position:absolute; top:0; left:0; width:280px; height:280px; background:url(../images/pruplebg.png); } .other .child#vedioChild .childImg .childVedio { position:absolute; top:50%; left:50%; width:76px; height:76px; margin:-38px 0 0 -38px; } .solutions{ background-color:#ffffff; border:1px dashed #9C9A9B; margin:0 auto; padding:20px 0; width:1240px; } .work,solutions{ position:relative; outline-style:dashed; outline-color:#9C9A9B; outline-width:1px; margin-left:300px; margin-right:400px; margin-top:40px; } .work .workTitle ,.solutions .soluTitle{ padding:1px 0; } .work .container,.solutions .container{ } .work .container .child , .container .child { float:left; margin-left:32px; } .work .container .child .childImg,.solutions .container .child .childImg { //width: 100%; //height: 100%; width:342px; height:228px; } .work .container .child .childFoot,.solutions .container .child .childFoot { float:left; width:100%; height:228px; margin-top:-280px; } .work .container .child .childRight,.solutions .container .child .childRight { position:absolute; bottom:0px; right:0px; } .work .container .child .childTitle,.solutions .container .child .childTitle{ color:#666; font-size:18px; margin-top:20px; z-index:1; text-align:center; } .work .container .child .childHide,.solutions .container .child .childHide{ display:none; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2; background:url(../images/pruplebg.png); } .work .container .child .childSearchBg,.solutions .container .child .childSearchBg { display:none; position:absolute; top:50%; left:50%; width:66px; height:66px; margin:-33px 0 0 -33px; background:url(../images/seachbg.png); border-radius:66px; -moz-border-radius:66px; -ms-border-radius:66px; -o-border-radius:66px; -webkit-border-radius:66px; z-index:2; } .work { padding-left:20px; padding-right:20px; } .work .container .child .childSearch,.solutions .container .child .childSearch { display:none; position:absolute; top:50%; left:50%; width:30px; height:24px; margin:-12px 0 0 -15px; z-index:3; } /*.work .container .child:hover .childHide,.solutions .container .child:hover .childHide { display:block; } .work .container .child:hover .childSearchBg,.solutions .container .child:hover .childSearchBg { display:block; animation:quan .2s ease-in-out 0s both; -moz-animation:quan .2s ease-in-out 0s both; -webkit-animation:quan .2s ease-in-out 0s both; -o-animation:quan .2s ease-in-out 0s both; } */ @keyframes quan { 0% { transform:scale(0); } 100% { transform:scale(1); } } @-moz-keyframes quan { 0% { -moz-transform:scale(0); } 100% { -moz-transform:scale(1); } } @-webkit-keyframes quan { 0% { -webkit-transform:scale(0); } 100% { -webkit-transform:scale(1); } } @-o-keyframes quan { 0% { -o-transform:scale(0); } 100% { -o-transform:scale(1); } } /*.work .container .child:hover .childSearch,.solutions .container .child:hover .childSearch{ display:block; }*/ .work .container .child#work1, .solutions .container .child#solu1,{ top:0px; left:0px; } .work .container .child#work2,.solutions .container .child#solu2 { top:0px; left:406px; } .work .container .child#work3 ,.solutions .container .child#solu3{ top:0px; left:810px; } .work .container .child#work4,.solutions .container .child#solu4 { top:277px; left:0px; } .work .container .child#work5,.solutions .container .child#solu5 { top:277px; left:406px; } .work .container .child#work6,.solutions .container .child#solu6 { top:277px; left:810px; } @media (max-width: 639px) { .banner { padding-top:50px; } .banner .contents { top:50px; } .banner .content { background-size:auto 160px; background-position:center 0px; background-attachment: inherit; } .banner .contentInfo { top:50%; left:0px; height:200px; width:100%; margin-top:-100px; } .banner .contentInfo .sub { top:47px; left:8px; width:2px; height:120px; } .banner .contentInfo .quan { top:98px; left:0px; width:14px; height:14px; border:2px solid #fff; border-radius:16px; -moz-border-radius:16px; -ms-border-radius:16px; -o-border-radius:16px; -webkit-border-radius:16px; } .banner .contentInfo .title { position:relative; left:32px; top:0px; line-height:30px; font-size:22px; padding-top:40px; } .banner .contentInfo .info { display:none; position:relative; left:32px; top:0px; line-height:32px; padding-top:10px; font-size:20px; } .banner .contentInfo .btn { position:relative; top:0; left:32px; line-height:32px; margin-top:6px; width:110px; height:30px; border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; -webkit-border-radius:30px; } .banner .bannerNav { bottom:10px; } .banner .bannerNav .bannerNavChild { margin:0 10px; width:10px; height:10px; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; } .banner .bannerBg { width:auto; height:160px; } @keyframes sub { 0% { height:0px; } 100% { height:60px; } } @-moz-keyframes sub { 0% { height:0px; } 100% { height:60px; } } @-webkit-keyframes sub { 0% { height:0px; } 100% { height:60px; } } @-o-keyframes sub { 0% { height:0px; } 100% { height:60px; } } .about { padding:17px 0 25px 0; } .about .left { width:100%; height:auto; float:none; } .about .left img { width:100%; height:auto; vertical-align:middle; } .about .right { width:100%; height:auto; float:none; } .about .right .title { font-size:16px; line-height:20px; padding:17px 0 12px 0; } .about .right .info { font-size:12px; line-height:18px; } .about .right .btn { position:relative; margin-top:15px; width:86px; height:23px; border:1px solid #dcdcdc; line-height:23px; font-size:12px; border-radius:23px; -moz-border-radius:23px; -moz-border-radius:23px; -ms-border-radius:23px; -o-border-radius:23px; -webkit-border-radius:23px; } .about .right .btn:hover { border:1px solid #fff; } .news { padding:22px 0; } .news .container { height:250px; margin:25px auto 0 auto; } .news .contents { width:209px; height:250px; margin:0 auto; } .news .child { width:209px; } .news .child .childImg { width:209px; height:125px; } .news .child .childTitle { line-height:20px; padding-top:10px; font-size:14px; } .news .child .childTime { font-size:12px; line-height:18px; padding-bottom:8px; } .news .child .childInfo { font-size:12px; line-height:16px; } .news .navBtn { top:40px; height:35px; } .news .navBtn.leftBtn { left:0px; } .news .navBtn.rightBtn { right:0px; } .other { padding:30px 0 0px 0; } .other .child { width:75%; margin:0 auto; display:block; padding-bottom:30px; } .other .child#vedioChild { margin:0 auto; } .other .child .childImg { width:100%; height:100%; border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; -webkit-border-radius:100%; } .other .child .childImg .childImgc { max-width:100%; max-height:100%; } .other .child .childTitle { margin-top:23px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; line-height:30px; font-size:14px; } .other .child .childInfo { padding-top:20px; line-height:20px; font-size:12px; } .other .child#vedioChild .childImg .childHide { border-raidus:140px; -moz-border-raidus:140px; -ms-border-raidus:140px; -o-border-raidus:140px; -webkit-border-raidus:140px; width:280px; height:280px; } .other .child#vedioChild .childImg .childVedio { width:38px; height:38px; margin:-19px 0 0 -19px; } .work { position:relative; } .work .workTitle { padding:20px 0; } .work .container { margin:20px auto; height:auto; } .work .container .child { position:relative; width:100%; height:auto; margin:0 auto 18px auto; } .work .container .child .childImg { vertical-align:middle; width:100%; height:auto; } .work .container .child .childFoot { height:120px; } .work .container .child .childTitle { font-size:12px; padding-left:5px; line-height:18px; } .work .container .child .childSearchBg { width:33px; height:33px; margin:-16px 0 0 -16px; border-radius:33px; -moz-border-radius:33px; -ms-border-radius:33px; -o-border-radius:33px; -webkit-border-radius:33px; } .work .container .child .childSearch { width:15px; height:12px; margin:-6px 0 0 -8px; } .work .container .child#work1 { top:0px; left:0px; } .work .container .child#work2 { top:0px; left:0px; } .work .container .child#work3 { top:0px; left:0px; } .work .container .child#work4 { top:0px; left:0px; } .work .container .child#work5 { top:0px; left:0px; } .work .container .child#work6 { top:0px; left:0px; } } @media (min-width: 640px) and (max-width:1023px ) { .banner { padding-top:73px; } .banner .content { background-size:auto 320px; background-position:center 0px; background-attachment: inherit; } .banner .contents { top:73px; } .banner .contentInfo { top:50%; left:0px; height:200px; width:100%; margin-top:-100px; } .banner .contentInfo .sub { top:17px; left:8px; width:2px; height:120px; } .banner .contentInfo .quan { top:128px; left:0px; width:14px; height:14px; border:2px solid #fff; border-radius:16px; -moz-border-radius:16px; -ms-border-radius:16px; -o-border-radius:16px; -webkit-border-radius:16px; } .banner .contentInfo .title { position:relative; left:32px; top:0px; line-height:50px; font-size:40px; } .banner .contentInfo .info { position:relative; left:32px; top:0px; line-height:32px; padding-top:10px; font-size:20px; } .banner .contentInfo .btn { position:relative; top:0; left:32px; line-height:32px; margin-top:6px; width:110px; height:30px; border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; -webkit-border-radius:30px; } .banner .bannerNav { bottom:10px; } .banner .bannerNav .bannerNavChild { margin:0 10px; width:10px; height:10px; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; } .banner .bannerBg { width:auto; height:320px; opacity: 0; } .about { padding:34px 0 50px 0; } .about .left { width:100%; height:auto; float:none; } .about .left img { width:100%; height:auto; vertical-align:middle; } .about .right { width:100%; height:auto; float:none; } .about .right .title { font-size:25px; line-height:33px; padding:18px 0 12px 0; } .about .right .info { font-size:16px; line-height:28px; } .about .right .btn { position:relative; margin-top:20px; width:130px; height:32px; border:2px solid #dcdcdc; line-height:30px; font-size:16px; border-radius:46px; -moz-border-radius:46px; -moz-border-radius:46px; -ms-border-radius:46px; -o-border-radius:46px; -webkit-border-radius:46px; } .about .right .btn:hover { border:2px solid #fff; } .news { padding:36px 0; } .news .container { height:411px; margin:50px auto 0 auto; } .news .contents { width:418px; height:500px; margin:0 auto; } .news .child { width:418px; } .news .child .childImg { width:418px; height:250px; } .news .child .childTitle { line-height:28px; padding-top:11px; font-size:18px; } .news .child .childTime { font-size:17px; line-height:26px; padding-bottom:10px; } .news .child .childInfo { font-size:16px; line-height:26px; } .news .navBtn { top:80px; height:70px; } .news .navBtn.leftBtn { left:0px; } .news .navBtn.rightBtn { right:0px; } .other { padding:60px 0 0px 0; } .other .child { width:280px; margin:0 auto; display:block; padding-bottom:60px; } .other .child#vedioChild { margin:0 auto; } .other .child .childImg { width:280px; height:280px; border-radius:280px; -moz-border-radius:280px; -ms-border-radius:280px; -o-border-radius:280px; -webkit-border-radius:280px; } .other .child .childImg .childImgc { vertical-align:middle; } .other .child .childImg .childImgc { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .other .child .childImg .childImgc:hover { transform:rotate(20deg) scale(1.4); -moz-transform:rotate(20deg) scale(1.4); -ms-transform:rotate(20deg) scale(1.4); -o-transform:rotate(20deg) scale(1.4); -webkit-transform:rotate(20deg) scale(1.4); } .other .child .childTitle { margin-top:46px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; line-height:52px; color:#666; font-size:25px; } .other .child .childInfo { padding-top:26px; line-height:26px; color:#999999; font-size:14px; } .other .child#vedioChild { cursor:pointer; } .other .child#vedioChild .childImg .childImgc:hover { transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; -webkit-transform:none; } .other .child#vedioChild .childImg .childHide { border-raidus:280px; -moz-border-raidus:280px; -ms-border-raidus:280px; -o-border-raidus:280px; -webkit-border-raidus:280px; position:absolute; top:0; left:0; width:280px; height:280px; background:url(../images/pruplebg.png); } .other .child#vedioChild .childImg .childVedio { position:absolute; top:50%; left:50%; width:76px; height:76px; margin:-38px 0 0 -38px; } .work { position:relative; } .work .workTitle { padding:40px 0; } .work .container { margin:15px auto; height:auto; } .work .container .child { position:relative; width:385px; height:257px; margin:0 auto 35px auto; } .work .container .child .childFoot { height:240px; } .work .container .child .childTitle { font-size:20px; padding-left:10px; line-height:36px; } .work .container .child .childSearchBg { width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:66px; -moz-border-radius:66px; -ms-border-radius:66px; -o-border-radius:66px; -webkit-border-radius:66px; } .work .container .child .childSearch { width:30px; height:24px; margin:-12px 0 0 -15px; } .work .container .child#work1 { top:0px; left:0px; } .work .container .child#work2 { top:0px; left:0px; } .work .container .child#work3 { top:0px; left:0px; } .work .container .child#work4 { top:0px; left:0px; } .work .container .child#work5 { top:0px; left:0px; } .work .container .child#work6 { top:0px; left:0px; } } @media (min-width: 1024px) and (max-width:1199px ) { .banner { padding-top:80px; } .banner .contents { top:80px; } .banner .content { background-size:auto 500px; background-position:center 0px; background-attachment: inherit; } .banner .contentInfo { margin-top:-100px; } .banner .bannerBg { width:auto; height:500px; } .about { padding:80px 0; } .about .left { width:490px; height:230px; } .about .right { width:450px; height:230px; } .about .right .title { padding-bottom:8px; } .news { padding:40px 0; } .news .container { height:340px; margin:56px auto 0 auto; } .news .contents { width:980px; height:340px; } .news .child { width:280px; } .news .child .childImg { width:280px; height:186px; } .news .child .childTitle { line-height:24px; padding-top:20px; font-size:20px; } .news .child .childTime { font-size:14px; line-height:30px; } .news .child .childInfo { font-size:12px; line-height:20px; } .news .navBtn { top:80px; height:70px; } .news .navBtn.leftBtn { left:0px; } .news .navBtn.rightBtn { right:0px; } .other { padding:60px 0 40px 0; } .other .child { width:280px; margin-right:65px; } .other .child .childImg { width:280px; height:280px; background:#EFEFEF; border-radius:280px; -moz-border-radius:280px; -ms-border-radius:280px; -o-border-radius:280px; -webkit-border-radius:280px; } .other .child .childImg .childImgc { vertical-align:middle; } .other .child .childImg .childImgc { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .other .child .childImg .childImgc:hover { transform:rotate(20deg) scale(1.4); -moz-transform:rotate(20deg) scale(1.4); -ms-transform:rotate(20deg) scale(1.4); -o-transform:rotate(20deg) scale(1.4); -webkit-transform:rotate(20deg) scale(1.4); } .other .child .childTitle { margin-top:46px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; line-height:52px; color:#666; font-size:24px; } .other .child .childInfo { padding-top:26px; line-height:26px; color:#999999; font-size:14px; } .other .child#vedioChild { cursor:pointer; } .other .child#vedioChild .childImg .childImgc:hover { transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; -webkit-transform:none; } .other .child#vedioChild .childImg .childHide { border-raidus:280px; -moz-border-raidus:280px; -ms-border-raidus:280px; -o-border-raidus:280px; -webkit-border-raidus:280px; position:absolute; top:0; left:0; width:280px; height:280px; background:url(../images/pruplebg.png); } .other .child#vedioChild .childImg .childVedio { position:absolute; top:50%; left:50%; width:76px; height:76px; margin:-38px 0 0 -38px; } .work .workTitle { padding:40px 0; } .work .container { width:790px; margin:50px auto; height:814px; } .work .container .child#work1 { top:0px; left:0px; } .work .container .child#work2 { top:0px; left:406px; } .work .container .child#work3 { top:277px; left:0px; } .work .container .child#work4 { top:277px; left:406px; } .work .container .child#work5 { top:555px; left:0px; } .work .container .child#work6 { top:555px; left:406px; } } @media (min-width: 1200px) and (max-width:1439px ) { } @media (min-width: 1440px) and (max-width:1920px ) { } @keyframes scaleOpacityShow { 0% { transform: scale(0) rotate(20deg); opacity:0; } 80% { opacity:0.5; } 100% { transform:scale(1) rotate(0deg); opacity:1; } } @-moz-keyframes scaleOpacityShow { 0% { -moz-transform: scale(0) rotate(20deg); opacity:0; } 80% { opacity:0.5; } 100% { -moz-transform:scale(1) rotate(0deg); opacity:1; } } @-webkit-keyframes scaleOpacityShow { 0% { -webkit-transform: scale(0) rotate(20deg); opacity:0; } 80% { opacity:0.5; } 100% { -webkit-transform:scale(1) rotate(0deg); opacity:1; } } @-o-keyframes scaleOpacityShow { 0% { -o-transform: scale(0) rotate(20deg); opacity:0; } 80% { opacity:0.5; } 100% { -o-transform:scale(1) rotate(0deg); opacity:1; } } /*indexbanner.css*/ .banner .contentInfo .sub { animation:sub .5s ease-in-out 0s both; -moz-animation:sub .5s ease-in-out 0s both; -webkit-animation:sub .5s ease-in-out 0s both; -o-animation:sub .5s ease-in-out 0s both; } @keyframes sub { 0% { height:0px; } 100% { height:120px; } } @-moz-keyframes sub { 0% { height:0px; } 100% { height:120px; } } @-webkit-keyframes sub { 0% { height:0px; } 100% { height:120px; } } @-o-keyframes sub { 0% { height:0px; } 100% { height:120px; } } .banner .contentInfo .quan { animation:quan .2s ease-in-out .5s both; -moz-animation:quan .2s ease-in-out .5s both; -webkit-animation:quan .2s ease-in-out .5s both; -o-animation:quan .2s ease-in-out .5s both; } @keyframes quan { 0% { transform:scale(0); } 100% { transform:scale(1); } } @-moz-keyframes quan { 0% { -moz-transform:scale(0); } 100% { -moz-transform:scale(1); } } @-webkit-keyframes quan { 0% { -webkit-transform:scale(0); } 100% { -webkit-transform:scale(1); } } @-o-keyframes quan { 0% { -o-transform:scale(0); } 100% { -o-transform:scale(1); } } .banner .contentInfo .title { animation:tranx .8s ease-in-out .5s both; -moz-animation:tranx .8s ease-in-out .5s both; -webkit-animation:tranx .8s ease-in-out .5s both; -o-animation:tranx .8s ease-in-out .5s both; } .banner .contentInfo .info { animation:tranx .8s ease-in-out .7s both; -moz-animation:tranx .8s ease-in-out .7s both; -webkit-animation:tranx .8s ease-in-out .7s both; -o-animation:tranx .8s ease-in-out .7s both; } .banner .contentInfo .btn { animation:tranx .8s ease-in-out .9s both; -moz-animation:tranx .8s ease-in-out .9s both; -webkit-animation:tranx .8s ease-in-out .9s both; -o-animation:tranx .8s ease-in-out .9s both; } @keyframes tranx { 0% { transform:translateX(-700px); } 100% { transform:translateX(0); } } @-moz-keyframes tranx { 0% { -moz-transform:translateX(-700px); } 100% { -moz-transform:translateX(0); } } @-webkit-keyframes tranx { 0% { -webkit-transform:translateX(-700px); } 100% { -webkit-transform:translateX(0); } } @-o-keyframes tranx { 0% { -o-transform:translateX(-700px); } 100% { -o-transform:translateX(0); } } @keyframes bannerNavChildOn { 0% { background:#fff; transform:scale(1); } 50% { transform:scale(0); } 100% { background:#000; transform:scale(1); } } @-moz-keyframes bannerNavChildOn { 0% { background:#fff; -moz-transform:scale(1); } 50% { transform:scale(0); } 100% { background:#000; -moz-transform:scale(1); } } @-webkit-keyframes bannerNavChildOn { 0% { background:#fff; -webkit-transform:scale(1); } 50% { transform:scale(0); } 100% { background:#000; -webkit-transform:scale(1); } } @-o-keyframes bannerNavChildOn { 0% { background:#fff; -o-transform:scale(1); } 50% { transform:scale(0); } 100% { background:#000; -o-transform:scale(1); } } /*mobile*/ @media only screen and (max-width: 500px) { html,body{ font-size: 12px; } .main{ width: 100%; } .header .nav{ width: 100%; height: 50px; } .header .nav .child{ height: 50px !important; line-height: 22px !important; } .header .nav .child .childContent{ top: auto !important; left: -30px; width: 100px; } .main .content table{ width: 100% !important; } .main div>span{ width: 100% !important; } .main .foot{ text-align: left; } .main .foot .child{ width: auto; } .main .mainFoot .child{ width: auto !important; } .footer .head{ width: 100% !important; height: 135px; } }