@charset "utf-8";
/* CSS Document */
body {
	background: none repeat scroll 0 0 #FCFCFC;
	color: #000000;
	font-family: medium-content-sans-serif-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
	font-size: 14px;
	margin: 0 auto;
	padding: 0;
}
div,form,ul,ol,li,span,p {border: 0 none;margin: 0;padding: 0;}
img,a img {border: 0 none;margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6 {	font-size: 12px;font-weight: normal;margin: 0;padding: 0;}
ul,ol,li {	list-style: none outside none;}
table,td,input {font-size: 12px;padding: 0;}
a {color: #333333;	outline-style: none;text-decoration: none;}
a:hover {color: #AC061C;}
strong{font-weight: 600}

iframe{width: 100%;margin-top: 20px;margin-bottom: 20px;height: 447px;}

/***************************index.html**********************************/

.logo{width: 200px;height: 28px;float: left; margin-top: 25px;margin-left: 0px;}
.logo img{width: 100%;height: 100%;display: block;overflow: hidden;}
.top{overflow: hidden;background-color: #FFFFFF;box-shadow:1px 1px 1px #ccc;}
.top > div{width: 980px;margin: 0 auto; height: 72px;}
.navi{overflow: hidden;margin-top: 26px;margin-right: 0px; float: right;}
.navi li{display: block; float: left;overflow: hidden;font-size: 18px;color: #fff;background-color: #ffffff;}
.navi li a{line-height: 40px;height: 40px;padding: 0 20px 0 20px;display: block;font-weight: bold; color: #4b4b4b;background-color: #fff;display: block;font-size: 15px;cursor: pointer;}
.navi li a:hover{color: #AC061C}
.navi li .on{color: #AC061C}

.container{width: 980px;margin-left: auto;margin-right: auto;overflow: hidden;}
.article_container{width: 720px;}
.book_list {width: 100%;overflow: hidden;}
.book_list > li{width: 313px;background-color: #FFF;border-radius: 4px;box-shadow:1px 1px 3px #ccc;margin: 24px 0px 3px 0px;overflow: hidden;float: left;}
.book_list > li a{display: block;max-width: 260px;height: 36px;line-height: 36px;overflow: hidden;color: #666}
.book_list > li .more{float: right;font-size: 12px;}
.book_list > li > div {display: block;width: 100%;height: 150px;}
.book_list > li > div img{display: block;width: 100%;height: 100%;cursor: pointer;}
.book_list > li > div a{display: block;padding: 14px 18px;position: relative;top: -54px;color: #FFF;font-weight: bold;}
.book_list > li a:hover{color: #AC061C}
.book_list > li > div a:hover{color: #FFFFFF}
.book_list > li > h1{padding: 18px 18px;font-size: 16px;cursor: pointer;}
.book_list > li > ul{padding: 14px 18px 0px 18px;}

.book_list .li2{margin-left:  20px;margin-right: 20px}
.book_list .li5{margin-left:  20px;margin-right: 20px}
.book_list .li8{margin-left:  20px;margin-right: 20px}

.footer{width: 100%;margin-top: 56px;padding-top: 1px;}
.footer div{max-width: 1000px;height: 72px;line-height: 80px; margin: 0 auto; border-top: 1px solid #f2f2f2;text-align: center;color: #999999;font-size: 12px;}
.all_links{width: 0px;height: 0px;overflow: hidden;}
.empty_content{width: 100%;height: 300px;line-height: 300px;font-size: 32px;color: #BBB;padding-left: 180px;display: none;}




/*PAD*/
.pad_top{width: 100%; overflow: hidden;background-color: #FFFFFF;box-shadow:1px 1px 1px #ccc;}
.pad_top > div{overflow: hidden; width: 100%;height: 72px;}
.pad_top .logo{margin-left: 20px;margin-top: 26px;}
.pad_top .navi{margin-top: 22px;}

.pad_container{width: 100%;margin-left: 0px;}
.pad_container .book_list{margin-top: 12px;}
.pad_container .book_list > li{width: 240px;margin-top: 12px;}
.pad_container .book_list > li > div {display: block;width: 100%;height: 120px;}
.pad_container .book_list > li > div img{display: block;width: 100%;height: 100%;}
.pad_container .book_list > li > div a{display: block;padding: 14px 10px;position: relative;top: -54px;color: #FFF;font-weight: bold;}

.pad_container .book_list .li1{margin-left:  12px;}
.pad_container .book_list .li2{margin-left:  12px;margin-right: 12px}
.pad_container .book_list .li4{margin-left:  12px;}
.pad_container .book_list .li5{margin-left:  12px;margin-right: 12px}
.pad_container .book_list .li7{margin-left:  12px;}
.pad_container .book_list .li8{margin-left:  12px;margin-right: 12px}
.pad_container .book_list > li > h1{padding: 18px 12px;font-size: 16px;}
.pad_container .book_list > li > ul{padding: 14px 12px 12px 12px;font-size: 15px;}
.pad_container .book_list .footer div{max-width: 100%}

/*Mobile*/
.mob_top{width: 100%; overflow: hidden;background-color: #FFFFFF;box-shadow:1px 1px 1px #ccc;}
.mob_top > div{overflow: hidden; width: 100%;height: auto;}
.mob_top .logo{margin: 16px 12px;float: none;width: 150px;height: 20px;}

.mob_top .navi{float: none;width: 100%;border-top: 1px solid #e9e9e9;margin-top: 0px;}
.mob_top .navi li{float: left;}
.mob_top .navi li a{padding: 0 12px;line-height: 44px;height: 44px;}


.mob_container{width: 100%;margin-left: 0px;}
.mob_container .book_list > li{width: 200px;margin-top: 12px;}
.mob_container .book_list > li > div {display: block;width: 100%;height: 100px;}
.mob_container .book_list > li > div img{display: block;width: 100%;height: 100%;}
.mob_container .book_list > li > div a{display: block;padding: 12px 10px;position: relative;top: -46px;color: #FFF;font-weight: bold;}

.mob_container .book_list .li1{margin-left:  12px;}
.mob_container .book_list .li2{margin-left:  12px;margin-right: 0px}
.mob_container .book_list .li3{margin-left:  12px;margin-right: 0px}
.mob_container .book_list .li4{margin-left:  12px;margin-right: 0px}
.mob_container .book_list .li5{margin-left:  12px;margin-right: 0px}
.mob_container .book_list .li6{margin-left:  12px;margin-right: 0px}
.mob_container .book_list .li7{margin-left:  12px;margin-right: 0px}
.mob_container .book_list .li8{margin-left:  12px;margin-right: 0px}

.mob_container .book_list > li > h1{padding: 14px 12px;font-size: 16px;}
.mob_container .book_list > li > ul{padding: 14px 12px 12px 12px;font-size: 15px;}
.mob_container .book_list > li a{height: 30px;line-height: 30px;}

.mob_container .book_list .footer div{max-width: 100%}

/***************************list.html**********************************/

.list_topic {font-size: 40px;margin: 48px 0 24px;}

.book_navi{margin-bottom: 30px;}
.book_navi li {display: inline-block;margin-right: 28px;font-size: 16px;border-bottom: 3px solid #FCFCFC;cursor: pointer;padding: 8px 8px;font-weight: bold;white-space: normal;overflow: hidden;}
.book_navi .on{color: #AC061C;border-bottom: 3px solid #AC061C;}


.chapter_list{min-height: 300px}
.chapter_list li{list-style: none;font-size: 14px;color: #222222;overflow: hidden;background-color: #FFF;box-shadow:1px 1px 3px #eee;margin-bottom: 5px;padding: 0 20px;}
.chapter_list li span{line-height: 48px;height: 48px;color: #777;display: block;float: right;font-size: 13px;}
.chapter_list li a{line-height: 48px;height: 48px;color: #222222;display: block;float: left;}
.chapter_list li a:hover{color: #AC061C}
.chapter_list li .preparing{line-height: 48px;height: 48px;display: block; float: left;color: #CCC;}
.chapter_list li .preparing:hover{color: #CCC}
.chapter_list li .preparing_date{color: #CCC}

/*PAD*/

.pad_container .list_topic{font-size: 36px;margin:36px 20px 16px;}
.pad_container .book_navi li{margin: 0 20px;}
.pad_container .chapter_list{margin: 0 20px}

/*mobile*/

.mob_container .list_topic{font-size: 32px;margin: 32px 12px 20px;}
.mob_container .book_navi li{margin: 0 12px;}
.mob_container .chapter_list{margin: 0 12px}

.mob_chapter_list{margin: 16px 16px;}
.mob_chapter_list li a{font-size: 17px; overflow: hidden;}
.mob_chapter_list li .preparing{font-size: 17px;}


/***************************article.html**********************************/

.article_body{background-color: #FFF}

.to_home{height: 40px;line-height: 40px;font-size: 14px;color: #aaa;padding-left: 24px;background-color: #f2f2f2;}
.to_home a{color:#aaa;}
.to_home a:hover{color:#AC061C;}


.wechat_to_home{height: 40px;line-height: 40px;font-size: 14px;padding-left: 12px;background-color: #FFF; border-bottom: 1px solid #e9e9e9;}
.wechat_to_home a{color:#888;}
.wechat_to_home a:hover{color:#AC061C;}

.article_navi{display: block;float: right;font-size: 12px;margin-right: 14px;}
.article_navi a{display: inline-block;padding: 0 10px}
.article_title{font-size: 40px;font-weight: bold;color:#AC061C; margin-top: 68px;}
.article_from{font-size: 14px;color:#aaa; margin-top: 20px;}
.article_from a{color:#aaa;}
.article_from a:hover{color:#AC061C;}
.article_from span{display: inline-block;margin-left: 28px;}
.article{font-size: 18px;color:#030303; margin-top: 32px;line-height: 36px;}
.article br{line-height: 16px;}

.article_translation{font-size: 14px;color:#030303; margin-top: 36px;line-height: 28px;}
.article_img{width: 300px;height: 300px;visibility: hidden;overflow: hidden; display: block;position: absolute;left: 0px;margin-top: 72px;z-index: -1;opacity:0.2;filter:alpha(opacity=20);}

.show_phonetics {cursor: pointer; overflow: hidden; margin-top: 24px;}
.show_phonetics img{display: block;float: left;padding: 3px;}
.show_phonetics span{display: block;float: left;height: 31px;line-height: 31px;color: #444;}

.phonetics_box {margin-top: 36px; overflow: hidden;text-align: center;display: none;}
.phonetics_box div {overflow: hidden; margin-bottom: 24px;}
.phonetics_box div > span{float: left;margin-right: 4px;font-size: 20px; color:#030303;}
.phonetics_box div > span > span{display: block;padding-bottom: 16px; font-size: 16px;color: #999999;height: 20px;line-height: 20px;font-weight: normal;}


.text1{background-color: #FFFFD9;border-radius: 50px;display: inline;padding: 2px 8px;line-height: 36px; height: 24px;}
.text2{background-color: #E5F6F9;border-radius: 50px;display: inline;padding: 2px 8px;line-height: 36px; height: 24px;}
.text3{background-color: #FFEAE6;border-radius: 50px;display: inline;padding: 2px 8px;line-height: 36px; height: 24px;}
.text4{background-color: #DDFAE7;border-radius: 50px;display: inline;padding: 2px 8px;line-height: 36px; height: 24px;} 
.text9{background-color: #EEE;border-radius: 50px;display: inline;padding: 2px 8px;line-height: 36px; height: 24px;} 

.article u{cursor: pointer;}
.article strong{cursor: pointer;}
.sentence_translation{font-size: 10px;}

.read_mode {overflow: hidden;}
.read_mode li{display: block;float: left;cursor: pointer; background-color: #eee;color:#888; margin-right: 24px; margin-top: 24px; padding: 8px 18px;border-radius: 100px;}
.read_mode .on{background-color: #AC061C;color: #fff;}

.tutoria_recommendation {overflow: hidden;margin-top: 40px;}
.tutoria_recommendation a{display: block;float: left;cursor: pointer; background-color: #55c1e6; color:#FFF; margin-right: 24px;  padding: 8px 18px;border-radius: 4px;}
.tutoria_recommendation .a2{background-color: #4ad2af;}

.pad_container .article_title{margin: 24px 20px 0;font-size: 32px;}
.pad_container .article_from{margin-left: 20px;margin-right: 20px;}
.pad_container .article{line-height: 44px;margin-left: 20px;margin-right:20px;}
.pad_container .show_phonetics{margin-left: 20px;margin-right:20px;}
.pad_container .read_mode{margin-left: 20px;margin-right:20px;}
.pad_container .tutoria_recommendation{margin-left: 20px;margin-right:20px;}


.pad_container .text1{line-height: 44px;}
.pad_container .text2{line-height: 44px;}
.pad_container .text3{line-height: 44px;}
.pad_container .text4{line-height: 44px;}

.mob_container .article_title{margin: 24px 12px 0;font-size: 32px;}
.mob_container .article_from{margin-left: 12px;margin-right: 12px;}
.mob_container .article{line-height: 44px;margin-left: 12px;margin-right:12px;}
.mob_container .show_phonetics{margin-left: 12px;margin-right:12px;}
.mob_container .read_mode{margin-left: 12px;margin-right:12px;}
.mob_container .tutoria_recommendation{margin-left: 12px;margin-right:12px;}

.mob_container .text1{line-height: 44px;}
.mob_container .text2{line-height: 44px;}
.mob_container .text3{line-height: 44px;}
.mob_container .text4{line-height: 44px;}

.mob_container .article .wadge {display: inline-block;width: 1px;}

#title_tip{font-size: 12px; color: #fff; position: absolute;left: 0; top: 0;background-color: #AC061C;border: solid 0px rgb(218, 218, 218);border-radius: 100px;padding: 3px 12px;}
#title_tip_right{font-size: 12px; color: #999; position: absolute;right: 24px; top: 0;background-color: aqua;}
#title_tip span{display: inline-block;}

.phonetic_box span{font-size: 13px; color:#777; position: absolute;left: 0; top: 0;}

/***************************about.html**********************************/

.about{background-color: #FFF;margin: 24px 5px 5px;padding: 24px;box-shadow:1px 1px 3px #ccc;line-height: 24px;}
.about_title{font-size: 40px;}
.about_slogan{background-color: #eee; border-radius: 10px;padding: 12px;overflow: hidden;}
.about_slogan div{display: block;float: right;margin-top: 36px;}

.pad_container .about {margin-left: 20px;margin-right: 20px;}
.pad_container .about_slogan div {margin-top: 24px;}

.mob_container .about {margin-left: 10px;margin-right: 10px;}
.mob_container .about_slogan div {margin-top: 24px;}


#viewport {
    width: 100%;
    overflow: hidden;
}

#viewport, #scrollpanel {
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;

    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    white-space: nowrap;
}


ul:after {content: ".";display: block;float:left;clear: both;visibility: hidden;line-height: 0;height: 0;}