﻿
.headerEn{ padding: 10px 3%; width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 2; left: 0; top: 0;}
.headerEn.on{ background-color: rgba(255, 255, 255, 1); box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);}
.headerEn .logo{ height: 52px;}
.headerEn .tel{ font-size: 20px; font-weight: bold; color: #596EFB;}
.headerEn .tel .icon{ width: 24px;vertical-align: sub;}


.i_ban{ font-size: 0; position: relative;}
.i_ban .tp{ width: 100%;  height: 428px; object-fit: cover;}
.ibanIntro{ position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.ibanIntro .inner{ width: 770px; max-width: 100%;}
.ibanIntro .tit{ font-size: 48px; line-height: 1; color: #172641;}
.ibanIntro .subtit{ font-size: 20px; margin-top: 20px; line-height: 1; color: #172641;}
.ibanIntro .nr{ font-size: 14px; line-height: 1.72;  margin-top: 25px; color: #888;}
.ibanIntro .nr{ font-size: 14px;  margin-top: 25px; color: #888;}
.ibanIntro .mandiv{ margin-top:25px;}
.ibanIntro .mandiv .sbtn{ font-size: 16px; margin-right: 16px; padding: 0.4em 2em;}

.proTit{ font-size: 32px; padding: 70px 0; color: #333; text-align: center; font-weight: bold;}

.feature{}
.featureItem{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-bottom: 80px;}
.featureItem .intro{ width: 50%;}
.featureItem .intro .tit{ font-size: 24px; color: #333; line-height: 1.2;}
.featureItem .intro .nr{ font-size: 16px; color: #888; margin-top: 20px;}
.featureItem .tparea{ text-align: center; width: 46%;}
.featureItem .tparea .tp{}
.featureItem:nth-child(2n){ flex-direction: row-reverse;}
.featureItem:hover{}
.featureItem:hover .tparea .tp{ transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); }
.featureItem:hover .intro .tit{ color: #596EFB;}
.featureItem:hover .intro .nr{ color: #666;}



.characteristics{ background-color: #FAFAFF; padding-bottom: 40px;}
.characteristics .wrap{  column-count: 3;
        column-gap: 24px; }
.characteristicsItem{
        width: 100%;
        border-radius: 4px;
        grid-row-start: auto;
        margin-bottom: 20px;
        break-inside: avoid;
        background: linear-gradient(180deg,#F6F8FF,#fff);
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border: 2px solid #fff;
        box-shadow: 0 0 8px 0 rgba(0,0,0,.05);
        padding: 20px;
        box-sizing: border-box;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
}
.characteristicsItem .tparea{}
.characteristicsItem .tparea .tp{ height: 40px;}
.characteristicsItem .tit{ transition: 1s; color: #333; font-size: 18px; margin-top: 10px; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; }
.characteristicsItem .nr{max-height: 67px; overflow: hidden; font-size: 14px; margin-top: 10px; color: #888; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }
.characteristicsItem:hover{ background: linear-gradient(180deg,#e2e7fc,#fff); transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); }
.characteristicsItem:hover .tit{ color: #596EFB;}
.characteristicsItem:hover .nr{max-height: 500px; }



.techAdvan{ padding-bottom: 40px;}
.techAdvan .wrap{ display: flex; flex-wrap: wrap; }
.techAdvanItem{
        width: 23.5%;
        margin:  0 2% 2% 0;
        box-sizing: border-box;
        background: linear-gradient(180deg,#F6F8FF,#fff);
        border-radius: 4px;
        border: 1px solid #E6E6E6;
        padding: 32px 16px;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
}
.techAdvanItem:nth-child(4n){ margin-right: 0;}
.techAdvanItem .tparea{}
.techAdvanItem .tparea .tp{ height:64px; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }
.techAdvanItem .tit{ font-size: 18px; color: #333; font-weight: bold; margin-top: 10px; }
.techAdvanItem .nr{ font-size: 14px; margin-top: 10px; color: #888;}
.techAdvanItem:hover{ border-color: #596EFB; background: linear-gradient(180deg,#e2e7fc,#fff);}
.techAdvanItem:hover .tit{color: #596EFB;}

.footerEn{ background-color: #171717; color: rgba(255, 255, 255, .7);}
.f_t{ padding: 50px  0 24px; display: flex; justify-content: space-between; align-items: center;}
.fcon{ flex: 1; min-width: 0;}
.fcon .tit{ font-size: 24px; font-weight: bold;}
.fcon .nr{ margin-top: 10px;}
.fcon .nr .list{ font-size: 12px;}
.fcon .nr .list .mc{ display: inline-block; min-width:6em;}
.fcode{ width: 120px; text-align: center;}
.fcode .tp{ width: 80px;}
.fcode .tit{ margin-top: 5px; font-size: 12px;}
.f_b{ font-size: 12px; color: #fff; padding: 1em 0; text-align: center; opacity: .7; border-top: 1px solid #333;}


@media only screen and (max-width: 1199px){
}
@media only screen and (max-width: 756px){
.headerEn{ padding: 6px 3%;  }
.headerEn .logo{ height: 40px;}
.headerEn .tel{ font-size:14px;}
.headerEn .tel .icon{ width: 16px;}

.i_ban .tp{ height: 330px;}
.ibanIntro .inner{ text-align: center;}
.ibanIntro .tit{ font-size: 20px; }
.ibanIntro .subtit{ font-size: 14px; margin-top: 10px; }
.ibanIntro .nr{ font-size: 12px;}
.ibanIntro .mandiv{ margin-top: 20px;}
.ibanIntro .mandiv .sbtn{ font-size: 14px; margin-right: 10px;}

.proTit{ font-size: 24px;}

.featureItem{  margin-bottom: 50px;}
.featureItem .intro{ width: 100%;}
.featureItem .intro .tit{ font-size:18px}
.featureItem .intro .nr{ font-size: 14px; margin-top:15px;}
.featureItem .tparea{  width:100%; margin-top: 60px; text-align: center;}
.featureItem:nth-child(2n){ flex-direction: row;}

.characteristics .wrap{  column-count:1;
        column-gap: 0px; }
.characteristicsItem .tparea .tp{ height: 32px;}
.characteristicsItem .tit{ font-size: 16px; }

.techAdvanItem{ width:100%; margin:  0 0% 20px 0;  padding: 20px 16px; }
.techAdvanItem .tparea .tp{ height:50px;}
.techAdvanItem .tit{ font-size: 16px; }

.f_t{ padding: 20px  0 ; }
.fcon{ flex: 1; min-width: 0;}
.fcon .tit{ font-size: 18px;}

}