section h2 { animation: gdownIn 1s 0.7s both; text-align: center; color: rgb(51, 51, 51); padding: 15px 0; font-size: 24px; -webkit-animation: gdownIn 1s 0.7s both; -moz-animation: gdownIn 1s 0.7s both; font-family: "Microsoft YaHei"; font-weight: bold; }
section aside { animation: gdownIn 1s 0.9s both; text-align: center; color: rgb(187, 187, 187); font-size: 16px; margin-bottom: 25px; -webkit-animation: gdownIn 1s 0.9s both; -moz-animation: gdownIn 1s 0.9s both; }
#banner { animation: gfadeIn 1s 0.4s both; overflow: hidden; padding-top: 32.9%; position: relative; -webkit-animation: gfadeIn 1s 0.4s both; -moz-animation: gfadeIn 1s 0.4s both; }
#progress { background: rgba(0, 0, 0, 0.05); left: 0px; width: 0px; height: 2px; bottom: 0px; position: absolute; }
#banner .pic { width: 100%; vertical-align: top; pointer-events: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
#focus_main { left: 0px; top: 0px; width: 100%; overflow: hidden; position: absolute; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0, 0, 0); }
    #focus_main li { width: 100%; float: left; }
        #focus_main li a { height: 100%; display: block; }
    #focus_main img { transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0, 0, 0); }
#focus_info { left: 50%; width: 1200px; height: 6.2rem; bottom: 50px; margin-left: -600px; position: absolute; }
    #focus_info article { background: rgba(255, 255, 255, 0.8); padding: 10px 0px; perspective-origin: 50% 50%; left: 0px; top: 0px; width: 100%; height: 88%; display: none; position: absolute; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; }
    #focus_info p { background: url("../images/quote.png") no-repeat 30px 25px; padding: 20px 0px 0px 85px; width: 620px; font-size: 0.7rem; float: left; min-height: 60px; }
    #focus_info .client_logo { width: 229px; height: 100%; text-align: center; overflow: hidden; border-left-color: rgb(209, 209, 209); border-left-width: 1px; border-left-style: dotted; float: right; }
        #focus_info .client_logo span { width: 0px; height: 100%; vertical-align: middle; display: inline-block; }
        #focus_info .client_logo img { vertical-align: middle; display: inline-block; max-width: 100%; }
#focus_dot { padding: 20px 45px; animation: grightIn 1s 0.5s both; top: 50%; width: 14px; right: 0px; overflow: hidden; position: absolute; transform: translateY(-50%); -webkit-animation: grightIn 1s 0.5s both; -moz-animation: grightIn 1s 0.5s both; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); }
    #focus_dot li { margin: 4px 0px; border-radius: 50%; border: 2px solid transparent; transition: 0.3s; border-image: none; width: 10px; height: 10px; overflow: hidden; float: left; cursor: pointer; -webkit-transition: 0.3s; -moz-transition: 0.3s; }
        #focus_dot li b { background: rgb(255, 255, 255); border-radius: 50%; transition: 0.3s; width: 100%; height: 100%; -webkit-transition: 0.3s; -moz-transition: 0.3s; }
        #focus_dot li.cur { border-color: rgb(255, 255, 255); }
        #focus_dot li:hover { border-color: rgb(255, 255, 255); }
        #focus_dot li.cur b { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); }
        #focus_dot li:hover b { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); }
.flip_front { animation: flipOutX 0.4s linear both; -webkit-animation: flipOutX 0.4s linear both; -moz-animation: flipOutX 0.4s linear both; }
.flip_back { animation: flipInX 0.8s both; -webkit-animation: flipInX 0.8s ease both; -moz-animation: flipInX 0.8s ease both; }


.ggao { margin: 0 auto; background: #eee; padding: 30px; width: 1140px; height: 40px; }
.ggaotit { color: #333; font: bold 20px/40px "Microsoft YaHei"; }
    .ggaotit img { margin-right: 10px; vertical-align: middle; }
.ggaotext { width: 900px; height: 40px; color: #666; font: 16px/40px "Microsoft YaHei"; margin-left: 50px; }
.ggaomore { width: 40px; height: 40px; }

.works_link { margin: auto; animation: gdownIn 1s 1.2s both; width: 1200px; height: 72px; text-align: center; line-height: 72px; font-size: 16px; border-top-color: rgb(209, 209, 209); border-top-width: 1px; border-top-style: dotted; -webkit-animation: gdownIn 1s 1.2s both; -moz-animation: gdownIn 1s 1.2s both; }
    .works_link span { margin: 0px 23px;font-weight:bold; }
    .works_link a { margin: 0px 23px; transition: 0.3s; color: rgb(102, 102, 102); -webkit-transition: 0.3s; -moz-transition: 0.3s; }
        .works_link a:hover { color: rgb(51, 51, 51); }
.works_wrap { animation: gfadeIn 1s 1.5s both; width: 1200px; overflow: hidden; padding-top: 534px; position: relative; -webkit-animation: gfadeIn 1s 1.5s both; -moz-animation: gfadeIn 1s 1.5s both; margin: 0 auto; }
#works { left: 0px; top: 0px; width: 100%; overflow: hidden; position: absolute; }
    #works ul { width: 100%; overflow: hidden; float: left; }
        #works ul li { width: 24%; text-align: center; float: left; margin:0.5%;}
            #works ul li a { background: rgb(255, 255, 255); transition: 0.3s; display: block; -webkit-transition: 0.3s; -moz-transition: 0.3s;border: #f1f1f1 solid 2px;
    border-top: none;
    transition: all ease-in-out .3s; }
            #works ul li article { width: 100%; height: 0px; overflow: hidden; padding-top: 62.4%; position: relative;padding-bottom:50px; }
                #works ul li article img { transition: 0.3s; left: 0px; top: 0px; width: 100.5%; height: auto; position: absolute; transform: translate3d(0px, 0px, 0px); -webkit-transition: 0.3s; -moz-transition: 0.3s; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); }
                #works ul li article summary { background: rgba(0, 0, 0, 0.7); transition: 0.3s; left: 0px; width: 100%; height: 50px; text-align: left; bottom: -50px; color: rgb(200, 200, 200); line-height: 50px; text-indent: 20px; position: absolute; z-index: 3; -webkit-transition: 0.3s; -moz-transition: 0.3s; }
            #works ul li h5 { transition: 0.3s; color: rgb(51, 51, 51); line-height: 24px; padding-top: 16px; font-size: 18px; -webkit-transition: 0.3s; -moz-transition: 0.3s; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
            #works ul li span { transition: 0.3s; color: rgb(153, 153, 153); line-height: 22px; padding-bottom: 18px; font-size: 14px; display: block; -webkit-transition: 0.3s; -moz-transition: 0.3s; }
            #works ul li a:hover { background-color: transparent; }
                #works ul li a:hover h5 { color: rgb(255, 255, 255); }
                #works ul li a:hover span { color: rgb(255, 255, 255); }
                #works ul li a:hover article summary { bottom: 0px; }
                #works ul li a:hover article img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); }
                #works ul li a:hover article::before { -ms-zoom: 1; opacity: 1; }
                #works ul li a:hover article::after { -ms-zoom: 1; opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); }
#works_ctrl { background: rgb(241, 241, 241); width: 100%; height: 85px; text-align: center; box-shadow: inset 0px 2px 20px #edecec; }
    #works_ctrl button { margin: 17px 5px; border: currentColor; transition: 0.3s; border-image: none; width: 52px; height: 50px; display: inline-block; -webkit-transition: 0.3s; -moz-transition: 0.3s; }
    #works_ctrl #works_prev { background: url("../images/works_arr.png") no-repeat 0px 0px rgb(255, 255, 255); }
        #works_ctrl #works_prev:hover { background: url("../images/works_arr.png") no-repeat -52px 0px rgb(51, 51, 51); }
    #works_ctrl #works_next { background: url("../images/works_arr.png") no-repeat -52px -50px rgb(255, 255, 255); }
        #works_ctrl #works_next:hover { background: url("../images/works_arr.png") no-repeat 0px -50px rgb(51, 51, 51); }
#works_prev { border-radius: 2px; vertical-align: middle; }
#works_next { border-radius: 2px; vertical-align: middle; }
#works_more { border-radius: 2px; vertical-align: middle; }
#works_more { background: url("../images/works_more.png") no-repeat center -50px rgb(255, 255, 255); transition: 0.3s; width: 92px; height: 50px; vertical-align: middle; display: inline-block; -webkit-transition: 0.3s; -moz-transition: 0.3s; }
    #works_more:hover { background: url("../images/works_more.png") no-repeat center 0px rgb(51, 51, 51); }



.bd_top { margin: 54px auto; border-top-color: rgb(200, 200, 200); border-top-width: 1px; border-top-style: dotted; position: relative; }
.client { background: rgb(255, 255, 255); left: 50%; top: -56px; width: 320px; height: 100px; text-align: center; margin-left: -160px; position: absolute; }
    .client h2 { margin: 0px; padding: 0px; }
    .client aside { margin: 0px; padding: 0px; }
    .client h2 { color: rgb(124, 124, 124); line-height: 36px; font-size: 36px; margin-bottom: 6px; }
    .client aside { color: rgb(82, 82, 82); font-size: 16px; }
    .client span { color: rgb(187, 187, 187); margin-top: 20px; display: block; }
.profession { background: rgb(255, 255, 255); left: 50%; top: -20px; width: 460px; height: 60px; text-align: center; margin-left: -230px; position: absolute; }
    .profession h2 { margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-size: 24px; }
        .profession h2 em { color: rgb(187, 187, 187); }
    .profession span { color: rgb(187, 187, 187); font-size: 16px; display: block; }
    .profession a { transition: 0.3s; color: rgb(82, 82, 82); -webkit-transition: 0.3s; -moz-transition: 0.3s; }
        .profession a:hover { color: rgb(0, 0, 0); }
.profession-nr { text-align: center; color: rgb(153, 153, 153); font-size: 12px; margin-top: 80px; }
    .profession-nr p { margin-top: 16px; }
    .profession-nr a { transition: 0.3s; color: rgb(82, 82, 82); -webkit-transition: 0.3s; -moz-transition: 0.3s; }
        .profession-nr a:hover { color: rgb(0, 0, 0); }
.profession_list { margin: 70px auto 0px; width: 1200px; overflow: hidden; }
    .profession_list dl { width: 300px; padding-top: 88px; float: left; }    
    .profession_list a.profession_a{  width: 300px; height:88px;position:absolute;top:0px;text-indent:-999999px;}
    .profession_list dt { color: rgb(51, 51, 51); font-size: 18px; font-weight: bold; margin-bottom: 30px; text-align: center; }
    .profession_list dd { color: rgb(153, 153, 153); line-height: 25px; font-size: 14px; }
    .profession_list .app dd {width:150px;float:left;}
dl.web { background: url("../images/profession_01.png") no-repeat center 4px; }
dl.app { background: url("../images/profession_02.png") no-repeat center 0px; }
dl.seo { background: url("../images/profession_03.png") no-repeat center 0px; }
dl.vi { background: url("../images/profession_04.png") no-repeat center 0px; }