﻿/* ---------------banner-------------- */
.cc_banner{ height: 440px; overflow: hidden; background: #252D48;}
.cc_nav_list{ width: 232px; height: 430px; background: #fff;}
.cc_nav_list ul li{ height: 45px; padding: 0px 15px; overflow: hidden; margin-top: 15px;}
.cc_nav_list ul li .title{ width: 180px; display: inline-block; height: 100%; float: left;}
.cc_nav_list ul li p{ width: 100%; height: 22px; line-height: 22px; font-size: 16px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cc_nav_list ul li span{ display: block; width: 100%; line-height: 22px; font-size: 12px;float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cc_nav_list ul li span a{ float: left; display: inline-block; margin-right: 10px;  color: #999999;}
.cc_nav_list ul li i{ display: inline-block; float: right; height: 100%; line-height: 30px;}
.cc_nav_list ul li a:hover{ color: #E1251B;}
.cc_banner_con{ width: 748px; height: 430px; padding-top: 10px; margin-left: 10px; overflow: hidden;}
.cc_banner_c{ height: 420px; overflow: hidden; position: relative;}
.cc_banner_c .swiper-container { width: 100%; height: 100%;}
.cc_banner_c .swiper-slide {text-align: center;}
.cc_banner_c .swiper-slide img{ width: 100%; height: 100%;}
.cc_banner_c .swiper-pagination-bullet{width: 48px; border-radius: 0;height: 4px;background: rgba(255, 255, 255, 0.5); opacity: 1;}
.cc_banner_c .swiper-pagination-bullet-active{background: #E1251B;}
.cc_banner_r{ width: 200px; height: 430px; padding-top: 10px;}
.cc_banner_r_c{ height: 420px; background: linear-gradient(#FCE3B6, #F9BD95); padding: 0px 10px; text-align: center;}
.cc_banner_r .title{ color: #E1251B; line-height: 22px; padding-top: 13px; font-size: 16px;}
.cc_banner_r .dev{ color: #FF804A; font-size: 12px; line-height: 24px; margin-bottom: 30px;}
.cc_banner_rc{ width: 180px; height: 207px; border-radius: 5px; background: #fff; box-shadow: 0px 3px 6px rgba(255, 76, 0, 0.1);}
.cc_banner_rc p{ padding-top: 2px; padding-bottom: 5px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cc_banner_rc img{ height: 123px; width: auto; padding-top: 10px;}
.cc_banner_rc a{ width: 105px; height: 26px; background: #E1251B; border-radius: 100px; display: block; color: #fff; line-height: 26px; margin: 0 auto;}
.cc_banner_rc_x{ height: 102px; margin-top: 12px;}
.cc_banner_rc_x img{ width: 100%; height: 102px;}

/* ---------------四个广告位-------------- */
.cc_streamer{ height: 54px; background: #E1251B; border-radius: 0px 0px 20px 20px;}
.cc_streamer ul{ width: 800px; height: 100%; line-height: 54px;}
.cc_streamer ul li{ float: left; margin-right: 58px; font-size: 16px;}
.cc_streamer ul li img{ padding-top: 16px;}
.cc_streamer ul li:first-child{ margin-left: 28px;}
.cc_streamer_r{ height: 54px; width: auto; line-height: 54px;}
.cc_streamer_r p{ float: left; }
.cc_streamer_r p img{ padding-top: 14px;}
.cc_streamer_r a{ display: inline-block; width: 89px; height: 22px; float: left; position: relative; top: 16px; line-height: 22px; color: #E1251B; background: #fff; text-align: center; font-size: 12px; margin-left: 28px; border-radius: 100px; margin-right: 35px;}
.cc_streamer_r a:hover{ opacity: 0.8;}
.cc_img{ height: 293px; margin-top: 13px; background: url(../images/cc_img_bj.png) center no-repeat;}
.cc_img ul{ padding-top: 38px;}
.cc_img ul li{ float: left; height: 110px; width: 289px; margin-left: 8px;}
.cc_img ul li img{ width: 100%; height: 100%;}
.cc_img ul li:first-child{ margin-left: 10px;}
.cc_img .cc_img_a{ height: 120px; display: block;}

/* ---------------推荐产品-------------- */
.cc_recommend{ height: 328px; background: url(../images/chuchouji/ff_recommend_bj.jpg) center no-repeat; padding: 22px 24px 0px 24px; }
.cc_recommend_top{ height: 110px;}
.cc_recommend_tl{ width: 280px; height: 110px; color: #fff;}
.cc_recommend_tl .title{ font-size: 20px; line-height: 30px;}
.cc_recommend_tl span{ display: block; width: 37px; height: 2px; background: #fff; margin: 12px 0px;}
.cc_recommend_tl p{ color: rgba(255, 255, 255, 0.6);}
.cc_recommend_tr{ width: 830px; height: 93px; margin-right: 35px; padding-top: 10px;}
.cc_recommend_tr ul{ width: 100%; height: 100%; background: rgba(254, 102, 0, 0.2); border: 1px solid rgba(254, 102, 0, 0.8);}
.cc_recommend_tr ul li{ width: 25%; height: 100%; float: left; border-left: 1px solid rgba(254, 102, 0, 0.3); color: #fff; padding: 14px 13px;}
.cc_recommend_tr ul li:first-child{ border: 0px;}
.cc_recommend_tr ul li p{ font-size: 12px; color: rgba(255, 255, 255, 0.6); line-height: 20px;}
.cc_recommend_tr ul li .title{ font-weight: bold; margin-bottom: 5px;}
.cc_recommend_con{ height: 153px; margin-top: 30px;}
.cc_recommend_con ul li{ width: 258px; height: 153px; float: left; margin-left: 23px; padding: 24px 18px 0px 18px;}
.cc_recommend_con ul li .title{ font-size: 18px; color: #E1251B; font-weight: bold; margin-bottom: 6px; margin-top: 8px;}
.cc_recommend_con ul li p{ font-size: 12px;}
.cc_recommend_con ul li a{ width: 68px; height: 24px; margin-top: 20px; background: #E1251B; color: #fff; text-align: center; line-height: 24px; border-radius: 2px; display: block; font-size: 12px;}
.cc_recommend_con ul li a:hover{ opacity: 0.8;}

/* ---------------更多产品-------------- */
.cc_shop_more{ height: 295px; margin-top: 32px; background: url(../images/chuchouji/cc_icon_more.jpg) center no-repeat; overflow: hidden;}
.cc_shop_more ul{ width: 990px; height: 269px; float: left;}
.cc_shop_more ul li{ height: 100%; text-align: center; width: 197px; float: left; border-left: 1px solid #E6E6E6;}
.cc_shop_more ul li:first-child{ border: 0px;}
.cc_shop_more ul li img{ width: 164px; height: 164px; padding-top: 14px;}
.cc_shop_more ul li .name{ font-size: 12px; text-align: left; line-height: 18px; margin-top: 6px; padding-left: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cc_shop_more ul li .dev{ font-size: 12px; text-align: left; color: #666666; line-height: 20px; padding-left: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cc_shop_more ul li p{ height: 30px; margin-top: 5px;}
.cc_shop_more ul li p span{ display: inline-block;float: left; line-height: 30px; font-size: 18px; font-weight: bold; color: #E1251B; padding-left: 18px;}
.cc_shop_more ul li p i{ float: right; margin-right: 18px; width: 30px; height: 30px; background: #E1251B; color: #fff; line-height: 30px; text-align: center; font-size: 18px;}
.cc_shop_more ul li:hover .name{ color: #E1251B;}
.cc_shop_more .cc_shop_more_j{ position: absolute; z-index: 2; width: 0; height: 0; border-top: 20px solid #E1251B; border-right: 20px solid transparent;}
.cc_shop_more_r{ width: 210px; height: 100%; text-align: center; color: #fff; padding-top: 15px;}
.cc_shop_more_r .title{ margin-top: 3px; line-height: 28px; font-size: 24px; font-weight: bold;}
.cc_shop_more_r i{ width: 40px; height: 4px; background: #FFFFFF; display: block; margin: 15px auto;}
.cc_shop_more_r .more{ font-size: 28px; font-weight: bold;}
.cc_shop_more_r a{ width: 105px; height: 25px; line-height: 25px; background: #fff; display: block; margin: 0 auto; border-radius: 100px; color: #E1251B; margin-top: 25px;}
.cc_shop_more_r p{ font-size: 44px; font-weight: bold; margin-top: 20px; text-shadow: 0px 4px 2px rgba(255, 76, 0, 0.7);}
.cc_shop_more_r a:hover{ opacity: 0.8;}

/* ---------------产品分类-------------- */
.cc_shop{ margin-top: 25px; height: auto;}
.cc_shop_title{ height: 35px; line-height: 35px; overflow: hidden;}
.cc_shop_title .title{ display: inline-block; font-size: 26px; font-weight: bold;}
.cc_shop_title p{ display: inline-block; color: #666666; margin-left: 12px;}
.cc_shop_con{ background: #FFFFFF; margin-top: 25px; height: 616px; overflow: hidden;}
.cc_shop_cl{ width: 194px; height: 100%; background: url(../images/chuchouji/cc_bj.jpg) center no-repeat; padding: 36px 24px; position: relative;}
.cc_shop_cl .name{ font-size: 32px; font-weight: bold; color: #FFFFFF; padding-left: 19px;}
.cc_shop_cl p{ width: auto; height: 35px; border-radius: 13px; display: block; margin-top: 15px; font-size: 16px;}
.cc_shop_cl a.list{ width: auto; height: 35px; border-radius: 13px; line-height: 35px; display: inline-block; color: #FFFFFF; font-size: 16px; padding: 0px 19px;}
.cc_shop_cl a.list:hover{ background: #2B3856;}
.cc_shop_cl a.link{ color: #FFFFFF; position: absolute; bottom: 90px; padding-left: 19px;  font-size: 16px;}



.cc_shop_cr{ width: 1006px; height: 100%;}
.cc_shop_cr ul li{ width: 201px; height: 309px; padding: 12px; float: left; border-right: 1px solid #F6F6F6; border-bottom: 1px solid #F6F6F6;}
.cc_shop_cr ul li:nth-child(5n){ border-right: 0px;}
.cc_shop_cr ul li img{ width: 100%; height: 176px;}
.cc_shop_cr ul li p{ line-height: 24px; margin-top: 8px; height: 48px; margin-bottom: 15px; text-overflow: ellipsis; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2;  line-clamp: 2;  -webkit-box-orient: vertical;}
.cc_shop_cr ul li .price{ float: left; width: 100px; line-height: 24px; font-family: "Roboto"; font-size: 16px; line-height: 24px; color: #E1251B; font-weight: bold;}
.cc_shop_cr ul li .price span{ font-size: 22px;}
.cc_shop_cr ul li .self{ float: right; width: 38px; height: 24px; background: #0082C3; border-radius: 2px; font-size: 14px; line-height: 24px; color: #fff; text-align: center; position: relative; top: 2px;}
.cc_shop_cr ul li:hover p{ color: #E1251B;}
.cc_shop_cr ul li .price a{ color: #E1251B;}

/* ---------------新闻-------------- */
.cc_news{ margin-top: 40px; height: auto; margin-bottom: 35px;}
.cc_news_title{ height: 40px; margin-bottom: 25px; overflow: hidden;}
.cc_news_title_l{ width: auto;}
.cc_news_title_l .title{ display: inline-block; font-size: 30px; line-height: 40px;}
.cc_news_title_l p{ color: #666666; margin-left: 8px; display: inline-block;}
.cc_news_title a{ width: 180px; height: 40px; border: 1px solid #E1251B; color: #E1251B; border-radius: 22px; float: right; display: inline-block; line-height: 38px; text-align: center;}
.cc_news_title a i{ width: 18px; height: 18px; border-radius: 50%; line-height: 18px; text-align: center; background: #E1251B; color: #fff; font-size: 14px; margin-left: 10px;}
.cc_news_title a:hover{ opacity: 0.8;}
.cc_news_con{ height: 398px;}
.cc_news_cl{ width: 512px; height: 100%; background: #FFFFFF;}
.cc_news_cl img{ width: 100%; height: 320px;}
.cc_news_cl p{ float: left; line-height: 78px; padding-left: 10px; width: 450px; color: #E1251B; font-size: 18px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cc_news_cl i{ display: block; float: left; color: #666666; line-height: 78px; font-size: 24px;}
.cc_news_cl a:hover i{ color: #E1251B;}
.cc_news_cr{ width: 666px; height: 100%; overflow: hidden;}
.cc_news_cr ul li{ height: 120px; background: #FFFFFF; width: 100%; margin-bottom: 19px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); padding: 23px 0px;}
.cc_news_cr ul li .time{ width: 118px; border-right: 1px solid #D1D3D6; text-align: center; height: 100%;}
.cc_news_cr ul li .time .title{ font-size: 36px; color: #E1251B;}
.cc_news_cr ul li .time p{ color: #666666;}
.cc_news_cr ul li .content{ width: 480px; margin-left: 30px;}
.cc_news_cr ul li .content .title{ font-size: 16px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cc_news_cr ul li .content p{ font-size: 12px; color: #999999; line-height: 20px; margin-top: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cc_news_cr ul li .content i{ display: block; float: left; color: #999999; margin-top: 6px; font-size: 24px;}
.cc_news_cr ul li:hover .title{ color: #E1251B;}



