.p_MatteIcon .iconfont:before{ content:'\e602'; } .wyz{ position:fixed; right:0px; top:55%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); padding:50px 0; height:482px; -moz-box-sizing:border-box; box-sizing:border-box; z-index:99; } .wyz a{ color:#fff; } .wyz-form.cur{ width:200px; opacity:1; } .wyz .transition{ -webkit-transition-duration:.8s; -moz-transition-duration:.8s; -o-transition-duration:.8s; transition-duration:.8s; } .wyz .wyz-title{ background-color:#2f82da; color:#fff; padding:15px 20px 0; white-space:nowrap; position:relative; } .wyz .wyz-title .cf-close{ position:absolute; left:166px; top:0; padding:10px; } .wyz-item-block{ position:absolute; right:0; width:70px; height:70px; background-color:#2f82da; border:1px solid #2f82da; border-right:none; -moz-box-sizing:border-box; box-sizing:border-box; } .wyz-item-block:nth-child(1){ top:50px; } .wyz-item-block:nth-child(2){ top:128px; } .wyz-item-block:nth-child(3){ top:206px; } .wyz-item-block:nth-child(4){ top:284px; } .wyz-item-block:nth-child(5){ top:362px; } .wyz-item{ width:100%; height:100%; } .wyz-item-p{ color:#fff; font-size:12px; margin-top:5px; } .wyz-item-in{ height:100%; display:none; position:relative; z-index:1; overflow:hidden; } .wyz-item-in-p{ color:#fff; text-align:center; line-height:68px; height:68px; white-space:nowrap; } .wyz-in.cur{ width:156px; background-color:transparent; } .wyz-in.cur .wyz-item-in{ width:100%; display:block; } .wyz-in.cur .wyz-item{ display:none; } .wyz-in:before{ content:""; background-color:#2f82da; position:absolute; height:100%; width:0; -webkit-transition:all .8s ease; -o-transition:all .8s ease; -moz-transition:all .8s ease; transition:all .8s ease; } .wyz-in.cur:before{ width:100%; } .wyz-item-block.wyz-top{ display:none; cursor:pointer; width:70px; height:70px; top:285px; } .wyz-item-block.wyz-top .wyz-item-p{ font-size:14px; margin-top:0; } .wyz-in.wyz-search.cur{ border-left:none; } .wyz-form{ position:absolute; width:0; right:156px; bottom:-1px; z-index:999; overflow:hidden; opacity:0; } .wyz-form .cf-form{ background-color:#2f82da; -moz-box-sizing:border-box; box-sizing:border-box; padding:10px 20px 20px; border-bottom:1px solid #2f82da; } .wyz-form .cf-form-item{ margin-bottom:10px; font-size:0; white-space:nowrap; } .wyz-form .cf-form-item:last-of-type{ margin:0; } .wyz-form input{ padding:0 8px; margin:0; border:none; -moz-box-sizing:border-box; box-sizing:border-box; width:160px; height:28px; line-height:28px; font-size:12px; display:inline-block; vertical-align:middle; background-color:#fff; } .wyz-form .verify{ width:86px; margin-right:5px; } .wyz-form .submit{ width:160px; height:28px; line-height:28px; font-size:14px; } .wyz-qr-show1{ display:none; position:absolute; z-index:1; border:1px solid #2f82da; left: -113px; top: -43px; } .wyz-qr-show2{ display:none; position:absolute; z-index:1; border:1px solid #2f82da; left:-160px; top:-91px; } .wyz-qr-show3{ display:none; position:absolute; z-index:1; border:1px solid #2f82da; left:-160px; top:-91px; } .flex-col{ display:flex; flex-direction:column; justify-content:center; align-items:center; } .img-block img{ max-width:158px; } .wyz{ max-height:none; padding-top:0px; padding-left:0px; padding-bottom:0px; min-height:0px; margin-right:auto; margin-left:auto; max-width:100%; width:100%; margin-top:0px; margin-bottom:0px; min-width:0px; height:auto; padding-right:0px; }