﻿
.section { padding: 1px 0; }
    .section .row { margin: 0 -5px; }
    .section .col-md-8, .section .col-md-6, .section .col-md-4, .section .col-md-3, .section .col-md-2 { padding: 0 5px; }

    .section .title { text-align: center; }
        .section .title h3 { font-size: 30px; color: #333; }
        .section .title p { font-size: 21px; color: #333; line-height: 22px; max-width: 760px; margin: 0 auto; }

#secService { background: #fff; }
    #secService .title { text-align: center; }
        #secService .title h2 { font-family: "open_sanslight"; color: #0090da; font-size: 48px; text-transform: uppercase; display: none; }
        #secService .title h3 { color: #666; font-size: 32px; margin: 10px 0 20px 0; }
        #secService .title p { color: #808080; font-size: 14px; line-height: 22px; padding: 10px; }
    #secService .item {  }
        #secService .item li { width: 25%; float: left; }
            #secService .item li a { display: block; margin: 8px; text-align: center; }
                #secService .item li a .pic { padding: 0 70px 35px 0; background: url(../images/bg_icon_service.png) right bottom no-repeat; }
                #secService .item li a img { width: 200px; border-radius: 50%; background: #0090da; }
                #secService .item li a:hover img { background: #39b44a; }
                #secService .item li a .selected img { background: #39b44a; }
            #secService .item li h3 { color: #666; font-size: 20px; padding-right: 67px; }
            #secService .item li .intro { color: #808080; font-size: 13px; }
        #secService .item div.more { margin-top: 30px; }
            #secService .item div.more .more { background: #0090da; color: #fff; }

#secCase .row { background: #efefef; }
    #secCase .item1 { margin: 40px auto 0; text-align: center; max-width: 800px; }
        #secCase .item1 a { line-height: 32px; font-size: 18px; border-radius: 5px; margin: 20px 1%; padding: 2px 0; width: 22%; display: inline-block; background: #fff; color: #666; border: 1px solid #999; }
            #secCase .item1 a:hover, #secCase .item1 a.selected { background: #478ed4; color: #fff; }
    #secCase .row { margin: 0px; }
        #secCase .row li { padding: 0px; width: 25%; float: left; text-align: center; position: relative; z-index: 10; }
            #secCase .row li .item { margin: 8px; }
                #secCase .row li .item:hover { }
            #secCase .row li a { display: block; z-index: 10; }
                #secCase .row li a:hover { z-index: 999; }
                    #secCase .row li a:hover .item { }
                        #secCase .row li a:hover .item img { opacity: 1; }
                        #secCase .row li a:hover .item .intro { opacity: 1; background: #fff; }
        #secCase .row .item .pic { overflow: hidden; border-radius: 44px; -moz-border-radius: 44px; -webkit-border-radius: 44px; -webkit-transform: scale(1.0,1.0); -moz-transform: scale(1.0,1.0); -ms-transform: scale(1.0,1.0); -o-transform: scale(1.0,1.0); transform: scale(1.0,1.0); }
            #secCase .row .item .pic:hover { border-radius: 44px; -moz-border-radius: 44px; -webkit-border-radius: 44px; }
        #secCase .row .item img { width: 100%; }
            #secCase .row .item img:hover { }
        #secCase .row .item h3 { height: 24px; margin: 10px 0; }
        #secCase .row .item .intro { padding: 2px; opacity: 0.5; }
            #secCase .row .item .intro div { line-height: 22px; height: 22px; overflow: hidden; }
    

#secAboutus { background: #fff; }
    #secAboutus .divAboutus { position: relative; background: url(../images/bg_map_03.jpg) no-repeat right; background-size: 63% 100%; }
        #secAboutus .divAboutus img { display: none; }
        #secAboutus .divAboutus .left { width: 40%; background: url(../images/bg_map_01.jpg) no-repeat center; background-size: 100% 100%; }
        #secAboutus .divAboutus .right { width: 60%; }
            #secAboutus .divAboutus .right a { position: absolute; height: 100%; display: block; width: 60%; }
                #secAboutus .divAboutus .right a:hover { background: none; }
        #secAboutus .divAboutus .intro { padding: 130px 52px 5px; text-indent: 2em; color: #333; font-size: 15px; }
        #secAboutus .divAboutus div.more { text-align: right; }
            #secAboutus .divAboutus div.more .more { background: none; color: #333; border: 1px solid #333; border-radius: 5px; display: inline-block; text-align: center; margin: 0 10px; padding: 3px 12px; min-width: 60px; }

#secClient { background: url(../images/bg_client.jpg) center no-repeat; }
    #secClient .title { text-align: center; }
        #secClient .title h2 { font-family: "open_sanslight"; color: #fff; font-size: 46px; text-transform: uppercase; }
        #secClient .title h3 { color: #efefef; font-size: 28px; margin: 10px 0 20px 0; }
    #secClient .main { margin: 40px 0; position: relative; }
        #secClient .main .left { position: absolute; cursor: pointer; width: 40px; height: 40px; left: -30px; top: 50%; margin-top: -20px; }
        #secClient .main .right { position: absolute; cursor: pointer; width: 40px; height: 40px; right: -30px; top: 50%; margin-top: -20px; }
        #secClient .main i.fa { width: 40px; height: 40px; display: block; line-height: 40px; text-align: center; font-size: 20px; color: #efefef; }
        #secClient .main li { width: 20%; float: left; }
        #secClient .main a { display: block; margin: 8px; text-align: center; }
            #secClient .main a img { width: 90%; }
        #secClient .main h3 { color: #fff; font-size: 20px; }
        #secClient .main .intro { display: none; }

@media (max-width: 768px) {

    .bx-wrapper .bx-controls { bottom: -10px; }
    .section .title h3 { font-size: 26px; }


    #secCase { }
    #secClient .main .left { display: none; }
    #secClient .main .right { display: none; }
    #secCase .item1 { }
        #secCase .item1 a { line-height: 26px; border-radius: 8px; color: #ccc; background: #333; margin: 10px 5px; padding: 2px 5px; display: inline-block; }
    #secCase .item2 { display: none; }
        #secCase .item2 a { margin: 0px 5px; padding: 2px 5px; border: 1px solid #efefef; }
    #secCase .row li { width: 50%; }
    #secCase .row .item .pic { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
    #secCase .row .item .intro { padding: 5px 10px; }
    #secCase .row .item h3 { font-size: 12px; line-height: 20px; margin: 0; }
    #secCase .row .item .pic:hover {  border-radius: 10px;  -moz-border-radius: 10px; -webkit-border-radius: 10px; }

    #secService { height: auto; }
        #secService .title { }
            #secService .title p { }
                #secService .title p br { display: none; }
        #secService .item { margin: 20px 0 0 0; }
            #secService .item li { width: 50%; float: left; margin: 10px 0 0 0; }
                #secService .item li a .pic { background: none; padding: 5px; }
                #secService .item li a img { width: 60%; display: block; margin: 0 auto; }
                #secService .item li h3 { margin: 10px 0 0 0; font-size: 15px; padding: 0; }
                #secService .item li .intro { display: none; }

    #secAboutus { padding: 0px 0 0 0; margin-bottom: 20px; }
        #secAboutus .divAboutus { background: none; }
            #secAboutus .divAboutus img { width: 100%; display: block; }
            #secAboutus .divAboutus .left { width: 100%; float: none; background: #0ABCF8; position: relative; }
            #secAboutus .divAboutus .intro { position: absolute; top: 28%; left: 0; padding: 10px; text-indent: 2em; color: #fff; font-size: 16px; line-height: 30px; }
                #secAboutus .divAboutus .intro p { margin: 0; }
            #secAboutus .divAboutus div.more { }
                #secAboutus .divAboutus div.more .more { margin: 0; padding: 0; font-size: 14px; position: absolute; right: 12px; bottom: 10%; top: auto; }
            #secAboutus .divAboutus .right { width: 100%; float: none; background: none; position: relative; }
                #secAboutus .divAboutus .right a { position: static; display: block; width: auto; height: auto; }

        #secAboutus .h10 { display: none; }
        #secAboutus .h50 { height: 10px; }
        #secAboutus br { display: none; }
        #secAboutus span { display: none; }
        #secAboutus .more { margin: 10px 0; }

    #secNews { }
        #secNews .row li { width: 100%; float: none; }

    #secContactus { }
        #secContactus h3 { padding: 0 10px; }
        #secContactus .contact .main { padding: 10px 0 20px 0; }
            #secContactus .contact .main p.tel { font-size: 20px; padding: 5px 15px; }
        #secContactus .feedback .main { padding: 0 10px; }
        #secContactus .feedback .controls { margin-bottom: 0px; }

    #secClient .main li { width: 50%; }
}

@media (max-width: 767px) {
    #secAboutus .divAboutus .intro { font-size: 13px; line-height: 22px; top: 25%; }
    #secAboutus .divAboutus div.more .more { bottom: 10px; }
}


@media (max-width: 400px) {

    #secAboutus .divAboutus .left { padding-bottom: 60px; }

    #secCase .item1 a { width: auto; margin: 0 10px 10px; }
}