@charset "UTF-8";

/*******************************************
 *******************************************
 *
 * @File: FlatPro by themeum.
 *
 * This file contains the styling for the actual theme, this
 * is the file you need to edit to change the look of the
 * theme.
 *
 * This files contents are outlined below >>>
 *
 *******************************************
 *******************************************
 *
 * == INDEX PAGE CSS
 *
 * 00 - 00 - common & reset css
 * 01. header
 * 02. hero-area 
 * 03. brand-area
 * 04. service-area
 * 05. portfolio-area
 * 06. testimonial-area
 * 07. faq-area
 * 08. footer-top
 * 09. tabs-area
 * 10. about-area
 * 11. team-area
 * 12. contact-area
 * 13. skill-area
 * 14. pricing-area
 * 15. extra */


/*****************************
 *   00 - common & reset css
 *****************************
 *
 */
 ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #b9b9b9;
    font-weight: 300;
    font-size: 14px;
}

 ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #b9b9b9;
    font-weight: 300;
    font-size: 14px;
}

 :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #b9b9b9;
    font-weight: 300;
    font-size: 14px;
}
.c1 {
    color: #2d3666;
}

.c1-bg {
    background-color: #2d3666;
}

.c1-bo {
    border-color: #2d3666 !important;
}

.c2 {
    color: #222538;
}

.c2-bg {
    background-color: #222538;
}

.c2-bo {
    border-color: #222538 !important;
}

li {
    list-style-type: none;
}

.c3,
#menu ul ul li a:hover,
.single-service.bordered .inner:hover .icon,
.bordered.single-service-2 .inner:hover .icon,
.bordered.single-service-3 .inner:hover .icon,
.single-service.bordered .inner:hover h4,
.bordered.single-service-2 .inner:hover h4,
.bordered.single-service-3 .inner:hover h4,
.single-service-3 .inner:hover .title .icon,
.isotope-menu li.active,
.isotope-menu li:hover,
.single-portfolio .inner .portfolio-img .hover-content .button,
.single-portfolio .inner .portfolio-content h3:hover,
.faq-sidebar li a,
.single-pricing .inner a.button:hover,
.single-pricing-2 .inner a.button:hover,
.single-pricing-2.active .inner a.button {
    color: #4698ff;
}

.c3-bg,
.bg1,
.button,
.hero-slider .owl-dots .owl-dot.active,
.single-service-2:hover .inner,
.single-portfolio .inner .portfolio-img .hover-content,
.faq .single-item.active,
.single-faq h2 span,
.footer_widget .nw_form button,
.tabs-area .tabs-nav li a.active,
.single-team .inner .team-img::after,
.single-pricing.active .inner,
.active.single-pricing-2 .inner,
.single-pricing-2.active .inner .title .price {
    background-color: #45aee6;
}

.c3-bo,
.button,
.single-service.bordered .inner:hover,
.bordered.single-service-2 .inner:hover,
.bordered.single-service-3 .inner:hover,
.testimonial-slider .single-slide,
.tabs-area .tabs-nav li a::after,
.tabs-area .tabs-nav li a.active,
.contact-form input:not([type="submit"]):focus,
.contact-form textarea:focus {
    border-color: #4698ff !important;
}

.trns,
.button,
.button-2,
.nav-column a,
.nav-column span,
.nav-column .right-nav span,
form.search-form,
#menu ul>li>a,
#menu ul ul,
#menu ul ul::after,
#menu ul ul li a,
.hero-slider .owl-dots .owl-dot,
.single-service .inner,
.single-service-2 .inner,
.single-service-3 .inner,
.single-service .inner .title .icon,
.single-service-2 .inner .title .icon,
.single-service-3 .inner .title .icon,
.single-service .inner .title h4,
.single-service-2 .inner .title h4,
.single-service-3 .inner .title h4,
.single-service .inner .content,
.single-service-2 .inner .content,
.single-service-3 .inner .content,
.isotope-menu li,
.single-portfolio .inner .portfolio-img .hover-content,
.single-portfolio .inner .portfolio-content h3,
.faq-sidebar li a,
.single-team .inner .team-img::after,
.contact-form input:not([type="submit"]),
.contact-form textarea {
    -webkit-transition: all 0.3s cubic-bezier(0.84, 0.35, 0.39, 0.74) 0s;
    transition: all 0.3s cubic-bezier(0.84, 0.35, 0.39, 0.74) 0s;
}

* {
    margin: 0;
    padding: 0;
}

a:focus,
a:hover,
a:visited,
input,
input:hover,
input:focus,
input:active,
select {
    text-decoration: none;
    outline: none !important;
}

img {
    max-width: 100%;
}

a,
span {
    display: inline-block;
}

.no-padding {
    padding: 0;
}

.static {
    position: static;
}

.relative {
    position: relative;
}

.bg2 {
    background-color: #fff;
}

.sp {
    /* padding-top: 60px; */
    margin-top: 75px;
    padding-bottom: 60px;
}

.spt {
    padding-top: 90px;
}

.spb {
    padding-bottom: 90px;
}


/* preloader css */

.preloader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    width: 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    text-align: center;
}

.preloader-spin {
    margin: 0 auto;
    height: 35px;
    width: 35px;
    display: inline-block;
    background: transparent;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: #d0d0d0 #d0d0d0 #111111 #d0d0d0;
    animation: 1s linear 0s normal none infinite running spinner_preloader;
}

@keyframes spinner_preloader {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(720deg);
    }
}


/* button */

.button {
    font-size: 14px;
    line-height: 40px;
    padding: 0 20px;
    border: 2px solid;
    color: #fff;
    border-radius: 3px;
    font-weight: 400;
}

.button:hover {
    color: #fff;
    background-color: #333;
    border-color: #333 !important;
}

@media only screen and (max-width: 767px) {
    .button {
        font-size: 13px;
        padding: 0 15px;
        line-height: 32px;
    }
}

.button-2 {
    font-size: 14px;
    line-height: 40px;
    padding: 0 20px;
    border: 2px solid;
    color: #fff;
    background-color: transparent;
    border: 2px solid #c1c2c5;
    color: #2d3666;
    border-radius: 3px;
    font-weight: 400;
}

.button-2:hover {
    color: #fff;
    background-color: #333;
    border-color: #333;
}

@media only screen and (max-width: 767px) {
    .button-2 {
        font-size: 13px;
        padding: 0 15px;
        line-height: 32px;
    }
}


/* section title */

.section-title {
    text-align: center;
    font-size: 16px;
    color: #7d91aa;
    font-weight: 300;
    margin-bottom: 60px;
}

.section-title h2 {
    margin: 0 0 5px;
    font-size: 32px;
    font-weight: 300;
    color: #313434;
}

.section-title.white {
    color: #ffffff;
}

.section-title.white h2 {
    color: #fff;
}


/* page-title */

.page-title {
    font-size: 16px;
    color: #7d91aa;
}

.page-title h2 {
    font-size: 50px;
    font-weight: 700;
    color: #333;
}

.page-title p:last-child {
    margin-bottom: 0;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 27px;
    font-weight: 400;
    color: #313434;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222538;
}

iframe {
    border: none;
}

.slicknav_menu {
    background-color: #1f2131;
    border-bottom: 1px solid #585757;
}

@media only screen and (min-width: 991px) {
    .slicknav_menu {
        display: none;
    }
}


/*****************************
 *   01. header
 ***************************** */

header {
    background-color: transparent;
    position: fixed;
    height: 76px;
    line-height: 76px;
    z-index: 999;
    top: 0;
    width: 100%;
    border-bottom: rgba(255, 255, 255, .21) 1px solid;
}

header.header.active {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid #ebebeb;
}

.logo-box {
    width: 290px;
    height: 55px;
}

.header.active .logo-img-write {
    background-image: url(/assets/img/content/logo-cai.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 75%;
}

.logo-img {
    background-image: url(/assets/img/content/logo.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 75%;
}

.logo-column a.logo {
    height: 35px;
    padding: 5px 0;
}

.logo-column a.logo img {
    max-height: 100%;
}

.nav-column {
    padding: 5px 0;
    font-size: 16px;
}

.nav-column a,
.nav-column span {
    color: #7286a0;
    line-height: 25px;
    vertical-align: top;
    cursor: pointer;
}

.nav-column a:hover,
.nav-column span:hover {
    color: #b5c3d4;
}

.nav-column .right-nav {
    float: right;
    position: relative;
    top: 20px;
    height: 40px;
}

.nav-column .right-nav span {
    padding: 0 15px;
}

.nav-column .right-nav .search-icon.active {
    color: red;
}

.nav-column .right-nav .search-icon.active::before {
    content: "";
}

.nav-column .right-nav .header-social {
    display: inline-block;
}

.nav-column .right-nav .header-social a {
    padding: 0 5px;
    vertical-align: top;
}

form.search-form {
    position: absolute;
    right: 100%;
    top: 50%;
    z-index: 2;
    width: 230px;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
}

form.search-form.active {
    opacity: 1;
    visibility: visible;
}

@media only screen and (max-width: 767px) {
    form.search-form {
        transform: translateY(50%) translateX(0%);
        right: 50%;
        margin-top: 20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
}

form.search-form input {
    border: none;
    width: 100%;
    border-radius: 5px;
    height: 40px;
    text-indent: 20px;
}

form.search-form button {
    border: none;
    right: 0;
    position: absolute;
    top: 0;
    width: 38px;
    background: transparent;
    height: 100%;
}

#menu ul {
    text-align: right;
    margin: 0;
}

#menu ul li.has-child>a::after {
    content: "";
    font-family: "fontawesome";
    margin-left: 4px;
}

#menu ul>li {
    display: inline-block;
    position: relative;
}

#menu ul>li>a {
    margin: 0 15px;
    font-weight: 500;
    line-height: 70px;
    height: 70px;
    font-size: 18px;
    color: rgba(255, 255, 255, .65);
}

.header.active #menu ul>li>a {
    color: #2b3441;
}

#menu ul>li>a:hover {
    color: #fff;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.header.active #menu ul>li>a:hover {
    color: #45aee6;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;   
}

#menu ul>li.current-menu-item>a {
    color: #fff;
    border-bottom: 3px solid #fff;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.header.active #menu ul>li.current-menu-item>a {
    color: #45aee6;
    border-bottom: 3px solid #45aee6;
}

#menu ul ul {
    position: absolute;
    background-color: #fff;
    left: 0;
    top: calc(100% + 23px);
    z-index: 2;
    width: 220px;
    text-align: left;
    padding: 15px 20px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

#menu ul ul::after {
    content: "";
    border: 8px solid transparent;
    border-bottom-color: #fff;
    left: 25px;
    top: -16px;
    position: absolute;
}

#menu ul ul::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 100%;
    left: 0;
    top: -20px;
}

#menu ul ul li {
    display: block;
}

#menu ul ul li a {
    display: block;
    font-weight: 300;
    color: #222538;
    font-size: 13px;
    padding: 0;
    margin: 5px 0;
}

#menu ul li:hover>ul {
    opacity: 1;
    visibility: visible;
}


/*****************************
 *   02. hero-area
 ***************************** */

.hero-slider .single-slide {
    height: 540px;
    background-size: cover;
    background-position: center center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    font-size: 24px;
    line-height: 34px;
    font-weight: 300;
    position: relative;
}

@media only screen and (max-width: 991px) {
    /* .hero-slider .single-slide {
      
      padding: 60px 30px 100px;
      z-index: 1; } */
    .hero-slider .single-slide::after {
        content: "";
        height: 100%;
        width: 100%;
        background-color: #f1f4f9;
        z-index: -1;
        left: 0;
        top: 0;
        position: absolute;
    }
}

@media only screen and (max-width: 767px) {
    .hero-slider .single-slide {
        font-size: 18px;
        line-height: 24px;
        text-align: center;
    }
}

.hero-slider .single-slide h2 {
    font-size: 50px;
    line-height: 67px;
    margin: 0 0 25px;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .hero-slider .single-slide h2 {
        font-size: 30px;
        line-height: 35px;
    }
}

.hero-slider .single-slide .slide-btn {
    margin-top: 50px;
}

.hero-slider .single-slide .slide-btn a:not(:last-child) {
    margin-right: 4px;
}

.hero-slider .owl-dots {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 20px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.hero-slider .owl-dots .owl-dot {
    background-color: #8EF3EB;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border-radius: 30px;
}

.hero-slider .owl-dots .owl-dot.active {
    /* width: 40px;  */
}

.owl-nav {
    display: none;
}

.hero-slider .owl-nav>div {
    position: absolute;
    left: 0;
    top: 50%;
    height: 40px;
    width: 40px;
    background-color: #fff;
    text-align: center;
    line-height: 40px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.hero-slider .owl-nav>div.owl-next {
    left: auto;
    right: 0;
}


/*****************************
 *   03. brand-area
 ***************************** */

.brand-area {
    padding: 50px 0;
}

.spb .brand-area {
    padding: 0;
}

.single-brand {
    text-align: center;
    margin: 5px 0;
}


/*****************************


/*****************************
 *   05. portfolio-area
 ***************************** */

.isotope-menu {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    text-align: center;
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
}

.isotope-menu li {
    display: inline-block;
    padding: 0 15px;
    cursor: pointer;
    color: #7286a0;
}

.single-portfolio {
    margin: 20px 0;
}

.single-portfolio .inner .portfolio-img {
    position: relative;
}

.single-portfolio .inner .portfolio-img img {
    width: 100%;
}

.single-portfolio .inner .portfolio-img .hover-content {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: center;
    opacity: 0;
    visibility: hidden;
}

.single-portfolio .inner .portfolio-img .hover-content .button {
    background-color: #fff;
    border-color: #fff !important;
}

.single-portfolio .inner .portfolio-img .hover-content .button:hover {
    background-color: #222;
    color: #fff;
    border-color: #222 !important;
}

.single-portfolio .inner .portfolio-img:hover .hover-content {
    opacity: 1;
    visibility: visible;
}

.single-portfolio .inner .portfolio-content {
    text-align: center;
    padding-top: 25px;
    color: #6d7784;
}

.single-portfolio .inner .portfolio-content a {
    display: block;
}

.single-portfolio .inner .portfolio-content h3 {
    font-weight: 400;
    margin: 0;
    font-size: 24px;
}


/*****************************
 *   06. testimonial-area
 ***************************** */

.testimonial-area .section-title {
    margin-bottom: 45px;
}

.testimonial-slider .single-slide {
    background-color: #fff;
    padding: 35px;
    border-radius: 5px;
    font-weight: 300;
    color: #7d91aa;
    border: 1px solid;
}

.testimonial-slider .single-slide img {
    width: auto;
}

.testimonial-slider .single-slide .client-info {
    overflow: hidden;
}

.testimonial-slider .single-slide .client-info .client-img {
    width: 58px;
    float: left;
    border-radius: 50%;
    overflow: hidden;
}

.testimonial-slider .single-slide .client-info .client-data {
    padding-left: 78px;
}

.testimonial-slider .single-slide .client-info .client-data h4 {
    font-size: 16px;
    margin: 4px 0 0;
}

.testimonial-slider .owl-nav>div {
    background-color: #222222;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    position: absolute;
    left: -55px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 4px;
}

@media only screen and (max-width: 991px) {
    .testimonial-slider .owl-nav>div {
        left: -12.5px;
        height: 25px;
        width: 25px;
        line-height: 25px;
    }
    .testimonial-slider .owl-nav>div i {
        font-size: 13px;
    }
}

.testimonial-slider .owl-nav>div.owl-next {
    left: auto;
    right: -55px;
}

@media only screen and (max-width: 991px) {
    .testimonial-slider .owl-nav>div.owl-next {
        right: -12.5px;
    }
}


/*****************************
 *   07. faq-area
 ***************************** */

.faq-area .section-title {
    margin-bottom: 60px;
}

.faq {
    padding: 0;
    margin: 0;
    list-style: none;
}

.faq .single-item {
    background-color: #fff;
    padding: 20px;
    padding-left: 50px;
    line-height: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
}

.faq .single-item::after {
    content: "+";
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #222;
    color: #fff;
    position: absolute;
    left: 15px;
    top: 15px;
    text-align: center;
    line-height: 25px;
    font-size: 20px;
}

.faq .single-item.active::after {
    content: "-";
    background-color: #fff;
    color: #222;
}

.faq .single-item.active {
    color: #fff;
}

.faq .single-item.active h4 {
    color: #fff;
}

.faq .single-item h4 {
    font-size: 16px;
    margin: 0;
}

.faq .single-item .content {
    padding-top: 15px;
    font-size: 14px;
    font-weight: 400;
    display: none;
}

.single-faq {
    border: 1px solid #cad4de;
    padding: 35px;
    margin-bottom: 30px;
    border-radius: 5px;
    color: #7d91aa;
    font-size: 14px;
    font-weight: 300;
}

.single-faq h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.single-faq h2 span {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    border-radius: 4px;
    margin-right: 20px;
}

@media only screen and (max-width: 991px) {
    .single-faq h2 span {
        font-size: 18px;
        line-height: 30px;
        height: 30px;
        width: 30px;
        margin-right: 15px;
    }
}

.faq-sidebar-wrap {
    border: 1px solid #cad4de;
    margin-bottom: 30px;
    padding: 35px;
    border-radius: 4px;
}

@media only screen and (max-width: 991px) {
    .faq-sidebar-wrap {
        padding: 15px;
    }
}

.faq-sidebar-wrap h3 {
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 15px;
}

.faq-sidebar {
    padding: 0;
    list-style: none;
    margin: 0;
}

.faq-sidebar li {
    position: relative;
    padding-left: 20px;
}

.faq-sidebar li a:hover {
    color: #222;
}

.faq-sidebar li span {
    color: #7d91aa;
    position: absolute;
    left: 0;
    top: 0;
}


/*****************************
 *   08. footer-top
 ***************************** */

footer {
    background-color: #272938;
    color: #7286a0;
    line-height: 24px;
}

.footer-top {
    padding: 65px 0;
}

@media only screen and (max-width: 991px) {
    .footer-top {
        padding: 30px 0;
    }
}

.footer-top .media img {
    width: 60px;
}

.footer-top .media img img {
    width: 100%;
}

.footer_widget h5 {
    font-size: 16px;
}

.footer_widget h4,
.footer_widget h5 {
    color: #7286a0;
}

@media only screen and (max-width: 991px) {
    .footer_widget {
        padding: 15px;
    }
}

.footer_widget h4 {
    margin-bottom: 40px;
    font-size: 18px;
}

@media only screen and (max-width: 991px) {
    .footer_widget h4 {
        margin-bottom: 20px;
    }
}

.footer_widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer_widget ul li a {
    color: #7286a0;
    padding: 3px 0;
}

.footer_widget .media {
    margin-bottom: 14px;
}

.footer_widget .media h5 {
    margin: 0;
    line-height: 20px;
}

.footer_widget .media a {
    color: #7286a0;
    font-size: 14px;
}

.footer_widget .media span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.footer-bottom {
    background-color: #1F2020;
    margin-top: 80px;
    padding: 25px 0;
    color: rgba(255, 255, 255, .5);
}

@media only screen and (max-width: 991px) {
    .footer-bottom {
        text-align: center;
    }
    .footer-bottom .text-right {
        text-align: center !important;
        margin-top: 5px;
    }
}


/*****************************/

.right-nav .ux-site-nav_applybtn:hover {
    /* -webkit-animation: bubbles 1s forwards ease-out;
  animation: bubbles 1s forwards ease-out;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 90% 90% / 0.88em 0.88em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 23% 141% / 0.81em 0.81em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 17% 90% / 0.68em 0.68em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 15% 94% / 1.12em 1.12em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 42% 126% / 0.86em 0.86em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 102% 120% / 0.58em 0.58em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 12% 121% / 0.67em 0.67em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 69% 87% / 1.18em 1.18em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 32% 99% / 0.79em 0.79em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 84% 129% / 0.79em 0.79em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 40% 99% / 0.72em 0.72em;
  background-color: #56C9C2; */
    color: #fff;
    /* border-color: transparent;
  background-repeat: no-repeat; */
}

.header.active .right-nav .ux-site-nav_applybtn {
    border: 1px solid #a9b0b7;
    color: #2b3441;
}

.header.active .right-nav .ux-site-nav_applybtn.dredge {
    border: 1px solid transparent;
    color: #fff;
    background-image: linear-gradient(-154deg, #9ed6de 0%, #32aae8 100%);
}

@-webkit-keyframes bubbles {
    100% {
        background-position: 92% -220%, 31% -185%, 24% 6%, 16% -328%, 39% -366%, 110% -375%, 5% -60%, 59% -365%, 41% -363%, 82% -8%, 37% -224%;
        box-shadow: inset 0 -6.5em 0 #0072c4;
    }
}

@keyframes bubbles {
    100% {
        background-position: 92% -220%, 31% -185%, 24% 6%, 16% -328%, 39% -366%, 110% -375%, 5% -60%, 59% -365%, 41% -363%, 82% -8%, 37% -224%;
        box-shadow: inset 0 -6.5em 0 linear-gradient(-141deg, #4fcbbe 3%, #02a0b6 100%);
        /* background-image: linear-gradient(-141deg,#4fcbbe 3%,#02a0b6 100%); */
    }
}

.header.active .right-nav .ux-site-nav_applybtn.dredge:hover {
    /* -webkit-animation: bubbles 1s forwards ease-out;
  animation: bubbles 1s forwards ease-out;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 90% 90% / 0.88em 0.88em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 23% 141% / 0.81em 0.81em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 17% 90% / 0.68em 0.68em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 15% 94% / 1.12em 1.12em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 42% 126% / 0.86em 0.86em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 102% 120% / 0.58em 0.58em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 12% 121% / 0.67em 0.67em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 69% 87% / 1.18em 1.18em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 32% 99% / 0.79em 0.79em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 84% 129% / 0.79em 0.79em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 40% 99% / 0.72em 0.72em;
  background-color: #56C9C2; */
    color: #fff;
    /* background-repeat: no-repeat; */
}

.header.active .right-nav .ux-site-nav_applybtn:hover {
    /* -webkit-animation: bubbles 1s forwards ease-out;
  animation: bubbles 1s forwards ease-out;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 90% 90% / 0.88em 0.88em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 23% 141% / 0.81em 0.81em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 17% 90% / 0.68em 0.68em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 15% 94% / 1.12em 1.12em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 42% 126% / 0.86em 0.86em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 102% 120% / 0.58em 0.58em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 12% 121% / 0.67em 0.67em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 69% 87% / 1.18em 1.18em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 32% 99% / 0.79em 0.79em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 84% 129% / 0.79em 0.79em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 40% 99% / 0.72em 0.72em;
  background-color: #56C9C2; */
    color: #313434;
    /* border-color: transparent;
  background-repeat: no-repeat; */
}

.right-nav .ux-site-nav_applybtn {
    line-height: 30px;
    color: #fff;
    margin-right: 10px;
    background-color: transparent;
    font-size: 16px;
    border: 1px solid #fff;
    text-align: center;
    padding: 0 23px;
    border-radius: 20px;
}

 
.md-index-qy {
    /* height: 570px; */
}

.md-index-tool_item_ic {
    width: 190px;
    height: 190px;
    margin: 0 auto;
}

.md-index-hx_item_ic {
    height: 89px;
    margin: 26px auto 26px auto;
}

.content-box {
    margin-bottom: 26px;
}

.content-box p {
    margin-bottom: 0;
    color: #999;
}

.portfolio-content a h3 {
    color: #0f8ae3;
    margin-bottom: 10px !important;
}

.portfolio-content p {
    margin-bottom: 0;
}

.md-index-qy_items {
    width: 100%;
    margin: 0 auto;
}

.f-fl {
    float: left;
}

.long-arrow-box { 
    font-size: 20px;
    width: 100%;
    height: 100%;
    text-align: center; 
}

.md-index-qy_item {
    width: 220px;
    height: 160px;
    line-height: 160px;
    border: 1px solid #ddd;
    margin: 0 20px 20px 0;
    background: #D3DADA;
}

.md-index-qy_item1 {
    background-image: url(/assets/img/content/1-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.md-index-qy_item2 {
    background-image: url(/assets/img/content/1-2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.md-index-qy_item3 {
    background-image: url(/assets/img/content/1-3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.md-index-qy_item4 {
    background-image: url(/assets/img/content/1-4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.md-index-qy_item5 {
    background-image: url(/assets/img/content/1-5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.md-index-qy_item6 {
    background-image: url(/assets/img/content/1-6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.md-index-qy_item7 {
    background-image: url(/assets/img/content/1-7.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 460px;
}

.img-bg-box {
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    border-radius: 6px;
}

.img-bg-box1 {
    background-image: url(/assets/img/content/bg11.png);
    background-repeat: no-repeat;
    background-position: center;
}

.img-bg-box2 {
    background-image: url(/assets/img/content/bg12.png);
    background-repeat: no-repeat;
    background-position: center;
}

.img-bg-box3 {
    background-image: url(/assets/img/content/bg13.png);
    background-repeat: no-repeat;
    background-position: center;
}

.img-bg-box4 {
    background-image: url(/assets/img/content/bg14.png);
    background-repeat: no-repeat;
    background-position: center;
}

.active .img-bg-box11,
.tactive .img-bg-box11 {
    display: block;
    width: 100%;
    background-size: 100% auto;
    border-radius: 8px;
    background-image: url(/assets/img/content/bg01.png);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.active .img-bg-box12,
.tactive .img-bg-box12 {
    display: block;
    width: 100%;
    background-size: 100% auto;
    border-radius: 8px;
    background-image: url(/assets/img/content/bg02.png);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.active .img-bg-box13,
.tactive .img-bg-box13 {
    display: block;
    width: 100%;
    background-size: 100% auto;
    border-radius: 8px;
    background-image: url(/assets/img/content/bg03.png);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.active .img-bg-box14,
.tactive .img-bg-box14 {
    display: block;
    width: 100%;
    background-size: 100% auto;
    border-radius: 8px;
    background-image: url(/assets/img/content/bg04.png);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.active .img-bg-box1,
.active .img-bg-box2,
.active .img-bg-box3,
.active .img-bg-box4,
.tactive .img-bg-box1,
.tactive .img-bg-box2,
.tactive .img-bg-box3,
.tactive .img-bg-box4
{
    /* display: none; */
}

.letf-top.active .name-bottom,
.letf-top.tactive .name-bottom {
    color: #fff;
}

.icon-recommendations .icon {
    color: #45aee6;
    font-size: 18px;
}

.letf-top {
    text-align: center;
    height: 217px;
    margin: 0 auto;
    width: 100%;
    cursor: pointer;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.10);
    position: relative;
    border-radius: 8px;
    margin-bottom: 30px;
}

.photo-box .icon {
    color: #fff;
    display: inline-block;
    font-size: 40px;
    /* margin-top: 30px; */
    position: absolute;
    top: 18px;
}

.letf-top .name-bottom {
    position: absolute;
    top: 70%;
    right: 50%;
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    transform: translate(50%, -50%);
}

.md-index-qy_item8 {
    background: #fff;
    cursor: pointer;
    color: #313434;
    border: 1px solid #D3DADA;
}

.md-index-qy_item8:hover {
    color: #313434;
    border-color: transparent;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.10);
}

.md-index-qy_item9 {
    background-image: url(/assets/img/content/1-8.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

 

.md-contact-main_item {
    width: 100%;
    height: 322px;
    /* margin: 0 30px; */
}

 

.md-contact-main_item_img {
    height: 184px;
    line-height: 184px;
    color: #fff;
    font-size: 28px;
    text-align: center;
}

 

.md-contact-main_item_con_li {
    width: fit-content;
    padding-top: 38px;
    margin: auto;
    line-height: 30px;
    color: #fff;
    font-size: 16px;
}

.f-cb,
.f-cbli li {
    zoom: 1;
}

.md-contact-main .md-contact-main_item .md-contact-main_item_con_ic {
    font-size: 24px;
    color: #fff;
    margin-top: 2px;
}

[class^="ux-qyy-icon-"],
[class*=" ux-qyy-icon-"] {
    font-family: "ux-qyy-icon" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    line-height: 1;
}

.md-contact-main_item_con_ic {
    margin-right: 15px;
}

.ux-qyy-icon-phone5:before {
    content: "\EA01";
}

.md-contact-main .md-contact-main_item .phone_num {
    font-size: 20px;
    line-height: 30px;
    color: #fff;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
    .container.container-box {
        max-width: 1000px;
    }
}

.right-recommendations {
    font-size: 16px;
    color: #6b6c6d;
    margin-bottom: 35px;
}

.icon-recommendations-box {
    width: 100%;
}

.icon-recommendations {
    width: 50%;
    float: left;
    margin-bottom: 15px;
}

.orientation-course {
    display: inline-block;
    margin-left: 10px;
    color: #313434;
    font-size: 16px;
}

.button-green {
    padding: 0 40px;
    height: 49px;
    line-height: 49px;
    font-size: 16px;
    border-radius: 40px;
    color: #fff;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: 20px;
    background-image: linear-gradient(-154deg, #9ed6de 0%, #32aae8 100%);
}

.button-white {
    background: #FFFFFF;
    box-shadow: 0 2px 16px 0 #2F75D5;
    border-radius: 24.5px;
    color: #4483EC;
    width: 140px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 15px;
    border-radius: 24.5px;
}

.button-yellow {
    padding: 0 40px;
    height: 49px;
    line-height: 49px;
    font-size: 16px;
    border-radius: 24.5px;
    color: #fff;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: 20px;
    /* background: #FFD502; */
    /* background-image: linear-gradient(180deg,#fd9802 0,#f5bc21 100%); */
    background-image: linear-gradient(-123deg, #FFD817 0%, #FBBA0D 100%);
}

.button-green:hover {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    color: #fff;
    box-shadow: 0px 6px 22px rgba(0, 0, 0, 0.15);
}

.education-video-right .courder-button {
    margin-top: 35px;
}

.button-icon {
    display: inline-block;
}

.button-icon:-webkit-any-link {
    color: -webkit-link;
    cursor: auto;
    text-decoration: underline;
}

@-webkit-keyframes bubbles {
    100% {
        background-position: 92% -220%, 31% -185%, 24% 6%, 16% -328%, 39% -366%, 110% -375%, 5% -60%, 59% -365%, 41% -363%, 82% -8%, 37% -224%;
        box-shadow: inset 0 -6.5em 0 #0072c4;
    }
}

@keyframes bubbles {
    100% {
        background-position: 92% -220%, 31% -185%, 24% 6%, 16% -328%, 39% -366%, 110% -375%, 5% -60%, 59% -365%, 41% -363%, 82% -8%, 37% -224%;
        box-shadow: inset 0 -6.5em 0 linear-gradient(-141deg, #4fcbbe 3%, #02a0b6 100%);
        /* background-image: linear-gradient(-141deg,#4fcbbe 3%,#02a0b6 100%); */
    }
}


/* .button-yellow:hover{
  -webkit-animation: bubbles 1s forwards ease-out;
  animation: bubbles 1s forwards ease-out;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 90% 90% / 0.88em 0.88em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 23% 141% / 0.81em 0.81em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 17% 90% / 0.68em 0.68em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 15% 94% / 1.12em 1.12em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 42% 126% / 0.86em 0.86em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 102% 120% / 0.58em 0.58em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 12% 121% / 0.67em 0.67em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 69% 87% / 1.18em 1.18em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 32% 99% / 0.79em 0.79em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 84% 129% / 0.79em 0.79em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 40% 99% / 0.72em 0.72em;
  background-color: #56C9C2;
  color:#fff;
  background-repeat: no-repeat;
} */

.button-yellow:hover {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    color: #fff;
    box-shadow: 0px 6px 22px rgba(0, 0, 0, 0.15);
}


/* 申请开通 */

form {
    width: 400px;
    margin: auto;
}

.register-box {
    border: 1px solid #ddd;
    margin-bottom: 21px;
    border-radius: 5px;
    position: relative;
}

.register-box label {
    height: 40px;
    line-height: 39px;
    display: inline-block;
	margin: 0;
}

.register-box input {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding: 10px 10px 8px 10px;
    font-size: 14px;
    color: #666;
    font-family: "Microsoft YaHei", "Hiragino Sans GB";
}

.register-box .tips {
    position: absolute;
    font-size: 12px;
    color: #ccc;
	bottom: -24px;
}


/*用户名*/

.register-box .username_label {
    word-spacing: 10px;
    width: 100%;
}


/*密码，确认密码，*/

.register-box .other_label {
    word-spacing: 2px;
    width: 100%;
}


/*手机号*/

.register-box span {
    display: inline-block;
    width: 77px;
    height: 40px;
    /* border-right: 1px solid #ddd; */
}


/*验证码*/

#code {
    display: inline-block;
    width: 100px;
    height: 41px;
    vertical-align: middle;
    background-color: #ddd;
    font-size: 25px;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    line-height: 46px;
    position: absolute;
    right: -130px;
}

.modal-body .register-box.register-box-code {
    position: relative;
}

.register-box-code label input {
    /* position: relative; */
    width: calc(100% - 129px) !important;
    /*border: 1px solid #ddd;
    border-radius: 4px;*/
}

.submitbtn {
    width: 100%;
    height: 60px;
    color: #fff;
    border-radius: 4px;
    background: #45aee6;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    font-family: "Microsoft YaHei", "Hiragino Sans GB";
}

.submitbtn:hover {
    background: #45aee6;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.modal-header {
    position: relative;
}

.modal-header .close {
    position: absolute;
    right: 35px;
    top: 14px;
    cursor: pointer;
}

.modal-title {
    font-size: 20px;
}

.VerifyCodeImag {
    cursor: pointer;
    margin-top: 0px;
    vertical-align: top;
    height: 36px;
    width: 100px;
    position: absolute;
    position: absolute;
    right: 0;
    top: 0px;
}


/*协议*/

.arguement {
    margin-bottom: 25px;
}

.arguement input {
    vertical-align: middle;
}

.arguement a {
    color: #38f;
    text-decoration: none;
    font-size: 12px;
}


/*提交按钮*/

.submit_btn button {
    width: 100%;
    height: 60px;
    color: #fff;
    border-radius: 4px;
    background: #02BDD0;
    border: 0;
    font-size: 16px;
    font-family: "Microsoft YaHei", "Hiragino Sans GB";
}

.submit_btn button:hover {
    background: #1C67B7;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.register-box label {
    /* margin-bottom: 0; */
}

.register-box input {
    border: 0;
}

.modal-content .modal-body {
    padding: 21px 40px 40px 40px;
}

.modal-header {
    border-bottom: 0;
    padding: 30px 40px 0 40px;
}

.modal-content {
    border: 0;
}

.right-top {
    width: 100%;
    padding: 30px;
}

.right-top .right-top-title {
    font-size: 24px;
    color: #313434;
    border-left: 4px solid #45aee6;
    padding-left: 10px;
    line-height: 24px;
    margin-bottom: 35px;
}

.img-bg-course {
    height: auto;
    width: 100%;
}

.img-bg-course img {
    width: 100%;
    height: 100%;
}

.plan-management {
    font-size: 24px;
    color: #313434;
    margin-bottom: 34px;
}

.course-box-image {
    width: 270px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
}

.course-box-image img {
    width: 270px;
    height: 150px;
    transition: all 0.6s;
}

.course-name {
    font-size: 16px;
    color: #313434;
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    cursor: pointer;
    display: inline-block;
}

.course-school-box>div {
    width: 50%;
    float: left;
}

.number-people {
    /* width: calc(100% - 20px); */
}

.people-img {
    /* width: 12px; */
}

.number-people-box {
    text-align: right;
}

.course-school-box {
    margin-top: 10px;
    color: #6b6c6d;
    margin-bottom: 42px;
}

.course-box {
    display: block;
}

.people-img {
    background-image: url(/assets/img/content/people.png);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 20px;
}

.tactive .course-box-image {
    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.15);
}

.tactive .course-box-image img {
    transform: scale(1.2);
    border-radius: 8px;
}

.photo-portfolio .icon {
    font-size: 14px;
}

.photo-portfolio .icon.iconfont.iconyouxiang {
    font-size: 12px;
}

.tactive .course-name {
    color: #45aee6;
}

.contact-information-title {
    padding-bottom: 30px;
    border-bottom: 1px solid #d1d1d1;
    margin-bottom: 30px;
}

.contact-information-title .bag-title {
    font-size: 24px;
    padding-left: 12px;
    line-height: 25px;
    color: #313434;
    padding-right: 12px;
}

.contact-information-title .bag-title1 {
    border-left: 4px solid #7068EC;
}

.contact-information-title .bag-title2 {
    border-left: 4px solid #FE5D00;
}

.contact-information-title .bag-title3 {
    border-left: 4px solid #03C691;
}

.contact-information-title .bag-title4 {
    border-left: 4px solid #45aee6;
}

.contact-information-title .issue {
    font-size: 14px;
    color: #6b6c6d;
}

.contact-information {
    padding: 40px;
    /* border: 1px solid #ddd; */
    border-radius: 13px;
    box-shadow: 0 2px 14px 0 rgba(211, 211, 211, .5);
}

.contact-information .photo-portfolio {
    margin-bottom: 16px;
}

.contact-information .photo-portfolio img {
    margin-right: 10px;
}

.education-video {
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin-top: 34px;
    position: relative;
}

.education-video-right {
    margin-top: 50px;
    width: 100%;
    height: 100%;
}

.education-video .arrow {
    position: absolute;
    top: 50%;
    color: #fff;
    right: 50%;
    /* display: inline-block; */
    display: none;
    font-size: 59px;
    transform: translate(50%, -50%);
}

.education-video img.video {
    width: 100%;
    height: 100%;
    /* transition: all 0.6s; */
}

.education-video img.video:hover {
    /* transform: scale(1.2); */
}

.education-video-right-name,
.education-video-right-number {
    font-size: 24px;
}

.education-video-right-box {
    color: #ffb900;
    margin-left: 15px;
}

.course-name-box {
    margin-bottom: 30px;
}

.education-video-right .course-time-box {
    padding: 22px;
    /* background: #F9F9F9; */
    border-top: 1px solid #ddd;
}

.course-time-box .num-course-right {
    /* float: right; */
    display: inline-block;
    padding: 3px;
}

.course-time-box .people-number-join {
    /* margin-top: 25px; */
}

.course-details {
    padding: 28px 46px;
}

.course-details,
.course-details-right {
    background: #fff;
}

.course-details-list ul li {
    float: left;
    height: 75px;
    font-size: 18px;
    line-height: 65px;
    cursor: pointer;
    margin-right: 57px;
}

.course-details-list ul li:hover {
    color: #45aee6;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.course-details-list ul li.active {
    color: #45aee6;
    border-bottom: 4px solid;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.course-details-list ul {
    /* padding-bottom: 25px; */
    height: 75px;
    line-height: 75px;
    border-bottom: 1px solid #ddd;
}

.course-details-bottom .course-img-de {
    margin-right: 4px;
}

.course-details-bottom .course-spake {
    font-size: 16px;
    color: #2b3441;
    font-weight: 600;
}

.course-details-bottom .course-spake-box {
    margin-bottom: 20px;
}

.course-details-bottom .course-description {
    margin-bottom: 28px;
    color: #6c6b6d;
}

.course-details-right {
    padding: 25px 21px;
    display: none;
}

.course-details-bottom .icon {
    color: #45aee6;
}

.course-details-right .rechel,
.course-details-right-bottom .rechel {
    padding-left: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    border-left: 4px solid #45aee6;
}

.rechel-title {
    padding-bottom: 17px;
    margin-bottom: 23px;
    border-bottom: 1px solid #ddd;
}

.teacher-introduced {
    margin-top: 23px;
}

.teacher-introduced-img img {
    border-radius: 50%;
}

.teacher-introduced>div {
    float: left;
}

.teacher-introduced .people-name {
    width: calc(100% - 75px);
}

.people-name .school-name {
    font-size: 12px;
    color: #6b6c6d;
}

.teacher-introduced-img {
    margin-right: 15px;
    border-radius: 50%;
    /* border:1px solid #ddd; */
}

.course-details-right-bottom {
    /* margin-top: 20px; */
    padding: 25px 20px;
    background: #fff;
}

.correlated-curriculum {
    width: 100%;
    cursor: pointer;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
}

.correlated-curriculum img {
    width: 100%;
    height: 100%;
    transition: all 0.6s;
}

.correlated-curriculum-box.tactive .correlated-curriculum {
    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.15);
}

.correlated-curriculum-box.tactive img {
    transform: scale(1.4);
}

.correlated-curriculum-box.tactive .correlated-curriculum-name {
    color: #45aee6;
}

.correlated-curriculum-name {
    margin-top: 6px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    color: #313434;
    cursor: pointer;
    display: inline-block;
}

.directory-list-number {
    width: 20px;
}
 
.directory-list-number-right {
    width: calc(100% - 30px);
}

.directory-list-box>div {
    float: left;
}

.directory-list-number-right-bottom {
    color: #6b6c6d;
    margin-left: 10px;
}

.directory-list-number-right-name {
    font-size: 16px;
}

.directory-list-box.clearfix {
    margin-bottom: 30px;
    font-size: 16px;
}

.img-bg-course .img-bg-course-bottom {
    margin-top: 175px;
    width: 500px;
    color: rgba(255, 255, 255, .9);
}

.bg-course-name-bottom {
    margin: 20px 0;
    font-weight: 300;
    font-size: 16px;
    color: rgba(255, 255, 255, .8);
}

.new-title {
    opacity: 1;
    font-size: 30px;
    color: #fff;
    line-height: 42px;
}

.bg-course-name {
    font-size: 30px;
}

.bg-course-name.new-title-pre {
    font-size: 18px;
}

.modal-open .modal.modal-box {
    overflow: hidden;
    height: 100%;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .modal-box .modal-dialog {
        margin: 0 auto;
    }
}

.modal.show .modal-dialog {
    height: 100%;
    position: relative;
}

.modal-dialog .modal-content {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
}

.floating-text {
    height: 480px;
    position: absolute;
    top: 0;
    text-align: left;
    width: 1200px;
    left: 50%;
    padding: 0 20px;
    transform: translate(-50%, 0);
}

.people-img-box .icon {
    font-size: 14px;
}

.education-video .mask-layer {
    width: 570px;
    height: 345px;
    position: absolute;
    top: 0;
    /* background: rgba(37,37,37,0.64); */
    border-radius: 8px;
}

.recommendation-rate {
    display: inline-block;
    color: #6b6c6d;
}

.recommendation-rate-box .icon {
    color: #45aee6;
}

.recommendation-rate-box {
    margin-bottom: 15px;
}

.footer-bottom-project {
    text-align: center;
    margin-top: 55px;
}

.footer-bottom-project img {
    width: 100px;
    margin-bottom: 5px;
}

.footer-bottom-left {
    margin-top: 25px;
    margin-bottom: 10px;
    /* color:#fff; */
}

.footer-bottom-left span:first-child {
    padding-left: 0;
}

.footer-bottom-left span:last-child {
    border-right: 0;
}

.footer-bottom-left span {
    display: inline-block;
    padding: 0 20px;
    height: 15px;
    line-height: 15px;
    border-right: 1px solid rgba(255, 255, 255, .5);
}

#loginPage {
    width: 80px;
    text-align: center;
    padding: 0;
}

.serviceQQ {
    position: fixed;
    top: 94%;
    right: 2%;
    transform: translate(0, -50%);
    width: 40px;
    border-radius: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    /* font-size: 35px; */
    background: #FFD416;
    box-shadow: 0 8px 10px 0 rgba(254, 203, 19, 0.30);
}

.serviceQQ .icon {
    font-size: 24px;
    color: #fff;
}


/* 提示 */

body .modal-backdrop {
    z-index: 2222;
    opacity: .5 !important;
}

.slide.in {
    position: fixed;
    width: 100%;
}

.modal.modal-box.fade.show {
    background: rgba(0, 0, 0, .5) !important;
}

.slide.in .modal-header {
    border-bottom: 1px solid #efefef;
}

.slide.in .modal-content .modal-body {
    padding: 10px 65px;
}

.slide.in.modal-alert .modal-icon i.fa {
    color: #45aee6;
}

.slide.in .btn-primary {
    color: #fff;
    background-color: #45aee6;
    border-color: #45aee6;
}

.slide.in .btn-primary:hover {
    color: #fff;
    background-color: #13b4c3;
    border-color: #13b4c3;
}

.footer-bottom-left-top ul li {
    float: left;
}

.footer-bottom-left-top {
    margin-top: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.footer-bottom-left-top ul {
    margin-bottom: 25px;
}

.footer-bottom-left-top ul li a {
    font-size: 14px;
    padding-right: 48px;
    color: rgba(255, 255, 255, .5);
}

.footer-bottom-left-top ul li a:hover {
    color: #45aee6;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.company-bottom-left {
    display: inline-block;
    padding-right: 20px;
}

.company-bottom {
    margin-bottom: 20px;
}

.company-bottom-left img {
    width: 35px;
    vertical-align: top;
    padding-right: 5px;
}

.button-white:hover {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    /* color: #fff; */
    box-shadow: 0px 6px 22px rgba(0, 0, 0, .4);
}

.people-number-join {
    width: 325px;
}

.people-number-join span {
    background: rgba(0, 145, 226, 0.2);
    border-radius: 4px;
    /* width: 78px; */
    color: rgb(0, 155, 226);
    font-size: 14px;
    margin-right: 5px;
    margin-top: 10px;
    display: inline-block;
    text-align: center;
    padding: 0 5px;
}
.vidio-img-box{
    position: relative;
    width: 100%;
    height: 120px;
}
.vidio-img-box img{
    width: 100%;
    height: 100%;
}
.vidio-img-box .vidio-img-text{
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.vidio-img-box .vidio-img-text:hover{
    color:#FFD416;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.vidio-img-box .vidio-img-text i{
    display: block;
    font-size: 40px;
}
.videos-modal {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}

.videos-modal-content-box,
.videos-modal-child {
    width: 100%;
    height: 100%;
    position: relative;
}

.videos-modal-content-box .videos-modal-content {
    width: 800px;
    height: 450px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    background: #fff;
}

.close-videos {
    position: absolute;
    top: -12px;
    right: -11px;
    background: rgba(0, 0, 0, .9);
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    padding: 0px 8px;
    cursor: pointer;
}

.close-videos:hover {
    background: #45aee6;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.close-videos span.iconfont{
    font-size: 12px;
}
.vidio-img-text a{
    color: rgb(217, 45, 31);
}
.vidio-img-text a:hover{
    color:rgba(255,255,255,1);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.vidio-img-text a span{
    font-size: 24px;
}
.company-bottom-left a{
    color:rgba(255, 255, 255, .5);
}   

.test-get-code {
    cursor: pointer;
    margin-top: 0px;
    vertical-align: top; 
    width: 86px;
    position: absolute;
    position: absolute;
    right: 0;
    top: 8px;
    font-size: 13px;
    color: #00CDE2;
}
.test-get-code:hover {
    color:#077ebb;
    cursor: pointer;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}