html { font-size: 62.5%;}
body {margin: 0 auto;font-family: 'Microsoft YaHei', arial, helvetica, sans-serif;font-size: 12px;font-size: 1.2rem;height: 100%;background:#fff;width:100%;max-width:1920px;margin:0 auto; overflow-x:hidden;color: #333;}
* { margin: 0px; padding: 0px; -moz-box-sizing: border-box; box-sizing: border-box; }
::selection { color: #fff; background: #3A5A97; }
img {border: none; vertical-align: middle; max-width: 100%;}
ul li {list-style-type: none;}
div{position: relative;display: block;}
ul, form, p, a, img, table, tr, td, li, dd, dt, dl, span {margin: 0;padding: 0;list-style: none;}
embed, video, iframe { max-width: 100%; }
input[type="submit"], textarea[type="submit"] { cursor: pointer; }
input[type="checkbox"], textarea[type="checkbox"] { cursor: pointer; }
input[type="radio"], textarea[type="radio"] { cursor: pointer; }
input, textarea, select {font-size: 14px; font-size: 1.4rem; border: none; outline: none; background: none;font-family: arial;}
input:focus, textarea:focus, select:focus { outline: none; }
textarea { resize: none; }
.h1, .h2, .h3, h1, h2, h3{margin: 0;padding: 0;font-weight: normal;}
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
a {text-decoration: none;color: #333;outline: none;transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;-webkit-transition: 0.5s;display: inline-block; }
a:hover,a.active,a:focus {color: #3A5A97;text-decoration: none;transition: 0.5s ease-in-out;}
a:hover {text-decoration: none;color: #3A5A97;outline: none;transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;-webkit-transition: 0.5s;cursor: pointer; }
a:link{text-decoration: none;}
a:visited{text-decoration: none;}
a, button {-webkit-transition: all .5s ease 0s;transition: all .5s ease 0s;text-decoration: none;background-color: transparent;border: 0;cursor: pointer;}
embed, video, iframe {max-width: 100%;}
.mar0{margin: 0 !important;}.padd0{padding: 0 !important;}
.iconfont{font-size: 20px; text-align: center; line-height: 1; }
.flo-left{float: left;}.flo-right{float: right;}.clear{clear: both;}
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.fix { *zoom: 1; }
.fix:after, .fix:before { display: block; content: "clear"; height: 0; clear: both; overflow: hidden; visibility: hidden; }
.posi-rela{position: relative;}.posi-abso{position: absolute;}.posi-fix{position: fixed;}
.text-center{text-align: center;}.text-left{text-align: left;}.text-right{text-align: right;}
.contain{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (min-width:768px){.contain{width:750px;}}
@media (min-width:992px){.contain{width:980px;}}
@media (min-width:1260px){.contain{width:1230px;}}

.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (min-width:768px){.container{width:750px;}}
@media (min-width:992px){.container{width:980px;}}
@media (min-width:1260px){.container{width:1230px;}}
@media (min-width:1460px){.container{width:1430px;}}

.moban-section .template-main .search-box .input::-webkit-input-placeholder {color: #C8C8C8;opacity:1}
.moban-section .template-main .search-box .input::-moz-placeholder {color: #C8C8C8;opacity:1}
.moban-section .template-main .search-box .input:-ms-input-placeholder {color: #C8C8C8;opacity:1}

.flex{display: flex;}.block{display: block;}.inblock{display: inline-block;}
.self-ellipsis {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.self-ellipsis a{display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.self-ellipsis-2 {display: -webkit-box !important;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.self-ellipsis-2 a {display: -webkit-box !important;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.self-ellipsis-3 {display: -webkit-box !important;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.self-ellipsis-3 a {display: -webkit-box !important;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.self-ellipsis-4 {display: -webkit-box !important;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.self-ellipsis-4 a {display: -webkit-box !important;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.self-ellipsis-5 {display: -webkit-box !important;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.self-ellipsis-5 a {display: -webkit-box !important;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
a.pic{display: block; text-align: center; position: relative; overflow: hidden;}
.pic img {-webkit-transition: all 550ms;-o-transition: all 550ms;-moz-transition: all 550ms;transition: all 550ms;}
.pic:hover img {-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}
.picimgs a {position: relative;display: block;overflow: hidden;}
.picimgs:hover a::before {right: 50%;left: 50%;width: 0;background: rgba(255, 255, 255, .2);}
.picimgs a::before,.picimgs a::after {position: absolute;content: '';width: 100%;height: 100%;top: 0;left: 0;z-index: 1;background: rgba(255, 255, 255, 0);transition: all 0.7s ease-in-out;}
.picimgs:hover a::after {height: 0;top: 50%;bottom: 50%;background: rgba(255, 255, 255, .2);}
.common-vc { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.common-hc { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }
.common-center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.flex-aj{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
.flex-ac{display: flex;align-items: center;flex-wrap: wrap;}
.flex-list{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;}
.flex-def { display: flex; display: -ms-flexbox; display: -webkit-flex;}
.flex-vertical { -webkit-box-orient: vertical; -webkit-flex-flow: column; flex-flow: column;}
.flex-line { flex: 1; -ms-flex: 1;}
.flex-between { justify-content: space-between;}
.flex-cCenter { align-items: center; }
.item-table {display: table;table-layout: fixed;width: 100%;height: 100%;}
.item-cell {display: table-cell;width: 100%;height: 100%;vertical-align: middle;}

.moban-main{position: relative;width: 100%;background: #f4f4f4;}
.moban-main .banner{position: relative;width: 100%;}
.moban-main .banner .banner-img{position: relative;width: 100%;text-align: center;display: block;} 
.moban-main .banner .banner-img img{display: inline-block;vertical-align: top;width: 100%;}
.moban-section{position: relative;width: 100%;padding: 30px 0 40px;}
.moban-section .moban-menu{position: relative;width: 100%;text-align: center;display: flex;justify-content: center;flex-wrap: wrap;font-size: 0;letter-spacing: 0;}
.moban-section .moban-menu .moban-menu-item{display: inline-block;vertical-align: top;min-width: 140px;margin: 0 15px 10px;}
.moban-section .moban-menu .moban-menu-item .item-title{display: inline-block;vertical-align: top;text-align: center; width: 100%;font-size: 18px;color: #3A5A97;line-height: 30px;padding: 7px 15px;border-radius: 23px;border: 1px solid #3A5A97;}
.moban-section .moban-menu .moban-menu-item .item-title:hover, .moban-section .moban-menu .moban-menu-item.active .item-title{background: #3A5A97;color: #fff;}
.moban-section .templates-main{position: relative;width: 100%;padding-top: 20px;}
.moban-section .templates-main .templates-main-item{position: relative;width: 100%;display: none;}
.moban-section .templates-main .search-box{position: relative;width: 100%;height: 56px;background: #FFFFFF;box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.1);border-radius: 28px;padding-right: 100px;overflow: hidden;}
.moban-section .templates-main .search-box .input{position: relative;width: 100%;height: 100%;font-size: 16px;padding: 13px 30px;color: #333333;line-height: 30px;}
.moban-section .templates-main .search-box .suo{width: 82px;height: 56px;border-radius: 28px;background:none;position:absolute;right: 0;top: 0;bottom: 0; z-index:9999;cursor:pointer;}
.moban-section .templates-main .search-box .sou1{display: inline-block;vertical-align: top;text-align: center; width: 82px;line-height: 56px;height: 56px;background: #3A5A97;border-radius: 28px;font-size: 20px !important;text-align:center;color: #fff;cursor:pointer;font-weight: bold;position:absolute;right: 0px;top: 0;transform: translateY(0); z-index:990}
.moban-section .templates-style{position: relative;width: 100%;padding-top: 30px;}
.moban-section .templates-style .templates-style-line{position: relative;width: 100%;display: flex;flex-wrap: wrap;}
.moban-section .templates-style .templates-style-line>span{display: inline-block;vertical-align: top;color: #262626;font-size: 16px;line-height: 36px;margin-right: 10px;}
.moban-section .templates-style .templates-style-line>div{position: relative;display: flex;flex-wrap: wrap;align-items: center;max-width: calc(100% - 60px);}
.moban-section .templates-style .templates-style-line>div>a {display: inline-block;vertical-align: top;text-align: center;min-width: 80px;color: #262626;font-size: 16px;line-height: 30px;padding: 3px 24px;margin-right: 5px;border-radius: 18px;margin-bottom: 10px;}
.moban-section .templates-style .templates-style-line>div>a:hover, .moban-section .templates-style .templates-style-line>div>a.active{background: #DDE7F0;color: #3A5A97;}

.moban-section .templates-list{position: relative;font-size: 0;letter-spacing: 0;display: flex;flex-wrap: wrap;margin-left: -30px;margin-right: -30px;padding-top: 30px;}
.moban-section .templates-list .templates-list-item{position: relative;display: inline-block;vertical-align: top;width: 33.3333%;padding: 0 30px;margin-bottom: 30px;}
.moban-section .templates-list .templates-list-item .item-box{position: relative;width: 100%;text-align: center;overflow: hidden;}
.moban-section .templates-list .templates-list-item .item-box .item-pic{position: relative;width: 100%;cursor: pointer;overflow: hidden;background: #FFFFFF;box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.1);border-radius: 10px;border: 1px solid #FFFFFF;}
.moban-section .templates-list .templates-list-item .item-box .item-pic img{width: 100%;max-width: 100%;max-height: 465px;display: block;background-size: cover;background-position: center top;transition: ease-out 6s;-moz-transition: ease-out 6s;-o-transition: ease-out 6s;-webkit-transition: ease-out 6s;border-radius: 10px;}
.moban-section .templates-list .templates-list-item .item-box:hover .item-pic img {background-position: center bottom;}
.moban-section .templates-list .templates-list-item .item-box .item-pic .item-pic-cover{border-radius: 10px;position: absolute;left: 0px;top: -120%;width: 100%;height: 100%;background: url(../img/sypcover.png);}
.moban-section .templates-list .templates-list-item .item-box .item-pic .item-pic-cover a{display: block;position: absolute;width: 77px;height: 36px;line-height: 36px;font-size: 14px;color: #3A5A97;background: #DDE7F0;border-radius: 18px;text-align: center;color: #3A5A97;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.moban-section .templates-list .templates-list-item .item-box:hover .item-pic .item-pic-cover{top: 0;}
.moban-section .templates-list .templates-list-item .item-box .item-body{position: relative;width: 100%;padding-top: 8px;text-align: center;}
.moban-section .templates-list .templates-list-item .item-box .item-body .item-num{position: relative;width: 100%;font-size: 16px;color: #262626;line-height: 30px;}
.moban-section .templates-btn{position: relative;width: 100%;text-align: center;}
.moban-section .templates-btn .btnn{display: inline-block;vertical-align: top;position: relative;text-align: center;min-width: 132px;font-size: 14px;color: #3A5A97;line-height: 24px;padding: 6px 15px;background: #DDE7F0;border-radius: 18px;}
.moban-section .templates-btn a.btnn:hover{background: #3A5A97;color: #fff;}

@media screen and (max-width: 1259px) {
	.moban-section{padding: 28px 0 36px;}
	.moban-section .moban-menu .moban-menu-item{min-width: 132px;margin: 0 14px 10px;}
	.moban-section .moban-menu .moban-menu-item .item-title{font-size: 18px;line-height: 30px;padding: 6px 14px;border-radius: 22px;}
	.moban-section .templates-main{padding-top: 18px;}
	.moban-section .templates-main .search-box{height: 54px;border-radius: 27px;padding-right: 96px;}
	.moban-section .templates-main .search-box .input{font-size: 16px;padding: 12px 30px;line-height: 28px;}
	.moban-section .templates-main .search-box .suo{width: 80px;height: 54px;border-radius: 27px;}
	.moban-section .templates-main .search-box .sou1{width: 80px;line-height: 54px;height: 54px;border-radius: 27px;font-size: 18px !important;}
	.moban-section .templates-style{padding-top: 28px;}
	.moban-section .templates-style .templates-style-line>span{font-size: 16px;line-height: 34px;margin-right: 10px;}
	.moban-section .templates-style .templates-style-line>div{max-width: calc(100% - 60px);}
	.moban-section .templates-style .templates-style-line>div>a {min-width: 72px;font-size: 16px;line-height: 30px;padding: 2px 20px;margin-right: 4px;border-radius: 17px;margin-bottom: 8px;}
	
	.moban-section .templates-list{margin-left: -18px;margin-right: -18px;padding-top: 26px;}
	.moban-section .templates-list .templates-list-item{width: 33.3333%;padding: 0 18px;margin-bottom: 30px;}
	.moban-section .templates-list .templates-list-item .item-box .item-pic .item-pic-cover a{width: 76px;height: 34px;line-height: 34px;font-size: 14px;border-radius: 17px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body{padding-top: 8px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body .item-num{font-size: 16px;line-height: 28px;}
	.moban-section .templates-btn .btnn{min-width: 130px;font-size: 14px;line-height: 24px;padding: 5px 14px;border-radius: 17px;}
}
@media screen and (max-width: 991px) {
	.moban-section{padding: 24px 0 30px;}
	.moban-section .moban-menu .moban-menu-item{min-width: 128px;margin: 0 12px 10px;}
	.moban-section .moban-menu .moban-menu-item .item-title{font-size: 16px;line-height: 28px;padding: 5px 12px;border-radius: 20px;}
	.moban-section .templates-main{padding-top: 16px;}
	.moban-section .templates-main .search-box{height: 50px;border-radius: 25px;padding-right: 90px;}
	.moban-section .templates-main .search-box .input{font-size: 16px;padding: 10px 26px;line-height: 28px;}
	.moban-section .templates-main .search-box .suo{width: 80px;height: 50px;border-radius: 25px;}
	.moban-section .templates-main .search-box .sou1{width: 80px;line-height: 50px;height: 50px;border-radius: 25px;font-size: 18px !important;}
	.moban-section .templates-style{padding-top: 24px;}
	.moban-section .templates-style .templates-style-line>span{font-size: 16px;line-height: 32px;margin-right: 8px;}
	.moban-section .templates-style .templates-style-line>div{max-width: calc(100% - 56px);}
	.moban-section .templates-style .templates-style-line>div>a {min-width: 66px;font-size: 16px;line-height: 28px;padding: 2px 16px;margin-right: 4px;border-radius: 16px;margin-bottom: 8px;}
	
	.moban-section .templates-list{margin-left: -6px;margin-right: -6px;padding-top: 20px;}
	.moban-section .templates-list .templates-list-item{width: 33.3333%;padding: 0 6px;margin-bottom: 26px;}
	.moban-section .templates-list .templates-list-item .item-box .item-pic .item-pic-cover a{width: 76px;height: 32px;line-height: 32px;font-size: 14px;border-radius: 16px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body{padding-top: 8px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body .item-num{font-size: 15px;line-height: 26px;}
	.moban-section .templates-btn .btnn{min-width: 124px;font-size: 14px;line-height: 24px;padding: 4px 12px;border-radius: 16px;}
}
@media screen and (max-width: 720px) {
	.moban-section{padding: 20px 0 24px;}
	.moban-section .moban-menu .moban-menu-item{min-width: 128px;margin: 0 12px 10px;}
	.moban-section .moban-menu .moban-menu-item .item-title{font-size: 15px;line-height: 26px;padding: 4px 12px;border-radius: 18px;}
	.moban-section .templates-main{padding-top: 14px;}
	.moban-section .templates-main .search-box{height: 48px;border-radius: 24px;padding-right: 82px;}
	.moban-section .templates-main .search-box .input{font-size: 16px;padding: 9px 22px;line-height: 28px;}
	.moban-section .templates-main .search-box .suo{width: 80px;height: 48px;border-radius: 24px;}
	.moban-section .templates-main .search-box .sou1{width: 80px;line-height: 48px;height: 48px;border-radius: 24px;font-size: 16px !important;}
	.moban-section .templates-style{padding-top: 20px;}
	.moban-section .templates-style .templates-style-line>span{font-size: 15px;line-height: 30px;margin-right: 6px;}
	.moban-section .templates-style .templates-style-line>div{max-width: calc(100% - 52px);}
	.moban-section .templates-style .templates-style-line>div>a {min-width: 62px;font-size: 15px;line-height: 30px;padding: 0 14px;margin-right: 4px;border-radius: 15px;margin-bottom: 8px;}
	
	.moban-section .templates-list{margin-left: -12px;margin-right: -12px;padding-top: 20px;}
	.moban-section .templates-list .templates-list-item{width: 50%;padding: 0 12px;margin-bottom: 24px;}
	.moban-section .templates-list .templates-list-item .item-box .item-pic .item-pic-cover a{width: 72px;height: 30px;line-height: 30px;font-size: 14px;border-radius: 15px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body{padding-top: 8px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body .item-num{font-size: 15px;line-height: 26px;}
	.moban-section .templates-btn .btnn{min-width: 124px;font-size: 14px;line-height: 24px;padding: 4px 12px;border-radius: 16px;}
}
@media screen and (max-width: 560px) {
	.moban-section{padding: 20px 0 20px;}
	.moban-section .moban-menu .moban-menu-item{min-width: 128px;margin: 0 12px 10px;}
	.moban-section .moban-menu .moban-menu-item .item-title{font-size: 15px;line-height: 26px;padding: 4px 12px;border-radius: 18px;}
	.moban-section .templates-main{padding-top: 14px;}
	.moban-section .templates-main .search-box{height: 48px;border-radius: 24px;padding-right: 82px;}
	.moban-section .templates-main .search-box .input{font-size: 16px;padding: 9px 22px;line-height: 28px;}
	.moban-section .templates-main .search-box .suo{width: 80px;height: 48px;border-radius: 24px;}
	.moban-section .templates-main .search-box .sou1{width: 80px;line-height: 48px;height: 48px;border-radius: 24px;font-size: 16px !important;}
	.moban-section .templates-style{padding-top: 20px;}
	.moban-section .templates-style .templates-style-line>span{font-size: 15px;line-height: 28px;margin-right: 6px;}
	.moban-section .templates-style .templates-style-line>div{max-width: calc(100% - 52px);}
	.moban-section .templates-style .templates-style-line>div>a {min-width: 56px;font-size: 14px;line-height: 28px;padding: 0 12px;margin-right: 4px;border-radius: 14px;margin-bottom: 6px;}
	
	.moban-section .templates-list{margin-left: -6px;margin-right: -6px;padding-top: 20px;}
	.moban-section .templates-list .templates-list-item{width: 50%;padding: 0 6px;margin-bottom: 24px;}
	.moban-section .templates-list .templates-list-item .item-box .item-pic .item-pic-cover a{width: 72px;height: 30px;line-height: 30px;font-size: 14px;border-radius: 15px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body{padding-top: 8px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body .item-num{font-size: 15px;line-height: 26px;}
	.moban-section .templates-btn .btnn{min-width: 120px;font-size: 14px;line-height: 24px;padding: 4px 12px;border-radius: 16px;}
}
@media screen and (max-width: 420px) {
	.moban-section{padding: 20px 0 20px;}
	.moban-section .moban-menu .moban-menu-item{min-width: 128px;margin: 0 12px 10px;}
	.moban-section .moban-menu .moban-menu-item .item-title{font-size: 15px;line-height: 26px;padding: 4px 12px;border-radius: 18px;}
	.moban-section .templates-main{padding-top: 14px;}
	.moban-section .templates-main .search-box{height: 48px;border-radius: 24px;padding-right: 82px;}
	.moban-section .templates-main .search-box .input{font-size: 16px;padding: 9px 22px;line-height: 28px;}
	.moban-section .templates-main .search-box .suo{width: 80px;height: 48px;border-radius: 24px;}
	.moban-section .templates-main .search-box .sou1{width: 80px;line-height: 48px;height: 48px;border-radius: 24px;font-size: 16px !important;}
	.moban-section .templates-style{padding-top: 20px;}
	.moban-section .templates-style .templates-style-line>span{font-size: 15px;line-height: 28px;margin-right: 6px;}
	.moban-section .templates-style .templates-style-line>div{max-width: calc(100% - 52px);}
	.moban-section .templates-style .templates-style-line>div>a {min-width: 56px;font-size: 14px;line-height: 28px;padding: 0 12px;margin-right: 4px;border-radius: 14px;margin-bottom: 6px;}
	
	.moban-section .templates-list{margin-left: -6px;margin-right: -6px;padding-top: 20px;}
	.moban-section .templates-list .templates-list-item{width: 100%;padding: 0 6px;margin-bottom: 24px;}
	.moban-section .templates-list .templates-list-item .item-box .item-pic .item-pic-cover a{width: 72px;height: 30px;line-height: 30px;font-size: 14px;border-radius: 15px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body{padding-top: 8px;}
	.moban-section .templates-list .templates-list-item .item-box .item-body .item-num{font-size: 15px;line-height: 26px;}
	.moban-section .templates-btn .btnn{min-width: 120px;font-size: 14px;line-height: 24px;padding: 4px 12px;border-radius: 16px;}
}