@charset "utf-8";

/*!
 * Zomai Ccg
 * 2018-11-19
 */

/* common */
ul,li,ol { list-style: none;}
div,ul,li{  padding: 0; margin: 0;}
body { background-color: #f5f5f5; }
.center { width: 1200px; margin: 0 auto;}
a:hover { text-decoration: none}
/* header */
.header { background:url("head_bg.jpg") 0 0 repeat-x}
.header .head { height: 160px;;}
.header .nav { width: 100%; height: 50px; overflow: hidden; background-color: #174ed0; line-height: 50px;}
.header .nav { color: white; font-size: 18px;}
.header .nav .center { display: flex; display: -webkit-flex; flex-direction: row; justify-content: space-between; white-space: nowrap; }
.header .nav li { float: left; width: 14%; text-align: center;}
.header .nav li a { width: 100%; display: block; height: 100%; color: white}
.header .nav li a.active { background:rgba(0,0,0,0.2) ; }


.header .nav li a:hover { background:rgba(0,0,0,0.2) ; cursor: pointer; }

.main .banner { width: 100%; height: 88px; background-color: #cccccc; margin-top: 20px; padding: 0; }

/* 顶部资讯类 */
.main .top { width: 100%;display: -webkit-flex; display: flex; flex-direction: row; justify-content: space-between; margin-top: 20px; }

/* top notice */
.main .top .notice { float: left; width: 27%; height: 240px; background: white; border: 1px solid #e5e5e5; overflow: hidden; }

/* top news */
.main .top .news { float: left; width: 45%; height: 240px; background: white; margin: 0 2%; border: 1px solid #e5e5e5;}

/* top tool */
.main .top .tool {  float: right; width: 24%; height: 240px; background-color: white; border: 1px solid #e5e5e5;}

/* 最多跑一次 */
.main .serve { float: left; width: 100%; height: 220px; background-color: white;display: -webkit-flex; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e5e5e5; margin-top: 20px; }
.main .serve .items { width: 100%;display: -webkit-flex; display: flex; flex-direction: row; }
.main .serve .department { border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; }
.main .serve .ols { float: right;}


/* 专栏 */
.main .weblink { float: left; width: 100%; height: 70px; display: flex; display: -webkit-flex;flex-direction: row; justify-content: space-between; margin-top: 20px;}
.main .weblink .link{ float: left; margin-left: 16px; width: 17%; background-color: #cccccc; height: 100%;}
.main .weblink .link img{ width: 100%; height: 100%;}



/* 数据公开与资讯 */
.main .post { float: left; width: 100%; display: flex;flex-direction: row; margin-top: 20px;}
.main .post .data { float: left; width: 49%; height: 400px; background-color: white; border: 1px solid #e5e5e5; margin-right: 20px;}
/* .main .post .post_right { width: 50%; display: flex;display: -webkit-flex; flex-direction: column;} */
.main .post .info { float: right; width: 49%; height: 400px; padding: 0px;}

.main .post .info_news { float: right; width: 100%; padding: 0; height: 190px; background-color: white; border: 1px solid #e5e5e5; }
.main .post .hint { float: right; width: 100%; padding: 0; height: 190px; background-color: white; border: 1px solid #e5e5e5; margin-top: 20px;}


/* 友情链接 */
.main .links { float: left; width: 100%; height: 60px; display: flex;display: -webkit-flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 20px;}
.main .links .url  { float: left; width: 21%; height: 60%; margin: 12px 0; background-color:white; border: 0px solid #e5e5e5;display: -webkit-flex; display: flex; flex-direction: row; margin-left:20px; padding: 0; }


/* 底部 */
.footer { float: left; width: 100%; height: 120px; background-color: white; padding:15px 0 20px 0; border-top: 4px solid #2a82c7; margin-top: 20px;}
.footer .center {  display: flex;display: -webkit-flex; flex-direction: row; justify-content:space-between; width: 1230px}
.footer .copyright { width: 70%; float: left; padding: 0; margin-right: 50px; line-height: 24px;}
.footer .copyright .menu { width: 100%; float: left; display: flex; display: -webkit-flex;flex-direction: row; line-height: 15px; }
.footer .copyright .menu li  { float: left; display: flex; display: -webkit-flex;flex-direction: row; padding: 0 15px; border-right: 1px solid #aaaaaa }
.footer .copyright .menu li:last-child { border: 0}
.footer .copyright .copy { float: left; width: 100%; color: #333333; margin: 7px 0;}
.footer .copyright .bei {  float: left; width: 100%; color: #333333; line-height: 15px;}
.footer .copyright .copy span {  margin-right: 10px;}
.footer .copyright .bei span {  margin-right: 10px;}
.footer .icon { float: right; margin-right: 15px; display: flex;flex-direction: row; justify-content:flex-end; align-items: center }


.main .top .notice,
.main .top .news,
.main .top .tool,
.main .serve,
.main .post .info_news,
.main .post .data { padding: 0;  border-top: 0px solid #e5e5e5}
/* 布局 end */


/* 样式 */

/* 各大板块标题样式 */
.titleStyle { width: 100%; height: 34px; display: flex;flex-direction: row; justify-content: space-between; background:url("title_bg.jpg") 0 0 repeat-x}
.titleStyle .name { float: left; width: 135px; padding-left: 20px; line-height: 33px; color: white; font-size: 18px; font-weight: 400; background:url("title.jpg") 0 0 no-repeat}
.titleStyle .more { float: right; padding: 0 10px; color:#aaaaaa; font-size: 14px; line-height: 35px; }
.titleStyle .more:hover { color: #174ed0; text-decoration: none;}

/* 警民互动标题栏 */
.tool .hd_title { text-align: center; width: 100%; height: 40px; line-height:40px; display: -webkit-flex; display: flex; flex-direction: row; align-items:center;  justify-content: center }
.tool .hd_title span { color: white; font-size: 18px; padding: 0 10px; margin-bottom: 5px;}


/* 标题 背景渐变 */
.main .tool .hd_title,
.main .weblink .title,
.main .title_web
{
    background-color: #174ed0;
    background: -webkit-linear-gradient(left, #1383d9 , #505fc6); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #1383d9 , #505fc6); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #1383d9 , #505fc6); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #1383d9 , #505fc6); /* 标准的语法 */;
}

/* 板块标题 */
.title_web { padding: 5px 0; float: left; width: 8%; background-color: #cccccc; height: 100%; color: white; font-size: 22px; font-weight: 700; display: -webkit-flex;display: flex; flex-direction: row; align-items: center; position: relative;}
.title_web .name {  line-height: 26px; float: left; width: 100%; margin: 0; padding: 0; padding-left: 16px;}
.title_web .name span { width: 100%; display: block;}
.title_web .icon { position: absolute; right: -5px; color: #f5f5f5; top: 27%}



.ols a:hover,
.info .info_news .title .active a
{
    background: -webkit-linear-gradient(left, #1383d9 , #505fc6); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #1383d9 , #505fc6); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #1383d9 , #505fc6); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #1383d9 , #505fc6); /* 标准的语法 */;
}


/*右侧警务资讯 样式*/
.right .right-bg-box { display: block; float: right; width: 100%; background-color: white; border: 1px solid #e5e5e5; border-top: none; margin-bottom: 20px;}

.right .right-bg-box .nav { padding: 10px 20px;}
.right .right-bg-box .nav a {  width: 100%; display: block; margin: 10px 0px; text-align: center; font-size: 15px; line-height: 34px; background-color: #f5f5f5; color: #337ab7; border: 1px solid #eeeeee}

.news_list { float: left;  }
.news_list li { display: flex;width: 95%;display: -webkit-flex; flex-direction: row; justify-content: space-between; line-height: 34px;}
.news_list li a { float: left; width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.news_list li span { float: right;}

/*网上办事*/
.right .ad-box { padding: 10px 3px; display: flex; display: -webkit-flex;flex-direction: row; flex-flow: wrap;}
.right .ad-box a { float: left; width: 48%; margin:4px 1%; overflow: hidden; display: block; }
.right .ad-box a img { width: 100%;  }

.breadcrumb { line-height: 40px; display: flex;}
.breadcrumb table { width: auto !important;}


.zdpyc { width: 145px; height: 57px; padding-left: 20px; line-height: 33px; color: white; font-size: 18px; font-weight: 400; background:url("zdpyc.png") 0 0 no-repeat; margin-top: -11px;}

.col-xs-12 { width: 100%!important;}



#div1{ background: blue; position: absolute;left:0;top: 50%;z-index:999}
#div1 img {width: 160px; }


#container { width: 240px; height: 178px; overflow: hidden; }
    
    #photo { width: 720px; animation: switch 8s ease-out infinite;}
    
    #photo > img { float: left; width: 240px; height: 178;}
    
    @keyframes switch {
    0%, 25% {
    margin-left: 0;
    }
    35%, 60% {
    margin-left: -240px;
    }
    70%, 100% {
    margin-left: -480px;
    }
    }