/* CSS Document */
BODY{ background:url(../images/warehouse_bkere.png) no-repeat top center #2e282d; background-size:cover;}



	/* -- 抬頭 -- */
.war_logo{ position:absolute; top:20px; right:22px; }
.war_logo a{ display:block; width:250px;}


.war_br_bbt_bar{ width:100%; height:auto; display:flex; justify-content:flex-end; justify-content:space-evenly; 
position:absolute; top:700px; left:0;}


.war_br_bbt{}
.war_br_bbt a{ display:block; width:269px; height:auto; border:solid 5px #fff; border-radius:20px; overflow:hidden; transition:0.4s;}
.war_br_bbt a:hover{ border:solid 5px #ffde00; box-shadow:0 0 5px 3px rgba(255,255,255,.5), 0 0 15px rgba(255,255,255,.5);} 

.war_so_bbt{}
.war_so_bbt a{ display:block; width:269px; height:auto; border:solid 5px #fff; border-radius:20px; overflow:hidden; transition:0.4s;}
.war_so_bbt a:hover{ border:solid 5px #ffde00;  box-shadow:0 0 5px 3px rgba(255,255,255,.5), 0 0 15px rgba(255,255,255,.5);} 


.war_logo a img,
.war_br_bbt a img,
.war_so_bbt a img{ width:100%; height:auto;}












@media (max-width: 1024px) {
.war_br_bbt_bar{ top:550px;}
}

@media (max-width: 768px) {
.war_br_bbt_bar{ top:400px;}
}

@media (max-width: 414px) {
BODY{ background-position:0px 46px; }

.war_logo{ display:flex; flex-direction:row-reverse; width:100%; text-align:right; background:#fff; padding:10px 15px 10px 15px; margin:0; top:0;  right:0;}
.war_logo a{ display:block; width:200px;} 

.war_br_bbt_bar{ width:100%; height:auto; flex-wrap:wrap; top:350px;}
.war_br_bbt{ margin:0 0 20px 0;}

.war_br_bbt a,
.war_so_bbt a{ width:220px;}

}

@media (max-width: 375px) {
.war_br_bbt a,
.war_so_bbt a{ width:160px;}
}

@media (max-width: 320px) {
.war_br_bbt_bar{ top:250px;}

.war_br_bbt a,
.war_so_bbt a{ width:180px;}
}