input {
    border: none;
    background: none;
}

input,
textarea {
    font-family: Arial, "微软雅黑";
    outline: 0;
    font-size: 14px;
}

.clear {
    clear: both;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block
}

.yy_tag_I {
    margin: 0 5px
}

.fw {
    margin: 0 auto;
    width: 1180px;
}

.bx-wrapper {
    margin: 0 auto
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
    background-color: #e0a240;
    border: 1px solid #e0a240;
}

.content {
    width: 100%;
    /* background: #F3F3F3; */
}


.module-content{
    width: 80%;
    margin: auto;
}

.content .header p.subtitle {
    color: #656565;
    font-size: 12px;
}
.content .header p.title {
    font-family: "HELVETICANEUELTPRO-THEX", "微软雅黑";
    color: #EAEAEA;
}

 .content .wrapper {
    width: 100%;
    margin-top: 40px;

}

 .projectitem {
    width: 24%;
    height: auto;
    margin-right: 1%;
    margin-bottom: 1%;
    float: left;
    position: relative;
    background: #000
}

 .projectitem {
    margin: 0
}

 .bx-wrapper .bx-pager {
    bottom: -40px
}

 .bx-wrapper .bx-controls-direction {
    display: none
}

 a.more {
    margin-top: 80px
}

.content_list{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.projectitem{
    width: 24%;
    position: relative;
}

.bx-viewport{
    width: 100%;
    overflow: hidden;
    position: relative;
}

#projectlist .projectitem a {
    display: block;
    overflow: hidden
}

#projectlist .projectitem a img {
    float: none;
    width: 100%;
    height: auto;
    transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#projectlist .projectitem a:hover img {
    transform: scale(1.2, 1.2)
}

#projectlist .projectitem a .project_info {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    left: 0;
    top: 0;
    transition: all ease-out .3s;
}

#projectlist .projectitem a:hover .project_info {
    background: rgba(0, 0, 0, .7)
}

#projectlist .projectitem a .project_info p {
    color: #fff;
    padding: 0 20px
}

#projectlist .projectitem a .project_info div {
    position: relative;
    top: 50%;
    margin-top: -15px
}

#projectlist .projectitem a .project_info p.title {
    margin-top: 10px;
    color: rgba(0, 0, 0, 0);
    font-size: 16px;
    transition: all ease-out .3s;
    text-align: center;
}

#projectlist .projectitem a:hover .project_info p.title {
    margin-top: 0px;
    color: #fff;
    font-size: 16px
}

#projectlist .projectitem a .project_info p.subtitle {
    margin-top: 16px;
    color: rgba(0, 0, 0, 0);
    font-size: 12px;
    transition: all ease-out .3s;
}

#projectlist .projectitem a:hover .project_info p.subtitle {
    margin-top: 0px;
    color: #b7b7b7;
}

#projectmore {
    width: 100%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    display: block;
    background: #343434;
    transition: all ease-out .3s;
    text-indent: 0px;
    position: relative;
    z-index: 1
}

#projectmore:hover {
    width: 100%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    display: block;
    background: #e0a240;
    text-indent: -50px;
}

.module-content .description {
    width: 720px;
    text-align: center;
    height: 50px;
    margin: 0 auto;
    font-size: 13px;
    color: #848484;
    line-height: 24px;
    overflow: hidden
}







.projectSubList {
    margin-bottom: 20px;
}
#projectlist .wrapper {
    margin-left: 1%
}
#projectlist .projectitem {
    width: 24%;
    height: auto;
    margin-right: 1%;
    margin-bottom: 1%;
    float: left;
    position: relative;
    background: #000
}
#projectlist .projectitem a {
    display: block;
    overflow: hidden
}
#projectlist .projectitem a img {
    float: none;
    width: 100%;
    height: 150px;
    transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#projectlist .projectitem a:hover img {
    transform: scale(1.2, 1.2)
}

#projectlist .projectitem a .project_info {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    left: 0;
    top: 0;
    transition: all ease-out .3s;
}

#projectlist .projectitem a:hover .project_info {
    background: rgba(0, 0, 0, .7)
}

#projectlist .projectitem a .project_info p {
    color: #fff;
    padding: 0 20px
}

#projectlist .projectitem a .project_info div {
    position: relative;
    top: 50%;
    margin-top: -15px
}

#projectlist .projectitem a .project_info p.title {
    margin-top: 10px;
    color: rgba(0, 0, 0, 0);
    font-size: 16px;
    transition: all ease-out .3s;
}

#projectlist .projectitem a:hover .project_info p.title {
    margin-top: 0px;
    color: #fff;
    font-size: 16px
}

#projectlist .projectitem a .project_info p.subtitle {
    margin-top: 16px;
    color: rgba(0, 0, 0, 0);
    font-size: 12px;
    transition: all ease-out .3s;
}

#projectlist .projectitem a:hover .project_info p.subtitle {
    margin-top: 0px;
    color: #b7b7b7;
}


#projectlist .projectitem .project_info p.title {
    color: #4E4E4E;
    padding: 10px 0px;
}

#projectlist .bx-viewport {
    padding-bottom: 80px;
}

#projectlist .projectitem a .project_info::after {
    width: 0%;
    height: 80px;
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    background-color: #FDD947;
    z-index: -1;
}

#projectlist .projectitem a:hover .project_info::after {
    width: 100%;
}

#projectlist .projectitem a .project_info p.title {
    margin: 0 40px;
    color: #e6e6e6;
    padding: 10px 0px;
}

#projectlist .projectitem a .project_info div {
    position: absolute;
    height: 80px;
    width: 100%;
    bottom: -80px;
    margin-top: 0;
    top: auto;
    background-color: rgb(62, 62, 62);
    transition: all 0.3s ease-out 0s;
}

#projectlist .projectitem a:hover .project_info div {
    background-color: transparent;
}

#projectlist .projectitem a:hover .project_info p.title {
    color: #545454;
}

#projectlist .projectitem a .project_info p.subtitle {
    margin-top: 0;
    color: #7E7E7E;
}

#projectlist .projectitem a:hover .project_info p.subtitle {
    color: #7B7B7B;
}

#projectlist .projectitem {
    margin-bottom: 100px;
}

#projectlist .projectitem a:hover .project_info {
    background: transparent;
}