@media screen and (max-width:1023px)and (min-width:300px)
{ 
    /*导航栏*/
    .nav_box{
        width: 100%;
        height: 8vh;
        background:#FFFFFF;
        position: sticky;
        top: 0;
        z-index: 500;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        overflow: hidden;
    }
    .nav_boxon{
        overflow: visible;
    }
    .nav_box_index{
        position: relative;
    }
    .nav_box_index_on{
        position: sticky;
        top: 0;
    }
    .nav{
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: static;
        overflow: hidden;
    }
    .nav_logo{
        width: auto;
        height: 100%;
        margin-left: 3%;
    }
    .nav_logo a{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .nav_logo img{
        width: auto;
        height: 30%;
    }
    .nav_main{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        background: #FFFFFF;
        top: 8vh;
        padding: 2rem 0;
        left: 100%;
        opacity: 0;
        -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    }
    .nav_mainon{
        left: 0;
        opacity: 1;
    }
    .nav_menu{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .nav_menu_item{
        width: 100%;
        height: auto;
        margin: 0.5rem 0rem;
        position: static;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 2rem;
    }
    .nav_menu_item>a{
        color: #000000;
        font-size: 1.375rem;
        font-family: phr;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        text-transform: capitalize;
    }
    .nav_menu_item:hover>a{
        color: var(--OneColor);
    }
    .nav_menu_item_on>a{
        color: var(--OneColor);
    }

    .nav_down_box{
        position: relative;
        width: 100%;
        height: 0px;
        overflow: hidden;
        background: #FFFFFF;
        top: 0vh;
        left: 0;
        opacity: 0;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .nav_menu_item:hover .nav_down_box{
        height: auto;
        opacity: 1;
    }
    .nav_down{
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .nav_down_left{
        width: 22%;
        height: auto;
        padding: 3rem 0;
        display: none;
    }
    .nav_down_left_title{
        font-size: 1.625rem;
        font-family: phm;
        color: #000000;
        line-height: 100%;
    }
    .nav_down_left_des{
        font-size: 1.25rem;
        color: rgba(0,0,0,0.6);
        padding-right: 5rem;
        margin-top: 2rem;
    }
    .nav_down_mid{
        width: 100%;
        height: auto;
        padding:1.5rem 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: flex-start;
    }


    .nav_down_mid a{
        width: 100%;
        display: block;
        font-size: 1.125rem;
        color: #888888;
        position: relative;
        font-family: phl;
        margin-bottom: 0.5rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;

    }
    .nav_down_mid a:hover{
        color: var(--OneColor);
    }
    .nav_down_mid a.nav_down_mid_aon{
         color: var(--OneColor);
    }
    .nav_down_mid a.nav_down_mid_aon span:after{
         background: var(--OneColor);
    }
    .nav_down_mid a.nav_down_mid_aon span:before{
         opacity: 1;
    }

    .nav_down_mid a:hover span:after{
        background: var(--OneColor);
    }
    .nav_down_mid a:hover span:before{
         opacity: 1;
    }

    .nav_down_mid a span{
        position:relative;
        padding: 0 1.5rem 0 3.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        display: inline-block;
    }
    .nav_down_mid a span>font{
        position: relative;
        z-index: 2;
    }


    .nav_down_mid a span:after{
        position: absolute;
        content: '';
        width: 0.6rem;
        height: 1rem;
        background: #b2b2b2;
        left: 2rem;
        top: calc(50% - 0.5rem);
        font-size: 0;
        transform: skewX(-30deg);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        z-index: 2;
    }
    .nav_down_mid a span:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: #f0f1f6;
        left: 0;
        top: 0;
        opacity: 0;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        border-radius:30px;
        z-index: 1;
    }



    .nav_down_right{
        width: 35%;
        height: auto;
        border-left: 1px solid rgba(0,0,0,0.1);
        padding: 3.5rem 0;
        padding-left: 4rem;
        font-size: 0;
        display: none;
    }

    .nav_right{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding-left: 2rem;
        padding-top: 4.5rem;
    }
    .nav_right_right{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .nav_menu_search_btn{
        font-size: 0;
        width: 3.2rem;
        height: auto;
        position: relative;
        cursor: pointer;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        opacity: 1;
        display: none;
    }
    .nav_menu_search_btn_hide{
        opacity: 0;
    }
    .nav_menu_search_btn svg{
        width: 1.8rem;
        height: 1.8rem;
        fill:#030303;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .nav_menu_search_btn:hover svg{
        fill:var(--OneColor);
    }


    .nav_menu_search_main{
        position: absolute;
        height: 3.2rem;
        border-radius: 3.2rem;
        padding: 0 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: #FFFFFF;
        border: 1px solid var(--OneColor);
        top: auto;
        left: 0;
        bottom: 9rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        z-index: -1;
        opacity: 0;
        transform: translateX(1.8rem);
        z-index: 5;
        opacity: 1;
    }
    .nav_menu_search_main_on{
        z-index: 5;
        opacity: 1;
    }

    .nav_menu_search_main a{
        font-size: 0;
    }
    .nav_menu_search_main a svg{
        width: 1.8rem;
        height: 1.8rem;
        fill:var(--OneColor);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .nav_menu_search_main span{
        font-size: 0;
        cursor: pointer;
        display: none;
    }
    .nav_menu_search_main span svg{
        width: 1.5rem;
        height: 1.5rem;
        fill:#9d9d9d;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .nav_menu_search_main span:hover svg{
        fill:var(--OneColor);
    }

    .nav_menu_search_main input{
        width: calc(95% - 1.8rem);
        height: 90%;
        color: rgba(0,0,0,0.5);
        padding-left: 0.5rem;
        border: 0;
        font-size: 1.125rem;
        font-family: phr;
    }

    .nav_login{
        width: auto;
        font-size: 1.375rem;
        color: #000000;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        font-family: phr;
        text-align: left;
        margin-right: 0rem;
        margin: 1rem 0;
    }
    .nav_login:hover{
        color: var(--OneColor);
    }


    .nav_lx{
        width: auto;
        height: auto;
        font-family: phr;
        margin-left: 0rem;
    }
    .nav_lx a{
        width: 10rem;
        height: 3rem;
        border-radius: 3rem;
        background: var(--OneColor);
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-size: 1.25rem;
        color: #FFFFFF;
        transform: perspective(100px) translateZ(0px);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .nav_lx a:hover{
        -moz-box-shadow: 0px 0px 15px 0 rgba(0,102,255,0.4);
        -webkit-box-shadow: 0px 0px 15px 0 rgba(0,102,255,0.4);
        box-shadow: 0px 0px 15px 0 rgba(0,102,255,0.4);
        transform: perspective(100px) translateZ(2px);
    }
    .zh_nav_lang {
        width: auto;
        height: auto;
        margin-left: 2rem;
    }
    .zh_nav_lang a {
        width: 3rem;
        height: 3rem;
        background: linear-gradient(to right, #485dff, #787bff);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        color: #FFFFFF;
        font-size: 1.125rem;
        font-family: opm;
    }


       	
.menubtn{
	width: 25px;
	position: absolute;
	right: 3%;
	top: 0;
	z-index: 10;
	display: block;
}
/* nav-icon-5 */
.nav-icon-5{  width: 25px; z-index: 20;  height: 20px; position: relative;  cursor: pointer;}
.nav-icon-5 span{  background-color:var(--OneColor);  position: absolute;  border-radius:3px;  transition: 0.3s cubic-bezier(.8, .5, .2, 1.4);  width:100%;  height: 3px;  transition-duration: 500ms}
   .zh_nav_boxon .nav-icon-5 span{
        background-color:var(--OneColor);
    }
    .zh_nav_boxopen .nav-icon-5 span{
        background-color:var(--OneColor);
    }
.nav-icon-5 span:nth-child(1){  top:0px;  left: 0px;}
.nav-icon-5 span:nth-child(2){  top:8px;  left: 0px;  opacity:1;}
.nav-icon-5 span:nth-child(3){  bottom:0px;  left: 0px;}
.nav-icon-5:not(.open):hover span:nth-child(1){  transform: rotate(0deg) scaleY(1.1);}
.nav-icon-5:not(.open):hover span:nth-child(2){  transform: rotate(0deg) scaleY(1.1);}
.nav-icon-5:not(.open):hover span:nth-child(3){  transform: rotate(0deg) scaleY(1.1);}
.nav-icon-5.open span:nth-child(1){  transform: rotate(45deg);  top: 8px;}
.nav-icon-5.open span:nth-child(2){  opacity:0;}
.nav-icon-5.open span:nth-child(3){  transform: rotate(-45deg);  top: 8px;}

    /*背景*/
    .page_back_box{
        width: 100%;
        height: 100vw;
        position: absolute;
        top: 0;
        z-index: 0;
        overflow: hidden;
    }
    .page_back_box_on{
        position: fixed;
        top: 8vh;
    }
    .page_back_lan{
        width: 0;
        height:0;
        overflow: hidden;
        display: none;
    }
    .page_back_lan_con{
        position: relative;
        z-index: 10;
        width: 100%;
        height: 100%;
        font-size: 0;
        background: var(--OneColor);
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    }
    .page_back_lan_back{
        position: absolute;
        z-index: 0;
        width: 25%;
        height: 100%;
        background: #FFFFFF;
        top: 0;
        right: 0;
    }

    .page_back_box2{
        width: 100%;
        height: 92vh;
        position: fixed;
        top: 8vh;
        z-index: 0;
        overflow: hidden;
    }
    .page_back{
        width: 94%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    .page_back>div{
        font-size: 0;
        width: 1px;
        height: 100%;
        background: rgba(0,0,0,0);
    }
    .page_back>div.page_back_1{
        height:98%;
    }
    .page_back>div.page_back_3{
        height:88%;
    }


    /*内页背景*/
    .npage_back_box{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        z-index: 0;
        display: none;
    }
    .npage_back{
        width: 94%;
        height: 100vh;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    .npage_back>div{
        font-size: 0;
        width: 1px;
        height: 100%;
        background: rgba(0,0,0,0);
    }



    /*底部*/
    .footer_box{
        width: 100%;
        height: auto;
        position: relative;
        z-index: 5;
        background: #ffffff;
    }
    .footer{
        width: 94%;
        height: auto;
        margin: 0 auto;
    }
    .footer_menu{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
   
    .footer_menu_item:nth-of-type(4){
        width: 100%;
        text-align: center;
        border: none;
    margin-top: 3rem;
    }
    
    
    
    
    
   
    .footer_menu_item_at:hover{
        color: var(--OneColor);
    }
  
    .footer_menu_item_a:hover{
        color: var(--OneColor);
    }

    .footer_menu_item_logo{
        font-size: 0;
        text-align: center;
        margin-top: 1rem;
    }
    .footer_menu_item_logo img{
        height: 1.8rem;
    }
    .footer_menu_item_con{
        margin-top: 1.2rem;
        text-align: center;
        font-size: 1.125rem;
        color: rgba(0,0,0,0.5);
        line-height: 160%;
    }




/*底部导航*/
.footer_menu_item {
    width: 100%;
    height: 4rem;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    overflow: hidden;
    border-bottom: 1px solid #7e7e7e;
}
.footer_menu_item:last-child {
    height: auto;
}

.yx_footer_menu_itemon {
    height: auto;
    padding-bottom: 2rem;
}
.footer_menu_item_at {
    display: block;
    height: 4rem;
    font-size: 1.5rem;
    color: #000000;
    font-family: phb;
    line-height: 4rem;
    margin-bottom: 0rem;
    background-image: url(../images/mobile_footer_ico.svg);
    background-repeat: no-repeat;
    background-size: 1rem;
    background-position: right center;
}
.footer_menu_item_ats{
    background-image: none;
}
.footer_menu_item_a {
    display: block;
    font-size: 1.25rem;
    color: #969696;
    font-family: phr;
    line-height: 200%;
    margin-top: 0rem;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}







    .footer_bottom{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 0;
        border-top: 1px solid rgba(0,0,0,0.1);
        font-family: phr;
    }
    .footer_bottom_left{
        font-size: 1.125rem;
        color: rgba(0,0,0,0.5);
    }
    .footer_bottom_left a{
        color: rgba(0,0,0,0.5);
    }
    .footer_bottom_right{
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 1rem;
    }

    .footer_bottom_item{
        font-size: 0;
        cursor: pointer;
        margin-left: 0.5rem;
    }
    .footer_bottom_item svg{
        width: 2rem;
        height: 2rem;
        fill:rgba(0,0,0,0.16);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .footer_bottom_item:hover svg{
        fill:var(--OneColor);
    }
    /*首页*/
    .id_load_box{
        width: 100%;
        height: 100vh;
        position: relative;
    }



    .id_load_svg{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 15;
        font-size: 0;
        opacity: 1;
        display: none;
    }

    .id_load_svg svg{
        width: 100%;
        height: 100%;
        fill:#ffffff;
    }
    .id_load_svg2_item{
        opacity: 1;
    }


    .id_load_svg2{
        position: absolute;
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: 15;
        font-size: 0;
        opacity: 0;
    }
    .id_load_svg2_on{
        opacity: 1;
    }

    .id_load_svg2 svg{
        width: 100%;
        height: 100%;
        fill:#d11313;
        fill:#ffffff;
    }

    .id_load_video{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
        left: 0;
        top: 0;
    }
    .id_load_video video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .id_load_img_logo_box{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 20;
        font-size: 0;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .id_load_img_logo{
        text-align: center;
        transform: scale(0);
        opacity: 0;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        transition: all 1s;
    }
    .id_load_img_logo_on{
        text-align: center;
        transform: scale(1);
        opacity: 1;
    }
    .id_load_img_logo img{
        width: 80%;
        height: auto;
    }

    .id_part1{
        width: 100%;
        height: auto;
        position: relative;
        background: #FFFFFF;
        z-index: 5;
    }

    .id_banner_box{
        width: 100%;
        height: auto;
        position: relative;
        z-index: 5;
        overflow: hidden;
    }

    .id_banner_title{
        width: 94%;
        height: auto;
        margin: 0 auto;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        z-index: 10;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }
    .id_banner_title_l{
        font-size: 1.25rem;
    }
    .id_banner_title_bbox{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .id_banner_title_b{
        font-size: 2.25rem;
        font-family: phm;
        text-transform:capitalize;
        line-height: 100%;
        margin-top: 1.5rem;
    }
    .id_banner_title_bright{
        width: 100%;
        height: auto;
        font-size: 1.125rem;
        color: #000000;
        text-align: left;
        margin-top: 1.5rem;
    }
    .id_banner_more{
        width: 100%;
        height: 3.5rem;
        position: absolute;
        top: 0;
        right: 0%;
        z-index: 5;
        transform-origin:67% 0%;
        transform: skewX(-21deg);
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    .id_banner_more_left{
        width: auto;
        height: 100%;
        position: relative;
        z-index: 5;
        overflow: visible;
    }
    .id_banner_more_left:after{
        display: none;
    }
    .id_banner_more_top{
        width: 100%;
        height: calc(100% - 3.5rem);
        background: var(--OneColor);
    }
    .id_banner_more a{
        width: 100%;
        height: 3.5rem;
        background: rgba(0,102,255,0.8);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 1.5rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .id_banner_more a:hover{
        background: rgba(0,102,255,1);
    }
    .id_banner_more_text{
        transform: skewX(21deg);
        font-size: 1rem;
        color: #FFFFFF;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .id_banner_more a:hover .id_banner_more_text{
        font-size: 1rem;
    }
    .id_banner_more_svg{
        transform: skewX(21deg);
        font-size: 0;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        margin-left: 1.5rem;
    }
    .id_banner_more_svg svg{
        width: 1.5rem;
        height: 1.5rem;
        fill:#ffffff;
    }
    .id_banner_more a:hover .id_banner_more_svg{
        transform: translateX(0.5rem) skewX(30deg);
    }

    .id_banner_more_right{
        width: 6vw;
        height: 100%;
        background: #FFFFFF;
        overflow: hidden;
    }
    .id_banner_sw_box{
        width: 100%;
        height: 40vh;
        position: relative;
        z-index: 0;
        background: #FFFFFF;
        overflow: visible;
    }
    .id_banner_sw{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .id_banner_sw .swiper-slide{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .id_banner_img{
        width: 100%;
        height: 100%;
        font-size: 0;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 0;
        overflow: hidden;
    }
    .id_banner_img img{
        width:100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }


    .id_banner_more_right>div{
        font-size: 0;
        width: 1px;
        height: calc(100%);
        background: rgba(0,0,0,0.1);
        transform:skewX(24deg);
        margin-left: -10%;
    }

    .id_banner_menu_box{
        width: 100%;
        height: calc(40vh - 4rem);
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .id_banner_menu{
        width: 94%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        position: relative;
    }
    .id_banner_menu_item{
        width: 30%;
        height: auto;
        border-left: 1px solid rgba(255,255,255,0.5);
        padding-left: 1rem;
        padding-right: 1rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        position: static;
    }
    .id_banner_menu_item:nth-child(1){ width:40%;}
    .id_banner_menu_itemon{
        border-left: 1px solid rgba(255,255,255,1);
    }
    .id_banner_menu_item_title{
        font-size: 1.25rem;
        color: #FFFFFF;
        height: 4rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        position: relative;
        line-height: 100%;
    }
    .id_banner_menu_item_title:after{
        position: absolute;
        width: 3px;
        height: 2rem;
        content: '';
        background: #FFFFFF;
        font-size: 0;
        left: calc(-1rem - 2px);
        top: 300%;
        -webkit-transition: all 0.5s 0.3s;
        -moz-transition: all 0.5s 0.3s;
        transition: all 0.5s 0.3s;
        opacity: 0;
    }
    .id_banner_menu_itemon .id_banner_menu_item_title:after{
        top: 0%;
        opacity: 1;
    }
    .id_banner_menu_itemon .id_banner_menu_item_title{
        height: 4rem;
        font-size: 1.25rem;
    }
    .id_banner_menu_item_con{
        position: absolute;
        left: 0;
        top: auto;
        bottom: 3.5rem;
        width: 94vw;
        height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 0rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        opacity: 0;
    }
    .id_banner_menu_itemon .id_banner_menu_item_con{
        height: calc(40vh - 4rem);
        padding-bottom: 3rem;
        opacity: 1;
    }
    .id_banner_menu_item_des{
        font-size: 1.125rem;
        color: #FFFFFF;
         display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        line-height: 145%;
    }

    .id_banner_menu_item_btn{
        opacity: 0;
        transform: translateY(2rem);
        -webkit-transition: all 0.5s 0.3s;
        -moz-transition: all 0.5s 0.3s;
        transition: all 0.5s 0.3s;
        margin-top: 1rem;
    }
    .id_banner_menu_itemon .id_banner_menu_item_btn{
        opacity: 1;
        transform: translateY(0rem);
    }
    .id_banner_menu_item_btn a{
        width: 9rem;
        height: 2.8rem;
        padding-right: 0.5rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0 0,100% 0%,85% 100%,0% 100%);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .id_banner_menu_item_btn a:hover{
        background: var(--OneColor);
    }
    .id_banner_menu_item_btn_text{
        font-size: 1.125rem;
        color: #000000;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .id_banner_menu_item_btn a:hover .id_banner_menu_item_btn_text{
        color: #FFFFFF;
    }
    .id_banner_menu_item_btn_ico{
        width: 1.3rem;
        height: 1.3rem;
        font-size: 0;
        margin-left: 1rem;
    }
    .id_banner_menu_item_btn_ico svg{
        width: 100%;
        height: 100%;
        fill:#000000;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .id_banner_menu_item_btn a:hover .id_banner_menu_item_btn_ico svg{
        fill: #FFFFFF;
    }

    .id_pro_box{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        z-index: 5;
    }
    .id_pro_title{
        width: 94%;
        height: auto;
        margin: 0 auto;
        padding: 3rem 0rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        z-index: 10;
    }

    .id_pro_menu{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 2rem;
    }
    .id_pro_menu span{
        display: block;
        width: calc(50% - 0.25rem);
        height: auto;
        font-size: 1.25rem;
        margin-top: 0.5rem;
        color: #888888;
        font-family: phm;
        margin-right: 0rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        cursor: pointer;
        line-height: 110%;
                background: #f1f1f1;
        padding: 0.75rem 1rem;
        border-radius:4px;
    }
    .id_pro_menu span.id_pro_menu_son{
        background: var(--OneColor);
        color: #fff;
    }

    .id_pro_sw_box{
        width: 100%;
        height: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .id_pro_sw_back{
        display: block;
        width: 100%;
        height: 92%;
        top: 0;
        display: none;
    
    }

    .id_pro_sw{
        width: 94%;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
        padding: 2rem 0;
    }
    .id_pro_sw .swiper-slide{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        position: relative;
        padding-left: 0%;
    }
    .id_pro_sw_con{
        width: 100%;
        height: auto;
        padding-bottom: 0rem;;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 2rem;
    }
    .id_pro_sw_con_title{
        font-size: 2rem;
        text-align: center;
    }
    .id_pro_sw_con_des{
        font-size: 1.25rem;
        font-family: phr;
        color: rgba(0,0,0,0.6);
        margin-top:1rem;
    }
    .id_pro_sw_img{
        width: 90%;
        height: auto;
        margin: 0 auto;
        position: relative;
        right: 0%;
        top: 0;
        font-size: 0;
    }
    .id_pro_sw_img img{
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    .id_pro_sw_pagination_box{
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding-left: 0rem;
        margin-top: 2rem;
    }
    .id_pro_sw_pagination{
        width: 100%;
        height: auto;
        position: relative;
        z-index: 20;
        left: 0;
        bottom: 0rem;
        margin-top: 0rem;
        text-align: center;
        padding-left: 0%;
    }


    .id_ab_box{
        width: 100%;
        height: auto;
        padding-top: 3rem;
        position: relative;
        z-index: 5;
    }
    .id_ab_box_back{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .id_plate_back{
        width: 94%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    .id_plate_back>div{
        font-size: 0;
        width: 1px;
        height: 100%;
        background: rgba(0,0,0,0);
    }
    .id_ab{
        width: 100%;
        height: auto;
        position: relative;
    }
    .id_ab_left{
        position: relative;
        width: 100%;
        height: auto;
        left: 0;
        z-index: 5;
        top: 0rem;
        background: #0c1b2b;
        overflow: hidden;
        clip-path: polygon(0 0,100% 0%,100% 100%,0% 100%);
    }
    .id_ab_left_img{
        width: 100%;
        height: 100%;
        font-size: 0;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        background-image: url("../images/id_ab_back.jpg");
        background-size: cover;
        background-position: center;
        opacity: 0.08;
    }
    .id_ab_left_box{
        width: 100%;
        height: 100%;
        padding: 3rem 0;
        padding-left: 0%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .id_ab_title{
        width: 94%;
        height: auto;
        margin: 0 auto;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        z-index: 10;
    }
    .id_ab_left_box .id_banner_title_l{
        color: #FFFFFF;
    }
    .id_ab_left_box .id_banner_title_b{
        color: #FFFFFF;
    }
    .id_ab_left_box_des{
        width: 100%;
        height: auto;
        font-size: 1.25rem;
        color: rgba(255,255,255,0.7);
        margin-top: 2rem;
    }

    .id_ab_ceo{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 3rem;
    }
    .id_ab_ceo_ico{
        position: absolute;
        width: 2rem;
        height: auto;
        right: 0;
        top: 14rem;
        font-size: 0;
        display: none;
    }
    .id_ab_ceo_ico img{
        width: 100%;
        height: auto;
    }
    .id_ab_ceo_img{
        width: 11rem;
        height: 11rem;
        border-radius: 50%;
        font-size: 0;
        overflow: hidden;
    }
    .id_ab_ceo_img img{
        width:100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .id_ab_ceo_con{
        width: 70%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0rem;
        text-align: center;
    }
    .id_ab_ceo_con_title{
        font-size: 1.5rem;
        color: #FFFFFF;
        margin-top: 1.5rem;
    }
    .id_ab_ceo_con_des{
        width: 100%;
        font-size: 1.25rem;
        color: rgba(255,255,255,0.7);
        margin-top: 0.5rem;
    }

    .id_ab_right{
        position: relative;
        width: 100%;
        height: auto;
        padding: 2rem 0;
        right: 0;
        top: 0;
        z-index: 0;
        background: #f0f1f6;
        overflow: hidden;
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
        padding-right: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
    }

    .id_ab_right_item{
        width: 48%;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    .id_ab_right_item_top{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .id_ab_right_item_top_count{
        font-size: 4rem;
        font-family: dm;
        line-height: 100%;
    }
    .id_ab_right_item_top_si{
        font-size: 4rem;
        font-family: dm;
        line-height: 100%;
    }
    .id_ab_right_item_top_d{
        font-size: 4rem;
        font-family: dm;
        line-height: 100%;
    }
    .id_ab_right_item_title{
        font-size: 1.25rem;
        color: rgba(0,0,0,0.6);
        text-align: center;
    }


    .id_new_box{
        width: 100%;
        height: auto;
        position: relative;
        z-index: 5;
        padding-bottom: 2rem;
    }

    .id_new_box_backp{
        width: 5rem;
        height: 4.5rem;
        background: var(--OneColor);
        position: absolute;
        right: 0;
        top: 20%;
        clip-path: polygon(30% 0%,100% 0%,100% 100%,0% 100%);
    }


    .id_kh{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-top: 3rem;
    }
    .id_kh_item{
        width: 20%;
        height: 4.75rem;
        text-align: center;
        font-size: 0;
    }
    .id_kh_item img{
        width: auto;
        height: 100%;
    }
    .id_new{
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding-top: 1rem;
    }

    .id_new_title{
        width: 94%;
        height: auto;
        margin: 0 auto;
        padding-left: 0rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        z-index: 10;
    }
    .id_new_title_more{
        position: absolute;
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        right: 1rem;
        bottom: 0;
    }
    .id_new_title_more_text{
        font-size: 1.125rem;
        color: #000000;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .id_new_title_more:hover .id_new_title_more_text{
        color: var(--OneColor);
    }
    .id_new_title_more_ico{
        width: 1.3rem;
        height: 1.3rem;
        font-size: 0;
        margin-left: 1rem;
    }
    .id_new_title_more_ico svg{
        width: 100%;
        height: 100%;
        fill:#000000;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .id_new_title_more:hover .id_new_title_more_ico svg{
        fill: var(--OneColor);
        transform: translateX(0.5rem);
    }

    .id_new_list{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
        z-index: 10;
        margin-top: 2rem;
        background: #FFFFFF;
    }

    .id_new_item{
        width: 100%;
        height: auto;
        position: relative;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        transform-origin: 50% 50%;
    }
    .id_new_itemon{
        width: 100%;
        height: auto;
    }
    .id_new_item a{
        display: block;
        width: 100%;
        height: auto;
    }
    .id_new_item_img{
        width: 100%;
        height: auto;
        font-size: 0;
        position: relative;
        top: 0;
        left: 0;
        background: #000000;
    }
    .id_new_item_img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        transform-origin: 0% 0%;
    }
    .id_new_itemon .id_new_item_img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 1;
    }

    .id_new_item_box{
        width: 100%;
        height: auto;
        position: relative;
        left: 0;
        bottom: 0;
        background: #FFFFFF;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .id_new_item_box:after{
        display: none;
    }
    .id_new_itemon .id_new_item_box:after{
        opacity: 1;
    }
    .id_new_itemon .id_new_item_box{
        width: 100%;
        left: 0;
        padding:0 0rem;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }
    .id_new_item_type{
        width: 100%;
        height: auto;
        font-size: 1rem;
        color: #000000;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-bottom: 1rem;
        margin-top: 1rem;
    }
    .id_new_item_title{
        font-size: 1.375rem;
        color: #000000;
        font-family: phm;
        line-height: 150%;
        height: auto;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin-top: 1rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .id_new_itemon .id_new_item_title{
        font-size: 1.375rem;
        -webkit-line-clamp: 3;
    }
    .id_new_item_time{
        font-size: 1rem;
        color: #000000;
        font-family: phm;
        height: auto;
        margin-top: 0.5rem;
        padding-bottom: 2rem;
    }

    .id_in_box{
        width: 100%;
        height: auto;
        background: #0c1b2b;
        position: relative;
        z-index: 5;
    }
    .id_in{
        width: 1600px;
        width: var(--mainwidth);
        height: auto;
        margin: 0 auto;
        padding: 5rem 0;
    }
    .id_in_top{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .id_in_top_left{
        width: 50%;
        height: auto;
        font-size: 4.125rem;
        font-family: phm;
        color: #FFFFFF;
        line-height: 100%;
    }
    .id_in_top_right{
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .id_in_top_right input{
        width: calc(100% - 15rem);
        height: 4.5rem;
        background: #ffffff;
        border: none;
        margin: 0 1rem;
        padding: 0 1.5rem;
    }
    .id_in_top_right a{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 13rem;
        height: 4.5rem;
        background: var(--OneColor);
    }
    .id_in_top_right_atext{
        font-size: 1.25rem;
        color: #FFFFFF;
    }
    .id_in_top_right_aico{
        font-size: 0;
        margin-left: 1.2rem;
    }
    .id_in_top_right_aico svg{
        width: 2rem;
        height: 2rem;
        fill: #FFFFFF;
    }

    .id_in_list{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 5rem;
    }
    .id_in_item{
        width: 33.33%;
        height: auto;
        background-size:80% auto;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }
    .id_in_item:after{
        position: absolute;
        content: '';
        width: 2px;
        height: 2rem;
        background: rgba(255,255,255,0.2);
        font-size: 0;
        left: 0;
        top: 0;
    }
    .id_in_item:last-of-type:before{
        position: absolute;
        content: '';
        width: 2px;
        height: 2rem;
        background: rgba(255,255,255,0.2);
        font-size: 0;
        right: 0;
        top: 0;
    }
    .id_in_item:nth-of-type(1){
        background-image: url("../images/id_in_back1.jpg");
    }
    .id_in_item:nth-of-type(2){
        background-image: url("../images/id_in_back2.jpg");
    }
    .id_in_item:nth-of-type(3){
        background-image: url("../images/id_in_back3.jpg");
    }
    .id_in_item_ico{
        text-align: center;
    }
    .id_in_item_ico img{
        width: 5rem;
        height: 5rem;
    }
    .id_in_item_title{
        font-size: 2rem;
        color: #FFFFFF;
        text-align: center;
        font-family: phm;
        margin-top: 0.3rem;
    }
    .id_in_item_des{
        font-size: 1.375rem;
        color: rgba(255,255,255,0.6);
        text-align: center;
        margin-top: 1.5rem;
    }


    /*About*/

    .ab_banner_box{
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: relative;
    }
    .ab_banner_title{
        width: 94%;
        height: auto;
        margin: 0 auto;
        padding-left: 1rem;
        position: relative;
        padding-top: 3rem;
    }

    .ab_banner{
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;
        margin-top: 3rem;
    }
    .ab_banner_img{
        width: 100%;
        height: calc(100vw * 1100 / 1920);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        z-index: 0;
        font-size: 0;
    }
    .ab_banner_img img{
        width: 100%;
        height: auto;
    }


    .ab_banner_more{
        width: auto;
        height: 3.5rem;
        position: absolute;
        top: 0;
        right: 0%;
        z-index: 5;
        background: rgba(0,102,255,0.8);
        transform-origin:78% 0%;
        transform: skewX(-35deg) translateX(15%);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_banner_more_left{
        width: auto;
        height: 100%;
        padding: 0 1.5rem;
    }
    .ab_banner_more span{
        width: 100%;
        height: 100%;
        transform: skewX(35deg);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 1.125rem;
        color: #FFFFFF;
    }


    .ab_banner_more_right{
        width: 16vw;
        height: 100%;
        background: #FFFFFF;
        overflow: hidden;
    }

    .ab_why{
        width: 94%;
        height: auto;
        margin: 0 auto;
        padding: 0 1rem;
        padding-top: 3rem;
    }
    .ab_why_title{
        font-size: 2.25rem;
        color: #000000;
        font-family: phm;
        text-align: center;
    }
    .ab_why_con{
        font-size: 1.25rem;
        color: rgba(0,0,0,0.7);
        margin-top: 1.5rem;
        text-align: center;
    }

    .ab_map_box{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 2rem;
    }

    .ab_map_roll{
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-left: 1rem;
        margin-top:calc(94vw * 1475 / 3166);
        padding-top: 1rem;
    }
    .ab_map_roll_item_top{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        margin-top: 1rem;
    }
    .ab_map_roll_item_top_num{
        font-family: dm;
        color: var(--OneColor);
        font-size: 2.5rem;
    }
    .ab_map_roll_item_top_uit{
        font-family: dm;
        color: var(--OneColor);
        font-size: 2.5rem;
    }
    .ab_map_roll_item_top_doc{
        font-family: dm;
        color: var(--OneColor);
        font-size: 2.5rem;
    }
    .ab_map_roll_item_title{
        font-size: 1.125rem;
        color: rgba(0,0,0,0.5);
        text-align: center;
    }

    .ab_map{
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    .ab_map_map{
        width: 100%;
        height: auto;
        font-size: 0;
        position: relative;
        z-index: 0;
    }
    .ab_map_map img{
        width: 100%;
    }
    .ab_map_item{
        position: absolute;
        z-index: 5;
        width: 40px;
        height: 40px;
    }
    .ab_map_item1{
        top: 20%;
        left: 7%;
    }
    .ab_map_item2{
        top: 35%;
        left: 18%;
    }
    .ab_map_item3{
        top: 35%;
        left: 32%;
    }
    .ab_map_item4{
        top: 25%;
        right: 18%;
    }
    .ab_map_item5{
        top: 59%;
        right: 7%;
    }
    .ab_map_item_round{
        position: absolute;
        width: 100%;
        height: 100%;
        background: #FFFFFF;
        transform: scale(0.3);
        border-radius: 50%;
        z-index: 5;
    }
    .point{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      border-radius: 50%;
      opacity: 0;
        z-index: 0;
    }
    .ab_map_item1 .point-1{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 500ms infinite;
      -moz-animation: ripple 2500ms ease-out 500ms infinite;
      -o-animation: ripple 2500ms ease-out 500ms infinite;
      animation: ripple 2500ms ease-out 500ms infinite;
    }
    .ab_map_item1 .point-2{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 1000ms infinite;
      -moz-animation: ripple 2500ms ease-out 1000ms infinite;
      -o-animation: ripple 2500ms ease-out 1000ms infinite;
      animation: ripple 2500ms ease-out 1000ms infinite;
    }
    .ab_map_item1 .point-3{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 1500ms infinite;
      -moz-animation: ripple 2500ms ease-out 1500ms infinite;
      -o-animation: ripple 2500ms ease-out 1500ms infinite;
      animation: ripple 2500ms ease-out 1500ms infinite;
    }

    .ab_map_item2 .point-1{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 800ms infinite;
      -moz-animation: ripple 2500ms ease-out 800ms infinite;
      -o-animation: ripple 2500ms ease-out 800ms infinite;
      animation: ripple 2500ms ease-out 800ms infinite;
    }
    .ab_map_item2 .point-2{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 1300ms infinite;
      -moz-animation: ripple 2500ms ease-out 1300ms infinite;
      -o-animation: ripple 2500ms ease-out 1300ms infinite;
      animation: ripple 2500ms ease-out 1300ms infinite;
    }
    .ab_map_item2 .point-3{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 1800ms infinite;
      -moz-animation: ripple 2500ms ease-out 1800ms infinite;
      -o-animation: ripple 2500ms ease-out 1800ms infinite;
      animation: ripple 2500ms ease-out 1800ms infinite;
    }

    .ab_map_item3 .point-1{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 200ms infinite;
      -moz-animation: ripple 2500ms ease-out 200ms infinite;
      -o-animation: ripple 2500ms ease-out 200ms infinite;
      animation: ripple 2500ms ease-out 200ms infinite;
    }
    .ab_map_item3 .point-2{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 700ms infinite;
      -moz-animation: ripple 2500ms ease-out 700ms infinite;
      -o-animation: ripple 2500ms ease-out 700ms infinite;
      animation: ripple 2500ms ease-out 700ms infinite;
    }
    .ab_map_item3 .point-3{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 1200ms infinite;
      -moz-animation: ripple 2500ms ease-out 1200ms infinite;
      -o-animation: ripple 2500ms ease-out 1200ms infinite;
      animation: ripple 2500ms ease-out 1200ms infinite;
    }


    .ab_map_item4 .point-1{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 800ms infinite;
      -moz-animation: ripple 2500ms ease-out 800ms infinite;
      -o-animation: ripple 2500ms ease-out 800ms infinite;
      animation: ripple 2500ms ease-out 800ms infinite;
    }
    .ab_map_item4 .point-2{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 1300ms infinite;
      -moz-animation: ripple 2500ms ease-out 1300ms infinite;
      -o-animation: ripple 2500ms ease-out 1300ms infinite;
      animation: ripple 2500ms ease-out 1300ms infinite;
    }
    .ab_map_item4 .point-3{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 1800ms infinite;
      -moz-animation: ripple 2500ms ease-out 1800ms infinite;
      -o-animation: ripple 2500ms ease-out 1800ms infinite;
      animation: ripple 2500ms ease-out 1800ms infinite;
    }

    .ab_map_item5 .point-1{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 500ms infinite;
      -moz-animation: ripple 2500ms ease-out 500ms infinite;
      -o-animation: ripple 2500ms ease-out 500ms infinite;
      animation: ripple 2500ms ease-out 500ms infinite;
    }
    .ab_map_item5 .point-2{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 1000ms infinite;
      -moz-animation: ripple 2500ms ease-out 1000ms infinite;
      -o-animation: ripple 2500ms ease-out 1000ms infinite;
      animation: ripple 2500ms ease-out 1000ms infinite;
    }
    .ab_map_item5 .point-3{
        background: rgba(255,255,255,0.4);
      -webkit-animation: ripple 2500ms ease-out 1500ms infinite;
      -moz-animation: ripple 2500ms ease-out 1500ms infinite;
      -o-animation: ripple 2500ms ease-out 1500ms infinite;
      animation: ripple 2500ms ease-out 1500ms infinite;
    }


    @keyframes ripple{
        0%{
            opacity:0;
            -webkit-transform:scale(0.5,0.5);
            -moz-transform:scale(0.5,0.5);
            -ms-transform:scale(0.5,0.5);
            transform:scale(0.5,0.5); 
        }
        5%{ 
            opacity:1; 
        }
        100%{ 
            opacity:0;
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
            -ms-transform:scale(1);
            transform:scale(1);
        }
    }

    .ab_map_roll2{
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-right: 1rem;
        margin-top:calc(94vw * 1475 / 3166);
        padding-top: 1rem;
    }
    .ab_map_roll2_item_top{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
    }
    .ab_map_roll2_item_top_num{
        font-family: dm;
        color: var(--OneColor);
        font-size: 2.5rem;
    }
    .ab_map_roll2_item_top_uit{
        font-family: dm;
        color: var(--OneColor);
        font-size: 2.5rem;
    }
    .ab_map_roll2_item_top_doc{
        color: var(--OneColor);
        font-size: 1.25rem;
        padding-left: 1rem;
    }
    .ab_map_roll2_item_title{
        font-size: 1.125rem;
        color: rgba(0,0,0,0.5);
        text-align: center;
    }


    .ab_item_box{
        width: 100%;
        height: auto;
        padding-bottom: 3rem;
    }
    .ab_item{
        width: 94%;
        height: auto;
        margin: 0 auto;
        margin-top: 4rem;
        clear: both;
    }

    .ab_item_img{
        float: none;
        width: 100%;
        height: calc(94vw * 552 / 800);
        font-size: 0;
        overflow: hidden;
    }
    .ab_item_img img{
        width:100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
      transform: perspective(100px) translateZ(0px);
    }
    .ab_item_img:hover img{
        transform:  perspective(100px) translateZ(5px);
    }
    .ab_item2 .ab_item_img{
        float: none;
    }
    .ab_item_con{
        float: none;
        width: 100%;
        height: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .ab_item2 .ab_item_con{
        float: none;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ab_item_clear{
        width: 100%;
        height: 0;
        clear: both;
    }

    .ab_item_con_title{
        font-size: 1.375rem;
        color: #000000;
        font-family: phm;
        position: relative;
        padding-left: 1.8rem;
        margin-top: 1.5rem;
    }
    .ab_item_con_title:after {
        position: absolute;
        content: '';
        width: 0.6rem;
        height: 1rem;
        background: var(--OneColor);
        left: 0rem;
        top: calc(50% - 0.5rem);
        font-size: 0;
        transform: skewX(-30deg);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_item_con_btitle{
        font-size: 2rem;
        color: #000000;
        font-family: phm;
        position: relative;
        line-height: 120%;
        margin-top: 1rem;
    }
    .ab_item_con_des p{
        font-size: 1.25rem;
        color: #7e7e7e;
        margin-top: 1.5rem;
        position: relative;
        padding-left: 1.2rem;
        line-height: 140%;
    }
    .ab_item_con_des p:after {
        position: absolute;
        content: '';
        width: 0.6rem;
        height: 0.6rem;
        background: var(--OneColor);
        left: 0rem;
        top: 0.6rem;
        font-size: 0;
        border-radius: 50%;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }

    /*ab_r*/
    .ab_r_menu{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 5;
    }
    .ab_r_menu a{
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        width: auto;
        height: 3.3rem;
        padding: 0 1rem;
        margin: 0 0.5rem;
        background: #f0f1f6;
        font-size: 1.25rem;
        color: #888888;
        font-family: phm;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        margin-top: 3rem;
        position: relative;
        overflow: hidden;
    }
    .ab_r_menu a:after{
        position: absolute;
        width: 20rem;
        height: 20rem;
        font-size: 0;
        content: '';
        background: var(--OneColor);
        left: calc(50% - 10rem);
        top: calc(50% - 10rem);
        z-index: 0;
        transform: scale(0);
        opacity: 1;
        -webkit-transition: transform 0.8s;
        -moz-transition: transform 0.8s;
        transition: transform 0.8s;
        border-radius: 50%;
    }
    .ab_r_menu a span{
        position: relative;
        z-index: 5;
    }
    .ab_r_menu a:hover{
        color: #FFFFFF;
    }
    .ab_r_menu a:hover:after{
        transform: scale(1);
    }
    .ab_r_menu a.ab_r_menu_aon:after{
        transform: scale(1);
    }
    .ab_r_menu a.ab_r_menu_aon{
        color: #FFFFFF;
    }

    .ab_r_list{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .ab_r_item{
        width: 48.5%;
        height: auto;
        margin-top: 3rem;
        margin-right: 0%;
    }
    .ab_r_item:nth-of-type(4n){
        margin-right: 0;
    }
    .ab_r_item_img{
        width: 100%;
        height: calc(94vw * 0.485 * 258 / 383);
        font-size: 0;
        overflow: hidden;
    }
    .ab_r_item_img img{
        width:100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
      transform: perspective(100px) translateZ(0px);
    }
    .ab_r_item:hover .ab_r_item_img img{
        transform:  perspective(100px) translateZ(8px);
    }
    .ab_r_item_type{
        width: 100%;
        height: auto;
        color: #000000;
        margin-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        position: relative;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_r_item:hover .ab_r_item_type{
        color: var(--OneColor);
    }
    .ab_r_item_type:after{
        position: absolute;
        content: '';
        font-size: 0;
        width: 0%;
        height: 1px;
        background: var(--OneColor);
        left: 0;
        bottom: -1px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_r_item:hover .ab_r_item_type:after{
        width: 100%;
    }
    .ab_r_item_title{
        width: 100%;
        height: auto;
        color: #000000;
        font-size: 1.125rem;
        font-family: phm;
        line-height: 120%;
        margin-top: 1rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_r_item:hover .ab_r_item_title{
        color: var(--OneColor);
    }
    .ab_r_item_time{
        width: 100%;
        height: auto;
        color: #000000;
        font-size: 1rem;
        font-family: phm;
        line-height: 140%;
        margin-top: 1.5rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_r_item:hover .ab_r_item_time{
        color: var(--OneColor);
    }

    .ab_r_list_more{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 5;
    }
    .ab_r_list_more a{
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        width: auto;
        height: 3.5rem;
        padding: 0 2.5rem;
        margin: 0 0.5rem;
        background: #f0f1f6;
        font-size: 1.125rem;
        color: #888888;
        font-family: phm;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        margin-top: 5rem;
        position: relative;
        overflow: hidden;
    }
    .ab_r_list_more a:after{
        position: absolute;
        width: 20rem;
        height: 20rem;
        font-size: 0;
        content: '';
        background: var(--OneColor);
        left: calc(50% - 10rem);
        top: calc(50% - 10rem);
        z-index: 0;
        transform: scale(0);
        opacity: 1;
        -webkit-transition: transform 0.8s;
        -moz-transition: transform 0.8s;
        transition: transform 0.8s;
        border-radius: 50%;
    }

    .ab_r_list_more a span{
        position: relative;
        z-index: 5;
    }
    .ab_r_list_more a:hover{
        color: #FFFFFF;
    }
    .ab_r_list_more a:hover:after{
        transform: scale(1);
    }
    .ab_ad{
        width: 100%;
        height: calc(100vw * 753 / 1620);
      /* background-image: url("../images/ab_ad_img.jpg");*/
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        margin-top: 3rem;
        z-index: 5;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .ab_ad_box .ab_ad{
        margin-top: 0;
    }
    .ab_ad_title{
        text-align: center;
        font-size: 2rem;
        font-family: phm;
        color: #FFFFFF;
    }
    .ab_ad_link{
        width: auto;
        height: 3rem;
        background: var(--OneColor);
        margin: 0 auto;
        border-radius: 3rem;
        padding: 0 2.5rem;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        font-size: 1.25rem;
        color: #FFFFFF;
        margin-top: 1rem;
    }
    .ab_ad_link span{
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_ad_link:hover span{
        letter-spacing: 0.1rem;
    }

    /*ab_rd*/
    .ab_rd_box{
        width: 94%;
        height: auto;
        margin: 0 auto;
        position: relative;
    }
    .ab_rd_btn_box{
        position: fixed;
        width: 100%;
        height: auto;
        top: calc(55.5vh - 1.5rem);
        left: 0;
        z-index: 500;
    }
    .ab_rd_btn{
        width: 98%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        opacity: 0;
    }
    .ab_rd_btn_on{
        opacity: 1;
    }
    .ab_rd_btn a{
        width: 3rem;
        height: 3rem;
        border: 1px solid rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        background: #fff;

    }
    .ab_rd_btn a:hover{
        background: var(--OneColor);
        border: 1px solid var(--OneColor);
    }
    .ab_rd_btn a svg{
        width: 40%;
        height: 40%;
        margin: 0 auto;
        fill:rgba(0,0,0,0.5);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_rd_btn a:hover svg{
        fill:#ffffff;
    }

    .ab_rd{
        width: 100%;
        height: auto;
        margin: 0 auto;
        margin-top: 2rem;
    }

    .ab_rd_title{
        width: 100%;
        height: auto;
        font-size: 1.75rem;
        color: #000000;
        text-align: center;
        font-family: phm;
        line-height: 120%;
    }
    .ab_rd_time{
        width: 100%;
        height: auto;
        font-size: 1rem;
        color: #000000;
        text-align: center;
        font-family: phm;
        margin-top: 1rem;
    }
    .ab_rd_con{
        width: 100%;
        height: auto;
        font-size: 1.25rem;
        color: rgba(0,0,0,0.7);
        line-height: 160%;
        font-family: phr;
        margin-top:2rem;
        text-align: justify;
    }
    .ab_rd_con img{
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .ab_rb_tj_title{
        width: 94%;
        height: auto;
        margin: 0 auto;
        font-size: 2.5rem;
        color: #000000;
        font-family: phm;
        margin-top: 6rem;
    }
    .ab_rb_tj{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .ab_rb_tj .ab_r_item{
        margin-top: 1.5rem;
    }

    .ab_rd_ly{
        width: 100%;
        height: auto;
        margin: 0 auto;
        margin-top: 3rem;
        background: #f7f7f7;
        padding: 2rem 2rem;
    }
    .ab_rd_ly_title{
        width: 100%;
        height: auto;
        font-size: 2.5rem;
        font-family: phm;
        color: #000000;
        text-align: center;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .ab_rd_ly_ltitle{
        width: 100%;
        height: auto;
        font-size: 1.25rem;
        font-family: phm;
        color: rgba(0,0,0,0.5);
        text-align: center;
        margin-top: 1.1rem;
    }
    .ab_rd_ly_tag{
        width: 100%;
        height: auto;
        font-size: 1.375rem;
        font-family: phm;
        color: rgba(0,0,0,1);
        text-align: center;
        margin-top: 1.5rem;
    }
    .ab_rd_ly_tag font{
        color: #e20c0c;
    }
    .ab_rd_ly_item{
        width: 100%;
        height: 4rem;
        background: #FFFFFF;
        border-radius: 10px;
        margin-top: 1rem;
    }
    .ab_rd_ly_item input{
        width: 100%;
        height: 100%;
        padding: 0 1.5rem;
        font-size: 1.25rem;
        border: none;
        background: none;
        color: rgba(0,0,0,0.3);
    }
    .ab_rd_ly_item input::placeholder{
        color: rgba(0,0,0,0.3);
    }

    .ab_rd_ly_btn{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
    }
    .ab_rd_ly_btn_left{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .ab_rd_ly_btn_title{
        font-size: 1.75rem;
        color: #000000;
        font-family: phm;
    }
    .ab_rd_ly_btn_con{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-left: 0rem;
    }
    .ab_rd_ly_btn_con a{
        font-size: 0;
        margin-left: 1rem;
    }
    .ab_rd_ly_btn_con a svg{
        width: 1.8rem;
        height: 1.8rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_rd_ly_btn_con a:hover svg{
        fill:var(--OneColor);
    }

    .ab_rd_ly_btn_right{
        width: auto;
        height: 3.2rem;
        padding: 0 1.5rem;
        background: var(--OneColor);
        border-radius: 3.2rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 1.5rem;
    }
    .ab_rd_ly_btn_right_text{
        font-size: 1.125rem;
        color: #FFFFFF;
    }
    .ab_rd_ly_btn_right_ico{
        font-size: 0;
        margin-left: 0.5rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ab_rd_ly_btn_right:hover .ab_rd_ly_btn_right_ico{
        transform: translateX(0.5rem);
    }
    .ab_rd_ly_btn_right_ico svg{
        width: 1.8rem;
        height: 1.8rem;
        fill:#ffffff;
    }

    /*contact*/
    .ct_contact_box{
        width: 94%;
        height: auto;
        margin: 0 auto;
        padding-top: 3rem;
    }

    .ct_contact_title{
        font-size: 2.5rem;
        font-family: phm;
        color: #000000;
        text-align: center;
    }
    .ct_contact{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 1px;
        margin-top: 1rem;
    }
    .ct_contact_item{
        width: 100%;
        height: auto;
        padding: 2rem 2rem;
        margin-top: 2rem;

    }
    .ct_contact_item:nth-of-type(1){
        background: #f3f7fe;
    }
    .ct_contact_item:nth-of-type(2){
        background: #fdf5f8;
    }
    .ct_contact_item_title{
        font-size: 2rem;
        font-family: phm;
    }
    .ct_contact_item_des{
        font-size: 1.25rem;
        font-family: phm;
        margin-top: 1rem;
    }

    .ct_contact_item_btn{
        margin-top: 1.5rem;
    }


    .ct_contact_item_btn a{
        width: auto;
        height: 3rem;
        padding: 0 1.5rem;
        background: #343434;
        border-radius: 3rem;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ct_contact_item_btn a:hover{
        background: var(--OneColor);
    }
    .ct_contact_item_btna_text{
        font-size: 1rem;
        color: #FFFFFF;
    }
    .ct_contact_item_btna_ico{
        font-size: 0;
        margin-left: 0.5rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .ct_contact_item_btn a:hover .ct_contact_item_btna_ico{
        transform: translateX(0.5rem);
    }
    .ct_contact_item_btna_ico svg{
        width: 1.8rem;
        height: 1.8rem;
        fill:#ffffff;
    }

    .ct_contactc{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        padding:2rem 0;
    }
    .ct_contactc_item{
        width: 100%;
        height: auto;
        padding: 0 1.5rem;
        text-align: center;
        margin-top: 2rem;
    }
    .ct_contactc_item_ico img{
        width: 4rem;
        height: 4rem;
    }
    .ct_contactc_item_title{
        font-size: 2rem;
        font-family: phm;
        color: #000000;
        margin-top: 0.5rem;
    }
    .ct_contactc_item_con{
        margin-top: 0.5rem;
        font-size: 1.25rem;
        color: #717171;
        line-height: 150%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .ct_contactc_item_con span{
        display: inline-block;
        width: auto;
        height: auto;
        background: url('../images/1.png') no-repeat left 0;
        background-size:24px;
        padding-left: 30px;
         font-size: 1.25rem;
        color: #717171;
        line-height: 24px;
        margin-bottom: 1rem;
        text-align: left;
        
    }
    .ct_contactc_item_con span:nth-child(2){
        background: url('../images/2.png') no-repeat left 0;
        background-size:24px;
    }
    .ct_contactc_item_con span:nth-child(3){
        background: url('../images/3.png') no-repeat left 0;
        background-size:24px;
    }


    .demo_box{
        width: 100%;
        height: auto;
        background-image: url("../images/demo_back.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 3rem 0;
    }
    .demo{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .demo_left{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .demo_left_title_1{
        font-size: 2rem;
        font-family: phm;
        color: #FFFFFF;
        line-height: 120%;
        text-align: center;
    }
    .demo_left_title_2{
        font-size: 1.25rem;
        font-family: phm;
        color: #FFFFFF;
        margin-top: 1rem;
        text-align: center;
    }

    .demo_left_logo_1{
        font-size: 1.25rem;
        font-family: phm;
        color: #FFFFFF;
        text-align: center;
        margin-top: 1rem;
    }
    .demo_left_logo_2{
        font-size: 0;
        text-align: center;
    }
    .demo_left_logo_2 img{
        width: auto;
        height: 4rem;
        margin-right: 1rem;
        margin-left: 1rem;
        margin-top: 2rem;
    }

    .demo_right{
        width: 100%;
        height: auto;
        margin-top: 3rem;
    }
    .demo_right form{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .demo_right_item{
        width: 48.5%;
        height: auto;
        margin-bottom: 1.5rem;
    }
    .demo_right_item2{
        width: 100%;
        height: auto;
        margin-bottom: 1.5rem;
    }
    .demo_right_item3{
        width: 100%;
        height: auto;
        text-align: center;
        margin-top: 1rem;
    }
    .demo_right_item_title{
        font-size: 1.25rem;
        color: #FFFFFF;
    }
    .demo_right_item_input{
        width: 100%;
        height: 3.5rem;
        background: #FFFFFF;
        border-radius: 5px;
        margin-top: 0.5rem;
        text-align: center;
    }
    .demo_right_item_input input{
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 5px;
        padding: 0 1.5rem;
        font-size: 1.125rem;
        color: rgba(0,0,0,0.5);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .demo_right_item_input input:focus{
        -moz-box-shadow: 0px 0px 25px 0 rgba(0,102,255,1);
        -webkit-box-shadow: 0px 0px 25px 0 rgba(0,102,255,1);
        box-shadow: 0px 0px 15px 0 rgba(255,255,255,0.8);
    }
    .demo_right_item_input input::placeholder{
        color: rgba(0,0,0,0.5);
    }

    .demo_right_item_select{
        width: 90%;
        height: 100%;
        margin: 0 auto;
        border: none;
        font-size: 1.125rem;
        color: rgba(0,0,0,0.5);
    }

    .demo_right_item3 a{
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        width: auto;
        height: 3.5rem;
        background: var(--OneColor);
        border-radius: 3.5rem;
        margin: 0 auto;
        padding: 0 3rem;
        font-size: 1.25rem;
        color: #FFFFFF;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .demo_right_item3 a:hover{
        -moz-box-shadow: 0px 0px 25px 0 rgba(0,102,255,1);
        -webkit-box-shadow: 0px 0px 25px 0 rgba(0,102,255,1);
        box-shadow: 0px 0px 25px 0 rgba(0,102,255,1);
        transform: translateY(-3px);
    }

    /*help*/
    .hnav_box{
        width: 100%;
        height: 8vh;
        background:#FFFFFF;
        position: sticky;
        top: 0;
        z-index: 500;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .hnav{
        width: 94%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .hnav_logo{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .hnav_logo a{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .hnav_logo img{
        width: auto;
        height: 30%;
    }
    .hnav_title{
        font-size: 1.875rem;
        font-family: phm;
        color: #000000;
        margin-left: 3rem;
    }
    .hnav_right{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

    }
    .hnav_search{
        width: auto;
        height: 3.2rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border: 1px solid rgba(0,0,0,1.00);
        border-radius: 3.2rem;
        padding: 0 1.5rem;
    }
    .hnav_search a{
        width: 1.8rem;
        height: 1.8rem;
        font-size: 0;
    }
    .hnav_search a svg{
        width: 100%;
        height: 100%;
        fill:#000000;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .hnav_search a:hover svg{
        fill:var(--OneColor);
    }
    .hnav_search input{
        width: 5rem;
        height: 2rem;
        font-size: 1.25rem;
        color: #000000;
        margin-left: 1rem;
        border: none;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .hnav_search input:focus{
        width: 12rem;
    }

    .hnav_link{
        width: auto;
        height: 3.2rem;
        border-radius: 3.2rem;
        padding: 0 2rem;
        background: var(--OneColor);
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-size: 1.25rem;
        color: #FFFFFF;
        margin-left: 0.5rem;
    }

    .help_box{
        width: 100%;
        height: auto;
        background: #f9f9f9;
    }
    .help{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        padding-bottom: 3rem;
    }
    .help:after{
        position: absolute;
        content: '';
        font-size: 0;
        width: 1px;
        height: 100%;
        background: rgba(0,0,0,0.1);
        top: 0;
        left: 25%;
        display: none;
    }
    .help_left{
        width: 100%;
        height: auto;
    }
    .help_leftl{
        width: 94%;
        height: auto;
        margin: 0 auto;
        max-height: 800vh;
        overflow: auto;
        position: relative;
        top: 0vh;
        padding-top: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .help_menu{
        width: 100%;
        height: auto;
        margin-top: 1rem;
    }
    .help_menu_top{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        cursor: pointer;
    }
    .help_menu_top_ico{
        font-size: 0;
        width: 1.1rem;
        height: 1.1rem;
        margin-top: 0.3rem;
    }
    .help_menu_top_ico svg{
        width: 100%;
        height: 100%;
        fill:#000000;
        transform: rotate(-90deg);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .help_menu_on .help_menu_top_ico svg{
        transform: rotate(0deg);
    }
    .help_menu_top_title{
        font-size: 1.25rem;
        font-family: phm;
        color: #000000;
        margin-left: 0.2rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .help_menu_top:hover .help_menu_top_title{
        color: var(--OneColor);
    }
    .help_menu_on .help_menu_top_title{
        color: var(--OneColor);
    }

    .help_menu_con{
        width: auto;
        height: 0px;
        overflow: hidden;
        padding-left: 1rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .help_menu_on .help_menu_con{
        height: auto;
    }
    .help_menu_con_item{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: auto;
        height: auto;
        margin: 1rem 0;
    }
    .help_menu_con_item_ico{
        font-size: 0;
        width: 0.9rem;
        height: 0.9rem;
    }
    .help_menu_con_item_ico svg{
        width: 100%;
        height: 100%;
        fill:#000000;
        transform: rotate(-90deg);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;

    }
    .help_menu_con_item_on svg{
        fill:var(--OneColor);
    }
    .help_menu_con_item:hover .help_menu_con_item_ico svg{
        fill:var(--OneColor);
    }
    .help_menu_con_item_title{
        font-size: 1.125rem;
        color: #000000;
        margin-left: 0.1rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        font-family: phl;
    }
    .help_menu_con_item_on .help_menu_con_item_title{
        color:var(--OneColor);
    }

    .help_menu_con_item:hover .help_menu_con_item_title{
        color:var(--OneColor);
    }



    .help_right{
        width: 100%;
        height: auto;
        padding-top: 2rem;
        padding-left: 0rem;
        border-top: 1px solid #ccc;
        margin-top: 2rem;
    }

    .help_right_title{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .help_right_title_ico{
        width: auto;
        height: 2.5rem;
        font-size: 0;
    }
    .help_right_title_ico img{
        width: auto;
        height: 100%;
    }
    .help_right_title_text{
        font-size: 1.375rem;
        color: #000000;
        font-family: phm;
        margin-left: 1rem;
    }
    .help_right_con{
        width: 100%;
        height: auto;
        margin-top: 1rem;
        font-size: 1.125rem;
        line-height: 160%;
    }


    /*industry*/

    .in_js{
        width: 94%;
        height: auto;
        margin: 0 auto;
        margin-top: 3rem;
        clear: both;
    }

    .in_js_img{
        float: none;
        width: 100%;
        height: calc(94vw * 552 / 800);
        font-size: 0;
        overflow: hidden;
    }
    .in_js_img img{
        width:100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
      transform: perspective(100px) translateZ(0px);
    }
    .in_js_img:hover img{
        transform:  perspective(100px) translateZ(5px);
    }

    .in_js_con{
        float: none;
        width: 100%;
        height: auto;
        padding-left: 1rem;
    }

    .in_js_clear{
        width: 100%;
        height: 0;
        clear: both;
    }

    .in_js_con_title{
        font-size: 1.375rem;
        color: #000000;
        font-family: phm;
        position: relative;
        padding-left: 1.8rem;
    }
    .in_js_con_title:after {
        position: absolute;
        content: '';
        width: 0.6rem;
        height: 1rem;
        background: var(--OneColor);
        left: 0rem;
        top: calc(50% - 0.5rem);
        font-size: 0;
        transform: skewX(-30deg);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .in_js_con_btitle{
        font-size: 2.625rem;
        color: #000000;
        font-family: phm;
        position: relative;
        line-height: 120%;
        margin-top: 1rem;
    }
    .in_js_con_des{
        font-size: 1.375rem;
        color: #717171;
        font-family: phl;
        margin-top: 2.5rem;
        position: relative;
    }

    .in_ys_box{
        width: 94%;
        height: auto;
        margin: 0 auto;
        margin-top: 3rem;
    }
    .in_ys_box_title{
        font-size: 2rem;
        font-family: phm;
        color: #000000;
        text-align: center;
    }
    .in_ys{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .in_ys_item{
        width: 100%;
        height: auto;
        padding: 0 1rem;
        text-align: center;
        margin-top: 3rem;
    }
    .in_ys_item_ico img{
        width: auto;
        height: 3rem;
    }
    .in_ys_item_title{
        padding: 0 0.5rem;
        font-size: 1.375rem;
        font-family: phm;
        color: #000000;
        line-height: 120%;
        margin-top: 1rem;
        height: auto;
    }
    .in_ys_item_des{
        font-size: 1.25rem;
        color: #717171;
        font-family: phl;
        line-height: 120%;
        margin-top: 0.5rem;
    }

    .in_rev_box{
        width: 100%;
        height: auto;
        background: #f0f1f6;
        padding: 3rem 0;
        padding-bottom: 0rem;
        position: relative;
        z-index: 5;
        margin-top: 3rem;

    }
    .in_rev_box_title{
        width: 94%;
        height: auto;
        margin: 0 auto;
        padding: 0 0rem;
    }
    .in_rev_box_title_1{
        font-size: 1.5rem;
        color: #000000;
    }
    .in_rev_box_title_2{
        font-size: 2.5rem;
        color: #000000;
        font-family: phm;
    }

    .in_rev{
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: relative;
    }
    .in_rev_sw{
        width: 94%;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 2rem;
        padding-bottom: 5rem;
    }
    .in_rev_sw .swiper-slide{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 0rem;
    }
    .in_rev_sw_img{
        width: 35%;
        height: auto;
        font-size: 0;
        text-align: center;
        transform: translateY(0);
        margin: 0 auto;
    }
    .in_rev_sw_img img{
        width: 100%;
        height: auto;
    }
    .in_rev_sw_con{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
    }
    .in_rev_sw_con_des{
        font-size: 1.25rem;
        color: #000000;
        font-family: phr;
        margin-top: 1rem;
    }
    .in_rev_sw_con_bottom{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 1rem;
    }
    .in_rev_sw_con_bottom_left{
        width: auto;
        height: auto;
        text-align: center;
    }
    .in_rev_sw_con_bottom_left_1{
        font-size: 1.687rem;
        font-family: phm;
        color: #000000;
    }
    .in_rev_sw_con_bottom_left_2{
        font-size: 1.25rem;
        color: #000000;
    }
    .in_rev_sw_con_bottom_right{
        font-size: 0;
        height: auto;
    }
    .in_rev_sw_con_bottom_right img{
        width: auto;
        height: 100%;
    }

    .in_rev_btn{
        position: absolute;
        width: 2.25rem;
        height: 2.25rem;
        top: auto;
        bottom: 1.5rem;
        z-index: 20;
        cursor: pointer;
    }
    .in_rev_btn svg{
        width: 100%;
        height: 100%;
        fill:rgba(0,0,0,0.3);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .in_rev_btn:hover svg{
        fill:var(--OneColor);
    }
    .in_rev_btn_left{
        left: calc(50% - 3rem);
    }
    .in_rev_btn_right{
        right: calc(50% - 3rem);
    }

    .in_logo{
        width: 100%;
        height: auto;
        position: relative;
    }
    .in_logo_sw{
            width: 94%;
        margin: 0 auto;
        height: 12rem;
        overflow: hidden;
        background: #fff;
        padding: 2rem 0;
    }

    .in_logo_sw .swiper-slide{
        text-align: center;
        height: 4rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .in_logo_sw .swiper-slide img{
        height: 3rem;
        width: auto;
        -webkit-filter: grayscale(100%); 
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        max-height: 90%;
        max-width:100%;
    }

    .in_logo_sw .swiper-slide:hover img{
        -webkit-filter: grayscale(0); 
    }
    /*industry_re*/

    .inr_item{
        display: block;
        width: 94%;
        height: auto;
        margin: 0 auto;
        margin-top: 3rem;
        clear: both;
    }

    .inr_item_img{
        float: none;
        width: 100%;
        height: calc(94vw * 552 / 800);
        font-size: 0;
        overflow: hidden;
    }
    .inr_item2 .inr_item_img{
        float: none;
    }
    .inr_item_img img{
        width:100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
      transform: perspective(100px) translateZ(0px);
    }
    .inr_item_img:hover img{
        transform:  perspective(100px) translateZ(5px);
    }


    .inr_item_con{
        float: none;
        width: 100%;
        height: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .inr_item2 .inr_item_con{
        float: right;
        padding-left: 1rem;
        padding-right: 1rem;
    }


    .inr_item_con_title{
        font-size: 1.375rem;
        color: #000000;
        font-family: phm;
        position: relative;
        padding-left: 1.8rem;
        margin-top: 1.5rem;
    }
    .inr_item_con_title:after {
        position: absolute;
        content: '';
        width: 0.6rem;
        height: 1rem;
        background: var(--OneColor);
        left: 0rem;
        top: calc(50% - 0.5rem);
        font-size: 0;
        transform: skewX(-30deg);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .inr_item_con_btitle{
        font-size: 2rem;
        font-family: phm;
        position: relative;
        line-height: 120%;
        margin-top: 1rem;
    }
    .inr_item_con_btitle font{
        color: #000000;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .inr_item:hover .inr_item_con_btitle font{
        color: var(--OneColor);
    }
    .inr_item_con_des{
        font-size: 1.25rem;
        color: #717171;
        font-family: phl;
        margin-top: 1.5rem;
        position: relative;
        max-height: inherit;
        overflow: auto;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        padding-right: 1rem;
    }

    .inr_tag{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        z-index: 5;
        background: #FFFFFF;
        margin-top: 3rem;
    }
    .inr_tag:before{
        position: absolute;
        content: '';
        width: 1px;
        height: 100%;
        font-size: 0;
        background: rgba(0,0,0,0.1);
        top: 0;
        left: 0;
    }
    .inr_tag:after{
        position: absolute;
        content: '';
        width: 1px;
        height: 100%;
        font-size: 0;
        background: rgba(0,0,0,0.1);
        top: 0;
        right:  0;
    }

    .inr_tag_left{
        width: 100%;
        height: auto;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        border-top: 1px solid rgba(0,0,0,0.1);

    }
    .inr_tag:after{
        position: absolute;
        content: '';
        width: 1px;
        height: 100%;
        font-size: 0;
        background: rgba(0,0,0,0.1);
        top: 0;
        right:  0;
    }
    .inr_tag_menu{
        width: 50%;
        height: 6rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 0rem;
        font-size: 1.25rem;
        font-family: phm;
        color: #000000;
        position: relative;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        border-right: 1px solid rgba(0,0,0,0.1);
        border-top: 0px solid rgba(0,0,0,0);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        text-align: center;
    }
    .inr_tag_menu:nth-of-type(2n){
        border-right: 0px solid rgba(0,0,0,0.1);
    }
    .inr_tag_menu_on{
        color: var(--OneColor);
        border-bottom: 1px solid rgba(0,0,0,0.1);
        border-top: 1px solid rgba(0,0,0,0);
    }
    .inr_tag_menu_on:before{
        position: absolute;
        content: '';
        width: 1px;
        height: 100%;
        font-size: 0;
        background:#FFFFFF;
        right: -1px;
        top: 0;
        z-index: 5;
        display: none;
    }


    .inr_tag_right{
        width: 100%;
        height: auto;
        position: relative;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        border-top: 1px solid rgba(0,0,0,0.1);
        padding: 1rem;
    }
    .inr_tag_right:after{
        position: absolute;
        content: '';
        width: 1px;
        height: 100%;
        font-size: 0;
        background: rgba(0,0,0,0.1);
        left: -1px;
        bottom: 0;
        display: none;
    }
    .inr_tag_sw{
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .inr_tag_sw .swiper-slide{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .inr_tag_sw_left{
        width: 100%;
        height: auto;
        padding-left: 0rem
        padding-top: 1.5rem;
    }
    .inr_tag_sw_left_title{
        font-size: 2rem;
        font-family: phm;
        color: #000000;
    }
    .inr_tag_sw_left_des{
        font-size: 1.25rem;
        color: #717171;
        margin-top: 0.5rem;
    }
    .inr_tag_sw_right{
        width: 100%;
        height: auto;
        font-size: 0;
        margin-top: 1.5rem;
    }
    .inr_tag_sw_right img{
        width: 100%;
        height: auto;
    }


    /*login*/
    .login_box{
        width: 100%;
        height: auto;
        padding: 3rem 0;
        background-image: url("../images/login_back.jpg");
        background-size: cover;
        background-position: center;
    }
    .login{
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .login_title{
        font-size: 2rem;
        font-family: phm;
        color: #FFFFFF;
        text-align: center;
        padding-bottom: 1rem;
    }
    .login_item_title{
        font-size: 1.25rem;
        color: #FFFFFF;
        font-family: phm;
        margin-top: 1.5rem;
         padding: 0 4%;
    }
    .login_item{
        width: 100%;
        height: 3.5rem;
        border-radius: 5px;
        margin-top: 0.75rem;
       
        padding: 0 4%;
    }



    .login_item input{
        width: 100%;
        height: 100%;
        padding: 0 1.125rem;
        border-radius: 5px;
        border: none;
        background: #FFFFFF;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        font-size: 1.125rem;
        color: rgba(0,0,0,0.5);
        font-family: phr;
    }
    .login_item input:focus{
        -moz-box-shadow: 0px 0px 25px 0 rgba(0,102,255,1);
        -webkit-box-shadow: 0px 0px 25px 0 rgba(0,102,255,1);
        box-shadow: 0px 0px 15px 0 rgba(255,255,255,0.8);
    }

    .login_items{
        display: flex;
        justify-content: space-between;
    }
    .login_item input.natural_text{
        width: 70%;
    }
    .login_item input.vcodebtn{
        width: 28.5%;
            background: var(--OneColor);
        font-size: 1.5rem;
        color: #FFFFFF;
        font-family: phm;

    }

    .login_link{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
        padding: 0 4%;
    }
    .login_link_left{
   
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 1.125rem;
        color: #FFFFFF;
    }
    .login_link_left input{
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
    }

    .login_link_right a{
       
        padding-top: 1rem;
        width: 100%;
        height: auto;
        font-size: 1.125rem;
        color: #FFFFFF;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        text-align: right;
    }
    .login_link_right a:hover{
        color: var(--OneColor);
    }

    .login_btn{
        width: 100%;
        height: auto;
        padding: 0 4%;
    }
    .login_btn a{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 3.5rem;
        background: var(--OneColor);
        font-size: 1.5rem;
        color: #FFFFFF;
        font-family: phm;
        text-align: center;
        border-radius: 5px;
        margin-top: 1rem;
    }
    .login_text{
        text-align: center;
        font-size: 1.25rem;
        color: #FFFFFF;
        font-family: phr;
        margin-top: 2rem;
        width:110%;
        margin-left: -5%;
    }
    .login_text a{
        color: var(--OneColor);

    }


    /*product*/
    .pro_gs_box{
        width: 100%;
        height: auto;
        background: #f0f1f6;
        position: relative;
        z-index: 5;
        padding: 3rem 0;
    }


    .pro_gs{
        width: 94%;
        height: auto;
        margin: 0 auto;
        clear: both;
    }

    .pro_gs_img{
        float: none;
        width: 80%;
        margin: 0 auto;
        height: auto;
        font-size: 0;
    }
    .pro_gs2 .pro_gs_img{
        float: none;
    }
    .pro_gs_img img{
        width:100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
      transform: perspective(100px) translateZ(0px);
    }
    .pro_gs_img:hover img{
        transform:  perspective(100px) translateZ(5px);
    }

    .pro_gs_con{
        float: none;
        width: 100%;
        height: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .pro_gs2 .pro_gs_con{
        float: none;
        padding-left: 1rem;
        padding-right: 1rem;
    }


    .pro_gs_con_title{
        font-size: 1.375rem;
        color: #000000;
        font-family: phm;
        position: relative;
        padding-left: 1.8rem;
        margin-top: 1.5rem;
    }
    .pro_gs_con_title:after {
        position: absolute;
        content: '';
        width: 0.6rem;
        height: 1rem;
        background: var(--OneColor);
        left: 0rem;
        top: calc(50% - 0.5rem);
        font-size: 0;
        transform: skewX(-30deg);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .pro_gs_con_btitle{
        font-size: 2rem;
        color: #000000;
        font-family: phm;
        position: relative;
        line-height: 120%;
        margin-top: 1rem;
    }
    .pro_gs_con_des{
        font-size: 1.25rem;
        color: #717171;
        font-family: phl;
        margin-top: 1.5rem;
        position: relative;
        max-height: inherit;
        overflow: auto;
    }

    .pro_ys_box{
        width: 94%;
        height: auto;
        margin: 0 auto;
        position: relative;
        padding-top: 3rem;
        padding-bottom: 3rem;

    }
    .pro_ys_title{
        font-size: 2.5rem;
        font-family: phm;
        padding-left: 0rem;
        text-align: center;
    }
    .pro_ys{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .pro_ys_item{
        width: 50%;
        height: auto;
        padding: 0 0.5rem;
        text-align: center;
        margin-top: 3rem;
    }
    .pro_ys_item_ico img{
        width: auto;
        height: 2.75rem;
    }
    .pro_ys_item_title{
        font-size: 1.25rem;
        color: #000000;
        font-family: phm;
        line-height: 120%;
        margin-top: 1rem;
    }
    .pro_ys_item_des{
        font-size: 1.125rem;
        color: #717171;
        line-height: 120%;
        margin-top: 1rem;
        padding: 0 0rem;
    }


    /*solutions*/

    .sol_item{
        width: 94%;
        height: auto;
        margin: 0 auto;
        clear: both;
        margin-top:3rem;
    }

    .sol_item_img{
        float: none;
        width: 100%;
        height: auto;
        font-size: 0;
        overflow: hidden;
    }

    .sol_item_img img{
        width:100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        transform: perspective(100px) translateZ(0px);
    }
    .sol_item_img:hover img{
        transform:  perspective(100px) translateZ(5px);
    }

    .sol_item_con{
        float: none;
        width: 100%;
        height: auto;
        padding-left: 1rem;
    }

    .sol_item_con_title{
        font-size: 1.375rem;
        color: #000000;
        font-family: phm;
        position: relative;
        padding-left: 1.8rem;
        margin-top: 1.5rem;
    }
    .sol_item_con_title:after {
        position: absolute;
        content: '';
        width: 0.6rem;
        height: 1rem;
        background: var(--OneColor);
        left: 0rem;
        top: calc(50% - 0.5rem);
        font-size: 0;
        transform: skewX(-30deg);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .sol_item_con_btitle{
        font-size: 2rem;
        color: #000000;
        font-family: phm;
        position: relative;
        line-height: 120%;
        margin-top: 1rem;
    }
    .sol_item_con_des{
        font-size: 1.25rem;
        color: #717171;
        font-family: phl;
        margin-top: 1.5rem;
        position: relative;
    }

    .sol_item_con_tag{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .sol_item_con_tag_item{
        width: 100%;
        height: auto;
        margin-top: 2rem;
    }
    .sol_item_con_tag_item_title{
        font-size: 1.5rem;
        font-family: phm;
        color: #000000;
        line-height: 120%;
        position: relative;
        padding-left: 2.5rem;
    }
    .sol_item_con_tag_item_title:after{
        position: absolute;
        content: attr(num);
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        background: var(--OneColor);
        border-radius: 50%;
        font-size: 1.25rem;
        color: #FFFFFF;
        left: 0;
        top: -0.25rem;
        text-align: center;
    }
    .sol_item_con_tag_item_des{
        font-size: 1.125rem;
        color: rgba(0,0,0,0.5);
        line-height: 140%;
        position: relative;
        padding-left: 2.5rem;
        margin-top: 1rem;
    }


    .sol_item2_img{
        float: none;
        width: 100%;
        height: auto;
        font-size: 0;
        overflow: hidden;
    }
    .sol_item2_img img{
        width:100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        transform: perspective(100px) translateZ(0px);
    }
    .sol_item2_img:hover img{
        transform:  perspective(100px) translateZ(5px);
    }


    .sol_item2_con{
        float: none;
        width: 100%;
        height: auto;
        padding-right: 1rem;
        padding-left: 1rem;
    }


    .sol_item3_con_tag{
        width: 100%;
        height: auto;
    }
    .sol_item3_con_tag_item{
        width: 100%;
        height: auto;
        margin-top: 2.5rem;
    }
    .sol_item3_con_tag_item_title{
        font-size: 1.5rem;
        font-family: phm;
        color: #000000;
        line-height: 120%;
        position: relative;
        padding-left: 2.5rem;
    }
    .sol_item3_con_tag_item_title:after{
        position: absolute;
        content: attr(num);
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        background: var(--OneColor);
        border-radius: 50%;
        font-size: 1.25rem;
        color: #FFFFFF;
        left: 0;
        top: 0;
        text-align: center;
    }
    .sol_item3_con_tag_item_des{
        font-size: 1.125rem;
        color: rgba(0,0,0,0.5);
        line-height: 140%;
        position: relative;
        padding-left: 2.5rem;
        margin-top: 1rem;
    }




    .sol_v_item{
        width: 94%;
        height: auto;
        margin: 0 auto;
        clear: both;
        margin-top:3rem;
    }

    .sol_v_item_img{
        float: none;
        width: 100%;
        height: auto;
        font-size: 0;
        overflow: hidden;
    }
    .sol_v_item2 .sol_v_item_img{
        float: none;
    }
    .sol_v_item_img img{
        width:100%;
        height: 100%;
        max-height: 350px;
        object-fit: cover;
        object-position: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
      transform: perspective(100px) translateZ(0px);
    }
    /*.sol_v_item_img:hover img{
        transform:  perspective(100px) translateZ(5px);
    }
    */
    .sol_v_item_con{
        float: none;
        width: 100%;
        height: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .sol_v_item2 .sol_v_item_con{
        float: none;
        width: 100%;
        height: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sol_v_item2_img{
        float: none;
        width: 100%;
        height: auto;
        font-size: 0;
        overflow: hidden;
    }

    .sol_v_item2_img img{
        width:100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }


    .sol_v_item_con_title{
        font-size: 1.375rem;
        color: #000000;
        font-family: phm;
        position: relative;
        padding-left: 1.8rem;
        margin-top: 1.5rem;
    }
    .sol_v_item_con_title:after {
        position: absolute;
        content: '';
        width: 0.6rem;
        height: 1rem;
        background: var(--OneColor);
        left: 0rem;
        top: calc(50% - 0.5rem);
        font-size: 0;
        transform: skewX(-30deg);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .sol_v_item_con_btitle{
        font-size: 2rem;
        color: #000000;
        font-family: phm;
        position: relative;
        line-height: 120%;
        margin-top: 1rem;
    }
    .sol_v_item_con_des{
        font-size: 1.25rem;
        color: #717171;
        font-family: phl;
        margin-top: 2rem;
        position: relative;
    }

    .sol_v_item_con_tag{
        width: 100%;
        height: auto;
    }
    .sol_v_item_con_tag_item{
        width: 100%;
        height: auto;
        margin-top: 2rem;
    }
    .sol_v_item_con_tag_item:first-of-type{
        margin-top: 0;
    }
    .sol_v_item_con_tag_item_title{
        font-size: 2rem;
        font-family: phm;
        color: #000000;
        line-height: 120%;
        position: relative;
        padding-left: 2.5rem;
    }
    .sol_v_item_con_tag_item_title:after{
        position: absolute;
        content: attr(num);
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        background: var(--OneColor);
        border-radius: 50%;
        font-size: 1.25rem;
        color: #FFFFFF;
        left: 0;
        top: 0.2rem;
        text-align: center;
    }
    .sol_v_item_con_tag_item_des{
        font-size: 1.25rem;
        color: rgba(0,0,0,0.5);
        line-height: 140%;
        position: relative;
        padding-left: 2.5rem;
        margin-top: 1rem;
    }

    .sol_v_ys_box{
        width: 100%;
        height: auto;
        background: #f0f1f6;
        position: relative;
        z-index: 5;
        padding: 3rem 0;
        margin-top: 3rem;
        transform: translateY(5rem);
    }
    .sol_v_ys_title{
        width: 94%;
        height: auto;
        margin: 0 auto;
        padding-left: 0rem;
        font-size: 2.5rem;
        color: #000000;
        font-family: phm;
    }
    .sol_v_ys{
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }


    .sol_v_ys_item{
        width: 100%;
        height: auto;
        margin-top: 2rem;
    }
    .sol_v_ys_item_title{
        font-size: 1.5rem;
        font-family: phm;
        color: #000000;
        line-height: 120%;
        position: relative;
        padding-left: 2.5rem;
    }
    .sol_v_ys_item_title:after{
        position: absolute;
        content: attr(num);
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        background: var(--OneColor);
        border-radius: 50%;
        font-size: 1.5rem;
        color: #FFFFFF;
        left: 0;
        top: -0.1rem;
        text-align: center;
    }
    .sol_v_ys_item_des{
        font-size: 1.25rem;
        color: #717171;
        line-height: 140%;
        position: relative;
        padding-left: 2.5rem;
        margin-top: 1rem;
    }


    /*member*/
    .mnav_box{
        width: 100%;
        height: 8vh;
        background:#FFFFFF;
        position: sticky;
        top: 0;
        z-index: 500;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .mnav{
        width: 94%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .mnav_logo{
        width: auto;
        height: 100%;
    }
    .mnav_logo a{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .mnav_logo img{
        width: auto;
        height: 25%;
    }

    .mnav_right{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

    }
    .mnav_text{
        width: auto;
        height: auto;
        font-size: 1rem;
        color: #000000;
        font-family: phr;
    }
    .mnav_text a{
        color: var(--OneColor);
    }

    .mnav_link{
        width: auto;
        height: 2.4rem;
        border-radius: 2.4rem;
        padding: 0 1rem;
        background: #fe9454;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-size: 1rem;
        color: #FFFFFF;
        margin-left: 0.5rem;
    }

    .meb_top{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rem;
    }
    .meb_top_left{
        font-size: 1.5rem;
        font-family: phm;
        color: #000000;
    }
    .meb_top_down{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        background: linear-gradient(to bottom,#36d5a2,#1fc8ac);
        border-radius: 5px;
        position: relative;
    }
    .meb_top_down:after{
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: var(--OneColor);
        left: 0;
        top: 0;
        z-index: 0;
        border-radius: 5px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        opacity: 0;
    }
    .meb_top_down:hover:after{
        opacity: 1;
    }
    .meb_top_down svg{
        width: 60%;
        height: 60%;
        fill:#ffffff;
        margin: 0 auto;
    }
    .meb_top_down span{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 5;
    }

    .meb{
        width: 94%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .meb_left{
        width: 100%;
        height: auto;
    }
    .meb_left_title{
        width: 100%;
        height: 4rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 2rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-bottom: 1.5rem;
    }
    .meb_left_title_1{
        width: 35%;
        height: auto;
        font-size: 1.125rem;
        font-family: phm;
        color: rgba(0,0,0,0.6);
        padding-left: 0.75rem;
    }
    .meb_left_title_2{
        width: 35%;
        height: auto;
        font-size: 1.125rem;
        font-family: phm;
        color: rgba(0,0,0,0.6);
    }
    .meb_left_title_3{
        width: 15%;
        height: auto;
        font-size: 1.125rem;
        font-family: phm;
        color: rgba(0,0,0,0.6);
    }
    .meb_left_title_4{
        width: 15%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .meb_left_title_4 a{
        width: 2.3rem;
        height: 2.3rem;
        background: rgba(0,0,0,0.1);
        font-size: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 0.5rem;
        border-radius: 3px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .meb_left_title_4 a:hover{
        background: var(--OneColor);
    }
    .meb_left_title_4 a svg{
        width: 55%;
        height: 55%;
        margin: 0 auto;
        fill:#ffffff;

    }

    .meb_left_item{
        width: 100%;
        height: auto;
    }
    .meb_left_iteml{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding: 1rem 0;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .meb_left_item:hover .meb_left_iteml{
        background: rgba(0,0,0,0.1);
        border-radius: 5px;
        border-bottom: 1px solid rgba(0,0,0,0);
    }

    .meb_left_item_1{
        width: 35%;
        height: auto;
        font-size: 1.125rem;
        color: rgba(0,0,0,1);
        font-family: phr;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        padding-left: 0.75rem;
    }
    .meb_left_item:hover .meb_left_item_1{
        color: var(--OneColor);
    }
    .meb_left_item_1_ico{
        width: auto;
        height: auto;
        padding: 0 0rem;
        font-size: 0;
        padding-bottom: 0.5rem;
    }
    .meb_left_item_1_ico img{
        width: auto;
        height: 2rem;
    }

    .meb_left_item_2{
        width: 35%;
        height: auto;
        font-size: 1rem;
        color: rgba(0,0,0,0.5);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .meb_left_item:hover .meb_left_item_2{
        color: rgba(0,0,0,1);
    }
    .meb_left_item_3{
        width: 15%;
        height: auto;
        font-size: 1rem;
        color: rgba(0,0,0,0.5);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .meb_left_item:hover .meb_left_item_3{
        color: rgba(0,0,0,1);
    }
    .meb_left_item_4{
        width: 15%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding-right: 0.75rem;
    }
    .meb_left_item_4 svg{
        width: 1.8rem;
        height: 1.8rem;
        fill:rgba(0,0,0,0.2);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .meb_left_item:hover .meb_left_item_4 svg{
        fill: var(--OneColor);
    }

    .meb_page{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
    }
    .meb_page a{

        font-size: 1.125rem;
    }
    .meb_page_menu{
        color: #808080;
        margin: 0 1rem;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .meb_page_menu:hover{
        color: var(--OneColor);
    }
    .meb_page_item{
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        color: #808080;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .meb_page_item:hover{
        background: var(--OneColor);
        color: #FFFFFF;
    }
    .meb_page_item_on{
        background: var(--OneColor);
        color: #FFFFFF;
    }

    .meb_right{
        width: 100%;
        height: auto;
    }
    .meb_right_title{
        width: 100%;
        height: 6rem;
        margin-top: 1rem;
        padding-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        font-size: 1.5rem;
        font-family: phm;
        border-bottom: 3px solid var(--OneColor);
    }
    .meb_right_ltitle{
        font-size: 1.25rem;
        color: #000000;
        font-family: phm;
        margin-top: 2.5rem;
    }
    .meb_right_item{
        width: 100%;
        height: auto;
        padding: 1.5rem 1.5rem;
        background: #f4f4f4;
        border-radius: 5px;
        margin-top: 1.5rem;
    }
    .meb_right_item_title{
        color: #666666;
        font-size: 1.125rem;
    }
    .meb_right_item_des{
        color: #000000;
        font-size: 1.125rem;
        font-family: phm;
        margin-top: 0.3rem;
    }


    .meb_footer{
        width: 94%;
        height: auto;
        margin: 0 auto;
        text-align: center;
        border-top: 1px solid rgba(0,0,0,0.1);
        padding: 2rem 0;
        margin-top: 6rem;
        color: rgba(0,0,0,0.5);
        font-size: 1.125rem;
    }
    
    
    
.cook_box{
    width: 100%;
    height: auto;
    position: fixed;
    padding: 1rem 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    background: #FFFFFF;
    -moz-box-shadow: 0px 0px 35px 0 rgba(0,0,0,0.08);
    -webkit-box-shadow: 0px 0px 35px 0 rgba(0,0,0,0.08);
    box-shadow: 0px -3px 3px 0 rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cook{
    width: 92%;
	height: auto;
	margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.cook_left{
    width: 100%;
    font-size: 1.125rem;
    color: rgba(0,0,0,0.8);
}
.cook_right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}
.cook_right a{
    width: auto;
    height: 3.1rem;
    background: var(--OneColor);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
}

.cook_right a:hover{
    -moz-box-shadow: 0px 0px 15px 0 rgba(0,102,255,0.4);
    -webkit-box-shadow: 0px 0px 15px 0 rgba(0,102,255,0.4);
    box-shadow: 0px 0px 15px 0 rgba(0,102,255,0.4);
}
    
    /*咨询框*/
.serv_box{
    position: fixed;
    width: 4rem;
    height: 4rem;
    right: 5px;
    bottom:5px;
    z-index: 800;
}
.serv_ico{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: var(--OneColor);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.serv_ico:hover{
    -moz-box-shadow: 0px 0px 25px 0 rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 0px 25px 0 rgba(0,0,0,0.4);
    box-shadow: 0px 0px 25px 0 rgba(0,0,0,0.4);
    transform: translateY(-2px);
}
.serv_ico svg{
    width: 50%;
    height: 50%;
    fill:#ffffff;
    margin: 0 auto;
}

.serv{
    position: absolute;
    width: calc(100vw - 10px);
    height: 0vh;
    background: #FFFFFF;
    border-radius: 8px;
    bottom: 120%;
    overflow: hidden;
    right: 0;
    -moz-box-shadow: 0px 0px 35px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 35px 0 rgba(0,0,0,0.2);
    box-shadow: 0px 0px 35px 0 rgba(0,0,0,0.2);
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.serv_on{
    height: 70vh;
    opacity: 1;
}
.serv_top{
    width: 100%;
    height: 5rem;
    background: var(--OneColor);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 2rem;
}
.serv_top_ico{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    font-size: 0;
}
.serv_top_ico img{
    width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.serv_top_con{
    margin-left: 1rem;
}
.serv_top_con_title{
    font-size: 1.125rem;
    color: #FFFFFF;
    line-height: 100%;
}
.serv_top_con_des{
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    line-height: 100%;
    margin-top: 0.2rem;
}
.serv_main{
    width: 100%;
    height: calc(70vh - 11rem);
    padding:1.5rem 2rem 2rem 2rem;
    overflow: auto;
}
.serv_main_time{
    font-size: 1rem;
    font-family: phm;
    color: rgba(0,0,0,0.5);
    text-align: center;
}
.serv_main_item{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 1.5rem;
}
.serv_main_item_ico{
    width: 2rem;
    height: 2rem;
    background: #748c9f;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0;
    margin-top: 0.2rem;
}
.serv_main_item_ico img{
    width: 55%;
    height: 55%;
    margin: 0 auto;
}
.serv_main_item_tiem{
    width: 3rem;
    height: auto;
    font-size: 0.875rem;
    color: rgba(0,0,0,0.6);
    text-align: right;
    line-height: 2rem;
}
.serv_main_item_con{
    display: inline-block;
    width: auto;
    max-width: calc(100% - 6rem);
    height: auto;
    background: #e8ecef;
    font-size: 1rem;
    color: rgba(0,0,0,0.8);
    padding:0.5rem 1rem;
    line-height: 150%;
    border-radius: 8px;
    margin-left: 1rem;
}


.serv_main_item2{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 1.5rem;
}
.serv_main_item2_ico{
    width: 2rem;
    height: 2rem;
    font-size: 0;
    margin-top: 0.2rem;
}
.serv_main_item2_ico img{
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.serv_main_item2_tiem{
    width: 3rem;
    height: auto;
    font-size: 0.875rem;
    color: rgba(0,0,0,0.6);
    text-align: right;
    line-height: 2rem;
}
.serv_main_item2_con{
    width: calc(100% - 5rem);
    height: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.serv_main_item2_con{
    display: inline-block;
    width: auto;
    max-width: calc(100% - 6rem);
    height: auto;
    background: var(--OneColor);
    font-size: 1rem;
    color: #FFFFFF;
    padding:0.5rem 1rem;
    line-height: 150%;
    border-radius: 8px;
    margin-right: 1rem;
    margin-left: 1rem;
}


.serv_bottom{
    width: calc(100% - 4rem);
    height: 5rem;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}
.serv_bottom_input{
    width: calc(100% - 2.5rem);
    height: 2.5rem;
    
}
.serv_bottom_input input{
    width: 100%;
    height: 100%;
    border: none;
}
.serv_bottom_btn{
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0;
    cursor: pointer;
}
.serv_bottom_btn svg{
    width: 100%;
    height: 100%;
    fill:rgba(0,0,0,0.3);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.serv_bottom_btn:hover svg{
    fill:var(--OneColor);
}
    
    
}