@charset "utf-8";
html, body {
    width: 100%;
}

html {
    background: #F5F5F5;
}

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, fieldset, form, input, select, textarea, figure, div, form, img, ul, ol, li, i, b, table, tr, td, th, fieldset, label, legend {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

body {
    font-size: 12px;
    font-family: "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", Tahoma, Arial, STHeiti, sans-serif;
    _font-family: Tahoma, Arial, Helvetica, STHeiti, sans-serif;
    color: #333333;
    font-weight: normal;
    font-style: normal;
}

ul, ol, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, a img, iframe {
    border: 0 none;
}

address, em, i {
    font-style: normal;
}

input, select, button {
    vertical-align: middle;
    outline: 0;
}

input, textarea, select {
    *font-size: 100%;
    outline: 0;
}

button {
    overflow: visible;
}

a, img, a img {
    border: 0px;
}

a {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moztransition: all 0.2s ease-in-out;
    color: #333;
}

a:hover {
    text-decoration: none;
    color: #4296d1;
}

input.text, select.text, textarea.text {
    outline: none;
    border: 1px solid #e3e3e3;
    height: 26px;
    line-height: 26px;
    padding: 3px 0px 3px 5px;
    font-size: 12px;
    color: #555;
}

textarea {
    outline: none;
    resize: none;
    border: 1px solid #e3e3e3;
    font-size: 12px;
}

input.check {
    vertical-align: middle;
    margin-right: 2px;
}

img {
    vertical-align: top;
    -ms-interpolation-mode: bicubic;
    -moz-interpolation-mode: bicubic;
    -webkit-interpolation-mode: bicubic; /*图片缩放失真问题*/
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    max-width: 100%;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.btt_header {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    height: 82px;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #e6ebed;
}

.btt_header_box {
    width: 1222px;
    height: 82px;
    margin: 0 auto;
}

.btt_header_box .logo {
    height: 59px;
    width: 189px;
    float: left;
    margin-top: 11px;
}

.btt_header_box .logo img {
    height: 59px;
    width: 189px;
}

.header_nav {
    height: 82px;
    float: left;
    display: inline-block;
}

.nav_line {
    display: block;
}

.nav_line li {
    display: block;
    float: left;
    height: 82px;
    margin: 0 5px;
    position: relative;
    font-size: 16px;
}

.nav_line li a {
    display: block;
    height: 82px;
    line-height: 82px;
    padding: 0 20px;
    color: #526069;
    font-size: 16px;
    box-sizing: border-box;
}

.nav_line .on a, .nav_line .active a {
    color: #09A1ED;
}

.underline {
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    border-bottom: 2px solid #09A1ED;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
}

.nav_line .on .underline, .nav_line .active .underline {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
}

.nav_line .hot {
    font-size: 12px;
    color: #ff4500;
    position: absolute;
    top: 10px;
    right: -5px;
}

.nav_line .btt_header_login a {
    border: 1px solid #ccd5db;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 10px;
    padding: 0 11px;
    width: 90px;
    text-align: center;
    height: 40px;
    line-height: 38px;
    border-radius: 3px;
}

.nav_line .btt_header_login a:hover {
    background: #09A1ED;
    border: 1px solid #09A1ED;
    color: #fff;
}

.nav_line .btt_header_register a {
    background: #09A1ED;
    color: #fff;
    border: 1px solid #09A1ED;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 10px;
    padding: 0 11px;
    width: 90px;
    text-align: center;
    height: 40px;
    line-height: 38px;
    border-radius: 3px;
}

.nav_line .btt_header_register a:hover {
    background: #09A1ED;
    border: 1px solid #09A1ED;
}

.header_button {
    height: 54px;
    float: right;
    margin-top: 28px;
}

.btn {
    border-radius: 8px;
    font-size: 18px;
    height: 35px;
    outline: none;
    text-align: center;
    vertical-align: middle;
    padding: 6px 20px;
    min-width: 103px;
}

.register_default_hover_primary {
    color: #fff;
    border: 1px #3091F2 solid;
    background: #3091F2;
}

.register_default_hover_primary:hover {
    color: #fff;
    border: 1px #2976C9 solid;
    background: #2976C9;
}

.login_default_hover_primary {
    color: #3091F2;
    border: 1px #3091F2 solid;
}

.login_default_hover_primary:hover {
    color: #fff;
    border: 1px #3091F2 solid;
    background: #3091F2;
}

.margin_right_22px {
    margin-right: 22px;
}

.flashBox {
    width: 100%;
    min-width: 1260px;
    /*height: 450px;*/
    display: inline-block;
}

.swiper-container .swiper-wrapper .swiper-slide {
    width: 1920px;
    height: 400px;
	background-size: contain;  
    background-repeat: no-repeat;  
    background-position: center;  
    margin: 0 auto;
    position: relative;
	background-size:100%
}

.swiper-slide-1 {
    width: 1920px;
    height: 400px;
    background-image: url("../images/banner_01.jpg");
    margin: 0 auto;
    /*background-repeat: repeat-x;*/
}

.swiper-slide-2 {
    width: 1920px;
    height: 400px;
    background-image: url("../images/banner_02.jpg");
    margin: 0 auto;
    /*background-repeat: repeat-x;*/
}

.swiper-slide-3 {
    width: 1920px;
    height: 400px;
    background-image: url("../images/banner_03.jpg");
    margin: 0 auto;
    /*background-repeat: repeat-x;*/
}

.swiper-pagination-bullet {
    width: 21px;
    height: 21px;
    display: inline-block;
    border-radius: 100%;
    background: white;
    opacity: 0.3;
    -moz-opacity: 0.3;
    filter: alpha(opacity=30);
}

.swiper-pagination-bullet-active {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}

/*四大优势*/
.advantage_box {
    width: 100%;
    height: 506px;
    background-color: white;
}

.advantage_title {
    width: 100%;
    height: auto;
    font-size: 30px;
    color: #000;
    padding-top: 82px;
    text-align: center;
}

.advantage_icon_list_box {
    width: 100%;
    background-color: white;
    text-align: center;
    margin-top: 72px;
}

.advantage_icon_list_box .advantage_icon_list {
    width: 100%;
    height: 235px;
    display: flex;
    justify-content: center;
    padding: 0px;
    list-style-type: none;
}

.advantage_icon_list_box .advantage_icon_list li {
    list-style-type: none;
    margin: 0px;
    float: left;
    height: 235px;
}

.advantage_icon_list_box .advantage_icon_list li .icon_css {
    width: 270px;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    padding-top: 20px;
}

.advantage_icon_list_box .advantage_icon_list li .icon_css img {
    width: 146px;
    height: 147px;
}

.advantage_icon_list_box .advantage_icon_list li:hover .icon_css {
    transition: all .5s;
    -moz-transition: all .5s; /* Firefox 4 */
    -webkit-transition: all .5s; /* Safari 和 Chrome */
    -o-transition: all .5s; /* Opera */
}

.advantage_icon_list_box .advantage_icon_list li:hover .icon_css img {
    width: 164px;
    height: 165px;
    transition: all .5s;
    -moz-transition: all .5s; /* Firefox 4 */
    -webkit-transition: all .5s; /* Safari 和 Chrome */
    -o-transition: all .5s; /* Opera */
}

.advantage_icon_list_box .advantage_icon_list li .icon_title {
    text-align: center;
    font-size: 20px;
    color: #000;
    margin-top: 12px;
}

.advantage_icon_list_box .advantage_icon_list li .icon_detail {
    text-align: center;
    font-size: 14px;
    color: #4F98FE;
}

.module_box {
    width: 100%;
    height: auto;
    background-color: #F6F6F6;
}

.module_box .server_title {
    text-align: center;
    font-size: 30px;
    color: #333333;
    margin-top: 68px;
}

.module_box .core_box_title, .flow_box_title {
    text-align: center;
    font-size: 30px;
    color: #333333;
    padding-top: 58px;
    padding-bottom: 25px;
    /*55 35*/
}

.module_box .server_detail {
    text-align: center;
    font-size: 18px;
    color: #333333;
    margin-top: 28px;
}

.module_list_box {
    width: 100%;
    height: auto;
    margin-top: 52px;
    margin-bottom: 44px;
    display: inline-block;
}

.module_list_box .module_list {
    width: 1088px;
    margin: auto;
    padding: 0px;
    list-style-type: none;
    background: #f00;
}

.module_list_box .module_list li {
    list-style-type: none;
    margin: 0px;
    float: left;
    height: 180px;
}

.module_list_box .module_list .core_li {
    list-style-type: none;
    margin: 0px;
    float: left;
    height: 160px;
}

.module_list_box .module_list .core_icon_css {
    width: 240px;
    padding-top: 35px;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}

.module_list_box .module_list .core_icon_css img {
    width: 46px;
    height: 46px;
}

.module_list_box .module_list .core_icon_css .core_name {
    font-size: 18px;
    color: #5A5E79;
    margin-top: 24px;
}

.module_list_box .module_list .server_icon_css .type:hover {
    background: rgba(255, 86, 11, 0.8);
}

.module_list_box .module_list .server_icon_css {
    width: 260px;
    margin: 14px 6px;
    height: 152px;
    position: relative;
    color: #fff;
}

.module_list_box .module_list .server_icon_css img {
    width: 260px;
    height: 152px;
    z-index: 0;
}

.module_list_box .module_list .server_icon_css .type {
    width: 260px;
    height: 152px;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background: rgba(46, 37, 32, 0.8);
    display: flex;
    justify-content: center;
    font-size: 26px;
    align-items: center;
}

.module_list_box .module_flow_list {
    width: 1440px;
    margin: auto;
    padding: 0px;
    list-style-type: none;
    background: #f00;
}

.module_list_box .module_flow_list li {
    list-style-type: none;
    margin: 0px;
    float: left;
    height: 275px;
}

.module_list_box .module_flow_list .flow_icon_css {
    width: 480px;
    padding-top: 30px;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}

.flow_icon_css .flow_title {
    height: 24px;
    line-height: 24px;
    margin-top: 25px;
}

.flow_icon_css .flow_title span {
    margin-left: 13px;
    font-size: 21px;
}

.flow_icon_css .flow_detail {
    margin-top: 10px;
    font-size: 16px;
}

/*270px 12px 28px 52px*/

.footer_box {
    width: 100%;
    height: auto;
    min-width: 1280px;
}

.footer_box .fast_navigation {
    width: 100%;
    height: 82px;
    background: #3C3C3C;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;;
}

.footer_box  .xian_box{width: 100%;height: 4px;}
.footer_box .footer_xian{width: 33%;height: 4px;float: left}
.footer_box .footer_xian:nth-child(3){background-color: #3288ff;}
.footer_box .footer_xian:nth-child(2){background-color: #f65131;width: 34%}
.footer_box .footer_xian:nth-child(1){background-color: #edad29;}
.footer_box .fast_navigation li {
    display: inline-block;
    line-height: 82px;
    color: #fff;
    margin: 0 28px;
    font-size: 18px;
}
.footer_box .fast_navigation a{
    color: #fff;
}

.footer_box .footer_info {
    width: 100%;
    height: auto;
    background: #333333;
    padding-top: 65px;
    text-align: center;
}

.footer_box .footer_info .footer_info_container{
    width: 1080px;
    height: 180px;
    margin: 0 auto;
    background: #333333;
    display: inline-block;
}

.footer_info .left {
    width: 360px;
    height: 180px;
    display: inline-block;
}

.footer_info .left .rp {
    margin: 10px 0;
    font-size: 14px;
    color: #ffffff;
}

.lt {
    float: left;
}

.baottCopy {
    width: 100%;
    height: 60px;
    max-height: 60px;
    background: #333333;
    text-align: center;
    font-size: 14px;
    line-height: 60px;
    color: #fbfcff;
    min-width: 1260px;
    display: inline-block;
}

/*我的小程序*/
.page_body_container {
    width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
}

.program_alert {
    width: 100%;
    height: 35px;
    background: #FF7B23;
}

.program_alert .content {
    width: 1080px;
    margin: 0 auto;
    position: relative;
}

.program_alert_title {
    position: absolute;
    left: 0;
    line-height: 35px;
    color: #ffffff;
    font-size: 14px;
}

.program_alert_close {
    width: 21px;
    height: 21px;
    margin-top: 7px;
    position: absolute;
    right: 0;
    line-height: 35px;
}

.create_container {
    width: 100%;
    height: auto;
    padding: 32px 0;
    background: #ffffff;
    text-align: center;
}

.create_container .create_btn {
    margin: 0 auto;
    padding: 15px 30px;
    text-align: center;
    color: #08A1EF;
    font-size: 18px;
    border: 1px #08A1EF solid;
    border-radius: 12px;
}
.create_container .create_btn {
    color:#08A1EF;
}

.create_container .create_btn:hover {
    color: #ffffff;
    background: #08A1EF;
}

.program_icon {
    width: 100%;
    height: auto;
    text-align: center;
}

.program_icon img {
    width: 1200px;
    height: 97px;
    margin-top: 10px;
}

.program_list_box {
    width: 100%;
    text-align: center;
}

.program_list_box .program_list {
    width: 1272px;
    height: auto;
    margin: 0 auto;
    display: inline-block;
    margin-bottom: 100px;
}

.program_list_box .program_list li {
    list-style-type: none;
    margin: 0px;
    width: 270px;
    float: left;
    height: 325px;
    position: relative;
    margin: 20px 24px;
    overflow: hidden;
}

.program_list_box .program_list .item_box {
    width: 270px;
    height: 325px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
}

.program_list_box .program_list .item_active_box {
    width: 270px;
    height: 325px;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: -325px;
    left: 0;
    -webkit-transition:top 0.3s; /* top or translate does not seem to work in Firefox */
    -moz-transition: top 0.3s;
    transition: top 0.3s;
}



.program_list_box .program_list .item_active_box .item_active_menu {
    width: auto;
    list-style-type: none;
    margin: 0px;
    display: flex;
    justify-content: center;
    
}


.item_active_menu .menu_item{
    width: 80px;
    float: left;
    margin-top: 0px;

}
.item_active_menu .menu_an1{
    transition-property:margin-top;
    transition-duration:0.2s;
    transition-delay:0.2s;

    /* Firefox 4 */
    -moz-transition-property:margin-top; 
    -moz-transition-duration:0.2s;
    -moz-transition-delay:0.2s;

    /* Safari and Chrome */
    -webkit-transition-property:margin-top; 
    -webkit-transition-duration:0.2s;
    -webkit-transition-delay:0.2s;

    /* Opera */
    -o-transition-property:margin-top;
    -o-transition-duration:0.2s;
    -o-transition-delay:0.2s;
}
.item_active_menu .menu_an2{
    transition-property:margin-top;
    transition-duration:0.2s;
    transition-delay:0.25s;

    /* Firefox 4 */
    -moz-transition-property:margin-top; 
    -moz-transition-duration:0.2s;
    -moz-transition-delay:0.25s;

    /* Safari and Chrome */
    -webkit-transition-property:margin-top; 
    -webkit-transition-duration:0.2s;
    -webkit-transition-delay:0.25s;

    /* Opera */
    -o-transition-property:margin-top;
    -o-transition-duration:0.2s;
    -o-transition-delay:0.25s;
}
.item_active_menu .menu_an3{
     transition-property:margin-top;
    transition-duration:0.2s;
    transition-delay:0.3s;

    /* Firefox 4 */
    -moz-transition-property:margin-top; 
    -moz-transition-duration:0.2s;
    -moz-transition-delay:0.3s;

    /* Safari and Chrome */
    -webkit-transition-property:margin-top; 
    -webkit-transition-duration:0.2s;
    -webkit-transition-delay:0.3s;

    /* Opera */
    -o-transition-property:margin-top;
    -o-transition-duration:0.2s;
    -o-transition-delay:0.3s;
}
.program_list_box .program_list li:hover .item_active_box {
      top:0px;
}

.program_list_box .program_list li:hover .menu_item{
     margin-top: 100px;
}

.item_active_menu .menu_item p {
    color: #FFFFFF;
    margin-top: 10px;
}

.program_list_box .program_list .item_box .item {
    height: 325px;
    width: 267px;
    margin-left: 3px;
    background: #ffffff;
    color: #7C7C7C;
}

.item p {
    font-size: 16px;
    margin-top: 20px;
}

.item img {
    width: 230px;
    height: 230px;
    margin-top: 37px;
}

.program_list_box .program_list li .lab_info {
    width: 97px;
    height: 39px;
    position: absolute;
    z-index: 998;
    top: 0px;
    left: 0px;
    background-image: url("../images/lab_01.png");
}

.lab_info .state {
    line-height: 39px;
    color: #fff;
    text-align: center;
    font-size: 16px;
    margin-right: 5px;
}

.item_active_box .name {
    color: #fff;
    margin-top: 105px;
    font-size: 16px;
}

.program_search_box {
    width: 1200px;
    height: auto;
    margin: 0 auto;
    margin-top: 24px;
    position: relative;
}

.program_search_box p {
    line-height: 35px;
    font-size: 18px;
    color: #08A1EF;
}

.program_search_box .search_box {
    width: 215px;
    height: 35px;
    line-height: 35px;
    position: absolute;
    right: 0;
    top: 0;
    border-bottom: 1px #8a8a8a solid;
}

.program_search_box .search_box input {
    width: 185px;
    height: 35px;
    line-height: 35px;
    background: none;
    outline: none;
    border: 0px;
}

.search_box img {
    width: 26px;
    height: 26px;
    margin-top: 5px;
}

/*模板商城*/
.shop_type_box {
    width: 100%;
    height: auto;
    background: #ffffff;
    display: inline-block;
}

.shop_type_box .type_tab_box {
    width: 1200px;
    height: 45px;
    line-height: 45px;
    margin: 20px auto;
}

.tab_item_nor {
    width: 110px;
    height: 45px;
    border-radius: 6px;
    border: 1px #08A1EF solid;
    margin-right: 10px;
    float: left;
    color: #08A1EF;
    text-align: center;
    font-size: 18px;
}

.tab_item_sel {
    width: 110px;
    height: 45px;
    border-radius: 6px;
    border: 1px #08A1EF solid;
    margin-right: 10px;
    background: #08A1EF;
    float: left;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
}

.shop_type_box .type_grid_box {
    width: 1160px;
    height: auto;
    padding: 10px 20px;
    border: 1px #f5f5f5 solid;
    margin: 0 auto;
    margin-bottom: 10px;
}

.shop_type_box .type_grid_box .type_nor {
    display: inline-block;
    margin: 10px;
    font-size: 14px;
}

.shop_type_box .type_grid_box .type_sel {
    display: inline-block;
    margin: 0 8px;
    font-size: 14px;
    color: #08A1EF;
}

.shop_type_box .shop_grid_box {
    width: 100%;
    height: auto;
    display: inline-block;
    margin-bottom: 50px;
}

.shop_grid_box ul {
    width: 1240px;
    margin: auto;
    padding: 0px;
    list-style-type: none;
}

.shop_grid_box ul li {
    float: left;
    margin-right: 26px;
    overflow: hidden;
    margin-top: 40px;
    position: relative;
    
}

.shop_grid_box ul li .name_price{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 30px;
    background: rgba(0,0,0,.6);
    z-index: 100;
    width: 100%;
    color: #fff;
    line-height: 30px;
}


.shop_grid_box  img {
    width: 222px;
    height: 395px;
}


/*最新动态*/
.dynamic_list {
    width: 100%;
    height: auto;
    min-height: 400px;
    padding-top: 20px;
    background: #ffffff;
}

.dynamic_ul_css {
    width: 1200px;
    margin: 0px auto;
    padding: 0px;;
}

.dynamic_ul_css li {
    list-style: none;
    display: inline-block;
    vertical-align: top;
}

.dynamic_ul_css > li.first_li {
    background: white;
    border: 1px #f5f5f5 solid;
}

.dynamic_ul_css > li.first_li > a {
    width: 195px;
    height: 75px;
    line-height: 75px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    display: block;
    background: white;
}

.dynamic_ul_css > li.first_li > a.active {
    background-color: #08A1EF;
    color: white;
}

.dynamic_ul_css > li.last_li {
    width: 905px;
    height: auto;
    margin-left: 50px;
    min-height: 300px;
    padding-left: 20px;
    display: inline-block;
}

.dynamic_ul_css > li.last_li > div {
    display: none;
}

.dynamic_ul_css > li.last_li > div.active {
    display: block;
}

.dynamic_ul_css > li.last_li .dynamic_system_css {
    width: 100%;
    height: auto;
}

.dynamic_ul_css > li.last_li .dynamic_system_css .dynamic_item {
    width: 100%;
    height: 215px;
    border-bottom: 1px #f5f5f5 solid;
}

.dynamic_ul_css > li.last_li .dynamic_system_css .dynamic_item img {
    width: 255px;
    height: 155px;
    margin-top: 30px;
    background: #f00;
    float: left;
}

.dynamic_item_info {
    width: 575px;
    height: 155px;
    margin-top: 30px;
    float: left;
    margin-left: 22px;
    color: #A6A6A6;
}

.dynamic_item_info .dynamic_item_info_name {
    width: 100%;
    height: auto;
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #000;
}

.dynamic_item_info .dynamic_item_info_cont {
    width: 100%;
    height: 60px;
    line-height: 30px;
    margin: 20px 0;
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.dynamic_item_info .dynamic_item_info_date {
    width: 100%;
    height: auto;
    font-size: 14px;
}

/*模板预览*/
.base_info_container {
    width: 1200px;
    height: 905px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 20px;
    background: #fff;
}

.base_info_container .temlate_phone_icon {
    width: 394px;
    height: 790px;
    margin: 0 30px;
    float: left;
     
    margin-top: 40px;
    background: url(/public/visual/image/phone.png) no-repeat 0 0;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    position: relative;
}

.base_info_container .temlate_info {
    width: 700px;
    height: 699px;
    padding-top: 40px;
    float: right;
}

.base_info_container .temlate_info .base_info_top {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 10px;
    border-bottom: 1px #f5f5f5 solid;
}

.base_info_top .temp_name {
    width: 100%;
    height: auto;
    font-size: 20px;
    color: #8a8a8a;
    margin-top: 45px;
}

.base_info_top .temp_tags_container {
    width: 100%;
    height: auto;
    margin: 20px 0;
    display: inline-flex;
}

.base_info_top .temp_tags_container p {
    width: auto;
    padding: 10px 20px;
    border: 1px #f5f5f5 solid;
    float: left;
    margin-right: 10px;
}

.base_info_top .pic_txt_container {
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
}

.base_info_top .pic_txt_container img {
    width: 20px;
    height: 20px;
    float: left;
}

.base_info_top .pic_txt_container p {
    float: left;
    font-size: 14px;
    margin-left: 10px;
    color: #8a8a8a;
}

.base_info_bottom {
    width: 100%;
    height: auto;
}

.base_info_bottom .qrcode_container {
    width: 160px;
    height: 160px;
    border: 1px #f2f2f2 solid;
    margin: 22px 0;
}

.temp_price {
    width: 100%;
    height: auto;
    color: #Ff0000;
    font-size: 26px;
}

.temp_pay {
    width: 185px;
    height: auto;
    padding: 20px 0;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    margin-top: 10px;
    background: #09A3FB;
}

.template_list_box {
    width: 1240px;
    height: auto;
    margin: auto;
}

.template_list_box .template_grid_box {
    width: 100%;
    height: auto;
    display: inline-block;
}

.template_list_box .template_grid_box ul {
    width: 1240px;
    margin: auto;
    padding: 0px;
    list-style-type: none;
    background: #f00;
}

.template_grid_box ul li {
    list-style-type: none;
    float: left;
    margin-right: 26px;
    overflow: hidden;
    margin-top: 40px;
    position: relative;
}

.template_grid_box  img {
    width: 222px;
    height: 395px;
}
.template_grid_box ul li .name_price{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 30px;
    background: rgba(0,0,0,.6);
    z-index: 100;
    width: 100%;
    color: #fff;
    line-height: 30px;
}





.btt_header_has_login img{
    height: 40px;
    width: 40px;
    margin-top: 10px;
    border-radius: 20px;
}
.manage_menu{
    display: none;
    width: 120px;
    height: auto;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 82px;
    text-align: center;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 2px 2px 20px rgba(0,0,0,.1);
}
.manage_menu a{
    display: block;

    font-size: 14px;
    cursor: pointer;
    color: #526069;
}
.manage_menu .btt_logout{
    background: #f3f3f3;
}
.manage_menu a:hover{
    background: #59c7f9;
    color: #fff;
}
.btt_user_face{
    cursor: pointer;float: left;width: 140px;padding-top: 10px; position: relative;
}
.btt_user_face img{
   float: left; margin:10px 0 0 20px;
}

#page{margin: 0 auto; width: 60%; text-align: center;height: 50px; margin-top: 10px;}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 0 auto;
    border-radius: 4px;

}
.pagination li {
    float: left;
    margin-left: 5px;
}
.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 10px 16px;
    margin-left: -1px;
    font-size: 14px;
    text-decoration: none;
    background-color: #e3e3e3;
    border: 1px solid #f2f2f2;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 2;
    cursor: default;
    color: #000;
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}

.end-link-box{
    width: 100%;
    height:auto;
    background: #333333;
    padding-bottom: 20px;
}

.end-link{
    width: 100%;
    height: auto;
    background: #333333;
    min-width: 1140px;
    margin: 0 auto;
    font-size: 14px;
    color: #fbfcff;
    max-width: 1140px;
    min-width: 1140px;
    line-height: 25px;
    color: #8b8b8b;
    border: 1px dashed #bbb6b6;
}

.end-link span{
    width: auto;
    height:auto;
}

.end-link a {
    width: auto;
    height:auto;
    color: #8b8b8b;
}
.ml20 {
    margin-left: 20px;
}

.fb {
    font-weight: bold;
}