body,div,p{padding: 0;margin: 0;border:0}
@font-face {
  font-family: 'FZXiHei';
  src: url('./FZXH1JW--GB1-0.woff2') format('woff2'), url('./FZXH1JW--GB1-0.woff') format('woff');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
.jarvis {
    font-family: -apple-system,-system-ui,BlinkMacSystemFont, sans-serif; 
    background-color: #fff; 
    display: flex;
    justify-content: center; 
    /*align-items: center; border: 1px solid #f00;*/
    height: 98vh;
    position:relative;
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;
}

.logo {position: absolute; top: 1rem; left: 2rem;}
.logo img{max-width: 53%;height: auto;}

.brand{position:absolute; top:26%; text-align:center; }
.brand img{max-width: 52%;height: auto;}

.time {color:#696C75;font-size:.8rem; width:inherit; text-align:center;}
.d1,.d2,.d3,.d4 {color:#292D39;font-size: 2rem;padding:0 .6rem 0 2rem;font-weight:bold;letter-spacing: 5px;font-family:'FZXiHei';}
.d1 {padding-left:.55rem;}

.devices {margin-top:18rem;}
.devices ul{display: flex;justify-content: center;padding: 0; }
.devices ul li {float: left;list-style-type: none; text-align:center;padding: 0 .6rem;color:#292D39;font-size:1rem;display: inline-block;}
.devices ul li img{max-width: 42%;}
@media screen and (max-width: 600px) {
    .logo{left:1rem;}
    .logo img{max-width: 55%;}
    
    .brand{top:32%; height:71%;position:relative;}
    .brand img{max-width: 82%;}
    .devices {position:absolute;bottom:2rem;margin-top:0; width:100%;}
    
    .time{font-size: .7rem;}
    .d1,.d2,.d3,.d4 {font-size: 1.5rem; padding: 0 .5rem;letter-spacing: 2px;}
    .devices ul li {width:3.5rem;font-size:.8rem;}
    .devices ul li img{max-width: 45%;}
}

@media screen and (max-width: 820px) {
    .devices {margin-top:25rem;}
}