body {overflow-x:hidden; margin:0; scroll-behavior:smooth; font-family:"PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-x:hidden; background:#ffffff; background-position:center; background-repeat:no-repeat; background-size:cover;min-height: 100vh;overflow-y: clip;}
html {scroll-behavior:smooth; overflow-x:hidden;}
* {box-sizing:border-box;}
.container {max-width:1200px; width:100%; margin:0 auto; padding:0; position:relative;}
a {text-decoration:none;}
p, h1, h2, h3, h4 {margin:0;}
ul, li {padding:0; margin:0;}
li {list-style:none;}
.hidden {display:none !important;}

header{border-bottom: 2px solid #e3ebfd87;}
header .headerWrap{height: 97px;display: flex;align-items: center;justify-content: space-between;}
header .headerWrap .logoWrap{width: 125px;height: 45px;}
header .headerWrap .logoWrap img{height: 100%;width: auto;object-fit: contain;object-position: center;}
header .headerWrap .navWrap{display: flex;align-items: center;column-gap: 72px;}
header .headerWrap .navWrap a{font-size: 16px;font-weight: bold;color: #5C5F66;position: relative;}
header .headerWrap .navWrap a.active{font-size: 18px;color: #060D1F;}
header .headerWrap .navWrap a.active::after{content: "";position: absolute;bottom: -8px;left: 50%;transform: translateX(-50%);width: 24px;height: 4px;border-radius: 2px;background-color: #54C5FF;}
header .headerWrap .search-bar{position: relative;width: 160px;flex: 0 0 160px;max-width: 160px;height: 40px;border-radius: 10px;border: 1px solid #ECECEC;padding: 10px 10px 10px 35px;}
header .headerWrap .search-bar::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 10px;width: 18px;height: 18px;background-image: url(../images/searchIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
header .headerWrap .search-bar input{border: none;outline: none;background-color: transparent;font-size: 14px;font-weight: bold;color: #000000;}
header .headerWrap .search-bar input::placeholder{color: #B8B8B8;}

footer {margin-top: 37px;}
footer .footerTopWrap{background-color: #333333;padding: 36px 0 30px;}
footer .footerTopWrap .container{display: flex;align-items: flex-start;justify-content: space-between;}
footer .footerTopWrap .logoWrap{width: 180px;height: 65px;}
footer .footerTopWrap .logoWrap img{height: 100%;width: auto;object-fit: contain;object-position: center;}
footer .footerTopWrap .footer-link-wrap{display: flex;align-items: flex-start;column-gap: 130px;}
footer .footerTopWrap .footer-link-wrap .footer-link-column{display: flex;flex-direction: column;row-gap: 12px;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-title{font-size: 18px;font-weight: bold;color: #9F9F9F;position: relative;padding-bottom: 2px;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-title::after{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background-color: #9F9F9F;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-list{display: flex;flex-direction: column;row-gap: 10px;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-list a{position: relative;padding-left: 14px;font-size: 14px;color: #9F9F9F;line-height: 20px;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-list a::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 4px;height: 4px;border-radius: 50%;background-color: #9F9F9F;}
footer .footerbottomWrap{background-color: #3D3D3D;padding: 20px 0;}
footer .footerbottomWrap .container{display: flex;flex-direction: column;row-gap: 14px;}
footer .footerbottomWrap .footer-nav-wrap{display: flex;align-items: center;justify-content: center;column-gap: 20px;}
footer .footerbottomWrap .footer-nav-wrap a,footer .footerbottomWrap .footer-nav-wrap span{font-size: 14px;color: #CCCCCC;line-height: 20px;}
footer .footerbottomWrap .footer-nav-wrap i{width: 2px;height: 16px;background-color: #cccccc;}
footer .footerbottomWrap .footer-copyright{display: flex;flex-direction: column;row-gap: 10px;}
footer .footerbottomWrap .footer-copyright p{text-align: center;font-size: 14px;color: #CCCCCC;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-list a:hover, footer .footerbottomWrap .footer-nav-wrap a:hover{color: #54C5FF;}

.titleWrap{display: flex;align-items: center;column-gap: 12px;position: relative;}
.titleWrap h1{font-size: 24px;font-weight: bold;color: #060D1F;}

.titleWrap h2, .titleWrap p.hTitle{font-size: 24px;font-weight: bold;color: #060D1F;}
.titleWrap .moreBtn{width: 11px; height: 11px; border-top: 2px solid #E5E5E5; border-right: 2px solid #E5E5E5; transform: rotate(45deg);margin-top: 3px;margin-left: -5px;}
.titleWrap .moreBtn:hover{border-top: 2px solid #54C5FF; border-right: 2px solid #54C5FF;}

.breadcrumb {margin:20px 0 0; display:flex; align-items:center; column-gap:12px;}
.breadcrumb a {font-size:14px; color:#999999; line-height:20px; white-space:nowrap;padding-bottom: 3px;}
.breadcrumb p.current {font-size:14px; color:#140402; line-height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;font-weight: bold;position: relative;padding-bottom: 3px;}
.breadcrumb p.current::after{content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 50%;height: 2px;background-color: #54C5FF;border-radius: 4px;}
.breadcrumb i {width: 1px;height: 12px;background-color: #999999;transform: rotate(25deg);margin-bottom: 3px;}

.pagination{margin-top: 30px;display: flex;align-items: center;column-gap: 15px;justify-content: center;}
.pagination a.page-number{width: fit-content;padding: 0 10px;height: 28px;border-radius: 4px;text-align: center;line-height: 28px;font-size: 14px;color: #666666;font-weight: 400;}
.pagination a.active{background: #54C5FF;color: #FFFFFF;}
.pagination a.prev-page{margin-right: 3px;width: 10px;height: 10px;border:1px solid #C8C7C8;border-top: none;border-right: none;transform: rotate(45deg);}
.pagination a.next-page{margin-left: 3px;width: 10px;height: 10px;border:1px solid #C8C7C8;border-top: none;border-right: none;transform: rotate(-135deg);}
.pagination .navigate-page{display: flex;align-items: center;margin-left: 5px;}
.pagination .navigate-page p{font-size: 14px;color: #999999;}
.pagination .navigate-page input{width: 42px;height: 30px;border-radius: 4px;border: 1px solid #C9C7C7;background-color: #ffffff;outline: none;font-size: 14px;color: #999999;text-align: center;margin: 0 12px;}
.pagination .navigate-page .totalPages{margin-left: 20px;}
.pagination .navigate-page input[type="number"]::-webkit-inner-spin-button, .pagination .navigate-page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pagination .navigate-page input[type="number"] { -moz-appearance: textfield; }
.pagination .navigate-page a.jump-btn{cursor: pointer;}

.error-page .container{padding: 50px 50px;}
.error-page .error-wrap{display: flex;flex-direction: column;row-gap: 22px;align-items: center;}
.error-page .error-wrap > img{width: 500px;height: auto;object-fit: cover;object-position: center;}
.error-page .error-wrap > p{font-size: 24px;color: #333333;text-align: center;}
.error-page .error-wrap > span{font-size: 18px;color: #333333;text-align: center;}
.error-page .error-wrap > a{width: 110px;height: 34px;border-radius: 10px;text-align: center;line-height: 34px;box-sizing: border-box;background-color: #54C5FF;font-size: 18px;color: #ffffff;}

.floating-bar {position:fixed; bottom:300px; left:50%; transform:translateX(-50%);z-index: 9999;}
.floating-bar .floatingWrap {z-index:9999; right:-140px; position:absolute;}
.floating-bar .floatingWrap #backToTop {display: flex;align-items: center;justify-content: center;width: 72px;height: 72px;border-radius: 50%;background-color: #ffffff;box-shadow: 0px 4px 4px 0px #00000040; cursor: pointer;transform: translateY(500px);transition: transform .3s ease;}
.floating-bar .floatingWrap #backToTop.show{transform: translateY(0);}
.floating-bar .floatingWrap #backToTop img {width:30px; height:auto; object-fit:cover; object-position:center;}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-1 * var(--marquee-width)));
    }
}