@charset "UTF-8";
/* CSS Document */
.mobilesize{
    display: none;
}
body, html{
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
}
*{
    margin:0px;
    padding: 0px;
    font-family: Montserrat Regular;
    /*user-select:none;*/
}
a:link{
    font: inherit;
    color: inherit;  
    text-decoration: none;
}
a:visited{
    font: inherit;
    color: inherit;  
    text-decoration: none;
}
.banner{
    position: relative;
    text-align: center;
    width: 100%;
    overflow: hidden;
}
.container{
    position: relative;
    width: 1360px;
    height: 100%;
    left: 50%;
    margin-left: -680px;
    overflow: hidden;
}
.center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.navigation{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background:#003666;
    z-index: 100;
    opacity: 0.9;
    color: white;
}
.navigation table{
    width: 100%;
    max-width: 1360px;
    height: 100%;
    vertical-align: middle;
}
.navigation td{
    text-align: center;
    width: 14.2%;
    text-transform: uppercase;
    font-size: 12px;
    font-family: Montserrat Medium;
    cursor: pointer;
}
.navigation td a:hover{
    color: #13f4be;
}

.language{
    position: fixed;
    right: 20px;
    top: 70px;
    z-index: 100;
    color: #00a1d6;
}
.language a:hover{
    color:#13f4be;
}

/*Top main banner*/
#banner_main{
    height: 960px;
    background:url('../img/banner01_background.png');
    background-position: center;
    background-repeat: no-repeat;
}
#moon{
    margin-top: -380px;
    pointer-events: none;
}
#banner_main .title{
    opacity: 0;
    position: absolute;
    top: 37.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 500px;
}
#soholab_front{
    position:absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    bottom: -500px;
    pointer-events: none;
}

/*Appearance*/
#customization{
    width:1360px;
    border: none;
    display: block;
}
#banner_customization h2{
    font-size: 22px;
    opacity: 0.7;
    width: 100%;
    max-width: 1200px;
    bottom: 30px;
    text-align: left;
}

/*Feature*/
#banner_feature{
    height: 960px;
}
#bk_feature{
    position:absolute;
    width:1360px;
}
#banner_feature .textarea{
    position: absolute;
    width: 100%;
    max-width: 1170px;
    top: 90px;
}
#banner_feature .textarea01{
    position: absolute;
    width: 100%;
    max-width: 1170px;
    top: 365px;
    text-align: right;
}
#banner_feature h1{
    font-family: BebasNeue Regular;
    color: #00a1d8;
    font-size: 360px;
    text-align: left;
    line-height: 1;
    float: left;
    margin-right: 10px;
}
#banner_feature h1:hover{
    color:#13f4be;
}
#banner_feature h2{
    font-family: Montserrat bold;
    text-align: left;
    color: #00a1d8;
    font-size: 46px;
    line-height: 1;
    margin-top: 27px;
}
#banner_feature h2 span{
    color: white;
    opacity: 0.9;
    font-family: Montserrat bold;
}
#banner_feature h3{
    font-family: Montserrat bold;
    font-size: 32px;
    line-height: 1;
    color: white;
    opacity: 0.9;
    pointer-events: none;
    margin-top: 17px;
}
#banner_feature h3 p{
    font-size: 18px;
    line-height: 1.3;
}
#banner_feature h4{
    color:#00a1d8;
    font-size: 180px;
    font-family: BebasNeue Regular;
    line-height: 0.5;
    margin-left: -10px;
    float: right;
}
#banner_feature h4:hover{
    color: #13f4be;
}
#banner_feature h4 span{
    font-size: 24px;
    font-family: BebasNeue Regular;
}
#soholab_perspective{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    width:1360px;
}

/*Feature_cells*/
#banner_cells{
    height: 832px;
}
#electron_bk{
    height: 820px;
    top: 12px;
    display: block;
    margin-left: -340px;
}
#banner_cells .textarea01{
    position: absolute;
    width: 100%;
    max-width: 1220px;
    top: 0px;
    text-align: left;
}
#flash{
    display: block;
    margin-top:60px;
    position: absolute;
    left: 0px;
    opacity: 0.8;
    z-index: -100;
}
#banner_cells .textarea01 h1{
    margin-top: 120px;
    margin-left: 58px;
    font-size: 46px;
    font-family: Montserrat bold;
    color: white;
    font-style:italic;
    line-height: 0.8;
}   
#banner_cells .textarea01 h1 span{
    color: #00beff;
    font-family: Montserrat bold;
    font-style: normal;
    font-size: 38px;
}
#banner_cells .textarea01 h1 span:hover{
    color: #13f4be;
}
#banner_cells .textarea01 h2{
    margin-left: 58px;
    font-size: 20px;
    color: white;
    line-height: 1.8;
}
#banner_cells .textarea01 h3{
    margin-left: 53px;
    color: #00beff;
    font-size: 90px;
    font-family: BebasNeue Regular;
    line-height: 90px;
    width: 100px;
}
#banner_cells .textarea01 h3:hover{
    color: #13f4be;
}
#banner_cells .textarea01 h4{
    margin-left: 155px;
    margin-top: -87px;
    font-size: 20px;
    font-family: Montserrat bold;
    color: white;
}
#banner_cells .textarea01 h4 span{
    font-family: Montserrat Medium;
    color: #00beff;
}
#electron{
    position:absolute;
    bottom: 0px;
    margin-left: -250px;
    opacity: 0.7;
}
#banner_cells .textarea02{
    position: absolute;
    bottom: 80px;
    margin-left: -260px;
}
#banner_cells .textarea02 h2{
    font-family: Montserrat bold;
    font-size:46px;
    color: white;
    font-style:italic;
    line-height: 0.8;
    text-align: right;
}
#banner_cells .textarea02 h2 span{
    font-size: 36px;
    font-family: Montserrat bold;
    font-style: normal;
    color: #00beff;
}
#banner_cells .textarea02 h2 span:hover{
    color: #13f4be;
}
#banner_cells .textarea02 h3{
    text-align: right;
    font-size: 22px;
    font-family: Montserrat bold;
    color: white;
    line-height: 46px;
}
#banner_cells .textarea02 h3 span{
    font-size: 46px;
    font-family: BebasNeue Regular;
    color: #00beff;
}
#banner_cells .textarea02 h3 span:hover{
    color: #13f4be;
}

#banner_cells .ports{
    background-color: #7595ae;
    position: absolute;
    left: 50%;
    width: 660px;
    margin-left: 20px;
    margin-top: 12px;
    height: 358px;
    pointer-events: none;
}
#banner_cells .ports_textarea{
    width: 100%;
    max-width: 1220px;
    text-align: left;
    margin-top: 45px;
    color: #183851;
}
#banner_cells .ports_textarea h1{
    margin-left: -15px;
    font-size: 86px;
    font-family: BebasNeue Regular;
}
#banner_cells .ports_textarea h2{
    font-size: 36px;
    font-family: Montserrat bold;
    margin-left: 60px;
    margin-top: -100px;
}
#banner_cells .ports_textarea p{
    color: white;
    font-size: 22px;
    font-family: Montserrat Medium;
    margin-left: 63px;
    margin-top: 3px;
}
.ports_icon{
    position: absolute;
    width: 100%;
    max-width: 1220px;
    text-align: left;
    margin-top: 190px;
}
.ports_icon_container{
    position: absolute;
    right: 3%;
    width: 400px;
    border: white 2px dashed;
    border-radius:30px;
    padding: 20px;
}
.ports_icon img{
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: middle;
} 
#automotive{
    bottom: 0px;
    margin-left: 350px;
}
#banner_cells .textarea03{
    position: absolute;
    width: 100%;
    max-width: 1220px;
    bottom: 0px;
    text-align:left;
    height: 410px;
    color: white;
    pointer-events: none;
}
#banner_cells .textcontainer{
    position: absolute;
    left: 56%;
}
#banner_cells .textarea03 h1{
    font-family: Montserrat Medium;
    font-size: 29px;
    pointer-events:all;
}
#banner_cells .textarea03 h1 span{
    font-family: Montserrat bold;
    font-size: 36px;
    color: #00beff;
}
#banner_cells .textarea03 h1 span:hover{
    color: #13f4be;
}
#banner_cells .textarea03 h2{
    margin-top: 145px;
    font-size: 18px;
    font-family:  Montserrat Medium;
    pointer-events:all;
}
#banner_cells .textarea03 h2 span{
    color: #00beff;
    font-family: BebasNeue Regular;
    font-size: 46px;
    line-height: 18px;
}
#banner_cells .textarea03 h2 span:hover{
    color: #13f4be;
}
#banner_cells .textarea03 h3{
    font-size: 18px;
    font-family:  Montserrat Medium;
}
#banner_cells .textarea03 h3 span{
    color: #00beff;
    font-family: Montserrat bold;
}

/*Product Parameter*/
.soholab_side{
   position: relative;
   left: 0px;
   display: block;
   margin-top: 200px;
}
#banner_parameter h1{
    top: 0;
    width: 100%;
    max-width: 1360px;
    text-align: left;
    margin: 30px;
    font-family: Montserrat bold;
    font-size: 36px;
    opacity: 0.35;
}
#banner_parameter .notice{
    text-align: right;
    margin-top: 60px;
    margin-right: 5px;
    font-size: 12px;
    opacity: 0.5;
}
#banner_parameter .table_container{
    width: 100%;
    max-width: 1360px;
    top: 0;
}
#banner_parameter table{
    position:absolute;
    right: 0;
    top: 100px;
}
#banner_parameter tr{
    display: block;
    margin-bottom: 20px;
}
#banner_parameter table td{
    width: 135px;
}
#banner_parameter table img{
    width: 90px;
    height: 87px;
}
#banner_parameter table p{
    font-size: 14px;
    opacity: 0.7;
}
#banner_parameter table h3{
    color:#00a1d6;
    font-family: Montserrat bold;
    font-size: 16px;
}
#banner_parameter table .unit{
    font-size: 12px;
}
#banner_parameter .port_feature{
    width: 100%;
    max-width: 1360px;
    top: 560px;
}
#banner_parameter .port_feature h2{
    font-size: 16px;
    text-align: left;
    margin-left: 48%;
    font-weight: lighter;
    line-height: 1.5;
    opacity: 0.7;
}
#banner_parameter .port_feature h2 span{
    font-family: Montserrat bold;
}
#banner_parameter .port_feature .line{
    border-bottom:1.5px solid #00a1d6;
    width: 500px;
    margin-top:8px;
    margin-bottom: 8px;
    margin-left: 48%;
}
#banner_parameter .port_feature h3{
    font-size: 16px;
    text-align: left;
    margin-top: 12px;
    margin-left: 48%;
    font-family: Montserrat bold;
    opacity: 0.7;
}
#banner_parameter .port_feature h3 span{
    color:#00a1d6;
    opacity: 1;
    font-family: Montserrat bold;
}
#banner_parameter .port_feature .dashline{
    position: absolute;
    border-bottom:2px dashed #00a1d6;
    width: 200px;
    right: 53%;
    top: 222px;
}
#banner_parameter .port_feature .dashline svg{
    position: absolute;
    top: -6px;
    left: -6px;
}

#banner_parameter .port_feature p{
    text-align: left;
    margin-left: 48%;
    font-size: 12px;
    opacity: 0.5;
    margin-top: 8px;
    width: 460px;
}

#banner_parameter01{
    margin-top: -100px;
}
#banner_parameter01 .left_perspective{
    text-align: right;
}
#banner_parameter01 .parameter01-text{
    width: 100%;
    max-width: 1360px;
    top: 100px;
    line-height: 1.5;
    text-align: right;
}
.parameter01-text_container{
    margin-right: 69%;
    background:white;
    padding-right: 5px;
}
.parameter01-text h1, .parameter01-text h2, .parameter01-text h3, .parameter01-text h4{
    font-size: 16px;
    font-weight: lighter;
    color: rgba(0, 0, 0, 0.7);
}
.parameter01-text span{
    font-family: Montserrat bold;
}
.parameter01-text .blue{
    opacity: 1; 
    color: rgba(0,161,214,1)!important;
}
.parameter01-text h1{
    margin-top: 150px;
}
.parameter01-text .line{
    position: absolute;
    width: 230px;
    border-bottom:1.5px solid #00a1d6;
    right: 70%;
    margin-top: 35px;
}
.parameter01-text h2{
    margin-top: 70px;
}
.parameter01-text h3{
    margin-top: 15px;
}
.parameter01-text h4{
    margin-top: 15px;
}
.parameter01-text h3 .blue, .parameter01-text h4 .blue{
    font-family: Montserrat Regular;
}
.parameter01-text .dashline_container{
    width: 1360px;
    top: 0;
    z-index: -100;
}
.parameter01-text .dashline{
    border-bottom: 2px dashed #00a1d6;
    position: absolute;
    left: 32%;
}
.parameter01-text .dashline svg{
    position: absolute;
    top: -6px;
    left: calc(100% - 6px);
}
.parameter01-text .dashline01{
    top: 390px;
    width: 11.5%;
}
.parameter01-text .dashline02{
    top:450px;
    width: 11.5%;
}
.parameter01-text .dashline03{
    top:455px;
    height: 120px;
    border-bottom: none;
    border-right: 2px dashed #00a1d6;
    width: 22.8%;
}
.parameter01-text .dashline04{
    top:435px;
    height: 140px;
    border-right: 2px dashed #00a1d6;
    width: 30%;
}

/*Safety*/
#banner_safety{
    height: 950px;
}
#banner_safety .temp-control{
    display: block;
    position:relative;
    left: 50%;
    margin-left: -680px;
    margin-top: 50px;
}
#banner_safety .textarea{
    top: 0;
    position: absolute;
    width: 100%;
    max-width: 1360px;
}
#banner_safety .textarea h1{
    color: white;
    opacity: 0.9;
    font-size: 24px;
    font-family: Montserrat Medium;
    position: absolute;
    top: 150px;
    left: 63%;
}
#banner_safety .textarea h1 span{
    color: #00a1d8;
    font-size: 58px;
    font-weight: bolder;
    line-height: 1;
}
#banner_safety .textarea p{
    text-align: left;
    color: white;
    opacity: 0.9;
    font-size: 16px;
    font-family: Montserrat Regular;
    position: absolute;
    top: 600px;
    left: 68%;
}
#banner_safety .provider{
    top: 670px;
    height: 100px;
    width: 100%;
    max-width: 1360px;
}
#banner_safety .byd{
    background-color: #ebebeb;
    position: relative;
    height: 300px;
    width:68%;
}
#banner_safety .byd .logo{
    margin-top: 60px;
    opacity: 0.5;
}
#banner_safety .byd h2{
    font-family: Montserrat Bold;
    font-size: 32px;
    color: #d20914;
}
#banner_safety .byd h2 span{
    color: black;
    font-size: 26px;
    opacity: 0.6;
}
#banner_safety .byd p{
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.6;
    line-height: 1.5;
    font-family: Montserrat Medium;
}
#banner_safety .liberty-insur{
    position: absolute;
    top: 0;
    left: 68%;
    width: 32%;
    background-color:#b4cadf;
    height: 300px;
}
#banner_safety .liberty-insur .shield{
    margin-top: 30px;
}
#banner_safety .liberty-insur .liberty-insur_logo{
    top: 110px;
}
#banner_safety .liberty-insur h3{
    color: white;
    font-size: 16px;
    margin-top: 25px;;
}

/*UPS Power Function*/
#banner_ups{
    margin-top: 20px;
}
#banner_ups .ups_container{
    position: relative;
    width: 830px;
    left:50%;
    margin-left: -680px;
    text-align:left;
}
#banner_ups .ups_container h1{
    font-family: Montserrat Bold;
    color: white;
    font-size: 192px;
    position: absolute;
    top: 360px;
    left: 22%;
}
#banner_ups .ups_container h1:hover{
    color: #13f4be;
}
#banner_ups .ups_container h1:hover .remove_hover{
    color: white;
}
#banner_ups .ups_container h2{
    font-size: 32px;
    color: white;
    font-family: Montserrat Bold;
    opacity: 0.9;
    position: absolute;
    top: 10px;
    right: 20px;
}
#banner_ups .ups_container p{
    color: white;
    font-family:  Montserrat Medium;
    font-size: 16px;
    opacity: 0.8;
    position: absolute;
    left: 23.7%;
    top: 345px;
}
#banner_ups .ups_container .ups_main{
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
}
#banner_ups .textarea{
    width: 100%;
    max-width: 1360px;
    color: white;
}
#banner_ups .textarea h2{
    font-size: 24px;
    font-family: Montserrat bold;
    margin: 15px;
    opacity: 0.9;
}
#banner_ups .textarea h3{
    margin-top: 115px;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 14px;
    font-weight: lighter;
}
#banner_ups .flash_bettery{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 170px;
}
#banner_ups .flash_bettery_text{
    top: 0px;
    text-align: right;
}
#banner_ups .flash_bettery_text h3{
    
    margin-right: 50px;
}
#banner_ups .flash_bettery_text p{
    position: absolute;
    right: 10px;
    top: 150px;
    font-size: 56px;
    color: #00a1d8;
    font-family: BebasNeue Regular;
}
#banner_ups .flash_bettery_text p span{
    font-family: BebasNeue Regular;
    font-size: 16px;
}
#banner_ups .clock{
    position: absolute;
    top: 236px;
    left: 50%;
    margin-left: 170px;
}
#banner_ups .clock_text{
    width: 510px;
    position: absolute;
    top: 236px;
    left:50%;
    margin-left: 170px;
    text-align: left;
}
#banner_ups .panel{
    position: absolute;
    top: 472px;
    left: 50%;
    margin-left: 170px;
}
#banner_ups .panel_text{
    top: 472px;
    text-align: right;
    pointer-events:none;
}
#banner_ups .car{
    position: absolute;
    top: 709px;
    left: 50%;
    margin-left: 170px;
}
#banner_ups .car_text{
    width: 510px;
    position: absolute;
    top: 709px;
    left:50%;
    margin-left: 170px;
    text-align: left;
}

/*Usage Scenario*/
.scenario_container{
    position:relative;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    margin-top: 90px;
}
.scenario_container .container_img{
    position: relative;
}
.scenario_container h2{
    font-size: 32px;
    font-family: Montserrat Bold;
    text-align: right;
    line-height: 1.5;
    opacity: 0.6;
    margin-bottom: 30px;
}
.scenario_container h3{
    position: absolute;
    bottom: 15px;
    right: 20px;
    color: white;
    font-family: Montserrat Bold;
    font-size: 22px;
    text-shadow: 0 0 10px #505050;
}
.scenario_container h3:hover{
    color: #13f4be;
}
.scenario_container .logo{
    position: absolute;
    top: 10px;
    right: 285px;
    opacity: 0.5;
}
#scenario .container_left{
    width: 50%;
    max-width: 680px;
    float:left;
}
#scenario .container_right{
    width: 50%;
    max-width: 680px;
    float:left;
}
.scenario_container .container_img{
    margin-top: 12px;
    border-radius: 15px;
    overflow: hidden;
}
#scenario .container_left .container_img{
    margin-right: 6px
}
#scenario .container_right .container_img{
    margin-left: 6px;
}
.scenario_container .container_img img{
    display:block;
}

/*About Us*/
#aboutus{
    margin: 0 auto;
    width: 100%;
    max-width: 1360px;
    margin-top: 50px;
}
#aboutus .logo{
    position: absolute;
    top: 80px;
    left: 100px;
}
#aboutus .textcontainer{
    position: absolute;
    top: 150px;
    right: 100px;
    width: 750px;
    text-align: left;
    color: white;
}
#aboutus .textcontainer h2{
    font-size: 26px;
    margin-bottom: 40px;
    font-family: Montserrat Bold;
}
#aboutus .textcontainer p{
    margin-bottom: 15px;
    line-height: 1.5;
    text-align: justify;
    font-size: 16px;
}

#aboutus .advantages h2{
    text-align: left;
    margin-left: 60px;
    width: 500px;
    font-size: 70px;
    font-family: Montserrat Bold;
    line-height: 1.2;
    color: #053d56;
}
#aboutus .advantages h2:first-child{
    font-size: 82px;
    margin-top: -82px;
    color: white;
}
#aboutus .advantages h2:hover{
    color: #13f4be;
}
#aboutus .advantages h3, #aboutus .advantages p{
    text-align: right;
}
#aboutus .advantages h3{
    margin-top:-53px;
    margin-bottom: 20px;
    margin-right: 60px;
    font-size: 36px;
    font-family: Montserrat Bold;
    color: #053d56;
}
#aboutus .advantages p{
    color: #053d56;
    line-height: 3;
    font-size: 16px;
    width: 430px;
    margin-right: 60px;
    margin-left: auto;
    border-bottom: 3px solid #0d7bad;
}
#aboutus .advantages p span{
    color:#00a1d8;
    font-family: Montserrat Bold;
}
#aboutus .advantages p:last-of-type{
    border-bottom:none;
}

/*World map*/
#worldmap{
    background-color: #053d56;
    margin-top:60px;
}
#worldmap h2{
    color: white;
    font-size: 18px;
    font-weight: lighter;
    line-height: 1.5;
    width:100%;
    max-width: 1360px;
    text-align: left;
    margin:60px;
}
#worldmap .worldmap{
    user-select:none;
}
#worldmap .container_map{
    position: relative;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding-top: 160px;
    padding-bottom:80px;
}
#worldmap .inner_container{
    position:relative;
    width: 860px;
    margin: 0 auto;
}
#worldmap .country{
    position: absolute;
}
#worldmap .country img{
    position: absolute;
    top: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
}
#worldmap .country p{
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
    font-family: Montserrat Bold;
    line-height: 1.5;
    cursor:default;
    white-space:nowrap;
}
#worldmap .country:hover p{
    color:#13f4be;
    text-shadow: 0 0 10px black;
}
#worldmap .float_right p{
    right:0;
    top:0;
    margin-right: 16px;
    transform: translateY(-50%);
}
#worldmap .float_left p{
    left:0;
    top:0;
    margin-left: 16px;
    transform: translateY(-50%);
}

#worldmap .uk{ top:23%; left:5%; } 
#worldmap .france{ top:28.5%; left:6.5%; }
#worldmap .spain{ top:33%; left:4.6%; }
#worldmap .germany{ top:23.5%; left:8.5%; }
#worldmap .bulgaria{ top:33.7%; left:13.7%; }
#worldmap .saudi{ top:47%; left:23%; }
#worldmap .kazakhstan{ top:35%; left:28.2%; }
#worldmap .russia{ top:17%; left:31.5%; }
#worldmap .myanmar{ top:51%; left:39.5%; }
#worldmap .vietnam{ top:49%; left:42.5%; }
#worldmap .cambodia{ top:56%; left:41.5%; }
#worldmap .japan{ top:34%; left:51.2%; }
#worldmap .australia{ top:78%; left:51%; }
#worldmap .newzealand{ top:91%; left:61%; }
#worldmap .america{ top:25%; left:71.5%; }
#worldmap .brazil{ top:67%; left:86%; }

/*footer*/
#footer {
width: 100%;
padding-top: 60px;
padding-bottom: 80px;
background:#053d56;
}
#footer h2{
    color:#00a1d6;
    font-size: 22px;
}
#footer h3{
    color: white;
    font-size: 18px;
    line-height: 2;
}
#footer p{
    color: white;
    font-size: 16px;
}
#footer p span{
    margin: 0 20px;
}
#footer a:hover{
    color: #13f4be;
}