@font-face {
    font-family: "Michelin-Light";
    src: url("../fonts/Michelin-Light.otf");
}
@font-face {
    font-family: "HYTieXianHei-45J";
    src: url("../fonts/HYTieXianHei-45J.ttf");
}
@font-face {
    font-family: "HYTieXianHei-75J";
    src: url("../fonts/HYTieXianHei-75J.ttf");
}
@font-face {
    font-family: "HYTieXianHei-85J";
    src: url("../fonts/HYTieXianHei-85J.ttf");
}

.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%;
}

.back-to-top { z-index:9!important;}
.kv .swiper { width: 100%; overflow: hidden;}
.kv .kv_link { position:absolute; top:0; left:0; width:100%; height:100%; text-indent: -9999px; background:rgba(255,255,255,0); overflow:hidden; z-index:2;}
/*.kv .kv01-text { position:absolute; top:-9999px; left:-9999px;}*/

.kv .kv01-text {
  position: absolute;
  top: 36.8%;
  left: 24.6%;
  color: white;
  font-style: oblique;
  z-index:1;
}

.kv .kv01-text>h1{
  font-weight: normal;
  color:#fce500;
  font-size: 2.4vw;
  font-family: "HYTieXianHei-85J";
}

.kv .kv01-text .kv01-desc {
  margin-top: 4%;
  line-height: 2.2;
  font-size: 1.1vw;
}
.kv .kv01-text .kv01-desc .kv01-desc2{
  font-weight: normal;
  color:#fce500;
  font-family: "HYTieXianHei-85J";
 
}

.swiper-pagination {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	bottom:18.4% !important;
	right:10.4% !important;
	position:absolute;
	width:auto !important;
}
.swiper-pagination span{
	background:#a6a7a2;
	width:3.56vw;
	height:3px;
	border-radius:2px;
    margin-left:10px;
    position:relative;
    opacity:1; filter:Alpha(opacity:100);
}
.swiper-pagination span i { display:none; position:absolute; top:0; left:0; width:0px; height:100%; padding:0; background:#FFF; overflow:hidden;}
/* .swiper-pagination span.swiper-pagination-bullet-active{
	background:#fff;
	height:3px;
} */
.swiper-pagination span.swiper-pagination-bullet-active i { display:block;}


.section1 {}
.menu-box { width:42%; max-width:850px; margin:-5rem auto auto; background:#00205b; padding:1.6rem; border-radius: 20px; color:#FFF; user-select: none; box-shadow:0px 0px 18px rgba(0,0,0,0.75); position:relative; z-index:11;}
.menu-box .menu-title { font-size:1.2rem; font-weight:700; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #445b87;}
.menu-box .menu-title span { font-weight:normal; margin-left:0.6rem;}
.menu-box .menu-head { position:relative; width:calc(100% - 60px); padding:14px 30px; border-radius:8px; background:#FFF; color:#000; font-size:1.2rem; line-height:30px;}
.menu-box .menu-head::before { content:""; width:34px; height:34px; background:#fce500; position:absolute; top:12px; right:16px; border-radius:50%;transition: all 0.3s ease-in-out;}
.menu-box .menu-head::after { content:""; width:8px; height:8px; position:absolute; top:22px; right:28px; border-left:2px solid #000; border-top:2px solid #000; transition: all 0.3s ease-in-out; transform:rotate(225deg);}
.menu-box .on .menu-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.menu-box .on .menu-head::before { transform:rotate(45deg);}
.menu-box .on .menu-head::after { transform:rotate(45deg); top:26px;}
.menu-box .menu-c1 { position:relative;}
.menu-box .menu-list { display:none; position:absolute;top:58px; left:0; width:100%; background:linear-gradient(to bottom, #c9c9c9, #f2f2f2 40px); font-size:1.2rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; overflow:hidden; max-height:360px; overflow-y:auto; scrollbar-width: thin; scrollbar-color: #27509b #f1f1f1;}
.menu-box .menu-list a:link, .menu-box .menu-list a:visited { display:block; position:relative;padding:14px 30px; color:#000; text-decoration: none; line-height:30px; transition: all 0.3s ease-in-out;}
.menu-box .menu-list a:hover { background:#27509b; color:#FFF;}
.menu-box .menu-list a::after { content:""; display:block; height:1px; background:#FFF; position:absolute; bottom:0px; left:10px; width:calc(100% - 20px); z-index: 2;}
.menu-box .menu-list a:hover::after { display:none;}

.menu-box .menu-list a.active:link, .menu-box .menu-list a.active:visited { background:#27509b; color:#FFF;}
.menu-box .menu-list a.active:link::after, .menu-box .menu-list a.active:visited::after { display:none;}

.menu-box .on .menu-list { display:block;}

.ping-top-nav {display:none;width:42vw; max-width:850px; padding:0 1.6rem; position:fixed; height:auto; bottom:3%; left:50%; transform: translateX(-50%); border-radius:8px; z-index: 9; align-items: center; justify-content: space-around; color:#FFF; letter-spacing: 2px; box-shadow:0px 8px 16px rgba(0,0,0,0.4); aspect-ratio:960/120; transition: all 0.3s 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 .a1 { width:18%; 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;flex-direction: column;gap:0.2rem;}
.ping-top-nav .a2 strong { font-size:1.6rem; font-weight:normal; font-family:"HYTieXianHei-75J"; 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:1rem; font-family:"HYTieXianHei-45J";}

.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-75J"; 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-box { min-height:600px;}
.section2 { width:80%; margin:auto; padding-bottom:280px;}
.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-75J";}
.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: 1.5px;}
.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) {
    .swiper-pagination span{ width:12vw;}
    .menu-box { width:calc(90% - 30px); padding:15px; max-width:none; margin-top:-70px; border-radius:6px;}
    .menu-box .menu-head { padding:15px; width:calc(100% - 30px); border-radius:6px; line-height:22px; font-size:16px;}
    .menu-box .menu-list a:link, .menu-box .menu-list a:visited { padding:15px; font-size:16px; line-height:22px;}
    .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;}
	
    .kv .kv01-text>h1 {font-size: 25px;}
	.kv .kv01-text {
	  position: absolute;
	  top: 45%;
	  left: 5%;
	  color: white;
	  font-style: oblique;
	}
    .kv .kv01-text .kv01-desc {font-size: 15px;line-height: 1.5;}
}