@font-face {
    font-family: "Michelin-Light";
    src: url("/assets/fonts/Michelin-Light.otf");
}
@font-face {
    font-family: "HYTieXianHei-45J";
    src: url("/assets/fonts/HYTieXianHei-45J.ttf");
}
@font-face {
    font-family: "HYTieXianHei-85J";
    src: url("/assets/fonts/HYTieXianHei-85J.ttf");
}
.tab-content { margin-top:auto!important;}
.bottom { margin-bottom:auto;}
.tyre-selector-detail .bottom { margin-bottom:3vw;}
.sections {
    position: relative;
    width: 100%;
    margin: auto;
}

.sections img {
    display: block;
    width: 100%;
}

.sections ul, .sections li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sections h1,.sections p {
    margin: 0;
    padding: 0;
}

.sections.kv01 {
    width: 100%;
}

.ping-top-nav {display:none;width:calc(100vw - 5px); padding:0; height:85px; position:fixed; bottom:0; left:0; z-index: 9; transition: background 0.3s ease-in-out;}
.ping-top-nav.notran { transition: all 0s ease-in-out;}
.ping-top-nav.blue-btn { background:#fce500; color:#333;}
.ping-top-nav.yellow-btn { background:#fce500; color:#333;}


.ping-top-nav.blue-btn .a4 { display:none;}
.ping-top-nav.yellow-btn .a2,.ping-top-nav.yellow-btn .a3 { display:none;}

.ping-top-nav .nav_c1 { display:flex; align-items: center; justify-content: space-around; letter-spacing: 2px; aspect-ratio:1050/85; width:1050px; margin:auto;}

.ping-top-nav .a1 { width:150px; height:100%; position:relative;}
.ping-top-nav .a1 img { position:absolute; bottom:0; right:0;}
.ping-top-nav .a2 {width: calc(77% - 130px);display:flex;gap:1rem; align-items: center;}
.ping-top-nav .a2 strong { font-size:1.6rem; font-weight:normal; font-family:"HYTieXianHei-85J"; display:flex;}
.ping-top-nav .a2 strong font { font-family:"Michelin-Light"; font-size:1rem; margin-left:0.6rem;}
.ping-top-nav .a2 span { font-size:1.2rem; font-family:"HYTieXianHei-45J"; position:relative; margin-left:1rem;}
.ping-top-nav .a2 span::before { content:''; position:absolute; top:-10%; left:-1rem; width:1px; height:120%; background:#333;}

.ping-top-nav .a3 {width: 100px;text-align: right;position:relative;padding-right:30px;font-family:"HYTieXianHei-45J";}
.ping-top-nav .a3::after { content:""; width:12px; height:12px; position:absolute; top:4px; right:0; border-left:2px solid #333; border-top:2px solid #333; transform:rotate(135deg);}
.ping-top-nav .a4 { width:calc(70% - 30px); color:#333; font-size:1.6rem; font-family:"HYTieXianHei-85J"; text-align: right; position:relative; padding-right:30px;} 
.ping-top-nav .a4::after { content:""; width:16px; height:16px; position:absolute; top:0.4rem; right:0; border-left:2px solid #333; border-top:2px solid #333; transform:rotate(135deg);}
.ping-top-nav .a5 { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0);}

.ping-top-nav.blue-btn:hover { background:#27509b; color:#FFF;}
.ping-top-nav.blue-btn:hover .a3::after { border-color:#fff;}
.ping-top-nav.yellow-btn:hover { background:#27509b;}
.ping-top-nav.yellow-btn:hover .a4 { color:#FFF;}
.ping-top-nav.yellow-btn:hover .a4::after { border-color:#FFF;}
.ping-top-nav:hover .a2 span::before { background:#FFF;}

.section2 { width:80%; margin:auto; padding-bottom:120px;}
.section2 .ping-h1 { margin:4rem auto 2rem;}
.section2 .ping-h1 h1 { font-size:2.4rem; font-weight:500; text-align:center; letter-spacing: 3px;}
.section2 .ping-head { font-size:1.6rem; padding-bottom:0.6rem; padding-top:1rem; border-bottom:2px solid #fce500; font-family:"HYTieXianHei-85J";}
.section2 .ping-head span { margin-left:0.3rem; font-family:"Michelin-Light";}

.section2 .ping-menu { margin-top:1.2rem; display:flex; justify-content:flex-start; align-items:center; gap:1rem; flex-wrap: wrap;}
.section2 .ping-menu a:link, .section2 .ping-menu a:visited { display:block; padding:8px 16px; border-radius:8px; background:#f2f2f2; color:#000; text-decoration: none; font-size:1rem; transition: all 0.3s ease-in-out; white-space: nowrap;}
.section2 .ping-menu a:hover { background:#27509b; color:#FFF;}
.section2 .ping-menu a.active:link, .section2 .ping-menu a.active:visited { background:#27509b; color:#FFF;}
.ping-list { margin-top:2rem; column-count: 3; column-gap:2%;}
.ping-list .ping-item { width:100%; margin-bottom:32px; break-inside: avoid-column;}

.ping-list .item-head { border:1px solid #f2f2f2; padding:16px; border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden; display:flex; justify-content:space-between; align-items:center; font-size:13px;}
.ping-list .item-head img { display:inline-block; width:auto;}
.ping-list .item-head .a1 { width:40px;}
.ping-list .item-head .a1 img { width:40px;}
.ping-list .item-head .a2 { width:calc(100% - 172px);}
.ping-list .item-head .a2 span { display:flex;align-items:center;}
.ping-list .item-head .a2 .b1 { gap:7px; color:#1a1a1a;}
.ping-list .item-head .a2 .b1 img { width:14px;}
.ping-list .item-head .a2 .b2 { gap:4px; color:#27509b;}
.ping-list .item-head .a2 .b2 img { width:14px;}
.ping-list .item-head .a3 { width:100px; color:#999999; text-align:right;}

.ping-list .item-body { background:#f2f2f2; padding:16px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; overflow: hidden; line-height: 1.4;}
.blue01 { color: #27509b !important;}

.ping-list .item-body .a1 { color:#1a1a1a; position:relative; font-size:14px; line-height:2; letter-spacing: 1px; text-align: justify;}
.ping-list .item-body .a1.closed {display: -webkit-box;  -webkit-line-clamp: 5;  -webkit-box-orient: vertical;  overflow: hidden;}
.ping-list .item-body .a1 .open-btn {display:none; position:absolute; bottom:0; right:0; width:120px; line-height: 2; text-align: right; background:linear-gradient(to left, #f2f2f2 40%, rgba(255,255,255,0));color:#27509b; padding-right:22px; cursor: pointer;}
.ping-list .item-body .a1 .open-btn::after { content:""; width:8px; height:8px; position:absolute; top:6px; right:4px; border-left:2px solid #27509b; border-top:2px solid #27509b; transform:rotate(225deg);}
.ping-list .item-body .a1.closed .open-btn { display:block;}

.ping-list .item-body .a2 { display:flex; justify-content:flex-start; align-items:center; gap:2%; margin-top:16px;}
.ping-list .item-body .a2 span { border-radius: 8px; overflow:hidden; width:23%;}


.ping-box.on .ping-top-nav {display:flex;justify-content: space-between;}
.ping-box.on { display:block;}

.ping-update { padding-top:1rem; text-align:center; color:#b2b2b2;}
.ping-more { padding-top:46px; text-align:center;}
.ping-more a:link, .ping-more a:visited { text-decoration: underline; color:#27509b;}

.menu-mask { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:10; background:rgba(0,0,0,0.4);}
@media (max-width: 1024px) {
    .ping-top-nav .a2 strong font { display:none;}
}

@media (max-width: 750px) {
    .section2 .ping-h1 h1 { text-align: left; font-size:1.6rem;}
    .section2 .ping-menu { flex-wrap: wrap; margin-top:0.6rem; gap:6px;}
    .section2 .ping-head { font-size:1.2rem;}
    .section2 .ping-menu a:link, .section2 .ping-menu a:visited { padding:8px 12px; font-size:14px; border-radius:6px;}
    .ping-list { column-count: 1; column-gap:2%;}
    .ping-list .item-head .a1 { width:30px;}
    .ping-list .item-head .a2 { width:calc(100% - 120px); font-size:14px;}
    .ping-list .item-head .a3 { font-size:10px; width:70px; text-align: right;}
    .ping-list .item-head .a1 img { width:100%;}
    .ping-list .item-head .a2 .b1 img { width:14px;}
    .ping-list .item-head .a2 .b2 img { width:14px;}
    .ping-list .item-body .a1 { font-size:15px;}
    .section2 { width:90%; padding-bottom:220px;}

    .ping-top-nav { width:calc(90vw - 20px); padding:0 10px; max-width: none; height:auto; border-radius:6px;letter-spacing: 1px; aspect-ratio:380/70;}
    .ping-top-nav .a2 strong { font-size:16px;}
    .ping-top-nav .a2 span { font-size:12px;}
    .ping-top-nav .a3 { width:60px; font-size:14px; padding-right:10px;}
    .ping-top-nav .a1 { width:28%;}
    .ping-top-nav .a2 { width:calc(72% - 90px);}
    .ping-top-nav .a3::after { width:8px; height:8px;}
    .ping-top-nav .a4 { width:calc(72% - 16px); font-size:18px; padding-right:16px;}
    .ping-top-nav .a4::after { width:12px; height:12px; top:3px;}

    .ping-update { padding-top:10px;}
    .ping-more { padding-top:36px;}
    .swiper-pagination { right:4.4%!important; bottom:23%!important;}
    .menu-box .menu-title { font-size:1rem; padding-bottom: 8px; margin-bottom: 8px;}
    .menu-box .menu-head::before { top:12px; width:28px; height:28px;}
    .menu-box .menu-head::after { top:18px; right:25px;}
    .menu-box .menu-list { top:52px;}
    .menu-box .on .menu-head::after { top:23px;}
    .ping-list .item-body .a1 .open-btn::after { top:6px;}
	
}