/* 关键 BS.v4.11 */
*,
*::before,
*::after {
  box-sizing: border-box;
}


/* 开始 响应式 responsive  */
/* 注意 有顺序 mobile first[移动优先]*/

/* 列表 */
.ci2 li{width: 50%;}
.ci3 li{width: 33%;}
.ci4 li{width: 25%;}
.ci5 li{width: 20%;}


/* 宽度 */
.w100{width: 100%;}
.ws20{width: 20%;}
.ws25{width: 25%;}


/* 间距 */


/* Display */
.ds0{display: none;}
.ds1{display: block;}



/*       clinent     Ver      */
/* 2xl   412x723   Chrome/100 */
/* 3axl  432x764   Chrome/101 */
/* Nxs5  360x512   Chrome/71  */

/* 竖屏 CI 400 < 720 默认 */
@media (min-width: 400px) { 

    /* 新设备高分屏 字体略大 */
    body{font-size: 18px;}
    .button{ width: 30%; }
}

/* 横屏 S:Small */
@media (min-width: 720px) {

    /* 列表 */
    .cs2 li{width: 50%;}
    .cs3 li{width: 33%;}
    .cs4 li{width: 25%;}
    .cs5 li{width: 20%;}

}

/* 平板 M:Middle */
@media (min-width: 960px) {

    .vary{ width:80%; } 
    .foot{ text-align: left; }

    /* 显示 socials links */
    .socials{ display: block; }
    .siteinfo{ float: left; width: 80%;}
    

    /* 列表 */
    .cm2 li{width: 50%;}
    .cm3 li{width: 33%;}
    .cm4 li{width: 25%;}
    .cm5 li{width: 20%;}


    .wm20{width: 20%;}
    .wm80{width: 80%;}

    .dm0{display: none;}
    .dm1{display: block;}

    /* 重要 p 仅用于段落 宽屏文字段落缩进 */
    /* 文字 列表应同步 */
    /* .indent {padding: 0 1em;} */

    article{ padding: 3em; }
    .button{ width: 25%; }
}


/* PC 端 */
/* L:Large <1200 全宽 */
/* 有趣 1200*0.8 = 1200/1.25 = 960 */
@media (min-width: 1200px) {

    /* 列表 */
    .cl2 li{width: 50%;}
    .cl3 li{width: calc(100%/ 3);}
    .cl4 li{width: 25%;}
    .cl5 li{width: 20%;}


    /* 三分li */
    /* 会除不尽 导致最后一个 li换行 必须多减0.1*/
    /* 右侧微弱错位 -> 不完美 */
    /* .cl3 li{width: calc((100% - 2.1em) / 3);} */
    /* .cl3 li:not(:first-child){margin-left: 1em;} */

    /* 左右两侧完全对齐 两间隙微弱差别 -> 完美*/
    /* 定高避免参差不齐 */
    .listview li{width: calc((100% - 2em) / 3); height: 12em;}
    .listview li:first-child{margin-right: 1em;}
    .listview li:last-child{float:right;}


    article{ padding: 3em 5em; }

}

/* CX:Extra 1200 < 1600 */
/* 有趣 1600*0.8 = 1600/1.25 = 1280 */
/* 优点 100/125/150 宽度不变  */
@media (min-width: 1600px) {

    /* .vary{ width:90%; } */

}