﻿.banner{position: relative; width: 100%; clear: both}
.swiper-container { position: relative;}
.swiper-pagination-bullet-active{background: #b42323;}
.banner-txt { position: absolute; top: 50%; margin-top: -150px; left: 0px; right: 0px;text-align: center;}
.banner-txt>h2{color: #FFF;text-align: center; margin-bottom: 50px;  text-shadow:0px 0px 10px #000; }
.banner-txt>div { display: inline-block; color: #FFF; font-size: 24px; text-shadow:0px 0px 10px #000; }
.banner-countdown>h2 {font-size: 48px;letter-spacing:10px;margin-bottom: 80px; }
/*.banner-countdown>div>p>span{display: inline-block;height: 74px;font-size: 36px;color: #ffffff;}*/
.banner-countdown>div>p{margin-left: 28px;margin-right: 28px;display: inline-block;position: relative;}
.banner-countdown>div>p>span{display: inline-block;font-family: arial;height: 85px;width: 70px;line-height: 85px;font-size: 72px;font-weight: bold;color: #ca1a1d;box-shadow: 0px 6px 4px rgba(255, 255, 255, 0.3);text-align: center;background-color: #fff;border-radius: 5px;margin-right: 12px;box-sizing: border-box; text-shadow:0px 0px 10px #FFF; }
.banner-countdown>div>p>span:last-child{margin-right: 0px;}
.banner-countdown>div>p>i{position: absolute;top: 50%; margin-top: -1px; left: 0px; right: 0px; height: 3px;background-color: rgba(102, 162, 218, 0.8);}
.banner-location>h2 { font-size: 42px; line-height: 80px; margin-bottom: 20px;}
.banner-location>div { font-size: 18px;}
.banner-location>div>i { display: inline-block; padding: 0px 20px;}
.banner-location>div>span { font-size: 24px; margin: 0px 20px;}
.action-btn { padding: 50px 0px; border-bottom: 1px solid #E0E0E0;}
.action-btn>ul>li { width: 25%; float: left; }
.action-btn>ul>li>a {display: block; text-align: center; border-right: 1px solid #E0E0E0;}
.action-btn>ul>li>a>i {  display: inline-block; height: 50px; width: 50px; line-height: 50px; font-size: 48px; color: #888; }
.action-btn>ul>li>a:hover>i,.action-btn>ul>li>a:hover>p { color: #024899;}
.action-btn>ul>li>a>p { line-height: 50px; font-size: 16px; letter-spacing: 5px; color: #888; }
.action-btn>ul>li:first-child>a { border-left: 1px solid #E0E0E0;}
.about-expo { margin-bottom: 10px; overflow: hidden}
.about-expo>.video { width: 580px; float:left; height: 330px;}
.about-expo>.video>img { width: 100%; height: 330px; border: 1px solid #E0E0E0;}
.about-expo>.info { width: 540px; float: left; line-height: 25px; text-align: justify; margin-left: 40px;background: #F8F8F8; padding: 20px; color: #555;  }
.about-expo>.info>p:first-child { margin-top: 20px;}
.about-expo>.info>p { line-height: 30px; color:#000}

.about-btn { padding: 20px 0px; overflow: hidden; margin-bottom: 0px;}
.about-btn>ul>li { width: 16.666%; float: left;transition: all 150ms linear 0s;}
.about-btn>ul>li>a { display: block; text-align: center; line-height: 80px; color: #FFF; font-size: 18px;transition: all 150ms linear 0s;}
.about-btn>ul>li>a>i { font-size: 32px; margin-right: 10px;vertical-align: middle;}
.about-btn>ul>li:first-child>a{ background: #486698; }
.about-btn>ul>li:nth-child(2)>a{ background: #3e9283; }
.about-btn>ul>li:nth-child(3)>a{ background: #ce6532; }
.about-btn>ul>li:nth-child(4)>a{ background: #8d80cf; }
.about-btn>ul>li:nth-child(5)>a{ background: #00C1B3; }
.about-btn>ul>li:nth-child(6)>a{ background: #427dc9; }
.about-btn>ul>li>a:hover { color: #FFF;background: #252b5c!important;}

.aboutus { padding-bottom: 30px; background: url("../images/banner-03.jpg") no-repeat center -100px; padding-top: 100px;}
.aboutus>.info { margin-bottom: 30px;}
.aboutus>.info>div {background: rgba(255,255,255,1); width: 540px; float: left;line-height: 30px;  padding: 20px; height: 180px;}
.aboutus>.info>div>h2{ font-size: 18px; line-height: 40px; text-align: center; clear: both; }
.aboutus>.info>.expo-info { text-align: center;}
.aboutus>.info>.expo-info>p { text-align: left;}
.aboutus>.info>.expo-info>a { display: inline-block; width: 125px; background: #EEE; color: #024899; margin-bottom: 5px; text-align: center;}
.aboutus .category { float: right; width: 580px; margin-left: 40px; text-align: center; position: relative;}
.aboutus .category>.category-swiper { width: 100%; position: relative; overflow: hidden; }
.aboutus .category>.category-swiper>ul>li {width: 100%; }
.aboutus .category>.category-swiper>ul>li>span { display: inline-block; width: 125px; background: #EEE; color: #024899;margin-bottom: 5px; text-align: center; }

.aboutus .category>.navigation { position: absolute; height: 42px;width: 36px; top: 50%; margin-top: -15px; font-size: 32px; cursor: pointer; z-index: 10}
.aboutus .category>.navigation.pre { left:5px; text-align: left;}
.aboutus .category>.navigation.next { right: 5px;}

.aboutus>div.products { width: 1200px; margin: 0px auto; padding: 0px 30px 30px!important; overflow: hidden; clear: both;  background: #FFF; -moz-box-shadow: 0px 0px 10px #ddd; -webkit-box-shadow: 0px 0px 10px #ddd; box-shadow: 0px 0px 10px #ddd; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.aboutus>div.products>ul { overflow: hidden;}
.aboutus>div.products>ul>li { width: 25%; float: left; margin-bottom: 10px;}
.aboutus>div.products>ul>li>a { margin: 10px; display: block; background: #F5F5F5; overflow: hidden;}
.aboutus>div.products>ul>li>a>img { width: 100%; border: 1px solid #F0F0F0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.aboutus>div.products>ul>li>a>p { margin: 10px; height: 40px; line-height: 20px; overflow: hidden;}

a.more-btn { display: block; width: 250px; height: 40px; line-height: 40px; margin: 0px auto;  background: #024899; color: #FFF; text-align: center; border-radius: 2px; transition: all 150ms linear 0s; cursor: pointer;}
a.more-btn:hover { background: #252b5c; }
.review-nav>ul { text-align: center;}
.review-nav>ul>li { width: 9.09%; position: relative; height: 65px; display: inline-block;}
.review-nav>ul>li:after {content: " "; border-top: 1px dashed #e0e0e0; position: absolute; left: 0px; right: 0px; top: 55px;}
.review-nav>ul>li:first-child:after { left: 50%;}
.review-nav>ul>li:last-child:after { right: 50%; }
.review-nav>ul>li:before { content: " \25CF"; position: absolute; left: 50%; margin-left: -8px;top: 38px; color:#dfdfdf; font-size: 24px; z-index: 1}

.review-nav>ul>li>a { display: block; padding: 10px; text-align: center}
.review-nav>ul>li>a>i { display: inline-block; border-radius: 20px; line-height: 35px; width: 100%; background-color: #f2f2f2; }
.review-nav>ul>li{ background: none; opacity: 1;}
.review-nav>ul>li.swiper-pagination-bullet-active>a>i { background: #024899; color: #FFF;}
.review-nav>ul>li.swiper-pagination-bullet-active:before { color: #024899;}


.review,.review-swiper { position: relative;}
.review-swiper>.swiper-wrapper>.swiper-slide { width: 20%; float: left;}
.review-swiper>.swiper-wrapper>.swiper-slide>a { padding: 20px; display: block; position: relative;}
.review-swiper>.swiper-wrapper>.swiper-slide>a>p { height: 30px; line-height: 30px; bottom: 20px; background: rgba(0,0,0,0.5); overflow: hidden; color: #FFF;text-align: center; position: absolute; left: 20px; right: 20px;}
.review-swiper>.swiper-wrapper>.swiper-slide>a>img { width: 100%; border: 1px solid #eee;}

.review>.navigation { position: absolute; height: 80px;width: 80px; top: 50%; margin-top: -40px; font-size: 80px; font-weight: bold; color: #024899;  color: #FFF; line-height: 80px; text-shadow: 0px 0px 10px #000; cursor: pointer; z-index: 9;}
.review>.navigation.pre { left:5px; text-align: left;}
.review>.navigation.next { right: 5px; text-align: right;}



.news { width: 1240px; padding: 20px; margin-bottom: 20px;}
.news>ul { width: 580px; -moz-box-shadow: 0px 0px 10px #ddd; -webkit-box-shadow: 0px 0px 10px #ddd; box-shadow: 0px 0px 10px #ddd; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; }
.news>ul { margin-left: 20px;}
.news>ul:last-child { margin-left: 40px;}
.news>ul>li { padding: 10px 20px 0px;}
.news>ul>li>a { display: block; position: relative; border-bottom: 1px dotted #AAA; padding:0px 0px 10px 155px;}
.news>ul>li>a>img { width: 144px; height: 80px; position: absolute; left: 0px; top: 6px;}
.news>ul>li>a>h2 { height: 30px; overflow: hidden; line-height: 30px;}
.news>ul>li>a>p { line-height: 20px; text-align: justify; height: 40px; overflow: hidden; color: #888;}
.news>ul>li>a>i { display: block; height: 20px;line-height: 20px; font-size: 12px; color: #024899;}
.news>ul>li:last-child>a { border-bottom: 0px;}
.news>ul>.subject {line-height: 25px; border-bottom: 1px solid #E0E0E0; margin-bottom: 10px; color: #024899; font-size: 16px; padding: 10px 20px;}

.media>ul>li { display: inline-block; width:16.66%; float: left; overflow: hidden; margin: 0px 0px 10px 0px; text-align: center; text-align: center;}
.media>ul>li>a {width:172px;height: 52px; line-height: 52px; overflow: hidden; text-align: center; border: 1px solid #e0e0e0; display: block; margin: 0px auto;}
.media>ul>li img { width: 100%; }

@media screen and (max-width: 1024px) {
    .banner .swiper-slide {overflow: hidden; width: 100%;}
    .banner img { width: 160%; margin-left: -30%;}
    .banner-txt { margin-top: -65px; left: 5px; right: 5px;}
    .banner-txt>h2{color: #FFF;text-align: center; margin-bottom: 30px; font-size: 24px;letter-spacing:unset;}
    .banner-countdown>h2 { font-size: 28px;letter-spacing:3px; }
    .banner-countdown>div { font-size: 18px;}
    .banner-countdown>div>p>span{display: inline-block;height: 55px;font-size: 36px;}
    .banner-countdown>div>p{margin-left: 15px;margin-right: 15px;}
    .banner-countdown>div>p>span{height: 55px;line-height: 55px;font-size: 48px;}

    .banner-location>h2 { font-size: 16px; line-height: 30px; margin-bottom: 20px;}
    .banner-location>div>span { display: inline-block; margin: 0px;font-size: 16px;}
    .action-btn { padding: 30px 0px; }
    .action-btn>ul>li>a {  border: none;}
    .action-btn>ul>li>a>i { height: 30px; width: 30px; line-height: 30px; font-size: 32px;}
    .action-btn>ul>li>a>p { font-size: 14px; letter-spacing: unset;line-height: 30px; }
    .action-btn>ul>li:first-child>a { border: none;}

    .about-expo>.video { width: 100%; height: auto;}
    .about-expo>.video>img { height: auto;}
    .about-expo>.info { margin-left: 0px; width: auto;}
    .about-expo>.info>p { display: none;}

    .aboutus { padding-top: 30px;}
    .aboutus>.info>div { height: auto;}
    .aboutus .category { margin-left: 0px;}

    .aboutus .expo-info { margin-bottom: 20px;}
    .about-btn { margin:0px; padding: 10px 0px;}
    .about-btn>ul>li>a { line-height:unset; font-size: 12px; padding: 5px 0px;}
    .about-btn>ul>li>a>i { display: block; margin-right:unset;}
    .about-btn>ul>li { width: 33.33%;}
    .aboutus>.info>div { width: 100%;}

    .aboutus>div.products { margin: 0px 10px; width: auto; padding:0px 0px 30px!important;}
    .aboutus>div.products>ul>li { width: 50%;}
    .news { width: auto; padding:10px;}
    .news>ul { margin: 0px!important; padding: 0px; width: auto;}
    .news>ul:last-child { margin-top: 20px!important;}
    .news>ul>li { padding: 10px 10px 0px;}
    .news>ul>li>a>h2 { height: 40px; line-height: 20px; margin-bottom: 10px;}
    .news>ul>li>a>p { height: 36px; line-height: 18px; color: #888;}
    .news>ul>li>a>i { display: none;}
    .review-nav { display: none;}

    .review>ul { padding: 5px;}
    .review-swiper>.swiper-wrapper>.swiper-slide { width: 50%;}
    .review-swiper>.swiper-wrapper>.swiper-slide>a { padding: 10px 5px;}
    .review-swiper>.swiper-wrapper>.swiper-slide>a>p { left: 5px; right: 5px; bottom: 10px;}
    .review>.navigation { height: 60px; line-height: 60px; width: 60px; margin-top: -30px; font-size: 48px;}

    .media>ul>li { width: 33.33%;}
    .media>ul>li>a { width: 115px; height: 35px; line-height: 35px;}
}