/*
 *	Created by Edward on 15/9/27
 *	Copyright (c) 2015 shuwon.com All rights reserved
*/


@-webkit-keyframes bannerAnimate {
    0% { -webkit-transform: scale(1);}
    50% {-webkit-transform: scale(1.05);}
    100% {-webkit-transform: scale(1);}
}
@keyframes bannerAnimate {
    0% { -webkit-transform: scale(1);}
    50% {-webkit-transform: scale(1.05);}
    100% {-webkit-transform: scale(1);}
}

#banner ul li.second .bannerBg{ position: absolute; left: 0px; top: 0px; background: url(../img/banner2.jpg) top center no-repeat;}
#banner ul li.three .bannerBg{ position: absolute; left: 0px; top: 0px; background: url(../img/banner3.jpg) top center no-repeat;}
#banner ul li.four .bannerBg{ position: absolute; left: 0px; top: 0px; background: url(../img/banner4.jpg) top center no-repeat;}
#banner ul li figure{ width: 500px; height: 100px; position: absolute; left: 50%; margin-left: -500px; bottom: 60px;}
#banner ul li figure figcaption{ width: 100%; height: 60px; line-height: 60px; font-size: 40px; color: #FFFFFF;}
#banner ul li figure p{ width: 100%; height: 40px; line-break: 40px; font-size: 18px; text-transform: uppercase; color: #FFFFFF; opacity: 0.5;}
#banner ol{ width: 500px; height: 40px; position: absolute; left: 50%; margin-left: -500px; bottom: 20px;}
#banner ol li{ width: 70px; height: 40px; float: left; margin-right: 5px; background: #000; cursor: pointer;}
#banner ol li img{ opacity: 0.5;}
#banner ol li:hover img,#banner ol li.olCur img{ opacity: 1;}
#tips{ width: 100%; height: 90px; background: #86807f; line-height: 90px;}
.tips{ height: 90px; line-height: 90px; color: #FFFFFF; text-transform: uppercase; position: relative;}
.tips p{ float: left; display: block; margin-right: 25px;}
.tips span{ opacity: 0.5;}
.tips a{ display: block; height: 25px; width: 90px; border: 1px solid #FFFFFF; text-align: center; line-height: 25px; position: absolute; right: 0px; top: 32px; font-size: 12px; color: #FFFFFF;}
#homeContent{ width: 100%; height: auto; background:url(../img/homeBg.jpg) top center no-repeat;}
#title{ width: 100%; height: 150px; text-align: center;}
#title figcaption{ height: 50px; font-size: 36px; color: #008964; display: block; padding-top: 40px;}
#title p{ width: 100%; height: 20px; line-height: 20px; text-align: center; text-transform: uppercase; opacity: 0.3; font-size: 16px;}
#homeProductList{ max-width: 1000px; height: 320px; margin: auto;}
#homeProductList ul li{ width: 230px; height: 135px; float: left; margin-right: 26px; margin-bottom: 25px; text-align: center;}
#homeProductList ul li .homeProListTop{ width: 100%; height: 100px; background: #008964; position: relative;overflow: hidden;}
#homeProductList ul li .homeProListTop .homeProListTopMask{ width: 220px; height: 90px; border: 3px solid #FFFFFF; position: absolute; left: 2px; top: 2px;}
#homeProductList ul li .homeProListTop .homeProListTopWhite{ width: 230px; height: 100px; position: absolute; left: 0px; top: 0px; background: #FFFFFF; opacity: 0.5; filter:alpha(opacity=50);}
#homeProductList ul li .homeProListTop .homeProListTopIcon{ width: 230px; height: 100px; position: absolute; left: 0px; top: 0px;background:url(../img/icon1.png) center center no-repeat;}
#homeProductList ul li .homeProListTop .homeProListTopIcon.icon2{ background-image: url(../img/icon2.png);}
#homeProductList ul li .homeProListTop .homeProListTopIcon.icon3{ background-image: url(../img/icon3.png);}
#homeProductList ul li .homeProListTop .homeProListTopIcon.icon4{ background-image: url(../img/icon4.png);}
#homeProductList ul li .homeProListTop .homeProListTopIcon.icon5{ background-image: url(../img/icon5.png);}
#homeProductList ul li .homeProListTop .homeProListTopIcon.icon6{ background-image: url(../img/icon6.png);}
#homeProductList ul li .homeProListTop .homeProListTopIcon.icon7{ background-image: url(../img/icon7.png);}
#homeProductList ul li .homeProListTop .homeProListTopIcon.icon8{ background-image: url(../img/icon8.png);}
#homeProductList ul li .homeProListTop .homeProListTopIcon span{ width: 100%; height: 30px; position: absolute; top: 90%; margin-top: -15px; display: block; text-transform: uppercase; font-size: 12px; color: #FFFFFF;}
#homeProductList ul li .homeProListBottom{ width: 100%; height: 35px; line-height: 35px; color: #3E3E3E;}
#homeProductList ul li:hover .homeProListBottom{ color: #DE5939;}
#homeProductList ul li:hover .homeProListTop .homeProListTopWhite{opacity: 0; filter:alpha(opacity=0);}
#homeProductList ul li:hover img{ -webkit-transform: scale(1.1);transform: scale(1.1);}
#homeProductTitle{ width: 100%; height: 265px; margin-top: 50px; position: relative; text-align: center;}
#homeProductTitle .homeLogo{ width: 57px; height: 57px; position:absolute; left: 50%; margin-left: -30px; top: 50px; background: url(../img/homeLogo.png) no-repeat;}
#homeProductTitle .homeSubTitle{ width: 100%; height: 60px; position: absolute; top: 120px; text-transform: uppercase;}
#homeProductTitle .homeSubTitle p{ width: 100%; height: 40px; font-size: 18px; display: block; line-height: 40px;}
#homeProductTitle .homeSubTitle span{ color: #b4b4b4;}
#homeProductTitle .homeProductSlideDown{ width: 105px; height: 60px; position: absolute; left: 50%; margin-left: -52px; bottom: 0px; background:url(../img/slideDownIcon.png) center bottom no-repeat;}
#proList{ width: 100%; height: auto; overflow: hidden; margin-top: 40px;}
#proList ul li{ width: 50%; height: 470px; float: left; background: #008964; position: relative; overflow: hidden;}
#proList ul li .pic{ position: absolute; right: 0px; top: 0px;}

#proList ul li.second .pic{ position: absolute; left: 0px; top: 0px;}
#proList ul li.three{width: 60%;}
#proList ul li.three .pic{ position: absolute; right: 0px; top: 0px;}
#proList ul li.four{ width: 40%;}
#proList ul li.four .pic{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
#proList ul li:hover .pic{ -webkit-transform: scale(1.1);transform: scale(1.1);}
#proList ul li .proListTitle{ width: 345px; height: auto; position: absolute;}
#proList ul li .proListTitle figure figcaption{ width: 100%; height: 50px; line-height: 50px; font-size: 35px; color: #FFFFFF;}
#proList ul li .proListTitle figure p{ width: 100%; margin-top: 25px; height: auto; line-height: 20px; font-size: 14px; opacity: 0.5;color: #FFFFFF; font-size: 12px;}
#proList ul li .proListTitle a{ display: block; width: 120px; height: 35px; line-height: 35px; text-align: center; border: 1px solid #FFFFFF; text-transform: uppercase; color: #FFFFFF; margin-top: 25px;}
#proList ul li.first .proListTitle,#proList ul li.three .proListTitle{ right: 50px; top: 50px;}
#proList ul li.second .proListTitle{ left: 100px; bottom: 150px; width: 460px; text-align: right;}
#proList ul li.second .proListTitle figure figcaption,#proList ul li.second .proListTitle figure p{ color: #3E3E3E; opacity: 1;}
#proList ul li.second .proListTitle a{ border-color: #3E3E3E; color: #3E3E3E; margin-left: 340px;}
#proList ul li.three .proListTitle figure figcaption{ color: #3E3E3E;}
#proList ul li.three .proListTitle figure p{ color: #3E3E3E; opacity: 1;}
#proList ul li.three .proListTitle a{ border-color: #3E3E3E; color: #3E3E3E; }
#proList ul li .proListTitle a:hover{ border-color: #EA4A1C; color: #EA4A1C; border-radius: 35px;}
#proList ul li.second .proListTitle a:hover{ border-color: #EA4A1C; color: #EA4A1C; border-radius: 35px;}
#proList ul li.three .proListTitle a:hover{ border-color: #EA4A1C; color: #EA4A1C; border-radius: 35px;}

#proList ul li.four .slogan{ width: 300px; height: 80px; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -40px;}
#proList ul li.four .slogan .sloganBg{ width: 300px; height: 80px; background: #000; opacity: .5; position: absolute; left: 0px; top: 0px;}
#proList ul li.four .slogan .sloganBorder{ width: 306px; height: 86px; border: 1px solid #000000; position: absolute; left: -4px; top: -4px;}
#proList ul li.four .slogan figure figcaption{ width: 100%; height: 30px; line-height: 30px; font-size: 28px; text-align: center; color: #FFFFFF; position: absolute; left: 0px; top: 15px;}
#proList ul li.four .slogan figure p{ width: 100%; height: 20px; position: absolute; top: 50px; line-height: 20px; color: #FFFFFF; text-transform: uppercase; text-align: center; font-size: 13px; opacity: 0.5;}
#investment{ width: 100%; height: 756px; background: #FFFFFF; position: relative; overflow: hidden;}
#investmentLefe{ width: 740px; height: 100%; position: absolute; left: 50%; margin-left: -800px; background: #f0f0f0;}
#investmentRight{ width: 1180px; height: 100%; position: relative; left: 50%; margin-left: -60px; overflow: hidden;}
#investmentRight ul{width: 20000px;height: 100%;position: absolute;}
#investmentRight ul li{ width: 1180px; height: 100%; float: left; }
#investmentTitle{ width: 500px; height: 120px; position: absolute; left: 50%; margin-left: -579px; top: 50px;}
#investmentTitle figcaption{ font-size: 36px; color: #008964;}
#investmentTitle p{ font-size: 40px; color: #3E3E3E; opacity: 0.5; text-transform: uppercase;}
.investmentNine{ width: 200px; height: 135px; position: absolute; 
left: 50%; margin-left: -579px; top: 200px; font-size: 24px; color: #c0afa7; opacity: 0.5;}
.investmentNine span{ font-size: 130px; line-height: 130px;}
.investmentInfo{ width: 475px; height: 150px; position: absolute; left: 50%; margin-left: -579px; top: 425px;}
.investmentInfo figcaption{ color: #dd5636; font-size: 48px;}
.investmentInfo p { font-size: 16px; color: #3E3E3E; line-height: 28px; margin-top: 10px;}
.investmentIcon { width: 180px; height: 50px; position: absolute; left: 50%; margin-left: -285px; top: 435px; line-height: 50px; font-size: 24px; color: #C0AFA7; text-align: center;}
.investmentIcon .Btn{ width: 50px; height: 50px;  cursor: pointer; background: url(../img/icon.png) no-repeat; position: relative; z-index: 5;}
.investmentIcon .Btn.prev{ float: left;}
.investmentIcon .Btn.prev:hover,.investmentIcon .Btn.next:hover { background-position-y: -50px;}
.investmentIcon .Btn.next{ float: right; background-position: -50px 0px;}
.investmentIcon .investmentIconBox{ position: absolute; left: 0px; top: 0x; width: 100%; height: 100%;}
.investmentIcon .investmentIconBox span{ color: #DD5636; font-size: 36px;}
.investmentNav{ width: 2000px; height: 108px; background:url(../img/blank7.png); position: absolute; top: 600px; left: 50%; margin-left: -579px;}
.investmentNav ul li{ width: 129px; height: 108px; float: left; margin-right: 1px; position: relative; overflow: hidden; cursor: pointer;}
.investmentNav ul li .investmentImg{ width: 129px; height: 108px; position: absolute; left: 0px; top: 0px; background:url(../img/investmentIcons.png) no-repeat;}
.investmentNav ul li .investmentText{ width: 129px; height: 216px; position: absolute; left: 0px; top: 0px; text-align: center; color: #FFFFFF; font-size: 14px;}
.investmentNav ul li .investmentText span{color: #C0AFA7; width: 129px; height: 108px;line-height: 138px; display: block;}
.investmentNav ul li:hover .investmentImg,.investmentNav ul li.second:hover .investmentImg,.investmentNav ul li.four:hover .investmentImg,.investmentNav ul li.three:hover .investmentImg,.investmentNav ul li.five:hover .investmentImg,.investmentNav ul li.six:hover .investmentImg,.investmentNav ul li.seven:hover .investmentImg,.investmentNav ul li.eight:hover .investmentImg,.investmentNav ul li.nine:hover .investmentImg{ background-position-y:-108px;}
.investmentNav ul li:hover .investmentText,.investmentNav ul li.current .investmentText{ top: -108px;}
.investmentNav ul li.second .investmentImg{ background-position: -129px 0px;}
.investmentNav ul li.three .investmentImg{ background-position: -258px 0px;}
.investmentNav ul li.four .investmentImg{ background-position: -387px 0px;}
.investmentNav ul li.five .investmentImg{ background-position: -516px 0px;}
.investmentNav ul li.six .investmentImg{ background-position: -643px 0px;}
.investmentNav ul li.seven .investmentImg{ background-position: -770px 0px;}
.investmentNav ul li.eight .investmentImg{ background-position: -898px 0px;}
.investmentNav ul li.nine .investmentImg{ background-position: -1027px 0px;}
.investmentNav ul li.current .investmentImg{background-position-y:-108px;}
#homeJoin{ width: 100%; height: 330px; background: #555073 url(../img/homeJoinBg.jpg) center top no-repeat;}
.homeJoin{ max-width: 1150px; height: 330px; margin: 0 auto; color: #FFFFFF;}
.homeJoinTitle{ width: 100%; height: 70px; line-height: 70px; font-size: 24px; padding-top: 25px; border-bottom: 1px solid #6c6a83;}
.homeJoinList{ width: 100%; height: auto; overflow: hidden;border-bottom: 1px solid #6c6a83;}
.homeJoinList ul li{ width: 50%; height: 50px; line-height: 50px; float: left; }
.homeJoinMore{ width: 175px; height: 50px; background: #dd5636; line-height: 50px; text-align: center; display: block; font-size: 18px; color: #FFFFFF; position: relative; margin-top: 15px;}
.homeJoinMore img{ position: absolute; left: 20px; top: 14px;}
.homeJoinMore:hover{ border-radius: 25px; color: #FFFFFF;}
#footer{ width: 100%; height: auto; overflow: hidden;}
.footerNav{ width: 100%; height: 2px; background: #008964;}
.footerNavBox{ max-width: 1000px; height: 90px; margin: auto;}
.footerNavBox a{ width: 135px; height: 35px; float: right; display: block; text-align: center; line-height: 35px; border: 1px solid #00af91; margin-right: 10px; color: #FFFFFF; margin-top: 27px;}
.footerNavBox a:hover{ background: #FFFFFF; color: #008964; border-color: #008964;}
#footerMenu{ width: 100%; height: 265px; background: #2e2e2e; border-bottom: 1px solid #282727; position: relative;}
.ewmList{ width: 406px; height: 150px; position: absolute; left: 50%; margin-left: -203px; top: 50px;}
.ewmList ul li{ width: 120px; height: 150px; margin-left: 15px;}
.ewmList ul li.first { float: left;}
.ewmList ul li.second { float: left;}
.ewmList ul li.three { float: left;}
.ewmList ul li .emwImg{ width: 116px; height: 116px; border: 2px solid #008964;}
.ewmList ul li p{ display: block; width: 100%; height: 30px; text-align: center; line-height: 30px; font-size: 12px; color: #FFFFFF;}
.footerMenu{ width: 1000px; height: 40px; text-align: center; font-size: 12px; position: absolute; left: 50%; margin-left: -500px; bottom: 0px;}
.footerMenu a{ color: #FFFFFF; opacity: 0.5; line-height: 40px; padding: 0px 10px;}
.footerMenu a:hover{ opacity: 1;}
.footerTel{ width: 100%; height: 85px; line-height: 85px; background: #2e2e2e; position: relative;}
.footerTelBox{ width: 380px; height: 40px; position: absolute; top: 22px; left: 50%; margin-left: -190px; line-height: 40px; color: #FFFFFF; text-align: center; font-size: 30px;}
.footerTelBox img{ position: absolute; left: 0px;}



/**********************************PRODUCT********************************/
#subBanner{ width: 100%; height: 400px; background: url(../img/bannerProduct.jpg) top center no-repeat;}
#subBanner .subBannerText{ width: 100%; height: 120px; position: relative; top: 160px; text-align: center;}
#subBanner .subBannerText figcaption{ font-size: 50px; color: #FFFFFF;}
#subBanner .subBannerText p{ font-size: 18px; text-transform: uppercase; color: #FFFFFF; opacity: 0.5; letter-spacing: 1.5px;}
#productList{ width: 100%; height: auto;}
#productBox { width: 100%; height: auto; background: #FFFFFF; border-top: 1px solid #cccccc;}
#productBox.odd { background: #f7f7f7;}
#productBox .productBoxCenter{ max-width: 1000px; height: 265px; margin: auto; overflow: hidden; position: relative;}
#productBox .productBoxCenter .productIcon{ width: 60px; height: 60px; float: left; background: #008964; margin-top: 50px; background:url(../img/productIcon.png) 0px -60px no-repeat;}
#productBox .productBoxCenter .productIcon.second { background-position: -60px -60px;}
#productBox .productBoxCenter .productIcon.three { background-position: -120px -60px;}
#productBox .productBoxCenter .productIcon.four { background-position: -180px -60px;}
#productBox .productBoxCenter .productIcon.five { background-position: -240px -60px;}
#productBox .productBoxCenter .productIcon.six { background-position: -300px -60px;}
#productBox .productBoxCenter .productIcon.seven { background-position: -360px -60px;}
#productBox .productBoxCenter .productIcon.eight { background-position: -420px -60px;}
#productBox .productBoxCenter .productInfo{ width: 490px; height: 200px; float: left; margin-top: 50px;}
#productBox .productBoxCenter .productInfo figcaption { font-size: 36px;}
#productBox .productBoxCenter .productInfo p{ font-size: 16px; text-transform: uppercase; opacity: 0.5;}
#productBox .productBoxCenter .productInfo section { margin-top: 25px; line-height: 28px;}
#productBox .productBoxCenter .productPic{ position: absolute; right: 0px; bottom: -50px; display: block;}
#productBox.odd .productBoxCenter .productPic { left: 0px;}
#productBox.odd .productBoxCenter .productInfo{ float:right; text-align: right;}
#productBox.odd .productBoxCenter .productIcon{ float: right;}
.productList{ width: 100%; height: 320px; background: #e2e2e2; position: relative; display: none;}
.productBtn{ width: 55px; height: 105px; position: absolute; top: 107px; background: #ea4a1c url(../img/productListIcon.png) no-repeat; cursor: pointer;}
.productBtn.productPrev{ left: 0px;}
.productBtn.productNext{ right: 0px; background-position: -55px 0px;}
.productListBox{ width: 1000px; height: 320px; margin: auto; position: relative; overflow: hidden; cursor: pointer;}
.productListBox ul{ width: 10000px; height: 320px; position: absolute; left: 0px; top: 0px;}
.productListBox ul li{ width: 210px; height: 230px; border: 1px solid #cfcfcf; margin-top: 45px; background: #FFFFFF; float:left; margin-right: 50px;}
.productListBox ul li section { width: 210px; height: 190px; background: #008963; overflow: hidden;}
.productListBox ul li p{ display: block; width: 210px; height: 40px; line-height: 40px; text-align: center; color: #3E3E3E;}
.productListBox ul li:hover p{ background: #ea4a1c; color: #FFFFFF;}
.productListBox ul li:hover img{ -webkit-transform: scale(1.2);}
#productBox:hover .productIcon{ background-position-y: 0px;}
#productBox:hover .productIcon.second{ background-position-y: 0px;}
#productBox:hover .productIcon.three{ background-position-y: 0px;}
#productBox:hover .productIcon.four{ background-position-y: 0px;}
#productBox:hover .productIcon.five{ background-position-y: 0px;}
#productBox:hover .productIcon.six{ background-position-y: 0px;}
#productBox:hover .productIcon.seven{ background-position-y: 0px;}
#productBox:hover .productIcon.eight{ background-position-y: 0px;}
#productBox.current .productInfo,#productBox:hover .productInfo{ color: #EA4A1C;}
#productBox.current .productIcon,#productBox.current .productIcon.second,#productBox.current .productIcon.three,#productBox.current .productIcon.four,#productBox.current .productIcon.five,#productBox.current .productIcon.six,#productBox.current .productIcon.seven,#productBox.current .productIcon.eight{ background-position-y: 0px;}
#productBox.current .productPic,#productBox:hover .productPic{ bottom: 0px;}

.proDetailLeft{ width: 500px; height: 500px; border: 1px solid #CCCCCC; float: left;}
.proSmallImage{ width: 70px; height: 460px; float: left; margin-left: 15px; margin-top: 20px;}
.proSmallImage ul li{ width: 68px; height: 68px; border: 2px solid #FFFFFF; margin-bottom: 5px;}
.proSmallImage ul li.current{border-color: #EA4A1C;}
.proSmallImage ul li img{ display: block; cursor: pointer;}
.proGrally{ width: 385px; height: 460px; margin-top: 20px; float: left; background: #008964; margin-left: 15px;}
.proDetailRight{ width: 480px; height: auto;  float: right;}
.proDetaiTitle{ width: 100%; height: 60px; line-height: 40px; border-bottom: 1px solid #CCCCCC; font-size: 36px; color: #de4b20;}
.proDetaiTitle span{ font-size: 18px; color: #3E3E3E; margin-left: 10px; font-weight: bold;}
.proDetailList{ width: 100%; height: auto; overflow: hidden;}
.proDetailList ul li{ width: 100%; height: auto; border-bottom: 1px solid #CCCCCC; padding: 15px 0px; line-height: 24px; opacity: .8;}


/**********************************ABOUT********************************/
#aboutQY{ width: 100%; height: auto; background:#fff url(../img/aboutBg.jpg) bottom center no-repeat;}
.aboutQY{ max-width: 1000px; height: auto; margin: auto; overflow: hidden; padding: 100px 0px;}
.aboutQYLeft{ width: 225px; height: auto; float: left;}
.aboutQYLeft .quanyou{ font-size: 50px; font-size: 40px; color: #008964;}
.aboutQYLeft aside{ width: 100px; height: 40px; border-bottom: 1px solid #008964; line-height: 40px; color: #b4b4b4; text-transform: uppercase; margin-top: 15px;}
.aboutQYLeft span{ color: #008a63; margin-top: 35px; display: block; font-size: 16px;}
.aboutQYRight{ width: 750px; height: auto; float: right;}
.aboutQYRight aside{ width: auto; height: 60px; line-height: 60px; border-bottom: 1px solid #dadada; font-size: 24px; display: block;}
.aboutQYRightDetails,.bathroomDetails{width: 750px; height: auto;  line-height: 28px; margin-top: 25px;}
#bathroom{ width: 100%; height: 525px; background:url(../img/bathroom.jpg) center top no-repeat; background-attachment: fixed; position: relative;}
.bathroom{ width: 45%; height: 100%; position: absolute; right: 0px; top: 0px; background:url(../img/blank6.png);}
.bathroom aside{ width: 150px; height: 60px; line-height: 60px; border-bottom: 1px solid #dadada; font-size: 24px; display: block; margin-left: 5%; margin-top: 35px; color: #FFFFFF;}
.bathroomDetails { width: 90%; padding-left: 5%; color: #FFFFFF;}
#aboutCultrue{ width: 100%; height: 550px; background: url(../img/aboutCurltrueBg.jpg) top center no-repeat; position: relative;}
#aboutTitle{ width: 260px; height: 115px; position: absolute; left: 50%; margin-left: -130px; top: 60px;}
#aboutTitle figcaption{ font-size: 36px; text-align: center; color: #008A63;}
#aboutTitle p{ width: 100%; height: 25px; line-height: 25px; text-align: center; display: block; text-transform: uppercase; color: #bababa;}
#aboutTitle section{ width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 16px; color: #008A63; position: relative;}
#aboutTitle section span{ width: 40px; height: 2px; position: absolute;  top: 19px; background: #008A63; display: block;}
#aboutTitle section span.r{ right: 0px;}
.aboutCultrueList{ width: 1000px; height: 260px; position: relative; left: 50%; margin-left: -500px; top: 225px;}
.aboutCultrueList ul li{ width: 332px; height: 130px; float: left; border-bottom: 1px solid #d8d8d8; border-right: 1px solid #d8d8d8; font-size: 12px;}
.aboutCultrueList ul li section{ width: 100%; height: 40px; margin-top: 15px; line-height: 40px; text-align: center; font-size: 14px; font-weight: bold; color: #008A63;}
.aboutCultrueList ul li p{ display: block; width: 90%; margin-left: 5%; line-height: 22px;}

#brand{ width: 100%; height: 600px; background: url(../img/brandBg.jpg) top center no-repeat; position: relative;}
#brand .brandTitle{ width: 185px; height: 75px; position: absolute; left: 50%; margin-left: -92px; top: 50px; border-bottom: 2px solid #008A63; text-align: center;}
#brand .brandTitle strong{ display: block; width: 100%; height: 40px; font-size: 36px; color: #008A63;}
#brand .brandTitle p{ display: block; padding-top: 10px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.5;}
#brand .brandPicList{ width: 343px; height: 133px; position: absolute; left: 50%; top: 250px; margin-left: -350px; background: #008A63; overflow: hidden;}
#brand .brandPicList ul{ width: 6850px; height: 133px; position: absolute; left: 0px; top: 0px;}
#brand .brandPicList ul li{ width: 343; height: 133px; float: left;}
#brand .brandContentList{ width: 440px; height: 195px; position: absolute; left: 50%; margin-left: -50px; top: 350px; border: 5px solid #e39e89; overflow: hidden;}
#brand .brandContentList ul{ width: 6000px; height: 195px; position: absolute; left: 0px; top: 0px;}
#brand .brandContentList ul li{ width: 3600px; padding: 30px 40px; height: 135px; position: absolute; left: 0px; top: 0px;}
#brand .brandContentList ul li div{ width: 440px; height: 100%; float: left;}
#brand .brandContentList ul li strong{ display: block; width: 100%; height: 50px; line-height: 50px; font-size: 40px; color: #008A63; font-family:tahoma}
#brand .brandContentList ul li section{ width: 80%; line-height: 28px; margin-top: 10px; font-size: 16px;}
#brand .brandContentList ol{ width: 65px; height: 30px; position: absolute; right: 10px; bottom: 10px;}
#brand .brandContentList ol li{ width: 30px; height: 30px; position: absolute; background: url(../img/yearIcon.png) no-repeat; cursor: pointer;}
#brand .brandContentList ol li:hover,#brand .brandContentList ol li.yearDown:hover{ background-position-y: -30px;}
#brand .brandContentList ol li.yearDown{ background-position: -30px 0px; right: 0px;}

#brand .brandYear{ width: 500px; height: 55px; position: absolute; left: 50%; margin-left: 0px; top: 250px; }
#brand .brandYear .yearPrev{ width: 55px;  height: 55px; float: left; position: relative; cursor: pointer;}
#brand .brandYear .yearPrev span{ width: 0px; height: 0px; border-right: 12px solid #008A63; border-top: 12px solid transparent; border-bottom: 12px solid transparent; display: block; position: absolute; left: 50%; margin-left: -6px; top: 50%; margin-top: -12px;}
#brand .brandYear .yearList{ width: 390px; height: 55px; float: left;  position: relative; overflow: hidden;}
#brand .brandYear .yearList ul{ width: 3900px; height: 55px; position: absolute; left: 0px; top: 0px;}
#brand .brandYear .yearList ul li{ width: 40px; height: 55px; float: left; margin-right: 30px; line-height: 55px; text-align: center; font-weight: bold; position: relative; cursor: pointer; overflow: hidden;}
#brand .brandYear .yearList ul li .yearText{ width: 40px; height: 55px; position: absolute; left: 0px; top: 0px;}
#brand .brandYear .yearList ul li .topLine{ width: 40px; height: 2px; background: #EA4A1C; position: absolute; left: 40px; top: 0px;}
#brand .brandYear .yearList ul li .underLine{ width: 40px; height: 2px; background: #EA4A1C; position: absolute; left: -40px; bottom: 0px;}
#brand .brandYear .yearNext{ width: 55px;  height: 55px; float: left; position: relative; cursor: pointer;}
#brand .brandYear .yearNext span{width: 0px; height: 0px; border-left: 12px solid #008A63; border-top: 12px solid transparent; border-bottom: 12px solid transparent; display: block; position: absolute; left: 50%; margin-left: -6px; top: 50%; margin-top: -12px;}
#brand .brandYear .yearList ul li.current .yearText,#brand .brandYear .yearList ul li:hover .yearText{ color: #EA4A1C;}
#brand .brandYear .yearList ul li.current .topLine,#brand .brandYear .yearList ul li:hover .topLine{ left: 0px;}
#brand .brandYear .yearList ul li.current .underLine,#brand .brandYear .yearList ul li:hover .underLine{ left: 0px;}


/**********************************respon********************************/
#respon { width: 100%; height: auto; background: #FFFFFF;}
.respon{ max-width: 1000px; height: 300px; margin: auto; padding: 100px 0px;}
.responInfo{ line-height: 28px;}
.resonList{ width: 750px; height: 35px; margin-top: 25px; position: relative; overflow: hidden;}
.resonList ul{ width: 7500px; height: 35px; position: absolute; left: 0px; top: 0px;}
.resonList ul li{ width: 160px; height: 35px; float: left; line-height: 35px; position: relative; margin-right: 35px; cursor: pointer;}
.resonList ul li span{ width: 25px; height: 1px; position: absolute; left: 0px; top: 17px; background: #3E3E3E; display: block;}
.resonList ul li b{ position: absolute; left: 35px; display: block;}
.resonDetailList{ width: 750px; height: 170px; float: left; position: relative; overflow: hidden; margin-top: 25px;}
.resonDetailList ul{ width: 7500px; height: 170px; position: absolute; left: 0px; top: 0px;}
.resonDetailList ul li{ width: 750px; height: 170px; float: left;}
.resonDetailList ul li img{ float: left; width: 255px; height: 170px;}
.resonDetailList ul li figure{ width: 475px; height: 170px; float: right; }
.resonDetailList ul li figure figcaption{ width: 475px; height: 50px; line-height: 50px; font-weight: bold; font-size: 14px; opacity: 0.8;}
.resonDetailList ul li figure section{ line-height: 24px; opacity: 0.6;}
.resonDetailList ol{ width: 65px; height: 30px; position: absolute; left: 275px; top: 140px;}
.resonDetailList ol li{ width: 30px; height: 30px; position: absolute; background: url(../img/yearIcon.png) no-repeat; cursor: pointer;}
.resonDetailList ol li.responNext{ background-position: -30px 0px; right: 0px;}
.resonDetailList ol li.responPrev:hover,.resonDetailList ol li.responNext:hover{ background-position-y: -30px;}

/**********************************CYL********************************/
#cylBanner{ width: 100%; height: 180px; background: url(../img/cylBanner.jpg) top center no-repeat; background-attachment: fixed;}
#cylBanner .slogan{ max-width: 1000px; height: 180px; margin: auto;}
#cylBanner .slogan figcaption{ font-size: 30px; color: #008A63; padding-top: 35px;}
#cylBanner .slogan p{ color: #FFFFFF; text-transform: uppercase;}
#cylContent{ width: 100%; height: auto; /*background: url(../img/culturebg.jpg) top center no-repeat;*/}
.cylContent{ max-width: 1000px; height: auto; margin: auto; padding: 50px 0px; overflow: hidden; position: relative;}
.cylContent .cylLine{ width: 1px; height: 100%; border-right: 1px dotted #959595; position: absolute; left: 50%; margin-left: -1px; top: 150px;}
.cylContent ul li .line{ width: 200px; height: 5px; border-bottom: 1px dotted #959595; top: 40%; position: absolute;}
.cylContent ul li{ width: 100%; height: 235px; position: relative;}
.cylContent ul li .cylListInfo{ width: 400px; height: auto;}
.cylContent ul li .cylListInfo figure{ width: 270px; height: 55px; border-bottom: 2px solid #003e8b; margin-top: 15px;}
.cylContent ul li .cylListInfo figure figcaption{ font-size: 18px; color: #003e8b;}
.cylContent ul li .cylListInfo figure section{ text-transform: uppercase; opacity: .6; font-size: 12px;}
.cylContent ul li .cylListInfo .cylListDetails{ width: 100%; height: auto; line-height: 24px; font-size: 12px; margin-top: 15px; opacity: .8;}
.cylContent ul li .cylListIcon{ width: 122px; height: 122px; position: absolute; left: 50%; margin-left: -61px; background:#959595  url(../img/cylIcon.png) no-repeat; border-radius: 122px; top: 50%; margin-top: -61px;}
.cylContent ul li .cylListNumber{ width: 94px; height: 94px; border-radius: 94px; border: 2px solid #959595; line-height: 94px; text-align: center;position: absolute; top: 50%; margin-top: -47px;font-size: 40px; color: #959595;}
.cylContent ul li.odd .cylListInfo{ float: left;}
.cylContent ul li.odd .cylListNumber{  right: 100px;  }
.cylContent ul li.odd .line{ right: 220px; top:50% ;}
.cylContent ul li.even .cylListInfo{ float: right;}
.cylContent ul li.even .cylListIcon{  top: 40%;}
.cylContent ul li.even .cylListNumber{ top: 40%; left: 100px;}
.cylContent ul li.even .line{ left: 220px;}
.cylContent ul li:hover .cylListNumber{ color: #003e8b; border-color: #003e8b;}
.cylContent ul li:hover .line{ border-color: #003e8b;}
.cylContent ul li:hover .cylListIcon{ background-color: #003e8b;}

/**********************************365********************************/
#godness{ width: 100%; height: 700px; background: url(../img/365Bg.jpg) top center no-repeat; background-size: cover;}
.radiusRing{ width: 300px; height: 300px; border-radius: 300px; position: absolute; left: 50%; top: 230px; margin-left: -150px;  box-shadow: 1px 1px 1px #F0F0F0;}
.radiusRing img{ position: absolute; left: 0px; top: 0px;}
.ringCenter{ height: 240px; width: 240px; border: 30px solid #f13b0f; opacity: .1; border-radius: 300px;}
.godnessMenu{ width: 300px; height: 300px; border-radius: 300px; position: absolute; left: 50%;  margin-left: -150px; top: 230px;}
.godnessMenu ul li{ width: 25px; height: 25px; border-radius: 25px; position: absolute; left: 0px; top: 0px; cursor: pointer;}
.godnessMenu ul li span{ width: 11px; height: 11px; background: #ffffff; border-radius: 11px; display: block; margin-left:7px; margin-top: 7px;}

.godnessMenu ul li figure { width: 70px; height: 100px; position: absolute; left: -80px; top: -20px; }
.godnessMenu ul li figure figcaption { width: 100%; height: 60px; line-height: 60px; text-align: center; color: #FFFFFF; font-size: 30px;}
.godnessMenu ul li figure p{ display: block; width: 100%; height: 20px; line-height: 20px; text-align: center; color: #FFFFFF; margin-top: -15px;}
.godnessMenu ul li.second figure{ left: -25px; top: 35px;}
.godnessMenu ul li.three figure{ left: 25px; }
.godnessMenu ul li .radius{ width: 25px; height: 25px; border-radius: 25px; border-radius: 25px; border: 2px solid #FFFFFF; position: absolute; left: -2px; top: -2px; opacity: .5;}
.godnessMenu ul li.current span{background-color: #EA4A1C;}
.godnessMenu ul li.current figure figcaption{ color: #EA4A1C; font-size: 60px;}
.godnessMenu ul li.current figure p{color: #EA4A1C; margin-top: 0px;}

.godnessMenu ul li.first { left:-14px; top: 135px;}
.godnessMenu ul li.second { left:137px; top: 288px;}
.godnessMenu ul li.three { left:290px; top: 135px;}

.godnessMenu ul li.current  .radius {border-color: #EA4A1C;  -webkit-animation:radiusAnimate 1s ease-in infinite;animation:radiusAnimate 1s ease-in infinite;}
@-webkit-keyframes radiusAnimate {
    0% { opacity: 0; width: 10px; height: 10px; left: 5px; top: 5px;}
    90% { opacity: 1; width: 40px; height: 40px; left: -9px; top: -9px; border-radius: 40px;}
    100% { opacity: 0; width: 50px; height: 50px; left: -14px; top: -14px; border-radius: 50px;}
}
@keyframes radiusAnimate {
    0% { opacity: 0; width: 10px; height: 10px; left: 5px; top: 5px;}
    90% { opacity: 1; width: 40px; height: 40px; left: -9px; top: -9px; border-radius: 40px;}
    100% { opacity: 0; width: 50px; height: 50px; left: -14px; top: -14px; border-radius: 50px;}
}
 
#ring{ width: 584px; height: 584px; position: absolute; left: 50%; top: 95px; margin-left: -297px; background: url(../img/ring.png) no-repeat;webkit-transition-duration:1s; -moz-transition-duration:1s; -ms-transition-duration:1s;transition-duration:1s;}
#ring.current0{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
#ring.current1{ -webkit-transform: rotate(-90deg);transform: rotate(-90deg);}
#ring.current2{ -webkit-transform: rotate(-180deg);}
.godMenuList{ width: 100px; height: 100px; position: absolute; left: 50%; margin-left: -50px;  top: 338px;}
.godMenuList ul li.first { position: absolute; left: -380px; top: 0px;}

.godMenuList ul li a{ width: 140px; padding-left: 20px; height: 27px; border-radius: 27px; background:url(../img/white5.png); position: absolute; left: -10px; top: 0px; line-height: 27px; color: #EA4A1C; display: block;  font-size: 12px; opacity: 0; -webkit-transition-duration:0.5s; transition-duration:0.5s;}
.godMenuList ul li a.a1{top: -140px; left: -145px;}
.godMenuList ul li a.a2{top: -70px; left: -106px; -webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.godMenuList ul li a.a3{-webkit-transition-delay: 0.2s; left: -100px;transition-delay: 0.2s;}
.godMenuList ul li a.a4{top: 70px; left: -110px;-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.godMenuList ul li a.a5{top: 140px; left: -108px;-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.godMenuList ul li a.a6{top: 210px; left: -146px;-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.godMenuList ul li.current a{ opacity: 1;}
.godMenuList ul li.current a.a1{left: 45px;}
.godMenuList ul li.current a.a2{left: 6px;}
.godMenuList ul li.current a.a3{left: 0;}
.godMenuList ul li.current a.a4{left: -10px;}
.godMenuList ul li.current a.a5{left: 8px;}
.godMenuList ul li.current a.a6{left: 46px;}
.godMenuList ul li a span{ width: 8px; height: 8px; border-radius: 8px; background: #FFFFFF; position: absolute; right: 9px; top: 9px; display: block;}
.godMenuList ul li.second { position: absolute; left: 45px; top: 320px;}
.godMenuList ul li.second a{ width: 17px; height: 48px; padding: 20px 5px 0px 5px; line-height: 14px; text-align: center;}
.godMenuList ul li.second a.a7{top: 54px; left: -70px; -webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.godMenuList ul li.second a.a8{top: 52px; -webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.godMenuList ul li.second a.a9{top: 54px; left: 50px; -webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.godMenuList ul li.current a.a7{top:-4px;}
.godMenuList ul li.current a.a8{top:2px;}
.godMenuList ul li.current a.a9{top:-4px;}
.godMenuList ul li.three { position: absolute; left: 325px; top: 30px;}
.godMenuList ul li.three a{ padding-left: 30px; width: 130px;}
.godMenuList ul li.three a span{ left: 9px;}
.godMenuList ul li.three a.a10{top: -140px; left: 138px; -webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.godMenuList ul li.three a.a11{top: -70px; left: 110px;  -webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.godMenuList ul li.three a.a12{left: 100px; -webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.godMenuList ul li.three a.a13{top: 70px; left: 110px; -webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.godMenuList ul li.three a.a14{top: 140px; left: 135px; -webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.godMenuList ul li.current a.a10{left:-38px;}
.godMenuList ul li.current a.a11{left:-10px;}
.godMenuList ul li.current a.a12{left:0px;}
.godMenuList ul li.current a.a13{left:-10px;}
.godMenuList ul li.current a.a14{left:-35px;}


/**********************************NEWS********************************/
#news{ width: 100%; height: auto;}
#newsFocus{ width: 100%; height: 200px; background: #FFFFFF; padding: 50px 0px;}
.newsFocus{ max-width: 1000px; height: 200px; margin: auto;}
#newsFocus .newsFocusImg{ width: 355px; height: 200px; float: left; background: #008964; position: relative;}
#newsFocus .newsFocusImg .imgMask { width: 345px; height: 190px; border: 3px solid #FFFFFF; position: absolute; left: 2px; top: 2px;}
#newsFocus .newFocusInfo{ width: 625px; height: 200px; float: right; position: relative;}
#newsFocus .newFocusInfo .title{ width: 100%; height: auto; line-height: 28px; font-size: 24px;}
#newsFocus .newFocusInfo .date{ width: 100%; height: auto; line-height: 20px; margin-top: 10px; font-size: 14px;}
#newsFocus .newFocusInfo .details{ width: 100%; height: auto; margin-top: 15px; line-height: 24px; font-size: 12px;}
#newsFocus .newFocusInfo a{ display: block; width: 196px; height: 38px; background: #EA4A1C; line-height: 38px; text-align: c; position: absolute; left: 0px; bottom: 0px; text-align: center; color: #FFFFFF; text-transform: uppercase; font-size: 12px}
#newsList{ width: 100%; height: auto;}
#newsList ul li{width: 100%; height: 155px;}
#newsList ul li.even{ background: #FFFFFF;}
#newsList ul li .newsBox{ max-width: 1000px; height: 155px; margin: auto; overflow: hidden;}
#newsList ul li .newsBox .newsImage{ width: 240px; height: 135px; float: right; margin-top: 10px; background: #000000; position: relative;}
#newsList ul li .newsBox .newsImage .mask{ width: 230px; height: 125px; position: absolute; border: 2px solid #FFFFFF; left: 3px; top: 3px;}
#newsList ul li .newsBox .newsListLeft{ width: 740px; height: 135px; float: left; margin-top: 10px;}
#newsList ul li .newsBox .newsListLeft .date{ width: 100%; height: 30px; line-height: 30px; font-size: 18px; color: #9d9d9d; font-weight: bold; margin-top: 15px;}
#newsList ul li .newsBox .newsListLeft .title{ width: 100%; height: auto; line-height: 24px; color: #3E3E3E;}
#newsList ul li .newsBox .newsListLeft .more{ width: 100%; height: 30px; line-height: 30px; color: #EA4A1C; font-size: 12px; text-transform: uppercase; margin-top: 10px;}
#newsPage{ width: 100%; height: 150px;}
.newsPage{ max-width: 1000px; height: 95px; margin: auto; padding-top: 55px;}
.newsPage ul li{ width: 40px; height: 40px; border-radius: 40px; border: 2px solid #7f7f7f; color: #7f7f7f; line-height: 40px; text-align: center; cursor: pointer; float: left; margin-right: 15px;}
.newsPage ul li:hover,.newsPage ul li.current{ border-color: #008A63; color: #008A63;}
.brandNav{ width:100%; height:40px; line-height:40px; margin-top:50px; font-size:12px; position: relative;}
.brandNav .back{ position: absolute; right: 0px;}
.newsNext{ width:100%; height:auto; line-height:25px; overflow:hidden; font-size:12px;border-top:1px dotted #b8b8b6; border-bottom:1px dotted #b8b8b6; padding:10px 0px;}
.newsNext section{ width:50%; height:auto; float:left;}
.newsDetailPage{ width:100%; height:auto;}
.newsDetailTop{ width:100%; height:auto; text-align:center; padding:25px 0px;border-top:1px dotted #b8b8b6; border-bottom:1px dotted #b8b8b6; font-size:12px;}
.newsDetailTop h2{ display:block; width:90%; padding:15px 5%; line-height:30px; font-size:24px; color:#3e3e3e;}
.newsDetailTop span{ font-family: Georgia, "Times New Roman", Times, serif; color: #EA4A1C; font-size: 14px;}
.newsDetailTop b{ font-weight: normal; opacity: .6;}
.newsDetailShow{ width:100%; height:auto; line-height:28px; text-indent:28px; padding:35px 0px; color:#3e3e3e;}
.newsShare{ width:100%; height:auto; padding:15px 0px; overflow:hidden; margin-bottom:25px;}
.newsShare span{ float:right; font-weight:bold;}
.jiathis_style_24x24{ float:right;}


/**********************************JOIN********************************/
#joinUs{ width: 100%; height: 700px;}
.joinUs{ max-width: 1000px; height: 700px; margin: auto; position: relative;}
.joinUsTitle{ width: 220px; height: 70px; position: absolute; left: 50%; margin-left: -110px; top: 50px;}
.joinUsTitle figcaption{ font-size: 36px; color: #008A63;}
.joinUsTitle p{ text-transform: uppercase; opacity: .5; letter-spacing: 1px;}
.joinUsTitle img{ position: absolute; right: 0px; top: 5px;}
.joinUsInfo{ width: 100%; height: auto; padding-top: 15px; text-align: center; padding-top: 150px; font-size: 16px; opacity: .8;}
.joinUsForm{ width: 100%; height: auto; margin-top: 25px;}
.joinUsForm .joinUsFormSection{ width: 100%; height: 35px; text-transform: uppercase; margin-bottom: 15px;}
.joinUsForm .joinUsFormSection label{ width: 300px; height: 35px; float: left; line-height: 35px; text-align: right; font-size: 16px; opacity: 0.8;}
.joinUsForm .joinUsFormSection .input{ width: 290px; height: 33px; float: left; margin-left: 15px; border: 1px solid #dcdcdc; padding-left: 10px; color: #3E3E3E; font-size: 14px;}
.joinUsForm .joinUsFormSection .submit{ width: 176px; height: 49px; background: url(../img/submitBg.jpg) no-repeat; border: none; cursor: pointer; color: #FFFFFF; float: left; margin-left: 315px;}
.joinUsForm .joinUsFormSection .inputTips{ width: 350px; height: 35px; float: left; margin-left: 15px; line-height: 35px; font-size: 12px; color: #7F7F7F;}
.joinUsForm .joinUsFormSection .checkbox{ float: left; margin-top: 12px;}

.joinUsForm .joinUsFormSection .value{ float: left; line-height: 35px; display: block; margin-left: 5px; }
.joinUsForm .joinUsFormSection .inputTips span{ color: #ff0000; margin-right: 10px;}
.joinUsForm .joinUsFormSection textarea{ width: 580px; height: 120px; padding: 10px; float: left; margin-left: 15px; border: 1px solid #dcdcdc; font-size: 14px; color: #3E3E3E;}