#system { padding:0; margin:0 auto; width:100% }
#system .sys-title {display: flex; justify-content: center; align-items: center; background-color:#f6f6f6; border-bottom:1px solid #d8dde6;font-weight: bold;}
#system .sys-title strong {font-size: 18px;line-height: 36px; }
#system .sys-row {display: flex;}

/*表頭、格子*/
#system .head, #system .grid-1, #system .grid-2, #system .grid-4 {display: flex;;}
#system .head { justify-content: center; align-items: center;}
#system .grid-1 {padding: 5px;align-items: center;} /*第1格*/
#system .grid-2 {flex-direction: column;} /*合併兩格*/
#system .grid-4 {padding: 5px;align-items: center}/*最後1格*/
/*內容樣式*/
#system .context {border-bottom:1px solid #d8dde6;}

#system .context .grid-2 > *{border-bottom:1px dotted #d8dde6; margin-bottom:-1px }
    #system .grid-2 .os, #system .grid-2 .bw {display: flex;padding: 5px;}
    #system .grid-2 .os {width:100%;}
    #system .grid-2 .os small { display:block; font-size:78%;}
    #system .grid-2 .bw {width:100%;}
    #system .grid-2 .bw a {display: flex;align-items: flex-start;}
    #system .grid-2 .bw a img {padding: 0 3px 3px 0;}
#system .context .grid-4 {border-bottom:1px dotted #d8dde6; margin-bottom:-1px}

#system #notice {font-size:14px; padding-top:8px; padding-bottom:0}
#system #notice ol {padding-left:18px }
#system .note4 { color:#F00951;}

@media (max-width:991px) {
#system .sys-title { display: none }
#system .context { border:1px solid #76b9d6}
#system .head { padding:3px 6px 0;background-color:#76b9d6; color:#fff; width: 100%;}
#system .grid-4 { padding:3px 6px 0;background-color:#f5f8fa; color:#76b9d6; width: 100%;}
#system .sys-row {flex-direction: column;}
#system .grid-1 {justify-content: center;}
#system .grid-2 {order:2}
#system .grid-2 .os, #system .grid-2 .bw {flex-wrap: wrap;}
#system .grid-2 .os:before { color:#76b9d6;content:"OS："; display:flex; width:66px;justify-content: flex-end;}
#system .grid-2 .bw:before { color:#76b9d6; content:"瀏覽器："; display:flex; width:66px;justify-content: flex-end;}
#system .grid-2 .bw > div { width: calc(100% - 66px);}
/*#system .note4 { color:#424b52!important;padding: 0 10px 0 0;}*/
#system .note4 { padding: 0 10px 0 0;}
}


@media (min-width: 992px)  {
#system { padding:0}
#system .head { width:14%;}
#system .context .head {background-color:#f5f8fa; color:#76b9d6; border-right:2px solid #76b9d6;}
#system .grid-1 {width: 20%; padding: 5px;align-items: center;}
#system .grid-2 {flex:1; flex-direction: column;}
#system .grid-4 {width: 25%;padding: 5px;align-items: center}

#system .context .grid-2 > *{}
    #system .grid-2 .os, #system .grid-2 .bw {display: flex;flex-direction: column; padding: 5px; justify-content: center;}
    #system .grid-2 .os {width:40%;}
    #system .grid-2 .bw {width: 60%; }
    #system .context .grid-2 .bw {border-left:1px solid #d8dde6;min-height: 54px;}
#system .context .grid-4 {border-left:1px solid #d8dde6;}
}


.ALL_center{ /*水平+垂直置中*/
 display: flex;
  justify-content: center; /*水平置中*/
  align-items: center; /*垂直置中*/
  /*height: 100vh; 把高度設為與瀏覽器視窗同高，如果沒設定這一行，垂直置中不會有作用。*/
}

.horizontal_center{ /*水平置中*/
 display: flex;
  justify-content: center; /*水平置中*/
  /*height: 100vh; 把高度設為與瀏覽器視窗同高，如果沒設定這一行，垂直置中不會有作用。*/
}

.vertical_center{ /*垂直置中*/
 display: flex;
 align-items: center; /*垂直置中*/  
 padding: 2.6% 5%;
  /*height: 100%; 把高度設為與瀏覽器視窗同高，如果沒設定這一行，垂直置中不會有作用。*/
}

.test-spacing{
margin-right: 2%;
}

.SYS{
font-weight:bold;
margin-right: 30px
}

.SYS-right{
color: #424b52;
font-weight:bold;
margin-right: 30px
}

@media (max-width:992px) {
.vertical_center{ 
 display: block;
 text-align: center;  /* 文字水平置中*/
 }

.test-spacing {
  display: block;   /* 設定inline也可以*/
}


.SYS{
 display: block;
 margin-right: 0px
}

.SYS-right{
 margin-right: 10px
}
.equipment{
margin-top:3%
}

#detect2 .MyIP{
/*color: #424b52!important;
font-weight:normal!important;*/
}

#detect2 .ua{
/*color: #424b52!important;
font-weight:normal!important*/
}
}


@media (max-width:502px) {
.vertical_center{ 
 display: inline-block;
 text-align: center;  /* 文字水平置中*/
 padding: 4.5% 5%;
 }

.test-spacing {
  display: inline-block;   /* 設定inline也可以*/
}

.SYS{
 display: block;
 margin-right: 0px
}

.SYS-right{
 margin-right: 10px
}
.equipment{
margin-top:3%
}
}