@media screen and (max-width: 768px) {
.w1200{ width: 90%; }
.about{ padding-top: 20px;}
.about h2 img{ width: 50%; }
.about h3{ font-size: 16px; margin-top: 12px;}
.about-con{ padding-top:20px;}
.about-fl{ width: 100%; float: none;}
.about-fl h4{ font-size: 18px;}
.hr{ width: 100%; margin-top: 5px; margin-bottom: 5px;}
.about-fl span{ font-size: 14px; margin-bottom: 20px;}
.about-fl a{ margin-top: 20px;}
.about-fr{ float: none; width: 100%; margin-left: 0; margin-top:20px;}
.about-fr img:nth-child(2){ margin-left: 0; width: 100%; height: auto;}

#pic{display: none;}
.course{ margin-top: 40px; height: auto; background: none;}
.course-con{ padding-top: 0px;}
.course-con h2 img{ width: 50%;}
.course-con h3{ font-size: 16px; margin-top: 12px;}
.course-con ul li{ float: none; width: 100%; margin-top: 20px; margin-left: 0; margin-bottom: 30px;}
.course-con ul li a{ width: 100%; height: auto;}
.course-con ul li a img{ width: 100%; height: auto;}
.course-con ul li p{ padding-top: 12px;}
.course-con ul li:last-child{margin-bottom: 0px;}
.case{ padding-top: 40px;}
.case h2 img{ width: 50%; }
.case h3{ font-size: 16px; margin-top: 12px;}
.case ul li{ float: none; width: 100%; margin-top: 20px;}
.case ul li img{ width: 100%; height: auto;}
.news{ padding-top: 40px;}
.news h2 img{ width: 50%; }
.news h3{ font-size: 16px; margin-top: 12px; margin-bottom: 20px;}
.video{ float: none; width: 100%; height: auto;}
.video img{ width: 100%; height: auto;}
.news-fr{ width: 100%; float: none; margin-top: 20px;}
.news-txt{ width: 78%;}
.news-txt h4{ padding:0 0 8px 0; font-size: 16px;}
footer{ background: url("../images/foot-bg.jpg"); height: 420px;}
.foot{ padding-top:12px;}
.min-nav{ display: none;}
.copy{ float: none; width: 100%; border-right: 0; padding-right: 0;}
.copy p{ line-height: 20px;}
.wechat0{ float: none; width: 100%; margin-top: 20px; padding-left: 12%; margin-left: 0;}
.about ul{ padding-top: 20px; width: 100%;}
.about ul li{ float: none; width: 53%; margin:0 auto 20px auto;}
.about ul li:last-child{ margin-right:auto;}
.about p img{ width: 100%; height: auto;}
.news-con{ margin-top: 20px;}
.news-con ul li{ height: auto;}
.news-img{ float: none; width: 100%; height: auto;}
.news-img img{ width: 100%; height: auto;}
.news-text{ float: none; width: 100%;}
.news_show{ padding-top: 20px;}
.news_show h2{ font-size: 18px;}
.news_show h3{ font-size: 12px;}
.cases_show{ padding-top: 20px;}
.cases_show h2{ font-size: 18px;}

.charm{ padding-top: 20px;}
.charm h2 img{ width: 50%; }
.charm h3{ font-size: 16px; margin-top: 12px;}
.charm ul{ padding-top: 20px; width: 100%;}
.charm ul li{ float: none; width: 53%; margin:0 auto 20px auto;}
.charm ul li:last-child{ margin-right:auto;}
.charm-list{ padding-top: 20px;}
.charm-list ul li{ float: none; width: 100%;}
.charm-con{ padding-top: 20px;}
.charm-con p{ font-size: 14px;}
.charm-con  img{ width: 100%; height: auto;}
.case-list{ padding-top: 20px;}
.case-list h2 img{ width: 50%; }
.case-list h3{ font-size: 16px; margin-top: 12px;}
.case-list ul{ padding-top: 30px;}
.case-list ul li{ float: none; width: 100%; margin-right: 0;}
.case-list ul li a{ width: 100%; height: auto;}
.case-list ul li img{ width: 100%; height: auto;}
.news_show-con p{ font-size: 14px;}
.pay h2 img{ width: 50%; }
.pay h3{ font-size: 16px; margin-top: 12px;}
.pay h4{ margin-top: 20px;}
.pay p{ margin-bottom: 30px;}
.tab{ width: 100%;}
.contact{ padding-top: 20px;}
.contact h2 img{ width: 50%; }
.contact h3{ font-size: 16px; margin-top: 12px;}
.contact-con{ padding-top: 20px;}
.contact-fl{ width: 100%; float: none;}
.contact-fr{ width: 100%; float: none;}
#dituContent{ width: 100%; }
header{ height: 60px;}
.logo{ width: 30%;}
.logo img{ width: 100%; height: auto;}
.menu{ display: block; position: absolute; top:20px; right: 3%;}
.nav{ display: none; width: 100%; float: none; position: absolute; top:60px; left: 0; background: rgba(0,0,0,0.5); z-index: 9999999; padding-bottom: 20px;}
.nav ul li{ float: none; width: 40%; margin:0 auto;}
.nav ul li:last-child{ margin-right: auto;}

}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.w1200{ width: 90%; }
.about{ padding-top: 20px;}
.about h2 img{ width: 50%; }
.about h3{ font-size: 16px; margin-top: 12px;}
.about-con{ padding-top:20px;}
.about-fl{ width: 100%; float: none;}
.about-fl h4{ font-size: 18px;}
.hr{ width: 100%; margin-top: 5px; margin-bottom: 5px;}
.about-fl span{ font-size: 14px; margin-bottom: 20px;}
.about-fl a{ margin-top: 20px;}
.about-fr{ float: none; width: 100%; margin-left: 0; margin-top:20px;}
.about-fr img:nth-child(2){ margin-left: 0; width: 100%; height: auto;}

#pic{display: none;}
.course{ margin-top: 40px; height: auto; background: none;}
.course-con{ padding-top: 0px;}
.course-con h2 img{ width: 50%;}
.course-con h3{ font-size: 16px; margin-top: 12px;}
.course-con ul li{ float: none; width: 100%; margin-top: 20px; margin-left: 0; margin-bottom: 30px;}
.course-con ul li a{ width: 100%; height: auto;}
.course-con ul li a img{ width: 100%; height: auto;}
.course-con ul li p{ padding-top: 12px;}
.course-con ul li:last-child{margin-bottom: 0px;}
.case{ padding-top: 40px;}
.case h2 img{ width: 50%; }
.case h3{ font-size: 16px; margin-top: 12px;}
.case ul li{ float: none; width: 100%; margin-top: 20px;}
.case ul li img{ width: 100%; height: auto;}
.news{ padding-top: 40px;}
.news h2 img{ width: 50%; }
.news h3{ font-size: 16px; margin-top: 12px; margin-bottom: 20px;}
.video{ float: none; width: 100%; height: auto;}
.video img{ width: 100%; height: auto;}
.news-fr{ width: 100%; float: none; margin-top: 20px;}
.news-txt{ width: 78%;}
.news-txt h4{ padding:0 0 8px 0; font-size: 16px;}
footer{ background: url("../images/foot-bg.jpg"); height: 420px;}
.foot{ padding-top:12px;}
.min-nav{ display: none;}
.copy{ float: none; width: 100%; border-right: 0; padding-right: 0;}
.copy p{ line-height: 20px;}
.wechat0{ float: none; width: 100%; margin-top: 20px; padding-left: 12%; margin-left: 0;}
.about ul{ padding-top: 20px; width: 100%;}
.about ul li{ float: none; width: 19%; margin:0 auto 20px auto;}
.about ul li:last-child{ margin-right:auto;}
.about p img{ width: 100%; height: auto;}
.news-con{ margin-top: 20px;}
.news-con ul li{ height: auto;}
.news-img{ float: none; width: 100%; height: auto;}
.news-img img{ width: 100%; height: auto;}
.news-text{ float: none; width: 100%;}
.news_show{ padding-top: 20px;}
.news_show h2{ font-size: 18px;}
.news_show h3{ font-size: 12px;}
.cases_show{ padding-top: 20px;}
.cases_show h2{ font-size: 18px;}

.charm{ padding-top: 20px;}
.charm h2 img{ width: 50%; }
.charm h3{ font-size: 16px; margin-top: 12px;}
.charm ul{ padding-top: 20px; width: 100%;}
.charm ul li{ float: none; width: 19%; margin:0 auto 20px auto;}
.charm ul li:last-child{ margin-right:auto;}
.charm-list{ padding-top: 20px;}
.charm-list ul li{ float: none; width: 100%;}
.charm-con{ padding-top: 20px;}
.charm-con p{ font-size: 14px;}
.charm-con  img{ width: 100%; height: auto;}
.case-list{ padding-top: 20px;}
.case-list h2 img{ width: 50%; }
.case-list h3{ font-size: 16px; margin-top: 12px;}
.case-list ul{ padding-top: 30px;}
.case-list ul li{ float: none; width: 100%; margin-right: 0;}
.case-list ul li a{ width: 100%; height: auto;}
.case-list ul li img{ width: 100%; height: auto;}
.news_show-con p{ font-size: 14px;}
.pay h2 img{ width: 50%; }
.pay h3{ font-size: 16px; margin-top: 12px;}
.pay h4{ margin-top: 20px;}
.pay p{ margin-bottom: 30px;}
.tab{ width: 100%;}
.contact{ padding-top: 20px;}
.contact h2 img{ width: 50%; }
.contact h3{ font-size: 16px; margin-top: 12px;}
.contact-con{ padding-top: 20px;}
.contact-fl{ width: 100%; float: none;}
.contact-fr{ width: 100%; float: none;}
#dituContent{ width: 100%; }
header{ height: 60px;}
.logo{ width: 11%;}
.logo img{ width: 100%; height: auto;}
.menu{ display: block; position: absolute; top:20px; right: 3%;}
.nav{ display: none; width: 100%; float: none; position: absolute; top:60px; left: 0; background: rgba(0,0,0,0.5); z-index: 9999999; padding-bottom: 20px;}
.nav ul li{ float: none; width: 40%; margin:0 auto;}
.nav ul li:last-child{ margin-right: auto;}

}