.iframe_box_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 99999; display: none; } .iframe_box { position: absolute; top: 50%; left: 50%; width: 400px; height: 542px; margin: -260px 0 0 -200px; border: solid 1px #ddd; box-shadow: 0 0 50px #333; } .iframe_title { height: 30px; width: 100%; display: block; background: #f2f2f2; border-bottom: solid 1px #ddd; font-size: 16px; text-align: left; line-height: 30px; padding-left: 15px; letter-spacing: 1px; color: #333; } .iframe_title a { position: absolute; right: 15px; text-decoration: none; } .iframe_viwe { position: relative; top:0px; height: 540px; width: 100%; /*background: rgba(0,0,0,0.9);*/ overflow: hidden; } .iframe_viwe span { position: absolute; left: 50%; top: 50%; height: 30px; width: 100px; margin: 15px 0 0-50px; text-align: center; font-size: 24px; color: #fff; } .iframe_viwe iframe { position: absolute; top: -30px; padding: 30px 0 0 0; width: 100%; height: 100%; z-index: 99; } /*------------------------------- 渚ц竟鏍 -------------------------------------*/ .aside-nav { position: fixed; right: 0px; top: 50%; display: block; transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); z-index: 9999; } .nav-right { position: relative; margin-top: 1px; margin-bottom: 1px; height: 42px; width: 42px; background: #0075c2; text-align: right; } .nav-right-img { position: absolute; left: 0; z-index: 10; width: 42px; height: 42px; transition: .3s; } .nav-right-img img { margin: 10px; width: 22px; } .more-width:hover .nav-right-img { left: -80px; } .more-width-call:hover .nav-right-img { left: -120px; } .nav-right-desc { position: absolute; right: 0; padding-right: 16px; width: 42px; height: 42px; font-size: 12px; line-height: 42px; background: #0075c2; color: #0075c2; border-radius: 50px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: .3s, color .1s; } .more-width:hover .nav-right-desc { width: 125px; color: #fff; transition: .3s; } .more-width-call:hover .nav-right-desc { width: 165px; } .nav-right-qrcode { position: absolute; left: -200px; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: .3s; padding: 10px; margin-left: -15px; background: #0075c2; } .nav-right-qrcode img { width: 130px; height: 130px; } .nav-right-qrcode i { padding: 5px; background: #fff; display: block; } .nav-right-qrcode p { text-align: center; width: 100%; color: #fff; padding-top: 10px; line-height: 5px; margin-bottom: 5px; } .nav-right:hover .nav-right-qrcode { left: -142px; opacity: 1; visibility: visible; } /* 搴曢儴瀵艰埅 */ .aside-bottom { display: none; } @media (max-width: 768px) { .aside-bottom { position: fixed; left: 0; height: 55px; bottom: 0; width: 100%; text-align: center; display: block; background: #0075c2; z-index: 9999; } .nav-bottom { float: left; width: 33.3%; left: 0; height: 100%; } .nav-bottom a { text-decoration: none; } .nav-bottom-img { position: relative; width: 24px; height: 24px; left: 50%; padding-top: 8px; margin-left: -12px; } .nav-bottom-img img { width: 24px; height: 24px; } .nav-bottom-text { padding-top: 10px; font-size: 12px; text-align: center; color: #fff; } .nav-bottom:hover .nav-right-qrcode { opacity: 1; visibility: visible; left: 50%; transform: translateX(-50%); top: -200px; margin-left: 0; } } /* telbox */ .telbox { position: fixed; left: 10%; top: 20px; bottom: auto; margin-top: 0; height: 50px; width: 80%; background: rgba(0, 0, 0, 0.5); border-radius: 25px; z-index: 9999 } .telpic { float: left; height: 40px; width: 40px; border-radius: 20px; margin: 5px; } .telico { float: right; height: 40px; width: 40px; border-radius: 20px; margin: 5px; } .telname { color: #fff; float: left; border-radius: 20px; margin-top: 5px; margin-left: 10px; } /*------------------------------- 渚ц竟鏍? -------------------------------------*/ .side ol, .side ul { list-style: none } .side a { text-decoration: none; color: #686868 } .side img { border: 0 } .side { position: fixed; width: 64px; right: 0; top: 70%; margin-top: -200px; z-index: 100; border: 1px solid #e0e0e0; background: #fff; border-bottom: 0 } .side ul li { width: 64px; height: 64px; float: left; position: relative; border-bottom: 1px solid #e0e0e0; color: #333; font-size: 12px; line-height: 38px; text-align: center; transition: all .3s; cursor: pointer } .side ul li:hover { background: #072146; color: #fff } .side ul li:hover a { color: #fff } .side ul li i { font-size: 24px; height: 25px; margin-bottom: 1px; display: block; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: auto 25px; margin-top: 8px; transition: all .3s } .side ul li i.bgs1 { background-image: url(../images/right_pic5.png) } .side ul li i.bgs2 { background-image: url(../images/right_pic7.png) } .side ul li i.bgs3 { background-image: url(../images/right_pic2.png) } .side ul li i.bgs4 { background-image: url(../images/right_pic1.png) } .side ul li i.bgs5 { background-image: url(../images/right_pic3.png) } .side ul li i.bgs6 { background-image: url(../images/right_pic6_on.png) } .side ul li:hover i.bgs1 { background-image: url(../images/right_pic5_on.png) } .side ul li:hover i.bgs2 { background-image: url(../images/right_pic7_on.png) } .side ul li:hover i.bgs3 { background-image: url(../images/right_pic2_on.png) } .side ul li:hover i.bgs4 { background-image: url(../images/right_pic1_on.png) } .side ul li:hover i.bgs5 { background-image: url(../images/right_pic3_on.png) } .side ul li .sidebox { position: absolute; width: 78px; height: 78px; top: 0; right: 0; transition: all .3s; overflow: hidden } .side ul li.sidetop { background: #f67524; color: #fff } .side ul li.sidetop:hover { opacity: .8; filter: Alpha(opacity=80) } .side ul li.sideewm .ewBox.son { width: 238px; display: none; color: #363636; background-color: #FFFFFF; text-align: center; position: absolute; left: -240px; top: 0; background-repeat: no-repeat; background-position: center center; border: 1px solid #e0e0e0 } .side ul li.sideetel .telBox.son { width: 240px; /* height: 237px;*/ display: none; color: #fff; text-align: left; position: absolute; left: -240px; top: -40px; background: #f67524 } .side ul li.sideetel .telBox dd { display: block; height: 118.5px; overflow: hidden; padding-left: 82px; line-height: 24px; font-size: 18px } .side ul li.sideetel .telBox dd span { display: block; line-height: 28px; height: 28px; overflow: hidden; margin-top: 32px; font-size: 18px } .side ul li.sideetel .telBox dd.bgs1 { background: url(../images/right_pic8.png) 28px center no-repeat; border-bottom: 1px solid #eee; } .side ul li.sideetel .telBox dd.bgs2 { background: url(../images/right_pic9.png) 28px center no-repeat } .side ul li:hover .son { display: block!important; animation: fadein 1s } .side #hi_backtotop{ display: none; } @keyframes fadein { from { opacity: 0 } to { opacity: 1 } } .side ul li:hover, .side ul li.sidetop, .side ul li.sideetel .telBox.son, .side ul li:hover { background: #072146 } /*------------------------------- 渚ц竟鏍廵nd -------------------------------------*/ .fix-chat { width: 60px; padding-bottom: 15px; margin-bottom: 15px; cursor: pointer; position: absolute; right: 4px; top: -100px; z-index: 99; } .fix-chat .fix-chat-box { padding: 3px; position: relative; border-radius: 50%; } .fix-chat .fix-chat-box .fix-chat-img-box { width: 60px; height: 60px; border-radius: 50%; /*border: 1px solid #072146;*/ -webkit-animation: breathe-img 1s linear infinite; animation: breathe-img 1s linear infinite; } .fix-chat .fix-chat-box .fix-chat-img-box .fix-chat-img { width: 100%; } .fix-chat .fix-chat-text { position: absolute; bottom: 0; font-size: 13px; width: 58px; height: 24px; line-height: 24px; margin-left: 4px; background: #072146; border-radius: 4px; color: #fff; text-align: center; }