Files
du_an_khach_hang/Traphaco/scss/mobile_css.css

4219 lines
94 KiB
CSS
Raw Normal View History

2023-12-13 13:47:38 +07:00
@charset "UTF-8";
*, ::after, ::before {
box-sizing: border-box;
}
body {
color: #000;
font-family: "Inter", sans-serif;
background: #FAFAFA;
position: relative;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
text-align: left;
max-width: 650px;
margin: auto;
word-break: break-word;
counter-reset: section;
overflow: auto;
}
b {
font-weight: bold;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
.h1, h1 {
font-size: 2em;
}
.h2, h2 {
font-size: 1.5em;
}
.h3, h3 {
font-size: 1.17em;
}
.h4, h4, .h5, h5, .h6, h6 {
font-size: initial;
}
.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 {
font-weight: bold;
}
.clearfix::after, .recruit-item::after {
content: "";
clear: both;
display: block;
}
.bg-white {
background: #fff !important;
}
.flex-wrap {
flex-wrap: wrap;
}
.d-flex {
display: flex !important;
}
.d-block {
display: block !important;
}
.d-none {
display: none !important;
}
.d-inline-block {
display: inline-block !important;
}
.align-items-center {
align-items: center;
}
.align-items-baseline {
align-items: baseline;
}
.align-items-end {
align-items: flex-end;
}
.align-items-start {
align-items: flex-start;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-center {
justify-content: center;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-none {
float: none;
}
.position-relative {
position: relative;
}
.text-white {
color: #fff;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
.w-100 {
width: 100% !important;
}
.w-50 {
width: 50% !important;
}
.w-auto {
width: auto !important;
}
.h-100 {
height: 100% !important;
}
.h-auto {
height: auto !important;
}
.m-0 {
margin: 0 !important;
}
.m-auto {
margin: auto !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mt-0 {
margin-top: 0 !important;
}
.ml-0 {
margin-left: 0 !important;
}
.mr-0 {
margin-right: 0 !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.mt-3 {
margin-top: 1rem !important;
}
.mb-2 {
margin-bottom: 0.5rem !important;
}
.mb-3 {
margin-bottom: 1rem !important;
}
.p-0 {
padding: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
}
.pt-2, .py-2 {
padding-top: 0.5rem !important;
}
.pt-3, .py-3 {
padding-top: 1rem !important;
}
.border-0 {
border: 0 !important;
}
.p-15 {
padding: 0 15px;
}
.hidden-scroll::-webkit-scrollbar, .product-filter-container .filter-holder::-webkit-scrollbar {
width: 0;
height: 0;
}
.form-control {
display: block;
width: calc(100% - 1.5rem - 2px);
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.text-underline {
text-decoration: underline;
}
.border-bottom {
border-bottom: 1px solid #ccc;
}
.pb-1, .py-1 {
padding-bottom: 0.25rem !important;
}
.fit-img, .about-reward-page .item img, .shareholder-article-container .item img, .home-box-group .art-item img, .p-item img {
width: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
.autocomplete-suggestions {
position: absolute;
width: 100%;
border: solid 1px #ddd;
right: 0;
max-height: 300px;
overflow: auto;
display: none;
background: #fff;
z-index: 9;
top: 100%;
}
.autocomplete-suggestions a {
display: flex;
align-items: flex-start;
padding: 10px;
overflow: hidden;
}
.autocomplete-suggestions a img {
width: 60px;
float: left;
margin-right: 12px;
}
.autocomplete-suggestions a .info {
width: calc(100% - 72px);
}
.autocomplete-suggestions a .info .name {
display: block;
color: #333;
}
.autocomplete-suggestions a .info .price {
color: #ec1c24;
}
.autocomplete-suggestions::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #f1f1f1;
border-radius: 10px;
}
.autocomplete-suggestions::-webkit-scrollbar {
width: 6px;
background-color: #f1f1f1;
}
.autocomplete-suggestions::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #ccc;
}
.success-checkmark .check-icon .icon-circle {
border-color: #0542b7;
opacity: 0.5;
}
.success-checkmark .check-icon .icon-line {
background-color: #0542b7;
}
.success-checkmark .check-icon {
border-color: #0542b7;
}
.content-container {
max-width: calc(100% - 60px);
}
.fancybox-thumbs__list a {
height: 90px;
background-size: 100% 100%;
background-color: #fff;
transition: unset;
}
.fancybox-thumbs__list a:before {
border: 3px solid #1781E0;
}
.label-container {
display: block;
position: relative;
padding-left: 24px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
line-height: 21px;
cursor: pointer;
}
.label-container .checkmark {
position: absolute;
top: 3px;
left: 0;
height: 13px;
width: 13px;
background-color: #fff;
border-radius: 50%;
border: 1px solid #BFBFBF;
}
.label-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.label-container input:checked ~ .checkmark {
border-color: #118F3E;
}
.label-container input:checked ~ .checkmark:after {
display: block;
}
.label-container input:checked ~ .checkmark:after {
content: "";
width: 8px;
height: 8px;
background: #118F3E;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fancybox-slide--video {
padding: 10px;
}
.text-white {
color: #fff;
}
.red {
color: #CE000C;
}
.color-main, .recruit-detail-content .recruit-info .item {
color: #0D642B;
}
.color-main-2, .about-leader-page .leader-tab-group a.current, .about-associated-company .company-name, .about-value-page .page-banner-holder b, .about-page-container .item-fav b, .recruit-detail-page .page-address, .recruit-item .item-btn, .recruit-item .item-title, .distributor-branch-container .group-title, .pd-ask-item.active .item-title, .product-detail-page .pd-btn-group .btn-phone b, .product-detail-page .pd-btn-group .btn-address, .product-detail-page .pd-brand-group a, .product-detail-page .pd-box-group .group-title, .shareholder-report-page .report-timelines-group, .home-product-group .home-product-child a.current, .homepage .group-btn, .art-item .art-btn {
color: #129046;
}
.color-text, .about-value-page .page-banner-holder .title, .shareholder-major-container .item-name, .shareholder-page .group-title, .shareholder-page .current-page-title, .global-title-background {
background: linear-gradient(90deg, #1A532B -7.52%, #36894D 57.52%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bg-main {
background: #0D642B;
}
.inherit, .library-page .image-item .item-title *, .library-page .video-item .item-title *, .shareholder-cate-list .item-title, .home-product-group .home-product-child a *, .art-item .art-title *, .p-item .p-name *, .global-breadcrumb h1, .global-other-breadcrumb h1 {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
}
.line-clamp-2, .top-article-container .art-item .art-title, .top-article-container .art-item .art-summary, .home-shareholder-list span, .art-item .art-summary, .art-item .art-title, .p-item .p-summary, .p-item .p-name {
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3, .library-page .image-item .item-title, .library-page .video-item .item-title, .article-page .article-list .art-item .art-title, .shareholder-article-container .item-title {
text-overflow: ellipsis;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-4 {
text-overflow: ellipsis;
-webkit-line-clamp: 4;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-5 {
text-overflow: ellipsis;
-webkit-line-clamp: 5;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
@keyframes gradient-bg-antimation {
0% {
background-position: 0 0;
}
100% {
background-position: -200% 0;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 822;
}
}
.bg-linear, .about-page-container .box-btn, .recruit-form-group .recruit-submit, .recruit-item .item-btn, .product-detail-page .pd-btn-group .btn-address, .home-shareholder-list .item::after, .homepage .box-btn, .global-footer-container::before {
background: linear-gradient(90deg, #08733F 4.02%, #B5D033 98.21%);
}
.bg-linear-animate {
background: repeating-linear-gradient(90deg, #C924AA 0%, #6A7ED1 98.41%);
background-size: 200% auto;
background-position: 0 100%;
animation: 2s linear infinite forwards gradient-bg-antimation;
}
.bg-content {
overflow: hidden;
position: relative;
}
.bg-content::before {
content: "";
position: absolute;
bottom: 0;
left: -10px;
right: -10px;
background: linear-gradient(transparent, #fff);
height: 300px;
}
.btn-html-content {
text-align: center;
padding: 16px;
}
.btn-html-content a {
display: none;
line-height: 36px;
background: #FFFFFF;
color: #1988EC;
box-shadow: 0px 0px 0px 1px #1988EC;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
margin: auto;
max-width: 126px;
width: 100%;
transition: 0.15s all;
font-size: 13px;
}
.btn-html-content a i {
margin-left: 4px;
}
.bg-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
cursor: pointer;
}
.p-10 {
padding-left: 10px;
padding-right: 10px;
}
.icon-star {
background-image: url(../images/star.png);
width: 85px;
height: 14px;
display: inline-block;
background-repeat: no-repeat;
background-size: 85px 90px;
vertical-align: sub;
}
.icon-star.star-1 {
background-position: -2px -74px;
}
.icon-star.star-2 {
background-position: -2px -56px;
}
.icon-star.star-3 {
background-position: -2px -38px;
}
.icon-star.star-4 {
background-position: -2px -20px;
}
.icon-star.star-5, .icon-star.star-0 {
background-position: -2px -2px;
}
.icons, .recruit-item .item-featured::after, .recruit-search-group .icon-search::before, .library-page .video-item .item-img::before, .distributor-branch-container .group-title::before, .distributor-filter-result .icon-map::before, .distributor-filter-result .icon-tel::before, .distributor-filter-result .icon-home::before, .pd-ask-item .item-title::before, .product-detail-page .pd-btn-group .btn-phone::before, .shareholder-report-page .report-item .item-time::before, .shareholder-article-container .item-time::before, .home-shareholder-list a::after, .home-shareholder-list .item::before, .custom-nav-2 .arrow {
background: url(../images/global-sprite.png) no-repeat;
background-size: 300px 325px;
}
.container {
padding: 0 10px;
}
.global-breadcrumb, .global-other-breadcrumb {
font-size: 13px;
line-height: 30px;
padding: 5px 0;
}
.global-breadcrumb a, .global-other-breadcrumb a {
color: #414141;
}
.global-breadcrumb ol, .global-breadcrumb ul, .global-other-breadcrumb ol, .global-other-breadcrumb ul {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.global-breadcrumb li, .global-other-breadcrumb li {
display: flex;
align-items: center;
}
.global-breadcrumb li::after, .global-other-breadcrumb li::after {
content: "";
padding: 0 10px;
font-weight: 400;
font-size: 12px;
margin-top: 1px;
}
.global-breadcrumb li:last-child::after, .global-other-breadcrumb li:last-child::after {
content: none;
}
.global-other-breadcrumb {
font-weight: 600;
color: #fff;
padding: 160px 0;
background-repeat: no-repeat;
background-size: cover;
line-height: 30px;
}
.global-other-breadcrumb a {
color: #fff;
}
.global-other-breadcrumb .page-title {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
-webkit-text-stroke: 1px #129046;
margin: 20px 0 0 0;
line-height: normal;
}
.paging {
margin: 20px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.paging a {
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
background: #F4F4F4;
text-align: center;
color: #333;
margin: 0 5px;
transition: 0.12s all;
overflow: hidden;
font-size: 11px;
}
.paging a.current {
background: #129046;
color: #fff;
font-weight: 700;
}
.paging a.current * {
filter: invert(1) brightness(100);
}
.paging .icon-prev, .paging .icon-next {
background: url(../images/global-icon-left.png) no-repeat 13px center;
background-size: 5px;
font-size: 0 !important;
display: block;
height: 100%;
}
.paging .icon-next {
transform: rotate(-180deg);
}
.custom-nav .owl-nav {
margin: 0;
}
.custom-nav .owl-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 !important;
background: unset !important;
}
.custom-nav .owl-nav button.disabled {
display: none;
}
.custom-nav .owl-nav .owl-prev {
left: 0;
}
.custom-nav .owl-nav .owl-next {
right: 0;
}
.custom-nav .owl-nav .arrow {
width: 27px;
height: 54px;
display: block;
background: url(../images/global-icon-left.png) no-repeat;
background-position: 5px center;
background-size: 9px 17px;
transition: 0.2s all;
background-color: #D9D9D9;
border-radius: 0 40px 40px 0;
}
.custom-nav .owl-nav .arrow-next {
transform: rotate(180deg);
}
.custom-nav-2 .owl-nav {
margin-top: 24px !important;
}
.custom-nav-2 button {
background: unset !important;
}
.custom-nav-2 .arrow {
width: 32px;
height: 32px;
display: block;
background-position: -221px -259px;
}
.custom-nav-2 .arrow-next {
transform: rotate(180deg);
background-position: -221px -258px;
}
.custom-dots .owl-dots .owl-dot {
margin: 0 3px;
width: 10px;
height: 10px;
border-radius: 50px;
background: transparent;
transition: 0.2s all;
background: #646464;
}
.custom-dots .owl-dots .owl-dot span {
display: none;
}
.custom-dots .owl-dots .owl-dot.active {
width: 33px;
background: #128F3D;
}
.global-title-background {
font-size: 24px;
font-weight: 700;
line-height: 30px;
display: table;
position: relative;
margin: 0 auto 18px auto;
text-transform: uppercase;
padding: 6px 16px 10px 16px;
text-align: center;
}
.global-title-background::before {
content: "";
position: absolute;
inset: 0;
background: url(../images/global-bg-logo.png) no-repeat center;
background-size: contain;
}
.p-item {
padding: 9px;
background: #fff;
border: 1px solid #ECECEC;
font-size: 13px;
line-height: 17px;
}
.p-item a {
color: #000;
}
.p-item .p-img {
position: relative;
padding-bottom: 100%;
margin: 0 0 6px 0;
display: block;
overflow: hidden;
}
.p-item .p-category {
margin: 6px 0 6px -9px;
display: table;
font-size: 12px;
padding: 0 17px 0 10px;
line-height: 26px;
border-radius: 0 50px 50px 0;
background: #E3F5E4;
color: #000;
}
.p-item .p-name {
margin: 0 0 12px 0;
color: #000;
height: 36px;
font-weight: 600;
line-height: 18px;
text-transform: uppercase;
}
.art-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
font-size: 13px;
line-height: 19px;
color: #646464;
padding: 12px 0;
}
.art-item img {
display: block;
}
.art-item a {
display: block;
color: #000;
}
.art-item .art-img {
width: 40%;
margin-right: 8px;
}
.art-item .art-text {
width: calc(60% - 8px);
}
.art-item .art-title {
color: #2A2A2A;
font-size: 13px;
font-weight: 600;
margin: 0 0 10px 0;
}
.art-item .art-summary {
margin: 6px 0 10px 0;
display: none;
}
.art-item .art-time {
color: #959595;
display: block;
margin: 10px 0 5px 0;
}
.art-item .art-btn {
display: inline-block;
text-decoration-line: underline;
}
.art-item .art-time-holder {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.art-item .art-time-holder .art-time {
margin: 0;
}
.art-item .art-category {
margin: 0 12px 0 0;
color: #FA4646;
text-transform: uppercase;
position: relative;
display: none;
}
.art-item .art-category::after {
content: "|";
color: #959595;
padding-left: 12px;
position: relative;
top: -2px;
}
.global-header-container {
padding: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background: #118F3E;
color: #fff;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.global-header-container .header-logo {
width: 100%;
max-width: 103px;
}
.global-header-container .header-logo img {
display: block;
filter: brightness(100);
}
.global-header-container .col-right {
display: flex;
align-items: center;
}
.global-header-container .icon-search {
width: 32px;
height: 32px;
margin: 0 12px 0 0;
border-radius: 50%;
background-position: 2px 2px;
background-color: rgba(255, 255, 255, 0.2);
background-size: 225px 250px;
filter: brightness(100);
position: relative;
}
.global-header-container .icon-search.active {
background: rgba(255, 255, 255, 0.2);
filter: unset;
}
.global-header-container .icon-search.active::before {
content: "✖";
height: 100%;
color: #fff;
filter: brightness(100);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.global-header-container .header-language {
border: 0;
padding: 0;
margin: 0 12px 0 0;
background: transparent;
font-size: 15px;
line-height: 32px;
color: #fff;
}
.global-header-container .icon-menu {
width: 20px;
height: 14px;
position: relative;
border-top: 1px solid #fff;
}
.global-header-container .icon-menu::before, .global-header-container .icon-menu::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 5.5px;
height: 1px;
background: #fff;
}
.global-header-container .icon-menu::after {
top: unset;
bottom: 0;
}
.global-search-container {
position: absolute;
top: calc(100% + 20px);
left: 0;
right: 0;
background: #fff;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
padding: 10px;
color: #000;
transition: 0.3s all;
z-index: -10;
opacity: 0;
visibility: hidden;
}
.global-search-container.active {
z-index: 2;
top: 100%;
opacity: 1;
visibility: visible;
}
.global-search-container .search-type-group {
font-weight: 500;
}
.global-search-container .label-container input:checked ~ span {
font-weight: 600;
}
.global-search-container form {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #e1e1e1;
border-radius: 6px;
margin-top: 10px;
overflow: hidden;
}
.global-search-container .icon-search {
filter: unset;
margin: 0 0 0 12px;
border: 0;
}
.global-search-container input {
padding: 0 10px;
width: calc(100% - 40px);
height: 36px;
margin: 0;
border: 0;
}
.global-footer-container {
background: #fff;
padding: 30px 0 0 0;
font-size: 13px;
line-height: 20px;
position: relative;
}
.global-footer-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10px;
}
.global-footer-container .item {
margin: 13px 0;
}
.global-footer-container .item:first-child {
margin-top: 0;
}
.global-footer-container .item:first-child .group-title {
margin-top: 13px;
}
.global-footer-container .item img {
width: auto;
max-height: 40px;
display: block;
margin: 0 0 10px 0;
}
.global-footer-container .group-title {
font-weight: 700;
text-transform: capitalize;
margin: 0;
padding: 0 10px;
line-height: 40px;
background: #F1F1F1;
position: relative;
cursor: pointer;
}
.global-footer-container .group-title.active::after {
transform: rotate(45deg);
}
.global-footer-container .group-title::after {
content: "◢";
position: absolute;
right: 10px;
transform: rotate(-45deg);
font-size: 8px;
transition: 0.2s all;
}
.global-footer-container .item-list {
display: none;
padding: 10px;
}
.global-footer-container .item-list a {
display: table;
color: #000;
line-height: 24px;
font-size: 14px;
margin: 5px 0;
}
.global-footer-container .footer-bct img {
margin: 10px 0 0 0;
max-width: 110px;
}
.global-footer-container .info-list {
line-height: 22px;
font-size: 14px;
}
.global-footer-container .info-list b {
font-weight: 500;
}
.global-footer-container .info-list p {
margin: 0;
}
.global-footer-container .info-list a {
color: #000;
display: inline-block;
}
.global-footer-container .footer-payment img {
max-width: 250px;
}
.footer-info-group {
border-top: 1px solid #129046;
padding-top: 16px;
margin: 16px 0 10px 0;
}
.footer-info-group .group-title {
font-size: 15px;
font-weight: 700;
line-height: 26px;
padding: 0;
background: transparent;
text-transform: unset;
margin: 0 0 5px 0;
}
.footer-info-group .group-title::after {
content: none;
}
.footer-info-group .info-list {
font-size: 13px;
}
.footer-info-group .info-list b {
font-weight: 600;
}
.footer-social-media {
display: flex;
flex-wrap: wrap;
}
.footer-social-media a {
width: 26px;
height: 26px;
margin: 5px 20px 5px 0;
}
.footer-social-media .icon-facebook {
background-position: -85px -8px;
}
.footer-social-media .icon-youtube {
background-position: -126px -4px;
}
.footer-social-media .icon-google {
background-position: -168px -3px;
}
.footer-social-media .icon-twitter {
background-position: -212px -5px;
}
.footer-social-media .icon-instagram {
background-position: -257px -7px;
}
.global-footer-end {
background: #ECECEC;
font-size: 12px;
line-height: 20px;
padding: 10px;
margin-top: 10px;
text-align: center;
}
.global-footer-end p {
margin: 0;
width: 100%;
}
.global-go-top {
width: 40px;
height: 40px;
position: fixed;
right: -100%;
bottom: 10%;
border-radius: 5px;
transition: 0.3s all;
transform: rotate(90deg);
background: url(../images/global-icon-left.png) no-repeat center;
background-size: 9px;
background-color: #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.global-go-top.active {
right: 10px;
}
.homepage {
overflow: hidden;
}
.homepage img {
display: block;
width: auto;
margin: auto;
}
.homepage .global-title-background {
margin-left: auto;
margin-right: auto;
padding: 6px 30px 10px 30px;
}
.homepage .box-btn {
display: table;
line-height: 30px;
color: #FFF;
font-size: 13px;
font-weight: 700;
text-align: center;
border-radius: 13px 0px;
padding: 0 14px;
margin: auto;
text-transform: uppercase;
}
.homepage .box-btn::after {
content: "»";
font-size: 20px;
line-height: 1;
vertical-align: text-bottom;
font-weight: 400;
margin: 0 0 0 3px;
position: relative;
top: 1px;
}
.homepage .group-btn {
display: table;
margin: 12px auto 0 auto;
border-radius: 40px;
box-shadow: 0px 0px 0px 1px #128F3D;
line-height: 32px;
font-weight: 600;
font-size: 13px;
text-transform: capitalize;
padding: 0 15px;
}
.homepage .group-btn::after {
content: "»";
font-size: 20px;
line-height: 1;
vertical-align: text-bottom;
font-weight: 400;
margin: 0 0 0 3px;
position: relative;
top: 1px;
}
.homepage .summary {
font-weight: inherit;
font-size: inherit;
}
.home-slider-container {
min-height: 22vh;
margin-bottom: 26px;
}
.home-slider-container .custom-dots .owl-dots {
margin: 0 !important;
position: absolute;
left: 0;
right: 0;
bottom: 5px;
}
.home-box-group {
margin-bottom: 45px;
padding-left: 10px;
padding-right: 10px;
}
.home-box-group .art-list-holder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.home-box-group .art-item {
width: calc(50% - 6px);
display: block;
margin: 0 0 16px 0;
padding: 0;
}
.home-box-group .art-item:first-child {
width: 100%;
}
.home-box-group .art-item:first-child .art-title {
font-size: 16px;
line-height: 24px;
margin: 8px 0 4px 0;
}
.home-box-group .art-item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.home-box-group .art-item .art-btn {
display: none;
}
.home-box-group .art-item .art-img {
display: block;
position: relative;
margin: 0 0 8px 0;
width: 100%;
padding-bottom: 66%;
}
.home-box-group .art-item .art-text {
width: 100%;
}
.home-box-group .art-item .art-time {
margin: 0;
}
.home-shareholder-list .item {
width: calc(100% - 53px);
margin: auto 0 12px auto;
position: relative;
}
.home-shareholder-list .item::before {
content: "";
width: 28px;
height: 28px;
position: absolute;
top: 13px;
left: -53px;
background-position: -9px -45px;
}
.home-shareholder-list .item::after {
content: "";
width: 15px;
height: 1px;
position: absolute;
top: 26px;
left: -20px;
}
.home-shareholder-list a {
color: #000;
font-weight: 500;
line-height: 19px;
display: block;
border-radius: 10px;
background: #F7F6F6;
padding: 7px 44px 7px 13px;
position: relative;
}
.home-shareholder-list a::after {
content: "";
width: 23px;
height: 23px;
position: absolute;
top: 15px;
right: 12px;
background-position: -8px -297px;
}
.home-shareholder-list span {
min-height: 38px;
}
.home-product-group {
text-align: center;
margin: 60px 0;
}
.home-product-group .global-title-background {
margin: 0 auto 12px auto;
}
.home-product-group .home-product-child {
display: flex;
align-items: center;
margin: 12px 0 8px 0;
overflow: auto;
white-space: nowrap;
padding-bottom: 2px;
}
.home-product-group .home-product-child a {
line-height: 34px;
border: 1px solid transparent;
color: #000;
border-radius: 50px;
background: #F3F3F3;
margin: 0 8px 0 0;
padding: 0 22px;
}
.home-product-group .home-product-child a.current {
border-color: #129046;
background: #fff;
font-weight: 600;
font-weight: 700;
}
.home-product-group .p-item {
text-align: left;
border: 0;
}
.home-product-group .box-btn {
margin-top: 15px;
}
.home-distributed-system-group {
margin-bottom: 40px;
position: relative;
}
.home-distributed-system-group img {
display: block;
width: 100%;
}
.home-distributed-system-group .line, .home-distributed-system-group .location {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.home-distributed-system-group svg {
position: absolute;
width: auto;
transform: translate(-50%, -50%);
animation: 28s linear 0s infinite alternate none running dash;
}
.home-distributed-system-group svg:nth-child(1) {
top: 17%;
left: 56%;
height: 16%;
}
.home-distributed-system-group svg:nth-child(2) {
top: 26%;
left: 43%;
height: 39%;
}
.home-distributed-system-group svg:nth-child(3) {
top: 35%;
left: 55%;
height: 20%;
}
.home-distributed-system-group .location i {
position: absolute;
width: auto;
transform: translate(-50%, -50%);
display: inline-flex;
text-transform: uppercase;
width: 22px;
height: 36px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.home-distributed-system-group .mien-bac {
top: 8.5%;
left: 47%;
}
.home-distributed-system-group .mien-trung {
top: 24%;
left: 61%;
}
.home-distributed-system-group .mien-nam {
top: 44%;
left: 51%;
}
.home-distributed-system-group .distributed-detail {
padding: 10px;
position: absolute;
bottom: 0;
}
.home-distributed-system-group .distributed-detail p {
margin: 0;
}
.home-distributed-system-group .global-title-background {
margin: auto auto 10px auto;
}
.home-distributed-system-group .global-title-background::before {
content: none;
}
.home-distributed-system-group .distributed-system-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.home-distributed-system-group .item {
text-align: right;
width: 41%;
position: relative;
}
.home-distributed-system-group .item:nth-child(n+3) {
padding-top: 15px;
margin-top: 15px;
}
.home-distributed-system-group .item:nth-child(n+3)::after {
content: "";
height: 1px;
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 13.13%, #087106 93.18%);
}
.home-distributed-system-group .number {
color: #F46700;
font-size: 36px;
font-weight: 700;
line-height: 50px;
white-space: nowrap;
}
.home-distributed-system-group .number::after {
content: "+";
}
.home-members-group {
background-color: #F4F9F4;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
padding: 30px 0;
text-align: center;
}
.home-members-group .global-title-background {
margin: auto auto 13px auto;
}
.home-members-group .global-title-background span {
display: block;
}
.home-members-group .summary {
margin: 0;
line-height: 21px;
}
.home-members-group .col-right {
margin-top: 22px;
}
.home-reward-group, .home-static-group {
text-align: center;
}
.home-reward-group .summary, .home-static-group .summary {
line-height: 21px;
margin: 0 0 20px 0;
}
.home-reward-group .col-right, .home-static-group .col-right {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
.home-reward-group {
background-color: #fff;
padding: 25px 0 0 0;
}
.home-reward-group .item {
width: calc(50% - 6px);
}
.home-reward-group .item:nth-child(n+3) {
margin-top: 12px;
}
.home-reward-group .col-left {
padding: 0 10px;
}
.home-reward-group .col-right {
padding: 0 10px 45px 10px;
background-repeat: no-repeat;
background-position: -302px 0;
}
.home-static-group {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 40px 0;
padding: 0 10px;
}
.home-static-group .col-right {
align-items: flex-start;
}
.home-static-group .item {
margin: 0 0 20px 0;
width: 33.3333333333%;
color: #459E3F;
text-align: center;
font-size: 15px;
font-weight: 600;
line-height: 22px;
text-transform: capitalize;
}
.home-static-group .item p {
margin: 0;
}
.home-brand-group {
margin: 40px 0 0 0;
text-align: center;
padding: 0 10px 40px 10px;
}
.home-brand-group .global-title-background {
max-width: 300px;
}
.home-brand-group .summary {
margin-bottom: 20px;
}
.home-brand-group .arrow {
opacity: 0.3;
width: 19px !important;
height: 38px !important;
background-position: 2px center !important;
}
.home-brand-group a {
background: #fff;
display: block;
border-radius: 5px;
overflow: hidden;
}
/* === Cổ đông === */
.shareholder-page {
background: #fff;
}
.shareholder-page .shareholder-banner-group {
padding: 10px;
min-height: 200px;
display: flex;
align-items: center;
}
.shareholder-page .shareholder-banner-group .page-title {
margin: 0;
padding: 10px 0;
font-size: 16px;
line-height: 30px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
text-shadow: 1px 1px 0 #129046, -1px -1px 0 #129046, 1px -1px 0 #129046, -1px 1px 0 #129046, 1px 1px 0 #129046;
}
.shareholder-page .group-title, .shareholder-page .current-page-title {
font-size: 24px;
line-height: 32px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 20px 0;
text-align: center;
}
.shareholder-page .current-page-title {
width: 100%;
margin: 20px 0;
text-align: center;
}
.shareholder-page .shareholder-page-list {
padding: 0 12px;
background: #129046;
height: 44px;
color: #fff;
font-weight: 600;
margin: 0;
width: 100%;
display: block;
border: 0;
}
.shareholder-cate-container, .shareholder-report-page, .shareholder-prospectus-page {
margin: 20px auto;
}
.shareholder-cate-list {
display: flex;
flex-wrap: wrap;
}
.shareholder-cate-list .item {
width: 50%;
background: #C3F3D4;
display: block;
text-align: center;
color: #0D642B;
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
padding: 24px 15px;
}
.shareholder-cate-list .item:nth-child(2), .shareholder-cate-list .item:nth-child(3), .shareholder-cate-list .item:nth-child(6), .shareholder-cate-list .item:nth-child(7) {
background: #E6FBF2;
}
.shareholder-cate-list .item-image {
height: 84px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: auto auto 17px auto;
display: block;
}
.shareholder-cate-list .item-title {
width: 100%;
height: calc(100% - 127px);
}
.shareholder-cate-list img {
width: auto;
display: block;
margin: auto;
}
.shareholder-major-container {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 45px 0;
position: relative;
}
.shareholder-major-container .group-title {
margin: 0 0 30px 0;
}
.shareholder-major-container .item {
border-radius: 500px;
overflow: hidden;
margin: 10px;
background: #FFF;
box-shadow: 0px 2px 10px 0px rgba(106, 106, 106, 0.25);
border: 1px solid #08733F;
text-align: center;
line-height: 20px;
padding: 0 0 91.8% 0;
}
.shareholder-major-container .item p {
margin: 0;
}
.shareholder-major-container .item img {
display: block;
margin: auto;
position: absolute;
inset: 0;
width: auto;
height: 100%;
border-radius: 50px;
}
.shareholder-major-container .item-content {
position: absolute;
inset: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
}
.shareholder-major-container .item-logo {
display: block;
max-width: 155px;
width: 100%;
padding-bottom: 73px;
margin: 0 0 4px 0;
position: relative;
}
.shareholder-major-container .item-name {
font-size: 16px;
line-height: 25px;
margin: 0 0 12px 0 !important;
font-weight: 600;
}
.shareholder-article-container {
padding-top: 40px;
padding-bottom: 60px;
}
.shareholder-article-container .btn-view {
color: #FF881A;
font-size: 13px;
line-height: 20px;
padding-right: 12px;
position: relative;
display: table;
margin: 12px auto;
}
.shareholder-article-container .btn-view::after {
content: "«";
transform: rotate(-180deg);
position: absolute;
top: 1px;
right: 0;
}
.shareholder-article-container .global-title-background {
display: block;
text-align: center;
margin-bottom: 10px;
}
.shareholder-article-container .global-title-background::before {
content: none;
}
.shareholder-article-container .item {
color: #767676;
line-height: 20px;
font-size: 13px;
margin-bottom: 12px;
}
.shareholder-article-container .item a {
color: #646464;
font-weight: 600;
line-height: 18px;
margin: 0 0 7px 0;
}
.shareholder-article-container .item img {
border-radius: 7px;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.shareholder-article-container .item-img {
position: relative;
border-radius: 7px;
padding-bottom: 62%;
display: block;
}
.shareholder-article-container .item-title {
font-size: 14px;
}
.shareholder-article-container .item-time {
display: block;
padding-left: 25px;
position: relative;
margin: 7px 0 0 0;
}
.shareholder-article-container .item-time::before {
content: "";
width: 20px;
height: 20px;
position: absolute;
left: 0;
background-position: -54px -7px;
}
.shareholder-report-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.shareholder-report-list .item {
margin: 0 0 10px 0;
width: calc(50% - 5px);
}
.shareholder-report-list .item:nth-child(3n) {
margin-right: 0;
}
.shareholder-report-list .item img {
display: block;
margin: auto auto 10px auto;
width: auto;
}
.shareholder-report-list .item-title {
color: #0D642B;
font-size: 13px;
line-height: 16px;
text-transform: uppercase;
margin: 10px 0 0 0;
text-align: center;
font-weight: 400;
}
.shareholder-paging {
width: 100%;
text-align: center;
font-size: 16px;
line-height: 20px;
margin: 7px 0 0 0;
}
.shareholder-paging a {
color: #FF881A;
}
.shareholder-paging a::after {
content: "▾";
margin-left: 2px;
}
.shareholder-report-page .report-list-group {
border-radius: 3px;
border: 1px solid #ECECEC;
padding: 0 12px 12px 12px;
}
.shareholder-report-page .report-timelines-group {
display: block;
height: 42px;
border: 0;
margin: 0 0 0 -12px;
padding: 0 18px 0 15px;
font-size: 20px;
font-weight: 700;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='orange'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
background-size: 8px;
background-position: right center;
background-repeat: no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
stroke: #FF881A;
}
.shareholder-report-page .report-list {
border-top: 2px solid #128F3D;
}
.shareholder-report-page .report-item {
padding: 12px 0;
position: relative;
color: #959595;
font-size: 13px;
line-height: 20px;
text-transform: capitalize;
border-top: 1px solid #ECECEC;
}
.shareholder-report-page .report-item:first-child {
border: 0;
}
.shareholder-report-page .report-item .item-title {
color: #313131;
font-size: 14px;
font-weight: 600;
line-height: 22px;
text-decoration: underline;
text-transform: capitalize;
margin-bottom: 10px;
display: block;
}
.shareholder-report-page .report-item .item-time {
display: block;
padding-left: 25px;
position: relative;
}
.shareholder-report-page .report-item .item-time::before {
content: "";
width: 20px;
height: 20px;
position: absolute;
left: 0;
background-position: -54px -7px;
}
.shareholder-report-page .shareholder-paging {
border-top: 1px solid #ECECEC;
margin: 0;
padding: 12px 0 0 0;
}
.shareholder-regulation-page .report-list-group {
border-top: 0;
border-radius: 0 0 3px 3px;
}
.product-page .product-holder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product-page .product-holder .p-item {
margin: 0 0 10px 0;
width: calc(50% - 5px);
}
.top-product-container {
border-radius: 5px;
margin-bottom: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
padding: 10px 10px 20px 10px;
}
.top-product-container .group-title {
text-align: center;
color: #fff;
font-size: 24px;
font-weight: 800;
line-height: 51px;
text-transform: uppercase;
margin: 0;
}
.product-filter-container {
margin-bottom: 16px;
}
.product-filter-container .group-title {
font-weight: 500;
margin: 0;
}
.product-filter-container .filter-holder {
display: flex;
overflow: auto;
white-space: nowrap;
}
.product-filter-container select {
margin: 13px 8px 0 0;
min-width: 126px;
height: 36px;
border-radius: 3px;
border: 1px solid #D6D6D6;
background: #F8F8F8;
font-size: 16px;
padding: 0 5px;
}
.product-filter-container a {
position: relative;
margin: 13px 8px 0 0;
color: #2A2A2A;
font-size: 13px;
line-height: 36px;
border-radius: 50px;
border: 1px solid #AEAEAE;
background: #F8F8F8;
padding: 0 15px 0 35px;
}
.product-filter-container a.current {
background: #118F3E;
color: #fff;
border-color: transparent;
}
.product-filter-container a.current .sort-icon {
filter: brightness(100);
}
.product-filter-container .sort-icon {
width: 16px;
height: 16px;
position: absolute;
top: 9px;
left: 13px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.product-detail-page .pd-box-group {
margin: 0 0 20px 0;
background: #fff;
padding: 12px;
}
.product-detail-page .pd-box-group .group-title {
font-size: 16px;
font-weight: 700;
line-height: 26px;
margin: 0 0 12px 0;
}
.product-detail-page .pd-image-large {
position: relative;
margin: 0 0 10px 0;
border: 1px solid #ECECEC;
}
.product-detail-page .pd-image-btn {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
width: 28px;
height: 50px;
border-radius: 0 40px 40px 0;
background-color: rgba(120, 120, 120, 0.25);
transform: translateY(-50%);
}
.product-detail-page .pd-image-btn::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: url(../images/global-icon-left.png) no-repeat 4px center;
background-size: 12px;
filter: invert(1) brightness(100);
}
.product-detail-page .pd-image-btn.btn-next {
left: unset;
right: 0;
transform: translateY(-50%) rotate(-180deg);
}
.product-detail-page .pd-gallery-holder {
margin-bottom: 12px;
}
.product-detail-page .pd-gallery-holder .item {
display: block;
border: 1px solid #ECECEC;
}
.product-detail-page .pd-gallery-holder .mz-thumb-selected {
border-color: #118F3E;
}
.product-detail-page .pd-gallery-holder img {
filter: unset;
}
.product-detail-page .pd-gallery-holder .owl-nav .arrow {
width: 15px;
height: 30px;
background-position: 3px center;
background-size: 5px;
}
.product-detail-page .page-title {
font-size: 18px;
font-weight: 700;
line-height: 26px;
margin: 0 0 11px 0;
}
.product-detail-page .pd-functional-group {
font-weight: 500;
font-size: 13px;
margin: 3px 0;
line-height: 30px;
}
.product-detail-page .pd-functional-group * {
margin: 0 8px 4px 0;
display: inline-block;
border-radius: 50px;
background: #E3F5E4;
color: #000;
padding: 0 18px;
}
.product-detail-page .pd-brand-group {
font-size: 13px;
margin: 4px 0 8px 0;
line-height: 24px;
}
.product-detail-page .pd-brand-group a {
font-weight: 700;
display: inline-block;
}
.product-detail-page .pd-manuals-group {
background: #fff;
overflow: hidden;
padding: 12px;
margin: 0 0 16px 0;
font-size: 13px;
line-height: 18px;
}
.product-detail-page .pd-manuals-group * {
line-height: inherit !important;
font-family: inherit !important;
}
.product-detail-page .pd-manuals-group p {
margin: 0;
}
.product-detail-page .pd-manuals-group td {
padding: 5px;
vertical-align: baseline;
}
.product-detail-page .pd-manuals-group td:nth-child(1) {
width: 80px;
}
.product-detail-page .pd-manuals-group td:nth-child(2) > * {
margin: 0;
position: relative;
display: block;
padding-left: 15px;
}
.product-detail-page .pd-manuals-group td:nth-child(2) > *::before {
content: "●";
position: absolute;
left: 0;
font-size: 8px;
}
.product-detail-page .pd-btn-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
line-height: 30px;
}
.product-detail-page .pd-btn-group a {
width: calc(50% - 4px);
margin: 0 0 8px 0;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 16px;
font-weight: 700;
border-radius: 5px;
overflow: hidden;
padding: 5px;
position: relative;
}
.product-detail-page .pd-btn-group .btn-contact {
background: #129046;
color: #fff;
}
.product-detail-page .pd-btn-group .btn-address {
padding: 2px;
}
.product-detail-page .pd-btn-group .btn-address span {
background: #fff;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
}
.product-detail-page .pd-btn-group .btn-phone {
width: 100%;
background: #DFF0D8;
font-size: 14px;
font-weight: 600;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.product-detail-page .pd-btn-group .btn-phone::before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
background-position: -234px -135px;
margin-right: 9px;
animation: phonering 1.8s infinite ease-in-out;
}
.product-detail-page .pd-btn-group .btn-phone b {
font-size: 20px;
font-weight: 700;
}
.product-detail-page iframe {
height: 300px;
}
.pd-ask-item {
padding: 12px 12px 12px 0;
border-bottom: 1px solid #ECECEC;
}
.pd-ask-item:last-child {
border: 0;
}
.pd-ask-item.active .item-title::before {
filter: invert(36%) sepia(43%) saturate(6292%) hue-rotate(134deg) brightness(91%) contrast(86%);
}
.pd-ask-item.active .item-title::after {
transform: rotate(90deg);
}
.pd-ask-item .item-answer {
display: none;
margin: 12px 0 0 0;
}
.pd-ask-item .item-title {
color: #313131;
font-size: 13px;
font-weight: 600;
line-height: 21px;
padding-left: 33px;
position: relative;
margin: 0;
cursor: pointer;
}
.pd-ask-item .item-title::before {
content: "";
width: 21px;
height: 20px;
background-position: -273px -135px;
position: absolute;
top: 2px;
left: 0;
}
.pd-ask-item .item-title::after {
content: "";
position: absolute;
top: 5px;
right: -10px;
width: 10px;
height: 10px;
background: url(../images/global-icon-left.png) no-repeat;
background-size: contain;
transform: rotate(-90deg);
}
.distributor-page {
padding-bottom: 40px;
}
.distributor-page .box-btn-group {
margin: 0 auto 30px auto;
border-radius: 10px;
background: rgba(18, 143, 61, 0.2);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 16px 10px;
}
.distributor-page .box-btn-group a {
line-height: 22px;
color: #000;
font-size: 16px;
font-weight: 700;
text-align: center;
border-radius: 100px;
background: #fff;
width: calc(50% - 5px);
padding: 9px 5px;
}
.distributor-page .box-btn-group a.current {
color: #fff;
background: #129046;
}
.distributor-header {
padding: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
color: #fff;
padding: 45px 0;
}
.distributor-header .container {
display: flex;
flex-wrap: wrap;
}
.distributor-header .item {
width: 50%;
color: #fff;
border-right: 1px solid #FFF;
font-size: 16px;
font-weight: 500;
line-height: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.distributor-header .item:nth-child(2n) {
border: 0;
}
.distributor-header .item:nth-child(n+3) {
margin: 26px 0 0 0;
}
.distributor-header p {
margin: 0;
text-align: right;
}
.distributor-header .item-count {
position: relative;
color: #FFF;
font-size: 36px;
font-weight: 700;
line-height: 36px;
margin-right: 10px;
}
.distributor-header .item-count::after {
content: "+";
font-size: 18px;
line-height: 36px;
position: relative;
top: -20px;
}
.distributor-filter-group {
margin: 0 0 40px 0;
}
.distributor-filter-group img {
display: block;
width: auto;
margin: auto auto auto 0;
}
.distributor-filter-group .col-left {
margin-bottom: 30px;
}
.distributor-filter-group .global-title-background::before {
content: none;
}
.distributor-filter-group select {
display: block;
color: #646464;
font-weight: 500;
margin: 0 0 12px 0;
width: 100%;
height: 44px;
border-radius: 6px;
border: 1px solid #1A532B;
background: #FFF;
padding: 0 10px;
}
.distributor-filter-group .btn-submit {
display: table;
line-height: 40px;
border-radius: 50px;
background: #129046;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 600;
padding: 0 30px;
margin: 12px auto 0;
}
.distributor-filter-result iframe {
border: 0;
width: 100%;
height: 285px;
}
.distributor-filter-result .address-list {
background: #FFF;
box-shadow: 0px 2px 10px 0px rgba(106, 106, 106, 0.25);
position: relative;
}
.distributor-filter-result .group-title {
color: #FFF;
font-size: 16px;
font-weight: 700;
line-height: 40px;
background: #129046;
padding: 0 10px;
margin: 0;
}
.distributor-filter-result .address-holder {
overflow: auto;
max-height: 320px;
}
.distributor-filter-result .item {
padding: 10px;
border-bottom: 1px solid #e1e1e1;
cursor: pointer;
line-height: 20px;
font-size: 13px;
font-weight: 500;
}
.distributor-filter-result .item.current {
background: #f5f5f5;
}
.distributor-filter-result .item:last-child {
border: 0;
}
.distributor-filter-result .item p {
margin: 0 0 12px 0;
}
.distributor-filter-result .item p:last-child {
margin: 0;
}
.distributor-filter-result .item a {
display: inline-block;
color: #000;
margin: 0 5px;
}
.distributor-filter-result .item a::after {
content: "|";
padding: 0 0 0 10px;
}
.distributor-filter-result .item a:last-child::after {
content: none;
}
.distributor-filter-result .icon-map, .distributor-filter-result .icon-tel, .distributor-filter-result .icon-home {
position: relative;
padding: 0 0 0 30px;
}
.distributor-filter-result .icon-map::before, .distributor-filter-result .icon-tel::before, .distributor-filter-result .icon-home::before {
background-size: 250px 275px;
content: "";
width: 20px;
height: 20px;
position: absolute;
left: 0;
}
.distributor-filter-result .icon-map::before {
background-position: -195px -145px;
top: 1px;
}
.distributor-filter-result .icon-tel::before {
background-position: -231px -144px;
}
.distributor-filter-result .icon-home::before {
background-position: -195px -183px;
}
.distributor-branch-container .global-title-background {
width: 100%;
max-width: 270px;
text-align: left;
margin: 0 0 16px;
padding: 0;
text-transform: unset;
line-height: 22px;
}
.distributor-branch-container .global-title-background span {
display: block;
font-size: 16px;
font-weight: 600;
}
.distributor-branch-container .global-title-background b {
display: block;
font-weight: 700;
margin-bottom: 3px;
}
.distributor-branch-container .branch-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.distributor-branch-container .item {
width: 48%;
margin: 0 0 30px 0;
}
.distributor-branch-container .item a {
color: #000;
font-size: 13px;
line-height: 22px;
display: table;
}
.distributor-branch-container .group-title {
margin: 0 0 5px 0;
line-height: 23px;
border-bottom: 1px solid #BDE5CB;
font-size: 16px;
font-weight: 700;
display: inline-block;
padding: 4px 10px 4px 30px;
position: relative;
}
.distributor-branch-container .group-title::before {
content: "";
width: 22px;
height: 22px;
position: absolute;
top: 3px;
left: 0;
background-position: -275px -214px;
}
.distributor-branch-container img {
width: auto;
display: block;
margin: auto;
}
.article-page {
padding-bottom: 40px;
}
.article-page .page-banner-group {
position: relative;
padding-bottom: 200px;
}
.article-page .page-banner-group img {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.article-page .page-banner-group .group-title {
color: #FFF;
font-size: 20px;
font-weight: 500;
margin: 0;
position: absolute;
bottom: 10px;
}
.article-page .page-banner-group .group-title::after {
content: "";
width: 31px;
height: 1px;
background-color: #fff;
position: absolute;
left: calc(100% + 8px);
bottom: 10px;
}
.article-page .article-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.article-page .article-list .art-item {
padding: 12px 0;
border-bottom: 1px solid #ECECEC;
line-height: 18px;
}
.article-page .paging {
padding: 20px 0;
margin: 0;
}
.top-article-container {
margin-top: 10px;
padding-bottom: 24px;
margin-bottom: 12px;
border-bottom: 1px solid #ECECEC;
}
.top-article-container .global-title-background {
margin: 0 auto 12px;
padding: 0;
}
.top-article-container .global-title-background::before {
content: none;
}
.top-article-container .art-item {
padding: 0;
display: block;
}
.top-article-container .art-item .art-img, .top-article-container .art-item .art-text {
width: 100%;
}
.top-article-container .art-item .art-title, .top-article-container .art-item .art-summary {
margin: 5px 0;
}
.top-article-container .art-item .art-title {
font-size: 16px;
line-height: 22px;
}
.top-article-container .art-item .art-btn {
margin: 5px 0 0 0;
}
.article-detail-page .top-article-container {
width: 100%;
margin: 20px 0 0 0;
padding-bottom: 0;
border: 0;
}
.article-detail-page .top-article-container .group-title {
font-size: 20px;
font-weight: 700;
line-height: 28px;
text-transform: uppercase;
margin: 0 0 10px 0;
padding-bottom: 14px;
border-bottom: 1px solid #000;
}
.article-detail-page .top-article-container .art-item {
display: flex;
justify-content: space-between;
}
.article-detail-page .top-article-container .art-item .art-img, .article-detail-page .top-article-container .art-item .art-text {
width: calc(50% - 4px);
}
.article-detail-page .col-left, .article-detail-page .col-right {
width: 100%;
}
.article-detail-page .page-title {
color: #2A2A2A;
font-size: 18px;
font-weight: 600;
line-height: 26px;
margin: 0 0 20px 0;
}
.article-detail-page .art-detail-time {
color: #959595;
font-size: 13px;
line-height: 20px;
margin: 10px 0 15px 0;
display: none;
}
.article-detail-page .art-detail-content {
font-size: 13px;
line-height: 20px;
padding-bottom: 16px;
}
.article-detail-page .art-detail-content * {
line-height: inherit !important;
font-family: inherit !important;
}
.article-detail-page .art-detail-share {
padding-top: 14px;
border-top: 1px solid #959595;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 22px;
font-weight: 600;
margin-bottom: 40px;
}
.article-detail-page .art-detail-share p {
margin: 0 7px 0 0;
}
.article-detail-page .art-share-btn {
display: flex;
align-items: center;
justify-content: flex-end;
}
.article-detail-page .art-share-btn .icons, .article-detail-page .art-share-btn .recruit-item .item-featured::after, .recruit-item .article-detail-page .art-share-btn .item-featured::after, .article-detail-page .art-share-btn .recruit-search-group .icon-search::before, .recruit-search-group .article-detail-page .art-share-btn .icon-search::before, .article-detail-page .art-share-btn .library-page .video-item .item-img::before, .library-page .video-item .article-detail-page .art-share-btn .item-img::before, .article-detail-page .art-share-btn .custom-nav-2 .arrow, .custom-nav-2 .article-detail-page .art-share-btn .arrow, .article-detail-page .art-share-btn .home-shareholder-list .item::before, .home-shareholder-list .article-detail-page .art-share-btn .item::before, .article-detail-page .art-share-btn .home-shareholder-list a::after, .home-shareholder-list .article-detail-page .art-share-btn a::after, .article-detail-page .art-share-btn .shareholder-article-container .item-time::before, .shareholder-article-container .article-detail-page .art-share-btn .item-time::before, .article-detail-page .art-share-btn .shareholder-report-page .report-item .item-time::before, .shareholder-report-page .report-item .article-detail-page .art-share-btn .item-time::before, .article-detail-page .art-share-btn .product-detail-page .pd-btn-group .btn-phone::before, .product-detail-page .pd-btn-group .article-detail-page .art-share-btn .btn-phone::before, .article-detail-page .art-share-btn .pd-ask-item .item-title::before, .pd-ask-item .article-detail-page .art-share-btn .item-title::before, .article-detail-page .art-share-btn .distributor-filter-result .icon-map::before, .distributor-filter-result .article-detail-page .art-share-btn .icon-map::before, .article-detail-page .art-share-btn .distributor-filter-result .icon-tel::before, .distributor-filter-result .article-detail-page .art-share-btn .icon-tel::before, .article-detail-page .art-share-btn .distributor-filter-result .icon-home::before, .distributor-filter-result .article-detail-page .art-share-btn .icon-home::before, .article-detail-page .art-share-btn .distributor-branch-container .group-title::before, .distributor-branch-container .article-detail-page .art-share-btn .group-title::before {
width: 20px;
height: 20px;
margin: 0 3px;
background-size: 250px 275px;
}
.article-detail-page .art-share-btn .icon-facebook {
background-position: -70px -8px;
}
.article-detail-page .art-share-btn .icon-twitter {
background-position: -178px -5px;
}
.art-detail-list-group {
margin: 0 0 30px 0;
color: #2A2A2A;
}
.art-detail-list-group .group-title {
font-size: 20px;
font-weight: 700;
line-height: 28px;
text-transform: uppercase;
margin: 0 0 10px 0;
padding-bottom: 14px;
border-bottom: 1px solid #000;
}
.art-detail-list-group .art-item {
border-top: 1px solid #ECECEC;
}
.art-detail-list-group .art-item:first-child {
border: 0;
}
.library-page {
background: #fff;
padding-bottom: 40px;
}
.library-page .page-banner-group {
position: relative;
padding-bottom: 200px;
}
.library-page .page-banner-group img {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.library-page .page-banner-group .group-title {
color: #FFF;
font-size: 20px;
font-weight: 500;
margin: 0;
position: absolute;
bottom: 10px;
}
.library-page .page-banner-group .group-title::after {
content: "";
width: 31px;
height: 1px;
background-color: #fff;
position: absolute;
left: calc(100% + 8px);
bottom: 10px;
}
.library-page .page-tab-group {
margin: 0 0 25px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
line-height: 20px;
font-weight: 600;
}
.library-page .page-tab-group .item {
color: #000;
border-radius: 50px;
box-shadow: 0px 0px 0px 0.8px #e1e1e1;
text-align: center;
padding: 10px 3px;
width: calc(50% - 4px);
}
.library-page .page-tab-group .item.current {
color: #fff;
background: #129046;
box-shadow: unset;
}
.library-page .library-list-holder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.library-page .image-item, .library-page .video-item {
margin: 0 0 10px 0;
width: calc(50% - 5px);
border-radius: 10px;
box-shadow: 0px 0px 0px 0.8px #BDBDBD;
background: #FFF;
overflow: hidden;
}
.library-page .image-item:nth-child(3n), .library-page .video-item:nth-child(3n) {
margin-right: 0;
}
.library-page .image-item img, .library-page .video-item img {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.library-page .image-item .item-img, .library-page .video-item .item-img {
display: block;
position: relative;
overflow: hidden;
padding-bottom: 70%;
}
.library-page .image-item .item-title, .library-page .video-item .item-title {
color: #000;
line-height: 20px;
}
.library-page .video-item .item-title {
margin: 10px;
}
.library-page .video-item .item-img::before {
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background-color: #fff;
background-position: -169px -118px;
}
.library-page .image-item .item-text {
padding: 10px;
}
.library-page .icon-box {
width: 28px;
height: 28px;
display: block;
margin: 8px 0 auto auto;
background-position: -132px -132px;
}
.contact-page {
padding-bottom: 40px;
color: #2A2A2A;
}
.contact-page .col-left, .contact-page .col-right {
width: 100%;
}
.contact-page .col-right {
margin-top: 15px;
border-radius: 4px;
border: 1px solid #ECECEC;
padding: 13px 10px;
background: #fff;
}
.contact-page .item-info {
margin-bottom: 15px;
}
.contact-page .item-info .group-title {
font-size: 16px;
font-weight: 600;
line-height: 40px;
text-transform: capitalize;
margin: 0;
}
.contact-page .item {
display: table;
color: #2A2A2A;
font-weight: 400;
line-height: 24px;
text-transform: capitalize;
margin: 10px 0 20px 0;
padding: 0 0 0 40px;
position: relative;
}
.contact-page .item:last-child {
text-transform: unset;
}
.contact-page .icons, .contact-page .recruit-item .item-featured::after, .recruit-item .contact-page .item-featured::after, .contact-page .recruit-search-group .icon-search::before, .recruit-search-group .contact-page .icon-search::before, .contact-page .custom-nav-2 .arrow, .custom-nav-2 .contact-page .arrow, .contact-page .home-shareholder-list .item::before, .home-shareholder-list .contact-page .item::before, .contact-page .home-shareholder-list a::after, .home-shareholder-list .contact-page a::after, .contact-page .shareholder-article-container .item-time::before, .shareholder-article-container .contact-page .item-time::before, .contact-page .shareholder-report-page .report-item .item-time::before, .shareholder-report-page .report-item .contact-page .item-time::before, .contact-page .product-detail-page .pd-btn-group .btn-phone::before, .product-detail-page .pd-btn-group .contact-page .btn-phone::before, .contact-page .pd-ask-item .item-title::before, .pd-ask-item .contact-page .item-title::before, .contact-page .distributor-filter-result .icon-map::before, .distributor-filter-result .contact-page .icon-map::before, .contact-page .distributor-filter-result .icon-tel::before, .distributor-filter-result .contact-page .icon-tel::before, .contact-page .distributor-filter-result .icon-home::before, .distributor-filter-result .contact-page .icon-home::before, .contact-page .distributor-branch-container .group-title::before, .distributor-branch-container .contact-page .group-title::before, .contact-page .library-page .video-item .item-img::before, .library-page .video-item .contact-page .item-img::before {
width: 24px;
height: 25px;
position: absolute;
top: 0px;
left: 0;
}
.contact-page .icon-map {
background-position: -269px -45px;
}
.contact-page .icon-tel {
background-position: -192px -43px;
}
.contact-page .icon-mail {
background-position: -232px -40px;
}
.contact-page .page-title {
margin: 0 0 10px 0;
line-height: 30px;
font-size: 21px;
font-weight: 600;
text-transform: uppercase;
}
.contact-page .input-item {
display: block;
margin-bottom: 16px;
line-height: 24px;
width: 100%;
}
.contact-page .input-item:nth-child(2) {
margin-right: 8px;
}
.contact-page .input-item:nth-child(2), .contact-page .input-item:nth-child(3) {
width: calc(50% - 4px);
}
.contact-page .input-item b {
display: block;
font-weight: 500;
margin: 0 0 5px 0;
}
.contact-page .input-item input, .contact-page .input-item textarea {
display: block;
width: 100%;
height: 40px;
padding: 0 12px;
border-radius: 4px;
border: 1px solid #E1E1E1;
margin: 0;
color: #959595;
font-size: 16px;
}
.contact-page .input-item textarea {
max-height: 300px;
min-height: 220px;
padding: 10px 12px;
}
.contact-page .btn-submit {
display: block;
width: 100%;
max-width: 170px;
line-height: 34px;
text-align: center;
border-radius: 5px;
background: #129046;
color: #FFF;
font-weight: 700;
margin: 0 auto 10px;
}
.recruit-page .page-title-group {
font-size: 16px;
line-height: 34px;
margin: 6px 0 10px 0;
text-align: center;
}
.recruit-page .page-title-group P {
margin: 0;
display: none;
}
.recruit-page .global-title-background {
display: block !important;
margin: auto;
padding: 0;
line-height: 45px;
}
.recruit-page .global-title-background::before {
content: none;
}
.recruit-search-group {
margin: 10px auto 14px;
border-radius: 5px;
border: 1px solid #E1E1E1;
background: #FFF;
position: relative;
overflow: hidden;
}
.recruit-search-group input {
width: calc(100% - 40px);
height: 40px;
padding: 0 10px;
font-size: 16px;
font-weight: 500;
border: 0;
margin: 0;
}
.recruit-search-group input::-moz-placeholder {
color: #BDBDBD;
font-size: 13px;
}
.recruit-search-group input::placeholder {
color: #BDBDBD;
font-size: 13px;
}
.recruit-search-group .icon-search {
background: linear-gradient(90deg, #1A532B -7.52%, #36894D 57.52%);
width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.recruit-search-group .icon-search::before {
content: "";
filter: brightness(100);
position: absolute;
inset: 0;
background-position: 5px 4px;
background-size: 250px 275px;
}
.recruit-list-group .col-left {
position: relative;
overflow: hidden;
}
.recruit-list-group .group-title {
font-weight: 500;
line-height: 15px;
margin: 0 0 10px;
}
.recruit-list-group .department-list {
display: block;
width: 100%;
height: 40px;
margin: 10px 0;
border-radius: 3px;
border: 1px solid #D6D6D6;
background: #F8F8F8;
padding: 0 10px;
}
.recruit-item {
padding: 15px 0;
border-bottom: 1px solid #E1E1E1;
position: relative;
font-size: 13px;
display: flex;
flex-wrap: wrap;
}
.recruit-item * {
width: 100%;
}
.recruit-item p {
margin: 8px 0 0;
}
.recruit-item b {
font-weight: 600;
}
.recruit-item .item-title {
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 600;
display: table;
line-height: 22px;
position: relative;
}
.recruit-item .item-featured::after {
content: "";
width: 20px;
height: 20px;
display: inline-block;
background-position: -6px -171px;
vertical-align: bottom;
margin-left: 9px;
position: relative;
top: 0;
}
.recruit-item .item-btn {
line-height: 36px;
width: 100%;
max-width: 140px;
font-weight: 600;
font-size: 15px;
display: block;
text-align: center;
overflow: hidden;
padding: 1.6px;
margin: 8px 0 0;
order: 1;
}
.recruit-item .item-btn span {
display: block;
background: #fff;
}
.recruit-detail-page .page-title {
font-size: 18px;
font-weight: 700;
line-height: 26px;
display: inline;
margin: 0 0 7px 0;
}
.recruit-detail-page .recruit-time-left {
margin: 0 0 7px 0;
display: inline-block;
color: #FF2D2D;
}
.recruit-detail-page .recruit-time-left {
font-size: 13px;
}
.recruit-detail-page .page-address {
margin: 0 0 16px 0;
font-size: 13px;
}
.recruit-detail-page .page-address b {
font-weight: 600;
}
.recruit-detail-content {
margin: 16px 0 30px;
}
.recruit-detail-content .recruit-content-group {
font-size: 13px;
line-height: 20px;
}
.recruit-detail-content .recruit-content-group .title {
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 27px;
text-transform: uppercase;
margin: 0 0 6px 0;
}
.recruit-detail-content .recruit-content-group * {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
.recruit-detail-content .recruit-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: #fff;
border-radius: 5px;
border: 1px solid #E1E1E1;
padding: 16px 0;
text-align: center;
margin-bottom: 15px;
}
.recruit-detail-content .recruit-info .item {
width: 50%;
text-align: center;
position: relative;
border-right: 1px solid #959595;
font-size: 16px;
line-height: 22px;
padding: 0 10px;
}
.recruit-detail-content .recruit-info .item:nth-child(2n) {
border: 0;
}
.recruit-detail-content .recruit-info .item:nth-child(2) {
color: #459E3F;
}
.recruit-detail-content .recruit-info .item:nth-child(3) {
color: #FF881A;
}
.recruit-detail-content .recruit-info .item:nth-child(4) {
color: #FF431A;
}
.recruit-detail-content .recruit-info .item:nth-child(n+3) {
margin-top: 30px;
}
.recruit-detail-content .recruit-info .item * {
display: block;
}
.recruit-detail-content .recruit-info .item b {
font-weight: 700;
margin-top: 5px;
}
.recruit-detail-content .icons, .recruit-detail-content .custom-nav-2 .arrow, .custom-nav-2 .recruit-detail-content .arrow, .recruit-detail-content .home-shareholder-list .item::before, .home-shareholder-list .recruit-detail-content .item::before, .recruit-detail-content .home-shareholder-list a::after, .home-shareholder-list .recruit-detail-content a::after, .recruit-detail-content .shareholder-article-container .item-time::before, .shareholder-article-container .recruit-detail-content .item-time::before, .recruit-detail-content .shareholder-report-page .report-item .item-time::before, .shareholder-report-page .report-item .recruit-detail-content .item-time::before, .recruit-detail-content .product-detail-page .pd-btn-group .btn-phone::before, .product-detail-page .pd-btn-group .recruit-detail-content .btn-phone::before, .recruit-detail-content .pd-ask-item .item-title::before, .pd-ask-item .recruit-detail-content .item-title::before, .recruit-detail-content .distributor-filter-result .icon-map::before, .distributor-filter-result .recruit-detail-content .icon-map::before, .recruit-detail-content .distributor-filter-result .icon-tel::before, .distributor-filter-result .recruit-detail-content .icon-tel::before, .recruit-detail-content .distributor-filter-result .icon-home::before, .distributor-filter-result .recruit-detail-content .icon-home::before, .recruit-detail-content .distributor-branch-container .group-title::before, .distributor-branch-container .recruit-detail-content .group-title::before, .recruit-detail-content .library-page .video-item .item-img::before, .library-page .video-item .recruit-detail-content .item-img::before, .recruit-detail-content .recruit-search-group .icon-search::before, .recruit-search-group .recruit-detail-content .icon-search::before, .recruit-detail-content .recruit-item .item-featured::after, .recruit-item .recruit-detail-content .item-featured::after {
width: 30px;
height: 30px;
margin: 0 auto 5px auto;
}
.recruit-detail-content .icon-user {
background-position: -44px -171px;
}
.recruit-detail-content .icon-calendar {
background-position: -95px -171px;
}
.recruit-detail-content .icon-cash {
background-position: -141px -170px;
}
.recruit-detail-content .icon-clock {
background-position: -189px -171px;
}
.recruit-form-group {
margin-bottom: 40px;
}
.recruit-form-group .recruit-submit {
display: block;
margin: 0 0 12px 0;
border-radius: 5px;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 49px;
width: 100%;
border: 0;
padding: 0;
}
.recruit-form-group .recruit-form-input {
padding: 16px 12px;
border-radius: 5px;
border: 1px solid #E1E1E1;
background: #FFF;
}
.recruit-form-group .input-item {
display: block;
width: 100%;
margin: 0 0 12px 0;
border-radius: 5px;
border: 1px solid #E1E1E1;
background: #FFF;
height: 40px;
padding: 0 12px;
}
.recruit-form-group .input-item::-moz-placeholder {
font-size: 14px;
}
.recruit-form-group .input-item::placeholder {
font-size: 14px;
}
.recruit-form-group .recruit-upload-group {
display: block;
margin: 0;
}
.recruit-form-group .btn-upload {
border-radius: 5px;
background: #f3f3f3;
border: 1px dashed #959595;
color: #959595;
font-size: 14px;
margin: 0;
cursor: pointer;
line-height: 40px;
text-align: center;
}
.about-page-container {
overflow: hidden;
line-height: 21px;
}
.about-page-container img {
display: block;
margin: auto auto 12px;
width: auto;
}
.about-page-container .about-item, .about-page-container .model-development-container, .about-page-container .reward-container, .about-page-container .home-members-group, .about-page-container .page-value-footer, .about-page-container .distributor-header {
margin-bottom: 40px;
}
.about-page-container .global-title-background {
padding: 10px 20px;
margin-bottom: 12px;
letter-spacing: -0.9px;
}
.about-page-container .item-fav {
margin: 0 0 12px;
position: relative;
padding: 0 0 0 32px;
line-height: 24px;
}
.about-page-container .item-fav b {
font-size: 20px;
font-weight: 700;
}
.about-page-container .item-fav::before {
content: "";
width: 24px;
height: 24px;
border-radius: 50%;
background: url("https://traphaco8.hurasoft.com/static/assets/default/images/favicon.ico") no-repeat center;
background-color: #fff;
background-size: calc(100% - 6px);
position: absolute;
top: 0;
left: 0;
filter: drop-shadow(0px 2px 10px rgba(106, 106, 106, 0.25));
}
.about-page-container .box-btn {
display: table;
line-height: 30px;
color: #FFF;
font-size: 13px;
font-weight: 700;
text-align: center;
border-radius: 13px 0px;
padding: 0 14px;
margin: 12px auto;
text-transform: uppercase;
}
.about-page-container .box-btn::after {
content: "»";
font-size: 20px;
line-height: 1;
vertical-align: text-bottom;
font-weight: 400;
margin: 0 0 0 3px;
position: relative;
top: 1px;
}
.about-page-container .number-image {
display: inline-block;
width: 66px;
height: 47px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: bottom;
}
.about-page-container .page-introduce-group {
font-size: 16px;
line-height: 24px;
}
.about-page-container .distributor-header {
padding: 21px 0;
}
.about-page-container .distributor-header .container {
display: block;
padding-left: 0;
padding-right: 0;
}
.about-page-container .distributor-header p {
text-align: left;
}
.about-page-container .distributor-header .group-title {
color: #F0F5FA;
text-align: center;
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
margin: 0 0 25px;
}
.about-page-container .distributor-header .item {
margin: 0 0 25px 0;
padding: 0 10px;
}
.about-page-container .page-value-footer .col-left {
margin-bottom: 21px;
}
.about-page-container .page-value-footer .col-left img {
max-height: 103px;
margin: auto auto 8px 0;
}
.about-page-container .page-value-footer .box-btn {
margin: 12px auto 12px 0;
}
.about-page-container .home-members-group {
padding: 30px 10px;
}
.about-page-container .reward-container {
text-align: center;
}
.about-page {
line-height: 21px;
overflow: hidden;
padding-bottom: 40px;
}
.about-page img {
display: block;
margin: auto;
width: auto;
}
.about-page .global-title-background {
font-size: 23px;
padding: 6px 10px 10px 10px;
}
.about-page .page-tab-group {
display: block;
width: 100%;
border-radius: 3px;
background: #129046;
height: 40px;
color: #fff;
font-weight: 600;
margin: 0 0 20px 0;
padding: 0 10px;
}
.about-page .number-image {
display: inline-block;
width: 66px;
height: 47px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: bottom;
}
.model-development-container {
line-height: 21px;
}
.model-development-container .col-right {
text-align: right;
}
.model-development-container p {
margin: 0 0 12px 0;
}
.model-development-container .box-btn {
margin: 12px 0 12px auto;
}
.model-development-container .global-title-background {
padding: 7px 0 15px 0;
line-height: 30px;
margin: auto 0 12px auto;
}
.model-development-container .col-left {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 30px 10px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.model-development-container .col-left > .item {
z-index: 2;
}
.model-development-container .item {
position: relative;
color: #0A753F;
padding: 106px;
border-radius: 50%;
border: 1px solid #128F3D;
}
.model-development-container .item-2 {
display: flex;
align-items: center;
justify-content: center;
margin: -70px 0 0 0;
}
.model-development-container .item-2 .item {
margin: 0 -24px;
}
.model-development-container .item-2 .item:nth-child(1) {
color: #439339;
border-color: #439339;
}
.model-development-container .item-2 .item:nth-child(2) {
color: #FF7438;
border-color: #FF7438;
}
.model-development-container .item-text {
margin: 0;
text-align: center;
font-size: 21px;
font-weight: 700;
line-height: 32px;
text-transform: uppercase;
position: absolute;
inset: 10px;
border-radius: 50%;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, #F8FDFA 95.12%, #EEFBF3 100%);
filter: drop-shadow(0px 1.8172010183px 9.0860052109px rgba(106, 106, 106, 0.25));
}
.about-history-page .page-introduce-group {
text-align: center;
margin: auto;
color: #313131;
font-size: 16px;
line-height: 24px;
background: url(../images/global-bg-logo.png) no-repeat center;
background-size: contain;
padding: 10px 10px 40px;
}
.about-history-page .number-image {
display: inline-block;
width: 78px;
height: 55px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: bottom;
}
.page-summary-group {
background: #F4F9F4;
padding: 25px 0;
}
.page-summary-group img {
display: block;
width: auto;
margin: auto;
max-width: 320px;
}
.page-summary-group p {
color: #313131;
margin: 0 0 25px 0;
}
.page-summary-group .global-title-background {
padding: 7px 25px 7px 0;
margin: 0 0 7px 0;
}
.page-summary-group .global-title-background::before {
background-size: cover;
}
.model-development-group {
background-position: bottom;
background-repeat: no-repeat;
padding: 40px 0 17px 0;
margin: 0 -10px 30px -10px;
}
.model-development-group .model-development {
text-align: center;
margin: 0 auto 30px auto;
padding: 0 10px;
}
.model-development-group .model-development p {
margin: 0;
}
.model-development-group .global-title-background {
font-size: 23px;
margin: 0;
padding: 10px 0 18px 0;
display: block;
}
.model-development-detail {
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.model-development-detail p {
margin: 0;
}
.model-development-detail svg {
width: -webkit-fill-available;
}
.model-development-detail .item {
text-align: center;
position: relative;
color: #FF7438;
font-size: 13px;
font-weight: 700;
line-height: 19px;
text-transform: uppercase;
width: 48%;
}
.model-development-detail .item:nth-child(1) {
width: 100%;
}
.model-development-detail .item:nth-child(1) .item-text {
display: block;
top: 20px;
}
.model-development-detail .item:nth-child(1) .item-text img {
margin: auto;
}
.model-development-detail .item:nth-child(n+2) {
margin-top: -62px;
}
.model-development-detail .item:nth-child(n+2) .item-text {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 33px 10px 10px 20px;
}
.model-development-detail .item:nth-child(n+2) .item-text::before {
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(#08733F, #B5D033);
position: absolute;
top: 10px;
left: 13px;
}
.model-development-detail .item:nth-child(n+2) .item-text::after {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #fff;
position: absolute;
top: 12px;
left: 15px;
}
.model-development-detail .item:nth-child(2) {
right: -6px;
color: #439339;
}
.model-development-detail .item:nth-child(2) img {
margin-top: 12px;
}
.model-development-detail .item:nth-child(3) {
left: -6px;
color: #0A753F;
}
.model-development-detail .item:nth-child(3) .item-text {
padding: 33px 10px 10px 20px;
}
.model-development-detail .item:nth-child(3) .item-text::before {
background: linear-gradient(90deg, #89C466, #037340);
left: unset;
right: 13px;
}
.model-development-detail .item:nth-child(3) .item-text::after {
left: unset;
right: 15.25px;
}
.model-development-detail .item:nth-child(3) p {
order: 1;
}
.model-development-detail .item img {
max-height: 90px;
margin: auto;
}
.model-development-detail .item-text {
position: absolute;
inset: 0;
}
.model-development-detail .item-text span {
display: block;
}
.model-development-detail .item-text img {
display: block;
width: auto;
max-width: 214px;
margin: unset;
}
.model-development-detail .item-circle-middle {
padding: 46px;
position: relative;
border-radius: 50%;
color: #fff;
background: linear-gradient(#08733F, #B5D033);
margin: 0;
position: absolute;
top: 52%;
}
.model-development-detail .item-circle-middle * {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #fff;
font-weight: 700;
font-size: 12px;
position: absolute;
inset: 6px;
}
.history-line-container {
text-align: center;
}
.history-line-container .global-title-background {
padding: 0;
line-height: 50px;
margin: 0 auto 12px;
}
.history-line-container .item-middle {
position: relative;
margin-bottom: 20px;
}
.history-line-container .item-middle img {
max-height: 250px;
}
.history-line-container .item-middle::before, .history-line-container .item-middle::after {
content: "";
max-width: 300px;
width: 100%;
height: 1px;
background: #bdbdbd;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.history-line-container .item-middle::after {
top: unset;
bottom: 0;
}
.history-line-holder {
text-align: center;
}
.history-line-holder img {
margin-bottom: 13px;
}
.history-line-holder .item {
display: flex;
flex-wrap: wrap;
padding: 17px 0;
position: relative;
}
.history-line-holder .item::before {
content: "";
max-width: 300px;
width: 100%;
height: 1px;
background: #bdbdbd;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.history-line-holder .item:first-child {
border: 0;
padding-top: 0;
}
.history-line-holder .item:first-child::before {
content: none;
}
.history-line-holder .item-text {
width: 100%;
order: 1;
}
.history-line-holder .year {
font-size: 32px;
font-style: italic;
font-weight: 500;
margin: 0 0 12px 0;
padding: 0;
line-height: 1.5;
}
.history-line-holder .year::before {
content: none;
}
.history-line-holder .item-last {
padding-top: 30px;
}
.about-value-page {
text-align: center;
}
.about-value-page .global-title-background::before {
background-size: cover;
}
.about-value-page .page-banner-holder {
margin-bottom: 40px;
color: #313131;
font-size: 15px;
line-height: 23px;
}
.about-value-page .page-banner-holder .item {
padding: 34px 12px 20px;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
}
.about-value-page .page-banner-holder .title {
font-size: 24px;
font-weight: 700;
line-height: 46px;
text-transform: uppercase;
margin: 0 0 20px 0;
}
.about-value-page .page-banner-holder b {
font-size: 20px;
}
.about-value-page .page-banner-holder .summary {
max-width: 300px;
margin: auto;
}
.about-value-page .page-banner-holder .icons, .about-value-page .page-banner-holder .custom-nav-2 .arrow, .custom-nav-2 .about-value-page .page-banner-holder .arrow, .about-value-page .page-banner-holder .home-shareholder-list .item::before, .home-shareholder-list .about-value-page .page-banner-holder .item::before, .about-value-page .page-banner-holder .home-shareholder-list a::after, .home-shareholder-list .about-value-page .page-banner-holder a::after, .about-value-page .page-banner-holder .shareholder-article-container .item-time::before, .shareholder-article-container .about-value-page .page-banner-holder .item-time::before, .about-value-page .page-banner-holder .shareholder-report-page .report-item .item-time::before, .shareholder-report-page .report-item .about-value-page .page-banner-holder .item-time::before, .about-value-page .page-banner-holder .product-detail-page .pd-btn-group .btn-phone::before, .product-detail-page .pd-btn-group .about-value-page .page-banner-holder .btn-phone::before, .about-value-page .page-banner-holder .pd-ask-item .item-title::before, .pd-ask-item .about-value-page .page-banner-holder .item-title::before, .about-value-page .page-banner-holder .distributor-filter-result .icon-map::before, .distributor-filter-result .about-value-page .page-banner-holder .icon-map::before, .about-value-page .page-banner-holder .distributor-filter-result .icon-tel::before, .distributor-filter-result .about-value-page .page-banner-holder .icon-tel::before, .about-value-page .page-banner-holder .distributor-filter-result .icon-home::before, .distributor-filter-result .about-value-page .page-banner-holder .icon-home::before, .about-value-page .page-banner-holder .distributor-branch-container .group-title::before, .distributor-branch-container .about-value-page .page-banner-holder .group-title::before, .about-value-page .page-banner-holder .library-page .video-item .item-img::before, .library-page .video-item .about-value-page .page-banner-holder .item-img::before, .about-value-page .page-banner-holder .recruit-search-group .icon-search::before, .recruit-search-group .about-value-page .page-banner-holder .icon-search::before, .about-value-page .page-banner-holder .recruit-item .item-featured::after, .recruit-item .about-value-page .page-banner-holder .item-featured::after {
display: block;
width: 110px;
height: 60px;
margin: auto auto 20px auto;
background-size: 375px 400px;
}
.about-value-page .page-banner-holder .icon-1 {
background-position: -7px -275px;
}
.about-value-page .page-banner-holder .icon-2 {
background-position: -155px -275px;
}
.about-value-page .page-value-footer .col-left img {
max-width: 270px;
margin: auto auto auto 0;
}
.about-value-page .page-value-footer p {
margin: 10px 0;
text-align: left;
}
.about-value-list {
position: relative;
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
min-height: 250px;
margin: 40px 0;
}
.about-value-list .item {
color: #414141;
font-size: 13px;
font-weight: 600;
text-transform: capitalize;
display: flex;
align-items: center;
flex-wrap: wrap;
position: absolute;
}
.about-value-list .item:nth-child(1) {
bottom: 0;
right: 75%;
}
.about-value-list .item:nth-child(2) {
bottom: 30%;
right: 60%;
}
.about-value-list .item:nth-child(2) .item-image {
border-color: #F9B731;
}
.about-value-list .item:nth-child(3) {
display: block;
bottom: 47%;
right: 52%;
}
.about-value-list .item:nth-child(3) p {
margin: 0 0 12px 0;
}
.about-value-list .item:nth-child(3) .item-image {
border-color: #FF8819;
}
.about-value-list .item:nth-child(4) {
display: block;
bottom: 47%;
left: 52%;
}
.about-value-list .item:nth-child(4) p {
margin: 0 0 12px 0;
}
.about-value-list .item:nth-child(4) .item-image {
border-color: #68C71D;
}
.about-value-list .item:nth-child(5) {
bottom: 30%;
left: 60%;
}
.about-value-list .item:nth-child(5) .item-image {
border-color: #459E3F;
}
.about-value-list .item:nth-child(5) p {
text-align: right;
}
.about-value-list .item:nth-child(6) {
bottom: 0;
left: 75%;
}
.about-value-list .item:nth-child(6) .item-image {
border-color: #129046;
}
.about-value-list .item:nth-child(6) p {
text-align: right;
}
.about-value-list p {
margin: 0;
width: 100%;
text-align: left;
}
.about-value-list .item-image {
display: block;
width: 58px;
height: 58px;
margin: auto;
background-position: center;
background-repeat: no-repeat;
background-size: 22px;
background-color: #fff;
border-radius: 50%;
border: 1px solid #F8A03B;
}
.about-value-list .value-title {
width: 100%;
max-width: 200px;
border-radius: 300px 300px 0 0;
color: #FFF;
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-transform: capitalize;
background: linear-gradient(90deg, #89C466 0%, #037340 101.06%);
padding: 32px 10px 20px 10px;
margin: 0;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
z-index: 1;
}
.about-reward-page {
padding-top: 40px;
}
.about-reward-page .reward-group {
margin-bottom: 40px;
text-align: center;
}
.about-reward-page .item {
position: relative;
margin: auto;
text-transform: capitalize;
}
.about-reward-page .item .image {
padding-bottom: 100%;
position: relative;
margin: auto auto 15px auto;
}
.about-reward-page .item p {
margin: 0;
}
.about-associated-company .company-item {
margin: 40px 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
color: #414141;
font-size: 13px;
}
.about-associated-company .company-item .image, .about-associated-company .company-item .text {
width: 100%;
}
.about-associated-company .company-item .image {
order: 1;
}
.about-associated-company .company-item p {
margin: 0;
}
.about-associated-company .company-item .item {
position: relative;
padding: 0 0 0 20px;
}
.about-associated-company .company-item .item::before {
content: "●";
font-size: 10px;
position: absolute;
left: 5px;
}
.about-associated-company .company-name {
font-size: 16px;
font-weight: 700;
line-height: 20px;
}
.about-corporate-culture-page img {
margin: 15px auto;
}
.about-corporate-culture-page .item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
font-size: 13px;
}
.about-leader-page .leader-tab-group {
line-height: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.about-leader-page .leader-tab-group a {
margin: 0 0 10px 0;
padding: 6px;
color: #959595;
text-transform: uppercase;
border-radius: 5px;
width: calc(50% - 5px);
border-radius: 3px;
border: 1px solid #BDBDBD;
background: #FFF;
text-align: center;
}
.about-leader-page .leader-tab-group a.current {
border-color: #129046;
font-weight: 700;
}
.about-leader-page .leader-image {
display: none;
}
.about-leader-page .leader-image.active {
display: block;
}
@media (max-width: 380px) {
.home-distributed-system-group .global-title-background {
padding: 0;
}
.home-distributed-system-group .item {
font-size: 12px;
width: 43%;
}
.home-distributed-system-group .item:nth-child(odd) {
margin-right: 0;
}
.home-distributed-system-group .item:nth-child(n+3) {
padding-top: 10px;
margin-top: 10px;
}
.home-distributed-system-group .number {
font-size: 26px;
line-height: 32px;
}
.distributor-page .box-btn-group a {
font-size: 13px;
}
.distributor-header .item {
font-size: 13px;
}
.distributor-header .item-count {
font-size: 26px;
line-height: 30px;
}
.distributor-header .item-count::after {
line-height: 1;
}
.contact-page .input-item:nth-child(2),
.contact-page .input-item:nth-child(3) {
width: 100%;
margin: 0 0 16px 0;
}
.recruit-detail-content .recruit-info .item {
font-size: 13px;
line-height: 18px;
}
.model-development-container .item {
padding: 88px;
}
.model-development-container .item-2 {
margin: -60px 0 0 0;
}
.model-development-container .item-text {
font-size: 16px;
line-height: 22px;
}
.model-development-detail .item-circle-middle {
padding: 37px;
white-space: nowrap;
top: 49%;
}
.model-development-detail .item-circle-middle * {
font-size: 8px;
}
.model-development-detail .item {
font-size: 11px;
line-height: 16px;
}
.model-development-detail .item:nth-child(n+2) {
margin-top: -72px;
}
.model-development-detail .item:nth-child(n+2) .item-text {
padding: 33px 0px 0px 20px;
}
.model-development-detail .item:nth-child(n+2) .item-text::before {
content: "";
width: 13px;
height: 13px;
top: 20px;
left: 13px;
}
.model-development-detail .item:nth-child(n+2) .item-text::after {
content: "";
width: 9px;
height: 9px;
top: 22px;
left: 15px;
}
.model-development-detail .item:nth-child(2) {
right: -3px;
}
.model-development-detail .item:nth-child(3) {
left: -3px;
}
.model-development-detail .item:nth-child(3) .item-text::before {
left: unset;
}
.model-development-detail .item:nth-child(3) .item-text::after {
left: unset;
}
.model-development-detail .item img {
max-height: 75px;
}
.about-value-list .value-title {
max-width: 160px;
padding: 30px 10px 10px 10px;
}
.about-value-list .item:nth-child(2), .about-value-list .item:nth-child(5) {
bottom: 28%;
}
.about-value-list .item:nth-child(3), .about-value-list .item:nth-child(4) {
bottom: 43%;
}
}
@media (max-width: 320px) {
.global-title-background {
font-size: 20px;
line-height: 26px;
padding: 6px 10px 10px 10px;
}
.homepage {
font-size: 13px;
}
.homepage .global-title-background {
padding: 6px 10px 10px 10px;
}
.home-box-group .art-item {
width: 100%;
}
.home-box-group .art-item .art-title:first-child {
font-size: 13px;
line-height: inherit;
}
.home-distributed-system-group .number {
font-size: 22px;
}
.home-distributed-system-group .item {
font-size: 11px;
width: calc(50% - 8px);
}
.home-distributed-system-group .distributed-detail {
padding: 0 10px;
bottom: -7px;
}
.home-shareholder-list a {
font-size: 12px;
}
.home-static-group .col-right {
justify-content: center;
}
.home-static-group .item {
width: 50%;
font-size: 12px;
line-height: 18px;
}
.shareholder-cate-list .item {
font-size: 14px;
font-weight: 700;
line-height: 20px;
padding: 18px 10px;
}
.shareholder-cate-list .item-image {
height: 55px;
}
.shareholder-major-container .item {
font-size: 12px;
line-height: 18px;
}
.shareholder-major-container .item-logo {
padding-bottom: 50px;
}
.shareholder-major-container .item-name {
font-size: 13px;
line-height: 18px;
width: calc(100% - 40px);
margin: 0 0 7px 0 !important;
}
.product-page .product-holder .p-item {
width: 100%;
}
.top-product-container .group-title {
font-size: 22px;
font-weight: 700;
}
.distributor-page .box-btn-group a {
font-size: 11px;
}
.distributor-header .item {
font-size: 12px;
line-height: 16px;
}
.distributor-header .item-count {
font-size: 20px;
line-height: 32px;
margin-right: 5px;
}
.distributor-header .item-count::after {
font-size: 16px;
top: -12px;
}
.distributor-branch-container .item {
width: 100%;
}
.distributor-branch-container .item a, .distributor-branch-container .item .group-title {
display: block;
}
.library-page .image-item, .library-page .video-item {
width: 100%;
}
.recruit-detail-content .recruit-info .item {
font-size: 12px;
line-height: 16px;
padding: 0 5px;
}
.model-development-container .item {
padding: 75px;
}
.model-development-container .item-2 {
margin: -53px 0 0 0;
}
.model-development-container .item-2 .item {
margin: 0 -20px;
}
.model-development-container .item-text {
font-size: 13px;
line-height: 19px;
}
.model-development-detail .item:nth-child(n+2) {
margin-top: -80px;
}
.model-development-detail .item:nth-child(n+2) img {
max-height: 55px;
}
.model-development-detail .item:nth-child(n+2) .item-text {
padding: 0 10px;
align-items: center;
justify-content: space-between;
}
.model-development-detail .item:nth-child(n+2) .item-text::before {
top: 32px;
}
.model-development-detail .item:nth-child(n+2) .item-text::after {
top: 33.5px;
}
.model-development-detail .item-circle-middle {
padding: 30px;
white-space: nowrap;
top: 47%;
}
.model-development-detail .item-circle-middle * {
inset: 4px;
}
.about-value-list {
min-height: 190px;
}
.about-value-list .item {
font-size: 10px;
}
.about-value-list .item:nth-child(2), .about-value-list .item:nth-child(5) {
bottom: 28%;
}
.about-value-list .item:nth-child(3), .about-value-list .item:nth-child(4) {
bottom: 43%;
}
.about-value-list .item:nth-child(6) {
margin: auto 6px auto auto;
}
.about-value-list .value-title {
max-width: 130px;
padding: 18px 10px 5px 10px;
font-size: 13px;
line-height: 20px;
}
.about-value-list .item-image {
width: 40px;
height: 40px;
background-size: 18px;
}
.about-value-list p {
margin: 0 !important;
}
}/*# sourceMappingURL=mobile_css.css.map */