﻿.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.databasebox {
    /*border-radius: 0;*/
}
.features {
    margin-top: 40px;
    margin-bottom: 60px;
    /*display: none;*/
}

.db-list {
    max-width: 1200px;
    width: 94%;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 20px;
}
.db-list ul {
    flex-wrap: nowrap;
}
.db-list ul li {
    width: 220px;
    height: 165px;
    position: relative;
    /*box-shadow: 0px 0px 20px 0px rgba(0, 21, 41, 0.05);*/
}
.db-list ul li img {
    width: 220px;
    height: 165px;
}

.db-list ul li a .text {
    position: absolute;
    z-index: 44;
    width: auto;
    height: auto;
    left: 32px;
    top: 30px;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.7);
    transition: all 0.5s ease 0s;
}
.db-list ul li a:hover .text {
    color: rgba(0, 0, 0, 0.99);
    transition: all 0.5s ease 0s;
}
.db-list ul li a .cover {
    position: absolute;
    z-index: 22;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.db-list ul li a:hover .cover {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.7;
    transition: all 0.5s ease 0s;
}
.db-list ul li .pic {
    opacity: 0.8;
}





.home-res-title {
    max-width: 1200px;
    width: 94%;
    margin: 0 auto;
    padding-bottom: 16px;
}

.home-res-title .res-title {
    font-size: 26px;
    line-height: 40px;
    color: #333;
}

.home-res-title a {
    padding-right: 4px;
    font-size: 18px;
    line-height: 40px;
    /*color: rgba(155, 155, 155, 1);*/
    color: #EC6D74;
}

.home-res-title a:hover {
    padding-right: 0px;
    font-size: 18px;
    line-height: 40px;
    /*color: rgba(156, 127, 102, 1);*/
    color: #EC6D74;
}

.home-res-list {
    /*max-width: 1200px;*/
    /*min-width: 1200px;*/
    max-width: 1200px;
    width: 94%;
    margin: 0 auto;
}

.home-res-list ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    padding-bottom: 30px;
}

.home-res-list ul li {
    box-sizing: border-box;
    position: relative;
    padding-bottom: 30px;
}

.home-res-list ul li img {
    /*width: 100%;*/
    /*min-width: 100%;*/
    /*height: 150%;*/
}

.home-res-list ul li .pic {
    display: block;
    background-color: #eee;
    position: relative;
    overflow: hidden;
}

.home-res-list ul li .pic img {
    left: 50%;
    top: 50%;
    /*position: absolute;*/
    /*min-width: 100%;*/
    /*min-height: 100%;*/
    transform: translate(-50%, -50%) scale(1);
    transition: all 1s ease 0s;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -webkit-transition: all 1s ease 0s;
}

.home-res-list ul li a:hover .pic {
    background-color: #fef6e9;
}

.home-res-list ul li a:hover .pic img {
    transform: translate(-50%, -50%) scale(1.3);
    transition: all 1s ease 0s;
    -webkit-transform: translate(-50%, -50%) scale(1.3);
    -webkit-transition: all 1s ease 0s;
}

.home-res-list ul li a .title {
    padding-bottom: 4px;
    padding-top: 14px;
    font-size: 17px;
    line-height: 24px;
}

.home-res-list ul li a:hover .title {
    color: #EC6D74;
}

.home-res-list ul li .from {
    font-size: 14px;
    line-height: 22px;
    color: rgba(155, 155, 155, 1);
    padding-top: 0px;
}

.home-res-list ul li .from a {
    color: rgba(155, 155, 155, 1);
}

.home-res-list ul li .from a:hover {
    color: #EC6D74;
    /*padding-left: 4px;*/
}


.res-tuiwen-list {
    padding-top: 60px;
    padding-bottom: 20px;
}

.res-haibao-list {
    padding-top: 50px;
    padding-bottom: 20px;
}

.res-h5-list {
    padding-top: 50px;
    /*padding-bottom: 20px;*/
}

.res-ppt-list {
    padding-top: 50px;
    /*padding-bottom: 0px;*/
}

.res-shortvideo-list {
    padding-top: 50px;
    padding-bottom: 60px;
}







/*推文案例*/
.list-tuiwen-2 ul {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-top: -10px;
    padding: 20px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    /*padding-bottom: 30px;*/
}
.list-tuiwen-2 ul li {
}
.list-tuiwen-2 ul a {
    /*width: auto;*/
    /*height: 200px;*/
    /*display: block;*/
    /*background: #0B69D3;*/
}
.list-tuiwen-2 ul li a {
    border-top: solid 3px rgba(221, 221, 221, 1);
    box-shadow: 0px 0px 20px 0px rgba(0, 21, 41, 0.05);
    transition: all 0.3s ease 0s;
    display: block;
    width: 225px;
    /*height: 140px;*/
    /*height: 440px;*/
    background: #FFFFFF;
    margin-bottom: 30px;
    /*padding: 17px 20px 20px 20px;*/
    box-sizing: border-box;
}
.list-tuiwen-2 ul li a:hover {
    border-top: solid 3px #EC6D74;
    box-shadow: 0px 0px 20px 0px rgba(0, 21, 41, 0.20);
    transition: all 0.3s ease 0s;
}
.list-tuiwen-2 ul li img {
    width: 100%;
}
.list-tuiwen-2 ul a li .pic {
    width: 225px;
    height: 225px;
    margin-top: -17px;
    margin-left: -20px;
    display: block;
    background-color: #eee;
    position: relative;
    overflow: hidden;
}
.list-tuiwen-2 ul a li .pic img {
    left: 50%;
    top: 50%;
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 1s ease 0s;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -webkit-transition: all 1s ease 0s;
    width: 100%;
}
.list-tuiwen-2 ul a:hover li .pic img {
    left: 50%;
    top: 50%;
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%) scale(1.3);
    transition: all 1s ease 0s;
    -webkit-transform: translate(-50%, -50%) scale(1.3);
    -webkit-transition: all 1s ease 0s;
    width: 100%;
}
.list-tuiwen-2 ul li a .title {
    /*padding-bottom: 6px;*/
    /*padding-top: 20px;*/
    font-size: 17px;
    line-height: 24px;
    transition: all 0.3s ease 0s;
    padding: 17px 20px 6px 20px;
    box-sizing: border-box;
}
.list-tuiwen-2 ul li a:hover .title {
    color: #EC6D74;
    transition: all 0.3s ease 0s;
}
.list-tuiwen-2 ul li .from {
}
.list-tuiwen-2 ul li .from {
    font-size: 14px;
    line-height: 22px;
    color: rgba(155, 155, 155, 1);
    /*padding-top: 2px;*/
    padding: 0px 20px 30px 20px;
    box-sizing: border-box;
}
.list-tuiwen-2 ul li .from a {
    color: rgba(155, 155, 155, 1);
}
.list-tuiwen-2 ul li .from a:hover {
    color: #EC6D74;
    /*padding-left: 4px;*/
}













/*海报案例*/
.list-haibao ul {
    width: 100%;
}

.list-haibao ul li {
    /*width: 225px;*/
    width: 180px;
    min-width: 190px;
}

.list-haibao ul li img {
    width: 100%;
}

.list-haibao ul li .pic {
    /*width: 225px;*/
    /*height: 450px;*/
    width: 180px;
    height: 320px;
}

.list-haibao ul li .pic img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
}

.list-haibao ul li a:hover .pic {
}

.list-haibao ul li a:hover .pic img {
}

.list-haibao ul li .title {
    /*padding-bottom: 4px;*/
}

.list-haibao ul li .from {
    /*padding-top: 0px;*/
}


/*动图案例*/
.list-person ul {
    width: 100%;
}

.list-person ul li {
    width: 160px;
}

.list-person ul li img {
    width: 100%;
}

.list-person ul li a .pic {
    width: 160px;
    height: 160px;
    border-radius: 100px;
    border: 3px solid #FFF;
    box-sizing: border-box;
    transition: all 0.3s ease 0s;
}

.list-person ul li a .pic img {
    position: absolute;
    /*min-width: 100%;*/
    min-height: 100%;
    width: 100%;
}

.list-person ul li a:hover .pic {
    border: 3px solid #EC6D74;
    transition: all 0.3s ease 0s;
    /*box-shadow: 0px 0px 20px 0px rgba(0, 21, 41, 0.20);*/
    box-shadow: 0px 0px 20px 0px rgba(236, 109, 116, 0.20);
}

.list-person ul li a:hover .pic img {
}

.list-person ul li .title {
    text-align: center;
}

.list-person ul li .from {
    text-align: center;
}


/*PPT案例*/
.list-ppt ul {
    width: 100%;
}

.list-ppt ul li {
    width: 288px;
}

.list-ppt ul li img {
}

.list-ppt ul li .pic {
    width: 100%;
    height: 170px;
}

.list-ppt ul li .pic img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
}

.list-ppt ul li a:hover .pic {
}

.list-ppt ul li a:hover .pic img {
}

.list-ppt ul li .title {
}

.list-ppt ul li .from {
}


/*短视频案例*/
.list-shortvideo ul {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    /*padding-bottom: 50px;*/
}

.list-shortvideo ul li {
    box-sizing: border-box;
    /*width: 20%;*/
    width: 240px;
    height: 240px;
    border: solid 1px #fff;
    position: relative;
}

.list-shortvideo ul li .dbimg {
    width: 100%;
    padding-top: 100%;
    display: block;
    background-color: #ddd;
    position: relative;
    overflow: hidden;
}

.list-shortvideo ul li .dbimg img {
    position: absolute;
    width: 100%;
    min-height: 100%;
    /*width: 100%;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 1s ease 0s;
    /*-webkit-transform: translate(-50%, -50%) scale(1);*/
    /*-webkit-transition: all 2s ease 0s;*/
}

.list-shortvideo ul li .dbname {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    padding: 16px;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    transition: all 0.5s ease 0s;
}

.list-shortvideo ul li .dbname .name {
    padding-top: 12px;
    line-height: 24px;
    font-size: 17px;
    color: #f8f8f8;
}

.list-shortvideo ul li .dbname .from {
    padding-top: 4px;
    font-size: 14px;
    color: #eeddc4;
    word-break: keep-all;
    white-space: nowrap;
}

.list-shortvideo ul li .dbname .from a {
    color: rgba(255, 255, 255, 0.5);
}

.list-shortvideo ul li .dbname .from a:hover {
    color: #EC6D74;
}

.list-shortvideo ul li a:hover .dbimg {
    background-color: #fef6e9;
}

.list-shortvideo ul li a:hover .dbimg img {
    transform: translate(-50%, -50%) scale(1.3);
    transition: all 1s ease 0s;
    /*-webkit-transform: translate(-50%, -50%) scale(1.3);*/
    /*-webkit-transition: all 2s ease 0s;*/
}

.list-shortvideo ul li a:hover .dbname {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
    transition: all 0.5s ease 0s;
    padding-bottom: 22px;
}

.list-shortvideo ul a:hover {
    color: #fff;
}





















/*组合筛选开始*/
.db-selectbox {
    padding-top: 30px;
    padding-bottom: 40px;
    background: #FFF;
}

.db-select {
    width: 1200px;
    /*margin: 0 auto;*/
    margin-top: 15px;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.db-select:first-child {
    margin-top: 25px;
}

.db-select .title {
    width: 90px;
    font-size: 16px;
    line-height: 35px;
}

.db-select .cont {
    flex: 1;
}

/*资源类型筛选开始*/
.db-select .cont ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.db-select .cont ul li {
    box-sizing: border-box;
    /*width: 100px;*/
    height: 36px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.db-select .cont ul a {
    box-sizing: border-box;
    /*width: 100px;*/
    display: inline-block;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #EC6D74;
    border: solid 1px #EC6D74;
    border-radius: 18px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
}

.db-select .cont ul a:hover {
    background-color: #F9E7E8;
    color: #EC6D74;
}

.db-select .cont ul a.active {
    background-color: #EC6D74;
    color: #FFF;
}

.db-select .cont ul a.active:hover {
    background-color: #EC6D74;
    color: #FFF;
}








.menu-list {
    width: 1200px;
    margin: 0 auto;
    /*background: #0B69D3;*/
}
.menu-list ul {
    width: 1200px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.menu-list ul li {
    margin: 0 5px;
    width: auto;
}


.SecondNav {
    width: 100%;
    height: 55px;
    overflow: hidden;
    /*margin-top: 35px;*/
    /*background-color: #ff0;*/
}
.SecondNav ul {
    width: 100%;
    height: 55px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
}
.SecondNav ul li {
    width: 100%;
    height: 55px;
    /*border-top: solid 5px #FFBA00;*/
    margin-right: 10px;
    /*box-sizing: border-box;*/

}
.SecondNav ul li:last-child {
    margin-right: 0;
}
.SecondNav ul li a {
    width: 100%;
    height: 55px;
    margin-top: 5px;
    /*border-top: solid 5px rgba(255, 255, 255, 0);*/
    display: inline-block;
    background-color: #EC6D74;
    color: #FFF;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    font-weight: 400;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px 8px 0 0;
    box-shadow: 0px 0px 20px 0px rgb(0 21 41 / 5%);
}
.SecondNav ul li a:hover {
    /*margin-top: 1px;*/
    /*border-top: solid 4px #0B69D3;*/
    /*border-top: solid 5px #FFBA00;*/
    background-color: #FFF;
    color: #EC6D74;
    -webkit-tap-highlight-color: transparent;
}
.SecondNav ul li a.active {
    margin-top: 1px;
    border-top: solid 4px #EC6D74;
    background-color: #FFF;
    color: #444;
    box-shadow: 0px 0px 20px 0px rgb(0 21 41 / 5%);
}






.relate-list-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 1200px;
    margin: 0 auto;
}
.relate-list-box li {
    width: 585px;
    /*min-height: 150px;*/
    box-sizing: border-box;
    margin-bottom: 30px;
}
.relate-list-box li a.relate-link {
    border-top: solid 3px rgba(221, 221, 221, 1);
    box-shadow: 0px 0px 20px 0px rgba(0, 21, 41, 0.05);
    transition: all 0.3s ease 0s;
    display: block;
    background-color: #FFF;
}
.relate-list-box li a.relate-link:hover {
    border-top: solid 3px #EC6D74;
    box-shadow: 0px 0px 20px 0px rgba(0, 21, 41, 0.20);
    transition: all 0.3s ease 0s;
}
.relate-list-box li .relate-info {
    width: 100%;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding: 0 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #EEE;
}
.relate-list-box li .relate-title {
    font-size: 18px;
}
.relate-list-box li a .relate-date, .relate-list-box li a:hover .relate-date {
    font-size: 14px;
    color: #CCC;
}
.relate-list-box li ul.relate-pic-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 25px 15px 20px 15px;
    /*height: 120px;*/
    overflow: hidden;
}
.relate-list-box li ul.relate-pic-list li {
    width: 125px;
    /*width: 117px;*/
    height: 80px;
    overflow: hidden;
    margin: 0 10px;
    margin-bottom: 10px;
    display: block;
    background-color: #eee;
    position: relative;
}
.relate-list-box li ul.relate-pic-list li a.relate-pic-link img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    /*height: 120px;*/
    left: 50%;
    top: 50%;
    /*position: absolute;*/
    /*min-width: 100%;*/
    /*min-height: 100%;*/
    transform: translate(-50%, -50%) scale(1);
    transition: all 1s ease 0s;
    /*-webkit-transform: translate(-50%, -50%) scale(1);*/
    /*-webkit-transition: all 1s ease 0s;*/
}
.relate-list-box li ul.relate-pic-list li a.relate-pic-link:hover img {
    transform: translate(-50%, -50%) scale(1.3);
    transition: all 1s ease 0s;
    /*-webkit-transform: translate(-50%, -50%) scale(1.3);*/
    /*-webkit-transition: all 1s ease 0s;*/
}








.nav-list {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 10px;
}
.nav-list .databasetitle {
    padding-top: 0px;
}
.nav-list .databasetitle span {
    font-size: 24px;
    opacity: 0.2;
    /*padding: 0 20px;*/
}
.nav-list .databasetitle .text {
    font-size: 24px;
}
.nav-list ul {
    width: 1200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 20px;
}
.nav-list ul li {
    width: 200px;
    /*height: 36px;*/
    box-sizing: border-box;
}
.nav-list ul li a {
    margin: 5px 10px;
    width: 180px;
    /*margin-bottom: 10px;*/
    /*width: 100%;*/
    /*height: 100%;*/
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 16px;
    display: block;
    box-sizing: border-box;
    /*background-color: #f9e7e8;*/
    background-color: #FFEFF0;
    border-radius: 100px;
}
.nav-list ul li a:hover {
    color: #FFF;
    background-color: #EC6D74;
}

.nav-list ul li a.active {
    color: #FFF;
    background-color: #EC6D74;
}
.nav-list ul li a.topic-on {
    background-color: #FFDCDE;
}
.nav-list ul li a.topic-on:hover {
    color: #FFF;
    background-color: #EC6D74;
}








