

.clear{clear:both;overflow:hidden;width:100%;height:0;}
.fleft, .fright{float:left;overflow:hidden;}
.fright{float:right;}
.center{text-align:center;}
.right{text-align:right;}
.hide{display:none;}

.red{color:#F00;}
.remark{color:#BBB;}
.gray{color:#999;}
.fs14{font-size:14px;} .fs16{font-size:16px;} .fs18{font-size:18px;} .fs24{font-size:24px;}
.fw600{font-weight:600;}
.br-3{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;}
.br-all{border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;}

/** a **/
a{color:#333;text-decoration:none;-webkit-transition:color 0.2s ease-out;-webkit-transition-delay: 0.1s;-moz-transition: color 0.2s ease-out 0.1s;-o-transition: color 0.2s ease-out 0.1s;transition: color 0.2s ease-out 0.1s;}


/** margin padding **/
.mt5{margin-top:5px;} .mt10{margin-top:10px;} .mt15{margin-top:15px;} .mt20{margin-top:20px;} .mt30{margin-top:30px}
.pd10{padding:10px;} .pd15{padding:15px;} .pd20{padding:20px;}

/** form **/
.txt{border:1px solid #c3cbd3;padding:10px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:18px;color:#069;}
.txt:hover{border:1px solid #777;}



/** dialog **/
.dialog{overflow:hidden;background-color:#666;padding:10px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.dialog .content{background-color:#FFF;padding:15px;overflow:hidden;}
.dialog .close{position:absolute;display:block;width:20px;height:20px;background:url(../images/icon/close1.png) no-repeat;top:20px;right:20px;cursor:pointer;}
.tip{border:1px solid #DDD;background-color:#FFF;box-shadow:0 4px 16px rgba(0, 0, 0, .6);}
.tip .content{padding:15px;color:#777;}
.tip em{display:inline-block;width:20px;height:20px;background:url(../images/icon/msg.gif) no-repeat;vertical-align:middle;margin-right:15px;}
.tip-error em{background-position:0 0;}
.tip-warn em{background-position:0 -20px;}
.tip-ban em{background-position:0 -40px;}
.tip-succ em{background-position:0 -60px;}
.tip-question em{background-position:0 -80px;}
.tip-load em{width:24px;height:24px;background:url(../images/loader.gif) no-repeat;}

.tip-cap{position:absolute;padding:10px;background-color:#fffdee;color:#f60;border:1px solid #edd288;z-index:100;}
.tip-cap i{display:inline-block;height:20px;width:20px;margin-right:6px;vertical-align:middle;background:url(../images/icon/tip-cue.png) no-repeat;}
.tip-cap s{position:absolute;width:18px;height:12px;bottom:-10px;left:38px;background:url(../images/icon/tip-arrow.png) no-repeat;}

/** scroll **/
#totop{position:fixed;display:none;width:50px;height:50px;background:url(../images/totop.png) no-repeat;opacity:0.6;cursor:pointer;bottom:100px;}
#totop:hover{opacity:1;}

/** icon **/
.loader{background:url(../images/loader.gif) left no-repeat;padding-left:35px;color:#3C7E8C;}
.icon-msg-succ,.icon-msg-warn{display:inline-block;vertical-align:middle;width:50px;height:50px;margin-right:10px;background:url(../images/icon/msgs.gif) no-repeat;}
.icon-msg-warn{background-position:0 -50px;}
.msg-unread, .msg-read, .msg-reply{display:inline-block;padding-left:18px;}
.msg-unread{background:url(../images/icon/msg-unread.gif) left no-repeat;font-weight:bold;color:#333;}
.msg-read{background:url(../images/icon/msg-read.gif) left no-repeat;color:#999;}
.msg-reply{background:url(../images/icon/msg-reply.gif) left no-repeat;color:#06C;}

.ico-facebook, .ico-twitter, .ico-youtube, .ico-instagram, .ico-pinterest, .ico-in, .ico-google,
.ico-blog{display:inline-block;width:40px;height:40px;background:url('/templets/oshujian/images/sns.png') no-repeat;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.ico-facebook{background-position:0 0;}
.ico-facebook:hover{background-position:0 -40px;}
.ico-twitter{background-position:-40px 0;}
.ico-twitter:hover{background-position:-40px -40px;}
.ico-youtube{background-position:-80px 0;}
.ico-youtube:hover{background-position:-80px -40px;}
.ico-instagram{background-position:-200px -40px;}
.ico-instagram:hover{background-position:-200px 0;}
.ico-pinterest{background-position:-240px 0;}
.ico-pinterest:hover{background-position:-240px -40px;}
.ico-in{background-position:-120px 0;}
.ico-in:hover{background-position:-120px -40px;}
.ico-google{background-position:-160px 0;}
.ico-google:hover{background-position:-160px -40px;}
.ico-blog{background-position:-280px 0;}
.ico-blog:hover{background-position:-280px -40px;}
.ico-facebook-s, .ico-twitter-s, .ico-youtube-s, .ico-instagram-s, .ico-pinterest-s, .ico-in-s, .ico-google-s, .ico-blog-s{display:inline-block;width:30px;height:30px;background:url(../images/icon/sns-s.png) 0 0 no-repeat;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.ico-facebook-s:hover{background-position:0 -30px;background-color:#3A69AD;}
.ico-twitter-s{background-position:-30px 0;}
.ico-twitter-s:hover{background-position:-30px -30px;background-color:#37BBE2;}
.ico-youtube-s{background-position:-60px 0;}
.ico-youtube-s:hover{background-position:-60px -30px;background-color:#EA4C89;}
.ico-instagram-s{background-position:-125px 0;}
.ico-instagram-s:hover{background-position:-125px -30px;background-color:#E24F3D;}
.ico-pinterest-s{background-position:-147px 0;}
.ico-pinterest-s:hover{background-position:-147px -30px;background-color:#E24F3D;}
.ico-in-s{background-position:-90px 0;}
.ico-in-s:hover{background-position:-90px -30px;background-color:#0173B2;}
.ico-google-s{background-position:-150px 0;}
.ico-google-s:hover{background-position:-150px -30px;background-color:#C73E2E;}
.ico-blog-s{background-position:-170px 0;}
.ico-blog-s:hover{background-position:-170px -30px;background-color:#FF7F00;}


/****************
 * loyout
 ****************/
/** top **/
.main{width:1140px;margin:0 auto;}
.top{clear:both;height:120px;}


#top-search{width:100%;position:absolute;z-index:10;left:0;background-color:#FFF;border-top:1px solid #EEE;display:none;overflow:hidden;-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.2);box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);}
#top-search .b{position:relative;margin:0 auto;width:1140px;padding:10px 0;}
#top-search input{border:none;height:40px;width:1000px;vertical-align:middle;font-size:28px;background-color:transparent;font-weight:300;letter-spacing:-1px;color:#e5e5e5;}
#top-search input.sbtn{width:28px;height:28px;background:url(../images/icon/search-1.png) no-repeat;margin:6px 15px 0 0;cursor:pointer;}
#top-search .close{display:block;position:absolute;right:0;top:22px;width:19px;height:19px;background:url(../images/icon/close.png) no-repeat;cursor:pointer;}
#top-search .close:hover{background-position:-50px 0;}


/** main **/
.main{padding:30px 0;}
.main-left{float:left;width:200px;overflow:visible;}
.main-right{float:right;width:880px;overflow:hidden;}
 
/** footer **/
.footer{width:100%;clear:both;background-color:#313131;position:relative;}
.help{clear:both;padding:40px 0;margin:0 auto;width:1140px}
.help dl{float:left;width:160px;margin-left:100px;}
.help dl.addr{width:360px;margin:0;}
.help dl.addr td{vertical-align:top;color:#999;padding:2px 4px;}
.help dt{font-size:14px;text-transform:uppercase;margin-bottom:10px;color:#EEE;}
.help dd{padding:5px 0;}
.help dd a{color:#999;}
.help dd a:hover{color:#FFF;text-decoration:none;}
.footer-bottom{background-color:#111;border-top:1px solid #333;height:70px;}
.footer-nav{margin:0 auto;width:1140px;}
.footer-nav .f-nav{float:right;line-height:70px;}
.footer-nav .f-nav a{color:#555;}
.footer-nav .f-nav a:hover{color:#CCC;}
.footer-nav .f-nav i{font-style:normal;padding:0 8px;color:#333;}
.copyright{float:left;color:#555;line-height:70px;}
.footer-bar{width:100%;height:120px;background-color:#F1F1F1;}
.footer-bar-box{margin:0 auto;width:1140px;height:120px;}
.footer-sns{float:left;padding-top:40px;}
.footer-sns a{margin-right:10px;}
.footer-newsletter{float:right;padding-top:20px;}
.footer-newsletter .icon{position:absolute;width:50px;height:50px;top:10px;left:-70px;border:2px solid #FFF;background:url(../images/icon/mail.png) #1779A0 center no-repeat;}
.footer-newsletter .nl-remark{font-size:12px;color:#999;}
.footer-newsletter .nl-box{padding-top:8px;}
.footer-newsletter input{height:35px;width:320px;padding:0 10px;border:1px solid #DDD;}
.footer-newsletter input.sbtn{width:80px;cursor:pointer;background-color:#01569B;border:1px solid #01569B;text-transform:uppercase;color:#FFF;}
.footer-newsletter input.sbtn:hover{background-color:#01447A;border:1px solid #01447A;}


/** position **/
.pos{width:100%;height:180px;  font-family:Arial;}
.pos-default, .pos-news, .pos-help, .pos-info{background:url('/templets/oshujian/images/pos-default.jpg') top center no-repeat;}
.pos-company{background:url('/templets/oshujian/images/pos-company.jpg') top center no-repeat;}
.pos-contact{background:url('/templets/oshujian/images/pos-contact.jpg') top center no-repeat;}
.pos-service{background:url('/templets/oshujian/images/pos-service.jpg') top center no-repeat;}
.pos-goods, .pos-download{background:url('/templets/oshujian/images/pos-goods.jpg') top center no-repeat;}
.pos-project{background:url('/templets/oshujian/images/pos-project.jpg') top center no-repeat;}
.pos-testimonial{background:url('/templets/oshujian/images/pos-testimonial.jpg') top center no-repeat;}
.pos .b{margin:0 auto;width:1200px;position:relative;height:180px;  font-family:Arial;}
.pos .s, .pos h1{position:absolute;height:30px;font-weight:300;text-transform:uppercase;color:#FFF;font-size:18px;top:60px;left:0;padding:0 50px;}
.pos .s{background:url('/templets/oshujian/images/bg-pos-h1.png');line-height:30px;}
.pos h1{font-size:20px;height:40px;background:url('/templets/oshujian/images/bg-pos-h2.png');line-height:40px;top:70px;padding-right:80px;}
.pos .p{position:absolute;right:0;bottom:10px; color:#ffffff;}
.pos .p i{font-size:9px;padding:0 8px;color:#ffffff;}
.pos .p img{vertical-align:middle;margin-right:6px;}
.pos a{color: #ffffff;}
.pos a:hover{text-decoration:none;color:#FFFFFF;}



