@import url('../../style_en.css');


.mentor_bottom{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 10px;
 gap:10px;
}
.mentorImg{
 width: 19%;
}
.mentorImg span{
 display: block;
 position: relative;
 padding-top: 135.9%;
}
.mentorImg span img{
 width:100%;
 height:auto;
 transition: all 0.3s ease-out;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 float: none;
 width: 100% !important;
 height: 100% !important;
 object-fit: cover;
 transition: all 0.3s ease-out;

}
.mentor_list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    width: 80%;
}

.mentor_section{
    border-bottom: dotted 2px var(--fourth_color);
    width:100%;
    padding-bottom: 10px;
}

@media(max-width:1100px){
	.mentor_bottom{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10px;
		gap:10px;
	   }
	   .mentorImg{
		width: 100%;
	   }
	   .mentor_list{
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: flex-start;
		justify-content: center;
		width:100%;
	}
}
/*-------頁籤------------------------------------------------------------------------*/
.tab_area {
 border-bottom: solid 1px #c4c4c4;
}
 .tabs_btn_now {
  transition:0.3s ease all;
  font-size:16px;
  line-height:39px;
  padding:0px 36px 0px 36px;
  text-align:center;
  display:none;
  position:relative;
  background:#fff;
  border-bottom: solid 1px #e3e3e3;
  font-weight:bold;
 }
  .tabs_btn_now:hover {
   background:#fff;
  }
  .tabs_btn_now_arrow {
   position: absolute;
   border-top: solid 5px #333;
   top: 17px;
   right: 20px;
   border-left: solid 5px rgba(255, 255, 255, 0);
   border-right: solid 5px rgba(255, 255, 255, 0);
  }
  
 .img-scroll { 
  height:39px; 
  position:relative;
 }
  .img-list { 
   position:relative; 
  }
   ul.tabs {
    margin:0; 
    padding:0; 
    list-style:none;
   }
    .tabs li { 
     line-height:39px;
     float:left;
     position: relative;
     font-size:14px;
     width: auto;
     color:#808080;
     border-right: solid 1px #c4c4c4;
    }
     .tabs span { 
      text-decoration:none;
      display:block;
      padding:0px 18px;
      transition:0.3s ease all;
      background:#fff;
      text-align:center;
      cursor:pointer;
     }
      .tabs li span:hover {
       color:#333;
       box-shadow: 0 0 #3d3d3d inset;
      }
      
     .tabs li.active {
      /*當前模式*/
      color:#333;
     }
      .tabs li.active span {
       box-shadow: 0 -2px #3d3d3d inset;
      }
      .tabs li.active:after {
       position:absolute;
       bottom:-6px;
       left:50%;
       margin:0px 0px 0px -10px;
      }
  
  #tab1{}
  .tab_content{}

/*產品內頁頁籤的網編區*/
.p_tab_text_area {
 background:#fff;
 padding:10px;
}
     @media (max-width: 760px){
      /*頁籤*/
      .tab_area {
       position:relative;
      }
       .tabs_btn_now {
        display:block;
       }
       
       .img-scroll {
        display:none;
        height:auto;
        /*position: absolute;*/
        width: 100%;
        z-index: 999;
       }
        .tabs li, .img-scroll1 .tabs li, .img-scroll2 .tabs li, .img-scroll3 .tabs li, .img-scroll4 .tabs li, .img-scroll5 .tabs li {
         float:none;
         text-align:center;
         width:100%;
         font-size:15px;
         border-radius:0px;
         border: none;
         border-bottom: solid 1px #f3f3f3;
        }
         .tabs li.active:after {
          content:"";
         }
     }

/*========================================================*/
/*-------內頁網編樣式_共用區塊--------*/
/*========================================================*/

.text_bottom {
}
 
.text_bottom .tabs_btn_now {
    border-bottom-color: var(--primary_color);
}
.text_bottom  .tab_area {
    border-bottom: none;
}
 .text_bottom  .img-scroll {
  height: auto;
 }
  .text_bottom  .img-scroll .tabs{
   display: flex;
   flex-wrap: wrap;
  }
.text_bottom .tabs li {
    float: none;
 border-right-color: #fff;
 border-bottom: #fff 1px solid;
}

 
.text_bottom .tabs a, 
.text_bottom .tabs span {
    background: var(--third_color);
    color: var(--dark_color);
 font-size: 18px;
  font-size: min(max(0.9375vw, 1rem), 1.125rem); /*字體大小 0.9375vw、最小值 16px、最大值 18px*/
}
.text_bottom .tabs li.active span {
 position: relative;
    box-shadow:none;
    background: var(--primary_color);
    color: #fff;
 /* font-size:1.25rem; */
 font-size: min(max(1.0417vw, 1rem), 1.25rem); /*字體大小 1.0417vw、最小值 16px、最大值 20px*/
}
.text_bottom .tabs li a:hover, 
.text_bottom .tabs li span:hover {
    background: var(--primary_color);
    color: #fff;
    font-size:1.25rem; /*20px*/
}


.text_bottom ~ .p_tab_text_area {
    padding: 59px 0px 10px;
}
    .text_bottom ~ .p_tab_text_area > div {
        border-top: none;
    }


 .text_bottom .p_tab_text_area {
  background: #fff0;
  padding: 0px;
  margin-top: 25px;
 }


@media screen and (min-width: 761px){
 .text_bottom .tabs li span::before{
  position: absolute;
  font-family: 'bootstrap-icons';
  content: '\F229';
  color: var(--primary_color);
  font-size: 20px;
  line-height: 1;
  left: 50%;
  transform: translateX(-50%) translateY(0px);
  bottom: 0px;
  opacity: 0;
  transition: 0.3s ease all;
  z-index: 1;
 }
 .text_bottom .tabs li.active span::before ,
 .text_bottom .tabs li span:hover::before{
  bottom: -14px;
  opacity: 1;
 }
}