/*
 * Copy Right: Bingyan Studio
 * Comments:CSS Reset
 * @author: suta
 * the last year
 */

@charset "utf-8";
    /* CSS Document*/
    body {
    margin: 0 auto;
    padding: 0 auto;
    font-family:Microsoft YaHei,"微软雅黑", Arial, Helvetica, sans-serif;
    background:#fff;
}
img {
    border: none;
}
.clear {
    clear: both;
}
a {
    text-decoration: none;
    color: #0f7ce2;
}
a:hover {
    color: #25a0ff;
}
#current {
    border-bottom: 4px solid #e2e8ee;
    font-weight: bold;
    color: #e2e8ee;
}
ul,li {
    margin: 0;
    padding: 0
}
html{
    overflow-y:scroll;
    }


#header_1 {
	height: 90px;
	background: #fafafa;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #FF3300;
}
.all {
    width: 1000px;
    margin: 0 auto;
}

.logo {
    float: left;
    width: 241px;
    height: 61px;
    margin-top: 15px;
}

.version_nav {
    float: right;
    margin-top: 40px;
    display: inline;
    vertical-align: middle;
}

.version_nav li {
    float: left;
}

.version_nav li.mr {
	margin-right: 30px;
}

.version_nav li.mrl {
    margin-left: 30px;
	margin-right: 30px;
}

.version_nav li a {
    font: 26px "verdana";
    color:#959595;
    padding: 8px;
    border: 2px solid #fafafa;
}

.version_nav a.current {
    border: 2px solid #ff8000;
    color: #ff8000;
}

.version_nav li a:hover {
    border: 2px solid #ff8000;
	color: #ff9f3f;
} 





/*-------------------------------------------------------------------------banner代码---------------------------*/

#banner {
	/* background: url(../image/banner_bg.jpg)  center -20px no-repeat; */
	height: 560px;
	/* background-color: #724118; */
	background-color: #FF6600;
}

.banner_m {
    width: 1000px;
    position: relative;
    margin: 0 auto;
    padding-top: 76px;
}

.banner_wrap,#footer {
    width: 1000px;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 76px;
}

.banner_inner {
    width: 2000px;
}

.main_slogan {
    width: 490px;
    height: 76px;
    background: url(../image/main_slogan.png) no-repeat;
}

.sub_slogan {
    font: 32px "Microsoft YaHei";
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0,0,0,.2);
}

.download_holder {
    margin-top: 60px;
    position: relative;
    height: 210px;
}

.download_holder_ios {
   padding-top: 20px;
} 

.download_holder .get_apk{
    width: 322px;
    height: 88px;
    background: url(../image/apk_btn.png);
    position: relative;
    top: 80px;
    display: block;
}

.download_holder .get_apk:hover{
    background: url(../image/apk_btn_h.png);
}

.download_holder .qr_holder,.download_holder .qr_holder_ios {
    width: 194px;
    height: 194px;
    position: absolute;
    bottom: 44px;
    left: 360px;
}

.download_holder .qr_holder {
    background: url(../image/android_qr.png); 
}

.download_holder .qr_holder_ios {
    background: url(../image/ios_qr.png); 
}

.download_ways {
    color: #FFF;
    font-family: "Microsoft YaHei";
    vertical-align: middle;
}

.download_ways span{
    color: #FFF;
    font-size: 16px;
    margin-right: 10px;
}

.download_ways a{
    font-size: 16px;
    padding: 7px 10px;
    border: 2px solid #FFF;
    margin-left: 10px;
    color: #FFF;    
}

.download_ways a:hover{
    color: #ff8000;
    border: 2px solid #ff8000;
}

/* download for iOS*/
.download_holder .get_apk_ios{
    width: 322px;
    height: 88px;
    background: url(../image/apk_btn_ios.png);
    position: relative;
    display: block;
}

.download_holder .get_apk_ios:hover{
    background: url(../image/apk_btn_ios_h.png);
}

.download_holder .appstore{
    width: 210px;
    height: 81px;
    background: url(../image/appstore.png);
    position: relative;
    display: block;
    top: -10px;
}

.download_holder .appstore:hover{
    opacity: .8;
}

.banner_m .screen_show {
	position: absolute;
	right: 0;
	top: 15px;
	width: 320px;
	height: 625px;
	overflow: hidden;
	padding-top: 88px;
	background-image: url(../image/android_mockup.png);
	background-repeat: no-repeat;
	padding-left: 69px;
	padding-right: 0px;
}

.banner_m .screen_show_ios {
    position: absolute;
    right: 0;
    top: 15px;
    background: url(../image/ios_mockup.png);
    padding: 74px 19px 94px 22px;
    width: 267px;
    height: 474px;    
    overflow: hidden;
}

.show_wrap {
    width: 267px;
    overflow: hidden;
}

.show_inner{
    width: 10000px;
}

.show_inner li {
    float: left;
}


#footer .mod_feature {
    margin-top: 15px;
}

.mod_feature h4 {
    margin-bottom: 16px;
    height: 39px;
    overflow: hidden;
}

.mod_feature h4.book_class {
    width: 260px;
    background: url(../image/footer_header.png) no-repeat;
} 

.mod_feature h4.reminder {
    width: 260px;
    background: 0 -39px url(../image/footer_header.png) no-repeat;
} 

.mod_feature h4.weibo {
    width: 310px;
    background: 0 -78px url(../image/footer_header.png) no-repeat;
} 

.mod_feature p {
    font: 14px SimSun;
    line-height: 150%;
    color: #797F86;
}

#footer .width_260 {
    width: 260px;
}

#footer .width_310 {
    width: 310px;
}

#footer .mll {
    margin-left: 90px;
} 

.copyright{
	display: block;
	width: auto;
	overflow: hidden;
	clear: both;
	border-top: 1px solid #BBBBBB;
	margin-top: 25px;
}
.footer_area{
	display: block;
	width: 960px;
	overflow: hidden;
	clear: both;
	margin: 0 auto;
}
.footer_content{
	height: 30px;
	margin: 10px auto;
	text-align: center;
}
.footer_content .depart{
	margin: 0 10px;
	color: #A0A0A0;
}
.footer_content a, .footer_content span{
    color:#A0A0A0;
    font-size: 12px;
    font-weight:normal;
	text-decoration: none;
}
.footer_content a:hover{
    text-decoration: underline;
    color:red;
}



/* transitions*/
.version_nav li a,a.get_apk,.download_ways a,.download_holder .appstore,.get_apk_ios{
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}



/* margin & padding */
.mtl {
    margin-top: 15px;
}

.mtm {
    margin-top: 10px;
}

.mts {
    margin-top: 5px;
}

.mlrm {
    margin-left: 10px;
    margin-right: 10px;
}

.mrl {
    margin-right: 15px;
}

.mbl {
    margin-bottom: 15px;
}

.mlm {
    margin-left: 10px;
}

.mls {
    margin-left: 5px;
}

.ptm {
    padding-top: 10px;
}

/* precent widths */
.width_80 {
    width: 80%;
}

.width_90 {
    width: 90%;
}


/* img filter */
.img_filter {
    /*-webkit-animation:filter 3s 1 ease-in;*/
    -webkit-animation: blur-anim 1s 1 linear;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes blur-anim {
  0% { -webkit-filter: blur(4px) grayscale(1) sepia(0.8);}
  100%   { -webkit-filter: blur(0px) grayscale(0) sepia(0);}
}

.interest_hidden{
    display:none;
}



/* colors */
.gray {
    color: #999;
}

.pale_blue {
    color: #3DA6D3;
}

/* js-jump-focus  */
.feed_item .item_inner div.thfixed{
        position:fixed;
        top: 0px;
        z-index:20000;
}

.bg_black {
    background: #252525;
}



/* animate.css */

.animated {
    -webkit-animation: 1s ease-in-out;
    -moz-animation: 1s ease-in-out;
    -ms-animation: 1s ease-in-out;
    -o-animation: 1s ease-in-out;
    animation: 1s ease-in-out;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounceOutDown {
    0% {
        opacity: 0.1;
        -webkit-transform: translateY(-400px);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes bounceOutDown {
    0% {
        -moz-transform: translateY(-400px);
    }

    
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes bounceOutDown {
    0% {
        -o-transform: translateY(-400px);
    }
    
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes bounceOutDown {
    0% {
        transform: translateY(-400px);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    -moz-animation-name: bounceOutDown;
    -o-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}
