/** *@Description: public main css *@Author: zcy *@Update: zcy(2016-5-9 13:20) **/ html{ overflow-y: auto;} .main-header{position: relative;} a.more{display: block; float: right; text-align: right; font-size: 14px ; color: #76be0d;} .hm-sec3{margin-top:60px; margin-bottom: 50px} .hm-expert{position: relative; margin: 0 auto; width: 930px; } .hm-expert h2 p,.hm-medical h2 p,.hm-project h2 p{font-size: 12px;} .hm-exp-sort{position:relative; margin:20px auto; width: 190px; font-size: 14px; color: #9a9a9a;} .hm-exp-sort a,.hm-exp-sort span{display: inline-block; margin:0 5px;} .hm-exp-sort span{margin:0 20px;} .hm-exp-sort a.current{color: #2aacc6;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } img{ border:0px; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body, button, input, select, textarea { font: 12px Microsoft Yahei, Helvetica, sans-serif; } /**clear webkit adjust**/ body, table, td, div, p{ word-wrap:break-word; -webkit-text-size-adjust:none; } .w1200{width: 1200px; margin: 0 auto;} .w980{width: 980px; margin: 0 auto;} a{color:#626262;text-decoration:none;cursor:pointer;} a:hover{text-decoration: none;} img{border:none;} .hm-sec4{position: relative; width: 100%; height:630px; min-width: 1000px; background: #66b7cf;}/**/ .sec4-bg-top{position: absolute; width: 100%;height: 50px; background:url(../images/hmsec4bg.png) repeat-x;} .sec4-bg-top span,.sec4-bg-bottom span{display: block; margin: 0 auto; width: 272px; height: 50px; background: url(../images/imgs.png) no-repeat -176px -544px ; background-color: #fff; } .sec4-bg-bottom span{ background-position: -176px -624px;} .sec4-bg-bottom{position: absolute;bottom:-50px; width: 100%;height: 50px; background:url(../images/hmsec4bg.png) repeat-x 0 -67px;} .hm-medical{position: relative;} .hm-medical h2,.hm-project h2{position: absolute; display: block; left:50%; top:-40px; margin-left:-43px; width:96px; height: 50px; color: #9a9a9a;text-align: center;} .hm-medical ul{width: 860px; margin:120px auto 0;} .hm-medical li{position:relative;float:left;width:65px;overflow:hidden;height:350px;} .medical-title{position: absolute;top:0; width: 65px; padding-top:90px; height: 260px; color: #fff; background:rgba(0,0,0,.8);background: #000\9;opacity: .8;z-index: 10;} .hm-medical li .med-tit-current{background:transparent; color: #000; text-shadow:0 0 3px rgba(0,0,0,.5); } .medical-title i{display: block; margin:0 auto; width:40px;height: 40px; background:url(../images/imgs.png) no-repeat;} .medical-title p{ margin: 20px auto; width: 18px; height: auto;line-height: 20px;font-size: 16px;} .medical-title .cloud-img{background-position:-141px -331px;} .medical-title .con-room{background-position:-188px -331px;} .medical-title .air-clinic{background-position:-235px -331px;} .medical-title .img-report{background-position:-283px -331px;} .medical-title .two-way{background-position:-329px -331px;} .med-tit-current .cloud-img{background-position:-141px -291px;} .med-tit-current .con-room{background-position:-188px -291px;} .med-tit-current .air-clinic{background-position:-235px -291px;} .med-tit-current .img-report{background-position:-283px -291px;} .med-tit-current .two-way{background-position:-329px -291px;} .hm-medical .block{position:absolute;top:0; width:600px; height: 100%; left:0;background:url(../images/homemedical.jpg) no-repeat; z-index: 0; overflow: hidden;} .hm-medical .block p{position: absolute; bottom:-60px; height:40px; padding:10px; font-size: 13px; line-height: 20px; color: #fff; background:rgba(0,0,0,.2); overflow: hidden;} .hm-medical li.current .block p{bottom: 0;} .hm-medical .block2{background-position:0 -350px ;} .hm-medical .block3{background-position:0 -700px ;} .hm-medical .block4{background-position:0 -1050px ;} .hm-medical .block5{background-position:0 -1400px ;} .hm-sec5{position: relative;} .hm-project{margin-top: 140px; height: 450px;} .hm-project h2{color: #fff; top:-180px;} .hm-pro-map{position: relative; margin: 40px auto 40px; width: 414px; height: 342px; background:url(../images/home.png) no-repeat 3px -7px;} .hm-project ul{margin-top: 20px;} .hm-project ul li{position: absolute; text-indent:10px; } .hm-project ul li a{display: block; position: absolute;cursor: pointer;} .hm-pro-map li span{position: relative; left:-15px; padding-left:15px; opacity:0; color:#aaa; font:16px/30px Microsoft Yahei,sans-serif; background: url(../images/disk.png) no-repeat left center;} .hm-pro-map li a:hover+span{color: #000;} .hm-project .map-sh{top:180px;right: -165px;} .hm-project .map-sh a{top:19px; left:-48px; width:20px; height:20px;} .hm-project .map-sh a:hover{background:url(../images/home.png) no-repeat -740px -187px;} .hm-project .map-pt{top:240px;right: -225px;} .hm-project .map-pt a{top:-7px; left:-62px; width:45px; height:55px;} .hm-project .map-pt a:hover{background:url(../images/home.png) no-repeat -707px -220px;} .hm-project .map-xn{top:140px;left:-120px;} .hm-project .map-xn a{top:-8px; right:-248px; width:111px; height:86px;} .hm-project .map-xn a:hover{background:url(../images/home.png) no-repeat -787px -6px;} .hm-project .map-lz{top:350px;left:150px;} .hm-project .map-lz a{top:-101px; left:67px; width:75px; height:62px;} .hm-project .map-lz a:hover{background:url(../images/home.png) no-repeat -786px -91px;} .hm-project .map-sc{top:270px;left:-40px;} .hm-project .map-sc a{top:-86px; right:-130px; width:96px; height:86px;} .hm-project .map-sc a:hover{background:url(../images/home.png) no-repeat -594px -180px;} .hm-project .map-gz{top:320px;left: 55px;} .hm-project .map-gz a{top:-88px; left:154px; width:58px; height:51px;} .hm-project .map-gz a:hover{background:url(../images/home.png) no-repeat -646px -269px;} .hm-project .map-xz{top:220px;left: -175px;} .hm-project .map-xz a{top:-66px; right:-153px; width:165px; height:106px;} .hm-project .map-xz a:hover{background:url(../images/home.png) no-repeat -417px -183px;} .hm-project .map-ks{top:60px;left: -195px;} .hm-project .map-ks a{top:-26px; right:-150px; width:175px; height:136px;} .hm-project .map-ks a:hover{background:url(../images/home.png) no-repeat -408px -42px;} .hm-project .map-nmg{top:10px;left:135px;} .hm-project .map-nmg a{top:-7px; left:32px; width:193px; height: 162px;} .hm-project .map-nmg a:hover{background:url(../images/home.png) no-repeat -585px -9px;} .hm-project ul li i{display:block; width:20px;height:30px; float:left; background:url(../images/imgs.png) no-repeat -121px -235px; } .hm-news{position: absolute; bottom:10px; overflow: hidden; width: 1000px; height: 30px; font-size: 14px; line-height: 30px; color: #777; } .hm-news li{display: inline-block; width:1200px;} .hm-news i{display: inline-block;margin-right: 10px; width: 20px; height: 20px; background: url(../images/imgs.png) -150px -270px no-repeat; vertical-align: middle;} .plus-mar-left{overflow:hidden; word-break:keep-all; white-space:nowrap;} .plus-mar-left ul{list-style:none; margin:0; padding:0; display:inline-block; *display:inline; zoom:1;} .plus-mar-left li{display:inline-block; *display:inline; zoom:1; text-indent:15px;} .plus-mar-top{overflow:hidden; word-break:keep-all; white-space:nowrap;} .plus-mar-top ul{list-style:none; margin:0; padding:0; line-height:40px;} .plus-mar-top li{ padding-right:10px;} .plus-mar-bottom{overflow:hidden; word-break:keep-all; white-space:nowrap; position:relative;} .plus-mar-bottom ul{list-style:none; margin:0; padding:0; line-height:40px; position:relative;} .plus-mar-bottom li{ padding-right:10px;} .plus-mar-up{overflow:hidden;} .plus-mar-up ul{list-style:none; margin:0; padding:0; line-height:40px;} .plus-mar-down{overflow:hidden; position:relative;} .plus-mar-down ul{list-style:none; margin:0; padding:0; position:relative;} /*16-5-04改版 16-5-04改版*/ /*zcy-section*/ .hm-banner{min-width: 1000px;} .hm-banner{min-width: 1000px;position: absolute\9;top:12%\9;left:14%\9;} .hm-banner .slidesjs-previous,.hm-banner .slidesjs-next{position: absolute; top:180px;left:50%; width: 0px;height: 60px; line-height:0; z-index: 100; text-indent: -9999px; } .hm-banner .slidesjs-pagination{position: absolute; top:164%;left:50%; margin-left: -25px; bottom: 50px; width:0px; z-index: 110;} .hm-sec2{position: relative; margin:-30px auto 30px; width:980px;height: 320px; background: #fff; z-index:90;} .hm-sec2-leftbg,.hm-sec2-rightbg{position: absolute; top:-29px; width: 28px; height: 345px;background: url(../images/home.png) no-repeat; } .hm-sec2-leftbg{left:-28px;} .hm-sec2-rightbg{right:-28px; background-position: -31px 0;} .hm-sec2-midbg{position: absolute; top:-22px; height:22px; width:980px;background:url(../images/sec2bg.png) repeat-x; } .section-bg{height: 520px; width:1000px; margin: 0 auto; position:relative;} .section-home{float:none;margin:0; padding: 0; min-width:1000px;height: auto;} .section-imgs{position: absolute; top:40px; left:40%;width:348px; height:342px;} .imgs{display: block; position: absolute; background: url(../images/imgs/many-icon.png)} .imgs-1{top:83px;left:0px;width:30px;height:30px; background-position: -7px -53px;} .imgs-2{top:22px;left:221px;width:21px;height:22px;background-position: -58px -58px;} .imgs-3{top:242px;left:147px;width:20px;height:20px;background-position: -58px -55px;} .imgs-4{top:76px;left:322px;width:21px;height:22px;background-position: -7px -96px;} .imgs-5{top:207px;left:37px;width:92px;height:60px;background-position: -95px -17px;} .imgs-6{top:10px;left:70px;width:60px;height:67px;background-position: -70px -118px;} .imgs-7{top:207px;left:330px;width:46px;height:50px;background-position: -145px -127px;} .section-imgs .pills{position:absolute;top:142px;left:148px;opacity:0} .section-imgs .the-bone{position:absolute;top:144px;left:260px;opacity:0} .section-imgs .management{position:absolute;top:252px;left:188px;opacity:0} .section-imgs .cases{position:absolute;top:76px;left:95px;opacity:0} .section-imgs .plus-sign{position:absolute;top:115px;left:215px;opacity:0} .section-imgs .water{position:absolute;top:60px;left:54px;opacity:0} .section-imgs .ecg-computer{position:absolute;top:184px;left:73px;opacity:0} .section-slogan{position:absolute;top:196px;left:0px;width:480px;height:215px;padding-left:20px;color: #788583; } .section-slogan h1{margin-bottom: 30px;font-size: 3.5em;font-weight:600;} .section-slogan p{line-height:30px;font-size: 1.2em;text-indent: 1em;} .section-slogan1{position:absolute;top:147px;left:0px;width:480px;height:215px;padding-left:20px;color: #788583; } .section-slogan1 h1{margin-bottom: 30px;font-size: 3.5em;font-weight:600;} .section-slogan1 p{line-height:30px;font-size: 1.2em;text-indent: 1em;} /*空中诊室*/ .sky{position:absolute;top:-40px;left:30px;display:inline-block;width:196px;height:44px;;background: url(../images/imgs/skys.png)} /*云医疗*/ .header-bottom2{position: absolute;top: -268px;left: 0;display:block;margin-bottom: -1px; width:100%;height:270px;background: url(../images/imgs/header-bottom.png) repeat-x;} .section-medical{width:100%;height:700px;padding-top:15px;} .medical-header{margin:0 auto;} .medical-header p{width:200px;margin: 0 auto;font-size:1.8em;line-height: 20px;margin-bottom: 90px;text-align: center;} .medical-header p span{display: inline-block;padding-bottom: 15px;margin-left:10px;vertical-align: middle;} .medical-icon{display: inline-block;width:52px;height:30px; background: url(../images/imgs/many-icon.png) no-repeat -4px -2px;} .medical-image{width:938px;height:378px;position:relative;margin: 0 auto;} .medical-image ul{width:15%;float: left;} .medical-image ul li{width:145px;height:66px;} .medical-image ul li a{display:inline-block;width:145px;height:66px;} .medical-image ul li a i{display:inline-block;margin-top: 17px;margin-left: 50px;} .medical-cheack{width:145px;height:66px;background-color:#E3EFF2;} .medical-imgs{background: url(../images/imgs/many-icon.png);} .medical-disk-image{display:inline-block;width:42px;height:33px;background-position: -4px -136px;} .medical-doctor{display:inline-block;width:42px;height:33px;background-position: -4px -216px;} .medical-imac{display:inline-block;width:42px;height:33px;background-position: -2px -300px;} .medical-case{display:inline-block;width:42px;height:37px;background-position: -4px -380px;} .medical-two-way{display:inline-block;width:42px;height:23px;background-position: -4px -467px;} .medical-disk-image-block{position: absolute;top: 0;left: 139px;float:right;width:85%;height:330px;background-color: #E3EFF2;} .img-25-write{float:left;position:absolute;top:100px;left:0px;width:450px;height:200px;padding-left:32px;z-index: 5; } .img-25-write h1{margin-bottom: 40px;} .img-25-write p{width: 450px;font-size:1.2em;font-weight:500;line-height: 30px;margin-bottom: 0;} .imgs-25{float:right;position: absolute;top:67px;right:35px;} /*医生介绍*/ .doctor-introduced{width:100%;height:700px;} .introduced-icon{display: inline-block;width:37px;height:41px; background: url(../images/imgs/many-icon.png) no-repeat -83px -369px;} .introduced{width: 1000px;height:450px;margin: 0 auto;position: relative;} .domestic{width:105px;color: #32C4D2;} .foreign{width:93px;padding-left: 20px;} .introduced ul{position:absolute;} .introduced ul li{width:327px; height:85px;margin-bottom: 54px;} .doc-av{display: inline-block; position: absolute; top: 8px; left: 96px; width: 238px; height: 85px; padding-top: 30px;} .doc-name{display: inline-block;width:64px;height:22px;margin-bottom:10px;font-size: 1.3em;font-weight: 600; white-space: nowrap; overflow:hidden;text-overflow:ellipsis;} .doc-zc{display: inline-block;font-size: 1.2em;color:#BCC3C6;margin-bottom:10px;font-weight: 400;white-space: nowrap; overflow:hidden;text-overflow:ellipsis;} .doc-hp{display: inline-block;font-size: 1.2em;color: #738790;} .doc-ks{display: inline-block;font-size: 1em;color: #ADB5B7;} .position-1{top:147px; left: 96px;} .hm-doctor1 ul li img{display: block; margin: 20px auto; max-width: 80px; max-height: 80px; min-height: 80px; border-radius: 40px;} .hm-doctor1 ul{ width:815px;margin: 0 auto;} .hm-doctor1 ul li{float: left;} .position-2{top:8px;left:525px;} .position-3{top:147px;left:525px;} .hm-doctor1 .slidesjs-previous,.hm-doctor1 .slidesjs-next{display: block; position: absolute; top:100px; width: 25px;height: 32px;text-indent: -9999px; line-height: 1px; background: url(../images/imgs.png) no-repeat;} .hm-doctor1 .slidesjs-previous{left: 0px;background-position: -387px -239px;} .hm-doctor1 .slidesjs-next{right: 0px;background-position: -387px -195px;} .hm-doctor1 .slidesjs-previous:hover{background-position: -365px -239px;} .hm-doctor1 .slidesjs-next:hover{background-position: -365px -195px;} .hm-doctor1 .slidesjs-stop{display: none;} .first img{position: absolute;top:0px;left:0px;} .second img{position:absolute;top:139px;left:0px} .third img{position: absolute;top:0;left:423px;} .last img{position: absolute;top:139px;left:423px;} .second a{top:147px; left: 96px;} .third a{top:8px;left:525px;} .last a{top:147px;left:525px;} a.hm-area{display:inline-block; width:17%; text-align: center; font-size: 14px; color: #7d7d7d;} .the-divider{width:80%;margin:0 auto;height:1px;margin-bottom:100px;background: url(../images/imgs/The-divider.png)} /*热门医院*/ .hm-hothos{margin-top:30px; margin-right:20px;width:680px; } .hm-hothos h3{width: 100px;} .hm-hos-area{margin: 0 auto; text-align: center; width: 601px;padding-right: 10px;} .hot-hospital{width: 100%;height:684px;margin-top: 10%;} .hot-hospital-icon{display: inline-block;width:47px;height:41px; background: url(../images/imgs/many-icon.png) no-repeat -73px -292px;} .the-hospital{width: 1000px;margin: 0 auto;position: relative;} .the-hospital .hm-hp li{position: relative; float: left; text-align: center;} .hm-hos{padding-left: 90px;margin-top: 40px;} .hm-hothos .hm-hp{margin-top: 30px; margin-left: 5px;} .hm-hothos .hm-hp li{position: relative; float: left; text-align: center;} .hm-hp .hos1{width: 336px; height: 190px;} .hm-hp .hos2,.hm-hp .hos3,.hm-hp .hos4,.hm-hp .hos5,.hm-hp .hos6,.hm-hp .more{width:168px;height: 95px; } .hm-hp .more{background:#2aacc6;text-align: center; color:#fff; font-size: 16px; line-height: 95px;} .hm-hp .more a{color: #fff;} .hm-hp li img{width: 100%; height: 100%;} .hm-hp li p{position: absolute;bottom:0; width: 100%; font-size: 13px; height: 30px; line-height: 30px; background:rgba(0,0,0,.5);color: #fff;text-align: center; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .hm-hp li:hover p{background:rgba(28,94,124,.7);} .area-other{ margin-top:30px;height:80px;} .area-other li{float: left; font-size: 14px; padding:0 10px;margin-bottom: 10px; margin-right: 10px; line-height: 30px; max-width: 180px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .hm-welcome{margin-top:30px;width: 258px; min-height:246px; border-right:1px solid #dedede;} .hm-welcome li{ clear: both;margin-bottom: 20px; } li.welcome{height:100px;margin-top: 20px;} .welcome img{float: left; margin:20px 0 0 20px ; max-width: 65px; max-height: 65px;} .welcome p{float: left; width: 150px; margin:20px 0 0 15px; font-size: 16px;} .welcome p.hm-cpw a{font-size: 14px; color: #959595;} .welcome p span{display:inline-block;max-width: 150px;} .hm-cpw i{display: inline-block; margin-right: 10px; width: 12px; height: 13px; background:url(../images/imgs.png) no-repeat -23px -54px; } li.hm-btn{height: 36px;} .hm-wel-btn{float: left; font:14px Microsoft Yahei,sans-serif; background: #959595;color: #fff; border-radius: 2px; width: 106px;height: 35px; margin-left: 20px;} li.hm-mine{height: 30px; margin-left: 23px; font-size: 14px;} .hm-mine a{display: inline-block;margin-right: 18px; line-height: 30px; color: #76be0d;} .hm-mine a:hover,.hm-dis li a:hover{border-bottom: 1px solid #ff9000; color: #ff9000;} /*垂直专科*/ .vertical-specialized{width: 100%;height: 1000px;} .vertical-specialized-subject{position:relative;width:1000px;margin: 0 auto;padding-top: 177px;} .vertical-icon{display: inline-block;width:46px;height:41px; background: url(../images/imgs/many-icon.png) no-repeat -61px -213px;} .vertical-write{display: -webkit-inline-box;padding-bottom: 40px;padding-left: 20px;color: #fff;font-size: 1.6em;vertical-align: middle;} .vertical-imgs{height:auto;} .oa{position: absolute;top:341px;left:81px;} .ultrasonic{position: absolute;top:341px;left:322px;} .lung{position: absolute;top:341px;left:570px;} .radiation{position: absolute;top:341px;left:817px;} .the-heart{position: absolute;top:550px;left:322px;} .lymph-node{position: absolute;top:550px;left:570px;} .the-brain{position: absolute;top:550px;left:81px;} .the-emergency{position: absolute;top:550px;left:817px;} .vertical-name{margin-top:30px;color:#fff;font-size: 1.3em;text-align: center} .movement{position:absolute;top:-11px;left:-11px;width: 123px; height:123px;-webkit-animation:circle 3s infinite linear; background: url(../images/imgs/movement.png)} @-webkit-keyframes circle{ 0%{ transform:rotate(-360deg); } 100%{ transform:rotate(0deg); } } .shake1{-webkit-animation:shake1 16s infinite linear;} @keyframes shake1 { 2% { transform: translate(2px, 5px) rotate(-1.5deg);} 4% { transform: translate(5px, 2px) rotate(-2.5deg);} 10% { transform: translate(1px, 2px) rotate(1.5deg); } 20% { transform: translate(-1px, -3px) rotate(1.5deg); } 30% { transform: translate(-3px, 4px) rotate(0.5deg);} 30% { transform: translate(3px, -4px) rotate(2.5deg); } 40% { transform: translate(4px, 0px) rotate(0.5deg); } 50% { transform: translate(2px, -5px) rotate(3.5deg); } 60% { transform: translate(-1px, 7px) rotate(1.5deg); } 62% { transform: translate(4px, -6px) rotate(-1.5deg); } 70% { transform: translate(3px, 4px) rotate(-0.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake2{-webkit-animation:shake2 16s infinite linear;} @keyframes shake2 { 2% { transform: translate(5px, 2px) rotate(-2.5deg) ; } 10% { transform: translate(3px, -4px) rotate(2.5deg); } 20% { transform: translate(-5px, -6px) rotate(1.5deg); } 30% { transform: translate(6px, 3px) rotate(-1.5deg); } 40% { transform: translate(2px, -5px) rotate(3.5deg); } 53% { transform: translate(1px, 7px) rotate(-1.5deg); } 70% { transform: translate(-1px, 7px) rotate(1.5deg); } 80% { transform: translate(4px, -6px) rotate(-1.5deg); } 90% { transform: translate(3px, 4px) rotate(-0.5deg); } } .shake3{-webkit-animation:shake-hard 16s infinite linear;} @keyframes shake-hard { 2% { transform: translate(2px, 4px) rotate(1deg); } 4% { transform: translate(8px, 4px) rotate(0deg); } 24% { transform: translate(3px, -2px) rotate(0deg); } 26% { transform: translate(-1px, -4px) rotate(1deg); } 40% { transform: translate(4px, 0px) rotate(0deg); } 64% { transform: translate(3px, 4px) rotate(1deg); } 98% { transform: translate(6px, -5px) rotate(0deg); } 0%, 100% { transform: translate(0, 0) rotate(0deg); } } .shake6{-webkit-animation:shake6 16s infinite linear;} @keyframes shake6 { 10% { transform: translate(-19px, -10px) rotate(-2deg); opacity: 0.03; } 20% { transform: translate(-13px, 5px) rotate(-5deg); opacity: 0.04; } 30% { transform: translate(-17px, 9px) rotate(-1deg); opacity: 0.84; } 40% { transform: translate(-17px, 17px) rotate(7deg); opacity: 0.99; } 50% { transform: translate(-10px, -9px) rotate(-5deg); opacity: 0.79; } 60% { transform: translate(-9px, -8px) rotate(-3deg); opacity: 0.05; } 70% { transform: translate(-10px, 7px) rotate(-5deg); opacity: 0.81; } 80% { transform: translate(14px, 3px) rotate(2deg); opacity: 0.83; } 90% { transform: translate(9px, -6px) rotate(-7deg); opacity: 0.99; } 0%, 100% { transform: translate(0, 0) rotate(0deg); } } .shake5{-webkit-animation:shake-horizontal 12s infinite linear;} @keyframes shake-horizontal { 2% { transform: translate(-6px, 0) rotate(1deg); } 20% { transform: translate(0px, 8px) rotate(0deg); } 40% { transform: translate(-7px, 0) rotate(0deg); } 60% { transform: translate(-9px, 0) rotate(1deg); } 70% { transform: translate(-4px, 0) rotate(0deg); } 90% { transform: translate(-6px, 0) rotate(1deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake7{-webkit-animation:shake7 12s infinite linear;} @keyframes shake7 { 2% { transform: translate(5px, -8px) rotate(-2deg); } 10% { transform: translate(-8px, 12px) rotate(-4deg); } 20% { transform: translate(-8px, -14px) rotate(-4deg); } 30% { transform: translate(0px, -10px) rotate(-2deg); } 0%, 100% { transform: translate(0, 0) rotate(0deg); } } .content{background-attachment: fixed;} /*地域应用*/ .regional-application{width: 100%;} .regional{width:1000px;margin: 0 auto;height:auto;padding-top: 206px;} .regional-icon{display: inline-block;width:46px;height:46px; background: url(../images/imgs/many-icon.png) no-repeat -77px -438px;} .regional-write{display: -webkit-inline-box;padding-bottom: 50px;padding-left:10px;color: #5BCADF;font-size: 1.8em;vertical-align: middle;} /*视差滚动*/ .cd-container {margin: 0 auto;} .cd-container::after {content: '';display: table;clear: both;} /* --------------------------------Main components-------------------------------- */ .cd-main-content { height: 100%;position: relative;z-index: 1;} .cd-fixed-bg {position: relative;min-height: 80%;background-repeat: repeat-x;background-position: center center;z-index: 1;} .cd-fixed-bg.cd-bg-1 { background: url("../images/imgs/cloudbg.png") 50% 0 repeat-x fixed;} .cd-fixed-bg.cd-bg-2,.cd-fixed-bg.cd-bg-3 {background-color: #fff;} .cd-fixed-bg.cd-bg-4 {background-color: #fff;height:800px;} .cd-scrolling-bg {position: relative;min-height: 77%;z-index: 2;} .cd-scrolling-bg.cd-color-1 {background: url(../images/imgs/subject.png);} .cd-scrolling-bg.cd-color-2 {background-color: #d7e8ee;} .cd-scrolling-bg.cd-color-3 {background: url(../images/imgs/subject.png) repeat-x;} a.more{display: block; float: right; text-align: right; font-size: 14px ; color: #76be0d;} /*上海home页*/ @media only screen and (max-width: 1920px), (max-height: 1080px){ body,html{height: 100%;} #paren{height: 100%;width: 100%} .top{height:calc(100% - 62.5%)} .middle{ overflow: hidden; height: calc(100% - 345px); background:url(../images/background.png) no-repeat; } /*上海市影像云平台*/ .header_sh{ min-width:1200px; z-index:-999; margin: 0px auto; background:url(../images/banner.png) no-repeat; } .header_sh .headsh-left{ float:left; width:500px } .header_sh .logo-txt{ float:left; height:64px; line-height:64px; margin-left:12px; font-size:16px; color:#fff } .header_sh .headsh-right{ margin-right:20px; float:right; } .header_sh .headsh-right .logout-icon{ float:left; width:20px; height:20px; margin-top: 25px; margin-right:4px; } .header_sh .headsh-right .user-headsh img{ border:2px solid #686868; margin: 12px 4px 0; line-height: 50px; border-radius: 50%; width: 40px; height: 40px; } .header_sh .headsh-right .user-info .usernamesh{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width: 80px; line-height:67px; font-size:16px; text-align: center; } .header_sh .headsh-right .logoutsh a:hover{color:#fff !important;} .header_sh .headsh-right .logoutsh{ float:left; height: 67px; line-height: 67px; font-size:16px; color:#fff } .head_title{ color:#fff; height:50px; } .head-icon .head-icon-qrcode{ position: absolute; right: 235px; } .head-icon .qrcode-head{ position: absolute; width: 142px; right: 256px; top: 10px; } .head_title .head_logo{ float:left; height:50px; opacity:1; } .head_right{ float:right; margin-right:50px; line-height:50px } .head_right a{ color:#fff; font-size:16px; cursor:pointer } .head_right a:first-child{ margin-right:30px; } .aside{ height:100%; } .content-left{ color:#fff; padding-top:9%; letter-spacing:11px; text-align: center; } .headeban{ height:389px; position:relative; } .content-left h1{ font-size:48px; font-family:MicrosoftYaHei; font-weight:bold; line-height:40px; } .content-left p{ font-size:32px; font-family:MicrosoftYaHei; font-weight:400; line-height:40px; opacity:0.8; padding-top:32px } .content-right{ position:absolute; right:100px; top:28px; width:580px; height:400px; background:url(../images/Banner.png) no-repeat } .mode_top{ position:relative; height: 40%; margin-top:1%; } .mode_bottom{ height: calc(50% - 57.6px); position:relative; } .mode_top li, .mode_bottom li{ width: 21%; float:left; height:calc(50vh - 231.6px); text-align:center; margin:2% 20px; cursor:pointer; background:rgba(255,255,255,1); } .mode_top .area_img{ width:73px; height: 73px; margin-top: 14%; } .Mask .maskimg{ margin-top: 14%; width: 73px; height:73px; } .mode_bottom .area_img{ width:73px; height:73px; margin-top: 14%; } .mode_bottom li{ margin-bottom:60px; } .mode_top li h6 ,.mode_bottom li h6{ height:20px; font-size:20px; font-family:MicrosoftYaHei; font-weight:400; color:rgba(48,48,48,1); line-height:32px; } .mode_top li span ,.mode_bottom li span{ height:25px; font-size:14px; font-family:MicrosoftYaHei; font-weight:400; line-height: 32px; color:rgba(121,123,128,1); } .mode_top1{ float:left; display:none; margin-right:27px; text-align:center; margin-top:30px; cursor:pointer; background:#4680FF; } .mode_top1 span{ background:url(../images/clickin.png) no-repeat } .mode_top1 li, .mode_bottom1 li{ width:365px; height:260px; float:left; margin-right:27px; text-align:center; margin-top:30px; cursor:pointer; background:rgba(255,255,255,1); } .mode_top1 li .area_img ,.mode_bottom1 li .area_img { width:89px; height: 89px; } .mode_top1 li h6 ,.mode_bottom1 li h6{ height:40px; font-size:20px; font-family:MicrosoftYaHei; font-weight:bold; color:rgba(26,26,26,1); line-height:70px; } .mode_top1 li span ,.mode_bottom1 li span{ height:25px; font-size:14px; font-family:MicrosoftYaHei; font-weight:400; line-height:50px; color:rgba(121,123,128,1); } .wjmm { height: 20px; margin-right: 50px; color: #fff; margin-top: 9px; cursor: pointer; } .area1 .mode_1{ position:absolute; float: left; height:calc(50vh - 205px); text-align: center; margin:0 20px; width: 24%; cursor: pointer; left: -2%; top:0; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; } .area1 .mode_1 h6{ color:#fff; font-weight: bold; } .area1 .mode_1 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .area1 .mode_1 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } .area1:hover .mode_1{ opacity: 1; } .diag1 .mode_2{ position:absolute; float: left; width: 24%; height:calc(50vh - 205px); text-align: center; margin:0 20px; cursor: pointer; left: 23%; top:0; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; } .diag1 .mode_2 h6{ color:#fff; font-weight: bold; } .diag1 .mode_2 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .diag1 .mode_2 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } .diag1:hover .mode_2{ opacity: 1; } .image1 .mode_3{ position:absolute; float: left; width: 24%; height:calc(50vh - 205px); text-align: center; margin:0 20px; cursor: pointer; left:47%; top:0; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; } .image1 .mode_3 h6{ color:#fff; font-weight: bold; } .image1 .mode_3 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .image1 .mode_3 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } .image1:hover .mode_3{ opacity: 1; } .yxzk1 .mode_6{ position: absolute; float: left; width: 24%; height: calc(50vh - 205px); float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 68%; top: 0; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .yxzk1 .mode_6 h6{ color:#fff; } .yxzk1 .mode_6 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .yxzk1 .mode_6 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .yxzk1:hover .mode_6{ opacity: 1; } .teach1 .mode_7{ position: absolute; float: left; width: 24%; height: calc(50vh - 205px); float: left; text-align: center; margin: 0 4%; cursor: pointer; left: -5%; top:22%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .teach1 .mode_7 h6{ color:#fff; } .teach1 .mode_7 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .teach1 .mode_7 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .teach1:hover .mode_7{ opacity: 1; } .consultation1 .mode_4{ position: absolute; width: 24%; height: calc(50vh - 205px); float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 19%; top: 22%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; } .consultation1 .mode_4 h6{ color:#fff; } .consultation1 .mode_4 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .consultation1 .mode_4 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .consultation1:hover .mode_4{ opacity: 1; } .teach1 .mode_4{ position:absolute; float: left; text-align: center; margin:2% 20px; width: 31%; height:calc(50vh - 205px); cursor: pointer; left:-1%; top: 12%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; } .teach1 .mode_4 h6{ color:#fff; font-weight: bold; } .teach1 .mode_4 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .teach1 .mode_4 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } .teach1:hover .mode_4{ opacity: 1; } .mange1 .mode_8{ position: absolute; float: left; width: 24%; height: calc(50vh - 205px); float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 70%; top: 23%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .mange1 .mode_8 h6{ color:#fff; } .mange1 .mode_8 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .mange1 .mode_8 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .mange1:hover .mode_8{ opacity: 1; } .system1 .mode_5{ position:absolute; float: left; text-align: center; margin:2% 20px; width: 24%; height:calc(50vh - 205px); cursor: pointer; left:46%; top:12%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.3s; } .system1:hover .mode_5{ opacity: 1; } .system1 .mode_5 h6{ color:#fff; font-weight: bold; } .system1 .mode_5 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .system1 .mode_5 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } #paren .header_sh .head-bg{ height:80px; background:#fff; opacity:0.8 } #login-sh .login_sh .login-btn{ margin-bottom: 25px; height: 50px; width: 85%; margin: 0 auto; padding-left: 92px; margin-top: 25px; } #paren .header_sh .headsh-left .login-title{ float: left; height: 26px; font-size: 28px; font-family: FZZZHONGJW--GB1-0; font-weight: 400; color: rgba(26,126,239,1); line-height: 40px; } #login-sh .login_sh .reg-login-btn{ width: 87%; height: 40px; background: #289f7d; border-radius: 2px; color: #fff; margin-left: -20px; font-size: 14px; letter-spacing: 4px; } #login-sh .login-title{ float:left; height:26px; font-size:28px; margin-top: 9px; text-align:left; font-family:FZZZHONGJW--GB1-0; font-weight:400; color:rgba(26,126,239,1); line-height: 25px; } #login-sh .login-footer{ position: fixed; bottom: 0px; height: 90px; margin: 0 auto; width:100%; text-align: center; color:#999999; background:#F3F2F3; } #login-sh .login-footer .footer-txt{ line-height: 55px; font-size: 16px; } #login-sh .login-footer .footer-icp{ font-size: 16px; } #login-sh .login_logo .qrcode{ margin-top: 10px; float:right; width:70px; height:70px; margin-right:10%; cursor: pointer; } #login-sh .login-footer .qrcode{ margin-top: 10px; float:right; width:75px; height:75px; margin-right:10% } #login-sh .login_logo{ position: fixed; top: 0px; height: 90px; margin: 0 auto; width:100%; text-align: center; color:rgba(26,126,239,1); background:#fff; } #login-sh .logo-shleft{ float:left; margin: 20px; } #paren .header_sh .logo-shleft{ float:left; margin: 20px; } #login-sh .logo-py{ margin-top: 5px; text-align:left; line-height:30px; text-align:left; font-size:14px; } #login-sh .login-right{ float: right; width: 464px; height: 400px; margin-top: 22%; border-radius: 10px; background: rgba(69,68,68,0.4); } #login-sh .login_sh .login-reg-sh{ height: 41px; width: 90%; margin: 0 auto; margin-bottom: 25px; position: relative; } #login-sh .login_sh .login-reg-code{ height: 41px; width: 90%; margin: 0 auto; margin-bottom: 5px; position: relative; } #login-sh .login_sh .reg-yzm{ width: 135px !important } .pw-code{ width: 178px !important; } .login-scen p { margin: 5px 5px 20px; line-height: 32px; } .logins-btn .log-btn { width: 308px; height: 37px; background: #289f7d; border-radius: 2px; color: #fff; margin-left: -13px; font-size: 14px; letter-spacing: 4px; } .add-reg-btn .add-btn{ width: 308px; height: 37px; background: #289f7d; border-radius: 2px; text-align: center; color: #fff; margin-left: 42px !important; font-size: 14px; letter-spacing: 4px; } #login-sh .login_logo .hide{ float: right; position: relative; top: 18px; right:80px; width: 105px; height: 45px; line-height: 45px; text-align: center; background: #30c8a6; font-size: 20px; border-radius: 5px; color: #fff; cursor: pointer; font-weight: 500; } #login-sh .login_logo .hide a{ border: none; margin: 0; color: #fff; height: 100%; display: block; width: 100%; text-align: center; } .addul{ width: 385px; padding:10px 20px; } .addul .add-name{ float: left; width: 105px !important; text-align: right; clear: both; line-height: 38px; color: rgba(40,80,129,1); } .addul .add-intext{ margin-bottom: 25px; } .addul .add-fieldnum{ display: block; color: red; margin-left: 26px; line-height: 22px; } .box-input{ height: 38px; width: calc(100% - 150px) !important; line-height: 30px; background: #ffffff; font-size: 14px; color: #333; text-indent: 5px; border-radius: 6px; } .resetpw{ font-size: 15px; font-weight: bold; color: #fff; float: left; border-radius: 4px; box-shadow: 2px 2px 5px #000; width: 65px; background: #1169; height:30px; text-align: center; line-height: 38px; } } @media screen and (max-width:1600px), (max-height:900px){ body,html{height: 100%;} #paren{height: 100%;width: 100%} .top{height:calc(100% - 62.5%)} .middle{ overflow: hidden; height: calc(100% - 290px); background:url(../images/background.png) no-repeat; } /*上海市影像云平台*/ .header_sh{ min-width:1200px; z-index:-999; margin: 0px auto; background:url(../images/banner.png) no-repeat; } .header_sh .headsh-left{ float:left; width:500px } .header_sh .logo-txt{ float:left; height:64px; line-height:64px; margin-left:12px; font-size:16px; color:#fff } .header_sh .headsh-right{ margin-right:20px; float:right; } .header_sh .headsh-right .logout-icon{ float:left; width:20px; height:20px; margin-top:25px; margin-right:4px; } .header_sh .headsh-right .logoutsh a:hover{color:#fff !important;} .header_sh .headsh-right .logoutsh{ float:left; height:67px; line-height:67px; font-size:16px; color:#fff } .head_title{ color:#fff; height:50px; } .head_title .head_logo{ float:left; height:50px; opacity:1; } .head_right{ float:right; margin-right:50px; line-height:50px } .head_right a{ color:#fff; font-size:16px; cursor:pointer } .head_right a:first-child{ margin-right:30px; } .content-left{ color:#fff; padding-top: 7%; letter-spacing:11px; text-align: center; } .headeban{ height:389px; position:relative; } .content-left h1{ font-size:48px; font-family:MicrosoftYaHei; font-weight:bold; line-height:40px; } .content-left p{ font-size:32px; font-family:MicrosoftYaHei; font-weight:400; line-height:40px; opacity:0.8; padding-top:32px } .content-right{ position:absolute; right:100px; top:28px; width:580px; height:400px; background:url(../images/Banner.png) no-repeat } .aside{ height: 100%; } .mode_top{ position:relative; margin-top:3%; height:187px; } .mode_bottom{ margin-top: 3%; height: calc(50% - 27.6px); position:relative; } .mode_top li, .mode_bottom li{ width:259px; height:187px; float:left; text-align:center; cursor:pointer; background:rgba(255,255,255,1); } .mode_top .area_img{ width: 45px; height:45px; margin-top: 5% } .mode_bottom .area_img{ width: 45px; height:45px; margin-top: 10% } .mode_bottom li{ margin-bottom:60px; } .mode_top li h6 ,.mode_bottom li h6{ height:18px; font-size:18px; font-family:MicrosoftYaHei; font-weight:400; color:#303030; line-height:30px; } .mode_top li span ,.mode_bottom li span{ height:25px; font-size:14px; font-family:MicrosoftYaHei; font-weight:400; line-height: 32px; color:rgba(121,123,128,1); } .mode_top1{ float:left; display:none; margin-right:27px; text-align:center; margin-top:30px; cursor:pointer; background:#4680FF; } .mode_top1 span{ background:url(../images/clickin.png) no-repeat } .mode_top1 li, .mode_bottom1 li{ float:left; width:300px; height:187px; margin-right:27px; text-align:center; margin-top:30px; cursor:pointer; background:rgba(255,255,255,1); } .mode_top1 li .area_img ,.mode_bottom1 li .area_img { margin-top:13%; width: 45px; height:45px; } .mode_top1 li h6 ,.mode_bottom1 li h6{ height:40px; font-size:20px; font-family:MicrosoftYaHei; font-weight:bold; color:rgba(26,26,26,1); line-height:70px; } .mode_top1 li span ,.mode_bottom1 li span{ height:25px; font-size:14px; font-family:MicrosoftYaHei; font-weight:400; line-height: 32px; color:rgba(121,123,128,1); } .Mask .maskimg{ margin-top: 10%; width: 45px; height:45px; } .mode_top .diag1:hover .mode_top1{ display:block; background:#4680FF } .area1 .mode_1{ position:absolute; float: left; width: 273px; height:calc(50vh - 190px); float:left; text-align:center; cursor: pointer; left: -1%; top: 6%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .area1 .mode_1 h6{ color:#fff; } .area1 .mode_1 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .area1 .mode_1 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } .area1:hover .mode_1{ opacity: 1; } .diag1 .mode_2{ position:absolute; float: left; width: 292px; height: calc(50vh - 190px); float: left; text-align: center; cursor: pointer; left: 23%; top: 3% opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .diag1 .mode_2 h6{ color:#fff; } .diag1 .mode_2 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .diag1 .mode_2 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } .diag1:hover .mode_2{ opacity: 1; } .yxzk1 .mode_6{ position: absolute; float: left; width: 24%; height: calc(50vh - 190px); float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 71%; top: 3%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .yxzk1 .mode_6 h6{ color:#fff; } .yxzk1 .mode_6 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .yxzk1 .mode_6 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .yxzk1:hover .mode_6{ opacity: 1; } .teach1 .mode_7{ position: absolute; float: left; width: 24%; height: calc(50vh - 190px); float: left; text-align: center; margin: 0 4%; cursor: pointer; left: -5%; top: 10%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .teach1 .mode_7 h6{ color:#fff; } .teach1 .mode_7 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .teach1 .mode_7 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .image1 .mode_3{ position:absolute; float: left; width: 278px; height: calc(50vh - 190px); float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 46%; top: 3%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .image1 .mode_3 h6{ color:#fff; } .image1 .mode_3 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .image1 .mode_3 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } .image1:hover .mode_3{ opacity: 1; } .teach1 .mode_4{ position:absolute; float: left; width:310px; height:calc(50vh - 190px); float:left; text-align:center; margin:0 4%; cursor: pointer; left:-1%; top:-8%;; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .teach1 .mode_4 h6{ color:#fff; } .teach1 .mode_4 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .teach1 .mode_4 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } .teach1:hover .mode_4{ opacity: 1; } .system1 .mode_5{ position:absolute; float: left; width:292px; height:calc(50vh - 190px); float:left; text-align:center; margin:0 4%; cursor: pointer; left: 46%; top: 10%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .system1 .mode_5 h6{ color:#fff; } .system1 .mode_5 a{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickin.png) no-repeat } .system1 .mode_5 a:hover{ color: #4680FF; width: 120px; height: 40px; cursor:pointer; margin-left: 33%; line-height: 40px; display: block; background:url(../images/clickhover.png) no-repeat } .system1:hover .mode_5{ opacity: 1; } .mange1 .mode_8{ position: absolute; float: left; width: 292px; height: calc(50vh - 190px); float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 70%; top: 11%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .mange1 .mode_8 h6{ color:#fff; } .mange1 .mode_8 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .mange1 .mode_8 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .consultation1 .mode_4{ position: absolute; width: 292px; height: calc(50vh - 190px); float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 20%; top: 10%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; } .consultation1 .mode_4 h6{ color:#fff; } .consultation1 .mode_4 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .consultation1 .mode_4 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .consultation1:hover .mode_4{ opacity: 1; } #login-sh .login-right{ float: right; width:464px; height: 395px; margin-top: 16%; margin-right: 5%; border-radius: 10px; background: rgba(69,68,68,0.4); } #login-sh .login_sh .login-btn{ margin-bottom: 25px; height: 50px; padding-left: 90px; width: 80%; margin: 0 auto; margin-top: 10px; } #login-sh .login_sh .reg-login-btn{ width: 309px; height: 40px; background: #289f7d; border-radius: 6px; padding-left: 3%; color: #fff; font-size: 14px; letter-spacing: 8px; } #login-sh .login-title{ float:left; height:26px; font-size:28px; text-align:left; font-family:FZZZHONGJW--GB1-0; font-weight:400; color:rgba(26,126,239,1); line-height: 22px; } #login-sh .login-footer{ position: fixed; bottom: 0px; height: 80px; margin: 0 auto; width:100%; text-align: center; color:#999999; background:#F3F2F3; } #login-sh .login-footer .footer-txt{ line-height: 50px; font-size: 14px; } #login-sh .login-footer .footer-icp{ font-size: 14px; } #login-sh .login-footer .qrcode{ margin-top: 10px; float:right; width:60px; height:60px; margin-right:10% } .wjmm { height: 20px; margin-right: 50px; color: #fff; margin-top: 20px; cursor: pointer; } } @media screen and (max-width:1280px), (max-height:720px){ body,html{height: 100%;} #paren{height: 100%;width: 100%} .top{height:220px;} .middle{ overflow: hidden; height: calc(100% - 220px); background:url(../images/background.png) no-repeat; } /*上海市影像云平台*/ .header_sh{ min-width:1200px; z-index:-999; margin: 0px auto; background:url(../images/banner.png) no-repeat; } .head_title{ color:#fff; height:50px; } .head_title .head_logo{ float:left; height:50px; opacity:1; } .head_right{ float:right; margin-right:50px; line-height:50px } .head_right a{ color:#fff; font-size:16px; cursor:pointer } .head_right a:first-child{ margin-right:30px; } .content-left{ color:#fff; padding-top: 4%; letter-spacing:11px; text-align: center; } .content-left h1{ font-size:48px; font-family:MicrosoftYaHei; font-weight:bold; line-height:40px; } .content-left p{ font-size:32px; font-family:MicrosoftYaHei; font-weight:400; line-height:40px; opacity:0.8; padding-top:32px } .content-right{ position:absolute; right:100px; top:28px; width:580px; height:400px; background:url(../images/Banner.png) no-repeat } .aside{ height: 100%; } .mode_top{ position:relative; margin-top:2%; height: 160px; } .mode_bottom{ margin-bottom:3%; height: 187px; position:relative; } .mode_top li, .mode_bottom li{ width: 295px; min-height:160px; float:left; text-align:center; margin: 1% 4%; cursor:pointer; background:rgba(255,255,255,1); } .mode_top .area_img{ width: 45px; height:45px; margin-top: 5% } .mode_bottom .area_img{ width: 45px; height:45px; margin-top: 5% } .mode_bottom li{ margin-bottom:60px; } .mode_top li h6 ,.mode_bottom li h6{ height:20px; font-size:16px; font-family:MicrosoftYaHei; font-weight:400; color:#303030; line-height:30px; } .mode_top li span ,.mode_bottom li span{ height:25px; font-size:12px; font-family:MicrosoftYaHei; font-weight:400; line-height: 28px; color:rgba(121,123,128,1); } .mode_top1{ float:left; display:none; margin-right:27px; text-align:center; margin-top:30px; cursor:pointer; background:#4680FF; } .mode_top1 span{ background:url(../images/clickin.png) no-repeat } .mode_top1 li, .mode_bottom1 li{ float:left; width:130px; height:87px; margin-right:27px; text-align:center; margin-top:30px; cursor:pointer; background:rgba(255,255,255,1); } .mode_top1 li .area_img ,.mode_bottom1 li .area_img { margin-top:13%; width: 45px; height:45px; } .mode_top1 li h6 ,.mode_bottom1 li h6{ height:40px; font-size:20px; font-family:MicrosoftYaHei; font-weight:bold; color:rgba(26,26,26,1); line-height:70px; } .mode_top1 li span ,.mode_bottom1 li span{ height:25px; font-size:14px; font-family:MicrosoftYaHei; font-weight:400; line-height:50px; color:rgba(121,123,128,1); } .Mask .maskimg{ margin-top: 7%; width: 45px; height:45px; } .mode_top .diag1:hover .mode_top1{ display:block; background:#4680FF } .area1 .mode_1{ position:absolute; float: left; width: 310px; min-height:170px; float:left; text-align:center; margin: 1% 4%; cursor: pointer; left:-1%; top:-5%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .area1 .mode_1 h6{ color:#fff; font-size: 16px } .area1 .mode_1 a{ width: 90px; height: 30px; cursor:pointer; line-height: 30px; margin-left: 33%; border-radius: 5px; cursor:pointer; display: block; background:url(../images/clickin.png) no-repeat } .area1 .mode_1 a:hover{ width: 90px; height: 30px; cursor:pointer; line-height: 30px; margin-left: 33%; border-radius: 5px; cursor:pointer; display: block; background:url(../images/clickhover.png) no-repeat } .area1:hover .mode_1{ opacity: 1; } .diag1 .mode_2{ position:absolute; float: left; width: 310px; min-height:170px; float:left; text-align:center; margin: 1% 4%; cursor: pointer; left:31%; top:-6%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .diag1 .mode_2 h6{ color:#fff; font-size: 16px } .diag1 .mode_2 a{ width: 90px; height: 30px; cursor:pointer; line-height: 30px; margin-left: 33%; border-radius: 5px; cursor:pointer; display: block; background:url(../images/clickin.png) no-repeat } .diag1 .mode_2 a:hover{ width: 90px; height: 30px; cursor:pointer; line-height: 30px; margin-left: 33%; border-radius: 5px; cursor:pointer; display: block; background:url(../images/clickhover.png) no-repeat } .diag1:hover .mode_2{ opacity: 1; } .image1 .mode_3{ position:absolute; float: left; width: 310px; min-height:170px; float:left; text-align:center; margin: 1% 4%; cursor: pointer; left:64%; top:-5%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .image1 .mode_3 h6{ color:#fff; font-size: 16px } .image1 .mode_3 a{ width: 90px; height: 30px; cursor:pointer; line-height: 30px; margin-left: 33%; border-radius: 5px; cursor:pointer; display: block; background:url(../images/clickin.png) no-repeat } .image1 .mode_3 a:hover{ width: 90px; height: 30px; cursor:pointer; line-height: 30px; margin-left: 33%; border-radius: 5px; cursor:pointer; display: block; background:url(../images/clickhover.png) no-repeat } .image1:hover .mode_3{ opacity: 1; } .teach1 .mode_4{ position:absolute; float: left; width: 310px; min-height:170px; float:left; text-align:center; margin: 1% 4%; cursor: pointer; left:-1%; top:8%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .teach1 .mode_4 h6{ color:#fff; font-size: 16px } .teach1 .mode_4 a{ color: #4680FF; width: 90px; height: 30px; cursor:pointer; line-height: 30px; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .teach1 .mode_4 a:hover{ color: #4680FF; width: 90px; height: 30px; line-height: 30px; cursor:pointer; border-radius: 5px; margin-left: 33%; display: block; background:url(../images/clickhover.png) no-repeat } .teach1:hover .mode_4{ opacity: 1; } .system1 .mode_5{ position:absolute; float: left; width: 310px; min-height:170px; float:left; text-align:center; margin: 1% 4%; cursor: pointer; left:32%; top:8%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .system1 .mode_5 h6{ color:#fff; font-size: 16px } .system1 .mode_5 a{ color: #4680FF; width: 90px; height: 30px; cursor:pointer; line-height: 30px; margin-left: 33%; border-radius: 5px; cursor:pointer; display: block; background:url(../images/clickin.png) no-repeat } .system1 .mode_5 a:hover{ width: 90px; height: 30px; cursor:pointer; line-height: 30px; margin-left: 33%; border-radius: 5px; cursor:pointer; display: block; background:url(../images/clickhover.png) no-repeat } .system1:hover .mode_5{ opacity: 1; } } @media screen and (max-width:1366px), (max-height:768px){ body,html{height: 100%;} #paren{height: 100%;width: 100%} .top{height:calc(100% - 62.5%)} .middle{ overflow: hidden; height: calc(100% - 220px); background:url(../images/background.png) no-repeat; } /*上海市影像云平台*/ .header_sh{ min-width:1200px; z-index:-999; margin: 0px auto; background:url(../images/banner.png) no-repeat; } .header_sh .headsh-left{ float:left; width:500px } .header_sh .logo-txt{ float:left; height:64px; line-height:64px; margin-left:12px; font-size:16px; color:#fff } #login-sh .logo-shleft{ float:left; margin: 8px; } .header_sh .headsh-right{ margin-right:20px; float:right; } .header_sh .headsh-right .logout-icon{ float:left; width:20px; height:20px; margin-top:25px; margin-right:4px; } .header_sh .headsh-right .logoutsh a:hover{ color:#fff !important; } .header_sh .headsh-right .logoutsh{ float:left; height:67px; line-height:67px; font-size:16px; color:#fff } .head_title{ color:#fff; height:50px; } .head_title .head_logo{ float:left; height:50px; opacity:1; } .head_right{ float:right; margin-right:50px; line-height:50px } .head_right a{ color:#fff; font-size:16px; cursor:pointer } .head_right a:first-child{ margin-right:30px; } .head-icon .head-icon-qrcode{ position: absolute; right: 124px; } .head-icon .qrcode-head{ position: absolute; width: 142px; right: 146px; top: 10px; } .wjmm { height: 20px; margin-right: 50px; color: #fff; margin-top: 6px; cursor: pointer; } #paren .header_sh .logo-shleft{ margin: 8px; } .content-left{ color:#fff; padding-top: 2%; letter-spacing:11px; text-align: center; } .headeban{ height:389px; position:relative; } .content-left h1{ font-size:40px; font-family:MicrosoftYaHei; font-weight:bold; line-height:40px; } .content-left p{ font-size:26px; font-family:MicrosoftYaHei; font-weight:400; line-height:40px; opacity:0.8; padding-top:32px } .content-right{ position:absolute; right:100px; top:28px; width:580px; height:400px; background:url(../images/Banner.png) no-repeat } .aside{ height: 100%; } .mode_top{ position:relative; margin-top:1%; height:175px; } .mode_bottom{ margin-top: 1%; height: calc(50% - 27.6px); position:relative; } .mode_top li, .mode_bottom li{ width: 280px; height:175px; float:left; text-align:center; margin:10px; cursor:pointer; background:rgba(255,255,255,1); } .mode_top .area_img{ width: 45px; height:45px; margin-top: 8% } .mode_bottom .area_img{ width: 45px; height:45px; margin-top: 10% } .mode_bottom li{ margin-bottom:60px; } .mode_top li h6 ,.mode_bottom li h6{ height:20px; font-size:16px; font-family:MicrosoftYaHei; font-weight:400; color:#303030; line-height:30px; } .mode_top li span ,.mode_bottom li span{ height:25px; font-size:14px; font-family:MicrosoftYaHei; font-weight:400; line-height:32px; color:rgba(121,123,128,1); } .mode_top1{ float:left; display:none; margin-right:27px; text-align:center; margin-top:30px; cursor:pointer; background:#4680FF; } .mode_top1 span{ background:url(../images/clickin.png) no-repeat } .mode_top1 li, .mode_bottom1 li{ float:left; width:130px; height:87px; margin-right:27px; text-align:center; margin-top:30px; cursor:pointer; background:rgba(255,255,255,1); } .mode_top1 li .area_img ,.mode_bottom1 li .area_img { margin-top:13%; width: 45px; height:45px; } .mode_top1 li h6 ,.mode_bottom1 li h6{ height:40px; font-size:20px; font-family:MicrosoftYaHei; font-weight:400; color:rgba(26,26,26,1); line-height:70px; } .mode_top1 li span ,.mode_bottom1 li span{ height:25px; font-size:14px; font-family:MicrosoftYaHei; font-weight:400; line-height:32px; color:rgba(121,123,128,1); } .Mask .maskimg{ margin-top: 8%; width: 45px; height:45px; } .mode_top .diag1:hover .mode_top1{ display:block; background:#4680FF } .area1 .mode_1{ position:absolute; float: left; width: 310px; height:195px; float:left; text-align:center; margin:0 4%; cursor: pointer; left:-5%; top:-5%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .area1 .mode_1 h6{ color:#fff; font-size: 16px; } .area1 .mode_1 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%;; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .area1 .mode_1 a:hover{ color: #4680FF; width: 120px; cursor:pointer; margin-left: 33%; height: 35px; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .area1:hover .mode_1{ opacity: 1; } .diag1 .mode_2{ position:absolute; float: left; width: 310px; height:195px; text-align:center; margin:0 12px; cursor: pointer; left:23%; top:-5%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .diag1 .mode_2 h6{ color:#fff; } .diag1 .mode_2 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; display: block; border-radius: 5px; background:url(../images/clickin.png) no-repeat } .diag1 .mode_2 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .diag1:hover .mode_2{ opacity: 1; } .image1 .mode_3{ position:absolute; float: left; width: 310px; height:195px; float:left; text-align:center; margin:0 20px; cursor: pointer; left:47%; top:-5%; opacity: 0; background:url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .image1 .mode_3 h6{ color:#fff; } .image1 .mode_3 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .image1 .mode_3 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .image1:hover .mode_3{ opacity: 1; } .yxzk1 .mode_6{ position: absolute; float: left; width: 310px; height: 195px; float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 70%; top: -5%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .yxzk1 .mode_6 h6{ color:#fff; } .yxzk1 .mode_6 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .yxzk1 .mode_6 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .yxzk1:hover .mode_6{ opacity: 1; } .teach1 .mode_7{ position: absolute; float: left; width: 310px; height: 195px; float: left; text-align: center; margin: 0 4%; cursor: pointer; left: -5%; top: 1%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .teach1 .mode_7 h6{ color:#fff; } .teach1 .mode_7 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .teach1 .mode_7 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .teach1:hover .mode_7{ opacity: 1; } .mange1 .mode_8{ position: absolute; float: left; width: 310px; height: 195px; float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 70%; top: 1%; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.1s; -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; } .mange1 .mode_8 h6{ color:#fff; } .mange1 .mode_8 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .mange1 .mode_8 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .mange1:hover .mode_8{ opacity: 1; } .consultation1 .mode_4{ position: absolute; width: 310px; height: 195px; float: left; text-align: center; margin: 0 4%; cursor: pointer; left: 20%; top: 0; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; } .consultation1 .mode_4 h6{ color:#fff; } .consultation1 .mode_4 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .consultation1 .mode_4 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickhover.png) no-repeat } .consultation1:hover .mode_4{ opacity: 1; } .system1 .mode_5{ position: absolute; float: left; text-align: center; margin: 0px 20px; width: 310px; height: 195px; cursor: pointer; left: 47%; top: 0; opacity: 0; background: url(../images/bg.png) no-repeat; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; } .system1 .mode_5 h6{ color:#fff; } .system1 .mode_5 a{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; border-radius: 5px; display: block; background:url(../images/clickin.png) no-repeat } .system1 .mode_5 a:hover{ color: #4680FF; width: 120px; height: 35px; cursor:pointer; margin-left: 33%; height: 35px; display: block; background:url(../images/clickhover.png) no-repeat } .system1:hover .mode_5{ opacity: 1; } #paren .header_sh .head-bg{ height:65px; background:#fff; opacity:0.8 } #login-sh .login-right{ float: right; width: 425px; height: 390px; margin-top: 12%; border-radius: 10px; background: rgba(69,68,68,0.4); } #login-sh .login_sh .login-btn{ margin-bottom: 25px; height: 50px; width: 80%; margin: 0 auto; margin-top: 20px; } #login-sh .login_sh .reg-login-btn{ width: 90%; margin-left: -17px; height: 40px; background: #289f7d; border-radius: 6px; padding-left: 3%; color: #fff; font-size: 14px; letter-spacing: 4px; } .login-scen p{ margin: 5px 5px 20px; line-height: 32px; } .login-scen{ position: relative; margin: 0px auto; padding-top: 0px; min-height: 200px; } .box-input{ height: 38px; width: calc(100% - 150px) !important; line-height: 30px; background: #ffffff; font-size: 14px; color: #333; text-indent: 5px; border-radius: 6px; } .pw-code{ width: 135px !important; } #login-sh .login-title{ float:left; height:26px; font-size:22px; font-family:FZZZHONGJW--GB1-0; font-weight:400; text-align:left; color:rgba(26,126,239,1); line-height:10px; } #paren .header_sh .headsh-left .login-title{ float: left; height: 26px; font-size: 22px; font-family: FZZZHONGJW--GB1-0; font-weight: 400; color: rgba(26,126,239,1); line-height: 40px; } #login-sh .login-footer{ position: fixed; bottom: 0px; height: 60px; margin: 0 auto; width:100%; text-align: center; color:#999999; background:#F3F2F3; } #login-sh .login-footer .footer-txt{ line-height: 40px; } #login-sh .login-footer .qrcode{ margin-top: 5px; float:right; width:50px; height:50px; margin-right:7% } #login-sh .logo-py{ margin-top: 5px; text-align:left; line-height:0px; text-align:left; font-size:14px; } #login-sh .login_logo .qrcode{ margin-top: 8px; float:right; width:50px; height:50px; margin-right:7%; cursor: pointer; } #login-sh .login_logo{ position: fixed; top: 0px; height: 65px; margin: 0 auto; width:100%; text-align: center; color:rgba(26,126,239,1); background:#fff; } #login-sh .login_sh .reg-yzm{ width: 115px !important; } .login-scen .fj-code{ width: 130px !important; } #login-sh .login_logo .hide{ float: right; position: relative; top: 18px; right:80px; width: 105px; height: 45px; line-height: 45px; text-align: center; background: #30c8a6; font-size: 20px; border-radius: 5px; color: #fff; cursor: pointer; font-weight: 500; } #login-sh .login_logo .hide a{ border: none; margin: 0; color: #fff; height: 100%; display: block; width: 100%; text-align: center; } .logins-btn .log-btn{ width: 266px; height: 37px; background: #289f7d; border-radius: 2px; color: #fff; font-size: 14px; letter-spacing: 4px; } .add-reg-btn .add-btn{ width: 308px; height: 37px; background: #289f7d; border-radius: 2px; color: #fff; text-align:center; margin-left: -13px; font-size: 14px; letter-spacing: 4px; } .mobileErr{ margin-left: 40px; position: absolute; left: 80px; top: 38px; text-align: left; width: 335px; line-height: 30px; color: #f00; font: 13px/25px SimSun,Arial,sans-serif; } .codeErr{ margin-left: 40px; position: absolute; left: 80px; top: 105px; text-align: left; width: 335px; line-height: 30px; color: #f00; font: 13px/25px SimSun,Arial,sans-serif; } .phoneErr{ margin-left: 40px; position: absolute; left: 80px; top: 125px; text-align: left; width: 335px; line-height: 30px; color: #f00; font: 13px/25px SimSun,Arial,sans-serif; } .addul{ width: 385px; padding: 10px 20px; } .addul .add-name{ float: left; width: 105px !important; text-align: right; clear: both; line-height: 38px; color: rgba(40,80,129,1); } .addul .add-intext{ margin-bottom: 25px; } .addul .add-fieldnum{ display: block; color: red; margin-bottom: 5px; margin-left: 26px; line-height: 22px; } .resetpw{ font-size: 15px; font-weight: bold; color: #fff; float: left; border-radius: 4px; box-shadow: 2px 2px 5px #000; width: 65px; height:30px; text-align: center; line-height: 38px; background: #1169; } } #login-sh{ width:100%; background: url(../images/gzpwbg.png) no-repeat center; background-size: cover; height: 95%; } #login-sh .login-right .login-txt,.add-tit{ color:#fff; line-height: 50px; text-align: center; letter-spacing:6px; font-size:18px; } .logins-name{ float: left; width: 105px !important; text-align: right; clear: both; line-height: 30px; color: rgba(40,80,129,1); } p.logins-btn{ padding-left: 120px; float: left; } #login-sh .login-right .hr,.main-box .hr{ background: url(../images/hr.png) no-repeat center; height: 2px; margin-top: 3%; background-size: 80%; opacity:0.3 } #login-sh .login_sh{ padding:25px; } #login-sh .login_sh .login-reg-sh{ height: 41px; width: 90%; margin: 0 auto; margin-bottom: 25px; position: relative; } #login-sh .login_sh .login-reg-code{ height: 41px; width: 90%; margin: 0 auto; margin-bottom: 5px; position: relative; } #login-sh .login_sh .login-reg-sh .login-tips{ position: absolute; left: 50px; top: 42px; text-align: left; width: 335px; line-height: 30px; color: #0970c7; font: 13px/25px SimSun,Arial,sans-serif; } #login-sh .login_sh .reg-infor,.login-main .reg-infor{ width:69% ; height: 38px; border-radius: 6px; border: 1px solid #d7d7d7; padding-left: 1%; color: #a0a0a0; font-size: 14px; } #login-sh .login_sh .reg-code{ padding-left: 10px; width: 51%; margin-right: 10px; float: left; height: 38px; border: 1px solid #d7d7d7; padding-left: 3%; color: #a0a0a0; font-size: 14px; } #login-sh .login_sh .code-img{ width: 42%; height: 100%; } .mode_top .aside_hr,.mode_bottom .aside_hr{ margin-top: 6%; width:50%; height: 1px; } .mode_top .aside_hrsh,.mode_bottom .aside_hrsh{ margin-top: 6%; width:50%; height: 1px; } .mode_top .aside_txt,.mode_bottom .aside_txt{ margin:3%; font-size:14px; font-weight:400; color:rgba(150,151,150,1); } .mode_top .aside_txthover,.mode_bottom .aside_txthover{ margin:2%; font-size:14px; font-weight:400; color:#fff; } #paren .header_sh .headsh-left .logo-py{ color: rgba(26,126,239,1); line-height:10px; text-align:left; font-size:14px; } .wjmm a{ color: #fff; } .login-reg-name{ width: 56px; text-align: end; float: left; line-height: 38px; font-weight: bold; color:rgba(40,80,129,1) } #login-sh .login_sh .reg-infor{ width: calc(100% - 70px); height: 38px; border-radius: 6px; border: 1px solid #d7d7d7; padding-left: 5px; color: #a0a0a0; font-size: 14px; } div.tip-yellowsimple{ color:#0970c7; line-height: 32px; } .login_title{ text-transform: uppercase; font-size: 24px; font-weight: 700; line-height: 1em; letter-spacing: -1px; color: #118a79; } .login_logo_title{ display: flex; align-items: center; margin: 5px 10px 10px 40px; }