* { padding: 0; margin: 0; } .product_line { max-width: 1226px; width: 100%; color: #333333; margin: 0 auto; } .product_line .p_title { font-size: 70px; text-align: center; font-weight: bold; } .product_line .p_title_en { font-size: 26px; text-align: center; letter-spacing: 5px; } .product_line .logo_img { width: 95%; margin: 50px auto 10px; } .product_line .logo_img img { width: 100%; } .product_line .menu1 { display: flex; justify-content: center; background: url("../images/product/bg1.jpg") no-repeat; background-size: 100% 100%; border-radius: 15px; overflow: hidden; padding-bottom: 20px; box-shadow: 0 0 10px #f4f4f4; } .product_line .menu1 .box { width: 120px; color: white; text-align: center; margin: 0 5px; } .product_line .menu1 .box .icon { width: 50px; height: 50px; margin: 23px auto 15px; cursor: pointer; } .product_line .menu1 .box .icon img { width: 100%; height: 100%; object-fit: contain; } .product_line .menu1 .box .text1 { font-size: 14px; cursor: pointer; } .product_line .menu1 .box .line1 { width: 77px; height: 2px; background-color: white; margin: 0 auto; } .product_line .menu1 .box .text2 { font-size: 13px; } .product_line .menu1 .box .text3 { font-size: 13px; font-style: italic; } .product_line .menu1 .box .line2 { font-size: 30px; line-height: 10px; transform: translateY(-10px); } .product_line .menu1 .box .text4 { font-size: 12px; text-align: center; width: 92px; margin: 0 auto; } .product_line .menu1 .box:nth-child(5) > .line2 { /*margin-top: 20px;*/ } .product_line .img_menu1 { display: none; } .product_line .menu2 { box-shadow: 0 0 10px #f4f4f4; margin-top: 20px; padding-top: 0.1px; } .product_line .menu2 .w155 { width: 155px; } .product_line .menu2 .w184 { width: 184px; } .product_line .menu2 .w166 { width: 166px; padding-left: 10px; } .product_line .menu2 .w200 { width: 200px; } .product_line .menu2 .wflex { flex: 1; justify-content: space-between !important; } .product_line .menu2 .nav { display: flex; align-items: center; font-weight: bold; font-size: 16px; justify-content: space-between; text-align: center; color: #666666; height: 90px; border-bottom: 2px solid #f5f5f5; } .product_line .menu2 .nav .box { display: flex; text-align: center; justify-content: center; flex-shrink: 0; } .product_line .menu2 .nav .box .c_box { max-width: 87px; position: relative; display: flex; align-items: center; text-align: center; flex: 1; justify-content: center; } .product_line .menu2 .nav .box .c_box:after { content: ''; width: 1px; height: 18px; background-color: #bbbbbb; position: absolute; top: 0; bottom: 0; margin: auto; right: 0; } .product_line .menu2 .nav .box .c_box:last-child:after { display: none; } .product_line .menu2 .content { position: relative; margin-bottom: 10px; border-radius: 0 0 15px 15px; overflow: hidden; } .product_line .menu2 .content .title_bg { background: url("../images/product/bg2.jpg") no-repeat; z-index: -1; background-size: 100% 100%; position: absolute; top: 0; left: 0; } .product_line .menu2 .content .table_box { display: flex; justify-content: space-between; min-height: 90px; align-items: center; border-bottom: 2px solid #f5f5f5; } .product_line .menu2 .content .table_box .t_title { text-align: center; color: white; cursor: pointer; flex-shrink: 0; padding: 0 20px; } .product_line .menu2 .content .table_box .t_title img { width: 20%; display: block; margin: 0 auto; } .product_line .menu2 .content .table_box .indication { cursor: pointer; flex-shrink: 0; } .product_line .menu2 .content .table_box .indication .indication_box { display: flex; height: 112px; align-items: center; } .product_line .menu2 .content .table_box .indication .indication_box .icon_jia { margin: 0 20px 0 28px; width: 13px; height: 13px; flex-shrink: 0; } .product_line .menu2 .content .table_box .indication .indication_box .icon_jia img { width: 100%; height: 100%; display: block; } .product_line .menu2 .content .table_box .indication .indication_box .text { padding-top: 0; font-size: 16px; line-height: 20px; text-align: left; } .product_line .menu2 .content .table_box .interests { text-align: center; flex-shrink: 0; } .product_line .menu2 .content .table_box .interests .text { padding-top: 0; font-size: 16px; line-height: 22px; text-align: center; padding-left: 10px; } .product_line .menu2 .content .table_box .partner { cursor: pointer; flex-shrink: 0; } .product_line .menu2 .content .table_box .partner .p_logo { width: 80%; margin: 10px auto; } .product_line .menu2 .content .table_box .partner .text { text-align: center; padding-top: 0; font-size: 16px; } .product_line .menu2 .content .table_box .partner img { width: 100%; } .product_line .menu2 .content .table_box .speed { flex: 1; text-align: right; cursor: pointer; } .product_line .menu2 .content .table_box .speed .s_box { color: white; display: flex; flex-direction: column; justify-content: center; padding: 14px 0; position: relative; } .product_line .menu2 .content .table_box .speed .s_box .speed1 { margin: 6px 0; width: 170px; display: flex; height: 30px; } .product_line .menu2 .content .table_box .speed .s_box .speed1 .speed1_line { width: 0; height: 100%; background-color: #c10404; line-height: 30px; transition: width 1s linear; } .product_line .menu2 .content .table_box .speed .s_box .speed1 .division { width: 0; height: 0; border-width: 30px 15px 0 15px; border-style: solid; transform: rotateZ(-90deg) translate(0px, -0.7px); border-color: #c10404 transparent transparent transparent; } .product_line .menu2 .content .table_box .speed .s_box .speed2 { margin: 6px 0; width: 340px; display: flex; height: 30px; } .product_line .menu2 .content .table_box .speed .s_box .speed2 .speed2_line { width: 0; height: 100%; background-color: #b7b7b7; line-height: 30px; transition: width 1s linear; } .product_line .menu2 .content .table_box .speed .s_box .speed2 .division { width: 0; height: 0; border-width: 30px 15px 0 15px; border-style: solid; transform: rotateZ(-90deg) translate(0px, -0.7px); border-color: #b7b7b7 transparent transparent transparent; } .product_line .menu2 .content .table_box .speed .s_box .speed3 { margin: 6px 0; width: 340px; display: flex; height: 30px; position: absolute; top: 14px; left: -1px; } .product_line .menu2 .content .table_box .speed .s_box .speed3 .speed3_line { width: 0; height: 100%; background-color: rgba(192, 0, 0, 0.5); line-height: 30px; transition: width 1s linear; } .product_line .menu2 .content .table_box .speed .s_box .speed3 .division { width: 0; height: 0; border-width: 30px 15px 0 15px; border-style: solid; transform: rotateZ(-90deg) translate(0px, -0.2px); border-color: rgba(192, 0, 0, 0.5) transparent transparent transparent; } .product_line .menu2 .ft_info { display: flex; justify-content: flex-end; margin-right: 10px; } .product_line .menu2 .ft_info .box { display: flex; align-items: center; margin-left: 40px; } .product_line .menu2 .ft_info .box .yuan { width: 58px; margin-right: 10px; } .product_line .menu2 .ft_info .box .text { font-size: 14px; padding-top: 0; } .product_line .menu2 .remarks { width: 100%; font-size: 12px; color: #999999; padding-bottom: 20px; } .product_line .menu2 .remarks .box { margin-left: 20px; width: 90%; text-align: left; } .message_box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); display: none; z-index: 5; } .message_box .message { width: 855px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .message_box .message .close { top: 27px; right: 50px; position: absolute; opacity: 1; } .message_box .message .message_bg1 { width: 850px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #334869; background-image: linear-gradient(180deg, #2d3c54, #5b83c6, #bd1b22); opacity: 0.95; } .message_box .message .message_bg2 { width: 101%; height: 102%; background: url("../images/product/massgae_bg.png") no-repeat; margin-left: -0.5%; margin-top: -0.5vh; background-size: 100% 101.5%; padding-top: 40px; overflow: hidden; text-align: left; } .message_box .message .message_bg2 p { margin: 0; } .message_box .message .message_bg2 * { font-family: SourceHanSansBold !important; } .message_box .message .message_bg2 a { display: inline-block; } .message_box .message .message_bg2 .title { color: white; font-size: 30px; text-align: center; margin: 0 auto 30px; } .message_box .message .message_bg2 .title2 { display: none; } .message_box .message .message_bg2 .textid1 { font-size: 16px; color: white; margin: 0 20px; line-height: 26px; letter-spacing: 2px; padding-top: 0; overflow-y: scroll; overflow-x: hidden; max-height: 50vh; } .message_box .message .message_bg2 .textid1::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 8px; } .message_box .message .message_bg2 .textid1::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; background: #999999; } .act_Width { animation: widthShow 1s linear; } @-webkit-keyframes widthShow { 0% { width: 0; } 100% { width: 100%; } } @media only screen and (max-width: 1360px) { .product_line { margin-bottom: -27vw; } .scale { width: 1226px; transform-origin: top; transform: scale(0.8); -webkit-transform: scale(0.8); } } @media only screen and (max-width: 1226px) { .product_line { margin-bottom: -40vw; } .scale { width: 1226px; transform-origin: top left; transform: scale(0.7); -webkit-transform: scale(0.7); } } @media only screen and (max-width: 1100px) { .scale { width: 1226px; transform-origin: top left; transform: scale(0.7); -webkit-transform: scale(0.7); } } @media only screen and (max-width: 960px) { .product_line { margin-bottom: 0; } .product_line .logo_img { margin: 0 auto 10px; } .scale { width: 100%; transform-origin: top left; transform: scale(1); } .product_line .p_title { font-size: 30px; } .product_line .menu1 { display: none; margin: 0 5px; border-radius: 5px; padding-bottom: 5px; justify-content: space-around; } .product_line .menu1 .box { width: 36px; margin: 0 1px; } .product_line .menu1 .box .icon { width: 15px; height: 15px; margin: 9px auto; } .product_line .menu1 .box .icon img { width: 100%; height: 100%; object-fit: contain; } .product_line .menu1 .box .text1 { font-size: 6px; cursor: pointer; } .product_line .menu1 .box .line1 { width: 100%; height: 1px; } .product_line .menu1 .box .text2 { font-size: 5px; } .product_line .menu1 .box .text3 { font-size: 5px; } .product_line .menu1 .box .line2 { font-size: 13px; line-height: 5px; transform: translateY(-4px); } .product_line .menu1 .box .text4 { font-size: 5px; width: 100%; } .product_line .img_menu1 { display: block; width: 95%; margin: 0 auto; border-radius: 5px; overflow: hidden; position: relative; } .product_line .img_menu1 .link_box { position: absolute; width: 100%; height: 40px; display: flex; justify-content: space-evenly; top: 0; } .product_line .img_menu1 .link_box .item { height: 100%; } .product_line .menu2 { margin: 15px 5px 0 5px; } .product_line .menu2 .w166, .product_line .menu2 .w200 { display: none !important; width: 80px; } .product_line .menu2 .w155 { width: 80px; } .product_line .menu2 .w184 { width: 80px; } .product_line .menu2 .nav { font-size: 7px; height: 40px; } .product_line .menu2 .nav .box .c_box { font-size: 7px; max-width: 100%; min-width: 23px; margin-left: 1px; margin-right: 2px; width: 15.6%; } .product_line .menu2 .nav .box .c_box:after { top: 0; height: 9px; right: -2px; } .product_line .menu2 .nav .box:last-child { justify-content: flex-start; } .product_line .menu2 .content { font-size: 12px; border-radius: 0 0 10px 10px; margin-bottom: 10px; } .product_line .menu2 .content .table_box { min-height: 60px; } .product_line .menu2 .content .table_box .t_title { padding: 0; font-size: 10px; } .product_line .menu2 .content .table_box .indication .indication_box { height: 90px; } .product_line .menu2 .content .table_box .indication .indication_box .icon_jia { margin: 0px 5px 0 8px; } .product_line .menu2 .content .table_box .indication .indication_box .text { font-size: 8px; line-height: 10px; margin-right: 5px; } .product_line .menu2 .content .table_box .speed .s_box .speed1 { height: 20px; font-size: 8px; } .product_line .menu2 .content .table_box .speed .s_box .speed1 .speed1_line { line-height: 20px; } .product_line .menu2 .content .table_box .speed .s_box .speed1 .division { border-width: 20px 10px 0 10px; transform: rotateZ(-90deg) translate(0px, 0px); } .product_line .menu2 .content .table_box .speed .s_box .speed2 { height: 20px; font-size: 8px; } .product_line .menu2 .content .table_box .speed .s_box .speed2 .speed2_line { line-height: 20px; } .product_line .menu2 .content .table_box .speed .s_box .speed2 .division { border-width: 20px 10px 0 10px; transform: rotateZ(-90deg) translate(0px, 0px); } .product_line .menu2 .content .table_box .speed .s_box .speed3 { height: 20px; font-size: 8px; } .product_line .menu2 .content .table_box .speed .s_box .speed3 .speed3_line { line-height: 20px; } .product_line .menu2 .content .table_box .speed .s_box .speed3 .division { border-width: 20px 10px 0 10px; transform: rotateZ(-90deg) translate(0px, 0px); } .product_line .menu2 .ft_info .box .yuan { width: 20px; } .product_line .menu2 .ft_info .box .yuan img { display: block; } .product_line .menu2 .ft_info .box .text { font-size: 10px; padding-top: 0; } .message_box { z-index: 1; } .message_box .message { width: 337px; } .message_box .message .close { right: 0; left: 0; top: auto; bottom: 0; margin: 0 auto; width: 20px; transform: translateY(30px); } .message_box .message .message_bg1 { width: 100%; } .message_box .message .message_bg2 { padding-top: 0; } .message_box .message .message_bg2 .title { font-size: 16px; margin: 10px auto 10px; } .message_box .message .message_bg2 .title2 { display: flex; justify-content: space-between; margin: 10px 30px; align-items: center; } .message_box .message .message_bg2 .title2 .text { font-size: 10px; width: 50%; flex-shrink: 0; height: 100%; color: white; margin: 0; text-align: center; padding: 0 10px; position: relative; } .message_box .message .message_bg2 .title2 .text:after { content: ''; width: 1px; height: 30px; background-color: #bbbbbb; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; } .message_box .message .message_bg2 .title2 .icon { font-size: 10px; width: 50%; flex-shrink: 0; } .message_box .message .message_bg2 .title2 .icon img { width: 60%; margin-left: 16%; background-color: white; } .message_box .message .message_bg2 .title2 .icon .text2 { text-align: center; color: white; } .message_box .message .message_bg2 .textid1 { max-height: 60vh; } .message_box .message .message_bg2 .text { font-size: 10px; line-height: 14px; } } .search_box { max-width: 654px; width: 90%; height: 50px; margin: 0 auto; border-radius: 50px; background-color: white; box-shadow: 0 0 15px #e3e4e7; display: flex; align-items: center; justify-content: space-between; } .search_box input { display: inline-block; height: 34px; border: none; border-right: 1px solid #f4f5f9; margin-left: 30px; outline: none; } .search_box input:focus { box-shadow: none !important; } .search_box .icon_search { width: 27px; margin: 0 23px; } .search_box .icon_search img { width: 100%; cursor: pointer; } .search { margin-top: 150px; } .search .info_box { max-width: 980px; width: 90%; margin: 100px auto 20px; } .search .info_box .box { display: flex; align-items: center; min-height: 74px; padding: 5px 0; box-shadow: 0 0 15px #e3e4e7; background-color: white; cursor: pointer; margin-bottom: 30px; } .search .info_box .box .type { font-size: 22px; height: 40px; border-right: 2px solid #f5f5f5; padding: 0 30px; margin-right: 30px; line-height: 40px; flex-shrink: 0; } .search .info_box .box .text_box { width: 80%; } .search .info_box .box .text_box .title { font-size: 16px; color: #666666; margin-bottom: 5px; } .search .info_box .box .text_box .text { font-size: 14px; color: #999999; padding-top: 0; line-height: 16px; } .search .info_box .box:hover { transform: scale(1.02); } .search .tip { font-size: 20px; color: #bdb7b7; text-align: center; width: 100%; } @media only screen and (max-width: 960px) { .search { margin-top: 100px; } .search .info_box { margin: 10px auto; } .search .info_box .box { min-height: 74px; } .search .info_box .box .type { font-size: 14px; padding: 0 10px; margin-right: 10px; } .search .info_box .box .text_box { width: 80%; } .search .info_box .box .text_box .title { font-size: 13px; color: #666666; margin-bottom: 5px; } .search .info_box .box .text_box .text { font-size: 12px; color: #999999; padding-top: 0; line-height: 16px; } .search .info_box .box:hover { transform: scale(1); } .search .tip { font-size: 14px; } }