.fa_abtitle{
 position:relative;
 margin-bottom:3vw;
}
.fa_abtitle h2 {
    font-size: var(--f40);
    font-weight: 500;
    color: #333;
 position:relative;
 z-index:5;
}

.fa_abtitle h5:before{
 content:"";
 margin-bottom: 15px;
 display:block;
 height:1px;
 width:100%;
 max-width:400px;
 background:#eee;
}
.fa_abtitle.fa_text_c h5:before{
    margin-left:auto;
    margin-right:auto;
}
.fa_abtitle h5:after{
 content:"";
 position:absolute;
 top:-1px;
 left:0;
 background:var(--linearX);
 width:50px;
 height:3px;
 z-index:5;
  animation: ttline 5s linear infinite;
}

.fa_abtitle.fa_text_c h5:after{
   left:50%;
    transform:translateX(-50%);
}
.fa_abtitle h5 {
 margin-top: 15px;
 font-size:16px;
 color:#ccc;
 position:relative;
    text-transform:uppercase;
}

@keyframes ttline{
    0%{
       width:20px;
      }
    50%{
    width:50px;
    }
    100%{
          width:20px;
    	}
	}
.fa_abtitle.fa_text_w *{
    color:#fff;
}
.fa_abtitle.fa_abtitle_w * {
    color: #fff;
}
.fa_company>div{
    position: relative;
}

.fa_Ab01{
    background:url(../images/network_bg.jpg);
    background-size:100%;
    background-position: bottom center;
    background-repeat: no-repeat;
}
.fa_Ab01 .fa_flexwrap:nth-child(1){
 align-items:center;
 margin-bottom: 3vw;
}
.fa_Ab01 .fa_right .fa_pic img {
    width: 100%;
}
.fa_Ab01 .fa_right{
    position:relative;
}
.fa_Ab01 .fa_right .fa_pic2{
     position:absolute;
     bottom:5%;
     left:0;
     background:rgba(31,75,104,0.8);
     max-width:80%;
}

.fa_Ab01 .fa_right .fa_pic2 img{
    max-width:100%;
}
 .fa_Ab01>.fa_flexwrap {
      width:100%;
   align-items:center;
    }
.fa_Ab01 .fa_left .fa_cnt {
    margin-bottom: 30px;
    line-height: 1.8;
    color: #777;
    font-size: 15px;
}
  .fa_Ab01 .fa_right img{
    width:100%;
  }
  
       .fa_Ab01 .fa_jump dl{
             padding: 0;
        position:relative;
         }
     .fa_Ab01 .fa_jump dl:before{
      content:"";
      width:40px;
      height:40px;
      border-radius:50px;
      border:var(--main2-color) solid 2px;
      position:absolute;
      left:-20px;
      top:-15px;
      border-right:none;
      border-bottom:none;
      opacity:0.5;
     }
           .fa_Ab01 .fa_jump dt span{
               font-size:var(--f50);
               color:var(--main-color);
            line-height:1;
                   font-family: "d-din-condensed-bold";
           }
        .fa_Ab01 .fa_jump dt i{
            font-size:18px;
            font-weight:600;
               color:var(--main-color);
        }   
         .fa_Ab01 .fa_jump dd {
             color: #000;
             margin-top:15px;
             font-size: 16px;
         }
.fa_Ab01 .fa_left .fa_abtitle{
    margin-bottom:0;
}
.fa_Ab01 .fa_left .fa_year{
    margin:var(--f30) 0;
}

.fa_Ab01 .fa_left .fa_year h2{
    font-size: var(--f32);
    text-transform: uppercase;
}

.fa_Ab01 .fa_left .fa_year h2 i{
    background: var(--linearX);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "d-din-condensed-bold";
    font-size: var(--f40);
}
.fa_Ab01 .fa_left .fa_year h4{
    font-size:var(--f24);
    margin-top:5px;
}
 .fa_Ab01 .fa_right .fa_Img{
     padding-bottom:80%;
     height: 0;
 }
 @media screen and (min-width: 769px) {
     
.fa_Ab01 .fa_left .fa_year h2{
    position:relative;
    color: #666;
}
     
.fa_Ab01 .fa_left .fa_year h2:before{
    content:"";
    position:absolute;
    right:0;
    left:150px;
    height:3px;
    top:50%;
    transform:translateY(-50%);
    background:linear-gradient(90deg,transparent,var(--main-color));
    opacity:0.5;
}
.fa_Ab01 .fa_left .fa_year h2 span{
    display:inline-block;
    position:relative;
}
.fa_Ab01 .fa_flexwrap:nth-child(1){
    flex-direction:row-reverse;
}
   .fa_Ab01 .fa_left{
       width:50%;
       padding-left: 5vw;
   }  
   .fa_Ab01 .fa_right{
       width:50%;
       /* padding-left:5vw; */
       position: relative;
       /* padding-bottom: 40px; */
       /* padding-right: 40px; */
   }   
     .fa_Ab01 .fa_right:before{
         content:"About JLC";
         position:absolute;
         bottom: -3vw;
         left: -2vw;
         width:auto;
         background:linear-gradient(transparent,var(--main-color));
         z-index:5;
         color:#fff;
         font-size: 5vw;
         font-family: "d-din-condensed-bold";
         writing-mode: tb;
         padding: 3vw 0;
         transform:translateY(100px);
         opacity:0;
         transition: all 1s;
     }
  .fa_Ab01 .fa_right.started:before{
      
         transform:translateY(0);
         opacity:1;
  }
 }
 @media screen and (max-width: 768px) {
     .fa_abtitle h5{
         font-size:12px;
     }
    .fa_Ab01 .fa_content .fa_l2{
     width:100%;
     margin:20px 0 0;
    }
    .fa_Ab01 .fa_jump {
        margin-bottom:30px;
    }
     .fa_Ab01 .fa_jump dt span{
         font-size:28px;
     }
         .fa_Ab01 .fa_jump dl{
          width: 33%;
          /* margin: 20px 0 10px; */
          text-align: center;
         }
  
         .fa_Ab01 .fa_jump dd{
          margin-top:5px;
          font-size:14px;
         }
     .fa_Ab01 .fa_jump dl:before{
         display:none;
     }
}
/**/
.fa_Ab02{
    background:#edeef1;
}

.fa_Ab02 .fa_li{
    position:relative;
    overflow: hidden;
}

.fa_Ab02 .fa_li .fa_tit h3{
    position:relative;
    margin-bottom:10px;
}
.fa_Ab02 .fa_li .fa_tit h3:before{
    width: 40px;
    height:50px;
    border-radius:500px;
    content:"";
    background:var(--linearX);
    transform:rotate(45deg);
    left: -15px;
    top: -15px;
    position: absolute;
}
.fa_Ab02 .fa_li .fa_tit h3 span{
    font-size: var(--f40);
    color:#fff;
    display: inline-block;
    position: relative;
    border-bottom:rgba(255,255,255,0.5) solid 1px;
    padding-bottom:10px;
    line-height:1;
}
.fa_Ab02 .fa_li .fa_tit h5 {
    font-size:var(--f20);
    color:#fff;
    margin-bottom:20px;
}

.fa_Ab02 .fa_li .fa_tit p{
    font-size:14px;
    color:rgba(255,255,255,0.6);
    transition:all 0.5s;
}
.fa_Ab02 .fa_li .fa_en{
    position:absolute;
    right:0;
    width: auto;
    position: absolute;
    right: -100%;
    bottom: -20px;
    z-index: 12;
    font-size: 8vw;
    font-family: "d-din-condensed-bold";
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    transition:all 1s;
    opacity: 0;
    text-transform:uppercase;
}

.fa_Ab02 .fa_li.fa_on .fa_en{
    opacity: 0.5;
    right:0;
}

.fa_Ab02 .fa_li .fa_Img img{
    opacity:0.8;
}
@media only screen and (min-width: 769px) {
 .fa_Ab02 .fa_list{
     display:flex;
     
 }
    .fa_Ab02 .fa_li .fa_tit{
    position:absolute;
    left:0;
    top:0;
    right:0;
    padding: 3vw;
}
.fa_Ab02 .fa_li .fa_Img{
    height:600px;
    background: #000;
}


.fa_Ab02 .fa_li{
    width:40%;
    margin:0 5px;
    transition: all 0.8s;
}
.fa_Ab02 .fa_li.fa_on{
    width:60%;
    
}

.fa_Ab02 .fa_li .fa_tit p{
    opacity: 0;
}

.fa_Ab02 .fa_li.fa_on .fa_tit p{
    opacity: 1;
}
}
@media only screen and (max-width: 768px) {
  .fa_Ab02 .fa_li .fa_tit h3:before{
      width:20px;
      height:30px;
      top:-5px;
  }
.fa_Ab02 .fa_li .fa_en{
    display: none;
}
.fa_Ab02 .fa_li .fa_Img{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background: #000;
}
    
.fa_Ab02 .fa_li .fa_Img img{
    opacity:0.5
}
.fa_Ab02 .fa_li{
    width:100%;
}
    .fa_Ab02 .fa_li .fa_tit{
        padding:30px;
        z-index:2;
        position:relative;
    }
    
    .fa_Ab02 .fa_li .fa_tit p{
        opacity:1;
    }
}


 /**/
 
 .fa_Ab03{
     background:url(../images/img-9.jpg);
     background-attachment: fixed;
 }
.fa_Ab03 .fa_abtitle{
    margin-bottom:5vw;
}
 .fa_Ab03 dl {
    
      text-align:center;
}
 .fa_Ab03 dl span{
     width:80px;
     height:80px;
     align-items: center;
     justify-content: center;
     display: inline-flex;
     border-radius:500px;
     background: linear-gradient(45deg, var(--main2-color), var(--main-color));
 }
  .fa_Ab03 dl span img{
      max-width:60%;
  }
   .fa_Ab03 dl dt{
       display: block;
       width: 80px;
       height:80px;
       position: relative;
       margin:auto;
   }
.fa_Ab03 dl dd {
    margin-top:40px;
}
.fa_Ab03 dl dd h5{
    font-size:var(--f22);
    color:#666;
}

.fa_Ab03 dl dd p{
    font-size:16px;
    color:#888;
    margin-top:20px;
}
 @media only screen and (max-width: 768px) {
   .fa_Ab03 dl {
       width:100%;
       display:flex;
       text-align:left;
       align-items: flex-start;
       padding: 20px 0;
       border-bottom: #ddd solid 1px;
   }
     .fa_Ab03 dl dt{
         width:50px;
         margin: 0;
         height:50px;
     }
     
     .fa_Ab03 dl dt span{
         width:50px;
         height:50px;
     }
     
     .fa_Ab03 dl dd{
         width:calc(100% - 50px);
         padding-left:20px;
         margin: 0;
     }
     
     .fa_Ab03 dl dd h5{
         margin:0;
     }
     .fa_Ab03 dl dd p{
         margin-top: 5px;
     }
}

@media only screen and (min-width: 769px) {
    
  .fa_Ab03 dl dt:before{    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/icon-16.png);
    z-index: 1;
    opacity: 0;
    transition: all .3s ease;}
.fa_Ab03 dl:hover dt:before{
    opacity:1;
    animation: rotate 40s linear infinite;
}

.fa_Ab03 dl:hover dt:after{
    opacity:0.3;
}
.fa_Ab03 dl dt:after{
     position: absolute;
    top: -13px;
    left: -13px;
    right: -13px;
    bottom: -13px;
    z-index: 1;
    content:"";
    border-radius:500px;
    border:var(--main-color) solid 5px;
    opacity:0;
    transition:all 0.5s;
}
  .fa_Ab03 dl {
      width:20%;
      padding:0 2vw;
  }
}



/**/
.fa_Ab04{
    background:url(../images/abbg04.jpg);
    background-attachment: fixed;
    padding: 10vw 10px;
}
.fa_Ab04 .fa_abtitle h5:before{
    background:rgba(255,255,255,0.2);
}
.fa_Ab04 .fa_abtitle h2{background: var(--linearX);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight:800;width:auto;display: inline-block;}
.fa_Ab04 .fa_cnt{
        line-height: 2;
        color: rgba(255,255,255,0.8);
        font-size: 16px;
        margin-top: 5vw;
}
@media only screen and (max-width: 768px) {  
   .fa_Ab04 .fa_cnt{
       font-size:14px;
       margin-top:50px;
   }
}

@media only screen and (min-width: 769px) {
  
}
 /**/
  
 .fa_Ab05{
     background:url(../images/abbg05.jpg);
     background-size:cover;
     padding-bottom: 8vw;
 }
.fa_Ab05 .fa_list{
    position:relative;
}
 .fa_Ab05 .fa_list .fa_li{
     
    padding: 10px;
     position:relative;
 }
 
 @media only screen and (max-width: 768px) {
   
    .fa_Ab05 .fa_list .fa_li .fa_pic{
        padding-bottom:60%;
        position:relative;
    }
     
    .fa_Ab05 .fa_list .fa_li .fa_pic img{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        max-width:99%;
        max-height:99%;
        object-fit:contain;
        object-position:center;
    }
}

@media only screen and (min-width: 769px) {
    
 .fa_Ab05 .fa_list:before {
    height: 100%;
    content: "";
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    max-width: 500px;
    background-image: url(../images/honorbg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 50%;
    background-size: 100% auto;
    background-position: bottom center;
}
    .fa_Ab05 .fa_list {
        padding-bottom:100px;
    }
    .fa_Ab05 .fa_list .fa_li .fa_pic{
     padding-bottom: 100%;
     width: 100%;
     display: block;
     position: relative;
 }

 .fa_Ab05 .fa_list .fa_li .fa_pic img{
         width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0vw;
    filter: drop-shadow(5px 5px 30px rgba(0,0,0,0.15));
 }
   .fa_Ab05 .fa_list .swiper-slide .fa_li{
           transition: all 0.5s;
           transform: scale(0.8);
           position: relative;
           transform-origin: center;
   }
   .fa_Ab05 .fa_list .swiper-slide-active .fa_li {
    transform: scale(1);
    /* padding-bottom: 30px; */
}
}
/**/
.fa_Ab06 .fa_list{
    display:flex;
    flex-wrap:wrap;
}
.fa_Ab06 .fa_abtitle{
    margin:0;
}
@media only screen and (min-width: 769px) {
    
.fa_Ab06 .fa_list .fa_li{
    width:25%;
    position:relative;
    overflow: hidden;
}
.fa_Ab06 .fa_list .fa_li  .fa_Img{
    padding-bottom:110%;
    background:#000;
}
    
.fa_Ab06 .fa_list .fa_li  .fa_Img img{
    opacity:0.6;
}
.fa_Ab06 .fa_list .fa_li .fa_tit{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    transform:translateY(-50%);
    padding:3vw;
    text-align:center;
    z-index: 5;
}
    
.fa_Ab06 .fa_list .fa_li:before{
    content:"";
    background:var(--linearY);
    position:absolute;
    left:3vw;
    top:3vw;
    right:3vw;
    bottom:3vw;
    z-index: 2;
    opacity: 0.2;
    border: rgba(255,255,255,0.2) solid 1px;
    transition: all 0.5s;
    transform: scale(0);
}
 
.fa_Ab06 .fa_list .fa_li:hover:before{
    transform: scale(1);
}   
.fa_Ab06 .fa_list .fa_li  h3.fa_num{
    font-size:8vw;
    font-family: "d-din-condensed-bold";
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    position: absolute;
    bottom: -2vw;
    line-height: 1;
    right: 0;
    opacity:0.3;
    
}
    .fa_Ab06 .fa_list .fa_li .fa_tit h4{
        font-size:var(--f24);
        color:#fff;
        margin-bottom:20px;
        font-weight:600;
    }
    .fa_Ab06 .fa_list .fa_li .fa_tit p{
        color:rgba(255,255,255,0.7);
        font-size:14px;
        line-height:2;
        max-width:300px;
        margin:auto;
    }
}

@media only screen and (max-width: 768px) { 
    
.fa_Ab06 .fa_list .fa_li{
    width:100%;
}
    
.fa_Ab06 .fa_list .fa_li .fa_Img{
    padding-bottom:40%;
}
    .fa_Ab06 .fa_list .fa_li .fa_tit{
        padding:20px;
    }
    .fa_Ab06 .fa_list .fa_li .fa_num{
        display:none;
    }
    .fa_Ab06 .fa_list .fa_li .fa_tit h4{
        font-size:20px;
        color:var(--main-color);
    }
     .fa_Ab06 .fa_list .fa_li .fa_tit p{
         font-size:14px;
         color:#999;
         margin-top:15px;
     } 
}