@import "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";

html,
body {
    /* height: 100%; */
    /* For full height images */
    overflow-x: hidden;
    
-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none; 
-khtml-user-select: none; 
user-select: none;

font-family: "Hiragino Sans GB", "Microsoft YaHei",
             "WenQuanYi Micro Hei", sans-serif;
}

*{
    margin: 0;
    padding: 0;
}


@media (min-width: 1200px){
 margin-top: 3rem !important;
}




ul,
ol {
    padding: 0;
    margin: 0;
}


/* 添加的css */

.logo{
    margin-left: 4rem;
    margin-bottom: -4rem;
}

.image2 {
    width: 70%;
    margin: 14.875rem auto 0;
}

.col-lg-5 {
    left: 50%;
    margin-top: 14rem;
}

/* .container1{
    overflow: hidden;
    margin-top: 500px;
} */
/* .dg-container,.col-lg-6 {
    margin-top: 300px;
} */
.new-container3 {
    position: absolute;
    /* background: url("/static/images/site/000-dodoshuxue.png") center no-repeat; */
    width: 31.25rem;
    height: 9.375rem;
    margin-left: 51rem;
    margin-top: -30rem;
    z-index: 1001;
}

li.interval {
    line-height: 3.125rem;
    font-size: 1rem;
    color: #fff;
    cursor: default;
}

#div3 {
    height: 24.0625rem;
}





.div1 {
    width: 100%;
    position: relative;
}

.ul1>li>a {
    /* color: #fff; */
    font-size: 1.25rem;
}

.ul1 {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.span1 {
    line-height: 3.125rem;
    margin-left: 1.875rem;
}


/* end */

.starter-template {
    padding: 2.5rem 1rem;
    text-align: center;
}

.footer {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    background: url("/static/images/site/footer.png") center no-repeat;
    background-size: 100% 100%;
    height: 48rem;
    position: relative;
    z-index: 1;
    font-size:1rem;
}

.footer .row {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 8.75rem;
    margin-right: 0;
    margin-left: 0;
}

.center {
    text-align: center;
}

.alert {
    margin-top: 3.4375rem;
    margin-bottom: 0;
}

body>.navbar-transparent {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
}

.navbar-right {
    margin-right: 1rem;
}

.navbar {
    border: 0;
}

.navbar-default {
    background-color: #ffb94d;
    /* background: url("/static/images/site/000-daohangtiao.png") center no-repeat; */
}

.navbar-transparent .navbar-nav>.active>a {
    background-color: transparent !important;
}

.navbar-form {
    margin-right: 0;
}

.navbar-nav>li>a.profile-menu {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.navbar-default .navbar-nav>li>a {
    color: #fff;
    padding: 1rem 1.25rem;
}


/*.navbar-nav>.btn{
   margin-top:0.625rem;
    margin-right: 1.4875rem;
}*/

.navbar-nav>li>a {
    font-size: 1rem;
}


/* .navbar-nav > li.active > a {
    border-bottom: 4px solid #ff831e;
} */

.navbar-brand {
    font-weight: bold;
    position: relative;
    top: -3.125rem;
    margin-right: 5.625rem;
}

.navbar-brand>img {
    float: left;
    margin-right: 0.625rem;
    position: absolute;
}

.navbar-brand #logo {
    top: 3.75rem;
    left: 4.375rem;
}

.navbar-transparent .navbar-brand>#logo-background {
    visibility: hidden;
}


/* Home page styling */


/*.corporate-jumbo {
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
      url("/static/site/img/banner.jpg");
    background-repeat: no-repeat;
    background-position: 80% center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    color: #f5f5f5;
    margin-bottom: 0;
}*/


/* .corporate-jumbo .well {
    background-color: rgba(245, 245, 245, .7);
}

.corporate-jumbo p, .corporate-jumbo h1 {
    color: #eee;
    text-shadow: 0px 0px 0.125rem black;
}

.corporate-jumbo p {
    font-weight: 500;
}

.corporate-jumbo .well legend {
    color: #333;
}

.corporate-jumbo > .container {
    display: block;
    position: absolute;
    bottom: 2em;
    left: 0.9375rem;
}
 */

.contact-banner {
    padding: 6.25rem 0;
    background: #e0e0e0;
    margin-top: 6.25rem;
}

.footer a:hover {
    text-decoration: none;
}


/* About page styling */

#sec1 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJklEQVQIW2NkAIILFy78NzAwYATRjCABZEGwAEwFiA1WBlIOUwkA72gTdDIYVO4AAAAASUVORK5CYII=) repeat;
}


/* Profile page styling */

.profile-head {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJklEQVQIW2NkAIILFy78NzAwYATRjCABZEGwAEwFiA1WBlIOUwkA72gTdDIYVO4AAAAASUVORK5CYII=) repeat;
    padding: 4.375rem 0rem 1.875rem 1.25rem;
}

.profile-body {
    padding: 0.25rem 0rem;
}

.text-page {
    padding: 7.5rem 0;
}

#map-outer {
    height: 27.5rem;
    padding: 2.5rem 1.25rem;
    margin-bottom: 1.25rem;
    background-color: #FFF
}

#map-container {
    height: 25rem
}

.img-dim {
    opacity: 0.5;
    box-shadow: inset 0rem 0rem 4rem 4rem #EA1717, 0rem 0rem 0.25rem 0.25rem #EA1717;
}


/* Authentication forms */

.form-box form,
.form-box .form-message {
    max-width: 20.625rem;
    padding: 0.9375rem;
    margin: 0 auto;
}

.form-box form .checkbox {
    margin-bottom: 0.625rem;
}

.form-box form .checkbox {
    font-weight: normal;
}

.form-box form .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.625rem;
    font-size: 1rem;
}

.form-box form .form-control:focus {
    z-index: 2;
}

.jumbotron {
    background-color: white !important;
    padding-bottom: 0.625rem !important;
    background-image: linear-gradient(to bottom, rgba(236, 241, 246, 1) 0%, rgba(236, 241, 246, 1) 100%), linear-gradient(to bottom, rgba(236, 241, 246, 1) 0%, rgba(236, 241, 246, 1) 100%);
    background-clip: content-box, padding-box;
}


/*
.jumbotron:after {
  background-color: grey;
  content: '';
  display: block;
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  right: 0.625rem;
  bottom: 0.625rem;
  z-index: -1;
}*/

.container {
    width: 100% !important;
    text-align: center;
    padding: 1.25rem 0 1.25rem 0;
    position: relative;
}

.container .background-img {
    position: absolute;
    width: 12.5rem;
    height: 12.5rem;
    z-index: 0;
}




#splash.container {
    padding: 0rem !important;
    margin-top: 3rem;
    height: 48rem;
    /* background-color: #fbf8ff; */
    background: url("/static/images/site/splash.png") center no-repeat;
    background-size: 100% 100%;
}

#highlight {
    height: 48rem;
    /* background-color: #fbf8ff; */
    background: url("/static/images/site/highlight_background.png") center no-repeat;
    background-size: 100% 100%;
    padding-top: 6.25rem;
}

#highlight img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

#highlight .tile-info {
    position: absolute;
    text-align: left;
    width: 80%;
    top: 5%;
    left: 5%;
}

.-mt150 {
    margin-top: -9.375rem;
}

.leaderboard ol li mark.dbline {
    padding-top: 0.5625rem;
}

.container .promo-tile-left-wrapper,
.container .promo-tile-right-wrapper {
    padding: 0rem !important;
    margin: auto;
}

.container .promo-tile-left {
    width: 100%;
    /* height: 100%; */
    background-color: #fad313;
    padding: 0 !important;
    min-height: 28.125rem;
}

.container .promo-tile-right {
    width: 100%;
    /* height: 100%; */
    background-color: #0078c7;
    padding: 0 !important;
    min-height: 28.125rem;
}

#product.container {
    /* background-color: #fbf8ff; */
    background: url("/static/images/site/product_background.png") center no-repeat;
    background-size: 100% 100%;
}


/* #product.container img {
  width: 80%;
  height: 80%;
} */

#product .plr95 {
    padding-left: 5.9375rem;
    padding-right: 5.9375rem;
}

#product .mt60 {
    margin-top: 3.75rem;
}

#system.container {
    /* background-color: #fbf8ff; */
    background: url("/static/images/site/middle_background.jpg") center no-repeat;
    background-size: 100% 100%;
}

#cases.container {
    /* background-color: #fbf8ff; */
    background: url("/static/images/site/middle_background.jpg") center no-repeat;
    background-size: 100% 100%;
}

.row.cases-container {
    min-height: 27.8125rem;
    margin-right: -14px;
}

#expert {
    z-index: 2;
}

#expert.container {
    padding: 0rem !important;
    height: 48rem;
    /* background-color: #fbf8ff;
  background-size: auto 100%; */
    background: url("/static/images/site/expert_background.png") center no-repeat;
    background-size: 100% 100%;
}

#expert .sayingLeft {
    position: absolute;
    top: 25%;
    left: 11%;
}

#expert .sayingRight {
    position: absolute;
    top: 25%;
    right: 11%;
}


/* 小火箭css */

#gotop {
    width: 5rem;
    position: fixed;
    bottom: 3.125rem;
    cursor: pointer;
    z-index: 99998;
    right: 1.25rem;
}

#gotop:hover {
    animation: rubberBand 0.5s;
}

@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, .95, 1);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.blog-card {
    transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
    background: #fff;
    border-radius: 0.625rem;
    box-shadow: 0 0.1875rem 0.4375rem -0.1875rem rgba(0, 0, 0, 0.3);
    margin: 0 auto 1.6%;
    overflow: hidden;
    position: relative;
    font-size: 0.875rem;
    line-height: 1.25rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 0.9375rem;
}

.blog-card:hover .details {
    left: 0;
}

.blog-card:hover.alt .details {
    right: 0;
}

.blog-card.alt .details {
    right: -100%;
    left: inherit;
}

.blog-card .photo {
    height: 12.5rem;
    position: relative;
}

.blog-card .photo.photo1 {
    background: url("/static/images/site/classroom.jpg") center no-repeat;
    background-size: cover;
}

.blog-card .photo.photo2 {
    background: url("/static/images/site/lesson_prepare.jpg") center no-repeat;
    background-size: cover;
}

.blog-card .photo.photo3 {
    background: url("/static/images/site/family.jpg") center no-repeat;
    background-size: cover;
}

.blog-card .photo.photo4 {
    background: url("/static/images/site/data_report.jpg") center no-repeat;
    background-size: cover;
}

.blog-card .details {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    color: #fff;
    font-family: "Open Sans";
    list-style: none;
    margin: 0;
    padding: 0.625rem 0.9375rem;
    height: 12.5rem;
    /*POSITION*/
    position: absolute;
    top: 0;
    left: -100%;
}

.blog-card .details>li {
    padding: 0.1875rem 0;
}

.blog-card .details li:before,
.blog-card .details .tags ul:before {
    font-family: FontAwesome;
    margin-right: 0.625rem;
    vertical-align: middle;
}

.blog-card .details .author:before {
    content: "\f007";
}

.blog-card .details .date:before {
    content: "\f133";
}

.blog-card .details .tags ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-card .details .tags ul:before {
    content: "\f02b";
}

.blog-card .details .tags li {
    display: inline-block;
    margin-right: 0.1875rem;
}

.blog-card .details a {
    color: inherit;
    border-bottom: 0.0625rem dotted;
}

.blog-card .details a:hover {
    color: #75D13B;
}

.blog-card .description {
    padding: 0.625rem;
    box-sizing: border-box;
    position: relative;
}

.blog-card .description h1 {
    font-family: "Roboto";
    line-height: 1rem;
    margin: 0 0 0.625rem 0;
}

.blog-card .description h2 {
    color: #9b9b9b;
    font-family: "Open Sans";
    line-height: 1.05rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 400;
    margin: 1.2% 0;
}

.blog-card .description p {
    position: relative;
    margin: 0;
    padding-top: 1.25rem;
}

.blog-card .description p:after {
    content: "";
    background: #75D13B;
    height: 0.375rem;
    width: 2.5rem;
    /*POSITION*/
    position: absolute;
    top: 0.375rem;
    left: 0;
}

.blog-card .description a {
    color: #75D13B;
    margin-bottom: 0.625rem;
    float: right;
}

.blog-card .description a:after {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    content: "\f061";
    font-family: FontAwesome;
    margin-left: -0.625rem;
    opacity: 0;
    vertical-align: middle;
}

.blog-card .description a:hover:after {
    margin-left: 0.3125rem;
    opacity: 1;
}

@media screen and (min-width: 37.5rem) {
    .blog-card {
        height: 12.5rem;
        max-width: 37.5rem;
    }
    .blog-card:hover .photo {
        -webkit-transform: rotate(5deg) scale(1.3);
        transform: rotate(5deg) scale(1.3);
    }
    .blog-card:hover.alt .photo {
        -webkit-transform: rotate(-5deg) scale(1.3);
        transform: rotate(-5deg) scale(1.3);
    }
    .blog-card.alt .details {
        padding-left: 1.875rem;
    }
    .blog-card.alt .description {
        float: right;
    }
    .blog-card.alt .description:before {
        -webkit-transform: skewX(5deg);
        transform: skewX(5deg);
        right: -0.9375rem;
        left: inherit;
    }
    .blog-card.alt .photo {
        float: right;
    }
    .blog-card .photo {
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        float: left;
        /* height: 100%; */
        width: 40%;
    }
    .blog-card .details {
        width: 40%;
    }
    .blog-card .description {
        float: left;
        width: 60%;
        /* height: 100%; */
        z-index: 0;
    }
    .blog-card .description:before {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        content: "";
        background: #fff;
        width: 100%;
        z-index: -1;
        /*POSITION*/
        position: absolute;
        left: -0.9375rem;
        top: 0;
        bottom: 0;
    }
}

figure.expert {
    font-family: 'Raleway', Arial, sans-serif;
    position: relative;
    overflow: hidden;
    margin: 0.625rem 1%;
    min-width: 13.75rem;
    max-width: 19.375rem;
    width: 100%;
    color: #333;
    text-align: left;
    box-shadow: none !important;
    display: inline-block;
}

figure.expert * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.interaction {
  margin-top:3rem !important;
}


figure.expert img {
    max-width: 100%;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    margin-right: 0.3125rem;
    display: block;
    z-index: 1;
    position: absolute;
    right: 50%;
}

figure.expert blockquote {
    margin: 0;
    display: block;
    border-radius: 0.5rem;
    position: relative;
    background-color: #fafafa;
    padding: 1.875rem 3.125rem 4.0625rem 3.125rem;
    font-size: 0.7rem;
    font-weight: 500;
    margin: 0 0 -2.5rem;
    line-height: 1.4rem;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.15);
}

figure.expert blockquote:before,
figure.expert blockquote:after {
    font-family: 'FontAwesome';
    content: "\201C";
    position: absolute;
    font-size: 3.125rem;
    opacity: 0.3;
    font-style: normal;
}

figure.expert blockquote:before {
    top: 2.1875rem;
    left: 1.25rem;
}

figure.expert blockquote:after {
    content: "\201D";
    right: 1.25rem;
    bottom: 2.1875rem;
}

figure.expert .author {
    margin: 0;
    height: 5rem;
    display: block;
    text-align: left;
    color: #ffffff;
    padding: 0 2.1875rem;
    position: relative;
}

figure.expert .author h5,
figure.expert .author span {
    left: 50%;
    position: absolute;
    opacity: 0.8;
    padding: 0.1875rem 0.3125rem;
}

figure.expert .author h5 {
    text-transform: uppercase;
    bottom: 50%;
    margin: 0;
    font-weight: 800;
    color: #000000;
}

figure.expert .author span {
    font-size: 0.7rem;
    color: #ffffff;
    top: 50%;
}

.grade-module {
    color: #666;
    display: inline-block;
    font: 400 0.875rem/1.05rem verdana, sans-serif;
    margin: 0.9375 1.5625rem 0.9375rem 1.5625rem;
    position: relative;
    vertical-align: top;
    width: 90%;
}

.grade-module .bd-grade {
    background-color: #fff;
    border: 0.0625rem solid;
    border-radius: 0.3125rem;
    box-sizing: border-box;
    padding: 0.9375rem 1.25rem 0.625rem;
    -moz-box-sizing: border-box;
    -webkit-box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.23);
    box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.23);
    width: 100%;
    min-height: 20rem;
    text-align: left;
}

.grade-box-tab {
    border-radius: 0 1.1875rem 1.1875rem 0;
    box-sizing: border-box;
    color: #fff;
    font: 700 1.125rem/2.375rem "Trebuchet MS", verdana, sans-serif;
    display: block;
    height: 2.375rem;
    left: -0.25rem;
    padding-right: 0.6875rem;
    position: absolute;
    text-align: right;
    text-decoration: none;
    top: 0.9375rem;
    width: 2.6875rem;
    -moz-box-sizing: border-box;
}

.grade-box-hdr {
    font: 300 1.75rem/2.375rem "Roboto Slab", verdana, sans-serif;
    display: block;
    margin: 0 0 0.75rem;
    padding: 0 0 0 2rem;
    text-decoration: none;
}

.desc-grade {
    line-height: 1.225rem;
    margin: 0 0 0.75rem;
    min-height: 11.25rem;
    padding: 0;
}

.list-subject-links {
    border-top: 0.0625rem solid #e1e1e1;
    margin-bottom: 0;
    padding: 0.9375rem 0 0;
}

.item-subject-link {
    display: block;
    height: 1.5rem;
}

.item-subject-link .subject-hdr {
    font-family: Verdana;
    font-weight: 400;
    display: inline-block;
    float: left;
}

.item-subject-link .lk-skills {
    color: #1f9ac7;
    display: inline-block;
    float: right;
    font-size: 0.8125rem;
    text-decoration: none;
}

.item-subject-link .lk-skills:after {
    content: ">>";
    display: inline-block;
    font-size: 75%;
    padding-left: 0.1875rem;
}

.list-subject-links li {
    list-style: none;
}

.blue1-bdr {
    border-color: #10a0b6 !important;
}

.blue1-bg {
    background: #10a0b6;
}

.blue1-txt,
.blue1-txt:hover {
    color: #10a0b6;
}

.orange1-bdr {
    border-color: #f39317 !important;
}

.orange1-bg {
    background: #f39317;
}

.orange1-txt,
.orange1-txt:hover {
    color: #f39317;
}

.green1-bdr {
    border-color: #42ae18 !important;
}

.green1-bg {
    background: #42ae18;
}

.green1-txt,
.green1-txt:hover {
    color: #42ae18;
}

.red1-bdr {
    border-color: #d74726 !important;
}

.red1-bg {
    background: #d74726;
}

.red1-txt,
.green1-txt:hover {
    color: #d74726;
}

.purple1-bdr {
    border-color: #8d33aa !important;
}

.purple1-bg {
    background: #8d33aa;
}

.purple1-txt,
.green1-txt:hover {
    color: #8d33aa;
}

.yellow1-bdr {
    border-color: #eabc00 !important;
}

.yellow1-bg {
    background: #eabc00;
}

.yellow1-txt,
.green1-txt:hover {
    color: #eabc00;
}

.green2-bdr {
    border-color: #0bc1b6 !important;
}

.green2-bg {
    background: #0bc1b6;
}

.green2-txt,
.green1-txt:hover {
    color: #0bc1b6;
}

.blue2-bdr {
    border-color: #00a1de !important;
}

.blue2-bg {
    background: #00a1de;
}

.blue2-txt,
.blue1-txt:hover {
    color: #00a1de;
}


/*--------------------
Leaderboard
--------------------*/

.leaderboard {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.875rem;
    /*
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  */
    width: 17.8125;
    height: 19.25;
    background: -webkit-linear-gradient(top, #3a404d, #181c26);
    background: linear-gradient(to bottom, #3a404d, #181c26);
    border-radius: 0.625rem;
    box-shadow: 0 0.4375rem 1.875rem rgba(62, 9, 11, 0.3);
}

.leaderboard h1 {
    font-size: 1.125rem;
    color: #e1e1e1;
    padding: 0.75rem 0.8125rem 1.125rem;
}

.leaderboard h1 svg {
    width: 1.5625rem;
    height: 1.625rem;
    position: relative;
    top: 0.1875rem;
    margin-right: 0.375rem;
    vertical-align: baseline;
}

.leaderboard ol {
    counter-reset: leaderboard;
    display: block;
    -webkit-margin-before: 0rem;
    -webkit-margin-after: 0rem;
    -webkit-margin-start: 0rem;
    -webkit-margin-end: 0rem;
    -webkit-padding-start: 0rem;
}

.leaderboard ol li {
    list-style-type: none;
    position: relative;
    z-index: 1;
    font-size: 0.875rem;
    counter-increment: leaderboard;
    padding: 1.125rem 0.625rem 1.125rem 3.125rem;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0) scale(1, 1);
}

.leaderboard ol li::before {
    content: counter(leaderboard);
    position: absolute;
    z-index: 2;
    top: 0.9375rem;
    left: 0.9375rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    background: #fff;
    border-radius: 1.25rem;
    text-align: center;
}

.leaderboard ol li mark {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    padding: 1.125rem 0.625rem 1.125rem 3.125rem;
    margin: 0;
    background: none;
    color: #fff;
}

.leaderboard ol li mark::before,
.leaderboard ol li mark::after {
    content: '';
    position: absolute;
    z-index: 1;
    bottom: -0.6875rem;
    left: -0.5625rem;
    border-left: 0.625rem solid transparent;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    opacity: 0;
}

.leaderboard ol li mark::after {
    left: auto;
    right: -0.5625rem;
    border-left: none;
    border-right: 0.625rem solid transparent;
}

.leaderboard ol li small {
    position: relative;
    z-index: 2;
    display: block;
    text-align: right;
}

.leaderboard ol li::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0.1875rem 0 rgba(0, 0, 0, 0.08);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    opacity: 0;
}

.leaderboard ol li:nth-child(2)::after {
    background: #e0574f;
    box-shadow: 0 0.125rem 0 rgba(0, 0, 0, 0.08);
}

.leaderboard ol li:nth-child(2) mark::before,
.leaderboard ol li:nth-child(2) mark::after {
    bottom: -0.4375rem;
}

.leaderboard ol li:nth-child(3)::after {
    box-shadow: 0 0.0625rem 0 rgba(0, 0, 0, 0.11);
}

.leaderboard ol li:nth-child(3) mark::before,
.leaderboard ol li:nth-child(3) mark::after {
    bottom: -0.1875rem;
}

.leaderboard ol li:nth-child(4)::after {
    box-shadow: 0 -0.0625rem 0 rgba(0, 0, 0, 0.15);
}

.leaderboard ol li:nth-child(4) mark::before,
.leaderboard ol li:nth-child(4) mark::after {
    top: -0.4375rem;
    bottom: auto;
    border-top: none !important;
}

.leaderboard ol li:nth-child(5) {
    border-radius: 0 0 0.625rem 0.625rem;
}

.leaderboard ol li:nth-child(5)::after {
    box-shadow: 0 -0.15625rem 0 rgba(0, 0, 0, 0.12);
    border-radius: 0 0 0.625rem 0.625rem;
}

.leaderboard ol li:nth-child(5) mark::before,
.leaderboard ol li:nth-child(5) mark::after {
    top: -0.5625rem;
    bottom: auto;
    border-top: none !important;
}

.leaderboard ol li:hover {
    z-index: 2;
    overflow: visible;
}

.leaderboard ol li:hover::after {
    opacity: 1;
    -webkit-transform: scaleX(1.06) scaleY(1.03);
    transform: scaleX(1.06) scaleY(1.03);
}

.leaderboard ol li:hover mark::before,
.leaderboard ol li:hover mark::after {
    opacity: 1;
    -webkit-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}

.leaderboard ol li.highlight {
    z-index: 2;
    overflow: visible;
}

.leaderboard ol li.highlight::after {
    opacity: 1;
    -webkit-transform: scaleX(1.06) scaleY(1.03);
    transform: scaleX(1.06) scaleY(1.03);
}

.leaderboard ol li.highlight mark::before,
.leaderboard ol li.highlight mark::after {
    opacity: 1;
    -webkit-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}


/* -------------theme default---------------*/

.leaderboard {
    background: -webkit-linear-gradient(top, #3a404d, #181c26);
    background: linear-gradient(to bottom, #3a404d, #181c26);
}

.leaderboard ol li::after {
    background: #fa6855;
}

.leaderboard ol li::before {
    color: #c24448;
}

.leaderboard ol li mark::before,
.leaderboard ol li mark::after {
    border-top: 0.625rem solid #c24448;
}

.leaderboard ol li:nth-child(1) {
    background: #fa6855;
}

.leaderboard ol li:nth-child(1)::after {
    background: #fa6855;
}

.leaderboard ol li:nth-child(2) {
    background: #e0574f;
}

.leaderboard ol li:nth-child(2) mark::before,
.leaderboard ol li:nth-child(2) mark::after {
    border-top: 0.375rem solid #ba4741;
}

.leaderboard ol li:nth-child(2)::after {
    background: #e0574f;
}

.leaderboard ol li:nth-child(3) {
    background: #d7514d;
}

.leaderboard ol li:nth-child(3)::after {
    background: #d7514d;
}

.leaderboard ol li:nth-child(3) mark::before,
.leaderboard ol li:nth-child(3) mark::after {
    border-top: 0.125rem solid #b0433f;
}

.leaderboard ol li:nth-child(4) {
    background: #cd4b4b;
}

.leaderboard ol li:nth-child(4)::after {
    background: #cd4b4b;
}

.leaderboard ol li:nth-child(4) mark::before,
.leaderboard ol li:nth-child(4) mark::after {
    border-bottom: 0.375rem solid #a63d3d;
}

.leaderboard ol li:nth-child(5) {
    background: #c24448;
}

.leaderboard ol li:nth-child(5)::after {
    background: #c24448;
}

.leaderboard ol li:nth-child(5) mark::before,
.leaderboard ol li:nth-child(5) mark::after {
    border-bottom: 0.5rem solid #993639;
}


/* -------------theme green---------------*/

.leaderboard.green {
    /*background: -webkit-linear-gradient(top, #3a404d, #181c26);
  background: linear-gradient(to bottom, #3a404d, #181c26);*/
    background: #3C7A6E;
}

.leaderboard.green ol li::after {
    background: #fa6855;
}

.leaderboard.green ol li::before {
    color: #c24448;
}

.leaderboard.green ol li mark::before,
.leaderboard.green ol li mark::after {
    border-top: 0.625rem solid #c24448;
}

.leaderboard.green ol li:nth-child(1) {
    background: #89D6C8;
}

.leaderboard.green ol li:nth-child(1)::after {
    background: #89D6C8;
}

.leaderboard.green ol li:nth-child(2) {
    background: #84D1C2;
}

.leaderboard.green ol li:nth-child(2) mark::before,
.leaderboard.green ol li:nth-child(2) mark::after {
    border-top: 0.375rem solid #ba4741;
}

.leaderboard.green ol li:nth-child(2)::after {
    background: #84D1C2;
}

.leaderboard.green ol li:nth-child(3) {
    background: #81CCBE;
}

.leaderboard.green ol li:nth-child(3)::after {
    background: #81CCBE;
}

.leaderboard.green ol li:nth-child(3) mark::before,
.leaderboard.green ol li:nth-child(3) mark::after {
    border-top: 0.125rem solid #b0433f;
}

.leaderboard.green ol li:nth-child(4) {
    background: #7AC4B6;
}

.leaderboard.green ol li:nth-child(4)::after {
    background: #7AC4B6;
}

.leaderboard.green ol li:nth-child(4) mark::before,
.leaderboard.green ol li:nth-child(4) mark::after {
    /*border-bottom: #a63d3d;*/
}

.leaderboard.green ol li:nth-child(5) {
    background: #79BCAF;
}

.leaderboard.green ol li:nth-child(5)::after {
    background: #79BCAF;
}

.leaderboard.green ol li:nth-child(5) mark::before,
.leaderboard.green ol li:nth-child(5) mark::after {
    /*border-bottom: #993639; */
}


/* -------------theme yellow---------------*/

.leaderboard.yellow {
    /*background: -webkit-linear-gradient(top, #3a404d, #181c26);
  background: linear-gradient(to bottom, #3a404d, #181c26); */
    background: #82641C;
}

.leaderboard.yellow ol li::after {
    background: #fa6855;
}

.leaderboard.yellow ol li::before {
    color: #c24448;
}

.leaderboard.yellow ol li mark::before,
.leaderboard.yellow ol li mark::after {
    border-top: 0.625rem solid #c24448;
}

.leaderboard.yellow ol li:nth-child(1) {
    background: #FFBB00;
}

.leaderboard.yellow ol li:nth-child(1)::after {
    background: #FFBB00;
}

.leaderboard.yellow ol li:nth-child(2) {
    background: #F7B40D;
}

.leaderboard.yellow ol li:nth-child(2) mark::before,
.leaderboard.yellow ol li:nth-child(2) mark::after {
    border-top: 0.375rem solid #ba4741;
}

.leaderboard.yellow ol li:nth-child(2)::after {
    background: #F7B40D;
}

.leaderboard.yellow ol li:nth-child(3) {
    background: #EFAE0C;
}

.leaderboard.yellow ol li:nth-child(3)::after {
    background: #EFAE0C;
}

.leaderboard.yellow ol li:nth-child(3) mark::before,
.leaderboard.yellow ol li:nth-child(3) mark::after {
    border-top: 0.125rem solid #b0433f;
}

.leaderboard.yellow ol li:nth-child(4) {
    background: #E8A50F;
}

.leaderboard.yellow ol li:nth-child(4)::after {
    background: #E8A50F;
}

.leaderboard.yellow ol li:nth-child(4) mark::before,
.leaderboard.yellow ol li:nth-child(4) mark::after {
    border-bottom: 0.375rem solid #a63d3d;
}

.leaderboard.yellow ol li:nth-child(5) {
    background: #D89B12;
}

.leaderboard.yellow ol li:nth-child(5)::after {
    background: #D89B12;
}

.leaderboard.yellow ol li:nth-child(5) mark::before,
.leaderboard.yellow ol li:nth-child(5) mark::after {
    border-bottom: 0.5rem solid #993639;
}


/*-----------------------------------*/


/* Table Pricing */


/*-----------------------------------*/

.pricing_box {
    position: relative;
    clear: both;
    margin-bottom: 1.25rem;
}


/* Table Pricing Style 1 */

.price_col {
    margin-bottom: 1.875rem !important;
}

.price_col .badge {
    display: none;
    position: absolute;
    top: -0.3125rem;
    right: -0.375rem;
    z-index: 3;
}

.price_style1 .price_col .badge {
    top: -0.25rem;
    right: -0.1875rem;
}

.price_col.col_active .badge {
    display: block;
}


/*-----------------------------------*/


/* Badges */


/*-----------------------------------*/

.badge:empty {
    display: inline-block;
}

.badge {
    position: relative;
    width: 5.1875rem;
    height: 5.1875rem;
    background-image: url(/static/images/site/badges.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
    .badge {
        background-image: url(/static/images/site/badges-x2.png);
        background-size: 20.75rem auto;
    }
}

.badge.badge-try {
    background-position: -5.1875rem 0;
}

.badge.badge-discount {
    background-position: -10.375rem 0;
}

.badge.badge-popular {
    background-position: -15.5625rem 0;
}

.badge.badge-new {
    background-position: 0 -5.1875rem;
}

.badge.badge-fresh {
    background-position: -5.1875rem -5.1875rem;
}

.badge.badge-sale {
    background-position: -10.375 -5.1875rem;
}

.badge.style2 {
    width: 6.25rem;
    height: 6rem;
    background-position: 0 -10.4375rem;
}

.badge.style2.badge-orange {
    background-position: -6.25rem -10.4375rem;
}

.badge.style2.badge-purple {
    background-position: -12.5rem -10.4375rem;
}

.price_item {
    position: relative;
    border: 0.0625rem solid #dfdcd6;
    border-radius: 0.5rem;
    background: #fafafa;
    -webkit-box-shadow: 0 0.125rem 0.0625rem rgba(224, 222, 220, 0.75);
    box-shadow: 0 0.125rem 0.0625rem rgba(224, 222, 220, 0.75);
}

.price_style1 .col_active .price_item {
    background: #fcfcfc;
}

.pricing_box ul {
    text-align: center;
}

.price_style1 li.price_col {
    display: inline-block;
    padding: 0;
    position: relative;
}

.price_style1 .price_col.col_active {
    top: 0.4375rem;
    z-index: 1;
    margin: 0 -2rem;
}

.price_style1 .price_col .price_item {
    width: 13.75rem;
    position: relative;
}

.price_style1 .col_active .price_item {
    width: 14.375rem;
}

.col-sm-8 .price_style1 .price_col .price_item {
    width: 13.75rem;
}

.col-sm-8 .price_style1 .col_active .price_item {
    width: 14.375rem;
}

.price_col .price_col_head {
    position: relative;
    border-radius: 0.5rem 0.5rem 0 0;
    border-top: 0.0625rem solid #f8be72;
    border-bottom: 0.0625rem solid #ca7b40;
    -webkit-box-shadow: inset 0 0.0625rem 0.0625rem 0 #fdd393, 0 0.125rem 0.1875rem -0.0625rem rgba(201, 98, 22, 0.9);
    box-shadow: inset 0 0.0625rem 0.0625rem 0 #fdd393, 0 0.125rem 0.1875rem -0.0625rem rgba(201, 98, 22, 0.9);
    background: rgb(249, 145, 0);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5OTEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNTYyMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(249, 145, 0, 1) 0%, rgba(245, 98, 0, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249, 145, 0, 1)), color-stop(100%, rgba(245, 98, 0, 1)));
    background: -webkit-linear-gradient(top, rgba(249, 145, 0, 1) 0%, rgba(245, 98, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(249, 145, 0, 1) 0%, rgba(245, 98, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(249, 145, 0, 1) 0%, rgba(245, 98, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(249, 145, 0, 1) 0%, rgba(245, 98, 0, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f99100', endColorstr='#f56200', GradientType=0);
}

.price_col_yellow .price_col_head {
    border-top: 0.0625rem solid #f8be72;
    border-bottom: 0.0625rem solid #ca7b40;
    -webkit-box-shadow: inset 0 0.0625rem 0.0625rem 0 #fdd393, 0 0.125rem 0.1875rem -0.0625rem rgba(201, 98, 22, 0.9);
    box-shadow: inset 0 0.0625rem 0.0625rem 0 #fdd393, 0 0.125rem 0.1875rem -0.0625rem rgba(201, 98, 22, 0.9);
    background: rgb(251, 183, 96);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiYjc2MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMDc3MjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(251, 183, 96, 1) 0%, rgba(240, 119, 32, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(251, 183, 96, 1)), color-stop(100%, rgba(240, 119, 32, 1)));
    background: -webkit-linear-gradient(top, rgba(251, 183, 96, 1) 0%, rgba(240, 119, 32, 1) 100%);
    background: -o-linear-gradient(top, rgba(251, 183, 96, 1) 0%, rgba(240, 119, 32, 1) 100%);
    background: -ms-linear-gradient(top, rgba(251, 183, 96, 1) 0%, rgba(240, 119, 32, 1) 100%);
    background: linear-gradient(to bottom, rgba(251, 183, 96, 1) 0%, rgba(240, 119, 32, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fbb760', endColorstr='#f07720', GradientType=0);
}

.price_col_green .price_col_head {
    border-top: 0.0625rem solid #c3db74;
    border-bottom: 0.0625rem solid #7b953f;
    -webkit-box-shadow: inset 0 0.0625rem 0.0625rem 0 #d7e794, 0 0.125rem 0.1875rem -0.0625rem rgba(97, 132, 20, 0.9);
    box-shadow: inset 0 0.0625rem 0.0625rem 0 #d7e794, 0 0.125rem 0.1875rem -0.0625rem rgba(97, 132, 20, 0.9);
    background: rgb(189, 216, 97);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JkZDg2MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4M2IwMjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(189, 216, 97, 1) 0%, rgba(131, 176, 32, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(189, 216, 97, 1)), color-stop(100%, rgba(131, 176, 32, 1)));
    background: -webkit-linear-gradient(top, rgba(189, 216, 97, 1) 0%, rgba(131, 176, 32, 1) 100%);
    background: -o-linear-gradient(top, rgba(189, 216, 97, 1) 0%, rgba(131, 176, 32, 1) 100%);
    background: -ms-linear-gradient(top, rgba(189, 216, 97, 1) 0%, rgba(131, 176, 32, 1) 100%);
    background: linear-gradient(to bottom, rgba(189, 216, 97, 1) 0%, rgba(131, 176, 32, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#bdd861', endColorstr='#83b020', GradientType=0);
}

.price_col_blue .price_col_head {
    border-top: 0.0625rem solid #8fd8e2;
    border-bottom: 0.0625rem solid #448c99;
    -webkit-box-shadow: inset 0 0.0625rem 0.0625rem 0 #ace6ee, 0 0.125rem 0.1875rem -0.0625rem rgba(27, 121, 142, 0.9);
    box-shadow: inset 0 0.0625rem 0.0625rem 0 #ace6ee, 0 0.125rem 0.1875rem -0.0625rem rgba(27, 121, 142, 0.9);
    background: rgb(128, 213, 226);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwZDVlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOGFhYzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(128, 213, 226, 1) 0%, rgba(56, 170, 195, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(128, 213, 226, 1)), color-stop(100%, rgba(56, 170, 195, 1)));
    background: -webkit-linear-gradient(top, rgba(128, 213, 226, 1) 0%, rgba(56, 170, 195, 1) 100%);
    background: -o-linear-gradient(top, rgba(128, 213, 226, 1) 0%, rgba(56, 170, 195, 1) 100%);
    background: -ms-linear-gradient(top, rgba(128, 213, 226, 1) 0%, rgba(56, 170, 195, 1) 100%);
    background: linear-gradient(to bottom, rgba(128, 213, 226, 1) 0%, rgba(56, 170, 195, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#80d5e2', endColorstr='#38aac3', GradientType=0);
}

.price_col_purple .price_col_head {
    border-top: 0.0625rem solid #c48eea;
    border-bottom: 0.0625rem solid #6f3e92;
    -webkit-box-shadow: inset 0 0.0625rem 0.0625rem 0 #d8acf4, 0 0.125rem 0.1875rem -0.0625rem rgba(81, 18, 132, 0.9);
    box-shadow: inset 0 0.0625rem 0.0625rem 0 #d8acf4, 0 0.125rem 0.1875rem -0.0625rem rgba(81, 18, 132, 0.9);
    background: rgb(190, 127, 235);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JlN2ZlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NDM4ZDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(190, 127, 235, 1) 0%, rgba(132, 56, 212, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(190, 127, 235, 1)), color-stop(100%, rgba(132, 56, 212, 1)));
    background: -webkit-linear-gradient(top, rgba(190, 127, 235, 1) 0%, rgba(132, 56, 212, 1) 100%);
    background: -o-linear-gradient(top, rgba(190, 127, 235, 1) 0%, rgba(132, 56, 212, 1) 100%);
    background: -ms-linear-gradient(top, rgba(190, 127, 235, 1) 0%, rgba(132, 56, 212, 1) 100%);
    background: linear-gradient(to bottom, rgba(190, 127, 235, 1) 0%, rgba(132, 56, 212, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#be7feb', endColorstr='#8438d4', GradientType=0);
}

.price_style1 .price_col .price_col_head {
    height: 4.375rem;
    margin-bottom: 1.6875rem;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.price_style1 .col_active .price_col_head {
    height: 5.625rem;
    margin-bottom: 1.25rem;
}

.price_style1 .price_col_head:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 0.5rem solid rgb(245, 98, 0);
    border-left: 0.6875rem solid transparent;
    border-right: 0.6875rem solid transparent;
    position: absolute;
    left: 50%;
    bottom: -0.5rem;
    margin-left: -0.6875rem;
}

.price_style1 .price_col_yellow .price_col_head:after {
    border-top-color: rgb(240, 119, 32);
}

.price_style1 .price_col_green .price_col_head:after {
    border-top-color: rgb(131, 176, 32);
}

.price_style1 .price_col_blue .price_col_head:after {
    border-top-color: rgb(56, 170, 195);
}

.price_style1 .price_col_purple .price_col_head:after {
    border-top-color: rgb(132, 56, 212);
}

.price_col_head .price {
    color: #FFF;
    line-height: 4.375rem;
    text-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(168, 84, 24, 0.75);
}

.price_col_green .price_col_head .price {
    text-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(103, 137, 24, 0.75);
}

.price_col_blue .price_col_head .price {
    text-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(39, 131, 152, 0.75);
}

.price_col_purple .price_col_head .price {
    text-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(145, 28, 60, 0.75);
}

.price_style1 .price_col_head .price {
    font-size: 2.75rem;
}

.price_style1 .col_active .price_col_head .price {
    font-size: 3.25rem;
    line-height: 5.375rem;
}

.price_style1 .price_col_head .price sup {
    display: none;
}

.price_style1 .price_col_head .price em,
.price_style2 .price_col_head .price em {
    font-size: 0.385rem;
    font-style: normal;
    position: relative;
    top: -0.7rem;
}

.price_style1 .price_col_head .price span,
.price_style2 .price_col_head .price span {
    font-size: 0.2975rem;
    letter-spacing: -0.0625rem;
}

.price_col_head .price em,
.price_col_head .price span {
    color: #ffe1c0;
}

.price_col_green .price_col_head .price em,
.price_col_green .price_col_head .price span {
    color: #eaf9bb;
}

.price_col_blue .price_col_head .price em,
.price_col_blue .price_col_head .price span {
    color: #e0fbff;
}

.price_col_purple .price_col_head .price em,
.price_col_purple .price_col_head .price span {
    color: #e9cfff;
}

.price_col_body .price_body_inner {
    padding: 0 0.625rem;
}

.price_body_top {
    padding-bottom: 1rem;
    border-bottom: 0.0625rem solid #dfdcd6;
    margin-bottom: 0.75rem;
}

.price_style1 .price_col.col_active .price_body_top {
    margin-bottom: 0.3125rem;
    padding-bottom: 0.5rem;
}

.price_body_top strong {
    display: block;
    font-size: 1.5rem;
    color: #000;
}

.price_col.col_active .price_body_top strong {
    font-size: 1.875rem;
}

.price_body_top span {
    display: block;
    font-size: 0.75rem;
    color: #a6a6a6;
}

.price_style1 .price_col.col_active .price_body_top span {
    font-size: 0.8125rem;
}

.price_col_body ul li {
    list-style-type: none !important;
    font-size: 0.75rem;
    color: #9b948d;
    margin-bottom: 0.625rem;
}

.price_style1 .price_col.col_active .price_col_body ul li {
    font-size: 0.8125rem;
    color: #f87a00;
}

.price_col .price_col_body {
    margin-bottom: 0.875rem;
}

.price_style1 .price_col.col_active .price_col_body {
    margin-bottom: 0.8125rem;
}

.price_col .price_col_foot .sign_up {
    padding: 0;
}

.price_style1 .price_col.col_active .price_col_foot .sign_up {
    padding: 0.5rem 0;
}

.price_col_foot {
    background: #fff;
    padding: 0.875rem 0 1.0625rem;
    border-radius: 0 0 0.625rem 0.625rem;
    border-top: 0.0625rem solid #f5f5f5;
}

.price_style1 .price_col.col_active .price_col_foot {
    padding: 0.5rem 0 0.9375rem;
}

@media (max-width: 47.9375rem) {
    .pricing_box.price_style1 li.price_col {
        display: block;
        margin: 0 0 1.25rem;
        top: 0;
    }
    .price_style1 .price_col .price_item,
    .price_style1 .price_col.col_active .price_item,
    .col-sm-8 .price_style1 .price_col .price_item,
    .col-sm-8 .price_style1 .price_col.col_active .price_item {
        width: 100%;
    }
}

@media (max-width: 61.9375rem) and (min-width: 48rem) {
    .col-sm-8 .pricing_box.price_style1 li.price_col {
        display: block;
        margin: 0 0 1.25rem;
        top: 0;
    }
    .col-sm-8 .price_style1 .price_col .price_item,
    .col-sm-8 .price_style1 .price_col.col_active .price_item {
        width: 100%;
    }
}

.video-player {
    margin: auto;
    margin-top: 0.5rem;
}

div.fcBox {
    width: 6.25rem;
    height: 13.75rem;
    position: fixed;
    right: 0.9375rem;
    top: 30%;
    margin-top: -11.25rem;
    z-index: 9999;
    background: url(/static/images/site/side_bar.png);
    background-size: 100% auto;
}

div.fcBox .fc1 {
    margin-top: 4.75rem !important;
    padding-top: 2.625rem;
}

div.fcBox .fc2 {
    padding-top: 2.1875rem;
}

div.fcBox .fcLink {
    width: 4rem;
    height: 4rem;
    display: block;
    margin: 0 auto;
    color: #3c3c3c;
    font-size: 0.625rem;
    text-align: center;
}

div.fcBox .fcBacktop {
    width: 4rem;
    height: 1.5rem;
    display: block;
    margin: -0.625rem auto 0;
    left: 1.25rem;
    font-size: 0.75rem;
    line-height: 1.5rem;
    padding-left: 0.75rem;
    color: #fff;
}

div.fcBox a {
    text-decoration: none;
}

div.fcBox .qr {
    display: none;
    background: #FFF;
    position: absolute;
    top: 5rem;
    right: 5rem;
    z-index: 1;
    border: 0.3125rem solid rgb(255, 187, 0);
    border-radius: 0.3125rem;
}

div.row.talk,
div.row.talk2 {
    width: 100%;
    height: 18.75rem;
    margin-right: 0;
    margin-left: 0;
}

div.row.talk div.talk,
div.row.talk2 div.talk {
    width: 80%;
    /* height: 100%; */
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

div.row.talk div.talk {
    background: url("/static/images/site/talk.png") center no-repeat;
    background-size: 80%;
}

div.row.talk2 div.talk {
    background: url("/static/images/site/talk2.png") center no-repeat;
    background-size: 80%;
}

div.row.talk div.talk p,
div.row.talk2 div.talk p {
    width: 59%;
    position: absolute;
    text-align: left;
    font-size: 1rem;
    top: 37%;
    line-height: 1.5rem;
}

div.row.talk div.talk p {
    right: 12%;
}

div.row.talk2 div.talk p {
    left: 12%;
}

.jinjie {
    width: 79.3125rem;
    height: 27.75rem;
    margin: 0 auto;
    margin-top: 3.75rem;
}

.pos_re {
    position: relative;
}

.rank {
    height: 4.625rem;
}

.rank li.pre {
    left: 0;
    z-index: 1;
}

.rank li {
    line-height: 3.5rem;
    color: #FFFFFF;
    font-size: 1.125rem;
    text-align: center;
    position: absolute;
    top: 0;
    width: 9.3125rem;
    height: 4.625rem;
    cursor: pointer;
    list-style: none;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.rank li.L1 {
    left: 11%;
    z-index: 2;
}

.rank li.L2 {
    left: 22%;
    z-index: 3;
}

.rank li.L3 {
    left: 33%;
    z-index: 4;
}

.rank li.L4 {
    left: 44%;
    z-index: 5;
}

.rank li.L5 {
    left: 55%;
    z-index: 6;
}

.rank li.L6 {
    left: 66%;
    z-index: 7;
}

.rank li.L7 {
    left: 77%;
    z-index: 8;
}

.rank li.L8 {
    left: 88%;
    z-index: 9;
}

.rank li.active {
    width: 11.5rem;
    height: 5.625rem;
    line-height: 5rem;
    font-size: 1.5rem;
    top: -1rem;
    z-index: 10;
}



.rank li p {
    width: 100%;
    height: 100%;
    -moz-border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

.rank li.pre p {
    background: #feb312;
}

.rank li.L1 p {
    background: #ff911a;
}

.rank li.L2 p {
    background: #ff6b1a;
}

.rank li.L3 p {
    background: #ec4a25;
}

.rank li.L4 p {
    background: #de3900;
}

.rank li.L5 p {
    background: #cb7e48;
}

.rank li.L6 p {
    background: #ad532b;
}

.rank li.L7 p {
    background: #cb7e48;
}

.rank li.L8 p {
    background: #ad532b;
}

.bgBox1 {
    position: absolute;
    top: 3.5rem;
    left: 0rem;
    margin-left: auto;
    margin-right: auto;
    z-index: 99;
    background: #e8e8e8;
    height: 24.375rem;
    -moz-border-radius: 0.875rem;
    -webkit-border-radius: 0.875rem;
    border-radius: 0.875rem;
}

.bgBox1 .bgBox2 {
    background: #FFF;
    height: 23.125rem;
    width: 78rem;
    margin: 0.625rem;
    -moz-border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

.sectioin4 .bgBox1 .bgBox2 .rankText {
    display: none;
    width: 60.625rem;
}

.bgBox1 .bgBox2 .rankLeft {
    width: 12.5rem;
    height: 12.5rem;
    -moz-border-radius: 12.5rem;
    -webkit-border-radius: 12.5rem;
    border-radius: 12.5rem;
  /* overflow: hidden; */
    margin: 5.25rem 9.375rem;
}

.bgBox1 .bgBox2 .rankRight {
    width: 40.625rem;
    height: 22.5rem;
    padding-top: 2rem;
    padding-right: 9.375rem;
}
.bgBox1 .bgBox2 .rankLeft img {
  width:30rem;
position: absolute;
    top: 2.5rem;
    left: 4rem;
}
.fl {
    float: left;
    list-style: none;
}

.fr {
    float: right;
    list-style: none;
}

.bgBox1 .bgBox2 .rankRight .flexMiddle p {
    color: #646464;
    font-size: 1.125rem;
    line-height: 2rem;
    text-align: left;
}

/* 第一张背景图中的气泡文字图片 */
@media only screen and (min-device-width:300px) and (max-device-width:768px) {
    .image2 {
        width: 100%;
        margin: 10rem auto 0;
        padding-top: 6rem;
    }
}
/* 导航栏 */
@media only screen and (min-device-width:300px) and (max-device-width:768px) {
    .div1 {
        width: 100%;
        display: block;
        padding: 0;
        text-align: center;
        /* position: relative; */
    }

    /* .div2 {
        height: 6.25rem;
    } */
    
    .ul1>li>a {
        /* color: #fff; */
        font-size: 1.25rem;
    }

    /* #splash.container {
        margin-top: 6rem;
    } */
    
    .ul1 {
        position: static;
        transform: none;
        display: inline-block;
        margin: auto 0;
    }

    .ul1>li {
        float: left;
        line-height: 1.5rem;
        margin-top: 5%;
    }

    .interval{
        padding-top: .2rem;
    }

    .navbar-default .navbar-nav>li>a {
        padding: 0rem .5rem;
    }

    .div6{
        margin-top: 4rem;
    }
}
/* 轮播图 */
@media only screen and (min-device-width:300px) and (max-device-width:768px) {
    #highlight {
        height: 48rem;
        /* background-color: #fbf8ff; */
        background: url("/static/images/site/highlight_background.png") center no-repeat;
        background-size: 100% 100%;
        padding-top: 6.25rem;
    }

    /* .dg-wrapper{
        width: 18.75rem;
        perspective: 1000px;
    } */
    
    #highlight img {
        /* width: 70%;
        max-width: 70%; */
        height: auto;
        border: 0;
        vertical-align: middle;
    }
}
/* customer部分的文字 */
@media only screen and (min-device-width:300px) and (max-device-width:768px) {
    .blog-card .description h1 {
        font-family: "Roboto";
        font-size: 2.5rem !important;
        line-height: 1.5rem;
        margin: 0 0 0.625rem 0;
    }
    
    .blog-card .description h2 {
        color: #9b9b9b;
        font-family: "Open Sans";
        line-height: 1.05rem;
        text-transform: uppercase;
        font-size: 0.875rem;
        font-weight: 400;
        margin: 1.2% 0;
    }
}
/* system进阶部分 */
@media only screen and (min-device-width:300px) and (max-device-width:768px) {
    .jinjie {
        width: 100%;
        /* 1269px  79.3125rem */
        height: 27.75rem;
        /* 444px  27.75rem */
        margin: 0 auto;
        margin-top: 3.75rem;
    }

    .rank {
        height: 4.625rem;
    }
    
    .rank li.pre {
        left: 0;
        z-index: 9;
    }
    
    .rank li {
        line-height: 3.5rem;
        color: #FFFFFF;
        font-size: 1.125rem;
        text-align: center;
        position: absolute;
        top: 0;
        width: 9.3125rem;
        height: 4.625rem;
        cursor: pointer;
        list-style: none;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    
    .rank li.L1 {
        left: 10% !important;
        margin-top: -4rem;
        /* 11.5rem */
        z-index: 4;
    }
    
    .rank li.L2 {
        left: 20% !important;
        /* 19.875rem */
        z-index: 8;
    }
    
    .rank li.L3 {
        left: 30% !important;
        margin-top: -4rem;
        /* 28.25rem */
        z-index: 3;
    }
    
    .rank li.L4 {
        left: 40% !important;
        /* 36.625rem */
        z-index: 7;
    }
    
    .rank li.L5 {
        left: 50% !important;
        margin-top: -4rem;
        /* 45rem */
        z-index: 2;
    }
    
    .rank li.L6 {
        left: 60% !important;
        /* 53.125rem */
        z-index: 6;
    }
    
    .rank li.L7 {
        left: 70% !important;
        margin-top: -4rem;
        /* 61.5rem */
        z-index: 1;
    }
    
    .rank li.L8 {
        left: 77% !important;
        /* 69.875rem */
        z-index: 5;
    }
    
    .rank li.active {
        width: 23%;
        height: 5.625rem;
        line-height: 5rem;
        font-size: 1.5rem;
        top: -1rem;
        z-index: 10;
    }
    
    .rank li p {
        width: 100%;
        height: 100%;
        -moz-border-radius: 0.5rem;
        -webkit-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

    .bgBox1 {
        position: absolute;
        top: 3.5rem;
        left: 0rem;
        margin-left: auto;
        margin-right: auto;
        z-index: 99;
        background: #e8e8e8;
        height: 24.375rem;
        width: 100%;
        -moz-border-radius: 0.875rem;
        -webkit-border-radius: 0.875rem;
        border-radius: 0.875rem;
    }
    
    .bgBox1 .bgBox2 {
        background: #FFF;
        height: 23.125rem;
        width: 97%;
        margin: 0.625rem;
        -moz-border-radius: 0.5rem;
        -webkit-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }
    
    .sectioin4 .bgBox1 .bgBox2 .rankText {
        display: none;
        width: 90%;
    }
    
    .bgBox1 .bgBox2 .rankLeft {
        width: 6.25rem;
        height: 6.25rem;
        -moz-border-radius: 6.25rem;
        -webkit-border-radius: 6.25rem;
        border-radius: 6.25rem;
        overflow: hidden;
        margin: 1rem 1rem;
    }

    .rankLeft>img{
        width: 6.25rem;
        height: 6.25rem;
    }
    
    .bgBox1 .bgBox2 .rankRight {
        width: 95%;
        height: 11.25rem;
        padding-top: 2rem;
        padding-right: 4.6875rem;
    }

    .bgBox1 .bgBox2 .rankRight .flexMiddle p {
        color: #646464;
        font-size: 1.125rem;
        line-height: 2rem;
        text-align: left;
    }

    .rank li.L5 p {
        background: #cb7e48;
    }
    
    .rank li.L6 p {
        background: #cb7e48;
    }
    
    .rank li.L7 p {
        background: #ad532b;
    }
    
    .rank li.L8 p {
        background: #ad532b;
    }
}
/* 侧边浮动图标 */
@media only screen and (min-device-width:300px) and (max-device-width:768px) {
    div.fcBox {
        /* width: 4.375rem;
        height: 9.625rem;
        position: fixed;
        right: 0.9375rem; */
        top: 90%;
        /* margin-top: -5.625rem;
        z-index: 9999;
        background: url(/static/images/site/side_bar.png);
        background-size: 100% auto; */
    }
    /* div.fcBox .fc1 {
        margin-top: 3.325rem !important;
        padding-top: 1.8375rem;
        font-size: 0.5rem !important;
    }
    
    div.fcBox .fc2 {
        padding-top: 1.53125rem;
        font-size: 0.5rem !important;
    }
    
    div.fcBox .fcLink {
        width: 2.8rem;
        height: 2.8rem;
        display: block;
        margin: 0 auto;
        color: #3c3c3c;
        font-size: 0.4375rem;
        text-align: center;
    }
    
    div.fcBox .fcBacktop {
        width: 4rem;
        height: 1.5rem;
        display: block;
        margin: -0.625rem auto 0;
        left: 1.25rem;
        font-size: 0.525rem;
        line-height: 1.05rem;
        padding-left: 0.75rem;
        color: #fff;
    }
    
    div.fcBox a {
        text-decoration: none;
    }
    
    div.fcBox .qr {
        display: none;
        background: #FFF;
        position: absolute;
        top: 3.5rem;
        right: 3.55rem;
        z-index: 1;
        border: 0.3125rem solid rgb(255, 187, 0);
        border-radius: 0.3125rem;
    } */
}

@media only screen and (min-device-width:769px) and (max-device-width:1024px) {
    .div3 {
        margin-top: 4rem;
    }

    .div6{
        margin-top: 4rem;
    }

    .div1 {
        width: 100%;
        display: block;
        padding: 0;
        text-align: center;
        /* position: relative; */
    }
    
    .ul1 {
        position: static;
        transform: none;
        display: inline-block;
        margin: auto 0;
        float: none;
        height: 3rem;
    }

    .ul1>li {
        float: left;
        line-height: 1.5rem;
        margin-top: 4%;
    }

    .interval{
        padding-top: .8rem;
        margin: 0 auto !important;
    }

    .navbar-default .navbar-nav>li>a {
        padding: 0rem .5rem;
    }

    #highlight {
        height: 48rem;
        /* background-color: #fbf8ff; */
        background: url("/static/images/site/highlight_background.png") center no-repeat;
        background-size: 100% 100%;
        padding-top: 6.25rem;
    }
    
    #highlight img {
        width: 80%;
        max-width: 80%;
        height: auto;
        border: 0;
        vertical-align: middle;
        margin-left: 10%;
    }
}
@media only screen and (min-device-width:769px) and (max-device-width:1024px) {
    .jinjie {
        width: 100%;
        /* 1269px  79.3125rem */
        height: 27.75rem;
        /* 444px  27.75rem */
        margin: 0 auto;
        margin-top: 3.75rem;
    }

    .rank {
        height: 4.625rem;
    }
    
    .rank li.pre {
        left: 0;
        z-index: 9;
    }
    
    .rank li {
        line-height: 3.5rem;
        color: #FFFFFF;
        font-size: 1.125rem;
        text-align: center;
        position: absolute;
        top: 0;
        width: 9.3125rem;
        height: 4.625rem;
        cursor: pointer;
        list-style: none;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    
    .rank li.L1 {
        left: 10% !important;
        margin-top: -4rem;
        /* 11.5rem */
        z-index: 4;
    }
    
    .rank li.L2 {
        left: 20% !important;
        /* 19.875rem */
        z-index: 8;
    }
    
    .rank li.L3 {
        left: 30% !important;
        margin-top: -4rem;
        /* 28.25rem */
        z-index: 3;
    }
    
    .rank li.L4 {
        left: 40% !important;
        /* 36.625rem */
        z-index: 7;
    }
    
    .rank li.L5 {
        left: 50% !important;
        margin-top: -4rem;
        /* 45rem */
        z-index: 2;
    }
    
    .rank li.L6 {
        left: 60% !important;
        /* 53.125rem */
        z-index: 6;
    }
    
    .rank li.L7 {
        left: 70% !important;
        margin-top: -4rem;
        /* 61.5rem */
        z-index: 1;
    }
    
    .rank li.L8 {
        left: 77% !important;
        /* 69.875rem */
        z-index: 5;
    }
    
    .rank li.active {
        width: 23%;
        height: 5.625rem;
        line-height: 5rem;
        font-size: 1.5rem;
        top: -1rem;
        z-index: 10;
    }
    
    .rank li p {
        width: 100%;
        height: 100%;
        -moz-border-radius: 0.5rem;
        -webkit-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

    .bgBox1 {
        position: absolute;
        top: 3.5rem;
        left: 0rem;
        margin-left: auto;
        margin-right: auto;
        z-index: 99;
        background: #e8e8e8;
        height: 24.375rem;
        width: 100%;
        -moz-border-radius: 0.875rem;
        -webkit-border-radius: 0.875rem;
        border-radius: 0.875rem;
    }
    
    .bgBox1 .bgBox2 {
        background: #FFF;
        height: 23.125rem;
        width: 97%;
        margin: 0.625rem;
        -moz-border-radius: 0.5rem;
        -webkit-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }
    
    .sectioin4 .bgBox1 .bgBox2 .rankText {
        display: none;
        width: 90%;
    }
    
    .bgBox1 .bgBox2 .rankLeft {
        width: 6.25rem;
        height: 6.25rem;
        -moz-border-radius: 6.25rem;
        -webkit-border-radius: 6.25rem;
        border-radius: 6.25rem;
        overflow: hidden;
        margin: 1rem 1rem;
    }

    .rankLeft>img{
        width: 6.25rem;
        height: 6.25rem;
    }
    
    .bgBox1 .bgBox2 .rankRight {
        width: 95%;
        height: 11.25rem;
        padding-top: 2rem;
        padding-right: 4.6875rem;
    }

    .bgBox1 .bgBox2 .rankRight .flexMiddle p {
        color: #646464;
        font-size: 1.125rem;
        line-height: 2rem;
        text-align: left;
    }

    .rank li.L5 p {
        background: #cb7e48;
    }
    
    .rank li.L6 p {
        background: #cb7e48;
    }
    
    .rank li.L7 p {
        background: #ad532b;
    }
    
    .rank li.L8 p {
        background: #ad532b;
    }
}