/* ' ' ' ' ' ' ' ' ' ' } */ .swiper-container {width:100%; height:100%; margin:auto;} .swiper-slide {text-align:center; font-size:18px; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center;justify-content:center; -webkit-box-align:center;-ms-flex-align:center; -webkit-align-items:center; align-items:center; /*background:#FFFFFF;*/} .swiper-slide {background-position:center top;background-repeat:no-repeat;background-size:100% auto!important; /*background-size:弹性布局*/} .swiper-pagination {position:relative; top:-1vw;} .swiper-pagination-bullet {opacity:0.4; background-color:#FFFFFF;} .swiper-pagination-bullet-active {opacity:1;} .swiperWidth {width:87vw; /*为兼容2K屏幕*/} .swiper-button-Next, .swiper-button-Pre {width:42px; height:42px; opacity:0.5; top:24%; background:url(../Images/Common/ArrowNext.png) no-repeat center center;} .swiper-button-Next:after, .swiper-button-Pre:after {content: ''; /*取消原来的上页下页箭头*/} .swiper-button-Pre {background:url(../Images/Common/ArrowPre.png) no-repeat center center;} .swiper-button-NextA, .swiper-button-PrevA {width:1.5rem; height:1.5rem; background-size:100%; border-width:0; outline:none;} .swiper-button-NextA { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAYAAAA6GuKaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAolJREFUeNrUmU9EbFEcx89MbWoTMZRHqxKlbUTqafVWtanNrN7TahJlUkopPdIiJYo2LSIi3qbh0SqGVhERKSIiIlJEjKLv19wZp+ne5s6595x775ev2Zy59zPfOX9/J9Zz8CR80g+4Qfos6BZ+kD4/KdtfV/GLqj2C9sL98CDc5KL9FbwPZ+BT1ZfGFJJmNGk4BSc8/GAmvwWvIO33Sr4Yr6BtFTwL81fOewQW1j+zDL/1Zp7HdCQ9DG8LvTpk8kg940fS8waAqV/wAVJPe4VehxeFWa0CfFkVegMeE8FoGuCrlUIz4VERrNJOidtBTwaYsF3iv8vNHq3wpQifajGrvDolnRLh1KxT9+gOUbf4Ao1u0mS391BOuXTTgxfoAOfEMCUn3QEnlXdNJZAqOzcXmsR7EjL0sNcnGgJPytBJP55oALwI3eHDjs0UeCeeX0/oPr/j0AzeReg2HZ1PI3gboZt1Ta6awFvjfvZnQ+CJuHXmExECryN0zsQ67CN4jtDPJqB9XOpfCH0XIWDqLm4VUKICTF0Q+ixCwNQZoY8jBFyEZnnqNCLA/3jsKuzy9iIATO3KW9OdCABT/2XoR3gl5MAzheqqfLDdDPkZcc3uYMsBuVR6XFdZojVoAsHknOoecxyhISsfsPy75lT3KDYKGfSXsWYHfQSPhAR4CCnfuIEupD0XMPAIgG276nf1aQ7KPwEBDwDYsZuWuwngovNT5K/RjAw6uKXcvYube8QsfAKzb01rBP4L2AU3Dd1eybE2PAO3e1mEvpkdGt0CUzHFa2ZWpVJCvdJ6b21+tuxmh3JSvWY+t6bFcZGvULG2zSvnGpEv/tRIbblcXlv7m2Oru2W9/DUfAgwAAvHLDheLBMgAAAAASUVORK5CYII=);} .swiper-button-PrevA { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAYAAAA6GuKaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApJJREFUeNrUmUFIG0EYhSepF70IhYBS8KQIKV4LgtTSU0/2opeclJwigiVSiSiWFooHUQotePEgCIWCFwOCJyHgSRAEobRQEISAUCgKhUJQ8L1kV8a422xmZ3ZnHzxymex++3Zmduaf1PPdS6FJT+Ae6dfVOfxb+r2nylh32zfqCAk6Co/B43BfgPY/4W9wGT5WvWlKIWlGU4QLcCbEAzP5DXgVad+088d0G20fwYswn3I5JLBw3swKfD1avpo1kXQe3hRmtc/kkXpZR9LLEQBTr+BdpF4MC/0Jfi+i1RrAV1ShP8OzIh6VAL7WLjQTnhHxquiXuBf02xgT9kp8stXsMQj/EPapC7PKP7+kC8JOLfp1jxGLusUDaHSTPq+1h7GUmxdFAFC5DCeGeTnpIThnMXB9gsB/MzJ03nJgVzkZOpcA4HvQQxpWbFEAU89wrceEfpkQYFfDhM4mCJjKEro/QcD1r3ZaR3+OEJjKpJ09X1KA63tUQtcSBEzVCK18p2ZIlRqGgv4Suhqq8BE9eDXtFFBEgsC/E/pEx5UiBD8h9KGuq0UEXodmeeo4IeA73Ha5q7yvOq9sEHxbXppu6X6HhsD3ZOg/8Krl4AtudVXe2H4xMWo0gq97bWw5ID82b9dNgCtoDg9b86t7LHGEWlY+YPl33a/ucdfIMugHY80L+gCetgR4AimfBYF2016KGXgawJ5d9X/1aQ7KqZiAXwPYt5u2OgngR+eFaByjRTLo4IFW5y5BzhEr8BHMvlUyCPwBsO+CNAx6JMfa8AL81MBHiLNDb1BgKqV4zMyqVEGoV1ovnMXPhtfs0Eqqx8ynzrT4RjQqVKxt88i5UzSKP51SW34Ofznrm0Onu1XCvJpbAQYARsDLDm12O5QAAAAASUVORK5CYII=);} /* LoadingDiv特定: 1)如果视窗宽度小于底图,底图按视窗按比例所需 2)Loading动画总计6秒 3)由于封面图png尺寸过大,使用new Image()预载入 4)原来图片框 850 */ .LoadingDiv {display:table; width:100vw; opacity:1; position:fixed; z-index:101; background-color:#FFFFFF;} .LoadingDiv dd {display:table-cell; height:100vh; vertical-align:middle; text-align:center; overflow:hidden;} .LoadingDiv dd center {position:relative; width:100%; max-width:66vw; margin:auto;} .LoadingDiv dd center blockquote {width:100%; padding-bottom:53%; background:url() no-repeat center center; background-size:100%; opacity:0; transform:scale(0.8);} .LoadingDiv dd center hr {width:0%; border-width:0; height:2px; margin:8px auto; position:relative; background-color:#CCCCCC;} @keyframes LoadingBackImg {0%{opacity:0;transform:scale(0.8);} 20%{opacity:1;transform:scale(1);} 40%{opacity:1;transform:scale(1);} 60%{opacity:1;transform:scale(1);} 80%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(1.1);}} @keyframes LoadingLine {0%{opacity:1;width:0%;} 20%{opacity:1;width:0%;} 60%{opacity:1;width:100%;} 70%{opacity:1;width:100%;} 90%{opacity:0;} 100%{width:100%;} 100%{opacity:0;} 100%{width:100%;}} /************************************* 关于Swiper构建 ************************************* 0: 每次都要给SlideD设置width,目前设为1000,配合TopBarA导航的min-width:1000 1: 关山觉中,使用vw设置外围div的高度,以便弹性布局 2: dl,dt用于table结构多行单列, blockquote用于img背景图定位 3: dt手动设置height(vw),为便于定位,使用vertica-align:top; 4: 用span,tt控制文字大小和颜色,font-size,line-height都使用vw 5: 如果dt内图片,设置图片width(vw),同时不设置dt高度 6: h5控制一行两图片的位置处理(两图片水平排列导致总宽度过大,见万盟数控首页的Banner3图) 7: dd用于单行多列. 8: SlideDFontBig,SlideDFontSub:为适应2K屏幕,font-size仍使用vw,利用页面的media screen对2k进行专门控制 9: li用于图片Css动画,图片尺寸都是一致的png图,便于设置动画(样本: 北京永旺) 10: SlideDAni_00:这里的末尾数字与页面的id="Slide0"是对应的 ******************************************************************************************/ .SlideD {display:table; width:100%; max-width:83vw; margin:auto;} .SlideD dl {display:table-row;} .SlideD dl dt {display:table-cell; vertical-align:top; text-align:center;} .SlideD dl dt span {font-size:3vw; color:#FFFFFF; font-weight:bolder; letter-spacing:1px;} .SlideD dl dt tt {font-size:1.2vw; color:#CCCCCC; line-height:1.5vw;} .SlideD dl dt h6 {display:inline-block; height:100%; overflow:hidden; white-space:nowrap;} /*仅用于开镜动画*/ .SlideD dl dt h5 {margin:auto; width:0; height:0; background-color:#EEEEEE;} .SlideD dl dt blockquote {left:0px; top:0px; z-index:0; background-repeat:no-repeat; background-position:center top;margin:auto;} /*用于把图片放入背景*/ .SlideD dl dt blockquote, .SlideD dl dt blockquote img, .SlideD dl dt img, .SlideD dl dt h5, .SlideD dl dt h6, .SlideD dl dt span, .SlideD dl dt tt {position:relative;} .SlideD dl dt blockquote, .SlideD dl dt blockquote img, .SlideD dl dt img, .SlideD dl dt h3, .SlideD dl dt h4, .SlideD dl dt span, .SlideD dl dt tt {opacity:0;} .SlideD dl dt h6 span {opacity:1;} .SlideD dd {display:table-cell; vertical-align:top; text-align:left; height:600px; overflow:hidden;} .SlideD dd blockquote {position:relative; left:0px; top:0px; z-index:0; background-repeat:no-repeat; background-position:left top;} .SlideD dd blockquote img {position:relative; opacity:0;} .SlideD dd img {position:relative; margin-top:0px; opacity:0;} .SlideD dd center {width:100%; margin:auto; vertical-align:top; text-align:left; height:0px; position:relative;} .SlideD li {display:table-cell; width:100%; height:36.45vw; vertical-align:top; text-align:center; overflow:hidden; position:relative; background-repeat:no-repeat; background-position:center center} .SlideD li h3 {position:absolute; height:100%; width:100%;} .SlideD li h3 img {position:relative; width:auto; height:100%; opacity:0;} .SlideDFontBig {font-size:2.6vw!important;font-weight:normal!important;} .SlideDFontSub {font-size:1.4vw!important;line-height:3vw!important;} @keyframes SlideDAni_a {from{transform:scale(1.4); opacity:0; top:-3vw;} to{transform:scale(1); opacity:1; top:0vw;}} @keyframes SlideDAni_b {from{transform:scale(1.4); opacity:0; top:3vw;} to{transform:scale(1); opacity:1; top:0vw;}} @keyframes SlideDAni30 {from,20%,40%,60%,80%,to{animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} 0% {opacity:0; transform:scale3d(.3, .3, .3);} 20%{transform:scale3d(1.1, 1.1, 1.1);} 40%{transform:scale3d(.9, .9, .9);} 60%{opacity:1; transform:scale3d(1.03, 1.03, 1.03);} 80%{transform:scale3d(.97, .97, .97);} to {opacity:1; transform:scale3d(1, 1, 1);} } @keyframes SlideDAni31 {from{top:1vw;opacity:0;} to{top:0vw; opacity:1;}} .SlideDAni_30 {animation:SlideDAni30 1.5s forwards;} .SlideDAni_31 {animation:SlideDAni31 1s forwards; animation-delay:1s;} /** wow bounceIn 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值 wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度） wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变 wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右） wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变 wow bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值 wow lightSpeedIn 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值 wow bounce 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） wow pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳） wow shake 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） wow flipInX 原位置后仰前栽、透明度从100%变化至设定值 wow swing 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变 wow flipInY 原位置左右旋动、透明度从100%变化至设定值 wow bounceInU 原位置不变、直接从不显示到显示（无过过渡效果） wow wobble 原位置不变、类似于一个人站在那左右晃头、透明度 关于网站弹性结构 1) 尽量使用%,不要使用px,如果板式外围构架为100%,可以使用vw 2) 板式构架尽量使用FlexBoxDiv控制最外围宽度,构架内部尽量使用% 3) 框架内部控制高度,可利用padding-bottom为宽度的百分比,再在内部建立块元素,利用height:100%,top控制定位,图片使用背景来完成 4) 文字大小可使用em,如果文字容器高度使用em,可避免文字过小 5) 1vw略比1em大一点 **/ /********************************** 首页Css说明 ********************************** HomeTopH: 用于Top的文字(中国农工党武汉市委员会)布局,包括日期,搜索,栏目导航 H_HeadLines: 头条新闻的Css H_NewsSlide: 新闻块的布局 H_NewsL: 新闻块右侧的标题列表(Table架构),.H_NewsL dl li h3 对应的标题单元格 H_NewsM: 对应思想建设和新闻块,一行3个 H_NewsM blockquote对应标题列表 H_VideoM:对应视频块 *********************************************************************************/ .HomeTopH {display:table; width:100%;} .HomeTopH dd {display:table-cell; height:545px; vertical-align:bottom; text-align:center;} .HomeTopH dd:nth-child(2), .HomeTopH dd:nth-child(4) {width:88px; background-repeat:no-repeat; background-position:right bottom;background-image:url(../images/BarFrm_L.png);} .HomeTopH dd:nth-child(2) div, .HomeTopH dd:nth-child(4) div {position:relative; z-index:1; height:120px; top:30px; box-shadow:-15px 0px 15px -15px rgba(0,0,0,0.6)} .HomeTopH dd:nth-child(4) div {box-shadow:15px 0px 15px -15px rgba(0,0,0,0.6);} .HomeTopH dd:nth-child(3) {width:1148px; position:relative; vertical-align:top; /* min-width:900px,用 MinWidthDiv 代替 */} .HomeTopH dd:nth-child(3) h2 {width:100%; height:} /* .HomeTopH dd:nth-child(3) h3:放置页面顶部链接块 左边:国家农工党和省农工党 右边(.HomeTopH dd:nth-child(3) h3 span:nth-child(2)): 原来放置公众号和移动端二维码,目前改为放置搜索栏 */ .HomeTopH dd:nth-child(3) h3 {width:100%; height:30px; line-height:30px; font-size:0;} .HomeTopH dd:nth-child(3) h3 span {display:inline-block; font-size:12px; width:50%; text-align:left; color:#FFF; padding:0 2em; box-sizing:border-box;} .HomeTopH dd:nth-child(3) h3 span:nth-child(2) {text-align:right;} .HomeTopH dd:nth-child(3) h3 span:nth-child(1) a:link, .HomeTopH dd:nth-child(3) h3 span:nth-child(1) a:visited {color:#FFF!important;} .HomeTopH dd:nth-child(3) h3 span:nth-child(1) a:hover {color:#FF0!important; border-bottom:#FF0 1px dashed;} .HomeTopH dd:nth-child(3) h3 span a:nth-child(1) {margin-right:70px;} /* .HomeTopH dd:nth-child(3) h3 span:nth-child(2) a {position:relative; z-index:1; display:bolck;} .HomeTopH dd:nth-child(3) h3 span:nth-child(2) a img {width:80px; height:80px; position:absolute; top:20px; left:-10px; opacity:0;} .HomeTopH dd:nth-child(3) h3 span:nth-child(2) a:hover img {opacity:1;} */ .HomeTopH dd:nth-child(3) h3 span:nth-child(2) {font-size:0; position:relative; top:2px;} .HomeTopH dd:nth-child(3) h3 span:nth-child(2) input[type=text], .HomeTopH dd:nth-child(3) h3 span:nth-child(2) a {display:inline-block; vertical-align:top; height:30px; line-height:30px; position:relative; box-sizing:border-box; border:#004284 1px solid;} .HomeTopH dd:nth-child(3) h3 span:nth-child(2) input[type=text] {width:180px; background-color:#FFF; font-size:13px; color:#000; text-align:left; text-indent:5px; border-right-width:0;} .HomeTopH dd:nth-child(3) h3 span:nth-child(2) input::placeholder {color:#DDD;} .HomeTopH dd:nth-child(3) h3 span:nth-child(2) a {background-color:#0F8FED; width:75px; color:#FFF; font-size:14px; text-align:center; border-left-width:0;} .HomeTopH dd:nth-child(3) h3 span:nth-child(2) a i {margin-right:4px;} .ContentSearch {position:absolute; z-index:10; right:77px; top:0px; color:#999; font-size:12px; /*正文搜索复选框*/} .HomeTopH dd:nth-child(3) h4 {height:195px; text-align:center; box-sizing:border-box; padding:50px; transform:scale(0.95);} .HomeTopH dd:nth-child(3) h4 span {display:inline-block; text-align:right; width:50%; overflow:hidden;} .HomeTopH dd:nth-child(3) h4 span:nth-child(2) {text-align:left;} .HomeTopH dd:nth-child(3) h4 span:nth-child(3) {width:100%; text-align:center; margin-top:0px;} .HomeTopH dd:nth-child(3) h4 span img {position:relative;} .HomeTopH dd:nth-child(3) h1 {height:160px; text-align:left; box-sizing:border-box; position:relative;; /*left:48px;*/ top:75px; width:75%; margin:0 auto; min-width:700px; } .HomeTopH dd:nth-child(3) h1 span {position:absolute; width:100%; top:45px;} .HomeTopH dd:nth-child(3) h1 span:nth-child(2) img {position:absolute; left:22%; transform:scale(0.5); opacity:0;} .HomeTopH dd:nth-child(3) h1 span:nth-child(3) {display:block; width:48.5%; height:65px; right:-5%; text-align:right; overflow:hidden;} .HomeTopH dd:nth-child(3) h1 span:nth-child(3) img {position:absolute; left:-100%;} .HomeTopH dd:nth-child(3) h1 span:nth-child(1) {display:block; width:100%; top:-20px; text-align:center; width:100%; text-align:center; margin-top:5px;} .HomeTopH dd:nth-child(3) h1 span:nth-child(1) img {position:relative; opacity:0; width:80%;} @keyframes HomeTopH_H1_Span_0_img_0 {from{transform:scale(0.5); opacity:0} to{transform:scale(1.0); opacity:1;}} @keyframes HomeTopH_H1_Span_0_img_1 {from{left:22%; opacity:1; transform:scale(1.0);} to{left:1%; opacity:1; transform:scale(1.0);}} @keyframes HomeTopH_H1_Span_1_img {from{left:-100%;} to{left:0%;}} /* .HomeTopH dd:nth-child(3) h5:放置 日期块(.HomeTopH dd:nth-child(3) h5 span:nth-child(1)) 和搜索栏(.HomeTopH dd:nth-child(3) h5 span:nth-child(2)),不过目前甲方要求缩小,因此未用,将搜索栏放到右上角 */ .HomeTopH dd:nth-child(3) h5 {height:60px; width:800px; margin:auto;} .HomeTopH dd:nth-child(3) h5 span {width:9.5%; height:58px; display:inline-block;} .HomeTopH dd:nth-child(3) h5 span:nth-child(1) {float:left; border-radius:5px; background-color:#FFF; } .HomeTopH dd:nth-child(3) h5 span:nth-child(1) center {background-color:#0068B7; height:18px; padding:0px 3px; box-sizing:border-box; color:#FFF; border-top-right-radius:5px; border-top-left-radius:5px; position:relative;} .HomeTopH dd:nth-child(3) h5 span:nth-child(1) center img {position:absolute; left:3px; top:6px; z-index:1;} .HomeTopH dd:nth-child(3) h5 span:nth-child(1) center blockquote {transform:scale(0.8); width:100%; position:absolute; left:0px; top:0px;} .HomeTopH dd:nth-child(3) h5 span:nth-child(1) p {display:block; line-height:40px; font-size:27px; color:#0068B7; font-weight:bolder; letter-spacing:-2px;} .HomeTopH dd:nth-child(3) h5 span:nth-child(1) p code {font-size:15px; font-weight:lighter; position:relative; top:-2px; left:3px;} .HomeTopH dd:nth-child(3) h5 span:nth-child(2) {width:88%; float:right;text-align:right; } .HomeTopH dd:nth-child(3) h5 span:nth-child(2) input, .HomeTopH dd:nth-child(3) h5 span:nth-child(2) center {display:inline-block; vertical-align:top; height:100%; line-height:60px; } .HomeTopH dd:nth-child(3) h5 span:nth-child(2) input {width:85%; border:#0068B7 1px solid; box-sizing:border-box; font-size:18px; color:#000; text-indent:10px;} .HomeTopH dd:nth-child(3) h5 span:nth-child(2) input::placeholder {color:#CCC; font-size:18px;} .HomeTopH dd:nth-child(3) h5 span:nth-child(2) center {width:15%; background-color:#0068B7; font-size:20px; color:#FFF; text-align:center; cursor:pointer;} .HomeTopH dd:nth-child(3) h5 span:nth-child(2) center:hover code {color:#FFFF00; border-bottom:#FFFF00 1px dashed;} .HomeTopH dd:nth-child(3) h5 span:nth-child(2) tt {position:relative; width:0; z-index:1; width:0px;} .HomeTopH dd:nth-child(3) h5 span:nth-child(2) tt tt {position:absolute; left:20px; letter-spacing:0px; width:35px; line-height:16px; top:15px; left:-45px; color:#999;} .HomeTopH dd:nth-child(3) h6 {width:100%; height:100px; background-color:#298EC5; /*background-color:#bb2d21;*/ position:absolute; bottom:0px; border-top:rgba(255,255,255,0.8) 1px solid;} .HomeTopH dd:nth-child(4) {background-position:left bottom;background-image:url(../images/BarFrm_R.png);} .HomeTopH dd:nth-child(1) blockquote, .HomeTopH dd:nth-child(5) blockquote {height:122px; background-color:#EEE; width:100%; border-top:#FFF 1px solid;} .HomeTopH dd:nth-child(1) blockquote p, .HomeTopH dd:nth-child(5) blockquote p {height:59px; background-color:#2C97D1; /*background-color:#bb2d21;*/} .H_Frame {display:table; background-color:#FFF;} .H_Frame dl {display:table-row;} .H_Frame dl dd {display:table-cell; box-sizing:border-box; padding:0 20px; max-width:1324px;} .H_HeadLines {padding:25px 68px 12px 68px; } .H_HeadLines center {font-weight:bolder; font-size:32px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; position:relative;} .H_HeadLines center i {position:absolute; left:-2rem; opacity:0; top:0px; transition:all 0.2s} .H_HeadLines center a {color:#189DF0; font-family: "楷体","楷体_GB2312"; position:relative; left:0rem; } .H_HeadLines center:hover {text-overflow:clip;} .H_HeadLines center:hover i {left:-1rem; opacity:1; transition:all 0.4s ease-out 0.3s;} .H_HeadLines center:hover a {color:#000; left:2rem;} .H_HeadLines center:hover a i {color:#2E7CC1;} .H_HeadLines_Sub {border-left:#2E7CC1 1px solid;font-size:0; margin:1rem auto;} .H_HeadLines_Sub span {display:inline-block; width:33.3%; font-size:16px; line-height:22px; padding:0 1rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box; border-right:#2E7CC1 1px solid;} .H_HeadLines_Sub span a {color:#2E7CC1; border-bottom:#FFF 1px dashed;} .H_HeadLines_Sub span a:hover {color:#000; border-bottom:#BBB 1px dashed;} .H_NewsFrm {display:table; width:100%;} .H_NewsFrm dd {display:table-cell; width:49.25%; vertical-align:top;} .H_NewsFrm dd:nth-child(2) {display:table-cell; width:1.5%;} .H_NewsFrm dd:nth-child(1) blockquote {padding-top:66.4%; position:relative;} .H_NewsFrm dd:nth-child(1) blockquote center {position:absolute; height:100%; width:100%; top:0px; z-index:1; overflow:hidden;} .H_NewsFrm_Slide {display:block; width:98%; border-radius:8px; border:#D0CFCC 1px solid; position:absolute; top:0px; overflow:hidden; box-sizing:border-box; padding:4px 4px 0 4px; background-color:#FFF;} .H_NewsFrm_Slide img {width:100%; height:auto; border-bottom-width:0px; border-radius:5px;} .H_NewsFrm_Slide p {position:absolute; z-index:1; width:98.5%; height:2.5em; bottom:5px; color:#FFF; text-align:left; background-color:rgba(0,0,0,0.7);white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:14px; line-height:2.4em; border-bottom-left-radius:9px;border-bottom-right-radius:9px;text-indent:1rem;} .H_NewsFrm_Slide hr {border-width:0; height:1px; background-color:rgba(255,255,255,0.3); margin:0 5px; position:relative; top:-2.2em;} .H_NewsSlide {width:100%; font-size:0; background-color:#ECEFF2; height:50px;} .H_NewsSlide span, .H_NewsSlide code {display:inline-block; width:33.3%; text-align:center; box-sizing:border-box; position:relative;} .H_NewsSlide span {font-size:20px; height:50px; line-height:50px; font-weight:bolder; color:#000; cursor:pointer;} .H_NewsSlide span:nth-child(1) {border-right:#BBB 1px solid;} .H_NewsSlide span:nth-child(2) {border-left:#FFF 1px solid; border-right:#BBB 1px solid;} .H_NewsSlide span:nth-child(3) {border-left:#FFF 1px solid} .H_NewsSlide span tt {position:relative; left:-11px;} .H_NewsSlide span i {position:relative; margin-right:3px;display:inline-block;font-size:18px; opacity:0; color:#015293; transition:all 0.3s} /* .H_NewsSlide span:hover {color:#015293;} .H_NewsSlide span:hover tt {margin-left:1rem;} .H_NewsSlide span:hover i {opacity:1; transition:all 0.6s;} */ .H_NewsSlide_SpanSel {background-color:#189DF0; color:#FFF!important;} .H_NewsSlide_SpanSel tt {margin-left:1rem!important;} .H_NewsSlide_SpanSel i {opacity:1!important; color:#FFF!important;} .H_NewsSlide code {height:12px; color:#189DF0;} .H_NewsSlide code i {position:absolute; font-size:24px; top:-9px; opacity:0;} .H_NewsSlide_SpanSel_A i {opacity:1!important;} .H_NewsL {display:table; width:99%;} .H_NewsL dl {display:table-row;} .H_NewsL dl li {display:table-cell; padding:0.55% 0; text-align:left; border-bottom:#E5E5E5 1px solid;overflow:hidden;} .H_NewsL dl:nth-child(1) li {border-top:#EEE 1px solid;} .H_NewsL dl li h3 {padding-top:5.7%; position:relative;} .H_NewsL dl:nth-child(even) li h3 {background-color:#FAFAFA;} .H_NewsL dl li h3 span {display:inline-block; position:absolute; top:0%; width:83%; height:100%; font-size:0.85em; line-height:220%; text-indent:0.3em; z-index:2;} .H_NewsL dl li h3 span:nth-child(1) {white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} .H_NewsL dl li h3 span:nth-child(1) a {color:#444; position:relative; z-index:1;} .H_NewsL dl li h3 span:nth-child(1) tt {font-size:1.1em; color:#000;} .H_NewsL dl li h3 span:nth-child(2) {width:17%; text-align:right; left:82%; color:#BBB; font-size:small; margin-top:3px;} .H_NewsL dl li h3 span:nth-child(1):hover a {color:#189DF0;} .H_NewsL dl li h3 center {background:linear-gradient(to right, #CCC , #F5F5F5); position:absolute; z-index:0;height:100%; width:0%; top:0%; } @keyframes H_NewsL_H3_JianBian_In {from{width:0%;} to{width:100%;}} @keyframes H_NewsL_H3_JianBian_Out {from{width:100%;} to{width:0%;}} @keyframes H_NewsL_H3_Color_In {from{color:#444;} to{color:#2E7CC1;}} @keyframes H_NewsL_H3_Color_Out {from{color:#2E7CC1;} to{color:#444;}} @keyframes H_NewsL_H3_ColorA_In {from{color:#BBB;} to{color:#000;}} @keyframes H_NewsL_H3_ColorA_Out {from{color:#000;} to{color:#BBB;}} .H_Brief {display:table; position:absolute; height:100%;} .H_Brief dd {display:table-cell; vertical-align:middle; text-align:left;} .H_Brief dd:nth-child(1) {width:26.18%; background:url(../images/Img_0.png) no-repeat right center; background-size:cover;} .H_Brief dd:nth-child(1) span {margin-top:4%;} .H_Brief dd:nth-child(1) span:nth-child(even) {margin-left:4.5%;} .H_Brief dd:nth-child(1) span:nth-child(1), .H_Brief dd:nth-child(1) span:nth-child(2) {margin-top:0%;} .H_Brief dd:nth-child(2) {width:73.82%;} .H_Brief dd:nth-child(2) img {width:100%; height:auto;} .H_BriefBT {display:inline-table; width:45%; height:39%; text-align:center; border-radius:4px; background-color:#189DF0; color:#FFF; font-size:98%;} .H_BriefBT center {display:table-cell; vertical-align:middle;} .H_BriefBT center img {width:25%; height:auto; transform:scale(1);} .H_BriefBT center a {color:#FFF;} .H_BriefBT center:hover a {color:#FF0; border-bottom:#FFF 1px dashed;} .H_BriefBT center:hover img {transform:scale(1.2);} .H_NewsM {display:inline-block; width:33.3%; vertical-align:top; font-size:16px; text-align:left; position:relative;} .H_NewsM center hr {border-width:0; height:2px; background-color:#189DF0; width:30%; position:absolute; top:44px; transition:all 0.3s} .H_NewsM center {padding:8px 0 6px 0; width:95%; text-align:left; margin:0; border-top:#189DF0 3px solid; border-bottom:#DCDDDF 1px solid;} .H_NewsM center span {font-size:22px; color:#189DF0; font-weight:bolder;} .H_NewsM center a {float:right; display:block; width:25px; height:30px; overflow:hidden; position:relative; } .H_NewsM center a i {font-size:26px; margin-top:3px; color:#AAAAB0; position:absolute; left:0px; transition:all 0.3s} .H_NewsM center a i:nth-child(1) {left:-15px; color:#000;} .H_NewsM center:hover hr {width:0%; transition:all 0.6s;} .H_NewsM center:hover span {color:#000;} .H_NewsM center:hover a i:nth-child(1) {left:0px; transition:all 0.6s;} .H_NewsM center:hover a i:nth-child(2) {left:25px; transition:all 0.6s;} .H_NewsM blockquote {width:95%; padding-bottom:2.4%; position:relative;} .H_NewsM blockquote h3 {text-indent:1.4rem; color:#333; height:140%; line-height:180%; font-size:0.95em; position:relative;top:8px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; background-color:rgba(0,0,0,0.0)} .H_NewsM blockquote h3 i {position:absolute; text-indent:0px; top:7px; left:7px; opacity:1; transition:all 0.3s;} .H_NewsM blockquote h3 i:nth-child(1) {left:-15px;} .H_NewsM blockquote hr {position:absolute; top:30px; border-width:0; width:98%; margin-left:2%; height:1px; background-size:8px!important;background-repeat:repeat-x; background:linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 20%, transparent 20%, transparent 100%); /*Css生成点线,可控制间距*/} .H_NewsM blockquote:hover h3 {color:#189DF0; background-color:rgba(0,0,0,0.05);} .H_NewsM blockquote:hover h3 i:nth-child(1) {left:7px; transition:all 0.4s linear 0.2s} .H_NewsM blockquote:hover h3 i:nth-child(2) {left:15px; opacity:0; transition:all 0.6s;} .H_NewsM blockquote:hover hr {background:linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, transparent 20%, transparent 100%);} .H_VideoM {display:table; width:95%;} .H_VideoM h3 {display:table-cell; padding:8px 0 0 0; vertical-align:top;} .H_VideoM h3:nth-child(1) {width:71%;} .H_VideoM h3:nth-child(2) {width:29%;} .H_VideoM h3:nth-child(1) li {width:94%; position:relative; overflow:hidden;} .H_VideoM h3:nth-child(1) li:nth-child(1) {padding-bottom:57%;} .H_VideoM h3:nth-child(1) li>img {width:100%; height:auto;} .H_VideoM h3:nth-child(1) li p {padding:5px 0 5px 0; text-align:left; font-size:12px; border-bottom:#DDD 1px dashed;} .H_VideoM h3:nth-child(1) li p:nth-child(1) {color:#FF0000; text-align:center; margin-bottom:6px; font-size:14px; border-bottom-style:solid; height:30px; line-height:30px;} .H_VideoM h3:nth-child(1) li p:nth-child(1) span {line-height:16px; display:block; width:100%;} .H_VideoM h3:nth-child(1) li p i {margin-right:4px; color:#444;} .H_VideoM h3:nth-child(1) li p a:hover i {color:#BBB;} .H_VideoM h3:nth-child(2) li {width:97%; margin:0 0 0px 6%; padding-bottom:5px;} .H_VideoM h3:nth-child(2) li:last-child {margin-bottom:0; padding-bottom:0px;} .H_VideoM h3:nth-child(2) li p {padding-bottom:77%; position:relative; overflow:hidden;} .H_VideoM h3:nth-child(2) li p span {display:block; height:87%; position:absolute; width:100%; top:0%; overflow:hidden; border-radius:3px; } .H_VideoM h3:nth-child(2) li p span img {width:100%; height:auto; transform:scale(1);} .H_VideoM h3:nth-child(2) li p tt {display:block; width:100%; height:24px; line-height:24px; font-size:12px; position:absolute; top:72%; background-color:#EEE; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} .H_VideoM h3:nth-child(2) li p:hover span img{transform:scale(1.2);} .H_NewsBar {display:table; width:100%; height:40px; line-height:38px;} .H_NewsBar dd {display:table-cell; text-align:left;} .H_NewsBar dd:nth-child(1) {width:16%; background:url(../images/BackImg_1A.png) no-repeat right bottom #189DF0; background-size:contain; font-size:20px; font-weight:bolder; color:#FFF; text-indent:15px;} .H_NewsBar dd:nth-child(2) {vertical-align:bottom; } .H_NewsBar dd:nth-child(2) center {height:28px; background-color:#F2F2F2;} .H_NewsBar dd:nth-child(2) center a {float:right; display:block; height:28px; line-height:28px; width:50px; text-align:center; overflow:hidden; position:relative;} .H_NewsBar dd:nth-child(2) center a i {font-size:26px; color:#000; position:absolute; left:-30%; transition:all 0.3s;} .H_NewsBar dd:nth-child(2) center a i:nth-child(2) {color:#AAAAB0; left:40%; transition:all 0.3s;} .H_NewsBar dd:nth-child(2) center a:hover i:nth-child(1) {left:40%; transition:all 0.6s;} .H_NewsBar dd:nth-child(2) center a:hover i:nth-child(2) {left:100%; transition:all 0.6s;} .H-NewsPic {display:table; width:100%;} .H-NewsPic dd {display:table-cell; width:20%; vertical-align:top; position:relative;} .H-NewsPic dd blockquote {width:97%; position:relative; padding-top:64.7%; margin:auto; overflow:hidden; text-align:center; border:#EEE 1px solid; border-bottom-width:0; border-radius:4px;} .H-NewsPic dd blockquote img {width:auto; height:100%; position:absolute; border-radius:4px; top:0px; left:0px; transform:scale(1); } .H-NewsPic dd h3, .H-NewsPic dd h4 {width:97%; text-align:left;} .H-NewsPic dd h3 {margin:auto; overflow:hidden; padding:6px 0 9px 0; border:#EEE 1px solid; border-top:#FFF 1px solid; position:relative; z-index:2;} .H-NewsPic dd h3 p {width:96%; margin:auto;height:36px; font-size:14px; line-height:18px; overflow:hidden; color:#656565;} .H-NewsPic dd h4 {width:97%; position:absolute; height:50px; bottom:0px; left:1%; width:0%; background-color:#0255AE; z-index:1; transition:all 0.3s;} .H-NewsPic dd:hover blockquote img {transform:scale(1.2); } .H-NewsPic dd:hover h3 p {color:#FFF; transition:all 0.4s linear 0.2s;} .H-NewsPic dd:hover h4 {width:98%; transition:all 0.6s;} .H_TopicBloock {width:100%; padding:35px 35px; box-sizing:border-box;} .H_TopicBloock center {display:table; width:100%;} .H_TopicBloock center dd {display:table-cell; text-align:left;} .H_TopicBloock center dd:nth-child(1) {width:6%; padding-top:6%; background-color:#0255AD; position:relative;} .H_TopicBloock center dd:nth-child(1) li {position:absolute; top:0; width:100%; height:100%; line-height:130%; color:#FFF; font-size:20px; font-weight:bolder; text-align:center; padding-top:13%; letter-spacing:3px;} .H_TopicBloock center dd:nth-child(2) {width:94%; font-size:0; vertical-align:middle; box-sizing:border-box;} .H_TopicBloock center dd:nth-child(2) span {height:70px; width:25%; display:inline-block; margin-right:12%; text-align:right;} .H_TopicBloock center dd:nth-child(2) span:nth-child(3) {margin-right:0;} .H_TopicBloock center dd:nth-child(2) span img{width:85%; height:auto; border:#FFF 3px solid; } .Festival {height:88px; width:100%; position:absolute; z-index:100; background:url(../images/Festival/1.png) repeat-x left top;} .Festival center {height:400px; width:auto; position:relative; z-index:1; width:50%; display:inline-block; background:url(../images/Festival/2.png) no-repeat left top;} .Festival center:nth-child(2) {float:right; background:url(../images/Festival/3.png) no-repeat right top;}