@use "sass:math";
.course-grid .course-card .info .title, .course-grid .course-card .info .meta .author font, .course-grid .course-card .info .meta .org font, .ellips { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.container { margin: 0 auto; padding: 0 20px; width: 85%; }

@media (max-width: 768px) { .container { width: 95%; padding: 0; } }

a { text-decoration: none; color: inherit; }

a:focus { outline: 0; outline-offset: 0; }

ul { list-style: none; }

header { background: #bd0015; color: #fff; padding: 10px 0; }

header .container { display: flex; justify-content: space-between; align-items: center; }

header .logo { display: flex; align-items: center; gap: 10px; }

header .logo img { height: 40px; }

header .logo .text { font-size: 18px; font-weight: bold; }

header .nav-right { font-size: 14px; display: flex; align-items: center; gap: 5px; }

.breadcrumbs { background: #f1f1f1; padding: 10px 0; font-size: 12px; color: #666; }

.breadcrumbs span { margin: 0 5px; }

.hero { padding: .4rem 0; background: url(images/kc_bg.png) top center no-repeat; background-size: 100%; }

.hero .container { display: flex; gap: 50px; align-items: center; }

.hero .hero-content { flex: 1; }

.hero .hero-content h1 { font-size: .43rem; color: #323232; margin-bottom: 10px; font-weight: 600; letter-spacing: 2px; }

.hero .hero-content h2 { font-size: .43rem; letter-spacing: 2px; color: #f35e03; margin-bottom: 30px; font-weight: 600; }

.hero .hero-content p { font-size: .16rem; color: #323232; line-height: 1.6; }

.hero .hero-video { padding: 10px; background: linear-gradient(to bottom, #f17e30, #f9ebdc); width: 40%; position: relative; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }

.hero .hero-video .video-box { position: relative; }

.hero .hero-video .video-box .pic { overflow: hidden; border-radius: 15px; }

.hero .hero-video video { width: 100%; display: block; border-radius: 15px; overflow: hidden; aspect-ratio: 16 / 9; object-fit: cover; }

.hero .hero-video .video-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; border-radius: 15px; z-index: 5; }

.hero .hero-video .video-mask.hidden { opacity: 0; pointer-events: none; }

.hero .hero-video .play-btn { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s; }

.hero .hero-video .play-btn:hover { transform: scale(1.1); }

.hero .hero-video .play-btn::after { content: ""; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #bd0015; margin-left: 5px; }

.hero .hero-video .info { position: absolute; z-index: 6; bottom: 0; left: 0; padding: 10px; display: flex; width: 100%; justify-content: space-between; align-items: center; }

.hero .hero-video .info .left { background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); color: #fff; font-size: 12px; border-radius: 1rem; padding: 5px .5rem 5px 10px; }

.hero .hero-video .info .time { color: #fff; font-size: 12px; }

.hero .stats { margin-top: .5rem; display: flex; justify-content: space-between; gap: 0; }

.hero .stats .stat-item { text-align: center; flex: 1; background: linear-gradient(to right, #f35b00, #ee9342); color: #fff; padding: 1.2% 0; }

.hero .stats .stat-item .number { font-size: .38rem; font-weight: bold; display: block; margin-bottom: -10px; }

.hero .stats .stat-item .label { font-size: .15rem; }

.hero.YB .hero-content h2 { color: #bd0015; }

.hero.YB .hero-video { background: linear-gradient(to bottom, #dd433b, #f9ebdc); }

.hero.YB .stats .stat-item { background: linear-gradient(to right, #c22c27, #df423c); }

.news-section { padding: 20px 0 40px; position: relative; overflow: hidden; }

.news-section .container { display: flex; align-items: center; position: relative; }

@media (max-width: 768px) { .news-section .container { flex-direction: column; gap: .2rem; } }

.news-section .indicators { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .2rem; z-index: 10; }

@media (max-width: 768px) { .news-section .indicators { display: none; } }

.news-section .indicators .bar { width: 40px; height: 8px; background: linear-gradient(to right, #ccc, #ccc); border-radius: 5px; opacity: 1; margin: 0 !important; transition: all 0.3s; }

.news-section .indicators .bar.active { background: linear-gradient(to right, #f35b00, #ee9342); width: 60px; }

.news-section .image-display { aspect-ratio: 16 / 7; position: relative; overflow: hidden; width: 50%; overflow: hidden; padding-left: 10%; }

.news-section .image-display img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; }

@media (max-width: 768px) { .news-section .image-display { width: 100%; padding-left: 0; } }

.news-section .news-slider-container { flex: 1; display: flex; align-items: center; gap: .1rem; padding-left: 3%; }

.news-section .news-slider-container .news-swiper { height: 310px; width: 100%; }

@media (max-width: 768px) { .news-section .news-slider-container .news-swiper { height: 300px; } }

.news-section .news-item { display: flex; align-items: center; gap: .3rem; cursor: pointer; transition: all 0.5s ease; opacity: 0.4; transform: scale(0.9); }

.news-section .news-item.active { opacity: 1; transform: scale(1); }

.news-section .news-item.active .date-box .day { color: #f35e03; }

.news-section .news-item.active .title { font-weight: 500; color: #323232; }

.news-section .news-item .date-box { background-color: rgba(243, 244, 246, 0.5); width: 80px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease; }

.news-section .news-item .date-box .year { font-size: .12rem; color: #323232; letter-spacing: 1px; }

.news-section .news-item .date-box .day { font-size: .2rem; transition: color 0.3s ease; }

.news-section .news-item .date-box .corner-dot { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border: 10px solid #f35e03; border-color: transparent #f35e03 #f35e03 transparent; }

.news-section .news-item .date-box .top-accent { position: absolute; top: 0; left: 0; width: 0.2rem; height: 0.2rem; border-top: 2px solid #f35e03; border-left: 2px solid #f35e03; }

.news-section .news-item .title { flex: 1; font-size: .16rem; line-height: 1.6; color: #323232; transition: all 0.3s ease; }

.news-section .nav-buttons { display: flex; flex-direction: column; gap: .1rem; }

.news-section .nav-buttons button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: #323232; }

.news-section .nav-buttons button:hover { background-color: #f8f9fa; }

.news-section.YB .indicators .bar.active { background: linear-gradient(to right, #c22c27, #df423c); }

.news-section.YB .news-item.active .date-box .day { color: #bd0015; }

.news-section.YB .news-item .date-box .corner-dot { border: 10px solid #bd0015; border-color: transparent #bd0015 #bd0015 transparent; }

.news-section.YB .news-item .date-box .top-accent { border-top: 2px solid #bd0015; border-left: 2px solid #bd0015; }

.news-section02 { padding: 20px 0 40px; position: relative; overflow: hidden; }

.news-section02 .container { display: grid; gap: 50px; position: relative; grid-template-columns: repeat(2, 1fr); }

@media (max-width: 768px) { .news-section02 .container { flex-direction: column; gap: .2rem; display: flex; } }

.news-section02 .news-slider-container .headLine h2 { font-size: .21rem; color: #f35e03; }

.news-section02 .news-slider-container .headLine h2:before { width: 5px; height: .2rem; top: 4px; background-color: #f35e03; }

.news-section02 .news-slider-container .group { display: flex; align-items: center; gap: .1rem; }

.news-section02 .news-slider-container .news-swiper02 { height: 310px; width: 100%; }

@media (max-width: 768px) { .news-section02 .news-slider-container .news-swiper02 { height: 300px; } }

.news-section02 .news-slider-container .news-swiper03 { height: 310px; width: 100%; }

@media (max-width: 768px) { .news-section02 .news-slider-container .news-swiper03 { height: 300px; } }

.news-section02 .news-item { display: flex; align-items: center; gap: .3rem; cursor: pointer; transition: all 0.5s ease; opacity: 1; }

.news-section02 .news-item .date-box { background-color: rgba(243, 244, 246, 0.5); width: 80px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease; }

.news-section02 .news-item .date-box .year { font-size: .12rem; color: #323232; letter-spacing: 1px; }

.news-section02 .news-item .date-box .day { font-size: .2rem; transition: color 0.3s ease; }

.news-section02 .news-item .date-box .corner-dot { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border: 10px solid #f35e03; border-color: transparent #f35e03 #f35e03 transparent; }

.news-section02 .news-item .date-box .top-accent { position: absolute; top: 0; left: 0; width: 0.2rem; height: 0.2rem; border-top: 2px solid #f35e03; border-left: 2px solid #f35e03; }

.news-section02 .news-item .title { flex: 1; font-size: .16rem; line-height: 1.6; color: #323232; transition: all 0.3s ease; }

.news-section02 .nav-buttons { display: flex; flex-direction: column; gap: .1rem; }

.news-section02 .nav-buttons button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: #323232; }

.news-section02 .nav-buttons button:hover { background-color: #f8f9fa; }

.filters { padding: 20px 0; }

.filters.YB .filter-row .label { color: #bd0015; }

.filters.YB .filter-row .options span.active { background: #bd0015; }

.filters.YB .filter-row .options span:hover:not(.active) { background: rgba(189, 0, 21, 0.3); }

.filters .filters-wrap { background: url(images/gk-tm-logo.png) right center #eff3f6 no-repeat; padding: 2.5%; }

.filters .filter-row + .filter-row { margin-top: .2rem; }

.filters .filter-row { display: flex; align-items: flex-start; font-size: .16rem; }

.filters .filter-row .label { width: 1rem; color: #f35e03; padding-top: 5px; }

.filters .filter-row .options { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; }

.filters .filter-row .options span { padding: 4px 15px; border-radius: .2rem; cursor: pointer; transition: all 0.2s; }

.filters .filter-row .options span.active { background: #f35e03; color: #fff; }

.filters .filter-row .options span:hover:not(.active) { background: rgba(243, 94, 3, 0.7); }

.search-bar { padding: 0; }

.search-bar.YB .search-input-wrap button { background: #bd0015; }

.search-bar.YB .result-count span { color: #bd0015; }

.search-bar .search-wrap { background: #eff3f6; display: flex; justify-content: space-between; align-items: center; padding: 20px; }

.search-bar .search-input-wrap { display: flex; background: #fff; border-radius: .3rem; padding: 8px; width: 60%; position: relative; padding-left: .5rem; }

.search-bar .search-input-wrap .left_icon { position: absolute; left: 15px; top: 6px; width: .22rem; }

.search-bar .search-input-wrap input { border: none; background: transparent; outline: none; flex: 1; padding: 8px 0; font-size: .16rem; }

.search-bar .search-input-wrap button { background: #f35e03; color: #fff; border: none; padding: 0 .3rem; border-radius: 20px; cursor: pointer; margin-left: 10px; font-size: .16rem; }

.search-bar .result-count { font-size: .16rem; color: #666; }

.search-bar .result-count span { color: #f35e03; font-weight: bold; }

.course-grid { padding: 50px 0; }

.course-grid .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

.course-grid .course-card { background: #fff; transition: transform 0.3s; overflow: hidden; padding: 5px; }

.course-grid .course-card:hover { transform: translateY(-5px); }

.course-grid .course-card .thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; }

.course-grid .course-card .thumb > img { width: 100%; height: 100%; object-fit: cover; }

.course-grid .course-card .thumb .tag { position: absolute; top: -5px; right: -7px; }

.course-grid .course-card .thumb .tag img { width: .7rem; }

.course-grid .course-card .thumb .tag-orange { background: #f35e03; }

.course-grid .course-card .info { padding: 15px 0; }

.course-grid .course-card .info .title { font-size: .18rem; margin-bottom: 10px; height: 40px; }

.course-grid .course-card .info .meta { display: flex; justify-content: space-between; font-size: .14rem; color: #666; }

.course-grid .course-card .info .meta .author, .course-grid .course-card .info .meta .org { display: flex; align-items: center; gap: 6px; position: relative; }

.course-grid .course-card .info .meta .author img, .course-grid .course-card .info .meta .org img { width: .2rem; }

.course-grid .course-card .info .meta .author { flex: 1; max-width: calc(100% - 1.5rem); }

.course-grid .course-card .info .meta .org { flex-shrink: 0; max-width: 1.3rem; }

.course-grid .course-card .info .tags { display: flex; gap: 5px; margin-top: 15px; flex-wrap: wrap; }

.course-grid .course-card .info .tags span { background: rgba(0, 0, 0, 0.08); color: #666; font-size: 13px; border-radius: 5px; padding: 2px 5px; }

.course-grid .load-more { grid-column: 1 / -1; text-align: center; padding: 40px 0; color: #f35e03; font-size: .16rem; cursor: pointer; }

.course-grid .load-more#more02 { color: #bd0015; }

.course-grid .load-more#more02.no-more { color: #999; cursor: default; }

.course-grid .load-more.no-more { color: #999; cursor: default; }

.footer-img { width: 100%; display: block; }

.detail-topbg { background: url(images/kc_bg.png) top center no-repeat; background-size: 100%; }

.detail-header { padding: .4rem 0; }

.detail-header.YB .learn-btn { background: #bd0015; box-shadow: 0 4px 15px rgba(189, 0, 21, 0.3); }

.detail-header.YB .learn-btn:hover { background: #a40012; }

.detail-header .container { display: flex; justify-content: space-between; align-items: flex-start; box-shadow: 0px 5px 14px 0px rgba(224, 228, 231, 0.88); border-radius: .2rem; background: #fff; position: relative; padding: 2%; }

.detail-header .container .tag { position: absolute; top: -5px; right: -8px; }

.detail-header .container .tag img { width: .7rem; }

.detail-header .course-title-wrap { flex: 1; }

.detail-header .course-title-wrap h1 { font-size: .3rem; margin-bottom: 20px; }

.detail-header .course-title-wrap .authors { font-size: .16rem; color: #666; display: flex; gap: 15px; padding-right: 1.6rem; flex-wrap: wrap; }

.detail-header .course-title-wrap .authors img { width: 0.25rem; }

.detail-header .learn-btn { background: #f35e03; color: #fff; width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 1rem; font-size: .21rem; font-weight: bold; padding: .2rem; cursor: pointer; margin-top: 3%; margin-right: 3%; box-shadow: 0 4px 15px rgba(243, 152, 0, 0.3); transition: all 0.3s ease; border: none; outline: none; position: absolute; right: .2rem; top: .2rem; }

.detail-header .learn-btn:hover { background: #da5403; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(243, 152, 0, 0.4); }

.detail-header .learn-btn:active { transform: translateY(0); }

.detail-header .course-meta-grid { margin-top: 30px; display: flex; gap: 10px 30px; font-size: 14px; background: linear-gradient(to right, #eff3f6, rgba(239, 243, 246, 0)); padding: .2rem 0.5rem .2rem .2rem; color: #7c889a; font-size: .14rem; flex-wrap: wrap; padding-right: 1.6rem; }

.detail-header .course-meta-grid .item .label { display: inline-block; }

.detail-header .course-meta-grid .item .val { color: #323232; display: block; margin-top: 5px; font-size: .15rem; }

.detail-video-section { padding: 0; }

.detail-video-section.YB .detail-video { background: linear-gradient(to bottom, #dd433b, #f9ebdc); }

.detail-video-section .container { box-shadow: 0px 5px 14px 0px rgba(224, 228, 231, 0.88); border-radius: .2rem; background: #fff; position: relative; padding: 2%; display: flex; align-items: center; gap: 40px; }

.detail-video-section .detail-video { padding: 10px; background: linear-gradient(to bottom, #f17e30, #f9ebdc); width: 40%; position: relative; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }

.detail-video-section .detail-video .video-player { position: relative; }

.detail-video-section .detail-video video { width: 100%; display: block; border-radius: 15px; overflow: hidden; aspect-ratio: 16 / 9; object-fit: cover; }

.detail-video-section .detail-video .video-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; border-radius: 15px; z-index: 5; }

.detail-video-section .detail-video .video-mask.hidden { opacity: 0; pointer-events: none; }

.detail-video-section .detail-video .play-btn { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s; }

.detail-video-section .detail-video .play-btn:hover { transform: scale(1.1); }

.detail-video-section .detail-video .play-btn::after { content: ""; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #bd0015; margin-left: 5px; }

.detail-video-section .detail-video .info { position: absolute; z-index: 6; bottom: 0; left: 0; padding: 10px; display: flex; width: 100%; justify-content: space-between; align-items: center; }

.detail-video-section .detail-video .info .left { background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); color: #fff; font-size: 12px; border-radius: 1rem; padding: 5px .5rem 5px 10px; }

.detail-video-section .detail-video .info .time { color: #fff; font-size: 12px; }

.detail-video-section .video-desc { flex: 1; }

.detail-video-section .video-desc h3 { font-size: 20px; margin-bottom: 15px; color: #bd0015; }

.detail-video-section .video-desc p { font-size: .18rem; color: #323232; line-height: 2; }

.detail-content-section { padding: 0.4rem 0; background: #fff; }

.detail-content-section.YB .section-title h2 { color: #bd0015; }

.detail-content-section.YB .section-title h2::after { background: #bd0015; }

.detail-content-section .container { box-shadow: 0px 5px 14px 0px rgba(224, 228, 231, 0.88); border-radius: .2rem; background: #fff; position: relative; padding: 2%; }

.detail-content-section .section-title { text-align: center; margin-bottom: 40px; position: relative; }

.detail-content-section .section-title h2 { font-size: .28rem; color: #f35e03; display: inline-block; padding-bottom: 10px; font-weight: bold; font-family: 'yahei'; }

.detail-content-section .section-title h2::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: #f35e03; }

.detail-content-section .detail-content { width: 100%; max-width: 1000px; margin: 0 auto; display: block; }

@media (max-width: 1024px) { .course-grid .container { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 768px) { .hero .container { flex-direction: column; text-align: center; }
  .hero .container .hero-video { width: 100%; }
  .hero .stats { flex-wrap: wrap; flex-direction: row; gap: 2px; }
  .hero .stats .stat-item { border: none; flex: auto; width: 49%; }
  .course-grid .container { grid-template-columns: repeat(1, 1fr); gap: 10px; }
  .course-grid .container .course-card .thumb .tag { top: -4px; right: -4px; }
  .course-grid .container .course-card .info .title { height: 30px; font-size: 16px; }
  .search-bar .container .search-wrap { flex-direction: column; gap: 15px; }
  .search-bar .container .search-wrap .search-input-wrap { width: 100%; }
  .search-bar .container .search-wrap .search-input-wrap .left_icon { top: 10px; }
  .search-input-wrap { width: 100%; }
  .detail-header .course-meta-grid { flex-wrap: wrap; gap: 20px; }
  .detail-video-section .container { flex-direction: column; }
  .detail-video-section .detail-video { width: 100%; } }

.qr-modal-popup { width: 300px !important; height: 300px !important; border-radius: 20px !important; font-family: inherit !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important; }

.qr-modal-popup .swal2-title { font-size: 22px !important; color: #bd0015 !important; font-weight: 600 !important; padding: 30px 30px 10px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; }

.qr-modal-popup .swal2-html-container { width: 100% !important; height: 100%; padding: 0; display: flex !important; align-items: center !important; border-radius: 20px; border: 2px solid #e74c3c; background: radial-gradient(circle, #ffffff 70%, rgba(231, 76, 60, 0.3) 100%); box-shadow: inset 0 0 30px rgba(231, 76, 60, 0.2), inset 0 0 60px rgba(231, 76, 60, 0.1), 0 0 20px rgba(231, 76, 60, 0.15); }

.qr-modal-popup .swal2-html-container .qr-content-wrapper { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }

.qr-modal-popup .swal2-html-container .qr-content-wrapper img { width: 200px !important; height: 200px !important; display: block !important; margin: 15px auto !important; }

.qr-modal-popup .swal2-html-container .qr-content-wrapper p { margin: 10px 0 0 !important; font-size: 15px !important; color: #666 !important; line-height: 1.5 !important; white-space: nowrap !important; text-align: center !important; }

.qr-modal-popup .swal2-close { position: absolute !important; font-size: 22px !important; color: #fff !important; top: -10px !important; right: -10px !important; outline: none !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; width: 30px !important; height: 30px !important; background: #bd0015; border-radius: 25px; display: flex; align-items: center; justify-content: center; }

.qr-modal-popup .swal2-close:focus { box-shadow: none !important; }