.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}ul.brand-thumbnails:before{clear:both;content:"";display:table}ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even){margin-right:0}}.brand-thumbnails-description li{text-align:center}.brand-thumbnails-description li .term-thumbnail img{display:inline}.brand-thumbnails-description li .term-description{margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}body {
margin: 0;
}
.page-template-introduction header {
display: none;
}
.page-template-introduction footer {
display: none;
}
.introduction {
background-color: #ddba18;
background-image: url(//tanhungvuong.com/wp-content/themes/flatsome/assets/img/background_content_intro.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
min-height: 100vh;
padding: 65px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.introduction .introduction-container {
width: 100%;
height: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
.introduction .header-content {
position: relative;
top: -100vh;
background-color: transparent;
padding: 0;
border-radius: 0;
text-align: center;
max-width: 100%;
width: 100%;
box-shadow: none;
transition: all 0.8s cubic-bezier(0.42, 0, 0.73, 1.24);
}
.introduction .animation_content.active .header-content {
top: 0;
}
.introduction .main-content{
position: relative;
top: 100vh;
background-color: transparent;
padding: 0;
border-radius: 0;
text-align: center;
max-width: 100%;
width: 100%;
box-shadow: none;
transition: all 0.8s cubic-bezier(0.42, 0, 0.73, 1.24);
}
.introduction .animation_content.active .main-content {
top: 0;
}
.introduction .logo-container img {
width: 100%;
max-width: 414px;
}
.introduction .company-name {
display: none;
font-size: 2em;
color: #2c5e3A;
font-weight: bold;
margin-bottom: 10px;
}
.introduction .intro-text {
width: 100%;
max-width: 89%;
color: #000000;
font-family: Quicksand;
font-weight: 500;
font-size: 28px;
line-height: 42px;
text-align: center;
margin: 41px auto 40px;
}
.introduction .footer-text {
color: #FFFFFF;
font-family: Quicksand;
font-weight: 500;
font-size: 28px;
line-height: 42px;
text-align: center;
margin: 0;
}
.introduction .footer-text {
margin: 0 auto;
margin-top: 40px;
background-color: transparent;
padding: 0;
border-radius: 0;
max-width: 85%;
width: 100%;
text-align: center;
box-shadow: none;
}
.introduction .services-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
width: 100%;
max-width: 100%;
}
.introduction .service-item {
position: relative;
width: calc(25% - 24px);
min-height: 216px;
min-width: 250px;
max-width: 320px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
overflow: hidden;
}
.introduction .service-item a {
position: relative;
color: white;
font-family: Quicksand;
font-weight: 700;
font-size: 28px;
line-height: 42px; padding: 25px 20px;
border-radius: 10px;
text-align: center;
width: calc(100% - 4px);
height: calc(100% - 4px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: none; text-decoration: none;
text-transform: uppercase;
z-index: 10;
}
.introduction .service-item::before {
pointer-events: none;
content: "";
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 199%;
background: linear-gradient(0, #6EFF60 0.02%, transparent 35%);
animation: borderLineMove 5s linear infinite;
border-radius: 50%;
transform: translate(-18%, -25%);
z-index: 0;
}
.introduction .service-item:after {
pointer-events: none;
content: "";
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: #FFFFFF1A;
backdrop-filter: blur(20px);
border-radius: 10px;
z-index: 2;
}
.introduction .service-item:hover:before {
animation: none;
background: transparent;
width: 100%;
height: 100%;
transform: none; border-radius: 10px;
}
.introduction .service-item:hover a {
background-color: transparent;
backdrop-filter: none;
}
.introduction .service-item:hover:after {
background: transparent;
backdrop-filter: none;
}
.introduction .service-item a:before {
pointer-events: none;
content: '';
opacity: 0;
position: absolute;
display: flex;
width: calc(100% + 2px);
height: calc(100% + 2px);
background-color: #FFFFFF1A;
backdrop-filter: blur(20px);
border: 2px solid #6EFF60;
border-radius: 10px;
transition: opacity 0.5s ease-in;
z-index: -2;
}
.introduction .service-item:hover a:before {
opacity: 1;
}
.introduction .service-item a:after {
pointer-events: none;
content: '';
opacity: 0;
position: absolute;
top: 100%;
display: flex;
width: 100%;
height: 100%;
border-radius: 100%;
background: #6eff605c;
backdrop-filter: blur(136.8000030517578px);
box-shadow: 0px -10px 20px 20px #6eff602b;
transition: opacity 1s ease-in;
z-index: -3;
}
.introduction .service-item:hover a:after {
opacity: 1;
top: 75%;
}
.introduction .animation_on_load {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFFFFF;
z-index: 10;
}
.introduction .animation_on_load .logo_on_load {
display: inline-block;
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.8s cubic-bezier(0.42, 0, 0.73, 1.24);
z-index: 2;
}
.introduction .animation_on_load .logo_on_load.active {
transform: translate(-50%, -50%) scale(1);
z-index: 3;
}
.introduction .animation_on_load .background_on_load_left {
position: absolute;
display: block;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #2A7D22;
z-index: 3;
transition: all 0.8s linear;
}
.introduction .animation_on_load .background_on_load_right {
position: absolute;
display: block;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #2A7D22;
z-index: 2;
transition: all 0.8s linear;
}
.introduction .animation_on_load .background_on_load_left.active {
left: -100%;
}
.introduction .animation_on_load .background_on_load_right.active {
right: -100%;
}
.introduction-container:after {
pointer-events: none;
content: '';
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 1024px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
z-index: 0;
}
.introduction .animation_content {
position: relative;
z-index: 1;
}
@keyframes borderLineMove {
0% {
transform: translate(-18%, -25%) rotate(0);
}
50% {
transform: translate(-18%, -25%) rotate(180deg);
}
100% {
transform: translate(-18%, -25%) rotate(360deg);
}
}
@media(max-width: 767px){
.introduction .animation_on_load .logo_on_load svg {
width: 230px;
height: 230px;
}
.introduction-container {
padding: 50px 20px;
}
.introduction .intro-text {
font-size: 18px;
line-height: 26px;
margin: 25px 0;
}
.introduction .services-grid {
gap: 20px;
}
.introduction .service-item {
width: 100%;
}
.introduction .service-item a {
font-size: 22px;
line-height: 35px;
}
.introduction .footer-text {
font-size: 18px;
line-height: 26px;
margin-top: 25px;
}
}