.p-index{
  /* background-image:url('/media/images/bg.png');        */
  overflow: hidden;
}
.index__recommend-section{
  padding-bottom: 50px;
}
.index__clsf-section .cast,.index__hot-section .cast{
  opacity: 0;
  position: absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%,-50%); 
  width: 45%;
  height: 100%;
  object-fit: contain;
}
.index__hot-section .swiper-slide:hover .cast{
  opacity: 1 ;        
}    


.index__hot-section .title-group{
  margin: 8vmax 0px 6vmax;
}
.index__hot-swiper,.index__clsf-swiper {
  overflow: visible;
}
.index__hot-swiper .swiper-slide,.index__clsf-swiper .swiper-slide{
  height: 100%;        
}    
@media (max-width:1200px) {
  .index__hot-swiper .swiper-slide{
  height: auto;        
  }    
}
.index__hot-swiper .title,.index__clsf-swiper .title{        
  font-family: "Noto Serif TC";
  color: black;
  font-size:24px;
  font-weight:900;
  text-align: center;
  margin-top: 48px;
  text-wrap: nowrap;
}
@media (max-width:768px) {
  .index__hot-swiper .title,.index__clsf-swiper .title{
      margin-top: 12px;
  }
}
@media (max-width:576px) {
  .index__hot-swiper .title ,.index__clsf-swiper .title{
      font-size: 16px;
  }
}
.index__hot-section .inner-title{
  position: relative;
  z-index: 10;
}
.index__hot-swiper .card,.index__clsf-swiper .card{
  justify-content: center;
  align-items: center;
  background-color:white;
  height: 100%;        
  padding: 48px 48px 24px 48px;      
  border: 2px solid transparent; 
}
@media (max-width:1200px) {
  .index__hot-swiper .card,.index__clsf-swiper .card{
   height: 356px;
  }
}
@media (max-width:992px) {
  .index__hot-swiper .card,.index__clsf-swiper .card{
      height: 396px;
  }
}
@media (max-width:768px) {
  .index__hot-swiper .card,.index__clsf-swiper .card{
      height: 100%;     
  }
}
@media (max-width:768px) {
  .index__hot-swiper .card,.index__clsf-swiper .card{
      height: 396px;
  }
}
@media (max-width:576px) {
  .index__hot-swiper .card,.index__clsf-swiper .card{
      height: 198px;
      
  }
}
.index__hot-swiper .card:hover,.index__clsf-swiper .card:hover{
  border: 2px solid #dfdfdf;
}
@media (max-width:768px) {
  .index__hot-swiper .card,.index__clsf-swiper .card{
      padding:24px 48px;
  }
}
@media (max-width:576px) {
  .index__hot-swiper .card,.index__clsf-swiper .card{
      padding:12px 24px;
  }
}
.swiper-slide:nth-child(odd) .card{
  transform: translateY(75px);
}
@media (max-width:992px) {
  .swiper-slide:nth-child(odd) .card {
      transform: translateY(0px);
  }
}
.index__hot-swiper .hot-img,.index__clsf-swiper .clsf-img{
  object-fit: contain;
}
@media (max-width:1400px){
  .index__hot-swiper .hot-img,.index__clsf-swiper .clsf-img{
      width: 80%;      
  }        
}
@media (max-width:992px){
  .index__hot-swiper .hot-img,.index__clsf-swiper .clsf-img{         
      height:195px;
  }        
}
@media (max-width:768px) {
  .index__hot-swiper .hot-img {
     width: 100%;
     height: 100%;
     min-height: 280px;
  }
}
@media (max-width:576px) {
  .index__hot-swiper .hot-img,.index__clsf-swiper .clsf-img {    
     min-height: unset;
  }
}
.parents-index__hot-swiper,.middle-index__hot-swiper{
  width: fit-content;
  position: relative;
}  
@media (max-width:576px) {
  .parents-index__hot-swiper,.middle-index__hot-swiper{
      width: 90%;
  }  
}
.arrow-hover{
  display: none;
}
.parents-index__hot-swiper .arrow-group:hover .arrow-hover,.parents-index__clsf-swiper .arrow-group:hover .arrow-hover{
  display: block;
}
.parents-index__hot-swiper .arrow-group:hover .arrow,.parents-index__clsf-swiper .arrow-group:hover .arrow{
  display: none;
}
.parents-index__hot-swiper .left,.parents-index__clsf-swiper .left{
  position:absolute;
  top: 40%;
  left: -48px;
  z-index: 2;    
  width: 30px;
  height: 30px;
  object-fit:contain;
}   
@media (max-width:1400px) {
  .parents-index__hot-swiper .left,.parents-index__clsf-swiper .left{
    left: -20px;
  }
}
.parents-index__clsf-swiper .left{
  top: 25%;
}
.parents-index__hot-swiper .right,.parents-index__clsf-swiper .right{
  position:absolute;
  top: 40%;
  right: -48px;
  z-index: 2;    
  width: 30px;
  height: 30px;
  object-fit:contain;
}  
@media (max-width:1400px) {
  .parents-index__hot-swiper .right,.parents-index__clsf-swiper .right{
    right: -20px;
  }
}
.parents-index__clsf-swiper .right{
  top: 25%;
}

@media (max-width:992px) {
  .parents-index__hot-swiper .right,.parents-index__clsf-swiper .right{  
      top: 198px;
      right: -16px;          
      width: 24px;
      height: 24px;           
  }
  .parents-index__hot-swiper .left,.parents-index__clsf-swiper .left{
      top: 198px;
      left: -16px;          
      width: 24px;
      height: 24px;     
   }   
}
@media (max-width:576px) {
  .parents-index__hot-swiper .right{
    top: 85px;
    right: -4px;
    width: 20px;    
  }
  .parents-index__hot-swiper .left{
    top: 85px;
    left: -4px;
    width: 20px;
    height: 24px;
  }
  .parents-index__clsf-swiper .right{
    top: 115px;
    right: 32px;    
  }
  .parents-index__clsf-swiper .left{
    top: 115px;
    left: 32px;    
  }
}
.more-btn{
  font-family: 'Playfair Display', serif;
  display: block;
  background-color: white;
  color: #40220f;       
  width: fit-content;
  padding: 8px 72px;
  margin: 120px auto;
  border-radius: 24px;
  font-weight:bold;
  transition: all .2s ease;    
}
@media (max-width:992px) {
  .more-btn{
      margin: 60px auto;
  }
}
@media (max-width:768px) {
  .more-btn{
      margin: 60px auto;
  }
}
@media (max-width:576px) {
  .more-btn{
      margin: 42px auto;
  }
}
.more-btn:hover{
  background-color: #e4b260;
  color:white;
}
.index__about-section .about-img{
  top: 0;
  left: 0;
  width: 90%;
  transform: translate(5%, 5%);
}
.index__about-section .patches{
  top: 0;
  left: 0;
  width: 90%;
  transform: translate(5%, 0%);
}
.index__about-section .title-group{
  position: relative;
  margin: 0px 0px 48px 0px;
}
.index__about-section .flower{
  width: 28px;
}
.index__about-section .title-group .subtitle{
  font-size:60px;       
}
@media (max-width:576px) {
  .index__about-section .title-group .subtitle{
      font-size:40px;
  }
}
.index__about-section .title-group .title{
  font-size:40px;
  font-weight:bolder;
  margin-top:-75px;    
  font-weight: 700;
  font-family: "Noto Serif TC";            
}
@media (max-width:576px) {
  .index__about-section .title-group .title{
      font-size:35px;
      margin-top:-38px;   
  }
}
.index__about-section .subtitle{
  font-family: "Noto Serif TC";  
  font-weight:900;
  font-size:24px;
  text-align:center;
  margin-bottom: 24px;
  letter-spacing:2px;      
 
}
.index__about-section .idea{
  font-family: "Noto Serif TC";  
  font-weight:700;
  font-size:24px;
  margin-bottom: 16px;
  color:#40220f;
  text-align:center;
}
@media (max-width:992px) {
  .index__about-section .idea{
      text-align:center;
      margin-bottom: 16px;
      font-size:24px;
  }
}
@media (max-width:992px) {
  .index__about-section .idea{          
      font-size:18px;
  }
}

@media (max-width:576px) {
  .index__about-section .subtitle{
      margin-bottom: 0px;
      font-size:18px;
  }
}
.index__about-section .info{
  width: 90%;
  font-family: "Noto Serif TC";  
  font-weight:600;
  text-align:center;
  letter-spacing:2px;
  margin-bottom: 48px;
  font-size:18px;
  color:#40220f;
  letter-spacing:2px;
}
@media (max-width:576px) {
  .index__about-section .info{            
      font-size:16px;
  }
}

.index__about-section .more-btn{
  margin: 0;
}
.about-dec{
  position: relative;       
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  padding-bottom: 30%;       

} 

@media (max-width:768px) {
  .index__about-section .about-dec{           
      background-size: cover;
      background-position: right bottom;
      width: 100%;
      padding-bottom: 45%;
  }
}
.index__about-section .info-2{
  position:absolute;
  bottom: 38%;
  left: 25%;
  transform:translate(0%,100%);       
  font-family: 'Playfair Display';
  font-weight:900;
  color: #40220f;
  font-size:26px;
  letter-spacing:2px;
  font-weight: 900;
  font-family: "Noto Serif TC";
}
@media (max-width:1400px) {
  .index__about-section .info-2{
      left: 20%;
      font-size: 24px;
  }
}
@media (max-width:1400px) {
  .index__about-section .info-2{
      left: 20%;
      font-size: 20px;
  }
}
@media (max-width:992px) {
  .index__about-section .info-2{          
      font-size: 16px;
  }
}
@media (max-width:768px) {
  .index__about-section .info-2{          
      position: absolute;
      transform: translate(0%, 0%);           
      width: fit-content;            
      text-align: center;
      top: auto;
      bottom: 25%;
      left: 10%;
      right: auto;
      width: 70%;          
  }
}
@media (max-width:576px) {
  .index__about-section .info-2{           
      font-size: 12px;
  }
}
.index__wholesale-section .title-group .title{
  margin-top: -50px;
}
@media (max-width:576px) {
  .index__wholesale-section .title-group .title{
    margin-top: -37px;
  }
}
.index__wholesale-section .wholesale-item{
  width: 20%;
  padding: 0px 16px;
}
@media (max-width:992px) {
  .index__wholesale-section .wholesale-item{
      width: 50%;
  }
}
.index__wholesale-section .wholesale-item:nth-child(2n+1){
  margin-top: 48px;
}
@media (max-width:992px) {
  .index__wholesale-section .wholesale-item:nth-child(2n+1){
      margin-top: 0px;
      margin-bottom: 48px;
  }
}
.index__wholesale-section .wholesale-img{
  position:absolute;
  width: 50%;
  top: 50%;
  left: 0;
  transform:translate(50%,-50%);  
  min-height: 80px;
  max-height: 85px;
  object-fit:contain;
  transition:all 0.3s ease;
}
.wholesale-item:hover .wholesale-img{
  transform: translate(50%,-50%) scale(1.2);    
} 
.index__wholesale-section .item-title{
  text-align:center;
  font-weight: bolder;
  font-size:24px;
  color: #40220f;
  position: relative;
  z-index: 2;
}
.index__wholesale-section .cast,.index__clsf-section .cast{
  opacity: 0;
  position: absolute;
  top: 10%;
  left:50%;
  transform:translate(-50%,0px); 
  width: 30%;
  height: 100%;
  object-fit: contain;
}
.wholesale-item:hover .cast{
  opacity: 1 ;        
}
.index__clsf-section{
  position: relative;
}
.index__clsf-section .title-group .title {
  margin-top: -50px;
}
@media (max-width:576px) {
  .index__clsf-section .title-group{
    margin: 8vmax 0px 0px 0px;
  }
  .index__clsf-section .title-group .title {
    margin-top: -37px;
  }
}
.index__clsf-section .swiper-slide:hover .cast{
  opacity: 1;
}
.index__clsf-section .clsf-bg-2{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
}   
.index__clsf-section .clsf-card{
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;        
  display: flex;
  justify-content:center;
  align-items:center;
  height: 100%;
  padding: 72px;  
  
}
@media (max-width:768px) {
  .index__clsf-section .clsf-card{
    align-items: flex-start;
    height: unset;
    padding: 60px 0px 72px;
  }
}
@media (max-width:576px) {
  .index__clsf-section .clsf-card{
     padding: 60px;
  }
}
.index__clsf-section .swiper-slide:nth-child(even){
  margin-top: 48px;
}
@media (max-width:992px) {
  .index__clsf-section .swiper-slide:nth-child(even){
    margin-top: 0px;
  }
}
.index__clsf-section .clsf-img{ 
  width: 100%;
  transition:all 0.3s ease;
}
@media (max-width:1200px) {
  .index__clsf-section .clsf-img{
    width: 80%;
  }
}
@media (max-width:992px) {
  .index__clsf-section .clsf-img{
    width: 90%;
  }
}
@media (max-width:768px) {
  .index__clsf-section .clsf-img{
    width: 60%;
  }
}
.index__clsf-section .swiper-slide:hover .clsf-img{
  transform: scale(1.2);
}
.index__clsf-section .index__clsf-swiper .title{
  margin-top: 16px;
  position: relative;
  z-index: 2;
}
.index__clsf-section .more-btn{
  margin: 180px auto;
}
@media (max-width:992px) {
  .index__clsf-section .more-btn{
      margin: 120px auto 180px;
  }
}
@media (max-width:768px) {
  .index__clsf-section .more-btn{
      margin: 60px auto 180px;
  }
}

@media (max-width:576px) {
  .index__clsf-section .more-btn{
      margin: 40px auto 80px;
  }
}
.clsf-bg-img{
  opacity: 0.5;
  object-position: bottom;
  width: 100%;
  height: calc(18vmax + 180px);
}   
.index__clsf-news .news-img-2{
  position:absolute;
  top: 0;
  left: 0;
  display: block;
}
.index__clsf-news .title-group{
  width: fit-content;
  display: flex;
  flex-direction: column;    
  align-items: center;
}   
.index__clsf-news .title-group .title{
  font-size:40px;
  margin-top: -26%;
}
@media (max-width:576px) {
  .index__clsf-news .title-group .title{
    font-size:35px; 
  }
}

.index__clsf-news .title-group .subtitle{
  font-size:60px;
  margin-top: -9%;
}
@media (max-width:576px) {
  .index__clsf-news .title-group .subtitle{
    font-size:40px; 
  }
}





.news-left{
  transform: translate(-50%, 34%) scale(1.3);
}
@media (max-width:992px) {
  .news-left{
  transform: none;
  }
}
@media (max-width:992px) {
  .index__clsf-news .news-item-groups{
      width: 80%;
      margin-right: auto;
      margin-left: auto;
  }
}  
@media (max-width:576px) {
  .index__clsf-news .news-item-groups{
      width: 100%;           
  }
}  
.index__clsf-news .news-item{
  padding: 12px 32px;
  display:flex;
  justify-content: space-between;
  border-radius: 35px;   
  border: 1px solid transparent;
  margin-bottom: 16px;
}
.index__clsf-news .news-item:hover{
  border: 1px solid #40220f;
}
.index__clsf-news .news-item:hover .news-date,.news-info{
  color:#40220f;
}
.index__clsf-news .news-item:hover .news-info{
  color:#40220f;
}
.index__clsf-news .news-date{
  font-family: 'Noto Serif TC';
  font-weight: 700;
  font-size:24px;
  color: #929292;
}
@media (max-width:1200px) {
  .index__clsf-news .news-date{
      font-size:20px;     
  }
}
@media (max-width:576px) {
  .index__clsf-news .news-date{
      font-size:18px;
      line-height: 36px;
  }
}
.index__clsf-news .news-info{
  font-family: 'Noto Serif TC';
  font-weight: 700;
  font-size:18px;
  line-height: 36px;
  color: #929292;
}
@media (max-width:576px) {
  .index__clsf-news .news-info{
      font-size:16px
  }
}
.index__inner-clsf-news{
  padding: 0px 0px 5vmax 0px;  
}
.index__clsf-news .title-group{
  margin: 12vmax auto;
}
@media (min-width:992px) {
  .index__clsf-news .title-group{
      margin: 0;
  }
}