/* #main
--------------------------------------------------------------- */
body.lock {
    height: 100vh;
    overflow: hidden;
}
a.current{
    pointer-events: none !important;
    cursor: not-allowed;
    color: #00ffff;
}
.page_nobg{
    padding-top: 10rem;
}
.es_row:before,
.es_row:after{
    content: '';
    display: table;
}
.es_row:after{
    clear: both;
}
.es_wrap{
    width: 80%;
    margin: 0 auto;
}

.es_btn a{
    padding: .7rem 1.5rem;
    border-radius: 50px;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    transition: all 0.3s;
    overflow: hidden;
}
.es_btn a:hover{
    padding: .7rem 3.5rem .7rem 1.5rem;
}
.es_btn a:before,
.es_btn a:after{
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: #0050B4;
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
}
.es_btn a:after{
    background: #00B4E6;
    transform: scaleX(0);
    transition: transform 0.3s;
}
.es_btn a:hover:after{
    transform: scaleX(1);
}
.es_btn span{
    position: relative;
    z-index: 1;
    color: #fff;
}
.es_btn i{
    position: absolute;
    right: 1rem;
    top: 1.5rem;
    z-index: 1;
}
.es_btn i div{
    width: 15px;
    height: 1px;
    background: #fff;
    float: right;
    margin-right: 10px;
    transition: opacity 0.3s;
    opacity: 0;
}
.es_btn.ghost a{
    border: 1px solid #C8CAD3;
}
.es_btn.ghost.white span{
    color: #fff;
}
.es_btn.ghost.white a:hover span{
    color: #5A646E;
}
.es_btn.ghost a:before{
    background: none;
}
.es_btn.ghost a:after{
    background: #F4F5F8;
}
.es_btn.ghost i div,
.es_btn.ghost i:before, 
.es_btn.ghost i:after{
    background: #5A646E;
}
.es_btn.ghost span{
    color: #5A646E;
}
.es_btn i:before,
.es_btn i:after{
    content: '';
    width: 0;
    height: 1px;
    transform-origin: 100% 100%;
    transform: rotate(-45deg);
    background: #fff;
    position: absolute;
    top: -1px;
    right: -1px;
    transition: width 0.3s;
}
.es_btn i:after{
    top: 0;
    right: 0;
    transform: rotate(45deg);
}
.es_btn a:hover i div{
    opacity: 1;
}
.es_btn a:hover i:before,
.es_btn a:hover i:after{
    width: 10px;
}
.es_btn b{
    color: #00FFFF;
    display: inline-block;
}
.es_s_btn a, .es_s_btn button{
    color: #0050B4;
    transition: color 0.3s;
}
.es_s_btn a:before, .es_s_btn button:before{
    content: '\F105';
    font-family: 'ubi';
    text-align: center;
    color: #fff;
    background: #0050B4;
    border-radius: 100%;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    transition: background 0.3s;
}
.es_s_btn a:hover, .es_s_btn button:hover{
    color: #00B4E6;
}
.es_s_btn a:hover:before, .es_s_btn button:hover:before{
    background: #00B4E6;
}
.es_iconbtn{
    position: relative;
}
.es_iconbtn > a{
    display: block;
    padding: 1rem .7rem 1rem 1.5rem;
    border: 1px solid #C8CAD3;
    text-transform: uppercase;
    border-radius: 100px;
    transition: transform 0.3s;
    font-size: .9rem;
    cursor: pointer;
}
.es_iconbtn > a:hover{
    transform: scale(1.05);
}
.es_iconbtn i{
    display: inline-block;
    font-size: 1.5rem;
    vertical-align: middle;
    float: right;
    line-height: 1rem;
}
.btnarr{
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: 100%;
    background: #0050B4;
    transition: background 0.3s;
    position: relative;
    text-align: center;
}
.btnarr:before{
    content: '\f105';
    font-family: "ubi";
    font: 1.5rem;
    color: #fff;
    margin-right: -2px;
}
main.estemp{
    overflow: hidden;
}
.es_col{
    display: table;
    width: 100%;
}
.es_col > div{
    display: table-cell;
    vertical-align: middle;
}
.col-1 > div{
    width: 100%;
}
.col-2 > div{
    width: 50%;
}
.page_normal h1{
    font-size: 5vw;
    margin: 0 0 0 -5px;
    color: #0050B4;
}
.page_normal .date{
    color: #0050B4;
    margin: 0 0 2rem;
}
.page_404{
    padding: 30vh 0;
    height: 80vh;
}
.page_404 h1{
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* #header
--------------------------------------------------------------- */
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 880;
}

.headwrap{
    padding: 20px 30px 10px;
    transition: all 0.3s;
}
header.stick .headwrap{
    background: #fff;
    box-shadow: 0 0 15px rgba(0,80,180,.3);
    padding: 10px 30px 10px;
}
.ulogo_1,
.ulogo_text{
    fill: #0050B4;
}
.ulogo_2{
    fill: #5AC85A;
}

#eslogo{
    float: left;
    /* transform: translateY(-30px);
    opacity: 0; */
    transition: all 0.3s;
}

#esnav{
    float: right;
}
#esnav a{
    text-transform: uppercase;
    cursor: pointer;
}
#menu_first > li > a{
    color: #0050B4;
    padding: 0 .7rem;
    line-height: 2.8rem;
    position: relative;
    z-index: 1;
}
header.stick #menu_first > li > a{
    line-height: 2.2rem;
}
#menu_first li{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s;
}
/* .headIn #menu_first li,
.headIn #eslogo{
    transform: translateY(0);
    opacity: 1;
}
.headIn #menu_first li:nth-child(1){transition-delay: .1s;}
.headIn #menu_first li:nth-child(2){transition-delay: .2s;}
.headIn #menu_first li:nth-child(3){transition-delay: .3s;}
.headIn #menu_first li:nth-child(4){transition-delay: .4s;}
.headIn #menu_first li:nth-child(5){transition-delay: .5s;} */
#menu_first > li > .sub-menu > li{
    display: block;
    text-align: center;
}

#menu_first > li > .sub-menu{
    position: absolute;
    top: 1.8rem;
    pointer-events: none;
    opacity: 0;
    transition: all .3s cubic-bezier(0, 0, 0.2, 1);
    padding: 2rem 0 0;
    transform: translate3d(0,-20px,0);
    width: 14rem;
    left: 50%;
    margin-left: -7rem;
    border-radius: 5px;
    overflow: hidden;
}
#menu_first > li > .sub-menu:before{
    content: '';
    position: absolute;
    top: 1.3rem;
    left: 50%;
    margin: 0 0 0 -.2rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 .4rem .8rem .4rem;
    border-color: transparent transparent #012758 transparent;
}
#menu_first li:hover .sub-menu{
    pointer-events: initial;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
#menu_first .sub-menu > li > a{
    display: block;
    text-transform: uppercase;
    padding: 1rem;
    color: #fff;
    background: #012758;
}
#menu_first .sub-menu > li:last-child a{
    border-radius: 0 0 5px 5px;
}
#menu_first .sub-menu > li:first-child a{
    border-radius: 5px 5px 0 0;
}
#menu_first br{
    display: none;
}
#eslogo svg{    
    width: 9rem;
    height: 2.8rem;
    transition: all 0.3s;
}
.logotext{fill:#000000;}
.logocolor1{fill:#034ea1;}
.logocolor2{fill:#00AFDC;}
.logocolor3{fill:#192e7b;}

header.hasbg .logotext, header.open .logotext{fill:#FFFFFF;}
header.hasbg .logocolor1, header.open .logocolor1{fill:#142882;}
header.hasbg .logocolor2, header.open .logocolor2{fill:#FFDC00;}
header.hasbg .logocolor3, header.open .logocolor3{fill:#00AFDC;}

header.color .logotext{fill:#000000;}
header.color .logocolor1{fill:#034ea1;}
header.color .logocolor2{fill:#00AFDC;}
header.color .logocolor3{fill:#192e7b;}

header.color .ulogo_2{
    fill: #5AC85A;
}

header.stick #eslogo svg{
    width: 8rem;
    height: 2.2rem;
}
.pll-parent-menu-item > a{
    font-size: 0px;
}
.pll-parent-menu-item > a:after{
    content: '\e803';
    font-family: "ubi";
    font-size: 1.5rem;
    display: inline-block;
    transform: translateY(3px);
}
#menu_first li.lang-item{
    margin-left: -1rem;
    vertical-align: top;
}
#menu_first li.pll-parent-menu-item li{
    display: inline-block;
}
#menu_first .sub-menu > li.lang-item > a{
    color: #667D9A;
}
#menu_first .sub-menu > li.current-lang a,
#menu_first .sub-menu > li.lang-item > a:hover{
    color: #fff;
}
#menu_first > li.pll-parent-menu-item > ul{
    right: 0;
    left: inherit;
    width: 12vw;
    text-align: right;
}
#menu_first > li.pll-parent-menu-item > ul:before{
    left: inherit;
    right: 1rem;
}
header.hasbg #menu_first > li > a{
    color: #fff;
}
header.color #menu_first > li > a{
    color: #0050B4;
}
header a:hover{
    color: #00FFFF !important;
}
.es_burger{
    display: inline-block;
    float: right;
}
.es_burger > div{
    width: 3rem;
    height: 3rem;
    position: relative;
}
.esmenu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    width: 100%;
    height: auto; 
    transform: translateX(10px);
  }
.esmenu svg{
    width: 100%;
    height: auto;
}
.esnavline {
    fill: none;
    stroke: #0050B4;
    stroke-width: 6;
    transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
header.hasbg .esnavline{
    stroke: #fff;
}
header.stick .esnavline{
    stroke: #0050B4;
}
.esnavline1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.esnavline2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}
.esnavline3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.opened .esnavline1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.opened .esnavline2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}
.opened .esnavline3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.es_burger{
    display: none;
}
/* #solution
--------------------------------------------------------------- */

.solu_sec_1{
    text-align: center;
    color: #fff;
    padding: 12rem 0 8rem;
    background: rgb(0,80,180);
    background: linear-gradient(0deg, rgba(0,80,180,1) 0%, rgba(0,200,255,1) 100%);
}
.solu_sec_1 h1{
    font-size: 3.5vw;
}
.solution_program{
    margin: 0 -3rem;
}
.solu_pro{
    display: inline-block;
    width: 33.33333%;
    padding: 3rem;
    vertical-align: top;
}

.solu_pro img{
    max-width: 300px;
    margin: 0 auto;
}
.solu_pro:nth-child(2){
    margin: 5rem 0 0;
}
.solu_pro:first-child:nth-last-child(4),
.solu_pro:first-child:nth-last-child(4) ~ div{
    /* width: 50%; */
    margin: 0;
}
.solu_pro p{
    text-align: left;
    opacity: 0.7;
    margin: 1rem 0;
}
.solu_sec_2{
    position: relative;
    height: 200vh;
}
.solu2_bg{
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}
.solu2_bg img{
    position: absolute;
    width: 20vw;
    z-index: 1;
}
.solu2_bg img:nth-child(1){
    top: 30%;
    width: 30%;}
.solu2_bg img:nth-child(2){
    width: 30%;
    right: 10%;
    top: 70%;}
.solu2_bg img:nth-child(3){
    top: 0;
    right:0;
    width: 50%;}
.solu2_bg img:nth-child(4){
    top: 40%;
    left: 10%;
    width: 50%;
    z-index: 0;}
.solufix{
    position: -webkit-sticky;
    position: sticky;
    padding: 50vh 20vw 6vw;
    text-align: center;
    top: 0;
    z-index: 2;
}
.solufix span{
    font-size: 2rem;
    margin-bottom: 4rem;
    color: #5AC85A;
    opacity: 0;
    transform-origin: 100% 50%;
    transform: skewY(-20deg);
}
.solufix h2{
    opacity: 0;
}
.solufix h2,
.soluse3_title h2{
    font-size: 3.5vw;
    color: #0050B4;
}
#solu_image{
    position: relative;
    width: 55%;
    margin: 0 15% 0 auto;
}
#solu_image img:nth-child(2){
    position: absolute;
    width: 30%;
    left: 10%;
    top: -25%;
    -webkit-animation: updownInfi_M 2s infinite;
            animation: updownInfi_M 2s infinite;
}
#solu_image img:nth-child(3){
    position: absolute;
    width: 75%;
    right: -13%;
    top: -14%;
    -webkit-animation: updownInfi_M 2s infinite;
            animation: updownInfi_M 2s infinite;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}
.soluse3_image{
    text-align: center;
}
.solu_sec_3{
    position: relative;
    padding: 13rem 0 16rem;
    background: rgb(255,255,255);
    background: linear-gradient(132deg, rgba(255,255,255,1) 10%, rgba(96,255,255,1) 38%, rgba(0,119,255,1) 100%);
}
.solu_sec_3 .es_wrap{
    position: relative;
    z-index: 3;
}
.solu_sec_3 p{
    margin: 1rem 0;
    color: #0050B4;
}
.col-2 > div.soluse3_title{
    width: 40%;
}
.solu_item_wrap{
    padding: 3rem;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,31,100,.1);
    border-radius: 10px;
    margin: 0 0 3rem;
}
.solui_title img{
    width: 13vw;
}
.solui_title{
    width: 45;
    padding-right: 5rem;
}
.solui_title h3{
    color: #0050B4;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.solui_list{
    width: 55%;
}
.solui_list > div{
    background: #F4F5F8;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}
.solis_ok{
    display: inline-block;
    margin-right: 1rem;
    border-radius: 100%;
    width: 1.6rem;
    height: 1.6rem;
    text-align: center;
    background: #5AC85A;
    color: #fff;
}
.soli_des{
    width: 92%;
}
.solu_sec_items{
    margin-top: -10rem;
    position: relative;
    z-index: 1;
}
.solu_item_wrap.getInCus .solui_title,
.solu_item_wrap.getInCus .solui_list > div{
    opacity: 0;
    transform: translate3d(0,2rem,0);
    transition: all 1s;
}
.solu_item_wrap.act_ani .solui_title,
.solu_item_wrap.act_ani .solui_list > div{
    opacity: 1;
    transform: translate3d(0,0,0);
}
.solu_item_wrap.act_ani .solui_list > div:nth-child(1){transition-delay: .2s;}
.solu_item_wrap.act_ani .solui_list > div:nth-child(2){transition-delay: .4s;}
.solu_item_wrap.act_ani .solui_list > div:nth-child(3){transition-delay: .6s;}
.solu_item_wrap.act_ani .solui_list > div:nth-child(4){transition-delay: .8s;}
.solu_item_wrap.act_ani .solui_list > div:nth-child(5){transition-delay: 1s;}
.solu_item_wrap.act_ani .solui_list > div:nth-child(6){transition-delay: 1.2s;}
.solu_item_wrap.act_ani .solui_list > div:nth-child(7){transition-delay: 1.4s;}


/* #solutionsub
--------------------------------------------------------------- */
.page_solutionsub{
    padding: 10rem 0 0;
}
.sosubd_wrap{
    display: flex;
}
.sosubd_wrap > div{
    width: 50%;
}
.sosu_text{
    padding: 0 5rem 0 0;
}
.sosu_text h1{
    font-size: 3.5vw;
    color: #0050B4;
    margin: 3rem 0 1rem;
}
.sosu_des{
    color: #0050B4;
    font-size: 1.4rem;
    margin:  0 0 1rem;
}
.sosu_points{
    margin: 2rem 0 0;
}
.sosu_points h2{
    color: #5AC85A;
    margin: 0 0 1rem;
}
.sosu_points p{
    margin: 0 0 2rem;
}
.sosu_img{
    position: relative;
}
.sosu_img figure{
    position: sticky;
    top: 5rem;
    width: 80%;
    margin: 0 0 0 auto;
}
/* #footcta
--------------------------------------------------------------- */
#ta_foot{
    padding: 8rem 0 10rem;
    background: #fff;
    position: relative;
    z-index: 3;
}
.fcta_text{
    font-size: 4.5vw;
    text-transform: uppercase;
    font-weight: bold;
}
.fcta_link a{
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 2;
    color: #ccc;
}
.fcta_link .es_wrap{
    position: relative;
}
.fcta_link span{
    transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
    transform: translate3d(0, 4vw, 0);
}
.fcta_link a.hover span{
    color: #0050B4;
    transform: translate3d(0, 0, 0);
}
.fcta_link a:after{
    content: '';
    width: 100%;
    height: 1px;
    background: #C8CAD3;
    position: absolute;
    bottom: 0;
    left: 0;
}
.fcta_arrow{
    position: absolute;
    right: 0;
    top: 5vw;
}
.fcta_arrow i{
    width: 0;
    height: 2px;
    background: #0050B4;
    position: relative;
    margin-right: 2rem;
    transition: all 0.3s;
}
.fcta_arrow:before,
.fcta_arrow:after{
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #0050B4;
    transform: rotate(45deg);
    right: 0;
    top: -.7rem;
    transition: all 0.3s;
}
.fcta_arrow:after{
    top: .7rem;
    transform: rotate(-45deg);
}
.fcta_link a.hover i{
    width: 5rem;
}
.fcta_link a.hover .fcta_arrow:before,
.fcta_link a.hover .fcta_arrow:after{
    width: 2rem;
}

/* #contact
--------------------------------------------------------------- */

.contact_wrap{
    background: #F4F5F8;
    padding: 10rem 0 30rem;
    position: relative;
    overflow: hidden;
}
.contact_wrap > img{
    position: absolute;
    z-index: 0;
    width: 80%;
    right: 0;
    top: 5rem;
    height: auto;
}
.contact_wrap > div{position: relative;}
.contact_title{
    width: 35%;
    margin-bottom: 3rem;
}
.contact_title h1{
    font-size: 4vw;
    margin-bottom: 1rem;
    color: #0050B4;
}
.contact_info{
    color: #fff;
    border-radius: 10px;
    padding: 2.5rem 8vw 2.5rem 2.5rem;
    width: 45%;
    background: rgb(0,80,180);
    background: linear-gradient(0deg, rgba(0,80,180,1) 0%, rgba(0,200,255,1) 100%);
}
.contact_info p{
    opacity: 0.7;
}
.contact_info i{
    display: inline-block;
}
.contact_info h2{
    margin:0 0 .5rem;
}
.con_func{
    margin: 1rem 0;
}
.contact_profile{
    border-bottom: 1px solid #71bcea;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
.contact_profile:last-child{
    padding: 0;
    margin: 0;
    border: 0;
}
.contact_form{
    background: #fff;    
    padding: 2rem;
    border-radius: 10px;
    right: 0;
    width: 60%;
    position: absolute;
    top: 7vw;
    box-shadow: 0 0 2rem rgba(15, 21, 99, 0.1);
    overflow: hidden;
}
.contact_form:before,
.contact_form:after{
    content: '';
    position: absolute;
    z-index:5;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 100% 100%;
    transform: scaleY(0);
    transition: all 0.5s cubic-bezier(0.87, 0, 0.13, 1);
    background: #0050B4;
}
.contact_form:after{
    background: #fff;
    transition-delay: .5s;
}
.contact_form.success:before,
.contact_form.success:after{
    transform: scaleY(1);
}
.es_form .col-1 > div,
.es_form .col-2 > div,
.submit_wrap{
    padding: 1rem;
}
.es_form label{
    display: block;
    line-height: 2;
}
.es_form div{
    position: relative;
}
.es_form b{
    position: absolute;
    bottom: -.5rem;
    font-weight: normal;
    font-size: .9rem;
    color: #FF8232;
    -webkit-animation: fadeIn 0.5s;
            animation: fadeIn 0.5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}
.es_select{
    position: relative;
    cursor: pointer;
}
.es_select i.esrequired{
    top: -0.3rem;
    left: .5rem;
}
.es_select b{
    bottom: -1.5rem;
}
.es_select input{
    pointer-events: none;
}
div.es_select_option{
    position: absolute;
    width: 100%;
    height: 4rem;
    top: 0;
    padding-bottom: .5rem;
}
div.es_options{
    top: 3rem;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 1;
    border-radius: 0 0 5px 5px;
    border: 1px solid #C8CAD3;
    border-top: 0;
    transform-origin: 0 0;
    transform: scaleY(0);
    transition: all 0.5s cubic-bezier(0.87, 0, 0.13, 1);
    padding-bottom: 1rem;
}
.es_select.open div.es_options{
    transform: scaleY(1);
    border-color:#5AC85A;
}
.es_select.open input,
.es_select:hover input{
    border-color:#5AC85A;
}
.es_options > div{
    padding: .3rem 1.5rem;
    opacity: 0;
}
.es_select.open .es_options > div{
    -webkit-animation: fadeIn 0.2s;
            animation: fadeIn 0.2s;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}
.es_options > div:hover{
    background: #F4F5F8;
}
.es_select:before{
    content: '\f107';
    font-family: 'ubi';
    font-size: 1.5rem;
    position: absolute;
    right: 1rem;
    bottom: .6rem;
    transition: all 0.3s;
}
.es_select.open:before{
    transform: rotate(180deg);
}
.esrequired{
    font-style: normal;
    font-size: 2rem;
    color: #FF8232;
    position: absolute;
    top: 2.7rem;
    left: 1.5rem;
}
.valiInfos{
    display: none;
}
.es_form_submit{
    text-align: right;
}
.es_form_submit{
    cursor: not-allowed;
}
.es_form_submit .es_btn{
    pointer-events: none;
    opacity: 0.2;
}
.es_form_submit.enable{
    cursor: pointer;
}
.es_form_submit.enable .es_btn{
    pointer-events: initial;
    opacity: 1;
    transform-origin: 100% 50%;
    -webkit-animation: bounceIn .5s;
            animation: bounceIn .5s;
}
.success_info{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    pointer-events: none;
    z-index: 6;
}
.success_info > div{
    opacity: 0;
    transform: translate3d(0,3rem,0);
    transition: all 0.5s;
    transition-delay: 1s;
}
.success_info.success > div{
    opacity: 1;
    transform: translate3d(0,0,0);
}
.success_info.success{
    pointer-events: initial;
}
.succes_cta > div{
    display: inline-block;
    margin: 1rem;
}
.success_info h2{
    font-size: 2rem;
    color: #0050B4;
}
.gam_client_type{
    padding: 10rem 0 7rem;
    background: rgb(0,80,180);
    background: linear-gradient(0deg, rgba(0,80,180,1) 0%, rgba(0,200,255,1) 100%);
}

/* #clients
--------------------------------------------------------------- */
.page_client{
    margin-bottom: -1px;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
}
.page_client_inner {
    padding: 10rem 0 20rem;
    background: #0050B4;
}
.page_client .es_wrap{
    position: relative;
    z-index: 1;
}
.page_client_investor {
    margin-top: -10rem;
}
.page_client_investor > .es_wrap {
    z-index: 1;
}
.page_client_inner:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vw;
    background: rgb(0,200,255);
    background: linear-gradient(167deg, rgba(0,200,255,1) 0%, rgba(0,137,208,0) 58%);
}
.client_side{
    width: 30%;
    text-align: left;
    color: #fff;
    padding-right: 5rem;
}
.client_side h1{
    font-size: 4vw;
    margin: 0 0 2rem;
    color: #fff;
    text-align: center;
}
.client_side p{
    margin: 0 0 1rem;
}
.client_side p:last-child{
    margin: 0 0 2rem;
}
.client_nav a{
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}
.client_nav svg{
    width: 1.5rem;
    margin-right: .3rem;
    color: #fff;
}
.client_nav h3 {
    padding-top: 3rem;
    font-size: 1.875rem;
}
.client_nav li{
    margin: 1.5rem 0;
}
/* .client_nav li:nth-child(1) svg{
    width: 36px;
} */
/* .client_nav li:nth-child(3) svg{
    width: 35px;
    padding-right: 7px;
} */
.client_nav li.active a{
    background: #fff;
    color: #0050B4;
}
.client_nav li.active a svg{
    fill: #0050B4;
}
.client_nav li.active a svg path{
    fill: #0050B4;
}
.pc_cloud{
    position: absolute;
}
.page_client > .pc_cloud:nth-child(1){
    top: 8rem;
    left: 33vw;
    width: 3vw;
    height: auto;
    z-index: 1;
}
.page_client > .pc_cloud:nth-child(2){
    top: 37rem;
    left: -2vw;
    width: 6vw;
    height: auto;
    z-index: 1;
}
.page_client > .pc_cloud:nth-child(4){
    bottom: -14rem;
    right: 18vw;
    width: 23vw;
    z-index: 1;
}
.page_client_investor > .pc_cloud:nth-child(2){
    bottom: 30rem;
    right: -2vw;
    width: 24vw;
}
.page_client_investor > .pc_cloud:nth-child(3){
    bottom: -5rem;
    right: 10vw;
    width: 30vw;
}
.client_logos li{
    display: inline-block;
    width: 25%;
    padding: .7rem;
    transition: all 0.5s;
}
.client_logos li.hide{
    opacity: 0;
    transform: scale(0);
}
.client_logos a{
    padding: 1.3rem;
    background: #fff;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 1s;
}
.client_logos li.ani a{
    opacity: 1;
}

.client_logos img{
    transition: all 0.3s;
}
.client_logos a:hover img{
    transform: scale(1.1);
}
.page_client .es_col > div{
    vertical-align: top;
}

/* #footer
--------------------------------------------------------------- */
#cta_foot{
    padding: 8rem 0 10rem;
}
footer{
    position: relative;
    z-index: 3;
    overflow: hidden;
}
.copyright{
    text-align: right;
}
.foot_bar{
    padding: 2rem 0;
    background: #fff;
}
.footlogo{
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    display: inline-block;
    vertical-align: middle;
}
.footbar_menu{
    display: inline-block;
}
.footbar_menu li{
    display: inline-block;
}
.footbar_menu a{
    position: relative;
    margin-right: 1rem;
    transition: opacity 0.3s;
}
.footbar_menu a:hover{
    opacity: 0.5;
}
.footbar_menu a:after{
    content: '';
    width: 100%;
    height: 1px;
    background: #5A646E;
    position: absolute;
    bottom: -2px;
    left: 0;
}
.foot_content{
    background: #5b656f;
    padding: 7rem 0 6rem;
}
.foot_content .es_wrap,
.foot_bar{
    position: relative;
    z-index: 1;
}
#footbg{
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,255,255);
    background: linear-gradient(170deg, rgba(0,255,255,1) 0%, rgba(0,137,205,1) 8%, rgba(0,112,194,1) 10%, rgba(0,80,180,1) 14%, rgba(90,100,110,1) 40%, rgba(90,100,110,1) 100%);
}
.foot_nav a{
    color: #fff;
    text-transform: uppercase;
}
#footm_first{
    display: table;
    width: 100%;
}
#footm_first a.title{
    pointer-events: none;
    cursor: default;
}
#footm_first > li{
    display: table-cell;
    width: 25%;
    padding: 0 1rem 0 0;
}
#footm_first > li > a{
    margin-bottom: 1rem;
    position: relative;
}
#footm_first > li > a:after{
    content: '';
    width: 10px;
    height: 1px;
    background: #fff;
    display: block;
    margin-top: 1rem;
}
#footm_first .sub-menu a{
    margin: 0 0 1rem;
    transition: color 0.3s;
}
#footm_first .sub-menu .sub-menu{
    margin-left: 1rem;
}
#footm_first .sub-menu .sub-menu a{
    color: #B4B4B4;
}
#footm_first .sub-menu a:hover{
    color: #00FFFF;
}
.foot_content .es_wrap{
    display: table;
    table-layout: fixed;
}
/* .foot_content .es_wrap > div{
    display: table-cell;
    vertical-align: top;
} */
.foot_nav {
    display: table-cell;
    vertical-align: top;
    width: 88%;
}
.foot_social{
    text-align: right;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 1%;
    vertical-align: top;
}
.foot_social svg {
    width: 14px;
    padding-top: 10px;
}
.foot_social a{
    color: #fff;
    width: 3rem;
    height: 3rem;
    text-align: center;
    border-radius: 3rem;
    line-height: 3rem;
    border: 1px solid #C8CAD3;
    transition: all 0.3s;
    margin: 0 0 1rem 1rem;
    display: inline-block;
}
.foot_social a:hover{
    color: #00FFFF;
    border-color: #00FFFF;
}
/* #homepage
--------------------------------------------------------------- */
#ph_hero{
    position: relative;
    height: 100vh;
    background: rgb(204,224,244);
    background: linear-gradient(0deg, rgba(204,224,244,1) 0%, rgba(0,180,230,1) 46%, rgba(0,80,180,1) 100%);
}
.phhero_cloud{
    position: absolute;
    width: 100%;
    height: auto;
    bottom: -14vw;
    left: 0;
    z-index: 0;
}
#ph_hero > div.es_wrap{
    position: relative;
    height: 100%;
    z-index: 5;
}
.ph_hero_content{
    width: 47%;
    color: #fff;
    position: absolute;
    top: 30%;
    left: 0;
}
.ph_hero_content h1{
    color: #fff;
    font-size: 4vw;
    margin-bottom: 1vw;
    opacity: 0;
}
.ph_hero_content p{
    font-size: 1.2rem;
    opacity: 0;
}
.bigu_image{
    position: absolute;
    width: 60%;
    top: 18%;
    right: 7vw;
    z-index: 1;
}
#bigu_1{
    width: 72%;
    margin-left: 10%;
    height: auto;
}
#bigu_2{
    width: 42.7%;
    right: 0;
    bottom: 16%;
}
#bigu_3{
    width: 10%;
    top: 18%;
    right: 46%;
    -webkit-animation: updownInfi_S 2s infinite;
            animation: updownInfi_S 2s infinite;
}
#bigu_4{
    width: 12%;
    top: 30%;
    right: 14%;
    -webkit-animation: updownInfi_S 3s infinite;
            animation: updownInfi_S 3s infinite;
}
#bigu_5{
    width: 86%;
    right: 12.5%;
    top: 17%;
}
#img_island img:nth-child(n+2),
#img_perf img:nth-child(n+2),
#img_bigu img:nth-child(n+2){
    position: absolute;
}

#img_perf{
    padding-left: 5vw;
}
#perf_1{
    top: 0;
    left: 0;
    width: 73%;
    padding-top: 40%;
}
#perf_2{
    top: 0;
    left: 8%;
    width: 66%;
}
#perf_3{
    top: 2%;
    left: 24%;
    width: 57%;
    -webkit-animation: updownInfi_S 2s infinite;
            animation: updownInfi_S 2s infinite;
}
#perf_4{
    bottom: -2%;
    left: 1%;
    width: 88%;
}
.scrolldown{
    margin-top: 3vw;
    cursor: pointer;
    opacity: 0;
    position: relative;
    z-index: 3;
}
.scrolldown > div{
    width: 4vw;
    height: 4vw;
    position: relative;
}
.scrolldown > div:before{
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: #fff;
    display: block;
    transition: transform 0.3s;
}
.scrolldown:hover > div:before{
    transform: scale(1.2);
}
.scrolldown b{
    position: absolute;
    width: 2px;
    height: 4vw;
    overflow: hidden;
}
.scrolldown b:before{
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0050B4;
    -webkit-animation: lineMoveVer 2s infinite;
            animation: lineMoveVer 2s infinite;
}
.scrolldown b:after{
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0050B4;
    -webkit-animation: lineMoveVer 2s infinite;
            animation: lineMoveVer 2s infinite;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}
.scrolldown i{
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -1px;
    height: 100%;
    width: 100%;
}
.scrolldown i:before{
    font-family: "ubi";
    content: '\f107';
    position: absolute;
    bottom: -1vw;
    font-size: 2.2vw;
    color: #0050B4;
    font-style: normal;
    line-height: 1vw;
    left: -.6vw;
}
.bigu_planet{
    position: absolute;
    right: 0;opacity: 0;
    width: 13%;
    height: auto;
    -webkit-animation: updownInfi_S 5s infinite;
            animation: updownInfi_S 5s infinite;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}
.bigu_rocket{
    position: absolute;
    right: 0;
    top:30%;
    opacity: 0;
    width: 8%;
}
.bigu_rocket > div{
    transform: rotate(-40deg);
}
.bigu_rocket img{
    width: 100%;
    height: auto;
}
.bigu_rocket i{
    -webkit-animation: rocketCloud 2s linear infinite;
            animation: rocketCloud 2s linear infinite;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    opacity: 0;
    position: absolute;
    bottom: -28%;
    width: 2vw;
    height: 2vw;
    left: 50%;
    margin-left: -1vw;
    border-radius: 100%;
    background: rgb(132,202,255);
    background: linear-gradient(0deg, rgba(132,202,255,1) 0%, rgba(255,255,255,1) 100%);
}
.bigu_rocket i:last-child{
    -webkit-animation-delay:1s;
            animation-delay:1s;
}
.bigu_clouds{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.bigu_clouds img{
    opacity: 0;
}
.bigu_clouds div{
    position: absolute;
    width: 33%;
    height: auto;
}
.bigu_clouds div:nth-child(1){
    bottom: 0;
    left: 7%;
}
.bigu_clouds div:nth-child(2){
    bottom: -22%;
    left: 35%;
}
.bigu_clouds div:nth-child(3){
    bottom: -20%;
    right: 0;
}
#ph_sec2{
    position: relative;
    z-index: 1;
    padding: 20vw 0 25vw;
}
#ph_sec2 h2{
    color: #0050B4;
    font-size: 4vw;
    margin-bottom: 1vw;
}
#ph_sec2 p{
    font-size: 1.2rem;
    color: #0050B4;
    margin-bottom: 4vw;
}
.phsec2_content{
    width: 45%;
}
.phsec2_image{
    position: absolute;
    width: 60%;
    top: 11vw;
    right: 0;
}
#img_perf img{
    position: relative;
    z-index: 1;
    transform: translateX(7vw);
}
.perf_clouds,
.perf_cloud_back{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.perf_cloud_back{
    z-index: 0;
}
.perf_clouds > div,
.perf_cloud_back > div{
    position: absolute;
    width: 20vw;
}
.perf_cloud_back div:nth-child(1){
    width: 60%;
    bottom: 0;
    left: -30%;
}
.perf_cloud_back div:nth-child(2){
    width: 60%;
    bottom: 10%;
    right: -35%;
}
.perf_clouds div:nth-child(1) img{
    transform: scaleX(-1);
}
.perf_clouds div:nth-child(1){
    width: 36%;
    bottom: 0;
    left: 1vw;
}
.perf_clouds div:nth-child(2){
    width: 34%;
    bottom: 0;
    right: 17%;
}
#ph_sec3{
    padding: 15vw 10vw 20vw;
    background: rgb(90,210,255);
    background: linear-gradient(0deg, rgba(90,210,255,1) 47%, rgba(165,230,255,1) 76%, rgba(197,239,255,1) 85%, rgba(232,249,255,1) 93%, rgba(255,255,255,0) 100%);
    position: relative;
    z-index: 5;
    overflow: hidden;
}
#img_island{
    position: relative;
    z-index: 1;
    margin: 0 -2vw 0 2vw;
}
#img_island_0{
    width: 100%;
    height: auto;
}
#img_island_1{
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-animation: updownInfi_S 5s infinite;
            animation: updownInfi_S 5s infinite;
}
#img_island_2{
    top: -1vw;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-animation: updownInfi_S 5s infinite;
            animation: updownInfi_S 5s infinite;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}
.island_cloud{
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.island_cloud div{
    position: absolute;
}
.island_cloud div:nth-child(1){
    bottom: 20vw;
    left: 6vw;
    width: 24vw;
}
/* .island_cloud div:nth-child(2){
    top: 20vw;
    width: 25vw;
    right: 0;
} */
/* .island_cloud div:nth-child(3){
    width: 16vw;
    left: 29vw;
    bottom: 26vw;

} */
.island_cloud div:nth-child(2){
    width: 18vw;
    left: 33vw;
    bottom: 29vw;
} 
.phsec3_content{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
}
.phsec3_content > div{
    position: absolute;
}
.phsec3_content a{
    width: 30vw;
    display: block;
    padding: .3rem 1.5rem 1.5rem;
}
.phsec3_content a:before{
    content: '';
    position: absolute;
    border-radius: 10px;
    background: #fff;
    width: 100%;
    height: 4.7rem;
    transition: all 0.3s;
    z-index: 0;
    left: 0;
    top: 0;
    box-shadow: 0 0 15px rgba(0,80,180,.15);
}
.phsec3_content i{
    font-style: normal;
    position: relative;
    opacity: 0;
    
}
.phsec3_content > div:nth-child(1){
    width: 45%;
}
.phsec3_content h2 {
    font-size: 4vw;
    margin-bottom: 1vw;
    color: #0050B4;
}
.phsec3_content p {
    color: #0050B4;
}
.phsec3_content h3{
    font-size: 1.2rem;
    padding-right: 1.5rem;
    height: 4rem;
    letter-spacing: 1px;
    vertical-align: middle;
    display: table-cell;
    color: #0050B4;
    position: relative;
    transition: color 0.3s;
    font-weight: normal;
}
.phsec3_content a:hover:before{
    height: 100%;
}
.phsec3_content a:hover i{
    -webkit-animation: fadeIn 0.3s;
            animation: fadeIn 0.3s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
}
.phsec3_content a:hover .btnarr{
    background: #00B4E6;
}
.phsec3_content a:hover h2{
    color: #00B4E6;
}
.phsec3_content .btnarr{
    position: absolute;
    right: 1rem;
    top: 1.6rem;
}
.phsec3c_1{
    left: 10vw;
    top: 10vw;
}
.phsec3c_2{
    right: 10vw;
    top: 10vw;
}
.phsec3c_3{
    left: 10vw;
    bottom: 13vw;
}
.phsec3c_4{
    right: 10vw;
    bottom: 13vw;
}
.sec3_mbimg{
    display: none;
}

/* #posts_carousel
--------------------------------------------------------------- */

.posts_caro_sec{
    background: #fff;
    overflow: hidden;
}
.pocaro_wrap{
    padding: 10rem 0 0 10vw;
    position: relative;
    overflow: hidden;
}
.pocaro_wrap > div{
    display: inline-block;
    vertical-align: top;
}
.posts_carousel{
    opacity: 0;
    transform: translateX(10rem);
    transition: all 1s;
    transition-delay: .3s;
    position: relative;
    width: 80%;
    float: right;
}
.posts_carousel.act_ani{
    opacity: 1;
    transform: translateX(5rem);
}
.posts_carousel:after{
    content: '';
    width: 30%;
    height: 100%;
    top: 0;
    right: 4rem;
    position: absolute;
    pointer-events: none;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
}
.posts_caro_title{
    width: 19%;
}
.posts_caro_title h2{
    font-size: 3.5vw;
	/* white-space: nowrap; */
    color: #0050B4;
}
.espost{
    padding: 1rem;
}
.espost a{
    color: #0050B4;
    transition: color 0.3s;
}
.espost_cont span{
    color: #C8CAD3;
}
.espost_cont h3,
.side_post h3{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: .5rem 0;
    text-transform: initial;
}
.espost_thumb figure{
    width: 100%;
    padding-bottom: 66%;
    position: relative;
    overflow: hidden;
    background: #F4F5F8;
    border-radius: 5px;
    margin-bottom: .5rem;
}
.espost.noimg figure:before,
.side_post.noimg figure:before{
    content: 'No Image';
    position: absolute;
    opacity: 0.3;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}
.espost_thumb img{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transition: transform 0.3s;
    transform:translate(-50%, -50%) scale(1.2);
}
.pocaro_nav{
    margin: 1rem 0 6.2rem;
}
.gamcli_arrow > div,
.pocaro_nav > div,
.abtm_arrows > div{
    display: inline-block;
    margin-right: 1rem;
    border: 1px solid #C8CAD3;
    width: 3rem;
    height: 3rem;
    text-align: center;
    line-height: 2.8rem;
    border-radius: 100%;
    cursor: pointer;
    transition: opacity 0.3s;
}
.pocaro_nav > div:hover{
    opacity: 0.5;
}
.espost:hover img,
.side_post:hover img{
    transform:translate(-50%, -50%) scale(1.4);
}
.espost a:hover{
    color: #00B4E6;
}


/* #breadcrumb
--------------------------------------------------------------- */
.es_beadcrumb{
    border-radius: 100px;
    background: #F4F5F8;
    display: inline-block;
    padding: .6rem 1rem .3rem;
}
.es_beadcrumb li{
    display: inline-block;
    vertical-align: top;
}
.es_beadcrumb i{
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1rem;
    vertical-align: top;
}
.es_beadcrumb a{
    display: block;
    position: relative;
    padding: 0 .6rem;
    color: #aaacb5;
    display: -webkit-box;
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: color 0.3s;
}
.es_beadcrumb a.cur,
.es_beadcrumb a:hover{
    color: #0050B4;
}
.es_beadcrumb a:after{
    content: '\f105';
    font-family: 'ubi';
    margin-left: 1rem;
    color: #aaacb5;
}
.es_beadcrumb li:last-child a:after{
    display: none;
}

/* #about
--------------------------------------------------------------- */
.abt_sec_1{
    color: #fff;
    position: relative;
    padding: 18vw 0;
    overflow: hidden;
    background: rgb(0,80,180);
    background: linear-gradient(0deg, rgba(0,80,180,1) 0%, rgba(0,200,255,1) 100%);
}
.abt_sec_1 h1,
.page_about h2{
    font-size: 3.5vw;
}
.page_about h2{
    color: #0050B4;
}
.abt_tstyle{
    position: relative;
}
.abt_tstyle svg{
    margin: 2rem 0;
    width: 3rem;
    display: block;
}
.abt_tstyle svg line{
    stroke: #fff;
    stroke-width: 3px;
}
.abts1_title{
    width: 40%;
}
.abts1_title h2{
    color: #fff;
    font-size: 1.6vw;
    margin-bottom: 1.5rem;
}
.abt_sec_1 .perf_cloud_back div:nth-child(1){
    display: none;
}
.abt_highlight{
    margin-top: -1rem;
    position: relative;
    z-index: 2;
}
.abt_highlight h2{
    font-size: 1.6rem;
    color: #0050B4;
}
.abt_highlight > div{
    background: #fff;
    border-radius: 10px;
    padding: 3rem 4rem;
    box-shadow: 0 0 20px rgba(0,31,101,.1);
}
.abt_sec_1 .phsec2_image{
    top: 9vw;
}
.abt_sec_2{
    padding: 8vw 0;
}
.abt_sec_2 .es_col > div{
    vertical-align: top;
}
.abt2_title{
    padding-right: 5rem;
    width: 35%;
}
.abt2_title svg line{
    stroke: #0050B4;
}
.abt2_title p{
    color: #0050B4;
    font-size: 1.6vw;
}
.abt2_des h2,
.abt2_des h3,
.abt2_des h4,
.abt2_des h5{
    font-size: 1.6rem;
    color: #0050B4;
    margin-bottom: 1rem;
}
.abt2_des p{
    margin-bottom: 5rem;
}
.abt_investor{
    padding: 6rem 0;
    margin-bottom: 10rem;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,31,100,.1);
    border-radius: 10px;
    z-index: 10;
}
.abt_investor h2{
    margin-bottom: 3rem;
    font-size: 3.5vw;
    color: #0050B4;
}
.abt_investor ul{
    margin: 0 -1rem;
}
.abt_investor li{
    display: inline-block;
    vertical-align: top;
    width: 25%;
    padding: 1rem;
    text-align: center;
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: all 0.3s;
}
.abt_investor li:nth-child(1){transition-delay: 0.2s;}
.abt_investor li:nth-child(2){transition-delay: 0.4s;}
.abt_investor li:nth-child(3){transition-delay: 0.6s;}
.abt_investor li:nth-child(4){transition-delay: 0.8s;}
.abt_investor li:nth-child(5){transition-delay: 1s;}
.abt_investor li:nth-child(6){transition-delay: 1.2s;}
.abt_investor li:nth-child(7){transition-delay: 1.4s;}
.abt_investor li:nth-child(8){transition-delay: 1.6s;}
.abt_investor ul.act_ani li{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.abt_investor figure{
    border-radius: 5px;
    width: 13vw;
    height: 9.2vw;
    border: 1px solid #C8CAD3;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    padding: .5rem;
    background: #fff;
}
.abt_investor li div{
    margin-top: -3.5vw;
    background: #F4F5F8;
    padding: 4vw 1rem 1rem;
    border-radius: 5px;
}
.abtmi_title .es_wrap{
    position: relative;
    padding-top: 3rem;
}
.abtm_arrows{
    position: absolute;
    right: 0;
    top: 0;
}
.abtm_arrows > div{
    margin: 0 0 0 1rem;
}
.abtm_arrows > div:hover{
    opacity: 0.5;
}
.abtmi_title h2{
    color: #0050B4;
    margin-bottom: 2rem;
}
.mile_progress{
    background: #C8CAD3;
    width: 6px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.timeline {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    left: 50%;
    height: calc(100% - 3rem);
}
.mile_progress i{
    width: 6px;
    height: 10rem;
    position: sticky;
    top: 0;
    left: 0;
    background: #0050B4;
    display: block;
    z-index: 2;
    transition: all 0.1s;
}
.abt_milestone{
    padding: 5rem 0;
    margin-bottom: 5rem;
    background-color: #F4F5F8;
}
.milestone.dragging{
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.abtm_mile_wrap{
    overflow: hidden;
    position: relative;
    height: 1200px;
    transition: all .1s;
    /* cursor: -webkit-grab; */
    /* cursor: grab; */
}
.milestone{
    display: flex;
    flex-direction: column;
    padding: 0 14vw 3rem;
}
.milestone_more {
    align-items: flex-end;
    background: linear-gradient(180deg,#f4f5f800 0%,#F4F5F8 85%,#F4F5F8 100%);
    bottom: 0;
    display: flex;
    height: 34rem;
    justify-content: center;
    left: 0;
    padding-bottom: 5rem;
    position: absolute;
    width: 100%;
    font-size: 1.125rem;
}
.morebtn {
    background-color: #0050B4;
    border-radius: 5rem;
    color: #fff;
    cursor: pointer;
    padding: 0.8rem 1.6rem;
    position: absolute;
    transition: background-color .2s;
}
.morebtn:hover {
    background-color: #00B4E6;
}
/* .abtm_mile_wrap:before{
    content: '';
    position: absolute;
    top: 9rem;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #C8CAD3 33%, rgba(200,255,255,0) 0%);
    background-position: bottom;
    background-size: 13px 1px;
    background-repeat: repeat-x;
} */
.milestone li{
    padding: 0 1rem;
    position: relative;
    flex-shrink: 0;
    width: 25vw;
    opacity: 0;
    transform: translate3d(5rem, 0, 0);
    transition: all 1s;
    margin-bottom: 1.5rem;
}
.milestone .year-group:nth-child(even) .mile_year{
    top: 0;
    right: -7.5rem; 
}
.milestone .year-group:nth-child(even) .mile_year:before{
    left: -2rem;
    top: 1rem;
}
.milestone .year-group:nth-child(even) .mile_year:after{
    right: 5.5rem;
    top: 1.35rem;
}
.milestone .year-group:nth-child(odd) {
    margin-left: 65%;
    margin-bottom: 2rem;
}
.milestone .year-group:nth-child(odd) .mile_year{
    top: 0;
    left: -7.5rem; 
}
.milestone .year-group:nth-child(odd) .mile_year:before{
    right: -2rem;
    top: 1rem;
}
.milestone .year-group:nth-child(odd) .mile_year:after{
    left: 5.5rem;
    top: 1.35rem;
}
.milestone li:nth-child(2){
    transition-delay: .3s;
}
.milestone li:nth-child(3){
    transition-delay: .6s;
}
.milestone li:nth-child(4){
    transition-delay: .9s;
}
.milestone.act_ani li{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.mile_year{
    position: absolute;
    /* top: 6rem; */
    /* left: 1rem; */
    font-size: 1.6rem;
    color: #0050B4;
}
.mile_year:before{
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #0050B4;
    position: absolute;
    /* left: 1.4rem;
    top: 2.7rem; */
}
.mile_year:after{    
    content: '';
    width: 3rem;
    height: 1px;
    background: #C8CAD3;
    position: absolute;
    /* left: 1.7rem;
    top: 3rem; */
}
.milestone a{
    padding: 2rem;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 15px rgba(90,100,110,.15);
    border: 1px solid #fff;
    transition: all 0.3s;
}
.milestone a::-moz-selection, .milestone div::-moz-selection{
    background: none;
}
.milestone a::selection,
.milestone div::selection{
    background: none;
}
.milestone a:hover{
    border: 1px solid #0050B4;
}
.abt_profile h2{
    margin-bottom: 3rem;
}
.ultable > li:first-child{
    border-top: 1px solid #C8CAD3;
}
.ultable > li{
    display: table;
    width: 100%;
    padding: 2rem 0;
    border-bottom: 1px solid #C8CAD3;
}
.ultable > li > div{
    display: table-cell;
}
.ultable > li > div:first-child{
    width: 20%;
}

/* #post_cate
--------------------------------------------------------------- */
.cate_head{
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 13rem 0 6rem 0;
}
.cate_head .es_wrap{
    position: relative;
    z-index: 1;
}
.cate_head:before{
    content: '';
    position: absolute;
    width: 70%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(0,200,255);
    background: linear-gradient(90deg, rgba(0,200,255,1) 7%, rgba(0,200,255,0) 100%);
}
.cate_title h1{
    font-size: 4vw;
    color: #fff;
    margin-bottom: -1rem;
}
div.cate_nav{
    width: 65%;
    vertical-align: bottom;
}
.cate_nav ul{
    background: #fff;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    display: table;
    width: 100%;
}
.cate_nav li{
    display: table-cell;
    width: 33.33333%;
    text-align: center;
    border-right: 1px solid #C8CAD3;
    position: relative;
    text-transform: uppercase;
}
.cate_nav li.current:after{
    content: '\f107';
    font-family: 'ubi';
    font-size: 1.4rem;
    position: absolute;
    left: 50%;
    margin-left: -.7rem;
    bottom: -1.5rem;
    color: #0050B4;
}
.cate_nav a{
    color: #C8CAD3;
    transition: color 0.3s;
}
.cate_nav a:hover{
    color: #0050B4;
}
.cate_nav li.current a{
    color: #0050B4;
    pointer-events: none;
}
.cate_nav li:last-child{
    border: 0;
}

.post_loop_wrap{
    margin: 0 -1rem;
}
.post_loop_wrap > div{
    width: 33.3333%;
    display: inline-block;
    vertical-align: top;
}
.cate_loop_sec .es_beadcrumb{    
    margin: 3rem 0 2rem;
}
.cate_loop_sec .espost_cont{
    min-height: 10rem;
}
.wp-pagenavi{
    margin: 1rem 0 0;
    text-align: center;
    padding: 1.5rem 3rem;
    border-radius: 5px;
    background: #F4F5F8;
}
.wp-pagenavi > a,
.wp-pagenavi > span{
    display: inline-block;
    vertical-align: top;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 50px;
    margin: 0 .5rem;
    transition: all 0.3s;
}
.wp-pagenavi > span.current,
.wp-pagenavi > a:hover{
    background: #fff;
    color: #0050B4;
}
.wp-pagenavi > a.previouspostslink{
    float: left;
    background: none;
}
.wp-pagenavi > a.nextpostslink{
    float: right;
    background: none;
}
.wp-pagenavi > a.nextpostslink:hover,
.wp-pagenavi > a.previouspostslink:hover{
    color: #0050B4;
}

/* #gaming
--------------------------------------------------------------- */
.gam_mobile{
    display: none;
}
.page_gaming{
    transition: background-color .5s;
}
.page_gaming.act_ani{
    background-color: #5AD2FF;
}
#gaming_image{
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
#gaming_image img{
    position: absolute;
}
.gaming_icons{    
    position: sticky;
    width: 38%;
    margin-left: 26%;
    top: 24%;
    height: 32%;
    z-index: 2;
    transform: scale(1.2);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    transition: all .5s cubic-bezier(0, 0, 0.2, 1);
    will-change: transform;
}
.gam_top{
    z-index: 3;
}
.gaming_icons img{
    width: 40%;
    opacity: 0;
    transform: scale(0) translateY(10rem);
    transition: all .5s;
}
#ph_hero.anistart img{
    transform: scale(1) translateY(0);
    opacity: 1;
}
.gaming_icons img:nth-child(1){
    transition-delay: .3s;
    right: 0;
}
.gaming_icons img:nth-child(2){    
    transition-delay: .4s;
    top: 13%;
}
.gaming_icons img:nth-child(3){
    transition-delay: .5s;
    width: 30%;
    bottom: 0;
    right: 10%;
}
.gaming_icons img:nth-child(4){
    transition-delay: .6s;
    width: 30%;
    left: 20%;
    bottom: 10%;
}
.gam_console{
    position: absolute;
    width: 70%;
    top: 24%;
    right: 20%;
}
.gam_light{
    mix-blend-mode: screen;
    animation: flashing 2s infinite;
}
.gam_satellite{
    position: absolute;
    width: 20%;
    right: 11%;
    top: 18%;
}
.gam_bulb{    
    left: 4%;
    top: 36%;
    width: 6%;
}
.gam_control{
    width: 10%;
    right: 10%;
    top: 35%;
}
.gam_bulb{    
    left: 7%;
    top: 24%;
    width: 7%;
}
.gam_cloud_1{
    position: absolute;
    width: 40%;
    left: -20%;
    top: 69%;
}
.gam_cloud_2{
    position: absolute;
    width: 28%;
    right: 20%;
    top: 63%;
    z-index: 3;
}
.okpoint{
    display: table;
    width: 100%;
    padding: 1rem;
    background: #F4F5F8;
    margin: 2rem 0;
    max-width: 29rem;
    text-align: left;
    border-radius: 5px;
}
.gin_2_content{
    max-width: 750px;
    margin: 0 auto;
}
.gin_2_content p{
    max-width: 500px;
    margin: 0 auto;
}
.gin_2_content .okpoint{
    margin: 2rem auto;
}
.okpoint > div{
    display: table-cell;
    vertical-align: middle;
}
.pagam_ani_1{
    position: relative;
}
.gam_intro_1{
    position: relative;
    width: 100%;
    padding: 10rem 0 10rem 10%;
    color: #0050B4;
}
.gin_1_content{width: 50%;}
.gam_intro_1 h2,
.gam_intro_2 h2,
.gam_intro_4 h2{
    font-size: 4vw;
    margin-bottom: 2rem;
}
.gam_gdk{    
    width: 35%;
    height: 70%;
    position: absolute;
    top: 17%;
    right: 10%;
    z-index: 1;
}
#gaming_image_2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.pagam_ani_2{
    position: relative;
    margin-bottom: 8rem;
}
.gam_intro_2, .gam_intro_4{
    padding: 20rem 0 13rem;
    text-align: center;
    color: #0050B4;
    position: relative;
    z-index: 1;
}
.gam_intro_4{
    padding: 13rem 0;
}
.gaming_icons_2{
    position: sticky;
    top: 30vh;
    margin: 0 auto 33%;
    width: 10%;
    opacity: 0;
    z-index: 1;
    transform: translate3d(0,-5rem, 0);
    transition: all .5s;
}
.gaming_icons_2.show{
    transform: translate3d(0,0, 0);
    opacity: 1;
}
.gamgdk_tube_wrap{
    position: relative;
    width: 100vw;
    height: 30vh;
    margin-top: -5%;
}
.gamgdk_ball,
.gdkfakeball{
    opacity: 0;
    position: absolute;
    right: -4vw;
    top: -270%;
    transform-style: preserve-3d;
    transition: all .5s cubic-bezier(0, 0, 0.2, 1);
    will-change: transform;
}
.gamgdk_ball img{
    width: 8vw;
    margin-top: -4vw;
}
.gamgdk_ball.show{
    opacity: 0 !important;
}
.gamgdk_tube{
    position: absolute;
    right: 26%;
    width: 24%;
    height: 100%;
}
.gamgdlin{
    position: absolute;
    right: 0;
    width: 300px;
    height: 8px;
    background: rgb(0,255,255,1);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(0,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
.gamgdlin.line1{
    transform: rotate(90deg);
    transform-origin: 100% 100%;
    top: 100%;
}
.gamgdlin.line2{
    bottom: 0;
    width: 100%;
}
.gaming_icons_2_cover{
    position: sticky;
    top: 21vh;
    margin: 0 auto;
    width: 20%;
    mix-blend-mode: hard-light;
    z-index: 3;
    opacity: 0;
    transition: opacity .5s;
}
.gaming_icons_2_cover.act_ani{
    opacity: 1;
}
.gaming_icons_2.act_ani{
    animation: fadeInDownBig 1s;
    animation-fill-mode: both;
}
.gin_3_des{
    width: 54%;
}
.gam_intro_3{
    padding: 30vw 0;
}
.gin_3_content{
    margin: 0 auto;
    width: 80%;
    color: #0050B4;
}
.gin_3_content h2{
    font-size: 4vw;
}
.gin_3_content .es_col > div{
    width: 40%;
}
.gin_3_des{
    width: 60%;
    float: right;
}
.gam_server_1{
    position: absolute;
    right: 12%;
    width: 13%;
    top: 11%;
    opacity: 0;
    animation-delay: .5s;
}
.gam_server_2{
    position: absolute;
    width: 10%;
    left: 12%;
    top: 5%;
    opacity: 0;
}

.grow_squa{
    position: absolute;
}
.gam_server_1.act_ani,
.gam_server_2.act_ani,
.grow_squa.act_ani{
    animation: fadeInUp 1s;
    animation-fill-mode: both;
}
.grow_squa:nth-child(1){
    left: 26%;
    width: 4%;
    opacity: 0;
    animation-delay: .5s;
}
.grow_squa:nth-child(2){
    width: 5%;
    right: 23%;
    top: 5%;
}
.grow_squa:nth-child(3){
    width: 10%;
    left: 20%;
    z-index: 1;
    top: 17%;
}
.grow_squa:nth-child(4){
    width: 5%;
    left: 7%;
    top: 20%;
    opacity: 0;
    animation-delay: .5s;
}
.grow_line_ani i,
.grow_line_tun i{
    width: 2px;
    height: 4rem;
    overflow: hidden;  
    position: absolute; 
}
.grow_line_ani i:before,
.grow_line_tun i:before{
    content: '';
    height: 100%;
    width: 100%;
    background: #00ffff; 
    position: absolute;
    transform: translate3d(0,100%,0);
    animation: growLineAni 1s infinite;
}
@keyframes growLineAni{
    from{
        transform: translate3d(0,100%,0);
    }to{
        transform: translate3d(0,-100%,0);
    }
}
.grow_line_ani i:nth-child(even):before,
.grow_line_tun i:nth-child(even):before{
    animation-delay: .5s;
}
.grow_line_ani i:nth-child(1){
    right: 17%;
    top: 5%;
}.grow_line_ani i:nth-child(2){    
    right: 9%;
    top: 13%;}
.grow_line_ani i:nth-child(3){
    left: 8%;}
.grow_line_ani i:nth-child(4){    right: 14%;
    top: 24%;}
.grow_line_ani i:nth-child(5){
    left: 12%;
    top: 1%;}
.grow_line_ani i:nth-child(6){    left: 28%;
    top: 28%;
}
.gamin_tunnel{
    width: 15%;
    position: absolute;
    left: 42.5%;
    top: 40%;
}
.gamin_tunnel img{
    position: relative;
    z-index: 2;
}
.gamin_tunnel img:last-child{
    position: absolute;
    top: -9%;
    z-index: 0;
}
.grow_line_tun{
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
}
.grow_line_tun i:nth-child(1){
    left: 28%;
    top: 21%;
}
.grow_line_tun i:nth-child(2){    
    right: 35%;
    bottom: 20%;
}
.grow_line_tun i:nth-child(3){
    left: 50%;
    bottom: 40%;
}
.grow_line_tun i:nth-child(4){
    right: 20%;
    top: 40%;
}
.gam_enduser{
    position: absolute;
    bottom: 0;
    width: 90%;
    left: 5%;
}
.gam_enduser img{
    opacity: 0;
    transition: opacity 1s;
}
.gam_enduser img.gamend_2{transition-delay: 0.5s;}
.gamend_3 img{transition-delay: 1s;}
.gam_enduser.show img{
    opacity: 1;
}
.gamend_2, .gamend_3{
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}
.gamend_3{
    z-index: 3;
    animation: flashing 1s infinite;
}
.gam_cloud{
    position: absolute;
    right: 5%;
    width: 40%;
    height: 50%;
    bottom: -20%;
}
.gam_client_type{
    color: #fff;
    text-align: center;
}
.gamcli_title h3{
    font-size: 2rem;
    margin: 1rem 0;
}
.gamcli_cli{
    padding: 2rem;
}
.gamcli_cli > div{
    padding: 2rem;
    border: 1px solid #00FFFF;
    border-radius: 10px;
}
.gamcli_arrow > div{
    border-color: #00FFFF;
    color: #00FFFF;
    margin: 0 .5rem;
}
.gamcli_arrow > div:hover{
    opacity: 0.5;
}
.gamcli_img{
    width:35%;
    padding-right: 1rem;
}
.gamcli_cont{
    text-align: left;
}
.gamcli_cont h4{
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.gam_clie_cta{
    background: #F4F5F8;
    padding: 10rem 0;
    text-align: center;
}
.gam_clie_cta h2{
    color: #0050B4;
    font-size: 2rem;
    margin-bottom: 1rem;
}
.gam_features{
    padding: 10rem 0 6rem;
}
.gam_features h2{
    font-size: 4vw;
    margin-bottom: 2rem;
    color: #0050B4;
}
.gam_feat h3{
    color: #0050B4;
    font-size: 1.6rem;
    width: 30%;
    display: inline-block;
    vertical-align: top;
}
.gam_feat{
    border-top: 1px solid #E1E2E8;
    padding: 5rem 0;
}
.gam_feat > div{
    width: 65%;
    display: inline-block;
    vertical-align: top;
}
.gam_feat .okpoint{
    color: #0050B4;
    max-width: 100%;
    margin: 0 0 2rem;
    opacity: 0;
}
.gam_feat.act_ani .okpoint{
    animation: fadeInUp .5s;
    animation-fill-mode: both;
}
.gam_feat.act_ani .okpoint:nth-child(1){animation-delay: .3s;}
.gam_feat.act_ani .okpoint:nth-child(2){animation-delay: .6s;}
.gam_feat.act_ani .okpoint:nth-child(3){animation-delay: .9s;}
.gam_feat.act_ani .okpoint:nth-child(4){animation-delay: 1.2s;}
.gam_feat.act_ani .okpoint:nth-child(5){animation-delay: 1.5s;}
.gam_gdk_img img{
    width: 80%;
    margin: 0 auto;
}
.gam_gdk_repeat{
    margin-top: -10rem;
}
.gam_gdk_wrap{    
    padding: 2rem 2rem 4rem;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,31,100,.1);
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.gdk_points .okpoint{
    max-width: 100%;
    margin: 0;
}

.gdk_points{
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding: 1rem;
    opacity: 0;
}
.gam_gdk_wrap.act_ani .gdk_points{
    animation: fadeInUp 0.5s;
    animation-fill-mode: both;
}
.gam_gdk_wrap.act_ani .okpoint:nth-child(1){animation-delay: .3s;}
.gam_gdk_wrap.act_ani .okpoint:nth-child(2){animation-delay: .6s;}
.gam_gdk_wrap.act_ani .okpoint:nth-child(3){animation-delay: .9s;}
.gam_gdk_wrap.act_ani .okpoint:nth-child(4){animation-delay: 1.2s;}
.gamgdk_cta{    
    text-align: center;
    margin-top: -1.5rem;
    position: relative;
    z-index: 1;
}
/* #AI
--------------------------------------------------------------- */
.page_ai {
    overflow: hidden;
}
/* AI Hero */
#page_ai_hero{
    position: relative;
    height: 100vh;
    background: rgb(204,224,244);
    background: linear-gradient(0deg, rgba(0,80,180,1) 0%, rgba(0,200,255,1) 70%);
    padding-top: 25vh;
}
#page_ai_hero > div.es_wrap {
    position: relative;
    z-index: 5;
}
.aihero_cloud{
    position: absolute;
    width: 100%;
    height: auto;
    bottom: -14vw;
    left: 0;
    z-index: 0;
}
.page_ai {
    transition: background-color .5s;
}
#ai_image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
#ai_image img{
    position: absolute;
}
.ai_main, 
.ai_note, 
.ai_letter{
    width: 79%;
    top: 15%;
    right: 26%;
}
.ai_note {
    -webkit-animation: updownInfi_S 2s infinite;
            animation: updownInfi_S 2s infinite;
}
.ai_letter {
    -webkit-animation: updownInfi_S 3s infinite;
            animation: updownInfi_S 3s infinite;
}
.ai_light {
    width: 85%;
    top: 25%;
    right: 20%;
}
.ai_cloud_1{
    position: absolute;
    width: 30%;
    left: -18%;
    top: 64%;
}
.ai_cloud_2{
    position: absolute;
    width: 30%;
    right: 5%;
    top: 45%;
    z-index: 3;
}
.ai_hero_content {
    /* padding-top: 5rem; */
    width: 46%;
}
.ai_hero_content h1 {
    color: #fff;
    font-size: 4vw;
    margin-bottom: 1vw;
    opacity: 0;
}
.ai_hero_content p{
    color: #fff;
    font-size: 1rem;
    opacity: 0;
    white-space: pre-line;
}
.aihero_cloudr {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: -13.8vw;
    left: 0;
    z-index: 0;
}
/* AI Solutions */
#page_ai_solutions {
    position: relative;
    z-index: 1;
    padding: 2.3rem 0;
}
.ai_solutions_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 3.5rem;
}
.ai_solutions_top h2 {
    color: #0050B4;
    font-size: 4vw;
    margin-bottom: 1vw;
}
.ai_solutions_top p{
    color: #0050B4;
    font-size: 1rem;
}
.solutions_tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    width: 55%;
    display: table;
}
.tab-button {
    color: #C8CAD3;
    border-right: 1px solid #C8CAD3;
    display: flex;
    justify-content: center;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    transition: color .3s;
    width: 25%;
    display: table-cell;
    text-align: center;
    position: relative;
    text-transform: uppercase;
}
.tab-button:hover{
    color: #0050B4;
}
.tab-button:last-child{
    border: 0;
}
.tab-button.active {
    color: #0050B4;
}
.tab-button:after{
    content: '\f107';
    font-family: 'ubi';
    font-size: 1rem;
    position: absolute;
    left: 50%;
    margin-left: -.5rem;
    bottom: -1.2rem;
    color: #0050B4;
    opacity: 0;
    transform: translateY(-.5rem);
    transition: all .3s;
}
.tab-button.active:after{
    opacity: 1;
    transform: translateY(0);
}
.solution_item {
    display: none;
    flex-direction: column;
    gap: 2.5rem;
}
.solution_item.active {
    display: flex;
}
.solution_item_top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.solution_item_inner {
    width: 44%;
}
.solution_item_inner > h3 {
    font-size: 1.5rem;
    color: #0050B4;
    padding-bottom: 1.1rem;
}
.solution_item_inner > figure {
    width: 100%;
    padding-bottom: 75%;
    position: relative;
    overflow: hidden;
    background: #F4F5F8;
    border-radius: .5rem;
}
.solution_item_inner > figure > img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform:translate(-50%, -50%) scale(1.2);
}
.feature_list {
    width: 50%;
}
.solution_item_inner_title {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .5rem;
}
.solution_item_inner_title > img {
    width: 2.75rem;
}
.solution_item_inner_title > div {
    color: #0050B4;
    font-size: .9rem;
}
.solution_item_inner_title > span {
    width: 1px;
    height: .8rem;
    background-color: #0050B4;
}
.solutions_content {
    position: relative;
    border-radius: .5rem;
    background-color: #fff;
    box-shadow: 0px 0px 7.5px 0px rgba(0, 31, 101, 0.10);
    padding: 4rem 4rem 5.5rem;
}
.feature_content {
    width: 100;
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.feature_content.act_ani .feature_item:nth-child(1){animation-delay: .3s;}
.feature_content.act_ani .feature_item:nth-child(2){animation-delay: .6s;}
.feature_content.act_ani .feature_item:nth-child(3){animation-delay: .9s;}
.feature_content.act_ani .feature_item:nth-child(4){animation-delay: 1.2s;}
.feature_item {
    background-color: #F4F5F8;
    border-radius: .5rem;
    padding: 1.5vw;
    font-size: .9rem;
    animation: fadeInUp .5s;
    animation-fill-mode: both;
}
.feature_item > .feature_item_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    height: 30px;
}
.feature_item > .feature_item_title:hover > span {
    border: 1px solid #0077FF;
}
.feature_item > .feature_item_title:hover > span:after {
    color: #0077FF;
}
.feature_item > .feature_item_title:hover > h4 {
    color: #0077FF;
}
.feature_item > .feature_item_content {
    width: calc(100% - 2rem);
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}
.feature_item > .feature_item_title > h4 {
    color: #0050B4;
    transition: all .3s;
}
.feature_item > .feature_item_title > span {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid #0050B4;
    position: relative;
    transition: all .3s;
}
.feature_item > .feature_item_title > span:after{
    content: '\f107';
    font-family: 'ubi';
    font-size: 1.2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #0050B4;
    transform: translate(-50%, -50%);
    transition: all .3s;
}
.feature_item.open > .feature_item_content {
    height: auto;
    margin-top: .3vw;
    position: relative;
}
.feature_item.open > .feature_item_content.over::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg, rgba(244, 245, 248, 0.00) 0%, #F4F5F8 100%);
    z-index: 10;
}
.feature_item.open > .feature_item_content > .feature_item_content_inner {
    /* height: 3.8rem; */
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none; /* Firefox */
    position: relative;
}
.feature_item.open > .feature_item_content > .feature_item_content_inner a {
    text-decoration: underline;
}
.feature_item.open > .feature_item_content > .feature_item_content_inner::-webkit-scrollbar{
    display: none;
}
.feature_item.open > .feature_item_title > span:after{
    transform: translate(-50%, -50%) rotate(180deg);
}
.page_ai_success_stories > h4{
    font-size: 1.2rem;
    color: #0050B4;
    padding-bottom: 1.5rem;
}
.story_wrap {
    display: flex;
    justify-content: space-between;
}
.story_item {
    display: flex;
    gap: 1vw;
    width: calc(50% - .5vw);
}
.story_item_image {
    width: 36%;
}
.story_item_image figure {
    width: 100%;
    padding-bottom: 68%;
    position: relative;
    overflow: hidden;
    background: #F4F5F8;
    border-radius: .5rem;
}
.story_item_image figure > img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform:translate(-50%, -50%) scale(1.2);
}
.story_item_content {
    width: calc(64% - 1rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.story_item_content span {
    font-size: .8rem;
    color: #C8CAD3;
    padding-bottom: 5px;
}
.story_item_content h3 {
    font-size: .9rem;
    color: #0050B4;
    display: -webkit-box;
    overflow:hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    margin-bottom: 5px;
}
.story_item_content > .es_s_btn > a:before {
    margin-right: .5rem;
}
.page_ai_success_stories > .es_btn {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center;
    display: flex;
    justify-content: center;
}
.page_ai_success_stories > .es_btn a {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
.page_ai_success_stories > .es_btn i {
    top: 1.5rem;
}
/* Success Stories */
#page_ai_model{
    padding: 9rem 0;
}
.page_ai_model_title > .es_wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 40%;
    padding-bottom: 3.5rem;
}
.page_ai_model_title > .es_wrap > h2 {
    color: #0050B4;
    font-size: 4vw;
    margin-bottom: 1vw;
}
.page_ai_model_title > .es_wrap > p {
    color: #0050B4;
    font-size: 1rem;
}
.ai_img{
    width:35%;
    padding-right: 2rem;
}
.ai_cont{
    text-align: left;
}
.ai_cont > h3{
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
    color: #0050B4;
}
.ai_cont > span {
    font-size: .8rem;
    margin-bottom: .25rem;
    color: #0050B4;
}
.ai_cont > div {
    display: -webkit-box;
    overflow:hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}
.ai_cont > p {
    font-size: .9rem;
}
.ai_arrow {
    display: flex;
    justify-content: center;
}
.ai_arrow > div {
    display: inline-block;
    margin-right: 1rem;
    border: 1px solid #C8CAD3;
    width: 3rem;
    height: 3rem;
    text-align: center;
    line-height: 2.8rem;
    border-radius: 100%;
    cursor: pointer;
    transition: opacity 0.3s;
    
    border-color: #0050B4;
    color: #0050B4;
    margin: 0 .5rem;
}
.ai_arrow > div:hover{
    opacity: 0.5;
}
.ai_cli{
    padding: 2rem;
}
.ai_cli > .es_col {
    height: 17.5rem;
}
.ai_cli > div {
    padding: 3rem;
    position: relative;
    border-radius: .5rem;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(0deg, rgba(0,80,180,1) 15%, rgba(0,200,255,1) 100%) border-box;
    border: 1px solid transparent;
}
.ai_cli_btn {
    display: flex !important;
    flex-direction: row-reverse;
    padding-top: .5rem;
    cursor: pointer;
}
.ai_cli_btn > .es_s_btn > button:before {
    margin-right: .5rem;
}
.ai_popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 80, 180, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: all .2s;
    pointer-events: none;
    opacity: 0;
}
.ai_popup.active {
    pointer-events: all;
    opacity: 1;

}
.ai_popup_inner {
    position: relative;
    width: 42vw;
    max-width: 80%;
    max-height: 80%;
    background-color: #fff;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 80, 180, 0.10);
}
.ai_popup_content {
    width: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;  /* IE 和 Edge */
    scrollbar-width: none;  /* Firefox */
}
.ai_popup_content::-webkit-scrollbar {
    display: none;
}
.ai_popup_subtitle {
    font-size: .8rem;
    color: #0050B4;
    margin-bottom: .1rem;
}
.ai_popup_title {
    font-size: 1.2rem;
    color: #0050B4;
    margin-bottom: 1rem;
}
.ai_popup_description {
    font-size: .9rem;
    line-height: 1.5;
}
.ai_popup_close {
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: -2.5rem;
    right: -.2rem;
    cursor: pointer;
    background-color: #0050B4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border-radius: 5rem;
    transition: all .3s ease;
    box-shadow: 0px 0px 10px 0px rgba(0, 80, 180, 0.10);
}
.ai_popup_close > svg{
    width: 12px;
    height: 11.452px;
    flex-shrink: 0;
    pointer-events: none;
}
.ai_popup_close:hover {
    transform: rotate(90deg);
}
/* Cloud Service Section */
#page_ai_cloud_service {
    position: relative;
    padding: 7.5rem 0;
    background: linear-gradient(0deg, rgba(0, 255, 255, 0.00) 20%, rgba(0, 255, 255, 40%) 50%, #0077FF 100%);
}
.page_ai_success_stories > .es_btn {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center;
    display: flex;
    justify-content: center;
}
#page_ai_cloud_service .pc_cloud:nth-child(1){
    top: 5rem;
    right: 3vw;
    width: 18vw;
    transform: rotate(160deg);
}
#page_ai_cloud_service .pc_cloud:nth-child(2){
    bottom: -14rem;
    right: 12vw;
    width: 24vw;
    transform: rotate(15deg);
}
#page_ai_cloud_service .es_wrap {
    position: relative;
    border-radius: .5rem;
    background-color: #fff;
    box-shadow: 0px 0px 7.5px 0px rgba(0, 31, 101, 0.10);
    padding: 4rem 3.3rem 5.5rem;
}
.cloud_service_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2rem;
}
.cloud_service_top > div {
    width: 48%;
}
.cloud_service_top h2 {
    color: #0050B4;
    font-size: 2.5vw;
    margin-bottom: 1vw;
}
.cloud_service_top p {
    font-size: 1rem;
}
.cloud_service_top ul {
    display: flex;
}
.service-tab-btn > a {
    width: 9rem;
    color: #C8CAD3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    transition: all .3s;
}
.service-tab-btn > a:hover{
    color: #0050B4;
}
li:first-child .service-tab-btn > a:before{
    content: '';
    width: 1px;
    height: 1.2rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #C8CAD3;
}
li.active .service-tab-btn > a {
    color: #0050B4;
}
.service-tab-btn > a:after{
    content: '\f107';
    font-family: 'ubi';
    font-size: 1rem;
    position: absolute;
    left: 50%;
    margin-left: -.5rem;
    bottom: -1.2rem;
    color: #0050B4;
    opacity: 0;
    transform: translateY(-.5rem);
    transition: all .3s;
}
li.active .service-tab-btn > a:after{
    opacity: 1;
    transform: translateY(0);
}
.cloud_logos li{
    width: calc(33.333% - 20px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transition: opacity .5s, transform .5s;
}
.cloud_logos li.des {
    cursor: pointer;
}
.cloud_logos li img{
    width: 7.5rem;
    border: 1px solid #C8CAD3;
    border-radius: 4rem;
    z-index: 1;
    transition: all .3s;
}
.cloud_logos li div{
    margin-top: -3.5rem;
    background: #F4F5F8;
    padding: 4.5rem 1.5rem 1.5rem;
    border-radius: .5rem;
    width: 100%;
    height: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all .3s;
}
.cloud_logos li.des:hover div {
    margin-top: -2.5rem;
    padding: 3.5rem 1.5rem 1.5rem;
    height: 9.7rem;
}
.cloud_logos li.des p {
    font-size: .8rem;
    opacity: 0;
    height: 0;
    padding-top: .25rem;
    overflow-y: auto;
    text-align: center;
    transition: all .3s;
}
.cloud_logos li.des:hover p {
    height: 6rem;
    opacity: 1;
}
.cloud_logos li.des:hover img {
    width: 4.75rem;
}
/* 當只有兩個項目時 */
.cloud_service_item:only-child,
.cloud_service_item:nth-last-child(2):first-child {
    justify-content: space-between;
}
.cloud_logos li.hide{
    opacity: 0;
    transform: scale(0);
}
.cloud_logos li > img,
.cloud_logos li > div{
    opacity: 0;
    transition: opacity 1s;
}
.cloud_logos .act_ani li.ani > img,
.cloud_logos .act_ani li.ani > div{
    opacity: 1;
}
.cloud_logos img{
    transition: all 0.3s;
}
.cloud_logos a:hover img{
    transform: scale(1.1);
}
.cloud_service_item {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.cloud_service_item li[data-logotype=puc]:nth-child(1){animation-delay: 0.2s;}
.cloud_service_item li[data-logotype=puc]:nth-child(2){animation-delay: 0.4s;}
.cloud_service_item li[data-logotype=puc]:nth-child(3){animation-delay: 0.6s;}
.cloud_service_item.act_ani li{
    animation-name: fadeInUp;
    animation-duration: .5s;
    animation-fill-mode: both;
}
.cloud_service_item.less-than-three li{
    width: calc(50% - 10px);
}
.cloud_service_cta > .es_btn {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center;
    display: flex;
    justify-content: center;
}
.cloud_service_cta > .es_btn a {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
.cloud_service_cta > .es_btn i {
    top: 1.5rem;
}
/* Partner Section */
#page_ai_partner {
    padding: 6rem 0;
}
#page_ai_partner .es_wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3.5rem;
}
.partner_top {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 40%;
}
.partner_top h2 {
    color: #0050B4;
    font-size: 4vw;
    margin-bottom: 1vw;
}
.partner_top p {
    color: #0050B4;
    font-size: 1rem;
}
.partner_list {
    width: 55%;
}
.partner_list .okpoint {
    margin: 1rem 0;
    max-width: 100%;
    padding: 1.5rem;
}
.partner_list.act_ani .okpoint{
    animation: fadeInUp .5s;
    animation-fill-mode: both;
}
.partner_list.act_ani .okpoint:nth-child(1){animation-delay: .3s;}
.partner_list.act_ani .okpoint:nth-child(2){animation-delay: .6s;}
.partner_list.act_ani .okpoint:nth-child(3){animation-delay: .9s;}
.partner_list.act_ani .okpoint:nth-child(4){animation-delay: 1.2s;}
.partner_list.act_ani .okpoint:nth-child(5){animation-delay: 1.5s;}
.partner_list p {
    color: #0050B4;
    /* font-size: 1.28rem; */
}
.partner_wrap {
    width: 100%;
    display: flex;
    align-items: center;
}
.partner_robot {
    position: relative;
    width: 45%;
    height: 100%;
}
#ai_robot＿image {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    margin-left: 2vw;
}
#ai_robot＿image .bigu_rocket {
    opacity: 1;
    right: 22%;
    top: 19%;
    width: 6%;
}
#ai_robot＿image .bigu_rocket {
    transform: rotate(308deg);
}
#ai_robot＿image .bigu_rocket i {
    width: 1.2vw;
    height: 1.2vw;
    bottom: -40%;
    left: 75%;
}
.ai_robot_2, 
.ai_robot_3,
.ai_robot_4,
.ai_robot_5,
.ai_robot_6{
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
}
.ai_robot_2,
.ai_robot_3,
.ai_robot_4 {
    -webkit-animation: updownInfi_S 5s infinite;
            animation: updownInfi_S 5s infinite;
}
.ai_robot_6 {
    mix-blend-mode: screen;
    animation: flashing 2s infinite;
}
/* chatbot */
#chatbot {
    position: fixed;
    bottom: 3vw;
    right: 2vw;
    z-index: 878;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.chatbot_icon {
    cursor: pointer;
    position: relative;
    pointer-events: all;
}
.chatbot_icon figure {
    width: 7vw;
    position: relative;
    z-index: 1;
}
.chatbot_icon figure img:nth-child(2) {
    display: none;
}
.chatbot_icon.open figure img:nth-child(1) {
    display: none;
}
.chatbot_icon.open figure img:nth-child(2) {
    display: block;
}
.chatbot_icon h3 {
    position: absolute;
    right: .3vw;
    bottom: -.2vw;
    color: #5A646E;
    background-color: #fff;
    border-radius: 20px;
    font-size: .85vw;
    padding: .5vw 1vw;
    z-index: 2;
    text-transform: none;
    /* chat-shadow */
    box-shadow: 0px 0px 15px 0px rgba(0, 180, 230, 0.35), 0px 0px 10px 0px rgba(0, 31, 101, 0.10);
}
.chatbot_icon .chatbot_icon_wrap {
    position: absolute;
    right: 1vw;
    bottom: 1vw;
    width: 20vw;
    color: #fff;
    background: linear-gradient(#0050B4, #0050B4) padding-box, linear-gradient(-90deg, rgba(0, 80, 180, 1) 15%, rgba(0, 200, 255, 1) 100%) border-box;
    border: 1px solid transparent;
    border-radius: 20vw;
    padding: 1vw 5vw 1vw 2vw;
    display: flex;
    align-items: center;
    gap: 1vw;
    transition: all .3s;
    /* chat-shadow */
    box-shadow: 0px 0px 15px 0px rgba(0, 180, 230, 0.35), 0px 0px 10px 0px rgba(0, 31, 101, 0.10);
}
.chatbot_icon.open .chatbot_icon_wrap {
    width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}
.chatbot_icon.wraphide .chatbot_icon_wrap {
    width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}
.chatbot_icon .chatbot_icon_wrap p{
    white-space: pre;
    font-size: .85vw;
    transition: all .3s;
}
.chatbot_icon .chatbot_icon_wrap svg {
    width: 12px;
    height: 11.452px;
    flex-shrink: 0;
    pointer-events: none;
    transition: all .3s;
}
.icon_ball {
    display: none;
    pointer-events: all;
}
.chatbot_icon:hover  .chatbot_icon_wrap{
    /* background: linear-gradient(#0050B4, #0077FF) padding-box, linear-gradient(90deg, rgba(0, 80, 180, 1) 15%, rgba(0, 200, 255, 1) 100%) border-box; */
    border: 1px solid #00B4E6;
}
.chatbot_icon:hover  .chatbot_icon_wrap p{
    opacity: .8;
}
.chatbot_icon:hover  .chatbot_icon_wrap svg{
    transform: rotate(90deg);
}
.chatbot_content {
    display: flex;
    flex-direction: column;
    width: 20vw;
    height: 25vw;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 15px 0px rgba(0, 180, 230, 0.35), 0px 0px 10px 0px rgba(0, 31, 101, 0.10);
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
    transform-origin: right bottom;
    transition: all .2s;
}

.chatbot_content.open {
    pointer-events: all;
    opacity: 1;
    transform: scale(1);
}
.chatbot_header {
    padding: 12px 15px;
    border-bottom: 1px solid #C8CAD3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chatbot_header h3 {
    font-size: 16px;
    color: #0050B4;
    text-transform: none;
}
.chatbot_close,
.chatbot_icon_close {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chatbot_close svg {
    width: 12px;
    height: 11.452px;
    flex-shrink: 0;
    pointer-events: none;
    transition: all .3s;
}
.chatbot_close svg line{
    stroke: #0050B4;
}
.chatbot_close:hover svg{
    transform: rotate(90deg);
}
.chatbot_body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    font-size: 14px;
}
.chatbot_body_wrap {
    overflow-y: auto;
    height: calc(25vw - 140px);
}
.chatbot_messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chatbot_messages_item {
    flex-grow: 1;
    display: flex;
    gap: 10px;
    position: relative;
}
.chatbot_messages_item > figure{
    position: relative;
    width: 2.2vw;
    height: 2.2vw;
    background-color: #00AFDC;
    border-radius: 1.1vw;
    overflow: hidden;
}
.chatbot_messages_item > figure > img{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform-origin: center bottom;
    transform: translate(-50%, -50%) scale(.8);
}
.chatbot_questions {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: 20px;
}

.preset-question {
    cursor: pointer;
    color: #fff;
    background-color: #0050B4;
    padding: 10px 20px;
    border-radius: 20px;
    transition: all .3s;
}
.preset-question:hover {
    background-color: #0077FF;
}
.chatbot_input {
    display: flex;
    position: relative;
}
#send-button {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 32px;
    height: 32px;
    display: flex;
    border-radius: 16px;
    background-color: #0050B4;
    align-items: center;
    justify-content: center;
}
#user-input {
    flex-grow: 1;
    border-radius: 100px;
    padding: 10px 40px 10px 16px;
    margin: 0;
}
#user-input:hover {
    color: #0050B4;
    border-color: #0050B4;
    box-shadow: 0 0 0 1px #0050B4;
}
#user-input:focus {
    color: #0050B4;
    border-color: #0050B4;
    box-shadow: 0 0 0 1px #0050B4;
}
.user-message, .bot-message {
    padding: 10px 15px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
    transform: scale(1);
    transition: all .2s;
}
.user-message {
    color: #fff;
    background-color: #0050B4;
    text-align: left;
    border-radius: 20px 0 20px 20px;
    margin-left: auto;
    transform-origin: right center;
}
.bot-message {
    background-color: #f0f0f0;
    max-width: calc(100% - 2.2vw - 10px);
    border-radius: 0 20px 20px 20px;
    transform-origin: left center;
}
.user-message.add,
.bot-message.add {
    /* opacity: 0; */
    transform: scale(0);
}
.bot-message a {
    display: inline;
    text-decoration: underline;
}
div.progresser.hide {
    opacity: 0;
}
div.progresser {
    position: absolute;
    top: calc(1.1vw - 4px);
    left: calc(2.2vw + 10px);
    width: 2rem;
    height: auto;
    pointer-events: none;
  }
  div.progresser__bar {
        width: 1rem;
        height: .7rem;
        border-radius: 1rem;
        overflow: hidden;
        background-color: #fff;
  }
  div.progresser__bar-item {
        width: 2rem;
        height: .7rem;
        margin: 0 0 0 -2rem;
        border-radius: 1rem;
        background-color: #0050B4;
        animation: progresser 1.5s infinite cubic-bezier(0.76, 0, 0.24, 1);
  }
  @keyframes progresser {
    0% {
      transform: translate(0, 0)
    } 50% {
        transform: translate(3rem, 0);
    } 100% {
        transform: translate(0, 0)
    }
  }
/* #post_single
--------------------------------------------------------------- */
.socialmedias{
    position: absolute;
    right: 20px;
    top: 20px;
    transform: scale(0);
    transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1) ;
}
.socialmedias.show{
    transform: scale(1);
}
.socialmedias a{
    position: absolute;
    background: #fff;
    border-radius: 100%;
    transition: all 0.3s;
}
.socialmedias a:hover{
    transform: scale(1.3);
}
.socialmedias a:nth-child(1){
    right: -35px;
    top: -50px;
}
.socialmedias a:nth-child(2){
    top: -17px;
    right: 20px;}
.socialmedias a:nth-child(3){
    top: 10px;
    right: -45px;}

.socialmedias i{
    color: #5AC85A;
    font-size: 3rem;
}
.socialmedias i:before{
    margin: 0;
}
.posin_wrap > div{
    vertical-align: top;
}
.posin_side{
    width: 25%;
}
.posinhead{
    margin-bottom: 2rem;
}
.side_post{
    padding: 2rem;
    border: 1px solid #C8CAD3;
    margin-top: -1px;
}
.side_post .es_btn a{
    font-size: .8rem;
}
.side_post .es_btn i{
    top: 1.2rem;
}
.side_post:first-child{
    border-radius: 10px 10px 0 0;
}
.side_share > div{
    margin: 2rem 0;
}
.posin_article{
    padding-right: 6rem;
}
.post_content h1{
    font-size: 2.2rem;
    color: #0050B4;
    text-transform: initial;
}
.post_content .date{
    color: #0050B4;
    margin: 1rem 0;
}
.post_content figure img{
    margin: 3rem 0;
    width: 100%;
    height: auto;
}
.edit_style{
    font-size: 1.1rem;
}
.edit_style p{
    margin-bottom: 1.2rem;
}
.edit_style h1 { display: none; }

.edit_style h2{font-size: 1.4rem;}
.edit_style h2,
.edit_style h3,
.edit_style h4,
.edit_style h5,
.edit_style h6{
    font-size: 1.1rem;
    margin: 2rem 0 1.2rem;
    color: #0050B4;
    text-transform: unset;
}
.edit_style em{
    display: inline;
}
.edit_style p.wp-caption-text{
    background: #cba7cd;
    display: inline-block;
    color: #fff;
    padding: 3px 10px;
    position: relative;
}
.edit_style p.wp-caption-text:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 20px;
    top: -10px;
    border-style: solid;
    border-width: 0 6px 10.4px 6px;
    border-color: transparent transparent #cba7cd transparent;
}
.edit_style ul, .edit_style ol{
    margin-left: 1rem;
    margin-bottom: 1rem;
    line-height: 1.8rem;
}
.edit_style ol{
    margin-left: 2rem;    
    list-style-type: none;
    counter-reset: es_count_ol;
}
.edit_style ul li:before{
    content: "•";
    font-size: 1.7rem;
    color: #0050B4;
    display: inline-block;
    margin-left: -1rem;
    position: absolute;
}
.edit_style ul li, .edit_style ol li{
    margin-bottom: 5px;
}
.edit_style ol li:before{
    content: counter(es_count_ol);
    counter-increment: es_count_ol;
    color: #0050B4;
    display: inline-block;
    margin-left: -2rem;
    position: absolute;
}
.edit_style hr{
    border: 0.5px solid #d4d4d4;
    margin: 30px 0 30px;
}
.edit_style blockquote{
    background: #fff;
    padding: 20px 20px 1px;
    margin-bottom: 20px;
    border-left: 5px solid #cfdb00;
}
.edit_style a{
    color: #0050B4;
    display: inline-block;
    word-break: break-word;
}
.edit_style a:hover{
    opacity: 0.5;
}
.edit_style table{
    margin: 50px 0 40px;
}
.edit_style td{
    border: 1px solid #ddddd9;
    padding: 10px 20px;
}
.edit_style tr:nth-child(odd){
    background: #fff;
}
.edit_style img{
    margin: 2rem 0;
    position: relative;
	max-width: 100%;
}
.edit_style img.alignleft{
    float: left;
    margin: 2rem 2rem 2rem 0;
}
.edit_style img.aligncenter{
    margin: 2rem auto;
}
.edit_style img.alignright{
    float: right;
    margin: 2rem 0 2rem 2rem;
}
.edit_style iframe {
	max-width: 100%;
}
.edit_style .wp-caption {
	max-width: 100%;
    width: 100% !important;
}
.edit_style p.wp-caption-text {
	width: 100%;
	text-align: center;
	background: none;
	color: #0050B4;
    transform: translateY(-20px);
	
}
.edit_style p.wp-caption-text:before {
	display: none;
}

/* #activity
--------------------------------------------------------------- */
.sec_act_banner{
    padding: 3rem 0 0;
    position: relative;
}
.ani_cover{
    position: absolute;
    z-index: 10;
    width: 100%;height: 105%;
    pointer-events: none;
    top: 0;
}
.ani_cover:after,
.ani_cover:before{
    content: '';
    position: absolute;
    top: 0;left: 0;width: 50%;height: 100%;
    background: #fff;
    transform-origin: 0;
    transform: scaleX(1);
    transition: .7s cubic-bezier(0.7, 0, 0.84, 0);
}
.ani_cover:before{
    left: initial;
    right: 0;
    transform-origin: 100%;
}
.ani_cover.act_ani:after,
.ani_cover.act_ani:before,
.act_ani .ani_cover:after,
.act_ani .ani_cover:before{
    transform: scaleX(0);
}
.act_banner{
    padding: 3rem;
}
.act_banner img{
    width: 100%;
    border-radius: 1rem;
}
.act_banner video{
    width: 100%;
    border-radius: 1rem;
    background-color: #efefef;
}
.actcont_wrap:nth-child(n+2){
    display: none;
}
.actcontent_tab{
    padding: 0 4rem;
}
.actcontent_tab h2{
    display: inline-block;
    width: 50%;
    vertical-align: top;
    padding: 1rem 0 3rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-size: 2rem;
}
.actcontent_tab h2 i{
    position: absolute;
    left: 50%;
    font-size: 1.4rem;
    transform: translateX(-50%);
}
.actcontent_tab h2:after,
.actcontent_tab b{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: #F0F0F0;
}
.actcontent_tab b{
    z-index: 10;
    opacity: 0;
    transform: scaleX(0);
    transition: all .5s;
}
.actcontent_tab h2.active b,
.actcontent_tab h2:hover b{
    opacity: 1;
    transform: scaleX(1);
}
.actcon_banner{
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    margin: 0 3rem;
}
.actcon_banner > div{
    width: 50%;
    height: 31vw;
}
.actcban_img{
    background-color: #F0F0F0;
    background-size: cover;
    background-position: center;
}
.actcban_text{
    position: relative;
}
.actcban_text > div{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
}
.actcont_wrap:last-child .actcban_text{
    order: 1;
}
.actcont_wrap:last-child .actcban_img{
    order: 2;
}
.actcban_text h3{
    font-size: 2rem;
    margin: 0 0 1rem;
    color: #fff;
}
.actcban_text p{
    font-size: 1.2rem;
    color: #fff;
}
.activity_btn{    
    margin: -2.5rem auto 2rem;
    text-align: center;
}
.activity_btn span{
    cursor: pointer;
    display: inline-block;
    color: #fff;
    border-radius: 100px;
    border: 1px solid #fff;
    position: relative;
    background: #FA535E;
    padding: 1rem 4rem;
    font-size: 1.5rem;
    transition: transform .3s;
}
.activity_btn span:hover{
    transform: scale(1.1);
}
.activity_btn span:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100px;
    width: 100%;
    height: 100%;
    animation: actPlay 1s infinite linear;
    border: 1px solid #fff;
}
.actcontent_tab.full h2{
    width: 100%;
}
.actcontent_tab.full h2:after, .actcontent_tab.full b{
    display: none;
}
@keyframes actPlay {
    from{
        opacity: 0;
        transform: scale(0);
    }to{
        opacity: 1;
        transform: scale(1);
    }
}
.activity_btn b{
    position: relative;
    color: #fff;
}
.actcicon_title h1,
.actcicon_title h2,
.actcicon_title h3,
.actcicon_title h4,
.actcicon_title h5{
    text-transform: initial;
}
.actcicon_title h3{
    color: #FA535E;
    border-bottom: 1px solid #FA535E;
    margin: 0 0 2rem;
    font-size: 2.5rem;
    display: inline-block;
    position: relative;
}
.actcicon_title{
    text-align: center;
    width: 50%;
    margin: 5rem auto;
}
.actcicon_title.lo > img{
    max-width: 300px;
    margin: 0 auto 2rem;
}
.actcicon_title.lo p{
    text-align: left;
}
.acticon_wrap{
    width: 70%;
    margin: 0 auto 3rem;
}
.actcicon_icons{
    display: inline-block;
    padding: 2rem;
    width: 50%;
    vertical-align: top;
}
.actcicon_icons h3{
    text-align: center;
    font-size: 1.4rem;
    margin: 0 0 .5rem;
}
.actcicon_icons img{
    opacity: 0;
    transform: translate3d(0,3rem,0);
    transition: all 1s;
}
.actcicon_icons div.act_ani img{
    opacity: 1;
    transform: translate3d(0,0,0);
}
.actcicon_icons > div{
    background: #fff;
    box-shadow: 0 0 15px rgba(211,211,211,.4);
    border-radius: 1rem;
    overflow: hidden;
    padding: 3rem;
}
.acthori_slider figure{
    padding: 1rem;
}
.acthori_slider img{
    border-radius: 1rem;
}
.acthori_wrap{
    position: relative;
}
.acthori_bg{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    border-radius: 1rem;
    transform: scale(.95);
    transition: all 2s;
}
.acthori_bg.act_ani{
    border-radius: 0;
    transform: scale(1);
}
.acthori_cont h2{
    color: #fff;
    text-align: center;
    padding: 8rem 0 2rem;
    position: relative;
    z-index: 1;
    font-size: 2rem;
}
.acthori_cont > div{
    position: relative;
    z-index: 1;
}
.acthori_cont .activity_btn{
    transform: translateY(2rem);
}
.acthori_icons{
    display: flex;
    width: 80%;
    margin: 0 auto;
}
.acthori_icons > div{
    width: 33.33333%;
    text-align: center;
    color: #fff;
    margin: 0 0 2rem;
}
.acthori_icons figure{
    width: 15vw;
    height: 15vw;
    padding: 3vw;
    border-radius: 100%;
    border: 1px solid #fff;
    background: rgba(255,255,255,.35);
    margin: 0 auto 1rem;
}
.acthori_icons h4{
    font-size: 2rem;
}
.acthori_cta{
    margin: 5rem auto;
    text-align: center;
}
.getInCus .edit_style{
    transition: all 1s;
    opacity: 0;
    transform: translate3d(0,2rem,0);
}
.getInCus.act_ani .edit_style{
    opacity: 1;
    transform: translate3d(0,0,0);
}
li.activity_menu > a{
    transition: all .3s;
    color: #fff !important;
    border-radius: 100px;
}
.acticon_wysiwyg table{
    width: 100%;
}
.acticon_wysiwyg td{
    display: table-cell;
}
.acticon_wysiwyg tr{
    display: table-row;
}

/* #popup
--------------------------------------------------------------- */
.popup{
    position: fixed;
    z-index: -1;
    top: 0;left: 0;width: 100vw;height: 100vh;
    overflow-y: scroll;
    pointer-events: none;
    opacity: 0;
}
.popup_bg{
    opacity: 0;
    transition: opacity .5s;
    position: fixed;
    top: 0;left: 0;width: 100%;height: 100%;
    background-color: rgba(90,100,110,.4);
}
.popup_inner{
    position: absolute;
    padding: 10vh 0;
    margin: 0 0 0 -40vw;
    left: 50%;
    width: 80vw;
}
.popup_content{
    opacity: 0;
    transition: all .5s;
    transform: translate3d(0,2rem,0);
    background: #fff;
    border-radius: 1rem;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}
.popup_content:after{
    content: '';
    position: absolute;
    z-index: 10;
    top: 0;left: 0;width: 100%;height: 100%;
    background: #fff;
    transform: translate3d(0,100%,0);
    transition: transform .5s;
}
.pop_count{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0050B4;
    text-align: center;
    display: none;
    z-index: 11;
}
.pop_count i{
    font-size: 4rem;
}
.popup_column > div{
    display: inline-block;
    vertical-align: top;
}
.popup_text{
    padding: 0 2rem 0 0;
    width: 40%;
}
.popup_form{
    width: 60%;
}
.popup_text h2{
    font-size: 2rem;
    color: #0050B4;
    margin: 0 0 1rem;
}
.pop_alert{
    margin: 1rem 0;
    background: #FD8232;
    color: #fff;
    padding: 1rem;
    border-radius: 5px;
}
.pop_alert p{
    margin: 0 0 1rem;
}
.closepop{
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all .3s;
}
.closepop:hover{
    transform: rotate(180deg);
    color: #0050B4;
}
.f_priva_des{
    margin: 0 0 2rem;
    display: none;
}
.f_priva_des p{
    margin-bottom: 1rem;
}
.form_privacy h3{
    margin: 0 0 1rem;
    color: #0050B4;
    cursor: pointer;
}
.form_privacy b{
    bottom: initial;
    top: -14px;
    left: 26px;
}
.form_privacy u{
    color: #FF8232;
    display: inline-block;
}
.form_privacy u:hover{
    opacity: 0.5;
}
.form_privacy label{
    display: flex;
    line-height: 1.3;
    align-items: start;
    cursor: pointer;
    position: relative;
}
.form_privacy label input{
    margin: 5px 1rem 0 0; 
    transform: scale(1.2);
}
.form_privacy i{
    top: -18px;
    left: 0;
}
/* active */
.popup.active{
    opacity: 1;
    z-index: 1100;
    pointer-events: initial;
}
.popup.active .popup_bg{
    opacity: 1;
}
.popup.active .popup_content{
    opacity: 1;
    transform: translate3d(0,0,0);
}
.popup_content.success:after{
    transform: translate3d(0,0,0);
}
.popup_content.success .pop_count{
    display: block;
}