.section .mod-title{padding-bottom:35px;text-align:center;color:#333}
.section .mode-list{ height: 484px; }
.section .mode-list .mode-item{ width: 260px; height: 484px; text-align: center; float: left; overflow: hidden; margin-left: -1px; background: #fff; transition: width .4s;}
.section .mode-list .mode-wrap{ width: 950px; height: 484px;}

.section .mode-list .mode-view h3{ font-size: 30px; margin-bottom: 19px; padding-top: 52px;}
.section .mode-list .mode-view h4{ font-size: 14px; color: #888; }
.section .mode-list .mode-view i{ display: block; width: 220px; height: 80px; margin: 40px auto 35px;}
.section .mode-list .mode-view a{ display: block; width: 120px; height: 30px; margin: 30px auto 35px; color:#FF0000; border:1px solid #FF0000; line-height:30px}
.section .mode-list .mode-view ul{ padding-left: 20px; }
.section .mode-list .mode-view li{ float: left; width: 90px; height: 30px; line-height: 30px; margin: 0 5px 10px 5px; background: #0070ad; color:#FFFFFF }
.section .mode-list .mode-detail{ float: left; color: #fff; width: 480px; height: 484px; background: #00CE52; opacity: 0;}
.section .mode-list .mode-detail .detail-left,
.section .mode-list .mode-detail .detail-right{ width: 240px; height:534px; }
.section .mode-list .mode-detail .detail-left{ float: left; background: #0070ad; overflow: hidden;}
.section .mode-list .mode-detail .detail-left i{ display: block; width: 120px; height: 80px; margin: 40px auto 35px; }
.section .mode-list .mode-detail .detail-left h3{ font-size: 30px; margin-bottom: 19px; padding-top: 52px;}
.section .mode-list .mode-detail .detail-left h4{ font-size: 14px; padding: 0 25px; line-height: 1.7;}
.section .mode-list .mode-detail .detail-left a{ display: block; width: 120px; height: 30px; margin: 30px auto 35px; color:#000000; border:1px solid #ffffff; line-height:30px; background:#FFFFFF;}
.section .mode-list .mode-detail .detail-right{ float: left; background: #05a2f7; color:#FFFFFF}
.section .mode-list .mode-detail .detail-right ul{ padding: 20px 20px 0 30px; }
.section .mode-list .mode-detail .detail-right li{ margin-bottom: 16px; }
.section .mode-list .mode-detail .detail-right li h3{ width: 83px; height: 28px; border: 1px solid #fff; line-height: 28px; margin-bottom: 11px;font-size: 16px;}
.section .mode-list .mode-detail .detail-right li p{ text-align: left; line-height: 1.7; font-size: 14px;}
.section .mode-list .mode-detail .detail-right .get{ width: 100px; height: 31px; line-height: 31px; padding-left: 15px; color: #00CE52; display: block; margin-left: 30px; font-size: 16px; background: #fff url(../images/04-jt.png) no-repeat 84px center; text-align: left;}
.section .mode-list .mode-item-1 .mode-view i{ background: url(/images/hongzhouLOGO2.png) no-repeat center 100%;}
.section .mode-list .mode-item-1 .mode-detail .detail-left i{ background: url(/images/hongzhouLOGO3.png) no-repeat center 100%; }
.section .mode-list .mode-item-2 .mode-view i{ background: url(/images/hongzhouLOGO2.png) no-repeat center 100%;}
.section .mode-list .mode-item-2 .mode-detail .detail-left i{ background: url(/images/hongzhouLOGO3.png) no-repeat center 100%; }
.section .mode-list .mode-item-3 .mode-view i{ background: url(/images/hongzhouLOGO2.png) no-repeat center 100%;}
.section .mode-list .mode-item-3 .mode-detail .detail-left i{ background: url(/images/hongzhouLOGO3.png) no-repeat center 100%; }
.section .mode-list .mode-item-4 .mode-view i{ background: url(/images/hongzhouLOGO2.png) no-repeat center 100%;}
.section .mode-list .mode-item-4 .mode-detail .detail-left i{ background: url(/images/hongzhouLOGO3.png) no-repeat center 100%; }
.section .mode-list .mode-item.active{ width: 480px; }
.section .mode-list .mode-item.active .mode-wrap{ margin-left: -260px; opacity: 1; }
.section .mode-list .mode-item.active .mode-view{ opacity: 0; }
.section .mode-list .mode-item.active .mode-detail{ opacity: 1; }
.mode-wrapz{ width:49%; padding:10px 0; border:1px solid #DCDCDC; margin:0.5%; text-align:center; float:left;box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */}
.mode-wrapz h3{ font-size:18px; font-weight:600; color:#990000}
.mode-wrapz h4{ font-size:15px; font-weight:600; color:#0070ad}
@media (min-width: 767px) {
.section .container{margin:0 auto}
.section{background:#F4F4F4;padding:0 0 80px 0}
.section .mod-title h2{font-size:36px;margin-bottom:17px;}
.section .mode-list .mode-view{ float: left; width: 268px; height: 482px; border: 1px solid #DCDCDC; opacity: 1;}}

@media (max-width: 767px) {
.section .container{width:100%;margin:0 auto}
.section{background:#F4F4F4;padding:0 0 10px 0}
.section .mod-title h2{font-size:36px;margin-bottom:17px;}
.section .mode-list .mode-view{ float: left; width: 50%; height: 282px; border: 1px solid #DCDCDC; opacity: 1;}}