body {
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
font-size: 1rem;
color: #fff;
background-color: #1F1F1F;
font-family: "Roboto", sans-serif;
}
.dropdown-menu {
min-width: 260px;
background-color: #242424;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
a {
color: #767676;
font-size: 1rem;
}
a:hover {
color: #cdcdcd;
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5 {
color: #fff;
}
.h4 {
font-size: 1.2rem;
}
.whiteFont {
color: #fff;
}
.grayFont {
color: #858585!important
}
.grayDeepFont {
color: #717171!important
}
.balckFont {
color: #4c4c4c!important
}
.grayLightFont {
color: #cdcdcd;
}
.errorFont {
color: #c91f1f;
}
.orangeColor {
color: #ee8335;
}
.tableCustom {
color: #fff
}
.tableCustom>div {
padding: 20px;
}
.table-dark th,
.table-dark td,
.table-dark thead th {
border-color: #333333;
}
.table-dark thead {
background-color: #262626;
}
.table-dark.table-striped tbody tr:nth-of-type(even) {
background-color: #4a4a4a;
}
.table-dark.table-striped tbody tr:nth-of-type(odd) {
background-color: #333333;
}
.successFont {
color: #00b124;
}
.greenFont {
color: #76BC1B;
}
.blueFont {
color: #36b4e5;
}
.blackBgColor {
background-color: #000;
}
.whiteBgColor {
background-color: #fff;
}
.orangeBgColor {
background-color: #ee8335;
}
.yellowBgColor {
background-color: #ffc400;
}
.blueDeepBgColor {
background-color: #05729F;
}
.blueBgColor {
background-color: #36b4e5;
}
.grayBgColor {
background-color: #2F2F2F;
}
.grayDeepBgColor {
background-color: #242424;
}
.greenBtn {
color: #fff;
background-color: #4bafb7;
}
.blueBtn {
color: #fff;
background-color: #36b4e5;
}
.garyBtn {
color: #fff;
background-color: #989898;
}
.btn-light {
border: 0px;
}
.table {
color: #fff;
}
.colorPicker {
width: 280px;
margin: 0px auto;
}
.productColorImgWrap {
position: relative;
}
.productColorImg {
position: relative;
z-index: 4;
}
.newSilder {
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
.productTabMenu {
background-color: #333333;
}
.captchInput {
width: 304px;
margin: 0px auto;
}
.formBox {
background-color: #2F2F2F;
padding: 40px 20px;
box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 24px 0px;
}
.loadMore .loadMoreDetail.collapsing {
height: 3.4rem;
}
.grayHr {
border-top: 1px solid rgba(226, 226, 226, 0.1)!important;
}
.btn-file {
position: relative;
overflow: hidden;
}
.contactDetail,
.contactMap {
width: 50%;
padding: 20px;
}
.contactMap {
border-left: 1px solid #1b1b1b;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
background: red;
cursor: inherit;
display: block;
}
.file-input-label {
padding: 0px 10px;
display: table-cell;
color: #4c4c4c !important;
vertical-align: middle;
border: 1px solid #ddd;
border-radius: 4px;
}
.loadMore .loadMoreDetail.collapse:not(.show) {
display: block;
height: 4.1rem;
overflow: hidden;
}
.loadMore a.collapsed::after {
content: "More Detail ...";
}
.loadMore a:not(.collapsed)::after {
content: "Less Detail ...";
}
.supportForm {
background-color: #2f2f2f;
width: 60%;
margin: 40px auto;
padding: 40px 20px;
box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 24px 0px;
}
.table thead th {
padding-top: 40px;
vertical-align: bottom;
border-bottom: 2px solid #2b2b2b;
}
.table-hover tbody tr:hover {
color: #cdcdcd;
background-color: rgba(0, 0, 0, 0.075);
}
.table th,
.table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #252525;
}
.tab-contentDetail {
padding: 20px 35px;
}
.tabBtn {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
height: 100%;
display: flex;
background-color: #333333;
padding: 0 20px;
border: 1px solid #242424;
}
.tabBtn span {
vertical-align: middle;
}
.buyCompany {
color: #4c4c4c;
padding: 20px;
background-color: #fff;
}
.product__carousel {
display: block;
max-width: 700px;
margin: 1em auto 3em;
}
.product__carousel a {
display: block;
margin-bottom: 15px;
}
.product__carousel .gallery-top {
border: 1px solid #ebebeb;
border-radius: 3px;
margin-bottom: 5px;
}
.product__carousel .gallery-top .swiper-slide {
position: relative;
overflow: hidden;
}
.product__carousel .gallery-top .swiper-slide a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.product__carousel .gallery-top .swiper-slide a img {
width: 100%;
height: 100%;
object-fit: contain;
}
.product__carousel .gallery-top .swiper-slide .easyzoom-flyout img {
min-width: 100%;
min-height: 100%;
}
.product__carousel .swiper-button-next.swiper-button-white,
.product__carousel .swiper-button-prev.swiper-button-white {
color: #ff3720;
}
.product__carousel .gallery-thumbs .swiper-slide {
position: relative;
transition: border .15s linear;
border: 1px solid #ebebeb;
border-radius: 3px;
cursor: pointer;
overflow: hidden;
height: calc(100% - 2px);
}
.product__carousel .gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
border-color: #000;
}
.product__carousel .gallery-thumbs .swiper-slide img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
}
.cmsContent {
margin-top: 40px;
}
.tab-content {
background-color: #000;
padding: 40px 0px;
}
.tabBtn:hover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
background-color: #151515;
text-decoration: none;
}
.tabBtn.active {
color: #fff;
background-color: #717171;
}
.content-up {
margin-top: 0px !important;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.productTabTitle {
padding: 20px 35px;
}
.compareTitle {
background-color: #2F2F2F;
}
.compareTitle {
text-align: center;
padding: 10px 20px;
color: #fff;
}
.compareTd {
border: 1px solid #2f2f2f;
text-align: center;
color: #fff;
padding: 20px;
}
.csmContent {
min-height: 500px;
}
.custonBtn {
padding: 20px 10px;
width: 100%;
text-align: center;
border: 0px;
display: block;
}
.lang {
margin-top: 40px;
}
.lang a {
font-size: 0.8rem;
}
p {
color: #fff;
}
.table tr.active {
border: 2px solid #38bd14;
}
.rightMenu {
padding-right: 20px;
}
footer {
background-size: cover;
background-position: 50% 50%;
}
.footerLogo {
width: 200px;
}
.table-bordered thead th,
.table-bordered thead td {
border-bottom-width: 0px;
}
.newTab {
position: absolute;
bottom: 0;
height: 30px;
background: rgb(0, 0, 0);
background: linear-gradient(360deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
width: 100%;
}
.owl-dots {
text-align: center;
}
.owl-dots .owl-dot.active {
text-align: center;
background-color: #36b4e5;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
background: #cdcdcd;
width: 10px;
margin: 10px 6px;
border-radius: 50px;
height: 10px;
}
.card-title {
height: 48px;
display: -webkit-box;
font-size: 1.2rem;
font-weight: 600;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 24px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.searchWrap {
width: 166px;
position: relative;
}
.card-textAll {
color: #858585;
line-height: 24px;
}
.card-text {
color: #858585;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 24px;
}
.shardowBox {
box-shadow: 2px 5px 36px -14px hsla(0, 0%, 70%, 0.7);
}
.resourceCard {
padding: 25% 20px;
border-radius: 10px;
border: 1px dotted #4c4c4c;
}
.titlelineHeight {
line-height: 40px;
}
.iconList {
margin: 0;
padding: 0;
padding-left: 30px;
}
.iconList li {
position: relative;
padding: 6px 0px;
list-style: none;
}
.iconList i {
left: -26px;
top: 10px;
position: absolute;
}
.mainBtn {
background-color: #36b4e5;
color: #fff;
}
.tabMenu {
display: flex;
}
.tabMenu a {
margin-right: 1px;
padding: 20px;
color: #fff;
background-color: #cdcdcd;
}
.tabMenu a:hover {
text-decoration: none;
}
.annualTab {
font-size: 0.8rem;
padding: 10px;
color: #fff;
background-color: #1e2088;
}
.modal-body .close {
right: -8px;
top: -20px;
position: absolute;
background-color: #fff;
border-radius: 50px;
padding: 10px 15px;
opacity: 1;
box-shadow: 0 4px 25px -3px rgba(0, 0, 0, 0.2);
}
.modal-content {
border-radius: 10px;
border: 0 solid rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 25px -3px rgba(0, 0, 0, 0.2);
}
.modal-body {
padding: 20px;
}
.modal-footer {
justify-content: flex-start;
padding: 0 20px 20px;
border-top: 0 solid #dee2e6;
}
.modal {
background-color: rgba(255, 255, 255, 0.5);
}
.datetimepicker table {
margin: 10px;
}
.datetimepicker td,
.datetimepicker th {
padding: 5px;
}
.glyphicon-arrow-left::after {
content: "<";
}
.glyphicon-arrow-right::after {
content: ">";
}
.searchInput {
position: relative;
}
.fontUppercase {
text-transform: uppercase;
}
.floorPlan {
position: relative;
}
.zoomBtn {
color: #4c4c4c;
bottom: 10px;
right: 10px;
position: absolute;
padding: 6px 10px;
background-color: #fff;
border: 1px solid #cdcdcd;
border-radius: 50px;
}
.newsDate {
font-weight: 600;
color: #b8b8b8;
font-style: italic;
}
.serachIconBtn {
color: #cdcdcd;
position: absolute;
right: 22px;
top: 6px;
border: 0;
background: transparent;
}
ul.member {
padding-left: 30px;
}
ul.member li {
position: relative;
list-style: none;
line-height: 28px;
}
ul.member li i {
color: #cdcdcd;
position: absolute;
left: -26px;
top: 5px;
}
.sbutton {
color: #4bafb7;
padding: 5px 8px;
font-size: 0.8rem;
border-radius: 10px;
background-color: #fff;
border: 1px solid #4bafb7;
}
.productCrad {
display: block;
overflow: hidden;
position: relative;
padding: 10px;
text-align: center;
background-size: cover;
background-position: 50% 50%;
background-image: url(../images/product_bg.jpg);
}
.productCrad:hover {
background-image: url(../images/product_bga.jpg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.productCrad::after {
content: "";
top: 0;
opacity: 1;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.productCrad:hover::after {
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.productCradImg {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: scale(1, 1);
transform: scale(1, 1);
/* IE 9 */
transform: scale(1, 1);
/* Safari 和 Chrome */
transform: scale(1, 1);
/* Firefox */
transform: scale(1, 1);
/* Opera */
}
.productCrad:hover .productCradImg {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
/* IE 9 */
-webkit-transform: scale(1.05, 1.05);
/* Safari 和 Chrome */
-moz-transform: scale(1.05, 1.05);
/* Firefox */
-o-transform: scale(1.05, 1.05);
/* Opera */
}
.productCradTitle {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
color: #fff;
right: 0;
top: 40px;
text-align: center;
}
.productCradDetail {
padding: 10px 5px;
}
.productWrap {
margin-left: -10px;
margin-right: -10px;
}
.memberCard {
padding: 20px;
border: 1px solid #cdcdcd;
border-radius: 10px;
}
.tabContent {
padding: 30px;
border: 1px solid #cdcdcd;
}
.accordionWrap {
border-bottom: 1px dotted #cdcdcd;
}
.accordionTitle {
position: relative;
padding: 10px 20px;
cursor: pointer;
}
.accordionTitleBtn::before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 10px;
}
.roateIcon .accordionTitleBtn::before {
transform: rotate(90deg);
}
.accordionBody {
margin-bottom: 10px;
padding: 10px 20px;
}
.blueOutlineBtn {
color: #1e2088 !important;
border: 1px solid #1e2088 !important;
background-color: #fff;
}
.grayOutlineButton {
color: #4c4c4c !important;
border: 1px solid #cdcdcd !important;
background-color: #fff;
}
.tabMenu a.active {
background-color: #4bafb7;
}
.roateIcon .fa-stack {
transform: rotate(90deg);
}
.button {
padding: 10px 40px;
border-radius: 50px;
border: 0;
}
.button:hover,
.sbutton:hover {
opacity: 0.5;
}
.form-control::-webkit-input-placeholder {
color: #4c4c4c;
}
.roate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.buttonWrap {
margin: 50px 20px;
}
.centerRecaptcha {
width: 300px;
margin: 0px auto;
}
.hidden {
display: none;
}
.group {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dotted #cdcdcd;
}
.hide {
display: none;
}
.sildeDownIcon {
z-index: 100;
position: absolute;
/* position the top edge of the element at the middle of the parent */
left: 50%;
/* position the left edge of the element at the middle of the parent */
transform: translate(-50%, 0%);
bottom: 20px;
}
.mouse {
margin: 0px auto;
height: 44px;
width: 28px;
border-radius: 25px;
border: 2px solid #fff;
text-align: center;
}
.mouse:after {
display: inline-block;
height: 8px;
width: 8px;
background-color: #fff;
border-radius: 50%;
content: "";
-webkit-animation: scroll 1.3s ease-out infinite forwards;
-moz-animation: scroll 1.3s ease-out infinite forwards;
animation: scroll 1.3s ease-out infinite forwards;
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes scroll {
0% {
-moz-transform: translateY(0);
}
50% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
@keyframes scroll {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
.slick-slider .slick-prev,
.slick-slider .slick-next {
z-index: 100;
font-size: 2.5em;
height: 40px;
width: 40px;
margin-top: -20px;
color: #B7B7B7;
position: absolute;
top: 50%;
text-align: center;
color: #000;
opacity: .3;
transition: opacity .25s;
cursor: pointer;
}
.slick-slider .slick-prev:hover,
.slick-slider .slick-next:hover {
opacity: .65;
}
.slick-slider .slick-prev {
left: 0;
}
.i-prev::before {
font-style: initial;
color: #fff;
content: "\f060";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.i-next::before {
font-style: initial;
color: #fff;
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.slick-slider .slick-next {
right: 0;
}
#detail .product-images {
position: relative;
width: 100%;
margin: 0 auto;
padding: 20px;
}
#detail .product-images li,
#detail .product-images figure,
#detail .product-images a,
#detail .product-images img {
display: block;
outline: none;
border: none;
margin: 0px auto;
}
#detail .product-images .main-img-slider figure {
margin: 0 auto;
padding: 0 2em;
}
#detail .product-images .main-img-slider figure a {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
#detail .product-images .main-img-slider figure a img {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
#detail .product-images .thumb-nav {
margin: 0 auto;
padding: 20px 10px;
max-width: 600px;
}
#detail .product-images .thumb-nav.slick-slider .slick-prev,
#detail .product-images .thumb-nav.slick-slider .slick-next {
font-size: 1.2em;
height: 20px;
width: 26px;
margin-top: -10px;
}
#detail .product-images .thumb-nav.slick-slider .slick-prev {
margin-left: -30px;
}
#detail .product-images .thumb-nav.slick-slider .slick-next {
margin-right: -30px;
}
#detail .product-images .thumb-nav li {
display: block;
margin: 0 auto;
cursor: pointer;
}
.fullwidth {
width: 100% !important;
}
.productLogo {
margin: 0;
padding: 0;
margin-top: 40px;
}
.productLogo li {
margin-bottom: 20px;
padding-left: 10px;
display: inline-block;
}
#detail .product-images .thumb-nav li img {
display: block;
width: 100%;
margin: 0 auto;
border: 2px solid transparent;
-webkit-transition: border-color .25s;
-ms-transition: border-color .25s;
-moz-transition: border-color .25s;
transition: border-color .25s;
}
#detail .product-images .thumb-nav li:hover,
#detail .product-images .thumb-nav li:focus {
border-color: #999;
}
#detail .product-images .thumb-nav li.slick-current img {
border-color: #76bc1b;
}
.filterSideMenu .form-check,
.productBox .form-check {
padding-left: 0px;
}
.label-cbx {
user-select: none;
cursor: pointer;
margin-bottom: 0;
width: 100%;
position: relative;
}
.label-cbx input:checked+.checkbox {
border-color: #07f500;
}
.label-cbx input:checked+.checkbox svg path {
fill: #21551f;
}
.label-cbx input:checked+.checkbox svg polyline {
stroke-dashoffset: 0;
}
.label-cbx:hover .checkbox svg path {
stroke-dashoffset: 0;
}
.label-cbx .checkbox {
position: absolute;
top: 2px;
float: left;
margin-right: 8px;
width: 20px;
height: 20px;
border: 2px solid #C8CCD4;
border-radius: 3px;
}
.label-cbx .checkbox svg {
position: absolute;
top: -2px;
left: -2px;
}
.label-cbx .checkbox svg path {
fill: none;
stroke: #07f500;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 71px;
stroke-dashoffset: 71px;
transition: all 0.6s ease;
}
.label-cbx .checkbox svg polyline {
fill: none;
stroke: #FFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 18px;
stroke-dashoffset: 18px;
transition: all 0.3s ease;
}
.label-cbx>span {
padding: 0px !important;
pointer-events: none;
padding-left: 30px !important;
display: block!important;
vertical-align: middle;
}
.label-cbx>span::after,
.label-cbx>span::before {
display: none;
}
.cntr {
position: absolute;
top: 45%;
left: 0;
width: 100%;
text-align: center;
}
.invisible {
position: absolute;
z-index: -1;
width: 0;
height: 0;
opacity: 0;
}
.btn:hover {
color: #fff;
background-color: #76bb1b;
text-decoration: none;
}
.boxInDetail {
padding: 20% 20px;
margin: 20px;
background-color: #fff;
}
.productFiliter {
padding: 0;
margin-bottom: 20px;
box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 24px 0px;
}
.breathingEffect {
/* Chrome, Safari, Opera */
-webkit-animation-name: breathing;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: breathing;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes breathing {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.gradientEffect {
background: linear-gradient(45deg, #ff0000, #00eaff, #ffe400, #00ff12);
background-size: 800% 400%;
/* Chrome, Safari, Opera */
-webkit-animation-name: gradient;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Standard syntax */
animation-name: gradient;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes gradient {
0% {
background-position: 0% 80%;
}
50% {
background-position: 100% 20%;
}
100% {
background-position: 0% 80%;
}
}
.strobingEffect {
/* Chrome, Safari, Opera */
-webkit-animation-name: strobing;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: strobing;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes strobing {
0% {
opacity: 1;
}
30% {
opacity: 1;
}
50% {
opacity: 0;
}
70% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.productColor {
margin: 0px auto;
max-width: 725px;
position: relative;
line-height: 0;
}
#colorBg {
top: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.colorBtn {
background: transparent;
display: inline-block;
padding: 10px 20px;
margin: 10px 4px;
}
.colorPickerWrap {
width: 40%;
vertical-align: top;
}
.productBg {
background-size: cover;
background-position: 50% 50%;
}
.productColorWrap {
width: 766px;
margin: 0px auto;
vertical-align: top;
}
.arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arrow span {
display: block;
width: 30px;
height: 30px;
border-bottom: 5px solid #06A8FF;
border-right: 5px solid #06A8FF;
transform: rotate(225deg);
margin: 0px;
animation: animate 2s infinite;
}
.arrow span:nth-child(2) {
animation-delay: -0.2s;
}
.arrow span:nth-child(3) {
animation-delay: -0.4s;
}
@keyframes animate {
0% {
opacity: 0;
transform: rotate(225deg) translate(-20px, -20px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(225deg) translate(20px, 20px);
}
}
.upArrow01 {
z-index: 7;
left: 30%;
top: 18%;
position: absolute;
}
.upArrow02 {
z-index: 7;
left: 74%;
top: -3%;
position: absolute;
}
.fansImg01 {
width: 37%;
z-index: 3;
left: 15%;
top: 22%;
position: absolute;
}
.fansImg02 {
width: 37%;
z-index: 3;
right: 7%;
top: 0%;
position: absolute;
}
.blueGradient:hover {
text-decoration: none;
border-image-source: linear-gradient(to left, #00a84f, #27ffc0);
}
.blueGradient {
border: 10px solid;
border-image-slice: 1;
border-width: 1px;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
.colorBtn i {
background: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2rem;
}
.staticEffect {
width: 100%;
line-height: 0;
}
.cycleEffect {
/* Chrome, Safari, Opera */
-webkit-animation-name: cycle;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: cycle;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes cycle {
0% {
background-color: rgb(255, 0, 38);
}
25% {
background-color: rgb(255, 252, 48);
}
50% {
background-color: rgb(41, 255, 137);
}
100% {
background-color: rgb(0, 255, 242);
}
}
.filterSideMenu {
position: relative;
}
.filterSideMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.filterSideMenu ul li a {
display: block;
background: #101010;
padding: 20px 15px;
border-bottom: 1px solid #242424;
color: #fff;
text-decoration: none;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
transition: 0.2s linear;
}
.filterSideMenu ul li a:hover {
background: #424242;
color: #fff;
}
.filterSideMenu ul li a .fa {
width: 16px;
text-align: center;
margin-right: 5px;
float: right;
}
.filterSideMenu ul ul {
background-color: #ebebeb;
}
.filterSideMenu ul li ul li {
background: #1f1f1f;
color: #fff;
border-left: 4px solid #101010;
padding: 10px 20px;
}
.filterSideMenu ul li ul li a:hover {
background: #353535;
border-left: 4px solid #424242;
}
::-webkit-input-placeholder {
/* Edge */
color: #717171;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #717171;
}
::placeholder {
color: #717171;
}
.closeBtn {
padding: 10px 20px;
}
.widthHalf {
width: 50%;
}
.garyDeepBtn {
color: #fff;
background-color: #1F1F1F;
}
.border {
border: 1px solid #242424 !important;
}
.productBox {
display: inline-block;
border: 1px solid #4c4c4c;
position: relative;
background: none;
color: #fff;
cursor: pointer;
background: rgba(0, 0, 0, 0.09);
-webkit-transition: all 0.10s ease;
-moz-transition: all 0.10s ease;
-o-transition: all 0.10s ease;
-ms-transition: all 0.10s ease;
transition: all 0.10s ease;
box-shadow: rgba(0, 0, 0, 0) 2px 2px 24px 0px;
}
.productBox:hover {
text-decoration: none;
}
.compareImg {
width: 60%;
margin: 0px auto;
}
.productBox:hover {
border: 1px solid #115900;
-webkit-transition: all 0.10s ease;
-moz-transition: all 0.10s ease;
-o-transition: all 0.10s ease;
-ms-transition: all 0.10s ease;
transition: all 0.10s ease;
box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 24px 0px;
}
.productBox span {
-webkit-transition: all 0.10s ease;
-moz-transition: all 0.10s ease;
-o-transition: all 0.10s ease;
-ms-transition: all 0.10s ease;
transition: all 0.10s ease;
display: block;
padding: 20px;
}
.productBox::before,
.productBox::after {
-webkit-transition: all 0.10s ease;
-moz-transition: all 0.10s ease;
-o-transition: all 0.10s ease;
-ms-transition: all 0.10s ease;
transition: all 0.10s ease;
content: "";
width: 0;
height: 1px;
position: absolute;
transition: all 0.3s linear;
background: #07f500;
}
.productBox span::before,
.productBox span::after {
-webkit-transition: all 0.10s ease;
-moz-transition: all 0.10s ease;
-o-transition: all 0.10s ease;
-ms-transition: all 0.10s ease;
transition: all 0.10s ease;
content: "";
width: 1px;
height: 0;
position: absolute;
transition: all 0.3s linear;
background: #07f500;
}
.productBox:hover::before,
.productBox:hover::after {
width: 100%;
}
.productBox:hover span::before,
.productBox:hover span::after {
height: 100%;
}
/*----- button 4 -----*/
.btn-4::after {
right: 0;
bottom: -1px;
animation-duration: 0.1s;
}
.btn-4 span::after {
right: -1px;
bottom: 0;
animation-duration: 0.1s;
}
.btn-4::before {
left: 0;
top: -1px;
animation-duration: 0.1s;
}
.btn-4 span::before {
left: -1px;
top: 0;
animation-duration: 0.1s;
}
.productBox {
border: 1px solid #333333;
}
.btn {
border-radius: 0;
padding: 16px 20px;
}
.footerWrapper {
padding: 40px 50px;
}
.unbold {
font-weight: 400!important;
}
.listRow {
margin-bottom: 20px !important;
padding: 20px;
background-color: #f8f8f8;
}
.sliderMask::after {
content: "";
position: absolute;
width: 100%;
top: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.boxOutLine {
margin: 20px;
border: 2px solid #fff;
background: transparent;
}
.mediaVideoWrap {
padding: 5px;
}
.videoCard {
height: 514px;
}
.mediaSocialCard {
overflow: hidden;
}
.mediaSocialCard:hover::after {
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.screen {
height: 514px;
width: 100%;
}
.cardImg::after {
content: "\f002";
font-family: "Font Awesome 5 Free";
font-weight: 900;
opacity: 0;
}
.btn-secondary {
background-color: #585858;
color: #fff;
border: 0;
border-radius: 0;
}
.compareTitle {
font-size: 1.4rem;
}
.compareWrap {
padding: 20px;
position: fixed;
width: 100%;
z-index: 300;
bottom: 0;
background-color: #2F2F2F;
}
.form-control {
display: block;
width: 100%;
border: 0px;
height: auto;
padding: 1rem 1.2rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #cdcdcd;
background-color: #242424;
border-radius: 0rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.mediaSocialCard:hover .cardImg::after {
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
position: absolute;
top: 50%;
left: 50%;
font-size: 3rem;
color: #fff;
z-index: 999;
transform: translate(-50%, -50%);
}
.mediaSocialCard:hover .mediaIcon {
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.newsDetailDate {
padding: 20px;
}
.cardItemBtn .newsImg {
height: 320px;
position: relative;
background-position: 50% 50%;
background-size: cover;
overflow: hidden;
}
.newsDetailTitle {
padding: 20px;
}
.mediaIcon {
transform-origin: center center;
z-index: 100;
position: absolute;
top: 50%;
font-size: 2rem;
left: 50%;
transform: translate(-50%, -50%);
}
.mediaIcon i {
font-size: 3rem;
}
.blockContainer {
background: rgb(0, 0, 0);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
overflow: hidden;
margin: 0 auto;
padding: 10% 5%;
}
.kvIconFigure {
padding: 0px 5% !important;
}
.colorContainer {
margin: 50px 20px;
overflow: hidden;
}
.KVContainer {
width: 100%;
position: relative;
overflow: hidden;
/* padding: 5% 0; */
}
.kvFigure {
width: 100%;
}
.kvFigure>img {
width: 100%;
height: 100%;
}
.graphicsCard {
width: 50%;
position: absolute;
top: 25%;
left: 25%;
z-index: 10;
}
.ainmationPic {
width: 100%;
}
.vga-body {
position: absolute;
z-index: 150;
}
.graphicsCard>img,
.ainmationPic>img {
width: 100%;
height: 100%;
/* z-index: 100; */
}
.color-style {
position: absolute;
/* z-index: 110; */
/* filter: drop-shadow(0 0 1px rgb(255, 255, 255)); */
}
.color-ctrl-body-1 {
z-index: 120;
opacity: 0.6;
}
.color-ctrl-mid {
z-index: 120;
animation: kvAnimate 1.5s infinite ease-out;
}
.color-ctrl-body {
z-index: 150;
animation: kvAnimate 2s infinite ease-out;
}
.color-ctrl-top {
z-index: 120;
animation: kvAnimate 1.5s infinite ease-out;
opacity: 0.6;
}
.color-ctrl-top-1 {
z-index: 120;
animation: kvAnimate 1.2s infinite ease-out;
opacity: 0.6;
animation-delay: 0.8s;
}
.vga-bottom {
opacity: 0;
}
.nvlogo {
/* width: 8%; */
position: absolute;
top: 5%;
right: 3%;
}
.cardlogo {
/* width: 8%; */
position: absolute;
top: 5%;
left: 3%;
}
.nvlogo>img {
width: 100%;
height: 100%;
}
.kvTitle {
width: 45%;
position: absolute;
top: 40%;
left: 45%;
}
.kvTitle>img {
width: 100%;
height: 100%;
}
.kvText {
width: 15%;
position: absolute;
top: 45%;
left: 74%;
}
.kvText>img {
width: 100%;
height: 100%;
}
.display-mobile {
display: none;
}
.introl {
background-size: cover;
background-position: 50% 50%;
}
.comtentTop {
position: relative;
background-size: cover;
background-position: 50% 50%;
}
@keyframes cf3FadeInOut {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.graphicsCard .layerTop {
top: 0;
z-index: 1;
position: absolute;
left: 0;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}
.ainmationPic .layerTop {
top: 0;
z-index: 1;
position: absolute;
left: 0;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}
.animationGroup {
position: relative;
width: 56%;
text-align: center;
margin: 0px auto;
top: 25%;
}
.animationGroup img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.mediaSocialCard::after {
content: "";
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mediaWrap {
margin-right: 5px;
margin-left: 5px;
width: 100%;
}
.mediaSocial {
padding: 5px;
}
.mediaVideo {
width: 100%;
}
.swiper-button-prev,
.swiper-button-next {
width: 44px;
height: 44px;
background-color: rgba(0, 0, 0, 0.5);
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 0px;
background-image: none;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 0px;
background-image: none;
}
.swiper-button-next::after {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #fff;
font-size: 1.6rem;
position: absolute;
top: 4px;
left: 10px;
padding: -2px 20px;
}
.swiper-button-prev::after {
content: "\f060";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #fff;
font-size: 1.6rem;
position: absolute;
top: 4px;
left: 10px;
padding: -2px 20px;
}
.cardItemBtn {
width: 100%;
border: 1px solid #333333;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cardItemBtn:hover .card-title {
color: #76BC1B;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cardItemBtn:hover {
text-decoration: none!important;
border: 1px solid #38bd14;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cardItemBtn .cardImg {
height: 250px;
background-position: 50% 50%;
position: relative;
background-size: cover;
overflow: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.videoCard .cardImg {
height: 100%;
}
.card {
background-color: #333333;
border: 0;
border-radius: 0px;
}
.cardItemBtn .cardImg::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
transition: inherit;
}
.cardItemBtn:hover .cardImg::before {
transform: scale(1.2);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.numberInput {
width: 50%;
}
.feeBox {
margin: 20px;
padding: 60px 20px;
}
.greenBorder {
border: 1px solid #4bafb7;
}
.blueBorder {
border: 1px solid #1e2088;
}
.fullCourse {
color: #cdcdcd;
}
.fullCourse input {
color: #cdcdcd;
}
.yellowBtn {
font-size: 0.8rem;
padding: 10px 30px;
border: 0;
background-color: #ffe665;
color: #4c4c4c;
}
.yellowBtn:hover {
background-color: #fff2ae;
}
.yellowLine {
width: 100px;
background-color: #ffe665;
height: 6px;
}
.link {
font-weight: 500;
color: #4bafb7;
}
.link:hover {
color: #1e2088;
}
.linkWhite {
font-weight: 500;
color: #fff;
}
.linkWhite:hover {
color: #cdcdcd;
}
.mainWrapper {
min-height: 400px;
padding: 0px 35px;
margin-bottom: 40px;
}
.breadcrumbWrapper {
width: 100%;
margin: 20px;
}
.breadcrumbTitle {
color: #fff;
z-index: 2;
}
.newRow {
padding: 20px;
border-bottom: 1px dotted #cdcd;
}
.newRow:hover {
background-color: #fffae1;
}
.listTableHead {
font-weight: bold;
padding: 10px;
background-color: #f8f8f8;
}
.iconGroup {
position: relative;
}
.iconGroup input {
padding-right: 50px;
}
.iconGroup .iconBtn {
position: absolute;
right: 20px;
top: 18px;
}
.listTableRow {
padding: 10px 25px;
}
.bigFont {
font-size: 4rem;
}
.breadcrumbLink a,
.breadcrumbLink {
color: #fff;
z-index: 2;
font-size: 0.8rem;
}
.lab_video_text_overlay {
margin-top: 174px;
z-index: 1;
position: relative;
}
.breadcrumb {
background-position: 50% 50%;
background-size: cover;
position: relative;
border-radius: 0px;
padding: 0 1rem;
background-color: #1f1f1f;
padding-top: 88px;
margin-bottom: 0px;
}
.footerMedia a {
font-size: 1.6rem;
padding: 0px 5px;
}
.footerMedia a:hover {
text-decoration: none;
}
.scrollToTop {
z-index: 200;
position: fixed;
bottom: 40px;
right: 20px;
color: #4c4c4c;
background: rgba(54, 54, 54, 0.6);
padding: 9px 13px;
width: 40px;
height: 40px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
box-shadow: 0 4px 25px -3px rgba(0, 0, 0, 0.2);
}
.white-space {
white-space: nowrap;
}
.tableRow {
padding: 10px;
width: 100%;
}
.ci {
padding: 10px;
}
.mobileBorderTop {
padding: 0;
border-top: 0px solid #cdcdcd;
}
.titleList {
position: relative;
padding-left: 28px;
}
.titleList01::before {
content: "1.";
position: absolute;
left: 0px;
}
.titleList02::before {
content: "2.";
position: absolute;
left: 0px;
}
.titleList03::before {
content: "3.";
position: absolute;
left: 0px;
}
.boxText {
overflow: hidden;
border-radius: 10px;
}
.tabs-nav {
padding: 0px 15px;
}
.nameTable {
margin: 20px 0px;
}
.nameTable .nameTd {
padding: 10px;
border: 1px solid #efefef;
}
.nameTable .nameTd:nth-of-type(odd) {
background-color: #f1fbff;
}
.nameTable .nameTd:nth-of-type(even) {
background-color: #f9f9f9;
}
.aboutDes {
width: 70%;
}
.aboutImg {
width: 30%;
}
.footerBtnWrap {
padding: 0px 20px;
}
@media (min-width:2000px) {
.graphicsCard {
width: 30%;
/* top: 15%; */
left: 28%;
}
.kvTitle {
width: 30%;
position: absolute;
/* top: 25%;
left: 55%; */
}
.kvText {
width: 10%;
position: absolute;
top: 43%;
left: 65%;
}
}
@media (min-width:1281px) {
.breadcrumb {
padding-top: 85px;
}
}
@media (max-width: 1380px) {
.rightMenu {
padding-right: 10px;
}
.breadcrumb {
padding-top: 70px;
}
}
@media (max-width: 1280px) {
.breadcrumb {
padding-top: 65px;
}
}
@media (max-width: 1001px) {
.mainWrapper {
padding: 0px 15px;
}
.productTabTitle {
padding: 20px 15px;
}
.breadcrumbWrapper {
margin: 20px 0px;
}
.tabBtn {
padding: 20px 20px;
}
.supportForm {
width: 100%;
padding: 20px;
}
.compareTitle {
padding: 0px;
}
.footerWrapper {
padding: 40px 20px;
}
.mobileLeft {
margin-left: 0px!important;
}
}
@media (max-width: 768px) {
.tab-contentDetail {
padding: 20px 15px;
}
.tableRow {
padding: 0px;
}
.mainWrapper {
padding: 0px 15px;
}
.productColor {
margin-top: 50px;
}
.cardlogo {
position: absolute;
top: 5%;
left: 5%;
}
.kvFigure>img {
margin: 10% 0;
}
.kvIconFigure img {
width: 14%;
}
.nvlogo {
width: 20%;
position: absolute;
top: 3%;
right: 1%;
}
.nvlogo>img {
width: 80%;
height: 100%;
}
.display-web {
display: none;
}
.display-mobile {
display: block;
}
.graphicsCard {
width: 80%;
top: 30%;
left: 50%;
transform: translateX(-50%);
}
.kvTitle {
width: 100%;
position: absolute;
top: 50%;
left: 48%;
transform: translateX(-50%);
}
.kvText {
width: 45%;
position: absolute;
top: 50%;
left: 52%;
/* transform: translateX(-50%); */
}
#detail .product-images .thumb-nav.slick-slider .slick-next {
margin-right: -18px;
}
#detail .product-images .thumb-nav.slick-slider .slick-prev {
margin-left: -18px;
}
.productTabTitle {
padding: 20px 15px;
}
.contactDetail,
.contactMap {
width: 100%;
padding: 0px;
border: 0px;
}
.silderDetail {
font-size: 0.9rem;
}
.breadcrumbWrapper {
margin: 20px 0px;
}
.silderTextWrap {
width: 80%;
padding-left: 10%;
}
}
@media (max-width: 500px) {
.aboutDes {
width: 100%;
}
.aboutImg {
width: 100%;
}
.mobileLeft {
margin-left: 0px!important;
}
.flexSmColumn {
-ms-flex-direction: column !important;
flex-direction: column !important;
}
}