.drawer { background-color: #fff; box-shadow: 0 0 15px -7px #ccc; display: flex; flex-direction: column; height: 100vh; left: -80vw; position: fixed; top: 0; transition: all .2s ease-in; width: 80vw; z-index: 1000 } .drawer.active { left: 0 } .drawer .title { align-items: center; background-color: #4066b8; display: flex; height: 60px; justify-content: space-between; padding: 0 12px; width: 100% } .drawer .title img { display: block; } .drawer .title a { color: #fff } .drawer .cot { flex: 1; padding: 0 16px; position: relative } .drawer .cot .tools { align-items: center; border-bottom: 1px solid #d4d4d4; display: flex; justify-content: space-between; padding: 16px 0 } .drawer .cot .tools a { align-items: center; display: flex; flex-direction: column; justify-content: center } .drawer .cot .tools a img { height: 30px; margin-bottom: 6px; width: 30px } .drawer .cot .tools a i { font-size: 12px } .drawer .cot .list li a { justify-content: space-between; padding: 10px 0 } .drawer .cot .list li a, .drawer .cot .list li a div { align-items: center; display: flex } .drawer .cot .list li a div .iconfont { color: #4066b8; font-size: 20px; margin-right: 6px } .drawer .cot .list li a div .iconfont.icongouwuche1 { margin-left: -3px } .drawer .cot .list li a div span { font-size: 13px } .drawer .cot .list li a>i { font-size: 12px } .drawer .cot .btn { border-radius: 18px; bottom: 120px; left: 50%; position: absolute; transform: translate(-50%); width: 80% } .mobile { background: #4066b8; height: 94px; margin-bottom: 20px; padding-top: 20px; position: relative; width: 100% } .mobile .nav { justify-content: space-between; padding: 0 10px; position: relative; width: 100% } .mobile .nav, .mobile .nav .iconfont { align-items: center; display: flex; height: 30px } .mobile .nav .iconfont { color: #fff; font-size: 20px; justify-content: center; width: 30px } .mobile .nav .logo { left: 50%; position: absolute; top: 0; transform: translate(-50%) } .mobile .nav a { color: #fff; font-size: 15px } .mobile .round { background-color: #4066b8; border-radius: 50%; bottom: -12px; height: 24px; left: 0; position: absolute; width: 100% } .mobile .search { align-items: center; background: #fff; border-radius: 20px; bottom: -20px; box-shadow: 0 0 15px -7px #ccc; display: flex; height: 40px; justify-content: space-between; left: 50%; padding: 0 20px; position: absolute; transform: translate(-50%); width: 90% } .mobile .search span { color: #999; font-size: 12px } .mobile .search .iconfont { color: #999; font-size: 16px } .theIndex { padding-bottom: 30px } @media screen and (max-width:1024px){ .theIndex { padding-top: 20px } } .theIndex .review { margin-top: 30px } .theFooter .top { background-color: #fff; height: 86px } .theFooter .top .cot { height: 100% } .theFooter .top .cot ul { box-sizing: border-box; display: flex; height: 100%; padding: 6px 0 } .theFooter .top .cot ul li { align-items: center; border-left: 1px solid #f1f1f1; display: flex; flex: 1; height: 100%; justify-content: center } .theFooter .top .cot ul li:last-child { border-right: 1px solid #f1f1f1 } .theFooter .top .cot ul li img { height: 40px; margin-right: 20px; width: 40px } .theFooter .top .cot ul li div b { color: #4066b8; font-size: 20px; line-height: 24px } .theFooter .bot { background-color: #4066b8 } .theFooter .bot .cot { height: 100%; padding: 30px 0 0 } .theFooter .bot .cot ul { display: flex; height: 100%; justify-content: space-between } .theFooter .bot .cot ul li { height: 100%; width: 280px } .theFooter .bot .cot ul li b { color: #fff; display: block; font-size: 20px; font-weight: 400; letter-spacing: 1px; margin-bottom: 10px } .theFooter .bot .cot ul li b.line { border-bottom: 1px solid #fff } .theFooter .bot .cot ul li a { color: #fff; display: block; line-height: 30px } .theFooter .bot .cot ul li a:hover { text-decoration: underline } .theFooter .bot .cot ul li .review { display: flex; justify-content: flex-start; padding: 10px 0 } .theFooter .bot .cot ul.function { padding-top: 20px } .theFooter .bot .cot ul.function li dl { display: flex } .theFooter .bot .cot ul.function li dl dd { align-items: center; background-color: #fff; border-radius: 6px; display: flex; height: 30px; justify-content: center; margin-right: 10px; width: 56px } .theFooter .bot .cot ul.function li dl dd img { height: 12px; width: 42px } .theFooter .bot .cot ul.function li .follow { display: flex } .theFooter .bot .cot ul.function li .follow .btn { background-color: #fff; border-radius: 15px; box-shadow: 0 5px 15px -5px #0000001a; height: 36px; line-height: 36px; margin-right: 16px; overflow: hidden; position: relative; text-align: center; width: 36px } .theFooter .bot .cot ul.function li .follow .btn .iconfont { font-size: 20px; transform: scale(.8); transition: all .4s cubic-bezier(.31, -.1, .43, 1.59) } .theFooter .bot .cot ul.function li .follow .btn:before { content: ""; height: 120%; left: -110%; position: absolute; top: 90%; transform: rotate(45deg); transition: all .4s cubic-bezier(.31, -.1, .43, 1.59); width: 120% } .theFooter .bot .cot ul.function li .follow .btn .icontwitte { color: #000; font-size: 16px; font-weight: 700 } .theFooter .bot .cot ul.function li .follow .btn.btn_tuite:before { background-color: #000 } .theFooter .bot .cot ul.function li .follow .btn .iconlinkedin { color: #0077b5 } .theFooter .bot .cot ul.function li .follow .btn.btn_linkedin:before { background-color: #0077b5 } .theFooter .bot .cot ul.function li .follow .btn .iconinstagram { color: #e45496 } .theFooter .bot .cot ul.function li .follow .btn.btn_instagram:before { background-color: #e45496 } .theFooter .bot .cot ul.function li .follow .btn .iconfacebook1 { color: #3c57a0; font-weight: 700 } .theFooter .bot .cot ul.function li .follow .btn.btn_facebook:before { background-color: #3c57a0 } .theFooter .bot .cot ul.function li .follow .btn .iconYoutube-fill { color: red; font-size: 26px; font-weight: 700 } .theFooter .bot .cot ul.function li .follow .btn.btn_youtube:before { background-color: red } .theFooter .bot .cot ul.function li .follow .btn:hover:before { left: -10%; top: -10% } .theFooter .bot .cot ul.function li .follow .btn:hover { text-decoration: unset } .theFooter .bot .cot ul.function li .follow .btn:hover .iconfont { color: #fff; position: relative; transform: scale(1) } .theFooter .bot .cot ul.function li .subscribe { align-items: center; border: 1px solid #fff; border-radius: 18px; box-sizing: border-box; display: flex; height: 36px; justify-content: space-between; overflow: hidden; padding: 2px; width: 100% } .theFooter .bot .cot ul.function li .subscribe input { background-color: #4066b8; border: none; color: #fff; height: 30px; margin: 0 !important; padding: 0 2px 0 10px; width: 60% } .theFooter .bot .cot ul.function li .subscribe input::-moz-placeholder { color: #f4f4f4 } .theFooter .bot .cot ul.function li .subscribe input::placeholder { color: #f4f4f4 } .theFooter .bot .cot ul.function li .subscribe button { background-color: #fff; border-radius: 17px; color: #4066b8; font-size: 13px; height: 32px; margin: 0 !important; padding: 0 !important; width: 30% } .theFooter .bot .cot ul.footIcon { padding: 20px 0 } .theFooter .bot .cot ul.footIcon li .certificationBox { align-items: center; display: flex } .theFooter .bot .cot ul.footIcon li .certificationBox .certification { height: 60px; margin-right: 19px } .theFooter .bot .cot ul.footIcon li .friend-link { margin-top: 10px } @media screen and (max-width:1024px){ .theFooter .top { display: none } .theFooter .bot .cot { width: 100% } .theFooter .bot .cot ul { flex-direction: column } .theFooter .bot .cot ul li { margin-bottom: 20px; padding: 0 10px; width: 100% } .theFooter .bot .cot ul li b { border-bottom: 1px solid #fff; font-size: 18px; margin-bottom: 10px } .theFooter .bot .cot ul.footIcon { padding-top: 0 } .theFooter .bot .cot ul.footIcon li:first-child { display: none } .theFooter .bot .cot ul.footIcon .friend-link img { width: 48px } } .recommend, .recommend .top { margin-bottom: 20px } .recommend .top { align-items: flex-end; display: flex; height: 420px; justify-content: space-between } .recommend .top .cate { height: 100%; width: 310px } .recommend .top .cate>ul { background-color: #fff; display: flex; flex-direction: column; height: 100%; position: relative; width: 100% } .recommend .top .cate>ul>li { align-items: center; display: flex; flex: 1; padding: 0 10px } .recommend .top .cate>ul>li>a { -webkit-line-clamp: 1; -webkit-box-orient: vertical; align-items: center; color: #333; display: -webkit-box; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: normal; width: 100%; word-break: break-all } .recommend .top .cate>ul>li>a .iconfont { margin-right: 6px } .recommend .top .cate>ul>li:hover { background-color: #f4f4f4 } .recommend .top .cate>ul>li:hover .items { display: flex } .recommend .top .cate>ul>li:hover a { color: #4066b8 } .recommend .top .cate>ul>li .items { background-color: #fff; box-shadow: 1px 0 6px #00000029; display: none; flex-direction: column; height: 420px; left: 310px; padding: 20px 0 20px 20px; position: absolute; top: 0; width: 990px; z-index: 100 } .recommend .top .cate>ul>li .items .title { align-items: center; display: flex; margin-bottom: 20px } .recommend .top .cate>ul>li .items .title a { color: #4066b8; font-size: 14px } .recommend .top .cate>ul>li .items .title a:hover { text-decoration: underline } .recommend .top .cate>ul>li .items .title .iconfont { font-size: 10px; margin-left: 10px } .recommend .top .cate>ul>li .items .cot { flex: 1; overflow-y: auto } .recommend .top .cate>ul>li .items .cot::-webkit-scrollbar { width: 8px } .recommend .top .cate>ul>li .items .cot::-webkit-scrollbar-thumb { background-color: #4066b8; border-radius: 8px } .recommend .top .cate>ul>li .items .cot ul { display: flex; flex-wrap: wrap; overflow-y: auto } .recommend .top .cate>ul>li .items .cot ul li { margin-bottom: 15px; padding: 0 5px; width: 50% } .recommend .top .cate>ul>li .items .cot ul li a { color: #333 } .recommend .top .cate>ul>li .items .cot ul li a:hover { color: #4066b8; text-decoration: underline } .recommend .top .banner { border-radius: 6px; height: 410px; overflow: hidden; width: 975px; } .recommend .top .banner .swiper-button-prev { border-radius: 0 8px 8px 0; left: 0 } .recommend .top .banner .swiper-button-next { border-radius: 8px 0 0 8px; right: 0 } .recommend .top .banner .swiper-button-next, .recommend .top .banner .swiper-button-prev { background-color: #0006; color: #f4f4f4 } .recommend .top .banner .swiper-button-next:after, .recommend .top .banner .swiper-button-prev:after { font-size: 14px } .recommend .top .banner .swiper-pagination-bullet { border-radius: 10px; bottom: 5px; height: 5px; width: 20px } .recommend .top .banner .swiper-pagination-bullet-active { background-color: #4066b8 } .recommend .top .banner .swiper-slide { align-items: center; display: flex; font-size: 18px; justify-content: center; text-align: center; transform: scale(1); transition: .3s } .recommend .top .banner .swiper-slide img { border-radius: 4px } .recommend .top .banner .swiper-slide-active, .recommend .top .banner .swiper-slide-duplicate-active { transform: scale(2); z-index: 100 } .recommend .top .banner .swiper-slide-active a img, .recommend .top .banner .swiper-slide-duplicate-active a img { box-shadow: 0 1px 2px -1px #666 } .advantage .toolBox { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } .advantage .toolBox li {display: block !important; background: #fff; border-radius: 6px; height: 96px; transition: all .3s; width: 210px } .advantage .toolBox li a { align-items: center; color: #333; display: flex; height: 100%; justify-content: space-between; padding: 16px; } .advantage .toolBox li a div { display: flex; flex-direction: column; height: 100%; justify-content: space-around } .advantage .toolBox li a div b { font-size: 16px } .advantage .toolBox li a div p { color: #4066b8; font-size: 16px; font-style: oblique } .advantage .toolBox li a div p .iconfont { font-size: 12px } .advantage .toolBox li a img { height: 55px; width: 53px } .advantage .toolBox li:hover { box-shadow: 0 0 10px #ccc } @media screen and (max-width:1024px){ .recommend { display: none; width: 100% } .recommend .top { height: unset; width: 100% } .recommend .top .cate { display: none } .recommend .top .banner { border-radius: 10px; overflow: hidden } .recommend .top .banner, .recommend .top .banner img { height: 174px; width: 355px } .advantage .toolBox { display: none } } .advantage { margin-bottom: 30px } .advantage>ul {background-color: transparent !important; border-radius: 6px; display: flex; flex-direction: row;justify-content: space-between; height: 80px; padding: 10px 0; width: 1300px } .advantage>ul li { align-items: center; display: flex; flex: 1; justify-content: center } .advantage>ul li+li { border-left: 1px solid #f1f1f1 } .advantage>ul li img { height: 32px; margin-right: 16px; width: 48px } .advantage>ul li p { color: #333; line-height: 20px; width: 190px } @media screen and (max-width:1024px){ .advantage>ul { display: none } } .advantage>div { display: none } @media screen and (max-width:1024px){ .advantage>div { display: block } .advantage>div .tools { background: #fff; border-radius: 5px; display: flex; justify-content: space-between; margin-bottom: 12px; padding: 16px 10px; width: 100% } .advantage>div .tools a { align-items: center; border-radius: 4px; display: flex; flex-direction: column; height: 60px; justify-content: center; width: 70px } .advantage>div .tools a img { height: 28px; margin-bottom: 6px; width: 28px } .advantage>div .tools a p { font-size: 12px } .advantage>div .cate { display: flex; justify-content: space-between; width: 100% } .advantage>div .cate a { height: 65px; position: relative; width: 112px } .advantage>div .cate a img { border-radius: 4px; height: 65px; width: 112px } .advantage>div .cate a p { color: #fff; font-size: 12px; left: 8px; position: absolute; top: 8px } } @font-face { font-family: swiper-icons; font-style: normal; font-weight: 400; src: url(data:application/font-woff; charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA) } :root { --swiper-theme-color: #007aff } .swiper { list-style: none; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0; position: relative; z-index: 1 } .swiper-vertical>.swiper-wrapper { flex-direction: column } .swiper-wrapper { box-sizing: content-box; display: flex; height: 100%; position: relative; transition-property: transform; width: 100%; z-index: 1 } .swiper-android .swiper-slide, .swiper-wrapper { transform: translateZ(0) } .swiper-pointer-events { touch-action: pan-y } .swiper-pointer-events.swiper-vertical { touch-action: pan-x } .swiper-slide { flex-shrink: 0; height: 100%; position: relative; transition-property: transform; width: 100% } .swiper-slide-invisible-blank { visibility: hidden } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height } .swiper-backface-hidden .swiper-slide { backface-visibility: hidden; transform: translateZ(0) } .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper { transform-style: preserve-3d } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 10 } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, .15) } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent) } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent) } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent) } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent) } .swiper-css-mode>.swiper-wrapper { -ms-overflow-style: none; overflow: auto; scrollbar-width: none } .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { display: none } .swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start } .swiper-horizontal.swiper-css-mode>.swiper-wrapper { scroll-snap-type: x mandatory } .swiper-vertical.swiper-css-mode>.swiper-wrapper { scroll-snap-type: y mandatory } .swiper-centered>.swiper-wrapper:before { content: ""; flex-shrink: 0; order: 9999 } .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before) } .swiper-centered.swiper-horizontal>.swiper-wrapper:before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) } .swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before) } .swiper-centered.swiper-vertical>.swiper-wrapper:before { height: var(--swiper-centered-offset-after); min-width: 1px; width: 100% } .swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0) } .swiper-virtual.swiper-css-mode .swiper-wrapper:after { content: ""; left: 0; pointer-events: none; position: absolute; top: 0 } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after { height: 1px; width: var(--swiper-virtual-size) } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after { height: var(--swiper-virtual-size); width: 1px } :root { --swiper-navigation-size: 44px } .swiper-button-next, .swiper-button-prev { align-items: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); cursor: pointer; display: flex; height: var(--swiper-navigation-size); justify-content: center; margin-top: calc(0px - var(--swiper-navigation-size)/2); position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/44*27); z-index: 10 } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { cursor: auto; opacity: .35; pointer-events: none } .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { cursor: auto; opacity: 0; pointer-events: none } .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); font-variant: normal; letter-spacing: 0; line-height: 1; text-transform: none !important } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev" } .swiper-button-next, .swiper-rtl .swiper-button-prev { left: auto; right: 10px } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next" } .swiper-button-lock { display: none } .swiper-pagination { position: absolute; text-align: center; transform: translateZ(0); transition: opacity .3s; z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-pagination-disabled>.swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100% } .swiper-pagination-bullets-dynamic { font-size: 0; overflow: hidden } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { position: relative; transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33) } .swiper-pagination-bullet { background: var(--swiper-pagination-bullet-inactive-color, #000); border-radius: 50%; display: inline-block; height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); opacity: var(--swiper-pagination-bullet-inactive-opacity, .2); width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)) } button.swiper-pagination-bullet { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; box-shadow: none; margin: 0; padding: 0 } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet:only-child { display: none !important } .swiper-pagination-bullet-active { background: var(--swiper-pagination-color, var(--swiper-theme-color)); opacity: var(--swiper-pagination-bullet-opacity, 1) } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0, -50%, 0) } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { display: block; margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0 } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: transform .2s, top .2s } .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translate(-50%); white-space: nowrap } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform .2s, left .2s } .swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform .2s, right .2s } .swiper-pagination-progressbar { background: rgba(0, 0, 0, .25); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); height: 100%; left: 0; position: absolute; top: 0; transform: scale(0); transform-origin: left top; width: 100% } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top } .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { height: 4px; left: 0; top: 0; width: 100% } .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical>.swiper-pagination-progressbar { height: 100%; left: 0; top: 0; width: 4px } .swiper-pagination-lock { display: none } .swiper-scrollbar { background: rgba(0, 0, 0, .1); border-radius: 10px; position: relative; -ms-touch-action: none } .swiper-scrollbar-disabled>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important } .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { bottom: 3px; height: 5px; left: 1%; position: absolute; width: 98%; z-index: 50 } .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical>.swiper-scrollbar { height: 98%; position: absolute; right: 3px; top: 1%; width: 5px; z-index: 50 } .swiper-scrollbar-drag { background: rgba(0, 0, 0, .5); border-radius: 10px; height: 100%; left: 0; position: relative; top: 0; width: 100% } .swiper-scrollbar-cursor-drag { cursor: move } .swiper-scrollbar-lock { display: none } .swiper-zoom-container { align-items: center; display: flex; height: 100%; justify-content: center; text-align: center; width: 100% } .swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg { max-height: 100%; max-width: 100%; -o-object-fit: contain; object-fit: contain } .swiper-slide-zoomed { cursor: move } .swiper-lazy-preloader { border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top: 4px solid transparent; box-sizing: border-box; height: 42px; left: 50%; margin-left: -21px; margin-top: -21px; position: absolute; top: 50%; transform-origin: 50%; width: 42px; z-index: 10 } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader { animation: swiper-preloader-spin 1s linear infinite } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff } .swiper-lazy-preloader-black { --swiper-preloader-color: #000 } @keyframes swiper-preloader-spin { 0% { transform: rotate(0) } to { transform: rotate(1turn) } } .swiper .swiper-notification { left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; z-index: -1000 } .swiper-free-mode>.swiper-wrapper { margin: 0 auto; transition-timing-function: ease-out } .swiper-grid>.swiper-wrapper { flex-wrap: wrap } .swiper-grid-column>.swiper-wrapper { flex-direction: column; flex-wrap: wrap } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-cube { overflow: visible } .swiper-cube .swiper-slide { backface-visibility: hidden; height: 100%; pointer-events: none; transform-origin: 0 0; visibility: hidden; width: 100%; z-index: 1 } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0 } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next+.swiper-slide, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible } .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top { backface-visibility: hidden; z-index: 0 } .swiper-cube .swiper-cube-shadow { bottom: 0; height: 100%; left: 0; opacity: .6; position: absolute; width: 100%; z-index: 0 } .swiper-cube .swiper-cube-shadow:before { background: #000; bottom: 0; content: ""; filter: blur(50px); left: 0; position: absolute; right: 0; top: 0 } .swiper-flip { overflow: visible } .swiper-flip .swiper-slide { backface-visibility: hidden; pointer-events: none; z-index: 1 } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top { backface-visibility: hidden; z-index: 0 } .swiper-creative .swiper-slide { backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height } .swiper-cards { overflow: visible } .swiper-cards .swiper-slide { backface-visibility: hidden; overflow: hidden; transform-origin: center bottom } .arrivals { margin-bottom: 30px } .arrivals .title { align-items: center; display: flex; font-size: 30px; justify-content: space-between } .arrivals .title a { color: #4066b8; font-size: 14px; font-style: oblique; font-weight: 400 } .arrivals .title a:hover { text-decoration: underline } @media screen and (max-width:1024px){ .arrivals .title { font-size: 20px } } .arrivals .cot .swiper-slide { background-color: #fff; border-radius: 8px; height: 280px } .arrivals .cot .swiper-slide, .arrivals .cot .swiper-slide .item { align-items: center; display: flex; flex-direction: column; width: 100% } .arrivals .cot .swiper-slide .item { justify-content: center; padding: 0 25px } .arrivals .cot .swiper-slide .item .img { height: 120px; margin: 20px 0; width: 120px } .arrivals .cot .swiper-slide .item .partno { color: #333; font-size: 14px; font-weight: 700; height: 30px } .arrivals .cot .swiper-slide .item .price { color: #c80000; font-size: 14px; margin-bottom: 10px } .arrivals .cot .swiper-slide .item .stock { height: 26px } .arrivals .cot .swiper-slide .btn { text-align: center; width: 80% } .arrivals .cot .next, .arrivals .cot .prev { background-color: #3333331a; pointer-events: auto; transition: all .3s } .arrivals .cot .next:after, .arrivals .cot .prev:after { color: #666; font-size: 16px } .arrivals .cot .next:hover, .arrivals .cot .prev:hover { background-color: #3333 } .arrivals .cot .prev { border-radius: 0 6px 6px 0; left: 0 } .arrivals .cot .next { border-radius: 6px 0 0 6px; right: 0 } .arrivals .cot .swiper-scrollbar { background-color: #fff; height: 8px; opacity: 1; width: 100% } .arrivals .cot .swiper-scrollbar-drag { background-color: #4066b8 } .arrivals .cot .swiper-horizontal>.swiper-scrollbar { height: 8px; left: 0; width: 100% } .hotSaleParts { margin-bottom: 30px } .hotSaleParts title { display: block; font-size: 30px } .hotSaleParts .item { background-color: #fff; border-radius: 6px; display: flex; height: 412px; position: relative; width: 100% } .hotSaleParts .item .imgBox { height: 100%; position: relative; width: 260px } .hotSaleParts .item .swiperBox { border-radius: 6px; overflow: hidden } .hotSaleParts .item .swiperBox .swiper-pagination-bullet { background-color: #fff; border-radius: 7px; height: 10px; margin: 0 8px; width: 10px } .hotSaleParts .item .swiperBox .swiper-pagination-bullet-active { background-color: #fff; box-shadow: 0 0 0 5px #fff3 } .hotSaleParts .item .swiperBox .slide>a { height: 100%; position: relative; width: 100% } .hotSaleParts .item .itemBox { display: flex; flex: 1; flex-wrap: wrap; height: 100% } .hotSaleParts .item .itemBox .partSlide { height: 100%; width: 100% } .hotSaleParts .item .itemBox .partSlide .partbox { display: flex; flex-wrap: wrap; height: 100%; width: 100% } .hotSaleParts .item .itemBox .partSlide .partbox>div { border: 1px solid hsla(0, 0%, 83%, .3); border-radius: 6px; height: 50%; transform: scale(.95); transition: all .3s; width: 20% } .hotSaleParts .item .itemBox .partSlide .partbox>div>a { align-items: center; display: flex; flex-direction: column; height: 100%; padding: 40px 30px 20px; position: relative; width: 100% } .hotSaleParts .item .itemBox .partSlide .partbox>div>a .img { height: 80px; margin-bottom: 20px; width: 80px } .hotSaleParts .item .itemBox .partSlide .partbox>div>a b { color: #333; font-size: 14px; font-weight: 400; margin-bottom: 8px } .hotSaleParts .item .itemBox .partSlide .partbox>div>a p { color: #999; font-size: 14px } .hotSaleParts .item .itemBox .partSlide .partbox>div>a .escd { height: 25px; position: absolute; right: 10px; top: 10px } @media screen and (max-width:1024px){ .hotSaleParts title { font-size: 20px } .hotSaleParts .item { height: unset } .hotSaleParts .item .iconfont, .hotSaleParts .item .imgBox { display: none } .hotSaleParts .item ul li { width: 50% } } .supplier { margin-bottom: 30px } .supplier .cot { display: flex; height: 276px } .supplier .cot .imgBox { margin-right: 12px; width: unset } @media screen and (max-width:1024px){ .supplier .cot .imgBox { display: none } .supplier .cot { padding: 5px 0 } } .supplier .cot .item { align-items: center; background-color: #fff; border: 1px solid hsla(0, 0%, 83%, .3); border-radius: 6px; display: flex; flex-direction: column; height: 100%; justify-content: space-between; overflow: hidden; padding: 10px 5px; position: relative; transition: all .3s } .supplier .cot .item:hover { box-shadow: 0 0 15px -7px #ccc } @media screen and (max-width:1024px){ .supplier .cot .item { padding: 20px 5px } } .supplier .cot .item .logo { width: 120px } .supplier .cot .item .img { height: unset; width: 150px } .supplier .cot .item p { color: #afafaf; font-size: 14px; height: 70px; padding-top: 15px; text-align: center } .supplier .cot .item p span { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: ellipsis } @media screen and (max-width:1024px){ .supplier .cot .item p { height: 55px; padding-top: 0 } } .supplier .cot .next, .supplier .cot .prev { background-color: #3333331a; transition: all .3s } .supplier .cot .next:after, .supplier .cot .prev:after { color: #666; font-size: 16px } .supplier .cot .next:hover, .supplier .cot .prev:hover { background-color: #3333 } .supplier .cot .prev { border-radius: 0 6px 6px 0; left: 0 } .supplier .cot .next { border-radius: 6px 0 0 6px; right: 0 } .popuManu { margin-bottom: 30px } .popuManu title { display: block; font-size: 30px } .popuManu ul { background-color: #fff; border-radius: 6px; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100% } .popuManu ul li { height: 120px; transition: all .3s; width: 216px } .popuManu ul li:hover { box-shadow: -2px 2px 9px #0000001a } .popuManu ul li a { align-items: center; display: flex; height: 100%; justify-content: center; width: 100% } .popuManu ul li a img { width: 70% } @media screen and (max-width:1024px){ .popuManu title { font-size: 20px } .popuManu ul li { width: 33.33% } .popuManu ul li a img { width: 90% } } .recParts { margin-bottom: 30px } .recParts title { display: block; font-size: 30px } @media screen and (max-width:1024px){ .recParts title { font-size: 20px } } .recParts ul { background-color: #fff; border-radius: 6px; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100% } .recParts ul li { border: 1px solid hsla(0, 0%, 83%, .3); border-radius: 6px; transform: scale(.95); transition: all .3s; width: 16.6% } @media screen and (max-width:1024px){ .recParts ul li { width: 50% } } .recParts ul li a { align-items: center; display: flex; flex-direction: column; height: 100%; padding: 40px 30px 20px; position: relative; width: 100% } .recParts ul li a img { height: unset; margin-bottom: 40px; width: 80px } .recParts ul li a .img { height: 80px; margin-bottom: 10px; width: 80px } .recParts ul li a b { color: #333; font-weight: 400; margin-bottom: 8px } .recParts ul li a p { color: #999; font-size: 14px } .recParts ul li a .escd { height: 25px; position: absolute; right: 10px; top: 10px } .recParts ul li:hover { box-shadow: -2px 2px 9px #0000001a } .centerBanner { border-radius: 6px; height: 150px; margin-bottom: 30px; overflow: hidden; width: 100% } .centerBanner a, .centerBanner a img { height: 100%; width: 100% } @media screen and (max-width:1024px){ .centerBanner { height: 60px } } .theBlogs { margin-bottom: 30px } .theBlogs .title { align-items: center; display: flex; font-size: 30px; justify-content: space-between; } .theBlogs .title a { color: #4066b8; font-size: 14px; font-style: oblique; font-weight: 400 } .theBlogs .title a:hover { text-decoration: underline } @media screen and (max-width:1024px){ .theBlogs .title { font-size: 20px } } .theBlogs ul { display: flex } .theBlogs ul li { background-color: #fff; border-radius: 6px; flex: 1; height: 300px; overflow: hidden; transition: all .3s } .theBlogs ul li:hover { box-shadow: -2px 2px 9px #0000001a } .theBlogs ul li+li { margin-left: 20px } .theBlogs ul li a { flex-direction: column; height: 100%; padding: 20px 16px; width: 100% } .theBlogs ul li a, .theBlogs ul li a div { display: flex; justify-content: space-between } .theBlogs ul li a div { align-items: center } .theBlogs ul li a div .iconfont { color: #fea531; font-size: 18px } .theBlogs ul li a b { color: #333; display: block; font-size: 14px; font-weight: 400; height: 40px; line-height: 20px; overflow: hidden; position: relative } .theBlogs ul li a b:after { background-color: #4066b8; bottom: -6px; content: ""; display: block; height: 2px; left: 0; position: absolute; width: 30px } .theBlogs ul li a img { border-radius: 6px; height: 167px; width: 100% } @media screen and (max-width:1024px){ .theBlogs { margin-bottom: 10px } .theBlogs title { font-size: 20px } .theBlogs ul { flex-wrap: wrap } .theBlogs ul li { flex: unset; margin-bottom: 10px; margin-left: 0 !important; width: 100% } } .thePosts { margin-bottom: 30px } .thePosts .title { align-items: center; display: flex; font-size: 30px; justify-content: space-between } .thePosts .title a { color: #4066b8; font-size: 14px; font-style: oblique; font-weight: 400 } .thePosts .title a:hover { text-decoration: underline } @media screen and (max-width:1024px){ .thePosts .title { font-size: 20px } } .thePosts ul { display: flex; flex-wrap: wrap; justify-content: space-between } .thePosts ul li { background-color: #fff; border-radius: 6px; height: 140px; margin-bottom: 16px; transition: all .3s; width: 634px } .thePosts ul li:hover { box-shadow: -2px 2px 9px #0000001a } .thePosts ul li a { display: flex; height: 100%; padding: 20px; width: 100% } .thePosts ul li a .img { align-items: center; background-color: #fff; border-radius: 8px; display: flex; height: 100%; justify-content: center; margin-right: 16px; width: 166px } .thePosts ul li a .img img { height: 80% } .thePosts ul li a .cot { display: flex; flex: 1; flex-direction: column; height: 100%; justify-content: space-between } .thePosts ul li a .cot b { color: #333; font-size: 14px; font-weight: 400 } .thePosts ul li a .cot p { -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #999; display: -webkit-box; height: 40px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-all } .thePosts ul li a .cot span { color: #4066b8 } @media screen and (max-width:1024px){ .thePosts title { font-size: 20px } .thePosts ul li { height: 120px; width: 100% } .thePosts ul li a { padding: 10px } .thePosts ul li a .img { width: 100px } .thePosts ul li a .img img { width: 80px } } .partNumber { margin-bottom: 30px } .partNumber title { display: block; font-size: 30px } .partNumber .cot { background-color: #fff; border-radius: 6px; padding: 20px 50px; width: 100% } .partNumber .cot div { border-bottom: 1px solid #d4d4d4; display: flex; justify-content: center; margin-bottom: 20px } .partNumber .cot div p { cursor: pointer; margin: 0 50px; padding-bottom: 10px; position: relative } .partNumber .cot div p.active:after { background-color: #4066b8; bottom: 0; content: ""; height: 2px; left: 50%; position: absolute; transform: translate(-50%); width: 47px } .partNumber .cot ul { display: flex; flex-wrap: wrap; width: 100% } .partNumber .cot ul li { margin-bottom: 16px; padding-right: 20px; width: 20% } .partNumber .cot ul li.compare { width: 50% } .partNumber .cot ul li a:hover { color: #4066b8 } @media screen and (max-width:1024px){ .partNumber title { font-size: 20px } .partNumber .cot { padding: 20px 10px } .partNumber .cot div { justify-content: space-around } .partNumber .cot div p { margin: 0 } .partNumber .cot ul li { width: 50% } .partNumber .cot ul li.compare { width: 100% } } .indexes { background-color: #fff; border-radius: 6px; justify-content: space-between; padding: 14px 20px } .indexes, .indexes a { align-items: center; display: flex } .indexes a { border-radius: 50%; height: 28px; justify-content: center; transition: all .3s; width: 28px } .indexes a:hover { background-color: #4066b8; color: #fff } @media screen and (max-width:1024px){ .indexes { flex-wrap: wrap; justify-content: flex-start } .indexes span { align-items: center; display: flex; justify-content: center; width: 56px } } .messageBox { left: 50%; position: fixed; top: 5vh; transform: translate(-50%); z-index: 100000 } .messageBox .message { border-radius: 4px; box-shadow: 0 0 15px -7px #ccc; display: flex; max-width: 1000px; opacity: 1; overflow: hidden; z-index: 111 } .messageBox .message.success { background-color: #0fbc5e } .messageBox .message.error { background-color: #c80000 } .messageBox .message.warning { background-color: #ff6221 } .messageBox .message.default { background-color: #f6f8fc } .messageBox .message .iconfont { align-items: center; color: #fff; display: flex; font-size: 20px; height: 40px; justify-content: center; margin-right: 10px; width: 40px } .messageBox .message .iconfont.iconsuccess { background-color: #0fbc5e } .messageBox .message .iconfont.iconerror { background-color: #c80000 } .messageBox .message .iconfont.iconWarning { background-color: #ff6221 } .messageBox .message .iconfont.iconinfo- { background-color: #f6f8fc } .messageBox .message span { align-items: center; color: #fff; display: flex; font-size: 16px; height: 40px; padding: 0 40px 0 30px } @media screen and (max-width:1024px){ .messageBox .message span { font-size: 12px } } @media screen and (max-width:800px){ .messageBox .message { width: 80vw } .messageBox .message span { flex: 1 } } .zoomIn { animation: zoomIn-716cc739 .3s } .zoomOut { animation: zoomOut-716cc739 .3s } @keyframes zoomIn-716cc739 { 0% { opacity: 0 } to { opacity: 1 } } @keyframes zoomOut-716cc739 { 0% { opacity: 1 } to { opacity: 0 } } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height } .swiper-backface-hidden .swiper-slide { backface-visibility: hidden; transform: translateZ(0) } .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper { transform-style: preserve-3d } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 10 } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, .15) } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent) } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent) } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent) } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent) } .swiper-css-mode>.swiper-wrapper { -ms-overflow-style: none; overflow: auto; scrollbar-width: none } .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { display: none } .swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start } .swiper-horizontal.swiper-css-mode>.swiper-wrapper { scroll-snap-type: x mandatory } .swiper-vertical.swiper-css-mode>.swiper-wrapper { scroll-snap-type: y mandatory } .swiper-centered>.swiper-wrapper:before { content: ""; flex-shrink: 0; order: 9999 } .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before) } .swiper-centered.swiper-horizontal>.swiper-wrapper:before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) } .swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before) } .swiper-centered.swiper-vertical>.swiper-wrapper:before { height: var(--swiper-centered-offset-after); min-width: 1px; width: 100% } .swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center } .swiper-pagination { position: absolute; text-align: center; transform: translateZ(0); transition: opacity .3s; z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-pagination-disabled>.swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100% } .swiper-pagination-bullets-dynamic { font-size: 0; overflow: hidden } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { position: relative; transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33) } .swiper-pagination-bullet { background: var(--swiper-pagination-bullet-inactive-color, #000); border-radius: 50%; display: inline-block; height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); opacity: var(--swiper-pagination-bullet-inactive-opacity, .2); width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)) } button.swiper-pagination-bullet { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; box-shadow: none; margin: 0; padding: 0 } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet:only-child { display: none !important } .swiper-pagination-bullet-active { background: var(--swiper-pagination-color, var(--swiper-theme-color)); opacity: var(--swiper-pagination-bullet-opacity, 1) } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0, -50%, 0) } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { display: block; margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0 } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: transform .2s, top .2s } .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translate(-50%); white-space: nowrap } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform .2s, left .2s } .swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform .2s, right .2s } .swiper-pagination-progressbar { background: rgba(0, 0, 0, .25); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); height: 100%; left: 0; position: absolute; top: 0; transform: scale(0); transform-origin: left top; width: 100% } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top } .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { height: 4px; left: 0; top: 0; width: 100% } .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical>.swiper-pagination-progressbar { height: 100%; left: 0; top: 0; width: 4px } .swiper-pagination-lock { display: none } :root { --swiper-navigation-size: 44px } .swiper-button-next, .swiper-button-prev { align-items: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); cursor: pointer; display: flex; height: var(--swiper-navigation-size); justify-content: center; margin-top: calc(0px - var(--swiper-navigation-size)/2); position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/44*27); z-index: 10 } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { cursor: auto; opacity: .35; pointer-events: none } .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { cursor: auto; opacity: 0; pointer-events: none } .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); font-variant: normal; letter-spacing: 0; line-height: 1; text-transform: none !important } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev" } .swiper-button-next, .swiper-rtl .swiper-button-prev { left: auto; right: 10px } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next" } .swiper-button-lock { display: none } .swiper-grid>.swiper-wrapper { flex-wrap: wrap } .swiper-grid-column>.swiper-wrapper { flex-direction: column; flex-wrap: wrap } @font-face { font-family: inter-tight; src: url(https://res..com/static/InterTight-VariableFont_wght.ttf) } @font-face { font-family:; src: url(https://res..com/static/Koulen-Regular.ttf) } a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, input, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var { box-sizing: border-box; margin: 0; padding: 0 } address, cite, dfn, em, i, var { font-style: normal } body { color: #333; font-family: Helvetica, Arial, Tahoma, sans-serif; font-size: 14px; letter-spacing: .2px } button{ font-family: Arial,Helvetica, Tahoma, sans-serif; } table { border-collapse: collapse; border-spacing: 0 } h1, h2, h3, h4, h5, h6, th { font-size: 100%; font-weight: 400 } button, input, select, textarea { font-size: 100% } button { cursor: pointer } input { background-color: transparent } fieldset, img { border: 0 } a, img { -webkit-touch-callout: none } a, a:active, a:focus, a:hover, a:visited { color: #666; text-decoration: none } input[type=password], input[type=text], textarea { word-wrap: break-word; -webkit-appearance: none; background: #fff; outline: 0; resize: none; white-space: pre-wrap } ol, ul { list-style: none } :focus { outline: none } .clearfix { content: ""; display: block; overflow: hidden } .clear, .clearfix { clear: both } .fl { float: left } .fr { float: right } #__layout, #__layout>div, #body, body, html { height: 100%; width: 100% } *, :after, :before { box-sizing: border-box; margin: 0 } button { border: none; outline: none } .w { margin: 0 auto; width: 1300px } .l1 { -webkit-line-clamp: 1 } .l1, .l2 { -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-all } .l2 { -webkit-line-clamp: 2 } .font- { font-family: } #app { background-color: #f6f8fc } .error { align-items: center; background-color: #fff; background-color: #1f73d3; display: flex; height: 100vh; justify-content: center; width: 100vw } .error img { margin-right: 30px; width: 400px } .error div { color: #fff } .error div h3 { font-size: 34px; font-weight: 700; margin-bottom: 40px } .error div p { font-size: 17px; font-weight: 700; line-height: 30px; margin: 16px 0 80px; width: 500px } .error div div { display: flex } .error div div a { align-items: center; background-color: #fff; border-radius: 4px; color: #ff5b35; display: flex; font-size: 25px; font-weight: 700; height: 50px; justify-content: center; min-width: 200px; padding: 0 30px } .error div div a+a { background: #ff5b35; color: #fff; margin-left: 20px } @media screen and (max-width:1024px){ .error { flex-direction: column; padding: 0 20px } .error img { margin-bottom: 20px; margin-right: unset; width: 200px } .error div h3 { font-size: 20px; margin-bottom: 20px; text-align: center } .error div p { font-size: 14px; margin-bottom: 40px; width: unset } .error div div { justify-content: space-around } .error div div a { font-size: 14px; height: 40px; min-width: unset } } .error { align-items: center; background-color: #fff; display: flex; height: 100vh; justify-content: center; width: 100vw } .error img { margin-left: 40px; width: 700px } @media screen and (max-width:1024px){ .error { flex-direction: column; padding: 0 20px } .error img { width: 300px } } .termly-styles-module-primary-c2e506 { color: #4672ff } .termly-styles-module-secondary-dbc415 { color: #00c999 } .termly-styles-module-dangerous-ca78b3 { color: #ed7474 } .termly-styles-module-root-c82f71 { font-size: .875em; font-family: Roboto, "Open Sans", Helvetica, Arial } .termly-styles-module-root-c82f71.termly-styles-module-disabled-f3b5ea { opacity: .5; cursor: not-allowed } .termly-styles-module-root-c82f71:not(.termly-styles-module-disabled-f3b5ea) { cursor: pointer } .termly-styles-module-outline-af2c17 { border-width: 1px; border-radius: 3px; border-style: solid; background: #fff; padding: .625em 2em } .termly-styles-module-outline-af2c17.termly-styles-module-primary-c2e506 { border-color: #4672ff } .termly-styles-module-outline-af2c17.termly-styles-module-secondary-dbc415 { border-color: #00c999 } .termly-styles-module-outline-af2c17.termly-styles-module-dangerous-ca78b3 { border-color: #ed7474 } .termly-styles-module-solid-f10ff4 { border-width: 1px; border-radius: 3px; border-style: solid; color: #fff; padding: .625em 2em } .termly-styles-module-solid-f10ff4.termly-styles-module-primary-c2e506 { border-color: #4672ff; background: #4672ff } .termly-styles-module-solid-f10ff4.termly-styles-module-secondary-dbc415 { border-color: #00c999; background: #00c999 } .termly-styles-module-solid-f10ff4.termly-styles-module-dangerous-ca78b3 { border-color: #ed7474; background: #ed7474 } .termly-styles-module-text-eeb886 { border: none; background: rgba(0, 0, 0, 0); padding: 0 } .termly-styles-module-root-fb0fcd { display: flex; font-family: Roboto, "Open Sans", Helvetica, Arial; gap: 8px } .termly-styles-module-root-fb0fcd.termly-styles-module-disabled-c85e61 { cursor: not-allowed; opacity: .5 } .termly-styles-module-root-fb0fcd:not(.termly-styles-module-disabled-c85e61) { cursor: pointer } .termly-styles-module-checkbox-c81b5f { width: 18px; height: 18px; border: solid 1px #e1e3e6; border-radius: 3px; background-image: linear-gradient(to top, #f2f4fb, #feffff); display: flex; flex: 0 0 18px } .termly-styles-module-checkbox-c81b5f.termly-styles-module-checked-d34356 { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSI+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwJSIgeTE9IjUwJSIgeTI9IjUwJSI+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMEE2REEiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNkY4OUVEIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxwYXRoIGZpbGw9InVybCgjYSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTYgMTl2LTNINHY1aDEwdi0ySDZ6IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgLTEwLjYwNyAxNC42MjEpIi8+Cjwvc3ZnPgo=), linear-gradient(to top, #f2f4fb, #feffff); background-repeat: no-repeat; background-position: center } .termly-styles-module-input-ccc581 { display: none } .termly-styles-module-label-dfa1a4 { display: flex; align-items: center } .termly-styles-module-root-c60f9c { border-radius: 3px; border: 1px solid #ced4da; color: #363840; font-size: inherit; line-height: 1.429; padding: .714em 1.0714em } .termly-styles-module-root-d2a96c { height: 100% } .termly-styles-module-spinner-d9d2d6 { animation: termly-styles-module-rotate-d0c2b2 2s linear infinite; z-index: 2; position: relative; width: 100%; height: 100%; display: flex } .termly-styles-module-spinner-d9d2d6 .termly-styles-module-path-da4f9d { stroke: var(--loading-circle-color, hsl(210, 70%, 75%)); stroke-linecap: round; animation: termly-styles-module-dash-c05540 1.5s ease-in-out infinite } @keyframes termly-styles-module-rotate-d0c2b2 { 100% { transform: rotate(360deg) } } @keyframes termly-styles-module-dash-c05540 { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0 } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35 } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124 } } .termly-styles-module-root-a6c3b2 { display: flex; font-family: Roboto, "Open Sans", Helvetica, Arial; gap: 5px } .termly-styles-module-root-a6c3b2.termly-styles-module-disabled-fda258 { cursor: not-allowed } .termly-styles-module-root-a6c3b2:not(.termly-styles-module-disabled-fda258) { cursor: pointer } .termly-styles-module-input-da74ea { display: none } .termly-styles-module-radio-a94319 { width: 15px; height: 15px; border-radius: 9px; border: 1px solid #ced0da; background-image: linear-gradient(to top, #f2f4fb, #feffff); display: flex; justify-content: center; align-items: center } .termly-styles-module-radio-a94319.termly-styles-module-checked-e5d8eb .termly-styles-module-radio__inner-d76ba3 { width: 7px; height: 7px; border-radius: 4px; background-color: #239eeb } .termly-styles-module-radio-a94319.termly-styles-module-disabled-fda258 { opacity: .5 } .termly-styles-module-root-a0ea7f { display: flex; flex-direction: row; font-size: 1rem; font-family: Roboto, "Open Sans", Helvetica, Arial; background: #e6e7e8; align-items: center; justify-content: center; container: holder/size; flex: 1; height: 100% } .termly-styles-module-shadowBox-fff901 { background: var(--termly-theme-background-color); border-radius: 5px; border: 1px solid #ddd; box-shadow: 0px 0px 15px rgba(0, 0, 0, .15); display: inline-flex; flex-direction: column; max-width: 32em; min-width: min-content; padding: 2em; gap: 1em } .termly-styles-module-title-b31e43 { color: var(--termly-theme-color); font-size: 1.25em; font-weight: 500; line-height: 1 } .termly-styles-module-content-f5be7c { color: var(--termly-theme-color); font-size: var(--termly-theme-font-size); line-height: 1.75 } .termly-styles-module-buttons-e4250e { display: flex; justify-content: center; gap: .5em } .termly-styles-module-buttons-e4250e>* { font-weight: 600; font-size: var(--termly-theme-font-size); width: 100% } .termly-styles-module-buttons-e4250e .termly-styles-module-acceptButton-b04512 { background: var(--termly-theme-button-background-color); border-color: var(--termly-theme-button-background-color) !important; color: var(--termly-theme-button-text-color) !important } .termly-styles-module-buttons-e4250e .termly-styles-module-prefsButton-c1a9b2 { background: rgba(0, 0, 0, 0); border-color: var(--termly-theme-color) !important; color: var(--termly-theme-color) !important } @container holder (height < 155px){ .termly-styles-module-shadowBox-fff901 { padding: 6cqb; display: inline-flex; gap: .5em } .termly-styles-module-acceptButton-b04512 { width: auto !important; padding: 3cqb 6cqb; font-size: 9cqb } .termly-styles-module-content-f5be7c { font-size: 9cqb } .termly-styles-module-prefsButton-c1a9b2, .termly-styles-module-toAllowContent-f3c279, .termly-styles-module-title-b31e43 { display: none } } @container holder (width < 197px){ .termly-styles-module-buttons-e4250e .termly-styles-module-prefsButton-c1a9b2 { display: none } } .banner .swiper { width: 100%; height: 100%; } .banner .swiper-slide {width:700px;height:410px; text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; transition: 300ms; transform: scale(0.3); } /*.banner .swiper-slide a{width:400px;height:200px;}*/ .banner .swiper-slide-active,.banner .swiper-slide-duplicate-active { transform: scale(1); } .banner .swiper-button-prev,.banner .swiper-button-next { z-index: 999 !important; }