body{
font-family: 'Montserrat', "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, Arial, sans-serif;;
}
body.locked{
    overflow: hidden;
}
b{
    font-weight: bold !important;
}
header {
    position: absolute;
    top: 0;
    width: 100%;
}
header a.on,header span.on{
    color: #009fb0!important;
    font-weight: 700;
}
.right.col-blue span,.right.col-blue span a,.home-banner.col-blue{color:#004078;}
.lang a{color:#fff;}
header .wrapper{
    margin: 2% 5%;
}
p {
    font-weight: 500;
}
/* header a {
    color: #fff; */
/* text-transform: uppercase; */
/* padding: 0 10px; */
/* font-size: 14px; */
/* position: relative; */
header span a,header span{
    position: relative;
    padding: 0 10px;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
}
.menu-child{
    position: absolute;
    top: 12px;
    left: -12px;
    display: none;
    color: #8cdde6;
    text-align: left;
    font-weight: bold;
    line-height: 24px;
    width: 400px;
}
.menu-child li a{color: #8cdde6;}
.menu-child li a:hover,.menu-child li:hover{color:#fff;}
.menu-child li{transform: ease in all 1s;}
a {
    color: initial;
    text-decoration: none;
}
header .left {
    display: inline-block;
    width: 20%;
}
header .left img {
    width: 100%;
    height: auto;
    max-width: 215px;
}
header .right {
    position: relative;
    top: 15px;
    float: right;
    display: inline-block;
    width: 79%;
    text-align: right;
}
header .lang {
    display: inline-block;
    color: #fff;
    padding-left: 30px;
}
header .lang .on {
    color: #009fb0;
}

.hide-in-mobile{
     display: inline-block;
}
.show-in-mobile{
    	display: none;
}
.show-in-tab{
       display: none;
}


/* banner */
.index-bg{background-image: url('../img/home/banner.jpg');background-position: center;}
.about-bg{background-image: url('../img/banner/about.jpg');background-position: center;}
.operations-bg{background-image: url('../img/banner/operations.jpg');background-position: center;}
.business-bg{background-image: url('../img/banner/business.jpg');background-position: center;}
.contact-bg{background-image: url('../img/banner/contact.jpg');background-position: center;}
.media-bg{background-image: url('../img/banner/media.jpg');background-position: center;}
.technology-bg{background-image: url('../img/banner/technology.jpg');background-position: center;}
.question-bg{background-image: url('../img/banner/question.jpg');background-position: center;}
.substantiation-bg{background-image: url('../img/banner/substantiation.jpg');background-position: center;}
.substantiation-ger-bg{background-image: url('../img/banner/sub-germagic.jpg');background-position: center;}
.technology-a-bg{background-image: url('../img/banner/technology-a.jpg');background-position: center;}
.technology-b-bg{background-image: url('../img/banner/technology-b.jpg');background-position: center;}
.technology-c-bg{background-image: url('../img/banner/technology-c.jpg');background-position: center;}



.small-link.mob-nav__link{font-size: 24px;padding-left: 10%;}
.home-banner.index-banner{height: 400px;}
.home-banner .wrapper .home-banner__picture{
    width: 30%;
    margin: 0 auto;
    margin-bottom: 50px;
}
.home-banner .wrapper .banner-logo {
    width: 100%;
    height: auto;
}
.home-banner {
    height: 440px;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    text-transform: uppercase;
}
.home-banner  .wrapper {
    position: relative;
    top: 55%;
    margin: 0 auto;
    width: 90%;
    max-width: 100%;
    text-align: center;
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
}
.home-banner h4 {
    font-weight: 500;
}
img.down-arrow {
    position: relative;
    bottom: -50px;
    right: auto;
}
.intro .wrapper {
    margin: 0 15%;
    padding: 90px 0;
}
.intro .wrapper p {
    color: #004078;
    text-align: center;
    font-size: 16px;
    line-height: 1.5em;
}
.our-technology {
    min-height: 300px;
    background: linear-gradient(-180deg, #0061c5,#009eb1);
    background-size: 200%, 200%;
    -webkit-animation: gradidentAnimate 7s ease infinite;
    -moz-animation: gradidentAnimate 7s ease infinite;
    -o-animation: gradidentAnimate 7s ease infinite;
    animation: gradidentAnimate 7s ease infinite; 
}

.our-technology .wrapper {
    margin: 0 10%;
    padding: 90px 0;
}

h3.rotate-text {
    position: absolute;
    top: 0px;
    right: 99%;
    left: auto;
    float: left;
    margin: 0;
    padding-bottom: 30px;
    color: #fff;
    white-space: nowrap;
    font-weight: 100;
    font-size: 50px;
    transform: rotate(270deg) translateY(-100%);
    transform-origin: right top;
}

h3.rotate-text b{
    font-weight: bold;
}
.our-technology .wrapper:after {
  clear: both;
  display: table;
  content: "";
}
.our-technology .left {
    display: inline-block;
    width: 10%;
}
.our-technology .right {
    position: relative;
    display: inline-block;
    width: 79%;
}
.our-technology .right img {
    width: 100%;
    height: auto;
}
.our-technology .bottom-left {
    display: inline-block;
    width: 70%;
    color: #fff;
}
.our-technology .bottom-right {
    display: inline-block;
    width: 29%;
}
a.btn {
    display: inline-block;
    box-sizing: border-box;
    padding: 20px 30px;
    background-color: #00407a;
    color: #fff;
    vertical-align: middle;
    font-weight: 600;
    font-size: 18px;
    transition: all 0.5s;
}
a.btn:hover{
    background-color: #00aab5;
    color: #fff;
}
.our-technology .bottom-left p{
    font-size: 20px;
    line-height: 1.5em;
}
.our-technology .bottom-right a.btn{
    float: right;
}
.brands .wrapper {
    margin: 0 10%;
    padding: 50px 0;
    border-bottom: 1px solid #e3e3e3;
}
.brands h3 {
    font-size: 50px;
    color: #004078;
    text-align: center;
    text-transform: uppercase;
}
.brands h3 .thin{
    font-weight: 100;
    font-size: 45px;
}
img.brands-png {
    width: 100%;
    height: auto;
}
.our-business-partners .wrapper {
    margin: 0 10%;
    padding: 50px 0;
}
.our-business-partners .swiper-slide:nth-child(1){
    margin-left:50px;
}
.our-business-partners-block {
    position: relative;
    display: inline-block;
    margin: 0 1.5%;
    width: 100%;
    vertical-align: top;
    //cursor: pointer;
}
.product-pic {
    position: relative;
    width: 90%;
    height: 300px;
    background: #fff;
    box-shadow: -20px 14px 20px 0px rgba(136, 136, 136, 0.2);
    transition: all 1s;
}
.product-pic:hover{
   box-shadow: -20px 18px 20px 4px rgba(116, 114, 114, 0.1);
}

.product-pic img{
    position: absolute;
    top: 50%;
    left: 55%;
    width: auto;
    height: 80%;
    transition: all 0.3s;
    transform: translate(-50%, -50%);
}
.product-pic img.product-img-size {
    top: 40%;
    width: 90%;
    height: auto;
}
.product-pic img.product-img-size2 {
    top: 40%;
    width: auto;
    height: 110%;
}


.product-pic:before {
    position: absolute;
    right: -10%;
    bottom: -6%;
    z-index: -1;
    width: 90%;
    height: 350px;
    background: linear-gradient(-360deg, #0061c5,#009eb1);
    content: "";
    transition: all 0.7s;
}
.product-pic:hover:before {
    right: -1%;
    bottom:-1%;
}
.business-partner-logo {
    position: relative;
    margin: 15% 25% 20%;
    max-width: 50%;
    max-height: 30px;
}
.learn-more {
    margin-top: 8%;
    color: #00407a;
    text-align: right;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 16px;
    padding-right: 5px;
}
.center-btn {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
.our-business-partners h3 {
    margin-bottom: 0;
    color: #014079;
    text-align: center;
    font-size: 50px;
}
.our-business-partners h3 .thin {
    font-weight: 100;
    font-size: 45px;
}
.our-substantiation {
    background-size: cover;
    background-repeat: no-repeat;
}
.our-substantiation .wrapper {
    margin: 0 10%;
    padding: 100px 0;
}
.our-substantiation .right {
    display: inline-block;
    width: 50%;
}
.our-substantiation .left {
    display: inline-block;
    width: 49%;
}
.our-substantiation h3 {
    margin-bottom: 20px;
    color: #00407a;
    text-transform: uppercase;
    font-size: 50px;
}
.our-substantiation h3 .thin {
    font-weight: 100;
    font-size: 45px;
}
.our-substantiation p{
    margin-bottom: 40px;
    width: 70%;
    color: #00407a;
    font-size: 16px;
    line-height: 1.5em;
}

.our-substantiation .btn{
    text-transform: uppercase;
}
.full-gradient {
    display: inline-block;
    width: 100%;
    min-height: 300px;
    background: linear-gradient(-180deg, #3da1ef,#126a9a);
    background-size: 200% 200%;
    -webkit-animation: gradidentAnimate 7s ease infinite;
    -moz-animation: gradidentAnimate 7s ease infinite;
    -o-animation: gradidentAnimate 7s ease infinite;
    animation: gradidentAnimate 7s ease infinite;
}
/* .substantiation-germagic-t.full-gradient{
    background: linear-gradient(-180deg, #0061c5,#009eb1);
} */

.floated-fix:after {
  clear: both;
  display: table;
  content: "";
}

.Q-A-content {
    padding: 5%;
    width: auto;
    background: #fff;
    color: #005fc6;
}

.Q-A .wrapper {
    position: relative;
    margin-top: 5%;
    margin-right: 10%;
    margin-left: 10%;
}

.rotate-text-wrap{
    position: relative;
    display: inline-block;
    height: 400px;

}
.rotate-text2{
    position: relative;
    top: 30%;
    float: left;
    color: #fff;
    font-weight: 100;
    font-size: 50px;
    transform: rotate(-90deg);
}
.Q-A-content .desc {
    display: inline-block;
    width: 78%;
    line-height: 2.5em;
    font-size: 20px;
    cursor: pointer;
    vertical-align: middle;
  
}
.Q-A-content .title {
    position: relative;
    top: -7px;
    display: inline-block;
    width: 4.25em;
    vertical-align: middle;
    font-size: 48px;
}
:lang(zh-hk) .Q-A-content .title,
:lang(zh-cn) .Q-A-content .title{
    width: 3.25em;
}
.down-arrow {
    position: absolute;
    right: 4%;
    display: inline-block;
    vertical-align: top;
    text-align: right;
    font-size: 30px;
    cursor: pointer;
}
.Q-A-content .column {
    padding: 1.4em 0;
    border-bottom: solid 1px #005fc6;
    transition: all 0.5s;
}
.Q-A-content .column:hover {
    color: #666;
}
.answer {
    display: none;
    padding-top: 14px;
    font-size: 14px;
    transition: all 1s;
    margin: 10px 0;
}

.Q-A-content .down-arrow{
    float: right;
    padding-right: 15px;
    padding-left: 15px;
}

#map {
    width: 100%;
    height: 450px;
}

.map-contact-us .map-wrap {
    display: inline-block;
    width: 50%;
}

.map-contact-us .contact-us {
    display: inline-block;
    margin-right: 5%;
    margin-left: 5%;
    width: 39%;
    vertical-align: top;
}

.map-contact-us .contact-us h3{
    margin-bottom: 0.5em;
    color: #fff;
    font-weight: 100;
    font-size: 50px;
}
.contact-us .mini-form {
    position: relative;
    bottom: -50px;
    float: right;
    width: 130%;
    background: #fff;
    box-shadow: -20px 14px 20px 0px rgba(2, 2, 2, 0.2);
    padding-bottom: 50px;
}
.contact-us .mini-form .wrapper{
    background: #fff;
}
.mini-form input[type="text"] {
    display: block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    border: none;
    border-bottom: solid 1px #005fc6;
    margin-top: 10px;
}
.mini-form textarea {
    display: block;
    box-sizing: border-box;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 10px;
    width: 100%;
    height: 100px;
    border: solid 1px #005fc6;
}

.contact-us .mini-form .wrapper {
    display: inline-block;
    margin-left: 5%;
    padding-top: 5%;
    width: 60%;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #005fc6;
  font-weight: 100;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #005fc6;
  font-weight: 100;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #005fc6;
  font-weight: 100;
}
:-moz-placeholder { /* Firefox 18- */
  color: #005fc6;
  font-weight: 100;
}

.mini-form-submit {
    position: absolute;
    right: 0;
    display: inline-block;
    width: 15%;
    height: 100%;
    background: linear-gradient(-180deg, #0061c5,#009eb1);
    cursor: pointer;
    transition: all 0.5s;
}
.mini-form-submit:hover {
    opacity: 0.8;
}
.mini-form-submit img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mini-form .btn-submit{
    height: 0;
    width: 0;
    border: 0;
    opacity: 0;
}

.mini-form .warning-msg{
    display: none;
    color: red;
    font-size: 12px;
    line-height: 0;
}

.mini-form .btn-loading{
    display: none;
}

#msg-thank-you{
    color: #fff;
    display: none;
}

.mini-form #captcha {
    display: inline-block;
    vertical-align: middle;
}

.mini-form .captcha-img .reload {
    width: 20px;
    height: 20px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    padding-left: 15px;
}

footer {
    background-color: #004078;
    color: #fff;
    font-size: 16px;
}
footer a{
    color: #fff;
}
footer .wrapper {
    margin: 0 10%;
    padding: 5% 0;
}
footer .logo img {
    //max-width: 300px;
}
footer .address {
    margin: 1em 0;
}
footer .contacts {
    //font-weight: 500;
    font-size: 14px;
    line-height: 1.2em;
}
footer .left {
    display: inline-block;
    width: 80%;
    font-size: 14px;
}
footer .right {
    float: right;
    display: inline-block;
    width: 20%;
    vertical-align: top;
    text-align: right;
}
footer .germagic-logo{
    max-width: 200px;
}
footer .share-logo {
    width: 150px;
}
footer .wrapper .left .addrRow .addrColumn{
    float:left;width:33%;margin-right:1px;        
}



.share-logo-container a img {
    padding-top: 5px;
    padding-left: 5px;
}
.copyright{
    font-size: 10px;
}
.a-block{display: block;}


.banner {
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    text-transform: uppercase;
}
.banner .wrapper {
    margin: 0 10%;
    height: 100%;
}
.banner .wrapper h3{
    position: relative;
    top: 40%;
    margin: 0;
    text-align: center;
    font-size: 60px;
}

.about-germagic h3{
    color: #00407a;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 40px;
}
.about-germagic p{
    color: #00407a;
    font-size: 16px;
    line-height: 1.5em;
}
.about-germagic .left {
    position: absolute;
    top: 50%;
    display: inline-block;
    margin-right: 5%;
    width: 30%;
    transform: translateY(-50%);
}


.about-germagic .right {
    float: right;
    display: inline-block;
    margin: 5% 0;
    width: 64%;
    text-align: right;
}
.about-germagic .wrapper {
    position: relative;
    margin-left: 10%;
}
.about-germagic .right img {
    height: 100%;
}
.about-img{display: none;}
.about-img img{width: 100%;}
-webkit-animation: gradidentAnimate 7s ease infinite;
-moz-animation: gradidentAnimate 7s ease infinite;
-o-animation: gradidentAnimate 7s ease infinite;
animation: gradidentAnimate 7s ease infinite;

@-webkit-keyframes gradidentAnimate {
    0%{background-position:32% 0%;}
    50%{background-position:69% 100%;}
    100%{background-position:32% 0%;}
}
@-moz-keyframes gradidentAnimate {
    0%{background-position:32% 0%;}
    50%{background-position:69% 100%;}
    100%{background-position:32% 0%;}
}
@-o-keyframes gradidentAnimate {
    0%{background-position:32% 0%;}
    50%{background-position:69% 100%;}
    100%{background-position:32% 0%;}
}
@keyframes gradidentAnimate { 
    0%{background-position:32% 0%;}
    50%{background-position:69% 100%;}
    100%{background-position:32% 0%;}
}
.our-tech-description .wrapper {
    margin: 0 10%;
}
.our-tech-description h3{   
    margin-top: 5%;
    margin-bottom: 5%;
    color: #00407a;
    text-transform: uppercase;
    font-size: 50px; 
    text-align: center;
}
.our-tech-description h3 .thin {
    font-weight: 100;
    font-size: 45px;
}

.our-tech-description p{
    margin:5% 0;
     margin-top: 0;
    color: #00407a; 
    text-align: center;
    line-height: 1.7em;
}
.graph {
    position: relative;
    margin: 0 0;
    padding-bottom: 50%;
}
@media screen and (max-width: 1920px){
    .graph {
         padding-bottom: 50%;
    }
}
@media screen and (max-width: 1700px){
    .graph {
         padding-bottom: 60%;
    }
}
@media screen and (max-width: 991px){
    .graph {
         padding-bottom: 50%;
    }
}
.graph img {
    position: absolute;
    left: 50%;
    max-width: 100%;
    transform: translateX(-50%);
}
.our-tech-description .inner-wrapper {
    margin:0 18%;
}
.graph img.graph1 {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
  animation-delay: 0.5s; 
}
.graph img.graph2 {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
  animation-delay: 1s; 
}
.graph img.graph3 {
    //position: relative;
}
@keyframes blink-animation {
  to {
    opacity: 0;
  }
}
@-webkit-keyframes blink-animation {
  to {
    opacity: 0;
  }
}
.virus {
    display: inline-block;
    padding-bottom: 3em;
    width: 30%;
    color: #00407a; 
    text-align: center;
    font-weight: 500;
    font-size: 18px;
    padding: 0 1%;
}
.virus.second{
   margin: 0 1.5%;
}

.virus img {
    padding-bottom: 1em;
    width: 100%;
}

.tech-of-germagic h3{   
    margin-top: 5%;
    margin-bottom: 5%;
    color: #fff;
    text-transform: uppercase;
    font-size: 50px; 
}
.tech-of-germagic h3 .thin {
    font-weight: 100;
    font-size: 45px;
}

.tech-of-germagic p{
    margin-top: 0;
    margin-right: 40%;
    color: #fff;
    font-size: 18px; 
    line-height: 1.7em;
}
.tech-of-germagic .wrapper {
    position: relative;
    margin: 0 10%;
}
.tech-of-germagic .left {
    display: inline-block;
    width: 49%;
}
.tech-of-germagic .right {
    display: inline-block;
    margin-left: 4%;
    width: 46%;
    vertical-align: top;
}
.tech-of-germagic .left img {
    width: 100%;
    height: auto;
}

.tech-of-germagic{
    position: relative;
}
.tech-of-germagic:before{
    position: absolute;
    top: -10%;
    right: 0%;
    z-index: -1;
    width: 70%;
    height: 120%;
    background: #009bb1;
    content: "";
}
.tech-of-germagic {
    position: relative;
    margin-top: 5%;
    margin-bottom: 2%;
}

.tec-btn{
    position: absolute;
    top: calc(50% - 36px);
    right: 8%;
    display: none;    
    color: #fff;
    font-weight: bolder;
    font-size: 64px;
}

.in-house-test .wrapper {
    margin: 0 10%;
    padding-bottom: 5%;
}

.in-house-test h3 {   
    margin-top: 5%;
    margin-bottom: 5%;
    color: #fff;
    text-transform: uppercase;
    font-size: 50px; 
}

.in-house-test h3 .thin {
    font-weight: 100;
    font-size: 45px;
}
.in-house-test h3 .small {
    font-weight: 600;
    font-size: 20px;
}
.in-house-test .desc {
    display: inline-block;
    width: 95%;
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
}
.in-house-test .desc span.small {
    font-size: 18px;
}
.in-house-test  .down-arrow {
    font-size: 0;
}

.in-house-test .answer {
    position: relative;
    left: -2%;
    display: block;
    margin-top: 2%;
    padding-bottom: 1%;
    width: 97%;
    background: #fff;
    box-shadow: -20px 14px 20px 0px rgba(2, 2, 2, 0.2);
}

.in-house-test .column {
    padding-top: 2em;
    padding-bottom: 2em;
    border-bottom: solid 1px #fff;
    position: relative;
}

.in-house-test .answer p {
    margin-right: 3%;
    margin-left: 3%;
    padding-bottom: 1.5em;
    border-bottom: solid 1px #e4e4e4;
    color: #005fc6;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
}

.in-house-test .answer p:last-child {
    border-bottom: none;
}


.third-party-test .wrapper {
    margin: 0 10%;
    padding-bottom: 5%;
}

.third-party-test h3 {   
    margin-top: 5%;
    margin-bottom: 5%;
    color: #009fb0;
    text-transform: uppercase;
    font-size: 45px; 
}

.third-party-test h3 .thin {
    font-weight: 100;
    font-size: 40px;
}
.third-party-test h3 .small {
    font-weight: 600;
    font-size: 20px;
}

.third-party-test h4 {   
    margin-top: 5%;
    color: #009fb0;
    text-transform: uppercase;
}

.third-party-test h4 .small {
    font-weight: 600;
    font-size: 20px;
}

.third-party-test table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: -20px 14px 20px 0px rgba(2, 2, 2, 0.2);
}

.third-party-test td, th {
    padding: 8px;
    padding: 20px;
    text-align: left;
    text-transform: uppercase;
}

.third-party-test th {
    background-color: #003f77;
    color: #fff;
}
.third-party-test td {
    color: #005fc6;
    font-weight: 600;
}

.third-party-test td {
    border-bottom: 1px solid #dddddd;
}

.third-party-test td:first-child {
    width: 60%;
}

/*substantiation*/
.sub-item{
    float: left;
    box-sizing: border-box;
    margin-bottom: 36px;
    padding:36px;
    width: 50%;
    height: 700px;
    color:#fff;
}
.sub-item.w-3{
    width:33.33333%;
    padding:36px 25px;
}
.sub-item.w-3 .sub_left h1,.sub-item.w-3 .sub_right h1{
    position: relative;
    font-size: 36px;
    min-height: 82px;
}
.sub-item.w-3 .sub_left h1 span,
.sub-item.w-3 .sub_right h1 span{
    position: absolute;
    bottom: 0;
}
.sub-item.w-3 .sub_txt{
    min-height:192px;
}
/* .sub-item.w-3:first-child{
    padding-left:0px;
}
.sub-item.w-3:last-child{
    padding-right:0px;
} */
.sub_wrapper{margin: 0 10%;}
.sub_left{
    display: table;
    box-sizing: border-box;
    padding: 8%;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: url(../img/sub/left.png) no-repeat center center;
    background-size: cover;}
.sub_center{background: url(../img/sub/center.jpg) no-repeat center center;background-size: cover;}
.sub_inner{display: table-cell;vertical-align: middle;}
.sub_inner{vertical-align: baseline;padding-top:150px;}
.sub_left h1,.sub_right h1{margin: 0;font-size:48px;text-align: left;}
.sub_left h2,.sub_right h2{margin:100px 0 0;font-weight: normal;font-size:48px;}
.sub_left h6,.sub_right h6{font-size:16px;}
.sub_right{
    display: table;
    box-sizing: border-box;
    padding: 8%;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: url(../img/sub/right.png) no-repeat center center;
    background-size: cover;}
.sub_txt{
    overflow: hidden;
    height:100px;
    font-weight: normal;
    line-height: 24px;
}

.page-our-tachnology .sub_txt{
    height: auto;
}

.sub_learnmore{text-align: left;}
.sub_morebtn{
    display: inline-block;
    box-sizing: border-box;
    padding: 24px 36px;
    width: 251px;
    height: 77px;
    background: #00407a;
    color: #fff;
    font-size: 24px;
}
.sub_morebtn:hover{
    background: #fff;
    color:#00407a;
}

.downbtn-hide{display: none;}
.sub-title{
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-size: 0;
    }
.sub-title span{display: inline-block;
    font-size: 24px;vertical-align: middle;width: 80%;padding-right: 2%;box-sizing: border-box;
}
.download-btn{display: inline-block;vertical-align: middle;width: 20%;}
.download-btn a{float: right;border-radius: 36px;padding: 20px;font-size: 14px;}

:lang(zh-hk) .download-btn .btn,
:lang(zh-cn) .download-btn .btn,{
    padding: 20px 40px;
    text-align: center;
}

/*question*/
.top_title{top:50%;}
.banner_title{margin:0;font-size: 48pt;}
.que_answer{display: block;margin: 0;color:#0e82c7;font-size: 26px;line-height: 72px;}
.que_anstxt{color:#0e82c7;font-size: 16px;line-height: 24px;}
.que_ansbox{padding-left: 110px;}
.Q-A-content.question-content{
    box-sizing: border-box;
    padding: 5%;
    width: 100%;
    background: #fff;
    color: #2b7bd2;}
/*media*/
.media-hidebox{display: none;}
.media-hidebox ul{margin: 0;padding: 0;list-style: none;}
.mediaphonecard{margin-bottom: 2%;width:100%;background: #fff;list-style: none;font-size: 0;}
.mediaphonecard .media_txt{position: relative;bottom:auto;display: inline-block;vertical-align: middle;
    box-sizing: border-box;width: 70%;padding: 2% 2% 0 2%;font-size: 20px;}
.media_txt p {font-size: 16px;padding: 0;margin: 0;display: inline-block;vertical-align: top;text-align: left;
    width: 100%;}

.mediaphonecard .right{display: inline-block;width:30%;vertical-align: middle;}
.mediaphonecard img{    width: 100%;height: auto;}
.mediaphonecard .learn-more{text-align: left;margin-top: 2%;}


.media-bottombtn{text-align: center;}
.media-bottombox {
    background-size: cover;
    background-repeat: no-repeat;color: #fff;
    text-align: right;
    
}
.media-bottombox .wrapper {
    margin: 0 10%;
    padding: 100px 0;
}
.media-bottombox .right {
    display: inline-block;
    width: 50%;
}
.media-bottombox .left {
    display: inline-block;
    width: 49%;
}
.media-bottombox h3 {
    //margin-bottom: 20px;
    margin-bottom: 8%;
    color: #fff;
    text-transform: uppercase;
    font-size: 40px;
    text-align: center;
}
.media-bottombox h3 .thin {
    font-weight: 100;
    font-size: 36px;
}
.media-bottombox p{
    margin-bottom: 40px;
    width: 70%;
    color: #fff;
    font-size: 16px;
    line-height: 1.5em;
}

.media-bottombox .btn{
    background: #00397d;
    text-transform: uppercase;
}
.media-pic {    position: relative;/* width: 90%; */
/* background: #fff; */
/* box-shadow: -20px 14px 20px 0px rgba(136, 136, 136, 0.2); */    transition: all 1s;
}
/* .media-pic:hover{
   box-shadow: -20px 18px 20px 4px rgba(116, 114, 114, 0.1); */

.media-pic img{
    position: relative;
    width: auto;
    transition: all 0.3s;
}
.media-pic img.product-img-size {
    top: 40%;
    width: 90%;
    height: auto;
}
.media-pic img.product-img-size2 {
    top: 40%;
    width: auto;
    height: 110%;
}


.media-pic:before {
    position: absolute;
    right: -5%;
    bottom: -5%;
    z-index: -1;
    width: 90%;
    height: 100%;
    background: linear-gradient(-360deg, #0061c5,#009eb1);
    content: "";
    transition: all 0.7s;
}
.media-bottombtn{display: none;}
/* .media-pic:hover:before {
    right: -1%; */
/* bottom:-1%; */
.rotate-text.media-col{color:#009fb0;}
.media-right h3{color:#005fc6;}
.mediaBox p{color:#009fac!important;}
.media-brands {
    margin: 0 10%;
    padding: 50px 0;
    border-bottom: 1px solid #e3e3e3;
}
.media-brands h3{
    color: #004078;    
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
}
.media-brands p{
    margin: 0 auto;    
    width: 70%;
    color: #004078;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
}
.Q-A-content.Q-A-content-media{position:relative;
    padding:0;width: 100%;
}
.media-slider{
    position:relative;
    overflow:hidden;
}
.media_outer:after{
    content:'';
    position:absolute;
    height:100%;
    width:40%;
    top:0;
    right:0;
    display:block;
    background:blue;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0061c5+0,0061c5+100&0+0,0+0,1+66,1+100 */
background: -moz-linear-gradient(left, rgba(0,97,197,0) 0%, rgba(0,97,197,1) 66%, rgba(0,97,197,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,97,197,0) 0%,rgba(0,97,197,1) 66%,rgba(0,97,197,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,97,197,0) 0%,rgba(0,97,197,1) 66%,rgba(0,97,197,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000061c5', endColorstr='#0061c5',GradientType=1 ); /* IE6-9 */
    z-index:30;

}
.media-slider-holder{
    position:relative;
    z-index:20;
}
.media-slide.swiper-slide{
    position:relative;

}
.media-slide.swiper-slide img{
    position:relative;
    display:block;
    width:100%;
}
.media-slider-txt{
    display:none;
}

.media-slide.swiper-slide.swiper-slide-active .media-slider-txt{
    display:block;
}
.media-slider-pagination{    
    text-align: right;
    font-size: 40px;
    padding-right: 16%;
    padding-top: 2%;
    padding-bottom: 2%;
    color: #fff;
    position: relative;
    z-index: 100;
    width: 20%;
    margin-left: 64%;
}
.pagination-body.swiper-pagination-fraction{display: inline;padding:0 2%;}
.pagination-body.swiper-pagination-fraction .swiper-pagination-total{vertical-align: sub;}
.pagination-body.swiper-pagination-fraction .swiper-pagination-current{color:#004078;vertical-align: super;}
.media-slider-pagination .btn-prev{color:#004078;vertical-align: super;}
.media-slider-pagination .btn-next{color:#fff;vertical-align: sub;}

.Q-A-content.media-run{
    background:transparent;
}
/*
.slideBox {
    overflow:hidden;
    margin-right: -10px;
    margin-left: -10px;
}
.slideBox ul {
    position:relative;
    margin:0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    font-size: 0;
}
.slideBox ul li {
    position:relative;
    display:inline-block;
    box-sizing: border-box;
    padding: 0 10px;
    width:50%;
}
.slideBox ul li img{
    display: block;
    width:100%;
}
.spanBox {
    position:absolute;
    right:120px;
    bottom:-60px;
    width:300px;
    height:20px;
}
.spanBox span {
    position: absolute;
    display: none;
    margin-left:5px;
    width:32px;
    height:18px;
    color:#004078;
    text-align:center;
    font-weight: bold;
    font-size:24px;
    line-height:16px;
    cursor: pointer;
}
.spanBox_add{
    position: absolute;
    right: 90px;
    bottom: -70px;
    width: 300px;
    height: 20px;
}
.spanBox_add span {
    position: absolute;
    margin-left:5px;
    width: 60px;
    height:18px;
    color:#fff;
    text-align:center;
    font-weight: bold;
    font-size:24px;
    line-height:16px;
    cursor: pointer;
}

.slideBox .spanBox .active {
    display: block;
    color: #004078;
}
*/
.prev {
    position: absolute;
    right: 30%;
    bottom: -70px;
    float: left;
    color: #004078;
    font-size: 48px;
    cursor: pointer;
}
.next {
    position: absolute;
    right: 300px;
    bottom: -74px;
    float: right;
    width: 15px;
    height: 50px;
    color: #fff;
    font-size: 48px;
    cursor: pointer;
}
.media_outer:before{
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 40%;
    height: 100%;
    background: linear-gradient(-180deg, #0061c5,#009eb1);
    content: "";
    transition: all 0.7s;
}
.media_outer{position: relative;padding:5% 0 0;}

.media_txt{
    position: absolute;
    width: 100%;
    color: #009fb0;
    padding: 4% 0px;
}
.mediaBox .our-business-partners-block{margin:0;width: auto;}

.media-icon{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    text-align: center;
}
.media-icon img:first-child{padding-left:0;}
.media-icon img:last-child{padding-right:0;}
.media-icon img{
    padding: 1%;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
.media-center{text-align: center;width: 60%;margin:0 auto;}
.technologyBox .media-center p{text-align: center;margin-right:0;}
.media-center .learn-more{text-align: center;}
/*technology_b*/
.technology_b{background: #363636;padding-bottom: 2%;}
.technology_b .wrapper {
    margin: 0 10%;
}
.technology_b h3{
    margin: 0 ;
    padding: 5%;
    color: #68dbd6;
    text-align: center;
    text-transform: uppercase;
    font-size: 50px;
}
.technology_b h3 .thin {
    font-weight: 100;
    font-size: 45px;
}

.technology_b p{
    margin:5% 0;
    margin-top: 0;
    color: #fff; 
    text-align: center;
    font-weight: inherit;
    line-height: 1.7em;
}

.technology_b .inner-wrapper {
    margin:0 18%;
}
.technologyBox h3{   
    margin-top: 5%;
    margin-bottom: 5%;
    color: #004078;
    text-transform: uppercase;
    font-size: 50px; 
}
.technologyBox h3 .thin {
    font-weight: 100;
    font-size: 45px;
}

.technologyBox p{
    margin-top: 0;
    margin-right: 40%;
    color: #004078;
    font-size: 18px; 
    line-height: 1.7em;
}
.technologyBox .wrapper {
    position: relative;
    margin: 0 10%;
}
.technologyBox .left {
    display: inline-block;
    width: 49%;
}
.technologyBox .right {
    display: inline-block;
    margin-left: 4%;
    width: 46%;
    vertical-align: top;
}
.technologyBox .left img {
    width: 100%;
    height: auto;
}

.technologyBox{
    position: relative;
}
.technologyBox:before{
    position: absolute;
    top: -10%;
    right: 0%;
    z-index: -1;
    width: 70%;
    height: 120%;
    content: "";
}
.technologyBox {
    position: relative;
    margin-top: 5%;
    margin-bottom: 2%;
    display: none;
}

/*technology_c*/
.technology_c{background: #fff;padding-bottom: 2%;}
.technology_c .wrapper {
    margin: 0 10%;
}
.technology_c h3{
    margin: 0 ;
    padding: 5%;
    color: #00407a;
    text-align: center;
    text-transform: uppercase;
    font-size: 50px;
}
.technology_c h3 .thin {
    font-weight: 100;
    font-size: 45px;
}

.technology_c p{
    margin:5% 0;
    margin-top: 0;
    color: #00407a; 
    text-align: center;
    font-weight: inherit;
    line-height: 1.7em;
}

.technology_c .inner-wrapper {
    margin:0 18%;
}
.technology_c-eco-logo{
    padding-top:30px;
    width:auto;
    margin:auto;
    text-align: center;
}




.technology_c_style.third-party-test{
    background-color:#009fb0;
    padding-top:3em;
}
.technology_c_style.third-party-test h3,
.technology_c_style.third-party-test h4 {
    color:#fff;
}
.technology_c_style.third-party-test table {}
.technology_c_style.third-party-test td {
background-color:#fff;
}
/*contact us*/



.contact-outer .map-wrap {
    display: inline-block;
    width: 50%;
}
.contact-outer{
    text-align: center;
}
.contact-outer .contact-inner {
    display: inline-block;
    margin-right: 5%;
    margin-left: 5%;
    width: 70%;
    vertical-align: top;
    text-align: left;
    font-size: 0;
    padding: 2% 0;
}

.contact-outer .contact-inner h3{
    display: inline-block;
    color: #fff;
    text-align: left;
    font-weight: 100;
    font-size: 50px;
    margin:0;
    vertical-align: middle;
    width: 50%;
}

.contact-outer a{
  color: #fff;
}

.contact-outer .mobile-click{
      cursor: default;
}

.contact-inner .mini-form {
    position: relative;
    bottom: -50px;
    margin: 0 auto;
    width: 80%;
    background: #fff;
    box-shadow: -20px 14px 20px 0px rgba(2, 2, 2, 0.2);
     padding-bottom: 50px;
}
.contact-inner .mini-form .wrapper{
    background: #fff;
}
.mini-form input[type="text"] {
    display: block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    border: none;
    border-bottom: solid 1px #005fc6;
    font-size: 16px;
}
.mini-form textarea {
    display: block;
    box-sizing: border-box;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 10px;
    width: 100%;
    height: 100px;
    font-size: 16px;
    border: solid 1px #005fc6;
}

.contact-inner .mini-form .wrapper {
    display: inline-block;
    margin-left: 5%;
    padding-top: 5%;
    width: 60%;
}
.contacts_news{
    width: 50%;
    vertical-align: middle;
    display: inline-block;
    color: #fff;
    line-height: 36px;    
    font-size: 16px;
}
.contact_center h3{display: inline-block;width:49%;text-align: center;}
.contact_center p{vertical-align: middle;margin:0;display: inline-block;width:49%;color:#004078;text-align: left;font-size: 24px;line-height: 40px;}




/*business*/
.our-business-partners .swiper-slide{display: inline;}

/*phone*/
#main-menu{position: absolute;z-index: 99;display: none;width: 100%;height: 100%;background: #fff;overflow-y: auto;}
#lang-menu{position: absolute;z-index: 101;display: none;width: 100%;height: 100%;background: #fff;}
.mob-nav__link{    
    position: relative;
    display: block;
    margin: 0 auto 10px;
    padding: 8px 3%;
    width: 100%;
    color: #000;
    text-align: left;
    font-weight: 800;
    font-size: 30px;
    font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, Arial, sans-serif;
}

.mob-nav {
    position: fixed;
    top: 0;
    z-index: 15;
    overflow: hidden;
    /* padding-top: 120px; */
    width: 100%;
    height: 100%;
    background: #FFF;
    transition: 0.3s;
}

.mob-nav:after,
.mob-nav:before {
    content: "";
    display: block;
    height:12%;
    width:100%;
}
.mob-nav__link:hover {
    color: #004078;
    opacity: 1;
}
.media_txt .learn-more{margin-top: 2%;}
.btn-lang {
    position: absolute;
    top: 50%;
    right: calc(120px + 3%);
    z-index: 10;
    display: none;
    padding: 0;
    width: 20px;
    height: 30px;
    background: url() no-repeat center center;
    background-image: url(../img/header/language.png);
    background-size: 100%;
    vertical-align: middle;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    -ms-transform: translateY(50%);
}
.sec-article__head:after {
    position: absolute;
    top: 9em;
    z-index: -1;
    display: block;
    width: 90%;
    height: 40px;
    max-width: 420px;
    background: #00aab5;
    content: '';
}
.btn-menu{
    position: absolute;
    top: 50%;
    right: 3%;
    z-index: 100;
    display: none;
    margin-top: -6px;
    margin-left: 15px;
    padding: 0;
    width: 30px;
    height: 18px;
    vertical-align: middle;
    transition: 0.3s;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.btn-menu span{    
    position: absolute;
    right: 40px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}
.btn-menu .btn-menu__line, .btn-menu:before, .btn-menu:after {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border: 0;
    background: #fff;
    content: "";
    transition: transform 0.5s;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -ms-transform-origin: center center;
}
.btn-menu--close.is-active:before,.btn-menu.is-active:before{
    transform: rotate(45deg);
}
.btn-menu.btn-menu--close:after,.btn-menu.is-active:after {
    transform: rotate(-45deg);
}
.btn-menu.btn-menu--close:before,.btn-menu.btn-menu--close:after,.btn-menu.is-active:before, .btn-menu.is-active:after {
    top: 50%;
    margin-top: -1px;
    background: #fff;
    background: #000;
}
.btn-menu.is-active .btn-menu__line{display: none;}
.btn-menu:after {
    bottom: 0;
}

.btn-menu__line {
    top: 50%;
    display: none;
    margin-top: -1px;
    background: #000;
}
.btn-location{
    position: absolute;
    top: 50%;
    right: calc(160px + 3%);
    z-index: 10;
    display: none;
    padding: 0;
    width: 16px;
    height: 30px;
    background: url() no-repeat center center;
    background-image: url(../img/header/Location.png);
    background-size: 100%;
    vertical-align: middle;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    -ms-transform: translateY(50%);
}
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      text-align: center;
      font-size: 18px;
      /* Center slide text vertically */
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

/***** START media coverage slide ******/

.media-coverage-slider{
    position:relative;
    overflow:hidden;
}

.media-coverage-holder{
    position:relative;
    z-index:20;
}

.media-coverage__item  .item-slide-holder{
    width: 100%;
}
.media-coverage__item  .item-slide-holder .item-slide{
    position:relative;
    width: 100%;
    font-size: 0;
    margin-bottom: 5%;
}
.media-coverage__item  .item-slide .media-coverage__item-img{
    display: inline-block;
    vertical-align: top;
    width:45%;
}
.media-coverage__item  .item-slide .media-coverage__item-txt{
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding: 0 0 0 5%;
    text-align: left;
}

.media-coverage__item-img img{
    width: 100%;
    margin: 0 auto;
}

.media-coverage__item-txt .news-title{
    font-size: 16px;
    color: #fff;
    
}

.media-coverage-slider-pagination {
    
    left: 50%;
    transform: translateX(-50%);
}

.media-coverage-slider-pagination .swiper-pagination-bullet{
    margin-right: 5px;
}


.pagination-body.swiper-pagination-fraction{display: inline;padding:0 2%;}
.pagination-body.swiper-pagination-fraction .swiper-pagination-total{vertical-align: sub;}
.pagination-body.swiper-pagination-fraction .swiper-pagination-current{color:#004078;vertical-align: super;}
.media-slider-pagination .btn-prev{color:#004078;vertical-align: super;}
.media-slider-pagination .btn-next{color:#fff;vertical-align: sub;}

/***** END media coverage slide *****/

/***** START press-release-coverage *****/
.media-coverage *{
    box-sizing: border-box;
}
.media-coverage .media-coverage_holder{
    margin: 80px 0;
}

.media-coverage .media-coverage__item{
    width: 100%;
    font-size: 0;
}

.media-coverage .media-coverage__left{
    width: 30%;
    vertical-align: top;
    display: inline-block;
}

.media-coverage .media-coverage__left .img-holder{
    width: 90%;
    margin: 0 auto;
}

.media-coverage .media-coverage__left .img-holder .img-press-release{
    width: 100%;
    margin: 0 auto;
}

.media-coverage .media-coverage__right{
    width: 70%;
    vertical-align: top;
    display: inline-block;
    padding-left: 20px;
}

.media-coverage .media-coverage__right .news-title-holder{
    vertical-align: middle;
    display: inline-block;
}

.media-coverage .media-coverage__right .news-title-holder .news-logo-holder{
    width: 10%;
    display: inline-block;
    vertical-align: top;
}

.media-coverage .media-coverage__right .news-title-holder .news-logo-holder .img-news-logo{
    width: 100%;
    margin: 0 auto;
}

.media-coverage .media-coverage__right .news-title-holder .news-title{
    vertical-align: top;
    display: inline-block;
    color: #005fc6;
    font-size: 28px;
    width: 90%;
    padding-left: 15px;
    margin: 0;
}

.media-coverage .media-coverage__right .news-title-holder .news-date{
    color: #336693;
    font-size: 16px;
    padding-left: 12%;
    margin: 0;
}

.media-coverage .media-coverage__right .news-content p{
    display: block;
    color: #336693;
    font-size: 14px;
    line-height: 1.5em;
}

.media-coverage .media-coverage__right .btn-news-more{
   color: #22598a;
   font-size: 16px;
   text-align: right;
   text-transform: uppercase;
   font-weight: bold;
}

.media-coverage .media-coverage__pagination{
   max-width: 420px;
   width: 60%;
   margin: 80px auto 0 auto;
}

.media-coverage .media-coverage__pagination .pagination_arrow{
   display: inline-block;
   vertical-align: middle;
   font-weight: bold;
   color: #009fb0;
   border: 1px solid #009fb0;
   padding: 8px 16px;
}

.media-coverage .media-coverage__pagination .pagination-holder{
   display: inline-block;
   vertical-align: middle;
   margin: 0 20px;
}

.media-coverage .media-coverage__pagination .pagination{
    display: inline-block;
    vertical-align: middle;    
    padding: 8px 16px;
    font-weight: bold;
    color: #009fb0;	
}

.media-coverage .media-coverage__pagination .pagination_arrow:hover,
.media-coverage .media-coverage__pagination .pagination:hover,
.media-coverage .media-coverage__pagination .pagination.active
{
    background: #009fb0;
    color: #fff;
}


/***** END press-release-coverage *****/



                                            /*phone*/

@media screen and (max-width: 1920px){
    header .left{width:16%;}
    header .right{top: 0px;width:84%;}
    header span,header span a{padding: 0 4px;font-size: 13px;}
    .lang a{font-size: 16px;}
}
@media screen and (max-width: 1307px){
    header .wrapper{margin:2%;}
    header .left{width:12%;}
    header .right{top: 0px;width:88%;}
    header span,header span a{padding: 0px 2px;font-size: 11px;}
    .lang a{font-size: 12px;}
}
@media screen and (max-width: 1200px){
    header .wrapper{margin:2%;}
    header .left{width:12%;}
    header .right{top: 0px;width:88%;}
    header span,header span a{padding: 0px 2px;font-size: 11px;}
    .lang a{font-size: 12px;}
    .sub_wrapper{margin:0;}
    .sub_left,.sub_right{padding:8%;}
}
@media screen and (max-width: 991px){
    .show-in-tab{
       display: block;
    }


    /*index*/
    .home-banner  .wrapper br{display: none;}
    .left.index-logo{display: none;}
    header .wrapper .left{padding-top: 10px;width: 30%;}
    .home-banner .wrapper{width:90%;}
    .home-banner .wrapper .home-banner__picture{width:100%;margin-bottom: 0;}
    .home-banner h4{
         font-size: 12px; 	 
    }
    
    /****** our-technology *******/
    .our-technology .wrapper{margin:0;padding:30px 0;}
    .our-technology .right{width:100%;text-align: center;}
    .our-technology .right .bottom-left{box-sizing: border-box;padding: 4%;width: 100%;text-align: center;}
    h3.rotate-text{position: relative;right: 0;float: none;display: block;text-align: center;font-size: 30px;transform: none;}
    .our-technology .bottom-right{width: 40%;}
    .our-technology .bottom-right a.btn{
         float: none;
	 padding: 20px 20px;
    }
    header .right{display: none;}
    sup{top: -0.8em;}
    
    .brands h3{font-weight: bolder;font-size: 24px;}
    
    .our-business-partners .wrapper{margin: 0;width: 100%;}
    .our-business-partners h3 .thin{font-size: 36px;}
    .our-business-partners h3{font-size: 40px;}
    .our-business-partners-block{width: 70%;}
    .our-substantiation .wrapper{margin:0;width: 100%;text-align: center;}
    .our-substantiation .right{width: 100%;}
    .our-substantiation p{box-sizing: border-box;padding: 0 36px;width: 100%;}
    
    
    .Q-A-content .title{
        width: 20%;
        padding-top: 4%;
	top: 0;
	display: inline-block;
	vertical-align: middle;
	font-size: 36px;
    }
    
    :lang(zh-hk) .Q-A-content .title, 
    :lang(zh-cn) .Q-A-content .title{
        width: 20%;
    }
    
    .Q-A-content .down-arrow{
        position: relative;
	text-align: center;
	margin: 0px auto;
	float: none;
        margin: 0 auto;
        padding: 0;
        text-align: center;
	right: 0;
    }
    .Q-A-content .column{padding:1em 0;}
    .answer{padding: 0;}
    .map-contact-us .map-wrap{width: 100%;}
    .map-contact-us .contact-us{
        margin: 0;    
        width: 100%;
        text-align: center;
    }
    .map-contact-us .contact-us h3{    margin: 0.5em 0;font-size: 32px;}
    .map-contact-us .contact-us h3 b{font-size: 42px;}
    .contact-us .mini-form{
        bottom:0;
        float: none;
        margin: 0 auto;
        margin-bottom: 50px;    
        width: 90%;
        text-align: -webkit-center;
	padding-bottom: 0;
    }
    .mini-form input[type="text"]{
        text-align: center;
    }
    .mini-form-submit{
        float: none;    
        display: block;
        width: 100%;
        height: 15%;
	bottom: -1px;
    }
    .mini-form textarea{text-align: center;}
    .contact-us .mini-form .wrapper{
        margin: 0;
	width: 90%;
    	padding-bottom: 110px;
    }
    footer .right{
        float: none;
        display: block;
        margin-top: 60px;
        width: 100%;
        text-align: center;
    }
    footer .germagic-logo{
       max-width: 200px;
    }
    footer .share-logo-container a{
        padding: 2%;
        line-height: 80px;
    }
    footer .left{
        width: 100%;
        text-align: center;
        
    }
    footer .wrapper .left .addrRow .addrColumn{
        width:100%;
        padding-bottom:25px;
    }

    .copyright{text-align: center;}

    /*about*/
    .about-germagic .wrapper,.technologyBox .wrapper{margin:0;text-align: center;}
    .banner .wrapper h3{font-size: 48px;}
    .banner_title{font-size: 36pt;}
    .about-germagic .left{
        position: relative;
        top: auto;
        display: block;    
        width: 100%;
        text-align: center;
        transform: none;
    }
    .about-img{display: block;width:100%;}
    .about-germagic .right{display: none;}
    .about-germagic p{padding: 0 36px;}

    /*business*/
    .our-business-partners .swiper-slide{display: flex;}

    /*technology-a*/
    .our-tech-description .wrapper{margin:0;text-align: center;}
    .our-tech-description .inner-wrapper,.technology_b .inner-wrapper,.technology_c .inner-wrapper{margin: 0 2%;}
    .virus{width: 30%;}
    .tech-of-germagic .left,.technologyBox .left{display: none;}
    .tech-of-germagic:before{top: 0;width: 100%;}
    .tech-of-germagic .wrapper,.in-house-test .wrapper,.technology_b .wrapper,.technology_c .wrapper{margin:0;text-align: center;}
    .tech-of-germagic .right,.technologyBox .right{margin: 0;width: 100%;text-align: center;}
    .tech-of-germagic p,.technologyBox p{
        box-sizing: border-box;
        margin: 0;
        padding: 4%;    
        width: 100%;
    }
    .tech-of-germagic h3 .thin{
       display: block;
    }
    .in-house-test h3{
    	 margin-bottom: 3%;
    }
    .in-house-test h3 .small{
       display: block;
       margin-top: 20px;
    }
    .in-house-test .answer{
        left: 0;
        box-sizing: border-box;
        margin: 2% auto 0;
        padding: 0 2%;
        width: 92%;
    }
    .in-house-test .answer p{
    margin: 0;padding: 0;
    line-height: 40px;}
    .third-party-test h3 .small{
        display: block;
	margin-top: 20px;
    }
    .third-party-test .wrapper{text-align: center;}/*
    .technology_b .graph img{width: 100%;max-width: none;}
    .technology_b .graph img.graph3{width: 100%;position: relative;}
    .technology_b .graph1,.technology_b .graph2{display: none;}*/
    .tec-title{color:#004078;}
    .sub_wrapper{margin:0;}
    .sub-item{margin-bottom:0;padding: 24px 36px 0;width: 100%;height: auto;}
    .sub-item.w-3{margin-bottom:0;padding: 24px 36px 0;width: 100%;height: auto;}
    .sub_left h2, .sub_right h2{margin:0;font-size: 36px;}
    .sub_left,.sub_right{ position: relative;padding:8%;}
    .sub_inner{display: none; width: 80%;}
    .sub_left h1, .sub_right h1{font-size: 32px;}
    .sub_left h6, .sub_right h6{display: none;}
    .sub_inner .btn{display: none;}
    .tec-bottom{margin-top:24px;}
    .tec-btn{display: block;}
    
    .btn-our-technology h1,
    .btn-our-substantiation h1{
    	color: #fff;
    }
    .down-arrow.floated-fix {
        right: 10px;
    }
    .in-house-test .down-arrow.floated-fix {
        right: 10px;
    }

    /*question*/
    .Q-A-content .desc{
    	width: 70%;
    }
    .question-content .que-btn.down-arrow{
         position: relative;
	 display: block;
  	 display: inline-block;
	 vertical-align: middle;
         //width: 5%;	 
    }

    /*media*/
    .media_outer:before{width: 100%;}
    .media-col.rotate-text{color:#fff;}
    .Q-A-content.media-run{display: none;}
    .media-hidebox{display: block;}
    .media-brands p{display: none;}
    .technologyBox.mediaBox .left{display: block;width:100%;}
    .media-pic:before{right: 0;width:90%;}
    .mediaBox .our-business-partners-block{width:100%;}
    .technologyBox h3{margin-top: 15%;margin-bottom: 0;padding: 0 4%;text-align: left;font-size: 36px;}
    .right.media-right p{padding:2% 4%;text-align: left;}
    .media-learnmore{display: none;}
    .media-bottombox .wrapper{margin:0;text-align: center;}
    .media-bottombox .right{width:100%;}
    .media-brands h3{margin:2%;font-size: 28px;}
    .media_outer:after{display: none;}
    .media-icon img{max-height: 36px;}
    .media-bottombtn{display: block; margin-top: 5%;}
    .media-center{width: 100%;}
    .technologyBox .media-center h3{text-align: left;}
    .technologyBox .media-center p{text-align: left;}
    
    
    
    /*contact us*/
    .contact-outer .contact-inner h3{display: block;width: 100%;text-align: center;}
    .full-gradient.message-contact .contact-inner{margin:0;padding:4% 0 0;width: 100%;}
    .full-gradient.message-contact .contact-inner .mini-form .wrapper{width: 90%;}
    .contact_center p{display: block;width: 100%;text-align: center;}
    .contacts_news{display: block;padding: 0;text-align: center;margin: 0 auto;}
    .full-gradient.message-contact .contact-inner .mini-form {padding-bottom: 100px;}

    /*sub_download*/
    .download-btn{display: none;}
    .downbtn-hide{display: inline-block;width: 20%;vertical-align: middle;}
    .sub-title span{margin: 0;width: 80%;vertical-align: middle;
    font-weight: bolder;    font-size: 18px;}
    .downbtn.btn{
        float: right;
        padding: 4px 12px;
        border-radius: 50%;
        font-size: 20px;
    }
    .sub-title{font-size: 0;}




    #main-menu,#lang-menu{display: block;}
    .mob-nav {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        -ms-transform: translateY(-100%);
    }
    .btn-menu {
        top: 35px;
        bottom: auto;
        display: inline-block;
        margin-top: 0;
    }
    .btn-lang{
        top: 6px;
        display: block;
	right: 11%;
    }
    .btn-location{
        top: 6px;
        display: block;
	right: 17%;
    }
    
    .sec-article__head:after {
        height: 12px;
    	max-width: 300px;
    	top: 10%;
    }
}



@media screen and (max-width: 768px){
    .banner_title{
        font-size: 24pt;
        padding: 4%;
    }
    .media-icon img{max-height: 20px;}

    .media-coverage .media-coverage__item{
        padding: 0 30px;
    }
    .home-banner .wrapper br.show-in-mobile{
    	display: block;
    }
    
    .Q-A-content .title{
       font-size: 24px;
       width: 23%;
    }
    :lang(zh-hk) .Q-A-content .title,
    :lang(zh-cn) .Q-A-content .title {
        width: 23%;
    }
    
    .Q-A-content .desc,
    .question-content .que-btn.down-arrow{
    	vertical-align: middle;
    }
    
    footer .germagic-logo {
        max-width: 200px;
    }
    
}

@media screen and (max-width: 640px){
    .show-in-mobile{
    	display: block;
    }
    .hide-in-mobile{
         display: none;
    }
    
    .Q-A-content .title{
    	width: 18%;
    }
    :lang(zh-hk) .Q-A-content .title, 
    :lang(zh-cn) .Q-A-content .title {
        width: 18%;
    }
    
    .media-coverage__item .item-slide .media-coverage__item-img{
    	width: 90%;
        padding: 0 20px;
    }
    
    .media-coverage__item .item-slide .media-coverage__item-txt{
        width: 100%;
	padding: 20px;
    }

    .media-coverage .media-coverage__left,
    .media-coverage .media-coverage__right{
        width: 100%;
        margin-bottom: 5%;
    }
    .media-coverage .media-coverage__right .news-title-holder .news-logo-holder{
    	width: 20%;
	display:block;
    }
    .media-coverage .media-coverage__right .news-title-holder .news-title{
        width: 100%;
	padding-left: 0;
    }
    .media-coverage .media-coverage__right .news-title-holder .news-date{
           margin-top: 10px;
           padding-left: 0;
    }
    
    .contact-outer .contact-inner h3{
    	 font-size: 24px;
         padding-top: 20px;
    	 margin-bottom: 2%;
    }
    
    .contact-outer .mobile-click{
      cursor: pointer;
    }
}

@media screen and (max-width: 480px){
    .hide-in-mobile{
       display: none;
    }
    /*public*/
    .home-banner,.home-banner.index-banner{
       height: 350px;
    }
    .sec-article__head:after{
        top: 5%;
	    height: 10px;
        max-width: 200px;
    }
    header .wrapper {
	    margin: 2% 3% 2% 5%;
     }
    .mob-nav{padding: 0px;}
    .mob-nav__link,
    .small-link.mob-nav__link {
       font-size: 16px;
    }
    .btn-location{top: -1%;display: inline-block;right: 30%;width: 12px;}
    .btn-lang{top: -1%;display: inline-block;right: 18%;width: 16px;}
    .btn-menu span{font-size: 12px;right: 120%;}
    .btn-menu{top: 4%;width: 8%;height: 12px;font-size: 16px;margin-left: 2%;vertical-align: middle;}
    footer .germagic-logo {
    	width: 60%;
    }
    footer .share-logo {
       width: 130px;
    }
    footer .logo {
       width: 75%;
       margin: 0 auto;
    }
    footer .logo img{
      width: 90%;
    }
    footer .address,footer .contacts,.copyright{font-size: 12px;}
    .banner_title{font-size: 16pt;}
    a.btn{
          font-size: 12px;
    }
    
    
    /*index*/
    .home-banner .wrapper .home-banner__picture {
	    width: 65%;
	    margin-bottom: 0;
    }
    .our-technology .wrapper {
    	padding: 0 0 30px 0;
    }
    .brands .wrapper {
	 margin: 0 5%;
     }
    .brands h3 .thin, 
    .our-substantiation h3 .thin,
    .our-business-partners h3 .thin{
        font-size: 20px;
    }
    .our-substantiation h3,
    .our-business-partners h3{    
        margin: 0;
	padding: 4% 0;
	font-size: 24px;
	width: 100%;
	display: inline-block;
    }
    .our-substantiation .btn{
        font-size: 12px;
    }
    .our-substantiation .wrapper {
        padding: 50px 0;
    }
    .Q-A-content .column{font-size: 0;}
    .Q-A-content .title{
    	font-size: 24px;
	padding-top: 4%;
	top: 0;
	display: inline-block;
	vertical-align: top;
    	width: 18%;
    }
    .Q-A-content .desc{
       font-size: 16px;
       width: 73%;
       vertical-align: bottom;
     }
     .down-arrow{
    	right: 0;
	vertical-align: bottom;   
    }
    #map{height: 200px;}
    .intro .wrapper{padding:0;}
    
    .map-contact-us .contact-us h3,
    .map-contact-us .contact-us h3 b{ 
        font-size: 20px;
    }
    
    /*about*/
    .about-germagic h3{font-size: 24px;margin: 8%;}

    /*sub_card*/
    .tec-btn{width: 20%;font-size: 32px;top: calc(50% - 18.18px);right:4%;}
    .sub_left h1, .sub_right h1{font-size: 20px;}
    .sub_left h2, .sub_right h2{font-size: 16px;}
    
    /*contact us*/
    .contact-outer .contact-inner.contact_center{padding: 8% 0;}
    .contact-outer .contact-inner.contact_center h3{padding-top: 0;}
    .contact-inner.contact_center p{font-size: 16px;line-height: 24px;}
    .contact-outer .contact-inner h3{font-size: 24px;padding-top: 20px;}
    .contacts_news{line-height: 24px;padding: 0 2%;width: 100%;box-sizing: border-box;}
    .contact-inner .mini-form{bottom: -24px;}
    .full-gradient.message-contact .contact-inner{padding:0;}
    
    /*media*/
    .mediaphonecard{font-size: 0;}
    .mediaphonecard .media_txt{width: 70%;padding: 2% 2% 0 2%;}
    .media_txt p {font-size: 12px;padding: 0;margin: 0;display: inline-block;vertical-align: top;}
    .mediaphonecard .learn-more{margin: 0;width: 100%;font-size: 12px;margin-top: 2%;}
    .mediaphonecard .right{width: 30%;vertical-align: middle;}
    .media-pic:before{display: none;}
    .media-brands h3{font-size: 20px;}
    .media-brands{padding:5% 4%;}
    .media-bottombtn .btn,.media-bottombox .btn{font-size: 12px;padding: 8px;}
    h3.rotate-text{font-size: 20px;padding:4% 0;}
    .technologyBox h3{margin-top: 10%;font-size: 24px;}
    .tech-of-germagic p,.technologyBox p{font-size: 16px;}
    .media-bottombox .wrapper{padding: 4%;}
    .media-bottombox h3 .thin{font-size: 24px;}
    .media-bottombox h3{font-size: 24px;}
    .media-bottombox p{margin:2%;}
    .Q-A.media_inner{padding-bottom: 8%;}
    .media-bottombox p{width: 100%;}
    .que_answerP{text-align: center;}

    /*sub_report*/
    .sub-title{padding:2% 0;}
    .sub-title span{font-size: 12px;}
    .Q-A .wrapper{margin-top:0;}

    /*business*/
    .our-business-partners .wrapper{padding:0;}
    .our-business-partners .learn-more{margin-top: 16%;}
    .our-business-partners-block{margin-bottom:4%;}

    /*ger-a*/
    .technologyBox h3 .thin,.our-tech-description h3 .thin,.tech-of-germagic h3 .thin,.in-house-test h3 .thin,.third-party-test h3 .thin,.technology_b h3 .thin,.technology_c h3 .thin{text-align: center;font-size: 24px;}
    .technologyBox h3,.our-tech-description h3,.tech-of-germagic h3,.in-house-test h3,.third-party-test h3,.technology_b h3,.technology_c h3{font-size: 24px;margin:0;padding: 8% 0;text-align: center;}
    
    .our-tech-description p{font-size: 14px;}
    .our-tech-description .graph,.technology_b .graph,.technology_c .graph{display: none;}
    .virus{padding-bottom: 0;}
    .in-house-test .column{padding:1em 0;}
    .third-party-test .wrapper{margin: 0 4%;}
    .third-party-test h3 .small{font-size: 16px;}
    
    /*our-technology-a*/
    .our-tech-description .inner-wrapper, .technology_b .inner-wrapper, .technology_c .inner-wrapper {
	    margin: 0 4%;
    }
    
    
}

@media screen and (max-width: 400px){
       .Q-A-content .title {
          font-size: 20px;
       }
	.down-arrow.floated-fix{
	    right: 0;
	}
}



.about-GBT h3{
    color: #00407a;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 40px;
}
.about-GBT p{
    color: #00407a;
    font-size: 16px;
    line-height: 1.5em;
}
.about-GBT .left {
    position: absolute;
    top: 50%;
    display: inline-block;
    margin-right: 5%;
    width: 30%;
    transform: translateY(-50%);
}


.about-GBT .right {
    float: right;
    display: inline-block;
    margin: 5% 0;
    width: 64%;
    text-align: right;
}
.about-GBT .wrapper {
    position: relative;
    margin-left: 5%;
}


.intro {
    box-sizing: border-box;
    padding: 5%;
    width: 100%;
    background: #fff;
    color: #005fc6;}
	
	
.mini-form select {
  
    font-size: 16px;
    border: solid 1px #005fc6;
}


/* Add by Gary Mok on 05 Mar 2020 */
.adver1 .wrapper {
    margin: 0 0;
    padding: 10px 0;
	background-color: white;
}
.adver1 .wrapper p {
    color: #004078;
    text-align: center;
    font-size: 16px;
    line-height: 1.5em;
}



.adver2 .wrapper {
    margin: 0 0;
    padding: 10px 0;
	background-color: #F2F515;
}
.adver2 .wrapper p {
    color: #004078;
    text-align: center;
    font-size: 16px;
    line-height: 1.5em;
}