@font-face {
    font-family: "FZYouHJW_Xian";  /*503*/
    src: url("../fonts/FZYouHJW_Xian.eot"); /* IE9 */
 	src: url("../fonts/FZYouHJW_Xian.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/FZYouHJW_Xian.TTF") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url("../fonts/FZYouHJW_Xian.svg#FZYouHJW_Xian") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "FZYouHJW_Xi"; /*504*/
    src: url("../fonts/FZYouHJW_Xi.eot"); /* IE9 */
    src: url("../fonts/FZYouHJW_Xi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/FZYouHJW_Xi.TTF") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("../fonts/FZYouHJW_Xi.svg#FZYouHJW_Xi") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "FZYouHJW_ZhongXi"; /*508R*/
    src: url("../fonts/FZYouHJW_ZhongXi.eot"); /* IE9 */
    src: url("../fonts/FZYouHJW_ZhongXi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/FZYouHJW_ZhongXi.TTF") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("../fonts/FZYouHJW_ZhongXi.svg#FZYouHJW_ZhongXi.svg") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "FZYouHK_Zhun";  /*509R*/
    src: url("../fonts/FZYouHK_Zhun.eot"); /* IE9 */
    src: url("../fonts/FZYouHK_Zhun.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/FZYouHK_Zhun.TTF") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("../fonts/FZYouHK_Zhun.svg#FZYouHK_Zhun") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "FZYouHK_Zhong"; /*510M*/
    src: url("../fonts/FZYouHK_Zhong.eot"); /* IE9 */
    src: url("../fonts/FZYouHK_Zhong.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/FZYouHK_Zhong.TTF") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("../fonts/FZYouHK_Zhong.svg#FZYouHK_Zhong") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "FZYouHK_ZhongCu";  /*511M*/
    src: url("../fonts/FZYouHK_ZhongCu.eot"); /* IE9 */
    src: url("../fonts/FZYouHK_ZhongCu.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/FZYouHK_ZhongCu.TTF") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("../fonts/FZYouHK_ZhongCu.svg#FZYouHK_ZhongCu") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "FZYouHK_Da"; /*512B*/
    src: url("../fonts/FZYouHK_Da.eot"); /* IE9 */
    src: url("../fonts/FZYouHK_Da.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/FZYouHK_Da.TTF") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("../fonts/FZYouHK_Da.svg#FZYouHK_Da") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "FZYouHK_Cu"; /*519B*/
    src: url("../fonts/FZYouHK_Cu.eot"); /* IE9 */
    src: url("../fonts/FZYouHK_Cu.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/FZYouHK_Cu.TTF") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("../fonts/FZYouHK_Cu.svg#FZYouHK_Cu") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0; font-family: FZYouHJW;font-weight: normal;}
body{font-size:14px; background: #fff;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border: none}
textarea{resize:none;}
a {text-decoration:none; cursor:pointer; outline:none}
a:hover {text-decoration:underline;}
.clear{clear: both;}
.fl{float: left;}
.fr{float: right;}
.container{width: 100%;}
.inner,.functions,.user-works,.about{max-width: 1200px;}
.inner,.functions,.functions-container,.user-works,.about,.download{margin: 0 auto; text-align: center; }
.header{width: 100%; height: 640px; background: #dc4335; border-top: 1px solid transparent; box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;}
.inner{height: 640px; position: relative; border-top: 1px solid transparent; box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; background: url(../images/clouds.png) no-repeat; background-size: 100% 100%;}
.navbar{*float: left; margin-left: 0.2rem;}
.navbar .nav-logo{width: 128px; height: 42px; background: url(../images/logo.png) no-repeat; margin-top: 49px;}
.intro{width: 578px; margin-top: 96px; margin-left: 0.2rem;  *clear: both;*float: left;}
.intro img{width: 578px; height: 66px; }
.intro h2{font-size: 20px; color: #ffffff; font-family: FZYouHJW_Xian; font-weight: normal; margin-top: 24px;}
.intro .downloads-btn{margin-top: 42px; display: inline-block;}
.intro .downloads-btn{display:inline-block; _zoom:1;_display:inline;}
.downloads-btn a img{width: 181px; height: 60px;}
.ios{margin-left: 23px;}
.code{background: url(../images/icon.png) no-repeat; background-size: 100% 100%; height:145px; width:144px; margin-top: 41px; margin-left: 217px; display: block; *float: left;}
.phone{width: 364px; height: 524px; position: absolute; right: 107px; right: 0.1rem; bottom: 0;}
.functions h1,.user-works h1,.about h1{font-family: FZYouHK_Zhun; font-size: 36px; margin-top: 124px;}
.functions h4{margin: 90px 2% 0 2%;}
h4{font-family: FZYouHJW_Xi; font-size: 24px; color: #999999;}
.functions-container{margin: 50px 0; text-align: center;}
.text{display: inline-block; text-align: left; *zoom:1; *display:inline;}
.item{width: 321px; display: inline-block; margin: 2% 1%; *zoom:1; *display:inline; text-align: left;}
.icon{background:url(../images/img3.png)  no-repeat; display: inline-block; vertical-align: top;}
.achievement{height:36px; width:31px; background-position:0 0;}
.playback{height:36px;width:32px; background-position: -62px 0;}
.font-library{height:35px;width:36px; background-position: -94px 0;}
.collections{height:34px;width:36px; background-position: -130px 0;}
.p-fonts{height:36px;width:36px; background-position: -166px 0;}
.writing{height:36px;width:37px; background-position: -202px 0;}
.workbook{height:33px;width:37px; background-position: -239px 0;}
.l-copybook{height:36px;width:38px; background-position: -276px 0;}
.score{height:36px;width:38px; background-position: -314px 0;}
.text{margin-left: 16px;}
.text h5,.text p,.app p{font-family: FZYouHJW_Xi;}
.text h5{font-size: 28px; color: #333333; font-weight: normal;}
.text p{font-size: 14px; color: #999999;}
.chapters{width: 80%; margin: 90px 10%;}
.chapters img{width: 200px; height: 200px; margin: 1%;}
.about h1{margin-bottom: 90px;}
.about h4{margin: 0 2%;}
.app{margin-top: 160px;}
.weixin{margin-left: 0;}
.weixin img,.founder img{width: 144px; height: 145px;}
.app div{display: inline-block; *zoom:1; *display:inline; vertical-align:top;}
.founder{margin-left: 80px;}
.app div p{color: #999999; margin-top: 23px;}
.download{width: 100%; background: #dc4335; border-top: 1px solid transparent; box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; margin-top: 144px;}
.download h4{font-size: 24px; color: #fff; font-family: FZYouHJW_Xi; margin-top: 144px;}
.download p{font-family: FZYouHK_ZhongCu; font-size: 36px; color: #fff; margin-top: 28px;}
.download .downloads-btn{margin-top: 80px;}
.download img{margin-top: 50px;}
.download span{display: block; color: #fff; margin-top: 40px; line-height: 1.5em; font-family: FZYouHJW_Xi;}
@media screen and (max-width: 1030px){
    .header{height: 533px;}
    .inner{height: 533px;}
    .navbar .nav-logo{margin-left: 36px;}
    .intro{margin-top: 60px; margin-left: 0;}
    .intro img{width: 473px; height: 55px;}
    .phone{width: 300px; height: 432px;}
    .downloads-btn a img{width: 151px; height: 50px;}
    .code{ height:121px; width:120px; margin-top: 32px; margin-left: 232px;}
    .founder{margin-left: 5%;}

}
@media screen and (max-width: 992px){
    .founder,.weixin{width: 40%;}
    .founder{margin-left: 15%;}
}
@media screen and (max-width: 880px){
    .header{height: 444px;}
    .inner{height: 444px;} 
    .navbar .nav-logo{margin-left: 46px;}
    .intro{margin-top: 40px; margin-left: -30px;}
    .intro h2{font-size: 16px;}
    .intro img{width: 394px; height: 46px; margin-left: 0;}
    .phone{width: 250px; height: 360px;}
    .intro .downloads-btn{margin-top: 27px;}
    .downloads-btn a img{width: 126px; height: 42px;}
    .code{ height:101px; width:100px; margin-top: 24px; margin-left: 238px;}
}  
@media screen and (max-width: 768px){
    .inner{background: url(../images/i-clouds.png) 0px 75px no-repeat; background-size: 10rem 2.3rem;}
    .header{width: 10rem; background: #dc4335; height: auto;}
    .navbar .nav-logo{margin: 49px auto;}
    .inner{width: 10rem; height: auto;}
    .intro{width:8rem;margin: 30px auto; text-align: center; margin-left:1rem;margin-right: 1rem;} 
    .intro img{width:8rem; height:auto;}
    .intro h2{margin-top: 20px; font-size: 14px;}
    .intro .downloads-btn{margin-top: 30px;}
    .downloads-btn a img{width: 2.5rem; height: auto;}
    .code{display: none;}
    .phone{display: block; position:static;  width: 280px; height: auto; margin: 40px auto; margin-bottom: 0; padding-left: 57px;}
    .functions-container{text-align: center; margin: 50px 0;}
    .chapters img{width: 46%; height: auto;}
    .founder,.weixin{width: 60%;}
    .founder{margin-left: 0; margin-top: 52px;}

}
@media screen and (max-width: 640px){
    .inner{background: url(../images/i-clouds.png) 0px 85px no-repeat; background-size: 10rem 2.3rem;}
}

@media screen and (max-width: 436px){
    .navbar .nav-logo{background: url(../images/i-logo.png) no-repeat; background-size: 100% 100%;}
    .inner{background: url(../images/i-clouds.png) 0px 110px no-repeat; background-size: 10rem 2.3rem;}
    .functions h1, .user-works h1, .about h1{
        margin-top: 70px;
        font-size: 28px;
    }
    .functions h4{margin-top: 25px;}
    .functions-container{margin:50px 0; text-align: center;}
    .chapters{margin:60px 10%;}
    .about h1{margin-bottom: 60px;}
    .app{margin-top: 60px;}
    .founder, .weixin{width: 90%;}
    .item{width: auto;} 
    .text h5{font-size: 24px;}
    .icon{background:url(../images/img2.png)  no-repeat; background-size:265px 27px;  display: inline-block; vertical-align: top; margin-top: 5px;}
    .achievement{height:27px;width:23px;background-position:0 0;}
    .playback{height:26px;width:23px;background-position:-23px 0;}
    .playback{height:27px;width:24px;background-position:-47px 0;}
    .font-library{height:26px;width:27px;background-position:-71px 0;}
    .collections{height:25px;width:27px;background-position:-98px 0;}
    .p-fonts{height:27px;width:27px;background-position:-125px 0;}
    .p-fonts{height:27px;width:27px;background-position:-125px 0;}
    .writing{height:27px;width:28px;background-position:-152px 0;}
    .workbook{height:25px;width:28px;background-position:-180px 0;}
    .l-copybook{height:27px;width:28px;background-position:-208px 0;}
    .score{height:27px;width:28px;background-position:-236px 0;}
    .text p{width: 5rem;}
    .download{margin-top: 60px;}
    .download p{font-size: 24px;}
    h4{font-size: 18px;}
}

@media screen and (max-width: 436px){
    .phone{width: 190px; padding-left: 39px;}
}