@charset "utf-8";
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img { width:100%; }
ul 		 { -webkit-padding-start: 0px; }
div 	 { transition: 0.4s; }
body{
		background-color: #02328D;
		color:#000;
		font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
}

/*------ 兼容性提示 ------*/
.cp-tips{
	width:100%;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#960;
	background-color:#ffefc6;
}
.cp-tips-close{
	display:block;
	float:right;
	width:22px;
	height:22px;
	margin:9px;
	background:url("http://source.tutorabc.com.cn/Ext/images/website/share/ie-close.png") no-repeat;
	cursor:pointer;
}
.cp-tips a{
	color:#f75c61;
	text-decoration:underline;
}



.all{
	width: 100%;
	position: relative;
	margin: 0 auto;
	overflow-x:hidden;
}

/*new header*/
.mobile-tel, .mobile-footer, .mobile-nav, .header button, .topic-intro-mobile{display:none;}

/*.wrapper, .header{
	float:left;
	width:100%;
}
*/

.inside{width:1000px;margin: 0 auto;}
.header{
	width: 100%;
	height: 60px;
	background-color: #fff;
	*background-color: #f7f7f7;
}
.logo{
	float: left;
	margin-top: 16px;
	float: none \9;
}
.logo img{
	float: left;
	width:150px;
	margin-top: 16px \9;
}

.logo p{
	float: left;
	color: #04328d;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 2px;
    margin-top: 18px \9;
}



.logo p{
	float: left;
	color: #04328d;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 2px;
    margin-top: 18px \9;
}

.logo-info{
	float: left;
	padding-left: 15px;
	padding-top: 20px;
	font-size: 18px;
}
.logo-info img{width:192px;}
.header-tel{
	color: #888;
	float: right;
	margin-top: 20px;
	*margin-top: -20px;

	*float: none;
}

.header-tel span{
	display: inline-block;
	float: right;
	width: 100%;
	text-align: right;
	font-size: 16px;
}


.header button{
	display:none;
	float:right;
	width:100px;
	margin:12px 0 0 20px;
	line-height:35px;
	text-align:center;
	border:0;
	color:#fff;
	font-size:14px;
	background-color: #f74c4c;
	border-radius:2px;
	cursor:pointer;
}
.header button:hover{ background-color:#e60012; }


/*--- KV ---*/
.main_top{
	width: 100%;
	position: relative;
	height: 500px;
	z-index: 1;
	background: url(../images/bg_xl.jpg) center top no-repeat #fff;
	background-image: -webkit-image-set(url(../images/bg_xl.jpg) 1x,
	           url(../images/bg_xl@2x.jpg) 2x);
	background-image: -moz-image-set(url(../images/bg_xl.jpg) 1x,
	           url(../images/bg_xl@2x.jpg) 2x);
	background-image: -o-image-set(url(../images/bg_xl.jpg) 1x,
	           url(../images/bg_xl@2x.jpg) 2x);
	background-image: -ms-image-set(url(../images/bg_xl.jpg) 1x,
	           url(../images/bg_xl@2x.jpg) 2x);
}
.video-play{
	width: 247px;
	position: absolute;
	left: 30%;
	top:72%;
}
.video-play a{	opacity: 1;}
.video-play a:hover{	opacity: 0.7;}

/*--- detail ---*/

.story_box{
	width: 700px;
	margin: 0 auto;
}

.story{
	margin: 0 0 30px 0;
	color: #464646;
}


.story_title {
	overflow: hidden;
	border-top: 2px solid #b47954; 
}
.story h1{
	
	font-weight: bold;
	font-size: 22px;
	color: #363636;
	margin-top: 5px;
}

.story .icon{
	max-width: 34px;
	vertical-align: top;
	float: left;
}

.story p{
	clear: both;

	font-size: 16px;
	line-height: 1.6;
	color: #363636;
	width: 90%; 
	margin: 10px auto;

	text-align: justify;
	　text-justify: inter-ideograph;
	　-ms-text-justify: inter-ideograph; /*IE9*/
	　-moz-text-align-last:justify; /*Firefox*/
	　-webkit-text-align-last:justify; /*Chrome*/
}


/*--- detail ---*/
.detail{
	width: 100%;
	position: relative;
	background:#FFF;
	padding: 20px 0;
    float: left;
	background: url(../images/detail_bg.png) center top repeat #fff;
	background-image: -webkit-image-set(url(../images/detail_bg.png) 1x,
	           url(../images/detail_bg@2x.png) 2x);
	background-image: -moz-image-set(url(../images/detail_bg.png) 1x,
	           url(../images/detail_bg@2x.png) 2x);
	background-image: -o-image-set(url(../images/detail_bg.png) 1x,
	           url(../images/detail_bg@2x.png) 2x);
	background-image: -ms-image-set(url(../images/detail_bg.png) 1x,
	           url(../images/detail_bg@2x.png) 2x);
}
.feature_title{
	width:100%;
	padding:20px 0;
	clear:both;
	text-align: center;
}
.ft_pic{
	margin:20px auto;
	width:391px;
	max-width: 90%;
	height:auto;

	font-size: 36px;
	color: #256cba;
	font-weight: bold;
}
.detail_text{
	width: 480px;
	margin: 0 auto;
	text-align: center;
	font-size: 17px;
	color: #000;
	font-weight: bold;
	line-height: 1.6em;
	font-family:"微軟正黑體",Arial;
}
.content_main{
	background-color:#FFF;
	position: relative;
	margin: 0 auto;
	width:100%;
	padding:0;
}
.content_box{
	position: relative;
	width: 90%;
	margin: 20px auto;
	clear: both;
}
.box_align{
	width: 900px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	padding:0 0 10px 0;
	}
.box_left{
	height: auto;
	margin: 0 auto 20px;
	float: left;
	max-width: 200px;
	width: 30%;
}
.box_left:hover {
	-webkit-animation: tada 1s infinite linear;
	animation: tada 1s infinite linear;
}
.box_right{
	float: right;
	width: 70%;
}

.box_right h3{
	font-weight: bold;
	font-size: 22px;
	color: #9a7345;
	padding: 10px;
	margin-top: 20px;
}
.text_title{
	width: 100%;
	font-size: 22px;
	font-weight: bold;
	text-align:center;
	letter-spacing: 1px;
}
.text_con{
	width: 95%;
	font-size: 16px;
	color: #333;
	font-weight: normal;
	text-align:justify;
	line-height:1.5em;
	padding: 10px;
	border-top: 1px solid #a37e52;  
}
.t_t{
	width: 100%;
	font-size: 16px;
	text-align:center;
	color: #fff;
	padding: 8px 0;
	font-weight: bold;
}

/*--- Footer ---*/
.footer{
	width: 100%;
	height: 80px;
	background-color: #02328d;
	text-align: center;
	overflow: hidden;
	float:left;
}
.footer_main{
	width: 1024px;
	position: relative;
	margin: 0 auto;
}
.footer_align{
	width: 800px;
	position: relative;
	text-align:center;
	margin:10px auto;
}
.footer_share{
	position: relative;
	float: left;
	margin-top: 6px;
	margin-left:2%;
}
.share_icon{
	width: 50px;
	height: 50px;
	margin: 0;
	position: relative;
	float: left;
}
.share_icon:hover{
	_filter:alpha(opacity=80);/*IE6*/
　filter:alpha(opacity=80);/*IE7*/
　-moz-opacity: 0.7;/*fireFox*/
	opacity: 0.7;
}
.footer_info{
	position: relative;
	float: right;
	color: #fff;
	font-size: 20px;
	margin-top: 22px;
	margin-right:7%;
}
.info_logo{
	position: relative;
	float: left;
	margin-right: 25px;
	margin-top:0px;
	width: 180px;
}
.info_logo img {
	width: 100%;
}
.info_tel{
	position: relative;
	float: left;
}
.info_tel a{
	color: #FFF;
	text-decoration: none;
}
.share_form{
	margin: 0 auto;
	width: 295px;
	position: relative;
	margin-bottom: 20px;
}

a[href^=tel]{
    color:inherit;
    text-decoration:none;
}
/*--- Footer //end ---*/

/*--- 共用 ---*/
.imhere		{ width:100%; clear:both; float:none; }
.ml_none	{ margin-left: 0; }
.fleft		{ float: left; clear: none; }


@media only screen and (max-width: 1300px) {

	.video-play{
		position: absolute;
		left: 20%;
		top:73%;
	}


}

@media only screen and (max-width: 980px) {
	.main_top{
		height: 361px;
		background: url(../images/bg_l.jpg) center top no-repeat;
		background-image: -webkit-image-set(url(../images/bg_l.jpg) 1x,
		           url(../images/bg_l@2x.jpg) 2x);
		background-image: -moz-image-set(url(../images/bg_l.jpg) 1x,
		           url(../images/bg_l@2x.jpg) 2x);
		background-image: -o-image-set(url(../images/bg_l.jpg) 1x,
		           url(../images/bg_l@2x.jpg) 2x);
		background-image: -ms-image-set(url(../images/bg_l.jpg) 1x,
		           url(../images/bg_l@2x.jpg) 2x);
	}
	.content_box{margin-bottom:20px;}
	.box_left { float: none; margin: 0 auto;}
	.box_right{ float: none; width: 100%;}
	.text_con {width: 80%; margin: 0 auto; }
	.box_right h3{ text-align: center; margin: 0;}

	.video-play{
		width: 200px;
		position: absolute;
		left: 25%;
		top:73%;
	}
}
@media only screen and (max-width: 900px) {
	.footer_main   { width: 95%; }
	.footer_align  { width: 95%; }
}
@media only screen and (max-width: 880px) {
	.info_logo     { margin-right: 5px; }
}
@media only screen and (max-width: 850px) {
	.fleft 		   { float: none; clear: both; }
	.info_logo 	   { display:none; }
	.footer_align  { width: 80%; }
}
@media only screen and (max-width: 800px) {
	.footer_align  { width:95%;}
	.box_align 	   { width:98%;}
}
@media only screen and (max-width: 768px) {
	.detail_text   { width: 90%; }
	.footer_main   { width: 95%; }
	.footer_info   { margin-right:0; }
	.story_box{width: 95%;}

}
@media only screen and (max-width: 700px) {
	.detail 	   { padding:10px 0 40px 0; float: left; }
	.detail_text   { width: 95%; }

}
@media only screen and (max-width: 660px) {
	.main_top{
		height: 260px;
		background: url(../images/bg_m.jpg) center top no-repeat;
		background-image: -webkit-image-set(url(../images/bg_m.jpg) 1x,
		           url(../images/bg_m@2x.jpg) 2x);
		background-image: -moz-image-set(url(../images/bg_m.jpg) 1x,
		           url(../images/bg_m@2x.jpg) 2x);
		background-image: -o-image-set(url(../images/bg_m.jpg) 1x,
		           url(../images/bg_m@2x.jpg) 2x);
		background-image: -ms-image-set(url(../images/bg_m.jpg) 1x,
		           url(../images/bg_m@2x.jpg) 2x);
	}

	.video-play{
		width: 150px;
		position: absolute;
		left: 25%;
		top:72%;
	}
}

@media only screen and (max-width: 600px) {
	.footer_main   { width: 100%; }
	.share_icon    { float: left; }
	.footer_info   { font-size: 18px; }
	.feature_title { width:100%; padding:0; margin-top:10px; clear:both; text-align: center; }
	.ft_pic		   { height:auto; font-size: 30px;}
}

@media only screen and (max-width: 568px) {
	.box_right 	   { width:100%; }
	/*.text_con	   { width: 100%; }*/
	.detail_text   { width: 95%; }
	.box_right h3{ font-size: 20px;}
	.box_right h3 span{ display: block;}
	.box_left{ width: 50%;}
	.private 	   { font-size: 16px; }
	.info_logo	   { display: none; }
	.footer_align  { width: 95%; }
	.footer		   { height:110px;}
	.footer_align  { width: 310px; }
	.footer_main   { width: 310px; text-align: center; }
	.footer_share  { position: relative; float: none; width: 200px; text-align: center; margin:6px auto; }
	.footer_info   { float: none; margin: 8px auto 0 auto; width: 96%; padding-top: 0px; text-align:center; }
	.info_tel      { float: none; }
	.story h1 {font-size: 20px;}

}
@media only screen and (max-width: 520px) {
	.main_top{
		height: 300px;
		background: url(../images/bg_s.jpg) center top no-repeat;
		background-image: -webkit-image-set(url(../images/bg_s.jpg) 1x,
		           url(../images/bg_s@2x.jpg) 2x);
		background-image: -moz-image-set(url(../images/bg_s.jpg) 1x,
		           url(../images/bg_s@2x.jpg) 2x);
		background-image: -o-image-set(url(../images/bg_s.jpg) 1x,
		           url(../images/bg_s@2x.jpg) 2x);
		background-image: -ms-image-set(url(../images/bg_s.jpg) 1x,
		           url(../images/bg_s@2x.jpg) 2x);
	}
	.content_box   { float:left; width: 100%; margin:16px auto;}
	.video-wrap p {
		font-size: 16px;
	}
	.gift{
		width: 90%;
	}

	.video-play{
		width: 150px;
		position: absolute;
		left: 18%;
		top:70%;
	}
}



/*new header*/


@media all and (max-width:1000px){
/* common */
.inside{width: 100%;}
.header{width: 96%; padding-left:2%;padding-right:2%;}
}

@media all and (max-width:790px){
	.mobile-banner{
	position:relative;
	display:block;
	width:100%;
	height:350px;
	padding:0;
	background:url("http://source.tutorabc.com.cn/ext/images/website/abc/linkage_page/threeBody/banner.jpg") no-repeat 33% center;
	background-size:cover;
}
}


@media all and (max-width:610px){

/*header*/
.header{ /*height:auto*/; padding: 0; width: 100%;}
.header-tel{display:none;}
.logo{ margin-top:16px;}
.logo img{margin-left:5px;}
.logo-info{
	padding-top: 11px;
	line-height:normal;
}
.logo-info img{width:120px;}
.mobile-tel{
	display:block;
	float:right;
	margin:5px;
}
.mobile-tel img{width:35px; margin-top:5px;}

/*banner*/
.mobile-banner{
	height:300px;
	background-position:38% center;
}
}


@media all and (max-width:380px){

/*header*/
.logo{/*margin-top: 6px;*/}
.logo img{width:150px;}
.logo-info{ font-size: 16px;padding-top:12px;}

/*banner*/
.mobile-banner{height: 270px; background-position:38% center;}
.banner .topic h5{font-size: 18px;}

}

@media all and (max-width:330px){

/*header*/
.logo{ /*margin-top:6px;*/}
.logo-info{padding-top: 11px;}

/*banner*/
.mobile-banner{height: 210px; background-position:38% center;}
.banner .topic{top: 70px;}
.banner .topic img{width:80%;}
.banner .topic h5{font-size:15px;}
.banner .topic h5 strong{font-size:22px;}
}