ducdt/du_an_khach_hang
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
cb8df0614132bc281c6d6ca0cb02e4f0ac2fd3b6
du_an_khach_hang/Traphaco/scss/mobile_css.scss

4090 lines
94 KiB
SCSS
Raw Normal View History

13/12/2023
2023-12-13 13:47:38 +07:00
*, ::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: .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: .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 {
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: .5rem!important
}
.mt-3 {
margin-top: 1rem!important;
}
.mb-2{
margin-bottom: .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: .5rem!important;
}
.pt-3, .py-3 {
padding-top: 1rem!important;
}
.border-0{
border: 0 !important;
}
.p-15{
padding: 0 15px;
}
.hidden-scroll {
&::-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 .15s ease-in-out,box-shadow .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{
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: .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;-ms-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{
color: #0D642B;
}
.color-main-2{
color: #129046;
}
.color-text{
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{font-size: inherit;font-weight: inherit;line-height: inherit;margin: 0;}
.line-clamp-2{text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{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{
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;
&::before{
content: '';
position: absolute;
bottom: 0;
left: -10px;
right: -10px;
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
background: linear-gradient(transparent, #fff);
height: 300px;
}
}
.btn-html-content{
text-align: center;
padding: 16px;
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: .15s all;
font-size: 13px;
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{
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;
a{
color: #414141;
}
ol, ul{
display: flex;
align-items: center;
flex-wrap: wrap;
}
li{
display: flex;
align-items: center;
&::after{
content:'\276F';
padding: 0 10px;
font-weight: 400;
font-size: 12px;
margin-top: 1px;
}
&:last-child{
&::after{
content: none;
}
}
}
h1{
@extend .inherit;
}
}
.global-other-breadcrumb{
font-weight: 600;
color: #fff;
padding: 160px 0;
background-repeat: no-repeat;
background-size: cover;
line-height: 30px;
a{
color: #fff;
}
.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;
a{
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
background: #F4F4F4;
text-align: center;
color: #333;
margin: 0 5px;
transition: .12s all;
overflow: hidden;
font-size: 11px;
&.current{
background: #129046;
color: #fff;
font-weight: 700;
* {
filter: invert(1) brightness(100);
}
}
}
.icon-prev, .icon-next {
background: url(../images/global-icon-left.png) no-repeat 13px center;
background-size: 5px;
font-size: 0 !important;
display: block;
height: 100%;
}
.icon-next {
transform: rotate(-180deg);
}
}
.custom-nav{
.owl-nav {
margin: 0;
button{
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 !important;
background: unset !important;
&.disabled{
display: none;
}
}
.owl-prev {
left: 0;
}
.owl-next {
right: 0;
}
.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: .2s all;
background-color: #D9D9D9;
border-radius: 0 40px 40px 0;
}
.arrow-next{
transform: rotate(180deg);
}
}
}
.custom-nav-2{
.owl-nav {
margin-top: 24px !important;
}
button{
background: unset !important;
}
.arrow{
@extend .icons;
width: 32px;
height: 32px;
display: block;
background-position: -221px -259px;
}
.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: .2s all;
background: #646464;
span{
display: none;
}
&.active{
width: 33px;
background: #128F3D;
}
}
}
}
.global-title-background{
@extend .color-text;
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;
&::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;
a{
color: #000;
}
img{
@extend .fit-img;
}
.p-img{
position: relative;
padding-bottom: 100%;
margin: 0 0 6px 0;
display: block;
overflow: hidden
}
.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-name{
@extend .line-clamp-2;
margin: 0 0 12px 0;
color: #000;
height: 36px;
font-weight: 600;
line-height: 18px;
text-transform: uppercase;
*{
@extend .inherit;
}
}
.p-summary{
@extend .line-clamp-2;
}
}
.art-item{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
font-size: 13px;
line-height: 19px;
color: #646464;
padding: 12px 0;
img{
display: block;
}
a{
display: block;
color: #000;
}
.art-img {
width: 40%;
margin-right: 8px;
}
.art-text{
width: calc(100% - 40% - 8px);
}
.art-title{
@extend .line-clamp-2;
color: #2A2A2A;
font-size: 13px;
font-weight: 600;
margin: 0 0 10px 0;
*{
@extend .inherit;
}
}
.art-summary{
@extend .line-clamp-2;
margin: 6px 0 10px 0;
display: none;
}
.art-time{
color: #959595;
display: block;
margin: 10px 0 5px 0;
}
.art-btn{
@extend .color-main-2;
display: inline-block;
text-decoration-line: underline;
}
.art-time-holder{
display: flex;
align-items: center;
flex-wrap: wrap;
.art-time{
margin: 0;
}
}
.art-category{
margin: 0 12px 0 0;
color: #FA4646;
text-transform: uppercase;
position: relative;
display: none;
&::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;
.header-logo {
width: 100%;
max-width: 103px;
img{
display: block;
filter: brightness(100);
}
}
.col-right {
display: flex;
align-items: center;
}
.icon-search {
width: 32px;
height: 32px;
margin: 0 12px 0 0;
border-radius: 50%;
background-position: 2px 2px;
background-color: rgba(255,255,255,.2);
background-size: 225px 250px;
filter: brightness(100);
position: relative;
&.active{
background: rgba(255,255,255,.2);
filter: unset;
&::before{
content: '\2716';
height: 100%;
color: #fff;
filter: brightness(100);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.header-language {
border: 0;
padding: 0;
margin: 0 12px 0 0;
background: transparent;
font-size: 15px;
line-height: 32px;
color: #fff;
}
.icon-menu {
width: 20px;
height: 14px;
position: relative;
border-top: 1px solid #fff;
&::before, &::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 5.5px;
height: 1px;
background: #fff;
}
&::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: .3s all;
z-index: -10;
opacity: 0;
visibility: hidden;
&.active {
z-index: 2;
top: 100%;
opacity: 1;
visibility: visible;
}
.search-type-group {
font-weight: 500;
}
.label-container input:checked ~ span{
font-weight: 600;
}
form {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #e1e1e1;
border-radius: 6px;
margin-top: 10px;
overflow: hidden;
}
.icon-search {
filter: unset;
margin: 0 0 0 12px;
border: 0;
}
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;
&::before{
@extend .bg-linear;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10px;
}
.item{
margin: 13px 0;
&:first-child{
margin-top: 0;
.group-title{
margin-top: 13px;
}
}
img{
width: auto;
max-height: 40px;
display: block;
margin: 0 0 10px 0;
}
}
.group-title{
font-weight: 700;
text-transform: capitalize;
margin: 0;
padding: 0 10px;
line-height: 40px;
background: #F1F1F1;
position: relative;
cursor: pointer;
&.active {
&::after{
transform: rotate(45deg);
}
}
&::after{
content: '\25E2';
position: absolute;
right: 10px;
transform: rotate(-45deg);
font-size: 8px;
transition: .2s all;
}
}
.item-list{
display: none;
padding: 10px;
a{
display: table;
color: #000;
line-height: 24px;
font-size: 14px;
margin: 5px 0;
}
}
.footer-bct{
img{
margin: 10px 0 0 0;
max-width: 110px;
}
}
.info-list{
line-height: 22px;
font-size: 14px;
b{
font-weight: 500;
}
p{
margin: 0;
}
a{
color: #000;
display: inline-block;
}
}
.footer-payment{
img{
max-width: 250px;
}
}
}
.footer-info-group {
border-top: 1px solid #129046;
padding-top: 16px;
margin: 16px 0 10px 0;
.group-title {
font-size: 15px;
font-weight: 700;
line-height: 26px;
padding: 0;
background: transparent;
text-transform: unset;
margin: 0 0 5px 0;
&::after{
content: none;
}
}
.info-list{
font-size: 13px;
b{
font-weight: 600;
}
}
}
.footer-social-media{
display: flex;
flex-wrap: wrap;
a{
width: 26px;
height: 26px;
margin: 5px 20px 5px 0;
}
.icon-facebook{
background-position: -85px -8px;
}
.icon-youtube{
background-position: -126px -4px;
}
.icon-google{
background-position: -168px -3px;
}
.icon-twitter{
background-position: -212px -5px;
}
.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;
p{
margin: 0;
width: 100%;
}
}
.global-go-top {
width: 40px;
height: 40px;
position: fixed;
right: -100%;
bottom: 10%;
border-radius: 5px;
transition: .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;
&.active{
right: 10px;
}
}
.homepage {
overflow: hidden;
img{
display: block;
width: auto;
margin: auto;
}
.global-title-background {
margin-left: auto;
margin-right: auto;
padding: 6px 30px 10px 30px;
}
.box-btn{
@extend .bg-linear;
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;
&::after{
content: '\00BB';
font-size: 20px;
line-height: 1;
vertical-align: text-bottom;
font-weight: 400;
margin: 0 0 0 3px;
position: relative;
top: 1px;
}
}
.group-btn{
@extend .color-main-2;
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;
&::after{
content: '\00BB';
font-size: 20px;
line-height: 1;
vertical-align: text-bottom;
font-weight: 400;
margin: 0 0 0 3px;
position: relative;
top: 1px;
}
}
.summary {
font-weight: inherit;
font-size: inherit;
}
}
.home-slider-container {
min-height: 22vh;
margin-bottom: 26px;
.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;
.art-list-holder{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.art-item{
width: calc(50% - 6px);
display: block;
margin: 0 0 16px 0;
padding: 0;
&:first-child {
width: 100%;
.art-title{
font-size: 16px;
line-height: 24px;
margin: 8px 0 4px 0;
}
}
img {
@extend .fit-img;
width: 100%;
height: 100%;
object-fit: cover;
}
.art-btn {
display: none;
}
.art-img {
display: block;
position: relative;
margin: 0 0 8px 0;
width: 100%;
padding-bottom: 66%;
}
.art-text{
width: 100%;
}
.art-time{
margin: 0;
}
}
}
.home-shareholder-list{
.item{
width: calc(100% - 53px);
margin: auto 0 12px auto;
position: relative;
&::before{
@extend .icons;
content: "";
width: 28px;
height: 28px;
position: absolute;
top: 13px;
left: -53px;
background-position: -9px -45px;
}
&::after{
@extend .bg-linear;
content: '';
width: 15px;
height: 1px;
position: absolute;
top: 26px;
left: -20px;
}
}
a{
color: #000;
font-weight: 500;
line-height: 19px;
display: block;
border-radius: 10px;
background: #F7F6F6;
padding: 7px 44px 7px 13px;
position: relative;
&::after{
@extend .icons;
content: '';
width: 23px;
height: 23px;
position: absolute;
top: 15px;
right: 12px;
background-position: -8px -297px;
}
}
span{
@extend .line-clamp-2;
min-height: 38px;
}
}
.home-product-group{
text-align: center;
margin: 60px 0;
.global-title-background{
margin: 0 auto 12px auto;
}
.home-product-child{
display: flex;
align-items: center;
margin: 12px 0 8px 0;
overflow: auto;
white-space: nowrap;
padding-bottom: 2px;
a{
line-height: 34px;
border: 1px solid transparent;
color: #000;
border-radius: 50px;
background: #F3F3F3;
margin: 0 8px 0 0;
padding: 0 22px;
&.current{
@extend .color-main-2;
border-color: #129046;
background: #fff;
font-weight: 600;
font-weight: 700;
}
*{
@extend .inherit;
}
}
}
.p-item{
text-align: left;
border: 0;
}
.box-btn {
margin-top: 15px;
}
}
.home-distributed-system-group {
margin-bottom: 40px;
position: relative;
img{
display: block;
width: 100%;
}
.line, .location {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
svg {
position: absolute;
width: auto;
transform: translate(-50%,-50%);
animation: 28s linear 0s infinite alternate none running dash;
&:nth-child(1){
top: 17%;
left: 56%;
height: 16%;
}
&:nth-child(2){
top: 26%;
left: 43%;
height: 39%;
}
&:nth-child(3){
top: 35%;
left: 55%;
height: 20%;
}
}
.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;
}
}
.mien-bac {
top: 8.5%;
left: 47%;
}
.mien-trung {
top: 24%;
left: 61%;
}
.mien-nam {
top: 44%;
left: 51%;
}
.distributed-detail {
padding: 10px;
position: absolute;
bottom: 0;
p{
margin: 0;
}
}
.global-title-background{
margin: auto auto 10px auto;
&::before{
content: none;
}
}
.distributed-system-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
text-align: right;
width: 41%;
position: relative;
&:nth-child(n+3){
padding-top: 15px;
margin-top: 15px;
&::after{
content: '';
height: 1px;
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 13.13%, #087106 93.18%);
}
}
}
.number {
color: #F46700;
font-size: 36px;
font-weight: 700;
line-height: 50px;
white-space: nowrap;
&::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;
.global-title-background{
margin: auto auto 13px auto;
span{
display: block;
}
}
.summary {
margin: 0;
line-height: 21px;
}
.col-right {
margin-top: 22px;
}
}
.home-reward-group, .home-static-group {
text-align: center;
.summary{
line-height: 21px;
margin: 0 0 20px 0;
}
.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;
.item{
width: calc(100% / 2 - 6px);
&:nth-child(n+3){
margin-top: 12px;
}
}
.col-left{
padding: 0 10px;
}
.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;
.col-right{
align-items: flex-start;
}
.item{
margin: 0 0 20px 0;
width: calc(100% / 3);
color: #459E3F;
text-align: center;
font-size: 15px;
font-weight: 600;
line-height: 22px;
text-transform: capitalize;
p{
margin: 0;
}
}
}
.home-brand-group{
margin: 40px 0 0 0;
text-align: center;
padding: 0 10px 40px 10px;
.global-title-background{
max-width: 300px;
}
.summary {
margin-bottom: 20px;
}
.arrow{
opacity: .3;
width: 19px !important;
height: 38px !important;
background-position: 2px center !important;
}
a{
background: #fff;
display: block;
border-radius: 5px;
overflow: hidden;
}
}
/* === Cổ đông === */
.shareholder-page{
background: #fff;
.shareholder-banner-group {
padding: 10px;
min-height: 200px;
display: flex;
align-items: center;
.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;
}
}
.group-title, .current-page-title{
@extend .color-text;
font-size: 24px;
line-height: 32px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 20px 0;
text-align: center;
}
.current-page-title{
width: 100%;
margin: 20px 0;
text-align: center;
}
.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;
.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;
&:nth-child(2), &:nth-child(3),&:nth-child(6), &:nth-child(7) {
background: #E6FBF2;
}
}
.item-image{
height: 84px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: auto auto 17px auto;
display: block;
}
.item-title{
@extend .inherit;
width: 100%;
height: calc(100% - 127px);
}
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;
.group-title{
margin: 0 0 30px 0;
}
.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;
p{
margin: 0;
}
img {
display: block;
margin: auto;
position: absolute;
inset: 0;
width: auto;
height: 100%;
border-radius: 50px;
}
}
.item-content{
position: absolute;
inset: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
}
.item-logo{
display: block;
max-width: 155px;
width: 100%;
padding-bottom: 73px;
margin: 0 0 4px 0;
position: relative;
}
.item-name{
@extend .color-text;
font-size: 16px;
line-height: 25px;
margin: 0 0 12px 0 !important;
font-weight: 600;
}
}
.shareholder-article-container{
padding-top: 40px;
padding-bottom: 60px;
.btn-view{
color: #FF881A;
font-size: 13px;
line-height: 20px;
padding-right: 12px;
position: relative;
display: table;
margin: 12px auto;
&::after{
content: '\00AB';
transform: rotate(-180deg);
position: absolute;
top: 1px;
right: 0;
}
}
.global-title-background{
display: block;
text-align: center;
margin-bottom: 10px;
&::before{
content: none;
}
}
.item{
color: #767676;
line-height: 20px;
font-size: 13px;
margin-bottom: 12px;
a{
color: #646464;
font-weight: 600;
line-height: 18px;
margin: 0 0 7px 0;
}
img{
@extend .fit-img;
border-radius: 7px;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.item-img{
position: relative;
border-radius: 7px;
padding-bottom: 62%;
display: block;
}
.item-title{
@extend .line-clamp-3;
font-size: 14px;
}
.item-time{
display: block;
padding-left: 25px;
position: relative;
margin: 7px 0 0 0;
&::before{
@extend .icons;
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;
.item{
margin: 0 0 10px 0;
width: calc(100% / 2 - 5px);
&:nth-child(3n){
margin-right: 0;
}
img{
display: block;
margin: auto auto 10px auto;
width: auto;
}
}
.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;
a{
color: #FF881A;
&::after{
content: '\25BE';
margin-left: 2px;
}
}
}
.shareholder-report-page{
.report-list-group {
border-radius: 3px;
border: 1px solid #ECECEC;
padding: 0 12px 12px 12px;
}
.report-timelines-group{
@extend .color-main-2;
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;
appearance: none;
stroke: #FF881A;
}
.report-list{
border-top: 2px solid #128F3D;
}
.report-item{
padding: 12px 0;
position: relative;
color: #959595;
font-size: 13px;
line-height: 20px;
text-transform: capitalize;
border-top: 1px solid #ECECEC;
&:first-child{
border: 0;
}
.item-title{
color: #313131;
font-size: 14px;
font-weight: 600;
line-height: 22px;
text-decoration: underline;
text-transform: capitalize;
margin-bottom: 10px;
display: block;
}
.item-time{
display: block;
padding-left: 25px;
position: relative;
&::before{
@extend .icons;
content: "";
width: 20px;
height: 20px;
position: absolute;
left: 0;
background-position: -54px -7px;
}
}
}
.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;
.p-item{
margin: 0 0 10px 0;
width: calc(100% / 2 - 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;
.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;
.group-title {
font-weight: 500;
margin: 0;
}
.filter-holder{
display: flex;
overflow: auto;
white-space: nowrap;
@extend .hidden-scroll;
}
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;
}
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;
&.current {
background: #118F3E;
color: #fff;
border-color: transparent;
.sort-icon {
filter: brightness(100);
}
}
}
.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;
.group-title {
@extend .color-main-2;
font-size: 16px;
font-weight: 700;
line-height: 26px;
margin: 0 0 12px 0;
}
}
.pd-image-large {
position: relative;
margin: 0 0 10px 0;
border: 1px solid #ECECEC;
}
.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%);
&::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);
}
&.btn-next {
left: unset;
right: 0;
transform: translateY(-50%) rotate(-180deg);
}
}
.pd-gallery-holder{
margin-bottom: 12px;
.item{
display: block;
border: 1px solid #ECECEC;
}
.mz-thumb-selected{
border-color: #118F3E;
}
img{
filter: unset;
}
.owl-nav {
.arrow {
width: 15px;
height: 30px;
background-position: 3px center;
background-size: 5px;
}
}
}
.page-title {
font-size: 18px;
font-weight: 700;
line-height: 26px;
margin: 0 0 11px 0;
}
.pd-functional-group{
font-weight: 500;
font-size: 13px;
margin: 3px 0;
line-height: 30px;
*{
margin: 0 8px 4px 0;
display: inline-block;
border-radius: 50px;
background: #E3F5E4;
color: #000;
padding: 0 18px;
}
}
.pd-brand-group{
font-size: 13px;
margin: 4px 0 8px 0;
line-height: 24px;
a{
@extend .color-main-2;
font-weight: 700;
display: inline-block;
}
}
.pd-manuals-group{
background: #fff;
overflow: hidden;
padding: 12px;
margin: 0 0 16px 0;
font-size: 13px;
line-height: 18px;
*{
line-height: inherit !important;
font-family: inherit !important;
}
p{
margin: 0;
}
td{
padding: 5px;
vertical-align: baseline;
&:nth-child(1){
width: 80px;
}
&:nth-child(2){
> * {
margin: 0;
position: relative;
display: block;
padding-left: 15px;
&::before {
content: '\25CF';
position: absolute;
left: 0;
font-size: 8px;
}
}
}
}
}
.pd-btn-group{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
line-height: 30px;
a{
width: calc(100% / 2 - 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;
}
.btn-contact {
background: #129046;
color: #fff;
}
.btn-address {
@extend .color-main-2;
@extend .bg-linear;
padding: 2px;
span{
background: #fff;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
}
}
.btn-phone {
width: 100%;
background: #DFF0D8;
font-size: 14px;
font-weight: 600;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
&::before{
@extend .icons;
content: "";
width: 20px;
height: 20px;
display: inline-block;
background-position: -234px -135px;
margin-right: 9px;
animation: phonering 1.8s infinite ease-in-out;
}
b{
@extend .color-main-2;
font-size: 20px;
font-weight: 700;
}
}
}
iframe {
height: 300px;
}
}
.pd-ask-item{
padding: 12px 12px 12px 0;
border-bottom: 1px solid #ECECEC;
&:last-child{
border: 0;
}
&.active {
.item-title{
@extend .color-main-2;
&::before{
filter: invert(36%) sepia(43%) saturate(6292%) hue-rotate(134deg) brightness(91%) contrast(86%);
}
&::after{
transform: rotate(90deg);
}
}
}
.item-answer{
display: none;
margin: 12px 0 0 0;
}
.item-title{
color: #313131;
font-size: 13px;
font-weight: 600;
line-height: 21px;
padding-left: 33px;
position: relative;
margin: 0;
cursor: pointer;
&::before{
@extend .icons;
content: "";
width: 21px;
height: 20px;
background-position: -273px -135px;
position: absolute;
top: 2px;
left: 0;
}
&::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;
.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;
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;
&.current{
color: #fff;
background: #129046;
}
}
}
}
.distributor-header{
padding: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
color: #fff;
padding: 45px 0;
.container{
display: flex;
flex-wrap: wrap;
}
.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;
&:nth-child(2n){
border: 0;
}
&:nth-child(n+3){
margin: 26px 0 0 0;
}
}
p{
margin: 0;
text-align: right;
}
.item-count{
position: relative;
color: #FFF;
font-size: 36px;
font-weight: 700;
line-height: 36px;
margin-right: 10px;
&::after{
content: "+";
font-size: 18px;
line-height: 36px;
position: relative;
top: -20px;
}
}
}
.distributor-filter-group{
margin: 0 0 40px 0;
img{
display: block;
width: auto;
margin: auto auto auto 0;
}
.col-left{
margin-bottom: 30px;
}
.global-title-background{
&::before{
content: none;
}
}
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;
}
.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;
}
.address-list{
background: #FFF;
box-shadow: 0px 2px 10px 0px rgba(106, 106, 106, 0.25);
position: relative;
}
.group-title{
color: #FFF;
font-size: 16px;
font-weight: 700;
line-height: 40px;
background: #129046;
padding: 0 10px;
margin: 0;
}
.address-holder{
overflow: auto;
max-height: 320px;
}
.item{
padding: 10px;
border-bottom: 1px solid #e1e1e1;
cursor: pointer;
line-height: 20px;
font-size: 13px;
font-weight: 500;
&.current{
background: #f5f5f5;
}
&:last-child{
border: 0;
}
p{
margin: 0 0 12px 0;
&:last-child{
margin: 0;
}
}
a{
display: inline-block;
color: #000;
margin: 0 5px;
&::after{
content: '|';
padding: 0 0 0 10px;
}
&:last-child::after{
content: none;
}
}
}
.icon-map, .icon-tel, .icon-home {
position: relative;
padding: 0 0 0 30px;
&::before{
@extend .icons;
background-size: 250px 275px;
content: '';
width: 20px;
height: 20px;
position: absolute;
left: 0;
}
}
.icon-map {
&::before{
background-position: -195px -145px;
top: 1px;
}
}
.icon-tel {
&::before{
background-position: -231px -144px;;
}
}
.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;
span{
display: block;
font-size: 16px;
font-weight: 600;
}
b{
display: block;
font-weight: 700;
margin-bottom: 3px;
}
}
.branch-list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.item{
width: 48%;
margin: 0 0 30px 0;
a{
color: #000;
font-size: 13px;
line-height: 22px;
display: table;
}
}
.group-title{
@extend .color-main-2;
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;
&::before{
@extend .icons;
content: "";
width: 22px;
height: 22px;
position: absolute;
top: 3px;
left: 0;
background-position: -275px -214px;
}
}
img{
width: auto;
display: block;
margin: auto;
}
}
.article-page{
padding-bottom: 40px;
.page-banner-group{
position: relative;
padding-bottom: 200px;
img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.group-title{
color: #FFF;
font-size: 20px;
font-weight: 500;
margin: 0;
position: absolute;
bottom: 10px;
&::after{
content: '';
width: 31px;
height: 1px;
background-color: #fff;
position: absolute;
left: calc(100% + 8px);
bottom: 10px;
}
}
}
.article-list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.art-item{
padding: 12px 0;
border-bottom: 1px solid #ECECEC;
line-height: 18px;
.art-title {
@extend .line-clamp-3;
}
}
}
.paging{
padding: 20px 0;
margin: 0;
}
}
.top-article-container {
margin-top: 10px;
padding-bottom: 24px;
margin-bottom: 12px;
border-bottom: 1px solid #ECECEC;
.global-title-background{
margin: 0 auto 12px;
padding: 0;
&::before{
content: none;
}
}
.art-item{
padding: 0;
display: block;
.art-img, .art-text {
width: 100%
}
.art-title, .art-summary{
@extend .line-clamp-2;
margin: 5px 0;
}
.art-title {
font-size: 16px;
line-height: 22px;
}
.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;
.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-item {
display: flex;
justify-content: space-between;
.art-img, .art-text{
width: calc(50% - 4px);
}
}
}
.col-left, .col-right {
width: 100%;
}
.page-title{
color: #2A2A2A;
font-size: 18px;
font-weight: 600;
line-height: 26px;
margin: 0 0 20px 0;
}
.art-detail-time{
color: #959595;
font-size: 13px;
line-height: 20px;
margin: 10px 0 15px 0;
display: none;
}
.art-detail-content{
font-size: 13px;
line-height: 20px;
padding-bottom: 16px;
* {
line-height: inherit !important;
font-family: inherit !important;
}
}
.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;
p{
margin: 0 7px 0 0;
}
}
.art-share-btn{
display: flex;
align-items: center;
justify-content: flex-end;
.icons{
width: 20px;
height: 20px;
margin: 0 3px;
background-size: 250px 275px;
}
.icon-facebook{
background-position: -70px -8px;
}
.icon-twitter{
background-position: -178px -5px;
}
}
}
.art-detail-list-group{
margin: 0 0 30px 0;
color: #2A2A2A;
.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-item{
border-top: 1px solid #ECECEC;
&:first-child{
border: 0;
}
}
}
.library-page{
background: #fff;
padding-bottom: 40px;
.page-banner-group{
position: relative;
padding-bottom: 200px;
img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.group-title{
color: #FFF;
font-size: 20px;
font-weight: 500;
margin: 0;
position: absolute;
bottom: 10px;
&::after{
content: '';
width: 31px;
height: 1px;
background-color: #fff;
position: absolute;
left: calc(100% + 8px);
bottom: 10px;
}
}
}
.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;
.item{
color: #000;
border-radius: 50px;
box-shadow: 0px 0px 0px .8px #e1e1e1;
text-align: center;
padding: 10px 3px;
width: calc(50% - 4px);
&.current{
color: #fff;
background: #129046;
box-shadow: unset;
}
}
}
.library-list-holder{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.image-item, .video-item{
margin: 0 0 10px 0;
width: calc(50% - 5px);
border-radius: 10px;
box-shadow: 0px 0px 0px .8px #BDBDBD;
background: #FFF;
overflow: hidden;
&:nth-child(3n){
margin-right: 0;
}
img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.item-img{
display: block;
position: relative;
overflow: hidden;
padding-bottom: 70%;
}
.item-title {
@extend .line-clamp-3;
color: #000;
line-height: 20px;
*{
@extend .inherit;
}
}
}
.video-item {
.item-title {
margin: 10px;
}
.item-img{
&::before{
@extend .icons;
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;
}
}
}
.image-item{
.item-text{
padding: 10px;
}
}
.icon-box{
width: 28px;
height: 28px;
display: block;
margin: 8px 0 auto auto;
background-position: -132px -132px;
}
}
.contact-page{
padding-bottom: 40px;
color: #2A2A2A;
.col-left, .col-right {
width: 100%;
}
.col-right{
margin-top: 15px;
border-radius: 4px;
border: 1px solid #ECECEC;
padding: 13px 10px;
background: #fff;
}
.item-info {
margin-bottom: 15px;
.group-title{
font-size: 16px;
font-weight: 600;
line-height: 40px;
text-transform: capitalize;
margin: 0;
}
}
.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;
&:last-child{
text-transform: unset;
}
}
.icons {
width: 24px;
height: 25px;
position: absolute;
top: 0px;
left: 0;
}
.icon-map {
background-position: -269px -45px;
}
.icon-tel {
background-position: -192px -43px;
}
.icon-mail {
background-position: -232px -40px;
}
.page-title{
margin: 0 0 10px 0;
line-height: 30px;
font-size: 21px;
font-weight: 600;
text-transform: uppercase;
}
.input-item{
display: block;
margin-bottom: 16px;
line-height: 24px;
width: 100%;
&:nth-child(2){
margin-right: 8px;
}
&:nth-child(2), &:nth-child(3) {
width: calc(100% / 2 - 4px);
}
b{
display: block;
font-weight: 500;
margin: 0 0 5px 0;
}
input, textarea{
display: block;
width: 100%;
height: 40px;
padding: 0 12px;
border-radius: 4px;
border: 1px solid #E1E1E1;
margin: 0;
color: #959595;
font-size: 16px;
}
textarea{
max-height: 300px;
min-height: 220px;
padding: 10px 12px;
}
}
.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;
P{
margin: 0;
display: none;
}
}
.global-title-background{
display: block !important;
margin: auto;
padding: 0;
line-height: 45px;
&::before{
content: none;
}
}
}
.recruit-search-group{
margin: 10px auto 14px;
border-radius: 5px;
border: 1px solid #E1E1E1;
background: #FFF;
position: relative;
overflow: hidden;
input{
width: calc(100% - 40px);
height: 40px;
padding: 0 10px;
font-size: 16px;
font-weight: 500;
border: 0;
margin: 0;
&::placeholder{
color: #BDBDBD;
font-size: 13px;
}
}
.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;
&::before{
@extend .icons;
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;
}
.group-title{
font-weight: 500;
line-height: 15px;
margin: 0 0 10px;
}
.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{
@extend .clearfix;
padding: 15px 0;
border-bottom: 1px solid #E1E1E1;
position: relative;
font-size: 13px;
display: flex;
flex-wrap: wrap;
*{
width: 100%;
}
p{
margin: 8px 0 0;
}
b{
font-weight: 600;
}
.item-title{
@extend .color-main-2;
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 600;
display: table;
line-height: 22px;
position: relative;
}
.item-featured{
&::after{
@extend .icons;
content: "";
width: 20px;
height: 20px;
display: inline-block;
background-position: -6px -171px;
vertical-align: bottom;
margin-left: 9px;
position: relative;
top: 0;
}
}
.item-btn{
@extend .bg-linear;
@extend .color-main-2;
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;
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-time-left{
margin: 0 0 7px 0;
display: inline-block;
color: #FF2D2D;
}
.recruit-time-left{
font-size: 13px;
}
.page-address{
@extend .color-main-2;
margin: 0 0 16px 0;
font-size: 13px;
b{
font-weight: 600;
}
}
}
.recruit-detail-content {
margin: 16px 0 30px;
.recruit-content-group{
font-size: 13px;
line-height: 20px;
.title{
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 27px;
text-transform: uppercase;
margin: 0 0 6px 0;
}
*{
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
}
.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;
.item{
@extend .color-main;
width: 50%;
text-align: center;
position: relative;
border-right: 1px solid #959595;
font-size: 16px;
line-height: 22px;
padding: 0 10px;
&:nth-child(2n){
border: 0;
}
&:nth-child(2){
color: #459E3F;
}
&:nth-child(3){
color: #FF881A;
}
&:nth-child(4){
color: #FF431A;
}
&:nth-child(n+3){
margin-top: 30px;
}
*{
display: block;
}
b{
font-weight: 700;
margin-top: 5px;
}
}
}
.icons{
width: 30px;
height: 30px;
margin: 0 auto 5px auto;
}
.icon-user {
background-position: -44px -171px;
}
.icon-calendar {
background-position: -95px -171px;
}
.icon-cash {
background-position: -141px -170px;
}
.icon-clock {
background-position: -189px -171px;
}
}
.recruit-form-group{
margin-bottom: 40px;
.recruit-submit{
@extend .bg-linear;
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-input{
padding: 16px 12px;
border-radius: 5px;
border: 1px solid #E1E1E1;
background: #FFF;
}
.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;
&::placeholder{
font-size: 14px;
}
}
.recruit-upload-group{
display: block;
margin: 0;
}
.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;
img{
display: block;
margin: auto auto 12px;
width: auto;
}
.about-item, .model-development-container, .reward-container, .home-members-group, .page-value-footer, .distributor-header{
margin-bottom: 40px;
}
.global-title-background {
padding: 10px 20px;
margin-bottom: 12px;
letter-spacing: -0.9px;
}
.item-fav {
margin: 0 0 12px;
position: relative;
padding: 0 0 0 32px;
line-height: 24px;
b{
@extend .color-main-2;
font-size: 20px;
font-weight: 700;
}
&::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));
}
}
.box-btn{
@extend .bg-linear;
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;
&::after{
content: '\00BB';
font-size: 20px;
line-height: 1;
vertical-align: text-bottom;
font-weight: 400;
margin: 0 0 0 3px;
position: relative;
top: 1px;
}
}
.number-image {
display: inline-block;
width: 66px;
height: 47px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: bottom;
}
.page-introduce-group{
font-size: 16px;
line-height: 24px;
}
.distributor-header{
padding: 21px 0;
.container{
display: block;
padding-left: 0;
padding-right: 0;
}
p{
text-align: left;
}
.group-title{
color: #F0F5FA;
text-align: center;
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
margin: 0 0 25px;
}
.item{
margin: 0 0 25px 0;
padding: 0 10px;
}
}
.page-value-footer {
.col-left{
margin-bottom: 21px;
img{
max-height: 103px;
margin: auto auto 8px 0;
}
}
.box-btn{
margin: 12px auto 12px 0;
}
}
.home-members-group {
padding: 30px 10px;
}
.reward-container{
text-align: center;
}
}
.about-page{
line-height: 21px;
overflow: hidden;
padding-bottom: 40px;
img{
display: block;
margin: auto;
width: auto;
}
.global-title-background{
font-size: 23px;
padding: 6px 10px 10px 10px;
}
.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;
}
.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;
.col-right{
text-align: right;
}
p{
margin: 0 0 12px 0;
}
.box-btn{
margin: 12px 0 12px auto;
}
.global-title-background {
padding: 7px 0 15px 0;
line-height: 30px;
margin: auto 0 12px auto;
}
.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;
> .item {
z-index: 2;
}
}
.item{
position: relative;
color: #0A753F;
padding: 106px;
border-radius: 50%;
border: 1px solid #128F3D;
}
.item-2 {
display: flex;
align-items: center;
justify-content: center;
margin: -70px 0 0 0;
.item{
margin: 0 -24px;
&:nth-child(1){
color: #439339;
border-color: #439339;
}
&:nth-child(2){
color: #FF7438;
border-color: #FF7438;
}
}
}
.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.817201018333435px 9.086005210876465px 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;
}
.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;
img{
display: block;
width: auto;
margin: auto;
max-width: 320px;
}
p{
color: #313131;
margin: 0 0 25px 0;
}
.global-title-background {
padding: 7px 25px 7px 0;
margin: 0 0 7px 0;
&::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{
text-align: center;
margin: 0 auto 30px auto;
padding: 0 10px;
p {
margin: 0;
}
}
.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;
p{
margin: 0;
}
svg {
width: -webkit-fill-available;
}
.item{
text-align: center;
position: relative;
color: #FF7438;
font-size: 13px;
font-weight: 700;
line-height: 19px;
text-transform: uppercase;
width: 48%;
&:nth-child(1){
width: 100%;
.item-text {
display: block;
top: 20px;
img{
margin: auto;
}
}
}
&:nth-child(n+2){
margin-top: -62px;
.item-text {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 33px 10px 10px 20px;
&::before {
content: '';
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(#08733F, #B5D033);
position: absolute;
top: 10px;
left: 13px;
}
&::after{
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #fff;
position: absolute;
top: 12px;
left: 15px;
}
}
}
&:nth-child(2){
right: -6px;
color: #439339;
img{
margin-top: 12px;
}
}
&:nth-child(3){
left: -6px;
color: #0A753F;
.item-text {
padding: 33px 10px 10px 20px;
&::before{
background: linear-gradient(90deg,#89C466, #037340);
left: unset;
right: 13px;
}
&::after{
left: unset;
right: 15.25px;
}
}
p{
order: 1;
}
}
img{
max-height: 90px;
margin: auto;
}
}
.item-text{
position: absolute;
inset: 0;
span{
display: block;
}
img{
display: block;
width: auto;
max-width: 214px;
margin: unset;
}
}
.item-circle-middle {
padding: 46px;
position: relative;
border-radius: 50%;
color: #fff;
background: linear-gradient(#08733F, #B5D033);
margin: 0;
position: absolute;
top: 52%;
*{
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;
.global-title-background{
padding: 0;
line-height: 50px;
margin: 0 auto 12px;
}
.item-middle {
position: relative;
margin-bottom: 20px;
img{
max-height: 250px;
}
&::before, &::after{
content: '';
max-width: 300px;
width: 100%;
height: 1px;
background: #bdbdbd;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
&::after{
top: unset;
bottom: 0;
}
}
}
.history-line-holder{
text-align: center;
img{
margin-bottom: 13px;
}
.item{
display: flex;
flex-wrap: wrap;
padding: 17px 0;
position: relative;
&::before{
content: '';
max-width: 300px;
width: 100%;
height: 1px;
background: #bdbdbd;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
&:first-child{
border: 0;
padding-top: 0;
&::before{
content: none;
}
}
}
.item-text{
width: 100%;
order: 1;
}
.year{
font-size: 32px;
font-style: italic;
font-weight: 500;
margin: 0 0 12px 0;
padding: 0;
line-height: 1.5;
&::before{
content: none;
}
}
.item-last{
padding-top: 30px;
}
}
.about-value-page{
text-align: center;
.global-title-background{
&::before{
background-size: cover;
}
}
.page-banner-holder{
margin-bottom: 40px;
color: #313131;
font-size: 15px;
line-height: 23px;
.item{
padding: 34px 12px 20px;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
}
.title{
@extend .color-text;
font-size: 24px;
font-weight: 700;
line-height: 46px;
text-transform: uppercase;
margin: 0 0 20px 0;
}
b{
@extend .color-main-2;
font-size: 20px;
}
.summary{
max-width: 300px;
margin: auto;
}
.icons{
display: block;
width: 110px;
height: 60px;
margin: auto auto 20px auto;
background-size: 375px 400px;
}
.icon-1 {
background-position: -7px -275px;
}
.icon-2 {
background-position: -155px -275px;
}
}
.page-value-footer{
.col-left{
img{
max-width: 270px;
margin: auto auto auto 0;
}
}
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;
.item{
color: #414141;
font-size: 13px;
font-weight: 600;
text-transform: capitalize;
display: flex;
align-items: center;
flex-wrap: wrap;
position: absolute;
&:nth-child(1){
bottom: 0;
right: 75%;
}
&:nth-child(2){
bottom: 30%;
right: 60%;
.item-image {
border-color: #F9B731;
}
}
&:nth-child(3){
display: block;
bottom: 47%;
right: 52%;
p{
margin: 0 0 12px 0;
}
.item-image {
border-color: #FF8819;
}
}
&:nth-child(4){
display: block;
bottom: 47%;
left: 52%;
p{
margin: 0 0 12px 0;
}
.item-image {
border-color: #68C71D;
}
}
&:nth-child(5){
bottom: 30%;
left: 60%;
.item-image {
border-color: #459E3F;
}
p{
text-align: right;
}
}
&:nth-child(6){
bottom: 0;
left: 75%;
.item-image {
border-color: #129046;
}
p{
text-align: right;
}
}
}
p{
margin: 0;
width: 100%;
text-align: left;
}
.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;
}
.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;
.reward-group {
margin-bottom: 40px;
text-align: center;
}
.item{
position: relative;
margin: auto;
text-transform: capitalize;
.image{
padding-bottom: 100%;
position: relative;
margin: auto auto 15px auto;
}
img{
@extend .fit-img;
}
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;
.image, .text {
width: 100%;
}
.image{
order: 1;
}
p{
margin: 0;
}
.item{
position: relative;
padding: 0 0 0 20px;
&::before{
content: "\25CF";
font-size: 10px;
position: absolute;
left: 5px;
}
}
}
.company-name{
@extend .color-main-2;
font-size: 16px;
font-weight: 700;
line-height: 20px;
}
}
.about-corporate-culture-page{
img{
margin: 15px auto;
}
.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;
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;
&.current{
@extend .color-main-2;
border-color: #129046;
font-weight: 700;
}
}
}
.leader-image{
display: none;
&.active{
display: block;
}
}
}
@media (max-width: 380px){
.home-distributed-system-group {
.global-title-background {
padding: 0;
}
.item{
font-size: 12px;
width: 43%;
&:nth-child(odd){
margin-right: 0;
}
&:nth-child(n+3){
padding-top: 10px;
margin-top: 10px;
}
}
.number {
font-size: 26px;
line-height: 32px;
}
}
.distributor-page{
.box-btn-group{
a{
font-size: 13px;
}
}
}
.distributor-header {
.item {
font-size: 13px;
}
.item-count {
font-size: 26px;
line-height: 30px;
&::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;
}
.item-2{
margin: -60px 0 0 0;
}
.item-text{
font-size: 16px;
line-height: 22px;
}
}
.model-development-detail {
.item-circle-middle {
padding : 37px;
white-space: nowrap;
top: 49%;
*{
font-size: 8px;
}
}
.item{
font-size: 11px;
line-height: 16px;
&:nth-child(n+2){
margin-top: -72px;
.item-text{
padding: 33px 0px 0px 20px;
&::before {
content: '';
width: 13px;
height: 13px;
top: 20px;
left: 13px;
}
&::after{
content: "";
width: 9px;
height: 9px;
top: 22px;
left: 15px;
}
}
}
&:nth-child(2){
right: -3px;
}
&:nth-child(3) {
left: -3px;
.item-text{
&::before {
left: unset;
}
&::after{
left: unset;
}
}
}
img{
max-height: 75px;
}
}
}
.about-value-list {
.value-title {
max-width: 160px;
padding: 30px 10px 10px 10px;
}
.item {
&:nth-child(2), &:nth-child(5) {
bottom: 28%;
}
&:nth-child(3), &: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;
.global-title-background {
padding: 6px 10px 10px 10px;
}
}
.home-box-group {
.art-item{
width: 100%;
.art-title{
&:first-child{
font-size: 13px;
line-height: inherit;
}
}
}
}
.home-distributed-system-group {
.number {
font-size: 22px;
}
.item {
font-size: 11px;
width: calc(50% - 8px);
}
.distributed-detail {
padding: 0 10px;
bottom: -7px;
}
}
.home-shareholder-list {
a{
font-size: 12px;
}
}
.home-static-group {
.col-right{
justify-content: center;
}
.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;
}
.item-image {
height: 55px;
}
}
.shareholder-major-container {
.item{
font-size: 12px;
line-height: 18px;
}
.item-logo {
padding-bottom: 50px;
}
.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;
}
.item-count {
font-size: 20px;
line-height: 32px;
margin-right: 5px;
&::after{
font-size: 16px;
top: -12px;
}
}
}
.distributor-branch-container {
.item{
width: 100%;
a, .group-title{
display: block;
}
}
}
.library-page {
.image-item, .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;
}
.item-2 {
margin: -53px 0 0 0;
.item {
margin: 0 -20px;
}
}
.item-text{
font-size: 13px;
line-height: 19px;
}
}
.model-development-detail {
.item {
&:nth-child(n+2){
margin-top: -80px;
img{
max-height: 55px;
}
.item-text{
padding: 0 10px;
align-items: center;
justify-content: space-between;
&::before{
top: 32px;
}
&::after{
top: 33.5px;
}
}
}
}
.item-circle-middle {
padding: 30px;
white-space: nowrap;
top: 47%;
*{
inset: 4px;
}
}
}
.about-value-list {
min-height: 190px;
.item {
font-size: 10px;
&:nth-child(2), &:nth-child(5) {
bottom: 28%;
}
&:nth-child(3), &:nth-child(4) {
bottom: 43%;
}
&:nth-child(6) {
margin: auto 6px auto auto;
}
}
.value-title {
max-width: 130px;
padding: 18px 10px 5px 10px;
font-size: 13px;
line-height: 20px;
}
.item-image {
width: 40px;
height: 40px;
background-size: 18px;
}
p{
margin: 0 !important;
}
}
}
Reference in New Issue Copy Permalink