@charset "utf-8"; /* -------------------------------------------------------------- Resets default browser CSS. -------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, legend, input {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} html,body{overflow-y:auto;} body {line-height:1.5;font-family:"microsoft yahei";} table {border-collapse:separate;border-spacing:0;} caption, th, td {text-align:left;font-weight:normal;} table, td, th {vertical-align:middle;} blockquote:before, blockquote:after, q:before, q:after {content:"";} blockquote, q {quotes:"" "";} a img {border:none;} input {border:none;} ul{list-style:none;} label{/*cursor:pointer;*/color:#666;margin:0;padding:0;border:0;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} body {font-size:1.2rem;color:#222;font-family:Helvetica, Arial,"microsoft yahei", sans-serif;position:relative;overflow:hidden;} h1, h2, h3, h4, h5, h6 {font-weight:bold;color:#000;} /*----- 2012��10��23�� ���ڴ���ͷ�ı�����ƻ��������µ���ʽʶ��������Ǹ������� maqt ��ʼ -----*/ h1 {font-size:36px;font-family:"microsoft yahei", sans-serif;} /*----- ���� -----*/ h2 {font-size:45px;float:left;color:#CCC;margin-top:10px;font-weight:normal;} h3 {font-size:16px;margin:8px 0;margin:8px 0 7px\0;color:#000;} h4 {font-size:14px;margin:8px 0;color:#666;} h5 {font-size:12px;margin:8px 0;color:#666;} h6 {font-size:12px;margin:8px 0;} h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;} p {color:#666;} a:focus, a:hover {text-decoration:underline;} a { color:#666; text-decoration:none; cursor:pointer; blr:expression(this.onFocus=this.blur());/*ie ȥ�����������߿� */ outline:none;/*ff ȥ�����������߿� */ } span{color:#666;} textarea{overflow:hidden;} fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;} legend {font-weight:bold;font-size:1.2em;} input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;} input.text, input.title {width:300px;padding:5px;} input.title {font-size:1.5em;} input.text, input.title, textarea, select {margin:0 0;border:1px solid #dedede;font-size:12px;color:#666;font-family: Helvetica,Arial,"����",sans-serif;} select{width:120px;float:left;padding:2px;height:25px;line-height:25px;} /*-------------------------- 2013-01-12 ������ʽΪ��׼�泣����ʽ maqt ��ʼ -------------------------*/ /*--------------------base css maqt start-------------------*/ .right{float:right !important;} .row {float:left; width:100%;} .left{float:left !important;} .clear{clear:both;} .overflow_hidden{overflow:hidden;clear:both;} .display_block{display:block;} .postion_relative{position: relative;} .cursor_pointer{cursor: pointer!important;} .bg_image_none{background-image: none !important;} .text_overflow{overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;} .border_bottom{border-bottom:solid 1px #DEDEDE;} .border_bottom_dash{border-bottom:dashed 1px #DEDEDE;} .border_top{border-top:solid 1px #DEDEDE;} .noborder{border:none !important;} .border_top_none{border-top: none !important;} .border_bottom_none{border-bottom: none !important;} .margin_left_none{margin-left:0 !important;} .margin_right_none{margin-right:0 !important;} .margin_bottom_none{margin-bottom:0 !important;} .margin_top_none{margin-top:0 !important;} .margin_top_4{margin-top: 4px;} .margin_top_2{margin-top: 4px;} .margin_top_7{margin-top: 7px;} .margin_top_17{margin-top: 17px;} .padding_bottom_none{padding-bottom:0 !important;} .graybold {font-weight:bold;} .black{color:#000 !important;} .blackbold {font-weight:bold;color:#000 !important;} .black_333{color:#333333!important;} .gray_666{color:#666666!important;} .lightgray{color:#999 !important;} .lightgray *{color:#999;} .lightgray_ccc{color: #ccc;} a.highlight, .highlight, .highlight a,a.blue{font-weight:normal;} a.highlightheader{font-weight:bold;font-size:14px;} a.bluebold, .bluebold ,a.navbar_titer{font-weight:bold;} span.red {color:red;} .script_red{color: #ff0000 !important;} .orange{color:#f17842!important;} .green{font-weight:normal;color:#390 !important;} .greenbold{color:#390;font-weight:bold;} /*--------------------base css maqt end-------------------*/ /*--------------------templet.css maqt start------------------*/ /*----- 3.������ɫ ��ʼ -------*/ body{ background: #f5f5f5 url('../image/guide_page/guide_page_bg.png') left top repeat; } a.highlight, .highlight, .highlight a{color:#09C !important;} a.highlightheader{color:#09C;} a.blue{color:#09C;} a.bluebold, .bluebold ,a.navbar_titer{color:#09C;} .dark_blue{color: #00607f !important;} /*------- 3.������ɫ ����----------*/ /*--------------------templet.css maqt end-----------------*/ /*------------内容页头部 开始---------------*/ .header_01{ width: 100%; height: 64px; position: relative; z-index: 100; background-color:#00706c; box-shadow:0 0 5px #888; } .header_01_space{ width: 90%; height: 64px; margin: 0 auto; position:relative; } .letter{ width: 743px; height: 23px; position:absolute; left:-128px; top:41px; } .header_01_logo{ float: left; height: 64px; margin: 0; } .loginpage_head_line { float: left; background: url(../../comm/image/guide_page/nb_line.png) no-repeat scroll 0 0 transparent; width: 12px; height: 24px; margin: 20px 0 0 0; } .loginpage_head_point{ float: left; width: 3px; height: 3px; margin: 29px 0 0; border-radius:2px; background-color:#fff; } .loginpage_head_txt { float: left; height: 64px; line-height: 64px; margin: 0 0 0 14px; color: #fff; font-size: 18px; } .loginpage-letter{ float: left; color:#fff; height: 64px; line-height: 66px; margin-left:20px; font-size:12px; } .header_01_help{ float: right; height: 64px; line-height: 66px; padding: 0 0 0 22px; margin: 0 0 0 0; color: rgba(255,255,255,0.8); cursor: pointer; } .header_01_help { background: url(../image/guide_page/question_mark_icon.png) scroll no-repeat 0 25px transparent; } .header_visit_count{ float: right; height: 20px; line-height: 20px; margin: 37px 14px 0 0; color: #999; } /*------------内容页头部 结束---------------*/ /*------------脚部 开始--------------*/ #footer{ float:left; background-color: #dfdfdf; width: 100%; height: 78px; padding: 0 0 0 0; border-top:1px solid #c7c7c7; } #footer-mobile{ display:none; } .footer-inside-bar { max-width:90%; height: 78px; margin: auto; } .footer-inside-bar:after{ display:block; clear: both; } .footer_bar{ float:left; margin-top:3px; width: 534px; } .foot_line{ float:left; margin:0 9px 0 0; line-height:18px; *line-height:16px; } /*------------脚部 结束--------------*/ /* 登录页 开始 */ .mid_container{ width: 100%; float:left; } .mid_container_content{ width: 100%; min-width: 1000px; height: 515px; margin: 0 auto; } .container_space{ width: 1200px; margin: 0 auto; } .content_login_box{ float: right; width: 295px; border: 1px solid #dedede; border-radius: 3px; margin: 86px 77px 0 0; background-color:#fff; } .login_box_up{ float: left; width: 295px; padding-bottom: 10px; } .login_box_title{ float: left; width: 249px; height: 23px; margin: 13px 0 0 26px; } .login_box_title_name{ float: left; height: 20px; font-family: "microsoft yahei"; font-size: 14px; font-weight: bold; } .login_box_title_notice { float: left; margin: 0 0 0 0px; width: 184px; } .login_box_input{ float: left; width: 199px; height: 39px; line-height: 39px; padding: 0 10px 0 33px; border: 1px solid #dedede; font-size: 14px; color: #999; border-radius:3px; } .person{ margin: 4px 0 4px 26px; background:url(../image/guide_page/person.png) 10px 0 no-repeat; } .lock{ margin: 17px 0 4px 26px; background:url(../image/guide_page/lock.png) 10px 0 no-repeat; } .down_link_choice{ float: left; width: 245px; margin: 13px 0 0 26px; } .login_box_checkbox{ float: left; width:14px; height:14px; position:relative; margin: 1px 6px 0 1px; *margin-top: -1px; } .login_box_checkbox_label{ float: left; height: 18px; line-height: 18px; color: #999; } .login_box_sepline{ float: left; height: 18px; line-height: 18px; *line-height: 14px; _line-height: 14px; color: #999; margin: 0 8px; } .login_box_psd{ float: right; height: 18px; line-height: 18px; color: #09c; } .landing_btn_bg{ float: left; background: url(../image/guide_page/login_box_landing_btn.png) scroll no-repeat 0 0 transparent; width: 159px; height: 40px; margin: 16px 0 0 70px; } .login_box_landing_btn{ float: left; background: transparent; width: 157px; height: 40px; cursor: pointer; } .login_box_down{ float: left; width: 244px; margin:0 0 17px 27px; padding:0 0 0 0; } .ide_code{ float: left; width: 265px; margin: 16px 0 0 21px; } .ide_code_label{ float: left; width: 48px; height: 28px; line-height: 28px; text-align: right; color: #999; } .ide_code_input{ float: left; width: 54px; height: 26px; line-height: 26px; border: 1px solid #dedede; padding: 0 5px; } .ide_code_image{ float: left; width: 74px; height: 26px; border: 1px solid #dedede; margin: 0 0 0 8px; } .ide_code_next{ float: left; height: 18px; line-height: 18px; color: #09c; margin: 4px 0 0 8px; white-space: nowrap; } .login_box_notice{ float: left; width: 244px; line-height: 22px; padding: 6px 0; } /* 登录页 结束 */ .footer_link{ float:left; line-height:18px; line-height:*16px; } /*登陆页tab*/ .landing_btn_bg{ float: left; background-image:none; background-color:#00706c; width: 242px; height: 38px; cursor: pointer; border:1px solid #00706c; font-size:18px; border-radius:6px; margin: 18px 0 0 26px; color:#fff; text-align:center; position:relative; line-height:36px; } .login_box_landing_btn{ float: left; background: transparent; width: 255px; height: 38px; cursor: pointer; font-family:"Microsoft YaHei"; font-size:18px; border-radius:6px; position:absolute; left:0px; top:0px; } .login_logo_box { width:205px; height:40px; background-image:url(../image/guide_page/logo_box_bg.png); float:left; } /*2017-03-27 登陆页调整-maqt-START*/ .login_box_tab { width:100%; height:47px; float:left; background-image:url(../image/guide_page/content_login_box_bg.png); border-radius:3px 3px 0 0; } .login_box_tab a{ width:100%; height:46px; text-align:center; border-bottom:1px solid #dedede; display:block; float:left; line-height:48px; background-color:#f5f6f7; cursor:pointer; font-family:"Microsoft YaHei UI"; font-size:15px; text-decoration:none; font-weight:bold; color:#69696b; } .login_box_tab a:hover{ text-decoration:none; } .login_box_tab a.active{ height:47px; border-bottom:none; background:none; } .login_box_tab a.active:hover{ cursor:auto; } .login_box_tab .password{ width:146px; border-right:1px solid #dedede; border-radius:3px 0 0 0; } .login_box_tab .er-code{ width:148px; border-radius:0 3px 0 0; } .login_tab_box{ margin-top:16px; width:100%; float:left; } .er_code_title{ font-size:16px; line-height:20px; font-family:"Microsoft YaHei UI"; width:100%; float:left; text-align:center; color:#666; margin:50px 0 0; } .er_code_box{ float:left; width:143px; height:143px; border:1px solid #dedede; margin:33px 0 0 76px; } .er_code_text{ float:left; font-size:12px; line-height:22px; height:22px; width:190px; background-color:#0072bd; margin:29px 0 0 53px; border-radius:11px; color:#fff; text-align:center; } .authorization_phone{ font-family:"Microsoft YaHei UI"; color:#666; font-size:14px; line-height:34px; height:34px; float:left; margin:39px 0 0 21px; } .help{ float: left; color:#00706c; margin:27px 0 0 120px; font-size: 14px; } /*焦点图*/ .login_banner{ float:left; width:807px; height:auto!important; margin-top:20px; } .login_box_title .name{ display:none; font-size: 14px; color:#999; } .footer-mobile{display:none;} /*2017-03-27 登陆页调整-maqt-END*/ /*登录向导 maqt start*/ .guide_container{ margin:20px auto 20px; border:1px solid #e0e0e0; background-color:#fff; padding:20px 5% 40px; border-radius:3px; width:90%; min-height: calc(100vh - 182px); } .guide_welcome{ background-color:#fafafa; float: left; min-height: 73px; padding-bottom:17px; width: 100%; } .guide_welcome img{ float: left; margin:14px 0 0 30px; } .guide_statement{ float: left; margin:17px 0 0 30px; width:calc(100% - 145px); } .guide_statement .name{ float: left; width: 100%; color:#666; font-size: 16px; } .guide_statement .statement{ float: left; width: 100%; color:#999; margin-top:9px; } .guide_title{ float: left; width: 100%; border-bottom:1px solid #dedede; padding-bottom:10px; margin-top: 11px; } .guide_title .name{ font-size: 16px; color:#333; line-height: 30px; float: left; width: 100%; padding-bottom:2px; } .guide_title .notice{ color:#999; float: left; width: 100%; margin-top:4px; padding-bottom:7px; } .guide_title .notice i{ font-size: 14px; margin-right:10px; } .guide_person{ float: left; width: 100%; padding:10px 0; border-bottom:1px solid #dedede; } .guide_person img{ float: left; } .guide_person_right{ float: left; margin-left:20px; width:calc(100% - 110px); } .guide_person_right .name{ font-size: 24px; color:#333; float: left; margin-top:11px; } .guide_person_right .degree{ font-size: 14px; color:#fff; height:24px; line-height:24px; padding:0 10px; border-radius:3px; float: left; margin:18px 0 0 10px; } .guide_person_right .male{ float: left; margin:12px 20px 0 0; color:#333; } .guide_person_right .male i{ font-size: 14px; margin-right:5px; } .guide_person_right .guide_status{ float: left; color:#333; margin:12px 0 0 0; } .guide_code{ padding:15px 0 20px; margin:20px 0 0; border-bottom:1px dashed #dedede; border-top:1px solid #dedede; position:relative; float:left; width:100%; } .guide_code i.large{ float: left; margin:0 17px 0 15px; font-size: 38px; } .guide_code .name{ font-size: 22px; float: left; margin:2px 0 0; } .guide_code .statement{ float: left; margin:11px 0 0 38px; font-size:14px; } .guide_code .set{ font-size: 14px; margin:0 0 0; position:absolute; right:0; top:26px; } .guide_code .set i{ margin-right:5px; } .form-horizontal{ margin-top:30px; float: left; width: 100%; } .guide-border{ border-bottom:1px solid #dedede; height:30px; } .code-btn{ margin-left:10px; } .wizard .anchor li a .stepDesc{ color:#333; } .step-container:after{ content:""; display:block; width:0; height:0; clear:both; } .codeimg-box{ width:68px; height:30px; border-radius:5px; border:1px solid #ddd; overflow:hidden; } .textcode-btn{ width:120px; height:30px; border-radius:5px; border:1px solid #ddd; background-color:#fff; line-height:28px; color:#333; text-align:center; } .textcode-btn.disabled{ background-color:#f5f5f5; color:#666; } /*换肤代码 maqt strat*/ .guide_person_right .degree{ background-color:#32a4c8; } .theme_color{ color:#00706c!important; } /*换肤代码 maqt end*/ .guide-btn-bar{ float: left; width: 100%; margin:50px 0 0; } /*-----登录向导 maqt end-----*/ .btn.disabled{ background-color:#f9f9f9; color:#999; } .email-text{ font-size:12px; color:#999; line-height:22px; text-align:center; margin:17px 0 27px; } .apl-email-01{ text-align:center; color:#777; font-size:16px; line-height:26px; margin:2px 0 7px; } .apl-email-02{ text-align:center; color:#777; font-size:16px; line-height:26px; } .apl-email-02 a{ color:#00706c!important; } .guide_verify{ float: left; width:calc(100% - 133px); } .change-one{ display: block; margin:2px 0 0 0; } .verify-input{ width:calc(100% - 30px); display:inline-block; } .help-block{ display:inline-block; width:85%; } /****/ /*------------脚部 开始--------------*/ #footer-mobile{ display:none; } #footer.find-password-footer{ height:80px; } //#footer.footer-login{height:43px;} //#footer.footer-login .footer-inside-bar{height:33px;padding:10px 0 0;} .qr-box{ float:right; width:300px; margin:5px 0 0; } .qr-box img{ float:right; } .qr-box span{ float:right; margin:50px 0 0; font-size:; text-align:right; } .footer-inside-bar { padding:14px 0 0; clear: both; margin: auto; background: none; } .footer_bar{ float:left; margin-top:3px; width: 645px; } .footer_bar .row{margin: 0 0 4px;} .footer_right{ float:right; margin-top:3px; } .foot_line{ float:left; margin:0 9px 0 0; line-height:18px; *line-height:16px; } /*------------脚部 结束--------------*/ .register_container{ max-width:990px; width:100%; margin:0 auto; } .register_container:after{ content:""; display:block; width:0; height:0; clear:both; } .register_info_title{ margin:31px 0 14px; font-family:"Microsoft YaHei"; font-size:32px; line-height:42px; color:#666; } .left_info_box{ width:calc(100% - 252.01px); float:left; padding:0 80px 0 0; } .right_btn_box{ width:252px; float:left; } .right_btn_box .info_txt{ font-size:12px; line-height:22px; color:#999; width:100%; margin:5px 0; font-family:"Microsoft YaHei"; } .right_btn_box .info_btn{ height:38px; line-height:36px; font-size:17px; border-radius:7px; width:100%; display:block; text-align:center; font-family:"Microsoft YaHei"; margin:0 0 20px; } .right_btn_box .info_btn:hover{ text-decoration:none; } .right_btn_box .info_btn.color-01{ color:#fff; } .right_btn_box .info_btn.color-02{ border:1px solid #ddd; background-color:#fff; color:#333; } .info_txt_block{ width:100%; float:left; margin:0 0 15px; } .info_txt_block .mini_tit{ line-height:26px; color:#00706c; font-family:"Microsoft YaHei"; font-size:16px; margin:5px 0 ; float:left; width:100%; } .info_txt_block .detailed_txt{ font-size:14px; line-height:22px; font-family:"Microsoft YaHei"; color:#666; margin:5px 0 10px; float:left; width:100%; } .info_txt_block .alert_txt{ padding-left:20px; width:638px; font-size:14px; line-height:22px; font-family:"Microsoft YaHei"; color:#999; float:left; width:100%; background-image:url(../image/icon/alert-icon.png); background-repeat:no-repeat; background-position:left 6px; } .activate-account-success{ width:100%; max-width:710px; margin:0 auto; padding:calc((100vh - 468px) / 2) 0 0; } .activate-account-success-icon{ float:left; width:50%; padding:0 43px; height:268px; } .activate-account-success-details{ float:right; width:50%; padding:5px 43px; } .activate-account-title{ float:left; width:100%; margin:0 0 25px; font-size:16px; color:#333; line-height:26px; font-weight:bold; } .back-login-page-btn{ float:left; width:173px; height:45px; margin: 0 0 35px; } .back-login-page-btn >button{ height:45px; } .qrcode-block{ float:left; width:272px; height:104px; padding:4px 5px 4px 15px; border-width:1px; border-style:solid; border-radius:8px; } .qrcode-block .qrcode-icon{ float:left; width:32px; height:94px; margin:0 10px 0 0; line-height:94px; } .qrcode-block .qrcode-icon img{ vertical-align:middle; } .qrcode-details{ float:left; width:; padding:21px 0 0; } .qrcode-details .qrcode-details-text{ font-size:14px; line-height:26px; font-weight:600; } .qrcode-image{ float:right; width:95px; height:95px; } @media screen and (max-width:1023px){ .loginpage-letter{display:none;} #footer{height:auto;} .footer-inside-bar{height:auto;float:left;padding:15px;} .footer_bar{width:100%;} .footer_right{float:left;} } @media screen and (max-width:991px){ .col-sm-12.text-right,.col-xs-12.text-right{ text-align:left; } .loginpage_head_txt{ font-size:14px; } .activate-account-success{ padding: 0 0; } .activate-account-success-icon{ width:100%; text-align:center; height:auto; float:none; } .activate-account-success-icon img{ max-width:100%; } .activate-account-success-details{ width:100%; padding:30px 0 0; float:none; } .activate-account-title{ text-align:center; } .back-login-page-btn{ width:100%; text-align:center; float:none; } .back-login-page-btn >button{ max-width:175px; margin:0 auto; } .activate-account-title{ margin:0 0 15px; float:none; } .qrcode-block{ margin:0 auto; float:none; } } @media screen and (max-width:767px){ .left_info_box{ padding:0; width:100%; } .right_btn_box{ width:100%; } } .step-container.cartoon-image-container .activate-account-success{max-width: 770px;padding: calc((100vh - 525px) / 2) 0 0;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-icon{width: fit-content;height: auto;padding: 0 65px 0 0;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details{width: calc(100% - 295px);padding:0; margin: -15px 0 0;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .title{font-size: 32px;color: #333; margin: 0 0 22px; padding: 0 0 0 30px;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .btn{ font-size: 14px; color: #fff;padding: 7px 24px; margin: 0 0 50px 30px;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area{width: 100%;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item{float: left; padding: 0 30px; position: relative;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item ::before{position: absolute; right: 0;top: 0;bottom: 0;width: 1px;background-color: #ddd;content: ""; display: block;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item:last-child ::before{display: none;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item:last-child{ padding: 0 0 0 30px;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .top-box{display: flex; align-items: center; margin: 0 0 5px;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .top-box img{height: 30px; width: 30px; margin: 0 10px 0 0;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .top-box span{font-size: 14px; color: #333;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box{} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box .box-item{float: left;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box .box-item .title-box{font-size: 14px; color: #666; line-height: 30px; margin: 0 0 7px;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box .box-item .title-box.bold{font-weight: bold;color: #333;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box .box-item .code-img{ height: 110px;} .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box .box-item .code-img img{ height: 100%;} @media screen and (max-width:990px){ .step-container.cartoon-image-container .activate-account-success { max-width: 770px; padding:0; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-icon { padding: 0; width: 100%; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details { width: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .title { padding: 0 ; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .btn { margin: 0 0 30px; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area { display: flex; justify-content: center; } } @media screen and (max-width:565px){ .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item { width: 50%; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .top-box { display: flex; align-items: center; justify-content: center; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box .box-item { float: left; width: 100%; margin: 0 0 5px; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box .box-item .title-box { text-align: center; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box .box-item .code-img { text-align: center; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item:last-child { padding: 0 30px; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item .down-box .box-item .title-box { margin: 0 0 -1px; } } @media screen and (max-width:440px){ .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area { flex-wrap: wrap; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item ::before { display: none; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item { width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; margin: 0 0 20px; } .step-container.cartoon-image-container .activate-account-success .activate-account-success-details .content-area .qr-code-item:last-child { padding: 0 } } .drainage_container{ background-clip: border-box; background-origin: padding-box; background-position: center top; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100vh; background-image: url(""); position: relative; padding: 0 0 8.5vh;display: flex;flex-direction: column;justify-content: center;align-items: center; } .drainage_container .drainage-title{height:58px; display: flex;justify-content: center;align-items: center;margin:0 0 8.75vh;} .drainage_container .drainage-title a{background-image: url(./../image/bg/td-logo.png); height: 58px;width: 203px;margin: 0 20px;} .drainage_container .drainage-title span{font-size: 28px; color: #fff;padding: 0 20px;position: relative;} .drainage_container .drainage-title span::before{ position: absolute; left: 0; top: 0; bottom: 0; width: 1px; display: block; content: ""; background-color: #fff; } .drainage-details{min-height: 380px; display: flex;justify-content: center;} .drainage-details .left-logo{background-color: rgba(255, 255, 255, .9); /*! min-width: 280px; */text-align: center;padding: 45px 0 0 ; border-radius: 10px 0 0 10px;} .drainage-details .left-logo .logo-img{height: 196px;margin: 0 0 26px;} .drainage-details .left-logo .logo-img img{height: 100%;} .drainage-details .left-logo .btn{width: 160px; height: 50px; line-height: 50px; font-size: 16px; color: #fff;padding: 0;background-color: #0056b3;} .drainage-details .right-text-box{background-color: rgba(0, 86, 179, .6);max-width: 380px;padding: 40px;border-radius:0 10px 10px 0;} .drainage-details .right-text-box .title-box{font-size: 14px; color: #fff; margin: 0 0 15px;} .drainage-details .right-text-box .title-box i{font-size: 16px;} .drainage-details .right-text-box p{font-size: 14px; color: #fff; line-height: 24px; margin:0 0 10px;} .drainage-details .right-text-box p.no-marigin{margin: 0;} .drainage-details .right-text-box p a{color: #ffb400;} .foot-common{width: 100%;text-align: center; font-size: 14px; color: #fff; position: absolute; bottom: 0; line-height: 54px; height: 54px;background-color: rgba(0,103,192,.5);} .foot-common a{margin: 0 0 0 5px; font-size: 14px; color: #fff;} .right-qr-code-container{position: absolute; right: 30px; top: 50%; transform: translateY(-50%);padding: 20px; background-color: rgba(255,255,255,.9); border-radius: 10px;} .right-qr-code-container .qr-code-item{max-width: 109px; margin: 0 0 15px;} .right-qr-code-container .qr-code-item:last-child{margin: 0;} .right-qr-code-container .qr-code-item .top-box{display: flex; align-items: center; margin: 0 0 10px;} .right-qr-code-container .qr-code-item .top-box img{ height: 33px;margin: 0 10px 0 0;} .right-qr-code-container .qr-code-item .top-box span{font-size: 14px; color: #333; line-height: 16px;} .right-qr-code-container .qr-code-item .down-box{width: 100%;} .right-qr-code-container .qr-code-item .down-box .box-item{width: 100%; margin: 0 0 10px;} .right-qr-code-container .qr-code-item .down-box .box-item:last-child{margin: 0;} .right-qr-code-container .qr-code-item .down-box .box-item .title-box{font-size: 14px; color: #666; line-height: 24px; margin: 0 0 10px;} .right-qr-code-container .qr-code-item .down-box .box-item .title-box.bold{font-weight: bold;color: #333;} .right-qr-code-container .qr-code-item .down-box .box-item .title-box.margin-6{margin:0 0 6px;} .right-qr-code-container .qr-code-item .down-box .box-item .code-img{height: 110px;} .right-qr-code-container .qr-code-item .down-box .box-item .code-img img{height: 100%;} @media screen and (max-width:1014px){ .drainage_container{height: auto;} .right-qr-code-container{ /*! max-width: 660px; */ width: auto; position: inherit; transform: none; top: 0; right: 0; display: flex; justify-content: space-around; left: calc((100% - 660px) /2); margin: 40px 0 40px; } .right-qr-code-container .qr-code-item{max-width: fit-content;} .right-qr-code-container .qr-code-item .down-box{display: flex;} .right-qr-code-container .qr-code-item .down-box .box-item{width: 100%; margin: 0 20px 0 0 ;} .foot-common{position: inherit; bottom: 0; } .right-qr-code-container .qr-code-item {margin: 0 ;} .right-qr-code-container{ left: 0; } .right-qr-code-container{left: 0;flex-wrap: wrap;margin: 20px 20px;width: calc(100% - 40px);} .right-qr-code-container .qr-code-item{max-width: 100%;width: 100%;margin: 0 0 15px;} .drainage_container{padding: 0;} .drainage_container .drainage-title{margin: 0;height: 78px;} .drainage-details{flex-wrap: wrap; margin: 0 20px;width: calc(100% - 40px);} .drainage-details .left-logo {width: 100%; border-radius: 10px 10px 0 0;padding: 45px 0 40px;} .drainage-details .right-text-box {max-width: 100%; border-radius: 0 0 10px 10px;width: 100%;} .right-qr-code-container .qr-code-item .top-box { justify-content: center; } .right-qr-code-container .qr-code-item .down-box .box-item .title-box { text-align: center; } .right-qr-code-container .qr-code-item .down-box .box-item .code-img { text-align: center; } .right-qr-code-container .qr-code-item .down-box .box-item { width: 100%; } .drainage_container .drainage-title span { font-size: 28px; color: #fff; padding: 0 9px; position: relative; } }