/* Index */

/* Product */

.index-product-wrapper {
	padding: 30px 0 80px;
}

.index-product-wrapper .section-topic-title .category-name {
	display: flex;
	justify-content: space-evenly;
}

.index-product-wrapper .section-topic-title .category-name a {
	display: inline-block;
	color: var(--font-color);
	padding: 10px 30px;
	border-radius: 30px;
}

.index-product-wrapper .section-topic-title .category-name a.active,
.index-product-wrapper .section-topic-title .category-name a:hover {
	background-color: var(--bg-body-color);
	color: var(--white);
}

.index-product-wrapper .icon-circle {
	--icon-circle-width: 30px;
	background-color: #acacac;
}

.index-product-wrapper .icon-circle:hover {
	background-color: var(--bg-body-color);
}

.index-product-wrapper .arrow-right::before {
	width: 10px;
	border-color: var(--white);
	border-width: 1px;
}

.index-product-wrapper .arrow-right::after {
	border-left: 8px solid var(--white);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent
}

.index-product-wrapper .grid-latest-product {
	--index-product-gap: 30px;
	/* display: grid;
	grid-template-columns: repeat(3,calc((100% - var(--index-product-gap) * 2) / 3));
	grid-template-rows: auto;
	grid-gap: var(--index-product-gap); */
	display: flex;
	flex-wrap: wrap;
	gap: var(--index-product-gap);
	margin-top: 50px;
}

.grid-latest-product .item-grid {
	display: flex;
	align-items: center;
	background-color: #f6f6f6;
	width: calc((100% - var(--index-product-gap) * 2) / 3);
	padding: 10px;
}

.grid-latest-product .item-grid:nth-child(1),
.grid-latest-product .item-grid:nth-child(2) {
	width: calc((100% - var(--index-product-gap)) / 2);
	padding: 30px 10px;
}

.grid-latest-product .item-grid .thumb,
.grid-latest-product .item-grid .thumb-desc {
	width: 50%;
}

.grid-latest-product .item-grid .thumb img {
	display: block;
	width: 100%;
}

.grid-latest-product .item-grid .thumb-desc {
	padding-left: 20px;
}

.grid-latest-product .item-grid .thumb-desc .series {
	font-size: 14px;
	color: #acacac;
	margin-bottom: 10px;
}

.grid-latest-product .item-grid .thumb-desc .title {
	font-size: 20px;
	color: var(--font-color);
	margin-bottom: 10px;
}

.grid-latest-product .item-grid .thumb-desc .desc {
	color: var(--font-color);
	margin-bottom: 20px;
}

.index-product-wrapper .more {
	padding-top: 60px;
	text-align: center;
}

.index-product-wrapper .more .circle-border-button {
	border: 1px solid #c6c8c7;
}

.index-product-wrapper .more .circle-border-button:hover {
	background-color: var(--bg-body-color);
	color: var(--white);
}

/* About */
.index-about-wrapper .section-topic-title {
	align-items: flex-start;
}

.index-about-wrapper .section-topic-title .title {
	width: 30%;
}

.index-about-wrapper .section-topic-title .desc {
	width: 60%;
	line-height: 30px;
}

.grid-about-thumbs {
	--index-about-gap: 30px;
	display: grid;
	grid-template-columns: repeat(3, calc((100% - var(--index-about-gap) * 2) / 3));
	grid-gap: var(--index-about-gap);
	margin-top: 80px;
}

.grid-about-thumbs .item img {
	display: block;
	width: 100%;
	border-radius: 20px;
}

/* OEM/ODM */
.index-oem-wrapper {
	padding-top: 80px;
}

.index-oem-wrapper .section-topic-title {
	align-items: flex-start;
	color: var(--white);
}

.index-oem-wrapper .section-topic-title .title {
	flex: 0 1 20%;
}

.index-oem-wrapper .section-topic-title .desc {
	line-height: 30px;
}

.index-oem-wrapper .section-topic-title .circle-border-button {
	background-color: var(--white);
	border: 1px solid transparent;
}

.index-oem-wrapper .section-topic-title .circle-border-button:hover {
	background-color: var(--bg-body-color);
	color: var(--white);
	border-color: var(--white);
}

/* News */
.index-news-wrapper{
	padding: 80px 0 50px ;
}

.index-news-wrapper .section-topic-title .circle-border-button{
	background-color: var(--bg-body-color);
	color: var(--white);
	border: 1px solid transparent;
}

.index-news-wrapper .section-topic-title .circle-border-button:hover{
	background-color: var(--white);
	color: var(--font-color);
	border-color: var(--bg-body-color);
}

.grid-latest-news{
	--grid-news-gap:50px;
	display: grid;
	grid-template-columns: repeat(2,calc((100% - var(--grid-news-gap)) / 2));
	grid-gap: var(--grid-news-gap);
	margin-top: 60px ;
}

.grid-latest-news .item-grid-news{
	display: flex;
	background-color: var(--grey);
	color: var(--font-color);
	padding: 30px ;
	border-radius: 20px ;
}

.grid-latest-news .item-grid-news img{
	display: block;
	width: 100% ;
	border-radius: 20px ;
}

.grid-latest-news .item-grid-news .thumb-desc{
	width: 100% ;
}


.grid-latest-news .item-grid-news:nth-child(1){
	grid-column: 1/3;
	flex-direction: row-reverse;
}

.grid-latest-news .item-grid-news:nth-child(1) .thumb-img,
.grid-latest-news .item-grid-news:nth-child(1) .thumb-desc{
	width: 50% ;
}

.grid-latest-news .item-grid-news:nth-child(1) .thumb-desc{
	padding-right: 50px ;
}

.grid-latest-news .item-grid-news .thumb-desc .category-date{
	display: flex;
	justify-content: space-between;
	color: var(--font-color);
	margin-bottom: 50px ;
}

.grid-latest-news .item-grid-news .thumb-desc .category-date .category{
	display: inline-block;
	background-color: #e3e3e3;
	text-align: center;
	padding: 5px 15px ;
	border-radius: 50px ;
	min-width: 120px ;
}

.grid-latest-news .item-grid-news .thumb-desc .title{
	display: flex;
	justify-content: space-between;
	font-size: 24px ;
}

.grid-latest-news .item-grid-news .thumb-desc .title .icon-circle{
	flex:0 0 var(--icon-circle-width);
	background-color: var(--bg-body-color);
	border: 1px solid var(--bg-body-color);
	margin-left: 30px ;
}

.grid-latest-news .item-grid-news .thumb-desc .title .icon-circle:hover{
	background-color: transparent;
}

.grid-latest-news .item-grid-news .thumb-desc .title .icon-circle .arrow-right::before{
	border-color: var(--white);
}

.grid-latest-news .item-grid-news .thumb-desc .title .icon-circle:hover .arrow-right::before{
	border-color: var(--bg-body-color);
}

.grid-latest-news .item-grid-news .thumb-desc .title .icon-circle .arrow-right::after{
	border-left-color: var(--white);
}

.grid-latest-news .item-grid-news .thumb-desc .title .icon-circle:hover .arrow-right::after{
	border-left-color: var(--bg-body-color);
}

.grid-latest-news .item-grid-news .thumb-desc .desc{
	line-height: 30px ;
	padding: 30px 0 30px ;
}

.grid-latest-news .item-grid-news .thumb-desc .circle-border-button{
	background-color: var(--bg-body-color);
	color: var(--white);
}