.container { width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .case_vaon{ margin-top: 40px; } .case_vaon img{ width:auto!important; max-width: 100%; } .your_position { padding: 60px 0; font-size: 18px; color: #666; } .your_position a { color: #666; } .your_position em { margin: 0 10px; } .case_wrap { margin-bottom: 50px; display: flex; justify-content: space-between; } .case_info { width: 830px; } .case_info h2 { font-size: 24px; margin-top: 60px; padding-left: 20px; border-left: 4px solid #0082FC; padding-left: 16p } .case_content { font-size: 16px; line-height: 24px; margin-bottom: 12px; margin-top: 24px; } .case_logo { width: auto; } .case_logo img { width: auto; } .case_name { font-size: 30px; font-weight: bold; color: #333; } .case_label { line-height: 24px; font-size: 14px; color: #333; } .case_label em { margin: 5px 0; margin-right: 10px; font-style: normal; color: #1d74e1; } .case_label span { margin: 5px 0; margin-right: 10px; } .case_content { height: 190px; line-height: 32px; font-size: 16px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } .case_btns { display: flex; justify-content: space-between; align-items: center; } .case_btns a { height: 48px; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 18px; } .case_btn3, .case_btn4 { width: 100%; height: 48px; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 18px; } .case_btn1, .case_btn2 { width: 160px; border: 1px #e6e6e6 solid; color: #333; position: relative; } .case_btn1 i { display: block; width: 17px; height: 17px; margin-left: 10px; background: url(../images/click1.png); } .case_btn1:hover { background: linear-gradient(to right, #026df1, #2ca7ff); color: #fff; } .case_btn1:hover i { background: url(../images/click2.png); } .case_btn2 i { display: block; width: 14px; height: 14px; margin-left: 10px; background: url(../images/scan1.png); } .case_btn2:hover { background: #19ad1a; color: #fff; } .case_btn2:hover i { background: url(../images/scan2.png); } .qr { width: 144px; height: 165px; display: none; flex-direction: column; justify-content: center; align-items: center; border-radius: 6px; background-color: #19ad1a; font-size: 12px; color: #fff; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 9; } .qr:after { display: block; content: ''; border-left: 8px transparent solid; border-right: 8px transparent solid; border-top: 12px #19ad1a solid; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); } .qr img { width: 120px; height: 120px; margin-bottom: 8px; } .case_btn2:hover .qr { display: flex; } .case_btn3 { background-color: #ffc62d; color: #fff; } .case_btn3 i, .case_btn4 i { display: block; width: 32px; height: 32px; margin-left: 10px; background: url(../img/arrow_w_right.png); } .case_btn3:hover { background: linear-gradient(to right, #f19002, #fec52c); color: #fff; } .case_btn4 { background-color: #2ca7ff; color: #fff; } .case_btn4:hover { background: linear-gradient(to right, #016cf0, #2da8ff); color: #fff; } .case_right { width: 275px; padding-top:60px; } .hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; } .tag h3 { font-weight: normal; font-size: 20px; line-height: 28px; margin-bottom: 8px; margin-top: 0; } .tag p { margin-bottom: 0.5rem; } .tag_1 { font-size: 16px; line-height: 24px; margin-top: 8px; margin-bottom: 8px; color: #333333; } .tag_2 { font-size: 16px; line-height: 24px; margin-top: 8px; margin-bottom: 8px; color: #999999; } .btns_row { padding: 100px 0; display: flex; justify-content: center; } .left_btn, .right_btn { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #f1f1f1; font-family: '瀹嬩綋'; color: #000; font-weight: bold; font-size: 20px; } .left_btn { transform: rotate(-180deg); } .left_btn:hover, .right_btn:hover { color: #fff; background: linear-gradient(to right, #0b7af4, #269efc); } .list_btn { display: block; width: 90px; height: 40px; margin: 0 35px; background: url(../images/list1.png) no-repeat center center #f1f1f1; } .list_btn:hover { background: url(../images/list2.png) no-repeat center center #0b7af4; } .good { margin-bottom: 30px; text-align: center; color: #333; } .good a { display: block; width: 100px; height: 100px; margin: 0 auto; margin-bottom: 30px; } .good img { width: 100px; } .share_row { display: flex; justify-content: center; align-items: center; font-size: 16px; color: #333; } @media (max-width: 1440px) { .container { padding: 0 20px; } .your_position { padding: 30px 0; } .case_btn1, .case_btn2 { width: 140px; } .case_btn3 { width: 160px; } .case_btn4 { width: 180px; } .case_wrap { margin-bottom: 30px; } } .inside_banner .container { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); z-index: 9; } .c_info { width: 870px; display: flex; color: #fff; } .impb{ display:flex; align-items: center; justify-content: center; margin-right:20px; } .c_info img { width:200px; height:93px; object-fit: contain; /*width: 80px;*/ /*height: 80px;*/ } .c_word h3{ margin-bottom:0.5rem; font-size:32px; font-weight: 500; } .case_info{ width: 100%; } .pmbs{ width: 100%; /*margin-top: 60px;*/ overflow:hidden; } .pmbs h2{ margin-top: 0; display: inline-block; float: left; line-height: 50px; } .pmbs .itex{ float:left; display: flex; margin-left:50px; } .pmbs .itex .tag_1{ color:#454545; margin: 0; line-height:50px; } .pmbs .itex .tag_2{ color:#9B9B9B; margin: 0; line-height:50px; } .pmbs .case_btn3{ width: 185px; height: 50px; line-height: 50px; background: #52A7F8; float: right; }