body {
    background: #f1f1f1;
}

.navigation-3 .navbar {
    background: #fff;
}

.navbar-nav .nav-item:hover {
    background: #398c2b;
    color: #fff !important;
}

.navbar-nav .nav-item:hover a.nav-link {
    color: #fff !important;
}

@media screen and (min-width: 767px) {
    .nav-item.dropdown .dropdown-menu {
        margin-top: 0px !important;

        -ms-transform: none;
        transform: none;
    }

}

.menu .nav-link {
    padding: 15px 0;
}


.nav-2 {
    background: #f5f5f5;
    padding: 0;
}

.nav-2 .nav-link {
    color: #222;
    padding: 15px 30px;
    margin-right: 20px;
}

.nav-2 .active {
    background: #398c2b;
    color: #fff;

}

.bg-light-1 {
    background: #fff;
}

.g-banner .g-banner-content {
    position: relative;
    float: left;
    width: 936px
}

/* btn-goggle */
.btn-toggle {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .65);
    background-color: transparent;
    border: 0;
}

.btn-toggle:hover,
.btn-toggle:focus {
    color: rgba(0, 0, 0, .85);
    background-color: #d2f4ea;
}

.btn-toggle::before {
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
    color: rgba(0, 0, 0, .85);
}

.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.btn-toggle-nav a {
    display: inline-flex;
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
    text-decoration: none;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
    background-color: #d2f4ea;
}

/* g-banner */
.g-banner .g-banner-content .g-banner-box {
    position: relative;
    height: 316px;
    width: 936px;
}

.g-banner .banner-anchor {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    width: 36px;
    height: 60px;
    overflow: hidden;
    font-size: 24px;
    color: rgba(255, 255, 255, .6);
    text-align: center;
    line-height: 60px;
    text-shadow: 0 2px 4px rgba(7, 17, 27, .6)
}

.g-banner .next {
    right: 0;
    border-radius: 4px 0 0 4px
}

.g-banner .prev {
    left: 0;
    border-radius: 0 4px 4px 0
}

.g-banner .next:hover,
.g-banner .prev:hover {
    color: #fff;
    background: rgba(7, 17, 27, .6)
}

.g-banner .g-banner-box>a:first-child .banner-slide {
    display: block
}

.g-banner .banner-slide {
    position: relative;
    height: 100%;
    z-index: 0;
}

.g-banner .banner-slide img {
    height: 316px;
    width: 936px;
}

.g-banner .inner {
    position: relative;
    width: 1200px;
    margin: 0 auto
}

.g-banner .banner-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: right;
    padding-right: 24px;
    line-height: 12px
}

.g-banner .banner-dots li {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 8px;
    background: rgba(7, 17, 27, .8);
    border: 1px solid rgba(255, 255, 255, .6);
    transition: transform .2s;
    cursor: pointer
}

.g-banner .banner-dots li.on {
    background: #FFF;
    border: 1px solid rgba(7, 17, 27, .4)
}

.menuwrap,
.submenu {
    position: absolute;
    top: 0;
    height: 500px
}

.menuwrap {
    background-color: rgba(7, 17, 27, .5);
    opacity: .502;
    left: 0;
    /* width: 320px; */
    z-index: 1
}

.submenu {
    background: #fff;
    left: 320px;
    width: 768px;
    z-index: 581;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1)
}

.submenu .subinnerBox {
    overflow: hidden
}

.submenu .banner-line {
    position: relative;
    height: 1px;
    margin: 35px 0 23px;
    background-color: rgba(77, 85, 93, .08)
}

.submenu .banner-line span {
    position: absolute;
    top: -12px;
    left: 0;
    padding-right: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #398c2b;
    line-height: 24px;
    background-color: #fff
}

.submenu .tag-box {
    font-size: 0
}

.submenu .tag-box a {
    margin-bottom: 16px;
    font-size: 14px;
    color: #4D555D;
    line-height: 22px;
    margin-right: 24px;
    display: inline-block
}

.submenu .tag-box a:last-child {
    margin-right: 0
}

.submenu .subinnerBox .title {
    color: #07111b;
    font-size: 16px;
    line-height: 16px;
    margin-top: 32px;
    font-weight: 700;
    margin-bottom: 13px
}

.submenu .subinnerBox .recommend {
    margin-top: 33px;
    margin-bottom: 16px
}

.submenu a:hover {
    color: #f01414 !important
}

.submenu .subinnerBox .title a:hover {
    color: #f01414
}

.menuContent {
    position: relative;
    float: left;
    width: 320px;
    height: 535px;
    z-index: 2;
    /* padding-top: 12px; */
    background: #fff;
    border-bottom-left-radius: 4px;
    font-weight: 400
}

.menuContent .item .box a:hover {
    color: #f01414 !important
}

.menuContent .item {
    height: 60px;
    line-height: 60px;
    font-size: 12px;
    cursor: pointer;
    padding-left: 12px;
    position: relative;
    border-bottom: solid 1px #f1f1f1;
    text-wrap: nowrap;
    overflow: hidden;
}

.menuContent .item>a {
    display: block;
    color: #000;
    padding: 0 16px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 60px;
    transition: all .1s;
    font-size: 14px;
    overflow: hidden;
    width: 90%;
}

.menuContent .item i {
    position: absolute;
    right: 8px;
    top: 21px;

}

.menuContent .item .box a {
    color: #fff !important;
}

.menuContent .on a {
    color: #398c2b;
    background-color: rgba(255, 255, 255, .3)
}



.path-banner {
    width: 936px;
    height: 128px;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(7, 17, 27, .1);
    background-color: #fff;
    text-align: center;
    padding: 0 18px
}

.path-banner i {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: url(../images/path_new.png) no-repeat;
    background-size: 100%;
    margin-top: 22px
}

.container-types .wonderful-list .wenda-tit,
.path-banner>a {
    display: block;
    transition: all .3s
}

.path-banner .i-web {
    background-position: center 0
}

.path-banner .i-php {
    background-position: center -36px
}

.path-banner .i-java {
    background-position: center -72px
}

.path-banner .i-android {
    background-position: center -108px
}

.path-banner .i-ios {
    background-position: center -144px
}

.path-banner>a {
    float: left;
    font-size: 0;
    width: 180px;
    height: 128px;
    overflow: hidden
}

.path-banner>a:hover {
    margin-top: -4px
}

.path-banner .tit {
    font-size: 14px;
    color: #07111B;
    letter-spacing: 1px;
    margin-top: 4px
}

.path-banner .desc {
    font-size: 12px;
    color: #93999F;
    line-height: 16px;
    margin-top: 2px;
    font-weight: 400
}

.submenu .innerBox {
    background-color: #fff;
    padding: 12px 48px 32px;
    position: relative;
    min-height: 150px
}

.submenu .innerBox .bkimg {
    position: absolute;
    bottom: 0;
    right: -1px
}

.recomment-box {
    position: absolute;
    bottom: 0;
    /* background: #F8FAFC; */
    padding: 30px;
}

.recomment-box>div {
    height: 140px;

}

.recomment-box a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0px 5px 0 rgba(7, 17, 27, .6);
}

.recomment-box img {
    /* max-width: 90%; */
    /* max-height: 131px; */
    object-fit: cover;
}

.recomment-box .adsense-box {
    width: 312px;
    height: 64px;
    background-color: #ccc;
    border-radius: 4px;
    margin-right: 48px
}

.recomment-box .banner-course-card {
    width: 312px;
    height: 60px;
    margin-right: 48px;
    margin-bottom: 36px
}

.recomment-box .banner-course-card img {
    width: 64px;
    height: 42px;
    border-radius: 4px;
    background-color: #ccc
}

.recomment-box .banner-course-card .course-card {
    margin-left: 16px
}

.recomment-box .banner-course-card .course-card-name {
    width: 232px;
    font-size: 12px;
    color: #07111B;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.recomment-box .banner-course-card .course-card-info,
.recomment-box .banner-course-card .course-card-price {
    font-size: 12px;
    color: #4D555D;
    line-height: 20px
}

.recomment-box .banner-course-card .course-card-info span {
    margin-right: 12px
}

.recomment-box .banner-course-card .course-card-price.sales {
    color: #f01414
}

.recomment-box .banner-course-card .course-card-price.studentsales .sales-tip {
    padding: 0;
    border: 0
}

.l {
    float: left;
}




.col555,
.col555 a:link,
.col555 a:visited,
a.col555:link,
a.col555:visited {
    color: #555;
    text-decoration: none;
}

.col555 a:hover,
.col555 a:active,
a.col555:hover,
a.col555:active {
    color: #c40001;
    text-decoration: none;
}

.col333,
.col333 a:link,
.col333 a:visited,
a.col333:link,
a.col333:visited {
    color: #333;
    text-decoration: none;
}

.col333 a:hover,
.col333 a:active,
a.col333:hover,
a.col333:active {
    color: #c40001;
    text-decoration: none;
}

.col999,
.col999 a:link,
.col999 a:visited,
a.col999:link,
a.col999:visited {
    color: #999;
    text-decoration: none;
}

.col999 a:hover,
.col999 a:active,
a.col999:hover,
a.col999:active {
    color: #c40001;
    text-decoration: none;
}

.colddd,
.colddd a:link,
.colddd a:visited,
a.colddd:link,
a.colddd:visited {
    color: #ddd;
    text-decoration: none;
}

.colddd a:hover,
.colddd a:active,
a.colddd:hover,
a.colddd:active {
    color: #c40001;
    text-decoration: none;
}

.col666,
.col666 a:link,
.col666 a:visited,
a.col666:link,
a.col666:visited {
    color: #666;
    text-decoration: none;
}

.col666 a:hover,
.col666 a:active,
a.col666:hover,
a.col666:active {
    color: #c40001;
    text-decoration: none;
}

.colfff,
.colfff a:link,
.colfff a:visited,
a.colfff:link,
a.colfff:visited {
    color: #fff;
    text-decoration: none;
}

.colfff a:hover,
.colfff a:active,
a.colfff:hover,
a.colfff:active {
    color: #d6d8d9;
    text-decoration: none;
}

.colblue,
.colblue a:link,
.colblue a:visited,
a.colblue:link,
a.colblue:visited {
    color: #0689cd;
    text-decoration: none;
}

.colblue a:hover,
.colblue a:active,
a.colblue:hover,
a.colblue:active {
    color: #c40001;
    text-decoration: none;
}

.colred,
.colred a:link,
.colred a:visited,
a.colred:link,
a.colred:visited {
    color: #ba0900;
    text-decoration: none;
}

.colred a:hover,
.colred a:active,
a.colred:hover,
a.colred:active {
    color: #c40001;
    text-decoration: none;
}

.colred2,
.colred2 a:link,
.colred2 a:visited,
a.colred2:link,
a.colred2:visited {
    color: #d40900;
    text-decoration: none;
}

.colred2 a:hover,
.colred2 a:active,
a.colred2:hover,
a.colred2:active {
    color: #c40001;
    text-decoration: none;
}

.colpink,
.colpink a:link,
.colpink a:visited,
a.colpink:link,
a.colpink:visited {
    color: #e61c4e;
    text-decoration: none;
}

.colpink a:hover,
.colpink a:active,
a.colpink:hover,
a.colpink:active {
    color: #c40001;
    text-decoration: none;
}

.col000,
.col000 a:link,
.col000 a:visited,
a.col000:link,
a.col000:visited {
    color: #000;
    text-decoration: none;
}

.col000 a:hover,
.col000 a:active,
a.col000:hover,
a.col000:active {
    color: #c40001;
    text-decoration: none;
}


.col1,
.col1 a:link,
.col1 a:visited,
a.col1:link,
a.col1:visited {
    color: #398c2b;
    text-decoration: none;
}


.line1 {
    background: url(./line1.png) no-repeat left;
    padding-left: 150px;
    display: inline-block;
    font-weight: bold;

}


.line2 {
    background: url(./line2.png) no-repeat right;
    padding-right: 150px;
    display: inline-block;
    font-weight: bold;

}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.bold {
    font-weight: bold;
}

.title1 {
    display: inline-block;
    padding-left: 20px;
    position: relative;
}

.title1:before {
    content: "";
    width: 10px;
    height: 45px;
    border-radius: 10px;
    background: #bada90;
    position: absolute;
    top: 5px;
    left: 0;
}



.title1 h2 {
    font-size: 24px;
    margin-bottom: 0px;
}

.title1 h3 {
    font-size: 14px;
    color: #aaa;
}

.title2 h2 {
    background: url(./titlebg.png) no-repeat bottom center;
    padding-bottom: 10px;

}

.title3 h2 {
    background: url(./titlebg2.png) no-repeat bottom center;
    padding-bottom: 10px;

}

.title2 h3 {
    color: #398c2b !important;
}

.py-6 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

.py-7 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.pt-6 {
    padding-top: 3.5rem !important;
}


.pl-1 {
    padding-left: 0.25rem !important;
}

.pl-2 {
    padding-left: 0.5rem !important;
}

.pl-3 {

    padding-left: 1rem !important;
}

.pl-4 {

    padding-left: 1.5rem !important;
}

.pl-5 {

    padding-left: 3rem !important;
}


.pr-1 {
    padding-right: 0.25rem !important;

}

.pr-2 {
    padding-right: 0.5rem !important;

}

.pr-3 {
    padding-right: 1rem !important;

}

.pr-4 {
    padding-right: 1.5rem !important;

}

.pr-5 {
    padding-right: 3rem !important;

}

.pb-6 {
    padding-bottom: 3.5rem !important;

}

.pb-7 {
    padding-bottom: 4rem !important;

}

#pages {
    display: flex;
    padding: 0;
}

#pages li {
    list-style: none;
    margin: 0 10px;
    cursor: pointer;
    border: #999 solid 1px;
    padding: 5px 10px;
    border-radius: 5px;
    ;
}

#pages li:hover {
    background: #398c2b;
    color: #fff;
}

.zoomimg {
    overflow: hidden;
}

.zoomimg img {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.zoomimg:hover img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

@media screen and (max-width: 767px) {

    body,
    html,
    .home {
        width: 100%;
        overflow-x: hidden;
    }

    .py-6 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .navbar-brand img {
        width: 200px;
    }

    .logo2 {
        display: none;
    }

    .footer-1 .logo-default {
        width: 60px;
    }

    .hidden-md {
        display: none;
    }


    /* menu your project */
    .category-2.dropdown,
    .category-2 {
        min-width: auto;
        width: auto !important;
    }
    .navbar-toggler,
    .navbar-toggler-icon{
        color: #fff;
    }

    .category-2 .dropdown-menu {
        position: absolute !important; */
        /* left: 0px !important;
        background: #398c2b;
        display: block !important;
        width: 100vw !important;
    }

    /* .menu-2{
        position: absolute !important;
        background: #398c2b;
    } */
}