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


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

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


@media (min-width: 768px) {
    nav > li > ul > li{ width: 25%; }
    section{
        padding: 1em 3em;
    } 


    /* 切换搜索样式 */
    .search{ border: none; }

    .search .keybox{ 
        width: 80%; 
        border: .05em #333 solid;
    
    }


    /* search 显示 button */
    .search .submit{
        padding: .75em 2em;
        width: 18%;
        color: #eee;
        background: #333;
        /* background-image: none; */
    }
    .search .submit span{display: inline;}


    .foot{
        padding-left: 3em;
        text-align: left;
    }
    .foot p{ margin: 0;}    

}


/* CM:Middle <1200 全宽 */
/* 有趣 1200*0.8 = 1200/1.25 = 960 */
@media (min-width: 1201px) {
    header .logo{width: auto; }
    nav{
        float:left; width: auto;
        /* 使子集不继承，保持全宽 relative 则与主菜单等宽 */
        position:static; top:0;
        background: none;
    }
    nav > li{width: auto; border: none;}
    
    nav > li > ul{
        position: absolute; width: 100%;
        left: 0; top:3em;
    }
    nav > li > ul > li{ width: 20%; }
    


    /* section 用于正文 有 padding */
    /* vary 通用 无 padding */
    /* section{ width:90%; } */
    .vary{ width:90%; }


    .foot{ padding-left: 0;}
    .foot .info a{ font-size: .75em; }


}

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

    body{
        /* font-size:20px;  */
        line-height: 1.5em;
    }

    /* section{width:80%;} */
    .vary{ width:80%; }   
    section{
        padding: 1em 5em;
    }


}


/* CX:Extra 1600 < 1920 */
/* 有趣 1920*0.8 = 1925/1.25 = 1536 */
/* 优点 宽屏 放大 125% 宽度不变只是字号放大 */
@media (min-width: 1536px) {

}





/* 1600 下 区分横屏竖屏 */
/* @media (max-height: 900px) {

    section{width:80%;}
    .vary{ width:80%; }
} */