/*------------ branch ------------*/

.branch-list {}

.branch-list>li {
    display: table;
    width: 100%;
    margin: 0 0 70px;
}


.branch-list .pic-box {
    width: 260px;
    display: table-cell;
    position: relative;
}

.branch-list .pic {
    position: relative;
}

.branch-list .pic:before {
    content: "";
    width: 34px;
    height: 34px;
    display: inline-block;
    background: url('../../images/common/branch/ic.png');
    position: absolute;
    top: 0;
    left: 0;
    z-index: 80;
    opacity: 0;
    transition: all .2s;
    pointer-events: none;
}

.branch-list .pic-box:hover .pic:before {
    opacity: 1;
}

.branch-list .pic-box:before {
    content: "";
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    position: absolute;
    border: 1px solid #fff;
    z-index: 15;
    transition: all .2s;
    pointer-events: none;
}

.branch-list .pic-box:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(247, 247, 247, .65);
    transition: all .2s;
    opacity: 0;
    pointer-events: none;
}

.branch-list .pic-box:hover:before {
    border-color: #182D0B;
}

.branch-list .pic-box:hover:after {
    opacity: 1;
}

.branch-list .txt {
    display: table-cell;
    vertical-align: top;
    border: 1px solid #EFD5B9;
    background: rgba(247, 247, 247, 0.60);
    line-height: 1.2;
    padding: 25px 55px 25px 35px;
    position: relative;
    height: 260px;
    box-sizing: border-box;
}

.branch-list .title {
    color: #B21807;
    font-size: 23px;
    letter-spacing: 3px;
    font-weight: bold;
    margin: 0 0 15px;
}

.info li {
    padding: 12px 10px;
    font-size: 16px;
    letter-spacing: 3px;
}

.info li+li {
    background: url(../../images/common/border_h.png) repeat-x top;
}

.info p {
    margin: 0;
    display: inline-block;
}

.info p+p {
    margin: 0 0 0 15px;
}

.info b {
    font-size: 17px;
    color: #000000;
    font-weight: normal;
    margin: 0 5px 0 0;
}

.branch-list .map {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#69aa2d+0,2e5d3a+100 */
    background: rgb(105, 170, 45);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(105, 170, 45, 1) 0%, rgba(46, 93, 58, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(105, 170, 45, 1) 0%, rgba(46, 93, 58, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(105, 170, 45, 1) 0%, rgba(46, 93, 58, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69aa2d', endColorstr='#2e5d3a', GradientType=0);
    /* IE6-9 */
    color: #FFFFFF;
    font-size: 17px;
    width: 235px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    letter-spacing: 2px;
    position: absolute;
    bottom: -15px;
    left: -35px;
    z-index: 30;
}

.branch-list .map i {
    width: 34px;
    height: 34px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 0 0;
    background: url('../../images/common/branch/ic.png');
    background-position: 0 100%;
}

.branch-list .map:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b21807+0,771004+100 */
    background: rgb(178, 24, 7);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(178, 24, 7, 1) 0%, rgba(119, 16, 4, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(178, 24, 7, 1) 0%, rgba(119, 16, 4, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(178, 24, 7, 1) 0%, rgba(119, 16, 4, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b21807', endColorstr='#771004', GradientType=0);
    /* IE6-9 */
}



/*------------ rwd ------------*/

@media screen and (max-width: 1200px) {
    .branch-list .txt {
        padding: 25px 35px;
    }
    .branch-list .map {
        position: static;
        float: right;
        height: 35px;
        line-height: 35px;
    }
}

@media screen and (max-width: 950px) {
    .branch-list>li,
    .branch-list .pic-box,
    .branch-list .txt {
        display: block;
        height: auto;
        margin: 0 auto;
        text-align: center;
    }
    .branch-list>li{
        margin: 0 0 70px;
    }
    .branch-list .map{
        float: none;
        margin: 10px auto 0;
    }
    .branch-list .txt{
        padding: 25px 15px;
    }
}

@media screen and (max-width: 600px) {
    .info li{
        letter-spacing: 1px;
        line-height: 1.4;
    }
    .info p{
        display: block;
    }
    .info p+p {
        margin: 10px 0 0 0;
    }
}