lixin-web/webapp/css/game-band.css

vue and bootstrap

.a1{background:#3010a6;height:910px;overflow:hidden;background:url(/img/game-brand/banner.jpg) no-repeat center 0;overflow:hidden}
.b{width:1000px;margin:0 auto;position:relative;}
.b1 .cb{position:absolute;}
.b1 .cb1{left: 161px;top: -377px;opacity:0}
.b1 .cb2{right: 255px;top: 174px;opacity:1}
.b1 .cb3{left: -242px;top: 334px;opacity:0}
.b1 .cb4{right: -344px;top: 424px;opacity:0}
.b1 .cb5{left: -500px;top: 500px;opacity:0}
.b1 .cb6{right: -161px;top: 500px;opacity:0}

 .a2{background:#131550;height:910px;width:100%;background:url(/img/game-brand/bg2.jpg) no-repeat center;overflow:hidden}
.a2 .db{position:absolute;}
.b .db-image{background:url(/img/game-brand/dbico_01.png) no-repeat;display:block}
.db1{top:258px;left:50%;margin-left:-325px;}
.db2{top: 150px;left: 135px;}
.db3{top: 350px;left: 51px;}
.db4{top: 499px;left: 114px;}
.db5{top: 569px;left: 252px;}
.db6{top: 623px;left: 534px;}
.db7{top: 479px;left: 727px;}
.db8{top: 230px;left: 670px;}
.db9{top: 49px;left: 473px;}
.db1 .db-image{background:url(/img/game-brand/bdys_03.png) no-repeat;width: 650px;height: 315px;}
.db2 .db-image{width:280px;height:50px; background-position: -5px -19px;}
.db3 .db-image{width:70px;height:70px; background-position: -349px -136px;}
.db4 .db-image{width:183px;height:44px;background-position: -24px -383px;}
.db5 .db-image{width:258px;height:70px; background-position: -16px -193px;}
.db6 .db-image{width:168px;height:136px; background-position: -298px -247px;}
.db7 .db-image{width:220px;height:76px; background-position: -17px -277px;}
.db8 .db-image{width:235px;height:86px; background-position: -282px -56px;}
.db9 .db-image{width:293px;height:50px; background-position: 15px -101px;}

.a2 .db-connect{color:#fff;font-size: 12px;width: 320px;line-height:16px;}
.db5>.db-connect{width: 220px;} 
.db7>.db-connect{width: 265px;} 
.db8>.db-connect{width: 265px;} 
.a2 .db-title{color:#fff100;font-size: 18px;padding:10px 0; }
.section{height: 910px !important;}
.section{position:relitive;}
#container_left{width:100%;height:910px;    position: absolute;}
#container_right{width:100%;height:910px;    position: absolute;}
canvas{width:100%;}

/*响应式样式开始*/
@media screen and (max-width:768px){
	.section .b .db-image{background-size:50%}
	.section .b .cb3 img{width: 29%;height: 50%;}
    .section .b .cb1 img{width: 66%;margin-left: -148px;}
    .section .b .cb4 img{margin-left: -937px;}
    .section .db.db1{display:none;    margin-left: 200px;}
    .a .b.b2{width:100%}
    .db2{margin-left: -126px;margin-top: -139px;}
    .db3{margin-top: -266px;margin-left: -43px;}
    .db4{margin-left: -106px;margin-top: -310px;}
    .db5{    margin-top: -290px;
    margin-left: -244px;}
    .a2 .db-connect{/* width:299px; */width: 100%;}
    .db6{
    margin-left: -527px;
    margin-top: -256px;
    }
    .db7{
    margin-top: -18px;
    margin-left: -677px;
    }
    .db8{
    margin-top: 335px;
    margin-left: -641px;
    }
    .db9{ margin-top: 765px;
    margin-left: -476px;}
    .b .db-image{display:none}
}
/*响应式样式结束*/
div#js_full {
    margin-top: 60px;
}