body { font-family: 氓戮庐猫陆炉茅鈥衡€γ┞烩€? Helvetica Neue, Helvetica, Arial, sans-serif !important; } .zoom-img { overflow: hidden; } .zoom-img .img { overflow: hidden; } .zoom-img img { transition: all .5s; } .zoom-img:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .header { height: 80px; transition: all .3s; } .header.sign { top: auto; bottom: 100%; } .header .head_wrap { position: relative; } .wd { width: 62.5%; margin: 0 auto; } .head_logo { float: left; line-height: 80px; } .header .drop-down { display: none; } .head_lang { position: relative; float: right; line-height: 80px; margin-left: 30px; cursor: pointer; } .head_lang .select { display: inline-block; vertical-align: middle; font-size: 14px; color: #ffffff; line-height: 1; padding-right: 25px; background-image: url(../images/icon3.png); background-position: right center; background-repeat: no-repeat; } .head_lang .drop-down { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: rgba(32, 33, 33, .8); min-width: 100%; line-height: 1; } .head_lang .item { display: block; padding: 15px 25px; font-size: 14px; color: #ffffff; text-align: center; white-space: nowrap; border-bottom: 1px solid #656565; transition: all .3s; } .head_lang .item:hover { background-color: #f06b00; } .head_lang .item:last-child { border-bottom: 0; } .head_search { float: right; line-height: 80px; } .head_search .search_icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; background-image: url(../images/icon2.png); background-size: cover; cursor: pointer; } .head_search .drop-down { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 60%; z-index: 9; line-height: 1; } .head_search .search_form { font-size: 0; padding: 0 15px; background-color: #505050; border-radius: 2px; line-height: 50px; } .head_search .search_box { width: calc(100% - 30px); height: 50px; display: inline-block; vertical-align: middle; } .head_search .text { width: 100%; height: 50px; background-color: #505050; -webkit-appearance: none; resize: none; outline: none; border: 0; color: #969797; font-size: 16px; padding: 0 10px; } .head_search .search-close { display: inline-block; vertical-align: middle; } .mobile-nav .form { border: 1px solid #e5e5e5; display: inline-block; height: 43px; line-height: 43px; border-radius: 5px; font-size: 0; vertical-align: top; position: relative; } .mobile-nav .text { display: inline-block; vertical-align: top; width: 240px; height: 30px; margin-top: 6px; padding: 0 5px; border: 0px; font-size: 16px; } .mobile-nav .submit { display: inline-block; vertical-align: top; width: 45px; background: url(../images/icon2.jpg) center center no-repeat; font-size: 0; height: 43px; border-left: 1px solid #e5e5e5; cursor: pointer; border: 0px; } .mobile-nav .top{ text-align: center; margin-top: 30px; } .head_nav { float: right; } .head_nav .column { position: relative; float: left; margin-right: 26px; } .model-left,.model-right{border: 0px!important;min-height: 10px!important;} .model-left img,.model-right img{display: block;margin: auto;} .head_nav .column:last-child { margin-right: 105px; } .head_nav .item { display: block; font-size: 16px; color: #ffffff; line-height: 80px; } .head_nav .column.on::before { content: ""; position: absolute; left: 50%; margin-left: -5px; bottom: 20px; width: 10px; height: 5px; background-image: url(../images/icon1.png); background-size: cover; } .head_nav .drop-down { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: rgba(32, 33, 33, .8); min-width: 100%; } .head_nav .item_2 { display: block; padding: 15px 25px; font-size: 14px; color: #ffffff; text-align: center; white-space: nowrap; border-bottom: 1px solid #656565; transition: all .3s; } .head_nav .item_2:hover { background-color: #f06b00; } .head_nav .item_2:last-child { border-bottom: 0; } .top_nav { height: 80px; line-height: 80px; } .top_nav.sign { position: fixed; top: 0; left: 0; width: 100%; background-color: #ffffff; z-index: 9; } .top_nav .whole_box { float: left; margin-right: 40px; } .top_nav .whole_but { display: inline-block; padding-left: 50px; background-image: url(../images/icon15.png); background-size: 40px 40px; background-position: 5px center; background-repeat: no-repeat; cursor: pointer; } .whole_box .drop-down { display: none; position: absolute; top: 80px; left: 0; width: 100%; background-color: #FFFFFF; padding: 10px 30px; line-height: 1; box-shadow: 0 10px 10px rgba(0, 0, 0, .1); } .whole_box .item { display: inline-block; line-height: 50px; margin-right: 20px; } .whole_box .item.on { color: #ea5421; } .top_nav .nav_box { float: left; font-size: 0; overflow-x: auto; white-space: nowrap; width: 60%; text-align: left; } .top_nav .nav_box .item { position: relative; display: inline-block; vertical-align: top; font-size: 16px; color: #222222; margin-right: 20px; padding: 0 18px 0 38px; } .top_nav .nav_box .item:last-child { margin-right: 0; } .top_nav .nav_box .item.on { color: #f06b00; background-image: url(../images/icon4.jpg); background-position: 11px center; background-repeat: no-repeat; } .top_nav .nav_box .item.on::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 3px; background-color: #f06b00; } .top_nav .site_box { float: right; } .top_nav .site_box { font-size: 14px; color: #999999; } .top_nav .site_box .item { display: inline-block; font-size: 14px; color: #999999; line-height: 18px; } .top_nav .home_link { padding-left: 28px; background-image: url(../images/icon5.jpg); background-position: left center; background-repeat: no-repeat; } .top_nav .site_box .item.on { color: #f06b00; } .prod-box { padding: 80px 0 35px; background-color: #f4f4f4; } .prod-box .column { margin-bottom: 45px; } .prod-box .column:last-child { margin-bottom: 0; } .prod-box .h1 { border-bottom: 1px solid #e5e5e5; margin: 0; margin-bottom: 43px; } .prod-box .name { display: inline-block; font-size: 20px; color: #222222; padding-bottom: 22px; position: relative; } .prod-box .name::before { position: absolute; content: ""; left: 0; bottom: -1px; width: 100%; height: 1px; background-color: #ea5421; } .prod-box .column_2 { float: left; width: 32%; margin-right: 2%; margin-bottom: 30px; background-color: #ffffff; text-align: center; } .prod-box .column_2:nth-child(3n) { margin-right: 0; } .prod-box .name_1 { font-size: 16px; color: #222222; height: 20px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; margin: 27px 0 14px; } .prod-box .name_2 { font-size: 14px; color: #222222; margin-bottom: 29px; } .top_nav.diverse .nav_box .item { padding: 0 5px; } .diverse .nav_box .item::before { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #ea5421; display: none; } .top_nav.diverse .nav_box .item.on{ padding-left: 30px !important; } .top_nav.diverse .nav_box .item.on::before{ top: auto; bottom: 0; } .prod_details .prod_top_wrap { position: relative; } .prod_details .prod_top { padding: 90px 0 65px; background-color: #f4f4f4; } .prod_details .carousel { float: left; width: 42%; } .prod_details .view { margin-bottom: 20px; } .prod_details .preview { position: relative; padding: 0 20px; } .prod_details .arrow-left, .prod_details .arrow-right { position: absolute; width: 8px; height: 16px; background-size: cover; top: 50%; margin-top: -8px; transition: all .3s; } .prod_details .arrow-left { left: 0; background-image: url(../images/icon8.png); } .prod_details .arrow-right { right: 0; background-image: url(../images/icon8-2.png); } .prod_details .arrow-left:hover { background-image: url(../images/icon9.png); } .prod_details .arrow-right:hover { background-image: url(../images/icon9-2.png); } .prod_details .text_box { float: left; width: 58%; padding-left: 8.5%; padding-top: 3.5%; } .h1, .h2, .h3 { margin: 0; font-size: 100%; } .prod_details .h1 { font-size: 30px; color: #222222; font-family: Arial, Helvetica, sans-serif; margin-bottom: 10px; } .prod_details .h2 { font-size: 30px; color: #222222; margin-bottom: 45px; } .prod_details .h3 { font-size: 16px; color: #999999; line-height: 1.4; padding-bottom: 21px; border-bottom: 1px solid #e5e5e5; margin-bottom: 22px; } .prod_details .words { font-size: 16px; color: #444444; line-height: 30px; } .prod_details .bot_box { position: absolute; left: 50.5%; bottom: 20px; width: 49.5%; } .prod_details .cons_link { float: left; width: 200px; height: 60px; line-height: 60px; text-align: center; font-size: 16px; color: #ffffff; background-color: #f06b00; background-image: url(../images/icon6.png); background-position: 48px center; background-repeat: no-repeat; border-radius: 5px; padding-left: 15px; } .prod_details .share_box { float: right; font-size: 16px; color: #666666; line-height: 18px; padding-left: 27px; background-image: url(../images/icon7.png); background-position: left center; background-repeat: no-repeat; margin-top: 21px; } .footer { padding: 50px 0 0; } .foot_top { padding-bottom: 32px; border-bottom: 1px solid #505151; } .foot_nav { float: left; } .foot_nav .column { float: left; margin-right: 100px; } .foot_nav .column:last-child { margin-right: 0; } .footer .h1 { font-size: 16px; color: #ffffff; font-weight: bold; margin-bottom: 24px; } .foot_nav .item { display: block; font-size: 14px; color: #999999; margin-bottom: 17px; } .footer .r_cont { float: right; } .foot_top .number { font-size: 20px; color: #e87e00; font-weight: bold; margin-bottom: 20px; } .foot_top .cons_link { display: inline-block; width: 170px; height: 45px; line-height: 45px; text-align: center; font-size: 16px; color: #ffffff; background-color: #f06b00; background-image: url(../images/icon6.png); background-position: 40px center; background-repeat: no-repeat; border-radius: 5px; padding-left: 30px; margin-bottom: 18px; cursor: pointer; } .foot_top .share { font-size: 0; } .foot_top .share .ewm{display: none;} .foot_top .share .item { display: inline-block; vertical-align: top; margin-right: 20px; } .foot_top .share .item:last-child { margin-right: 0; } .foot_bot { padding: 20px 0; } .foot_bot .l_words { float: left; font-size: 14px; color: #666666; } .foot_bot .link_box { float: right; font-size: 0; } .foot_bot .link_box .item { display: inline-block; vertical-align: top; font-size: 14px; color: #666666; line-height: 15px; padding: 0 17px; border-right: 2px solid #575757; cursor: pointer; } .foot_bot .link_box .item:last-child { border-right: 0; padding-right: 0; } .inves .title .h1 { font-size: 30px; color: #222222; } .real_time { padding: 90px 0 70px; } .real_time .title { margin-bottom: 40px; } .real_time .data_box { padding: 50px 0 10px; margin-bottom: 35px; border-radius: 10px; box-shadow: 0 3px 12px rgba(0, 0, 0, .1); } .real_time .l_data { float: left; width: 340px; border-right: 1px solid #eeeeee; padding: 0 35px; } .real_time .name { font-size: 16px; color: #dd0101; font-weight: bold; margin-bottom: 33px; } .real_time .bot_box { font-size: 0; } .real_time .eleme { display: inline-block; vertical-align: top; font-size: 60px; color: #ff0000; font-weight: bold; } .real_time .incre { display: inline-block; vertical-align: top; font-size: 0; } .real_time .number { display: block; font-size: 20px; color: #ff0000; font-weight: bold; margin-bottom: 10px; text-align: right; } .real_time .perce_box { margin-left: 14px; } .real_time .perce_box .icon { font-size: 24px; font-weight: bold; } .real_time .bot_box .color_1 { color: #ff0000 !important; } .real_time .bot_box .color_2 { color: #009900 !important; } .real_time .perce { display: inline-block; vertical-align: top; font-size: 20px; color: #ff0000; font-weight: bold; margin-left: 3px; } .real_time .r_data { float: left; width: calc(100% - 340px); padding: 0 30px 0 35px; } .real_time .column { float: left; width: 25%; margin-bottom: 34px; } .real_time .top_name { font-size: 16px; color: #999999; margin-bottom: 15px; } .real_time .bot_number { font-size: 20px; color: #555555; font-family: Arial, Helvetica, sans-serif; } .real_time .words { font-size: 14px; color: #999999; } .real_time .color_1 .bot_number { color: #ff0000; } .real_time .color_2 .bot_number { color: #009900; } .base_data { position: relative; padding-bottom: 18.5%; background-color: #f7f7f7; } .base_data .data_box { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); width: 66%; padding: 2.9% 2.8% 3.7% 3.9%; background-size: cover; box-shadow: 0 2px 5px rgba(0, 0, 0, .1); } .base_data .text_box { float: left; width: calc(100% - 460px); padding: 3.6% 13.3% 0 0; } .base_data .img_box { float: left; width: 460px; } .base_data .h1 { font-size: 30px; color: #222222; margin-bottom: 8.4%; } .base_data .text { font-size: 16px; color: #222222; line-height: 40px; } .infor_discl { padding: 65px 0 100px; } .infor_discl .h1 { font-size: 30px; color: #222222; margin-bottom: 50px; } .infor_list { border: 1px solid #eeeeee; border-bottom: 0; } .infor_list .column { padding: 30px 90px 27px 45px; border-bottom: 1px solid #eeeeee; background-image: url(../images/icon14.png); background-position: 97% center; background-repeat: no-repeat; } .infor_list .h2 { font-size: 16px; color: #222222; line-height: 30px; font-weight: bold; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .infor_list .date { font-size: 14px; color: #999999; line-height: 30px; font-family: Arial, Helvetica, sans-serif; } .nav_page { font-size: 0; text-align: center; } .nav_page .item { display: inline-block; vertical-align: top; width: 40px; height: 40px; line-height: 38px; border: 1px solid #eeeeee; font-size: 16px; color: #222222; border-radius: 20px; margin: 0 15px; font-family: Arial, Helvetica, sans-serif; } .nav_page .item.on{ background-color: #e77e00; color:#ffffff; } .nav_page .prev, .nav_page .next { width: 100px; } .infor_discl .nav_page { margin-top: 43px; } .main { /* padding-top: 50px; */ } .banner-content { left: 18.5%; } .footer-category { display: none !important; } .btn-join{ background: #f4f4f4; /* cursor: pointer; */ width: 100%; margin: 0 auto; } .btn-join img{display: block;margin: 0 auto;} .appli-popup{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: 9; } .appli-popup .form-box{ position: absolute; top: 50%; left: 50%; max-width: 1100px; width: 90%; transform: translate(-50%,-50%); padding: 55px; background-color: #ffffff; border-radius: 15px; } .appli-popup .form{ position: relative; } .appli-popup .h1{ font-size: 30px; color: #000000; font-weight: bold; text-align: center; margin-bottom: 30px; } .appli-popup .input-box{ font-size: 0; border: 1px solid #eeeeee; border-top: 0; } .appli-popup .input-box:first-child{ border-top: 1px solid #eeeeee; } .appli-popup .input-inline .input-box{ border-top: 0; border-right: 0; } .appli-popup .input-inline .name{ border-bottom: 0; } .appli-popup .input-inline .input-box:nth-child(2n){ border-right: 1px solid #eeeeee; } .appli-popup .input-inline{ font-size: 0; } .appli-popup .input-inline .input-box{ display: inline-block; vertical-align: top; width: 50%; } .appli-popup .name{ display: inline-block; vertical-align: top; width: 200px; font-size: 16px; color: #000000; line-height: 26px; padding: 25px 45px; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; background-color: #f9f9f9; } .appli-popup .input-text{ display: inline-block; vertical-align: top; width: calc(100% - 200px); height: 26px; border: 0; outline: none; font-size: 16px; color: #000000; line-height: 26px; padding: 0 15px; margin: 25px 0; } .appli-popup .close{ position: absolute; top: 20px; right: 20px; opacity: 1; } .appli-popup .btn-box{ text-align: center; margin-top: 40px; } .appli-popup .btn{ width: 200px; height: 58px; padding: 0; font-size: 20px; color: #ffffff; line-height: 58px; font-weight: bold; background-color: #e87e00; border-radius: 0; border: 0; } /* 氓陋鈥櫭ぢ解€溍ε嘎ッ */ @media only screen and (max-width:1680px) { .wd { width: 80%; } .base_data .data_box { width: 80%; } .base_data .data_box { top: 15%; } .real_time .name { text-align: center; } .real_time .bot_box { text-align: center; } .real_time .incre { margin-top: 30px; } .real_time .eleme { display: block; } .real_time .number { text-align: center; } } @media only screen and (max-width:1440px) { .wd { width: 90%; } .base_data .data_box { width: 90%; } .base_data .img_box { width: 360px; } .base_data .text_box { width: calc(100% - 360px); } .base_data .data_box { top: 20%; } .inves .title .h1 { font-size: 20px; } .real_time .eleme { font-size: 30px; } .base_data .h1 { font-size: 20px; margin-bottom: 4%; } .infor_discl .h1 { font-size: 20px; margin-bottom: 30px; } } @media only screen and (max-width:1366px) { .base_data .data_box { top: 15%; } .appli-popup .form-box{ padding: 30px; } .appli-popup .name{ padding: 20px 45px; } .appli-popup .input-text{ margin: 20px 0px; } .appli-popup .form-box{ top:55% } } @media only screen and (max-width:1280px) { .head_nav .column { margin-right: 40px; } .head_nav .column:last-child { margin-right: 40px; } } @media only screen and (max-width:1024px) { .prod_details .carousel { width: 100%; } .prod_details .text_box { width: 100%; padding-bottom: 120px; padding-left: 0; } .prod_details .bot_box { width: 100%; left: 0; } } @media only screen and (max-width:1199px) { .top_nav.sign{ top: 50px; } .footer-category{ display: flex !important; margin-bottom: 20px; } .footer .r_cont{ float: left; } .foot_nav { display: none; } .footer-category { display: block; } .base_data { padding-bottom: 50px; } .base_data .data_box { position: relative; top: auto; margin: 50px 0 0; } .real_time .top_name { font-size: 14px; } .real_time .bot_number { font-size: 18px; } .foot_nav .column { margin-right: 50px; } } @media only screen and (max-width: 992px) { .foot_nav .column { margin-right: 30px; } .real_time .l_data { width: 100%; margin-bottom: 30px; } .real_time .eleme { display: inline-block; margin-top: 10px; } .real_time .incre { display: inline-block; margin-top: 0; margin-left: 25px; } .real_time .r_data { width: 100%; } .base_data .text_box { width: 100%; padding-right: 0; margin-bottom: 30px; } .base_data .img_box { width: 100%; text-align: center; } } @media only screen and (max-width: 767px) { .appli-popup .form-box{ padding: 20px 10px; } .appli-popup .h1{ font-size: 18px; margin-bottom: 15px; } .appli-popup .name{ width: 100%; padding: 5px; } .appli-popup .input-inline .input-box{ width: 100%; } .appli-popup .input-text{ width: 100%; margin: 3px 0; } .appli-popup .btn-box{ margin-top: 20px; } .appli-popup .btn{ width: 120px; height: 34px; line-height: 34px; font-size: 14px; } .appli-popup .close{ top: 10px; right: 10px; } .prod_details .h1{ font-size: 24px; } .prod_details .h2{ font-size: 24px; margin-bottom: 20px; } .prod_details .cons_link { float: left; width: 140px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background-color: #ea5421; background-image: url(../images/icon6.png); background-position: 20px center; background-repeat: no-repeat; border-radius: 5px; padding-left: 25px; } .top_nav .whole_box { margin-right: 0; } .top_nav .nav_box { width: calc(100% - 82px); } .whole_box .drop-down { top: 50px; } .foot_nav { display: none; } .footer .r_cont { width: 100%; } .foot_bot .l_words { width: 100%; margin-bottom: 20px; } .foot_bot .link_box { width: 100%; } .foot_bot .link_box .item:nth-child(1) { padding-left: 0; } .real_time { padding: 50px 0; } .real_time .title { margin-bottom: 30px; } .real_time .data_box { padding: 30px 10px; } .real_time .r_data { padding: 0 10px; } .real_time .column { width: 33.33%; } .real_time .words { line-height: 1.4; } .infor_discl { padding: 50px 0; } .infor_list .column { padding: 10px 40px 10px 10px; background-size: 30px 30px; } .nav_page .item { width: 36px; height: 36px; line-height: 34px; margin: 0 5px; } .nav_page .prev, .nav_page .next { width: 80px; } .top_nav { height: 50px; line-height: 50px; } .top_nav .nav_box .item { padding: 0 10px 0 20px; margin-right: 0; } .top_nav .nav_box .item.on { background-position: 4px center; } .top_nav .site_box { display: none; } .prod-box { padding: 50px 0; } .prod-box .h1 { margin-bottom: 30px; } .prod-box .column_2 { width: 49%; margin-right: 2%; } .prod-box .column_2:nth-child(3n) { margin-right: 2%; } .prod-box .column_2:nth-child(2n) { margin-right: 0; } .prod_details .prod_top { padding: 50px 0; } .prod_details .text_box { padding-top: 30px; } } .win_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, .5); display: none; } .win_form { display: none; width: 90%; max-width: 1100px; margin: auto; /* border-radius: 30px; */ background: #ffffff; position: fixed; max-height: 90vh; overflow: hidden; box-sizing: border-box; padding: 45px; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 11; } .win_form li { margin-bottom: 40px; } .win_form .title { font-size: 40px; color: #333333; text-align: center; font-weight: bold; } .win_form .close { position: absolute; top: -25px; right: -25px; z-index: 2; } .ser_form { font-size: 14px; } .ser_form li { } .ser_form .t1 { font-size: 16px; line-height: 50px; color: #333333; border-bottom: 1px solid #eeeeee; } .ser_form .t2 { margin-top: 20px; } .ser_form .t2 .text { width: 49%; line-height: 50px; box-sizing: border-box; padding: 0 30px; float: left; border: 1px solid #eeeeee; } .ser_form .t2 .text:nth-child(2) { margin-left: 2%; } .ser_form .t2_select { margin-top: 20px; } .t2_select .s1 { width: 31%; line-height: 50px; box-sizing: border-box; padding: 0 30px; float: left; border: 1px solid #eeeeee; outline: none; /*鍘绘帀榛樿鐨勪笅鎷変笁瑙?/ appearance: none; -moz-appearance: none; -webkit-appearance: none; /*娣诲姞涓嬫媺涓夎鍥炬爣*/ background: url("../images/ico_arrow_on.png") no-repeat calc(100% - 15px) center transparent; cursor: pointer; } .t2_select .s1:nth-child(2) { margin: 0 3.5%; } .ser_form .t3 { margin-top: 20px; } .ser_form .t3 .t3_text { width: 100%; line-height: 50px; border: 1px solid #eeeeee; box-sizing: border-box; padding: 0 30px; } .win_form .sub { display: block; width: 200px; line-height: 60px; font-size: 16px; margin: auto; background: #f06b00; color: #ffffff; text-align: center; border: 0; } .fix-contact { z-index:999; position:fixed; bottom:0; right: 0; } .fix-contact li { margin-bottom:10px; } .fix-contact .icon { position: relative; display: block; width:50px; height:50px; font-size: 14px; color: #fff; font-weight: bold; background:#232122 url(../images/fixed.png) no-repeat; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .fix-contact .icon:hover {background-color:#e77e00;} .fix-contact .icon1 { background:#232122 url(../images/liuyan.png) no-repeat; background-position: center; } .fix-contact .icon2 { background-position:center -34px;} .fix-contact .icon3 { background-position:center -34px;} .fix-contact .icon4 { background-position:center -72px;} .fix-contact .icon5 { background-position:center bottom;} .fix-contact .left { position:absolute; top: 0; right: 55px; display:none; width:130px; height:50px; line-height:50px; text-align: center; background-color:#e77e00; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .fix-contact .icon:hover .left { display: block; } .fix-contact .code { position:absolute; top:-80px; right: 55px; display: none; padding:20px 25px; background-color:#e77e00; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .fix-contact .code img{ max-width:100px; } .fix-contact .icon:hover .code { display: block; }