.mb-hd-ico{ background:url('/tutorials/dest/images/index/hd_icoa.png') no-repeat; display: inline-block; width: 60px; height: 60px; vertical-align: middle;}
.logo{
	background: url('/tutorials/dest/images/index/lg.png') no-repeat;
	display: inline-block;
	width: 105px;
	height: 34px;
	vertical-align: middle;
	/* margin-top: -3px; */
	background-size: cover;
}
.wechat-layer-close i{background-image: url('/tutorials/dest/images/index/ml_cls.png');}
/* visual */
.visual .swiper-container{ width: 100%;}
.visual .swiper-slide{ /*height: 300px;*/height:auto;}
.slide-img{ border-radius: 0; width: 100%; margin: 0 auto; display:block;}
.pagination{ position: absolute; left:0; text-align: center; bottom: 10px; width: 100%; z-index: 10;}
.swiper-pagination-switch{
	border-radius: 5px;
	background: #999;
	box-shadow: 0px 1px 2px #555 inset;
	cursor: pointer;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 3px;
}
.swiper-active-switch{background:#fff;}
/* ico nav */
.ico-nav{ display: box; display: -webkit-box; display: flex; display: -webkit-flex;}
.ico-nav li{
	text-align:center;
	padding: 25px 0;
	box-flex: 1;
	-webkit-box-flex: 1;
	flex: 1;
	-webkit-flex: 1;
}
.ico-nav-item{
	border: 2px #aaa solid;
	display: block;
	width: 130px;
	height: 130px;
	border-radius: 100%;
	margin: 0 auto;
	padding-top: 20px;
	box-sizing: border-box;
}
.ico-nav-item, .mb-tw-link, .mb-cdf-link{
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
.ico-nav-item:hover{ background-color: #aaa; color: #fff;}
.ico-nav-1{ border-color: #ff9000;}.ico-nav-1:hover{ background-color: #ff9000;}
.ico-nav-2{ border-color: #af5da0;}.ico-nav-2:hover{ background-color: #af5da0;}
.ico-nav-3{ border-color: #eb6978;}.ico-nav-3:hover{ background-color: #eb6978;}
.ico-nav-4{ border-color: #eb6100;}.ico-nav-4:hover{ background-color: #eb6100;}
.ico-nav-5{ border-color: #009e96;}.ico-nav-5:hover{ background-color: #009e96;}
.ico-nav-6{ border-color: #645a50;}.ico-nav-6:hover{ background-color: #645a50;}
.ico-nav-item .mb-hd-ico{ display: block; margin-left: auto; margin-right: auto; margin-bottom: 4px;}
.mb-hd-zx{ background-position: 0 0;}.ico-nav-1:hover .mb-hd-zx{ background-position: 0 -62px;}
.mb-hd-tw{ background-position: -64px 0;}.ico-nav-2:hover .mb-hd-tw{ background-position: -64px -62px;}
.mb-hd-vd{ background-position: -126px 0;}.ico-nav-3:hover .mb-hd-vd{ background-position: -126px -62px;}
.mb-hd-db{ background-position: -189px 0;}.ico-nav-4:hover .mb-hd-db{ background-position: -189px -62px;}
.mb-hd-zc{ background-position: -252px 0;}.ico-nav-5:hover .mb-hd-zc{ background-position: -252px -62px;}
.mb-hd-gd{ background-position: -315px 0;}.ico-nav-6:hover .mb-hd-gd{ background-position: -315px -62px;}
/* section */
.section-main-tle{ font-size: 1.5em; margin: 20px 0 10px;}
.section-item-1 .section-main-tle{ color: #ff9000;}
.section-item-2 .section-main-tle{ color: #af5da0;}
.section-item-3 .section-main-tle{ color: #eb6978;}
.section-item-4 .section-main-tle{ color: #009e96;}
.section-main-tle .mb-hd-ico{
	-webkit-transform: scale(.35);
	-moz-transform: scale(.35);
	-o-transform: scale(.35);
	transform: scale(.35);
    margin: -17px -18px -16px -18px;
}
.mb-info-list li, .mb-tw-list li{ display: block; padding: 8px 0;}
.mb-first-info h5{ line-height: 1.5;}
.first-info-inner{ color: #aaa; height: 76px; overflow: hidden; line-height: 1.6; padding-left: 135px;}
.first-info-face{ border: 1px #efefef solid; box-shadow: 1px 1px 3px #ddd; width: 120px; height: 70px; left: 0; top: 1px;}
.mb-info-link{ display: block; width: 100%;}
.mb-tw-link{ background-color: #f0f0f0; width: 100%; height: 190px; padding: 10px 10px 10px 295px; box-sizing: border-box;}
.mb-tw-link:hover{ background-color: #fffaf4;}
.mb-tw-inner{ width: 100%; height: 150px; overflow: hidden;}
.mb-tw-tx{ white-space: normal; word-break: break-all; line-height: 1.7;}
.mb-tw-face{ display: block; width: 270px; height: 170px; left: 10px; top: 10px;}
.section-item-2 .mb-more-btn{ border-color: #af5da0; color: #af5da0;}
.section-item-2 .mb-more-btn:hover{ background-color: #af5da0; color: #fff;}
.section-item-3 .mb-more-btn{ border-color: #eb6978; color: #eb6978;}
.section-item-3 .mb-more-btn:hover{ background-color: #eb6978; color: #fff;}
.section-item-4 .mb-more-btn{ border-color: #009e96; color: #009e96;}
.section-item-4 .mb-more-btn:hover{ background-color: #009e96; color: #fff;}
/* video */
.video-con{ padding-bottom: 16px;}
.video-con .swiper-container{ height: 520px;}
.video-con .swiper-slide, .mb-video-item, .mb-video-face{ width: 275px;}
.video-con .swiper-slide{ padding-right: 20px; float: left;}.video-con .swiper-slide:last-child{ padding-right: 0;}
.mb-video-item{ display: block; height: 250px; overflow: hidden;}.mb-video-item:last-child{ margin-bottom: 0;}
.mb-video-face{ height: 185px;}
.mb-video-tx{ line-height: 1.4; margin-top: 5px;}

/* cdf */
.mb-cdf-link{ display: inline-block; width:49.25373%; margin-right: .785%;}.mb-cdf-link:last-child{ margin-right: 0;}
.mb-cdf-face{ display: block; width: 100%; height: auto; margin: 0 auto;}
.going-in {
    background: url('/cdf/images/index/go_in.png') no-repeat;
    border-top-left-radius: 3px;
    width: 74px;
    height: 74px;
    left: 0;
    top: 0;
    text-indent: -999px;
    overflow: hidden;
    z-index: 9;
}
/* contact */
.contact-wrap h5{
	border-bottom: 1px solid #d9d9d9;
    color: #aaa;
    padding-top: 30px;
    height: 30px;
    width: 100%;
    margin: 30px auto;
}
.contact-wrap p{
	display: inline-block;
    margin: 0 auto;
    width: auto;
    line-height: 60px;
    background: #fff;
    font-size: 1.375em;
    font-weight: normal;
    padding: 0 15px;
}
.contact-inner{ padding-bottom: 30px;}
.contact-inner a{
	display: inline-block;
    width: 60px;
    height: 60px;
    text-indent: -999px;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 30px;
    margin: 0 5px;
}
.contact-inner a:hover{ opacity: .8; filter: alpha(opacity=80);}
.qq-lg{ background: url('/tutorials/static/images/qq_lg.png') no-repeat;}
.weixin-lg{ background: url('/tutorials/static/images/weixin_lg.png') no-repeat;}
.weibo-lg{ background: url('/tutorials/static/images/weibo_lg.png') no-repeat;}

.friend-wrap{ background-color: #f5f5f5; padding: 10px 0;}
.friend-inner a{ display: inline-block; padding: 3px 0; white-space: normal;}
.friend-inner i{ font-style: normal; color: #aaa; margin: 0 2px; font-size: .75em;}
/* wechat layer */
.wechat-layer, .wechat-layer-inner, .wechat-layer-close{ position: fixed;}
.wechat-layer{ display: none; background: rgba(0,0,0,.8); width: 100%; height: 100%; left: 0; top: 0; z-index: 1001;}
.wechat-layer-inner{ background-color: #fff; border-radius: 10px; box-sizing: border-box; width: 202px; height: 300px; padding: 20px; top: 50%; left: 50%; margin-left: -101px; margin-top: -150px; z-index: 1002;}
.wechat-layer-tx{ font-size: .75em; line-height: 1.6;}
.wechat-layer-face{ display: block; margin: 15px 0 8px;}
.wechat-layer-close,.wechat-layer-close i{ display: block; width: 18px; height: 18px;}
.wechat-layer-close{ border: 2px #fff solid; border-radius: 100%; padding: 1px; right: 10px; top: 10px; z-index: 1003;}

@media screen and (max-width: 800px){
	.log-lnk{ height: 46px; padding: 0 10px;}
	.logo{ background-size: 93px 30px; width: 93px; height: 30px;}
	.video-con .swiper-container{ height: 470px;}
	.video-con .swiper-slide, .mb-video-item, .mb-video-face{ width: 250px;}
	.mb-video-item{ height: 225px;}
	.mb-video-face{ height: 168px;}
	.first-info-tx{ font-size: .875em;}
}
@media screen and (max-width: 660px){
	.ico-nav li{ padding: 18px 0;}
	.ico-nav-item{ width: 120px; height: 120px; padding-top: 10px;}
	.ico-nav-item .mb-hd-ico{ -webkit-transform: scale(.9); -moz-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); margin-bottom: 0;}
	.mb-tw-link{ height: 150px; padding-left: 220px;}
	.mb-tw-face{ width: 200px; height: 126px;}
	.mb-tw-inner{ height: 120px;}
	.mb-cdf-face{ width: 100%; height: auto;}
	.section-main-tle{ font-size: 1.125em;}
	.ft-fs-18{ font-size: 1em;}
	.footer{ font-size: .75em;}
	.mb-cdf-link{ display: block; width: 100%; margin-right: 0; margin-bottom: 18px;}
	.mb-cdf-link:last-child{ margin-bottom: 0;}
	.video-con .swiper-container{ height: 432px;}
	.video-con .swiper-slide, .mb-video-item, .mb-video-face{ width: 220px;}
	.mb-video-item{ height: 205px;}
	.mb-video-face{ height: 148px;}
	.first-info-tx{ font-size: .75em;}
}
@media screen and (max-width: 520px){
	.mb-tw-link{ height: 124px; padding-left: 180px;}
	.mb-tw-face{ width: 160px; height: 102px;}
	.mb-tw-inner{ height: 100px;}
	.mb-tw-tx{ font-size: .75em; line-height: 1.6; margin-top: -8px;}
	.ico-nav li{ padding: 10px 0;}
	.ico-nav-item{ width: 92px; height: 92px; padding-top: 0;}
	.ico-nav-item .mb-hd-ico{ -webkit-transform: scale(.6); -moz-transform: scale(.6); -o-transform: scale(.6); transform: scale(.6); margin-bottom: -9px; margin-top: -2px;}
	.section-main-tle{ font-size: 1em;}
	.ft-fs-18{ font-size: .875em;}.mb-first-info .ft-fs-18{ font-size: 1em;}
	.footer span{ display: block; margin: 5px 0;}
	.ico-nav-item, .friend-inner a{ font-size: .75em;}
	.video-con .swiper-container{ height: 360px;}
	.video-con .swiper-slide{ padding-right: 10px;}
	.video-con .swiper-slide, .mb-video-item, .mb-video-face{ width: 180px;}
	.mb-video-item{ height: 165px; font-size: .875em;}
	.mb-video-face{ height: 121px;}
}
@media screen and (max-width: 430px){
	.mb-tw-link{ height: 82px; padding-left: 110px;}
	.mb-tw-face{ width: 93px; height: 58px;}
	.mb-tw-inner{ height: 62px; margin-top: -3px;}
	.mb-tw-tx{ line-height: 1.72; height: 42px; overflow: hidden; margin-top: -4px;}
	.ico-nav-item{ width: 70px; height: 70px; padding-top: 0;}
	.ico-nav-item .mb-hd-ico{ -webkit-transform: scale(.4); -moz-transform: scale(.4); -o-transform: scale(.4); transform: scale(.4); margin-bottom: -16px; margin-top: -9px;}
	.video-con .swiper-container{ height: 294px;}
	.video-con .swiper-slide, .mb-video-item, .mb-video-face{ width: 138px;}
	.mb-video-item{ height: 135px; font-size: .75em;}
	.ft-fs-18{ font-size: .75em;}.mb-first-info .ft-fs-18{ font-size: 1em;}
	.mb-video-face{ height: 93px;}
}