@charset 'utf-8';
/* colors
hot pink : #ff0078;
*/

/*-overwrite-*/
.overview-wrapper {
    width: 100%;
}
#overview #sectionOverview {
    width: 100%;
    padding: 0;
}
#overview, #gallery, #review, #support, #features, #wheretobuy {
    margin-top: 0px;
}
#overview #sectionOverview {
    padding: 0px;
}
body.noscroll{
    overflow: hidden;
}
#hd{
    /*width: 100% !important;
    margin-left: 0 !important;*/
}
#hd p{
    font-family: 'Roboto','TTNormsProRegular','Poppins',  sans-serif;
    font-weight: normal;
    line-height: 1.6em;
    font-size: 16px;
}
#hd ul{
    font-family: 'Roboto','TTNormsProRegular','Poppins',  sans-serif;
    font-weight: normal;
    line-height: 1.6em;
    font-size: 16px;
}



/*--------------BE27ACSBK-----------------*/

/*@font-face {
    font-family: 'MyriadPro';
    src:url('../fonts/MyriadPro-Light.otf');
    font-weight: normal;
    font-style: normal;
}*/
@font-face {
    font-family: 'Roboto';
    src:url('../fonts/Roboto-Light.otf');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'TT Norms Pro Regular';
    src:url('../fonts/TT-Norms-Pro-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TT Norms Pro Normal';
    src:url('../fonts/TT-Norms-Pro-Normal.otf');
    font-weight: normal;
    font-style: normal;
}

#hd{
    font-family: 'TTNormsProRegular','Roboto', 'Open Sans', sans-serif;
}
#hd .section-title{
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
    font-size: 2.5em;
    color: #000;
    line-height: 1.3em;
    font-weight: normal;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    position: relative;
}
#hd .section-title:before{
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background: #28abe5;
    position: absolute;
    left: calc(50% - 50px);
    top: -20px;
}
#hd .section-p{
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 1.2em;
    color: #000;
    line-height: 1.6em;
    font-weight: normal;
}
#hd .section-p a,#hd .section-p a:visited{
    
    color:#006ce1 !important;

}
#hd .section-p a:active {
    border-bottom: #006ce1 solid 1pt;
    transition: all .1s ease-in-out;
}

#hd .note{
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 0.9em;
    color: #aaa;
    line-height: 1.3em;
    font-weight: normal;
}
@media screen and (min-width: 1800px) {    
}
@media screen and (max-width: 1400px) {    
#hd .section-title{
    font-size: 2em;
}
}
@media screen and (max-width: 550px) {    
#hd .section-title{
    font-size: 1.5em;
}
#hd .section-p{
    font-size: 1em;
}
}



/*-main-*/
#hd #be-main{
    background: url('../img/main-bg.jpg') center top no-repeat;
    background-size: 100% auto;
    margin: 0 auto;
}
#hd #be-main .inner{
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-main .inner .text{
    padding-top: 100px;
    min-height: 65vw;
}
#hd #be-main .inner .text h1{
    text-align: center;
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
    font-size: 2.5em;
    color: #25aae5;
    line-height: 1.2em;
    font-weight: normal;
    position: relative;
    z-index: 2;
    margin-bottom: 0.5em;
}
#hd #be-main .inner .text h2{
    text-align: center;
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
    font-size: 3.5em;
    color: #000;
    line-height: 1.2em;
    font-weight: normal;
    position: relative;
    z-index: 2;
}
#hd #be-main .inner .text p{
    max-width: 1000px;
    margin: 0 auto;
}
#hd #be-main .inner .text .image{
    position: relative;
    z-index: 1;
    max-width: 80%;
    /*margin: -30px auto 40px auto;*/
    margin: auto auto 40px auto;

}
#hd #be-main .inner .text .image img{
    display: block;
    margin: 0 auto;
}

#hd #be-main .inner h3{
    color: #25aae5;
    font-size: 2em;
    margin-top: 100px;
    text-align: center;
    font-weight: normal;
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
}
#hd #be-main .inner .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-bottom: 250px;
}
#hd #be-main .inner .list .entry{
    width: 25%;
}
#hd #be-main .inner .list .entry .caption{
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
    padding-top: 15px;
    font-size: 1.4em;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    font-weight: normal;
}

@media screen and (min-width: 2300px) {    
#hd #be-main{
    background-size: 2000px auto;
}
#hd #be-main .inner .text{
    min-height: 1400px;
}
}

@media screen and (max-width: 1400px) {    
#hd #be-main .inner .text{
    padding-top: 50px;
    min-height: inherit;
}
#hd #be-main .inner .text h1{
    font-size: 2em;
}
#hd #be-main .inner .text h2{
    font-size: 3em;
}
#hd #be-main .inner .text .image{
    margin-top: -30px;
}
}
@media screen and (max-width: 1024px) {    
#hd #be-main .inner .list .entry .caption{
    font-size: 1em;
}
}

@media screen and (max-width: 768px) {    
#hd #be-main .inner{
    padding: 0 20px;
}
#hd #be-main .inner .text h1{
    font-size: 1.5em;
}
#hd #be-main .inner .text h2{
    font-size: 2em;
}
#hd #be-main .inner .text .image{
    margin-top: 0px;
    max-width: 100%;
}
}

@media screen and (max-width: 500px) {    
#hd #be-main .inner .text h1{
    font-size: 1.2em;
}
#hd #be-main .inner .text h2{
    font-size: 1.7em;
}
#hd #be-main .inner .list{
    margin-top: 40px;
}
#hd #be-main .inner .list .entry{
    width: 50%;
    margin-bottom: 30px;
}
}






/*-adjust-*/
#hd #be-adjust{
    background: #fff;
    padding-bottom: 100px;
}
#hd #be-adjust .inner{
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-adjust .text{
    text-align: center;
}
#hd #be-adjust .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
}
#hd #be-adjust .list .entry{
    width: 33.33%;
    box-sizing: border-box;
    padding: 0 5px;
}

@media screen and (max-width: 768px) {    
#hd #be-adjust .inner{
    padding: 0 20px;
}
}





/*-exposure-*/
#hd #be-exposure{
    background: #252525;
    color: #fff;
    padding-bottom: 100px;
}
#hd #be-exposure .inner{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-exposure .text{
    text-align: center;
    padding-top: 150px;
    max-width: 800px;
    margin: 0 auto;
}
#hd #be-exposure .section-title{
    color: #fff;
}
#hd #be-exposure .section-p{
    color: #fff;
}
#hd #be-exposure .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
    margin-bottom: 50px;
}
#hd #be-exposure .list .entry{
    width: 50%;
}
#hd #be-exposure .list .entry .caption{
    font-size: 1.4em;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    font-weight: normal;
    color: #aaa;
    padding: 15px 5px 0 5px;
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
}
#hd #be-exposure .list .entry:first-child .caption{
    color: #28abe5;
}

@media screen and (max-width: 768px) {    
#hd #be-exposure .inner{
    padding: 0 20px;
}
#hd #be-exposure .list .entry .caption{
    font-size: 1em;
}
}


/*-software-*/
#hd #be-software{
    background: url('../img/software-bg.jpg') center top no-repeat;
    background-size: 100% auto;
    padding-bottom: 100px;
}
#hd #be-software .inner{
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-software .text{
    text-align: center;
    padding-top: 150px;
    margin-bottom: 50px;
}

@media screen and (max-width: 768px) {    
#hd #be-software .inner{
    padding: 0 20px;
}
}




/*-connectivity-*/
#hd #be-connectivity{
    background: #f1f0f0;
    padding-bottom: 100px;
}
#hd #be-connectivity .inner{
    padding-top: 150px;
    margin-bottom: 50px;
}
#hd #be-connectivity .text{
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}
#hd #be-connectivity .text .iconset{
    margin: 50px auto 0 auto;
    max-width: 600px;
}
#hd #be-connectivity .image{
    max-width: 1920px;
    margin: 0 auto;
    margin-top: 50px;
}
#hd #be-connectivity .image img{
    width: 80%;
    margin: 0;
}

@media screen and (max-width: 768px) {    
#hd #be-connectivity .text{
    padding: 0 20px;
}
#hd #be-connectivity .image img{
    width: 100%;
}
}



/*-ergonomic-*/
#hd #be-ergonomic{
    background: #fff;
    padding-bottom: 100px;
}
#hd #be-ergonomic .inner{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-ergonomic .text{
    text-align: center;
    padding-top: 150px;
    max-width: 1000px;
    margin: 0 auto;
}
#hd #be-ergonomic .list{
    display: flex;
    flex-wrap: nowrap;
    margin-top: 60px;
    margin-bottom: 50px;
}
#hd #be-ergonomic .list .entry{
    padding: 0 1%;
    box-sizing: border-box;
}
#hd #be-ergonomic .list .entry .caption{
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
    letter-spacing: 1px;
    color: #28abe5;
    padding: 15px 5px 0 5px;
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
}

@media screen and (max-width: 768px) {    
#hd #be-ergonomic .inner{
    padding: 0 20px;
}
#hd #be-ergonomic .list .entry .caption{
    font-size: 0.9em;
}
}

@media screen and (max-width: 500px) {    
#hd #be-ergonomic .list{
    flex-wrap: wrap;
}
#hd #be-ergonomic .list .entry{
    width: 50%;
    margin-bottom: 30px;
}
}






/*-eyecare-*/
#hd #be-eyecare{
    background: #fff;
    padding-bottom: 100px;
}
#hd #be-eyecare .inner{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-eyecare .inner > .text{
    text-align: center;
    padding-top: 150px;
}

/*bluelight*/
#hd #be-eyecare .eyecare-bluelight{
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 40px;
    background: #f5f5f5;
}
#hd #be-eyecare .eyecare-bluelight .bluelight-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
#hd #be-eyecare .eyecare-bluelight .bluelight-inner figure{
    display: flex;
    flex-wrap: nowrap;
    width: 60%;
    flex-direction: row;
}


#hd #be-eyecare .eyecare-bluelight .image-wrapper{
    width: 60%;
}
#hd #be-eyecare .eyecare-bluelight .text{
    padding-left: 3%;
    width: 40%;
}
#hd #be-eyecare .eyecare-bluelight .text h4{
    font-size: 1.6em;
    font-weight: normal;
    margin-bottom: 20px;
    color: #25aae5;
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
}
#hd #be-eyecare .eyecare-bluelight .text .icon{
    width: 250px;
    margin-bottom: 50px;
}


#hd #be-eyecare .eyecare-bluelight .control-wrapper{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control{
    display: flex;
    margin-right: 25px;
    margin-bottom: 20px;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control > div{
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin-right: 15px;
    font-size: 1.5em;
    text-align: center;
    background: #eee;
    color: #fff;
    cursor: pointer;
    border: 2px solid transparent;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-0{
    background: #d9eef8;
    color: #25aae5;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-1{
    background: #cbe6f2;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-2{
    background: #b6def0;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-3{
    background: #a2d7ef;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-4{
    background: #25aae5;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control > div.active{
    border-color: #0084ff;
    color: #0084ff;
    background: transparent;
}



#hd #be-eyecare .eyecare-bluelight .image-wrapper{
    position: relative;
}
#hd #be-eyecare .eyecare-bluelight .image-wrapper .level{
    position: absolute;
    color: #fff;
    right: 15%;
    bottom: 20%;
    text-align: right;
    font-size: 1.2em;
}
#hd #be-eyecare .eyecare-bluelight .image-wrapper .light{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4; /*default by level 2*/
}

@media screen and (max-width: 1200px) {  
#hd #be-eyecare .eyecare-bluelight .bluelight-inner{
    flex-direction: row;
}  
#hd #be-eyecare .eyecare-bluelight .text h4{
    font-size: 1.2em;
}
#hd #be-eyecare .eyecare-bluelight .image-wrapper{
    width: 50%;
}
#hd #be-eyecare .eyecare-bluelight .text{
    width: 50%;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control > div{
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-right: 10px;
    font-size: 1.2em;
}
}
@media screen and (max-width: 767px) {    
#hd #be-eyecare .inner{
    padding: 0;
}
#hd #be-eyecare .inner > .text{
    padding: 0 20px;
}
#hd #be-eyecare .eyecare-bluelight .bluelight-inner{
    padding: 0 20px;
}

#hd #be-eyecare .eyecare-bluelight .image-wrapper{
    width: 100%;
}
#hd #be-eyecare .eyecare-bluelight .text{
    padding-left: 0;
    width: 100%;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .icon{
    display: none;
}
}
@media screen and (max-width: 500px) {    
#hd #be-eyecare .eyecare-bluelight .image-wrapper .level{
    right: 10%;
    font-size: 1em;
}
}



/*-flicker-*/
#hd #be-flicker{
    background: #fff;
    padding-bottom: 100px;
}
#hd #be-flicker .inner{
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-flicker .text{
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
#hd #be-flicker .text h3{
    color: #25aae5;
    font-size: 2em;
    margin-bottom: 0.8em;
    font-weight: normal;
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
}
#hd #be-flicker .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
    margin-bottom: 50px;
}
#hd #be-flicker .list .entry{
    width: 50%;
}
#hd #be-flicker .list .entry .caption{
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
    letter-spacing: 1px;
    font-weight: normal;
    color: #aaa;
    padding: 15px 5px 0 5px;
    font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;
}
#hd #be-flicker .list .entry:first-child .caption{
    color: #28abe5;
}

@media screen and (max-width: 768px) {    
#hd #be-flicker .inner{
    padding: 0 20px;
}
#hd #be-flicker .list .entry .caption{
    font-size: 0.9em;
}
}


/*-shortcuts-*/
#hd #be-shortcuts{
    background: #252525;
    color: #fff;
    padding-bottom: 180px;
}
#hd #be-shortcuts .inner{
    position: relative;
}
#hd #be-shortcuts .inner > .image{
    width: 50%;
}
#hd #be-shortcuts .inner > .image img{
    margin: 0;
}
#hd #be-shortcuts .section-title:before{
    left: 0;
}
#hd #be-shortcuts .text{
    max-width: 500px;
    position: absolute;
    left: 55%;
    top: 18%;
    width: 40%;
}
#hd #be-shortcuts .section-title{
    color: #fff;
}
#hd #be-shortcuts .section-p{
    color: #fff;
}
#hd #be-shortcuts .list{
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 35%;
    top: 70%;
    width: 60%;
    max-width: 900px;
}
#hd #be-shortcuts .list .entry{
    width: 33.33%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 30px;
}
#hd #be-shortcuts .list .entry .image{
    width: 35%;
}
#hd #be-shortcuts .list .entry .caption{
    width: 65%;
    font-size: 1.2em;
    line-height: 1.2em;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}
@media screen and (max-width: 1200px) {    
#hd #be-shortcuts .list .entry .caption{
    font-size: 1em;
}
}

@media screen and (max-width: 900px) {    
#hd #be-shortcuts{
    padding-bottom: 60px;
}
#hd #be-shortcuts .inner > .image{
    width: 80%;
}
#hd #be-shortcuts .text{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 40px;
}
#hd #be-shortcuts .list{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
}

@media screen and (max-width: 500px) {    
#hd #be-shortcuts .list .entry{
    width: 50%;
}
#hd #be-shortcuts .list .entry .caption{
    font-size: 0.9em;
}
}

/*  sec-scenario */

#hd .sec-scenario {
    padding: 6.25em 0 8em
}
#hd .hd-w1400 {
    max-width: 1460px;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
#hd .sec-scenario p {
    max-width: 54em;
    margin: 0 auto 5em
}

#hd .sec-scenario h3 {
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: .75em 0
}

#hd .color-gradient {
    /*display: inline-block;
    color: #005ede !important;
    background-color: #005ede;
    background-image: -moz-linear-gradient(134deg, #005ede,#1c39c8);
    background-image: -webkit-linear-gradient(134deg, #005ede,#1c39c8);
    background-image: linear-gradient(134deg, #005ede,#1c39c8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)*/
    color: #000;
    text-align: center;
    position: relative;
}

#hd .cokor-gradient:before{
    content: ''; 
    display: block;
    width: 100px;
    height: 2px;
    background: #28abe5;
    position: absolute;
    left: calc(50% - 50px);
    top: -20px;

}

_:-ms-fullscreen,:root #hd .color-gradient {
    background: transparent !important
}

#hd .title-stroke{
    position: relative;
    z-index: 2;
}
#hd .title-stroke.stroke-large.stroke-primary:before{
    background: url(../img/stroke-primary.png) center no-repeat;
    background-size: contain;
}
#hd .title-stroke:before {
    content: '';
    width: 9.5em;
    height: 2em;
    background: url(../img/stroke-grey.png) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1
}

#hd .title-stroke.stroke-large:before{
    width: 97%;
    height: 0;
    padding-bottom: 30%;
    background-position: center center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
}

.color-white{
    color: white !important;
}

#hd .title-stroke{
    position: relative;
    z-index: 2;
    display: inline-block;
    /* font-size: .9em; */
    line-height: 1.25;
    padding: 0.75em 0.5em;
    min-width: 15em;
    text-align: center;
}



#hd .flex-wrap{
    display: flex;
    flex-wrap: wrap;
}
#hd .align-center {
    text-align: center;
}

#hd .sec-scenario ul {
    margin: 0 -.8em
}
#hd .sec-scenario ul{
    position: relative;

}

#hd .sec-scenario ul:before,#hd .sec-scenario ul:after {
    content: '';
    display: block;
    width: 8%;
    height: 0;
    padding-bottom: 8%;
    margin: -6%;
    background: 0 0 no-repeat;
    background-size: contain;
    position: absolute
}
#hd .sec-scenario ul:before{
    background-image: url(../img/frame-top.png);
    top: 0;
    left: 0
}

#hd .sec-scenario ul:after{
    margin-bottom: -2%;
    background-image: url(../img/frame-bottom.png);
    bottom: 0;
    right: 0;
}


#hd .sec-scenario li {
    padding: 0 .8em
}

#hd .hd-col33 {
    width: 33.3333%;
}

#hd .sec-scenario figure {
    position: relative;
    overflow: hidden;
    border-radius: 2.5em
}



@media screen and (min-width: 2560px) {
    #hd .sec-scenario p {
        max-width:62em
    }
}

@media screen and (max-width: 1280px) {
    #hd .sec-scenario {
        padding:4em 0
    }

    #hd .sec-scenario ul {
        margin: 0 -.5em
    }

    #hd .sec-scenario li {
        padding: 0 .5em
    }

    #hd .sec-scenario figure {
        border-radius: 2em
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-scenario {
        padding:3em 0
    }

    #hd .sec-scenario .hd-container {
        text-align: left
    }

    #hd .sec-scenario ul {
        text-align: center
    }
}

@media screen and (max-width: 620px) {
    #hd .sec-scenario p {
        margin-bottom:2em
    }

    #hd .sec-scenario ul {
        flex-direction: column;
        width: 90%;
        margin: 0 auto
    }

    #hd .sec-scenario li {
        width: 100%;
        margin-bottom: 1em
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-scenario {
        padding:2em 0
    }
}




/*-usb-*/
#hd #be-usb{
}
#hd #be-usb .inner{
    position: relative;
}
#hd #be-usb .inner > .image{
}
#hd #be-usb .inner > .image img{
    margin: 0;
    width: 100%;
}
#hd #be-usb .section-title:before{
    left: 0;
}
#hd #be-usb .text{
    max-width: 450px;
    position: absolute;
    left: calc(50% - 600px);
    top: 12%;
    width: 30%;
}
#hd #be-usb .icon{
    position: absolute;
    left: calc(50% - 600px);
    top: 58%;
    max-width: 170px;
}

@media screen and (min-width: 2600px) {    
#hd #be-usb .text{
    left: calc(50% - 700px);
    top: 20%;
}
#hd #be-usb .icon{
    left: calc(50% - 700px);
    top: 48%;
}
}
@media screen and (min-width: 3100px) {    
#hd #be-usb .text{
    left: 27%;
}
#hd #be-usb .icon{
    left: 27%;
}
}
@media screen and (min-width: 4800px) {    
#hd #be-usb .text{
    left: 30%;
}
#hd #be-usb .icon{
    left: 30%;
}
}
@media screen and (max-width: 1500px) {    
#hd #be-usb .text{
    top: 8%;
    left: 20px;
}
#hd #be-usb .icon{
    left: 20px;
    top: auto;
    bottom: 20px;
    max-width: 120px;
}
}
@media screen and (max-width: 1200px) {    
#hd #be-usb .icon{
    max-width: 90px;
}
}

@media screen and (max-width: 1100px) {    
#hd #be-usb{
    padding-bottom: 60px;
}
#hd #be-usb .text{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 70px;
}
#hd #be-usb .icon{
    position: relative;
    left: auto;
    top: auto;
    margin-left: 20px;
}
}


/*-be-powerSyn-*/
#hd #be-PowerSyn{
    background: #fff;
    padding-bottom: 100px;

}
#hd #be-PowerSyn .inner{
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    padding-top: 100px;
    text-align: center;
}
#hd #be-PowerSyn .text{
    text-align: center;
}
#hd #be-PowerSyn .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
}
#hd #be-PowerSyn .list .entry{
    width: 33.33%;
    box-sizing: border-box;
    padding: 0 5px;
}

#be-PowerSyn .color-gray{
    color: #808080c4;
    line-height: 4.6em;
}
#be-PowerSyn a{
    color: #133ED4;
}



/*-mount-*/
#hd #be-mount{
    
}
#hd #be-mount .inner{
    position: relative;
}
#hd #be-mount .inner > .image{
    /*width: 115%;*/
    width: 100%;
}
#hd #be-mount .inner > .image img{
    margin: 0;
    width: 100%;
}
#hd #be-mount .section-title:before{
    left: 0;
}
#hd #be-mount .text{
    max-width: 500px;
    position: absolute;
    left: calc(50% - 700px);
    top: 30%;
    width: 30%;
}

@media screen and (min-width: 2800px) {    
#hd #be-mount .text{
    left: calc(50% - 900px);
}
}
@media screen and (max-width: 1500px) {    
#hd #be-mount .text{
    top: 13%;
    left: 30px;
    width: 38%;
}
}
@media screen and (max-width: 1112px) {    
#hd #be-mount{
    padding-bottom: 60px;
}
#hd #be-mount .text{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 40px;
}
}

div.qr_move{
    position: relative;
    left: calc(-37% + 10px); 
    margin-top: 1em;
}

figure.qr_pic{
    display: flex;
    flex-direction: column;
}
.qr_pic img{
    width: 25%;
    display: inline-block;
}

.qr_pic figcaption {
    font-size: .7em;
    text-align: center;
    margin-top: .7em;
}

@media screen and (max-width: 800px){
.qr_pic figcaption {
    font-size: 1em;
    }
}

@media screen and (max-width: 500px){
    .qr_pic figcaption {
        font-size: 79%;
        }
    }
    @media screen and (max-width: 375px){
        .qr_pic figcaption {
        font-size: .6em;
            }
        }




/*-noise-*/
#hd .be-noise{
    background: #fff;
    padding-top: 120px;
    padding-bottom: 100px;
    overflow: hidden;
}
#hd .be-noise .section_content{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd .be-noise .section_content > .text{
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 50px;
}
@media screen and (max-width: 768px) {    
#hd .be-noise .section_content > .text{
    margin-bottom: 0px;
}
}
















/*--------------ZenScreen-----------------*/
/*
@font-face {
    font-family: 'MyriadPro';
    src:url('../fonts/MyriadPro-Light.otf');
    font-weight: normal;
    font-style: normal;
}

#hd .section-title{
    font-family: 'MyriadPro', 'Open Sans', sans-serif;
    font-size: 2.5em;
    color: #034c8c;
    line-height: 1.3em;
    font-weight: normal;
    letter-spacing: 0.05em;
}
#hd .section-p{
    font-family: 'MyriadPro', 'Open Sans', sans-serif;
    font-size: 1em;
    color: #000;
    line-height: 1.6em;
    font-weight: normal;
}
@media screen and (min-width: 1800px) {    
#hd .section-title{
    font-size: 2.8em;
}
}
@media screen and (max-width: 1400px) {    
#hd .section-title{
    font-size: 2em;
}
}
@media screen and (max-width: 550px) {    
#hd .section-title{
    font-size: 1.5em;
}
}


*/


/*-design-*/
#hd #zen-design{
    overflow: hidden;
}
#hd #zen-design .inner{
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-wrap: wrap;
}
#hd #zen-design .inner .text{
    width: 40%;
    box-sizing: border-box;
    padding-left: 4%;
}
#hd #zen-design .inner .image{
    width: 60%;
    box-sizing: border-box;
}
#hd #zen-design .iconset{
    max-width: 300px;
    margin: 30px auto 0 auto;
}

@media screen and (max-width: 768px) {    
#hd #zen-design .inner .text{
    width: 100%;
    padding-left: 0;
    margin-bottom: 30px;
}
#hd #zen-design .inner .image{
    width: 100%;
}
#hd #zen-design .iconset{
    width: 40vw;
}
}




/*-cable-*/
#hd #zen-cable{
}
#hd #zen-cable .inner{
    position: relative;
}
#hd #zen-cable .inner .text{
    max-width: 800px;
    box-sizing: border-box;
    padding: 0 40px;
    position: absolute;
    left: calc(50% - 400px);
    top: 10%;
}
#hd #zen-cable .inner .text .section-title{
    text-align: center;
}
#hd #zen-cable .inner .image{
}

@media screen and (max-width: 1000px) {    
#hd #zen-cable .inner .text{
    position: relative;
    margin: 5% auto 0 auto;
    left: auto;
    top: auto;
}
}





/*-comfort-*/
#hd #zen-comfort{
    background: #536673;
    background: linear-gradient(to bottom, #536673 40%, #5f7381 70%);
    max-width: 2560px;
    margin: 0 auto;
}
#hd #zen-comfort .inner{
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-wrap: wrap;
}
#hd #zen-comfort .inner .text{
    width: 40%;
    box-sizing: border-box;
    color: #fff;
    padding-right: 5%;
}
#hd #zen-comfort .inner .text .section-title{
    color: #fff;
    padding-left: 10%;
    padding-right: 40px;
}
#hd #zen-comfort .inner .text .section-p{
    color: #fff;
    padding-left: 10%;
    padding-right: 40px;
}
#hd #zen-comfort .inner .image{
    width: 60%;
    box-sizing: border-box;
}
#hd #zen-comfort .inner .image img{
    width: 100%;
    display: block;
}
#hd #zen-comfort .iconset{
    max-width: 90%;
}
#hd #zen-comfort .iconset img{
    width: 100%;
    display: block;
}

@media screen and (min-width: 3000px) {    
#hd #zen-comfort .inner .image{
    width: 50%;
}
#hd #zen-comfort .inner .text{
    width: 50%;
}
}
@media screen and (max-width: 1200px) {    
#hd #zen-comfort .inner .text{
    padding-right: 0%;
}
#hd #zen-comfort .iconset{
    max-width: 70%;
}
}
@media screen and (max-width: 1000px) {    
#hd #zen-comfort .inner .text{
    width: 100%;
    max-width: 100%;
    padding-top: 40px;
}
#hd #zen-comfort .inner .image{
    width: 100%;
}
#hd #zen-comfort .iconset{
    max-width: 80%;
}
#hd #zen-comfort .inner .text .section-title{
    padding-left: 40px;
}
#hd #zen-comfort .inner .text .section-p{
    padding-left: 40px;
}
}




/*-mode-*/
#hd #zen-mode{
}
#hd #zen-mode .inner{
    position: relative;
    max-width: 2560px;
    margin: 0 auto;
}
#hd #zen-mode .inner .text{
    width: 55%;
    box-sizing: border-box;
    position: absolute;
    left: 10vw;
    top: 5vw;
}
#hd #zen-mode .inner .text .section-title{
}
#hd #zen-mode .inner .image{
}

@media screen and (max-width: 1400px) {    
#hd #zen-mode .inner .text{
    width: 55vw;
    left: 3vw;
    top: 3vw;
}
}
@media screen and (max-width: 1000px) {    
#hd #zen-mode .inner .text{
    width: 100%;
    padding: 0 40px;
    position: relative;
    margin: 5% auto 0 auto;
    left: auto;
    top: auto;
}
}






/*-safe-*/
#hd #zen-safe{
    background: url('../img/safe-bg.jpg') right top no-repeat;
    background-size: 50% auto;
    padding-top: 5%;
    max-width: 2560px;
    margin: 0 auto;
}
#hd #zen-safe .inner{
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #zen-safe .inner .text-wrapper{
    width: 72%;
    box-sizing: border-box;
}
#hd #zen-safe .inner .text-wrapper .text{
    padding-left: 40px;
}

#hd #zen-safe .iconset{
    display: flex;
    align-items: center;
    position: absolute;
    left: 72%;
    bottom: 15%;
    padding-right: 15px;
}
#hd #zen-safe .iconset .caption{
    padding-left: 20px;
}
#hd #zen-safe .iconset .icon{
    width: 40%;
    max-width: 120px;
}
#hd #zen-safe .iconset .caption p:first-child{
    margin-bottom: 0;
    font-size: 1.2em;
}
#hd #zen-safe .iconset .caption p:last-child{
    margin-bottom: 0;
    font-size: 0.9em;
}


#hd #zen-safe .how{
    background: #f5f7f7;
    padding: 50px 0;
}
#hd #zen-safe .how-inner{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
#hd #zen-safe .how-inner .image{
    width: 40%;
}
#hd #zen-safe .how-inner .text{
    padding-left: 3%;
    width: 60%;
}
#hd #zen-safe .how-inner .text h3{
    color: #034c8c;
}

@media screen and (max-width: 1400px) {    
#hd #zen-safe .inner .text-wrapper{
    width: 68%;
}
#hd #zen-safe .inner .text-wrapper .text{
    padding-left: 0px;
}
#hd #zen-safe .iconset{
    left: 68%;
}
}

@media screen and (max-width: 700px) {    
#hd #zen-safe{
    background: none;
}
#hd #zen-safe .inner .text-wrapper{
    width: 100%;
}
#hd #zen-safe .iconset{
    position: relative;
    left: auto;
    bottom: auto;
    margin-bottom: 20px;
}
#hd #zen-safe .iconset .caption p:first-child{
    font-size: 1em;
}
#hd #zen-safe .iconset .caption p:last-child{
    font-size: 0.8em;
}
#hd #zen-safe .how-inner .text{
    padding-left: 0;
    width: 100%;
}
#hd #zen-safe .how-inner .image{
    width: 70%;
    margin: 0 auto;
}
}

@media screen and (max-width: 500px) {    
#hd #zen-safe .iconset{
    padding-right: 0;
}
#hd #zen-safe .iconset .icon{
    width: 20%;
}
#hd #zen-safe .iconset .caption{
    padding-left: 10px;
}
}







/*-workspace-*/
#hd #zen-workspace{
    padding-top: 5%;
    background: #fff;
    overflow: hidden;
}
#hd #zen-workspace .inner{
    position: relative;
}
#hd #zen-workspace .inner .text{
    max-width: 800px;
    box-sizing: border-box;
    padding: 0 40px;
    position: absolute;
    left: calc(50% - 400px);
    top: 0;
    z-index: 5;
}
#hd #zen-workspace .inner .text .section-title{
    text-align: center;
}
#hd #zen-workspace .inner .image-wrapper{
    position: relative;
}
#hd #zen-workspace .inner .image-wrapper .main{
    position: relative;
    z-index: 2;
}
#hd #zen-workspace .inner .image-wrapper .inscreen{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 3;
}
#hd #zen-workspace .inner .image-wrapper .bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}
#hd #zen-workspace .inner .image-wrapper .number{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 4;
}

@media screen and (max-width: 1200px) {    
#hd #zen-workspace .inner .text{
    position: relative;
    margin: 5% auto 0 auto;
    left: auto;
    top: auto;
}
}






/*-eyecare-*/

/*tab*/
#hd #zen-eyecare{
    padding-bottom: 50px;
    padding-top: 50px;
}
#hd #zen-eyecare .title-wrapper{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}
#hd #zen-eyecare .title-wrapper .section-title{
    text-align: center;
}
#hd #zen-eyecare .title-wrapper .tab{
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}
#hd #zen-eyecare .title-wrapper .tab .entry{
    width: 50%;
    margin: 0 10px;
}
#hd #zen-eyecare .title-wrapper .tab .entry a{
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #aaa;
    padding: 15px;
    text-align: center;
    color: #aaa;
    transition: all 0.3s;
    cursor: pointer;
}
#hd #zen-eyecare .title-wrapper .tab .entry a:hover{
    background: #eee;
}
#hd #zen-eyecare .title-wrapper .tab .entry.active a{
    border-color: #034c8c;
    background: #034c8c;
    color: #fff;
}
@media screen and (max-width: 500px) {    
#hd #zen-eyecare .title-wrapper .tab .entry a{
    padding: 10px 5px;
    font-size: 0.8em;
}
}



/*flickerfree*/
#hd #zen-eyecare .eyecare-flickerfree{
    display: none;
    padding-top: 50px;
}
#hd #zen-eyecare .eyecare-flickerfree .inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
#hd #zen-eyecare .eyecare-flickerfree .inner .text{
    text-align: center;
}
#hd #zen-eyecare .eyecare-flickerfree .inner .text h4{
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 30px;
}
#hd #zen-eyecare .eyecare-flickerfree .caption{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin-top: 10px;
}
#hd #zen-eyecare .eyecare-flickerfree .caption > div{
    padding: 0 10px;
    text-align: center;
    width: 50%;
    box-sizing: border-box;
}

@media screen and (max-width: 500px) {    
#hd #zen-eyecare .eyecare-flickerfree .inner .text h4{
    font-size: 1.2em;
}
#hd #zen-eyecare .eyecare-flickerfree .caption{
    font-size: 0.8em;
}
}


/*新增區塊Caring for the environment*/
 #Caring-for-the-environment{ margin: 0 auto;text-align: center;max-width: 1550px;height: 700px;}
   
        .be-environment{ max-width: 1000px;margin: 0 auto;padding-top: 100px;text-align: left;}

   h2.be-environment-title{ text-align: left;font-family: 'TTNormsProRegular','Poppins', 'Roboto', 'Open Sans', sans-serif;}
    
    .inner-note{color: #9f9f9f;}



/*-footnote-*/

#hd #zen-footnote{
    padding: 60px 40px;
    background: #eee;
}
#hd #zen-footnote ol{
    max-width: 1000px;
    margin: 0 auto;
    list-style-type: decimal;
    font-size: 0.8em;
    color: #888;
}
#hd #zen-footnote ol li{
    margin-bottom: 10px;
}