.wfh-container{font-family: 'CenturyGothic','cwTeXHei','Microsoft JhengHei' !important;}
.wfh-container h1{font-size: 48px;margin:20px 0px;}
.wfh-container p{font-size: 20px;margin:20px 0px; }
/*.wfh-container .wfh0319-btn{width:300px;display: inline-block;margin:20px 0px;background: url(https://storage-asset.msi.com/event/2020/nb/workFromHome/wfh-btn-1.png) no-repeat;background-size: contain;text-decoration: none;color:#000;} */

.wfh-container a.wfh0319-btn {margin:20px 0px;display:inline-block;width: 100%; max-width: 300px; text-align: center;text-decoration: none;padding: 10px;transition: .2s all ease-in; border-radius: 10px;}
.wfh-container .wfh0319-btn1{color:#000; border:2px solid #1da3d6; } 
.wfh-container a.wfh0319-btn.wfh0319-btn1:hover {background-color: #1da3d6;;color: #FFF;animation: none; }

/*buttonGaming*/
.wfh-container .wfh0319-btn2{color:#fff; border:2px solid #FF0000;} 
.wfh-container a.wfh0319-btn.wfh0319-btn2:hover {background-color: #FF0000;color: #FFF;animation-play-state: paused;}
.wfh-container a.wfh0319-btn.wfh0319-btn2:hover span {color: #FFF;}



/*button text*/
.wfh-container .wfh0319-btn .wfh0319-btn-1{display:block;font-size: 20px;}
.wfh-container .wfh0319-btn .wfh0319-btn-2{display:block;}

.wfh-container .wfh0319-btn.wfh0319-btn2:hover span {color: #FF0000;}
.wfh-container .wfh0319-btn img{width:100%;}
.wfh0319-s1,.wfh0319-s2,.wfh0319-s3,.wfh0319-s4,.wfh0319-s5{overflow:hidden;}
.wfh0319-s3 div,.wfh0319-s4 div,.wfh0319-s5 div{padding:0px;}
.wfh0319-s1 .row,.wfh0319-s2 .row,.wfh0319-s3 .row,.wfh0319-s4 .row,.wfh0319-s5 .row{display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.col-info{align-items: center;display: flex;justify-content: center;}
.col-info .col-info-box {display: block;margin-left: 160px;margin-right: 160px;text-align: center;}
.wfh0319-s1{background:url(https://storage-asset.msi.com/event/2020/nb/workFromHome/wfh-s1.jpg) center top;text-align: center;background-size: cover}
.wfh-0319-s1-slogan{position:relative;margin: 300px auto 150px;max-width:90%}
.wfh-0319-s1-logo{position:absolute;top:0px;right:0px}
.wfh-0319-s1-bottom{background-image: -webkit-linear-gradient(top, rgba(0,0,0,.5) 0, rgba(0,0,0,.0001) 100%);background-image: -o-linear-gradient(top, rgba(0,0,0,.5) 0, rgba(0,0,0,.0001) 100%);background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.5)), to(rgba(0,0,0,.0001)));background-image: linear-gradient(to top, rgba(0,0,0,.5) 0, rgba(0,0,0,.0001) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#50000000', endColorstr='#00000000', GradientType=1);background-repeat: repeat-y;color:#ddd;padding:40px 20px 20px !important;font-size: 18px;}

.wfh0319-s2{background:#777;color:#b2b1b2;padding:60px 0px;}
.wfh0319-btn-2.clcikbtn {padding-top: 5px;}
.wfh0319-s3{background:#fff;}
.wfh0319-s3 .col-info{box-shadow:0px 0px 200px 250px #fff;}
.wfh0319-s3 .col-info .col-info-box {margin-left: 200px;margin-right: 100px;}
.wfh0319-s3 img{width:100%;}

.wfh0319-s4{background:#fff;}
.wfh0319-s4 .col-info{box-shadow:0px 0px 200px 250px #fff;}
.wfh0319-s4 .col-info .col-info-box {margin-left: 100px;margin-right: 200px;}
.wfh0319-s4 img{width:100%;}

.wfh0319-s5{background:#000;color:#fff; padding-bottom: 13%;}
.wfh0319-s5 .col-info{box-shadow:0px 0px 50px 50px #000;}
.wfh0319-s5 .col-info .col-info-box {margin-left: 200px;margin-right: 100px;}
.wfh0319-s5 img{width:100%;}

/*layoutFlex*/

.flexBox {display: flex; flex-direction: row; }

.laptopbox {display: block; padding: 20px;}

.btnEffect { -webkit-animation: pulse 3s ease 0s infinite normal;
    -o-animation: pulse 3s ease 0s infinite normal;
    -moz-animation: pulse 3s ease 0s infinite normal;
    animation: pulse 3s ease 0s infinite normal;
}
.btnEffectRed { -webkit-animation: pulseRed 3s ease 0s infinite normal;
    -o-animation: pulseRed 3s ease 0s infinite normal;
    -moz-animation: pulseRed 3s ease 0s infinite normal;
    animation: pulseRed 3s ease 0s infinite normal;
}
/*keyFrame*/

@keyframes pulse {
    0% {
      transform: scale(1) rotate(0deg); border-color: #1da3d6; top: 0;
    }
    25% {
      transform: scale(1.06) rotate(0deg);  border-color:#0cb8a6;
    }
    
     50% {
      transform: scale(1.05) rotate(0deg);  border-color:#ffea00;
    }
    100% {
      transform: scale(1) rotate(0deg); border-color: #1da3d6; top:0;
    }
}


@-webkit-keyframes pulse {
    
    0% {
      transform: scale(1) rotate(0deg); border-color: #1da3d6; top: 0;
    }
    25% {
      transform: scale(1.06) rotate(0deg);  border-color:#0cb8a6;
    }
    
     50% {
      transform: scale(1.05) rotate(0deg);  border-color:#ffea00;
    }
    100% {
      transform: scale(1) rotate(0deg); border-color: #1da3d6; top:0;
    }

    
}


@keyframes pulseRed {
    0% {
      transform: scale(1) rotate(0deg); border-color: #FF0000;top: 0;
    }
    25% {
      transform: scale(1.06) rotate(0deg);  border-color:#FF7500;
    }
    
     50% {
      transform: scale(1.05) rotate(0deg);  border-color:#FF5600;
    }
    100% {
      transform: scale(1) rotate(0deg); border-color: #FF0000; top:0;
    }
}
@-webkit-keyframes pulseRed {
    
    0% {
      transform: scale(1) rotate(0deg); border-color: #FF0000;top: 0;
    }
    25% {
      transform: scale(1.06) rotate(0deg);  border-color:#FF7500;
    }
    
     50% {
      transform: scale(1.05) rotate(0deg);  border-color:#FF5600;
    }
    100% {
      transform: scale(1) rotate(0deg); border-color: #FF0000; top:0;
    }

}
/*top Button*/
 .topBtn {display: flex; width: 100%; max-width: 1200px; margin: 0 auto; text-align: center;}
        .btnItem {display: block; width: 31%; margin-right: 1%;/*text-shadow: 1px 0px  1px #414141;*/}
        .btnItem a {display: block; border-radius: 10px;box-shadow: 1px 2px 2px 2px #454545;font-size: 26px; padding: 5px;text-decoration: none;}
        .btnItem.btnBlue a {display: block; border:1px solid #00BAFF; color: #00BAFF;background-color:rgba(255,255,255,0.8);}
        .btnItem.btnBlue a:hover {background-color: rgba(0,124,249,0.8); color: #FFF;}
        .btnItem.btnBlue a:hover  h3 {color: #FFF;}
        .btnItem.btnRed a {display: block; border:1px solid #ff0000; color: #FF0000; background-color:rgba(255,255,255,0.8);}
        .btnItem.btnRed a:hover {background-color: rgba(252,3,3,0.5); color: #FFF;}
        .btnItem.btnRed a:hover h3 {color: #FFF;}
        
       
        .btnItem.btnBlue h3 {display: block; font-size: 15px; color: #FFF; margin: 10px;color: #00BAFF;}
        .btnItem.btnRed h3 {color: #FF0000;font-size: 15px;margin: 10px;}

@media (max-width: 1599px) {
.wfh-0319-s1-slogan{margin: 200px auto 100px;width:700px;}
.wfh-0319-s1-logo{width:250px;}}
@media (max-width: 1399px) {
.wfh-container h1{font-size: 35px;margin:15px 0px;}
.wfh-container p{font-size: 18px;margin:15px 0px;}
.wfh-0319-s1-slogan{margin: 180px auto 80px;width:600px;}
.wfh-0319-s1-logo{width:220px;}
.wfh0319-s3 .col-info .col-info-box,.wfh0319-s4 .col-info .col-info-box, .wfh0319-s5 .col-info .col-info-box {margin-left: 50px;margin-right: 50px;}


}

@media (max-width:1366px){
    
    .wfh0319-s4 .col-info .col-info-box{margin-left: 0px;}
    
    
}
@media (max-width: 1199px) {
.wfh-container .wfh0319-btn{width:240px;display: inline-block;margin:15px 0px;} 
.wfh-container h1{font-size: 32px;}
.wfh-container p{font-size: 16px;}
.wfh-0319-s1-slogan{margin: 180px auto 40px;width:500px;}
.wfh-0319-s1-logo{width:200px;}
.wfh-0319-s1-bottom{font-size: 16px;}
.wfh0319-s3 .col-info .col-info-box,.wfh0319-s4 .col-info .col-info-box, .wfh0319-s5 .col-info .col-info-box {margin-left: 50px;margin-right: 50px;}
    .wfh0319-s1 .row,.wfh0319-s2 .row,.wfh0319-s3 .row,.wfh0319-s4 .row,.wfh0319-s5 .row{/*display: -ms-flexbox;display: flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;*/ display: block;}
    
}

@media (max-width: 991px) {
.wfh-container .wfh0319-btn{width:240px;display: inline-block;margin:15px 0px;} 
.wfh-0319-s1-slogan{margin: 180px auto 20px;width:450px;}
.wfh-0319-s1-logo{width:180px;}
.wfh-0319-s1-bottom{font-size: 14px;}
.wfh0319-s3 .col-info .col-info-box,.wfh0319-s4 .col-info .col-info-box,.wfh0319-s5 .col-info .col-info-box {margin:0px 50px 60px !important;}
.wfh0319-s3 .col-info,.wfh0319-s4 .col-info{box-shadow:0px 0px 100px 100px #fff;}
.topBtn {flex-direction: column; }
    .btnItem{width: 90%; margin: 0 auto; text-align: center; margin-right: auto; margin-bottom: 10px; margin-top: 10px;}
}
@media (max-width: 767px) {
.wfh0319-s1{background:url(https://storage-asset.msi.com/event/2020/nb/workFromHome/wfh-s1-m.jpg) center top;text-align: center;background-size: cover}
.wfh-0319-s1-slogan{margin: 350px auto 0px;width:400px;}
.wfh-0319-s1-bottom{margin-bottom: 30px}}