@import url('import.css');
@font-face {font-family: "iconfonts";
  src: url('../fonts/iconfonts.eot?t=1466477442'); /* IE9*/
  src: url('../fonts/iconfonts.eot?t=1466477442#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/iconfonts.woff?t=1466477442') format('woff'), /* chrome, firefox */
  url('../fonts/iconfonts.ttf?t=1466477442') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../fonts/iconfonts.svg?t=1466477442#iconfonts') format('svg'); /* iOS 4.1- */
}

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot?t=1466415132'); /* IE9*/
  src: url('../fonts/iconfont.eot?t=1466415132#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/iconfont.woff?t=1466415132') format('woff'), /* chrome, firefox */
  url('../fonts/iconfont.ttf?t=1466415132') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../fonts/iconfont.svg?t=1466415132#iconfont') format('svg'); /* iOS 4.1- */
}

.CustomService { position: fixed; right: 0; top: 50%; z-index: 9999;  }
.customtitle { cursor: pointer; border-top-left-radius: 3px; border-bottom-left-radius: 3px; display: flex; justify-content: space-between; padding:12px 15px; width: 200px; color: #fff; background-color: #dc0b1b; position: relative; z-index: 11; }
.customtitle i { font-size: 14px; margin-top: 2px; margin-left: 5px; }
.customtitle:hover { background-color: #6cbb54;}
.customContent { padding: 25px 15px; display: none; background-color: #fff;border-top-left-radius: 3px; border-bottom-left-radius: 3px;  box-shadow: 0 0 1px #ccc; margin-top: -5px; position: relative; z-index: 1; }
.customContent li { position: relative; margin-bottom: 20px; }
.customContent li i { position: absolute; right: 10px; top: 9px; color: #ccc;}
.customContent .inputstyle { width: 188px; padding:10px 5px; border-radius: 3px; border: #eee solid 1px; font-size: 12px;  }
.customContent .customBtn { background-color: #dc0b1b; border: 0; width: 200px; border-radius: 3px; color: #fff; height: 36px;  }
.customContent .customBtn i { font-size: 12px; }
.customContent .customBtn:hover { background-color: #6cbb54; }
.red { color: #dc0b1b; font-size: 12px; }
.green { color: #6cbb54; font-size: 12px; }
.custonTel { font-size: 12px; text-align: center; margin-top: 20px;  }
.custonTel a { font-size: 20px;color: #dc0b1b; }
.classTree { display: flex; justify-content: center; align-content: center; background: url(../images/hr_bg.jpg) repeat-x left bottom; margin-bottom: 20px; padding: 20px 55px; }
.classTree a { display: inline-block; margin: 5px 10px; }
.classTree a.active { color: #db081b; font-weight: bold; }
@media screen and (max-width: 768px) { 
    .customtitle { width: auto;  }
}

.wraper .xce_xcy { text-align: center; background: url(../images/hr_bg.jpg) repeat-x left bottom; margin-top:20px; margin-bottom: 40px; padding-bottom: 40px; }
.wraper .xce_xcy h3 { font-size: 36px; font-weight: 200; position: relative; color: #bcbcbc;  }
.xce_xcy h3 .yh1 { position: absolute; left: 34.7%; top: 6px; }
.xce_xcy h3 .yh2 { position: absolute; right: 35%; bottom:7px; }
.xce_xcy p { font-size: 16px; line-height: 33px; color: #ABACAD;  }

.wraper .xce_footer { text-align: center; background: url(../images/hr_bg.jpg) repeat-x left top; margin-top:10px; margin-bottom: 40px; padding-bottom: 40px; }
.wraper .xce_footer h3 { font-size: 36px; font-weight: bold;   color: #333; padding-top: 35px;  }
.wraper .xce_footer p { font-size: 16px; line-height: 33px; color: #ABACAD;  }

.wraper .service { margin-bottom: 20px; }
.wraper .service li { float: left; display: block; margin:0 30px 15px; padding: 20px; max-width: 200px; background: none; -webkit-transition-property: background;
    -webkit-transition-duration:0.6s;
    -webkit-transition-timing-function: ease; border-radius:3px;  }
.wraper .service li:nth-child(4) {  margin:0 0 15px 30px;  }
.wraper .service li i { font-style: normal; font-size: 72px; color:#c8cacc; display: block; margin-bottom: 15px; }
.wraper .service li:nth-child(2) i { font-size: 66px; margin-bottom: 22px; }
.wraper .service li:nth-child(3) i { font-size: 66px; margin-bottom: 25px; }
.wraper .service li h4 {  font-size: 21px; color:#4f4f4f; margin-bottom:20px; font-weight: 200; }
.wraper .service li p {  font-size:16px; color:#999; line-height: 28px; margin-bottom:10px; }
.wraper .service li:hover { background: #74c656;   }
.wraper .service li:hover i,.wraper .service li:hover h4,.wraper .service li:hover p { color: #fff;   }

#xc_content { padding:5px 0; }
#xc_content dl { display: inline-block; width: 100%; }
#xc_content dl dt { margin:20px 0; height: 60px; background: url(../images/hr_bg.jpg) repeat-x left 50px; text-align: center; }
.mt20 { margin:40px 0 20px; }
#xc_content dl dt span { padding:10px 20px 10px 25px; background: #fff;  margin:0 auto; display: inline-block; text-align: center; }

#xc_content dl dd { text-align: center; display: block; }
#xc_content dl dd form { margin: 40px 0 0; }
#xc_content dl dd form input[type="text"] {font-size: 14px; width: 180px;  border-radius: 2px; border: #ccc solid 1px;  }
#xc_content dl dd form .custom { padding: 12px 10px 12px 32px; background: url(../images/custom1.gif) no-repeat 10px center; }
#xc_content dl dd form .telphone { padding: 12px 10px 12px 38px; background: url(../images/custom2.gif) no-repeat 10px center; }
#xc_content dl dd form button { cursor: pointer; font-size: 14px; background: #74c656; color: #fff; padding: 12px 25px; border-radius: 2px; border:none; -webkit-transition-property: background;
    -webkit-transition-duration:0.6s;
    -webkit-transition-timing-function: ease;  }
#xc_content dl dd form button:hover { background: #3fd265; }

#xc_content .about_info { background: url(../images/home_about.jpg) no-repeat center center; display: flex; align-items: center; justify-content: center; background-size: 100%; padding: 25px 0; }
.about-wraper { margin:0 15%;  min-height: 330px;  }
.about_info  h2 { font-weight: 200; color: #fff; font-size: 36px;  }
.about_info  h2 span { font-size: 18px; }
.about_info  div { font-weight: 300; line-height: 26px; margin-top:30px; color: #fff;  }
.about_info  div p { margin-bottom: 15px; }
.about_info  div a.btn { border:solid 1px #fff; display: inline-block; padding: 5px 35px; margin-top: 10px; color: #fff; border-radius: 2px; }
.about_info div a.btn:hover { border:solid 1px #ff0; color: #ff0; -webkit-transition-property: border,color;
    -webkit-transition-duration:0.6s;
    -webkit-transition-timing-function: ease; }

#xc_content .newslist { margin:0 0 40px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; }
.newslist .list { width: 20%; position: relative; padding: 0; margin: -5px 0 0; overflow: hidden; }
.newslist .list img { max-width: 100%; -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out; }
.newslist .list a { color: #fff;  }
.newslist .list .bg { background-color: rgba(0,0,0,.4); position: absolute; left: 0; top: 0; width: 100%; height: 98.5%; }
.newslist .list .bg h3 {  color: #fff; padding: 20px; text-align: left;  }
.newslist .list .bg p { display: none; padding: 0 20px; text-align: left; font-weight: bold; }
.newslist .list:hover .bg { height: 100%; }
.newslist .list:hover .bg p { font-size: 12px; color: #fff; display: block;  }
.newslist .list:hover img, .newslist .list:focus img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.service7 { margin: 20px auto; position: relative;}
.service7 .s7x { position: absolute; left:235px; top: 35px; display: block; }
.service7 .s7x2 { position: absolute; left:533px; top:95px; display: block; }
.service7 .s7x3 { position: absolute; left:835px; top: 35px; display: block; }
.service7 li { float: left; display: block; margin:15px 30px; padding: 20px; max-width: 200px; background: none; -webkit-transition-property: background;
    -webkit-transition-duration:0.6s;
    -webkit-transition-timing-function: ease; border-radius:3px;  }
.service7 li:nth-child(4) {  margin:15px 0 15px 30px;  }
.service7 li i { font-style: normal; font-size: 72px; color:#c8cacc; display: block; margin-bottom: 15px; -webkit-transition-property: color;
    -webkit-transition-duration:0.6s;
    -webkit-transition-timing-function: ease;  }
.service7 li:nth-child(2) i { font-size: 66px; margin-bottom: 22px; }
.service7 li:nth-child(3) i { font-size: 80px; margin-bottom:7px; }
.service7 li:nth-child(4) i { font-size: 62px; margin-bottom: 25px; }
.service7 li h4 {  font-size: 21px; color:#4f4f4f; margin-bottom:20px; font-weight: 200; -webkit-transition-property: color;
    -webkit-transition-duration:0.6s;
    -webkit-transition-timing-function: ease; }
.service7 li p {  font-size:16px; color:#999; line-height: 28px; margin-bottom:10px; -webkit-transition-property: color;
    -webkit-transition-duration:0.6s;
    -webkit-transition-timing-function: ease;  }
.service7 li:hover i,.service7 li:hover h4,.service7 li:hover p { color: #74c656;  }

/* ----------------------------------------class css -----------------------*/
.xce_class { text-align:left; font-size: 14px; line-height:28px; background: url(../images/hr_bg.jpg) repeat-x left bottom; margin-bottom: 40px; padding: 40px 55px; display: block; position: relative; }
.xce_class .contact_wechat { position: absolute; right: 0; top: 25px; width: 200px; text-align: center; line-height:16px; }
.xce_class h3 { font-size: 21px; font-weight: 400; color: #222; margin-bottom: 10px; }
.xce_class .xc_about { width: 75%; }
.xce_class .xc_about_right { margin-left: 25%; }

.xce_class .tar { text-align: right; }
.xce_class strong { font-weight: bold; color: #40cf68; }
.xce_class .lxtel span {  font-weight: bold; font-size: 24px; }
.xce_class .aboutel { margin-top: 30px; font-size:18px; color: #222; }
.aboutel span:first-child { width:6px;  }
.aboutel span:nth-child(2) { display: inline-block; width:25px;  }

.brandcase { margin-bottom: 25px; display: block; height:20px; }
.brandcase h4 { margin-left: 55px; float: left; font-size: 18px; font-weight: 700; color: #222; }

.brandcase h4 .arrow-right,.xce_class .aboutel .arrow-right{ display: inline-block; margin-left: 5px;  border-width:6px; border-color:transparent transparent transparent black; border-style:dashed dashed dashed solid; border-right:none;}
.brandcase .custom li .arrow-right { display: inline-block; margin-left: 4px;  border-width:5px; border-color:transparent transparent transparent gray; border-style:dashed dashed dashed solid; border-right:none;}

.brandcase .custom { margin-left: 55px; margin-top: 10px; }
.brandcase .custom li { float: left; width: 25%; height: 35px; line-height: 35px; text-align: left; }

.xc_news { margin:0 55px; }
.xc_news ul.newslist li { float: left; margin-bottom: 15px; width: 48%; height: 130px; line-height:23px; text-align: left; background: url(../images/hr_bg.jpg) repeat-x left bottom; }
.xc_news ul.newslist li:nth-child(2n) { margin-left: 4%; }
.xc_news ul.newslist li:last-child { margin-bottom: 80px; }
.xc_news ul.newslist li i { display: block; width: 100%; text-align: right; font-size: 14px; }
.xc_news ul.newslist li a { font-size:16px; margin-bottom: 8px; display: block; font-weight: bold; color:#000; }
.xc_news ul.newslist li a:hover { color:#40B468; }
.xc_news ul.newslist li p { font-size: 14px;  }
.newsinfo p { text-align: left; font-size: 14px; font-weight: 400; margin-bottom: 15px; line-height: 24px; }
.newsinfo a.back { padding:5px 30px; font-size: 14px; display: inline-block; border:#dedede solid 1px; border-radius: 3px; }
.newsinfo a.back:hover { color: #40B468; text-decoration: underline; }


.brandcase .casemenu { float: right; margin-right: 55px; display: block; } 
.brandcase .casemenu li { margin-right: 30px; display: block; float: left; }
.brandcase .casemenu li:last-child { margin-right:0; }
.brandcase .casemenu li a { color: #666; }
.brandcase .casemenu li a:hover,#class-top .menu li a.active { color: #40cf68; }
.casephoto { margin-bottom: 30px; }
.casephoto img { max-width: 1000px; margin-bottom: 20px; }
.case-title { font-size: 22px; margin-bottom: 20px; }
.pageinfo { min-height: 30px; padding:15px 0; margin: 100px 0 0; }
.backcase { cursor: pointer; z-index: 999; position: fixed; right: 0; bottom: 115px; display: block; padding:7px 20px; background:#222; color: #fff; font-size: 14px; }
.backcase span { display: inline-block; margin-right: 10px; border-width:6px; border-color: transparent white transparent  transparent ; border-style:dashed solid dashed dashed ; border-left:none; }

.c_classbg { background: url(../images/class_tbg.jpg) no-repeat center top; }
.c_aboutbg { background: url(../images/about_ctop.jpg) no-repeat center top; }
.c_appbg { background: url(../images/app.jpg) no-repeat center top; }
.c_contactbg { background: url(../images/contact_ctop.jpg) no-repeat center top; }
.c_newsbg { background: url(../images/news_ctop2.jpg) no-repeat center top; }
.c_showcasebg { background: url(../images/pic2.jpg) no-repeat center top; }
.c_websitebg { background: url(../images/website_ctop.jpg) no-repeat center top; }
.c_wechatbg { background: url(../images/wechat_ctop.jpg) no-repeat center top; }
.c_showcase1 { background: url(../cb/case1.jpg) no-repeat center top; }
.c_showcase2 { background: url(../cb/case2.jpg) no-repeat center top; }
.c_showcase3 { background: url(../cb/case3.jpg) no-repeat center top; }
.c_showcase4 { background: url(../cb/case4.jpg) no-repeat center top; }
.c_showcase5 { background: url(../cb/case5.jpg) no-repeat center top; }
.c_showcase6 { background: url(../cb/case6.jpg) no-repeat center top; }
.c_showcase7 { background: url(../cb/case7.jpg) no-repeat center top; }
.c_showcase8 { background: url(../cb/case8.jpg) no-repeat center top; }
.c_showcase9 { background: url(../cb/case9.jpg) no-repeat center top; }

.c_showcase11 { background: url(../cb/case11.jpg) no-repeat center top; }
.c_showcase12 { background: url(../cb/case12.jpg) no-repeat center top; }
.c_showcase13 { background: url(../cb/case13.jpg) no-repeat center top; }
.c_showcase14 { background: url(../cb/case14.jpg) no-repeat center top; }
.c_showcase15 { background: url(../cb/case15.jpg) no-repeat center top; }
.c_showcase16 { background: url(../cb/case16.jpg) no-repeat center top; }
.c_showcase17 { background: url(../cb/case17.jpg) no-repeat center top; }
.c_showcase18 { background: url(../cb/case18.jpg) no-repeat center top; }
.c_showcase19 { background: url(../cb/case19.jpg) no-repeat center top; }
.c_showcase20 { background: url(../cb/case20.jpg) no-repeat center top; }
.c_showcase21 { background: url(../cb/case21.jpg) no-repeat center top; }

/* =================================================== ====== Screenshots ======= =================================================== */
.screenshots ul {
    margin: 0;
    padding: 0;
    width: 100%;
}
.screenshots ul li {
    float: left;
    min-height: 100%;
    width: 20%; overflow: hidden;
    list-style: none; margin-top: -3px;
}
.screenshots figure {
    position: relative;
    overflow: hidden;
}
.screenshots figure img {
    width: 100%;
    height: 100%; margin: 0;
    padding: 0;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figure:hover img, .screenshots figure:focus img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.screenshots figcaption {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    background-color: rgba(63, 97, 132, 0.85);
    text-align: center;
    font-size: 15px;
    opacity: 0;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figcaption a {
    color: #fff
}
.screenshots figcaption a:hover, .screenshots figcaption a:focus {
    color: #73d0da
}
.screenshots figure:hover figcaption, .screenshots figure:focus figcaption {
    opacity: 1
}
.visible {
    opacity: 1
}
.screenshots figure.cs-hover figcaption {
    opacity: 1; overflow: hidden;
}
.screenshots figcaption i {
    font-size: 35px; display: block;
}
.screenshots figcaption p {
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 400;
}
.screenshots figcaption .caption-content {
    position: absolute;
    top: 50%; 
    left: 50%;
    margin-top: -40px;
    margin-left: -100px;
    width: 200px;
    -webkit-transform: translate(0px, 15px);
    -ms-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figure:hover figcaption .caption-content, .screenshots figure:focus figcaption .caption-content {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

@font-face {font-family: 'webfont';
    src: url('../fonts/webfont.eot'); /* IE9*/
    src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */
    url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
.web-font{
    font-family:"webfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {font-family: 'webfonts';
    src: url('../fonts/webfonts.eot'); /* IE9*/
    src: url('../fonts/webfonts.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/webfonts.woff') format('woff'), /* chrome、firefox */
    url('../fonts/webfonts.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/webfonts.svg#webfonts') format('svg'); /* iOS 4.1- */
}
.web-fonts{
    font-family:"webfonts" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}


.iconfonts {
  font-family:"iconfonts" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.a_mtop { margin-top:-110px; }
#class-top .cmenu { position: absolute; right: 15px; top: 13px; font-size: 28px; z-index: 3; color: #fff; display: none; }
/* ---------- class css end   ------------  */

@media screen and (max-width: 768px) { 
      
        .c_classbg { background: url(../images/class_tbg_ip.jpg) no-repeat center top; }
        .c_aboutbg { background: url(../images/about_ctop_ip.jpg) no-repeat center top; }
        .c_appbg { background: url(../images/app_ctop_ip.jpg) no-repeat center top; }
        .c_contactbg { background: url(../images/contact_ctop_ip.jpg) no-repeat center top; }
        .c_newsbg { background: url(../images/news_ctop_ip.jpg) no-repeat center top; }
        .c_showcasebg { background: url(../images/pic2_ip.jpg) no-repeat center top; }
        .c_websitebg { background: url(../images/website_ctop_ip.jpg) no-repeat center top; }
        .c_wechatbg { background: url(../images/wechat_ctop_ip.jpg) no-repeat center top; }
        .c_showcase1 { background: url(../cb/case1m.jpg) no-repeat center top; }
        .c_showcase2 { background: url(../cb/case2m.jpg) no-repeat center top; }
        .c_showcase3 { background: url(../cb/case3m.jpg) no-repeat center top; }
        .c_showcase4 { background: url(../cb/case4m.jpg) no-repeat center top; }
        .c_showcase5 { background: url(../cb/case5m.jpg) no-repeat center top; }
        .c_showcase6 { background: url(../cb/case6m.jpg) no-repeat center top; }
        .c_showcase7 { background: url(../cb/case7m.jpg) no-repeat center top; }
        .c_showcase8 { background: url(../cb/case8m.jpg) no-repeat center top; }
        .c_showcase9 { background: url(../cb/case9m.jpg) no-repeat center top; }
        
        .c_showcase11 { background: url(../cb/case11m.jpg) no-repeat center top; }
        .c_showcase12 { background: url(../cb/case12m.jpg) no-repeat center top; }
        .c_showcase13 { background: url(../cb/case13m.jpg) no-repeat center top; }
        .c_showcase14 { background: url(../cb/case14m.jpg) no-repeat center top; }
        .c_showcase15 { background: url(../cb/case15m.jpg) no-repeat center top; }
        .c_showcase16 { background: url(../cb/case16m.jpg) no-repeat center top; }
        .c_showcase17 { background: url(../cb/case17m.jpg) no-repeat center top; }
        .c_showcase18 { background: url(../cb/case18m.jpg) no-repeat center top; }
        .c_showcase19 { background: url(../cb/case19m.jpg) no-repeat center top; }
        .c_showcase20 { background: url(../cb/case20m.jpg) no-repeat center top; }
        .c_showcase21 { background: url(../cb/case21m.jpg) no-repeat center top; }

        * { font-family: 'webfonts'; }
        #header { max-height: 320px; min-height: 320px; background: url(../images/class_topbg_ip.jpg) no-repeat;}   
        /* ipad */
        #header h1,#class-top h1 { left: 15px; top: 10px; }
        #header h1 img,#class-top h1 img { height: 24px; }
        #header .dmenu {  right: 15px; top: 12px; font-size: 28px; display: block; }
        #header .menu { display: none; }
        #class-top .cmenu { position: absolute; right: 15px; top: 13px; font-size: 28px; z-index: 3; color: #fff; display: block; }
        .wraper { width:100%; }

        #header h2 { font-size: 46px; font-weight: 500;  padding-top: 90px; padding-bottom:20px;  }
        #header ul.xc_count { width: 100%; margin:20px auto 0; }
        #header ul.xc_count li { width: 33%; line-height:25px; height: 60px; padding-top:20px;  }
        #header ul.xc_count li i { font-size: 36px; }
        #header ul.xc_count li span { font-size: 18px; }

        .wraper .xce_xcy { margin-top:10px; margin-bottom: 30px; padding-bottom: 30px; }
        .wraper .xce_xcy h3 { font-size: 28px;  }
        .xce_xcy h3 .yh1,.xce_xcy h3 .yh2  { display: none; }
        .xce_xcy p { font-size: 16px; line-height:25px; color: #ABACAD; margin: 0 20px;  }
        .wraper .service li { margin:0; padding: 10px; height:160px; max-width:172px; }
        .wraper .service li:nth-child(2n) {  margin:0;  }
        .wraper .service li i {  font-size: 48px; margin-bottom: 10px; }
        .wraper .service li:nth-child(2) i { font-size: 42px; margin-bottom:17px; }
        .wraper .service li:nth-child(3) i { font-size: 42px; margin-bottom:21px; }
        .wraper .service li h4 {  font-size:18px; margin-bottom:10px; font-weight: 200; }
        .wraper .service li p {  font-size:14px; line-height: 24px;  }

        #xc_content dl dt {  height: 50px; background: url(../images/hr_bg.jpg) repeat-x left 40px; }
        #xc_content dl dt img { height: 16px; }
        .mt20 { margin:20px 0 10px; }
        #xc_content dl dt span { font-size: 14px; }
        #xc_content dl dd { min-height: 240px; }
        .screenshots ul li { width: 50%; overflow: hidden; }
        .screenshots figcaption { font-size: 12px; }
        .screenshots figcaption i {  font-size: 28px; }
        .screenshots figcaption p { padding: 0 10px; }
 
        .service7 .s7x,.service7 .s7x2,.service7 .s7x3 { display: none; }
        .service7 li { margin:0; padding:10px 5px; height: 170px; max-width:170px; }
        .service7 li:nth-child(2),.service7 li:nth-child(3) { margin-left:6px; }
        .service7 li i { font-size: 48px; margin-bottom: 10px; }
        .service7 li:nth-child(2) i { font-size: 48px; margin-bottom: 9px;  }
        .service7 li:nth-child(3) i { font-size: 50px;   }
        .service7 li:nth-child(4) i { font-size: 36px; margin-top: -9px; margin-bottom: 13px;   }
        .service7 li h4 {  font-size:18px; margin-bottom:15px;   }
        .service7 li p {  font-size:14px; line-height: 24px;  }
        .a_mtop { margin-top:0; }

        #xc_content .about_text { background: url(../images/about768.jpg) no-repeat center top; height: 280px; }
        #xc_content .about_info { background: url(../images/home_mabout.jpg) no-repeat center center; padding:0 0 20px; }
        .about-wraper { margin:0 5%;  min-height: 330px;  }
        .about_info  h2 { font-weight: 200; color: #fff; font-size: 36px;  }
        .about_info  h2 span { font-size: 18px; }
        .about_info  div { font-weight: 300; line-height: 26px; margin-top:30px; color: #fff;  }
        .about_info  div p { margin-bottom: 15px; }
        .about_info  div a.btn { border:solid 1px #fff; display: inline-block; padding: 5px 35px; margin-top: 10px; color: #fff; border-radius: 2px; }
        .about_info div a.btn:hover { border:solid 1px #ff0; color: #ff0; -webkit-transition-property: border,color;
            -webkit-transition-duration:0.6s;
            -webkit-transition-timing-function: ease; }

        #xc_content .newslist { margin:0 4% 40px;}
        .newslist .list { width: 98%;}
        .newslist .list h3 { font-size: 16px;}
        .newslist .list p { font-size: 14px; line-height: 25px;  }

        #footer {  padding:15px 0;  width: 100%; min-height:90px; margin-top: -8px; }
        #footer .copyleft {  float: none; width: 100%; text-align: center;    }
        #footer .copyleft p { line-height: 24px; margin:0 10px;  font-size: 12px; font-weight: 300; }
        #footer .copyleft p:first-child { font-size: 14px; }

        #footer .copyright { width:100%; display: flex; align-items: center; justify-content: center; margin-top: 5px; z-index: 999; }
        #footer .copyright a {  margin:0 5px; font-size: 14px; }
        #footer .copyright #totop { display: none; }

        #class-top { height: 300px; z-index: 1; background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover; }
        #class-top .clssmb { height: 300px;}
        #class-top .menu { display: none; }
        #class-top h2 { z-index: 3; left:15px; bottom:35px;  }
        #class-top h3 { z-index: 3; font-size:36px; width:100%; left:0; margin-left:0; text-align: center; top:35%; }
        #class-top h2 span { font-size: 16px; font-weight: 100; }
        #class-top h2 p { font-size:28px;}

        .xce_class { padding:30px 15px; }
        .xce_class h3 { font-size:18px; }
        .xce_class .contact_wechat { position: inherit; width: 200px; text-align: center; line-height:16px; }

        .xc_news { margin:0 10px; }
        .xc_news ul.newslist li { float: left; margin-bottom: 15px; width: 100%; min-height:160px; line-height:23px;}
        .xc_news ul.newslist li:nth-child(2n) { margin-left:0; }
        .xc_news ul.newslist li:last-child { margin-bottom: 40px; }
        .xc_news ul.newslist li i { display: block; width: 100%; text-align: right; font-size: 12px; }
        .xc_news ul.newslist li a { font-size:14px; margin-bottom: 8px; display: block; font-weight: bold; color:#000; }
        .xc_news ul.newslist li a:hover { color:#40B468; }
        .xc_news ul.newslist li p { font-size: 12px; }
        .newsinfo { padding: 0 10px; text-align: left; }
        .newsinfo > p,
        .newsinfo > div { text-align: left; font-size: 14px; margin-bottom: 15px; line-height: 24px; }
        

        .xce_class .xc_about { width:100%; }
        .xce_class .xc_about_right { margin-left:0; }

        .xce_class .aboutel { font-size:16px; }
        .aboutel span:first-child { width:6px;  }
        .aboutel span:nth-child(2) { display: inline-block; width:25px;  }

        .brandcase { margin-bottom: 25px; display: block; height:20px; }
        .brandcase h4 { margin-left: 15px; float: left; font-size: 16px; font-weight: 700;  }
         
         
        .wraper .xce_footer h3 { font-size:28px; font-weight: 400; }
        .wraper .xce_footer p { font-size: 16px; margin:10px 10px -10px; line-height: 28px; color: #999;  }

        .casephoto img { max-width: 100%; width: 100%; height: 100%; }
         

} /*兼容平板*/
@media screen and (max-width: 640px) {
        
} /*兼容手机*/
@media screen and (max-width: 480px) {
        .c_classbg { background: url(../images/class_tbg_mb.jpg) no-repeat center top; }
        .c_aboutbg { background: url(../images/about_ctop_mb.jpg) no-repeat center top; }
        .c_appbg { background: url(../images/app_ctop_mb.jpg) no-repeat center top; }
        .c_contactbg { background: url(../images/contact_ctop_mb.jpg) no-repeat center top; }
        .c_newsbg { background: url(../images/news_ctop_mb.jpg) no-repeat center top; }
        .c_showcasebg { background: url(../images/pic2_mb.jpg); }
        .c_websitebg { background: url(../images/website_ctop_mb.jpg) no-repeat center top; }
        .c_wechatbg { background: url(../images/wechat_ctop_mb.jpg) no-repeat center top; }
        .c_showcase1 { background: url(../cb/case1m.jpg) no-repeat center top; }
        .c_showcase2 { background: url(../cb/case2m.jpg) no-repeat center top; }
        .c_showcase3 { background: url(../cb/case3m.jpg) no-repeat center top; }
        .c_showcase4 { background: url(../cb/case4m.jpg) no-repeat center top; }
        .c_showcase5 { background: url(../cb/case5m.jpg) no-repeat center top; }
        .c_showcase6 { background: url(../cb/case6m.jpg) no-repeat center top; }
        .c_showcase7 { background: url(../cb/case7m.jpg) no-repeat center top; }
        .c_showcase8 { background: url(../cb/case8m.jpg) no-repeat center top; }
        .c_showcase9 { background: url(../cb/case9m.jpg) no-repeat center top; }
        .c_showcase10 { background: url(../cb/case10m.jpg) no-repeat center top; }
        .c_showcase11 { background: url(../cb/case11m.jpg) no-repeat center top; }
        .c_showcase12 { background: url(../cb/case12m.jpg) no-repeat center top; }
        .c_showcase13 { background: url(../cb/case13m.jpg) no-repeat center top; }
        .c_showcase14 { background: url(../cb/case14m.jpg) no-repeat center top; }
        .c_showcase15 { background: url(../cb/case15m.jpg) no-repeat center top; }
        .c_showcase16 { background: url(../cb/case16m.jpg) no-repeat center top; }
        .c_showcase17 { background: url(../cb/case17m.jpg) no-repeat center top; }
        .c_showcase18 { background: url(../cb/case18m.jpg) no-repeat center top; }
        .c_showcase19 { background: url(../cb/case19m.jpg) no-repeat center top; }
        .c_showcase20 { background: url(../cb/case20m.jpg) no-repeat center top; }
      
        #header { max-height: 250px; min-height: 250px; background: url(../images/mbg.jpg) no-repeat;}
        #header h1 img,#class-top h1 img { height: 21px; }
        #header h2 { font-size: 26px;  padding-top: 90px; padding-bottom:20px;  }
        #header ul.xc_count { width: 100%; margin:10px auto 0; }
        #header ul.xc_count li { width: 33%; line-height:21px; height: 50px; padding-top:10px;  }
        #header ul.xc_count li i { font-size: 24px; }
        #header ul.xc_count li span { font-size: 14px; }
 
        .xce_xcy p { font-size: 14px;  }
        .wraper .service li { margin:0; padding: 10px; height:160px; max-width:185px;}
       
        .mt20 { margin:20px 0 10px; }
        #xc_content dl dt span { font-size: 14px; }
        #xc_content dl dd { min-height: 380px; }
  
        .service7 li { max-width:175px; }
        .service7 li:nth-child(2){ margin-left:25px; }
        .service7 li:nth-child(3){ margin-left:0; }
        .service7 li:nth-child(4) i {  margin-top: -6px; }
        
        #xc_content .about_text { background: url(../images/mabg.jpg) no-repeat center top; height: 365px;   }
        #xc_content dd .aboutbg { display: none; height: 365px; }
        #xc_content dd .about_info { height: 365px; }
        .about_info > h2 {  margin-top:15px; margin-left: 30px; margin-right:30px; font-size: 24px;  }
        .about_info > div {  line-height: 20px;  margin-left: 15px; margin-right: 15px; }
        .about_info > div p {  font-size: 12px; margin-bottom: 4px; line-height: 20px; }

        .about_info > div a.btn {   padding: 3px 25px; font-size: 12px; color: #fff; border-radius: 3px; }
 
 
        .map { background:none; height: 300px; z-index: -1;  }
        .map .mapmb { background: none;  height: 300px; z-index: 2; }
        .map .micon { font-size:21px; color: #666; }
        .map .micon2 { font-size: 16px;  }
        .map ul { padding-top:0; padding-left:3%; }
        .map li { margin-top:0; color: #666; font-size: 13px; text-align: left; line-height: 33px; }
        .map li span { margin-right: 10px;  }
        .map li i {  width:24px; }
        .map .xce_wechat { position: inherit;  width: 120px; font-size: 12px; margin:10px auto;  }
        .map .xce_wechat img { max-width: 120px; }

        #class-top h3 {  font-size:32px; top:35%; }
        #class-top h2 span { font-size: 14px; }
        #class-top h2 p { font-size:24px; }
}
@media screen and (max-width: 375px) {
        #header .menua { display: none; }
        #header .menuspan { display: block; }
        .wraper .service li {  max-width:160px;}
        .service7 li { max-width:160px; }
        .service7 li:nth-child(2){ margin-left:15px; }
        .service7 li:nth-child(3){ margin-left:0; }
        .service7 li:nth-child(4){ margin-left:15px; }
        .service7 li:nth-child(4) i {  margin-top: -6px; }
        #xc_content .mnewsletter { display: none; }
        .map li { margin-top:0; color: #666; font-size: 13px; text-align: left; line-height: 33px; }
}
 
@media screen and (max-width: 320px) {
        .wraper .service li {  max-width:140px;}
        .service7 li { max-width:140px; }
        .service7 li:nth-child(2){ margin-left:10px; }
        .service7 li:nth-child(3){ margin-left:0; }
        .service7 li:nth-child(4){ margin-left:10px; }
        .service7 li:nth-child(4) i {  margin-top: -6px; }
        .service7 li h3 { font-size: 16px; }
        .service7 li p { font-size: 12px; }
        #xc_content .mnewsletter { display: none; }
        .map li { font-size: 12px; line-height: 28px; }
         
}

.icon-qq:before { content: "\e643"; }
.icon-qq1:before { content: "\e644"; }
.icon-3:before { content: "\e645"; }
.icon-tel:before { content: "\e646"; }
.icon-tel1:before { content: "\e647"; }
.icon-tel2:before { content: "\e648"; }
.icon-tel3:before { content: "\e649"; }
.icon-tel4:before { content: "\e64a"; }
.icon-tel5:before { content: "\e64c"; }
.icon-tubiaoku03:before { content: "\e64b"; }
.icon-search:before { content: "\e63c"; }
.icon-search1:before { content: "\e63d"; }
.icon-search2:before { content: "\e63e"; }
.icon-search3:before { content: "\e63f"; }
.icon-search4:before { content: "\e640"; }
.icon-qiangtuizhuanhuan:before { content: "\e600"; }
.icon-iphone:before { content: "\e601"; }
.icon-weizhi:before { content: "\e602"; }
.icon-weizhi1:before { content: "\e603"; }
.icon-user:before { content: "\e604"; }
.icon-user1:before { content: "\e605"; }
.icon-shouji:before { content: "\e606"; }
.icon-dianzan:before { content: "\e607"; }
.icon-wechat:before { content: "\e608"; }
.icon-weizhi2:before { content: "\e609"; }
.icon-wechat1:before { content: "\e60a"; }
.icon-shangchuanyunduan:before { content: "\e60b"; }
.icon-weizhi3:before { content: "\e60c"; }
.icon-tubiao2shangchuanyunduan:before { content: "\e60d"; }
.icon-shangchuanyunduan1:before { content: "\e60e"; }
.icon-cuban2shangchuanyunduan:before { content: "\e60f"; }
.icon-menu:before { content: "\e610"; }
.icon-wechat2:before { content: "\e611"; }
.icon-zhinengerji:before { content: "\e612"; }
.icon-pcduandaosvg24:before { content: "\e613"; }
.icon-menu1:before { content: "\e614"; }
.icon-menu2:before { content: "\e615"; }
.icon-diannao00:before { content: "\e616"; }
.icon-iphone1:before { content: "\e617"; }
.icon-tongxun:before { content: "\e618"; }
.icon-iphone2:before { content: "\e619"; }
.icon-erji:before { content: "\e61a"; }
.icon-33:before { content: "\e61b"; }
.icon-weizhi4:before { content: "\e61c"; }
.icon-iphone3:before { content: "\e61d"; }
.icon-iphone4:before { content: "\e61e"; }
.icon-iconverificationcode:before { content: "\e61f"; }
.icon-wechat3:before { content: "\e620"; }
.icon-hehuoxieyi:before { content: "\e621"; }
.icon-xianshiqidiannao:before { content: "\e622"; }
.icon-icon31ermai:before { content: "\e623"; }
.icon-weizhi5:before { content: "\e624"; }
.icon-diannao:before { content: "\e625"; }
.icon-diannao1:before { content: "\e626"; }
.icon-diannaoshouji:before { content: "\e627"; }
.icon-menu3:before { content: "\e628"; }
.icon-menu4:before { content: "\e629"; }
.icon-dianzan1:before { content: "\e62a"; }
.icon-tongguo:before { content: "\e62b"; }
.icon-shouyeicon02:before { content: "\e62c"; }
.icon-wechat4:before { content: "\e62d"; }
.icon-dianzan-copy:before { content: "\e62e"; }
.icon-menu5:before { content: "\e62f"; }
.icon-iphone5:before { content: "\e630"; }
.icon-diannaodenglu:before { content: "\e631"; }
.icon-protocol:before { content: "\e632"; }
.icon-iphone6:before { content: "\e633"; }
.icon-shebeidiannaoshouji:before { content: "\e634"; }
.icon-menu6:before { content: "\e635"; }
.icon-diannaoshouji01:before { content: "\e636"; }
.icon-erji201:before { content: "\e637"; }
.icon-diannao2:before { content: "\e638"; }
.icon-computer5diannao:before { content: "\e639"; }
.icon-goutongxinxi:before { content: "\e63a"; }
.icon-wechat5:before { content: "\e63b"; }