header nav{background-color: #fff;}
header nav .navbar-brand h1 img{height: 42px;}
header nav .navbar-brand h1 {font-size: inherit;padding: 0; margin: 0;}
header nav .navbar-toggler{border: none;}
header nav .navbar-toggler:focus,header nav .navbar-toggler:focus-visible{outline: none;}

.carousel-control-next, .carousel-control-prev{width: 5%;}
.carousel_slider{margin-top: var(--header-height); }
.carousel_slider .carousel-item img{width: 100%;height: auto;}
.menu_title{color: #346bb4;font-weight: 700;}
.title{font-size: 1.75rem;font-weight: 700;margin-bottom: 1.5rem;color: #18173e;}
.title img{width: 2.75rem;vertical-align: middle;margin-right: 0.5rem;}
.typcn--home {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23464646' d='M12 3s-6.186 5.34-9.643 8.232A1.04 1.04 0 0 0 2 12a1 1 0 0 0 1 1h2v7a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-4h4v4a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-7h2a1 1 0 0 0 1-1a.98.98 0 0 0-.383-.768C18.184 8.34 12 3 12 3'/%3E%3C/svg%3E");
}

.course_block{background: #fff;}
.course_block ul{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}

.course_block ul li .course_card{width:100% ;height: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center; padding: 0.5rem; box-shadow: 0 0 10px rgba(0,0,0,0.1);border-radius: 10px;overflow: hidden;transition: all 0.3s ease;color: #18173e;word-break: break-all;text-align: center;font-weight: 700;}
.course_block ul li .course_card:hover{box-shadow: 0 0 15px rgba(0,0,0,0.2);}
.course_block ul li .course_card:hover,.course_block ul li .course_card a:hover{cursor: pointer; color: #38367a;text-decoration: none;transform: translateY(-5px);}
.course_block ul li:nth-child(1) .course_card{background: #e9df74;}
.course_block ul li:nth-child(2) .course_card{background: #91d2d3;}
.course_block ul li:nth-child(3) .course_card{background: #e09fac;}
.course_block ul li:nth-child(4) .course_card{background: #e4c19e;}
.course_block ul li:nth-child(5) .course_card{background: #bdd996;}
.course_block ul li:nth-child(6) .course_card{background: #96b5d4;}
.course_block ul li img {width: 6vw;vertical-align: middle;}
.course_block ul li span {padding-right: 0.2rem;display: inline-block;line-height: 1.5;vertical-align: middle;}
.course_block ul li .w-border{padding: 1rem 0.5rem;border-radius: 10px;width: 100%;border: 2px solid rgba(255, 255, 255, 0.7);}

.hottopic_block {padding: 4rem 0;}
.hottopic_block li{overflow: hidden;transition: all 0.3s ease;}
.hottopic_block li:hover{transform: translateY(-5px);}
.hottopic_block li img{border-radius: 10px;margin-bottom: 1rem;}
.hottopic_block li p{font-weight: 500;line-height: 1.5;color: #18173e;}
.tag{padding: 0.2rem 0.5rem;font-size: 0.7rem;font-weight: 700;}
.tag_e9df74{background: #e9df74;}
.tag_91d2d3{background: #91d2d3;}
.tag_e09fac{background: #e09fac;}
.tag_e4c19e{background: #e4c19e;}
.tag_bdd996{background: #bdd996;}
.tag_96b5d4{background: #96b5d4;}

/*  footer */
footer.footer{background: #f2f4f3;font-weight: normal;padding: 2vw 2vh ;}
footer div{margin-bottom: 0.5rem;}
footer li{flex-direction: column;width: 33%;}
footer li img{width: 1.5rem;height: 1.5rem;}
footer li .footer_icon li{max-width: 1.5rem ;margin-right:1vw;}
footer .social li{width: 2.5vw;margin-right: 0.5rem;}
footer .social img{color: #464646;}
footer .copyright{background: #fff;padding: 0.7rem 1rem;color: #1DB297;border-radius: 10px;}

/* When using Bootstrap grid on UL/LI, let Bootstrap control widths and gutters */
.course_block ul.row{ justify-content: initial; align-items: stretch; }

@media screen and (max-width: 768px) {
  .container,.carousel_slider{width: 100%;padding: 0;}
  .carousel-indicators{margin-bottom: 0;}
  .title{font-size: 1.5rem; margin-bottom: 1rem;text-align: center;}
  .course_block,.hottopic_block{padding: 0 2vw 2vh;}
  .course_block ul li{ width: 100%; }
  .course_block ul li img{width: 20vw;}
  footer.footer{padding: 4vw 4vh ;}
  footer.footer .footer_icon{flex-wrap: wrap;}
  footer .social li{width: 10%;}
}

a p:hover{
    color: #2f2c72;
}