@charset "utf-8";
/* CSS Document */

body{background: #000951;font-size: 16px;}
ul,ol,p,h1,h2,h3,h4 {list-style:none;padding: 0; margin: 0;}
a:hover{text-decoration: none;}
a:visited{color: #337ab7;}
h2{font-size: 40px;text-align: center; margin: 40px 0 40px;font-weight: bold;color: #99f7ff;}
p{margin: 0 0 6px;}

.colorfff{color: #fff;}
.font22{font-size: 22px;}
.padding10{padding: 10px 0;}
.margin50{margin-top: 50px;}
.mtop20{margin-top: 20px;}
.mtop40{margin-top: 48px;}
.bgfff{background: #fff;}
.logo{float: left;}
.login{float: right;color: #0085ca;}
.login a{background: #0085ca;color: #fff;display: inline-block;padding: 4px 15px;border-radius: 4px;margin: 10px;}
.login a:hover{background: #0dacff;}

.banner-bg{background: url(/images/pi-motor-driver/banner-bg.jpg) no-repeat center #0085ca;height: 460px;}
.b-tip{margin-top: 78px;}
.p-font{font-size: 38px;font-weight: bold;color: #fff;text-shadow: 0 0 4px #000951;margin-top: 50px;}
.p-time{ color: #fff;font-size: 20px;font-weight: bold;margin-top: 50px;}
.about{background: #022161;color: #fff;padding: 40px;}
.about-step{background: #063178;display: flex;margin-top: 20px;}
.about-step-title{width: 10%;font-size: 28px; display: flex;align-items: center;text-align: center;justify-content: center;writing-mode:vertical-lr;color: #99f7ff;background: #1d33b0;letter-spacing:0.2em;padding: 15px 0;}
.tip-01{text-align: center;padding: 30px 30px 0;}
.about-step-r{width: 90%;}
.about-step-r a{background: #009bd3; color: #fff; padding: 2px 4px; border-radius: 4px;  margin: 0 4px;}
.about-step-r a:hover{background: #0085b5;}
.Switch-box{background: #fff;padding: 20px;border-radius: 2px;margin-top: 20px;margin-bottom: 20px;}
.Switch-cp{background: #0085ca;text-align: center; margin: 30px;position: relative;}
.Switch-bg{display: block;background: url(/images/pi-motor-driver/s-bg.png) no-repeat center;width: 100%; height: 100%;padding: 20px;}
.Switch-cp p{background: #0a5c86;height: 56px; line-height: 56px;color: #fff;font-size: 26px;}
.Switch-cp img{padding: 30px 0;}
.cp-item{background: #fff;border-radius: 2px;color: #fff;margin: 15px 0 0;padding: 0 0 0 20px;}
.cp-item a{display: block;padding: 10px;}
.picCP-item{margin-top: 15px;background: #fff;border-radius: 2px;text-align: center;overflow: hidden;}
.picCP-item p{background: #e4e4e4;height: 42px; line-height: 42px;margin: 0;}
.video-item{background: #fff;border: 2px solid #fff;margin-bottom: 15px;}
.video-item-pic{position: relative;text-align: center;}
.video-item-pic img{width: 100%;}
.video-item-pic i{width: 68px; height: 68px;display: block;position: absolute;z-index: 1;left: 50%; top: 50%;margin-left: -34px;margin-top: -34px;background: url(/images/pi-motor-driver/icon-play.png) no-repeat;}
.video-item:hover i{background: url(/images/pi-motor-driver/icon-play-n.png) no-repeat;}
.video-item p{padding: 6px;min-height:56px;}
.big-btn{margin: 20px auto;text-align: center;}
.big-btn a{color: #fff;font-size: 18px;display:inline-block;padding: 14px 0;width: 430px;background: #0085ca;border: 2px solid #2cabec;text-align: center;border-radius: 4px;}
.big-btn a:hover{background: #02669a;}
.game{}
.game-title{background: linear-gradient(to right, #63f2fb, #ffffff,#776ff7);border-radius: 10px 10px 0 0;padding: 10px 0;text-align: center;position: relative;}
.game-title h2 {margin: 20px 0 10px;color: #000951;}
.game-title p{color: #000951;font-size: 18px;}
.game-con{background:url(/images/pi-motor-driver/bg-2.png) no-repeat #0085ca;  border-radius: 0 0 10px 10px;padding: 50px;}
.nav-tabs{border: none;}
.nav-tabs>li{width: 50%;height: 96px;text-align: center;background: url(/images/pi-motor-driver/tab-btn.png)no-repeat center;}
.nav-tabs>li>a {height: 96px;line-height: 86px;font-size: 22px;font-weight: bold;color: #000;}
.nav-tabs>li>a, .nav-tabs>li>a:focus, .nav-tabs>li>a:hover{background: none;border: none;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{background: url(/images/pi-motor-driver/tab-btn-hover.png)no-repeat center;border: none;    color: #000;}
.game-title::after ,.game-title::before{width: 50px; height: 51px;display: block;content: "";position: absolute;}
.game-title::after{background: url(/images/pi-motor-driver/icon-al.png)no-repeat; right:30px;top: 35px;}
.game-title::before{background: url(/images/pi-motor-driver/icon-ar.png)no-repeat; left:30px;top: 35px;}
.tab-content>.tab-pane{background: #fff; opacity: 0.99;border: 3px solid #66ebfe;padding: 20px;margin-top: 20px;}
.home-suc img{width: 100%;}

.pt10 {padding-top: 10px;}
.show { position: relative; width: 100%; margin: 20px auto;cursor: pointer;}
.cb {clear: both;zoom: 1;}
.now_one {border:solid 1px #e71d0f;border-radius:8px;width:100%;margin-top:10px;}
.showleft, .showright {float: left;}
.showleft .showitem ,.showright .showitem {
    width: 220px;
    height: 56px;
    line-height: 56px;
    display: block;
    margin: 10px auto;
    text-align: center;
    font-size: 16px;
    background: #0085ca;
    border: 2px solid #66ebfe;
    border-radius: 8px;
    color: #fff;
    float: left;
}
.showright {width:220px;float: right;margin-right: 70px;}
.showleft{width:220px;margin-left: 70px;}
.showright .showitem {
    background: #004976;
    border: 2px solid #0085ca;
}
.tools2 {
    text-align: center;
    width: 100%;
    position: relative;
    display: inline-block;
    margin: 10px auto;
}
.tools_set {
    position: absolute;
    top: 40px;
    left: 200px;
}
.tools_set>div{
    padding: 0 15px;
    margin: 0 5px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: #666 0px 0px 10px;
    line-height: 30px;
    display: inline-block;
}
.getPair {
    background: #cc0000;
    width: 162px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #fff;
    display: block;
    margin: 30px auto 20px;
    font-size: 18px;
    font-weight: bold;
    padding: 0 20px;
    border-radius: 8px;
}
.canvas {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
.backcanvas {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -2;
}
.show h4, .game_cp h4 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.success {width:100%;background:#f3f3f3;padding:20px 0px;text-align:center;}
.success h4 {color:#e92010;font-size:30px;line-height:45px;width: 100%;}
.success p {color:#333;line-height:25px;margin:20px 0px;}
.success p a {line-height:50px;width:358px;display:block;background:url(/images/winbond-line/time_bg.jpg) no-repeat;color:#fff;font-size:16px;margin:10px auto;text-align:center;margin-top:20px;}
.success p img {vertical-align:middle;margin-left:6px;}
.success p b {color:#e92010;}

.game-two{display: flex;}
.game_cp{width: 30%;text-align: center;display: flex;justify-content: center;align-items: center;}
.game2-right{width: 70%;}
.game2-right p{text-align: center;margin: 20px 0;}
.game2-pic{background: url(/images/pi-motor-driver/game2.jpg) no-repeat;width: 100%;height: 434px;position: relative;background-size: contain;}
.select-area{background: #6af3fb; border: 2px dashed #ff0000;width: 90px; height: 90px;position: absolute;}
.area01{top: 45%;left: 4%;width: 95px;height: 140px;}
.area02{top: 16%;left: 36%; width: 120px; height: 90px;}
.area03{top: 43%;left: 36%; width: 90px; height: 120px;}
.tab-pane h3{text-align: center;font-size: 18px;margin: 24px 0;font-weight: bold;color: #0085ca;}
.guize-p{color: #fff;padding: 30px 50px;}
.game-qa{padding: 20px 50px 10px;}
.game-qa ul li{width: 100%; margin-bottom: 20px;}
.game-qa ul li p{font-weight: bold;margin-bottom: 10px;}
.game-qa ul li label{width: 100%; font-weight: normal;margin-bottom: 6px;}
.game-qa .getPair{margin-bottom: 20px;}
.tab-pane{display: block;}
.gameTwo-mob{display: none;}
.col-xs-2-half, .col-sm-2-half, .col-md-2-half, .col-lg-2-half{ position: relative; min-height: 1px; }
.prize{background: #fff;border-radius: 4px;margin-top: 20px;}
.prize ul{display: inline-block;padding: 0 40px 20px;}
.prize>p{text-align: center;color: #000951;font-size: 28px;display: inline-block;text-align: center;margin: 30px auto 20px;width: 100%;}
.prize li{float: left;width: 21%;text-align: center;margin: 10px 2%;}
.prize li img{width: 100%;}
.prize li p{color: #337ab7;margin-top: 6px;}
.qa-text{width: 60px;height: 30px;line-height: 30px; border: 1px solid #ccc;margin-right: 3px;text-align: center;text-transform: uppercase;}
.footer { width: 100%; background: #010840; color: #76859f; text-align: center; padding: 20px 0; margin-top: 30px;}

@media ( min-width : 768px) { .col-sm-2-half{ width: 20%; float: left; } }
 
@media ( min-width : 992px) { .col-md-2-half{ width: 20%; float: left; } }
 
@media ( min-width : 1200px) { .col-lg-2-half{ width: 20%; float: left; } }



@media (max-width:1200px) and (min-width:1012px){
.game_cp{width: 20%;}
.game2-right{width: 80%;}
.game_cp>ul>li>a{width: 140px;}
.game2-pic{height: 380px;}
}
@media (max-width:980px){
.banner-bg{height: 360px;}
.p-font ,.b-tip ,.p-time{margin-top: 30px;}
.p-font{font-size: 30px;}
.about{padding: 20px;}
.margin50{margin-top: 20px;}
.about-step{display: inline-block;}
.about-step-title ,.about-step-r{width: 100%;}
.about-step-title{writing-mode: inherit;padding: 10px 0;} 
.tip-01{ border-bottom: 1px solid #1a4284;padding: 15px;}
.Switch-cp{margin: 0;}
.Switch-bg{padding: 0;}
.Switch-cp img{padding: 10px 0;}
.Switch-box{margin-bottom: 0;}
.cp-item ,.picCP-item{margin-top: 8px;}
.video-item{margin-bottom: 8px;}
.game-title h2{margin: 5px 0 10px;}
.game-title p{font-size: 16px;padding: 0 10px;}
.game-con{padding: 10px;}
.nav-tabs>li ,.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover ,.nav-tabs .active{background-size: contain;}
.nav-tabs>li>a{line-height: 24px;display: flex;justify-content: center;align-items: center; }
.tab-content>.tab-pane{padding: 10px;}

.showleft .showitem, .showright .showitem, .game_cp>ul>li>a{width: 140px;}
.tools2{margin: 20px auto 0;}
.tools_set{width: 100%;left: 0;top: 0px;}
.getPair{margin: 5px auto 0px;}
.show{margin-top: 0;}
.about{margin-top: 0;}
.gameTwo-mob{}
.gameTwo-mob .game-two{display: block;}
.gameTwo-mob .game_cp{width: 100%;display: block;}
.gameTwo-mob .game_cp>ul>li{height: 56px; line-height: 56px; display: block; margin: 10px auto; text-align: center; font-size: 16px; background: #0085ca;
    border: 2px solid #66ebfe; border-radius: 8px; color: #fff;width: 86%;margin: 10px auto;}
.gameTwo-mob .game_cp>ul>li>input{  background: none;height: 40px; width: 60px; border: none;text-align: center;font-size: 18px;font-weight: bold;}  
.gameTwo-mob .game2-right{width: 100%;}
.gameTwo-mob .game2-pic{background: none;height: auto;}
.gameTwo-mob .game2-pic img{width: 100%;}
.mtop40 {margin-top: 48px;}

.tab-pane{display: none;}
.gameTwo-mob{display: block;}
.prize ul{padding: 0 20px;}	
.prize li{width: 31%;margin: 10px 1%;}
.prize>p{margin: 20px 0;}	
.game-qa{padding: 20px 30px 0;}
.game-qa .getPair{margin: 5px auto 10px;	}
.showleft{width: 140px;margin-left: 20px;}
.showright{width: 140px;margin-right: 20px;}
}
@media (max-width:700px){
.game-title::after ,.game-title::before{display: none;}
}
@media (max-width:490px){
.b-tip img{width: 100%;}
.p-font{font-size: 28px;padding: 5px 15px;}
.big-btn a{width: 94%;font-size: 16px;border-radius: 40px;padding: 5px 14px;}
.nav-tabs>li>a{font-size: 18px;line-height: 20px;}
.nav-tabs>li ,.nav-tabs>li>a{height: 70px;}
.tab-content>.tab-pane{margin-top: 0;}
.showright .showitem{float: right;}
.showleft .showitem, .showright .showitem, .game_cp>ul>li>a{margin: 5px 0 0;width: 120px;}
.showleft .showitem{float: left;}

.showright h4{text-align: center;margin-bottom: 10px;font-size: 15px!important;}
.showleft h4{text-align: center;margin-bottom: 10px;font-size: 15px!important;}
.showleft{margin-left: 0;width: 120px;}
.showright{margin-right: 0;width: 110px;}
.showright .showitem{width: 110px;}
.tab-pane h3,.show h4, .game_cp h4{font-size: 16px;}
.guize-p{padding: 15px;}
.nav-tabs>li{background: none;width: 48%;margin: 0 1%;margin-bottom: 10px;}
.nav-tabs>li a{background: linear-gradient(to bottom,#10e1e3,#229ff5);border: 3px solid #0016ba;border-radius: 10px;width: 100%;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{background: linear-gradient(to bottom,#fab156,#e47505);border: 3px solid #e84c1c;border-radius: 10px;width: 100%;}
.game-qa{padding: 6px 6px 0;}
.prize ul{padding: 0 10px;}	
.prize li{width: 48%;margin: 10px 1%;}	
h2{font-size: 30px; margin: 30px 0;}
.qa-text{margin-bottom: 4px;height: 26px; line-height: 26px;}
}