html,body{
    margin: 0;padding: 0;
}
body{min-width:1226px}
a{
    text-decoration: none;
    color: #fff;
}

*{
    font-family: "Noto Sans SC";
}

/* banner */
.banner{
    width:100%;
    height: 300px;
    background: url(../images/banner.jpg) no-repeat center;
    overflow: hidden;
}

.banner .Btn{
    width:220px;
    height: 55px;
    margin: 205px auto 0 auto;
    cursor: pointer;
}
/* banner */


/* 具体方案展示 */
.part03{
    width:1200px;
    height: 1045px;
    background: #fff;
    overflow: hidden;
    margin: 0 auto;
}

ul {
    margin: 0;
    padding: 0;

}
.clearfloat {
    zoom: 1;
}
.clearfloat::after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}

.tab-list {
    position: relative;
}

.tab-list .tab-itom {
    float: left;
    list-style: none;
    margin:0 -1px;
}

.tab-itom .test-label {
    position: relative;
    display: block;
    width: 302px;
    height: 104px;
    line-height: 104px;
    font-size: 30px;
    text-align: center;
    color: #444444;
    background: url(../images/tab.png) no-repeat;
    cursor: pointer;
}

.tab-itom .tab-box {
    /* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
    position: absolute;
    left: 59px;
    top: 175px;
    width: 1082px;
    height: 566px;
    /* 设置层级最低方便选中状态遮挡 */
    z-index: 0;
}
/* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
input[type="radio"] {
    position: absolute;
    opacity: 0;
}
/* 利用选择器实现  tab切换 */

/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked + .test-label {
    /* 为了修饰存在的边框背景属性 */
    color: #fff;
    background: url(../images/tab_active.png) no-repeat;
    /* 为了修饰存在的层级使下边框遮挡下方div的上边框 */
    z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked ~ .tab-box {
    /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
    z-index: 5;
}