.xc_layout{
     min-width: 320px;
     max-width: 640px;
     margin: 0 auto;
     height: 1000px;

}
.xc_layout .xc_header{
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 50px;

}
.xc_layout .xc_header .xc_header_box{
     min-width: 320px;
     max-width: 640px;
     margin: 0 auto;
     height: 50px;
     background: #f5f5f5;
     position: relative;
}
.xc_layout .xc_header .xc_header_box form{
     padding-right: 40px;
     padding-left: 10px;
}
.xc_layout .xc_header .xc_header_box form .icon_search{
     width: 20px;
     height: 20px;
     position: absolute;
     left: 17px;
     top:11px;
     background: url("../images/un_ico_home_v620.png");
     background-size: 104px 327px;
     background-position: -59px -276px;
}
.xc_layout .xc_header .xc_header_box form  input{
     width: 100%;
     height: 30px;
     border-radius: 5px;
     border: 1px solid #999;
     margin-top: 5px;
     padding-left: 25px;
}
.xc_layout .xc_header .xc_header_box .mine::before{
     content: '';
     display: block;
     width: 25px;
     height: 25px;
     background: url("../images/un_ico_home_v620.png");
     background-size:104px 327px;
     background-position: -59px -193px;
}
.xc_layout .xc_header .xc_header_box .mine{
     position: absolute;
     right: 5px;
     top: 5px;
}

/*携程轮播图区域*/
.xc_banner{
     width: 100%;
     overflow: hidden;
}
.xc_banner ul{
     width: 1000%;
}
.xc_banner ul li{
     width: 10%;
     float: left;
}
.xc_banner ul li a{
      width: 100%;
      display: block;
}
.xc_banner ul li a img{
     display: block;
     width: 100%;
}

/*主区域*/
.main{
     padding: 5px;
}
.main .item{
     margin-bottom: 5px;
     height: 90px;
     border-radius: 5px;
     display: flex;
}
.main .item .pub{
    flex: 1;
    text-align: center;
}
.main .item .sub{
    flex: 2;
}
.main .item .pub a{
    height: 90px;
    line-height: 90px;
    color: #fff;
}

.main .item .sub a{
     width: 50%;
     display: block;
     float: left;
     text-align: center;
     height: 45px;
     line-height: 45px;
     color: #fff;
     border-left: 1px solid #fff;
     border-bottom: 1px solid #fff;
}
.main .item .sub a:nth-last-child(-n+2){
    border-bottom:none;
}

.item:nth-child(1){
    background: hotpink;
}
.item:nth-child(2){
    background: blueviolet;
}
.item:nth-child(3){
    background: forestgreen;
}
.item:nth-child(4){
    background: greenyellow;
}

.main .item:last-of-type a{
     width: 33.333%;
}

.nav{

}
.nav ul{
    background: #f5f5f5;
    overflow: hidden;
}
.nav ul li{
     float: left;
     width: 25%;
     height: 50px;
     line-height: 50px;
     text-align: center;
     border-bottom: 1px solid #ccc;
     border-right: 1px solid #ccc;
}
.nav ul li:nth-child(4n){
     border-right: none;
}
.nav ul li:nth-last-child(-n+4){
      border-bottom: none;
}