*{ padding: 0; margin: 0; list-style: none; } body{ font: 1em/1.75 "Lato",Helvetica,Arial,sans-serif; } a{ text-decoration: none; color: #000; } .toptitle{ width: 100%; height: 100px; line-height: 100px; background: transparent url('https://p4-ofp.static.pub/ShareResource/cap/where-to-buy/img/top-banner-1920x200-0105.png') 0% 0% no-repeat padding-box; } .toptitle h2{ margin-left: 10%; } #container{ width: 80%; margin: 0 auto; padding: 10px 0 50px 0; } .firsttab{ width: 100%; height: 35px; border-bottom: 1px solid; } .firsttab ul,.content .content-firsttab ul{ display: flex; justify-content: space-between; } .firsttab ul li,.content .content-firsttab ul li{ width: 20%; height: 35px; line-height: 35px; text-align: center; font-size: 14px; } .firsttab ul li a{ display: inline-block; width: 100%; height: 100%; } .firsttab ul li:nth-child(3) a{ color: #fff; } .firsttab ul li:nth-child(3){ background: rgba(41, 78, 149, 1)  !important; } .firsttab ul li:hover,.content .content-firsttab ul li:hover{ background-color: rgba(41, 78, 149, 1)  !important; background-image: url('https://p2-ofp.static.pub/ShareResource/cap/where-to-buy/img/jianhao.png'); color: #fff; } a:hover{ color: #fff; } .secondtab{ width: 100%; margin-top: 20px; } .secondtab-title{ border-bottom: 1px solid; padding-bottom: 25px; } .firsttab .active{ background: rgba(41, 78, 149, 1)  !important; color: #fff  !important; } .secondtab-first .content{ display: none; } .secondtab-first .title{ background-image: url(https://p1-ofp.static.pub/fes/cms/2020/12/23/th5vvug8miz54q3jcwqrb8oikur5f3558517.jpg); background-repeat: no-repeat; background-position: 98% 15px; background-size: 20px; border-bottom: 1px solid; height: 50px; font: normal normal bold 18px/50px Lato; } .secondtab-first .title.active{ background-image: url(https://p4-ofp.static.pub/fes/cms/2021/05/27/sca6f2oyjpnmc5ytz7kog6iv8k7kcv538406.svg); border-bottom: none; } .secondtab-first .content .dataintable{ width: 90%; margin: 10px auto; border-collapse: collapse; font-size: 11px; } .dataintable a{ color: #294e95; } .secondtab-first .content .even{ background: #f5f5f5; } .secondtab-first .content .even th{ padding: 5px 15px 5px 5px; border: 1px solid #c3aeae; background: #f5eaea; text-align: left; } .secondtab-first td{ padding: 3px 10px 3px 5px; border: 1px solid #ccc; ; } .content-firsttab ul li.active{ background-color: rgba(41, 78, 149, 1); background-image: url('https://p2-ofp.static.pub/ShareResource/cap/where-to-buy/img/jianhao.png')  !important; color: #fff; } .content .content-firsttab ul li{ border: 1px solid; width: 20%  !important; background-image: url('https://p1-ofp.static.pub/ShareResource/cap/where-to-buy/img/jiahao.png'); background-repeat: no-repeat; background-position: 98%; background-size: 20px; padding-left: 10px; padding-right: 20px; font-size: 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .content-firsttab{ margin-bottom: 20px; margin-top: 20px; } .genuineLayer{ width: 80%; margin: 0 auto; } .TradeMark{ color: #009dd9; font-size: 1.1em; font-weight: bold; } .Trademarktitle{ font-weight: bold; margin: 3% 0 3% 0; color: #555; } @media screen and (max-width:667px) { #container{ width: 95%; } .toptitle{ background: transparent url('https://p2-ofp.static.pub/ShareResource/cap/where-to-buy/img/top-banner-750x118-0105.png') 0% 0% no-repeat padding-box; } .toptitle h2{ font-size: 18px; margin-left: 5px; } .firsttab{ border: none; } .firsttab ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .firsttab ul li{ width: 45%; font-size: 12px; border: 1px solid; margin-right: 0; margin-bottom: 10px; } .firsttab ul li a{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .secondtab{ margin-top: 60px; } }