﻿/* reset */
body, h1, h2, h3, h4, h5, h6, hr, p, pre, dl, dt, dd, ul, ol, li, th, td, form, fieldset, legend, button, input, textarea { margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size:100%;}
.hid{display:block;overflow:hidden;width:0px;height:0px;text-indent:-9999px;font-size:0px;}
ul, ol { list-style-type:none;}
a { text-decoration:none;}
a:hover { text-decoration:none;}
fieldset, img { border:0;}
input,select,form,img {vertical-align:middle;}
button{ cursor:pointer;}
a {text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0) ; -moz-tap-highlight-color:rgba(0,0,0,0) ; tap-highlight-color:rgba(0,0,0,0);}
/*page*/
html{ height: 100%;}
body{ height: 100%; min-width:1000px; font: 14px/150% tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif;}
.sprites{ background: url("../images/sprites.png") ;}
header,footer,article,aside,section,nav,menu,details,dialog,figure,figcaption{ display:block ; }
/* 自定义字体 Futura Md BT Medium */
@font-face{
    font-family: "FuturaMd";
    src: url("../font/FuturaMd.eot");   /* IE 6 - 8*/
    src: url("../font/FuturaMd.eot#iefix") format("embedded-opentype");   /* 服务器上 ie 9.10 失效 */
    src: url("../font/FuturaMd.ttf") format("truetype"), url('../font/FuturaMd.woff') format('woff') ; /* Modern Browsers */
}
/*clearfix*/
.clearfix:after{ clear: both; display: block; content:" " ;}
.clearfix{*zoom: 1; }

/*-------------  侧边栏  --------------*/
.slideBar .box{position: absolute;bottom: 60px;width: 100%;z-index:-1;}
.slideBar{ position: fixed; top: 0; left: 0; z-index: 10 ; width: 148px; height: 100% ; background: #333335 ; background-attachment:fixed; font-size: 12px;-webkit-transition: all .8s ease; -moz-transition: all .8s ease; transition: all .8s ease ; overflow: hidden;}
.sliderLogoBg{ width: 100%; background: #333335;}
.slideLogo{ display: block; width: 148px; height: 144px; background: url("../images/slideLogo.png") ;}
.navDiv{ margin: 56px 0 0 0; overflow: hidden;}
.navBtn{ position: relative; display: block; width: 148px; height: 45px; margin-bottom: 0; color: #99999a; text-transform: uppercase; font-family:'\5FAE\8F6F\96C5\9ED1', 'FuturaMd'; text-indent: 32px; line-height: 45px;}
.navBtn:hover,.navBtnOn{ width: 146px; margin-left: 2px; border-left: 2px solid #ea3648; color: #ea3648;}
.sildeCode{ display: block;margin: 100px auto 0 auto ; width: 89px; height: 89px;margin-left: 30px;}
.linkDiv{ margin-top: 38px;}
.linkDiv div{ padding-left: 38px;}
.linkTitle{ padding: 7px 34px;color: #fff ; text-transform: uppercase ;font-family:'\5FAE\8F6F\96C5\9ED1', 'FuturaMd'; cursor: default;}
.linkBtn{ float: left; width: 26px; height: 26px; margin-right: 20px; overflow: hidden;}
.linkBtn1{ background-position: -744px -814px;}
.linkBtn1:hover{ background-position: -772px -814px;}
.linkBtn2{ background-position: -688px -814px;}
.linkBtn2:hover{ background-position: -716px -814px;}
.slideBar .beian {display: block; width: 100%; height: 36px; line-height: 36px; color: #79797a; font-family: '\9ED1\4F53';}

.brandDiv{ padding:175px 0 53px 0; padding-top: 30px; text-align: center;}
.brandDetail{ margin-bottom: 16px; color: #79797a; font-family: '\9ED1\4F53'; line-height: 28px;}
.brandDiv div{ width: 100%; height: 26px; padding-left: 38px; overflow: hidden;}
.brandDiv div a{ float: left; width: 26px; height: 26px; margin-right: 20px; overflow: hidden;}
.onePixLogo{ background-position: -800px -814px;}
.onePixLogo:hover{ background-position: -828px -814px;}
.palwoMovieLogo{ background-position: -856px -814px;}
.palwoMovieLogo:hover{ background-position: -884px -814px;}
.footer{ border-top: 1px solid #323232 ;}
.footerDetail{margin: 18px 0 0 34px; font-size: 10px; font-family: '\5FAE\8F6F\96C5\9ED1';}
.footer1{ color: #666668 ;}
.footer2{ color: #575757 ;}
.footerDetail span{ display: block; line-height: 15px;}

/*横向下拉关闭*/
.slideMenu{ width: 39px; height: 28px;background-position: -551px -14px ; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ;}
.slideMenuOn{ width: 35px; height: 35px;background-position: -499px -10px ; }

.menuBtn{ position: fixed; top: 26px; left: 23px; z-index: 11 ; width: 48px; height: 48px;background-position: -598px -3px ; opacity: 0;-webkit-transition: all .8s ease; -moz-transition: all .8s ease; transition: all .8s ease ;  filter: alpha( opacity : 0) ; left/*\**/:148px \9 ;}

/*PC 横向 切换*/
.horizontalBtn{ position: absolute; top: 10px; right: 10px; display: none;}

/*-------------  侧边栏 END --------------*/

.di-none{ display: none;}
.di-inbl{ display: inline-block; vertical-align: middle;*display: inline;*zoom: 1 ;}

/*-------------  内页通用  -------------*/
.main{ margin-left: 148px; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; transition: all .8s ease ;}
.pageMain{ margin-top: 79px;}
.pageCon{margin-left: 98px ;}
.pageTopLine{ margin-bottom: 41px; width: 43px; height: 6px; background: #79797a;}
.aboutTitle{ }

/*返回顶部*/
.topBtn{ position: fixed; right: 1% ;  bottom: 70px ; z-index: 10 ; display: none; width: 32px; height: 64px; background-position: -746px -254px ; }
.topBtn:hover{ background-position: -701px -254px ;}

/* 内页通用动画 */
.animaTopLine,.animaTitle{ opacity: 0; -webkit-animation: animaTitle 1.3s both; -moz-animation: animaTitle 1.3s both; animation: animaTitle 1.3s both; }
@-webkit-keyframes animaTitle{
    0%{ opacity: 1; -webkit-transform : translateX(-100px) ;}
    100%{ opacity: 1; -webkit-transform : translateX(0) ;}
}
@-moz-keyframes animaTitle{
    0%{ opacity: 1; -moz-transform : translateX(-100px) ;}
    100%{ opacity: 1; -moz-transform : translateX(0) ;}
}
@keyframes animaTitle{
    0%{ opacity: 1; transform : translateX(-100px) ;}
    100%{ opacity: 1; transform : translateX(0) ;}
}
@-webkit-keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-15px); }
    100% { opacity: 1; -webkit-transform: translateY(0px); }
}

/*madia*/
@media screen and (max-height: 1300px){
    .brandDiv{ padding: 118px 0 53px 0 ;}
}
@media screen and (max-height: 1240px){
    .brandDiv{ padding: 48px 0 33px 0 ;}
}
@media screen and (max-height: 1100px){
    .linkDiv{ margin-top: 28px;}
    .brandDiv{ padding: 36px 0 24px 0 ;}
}
@media screen and (max-width: 1000px){
    .menuBtn{ opacity: 1;  filter: alpha( opacity : 100) ; }
    .slideBar{ left: -150px;}
    .main{ margin-left: 0;}
}
@media screen and ( max-height: 1000px) {

    .navBtn{ margin-bottom: 0; -webkit-transition: margin .5s ; -moz-transition: margin .5s ; transition: margin .5s ;}
    .navDiv{ margin: 44px 0 0 0 ; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }
    .sildeCode{ margin: 100px auto 0 auto ; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ;margin-left: 30px;}

    .brandDiv{ padding: 45px 0 23px 0; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ;}
}
@media screen and ( max-height: 900px) {
    .navBtn{ margin-bottom: 0; -webkit-transition: margin .5s ; -moz-transition: margin .5s ; transition: margin .5s ;}
    .navDiv{ margin: 20px 0 0 0 ; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }
    .linkTitle{ padding: 0 34px ; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }
    /*.linkBtn{ padding: 3px 34px 0 34px ; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }*/
    .linkDiv{ margin-top: 30px; }
    .slideBar .box{ bottom: 10px;}
}
@media screen and ( max-height: 800px) {
    .navDiv{ margin: 0 0 0 0 ; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }
    .navBtn{ height: 40px; line-height: 40px;}
    .linkDiv{ margin-top: 25px; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }
    .slideBar .box{ bottom: 0;}
}
@media screen and ( max-height: 700px) {
    .navDiv{ margin: 0 0 0 0 ; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }
    .navBtn{ height: 35px; line-height: 35px;}
    .linkDiv{ margin-top: 25px; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }
    .slideBar .box{ bottom: 0; transform: scale(0.75); transform-origin: 20% 50%; position: relative;}
    .slideBar .box img {margin-top: 0;}
}
@media screen and ( max-height: 600px) {
    .navDiv{ margin: 0 0 0 0 ; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }
    .navBtn{ height: 25px; line-height: 25px;}
    .linkDiv{ margin-top: 25px; -webkit-transition: all .5s ; -moz-transition: all .5s ; transition: all .5s ; }
    .slideBar .box{ bottom: 0;}
    .sildeCode{ width: 59px; height: 59px;}
}
