.work_word,.seo_word_content{ width:100%; overflow:hidden;}
.work_word1{ width:1200px; margin:16.5% auto 0 auto; text-align:center;}
.work_word1 h2{ font-size:35px; color:#FFF; letter-spacing:5px;  text-align:center; margin-top:15px;}

.grid {
    position: relative;
    margin: 2% auto 0 auto;

    max-width: 1200px;
    list-style: none;
    text-align: center; overflow:hidden;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}
@media screen and (max-width: 1600px) {
    .grid { margin-top:1%;}
    .work_word1{ margin-top:13%;}
}


.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    
    margin-left:50px; width:333px; height:230px;

    background: #3085a3;
    text-align: center;
    cursor: pointer;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.9;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}



.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid figure h2 {

    font-weight: 300;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid figure h2 span {
    font-weight: 800;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid figure h2,
.grid figure p {
    margin: 0;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
    -webkit-box-sizing: border-box; box-sizing: border-box;
}
@media screen and (max-width: 640px) {
    .blog3{ background:url(../image/bgmo_blog3.jpg) center center no-repeat;}
    .work_word1{ width:97%; margin:25% auto 0 auto;}
    .work_word1 img{ width:90%; height:auto;}
    .work_word1 h2{ font-size:21px;text-align:center; margin-top:15px; letter-spacing:2px;}
    .grid{ max-width:96%; margin-top:-20%;}
    .grid figure{ width:45%; margin:2% auto 0 3%; height:140px;}
    .grid figure.to{ margin:2% auto 0 28%;}
    .grid figure p{ display:none;}

    .grid figure figcaption {
        padding: 1em;

        font-size: 1.25em;
    }
    .grid figure img{ width:100%; height:auto;}
    .grid figure h2{ font-size:14px;}
}





figure.effect-layla {
    background: #692003;border:1px solid #dbdbdb;
}
figure.effect-layla p{ font-size:13px;}

figure.effect-layla img {
    height: 260px;
}
figure.effect-layla figcaption {
    padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
    position: absolute;
    content: '';
    opacity: 0;
}

figure.effect-layla figcaption::before {
    top: 40px;
    right: 20px;
    bottom: 40px;
    left: 20px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
    top: 20px;
    right: 40px;
    bottom: 20px;
    left: 40px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

figure.effect-layla h2 {
    padding-top: 12%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-layla p {
    padding: 0.5em 2em;
    text-transform: none;
    opacity: 0;
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
    opacity: 0.7;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.work_idea_content{ width:100%; overflow:hidden; background:#f2f2f2; padding-bottom:20px;}
.work_idea{ width:1200px; margin:0 auto; overflow:hidden; text-align:center;}
.work_idea_title h3{ font-size:45px; letter-spacing:1px; color:#171717; margin-top:50px;}
.work_idea_title h3 span{ color:#FF3333; font-family:Arial, Helvetica, sans-serif;}
.work_idea_title h4{ font-size:32px; letter-spacing:3px; color:#262626; font-weight:normal;}
.work_idea_word{ width:100%; background:url(../image/work_idea.png) center 10px no-repeat; padding-bottom:260px;}
.work_idea_word h5{ font-size:16px; margin-top:40px; line-height:30px; letter-spacing:2px;}
.work_idea_word p{ line-height:30px; font-size:14px;letter-spacing:1px;}
@media screen and (max-width: 640px) {
    .work_idea{ width:96%;}
    .work_idea_word{ background-size:100%; background-position:bottom; padding-bottom:100px;}
    .work_idea_word h5{ font-size:15px; margin-top:15px; }
    .work_idea_word p{  font-size:13px;}


}


.internet_work{ width:1200px; overflow:hidden; margin:60px auto 0 auto;}
.internet_title{ width:100%; text-align:center;}
.interner_img{ width:100%; margin-top:45px; overflow:hidden;}


.button_content{ width:1200px; margin:0 auto; overflow:hidden; float:left}
.help-tip,.help-tip2{
    float:left;
    position: absolute;

    text-align: center; background:#cc3a01;
    opacity:0.9;

    border-radius: 15px;
    width: 200px;
    height:50px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
    margin:60px 0 0 290px;
    letter-spacing:1px;


}
.help-tip:before{content:'展示型网站';font-weight:bold;color:#fff; line-height:50px; font-size:18px; }
.help-tip:hover p,.help-tip2:hover p{display:block;transform-origin:100% 0%;-webkit-animation:fadeIn 0.8s ease-in-out;animation:fadeIn 0.8s ease-in-out; margin-top:10px;}
.help-tip p,.help-tip2 p{display:none;text-align:left; background:#252525; opacity:0.8;padding:10px;width:300px;position:absolute;border-radius:7px;box-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);right:-50px;color:#FFF;font-size:13px;line-height:2;-webkit-animation:fadeIn 0.3s ease-in-out;animation:fadeIn 0.3s ease-in-out; top:-110px; text-indent:2em; letter-spacing:1px;}

.help-tip p:after,.help-tip2 p:after{width:100%;height:40px;content:'';position:absolute;top:-40px;left:0;}

.help-tip2{
    margin:60px 0 0 680px;


}
.help-tip2:before{content:'营销型网站';font-weight:bold;color:#fff; line-height:50px; font-size:18px; }


.mobil_content{ width:100%; overflow:hidden; margin-top:180px;background: url(../image/mobile_bg.jpg) center center no-repeat fixed; background-size:cover; padding-bottom:60px;}
.mag50{ margin-top:210px; }
.mobile_word{ width:920px; float:left; padding:0; margin:0; background:none;}
.mobile_word ul li{ width:400px; float:left; margin:45px 60px 0 0;}
.mobile_word ul li img{ float:left; width:60px;}
.mobile_li_word{ width:300px; float:left; margin-left:20px;}
.mobile_li_word h3{ font-size:14px; line-height:26px; color:#dddcdc;}
.mobile_li_word p{ color:#c7c6c6; letter-spacing:1px;font-size:12px;}
.mag{ margin-top:20px;}
.mobile_img{ width:206px; float:right; margin:40px 50px 0 0;}
@media screen and (max-width: 640px) {
    .mobil_content{ margin-top:100px;padding-bottom:30px;background: url(../image/mobile_bgmo.jpg) center center no-repeat;}
    .mobile_word{ width:95%; }
    .mobile_word ul li{ width:100%; float:left; margin:20px 0 0 0;}
    .mobile_word ul li img{width:18%;}
    .mobile_li_word{ width:75%; margin-left:20px;}
    .mobile_img{ display:none;}
    .mag{ margin-top:5px;}
}


.shop_content{ width:100%; overflow:hidden;}
.shop_img{ width:1000px; overflow:hidden; margin:60px auto 0 auto; height:650px; background:url(../image/shop.png) no-repeat; position:relative;}
.shop_top,.shop_bottom{ width:100%; overflow:hidden;}
.shop_top_left{ width:280px; float:left; overflow:hidden; position:absolute; left:65px; top:70px;}
.shop_top_right{ width:280px; float:right; position:absolute; top:70px; right:35px;}
.shop_top_left h3,.shop_top_right h3{ color:#c04717; font-size:18px; letter-spacing:1px;}
.shop_top_left p,.shop_top_right p{ margin-top:10px; line-height:20px; letter-spacing:1px; font-size: 12px;}
.shop_top_right h3{ color:#0481b5;}
.left3,.right4{ position:absolute; top:470px;}
.left3 h3{ color:#bd3f48;}
.right4 h3{ color:#8a327e;}
@media screen and (max-width: 640px) {
    .internet_work{ width:95%; margin-top:40px;}
    .internet_title img{ width:100%; height:auto;}
    .interner_img{ margin-top:30px;}
    .interner_img img{width:100%; height:auto;}
    .button_content{ width:100%;}
    .help-tip{ width:30%; margin:5% 0 0 10%; }
    .help-tip2{ width:30%;margin:5% 0 0 55%;}
    .help-tip p{width:200px;right:-60px; top:-135px; }
    .help-tip2 p{width:200px;right:-40px; top:-161px; }

    
    .shop_img{ width:95%; margin-top:30px; height:240px; background:url(../image/shop2.png) no-repeat;background-size:100%;}
    .shop_top,.shop_bottom,.shop_top_left,.shop_top_right{ display:none;}
}

.mainPage {
    background: url(../image/bg_blog3.jpg) center center no-repeat fixed;
    background-size: cover;
    padding-bottom: 70px;
}

.an2{width:100%;height:auto;padding-bottom:10px;padding-top:10px;background:#fff; margin-top:40px;}
.an3{width:100%;height:305px;background:#f6f6f6}
.a2list{width:100%;height:auto}
.a2i{width:20%;width:19.9%\9;height:170px;float:left;overflow:hidden}
.a2ik{width:200%;height:auto;float:left;height:170px;}
.a2ik img{width:50%;height:auto;float:left}
@media screen and (max-width: 640px) {
    .a2i{width:50%;}
}