.t_b1con { position: relative; } .t_ernav { z-index: 2; position: relative; display: flex; justify-content: center; } .t_erzhong { display: flex; } .t_erzhong .t_erli { margin: 0 4px; } .t_erwen { line-height: 80px; font-size: 22px; color: #999; line-height: 96px; padding: 0 35px; cursor: pointer; position: relative; transition: all 0.36s; } .t_erwen::before { content: ''; width: 5px; height: 5px; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: 18px; background: #999; transition: all 0.36s; } .t_erli.on .t_erwen::before { background: #333; } .t_erwen::after { content: ''; width: 0; height: 3px; border-radius: 0; position: absolute; bottom: 0; transform: translatex(-50%); left: 50%; background: transparent; transition: all 0.36s; } .t_erli.on .t_erwen, .t_erli:hover .t_erwen { color: #df002c; font-weight: bold; } .t_erli.on .t_erwen::after, .t_erli:hover .t_erwen::after { width: 100%; background: #df002c; } .t_b1k1 { text-align: center; background: #f8f8f8; padding-top: 75px; } .t_b1k1 .t_line1 { margin-bottom: 19px; height: 44px; position: relative; } .t_line1::before { content: ''; left: calc(50% - 0.5px); top: 0; position: absolute; background: #333; width: 1px; height: 100%; } .t_b1k1 .t_ywh2 { margin-bottom: 0px; } .t_ywh2 h2 { font-size: 36px; font-weight: bold; color: #333; line-height: 1.5; } .t_b1picwai { display: flex; justify-content: center; } .t_b1pic { width: 700px; position: relative; } .t_b1k2box { padding-top: 60px; padding-bottom: 60px; } .t_b1k2qie { padding: 0 30px; } .t_b1k2qie p{ font-size: 16px; line-height: 30px; color: #333; padding-left: 18px; background: url(../images/leftbj.png) 0px 6px no-repeat; background-size: 16px 16px; vertical-align: middle; transition: all 0.4s; } .t_b1k2qie:hover p{ font-weight: 600; transform: translateX(6px); } .t_b1k3 { background-color: #f3f3f3; } .tksfl{display: flex;} .tksleft h2{width:280px;font-size: 36px;font-weight: bold;color: #333;line-height: 1.5;text-align: center;padding-top: 80px;} .tksright{display: flex;flex-wrap: wrap;padding-top: 30px; padding-bottom: 40px;} .tksright .tksitem{width: 20%; text-align: center;padding: 0 24px;margin-bottom: 34px;} .tksitem .itemimg{position: relative;padding: 30px 30px;margin: 10px 20px;} .tksitem .itemimg::after{ content: '';width: 100%;height: 100%; position: absolute;top: 0;left: 0; border-radius: 50%;display: inline-block; border: 2px solid #df002c; opacity: 0; transition: all 0.36s; } .tksitem:hover .itemimg::after{ opacity: 1; } .itemimg img{width: 100%;} .tksright .tksitem p{font-size: 18px;line-height: 1.5;color: #666;font-weight: bold;text-align: center;height: 27px;overflow: hidden;} @media screen and (min-width: 1200px){} @media screen and (max-width: 1500px){} @media screen and (max-width: 1200px){ .t_erwen { line-height: 60px; padding: 0 24px; font-size: 20px; } .t_erwen::before { left: 10px; } .t_b1k1 .t_line1 { height: 36px; margin-bottom: 16px; } .t_b1k1 .t_ywh2 { margin-bottom: 18px; } .t_ywh2 h2 { font-size: 26px; } .t_b1picwai img { width: 660px; } .t_b1k2box { padding-top: 40px; padding-bottom: 30px; } .t_b1k2li { padding: 0px 4px; } .tksfl{ flex-direction: column; } .tksleft h2{width: 100%;font-size: 30px;} .tksright .tksitem { width: 25%; } } @media screen and (max-width: 1000px) {} @media screen and (max-width: 992px) {} @media screen and (max-width: 769px) { .t_b1picwai img { width: 80%; } .t_erzhong .t_erli { margin: 0 0px; } .t_erwen { line-height: 50px; padding: 0px 12px; font-size: 13px; } .t_erwen::before { left: 3px; } .t_ywh2 h2 { font-size: 20px; } .tksright .tksitem{ padding: 0 4px; margin-bottom: 20px; } .tksitem .itemimg{ padding: 0px 0px; margin: 10px 10px; } .tksfl{padding-bottom: 20px;} } @media screen and (max-width: 580px) { .t_b1k2qie { padding: 0 10px; } .t_ywh2 h2 { font-size: 18px; } .tksleft h2{ font-size: 18px; padding-top: 50px; } .t_b1k1{ padding-top: 50px; } .tksright{ padding-top: 8px; padding-bottom: 25px; } .tksright .tksitem p { font-size: 14px; } .tksright .tksitem{ margin-bottom: 10px; } .t_b1k2qie p { font-size: 13px; } }