html,body{
    background: #000;
}
.titlebox{ 
    position: relative;
    float: left;
    width: 1200px;
    height: 71px;
    font-family: "MZDzt";
    font-size: 62px;
    color: #fff;
    letter-spacing: 3px;
    text-align: center;
    margin: 240px 0 50px 0;
    background: url(../images/index/logo.png) no-repeat center center;
    /*background-image: -webkit-linear-gradient(left, rgba(255,255,255,.6), rgba(255,255,255,.8) 25%, rgba(255,255,255,1) 50%, rgba(255,255,255,.8) 75%, rgba(255,255,255,.6));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 2s infinite linear;*/
}
@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0
    }
    to {
        background-position: -100% 0
    }
}

.search_box{ float: left; width: 1110px; height: 80px; background: #eeeef3; border-radius: 50px; margin: 0 45px 140px 45px;}
.search_box .txt_search{ float: left; width: 960px; height: 60px; background: transparent; border: 0; font-size: 18px; color: #000; line-height: 60px; text-indent: 45px; margin: 10px;}
.search_box .btn_search{ float: left; width: 120px; height: 60px; background: #293e97 url(../images/icon_03.png) no-repeat 29px center; border: 0; border-radius: 50px; font-size: 16px; color: #fff; cursor: pointer; text-indent: 32px; margin: 10px 0 0 0;}

.search_boxbg{
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    min-width: 1200px;
    height: 581px;
    overflow: hidden;
}
.search_boxbg .pic li{ float: left; width: 100%; height: 581px;}

.sortbg{
    position: relative;
    float: left;
    width: 100%;
    height: 410px;
    background: #dfdfe3;
}
.sortbg ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.sortbg ul li{ width: 20%; height: 410px; text-align: center;}
.sortbg ul li:nth-child(2n){ background: #d0d0d9;}
.sortbg ul li p.title{ font-family:'HMSanSC_black'; font-size: 22px; color: #0c0e11; margin: 190px 0 20px 0;}
.sortbg ul li p.icon{ background: url(../images/icon_04.png) no-repeat center center; height: 28px;}
.sortbg .bottombg{ position: absolute; left: 0; bottom: 0; width: 100%; height: 102px; background: url(../images/index/bottom.png) no-repeat center bottom;}
.sortbg ul li:hover p.title{
    -webkit-animation:fadeinT 1.2s ease-out backwards;
    -moz-animation:fadeinT 1.2s ease-out backwards;
    -ms-animation:fadeinT 1.2s ease-out backwards;
    animation:fadeinT 1.2s ease-out backwards;
}

@-webkit-keyframes fadeinT{
    0%{opacity:1;-webkit-transform:translateY(-10px);}
    100%{opacity:1;-webkit-transform:translateY(-10px);}
}
@-moz-keyframes fadeinT{
    0%{opacity:1;-moz-transform:translateY(-10px);}
    100%{opacity:1;-moz-transform:translateY(-10px);}
}
@-ms-keyframes fadeinT{
    0%{opacity:1;-ms-transform:translateY(-10px);}
    100%{opacity:1;-ms-transform:translateY(-10px);}
}
@keyframes fadeinT{
    0%{opacity:1;transform:translateY(-10px);}
    100%{opacity:1;transform:translateY(-10px);}
}