:root {
--icon-arrow: url('data:image/svg+xml,');
--icon-arrow-black: url('data:image/svg+xml,');
--icon-hook: url('data:image/svg+xml,');
--icon-hook-muted: url('data:image/svg+xml,');
--icon-coil-hook: url('data:image/svg+xml,');
--icon-coil-hook-black: url('data:image/svg+xml,');
--icon-coil-hook-white: url('data:image/svg+xml,');
--icon-coil-hook-outline-black: url('data:image/svg+xml,');
--icon-arrow-right: url('data:image/svg+xml,');
--icon-arrow-right-black: url('data:image/svg+xml,');
--icon-eye-show: url('data:image/svg+xml,');
--icon-eye-hide: url('data:image/svg+xml,');
}
/* flag */
.flag-icon {
display: inline-block;
border-radius: 100%;
overflow: hidden;
width: 16px;
height: 16px;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left center;
vertical-align: middle;
}
.flag-global {
border-radius: 0;
background-image: url("data:image/svg+xml;utf8,");
}
.flag-us {
background-image: url("data:image/svg+xml;utf8,");
}
.flag-es {
background-position: center;
background-image: url("data:image/svg+xml;utf8,");
}
.flag-it {
background-image: url("data:image/svg+xml;utf8,");
}
.flag-fr {
background-image: url("data:image/svg+xml;utf8,");
}
.flag-de {
background-image: url("data:image/svg+xml;utf8,");
}
img {
max-width: 100%;
}
.svg-filter-primary {
position: relative;
left: -80px;
filter: drop-shadow(#00EEC3 80px 0);
}
.dropdown-toggle {
position: relative;
padding-right: 1.725rem !important;
border: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
outline: none;
}
.dropdown-toggle::after {
border: 0;
margin: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
width: 1rem;
height: 1rem;
position: absolute;
top: 50%;
right: .25rem;
margin-top: -.5rem;
background-image: var(--icon-arrow);
background-repeat: no-repeat;
background-position: center;
}
.dropdown-toggle.arrow-black::after {
background-image: var(--icon-arrow-black);
}
.dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(180deg);
}
.breadcrumb a {
text-decoration: none;
color: var(--bs-dark);
}
.fw-100 {
font-weight: 100 !important;
}
.fw-200 {
font-weight: 200 !important;
}
.fw-300 {
font-weight: 300 !important;
}
.fw-400 {
font-weight: 400 !important;
}
.fw-500 {
font-weight: 500 !important;
}
.fw-600 {
font-weight: 600 !important;
}
.fw-700 {
font-weight: 700 !important;
}
.fw-800 {
font-weight: 800 !important;
}
.fw-900 {
font-weight: 800 !important;
}
.text-overflow {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.text-overflow-2,
.text-overflow-3,
.text-overflow-4,
.text-overflow-5 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.text-overflow-3 {
-webkit-line-clamp: 3;
}
.text-overflow-4 {
-webkit-line-clamp: 4;
}
.text-overflow-5 {
-webkit-line-clamp: 5;
}
.img-height-overflow {
height: 150px;
overflow: hidden;
display: block;
}
.link-hover-primary:hover {
color: var(--bs-primary) !important;
}
.link-hover-white:hover {
color: #fff !important;
}
.link-border-hover:hover {
border-color: var(--bs-primary) !important;
}
.btn-arrow img,
.btn-arrow svg {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-arrow:hover img,
.btn-arrow:focus img,
.btn-arrow:hover svg,
.btn-arrow:focus svg {
margin-left: .25rem;
}
.swiper {
--swiper-theme-color: var(--bs-primary); /* 设置Swiper风格 */
--swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
--swiper-navigation-size: 20px; /* 设置按钮大小 */
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
background-color: var(--bs-dark);
border-radius: 100px;
width: 40px;
height: 40px;
padding: 10px;
text-align: center;
}
body {
position: relative;
}
.header {
position: sticky;
top: 0;
z-index: 10005;
}
.header .navbar-collapse {
position: relative;
}
.header .navbar-brand {
padding: .975rem 0;
line-height: 1;
}
.header .navbar-brand img {
height: 26px;
}
.header .navbar-login a {
text-decoration: none;
color: #fff;
}
.header .navbar-nav .dropdown-item {
padding-top: .25rem;
padding-bottom: .25rem;
}
.header .navbar-nav .dropdown-item:hover,
.header .navbar-nav .dropdown-item:focus {
background-color: inherit;
color: var(--bs-primary);
}
.header .navbar-nav .dropdown-menu {
border-radius: .5rem;
}
.header .navbar-nav .dropdown-menu-features ul:first-child {
border-right: 1px solid rgba(0, 0, 0, 0.07);
}
.header .navbar-nav .dropdown-menu-features .dropdown-item {
padding: .75rem;
}
.header .navbar-nav .btn-more {
color: var(--bs-dark);
}
.header .navbar-nav-login .btn-login {
color: #fff;
text-decoration: none;
}
.searchbox {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: var(--bs-dark);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.searchbox.active {
display: block;
opacity: 1;
}
.searchbox form {
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
padding: 1rem;
}
.searchbox label {
display: flex;
align-items: center;
background-color: #fff;
border-radius: 10rem;;
padding: 0 1rem;
margin-right: .5rem;
width: 50%;
max-width: 600px;
}
.searchbox form input,
.searchbox form button {
display: block;
border: 0;
background-color: #fff;
}
.searchbox form input {
width: 100%;
padding: .5rem;
}
.searchbox form input:focus,
.searchbox form button:focus {
box-shadow: none;
}
@media (min-width: 992px) {
.header .navbar-login {
display: none;
}
.header .navbar-brand img {
height: 32px;
}
.header .navbar-nav .nav-item .nav-link {
padding: 1.125rem;
border-top: solid 2px transparent;
border-bottom: solid 2px transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.header .navbar-nav .nav-item .nav-link:hover,
.header .navbar-nav .nav-item .nav-link[aria-expanded="true"] {
border-bottom: solid 2px var(--bs-primary);
background-color: rgba(255, 255, 255, 0.07);
}
.header .navbar-nav .dropdown-menu { /*margin-top: .75rem;*/
top: calc(100% + .75rem);
padding: 1rem 1.5rem;
border: 0;
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .2);
}
.header .navbar-nav .dropdown-menu::after {
display: block;
content: '';
position: absolute;
top: -.5rem;
left: 3rem;
border-bottom: .5rem solid #fff;
border-right: .5rem solid transparent;
border-top: 0;
border-left: .5rem solid transparent;
width: 0;
height: 0;
}
.header .navbar-nav .dropdown-menu::before {
display: block;
content: '';
position: absolute;
top: -1rem;
left: 0;
width: 100%;
height: 1rem;
}
.header .navbar-nav .dropdown-item {
padding-left: 0;
padding-right: 0;
padding-top: .5rem;
padding-bottom: .5rem;
}
.header .navbar-nav .dropdown-menu-features {
min-width: 32rem;
padding: 1rem;
}
.searchbox {
display: none;
}
}
@media (max-width: 992px) {
.header .navbar {
position: relative;
z-index: 5;
}
.header .navbar-toggler.active .navbar-toggler-icon {
background-image: url('data:image/svg+xml,');
}
.header .navbar-collapse {
display: none;
opacity: 0;
position: absolute;
z-index: -1;
top: 100%;
left: 0;
width: 100%;
background-color: var(--bs-dark);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
transition: all 0.3s;
}
.header .navbar-collapse.show {
display: block;
opacity: 1;
z-index: 5;
}
.header .navbar-nav .nav-item {
border-bottom: solid 1px rgba(255, 255, 255, 0.25);
padding: .5rem 1.25rem;
}
.header .navbar-nav .dropdown-menu {
background-color: inherit;
}
.header .navbar-nav .dropdown-menu a {
color: rgba(var(--bs-white-rgb), .8);
padding: .5rem 0;
}
.header .navbar-nav .dropdown-menu .btn-more {
color: var(--bs-primary);
}
.header .navbar-nav .dropdown-menu .dropdown-divider {
display: none;
}
.header .navbar-nav .dropdown-menu-features .dropdown-item {
padding: .5rem .25rem;
}
}
.footer {
font-size: .875rem;
}
.footer a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
}
.footer .dropdown-menu a {
color: #000;
}
.footer .dropdown-menu a:hover {
background-color: inherit;
}
.footer a:hover {
color: var(--bs-primary);
}
.footer .footer-brand {
font-size: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
padding: 1.5rem 0 1rem;
}
.footer .footer-menu {
padding: 3rem 0 0 0;
}
.footer .footer-menu .title {
font-weight: 400;
padding: .5rem 0;
font-size: 1rem;
}
.footer .footer-menu ul li {
font-size: .875rem;
padding: .5rem 0;
font-weight: 300;
opacity: .8;
}
.footer .dropdown-menu {
font-size: .875rem;
border-radius: .5rem;
}
.footer .dropdown-menu .dropdown-item {
padding: .5rem 1rem;
}
.footer .footer-payment {
margin: 2rem 0 1rem;
}
.footer .footer-language {
margin: 1rem 0;
}
.footer .footer-othernav {
padding: 1rem 0 3rem;
}
@media (min-width: 992px) {
.footer .footer-brand {
border-right: 1px solid rgba(255, 255, 255, 0.25);
border-bottom: 0;
padding: 3rem 1rem 3rem 0;
text-align: left;
}
}
@media (max-width: 991px) {
.footer .footer-payment {
margin: 0 0 1rem 0;
}
.footer .footer-othernav {
padding: .5rem 0 1rem;
margin-left: calc(-0.833 * var(--bs-gutter-x));
margin-right: calc(-0.833 * var(--bs-gutter-x));
margin-bottom: 1.5rem; /*border-bottom: 1px solid rgba(255, 255, 255, 0.25);*/
}
}
@media (max-width: 767px) {
.footer .footer-brand {
border-bottom: 0;
}
.footer .footer-menu {
padding: 0;
}
.footer .footer-menu .title {
padding: .5rem 0;
position: relative;
}
.footer .footer-menu .title:after {
display: block;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
transition: all 0.3s;
width: 1rem;
height: 1rem;
position: absolute;
top: 50%;
right: .25rem;
margin-top: -.5rem;
background-image: var(--icon-arrow);
background-repeat: no-repeat;
background-position: center;
}
.footer .footer-menu .title.active:after {
transform: rotate(180deg);
}
/* .footer .footer-menu ul {display: none;} */
.footer .footer-menu ul li {
padding: .5rem 0;
}
.footer .footer-menu .active + ul {
display: none;
}
.footer .footer-language {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.25);
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
margin: .5rem 0;
padding: .5rem 0;
}
.footer .footer-language .btn {
display: block;
text-align: left;
width: 100%;
}
.footer .footer-language .dropdown-menu {
width: 100%;
}
.footer .footer-othernav {
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
}
.gradual-color-1 {
background-image: linear-gradient(180deg, #37CFFF 0%, #0D57C6 100.07%, #0F5ED6 100.07%);
}
.gradual-color-2 {
background-image: linear-gradient(337.67deg, #64FBD7 -5.08%, #2F37FF 100.1%);
}
.gradual-color-3 {
background-image: linear-gradient(128.49deg, #3378FF 0%, #9442FE 100%);
}
.gradual-color-4 {
background-image: linear-gradient(128.49deg, #CB5DFF 0%, #1D41BE 100%);
}
.gradual-color-5 {
background-image: linear-gradient(308.79deg, #03FED1 -5.03%, #00E0EE 34.44%, #5480FC 89.1%);
}
.gradual-color-6 {
background-image: linear-gradient(147.94deg, #37C3FF -3.42%, #720FD6 67.08%, #0D57C6 147.04%);
}
.gradual-color-7 {
background-image: linear-gradient(309.29deg, #9C1EBC -1.31%, #FF7676 100%);
}
.gradual-color-text-1 { /*background: linear-gradient(308.49deg, #CB2C2C 0%, #FF9432 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;*/
color: #FF9432;
}
.gradual-color-text-2 { /*background: linear-gradient(128.49deg, #CB5DFF 0%, #1D41BE 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;*/
color: #CB5DFF;
}
.bg-img {
background-image: url('data:image/svg+xml,');
background-position: center;
background-repeat: repeat;
}
.bg-primary-muted {
--bs-bg-opacity: .05;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
.icon-star:after,
.icon-star-f:after {
display: block;
content: '';
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 1.5rem;
height: 1.5rem;
}
.icon-star:after {
background-image: url('data:image/svg+xml,');
}
.icon-star-f:after {
background-image: url('data:image/svg+xml,');
}
.list-hook,
.list-hook-muted,
.list-coil-hook,
.list-coil-hook-black,
.list-coil-hook-white,
.list-coil-hook-outline-black {
padding: 0;
list-style: none;
}
.list-hook li,
.list-hook-muted li,
.list-coil-hook li,
.list-coil-hook-black li,
.list-coil-hook-white li,
.list-coil-hook-outline-black li {
padding-left: 1.5rem;
position: relative;
}
.list-hook li::before,
.list-hook-muted li::before,
.list-coil-hook li::before,
.list-coil-hook-black li::before,
.list-coil-hook-white li::before,
.list-coil-hook-outline-black li::before {
display: block;
content: '';
width: 1rem;
height: 1rem;
position: absolute;
top: .25rem;
left: 0;
background-repeat: no-repeat;
background-position: 0 0;
}
.list-hook li::before {
background-image: var(--icon-hook);
/* list-style:disc outside var(--icon-coil-hook); */
}
.list-hook li.icon-muted::before,
.list-hook-muted li::before {
background-image: var(--icon-hook-muted);
/* list-style:disc outside var(--icon-coil-hook); */
}
.list-coil-hook li::before {
background-image: var(--icon-coil-hook);
/* list-style:disc outside var(--icon-coil-hook); */
}
.list-coil-hook-black li::before {
background-image: var(--icon-coil-hook-black);
/* list-style:disc outside var(--icon-coil-hook-black); */
}
.list-coil-hook-white li::before {
background-image: var(--icon-coil-hook-white);
/* list-style:disc outside var(--icon-coil-hook-black); */
}
.list-coil-hook-outline-black li::before {
background-image: var(--icon-coil-hook-outline-black);
/* list-style:disc outside var(--icon-coil-hook-outline-black); */
}
.list-disc,
ol ul {
list-style-type: disc;
}
hr.line-dashed {
height: 0;
background-color: initial;
border-bottom: dashed 1px var(--bs-dark);
}
.scrollshow {
opacity: 0;
bottom: -100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.scrollshow.show-top {
bottom: auto;
top: -100%;
}
.scrollshow.show-left {
bottom: auto;
left: -100%;
}
.scrollshow.show-right {
bottom: auto;
right: -100%;
}
.scrollshow.active {
bottom: 0;
opacity: 1;
}
.scrollshow.show-top.active {
bottom: auto;
top: 0;
}
.scrollshow.show-left.active {
bottom: 0;
left: 0;
}
.scrollshow.show-right.active {
bottom: 0;
right: 0;
}
/* totop */
.totop {
display: none;
position: fixed;
z-index: 1000;
right: 1%;
bottom: 80px;
width: 40px;
height: 40px;
background-color: var(--bs-dark);
border: solid 1px var(--bs-primary)
}
.totop::after {
display: block;
content: '';
width: 50%;
height: 50%;
margin: 25%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url('data:image/svg+xml,');
}
.totop.active {
display: block;
}
/* index */
.step-start .step-arrow {
display: none;
}
@media (min-width: 768px) {
.step-start .step-img {
position: relative;
}
.step-start .step-arrow {
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 80%;
transform: translate(-52%, -75%);
}
}
@media (min-width: 992px) {
.display-5 {
font-size: 2.25rem;
}
.step-start .step-arrow {
width: auto;
}
}
.tabs-style {
border: solid 2px var(--bs-primary);
border-radius: .5rem;
}
.tabs-style .nav {
flex-wrap: nowrap;
text-align: center;
}
.tabs-style .nav li {
width: 100%;
border-left: solid 1px var(--bs-primary);
border-bottom: solid 1px var(--bs-primary);
}
.tabs-style .nav li:first-child {
border-left: 0;
}
.tabs-style .nav .nav-link {
padding: 1.5rem .5rem;
font-weight: bold;
color: var(--bs-gray);
height: 100%;
font-size: .875rem;
}
.tabs-style .nav .nav-link svg {
color: var(--bs-primary);
}
.tabs-style .nav .active {
background-color: var(--bs-primary);
color: var(--bs-dark);
}
.tabs-style .nav .active svg {
color: var(--bs-dark);
}
.tabs-style .tab-pane {
padding: 1rem;
}
@media (min-width: 992px) {
.tabs-style .tab-pane {
padding: 2rem;
}
}
@media (max-width: 767px) {
.tabs-style .nav .nav-link {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem .25rem;
}
}
/* faq */
.tabs-style2 .nav {
flex-wrap: nowrap;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 4px;
}
.tabs-style2 .nav li {
width: 100%;
}
.tabs-style2 .nav .nav-link {
height: 100%;
padding: 2rem 0 2rem .5rem;
font-size: 1.125rem;
font-weight: bold;
color: var(--bs-gray);
opacity: .6;
display: flex;
align-items: center;
border-bottom: 6px solid transparent;
}
.tabs-style2 .nav .nav-link:after {
display: block;
content: '';
width: 1rem;
height: 100%;
border-right: 1px solid rgba(0, 0, 0, 0.125);
}
.tabs-style2 .nav li:last-child .nav-link {
padding-right: 1rem;
}
.tabs-style2 .nav li:last-child .nav-link:after {
display: none;
}
.tabs-style2 .nav .nav-link span {
width: 100%;
display: flex;
align-items: center;
flex-flow: column;
}
.tabs-style2 .nav .nav-link svg {
color: var(--bs-primary);
}
.tabs-style2 .nav .nav-link.active,
.tabs-style2 .nav .nav-link:hover {
opacity: 1;
color: var(--bs-dark);
border-color: var(--bs-primary);
}
@media (max-width: 767px) {
.tabs-style2 .nav {
overflow-x: auto;
}
.tabs-style2 .nav li {
min-width: 13rem;
}
.tabs-style2 .nav .nav-link {
font-size: 1rem;
}
}
/* article */
.side-sticky {
position: sticky;
top: 80px;
}
.article-side-menu {
--bs-border-width: 2px;
background-color: #fff;
border: solid var(--bs-border-width) var(--bs-primary);
border-radius: .5rem;
}
.article-side-menu a {
color: #4f4f4f;
}
.article-side-menu a:hover {
color: var(--bs-primary);
}
.article-side-menu .title {
font-size: 1.25rem;
font-weight: bold;
padding: 1rem;
text-align: center;
border-bottom: solid 1px rgba(var(--bs-dark-rgb), .1);
}
.article-side-menu ul {
margin: 0;
padding: 0;
}
.article-side-menu ul li {
padding: 0;
margin: 0;
}
.article-side-menu ul li a {
display: block;
text-decoration: none;
background-repeat: no-repeat;
background-position: 1rem 1rem;
background-image: var(--icon-coil-hook-outline-black);
padding: .75rem .5rem .75rem 2.5rem;
border-bottom: solid 1px rgba(var(--bs-dark-rgb), .1);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.article-side-menu ul li a:hover,
.article-side-menu ul li a.active {
background-image: var(--icon-coil-hook);
color: #000;
}
.article-side-menu ul.list-icon li a {
background: none;
padding: 1rem;
}
.article-side-menu ul.list-icon li a:hover,
.article-side-menu ul.list-icon li a.active {
--bs-bg-opacity: .1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
}
.article-side-menu ul.list-icon li a.active {
font-weight: bold;
}
@media (min-width: 992px) {
.article-side-menu .title {
padding: 1rem 1.5rem;
}
.article-side-menu ul.list-icon li a {
padding: 1rem 1.5rem;
}
}
@media (max-width: 767px) {
.side-sticky {
position: relative;
top: 0;
}
.article-header .h1 {
font-size: 2rem;
}
.article-side {
margin-left: calc(-0.3325 * var(--bs-gutter-x));
margin-right: calc(-0.3325 * var(--bs-gutter-x));
}
.article-side-menu {
position: relative;
top: 0;
border: 0;
}
.article-side-menu .title {
border-left: 0;
position: relative;
z-index: 2;
border-bottom: solid 1px rgba(var(--bs-dark-rgb), .1);
padding: 1.5rem 0;
padding-left: 65px;
background-color: #fff;
text-align: left;
}
.article-side-menu .title::before {
display: block;
content: '';
background: url('data:image/svg+xml,') no-repeat 0 0;
position: absolute;
left: 25px;
top: 50%;
margin-top: -16px;
width: 32px;
height: 32px;
}
.article-side-menu .title:after {
display: block;
content: '';
background: var(--icon-arrow-right-black) no-repeat 0 0;
background-size: contain;
position: absolute;
right: 25px;
top: 50%;
margin-top: -10px;
width: 20px;
height: 20px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.article-side-menu.active .title:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.article-side-menu .wrap {
display: none;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.article-side-menu.active .wrap {
display: block;
}
.article-side-menu ul {
display: none;
position: absolute;
z-index: 2;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 40px 40px rgba(0, 0, 0, 0.3);
border-bottom: solid 2px var(--bs-primary);
}
.article-side-menu ul li {
margin: 0;
}
.article-side-menu ul li:first-child {
border-top: 0;
}
.article-side-menu.active ul {
display: block;
}
.article-side-menu ul li a {
background: none;
padding: 1rem 2rem;
}
.article-side-menu ul.list-icon li a {
padding: 1rem 2rem;
}
.article-side-menu ul li a:hover,
.article-side-menu ul li a.active {
background: none;
}
}
.article-right-side a {
text-decoration: none;
color: var(--bs-dark);
}
.article-right-side .name {
padding-bottom: 1rem;
font-size: 1.25rem;
}
.article-right-side ol {
margin: 0;
}
.article-right-side ol li {
position: relative;
padding: 0 1.5rem;
}
.article-right-side ol li a {
display: block;
border-top: 1px solid rgba(167, 103, 103, 0.07);
padding: .75rem 0;
}
.article-right-side ol li:hover::before {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: var(--bs-primary);
}
@media (min-width: 992px) {
.article-right-side-wrap {
position: absolute;
top: 0;
left: calc(100% + 3rem);
height: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.article-right-side {
position: sticky;
top: 80px;
max-width: 260px;
min-width: 250px;
}
}
@media (min-width: 1360px) {
.article-right-side-wrap {
left: calc(100% + 1rem);
}
}
@media (min-width: 1440px) {
.article-right-side-wrap {
left: calc(100% + 3rem);
}
}
@media (min-width: 768px) {
.also-list li a {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.box-sign-up {
border-top-width: 4px !important;
border-top-color: var(--bs-primary) !important;
}
.form-control-email {
background: url("data:image/svg+xml,") no-repeat #fff .75rem center !important;
padding-left: 2.75rem;
font-size: .875rem;
line-height: 28px;
color: #ADADAD;
}
.form-control-password {
background: url("data:image/svg+xml,") no-repeat #fff .75rem center;
padding-left: 2.75rem;
font-size: .875rem;
line-height: 28px;
color: #ADADAD;
}
.input-feedback .invalid-feedback,
.input-feedback .valid-feedback {
position: absolute;
padding: 0 1rem;
}
.pop-topics {
height: 100%;
}
.pop-topics .img-icon {
background-repeat: no-repeat;
background-position: bottom right;
padding: 1.5rem;
padding-bottom: 5rem;
height: 100%;
min-height: 300px;
}
.pop-topics a:hover {
color: inherit;
}
@media (min-width: 768px) and (max-width: 992px) {
.pop-topics .img-icon {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (max-width: 767px) {
.pop-topics {
min-height: 345px;
}
}
.articlenote {
padding: 1.5rem;
border: 1px dashed #7A99B8;
background: #DCFFF9;
overflow: hidden;
margin-bottom: 1.875rem;
}
.articlenote span {
font-weight: bold;
}
.article-cont .h1,
.article-cont .h2,
.article-cont .h3,
.article-cont .h4,
.article-cont .h5,
.article-cont .h6,
.article-cont h1,
.article-cont h2,
.article-cont h3,
.article-cont h4,
.article-cont h5,
.article-cont h6 {
margin-bottom: 1.875rem;
}
.article-cont ul,
.article-cont ul,
.article-cont ol,
.article-cont p,
.article-cont table {
margin-bottom: 1.875rem;
}
.article-cont p {
line-height: 1.8;
}
.article-cont li {
margin-bottom: .875rem;
}
.article-cont h2 {
font-size: 1.75rem;
}
.article-cont h3 {
font-size: 1.375rem;
}
.article-cont h4 {
font-size: 1.25rem;
}
.article-cont h5 {
font-size: 1.125rem;
}
.article-cont h6 {
font-size: 1rem;
}
.article-cont .h2 {
font-size: 1.75rem;
}
.article-cont .h3 {
font-size: 1.375rem;
}
.article-cont .h4 {
font-size: 1.25rem;
}
.article-cont .h5 {
font-size: 1.125rem;
}
.article-cont .h6 {
font-size: 1rem;
}
@media (min-width: 992px) {
.article-cont h2 {
font-size: 1.75rem;
}
.article-cont .h2 {
font-size: 1.75rem;
}
}
@media (max-width: 767px) {
.article-cont {
padding-top: 1.75rem;
}
}
.think-icon a:hover,
.link-border:hover {
border-color: var(--bs-primary) !important;
}
.think-icon .col {
width: 11rem;
max-width: 11rem;
min-width: 11rem;
}
@media (min-width: 992px) {
.article-also .swiper .swiper-pagination {
display: none;
}
}
@media (max-width: 991px) {
.article-also .swiper .swiper-button-next,
.article-also .swiper .swiper-button-prev {
display: none;
}
}
/* feartures */
.features-side-sticky {
position: sticky;
top: 80px;
}
.side-features-menu {
--bs-border-color: var(--bs-primary);
--bs-border-radius: .5rem;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
.side-features-menu a {
color: var(--bs-dark);
text-decoration: none;
}
.side-features-menu .title {
font-size: 1.25rem;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #dee2e6;
padding: .875rem;
}
.side-features-menu .menu-list {
padding: 0 1.5rem;
}
.side-features-menu .menu-list .name {
font-weight: bold;
margin: 1rem .5rem .5rem;
}
.side-features-menu .menu-list .item {
border-top: 1px solid #dee2e6;
}
.side-features-menu .menu-list .item:first-child {
border-top: 0;
}
.side-features-menu .menu-list ul {
font-size: .875rem;
margin-top: 1rem;
border-radius: 0;
display: block;
}
.side-features-menu .menu-list .name + ul {
margin-top: 0;
}
.side-features-menu .menu-list ul li img {
width: 18px;
margin-right: .25rem;
}
.side-features-menu .menu-list ul li a {
display: block;
padding: .5rem 1.5rem;
margin: 0 -1.5rem;
border-left: solid 3px transparent;
}
.side-features-menu .menu-list ul li a:hover,
.side-features-menu .menu-list ul li a.active {
--bs-bg-opacity: .05;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
border-left-color: var(--bs-primary);
}
.side-features-menu .menu-list ul li a.active {
font-weight: bold;
}
.side-features-menu .menu-list .list-line {
font-size: 1rem;
}
.side-features-menu .menu-list .list-line li a {
padding: 1.25rem 1.5rem 0;
width: auto;
}
.side-features-menu .menu-list .list-line li a:after {
display: block;
content: '';
width: 100%;
height: 1.25rem;
border-bottom: solid 1px #dee2e6;
}
.side-features-menu .menu-list .list-line li a:hover,
.side-features-menu .menu-list .list-line li a.active {
background-color: initial;
}
@media (min-width: 768px) and (max-width: 991px) {
.side-features-menu .menu-list {
padding: 0 1rem;
}
.side-features-menu .menu-list ul li a {
margin: 0 -1rem;
padding: .5rem 1rem;
}
}
@media (max-width: 767px) {
.features-side {
position: relative;
top: 0;
margin-left: calc(-0.3325 * var(--bs-gutter-x));
margin-right: calc(-0.3325 * var(--bs-gutter-x));
}
.side-features-menu {
background-color: #fff;
border: 0;
}
.side-features-menu .title {
position: relative;
z-index: 2;
border-top: solid 1px #dee2e6;
border-bottom: solid 1px #dee2e6;
padding: 1.5rem 25px;
background-color: #fff;
text-align: left;
}
.side-features-menu .title:after {
display: block;
content: '';
background: var(--icon-arrow-right-black) no-repeat 0 0;
background-size: contain;
position: absolute;
right: 25px;
top: 50%;
margin-top: -10px;
width: 20px;
height: 20px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.side-features-menu.active .title:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.side-features-menu .wrap {
display: none;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.side-features-menu.active .wrap {
display: block;
}
.side-features-menu .menu-list .name {
margin: 1rem 0 .5rem;
}
.side-features-menu .menu-list {
display: none;
position: absolute;
z-index: 2;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
}
.side-features-menu.active .menu-list {
display: block;
}
}
/* buy */
.buy-switch-menu {
width: 100%;
margin: 0 auto;
position: relative;
}
.buy-switch-menu .btn-group {
width: 100%;
}
.buy-switch-menu .btn {
flex-basis: 50%;
display: flex;
align-items: center;
justify-content: center;
border-radius: .5rem;
}
.buy-switch-menu .btn.active,
.buy-switch-menu .btn:hover {
color: var(--bs-dark);
}
.buy-switch-menu .tips-arrow {
position: absolute;
top: -10px;
white-space: nowrap;
display: none;
align-items: flex-start;
font-size: .625rem;
color: #18191F;
}
.buy-switch-menu .tips-arrow.ta-right {
left: 100%;
padding: 0 0 0 80px;
}
.buy-switch-menu .tips-arrow.ta-left {
right: 100%;
top: 0;
padding: 0 70px 0 0;
}
.buy-switch-menu .tips-arrow img {
margin: 8px 0;
position: absolute;
top: 0;
left: 0;
}
.buy-switch-menu .tips-arrow.ta-left img {
left: auto;
right: 0
}
.buy-switch-cont .form-check-input:focus {
box-shadow: none
}
@media (min-width: 576px) {
.buy-switch-menu {
max-width: 400px;
}
}
@media (min-width: 992px) {
.buy-switch-menu .tips-arrow {
display: flex;
}
}
/* search */
.side-listlink {
border-top: solid 4px var(--bs-primary) !important;
padding: .5rem 1rem;
color: var(--bs-primary);
}
.side-listlink ul {
margin: 0;
}
.side-listlink ul li a {
display: block;
border-bottom: solid 1px #dee2e6;
padding: .875rem 1rem .875rem 0;
text-decoration: none;
color: var(--bs-dark);
position: relative;
}
.side-listlink ul li a:hover {
color: var(--bs-primary);
}
.side-listlink ul li:last-child a {
border-bottom: 0;
}
.side-listlink ul li a:after {
display: block;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
width: 1rem;
height: 1rem;
position: absolute;
top: 50%;
right: 0;
margin-top: -0.5rem;
background-image: var(--icon-arrow-right);
background-repeat: no-repeat;
background-position: center;
}
/* cookies */
.toast-accept-cookies {
width: 100%;
padding: 1rem;
position: fixed;
z-index: 10;
bottom: 50px;
left: 0;
}
.toast-accept-cookies .toast {
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
@media (min-width: 768px) {
.toast-accept-cookies {
bottom: 0;
}
}
/* sign */
.sign-wrap {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.sign-wrap .sign-language .btn {
vertical-align: middle;
display: inline-flex;
align-items: center;
}
.sign-wrap .sign-language .btn span {
padding-left: .25rem;
}
.sign-wrap .sign-language .dropdown-menu.show {
display: flex;
flex-wrap: wrap;
border-color: var(--bs-primary);
border-radius: .5rem;
font-size: .875rem;
max-width: 15rem;
padding: .5rem;
}
.sign-wrap .sign-language .dropdown-menu li {
width: 50%;
}
.sign-wrap .sign-language .dropdown-menu li a:hover {
background-color: var(--bs-primary);
}
.sign-wrap .sign-con {
min-height: 100vh;
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.sign-wrap .brand {
color: #fff;
display: none;
}
.sign-wrap .brand img {
width: 11.25rem;
}
.sign-wrap .brand p {
margin-top: 1rem;
}
.sign-box {
width: 100%;
min-height: 100vh;
background-color: #fff;
padding: 1.5rem;
font-size: .875rem;
}
.sign-box .box-brand {
margin: 1.75rem 0;
}
.sign-box .box-brand img {
width: 105px;
}
.sign-box .column {
font-size: 1.25rem;
font-weight: 600;
margin: 1.5rem 0;
}
.sign-box .title {
font-size: 1.25rem;
font-weight: bold;
margin: 1.5rem 0;
}
.sign-box .info {
font-size: .875rem;
margin: 1.5rem 0;
color: #9f9f9f;
}
.sign-box .box-top {
text-align: right;
}
.sign-box .box-cont {
padding: 1.5rem 0;
}
.sign-box .box-cont .btn {
display: block;
width: 100%;
font-weight: bold;
border-radius: 10rem;
padding: .487rem .75rem;
font-size: .9375rem;
box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), .5);
}
.sign-box .box-form .form-label {
font-size: .875rem;
}
.sign-box .box-form .form-control {
font-size: .8125rem;
padding: .705rem .705rem;
border-radius: .5rem;
color: #000927;
}
.sign-box .box-form .form-control:focus {
box-shadow: none;
border: solid 1.5px var(--bs-primary);
}
.sign-box .box-form .form-control.is-invalid {
background-image: none;
}
.sign-box .box-form .password-input {
position: relative;
}
.sign-box .box-form .password-input .password-eye {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
display: block;
width: 40px;
height: 40px;
background: var(--icon-eye-show) no-repeat center;
background-size: 50%;
cursor: pointer;
opacity: .2;
}
.sign-box .box-form .password-input .password-eye.active {
background-image: var(--icon-eye-hide);
}
.sign-box .box-form .password-input .password-eye:hover {
opacity: .6;
}
.sign-box .box-form .form-check {
font-size: .75rem;
}
.sign-box .other {
margin: 2.5rem 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
}
.sign-box .other a {
margin: .5rem 0;
padding: .25rem 0;
text-decoration: none;
}
.sign-box .other a:hover {
text-decoration: underline;
}
.sign-box .other .ps {
font-size: .75rem;
color: #9f9f9f;
margin-top: -.5rem;
}
.sign-box .select-dev {
margin: 0;
padding: 0;
list-style: none;
}
.sign-box .select-dev li {
padding: .875rem 0;
}
.sign-box .select-dev li label input {
opacity: 0;
}
.sign-box .select-dev li label {
display: flex;
align-items: center;
padding: 1rem 1.5rem;
border: solid 1px rgba(var(--bs-dark-rgb), .2);
border-radius: .75rem;
font-size: .875rem;
text-decoration: none;
color: var(--bs-dark);
cursor: pointer;
}
.sign-box .select-dev li label:hover {
border-color: var(--bs-primary);
}
.sign-box .select-dev li label.active {
border-color: var(--bs-primary);
position: relative;
}
.sign-box .select-dev li label.active:after {
display: block;
content: '';
width: 2rem;
height: 2rem;
position: absolute;
top: 50%;
right: 1.5rem;
transform: translateY(-50%);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2300EEC3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") no-repeat center;
background-size: cover;
}
.sign-box .select-dev li label span {
display: inline-block;
}
.sign-box .select-dev .icon {
background-color: #fff;
border-radius: 10rem;
width: 2.5rem;
height: 2.5rem;
padding: .5rem;
margin-right: 1.25rem;
}
.sign-box .select-dev .icon svg {
max-width: 100%;
max-height: 100%;
color: #14d05a;
}
.sign-box .select-dev .icon-android {
background-color: #d9f7e5;
}
.sign-box .select-dev .icon-android svg {
color: #14d05a;
}
.sign-box .select-dev .icon-ios {
background-color: #ebf0f5;
}
.sign-box .select-dev .icon-ios svg {
color: #4f75a7;
}
@media (min-width: 768px) {
.sign-box {
padding: 3rem;
margin: 2rem 0;
}
.sign-box .box-cont {
padding: 0;
}
.sign-box .select-dev li label {
padding: 1.5rem;
}
}
@media (min-width: 992px) {
.sign-wrap .brand {
display: block;
}
.sign-box {
width: 500px;
border-radius: 1.5rem;
min-height: auto;
padding: 1.5rem 3rem 3rem;
}
.sign-box .box-brand {
display: none;
}
.sign-box .column {
font-size: 1.5rem;
}
.sign-box .title {
font-size: 1.5rem;
}
.sign-box .box-cont .btn {
padding: .8rem .75rem;
}
}
.logo {
font-size: 24px;
color: #00EEC3;
font-weight: 700;
}