/*  header_web  */
a, a:hover { text-decoration: none; }
#header_web { height: 473px; }
#header_web .headerimg { background-position: center top; background-repeat: no-repeat; width: 100%; height: 473px; position: absolute; }
#headertxt { display: none; width: 978px; margin: 0 auto; clear: both; position: relative; top: 74px; }
#firstline { display: none; color: #333; font-size: 40px; padding: 4px 13px 7px; float: left; }
#secondline { display: none; color: #CD2B3A; text-decoration: none; font-size: 60px; padding: 0 13px 10px; float: left; clear: both; }
#secondline:hover { text-decoration: underline; color: #7F000C; }
.pictured { display: none; background-color: #CC3333; color: #FFF; font-size: 12px; padding: 9px 16px; text-transform: uppercase; float: left; clear: both; margin-top: 10px; }
.pictured a { font-size: 16px; font-style: italic; letter-spacing: 0; text-transform: none; color: #FFF; text-decoration: none; }
.pictured a:hover { text-decoration: underline; }
#headernav-outer { position: relative; top: 430px; margin: 0 auto; width: 978px; }
#headernav { display: none; padding-left: 864px; }
#headernav .btn { height: 32px; width: 32px; float: left; cursor: pointer; }
#headernav #back { background-image: url("../images/btn_back.png") }
#headernav #next { background-image: url("../images/btn_next.png") }
#headernav #control { background-image: url("../images/btn_pause.png") }
/*  Projects  */
#bodyHome #projects { background: #f7f7f7; }
#bodyHome22 #projects .screen .csc-header { width: 978px; }
#bodyHome #projects .screen h1 { margin: 20px 0; padding: 0 0 0 205px; width: auto; height: 50px; line-height: 46px; text-indent: 0; font-size: 18px; font-family: "微软雅黑"; font-weight: normal; color: #474747; background: url("../images/btn.png") no-repeat 2px -28px; }
#bodyHome #projects .screen h1 .fr { font-size: 12px; }
#bodyApp #projects { background: url("../images/appbg.gif") repeat-x 0 -730px; }
#bodyApp #projects .screen h1 { width: 900px; height: 22px; line-height: 22px; background: url("../images/Works.png") no-repeat center -104px; }
#bodyApp #project-container { top: 469px; }
.Case_txt { height: 74px; line-height: 20px; text-align: center; font-family: 'FZLTXHKM'; font-size: 16px; color: #383838; }
.sprite { position: absolute; width: 100%; height: 1000px; z-index: 200; top: 0; padding: 0; }
.screen { position: absolute; width: 100%; height: 1000px; z-index: 201; top: 0; padding: 0; }
.screen .content { width: 280px; margin-left: 20%; margin-top: 10%; }
.screen .content h1 { background: url("../images/bg_content_border.png") no-repeat 0 0; }
#projects { position: relative; height: 214px; margin: 0 auto; padding: 0; overflow: hidden; background: #dbdfde; color: #666; }
#projects .screen .content { width: 100%; height: 2000px; margin-left: 0; margin-top: 0; padding-top: 0; background: none; }
#projects .screen #project-content { background: url("../images/ajax-loader.gif") no-repeat 42% 50%; }
#projects .screen .csc-header { margin: auto; width: 900px; }
#projects .screen h1 { padding: 30px 0 10px; width: 275px; height: 50px; line-height: 50px; text-indent: -9999px; background: url("../images/projects.png") no-repeat; }
/* -- Project Thumbs ----------------------------- */
#projects .screen { position: relative; }
#projects .content { position: absolute; top: 15px; }
#project-container { position: absolute; top: 250px; z-index: 100; width: 100%; height: 467px; }
/* -- #thumbscreen */
.thumbscreen-slides { width: 980px; margin: auto; }
#thumbscreen .pagination { display: none; /*position: fixed; top: 0; left: 0; z-index: 1000;*/ }
#thumbscreen .prev { position: absolute; top: 305px; left: 0px; z-index: 250; width: 0px; height: 0px; display: block; text-indent: -999em; background: url("../images/bg_project-slider_navs.png") no-repeat 0 0; }
#thumbscreen .next { position: absolute; top: 305px; right: 0px; z-index: 250; width: 0px; height: 0px; display: block; text-indent: -999em; background: url("../images/bg_project-slider_navs.png") no-repeat 0 -180px; }
#thumbscreen .prev:hover { background-position: 0 -60px; }
#thumbscreen .prev:active { background-position: 0 -120px; }
#thumbscreen .next:hover { background-position: 0 -240px; }
#thumbscreen .next:active { background-position: 0 -300px; }
/* -- .project-thumbnails */
.project-thumbnails-wrap { width: 980px; height: 1100px; margin: auto; }
.project-thumbnails { width: 980px; margin: auto; }
.project-div { clear: both; height: 300px; display: none; }
.project-thumbnails li { width: 195px; height: 166px; margin: 0 1px 1px 0; float: left; }
.project-thumbnails li a { width: 195px; height: 166px; display: block; position: relative; color: #fff; text-decoration: none; cursor: pointer; }
.project-thumb-client { width: 195px; height: 83px; display: none; position: absolute; top: 40px; left: 0; font-size: 22px; font-family: "微软雅黑", Arial, Helvetica, sans-serif; font-weight: bold; text-align: center; z-index: 100; }
.project-thumb-task { width: 175px; display: none; position: absolute; top: 74px; left: 0; font-size: 14px; font-weight: normal; text-align: left; z-index: 100; padding: 0 10px; line-height: 24px; }
.project-thumbnails a:hover { background: url(../images/liBg.png); }
.project-thumbnails a:hover img { display: none; }
/*.project-thumbnails a:link #img_hovers,.project-thumbnails a:visited #img_hovers{
    background:#000;
    display:none;
    width:195px;
    height:166px;
    filter:alpha(opacity=70);
    opacity: 0.7;
    position:absolute;
    top:0px;
    left:0px;
    z-index:20;
}
.project-thumbnails a:hover #img_hovers,.project-thumbnails a:active #img_hovers{
    display:block;
}*/
.project-thumbnails a:hover .project-thumb-client,
.project-thumbnails a:hover .project-thumb-task { display: block; }
/* -- Project Thumbs [END] ----------------------------- */
/* -- Project Detail ----------------------------- */
#content { height: 467px; }
#project-wrap { width: 100%; height: 467px; background: url("../images/bg_project_wrap.gif") repeat-x 0 0; }
#project-content { position: relative; width: 899px; height: 467px; margin: 0 auto; }
#project-slider { width: 899px; height: 467px; overflow: hidden; }
.project-slide { width: 897px; height: 392px; padding: 25px 0 0 2px; }
#project-content a.project-slider-close { position: absolute; top: 8px; right: 6px; color: #9e9c9c; font-size: 14px; font-family: Times, serif; font-weight: normal; font-style: italic; background: url("../images/bg_project-slider_close.png") no-repeat 100% 2px; padding-right: 15px; height: 14px; width: 60px; text-align: right; }
.project-slider-prev { position: absolute; top: 192px; left: -140px; width: 110px; height: 60px; display: block; text-indent: -999em; background: url("../images/bg_project-slider_nav_text.png") no-repeat 0 0; }
.project-slider-next { position: absolute; top: 192px; right: -140px; width: 110px; height: 60px; display: block; text-indent: -999em; background: url("../images/bg_project-slider_nav_text.png") no-repeat 0 -180px; }
.project-slider-prev:hover { background-position: 0 -60px; }
.project-slider-prev:active { background-position: 0 -120px; }
.project-slider-next:hover { background-position: 0 -240px; }
.project-slider-next:active { background-position: 0 -300px; }
.project-cycle { width: 701px; height: 417px; overflow: hidden; float: left; }
.project-cycle li { width: 701px; height: 417px; }
.bx-wrapper { box-shadow: 2px 2px 5px 0px #000000; -moz-box-shadow: 2px 2px 5px 0px #000000; -webkit-box-shadow: 2px 2px 5px #000000; }
.bx-pager { position: absolute; top: -16px; right: 0; width: 40px; z-index: 2000; text-align: right; color: #7f7f7f; font-family: Arial,sans-serif; font-size: 11px; }
.bx-pager .bx-pager-current { color: #fff; }
.bx-prev { position: absolute; left: -2px; top: 0px; display: block; width: 100px; height: 417px; background: url("../images/bg_project-cycle_nav.gif") no-repeat 0 182px; z-index: 2000; text-indent: -999em; }
.bx-next { position: absolute; right: -2px; top: 0px; display: block; width: 100px; height: 417px; background: url("../images/bg_project-cycle_nav.gif") no-repeat -100px 182px; z-index: 2000; text-indent: -999em; }
.bx-prev:hover { background-position: 0 -238px; }
.bx-next:hover { background-position: -100px -238px; }
.project-info { float: right; width: 178px; height: 417px; }
.project-info-text { padding-right: 10px; height: 260px; line-height: 20px; overflow-x: hidden; overflow-y: auto; color: #9e9c9c; }
.project-info h2 { height: 50px; padding: 30px 0 15px 0; color: #fff; font-size: 18px; font-family: "微软雅黑", Arial, Helvetica, sans-serif; font-weight: normal; line-height: 22px; }
.project-info h3 { height: 30px; margin-bottom: 16px; background: url("../images/bg_project-info_border.gif") no-repeat 0 100%; color: #fff; font-size: 14px; font-weight: normal; font-style: italic; }
.project-info-text p { }
#projects .project-info p { }
#projects .project-info .manufactured p { color: #9e9c9c; font-size: 14px; padding: 0; font-family: Times, serif; font-weight: normal; font-style: italic; }
.manufactured p a:link, .manufactured p a:visited { color: #646567; font-size: 14px; }
.manufactured p a:hover, .manufactured p a:active { color: #ab072a; text-decoration: underline; }
.project-info .manufactured ul { margin-top: 3px; }
.project-info .manufactured ul li { float: left; width: 15px; height: 15px; margin-right: 5px; text-indent: -999em; position: relative; }
.ok-d-active { background: url("../images/bg_manufactured.png") no-repeat 0 0; }
.ok-t-active { background: url("../images/bg_manufactured.png") no-repeat -20px 0; }
.ok-l-active { background: url("../images/bg_manufactured.png") no-repeat -40px 0; }
.ok-d-inactive { background: url("../images/bg_manufactured.png") no-repeat -60px 0; }
.ok-t-inactive { background: url("../images/bg_manufactured.png") no-repeat -60px 0; }
.ok-l-inactive { background: url("../images/bg_manufactured.png") no-repeat -60px 0; }
#tooltip { position: absolute; z-index: 1000; top: -34px; left: -3px; text-indent: 0; display: block; height: 26px; width: 59px; padding: 4px 8px; background: url("../images/bg_tooltip.png") no-repeat 0px 100%; color: #000; white-space: nowrap; text-align: center; }
/* -- Project Detail [END] ----------------------------- */
/*  app  */
.header-content { z-index: 1; position: relative; max-width: 1600px; margin: 0 auto; }
.header-content .shadow-top { position: absolute; top: 0px; left: 0px; width: 100%; height: 3px; z-index: 3; background: transparent url("../images/shadow-top.png") left top repeat-x; }
.header-content .shadow-bottom { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 3px; z-index: 3; background: transparent url("../images/shadow-bottom.png") left bottom repeat-x; }
.animation-container { position: relative; width: 100%; height: 473px; zoom: 1; z-index: 2; overflow: hidden; font-family: "微软雅黑" }
.animation-container .animation-page { position: absolute; top: -10px; left: 0px; width: 100%; height: 540px; overflow: visible; z-index: 1; -webkit-transform-style: preserve-3d; }
.animation-container .animation-page .catch-wrapper { position: relative; width: 1000px; height: 100%; margin: 0 auto; }
.catch { z-index: 3; position: absolute; top: 50%; left: 40px; margin-top: -55px; -webkit-transform-style: preserve-3d; }
.dkirBox { display: block; position: relative; z-index: 3; zoom: 1; overflow: hidden; zoom: 1; }
.dkir { display: block; text-decoration: none; width: 100%; height: 100%; overflow: hidden; zoom: 1; }
.dkir span { position: relative; z-index: -1; }
.catch .title { width: 500px; height: 90px; line-height: 90px; font-size: 44px; color: #ff9914; font-weight: bold; text-transform: uppercase; }
.catch .title a { display: block; height: 90px; text-indent: -9999px; background: url("../images/btn.png") no-repeat 0 -146px; }
.catch .title a:hover { text-decoration: none; }
.catch .intro { width: 470px; height: 120px; line-height: 24px; color: #151515; }
.iphone .catch .title a { background-position: 0 -231px; }
.pc .catch .title a { background-position: 0 -316px; }
.animation-container .animation-page .hand { position: absolute; right: 0px; bottom: 0px; -webkit-transform-style: preserve-3d; }
.animation-container .animation-page.pc { background: transparent url("../images/pc.jpg") center center no-repeat }
.animation-container .animation-page.ipad { background: transparent url("../images/ipad-bg.jpg") center center no-repeat }
.animation-container .animation-page.iphone { background: transparent url("../images/iphone-bg.jpg") center center no-repeat }
.animation-container .animation-page.ipad .hand { right: 15% }
.animation-container .animation-page.iphone .hand { right: 20% }
.ie6 .animation-container .animation-page.ipad { background: transparent url("../images/ipad-static-full.jpg") center center no-repeat }
.ie6 .animation-container .animation-page.iphone { background: transparent url("../images/iphone-static-full.jpg") center center no-repeat }
.ie6 .animation-container .animation-page .hand { display: none; visibility: hidden; }
.ie7 .animation-container .animation-page.ipad { background: transparent url("../images/ipad-static-full.jpg") center center no-repeat }
.ie7 .animation-container .animation-page.iphone { background: transparent url("../images/iphone-static-full.jpg") center center no-repeat }
.ie7 .animation-container .animation-page .hand { display: none; visibility: hidden; }
.ie8 .animation-container .animation-page.ipad { background: transparent url("../images/ipad-static-full.jpg") center center no-repeat }
.ie8 .animation-container .animation-page.iphone { background: transparent url("../images/iphone-static-full.jpg") center center no-repeat }
.ie8 .animation-container .animation-page .hand { display: none; visibility: hidden; }

@media (max-width: 1000px) {
    .animation-container .animation-page .catch-wrapper { width: auto; padding: 0px 20px; }
    .animation-container { height: 100%; }
    .animation-container .spacer { display: inline-block; zoom: 1; width: 100%; z-index: -1; }
    .animation-container .animation-page { background-size: cover; height: 100%; padding-bottom: 10px; }
    .animation-container .animation-page.pc { background: transparent url("../images/pc-static.jpg") center center no-repeat; background-size: cover; }
    .animation-container .animation-page.ipad { background: transparent url("../images/ipad-static.jpg") center center no-repeat; background-size: cover; }
    .animation-container .animation-page.iphone { background: transparent url("../images/iphone-static.jpg") center center no-repeat; background-size: cover; }
    .animation-container .animation-page .hand { display: none; }
}

@media (min-width: 800px) and (max-width: 999px) {
    .header-content { margin: 0px 0px; }
    .hdr-bg { width: 100%; }
    .animation-container .animation-page .catch { top: 50%; position: absolute; z-index: 3; }
    .animation-container .animation-page .catch .catch-copy .dkir { background: url("../images/hdr-title-m.png") 0px 0px no-repeat; width: 317px; height: 72px; }
    .animation-container .animation-page .catch .catch-copy-white .dkir { background: url("../images/hdr-title-m.png") 0px -72px no-repeat; width: 317px; height: 72px; }
    .animation-container .animation-page .catch { margin-top: -58px; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 750px) {
    .animation-container .animation-page .catch .catcy-copy .dkir { background: url("../images/hdr-try3.png") no-repeat; background-size: 102px 204px; }
}

@media (max-width: 800px) {
    .header-content { /*padding-top: 50px;*/ }
    .animation-container .animation-page .catch-wrapper { width: auto; padding: 0px 0px; }
    .hdr-bg { width: 100%; position: relative; padding-bottom: 0px; }
    .animation-container .animation-page .catch { position: static; margin-top: 0px; height: 100%; }
    .animation-container .animation-page .catch .catch-copy { display: none; visibility: hidden; }
    .animation-container .animation-page .catch .catch-copy-white { display: none; visibility: hidden; }
    .animation-container .animation-page .catch .sample-button { position: absolute; bottom: 20px; left: 20px; z-index: 3; }
    .animation-container .animation-page .catch .sample-button .dkir { background: url("../images/hdr-try3.png") no-repeat center 0px; width: 102px; height: 102px; }
    .animation-container .animation-page .catch .sample-button .dkir span { text-indent: -9999px; font-size: 0%; color: transparent; }
    .animation-container .animation-page .catch .sample-button .dkir:hover { background-position: center -102px; }
}
/*内页*/
.div_info { width: 1000px; margin: 0 auto; margin-top: 10px; }
.info_left { width: 200px; float: left; }
.info_right { width: 780px; float: right; border: 1px solid #dadada; margin-bottom: 30px; }
.left_ttl { height: 35px; line-height: 35px; background: url(../images/infoBg.jpg) no-repeat left; padding-left: 20px; font-size: 16px; color: #333; font-weight: bold; font-family: "微软雅黑"; border-bottom: 1px dashed #dadada; margin-bottom: 10px; }
.right_ttl { height: 35px; line-height: 35px; border-bottom: 1px dashed #dadada; margin-bottom: 10px; padding: 0 10px; }
.ttl_span_left { display: block; float: left; font-size: 16px; color: #333; font-weight: bold; font-family: "微软雅黑"; }
.ttl_span_right { display: block; float: right; }
.info_main { padding: 10px; min-height: 350px; _height: 350px; }
.info_main h3.article_title { font-size: 22px; line-height: 30px; padding-top: 10px; padding-bottom: 10px; text-align: center; font-weight: 700; font-family: "Microsoft Yahei", "微软雅黑", "宋体"; }
.info_main .article_desc { text-align: center; }
.info_main .article_desc .author_txt { padding: 0; }
.info_main .article_desc .author_name { font-size: 14px; margin: 3px 0 5px 0; }
.info_main .article_desc .article_source .datetime { font-size: 14px; margin: 0 9px 0 6px; }
.info_main .article_desc .account-authentication { font-size: 14px; margin-left: 8px; padding-left: 8px; max-width: 440px; border-left: 1px solid #eee; line-height: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: -2px; }
.info_main .article_desc .article_source .datetime { font-size: 14px; margin: 0 9px 0 6px; }
.info_main .article_desc span { display: inline-block; }
.info_main .article_desc .article_source span { font-size: 14px; color: #999; }

.info_main .linebox { height: 1px; margin: 5px auto; border-bottom: 1px solid #cecece; }


.pro_ttl_bg { background: rgb(247,247,247); }
.pro_ttl { width: 1000px; margin: 0 auto; font-size: 18px; color: #333; padding-left: 40px; }
.pro_ttl span { color: #777; font-size: 14px; display: inline-block; padding-left: 20px; }
.project-thumbnails li { margin: 0 4px; }


/*.info_left { height: 850px; }

.info_left li { text-align: center; color: #fff; margin: 2px 0 !important; }
.info_left li a { display：block; color: #fff; width: 200px; height: 32px; line-height: 32px; display: inline-block; background: url(../images/first-bg-03.gif) no-repeat; text-decoration: none; }
.info_left li a:hover { color: #FF0E12; }
.info_left .ul_pro2 { top: 40px; left: 0; display: none; }
.info_left .ul_pro2 li { height: 32px; line-height: 32px; width: 200px; background: url(../images/first-bg-03.gif) no-repeat 0 -64px; }
.info_left .ul_pro2 li a { background: none; color: #fff; }*/
