/* ------------------------------------
    Base
------------------------------------ */

img { vertical-align: middle; max-width: 100%; }

/* ------------------------------------
    Header
------------------------------------ */

.main-header { line-height: 100px; height: 100px; }

.header-right { text-align: right; }

.top-link { display: inline-block; color: #848484; font-size: 14px; margin-left: 20px; font-family: 'Roboto', sans-serif; }
.top-link a { color: #848484; }
.mail-link .fa { color: #08b596; }
.phone-link .fa { color: #08b596; }

.top-cta a { display: inline-block; font-size:14px; letter-spacing:1px; font-family: 'Roboto', sans-serif; color: #FFF; text-transform: uppercase; background: #08b596; line-height: 1; padding: 12px 20px; border-radius: 2px; position: relative; transition: all 0.3s; -webkit-transition: all 0.3s; }
.top-cta a:after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0px; background: #fff;  }
.top-cta a:hover { background: #FF8033; }


/* ------------------------------------
    Navigation
------------------------------------ */

.site-nav {
    background: #00479D;
    border-bottom: #0098E1 solid 4px;
}
.menu-toggle { display: none; }

.mainmenu { margin: 0; padding: 0; list-style: none; display: table; width: 100%; font-family: 'Roboto', sans-serif; font-size: 16px; position: relative; z-index: 9998;   }
.mainmenu .menu-item { text-align: center; display: table-cell; min-width: 80px; border-right: 1px solid #5b6782; text-transform:uppercase; }
.mainmenu .menu-item:first-child { border-left: 1px solid #5b6782; }
.mainmenu .menu-item.active , 
.mainmenu .menu-item:hover { background: transparent url(../images/menu-item-active.png) no-repeat bottom center;  }
.mainmenu .menu-item a { display: block; padding: 15px 0 20px 0; color: #fff; text-decoration:none;  }

.submenu {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    background: #00479D;
    border-top: #0098E1 solid 4px;
    padding: 7px;
}
.submenu-box { float: left; width: 33.33%; }
.menu-item .submenu-box a { padding: 0; margin: 7px; text-decoration:none; }
.submenu-item { background:rgba(255, 255, 255, .1); color: #333; text-decoration:none; text-align: left; overflow: hidden; padding: 15px; transition: all 1s; -webkit-transition: all 1s; }
.submenu-item .icon { float: left; width: 50px; height:40px; color:#FFF; font-size:30px; }
.submenu-item .text { font-size: 17px; color: #FFFFFF; line-height: 1.2; text-transform:capitalize; }
.submenu-item .text small { font-size: 13px;  color: #b8bdc8; display: block; }
    .submenu-item:hover, .submenu-item.active {
        background: #0098E1;
    }
.submenu-item:hover .text , .submenu-item:hover .text small , .submenu-item.active .text , .submenu-item.active .text small { color: #fff; }

.mainmenu .menu-item.has-submenu > a { position: relative; }
.mainmenu .menu-item.has-submenu > a:after { content: '+'; float: right; margin: 0 12px 0 0; }





/* 公共样式表css */


img {
    border: 0;
}


a {
    text-decoration: none;
    color: #08acee;
}

button {
    outline: 0;
}

img {
    border: 0;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}

li {
    list-style: none;
}

a {
    color: #222;
}

    a:hover {
        color: #08acee;
    }

.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
}

/* 必要布局样式css */
.city-nav-header {
    width: 1000px;
    margin: 0 auto;
    display: table;
    position: relative;
    z-index: 50;
    height: 53px;
    color: #555;
    font-size: 18px;
    line-height: 53px;
}

.city-nav-list {
    cursor: pointer;
    position: relative;
    z-index: 50;
    float: left;
    width: 230px;
    height: 53px;
    color: #fff;
    background: #068ad4;
}

    .city-nav-list a {
        display: block;
        width: 230px;
        height: 53px;
        color: #fff;
    }

        .city-nav-list a img {
            display: inline-block;
            margin-top: 15px;
            margin-left: 20px;
            margin-right: 12px;
            border: 0 none;
            width: 22px;
            height: 22px;
            float: left;
        }

.city-nav-item {
    float: left;
    width: 770px;
    height: 53px;
}

    .city-nav-item a {
        font-size: 18px;
        line-height: 53px;
        position: relative;
        display: inline-block;
        padding: 0px 12px;
    }

        .city-nav-item a:first-child {
            padding-left: 34px;
        }

        .city-nav-item a i {
            width: 28px;
            height: 18px;
            display: block;
            background: url(../images/hot.gif) no-repeat center center;
            position: absolute;
            top: 0px;
            right: 0px;
        }

.city-nav-left {
    width: 230px;
    height: 409px;
    border-top: 1px solid #27b1ff;
    background: #068ad4;
}

    .city-nav-left dl dd {
        position: relative;
        z-index: 50;
        border-top: 1px solid #0070ae;
        border-bottom: 1px solid #27b1ff;
        background: #068ad4;
    }

        .city-nav-left dl dd a img {
            margin-top: 23px;
        }

    .city-nav-left dl dd {
        width: auto;
        height: 68px;
        line-height: 68px;
        font-size: 18px;
        background: url(../images/icon-row.png) no-repeat center right;
    }

        .city-nav-left dl dd a {
            height: 68px;
            line-height: 68px;
            font-size: 16px;
        }

            .city-nav-left dl dd a:hover {
                background: url(../images/icon-hover.png);
            }

.city-nav-casket {
    display: none;
    position: absolute;
    top: -2px;
    left: 230px;
    padding: 10px;
    width: 520px;
    overflow: hidden;
    font-size: 13px;
    line-height: 2em;
    border: 1px solid #0070ae;
    background: #fff;
    z-index: 10002;
}

    .city-nav-casket li {
        float: left;
        margin: 8px 0px;
        padding: 0px 8px;
        line-height: 1em;
        border-right: 1px solid #efefef;
    }

        .city-nav-casket li a {
            color: #222;
            text-decoration: none;
        }

.city-nav-left dl dd .city-nav-casket li a {
    width: auto;
    height: auto;
    color: #222;
    line-height: inherit;
    font-size: 13px;
}

    .city-nav-left dl dd .city-nav-casket li a:hover {
        color: #08acee;
        background: none;
    }

.prev, .next {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -25px;
    display: block;
    width: 40px;
    height: 74px;
    background: url(../images/btn-r.png) 1px 1px no-repeat;
    filter: alpha(opacity=70);
    opacity: 0.7;
    z-index: 10;
    display: none;
}

.city-slide-body ul li a {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    display: block;
    width: 550px;
    height: 410px;
    left: 0;
}

.city-slide-body ul li {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 410px;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}

.city-slide-header {
    width: 767px;
    margin: 0 auto;
    height: 410px;
    position: absolute;
    left: 50%;
    margin-left: -271px;
}

.next {
    left: auto;
    right: 0;
    background-position: -40px 0px;
}

.prev:hover {
    filter: alpha(opacity=99);
    opacity: 1;
}

.next:hover {
    filter: alpha(opacity=99);
    opacity: 1;
}

.city-slide:hover .city-slide-header .prev {
    display: block;
}

.city-slide:hover .city-slide-header .next {
    display: block;
}