.ad { text-align: center; }
.clear { clear: both }
.hide { display: none; }
body.no-scroll { overflow: hidden; }
.black-bg { display: none; background: #000; opacity: 0.7; filter: alpha(opacity=70); width: 100%; height: 100%; position: fixed; z-index: 9997; top: 0; left: 0; }
.iframe-modal { display: none; z-index: 9998; position: absolute; border: 3px solid #000; background: #fff; width: 180px; height: 140px; left: 0%; top: 0%; }
.iframe-close-btn { display: none; background: #fff; border-radius: 40px; width: 40px; height: 40px; line-height: 20px; border: 3px solid #000; left: 95%; top: 30px; position: fixed; cursor: pointer; font-family: Verdana; font-weight: bold; color: #000; z-index: 9999; font-size: 20px; text-align: center; }
.iframe-close-btn:hover { color: #fff; border: 3px solid #fff; background: #000 }
#top { height: 260px; position: relative; z-index: 14 }
.right-sidebar { position: absolute; right: 10px; top: 10px; z-index: 14 }
#choose-skin { margin-bottom: 5px; float: left }
#choose-skin li { float: left; margin: 0 3px; width: 16px; height: 16px; border: 3px solid #fff; text-indent: -9999px; cursor: pointer }
#choose-skin li.cur { border: 3px solid #804000; background-image: url(../images/ok.png); background-repeat: no-repeat; background-position: center center; }
#choose-skin li.mosaic { background-color: #FAFAFA }
#choose-skin li.wall { background-color: #C5C0BD }
#choose-skin li.prairie { background-color: #CFEEF3 }
#choose-skin li.sky { background-color: #9ED6F1 }
#choose-skin li.wall2 { background-color: #565656 }
#choose-skin li.ink { background-color: #edecda }
.mobi { margin-bottom: 5px; float: left }
.mobi li { float: left; width: 64px; text-align: center; display: inline; margin: 0 5px; }
.mobi li a { color: #036; }
.mobi li img { display: block }
.mobi li a:hover { color: #F30; text-decoration: underline }
.studioLink { position: absolute; top: 215px; left: 850px; padding-left: 28px; background: url(../images/19.gif) no-repeat left center; line-height: 27px; height: 27px; width: 124px; display: block; color: #7B2800; clear: both }
.studioLink:hover { opacity: 0.8; filter: alpha(opacity=80); }
.uiAndJs li a:hover { opacity: 0.7; filter: alpha(opacity=70); }
.qrcode { position: fixed; right: 40px; bottom: 65px; width: 100px; height: 100px; }
.qq { position: absolute; right: 20px; top: 120px; z-index: 13; }
#logo { padding-top: 50px; left: 10%; position: absolute; z-index: 11; }
#nav { margin-top: 200px;left: 10%; position: absolute; z-index: 30 }
.dock-container { position: relative; height: 50px; }
.dock-container a { display: block; width: 40px; position: absolute; bottom: 0; z-index: 30; }
.dock-container a span { display: none; position: relative; width: 100px; text-align: left; padding-left: 25px; color: #333 }
.dock-container img { margin: 5px 10px 0px; width: 100%; }
#my-head { position: absolute; top: 0; z-index: 10; left: 40%; height: 260px; overflow: hidden; }
#left-hand { position: absolute; z-index: 12; top: 200px; width: 200px; height:425px left: 0; -moz-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; -ms-animation-delay: 2.5s; -o-animation-delay: 2.5s; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -ms-animation-duration: 0.5s; -o-animation-duration: 0.5s; }
#right-hand { position: absolute; z-index: 12; left: 70%; top: 406px; width: 360px; height: 420px; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; }
#to-top { position: fixed; z-index: 50; bottom: 3px; left: 88%; cursor: pointer; width: 50px; height: 50px; background: url(../images/top.gif) no-repeat left top; display: none; _display: none!important; }
#to-top:hover { background: url(../images/top.gif) no-repeat left bottom }
#sub-nav { position: absolute; background: url(../images/bq.png) no-repeat; width: 125px; height: 156px; padding: 30px 30px; left: 71%; z-index: 12 }
#sub-nav li { cursor: pointer; width: 97px; height: 45px; line-height: 45px; text-align: center; }
#sub-nav li.cur { background: url(../images/q.jpg) no-repeat 10px 0; }
#sub-nav li a { font-size: 16px; margin-left: 20px }
#download-nav { position: absolute; left: 780px; margin-top: 0; z-index: 12 }
#download-nav li { margin-bottom: 8px; }
#download-nav li a { padding-left: 40px; display: block; height: 32px; line-height: 32px; font-size: 16px; color: #000 }
#download-nav li a:hover { color: #009900 }
#print { background: url(../images/print.png) no-repeat left center; }
#download { background: url(../images/download.png) no-repeat left center; }
#experience-nav { position: absolute; background: url(../images/bq.png) no-repeat; width: 125px; height: 156px; padding: 30px 30px; left: 71%; z-index: 12 }
#experience-nav li { cursor: pointer; height: 26px; line-height: 26px; text-align: left; }
#experience-nav li a { font-size: 14px; margin: 0 5px;}
#main { margin-left: 95px; width: 75%; padding: 30px 10px; min-height: 600px; clear: both; background: url(../images/paper.jpg) left top #F2EDB4; position: relative; z-index: 11; box-shadow: 5px 5px 8px #888;line-height: 30px; }
#main>h2 { font-size: 17px; padding-left:110px; }
#main .tag { margin-bottom: 20px; height: 30px; font-size: 15px; }
#main .tag a { padding: 4px 12px; }
.work-list { width: 612px; }
.work-list h3 { font-size: 24px; letter-spacing: 3px; position: absolute; width: 611px; text-align: center; display: none; }
.work-list img { width: 610px; margin-bottom: -4px; }
.work-list li { background: url(../images/21.gif) no-repeat center center #FFFFFF; box-shadow: 5px 5px 8px #888; border: 1px solid #333; min-height: 200px; margin-bottom: 30px; }
#visit { color: #FFF; font-size: 14px; margin-left: 20px; text-decoration: underline }
#visit:hover { color: #FF4646 }
/*简历*/
.resume { width: 610px; border: 1px solid #669999; border-collapse: collapse; position: relative; table-layout: fixed }
.resume a { color: #090 }
.resume a:hover { text-decoration: underline; }
.resume tr td { border: 1px solid #669999; background: #F3F3F3; height: 30px; padding: 1px 4px; }
.resume tr td p { word-break: break-all; word-wrap: break-word; line-height: 22px; }
.resume tr td p strong { font-weight: bold }
.resume-tit { background: #E0E0E0!important; font-weight: bold; text-align: center; width: 120px; }
.contact { background: url(../images/shu.gif) no-repeat right center; width: 610px; }
.contact p { clear: both; line-height: 40px; height: 40px; margin: 20px 0; background: #9F9A80; color: #FFF; padding-left: 10px; }
.contact p b { float: left; width: 60px; }
.contact p a img { margin-top: 10px; }
.contact p a { color: #FFF; }
.contact p a:hover { text-decoration: underline }
#logo-group { width: 680px; }
#logo-group dl { width: 180px; height: 140px; border: 1px solid #666; background: #FFFFFF; float: left; display: inline; margin: 10px; position: relative; z-index: 10; overflow: hidden; box-shadow: 5px 5px 8px #888; }
#logo-group dl.haslink { cursor: pointer }
#logo-group dl dd { position: absolute; height: 105px; padding-top: 35px; width: 180px; text-align: center; }
#logo-group dl dd img { width: 150px; height: 60px; }
#logo-group a:hover img { opacity: 0.6; filter: alpha(opacity=60); }
#logo-group dl dd a { color: #06F; font-size: 16px; }
#logo-group dl dd a:hover { color: #990000; text-decoration: underline }
#logo-group dl dt a { color: #fff; }
#logo-group dl dt a:hover { text-decoration: underline; color: #FFFF00 }
#logo-group dl dt { height: 40px; line-height: 48px; width: 180px; text-align: center; z-index: 10; position: absolute; top: 180px; background: url(../images/sj.gif) repeat-x left top; color: #FFFFFF; }
.big-pic { background: url(../images/21.gif) no-repeat center center #FFFFFF; position: absolute; z-index: 100; border: 2px solid #f0f0f0; display: none; top: 0; left: 0; width: 650px; min-height: 300px }
#work-list { width: 630px; }
.waterfall { margin-left: -20px; }
.waterfall li { background: #FFFFFF; box-shadow: 5px 5px 8px #888; border: 1px solid #999; margin-bottom: 10px; min-height: 120px; padding: 5px; width: 175px; }
.waterfall li img { width: 175px; margin: 0 10px; }
.waterfall li h3 { margin: 0 10px; }
#experience, #jquery-ui-experience { margin-left: 100px; width: 70%;}
#experience dl, #jquery-ui-experience {  }
#experience dl dt, #jquery-ui-experience dl dt { height: 30px; line-height: 30px; cursor: pointer; background: url(../images/002.gif) no-repeat left center; padding-left: 20px; }
#experience dl dt.cur, #jquery-ui-experience dl dt.cur { text-decoration: underline; }
#experience dl dt strong { color: #F00; font-weight: bold }
#experience dl dd, #jquery-ui-experience dl dd { line-height: 24px; background: #fff; border: 1px solid #666; padding: 10px; }
#experience dl dd a:hover { color: #F00 }
#experience dl dd textarea { padding: 5px; width: 450px; height: 200px; }
#experience dl dd button { margin-left: 5px; padding: 0px 6px; line-height: 20px; color: #FFFFFF; cursor: pointer; background: #69a916; border: 1px solid #659b1b; border-radius: 2px }
#experience dl dd button:hover { background: #48730d }
#experience dl dd .hiddenContent { display: none; }
#jquery-ui-experience .eg { margin: 8px 1%; padding: 10px 20px; border: 1px dashed #333333; background: #F5F5F5; }
#jquery-ui-experience dl dd table, #experience dl dd table { margin: 10px auto 15px auto; width: 98% }
#jquery-ui-experience dl dd table caption, #experience dl dd table caption { line-height: 34px; font-weight: bold; font-size: 14px }
#jquery-ui-experience dl dd table tr th { padding: 5px; }
#jquery-ui-experience dl dd table tr td, #experience dl dd table tr td { padding: 5px; }
#links { margin-left: 100px;width: 70%; }
#links dl { margin-bottom: 30px; float: left }
#links dl dt { font-size: 16px; line-height: 30px; clear: both }
#links dl dd { line-height: 30px; width: 280px; float: left }
#links dl dd a:hover { padding-left: 4px; }
#book { margin: -47px 0 -30px -105px; min-height: 1040px; background: #F5F0B6; }
#book h2 { height: 39px; margin: 0; padding: 45px 0 0 105px; background: url(../images/bookshelftop.jpg) no-repeat left top; color: #000!important }
#book ul { float: left; width: 100%; height: auto; padding: 0 0 0 40px; background: url(../images/bookshelfmiddle.jpg) repeat-y left top }
#book ul li { height: 160px; line-height: 160px; vertical-align: bottom; width: 110px; float: left; margin: 17px 14px 0 14px; padding-bottom: 19px }
#book ul li a { display: block; height: 160px; line-height: 160px; }
#book ul li img { width: 110px; vertical-align: bottom; box-shadow: 5px 0px 6px #333; }
#blackBg { background: #000; left: 0; top: 0; opacity: 0.8; width: 100%; position: absolute; z-index: 80 }
#bookIntro { display: none; background: #F9F9F9; position: absolute; z-index: 100; width: 180px; border: 10px solid #F9F9F9; margin-left: -100px; left: 50%; box-shadow: 6px 6px 8px #000 }
#bookIntro p { line-height: 26px; }
#bookIntro #close { float: right; width: 22px; height: 22px; line-height: 22px; font-size: 14px; font-weight: bold; display: block; color: #FFF; background: #333; border-radius: 22px; text-align: center; font-family: Arial, Helvetica, sans-serif }
#bookIntro #close:hover { background: #666 }
#bookIntro #pdfDownload { font-weight: bold; color: #F00 }
#bookIntro #pdfDownload:hover { text-decoration: underline }
#footer { background: url(../images/footer.png) center no-repeat; width: 80%; height: 116px; padding-top: 200px; overflow: hidden; text-align: center; line-height: 40px; }