/* ' ' ' ' ' ' ' ' ' ' } */ .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; 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: h3:配合后台网页管理,特点是无限缩小 1: 对应改写SlideD的 padding-bottom(内框高度) width(框框与1920屏幕宽度的比率,传媒协会1200) min-width(因为横幅有MinWidthDiv,因此对应内框也有最小宽度) ******************************************************************************************/ .SlideD {padding-bottom:30.7%; width:62.5vw; min-width:720px; position:relative;} .SlideD h3 {position:absolute; top:0; width:100%; height:100%; overflow:hidden; font-size:0;} .SlideD h3 img {width:auto; height:100%; position:relative;} .SlideD h3 blockquote {display:inline-block; width:50%; height:100%; overflow:hidden; float:left; position:relative;} .SlideD h3 blockquote img {position:absolute; left:100%;} .SlideD h3:nth-child(2) blockquote {float:right;} .SlideD h3:nth-child(2) blockquote img {left:-200%;} @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说明 ********************************** Party:协会频道 *********************************************************************************/ .Party {font-size:0; } .Party dd {display:inline-block; width:20%; vertical-align:top; padding-bottom:7.25%; overflow:hidden; position:relative; text-align:left; } .Party dd hr {position:absolute; z-index:0; height:100%; border-width:0; background-color:#E90003; width:0%;} .Party dd center {position:absolute; z-index:1; padding:0 5%; width:100%; text-align:left; overflow:hidden; } .Party dd center h3 {line-height:2.8rem; font-size:1.2rem; color:#000; font-weight:bolder; white-space:nowrap; overflow:hidden; font-family:"楷体","KaiTi","STKaiti";} .Party dd center h4 {line-height:1.0rem; font-size:0.75rem; color:#AAA; height:2.7rem; overflow:hidden;} .Cur_Party_DD center a h3 {color:#FFF;} .Cur_Party_DD center a h4 {color:#DCDCDC;} .NewsContain {width:100%; display:table; margin:auto; } .NewsContain dd {display:table-cell; width:29.375%; text-align:left; vertical-align:top; /*1600下470*/} .NewsContain dd:nth-child(2) {width:41.25%; /*1600下660*/ border-left:rgba(0,0,0,0.2) 1px solid; border-right:rgba(0,0,0,0.2) 1px solid;} .H_TitBar {width:86.2%; padding-bottom:12.8%; position:relative; margin:0; border-bottom:#B3BFCD 2px solid; /*470下width=405*/} .H_TitBar blockquote {position:absolute; width:100%; height:100%; font-size:0; text-align:left;} .H_TitBar blockquote h3 {display:inline-block; font-size:1.2rem; color:#000; padding:0.3rem 0 0 0; line-height:1.1rem; vertical-align:top; text-align:left;} .H_TitBar blockquote h3 span {font-size:0.90rem; color:#979797; } .H_TitBar blockquote img {display:inline-block; width:2.8rem; height:2.8rem; margin:0 0.4rem 0 0;} .H_TitBar blockquote a {width:1.5rem; height:1.5rem; border:#153864 1px solid; border-radius:1.5rem; text-align:center; float:right; margin:2% 0 0 0;} .H_TitBar blockquote a i {font-size:1rem; color:#000; line-height:1.5rem;} .H_Img {width:86.2%; padding:2% 0; text-align:center; margin:0;} .H_Img blockquote {position:relative; width:100%; padding-bottom:41.7%; border-radius:0.3rem; text-align:left; font-size:0; overflow:hidden;} .H_Img blockquote img {position:absolute; width:100%; height:auto; transform:scale(1);} .H_Img h4 {width:100%; line-height:1.5rem; color:#000; font-size:0.85rem; padding:0 0.5rem; box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .H_Img:hover blockquote img {transform:scale(1.1);} .H_News {width:85%; margin:0; } .H_News dt {position:relative; width:100%; padding-bottom:22.5%; border-bottom:rgba(0,0,0,0.1) 1px solid;} .H_News dt blockquote {display:table; position:absolute; top:2.5%; width:100%; height:95%; overflow:hidden;} .H_News dt blockquote h3 {display:table-cell; position:relative; } .H_News dt blockquote h3 p {width:95%; font-size:1rem; line-height:1.1rem; color:#000; text-align:left;} .H_News dt blockquote h3 p i {font-size:0.6rem; line-height:1rem; margin-right:0.5rem;} .H_News dt blockquote h3 p>span {float:right; font-size:0.75rem; position:relative; right:0.3rem; top:0.2rem; color:#AAA;} .H_News dt blockquote h3 p>span>span {opacity:0; position:relative; right:0.5rem; color:#FFF;} .H_News dt blockquote h3 hr {position:absolute; z-index:-1; border-width:0; top:-50%; height:200%; width:0%; background-color:#E90003; transition:all .3s ease;} .H_News dt blockquote:hover h3 hr {transition:all .5s ease; width:100%;} .H_News dt blockquote:hover h3 p {transition-delay:0.4s; color:#FFF;} .H_News dt blockquote:hover h3 p i {transition-delay:0.4s; color:#FF0;} .H_News dt blockquote:hover h3 p> {transition-delay:0.7s; color:#DDD;} .H_News dt blockquote:hover h3 p>span>span {transition-delay:0.4s; opacity:1; right:0rem;} .H_NewsA {width:100%; } .H_NewsA dt {position:relative; width:100%; padding-bottom:62.4%;} .H_NewsA dt blockquote {display:table; position:absolute; width:100%; height:100%;} .H_NewsA dt blockquote h3 {display:table-cell; position:relative; overflow:hidden;} .H_NewsA dt blockquote h3 img {width:100%; height:100%; border-radius:0.3rem;} .H_NewsA dt h4 {position:absolute; bottom:0%; border-radius:0.3rem; width:100%; line-height:2.3rem; font-size:1.2rem; color:#FFF; text-align:center; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box; white-space:nowrap; padding:0 0.5rem; background-color:rgba(0,0,0,0.4);} .H_NewsB {width:92.5%; margin:auto; display:table; /*660下的92.5% =610*/} .H_NewsB dl {display:table-row;} .H_NewsB dl dt, .H_NewsB dl li {display:table-cell; border-bottom:rgba(0,0,0,0.1) 1px solid; position:relative;} .H_NewsB dl dt {padding:4% 0 10% 0;/*=height:85*/ vertical-align:bottom; border-bottom:#B3BFCD 2px solid;} .H_NewsB dl dt blockquote {position:absolute; width:100%; } .H_NewsB dl dt blockquote h3 {display:inline-block; font-size:1.2rem; color:#000; padding:0.3rem 0 0 0; line-height:1.3rem; vertical-align:top; text-align:left;} .H_NewsB dl dt blockquote h3 span {font-size:0.90rem; color:#979797; vertical-align:top} .H_NewsB dl dt blockquote>img {display:inline-block; width:9.5%; height:auto;} .H_NewsB dl dt blockquote>img:nth-child(2) {width:2.8rem; height:2.8rem; margin:0 0.4rem 0 0;} .H_NewsB dl dt blockquote>img:last-child {margin:0 0 3% 20%; transform:scaleX(-1);} .H_NewsB dl dt blockquote>img:first-child {margin:0 20% 3% 0;} .H_NewsB dl li {padding-bottom:9%;} .H_NewsB dl li blockquote {position:absolute; width:100%; height:100%; } .H_NewsB dl li blockquote center {display:block; height:100%; font-size:0; text-align:left; padding:2.2% 0 0 0;} .H_NewsB dl li blockquote center h3 {display:inline-block; width:83%; vertical-align:top; overflow:hidden; text-overflow:ellipsis; font-size:1.2rem; white-space:nowrap; color:#000;} .H_NewsB dl li blockquote center h3:nth-child(1) i {margin:0 0.5rem 0 0;} .H_NewsB dl li blockquote center h3:nth-child(2) {width:17%; font-size:0.875rem; text-align:right; padding-top:0.5%; color:#979797;} .H_NewsB dl li blockquote hr {position:absolute; z-index:-1; width:0%; border-width:0; height:100%; left:50%; top:0%; font-size:0; background-color:#EEE; transition:all .3s ease;} .H_NewsB dl li blockquote:hover hr {transition:all .5s ease; width:100%; left:0%;} .H_NewsB dl li blockquote:hover center h3:nth-child(1) {color:#E90003; transition:all .5s ease 0.4s} .H_NewsC {width:86.2%;} .H_NewsC dt {position:relative; padding-bottom:14.0%; border-bottom:rgba(0,0,0,0.1) 1px solid; /*注意:使用padding =height:51*/} .H_NewsC dt blockquote {position:absolute; width:100%; height:100%; font-size:0; padding-top:4.1%; box-sizing:border-box;} .H_NewsC dt blockquote center {display:inline-block; font-size:1rem; vertical-align:top;} .H_NewsC dt blockquote center a {color:#979797; overflow:hidden;} .H_NewsC dt blockquote center:nth-child(1) {width:95%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:left;} .H_NewsC dt blockquote center:nth-child(1) i {margin-right:0.5rem;} .H_NewsC dt blockquote center:nth-child(2) {width:5%; font-size:0.9rem; color:#979797; text-align:right; position:relative;} .H_NewsC dt blockquote center:nth-child(2) i {position:absolute; margin-top:20%; right:0%; z-index:1; transition:all .3s ease} .H_NewsC dt blockquote center:nth-child(2) i:nth-child(1) {opacity:0; transition:all .3s ease;} .H_NewsC dt blockquote center:nth-child(2) i:nth-child(2) {opacity:1; transition:all .3s ease .3s;} .H_NewsC dt blockquote hr {border-width:0; height:1px; width:0%; position:relative; left:-50%; margin-top:0.5%; background:url(../Images/Common/LineC.gif); transition:all .3s ease .5s;} .H_NewsC dt blockquote:hover hr {width:95%; left:-2%; transition:all .7s ease;} .H_NewsC dt blockquote:hover center:nth-child(1) a {color:#000; transition:all .5s ease .5s;} .H_NewsC dt blockquote:hover center:nth-child(1) a i {color:#000; transition:all .5s ease .5s;} .H_NewsC dt blockquote:hover center:nth-child(2) i:nth-child(2) {opacity:0; right:-50%; transition:all .7s ease;} .H_NewsC dt blockquote:hover center:nth-child(2) i:nth-child(1) {opacity:1; right:-50%; transition:all .7s ease .5s;} .H_NewsD {width:86.2%;} .H_NewsD dt {position:relative; padding-bottom:14.3%; border-bottom:rgba(0,0,0,0.1) 1px solid; /*注意:使用padding =height:51*/} .H_NewsD dt blockquote {position:absolute; width:100%; height:100%; font-size:0; padding-top:4.3%; box-sizing:border-box;} .H_NewsD dt blockquote center {display:inline-block; font-size:1rem; vertical-align:top;} .H_NewsD dt blockquote center a {color:#979797; overflow:hidden;} .H_NewsD dt blockquote center:nth-child(1) {width:95%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:left;} .H_NewsD dt blockquote center:nth-child(1) i {margin-right:0.5rem;} .H_NewsD dt blockquote center:nth-child(2) {width:5%; font-size:0.9rem; color:#979797; text-align:right; position:relative;} .H_NewsD dt blockquote hr {border-width:0; height:100%; width:0%; position:relative; left:50%; top:-80%; background-color:rgba(0,0,0,0.1); transition:all .3s ease .5s;} .H_NewsD dt blockquote:hover a {color:#000; transition:all .5s ease .4s;} .H_NewsD dt blockquote:hover hr {width:100%; left:0%; transition:all .5s ease;} .H_Active_Tit {display:block; height:29.2%; text-align:center;} .H_Active_Tit img {height:100%; width:auto;} .H_Active_TitA {display:block; text-align:center; font-size:1.3rem; letter-spacing:0.1rem; font-weight:bolder; color:#710A53; box-sizing:border-box;} .H_SlidePic {padding-bottom:18.5%; width:25%; position:relative;} .H_SlidePic li {width:95%; height:100%; left:2.5%; position:absolute;} .H_SlidePic li img {width:100%; height:auto;} .H_SlidePic li h3 {text-align:center; line-height:2.3rem; font-size:1rem; color:#000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .H_Sugg {display:table; width:96%; height:93%; margin:3%; background:url(../images/BackD.gif) no-repeat left top; background-size:100% 100%; box-sizing:border-box;} .H_Sugg dl {display:table-row; } .H_Sugg dt {display:table-cell; vertical-align:bottom;} .H_Sugg dl:nth-child(1) dt {height:28%; font-size:0;} .H_Sugg dl:nth-child(1) dt span {display:inline-block; width:45%;} .H_Sugg dl:nth-child(1) dt span:nth-child(2){width:50%;} .H_Sugg dl:nth-child(1) dt span input, .H_Sugg dl:nth-child(2) dt textarea {border-width:0; color:000; font-size:1rem; background-color:transparent;} .H_Sugg dl:nth-child(2) dt {height:52%;} .H_Sugg dl:nth-child(2) dt textarea {line-height:1.2rem; height:55%;} .H_Sugg dl:nth-child(3) dt {height:20%; vertical-align:top; text-align:right;} /********************************** 以下用于党建栏目首页 ********************************** H_Party: 采用table的两列结构 *********************************************************************************/ .D_BannerImg {position:absolute; width:100%; display:block; height:100%; opacity:0; background-repeat:no-repeat; background-position:center top;background-size:100% auto;} .D_MinWidthDiv {max-width:1440px; min-width:1160px;} .H_Party {display:table; width:100%;} .H_Party>dd {display:table-cell; position:relative; width:10.4%; padding-bottom:7%; line-height:0; background:url(../Images/Img_0.png) no-repeat left top; background-size:72% auto;} .H_Party>dd center {position:absolute; height:100%; width:100%;} .H_Party>dt {display:table-cell; width:89.6%; } .H_Party>dt h3 {padding:0 0 0.9% 0; font-size:1.8rem; color:#000; position:relative; /*border-bottom:#EEE 1px solid;*/} .H_Party>dt h3 span {color:#535353; font-size:1rem;} .H_Party>dt h3 span:nth-child(2) {position:absolute; display:block; width:3.5%; height:66%; right:5%; top:30%; font-size:0.75rem; white-space:nowrap;} .H_Party>dt h3 span:nth-child(2) img {height:100%; width:auto; } .H_Party>dt h3 span:nth-child(2) a {color:#E90003; border-bottom:#FFF 1px dashed;} .H_Party>dt h3 span:nth-child(2) a:hover {color:#000; border-bottom:#000 1px dashed;} .H_Party>dt h4 {padding-bottom:1.55%/*=20*/; position:relative; width:100%; font-size:0; opacity:0.5;} .H_Party>dt h4 hr {position:absolute; top:40%; background-color:#000; height:1px; width:100%;} .H_Party>dt h4 blockquote {position:absolute; top:20%; transform:rotate(-90deg);} .H_Party>dt h4 blockquote:nth-child(2) {right:0%; transform:rotate(90deg);} .H_Party>dt h5 {color:#737373; width:100%; font-size:0;} .H_Party>dt h5 p { font-size:0.75rem; line-height:1.3rem;} .H_Party>dt h5 span, .H_Party>dt h5 tt, .H_Party>dt h5 label {display:inline-block; font-size:0.75rem; line-height:1.2rem; vertical-align:top; margin:0.1rem 0; padding:0 0.5rem; box-sizing:border-box;} .H_Party>dt h5 span {width:33%;} .H_Party>dt h5 tt {width:50%; vertical-align:top;} .H_Party>dt h5 label {width:50%; font-size:0; font-size:0.75rem; } .H_Party>dt h5 label:nth-child(2n+1) {width:49%; margin-right:1%;} .H_Party>dt h5 label code {display:inline-block; width:20%; vertical-align:top;} .H_Party>dt h5 label code:nth-child(1) b {color:#000;} .H_Party>dt h5 label code:nth-child(2) {width:80%;} .H_PartyA {} .H_PartyA>div {padding-bottom:3.5%; position:relative;} .H_PartyA>div>div {position:absolute; width:100%; height:100%;} .H_PartyA>div>div center {display:block; font-size:0; height:100%; text-align:left;} .H_PartyA>div>div center dd {display:inline-block; width:10.4%; text-align:left; font-size:1rem;} .H_PartyA>div>div center dd span {padding:0.3rem 1.0rem 0.5rem 1.0rem; border-radius:0.2rem; background-color:#FFF; font-size:1.0rem; line-height:0.9rem; letter-spacing:0.05rem;} .H_PartyA>div>div center dd span a {color:#000; position:relative;} .H_PartyA>div>div center dd span a hr {position:absolute; border-width:0; height:1px; border-bottom:#FFF 1px dashed;width:100%; top:0.7rem; left:0rem;} .H_PartA_Span {background-color:#E90003!important;} .H_PartA_Span a {color:#FFF!important; font-weight:bolder;} /*比例关系 在设计稿尺寸下 .H_PartyB(图列表)>div>div 宽度=1440 其下的 dd(一行5个图片,有间隔): 19.5 宽=280 间隔 0.625 宽=8 h3: 设置height=77.5,保证图片尺寸: 270*151.4 比例:16:9 因此后台设置图片上传尺寸 280*157 */ .H_PartyB {position:absolute; left:0%; width:100%;} .H_PartyB>div {padding-bottom:14.5%; position:relative;} .H_PartyB>div>div {position:absolute; width:100%; height:100%;} .H_PartyB>div>div center {display:block; font-size:0; height:100%; text-align:left;} .H_PartyB>div>div center dd {display:inline-block; vertical-align:top; height:100%; text-align:left;} .H_PartyB>div>div center dd {width:19.5%; margin:0 0.625% 0 0; box-sizing:border-box;} .H_PartyB>div>div center dd:last-child {margin-right:0;} .H_PartyB>div>div center dd h3 {width:100%; height:77.5%; border-radius:0.3rem; overflow:hidden; border:#DDD 0.05rem solid; padding:1.5%; box-sizing:border-box;} .H_PartyB>div>div center dd h3 img {width:100%; height:100%; transform:scale(1); border-radius:0.3rem;} .H_PartyB>div>div center dd h4 {padding:2.5% 0; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.8rem; color:#000; box-sizing:border-box; position:relative; transition:all 0.2s ease;} .H_PartyB>div>div center dd h4 hr {position:absolute; z-index:-1; height:80%; top:10%; left:0%; background-color:#E90003; width:0%; transition:all ease 0.3s 0.3s;} .H_PartyB>div>div center dd:hover a h3 img {transform:scale(1.1);} .H_PartyB>div>div center dd:hover h3 {border-color:#AAA;} .H_PartyB>div>div center dd:hover h4 {color:#FFF; transition:all 0.4s ease 0.3s;} .H_PartyB>div>div center dd:hover h4 hr {width:100%; transition:all 0.5s ease;} .H_PartyC {font-size:0; position:relative; width:100%;} .H_PartyC>div {display:inline-block; width:50%; text-align:left; margin:0; box-sizing:border-box;} .H_PartyC>div:nth-child(2) {width:50%; text-align:right;} .H_PartyC>div h3 {width:92%; padding:2.2% 0 1.8% 0; margin:0; position:relative; border-bottom:rgba(0,0,0,0.1) 0.05rem solid;} .H_PartyC>div:nth-child(2) h3 {text-align:left;} .H_PartyC>div h3 p {display:inline-block; width:86%; font-size:1rem; line-height:1rem; color:#000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; position:relative; z-index:2;} .H_PartyC>div h3:nth-child(2n) {background-color:#FAFAFA;} .H_PartyC>div h3 p i {margin:0.3rem;} .H_PartyC>div h3 span {float:right; font-size:0.75rem; color:#979797; padding:0.8% 0.5rem 0 0;} .H_PartyC>div h3 hr {position:absolute; z-index:1; height:50%; width:0%; top:25%; right:0%; background-color:#E90003; transition:all 0.3s ease;} .H_PartyC>div h3:hover p {color:#FFF; transition:all 0.3s ease 0.4s;} .H_PartyC>div h3:hover span {color:#FF0; transition:all 0.3s ease 0.4s;} .H_PartyC>div h3:hover hr {width:100%; transition:all 0.6s ease} .H_News_C {width:100%; display:table; margin:auto;} .H_News_C>dd {display:table-cell; text-align:left; vertical-align:top;} .H_News_C>dd:nth-child(1) {width:44.44%; /*width:640*/} .H_News_C>dd:nth-child(2) {width:30.56%; /*width:440*/ border-right:rgba(0,0,0,0.2) 1px solid;} .H_News_C>dd:nth-child(3) {width:25.00%; /*width:360*/ text-align:right;} .H_News_C_Img {background:url(../Images/Img_1.png) no-repeat left top; background-size:auto 95%;} .H_News_C_Tit {display:block; height:100%; text-align:left; padding:5% 0 0 0; box-sizing:border-box; position:relative;} .H_News_C_Tit img {height:75%; width:auto; margin-left:6.5%;} .H_News_C_Tit span {position:absolute; top:0; right:2%; display:block; width:3.4rem; font-size:0.8rem; height:2.175rem; background:url(../Images/Img_1.png) no-repeat left top; background-size:auto 100%; line-height:2.1rem;} .H_News_C_Tit span a {color:#04428A;} .H_News_C_Tit span a:hover {color:#E90003; border-bottom:#E90003 1px dashed;} .H_News_L_Img {display:block; padding:4px; border:#CCC 0.05rem solid; border-radius:0.3rem;} .H_News_L_Img center {display:block; width:100%; height:100%; position:relative; border-radius:0.3rem; overflow:hidden;} .H_News_L_Img center img {width:100%; height:100%; border-radius:0.3rem; /*640*378 padding-bottom:59%*/} .H_News_L_Img center:hover img {transform:scale(1.2); transition:all .5s ease;} .H_News_L_Tit {width:100%; margin:0;} .H_News_L_Tit h3 {width:100%; font-weight:bolder; font-size:1.3rem; overflow:hidden; text-overflow:ellipsis; height:2rem; white-space:nowrap;} .H_News_L_Tit h3 a {color:#000;} .H_News_L_Tit h4 {padding:2% 0; font-size:0;} .H_News_L_Tit h4 span {display:inline-block; font-size:0.9rem; color:#979797; width:65%;} .H_News_L_Tit h4 span tt {color:#000;} .H_News_L_Tit h4 span:nth-child(2) {width:35%; text-align:right;} .H_News_L_Tit hr {height:1px; width:100%; opacity:0.6; background:url(../Images/Common/LineC.gif) repeat-x left center;} .H_News_L_Tit p {padding:2% 1%; font-size:0.85rem; line-height:1.1rem; height:3rem; overflow:hidden; background-color:#F9F9F9; color:#04428A;} .H_News_L_Tit:hover a {color:#04428A; font-size:105%; transition:all .5s ease;} .H_News_M, .H_News_R {width:93.4%; /*H_News_M width:410*/} .H_News_M>div, .H_News_R>div {padding-bottom:26.8%; position:relative; /*height:410*26.8%=110*/} .H_News_M>div>center, .H_News_R>div>center {position:absolute; height:100%; width:100%; border-bottom:rgba(0,0,0,0.1) 0.05rem solid;} .H_News_M>div>center center, .H_News_R>div>center center {display:block; height:100%;} .H_News_M>div>center center blockquote, .H_News_R>div center center blockquote {display:table; height:100%; width:100%;} .H_News_M>div>center center blockquote li, .H_News_R>div center center blockquote li {display:table-cell; text-align:left; vertical-align:middle;} .H_News_M>div>center center blockquote li h4 {font-size:0.8rem; color:#04428A;} /*-- 这里我使用 linear-gradient 完成span的下划线动画,支持文字换行,下划线颜色由两组数据 color-stop 控制(色值 位置),与字体大小的关系,比如字体如果为 1.0rem,则 color-stop 为 1.2rem 1.3rem --*/ .H_News_M>div>center center blockquote li span {color:#000; font-size:1.0rem; line-height:1.5rem; background-image:linear-gradient(to bottom, transparent 1.2rem, #04428A 1.3rem); background-repeat:no-repeat; background-position:0% 100%; background-size:0% 100%;transition:background-size .3s;} .H_News_M>div center center blockquote li span i {margin-right:0.5rem;} .H_News_M>div center center blockquote li:hover span {transition:background-size .3s; color:#04428A; background-size:100% 100%;} .H_News_R {float:right; /*width:336*/} .H_News_R>div {padding-bottom:27.2%; /*height:91*/} .H_News_R>div center center blockquote li:nth-child(1) {width:31.5%; text-align:center; /*width:106*/} .H_News_R>div center center blockquote li:nth-child(1) h3 {width:66%; height:79%; overflow:hidden; border-radius:0.2rem; margin:0 0 0 1rem;} .H_News_R>div center center blockquote li:nth-child(1) h3 img {height:100%; width:100%; border-radius:0.2rem; transform:scale(1); /*300*195 93*60*/} .H_News_R>div center center blockquote li:nth-child(2) {width:68.5%; line-height:1.1rem; /*width:230*/} .H_News_R>div center center blockquote li:nth-child(2) span {color:#000; font-size:0.9rem; background-image:linear-gradient(to bottom, transparent 1.1rem, #04428A 1.2rem); background-repeat:no-repeat; background-position:0% 100%; background-size:0% 100%;transition:background-size .3s;} .H_News_R>div center center blockquote li:nth-child(2) span span {color:#999;} .H_News_R>div center center blockquote li:nth-child(2) span i {margin-right:0.5rem;} .H_News_R>div center center blockquote:hover li:nth-child(2) span {transition:background-size .3s; color:#04428A; background-size:100% 100%;} .H_News_R>div center center blockquote:hover li:nth-child(1) h3 img {transform:scale(1.2);} .P_News_C {width:100%; display:table; margin:auto;} .P_News_C>dd {display:table-cell; text-align:left; vertical-align:top; position:relative;} .P_News_C>dd:nth-child(1), .P_News_C>tdd:nth-child(4) {width:10%; /*width:144*/} .P_News_C>dd:nth-child(2), .P_News_C>dd:nth-child(3) {width:40%; /*width:576*/} .P_News_C>dd:nth-child(3) {text-align:right;} .P_News_LR {width:80%; position:absolute; text-align:right;} .P_News_LR h3, .P_News_LR h4, .P_News_LR h5, .P_News_LR h6 {position:relative; right:3rem; text-align:right; white-space:nowrap; width:10rem; /*background-color:#EEE;*/} .P_News_LR h3 span {white-space:nowrap; color:#FF103E; font-size:2.2rem; line-height:2.6rem;} .P_News_LR h4 {height:5.5rem; line-height:5.5rem; font-size:1.5rem; color:#000;} .P_News_LR h5 {color:#626262; line-height:1.2rem; font-size:0.9rem; height:5rem;} .P_News_LR h6 {width:8rem; right:1rem; text-align:center; height:1.5rem; line-height:1.5rem; background-color:#FF1240; border-radius:0.25rem;} .P_News_LR h6 a {color:#FFF;} .P_News_LR_LL {left:0rem; text-align:left; } .P_News_LR_LL h3, .P_News_LR_LL h4, .P_News_LR_LL h5, .P_News_LR_LL h6 {right:0rem!important; position:initial; text-align:left!important;} .P_News_LR_LL h4 {} .P_News_D {width:98%;/*565*/ display:table; border:#C3C0C0 0.05rem solid; margin:auto;} .P_News_D dl {display:table-row;} .P_News_D dl dt, .P_News_D dl dd {display:table-cell; text-align:left; vertical-align:middle; width:100%;} .P_News_D dl dt {padding-bottom:13.3%;/*75*/ position:relative;} .P_News_D dl dt center {position:absolute; width:98%; height:100%;} .P_News_D dl dt center blockquote {display:block; height:100%; text-align:left; background:url(../Images/BackImg_2P.jpg) no-repeat left center; background-size:100% auto;} .P_News_D dl dt center blockquote img {height:53.5%; width:auto; margin:5.5% 0 0 1%;} .P_News_D dl dt center blockquote span {position:relative; font-size:1.5rem; color:#A30101; top:25%; left:1.5%; letter-spacing:0.1rem;} .P_News_D dl dt hr {width:98%; height:1px; background-color:#A30101;} .P_News_D dl dd {padding-bottom:8.5%;/*55*/ position:relative;} .P_News_D dl dd center {position:absolute; width:98%; height:100%; left:1%;} .P_News_D dl dd center blockquote {position:relative; height:100%; width:100%; font-size:0; overflow:hidden;} .P_News_D dl dd center blockquote span {display:inline-block; position:relative; height:100%; vertical-align:top; line-height:300%; top:0%; font-size:1rem; width:85%; overflow:hidden; text-overflow:ellipsis; text-align:left; white-space:nowrap} .P_News_D dl dd center blockquote span a {color:#000;} .P_News_D dl dd center blockquote span tt {color:#A30101;} .P_News_D dl dd center blockquote span:nth-child(2n+2) {width:15%; font-size:0.85rem; text-align:right; padding-top:1%; color:#979797;} .P_News_D dl dd center blockquote:hover span:nth-child(3) {opacity:0;} .P_News_D dl dd center blockquote span img {height:auto; width:6%; margin-right:0.3rem;} .P_News_D dl dd center hr {position:relative; width:98%; height:1px; opacity:0.2; background:url(../Images/Common/LineC.png) repeat-x left center;} .P_News_D dl dd center blockquote:hover span:nth-child(1) {opacity:0; top:-100%; transition:all 0.6s ease;} .P_News_D dl dd center blockquote:hover span:nth-child(3) {opacity:1; top:-120%; transition:all 0.6s ease;} .P_News_D dl dd center blockquote:hover span:nth-child(3) a {color:#A30101; transition:all 0.3s ease .6s;} .FaceBack {width:100%; position:relative; font-size:0;} .FaceBack>div, .FaceBack>blockquote {position:absolute; height:100%; width:100%;} .FaceBack>div {background-repeat:no-repeat; background-size:100% auto; opacity:0;} .FaceBack>blockquote {display:table; width:60.4vw; left:50%; margin-left:-30.2vw; z-index:1;} .FaceBack>blockquote center {display:table-cell; text-align:center; vertical-align:top; font-size:0;} .FaceBack>blockquote center dd {display:inline-block; width:30.2vw; height:8.6vw; font-size:1rem; position:relative; overflow:hidden;} .FaceBack>blockquote center dd img {height:auto; width:100%; position:absolute;} .FaceBack>blockquote center dd:nth-child(2) img {right:-100%;} .FaceBack>blockquote center dd:nth-child(3) img {left:-100%;} .FaceBack>blockquote center h3, .FaceBack>blockquote center h4 {width:30.2vw; height:8.9vw; opacity:0;} .FaceBack>blockquote center h3 {background-repeat:no-repeat; background-size:auto 100%; margin:12vw auto 1.1vw auto; background-position:top center;} .FaceBack>blockquote center h4 {margin:1.6vw auto 0vw auto; font-size:1.6rem; letter-spacing:0.25rem; color:#FFF; text-align:center; height:2.5rem; line-height:2.5rem;} .FaceBack>div li {position:absolute; bottom:6vw; left:50%; margin-left:-10rem; width:20rem; color:#FFF; font-size:0.9rem; text-align:center;} .FaceBack>div li a {color:rgba(255,255,255,0.6); border-bottom:rgba(255,255,255,0.6) 1px dashed;} .FaceBack>div li a:hover {color:#FF0; border-bottom:#FF0 1px dashed;}