.main .ccmain { background: #fff; border-bottom: 8px solid #333631;}
.main .ccmain .ccmain_l { width: 24%;}
.main .ccmain .ccmain_l li { width: 100%;}
.main .ccmain .ccmain_l li a.pic { position: relative; width: 100%; padding: 32% 0; display: block;}
.main .ccmain .ccmain_l li a.pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.main .ccmain .ccmain_l li p { line-height: 20px; font-size: 10px; text-align: center; margin-bottom: 8px;}

/* banner */
.main .ccmain .ccmain_r { width: 74%; margin-bottom: 20px;}
.main .ccmain .ccmain_r .slide { position: relative; width: 98%; overflow: hidden; margin: 20px 0;}
.main .ccmain .ccmain_r .slide .hd { position: absolute; z-index: 1; bottom: 15px; right: 10px;}
.main .ccmain .ccmain_r .slide .hd li { float: left; width: 13px; height: 13px; display: block; overflow: hidden; text-indent: 20px; cursor: pointer;
    margin-left: 13px; background: #fff; border-radius: 8px; filter: alpha(opacity=40); opacity: 0.4;}
.main .ccmain .ccmain_r .slide .hd li.on { background: #fff; filter: alpha(opacity=100); opacity:1;}
.main .ccmain .ccmain_r .slide .prev, .main .ccmain .ccmain_r .slide .next { position: absolute; left: 3%; top: 50%; width: 43px; height: 93px;
    margin-top: -46px; background: url('../img/slider-arrow.png') no-repeat; display: block; filter: alpha(opacity=50); opacity: 0.5;}
.main .ccmain .ccmain_r .slide .next { left: auto; right: 3%; background-position: right;}
.main .ccmain .ccmain_r .slide .prev:hover, .main .ccmain .ccmain_r .slide .next:hover { filter: alpha(opacity=70) !important; opacity: 0.7 !important;}
.main .ccmain .ccmain_r .slide .bd { width: 100%; height: 507px; position: relative; overflow: hidden;}
.main .ccmain .ccmain_r .slide .bd li { width: 100%; height: 507px; background-color: #fff; position: relative;}
.main .ccmain .ccmain_r .slide .bd li img { width: 100%; height: 507px; display: block;}
.main .ccmain .ccmain_r .slide .bd li p { position: absolute; left: 0; bottom: 0; line-height: 50px; height: 50px; width: 100%; background: url(../img/black.png);}
.main .ccmain .ccmain_r .slide .bd li p span { width: 60%; display: block; white-space: nowrap; overflow: hidden; padding-left: 20px; color: #fff; font-size: 16px;}
.main .ccmain .ccmain_r .ccmain_rm { margin-top: 30px; padding-right: 20px;}
.main .ccmain .ccmain_r .ccmain_rm h2 { margin: 20px 0 0 0; color: #2c4f54; font-size: 22px; line-height: 60px; letter-spacing: 1px; text-align: center;}
.main .ccmain .ccmain_r .ccmain_rm p { text-indent: 2em; font-size: 14px; line-height: 30px; color: #000;}
.main .ccmain .ccmain_r .ccmain_rm p img, .main .ccmain .ccmain_r .ccmain_rm img { max-width: 100%; width: auto; height: auto; display: block; margin: 0 auto;}
.main .ccmain .ccmain_r .ccmain_rm .case li { float: left; width: 24.25%; margin-right: 1%;}
.main .ccmain .ccmain_r .ccmain_rm .case li.mr0 { margin-right: 0;}
.main .ccmain .ccmain_r .ccmain_rm .case li a.pic { position: relative; width: 100%; padding: 50% 0; display: block;}
.main .ccmain .ccmain_r .ccmain_rm .case li a.pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.main .ccmain .ccmain_r .ccmain_rm .case li a.txt { text-align: center; height: 30px; line-height: 30px; font-size: 14px; margin-bottom: 8px;
    white-space: normal; overflow: hidden; text-overflow: ellipsis; display: block;}

.main .ccmain_b { font-size: 14px; line-height: 40px; text-align: right; color: #000;}

/* -- 翻页效果 -- */
.one1 { text-align: center; line-height: 24px;}
.one1 li { margin-right: 15px; float: left; line-height: 15px; border-bottom: 0;}
.one1 li a { background: #85C51E; display: block; width: 15px; height: 10px; color: #fff;}

.two { height: 30px; margin: 0 auto; line-height: 30px; margin-top: 20px; border-top: 1px dashed #d1d1d1;}
.two .twol { float: left; padding-left: 15px; font-size: 13px;}
.two a { padding-left: 15px;}
.two a:hover { color: #373737; text-decoration: underline;}
.two .twor { float: right; padding-right: 15px; font-size: 13px;}

@media screen and ( max-width: 1920px ) {}
@media screen and ( max-width: 1680px ) {}
@media screen and ( max-width: 1440px ) {}
@media screen and ( max-width: 1366px ) {}
@media screen and ( max-width: 1280px ) {}
@media screen and ( max-width: 1024px ) {
    .main .ccmain .ccmain_r .slide .bd, .main .ccmain .ccmain_r .slide .bd li, .main .ccmain .ccmain_r .slide .bd li img { height: 357px;}
}
@media screen and ( max-width: 768px ) {
    .main .ccmain .ccmain_l { width: 24.5%;}
    .main .ccmain .ccmain_l li p { line-height: 25px; font-size: 12px; margin-bottom: 0;}

    .main .ccmain .ccmain_r .slide { margin: .5em 0;}
    .main .ccmain .ccmain_r .slide .hd { bottom: 10px;}
    .main .ccmain .ccmain_r .slide .hd li { width: 10px; height: 10px; margin-left: 8px;}
    .main .ccmain .ccmain_r .slide .bd, .main .ccmain .ccmain_r .slide .bd li, .main .ccmain .ccmain_r .slide .bd li img { height: 207px;}
    .main .ccmain .ccmain_r .slide .bd li p { line-height: 35px; height: 35px;}
    .main .ccmain .ccmain_r .slide .bd li p span { padding-left: .5em; font-size: 14px;}
    
    .main .ccmain .ccmain_r .ccmain_rm { margin-top: 10px; padding-right: .4em;}
    .main .ccmain .ccmain_r .ccmain_rm h2 { margin: 0; line-height: 50px;}

    .main .ccmain .ccmain_r .ccmain_rm .case li { float: left; width: 49.5%; margin-right: 1%;}
    .main .ccmain .ccmain_r .ccmain_rm .case li:nth-child(2n) { margin-right: 0;}

    .main .ccmain .ccmain_r .slide .prev, .main .ccmain .ccmain_r .slide .next { display: none;}
}
@media screen and ( max-width: 414px ) {}
@media screen and ( max-width: 400px ) {
    .main .ccmain .ccmain_r .slide .bd, .main .ccmain .ccmain_r .slide .bd li, .main .ccmain .ccmain_r .slide .bd li img { height: 197px;}
}
@media screen and ( max-width: 375px ) {}
@media screen and ( max-width: 360px ) {
    .main .ccmain_b { font-size: 12px;}
}
@media screen and ( max-width: 355px ) and ( min-width: 320px ) {}