﻿.home-recommended{ margin-top: 25px;}

.home-recommended-left{ width: calc(100% - 314px); padding-right: 20px; }

.home-recommended-left-title{ width: 100%; height: 24px; line-height: 24px; margin-bottom: 15px; font-size: 1.3rem; color: #111111; text-transform: uppercase;  font-family: myFirstFont1;}
.home-recommended-left-title img{ margin-right: 10px;}

.home-recommended-top{ width: 100%; height: 40px; border-bottom:1px solid #CCCCCC;}
.home-recommended-top ul li{ background: #e7eaee; cursor: pointer; height: 39px; line-height: 39px; border-radius: 6px 6px 0 0; box-shadow: 0px 8px 16px 1px rgba(51,51,51,0.06); margin-right: 15px; padding: 0 15px;} 
.home-recommended-top ul li img{ margin-right: 6px;}
.home-recommended-top ul li.thistab{ background: #EE2328; color: #FFFFFF;}
.home-recommended-top ul li.thistab img{filter: brightness(0) invert(1);}

.home-recommended-bot{ margin-top: 10px;}

.home-recommended-bot-ad{ width: 236px; height: auto;}
.home-recommended-bot-ad img{ width: 100%; height: auto;}

.home-recommended-bot-right{ width: calc(100% - 246px);}


.home-recom-list{ width: 100%; gap: 10px; grid-template-columns: repeat(4, 1fr); /* 3 列 */  display: grid;}
.home-recom-list-item{ width: 100%; background: #FFFFFF; box-shadow: 0px 6px 20px 1px rgba(0,0,0,0.08);border-radius: 8px; padding: 13px;}
.home-recom-list-item-img1{ width: 70px;}
.home-recom-list-item-img1 img{ width: 70px; height: auto;}
.home-recom-list-item-img2{ width: 100%; height: auto; text-align: center; margin: 5px 0;}
.home-recom-list-item-img2 img{ width: 120px; height: auto;}

.home-recom-list-item-info{ width: 100%;}
.home-recom-list-item-info a{ display: block;  font-family: myFirstFont1; height: 24px; line-height: 24px; color: #111111; overflow: hidden;}
.home-recom-list-item-info a:hover{ color: #EE2328;}
.home-recom-list-item-info p{ color: #666666; line-height: 20px; height: 20px; overflow: hidden;}
.home-recom-list-item-cart{ width: 100%; margin-top: 7px; height: 28px; line-height: 28px;}
.home-recom-list-item-cart b{ display: block; color: #EE2328; font-size: 1.1rem;}


.home-recommended-right{ width: 314px; gap: 10px; grid-template-columns: repeat(1, 1fr); /* 3 列 */  display: grid;}

.home-recommended-right-item{ width: 100%; height: auto; position: relative; color: #FFFFFF;}
.home-recommended-right-item img{ width: 100%; height: auto;}
.home-recommended-right-item-info{ position: absolute; left: 0; top: 0; z-index: 333; padding: 15px; width: 100%; height: 100%;}
.home-recommended-right-item-info div{ width: 100%; height: auto;}
.home-recommended-right-item-info div h2{ color: #FFFFFF; font-size: 1rem; line-height: 24px; margin-bottom: 5px;}
.home-recommended-right-item-info div a{ display: inline-block; color: #FFFFFF; border:1px solid rgba(255,255,255,0.4); border-radius:4px; padding: 0 15px;}
.home-recommended-right-item-info div a:hover{ background: #EE2328; border-color:#EE2328;}


.home-title{ line-height: 32px; padding: 30px 0 15px 0;}
.home-title h2{font-size: 1.3rem;  text-transform: uppercase; }
.home-title img{ margin-right: 10px;}
.home-title a{ display: inline-block; height: 32px; background: #2a2a2a; border-radius:4px; padding: 0 35px; color: #FFFFFF;}
.home-title a:hover{ background: #EE2328;}

.home-advan{ position: relative; color: #FFFFFF; overflow: hidden;}
.home-advan img{ width: 100%; height: auto;}
.home-advan-info{ position: absolute; left: 50%; margin-left: -200px; top: 0; width: 100%; height: 100%;}
.home-advan-info div{ width: 400px;}
.home-advan-info h2{ color: #FFFFFF; text-transform: uppercase; font-size: 1.1rem; line-height: 28px;}
.home-advan-info a{ display: inline-block; color: #FFFFFF; border-radius:4px; height: 30px; line-height: 28px; border:1px solid rgba(255,255,255,0.5); padding: 0 20px; margin-top: 10px;}
.home-advan-info a:hover{ background: #EE2328; border-color:#EE2328;}


.home-bestpro{ padding: 20px; background: #FFFFFF; gap: 15px; grid-template-columns: repeat(4, 1fr); /* 3 列 */  display: grid;}
.home-best-item{ width: 100%; border:1px solid #DDDDDD; border-radius: 5px; padding: 10px;}


.home-best-item-pic{ width: 100%;}
.home-best-item-pic-left{ width: 100px;}
.home-best-item-pic-left img{ width: 100px; height: auto;}

.home-best-item-pic-right{ width: calc(100% - 100px); padding-left: 20px;}
.home-best-item-pic-right div{ width: 100%;}
.home-best-item-pic-right div a{ display: block; font-family: myFirstFont1; height: 24px; line-height: 24px; color: #111111; overflow: hidden;}
.home-best-item-pic-right div a:hover{ color: #EE2328;}
.home-best-item-pic-right div p{ line-height: 24px; height: 24px; overflow: hidden; color: #666666;}

.home-best-item-info{ width: 100%; margin-top: 20px;}
.home-best-item-info em{ display:inline-block; background: #EBEBEB; border-radius:13px; color: #EE2328; height: 25px; line-height: 25px; padding: 0 10px;}
.home-best-item-info a{ display: inline-block; background: #B1B1B1; border-radius:4px;  color: #FFFFFF; padding: 0 10px;}
.home-best-item-info a:hover{ background: #EE2328;}


.home-brand{ background: #FFFFFF; gap: 0; grid-template-columns: repeat(7, 1fr); /* 3 列 */  display: grid;}
.home-brand a{ display: block; border: 1px solid #EEEEEE; padding: 10px;}
.home-brand a img{ width: 100%; height: auto;}
.home-brand a:hover img{transform: scale(1.1); -webkit-transform: scale(1.1);}


.home-blog{gap: 12px; grid-template-columns: repeat(4, 1fr); /* 3 列 */  display: grid;}

.home-blog-item{ width: 100%; background: #FFFFFF; box-shadow: 0px 6px 12px 1px rgba(0,48,119,0.1); border-radius: 6px}
.home-blog-item-pic{ width: 100%; height: auto; border-radius: 6px 6px 0 0; overflow: hidden;}
.home-blog-item-pic img{border-radius: 6px 6px 0 0; width: 100%; height: auto;}
.home-blog-item-pic a:hover img{transform: scale(1.1); -webkit-transform: scale(1.1);}
.home-blog-item-info{ width: 100%; padding: 20px;}
.home-blog-item-info-top{ width: 100%;}
.home-blog-item-info-top a{ display: block;  font-family: myFirstFont1; color: #111111; font-size: 1rem; line-height: 22px; height: 44px; overflow: hidden;}
.home-blog-item-info-top a:hover{ color: #EE2328;}
.home-blog-item-info-top p{ line-height: 20px; height: 40px; margin-top: 10px; overflow: hidden; color: #666666;}

.home-blog-item-info-bot{ margin-top: 20px; padding-top: 20px; border-top:2px solid #EEEEEE; line-height: 25px;}
.home-blog-item-info-bot a{ display: inline-block; height: 25px; color: #FFFFFF; background: #EE2328; border-radius:4px; padding: 0 15px;}
.home-blog-item-info-bot a:hover{ background: #111111;}

@media (max-width: 768px) {


.home-recommended{ margin-top: 15px;}

.home-recommended-left{ width: 100%; padding-right: 0; }

.home-recommended-left-title{ margin-bottom: 10px; font-size: 1.1rem; }
.home-recommended-left-title img{ margin-right: 5px;}

.home-recommended-top{ width: 100%; height: auto; border-bottom:none;}
.home-recommended-top ul{ justify-content: space-between;}
.home-recommended-top ul li{   margin-right: 0; padding: 0 15px; width: 100%; border-bottom:1px solid #CCCCCC;} 
.home-recommended-top ul li img{ margin-right: 3px;}


.home-recommended-bot{ margin-top: 10px;}

.home-recommended-bot-ad{display: none;}

.home-recommended-bot-right{ width: 100%;}


.home-recom-list{ width: 100%; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.home-recom-list-item{ padding: 10px;}
.home-recommended-right{ display: none;}


.home-title{  padding: 15px 0;}
.home-title h2{font-size: 1.1rem;  }
.home-title img{ margin-right: 5px;}
.home-title a{display: none; }


.home-advan{display: none;}


.home-bestpro{ padding: 10px; gap: 10px; grid-template-columns: repeat(1, 1fr); }



.home-best-item-pic{ width: 100%;}
.home-best-item-pic-left{ width: 100px;}
.home-best-item-pic-left img{ width: 100px; height: auto;}

.home-best-item-pic-right{ width: calc(100% - 100px); padding-left: 20px;}
.home-best-item-pic-right div{ width: 100%;}
.home-best-item-pic-right div a{ display: block; font-family: myFirstFont1; height: 24px; line-height: 24px; color: #111111; overflow: hidden;}
.home-best-item-pic-right div a:hover{ color: #EE2328;}
.home-best-item-pic-right div p{ line-height: 24px; height: 24px; overflow: hidden; color: #666666;}

.home-best-item-info{ width: 100%; margin-top: 20px;}
.home-best-item-info em{ display:inline-block; background: #EBEBEB; border-radius:13px; color: #EE2328; height: 25px; line-height: 25px; padding: 0 10px;}
.home-best-item-info a{ display: inline-block; background: #B1B1B1; border-radius:4px;  color: #FFFFFF; padding: 0 10px;}
.home-best-item-info a:hover{ background: #EE2328;}


.home-brand{ grid-template-columns: repeat(2, 1fr); }

.home-blog{grid-template-columns: repeat(1, 1fr);}


}