@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
@import "tailwindcss";
body {
  font-family: 'Noto Sans TC', sans-serif;
  overflow-x: hidden;
}
.google-maps {
position: relative;
padding-bottom: 50% !important;
margin: 0 0 20px;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.video-container {
    position: relative;
    height: calc(100vh - 245px);
    display: flex;
    justify-content: center;  /* 水平置中 */
    align-items: center;
    background: #000;
    overflow: hidden;
}
@media(max-width: 567px) {.video-container{height: auto;}}

/* 取消原本 padding hack */
.video-container::before {
    content: none;
}

.video-container iframe {
    height: 100%;
    width: auto;
    aspect-ratio: 16 / 9;
}
.divider {
  width: 100%;
  border: none;
  border-top: 1px solid #D4D2E3;
  margin: 50px 0;
}
@media(max-width: 567px) {.divider{margin: 20px 0;}}

.no-mb {
  margin: 0 !important;
}
#filter-area {
    scroll-margin-top: 100px; /* 改成你的header高度 */
}


/* Index--------------------------------------------------------------------------------------------------------------------------------- */
.index-top {
  background: url("/upload/index-topbg.jpg?v=20260225") no-repeat center center;
  background-size: cover; 
  height: 656px;  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media(max-width: 567px) {.index-top{background: none;height: 300px;}}
@media(max-width: 567px) {.index-top .txtbox{position: absolute;top:40px;}}

.index-top .txtbox h1 {
  font-size: 56px;
  color: #0C163A;
  margin: 0 0 20px 0; 
  font-weight: 700;
}
@media(max-width: 567px) {.index-top .txtbox h1{font-size: 28px;margin: 0; }}

.index-top .txtbox h2 {
  font-size: 24px;
  color: #0C163A;
  margin: 0;
  font-weight: 500;
}
@media(max-width: 567px) {.index-top .txtbox h2{font-size: 18px;}}

.index-footer {
  background: url("/upload/course_hero.jpg") no-repeat center center;
  background-size: cover; 
  height: 600px;  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media(max-width: 567px) {.index-footer{height: 245px;background-size: cover !important;}}

.index-footer .txtbox {
  margin-left: 47%;
  color: #fff;
  text-align: left;
}
@media(max-width: 567px) {.index-footer .txtbox{position: absolute;bottom: 20px;left: 20px;max-width: 80%;margin-left: 0;}}

.index-footer .txtbox h3{
  font-size: 35px;
	font-weight: 700;
	color: #0C163A;
	padding: 0 0 50px;
}
@media(max-width: 567px) {.index-footer .txtbox h3{font-size: 16px;padding: 0 0 15px;}}

.index-footer .txtbox a {
	font-size: 24px;
	font-weight: 700;
	background: #3175FA;
	color: #FFFFFF;
	display: flex;
	width: 195px;
	height: 66px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
}
@media(max-width: 567px) {.index-footer .txtbox a{font-size: 12px;padding: 8px 16px;display: inline-block;width: auto;height: auto;}}

.index-footer a:hover{
  background: #2661C2;
  color: #FFFFFF;  
}
.index-footer2 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.index-footer2 .item {
  position: relative;
  width: 50%;
  height: 600px; 
  overflow: hidden;
  background-size: cover; 
}

.index-footer2 .txtbox {
  position: absolute;
  bottom: 60px;
  left: 60px;
  color: #fff;
  max-width: 80%;
}

.index-footer2 .txtbox h3 {
  font-size: 35px;
	font-weight: 700;
	color: #0C163A;
	padding: 0 0 30px;
}

.index-footer2 .txtbox a {
  font-size: 24px;
	font-weight: 700;
	background: #3175FA;
	color: #FFFFFF;
	display: flex;
	width: 195px;
	height: 66px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
}

.index-footer2 .txtbox a:hover {
  background: #2661C2;
  color: #FFFFFF;  
}

@media (max-width: 567px) {
  .index-footer2 .item {
    width: 100%;
    height: 245px;
	background-size: cover !important;
  }

  .index-footer2 .txtbox {
    bottom: 20px;
    left: 20px;
  }

  .index-footer2 .txtbox h3 {
    font-size: 16px;
	padding: 0 0 15px;
  }
  .index-footer2 .txtbox a {
  font-size: 12px;
  width: auto;
	height: auto;
	padding:8px 16px;
	display: inline-block;
}
}
.index-footer3 {
	
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.index-footer3 .item {
  position: relative;
  width: 33.33%;
  height: 600px; 
  overflow: hidden;
  background-size: cover; 
}

.index-footer3 .txtbox {
  position: absolute;
  bottom: 60px;
  left: 60px;
  color: #fff;
  max-width: 80%;
}

.index-footer3 .txtbox h3 {
  font-size: 35px;
	font-weight: 700;
	color: #0C163A;
	padding: 0 0 30px;
}

.index-footer3 .txtbox a {
  font-size: 24px;
	font-weight: 700;
	background: #3175FA;
	color: #FFFFFF;
	display: flex;
	width: 195px;
	height: 66px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
}

.index-footer3 .txtbox a:hover {
  background: #2661C2;
  color: #FFFFFF;  
}

@media (max-width: 567px) {
  .index-footer3 .item {
    width: 100%;
    height: 245px;
	background-size: cover !important;
  }

  .index-footer3 .txtbox {
    bottom: 20px;
    left: 20px;
  }

  .index-footer3 .txtbox h3 {
    font-size: 16px;
	padding: 0 0 15px;
  }
  .index-footer3 .txtbox a {
  font-size: 12px;
  width: auto;
	height: auto;
	padding:8px 16px;
	display: inline-block;
}
}
.swiper.hero {
  height: 680px;
  margin-bottom: 30px;
}
@media(max-width: 1279px) {.swiper.hero{height: 576px;}}
@media(max-width: 1040px) {.swiper.hero{height: 416px;}}
@media(max-width: 768px) {.swiper.hero{height: 320px;}}
@media(max-width: 480px) {.swiper.hero{height: 100%;}}
  .swiper.hero .swiper-pagination {
  display: none;
}
@media (max-width: 767px) {
  .swiper.hero .swiper-pagination {
    display: block;
    bottom: -5px;
  }
}
@media (max-width: 567px) {
  .swiper.hero .swiper-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
  }
}
.mySwiper {
  overflow: visible;
}

.mySwiper .swiper-wrapper {
  display: flex;
}

@media (max-width: 767px) {
  .mySwiper {
    padding-right: 16px;
  }
}
@media (max-width: 767px) {
  .c-course-card {
    display: block;
  }
}
@media (max-width: 574px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
}
/* -------------------------
   About
-------------------------- */
.about-top {
  background: url("/upload/about-topbg.jpg?v=20251205") no-repeat center center;
  background-size: cover; 
  height: 656px;  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media(max-width: 567px) {.about-top{background: url("/upload/about-topbg-m.jpg?v=20260225") no-repeat center center;height: 300px;  }}
@media(max-width: 567px) {.about-top .txtbox{width: 75%;}}
.about-top .txtbox h1 {
  font-size: 36px;
  color: #0C163A;
  margin: 0 0 40px 0; 
  font-weight: 700;
}
@media(max-width: 567px) {.about-top .txtbox h1{font-size: 18px;margin: 0 0 10px 0; }}

.about-top .txtbox h2 {
  font-size: 36px;
  color: #F18928;
  margin: 0;
  font-weight: 700;
}
@media(max-width: 567px) {.about-top .txtbox h2{font-size: 18px;}}

.about-03 {
    text-align: center;
    padding: 40px 20px;
	width: 1400px;
	margin: 130px auto;
	background: url("/upload/about-03bg.jpg") no-repeat center center;
}
@media(max-width: 567px) {.about-03{background: url("/upload/about-03bg-m.jpg?v=20260225") no-repeat top center;width: 100%;margin: 50px auto 0;}}

.about-03 h3 {
    font-size: 36px;
	font-weight: 700;
    color: #0C163A;
    margin-bottom: 60px;
}
@media(max-width: 567px) {.about-03 h3{font-size: 18px;margin: 180px auto 20px;text-align: center;width: 80%;}}

.about-03 p {
    font-size: 24px;
	font-weight: 400;
    color: #0C163A;
    margin-bottom: 30px;
}
@media(max-width: 567px) {.about-03 p{font-size: 14px;margin: 0;}}

.about-04 {
    text-align: center;
    padding: 40px 20px;
	width: 1200px;
	margin: 0 auto 160px;
}
@media(max-width: 567px) {.about-04{width: 100%;margin: 0 auto;}}

.about-04 h3 {
    font-size: 36px;
    color: #0C163A;
    font-weight: 700;
    margin-bottom: 40px;
}
@media(max-width: 567px) {.about-04 h3{font-size: 18px;}}

.about-04 h3 span {
    color: #FF8F29;
}
.about-04-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.about-04 .item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}
@media (max-width: 992px) {.about-04 .item {width: 33.333%;}}
@media (max-width: 768px) {.about-04 .item {width: 50%;}}
@media (max-width: 576px) {.about-04 .item {width: 100%;}}
.about-04 .item .icon {
    width: 117px;
    height: 117px;
    margin-bottom: 25px;
}

.about-04 .item .title {
    font-size: 20px;
	font-weight: 700;
    color: #3175FA;
    margin-bottom: 15px;
}

.about-04 .item .title span {
    color: #FF8F29;
}

.about-04 .item .title2 {
    font-size: 20px;
	font-weight: 700;
    color: #FF8F29;
}
.about-05 {
	position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow-x: hidden;
	background-size: cover;
	height: 480px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: url('/upload/about-05bg.jpg') no-repeat center left;
}
@media (max-width: 576px) {.about-05 {height: 300px;background: url('/upload/about-05bg-m.jpg') no-repeat 20% center;overflow-x: clip;}}

.about-05 .txtbox {
	margin-left: 30%;
	color: #fff;
	text-align: left;
}
@media (max-width: 576px) {.about-05 .txtbox {position: absolute;top: 350px;margin: 0 40px;}}

.about-05 .txtbox h3 {
	font-size: 36px;
	font-weight: 700;
	color: #0C163A;
	padding: 0 0 50px;
}
@media (max-width: 576px) {.about-05 .txtbox h3{font-size: 18px;}}

.about-06 {
    text-align: center;
    padding: 40px 20px;
	width: 1400px;
	margin: 130px auto 0;
	background: url("/upload/about-06bg.jpg") no-repeat center center;
}
@media (max-width: 576px) {.about-06{width: 100%;background: url("/upload/about-06bg-m.jpg") no-repeat top center;padding: 260px 20px 0;}}

.about-06 h3 {
    font-size: 36px;
	font-weight: 700;
    color: #FF8F29;
    margin-bottom: 60px;
}
@media (max-width: 576px) {.about-06 h3{font-size: 18px;}}

.about-06 p {
    font-size: 24px;
	font-weight: 700;
    color: #0C163A;
    margin-bottom: 30px;
}
@media (max-width: 576px) {.about-06 p{font-size: 18px;}}



/* -------------------------
   privacy
-------------------------- */
.privacy-top {
  background: url("/upload/privacy-topbg.png?v=20251205") no-repeat center top;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}
@media(max-width: 567px) {.privacy-top{background:none;height:auto;padding: 0 20px;}}

.privacy-top.terms {
  background: url("/upload/terms-topbg.png?v=20251205") no-repeat center top;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}
.privacy-top .txtbox h1 {
  font-size: 36px;
  color: #0C163A;
  margin: 200px 0 10px 0; 
  font-weight: 700;
}
@media(max-width: 567px) {.privacy-top .txtbox h1{margin: 30px 0 10px 0; font-size: 20px;}}

.privacy-top .txtbox h2 {
  font-size: 20px;
  color: #0C163A;
  font-weight: 400;
  margin-bottom: 60px;
}
@media(max-width: 567px) {.privacy-top .txtbox h2{font-size: 12px;margin-bottom: 20px;}}

.privacy-top .txtbox .in {
	max-width: 1200px;
    width: 100%;
	text-align: left;
	color: #0C163A;
	font-size: 20px;
	font-weight: 400;
}
@media(max-width: 567px) {.privacy-top .txtbox .in{font-size: 12px;}}

.privacy-top .txtbox .in h3 {
    font-size: 20px;
    color: #0C163A;
    font-weight: 500;
    margin: 0;
}
@media(max-width: 567px) {.privacy-top .txtbox .in h3{font-size: 13px;}}

.privacy-top .txtbox .in ul {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}
.privacy-top .txtbox .in li {
    display: list-item;
    list-style-type: disc;
}
.privacy-top .txtbox .in ol {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
}
.privacy-top .txtbox .in ol li {
    display: list-item;
    list-style-type: symbols;
}
.privacy-top .txtbox .in p {
    margin-bottom: 25px;
}
.underline-title {
	padding: 20px 0;
	border-top: 1px solid #DBDBDB;
	margin: 120px 0 0 0;
}
.c-title-box {
	margin: 0 0 60px;
}
@media(max-width: 567px) {.c-title-box{margin: 0 0 20px;}}
.c-title-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-img-box {
	margin: 0 0 60px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
@media(max-width: 567px) {.c-img-box{margin: 0 0 20px;}}
.c-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-title-box h1 {
	font-size: 30px;
	font-weight: 700;
	color: #0C163A;
	padding: 0 0 15px;
}
@media(max-width: 567px) {.c-title-box h1{font-size: 24px;}}

.c-title-box h2 {
	font-size: 24px;
	font-weight: 400;
	color: #0C163A;
}
@media(max-width: 567px) {.c-title-box h2{font-size: 18px;}}

.c-section__title {
	display: flex;
	margin-bottom: 20px;
}
@media(max-width: 567px) {.c-section__title{flex-direction: column;margin-bottom: 0;}}

.c-section__title .c-search-form {
	margin-left: auto;
	position: relative;
	padding: 0;
}
.c-section__title .c-search-form .form-control {
	border-radius: 100px;
	background: #ffffff;
	color: #717070;
	font-size: 18px;
	font-weight: 400;
	width: 100%;
	padding-left: 50px;
	height: 44px;
	border: none;
}
.c-section__title .c-search-form .search-form-btn {
	font-size: 18px;
	position: absolute;
	top: 15px;
	left: 10px;
	transform: translateY(-50%);
	background: transparent;
	width: 24px;
	height: 24px;
}

.c-filter-box{
	border-top: 1px solid #90A3BF;
}
@media(max-width: 567px) {.c-filter-box{margin-top: 16px;}}

.c-filter-box .filter-top {
	display: flex;
	padding: 20px 0;
}
.c-filter-box .filter-top .filter-top-left {
	display: flex;
	color: #0C163A;
	align-items: center;
	gap: 6px;
}
.c-filter-box .filter-top .filter-top-left img{
	width: 18px;
	height: 12px;
}
.c-filter-box .filter-top .filter-top-right{
	margin-left: auto;
}
.c-filter-box .filter-mid {
	font-size: 16px;
	display: flex;
}
@media(max-width: 567px) {.c-filter-box .filter-mid{flex-direction: column;}}

.c-filter-box .filter-mid div {
	padding: 0;
}
@media(max-width: 567px) {.c-filter-box .filter-mid div{padding: 0 0 5px;}}

.c-filter-box .filter-mid label:not(:first-child) {
	padding-left: 20px;
}
.c-filter-box .filter-mid input {
	background: #ffffff;
	border: 0;
	border-radius: 5px;
	height: 30px;
	width: 160px;
	padding: 0 10px;
}
@media(max-width: 567px) {.c-filter-box .filter-mid input{width: 100%;font-size: 12px;padding: 0 5px;}}

.c-filter-box .filter-mid select {
	background: #ffffff;
	border: 0;
	border-radius: 5px;
	height: 30px;
	width: 110px;
	padding: 0 10px;
}
@media(max-width: 567px) {.c-filter-box .filter-mid select{width: 120px;flex: 1 1 0%;}}

.c-filter-box .filter-bottom{
	font-weight: 500;
	text-align: right;
	margin: 30px 0 0 0;
}
@media(max-width: 567px) {.c-filter-box .filter-bottom{text-align: right;margin: 10px 0 0 0;}}

.c-filter-box .filter-bottom a:first-child{
	padding: 0 10px 0 0;
	color:#A6A6A6;
}
@media(max-width: 567px) {.c-filter-box .filter-bottom a:first-child{padding: 0 5px 0 0;}}

.c-filter-box .filter-bottom a:not(:first-child){
	border-left: 1px solid #90A3BF;
	padding: 0 10px;
	color:#A6A6A6;
}
@media(max-width: 567px) {.c-filter-box .filter-bottom a:not(:first-child){padding: 0 5px;}}

.c-filter-box .filter-bottom a.active{
	color: #3280FF;
}
.c-detail-box{
	display: flex;
	justify-content: center;
	position: relative;
}
@media(max-width: 567px) {.c-detail-box{flex-direction: column;}}

.c-detail-box .c-detail-box-left{
	flex: 1 1 auto;
	min-width: 0;
	margin-right: 24px;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-left{margin-right: 0;}}

.c-detail-box .c-detail-box-left .teacher-name {
	color: #7C7C7C;
	font-size: 26px;
	font-weight:500;
	padding-bottom: 20px;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-left .teacher-name{font-size: 18px;}}

.c-detail-box .c-detail-box-left .des {
	color: #0C163A;
	font-size: 20px;
	font-weight:400;
}
.c-detail-box .c-detail-box-left .des p {
	align-items: center;
	display: flex;
	line-height: 1.7;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-left .des p{font-size: 16px;line-height: 28px;padding: 3px 0;}}

.c-detail-box .c-detail-box-left .des i {
	color: #F3B94B;
	font-size: 30px;
	padding-right: 15px;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-left .des i{font-size: 22px;padding-right: 5px;}}

.c-detail-box .c-detail-box-left .des .des-container {
	font-size: 20px;
	font-weight: 400;
	color: #0C163A;
	line-height: 1.8;
}
.c-detail-box .c-detail-box-left .des .des-container .title {
	font-size: 30px;
	font-weight: 700;
	color: #0C163A;
	padding: 30px 0 10px 0;
	line-height: 1.8;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-left .des .des-container .title{font-size: 20px;}}

.c-detail-box .c-detail-box-left .des .des-container p{
	padding: 0 0 10px 0;
}
.c-detail-box .c-detail-box-left .des .des-container ol {
	margin: 0;
	padding: 0 0 0 20px;
}
.c-detail-box .c-detail-box-left .des .des-container ol li{
}
.c-detail-box .c-detail-box-left .des .des-container ul {
	margin: 0;
	padding: 0 0 0 20px;
}
.c-detail-box .c-detail-box-left .des .des-container ul li{
	list-style-type: disc;
}
.c-detail-box .c-detail-box-left .rating {
	color: #F3B94B;
	font-size: 24px;
	padding: 0;
	display: flex;
	align-items: baseline;
}
.c-detail-box .c-detail-box-left .rating h3{
	color: #0C163A;
	font-size: 30px;
	font-weight: 700;
	padding: 0;
}
.c-detail-box .c-detail-box-left .rating h3 span{
	color: #0C163A;
	font-size: 40px;
	font-weight: 700;
	padding: 0;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-left .rating h3 span{font-size: 32px;}}

.c-detail-box .c-detail-box-left .rating p{
	color: #979797;
	font-size: 20px;
	font-weight: 400;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-left .rating p{font-size: 16px;}}

.c-detail-box .c-detail-box-left .rating .star-group {
	padding: 0 20px 0 30px;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-left .rating .star-group{padding: 0 10px;}}

.c-detail-box .c-detail-box-left .rating .star-group i {
	color: #F3B94B;
	font-size: 24px;
	padding: 0;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-left .rating .star-group i{font-size: 16px;}}

.c-detail-box .c-detail-box-left .rating-card .item {
	box-sizing: border-box;
	display: inline-flex;
	height: fit-content;
	background: #FFFFFF;
	border: 1px solid #DEE5ED;
	border-radius: 8px;
	padding: 20px 15px;
	align-items: baseline;
	min-height: 200px;
}
.rating-card .swiper-slide {
  flex-shrink: 0;
}
.rating-card .swiper-slide.item {
  min-width: 0;
}
.c-detail-box .c-detail-box-left .rating-card .header__comment .comment__avatar {
	margin-right: 10px;
	width: fit-content;
}
.c-detail-box .c-detail-box-left .rating-card .header__comment .comment__avatar img {
	height: 48px;
	width: 48px;
	border-radius: 50%;
}
.c-detail-box .c-detail-box-left .rating-card .comment__content p{
	font-size: 16px;
}
.c-detail-box .c-detail-box-left .rating-card .comment__content p.name{
	font-size: 14px;
	color:#486284;
	padding: 0;
}
.c-detail-box .c-detail-box-left .rating-card .comment__content .star-group i{
	padding: 0;
	font-size: 20px;
}
.c-detail-box .c-detail-box-right{
	width: 440px;
	flex-shrink: 0;
	margin-left: auto;
	position: relative;
}
@media(max-width: 567px) {.c-detail-box .c-detail-box-right{width: 100%;}}

.c-detail-box .c-detail-box-right .c-detail-buy {
	background: #ffffff;
	padding: 20px;
	border-radius: 5px;
}
.c-detail-title {
	display: flex;
	align-items: center;
	margin: 0 0 25px;
	justify-content: space-between;
}
@media(max-width: 567px) {.c-detail-title{flex-direction: column;align-items: flex-start;}}

.c-detail-title h1{
	font-size: 40px;
	font-weight:700;
	color: #0C163A;
}
@media(max-width: 567px) {.c-detail-title h1{font-size: 20px;padding: 0 0 10px;}}

.c-detail-title div{
	font-size: 18px;
	font-weight:500;
	color: #7C7C7C;
	margin-left: auto;
	width: 160px;
}
@media(max-width: 567px) {.c-detail-title div{margin-left: 0;}}

.c-detail-title i {
	font-size: 20px;
	color: #7C7C7C;
}
.c-detail-title i.icon-heart {
  color: #FD63A1;
}
.course-hero.swiper {
	height: 720px;
}
@media(max-width: 567px) {.course-hero.swiper{height: auto;aspect-ratio: 16 / 9;}}
@media(max-width: 567px) {.course-hero.swiper img{height: 100%;object-fit:cover;}}
.course-sidebar {
	padding: 20px;
	background: #FFFFFF;
	border-radius: 8px;
	position: relative;
}
.course-sidebar.fixed {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
}
.course-sidebar .top {
	font-size: 18px;
	font-weight: 500;
	color: #7C7C7C;
	border-bottom: 1px solid #DBDBDB;
	padding: 0 0 15px 0;
	margin: 0 0 15px;
}
.course-sidebar .title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #0C163A;
	padding: 0 0 30px 0;
}
.course-sidebar .discount {
	font-size: 40px;
	font-weight: 700;
	color: #0C163A;
	padding: 0 0 20px 0;
}
@media(max-width: 567px) {.course-sidebar .discount{padding: 0;}}

.course-sidebar .discount2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #7C7C7C;
}
.course-sidebar .discount3 {
  white-space: nowrap;
}
.course-sidebar .discount3 input{
  width: 70px;
  height: 30px;
  font-size: 18px;
  font-weight: 600;
  color: #FF8736;
}
.course-sidebar .price2 {
	font-size: 18px;
	font-weight: 500;
	color: #7C7C7C;
	padding: 0 0 40px 0;
	text-decoration: line-through;
}
.course-sidebar .price2 .js-price2{
	font-size: 18px;
	font-weight: 500;
	color: #FF4747;
	padding: 0 0 0 15px;
	text-decoration: none;
	display: inline-block;
}
.course-sidebar .form-group label {
	display: block;
	font-size: 18px;
	font-weight: 500;
	color: #0C163A;
	padding-bottom: 12px;
}
@media(max-width: 567px) {.course-sidebar .form-group label{font-size: 16px;font-weight: 700;}}

.course-sidebar .form-group select {
	background-image: url("data:image/svg+xml,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220%200%2020%2020%22%3e%3cpath stroke=%22%23F3B94B%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M6%208l4%204%204-4%22/%3e%3c/svg%3e");
	background-position: right .5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  background-color: #ffffff;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #C2C2C2;
	border-radius: 4px;
	height: 35px;
	width: 100%;
	color: #F3B94B;
	font-size: 14px;
	padding: 0 10px;
}
.course-sidebar .form-group .time-info {
}
.course-sidebar .form-group .time-info a {
	background: #FFFFFF;
	border: 1px solid #F3B94B;
	border-radius: 4px;
	font-size: 14px;
	color: #F3B94B;
	padding: 5px 10px;
}
.course-sidebar .form-group .time-info a:hover {
	background: #F3B94B;
	border: 1px solid #F3B94B;
	border-radius: 4px;
	font-size: 14px;
	color: #FFFFFF;
	padding: 5px 10px;
}
.course-sidebar .form-group .time-info a:not(:first-child) {
	margin: 0 0 0 5px;
}
.course-sidebar .form-group .time-info a.disabled {
	background: #FFFFFF;
	border: 1px solid #979797;
	border-radius: 4px;
	font-size: 14px;
	color: #979797;
	padding: 5px 10px;
}
.course-sidebar .total {
	font-size: 20px;
	font-weight: 700;
	color: #0C163A;
	margin: 80px 0 0 0;
}
@media(max-width: 567px) {.course-sidebar .total{margin: 30px 0 0 0;}}

.course-sidebar .total2 {
	font-size: 28px;
	font-weight: 700;
	color: #0C163A;
	margin: 60px 0 0 0;
	text-align: right;
}
.course-sidebar .total2 span{
	font-size: 18px;
	font-weight: 500;
	color: #7C7C7C;
	text-decoration: line-through;
}
.course-sidebar .total .js-price3{
	font-size: 20px;
	font-weight: 700;
	color: #F3B94B;
}
.course-sidebar .cart-action {
	display: flex;
	position: relative;
	margin-top: 8px
}
.cart-action .btn {
	border-width: 2px;
	font-weight: 700;
	border-radius: 4px;
	padding: 6px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
}
.cart-action .btn.add2cart-btn {
	width: 48px;
	gap: 10px;
	right: 0;
	transition: width .3s ease-in-out;
}
.cart-action .btn:nth-child(2) {
	margin-left: 10px;
}
.cart-action .btn.add2cart-btn .btn-txt:first-child {
	display: none;
	opacity: 0;
}
.cart-action .btn.add2cart-btn .btn-txt:nth-child(2) {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 22px;
	width: 22px;
	color: #F3B94B;
	font-size: 26px;
}
.faq-top {
  background: url("/upload/index-topbg.jpg?v=20260225") no-repeat center center;
  background-size: cover; 
  height: 656px;  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media(max-width: 567px) {.faq-top{background: none;height: auto;display: block;text-align: left;padding: 20px;}}

.faq-top .txtbox h1 {
  font-size: 56px;
  color: #0C163A;
  margin: 0 0 20px 0; 
  font-weight: 700;
}
@media(max-width: 567px) {.faq-top .txtbox h1{font-size: 20px;}}

.faq-top .txtbox h2 {
  font-size: 24px;
  color: #0C163A;
  margin: 0;
  font-weight: 500;
}
@media(max-width: 567px) {.index-top .txtbox h2{font-size: 13px;}}
.faq-c {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.faq-c .item{
	display: flex;
}
.faq-c .item a {
	display: inline-block;
	background: #FFFFFF;
	color: #333333;
	padding: 0 10px;
	margin: 0 10px;
	border-radius: 8px;
	height: 38px;
	line-height: 34px;
	font-size: 16px;
	font-weight: 700;
	/* width: 100px; */
	text-align: center;
	border: 1px solid #D4D2E3;
}
@media(max-width: 567px) {.faq-c .item a{margin: 0 4px 8px;font-size: 14px;height: 30px;line-height: 28px;}}

.faq-c .item a:hover {
	background: #F3B94B;
}
.faq-c .item a.active {
	background: #F3B94B;
}
.faq-item {
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  width: 100%;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  font-size: 20px;
  color: #0C163A;
  line-height: 1.8;
  font-weight: 700;
}
@media (max-width: 767px) {.faq-question{font-size: 16px;padding: 0 10px;}}

.faq-question .symbol{
  font-size: 24px;
  font-weight: 400;
}
.faq-answer {
  font-size: 16px;
  font-weight: 500;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 10px;
}

.faq-item.active .faq-answer {
  padding: 10px;
  max-height: 500px;
}
.tabs {
  display: flex;
  margin-bottom: 80px;
}
@media(max-width: 567px) {.tabs{display: block;margin-bottom: 30px;text-align: left;}}

.tabs a {
  padding: 12px 0; 
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 30px;
  font-weight: 700;
  color: #73757B;
  transition: background 0.3s;
  line-height: 1.6;
}
@media(max-width: 567px) {.tabs a{font-size: 16px;flex: 1;}}

.tabs a:not(:first-child) {
	margin-left: 40px;
}
@media(max-width: 567px) {.tabs a:not(:first-child){margin-left: 10px;}}

.tabs a:hover {
	color: #0C163A;
}
.tabs a.active {
  color: #0C163A;
  font-weight: 700;
  border-bottom: 3px solid #FEBB48;
}


.tab-content {
  position: relative;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Loading */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  font-size: 16px;
  color: #555;
}
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007BFF;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fade-in {
  opacity: 0;
}
.fade-in.show {
  opacity: 1;
}

.course-tag .tabs{margin-bottom: 25px;}
.course-tag .tab{display:inline-block;background:#fff;color:#333;padding:0 10px;border-radius:8px;height:38px;line-height:38px;font-size:16px;font-weight:700;width:auto;text-align:center;text-decoration:none}
@media(max-width: 567px) {.course-tag .tab{font-size:14px;height: 27px;line-height: 27px;width: auto;}}

.course-tag .tab:not(:first-child) {margin-left: 20px;}
@media(max-width: 567px) {.course-tag .tab:not(:first-child){margin-left: 5px;}}

.course-tag .tab:hover{background:#f3b94b;color:#333}
.course-tag .tab.active{background:#f3b94b;color:#333}
.course-tag .tab-contents .tab-content{display:none;margin-top:10px;padding:30px;background:#FFFFFF;border-radius:8px}
@media(max-width: 567px) {.course-tag .tab-contents .tab-content{padding:20px;}}
.course-tag .tab-contents .tab-content.active{display:block}
.more-content {display: none;margin-top: 40px;border-top: 1px solid #DBDBDB;font-size: 14px;font-weight: 500;color: #7C7C7C;line-height: 1.4;width: 100%;}
.more-content p:nth-of-type(even) {margin-bottom: 15px;}
.coupon-list{display: flex;flex-direction: column;gap: 5px;position: relative;}
.coupon-list .title{font-size:22px;font-weight:700;color:#0C163A;}
@media(max-width: 567px) {.coupon-list .title{font-size: 16px;}}
.coupon-list .date{font-size:18px;font-weight:500;color:#0C163A;}
@media(max-width: 567px) {.coupon-list .date{font-size: 14px;}}
.coupon-list .des{font-size:26px;font-weight:700;color:#FA8A2C;position: absolute;right: 0;top: 30px;transform: translateY(-50%);}
@media(max-width: 567px) {.coupon-list .des{font-size:20px;position: relative;transform: none;top: 0;padding: 0 0 10px;}}
.coupon-list button {font-size: 16px;font-weight: 500;color: #FEBB48;border: 0;background: transparent;width: 80px;text-align: left;padding: 0;text-decoration: underline;}
@media(max-width: 567px) {.coupon-list button{font-size: 14px;}}

.coupon-add {
	display: flex;
	justify-content: center;
	border-radius: 5px;
	margin: 0 auto 60px;
}
@media(max-width: 567px) {.coupon-add {margin: 0 0 20px;}}

.coupon-add form{
	display: flex;
	width: 60%;
}
@media(max-width: 567px) {.coupon-add form {width: 100%;}}

.coupon-add input {
	flex: 1;
	padding: 10px;
	border: none;
	background-color: #ffffff;
	font-size: 14px;
	outline: none;
	border-radius: 4px;
	margin-right: 10px;
	height: 40px;
	border: 1px solid #D8D8D8;
	color: #7C7C7C;
	font-weight: 500;
}
.coupon-add button {
  flex: 0 0 auto;
  background-color: #F2B949;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  width: 60px;
  height: 40px;
}
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.orders-list .top {
  display: flex;
  gap: 20px; 
}
@media(max-width: 567px) {.orders-list .top{flex-direction: column;}}

.orders-list .top-item {
  text-align: left;
}
.orders-list .top-item:first-child {
  width: 160px;
  flex: 0 0 160px;
}
@media(max-width: 567px) {.orders-list .top-item:first-child{width: 100%;}}

.orders-list .top-item img{
  width: 160px;
  border-radius: 4px;
}
@media(max-width: 567px) {.orders-list .top-item img{width: 100%;}}

.orders-list .top-item:nth-child(2),
.orders-list .top-item:nth-child(3) {
  flex: 1;
  gap:10;
}
.orders-list .top-item:nth-child(3) {
  text-align: center;
}
.orders-list .top-item:last-child {
  margin-left: auto;
  text-align: right;
}
.orders-list .top-item .title{
  font-size: 20px;
  font-weight:700;
  color:#0C163A;
  padding: 0 0 8px;
}
@media(max-width: 567px) {.orders-list .top-item .title{font-size: 16px;}}

.orders-list .top-item .status{
  font-size: 18px;
  font-weight:500;
  color:#2AB6F5;
}
.orders-list .top-item .status2{
  font-size: 18px;
  font-weight:500;
  color:#ADABC3;
}
.orders-list .top-item .discount{
  font-size: 18px;
  font-weight:500;
  color:#ADABC3;
}
.orders-list .bottom {
}
.orders-list .bottom-left {
	font-size: 20px;
	font-weight: 500;
	color:#7C7C7C;
}
@media(max-width: 567px) {.orders-list .bottom-left{font-size: 16px;text-align: right;}}

.orders-list .bottom-left span{
	display: inline-block;
}
.orders-list .bottom-left span:nth-child(2){
	padding: 0;
}
@media(max-width: 567px) {.orders-list .bottom-left span:nth-child(2){padding: 0;width: 100%;}}

.orders-list .bottom-left button {
	font-size: 16px;
	font-weight: 500;
	color: #FEBB48;
	border: 0;
	background: transparent;
	width: 80px;
	text-align: right;
	padding: 0;
	text-decoration: underline;
	float: right;
}
@media(max-width: 567px) {.orders-list .bottom-left button{font-size: 14px;}}

.orders-list .bottom-right {
  flex: 1; 
  background-color: #ffd9d9;
  padding: 20px;
}
.orders-detail {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 10px; 
}
@media(max-width: 567px) {.orders-detail {display: block;}}

.orders-detail2 {
	border-top: 1px solid #DBDBDB;
	margin-top: 40px;
	font-size: 20px;
	font-weight: 500;
	color: #7C7C7C;
	line-height: 1.4;
	padding: 20px 0 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center; 
}
@media(max-width: 567px) {.orders-detail2{display: block;border-top: 0;margin-top: 0;font-size: 16px;text-align: left;}}

.orders-detail2 .item{
	flex: 0 0 auto;
}
.orders-detail-m, .orders-detail2-m{
	display: none;
	font-size: 16px;
	font-weight: 700;
	color: #333333;
	text-align: left;
}
@media(max-width: 567px) {.orders-detail-m, .orders-detail2-m{display: block;padding: 15px 0 0 0;}}
.orders-detail-m{
	border-bottom: 1px solid #dddddd;
	padding: 15px 0 0 0;
}
.orders-detail-m span , .orders-detail2-m span{
	font-weight: 500;
	color: #666666;
}
@media(max-width: 768px) {.hide--pad {display: none !important;}}
.orders-detail-m div , .orders-detail2-m div{
	margin-bottom: 10px;
}
.row {
  display: contents;
}
@media(max-width: 567px) {.row{display: block;margin: 0;}}

.row > div {
  font-size: 20px;
  font-weight: 500;
  color:#0C163A;
  padding: 10px;
  text-align: left;
}
@media(max-width: 567px) {.row > div{font-size: 14px;}}

.row > div span {
  color:#7C7C7C;
}
.header > div {
  font-size: 18px;
  font-weight: 500;
  color:#0C163A;
}

.m-info {
  display: flex;
  gap: 20px; 
}
@media(max-width: 567px) {.m-info{flex-direction: column;}}

.m-info .left {
  width: 280px;
  display: flex;
  flex-direction: column;
}
@media(max-width: 567px) {.m-info .left{width: 100%;}}

/* 上區塊 */
.m-info .left .top-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFFFFF;
  padding: 50px 20px 30px 20px;
  box-sizing: border-box;
  border-radius: 8px;
}

.m-info .left .top-section .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.m-info .left .top-section .user-name {
  font-size: 18px;
  font-weight: 500;
  color:#0C163A;
  margin-bottom: 5px;
}

.m-info .left .top-section .email {
  font-size: 18px;
  font-weight: 500;
  color: #7C7C7C;
  margin-bottom: 10px;
}

.m-info .left .points {
	font-size: 18px;
	color: #0C163A;
	padding: 20px 0;
}

.m-info .left .points-number {
	color: #F2B949;
	font-weight: 500;
	font-size: 60px;
}

.m-info .left .bottom-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFFFFF;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  margin: 25px 0 0 0;
}

.m-info .left .bottom-section .login-method {
	font-size: 18px;
	margin: 5px 0;
	font-weight: 500;
	color: #0C163A;
}
@media(max-width: 567px) {.m-info .left .bottom-section .login-method{font-size: 14px;}}

.m-info .left .divider {
  width: 100%;
  border: none;
  border-top: 1px solid #DBDBDB;
  margin: 5px 0;
}
.m-info .right {
  flex: 1;
  box-sizing: border-box;
  border-radius: 8px;
}
@media(max-width: 567px) {.m-info .right{width: 100%;}}

.m-collect {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.m-collect .c-course-card{
	flex: 0 0 calc(33.333% - 20px);
}
@media(max-width: 567px) {.m-collect .c-course-card{flex: 0 0 100%;}}

.body--account .c-profile .input-group-set {
	display: flex;
	width: 100%;
}
.body--account .c-profile .input-group-set .input-group {
	margin-right: 40px;
	width: 50%;
}
@media(max-width: 567px) {.body--account .c-profile .input-group-set .input-group{width: 100%;margin-right: 0;margin-bottom: 10px;}}

.body--account .c-profile .input-group-set .input-group:last-of-type {
	margin-right: 0;
}
.body--account .c-profile .input-group-set .input-group2 {
	width: 100%;
}
.c-profile h5 {
	font-size: 16px;
	font-weight: 600;
	color: #2D3648;
	border-top: 1px solid #DBDBDB;
	padding: 20px 0 0 0;
	margin: 20px 0 20px;
}

.news-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px; 
}

.news-list .item {
	width: calc(50% - 10px);
	box-sizing: border-box;
	margin: 0 0 15px;
	border-bottom: 1px solid #D4D2E3;
}
@media(max-width: 567px) {.news-list .item{width: calc(100% - 10px);padding: 0 0 10px;}}

.news-list .item a {
  display: block;
  text-decoration: none;
}
.news-list .date {
  font-size: 14px;
  color: #3280FF;
  font-weight: 700;
}

.news-list .title {
  font-size: 16px;
  color: #0C163A;
  font-weight: 600;
}
.news-list-more a {
  font-size: 16px;
  color: #3280FF;
  font-weight: 500;
  float: right;
}
.news-list2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px; 
}

.news-list2 .item {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 15px;
	background: #ffffff;
	border-radius: 8px;
	padding: 20px;
	border-left: 16px solid #3175FA;
}
@media(max-width: 567px) {.news-list2 .item{width: calc(100% - 10px);padding:0;}}

.news-list2 .item a {
  display: block;
  text-decoration: none;
}
@media(max-width: 567px) {.news-list2 .item a{padding: 20px;}}

.news-list2 .date {
  font-size: 16px;
  color: #0C163A;
  font-weight: 400;
}
@media(max-width: 567px) {.news-list2 .date{font-size: 12px;padding: 0 0 6px 0;}}

.news-list2 .title {
  font-size: 18px;
  color: #0C163A;
  font-weight: 500;
}
@media(max-width: 567px) {.news-list2 .title{font-size: 16px;line-height: 1.2;}}

.news-list2-more a {
  font-size: 16px;
  color: #3280FF;
  font-weight: 500;
  float: right;
}
.blog-top {
	background: url("/upload/blog-topbg.jpg?v=20260327") no-repeat center center;
	background-size: cover;
	height: 656px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
@media(max-width: 567px) {.blog-top{background: none;height: auto;display: block;text-align: left;padding: 20px;}}

.blog-top .txtbox {
	margin-top: -80px;
}
@media(max-width: 567px) {.blog-top .txtbox{margin-top: 0;}}

.blog-top .txtbox h1 {
	font-size: 56px;
	color: #0C163A;
	margin: 0 0 20px 0;
	font-weight: 700;
}
@media(max-width: 567px) {.blog-top .txtbox h1{font-size: 20px;}}

.blog-list {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.blog-list .item {
	box-sizing: border-box;
	margin: 0 0 30px;
	width: calc(50% - 12px);
}
@media(max-width: 567px) {.blog-list .item{width: 100%;}}

.blog-list .item a {
  display: block;
  text-decoration: none;
}
.blog-list .item .blog-img{
	height: 320px;
  position: relative;
  overflow: hidden;
}
@media(max-width: 1279px) {.blog-list .item .blog-img{height: 270px;}}
@media(max-width: 1023px) {.blog-list .item .blog-img{height: 190px;}}
@media(max-width: 767px) {.blog-list .item .blog-img{height: 150px;}}
@media(max-width: 567px) {.blog-list .item .blog-img{height: auto;}}

.blog-list .item .blog-img img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.blog-list .date {
  font-size: 16px;
  color: #3280FF;
  font-weight: 700;
  padding: 30px 0 15px;
}
@media(max-width: 567px) {.blog-list .date{font-size: 14px;padding: 15px 0 10px;}}

.blog-list .title {
  font-size: 24px;
  color: #0C163A;
  font-weight: 700;
  padding: 0 0 15px;
}
@media(max-width: 567px) {.blog-list .title{font-size: 20px;}}

.blog-list .des {
  font-size: 16px;
  color: #0C163A;
  font-weight: 400;
}
@media(max-width: 567px) {.blog-list .des{font-size: 14px;}}

.blog-list .tag {
	padding: 8px 0 0;
	display: flex;
	gap: 10px;
}
.blog-list .tag a {
	background: #FF8F29;
	padding: 4px 15px 6px;
	border-radius: 4px;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
}
@media(max-width: 567px) {.blog-list .tag a{font-size: 14px;}}

.c-search-form {
	width: 450px;
	position: relative;
	padding: 30px;
}
@media(max-width: 567px) {.c-search-form{width: 100%;padding: 20px;}}

.c-search-form .form-control {
	border-radius: 100px;
	background: #ffffff;
	color: #717070;
	font-size: 16px;
	font-weight: 400;
	width: 100%;
	padding-left: 50px;
	height: 44px;
	border: none;
}
.c-search-form .search-form-btn {
	font-size: 18px;
	position: absolute;
	top: 45px;
	left: 40px;
	transform: translateY(-50%);
	background: transparent;
	width: 24px;
	height: 24px;
}
@media(max-width: 567px) {.c-search-form .search-form-btn{top: 35px;left: 30px;}}

.m-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-btn {
  width: 100%;
  padding: 6px 12px;
  border-radius: 6px;
  background: #F1F5F8;
  cursor: pointer;
  text-align: left;
}
@media(max-width: 567px) {.dropdown-btn{font-size: 14px;}}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 2px;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.dropdown-content label {
  padding: 6px 12px;
  cursor: pointer;
}

.dropdown-content label:hover {
  background-color: #f0f0f0;
}
.dropdown-content label input{
  margin: 0 6px 0 0;
}
.search-suggestions {
	position: absolute;
	top: 90px;
	left: 30px;
	width: 390px;
	background: #fff;
	padding: 10px;
	margin: 0;
	display: none;
	max-height: 200px;
	overflow-y: auto;
	z-index: 10;
	border-radius: 15px;
	text-align: left;
}
@media(max-width: 567px) {.search-suggestions{margin: 0;width: 90%;left: 20px;}}

.search-suggestions p {
  padding: 4px 12px;
  font-size:16px;
  font-weight:500;
  color:#0C163A;
}
.search-suggestions li {
  padding: 4px 12px;
  cursor: pointer;
  font-size:16px;
  font-weight:400;
  color:#0C163A;
}

.search-suggestions li:hover {
  background-color: #f0f0f0;
}
@media(max-width: 567px) {.js-send-button{margin-top:0;}}
.search-suggestions li a{
  display: block;
}
.filter-date {
	background: #ffffff;
	border: 0;
	border-radius: 5px;
	height: 30px;
	width: 150px;
	padding: 0 10px;
}
.heart i {
	font-size:24px;
	color:#FD63A1;
}
.user img {
	width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}
/* -------------------------------------------
     版型設定
  ---------------------------------------------*/
  
  /* ---01左圖右文----*/
.template-01 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin:60px 0;
	width: 100%;
}
@media (max-width: 767px) {.template-01{margin:30px 20px;width: auto;}}

.template-01 .imgBox {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}
@media (max-width: 767px) {.template-01 .imgBox{-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;margin-bottom: 30px;}}

.template-01 .txtBox {
	-ms-flex: 0 0 47%;
	flex: 0 0 47%;
	max-width: 47%;
	margin-left: 3%;
}
@media (max-width: 767px) {.template-01 .txtBox{-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;margin-left: 0;}}

.template-01 h3 {
	font-size: 24px;
	font-weight: 600;
	position: relative;
	margin-bottom: 10px;
	padding-left: 15px;
}
.template-01 h3::before {
	top: 5px;
	width: 7px;
	height: 30px;
	background-color: #1469B9;
	content: "";
	position: absolute;
	left: 2px;
}
.template-01 p {
	font-size: 20px;
	line-height: 1.7;
	color: #0C163A;
	width: 100%;
	margin:0 0 25px;
}
@media (max-width: 767px) {.template-01 p{font-size: 14px;line-height: 24px;}}

.template-01 ul {
	list-style: disc !important;
}
.template-01 ul li {
	padding-left: 0.8em;
	margin-bottom: 0.3em;
	position: relative;
	font-size: 18px;
	color: #333333;
}
.template-01 ul li::before{
	content: "";
	background-color: #0092D8;
	height: 6px;
	width: 6px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 10px;
}
  /* ---02 右圖左文----*/
.template-02 {
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	align-items: center;
	flex-wrap: wrap;
	margin:60px 0;
	width: 100%;
}
@media (max-width: 767px) {.template-02{margin:30px -15px;width: auto;}}
.template-02 .imgBox {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
	
}
.template-02 .txtBox {
	-ms-flex: 0 0 47%;
	flex: 0 0 47%;
	max-width: 47%;
	margin-right: 3%;
}
.template-02 h3 {
	font-size: 24px;
	font-weight: 600;
	position: relative;
	margin-bottom: 10px;
	padding-left: 15px;
}
.template-02 h3::before {
	top: 5px;
	width: 7px;
	height: 30px;
	background-color: #1469B9;
	content: "";
	position: absolute;
	left: 2px;
}
.template-02 p {
	font-size: 20px;
	line-height: 1.7;
	color: #0C163A;
	margin:0 0 25px;
}
.template-02 ul {
	list-style: disc !important;
}
.template-02 ul li {
	padding-left: 0.8em;
	margin-bottom: 0.3em;
	position: relative;
	font-size: 18px;
	color: #333333;
}
.template-02 ul li::before{
	content: "";
	background-color: #0092D8;
	height: 6px;
	width: 6px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 10px;
}
/* ---03 單個編輯器----*/
.template-03 {
	margin:60px 0;
	width: 100%;
}
@media (max-width: 767px) {.template-03{margin:30px 0;width: auto;}}
.template-03 h3{
	font-size: 20px;
	font-weight: 600;
}
.template-03 h4{
	font-size: 18px;
	font-weight: 600;
}
.template-03 ul{
	margin: 0 0 0 15px;
}
.template-03 li{
	list-style-type: disc;
}
.template-03 li a{
	color:#1469B9;
}
.template-03 liａ:hover{
	color:#333333;
}
/* ---04 一列5個圖文----*/
.template-04 {
	display: flex;
	-webkit-box-orient: horizontal;
	margin:60px -15px;
	flex-wrap: wrap;
	width: 100%;
}
@media (max-width: 767px) {.template-04{margin:30px 0;width: auto;}}

.template-04 .item{
	flex: 0 1 calc(20%);
	padding:15px;
}
@media (max-width: 991px) {.template-04 .item{flex: 0 1 calc(25%);}}
@media (max-width: 767px) {.template-04 .item{flex: 0 1 calc(33.33%);}}
@media (max-width: 480px) {.template-04 .item{flex: 0 1 calc(50%);}}

.template-04 .item img{
	width:100%;
}
.template-04 .item .title {
	font-size: 18px;
	padding: 15px;
	text-align: center;
}
/* ---05 一列4個圖文----*/
.template-05 {
	display: flex;
	-webkit-box-orient: horizontal;
	margin:60px -15px;
	flex-wrap: wrap;
	width: 100%;
}
@media (max-width: 767px) {.template-05{margin:30px -15px;width: auto;}}

.template-05 .item{
	flex: 0 1 calc(25%);
	padding:15px;
}
@media (max-width: 767px) {.template-05 .item{flex: 0 1 calc(33.33%);}}
@media (max-width: 480px) {.template-05 .item{flex: 0 1 calc(100%);}}

.template-05 .item img{
	width:100%;
}
.template-05 .item .title {
	font-size: 18px;
	font-weight: 600;
	padding: 15px;
	text-align: center;
	line-height: 1.2;
}
/* ---06 一列3個圖文----*/
.template-06 {
	display: flex;
	-webkit-box-orient: horizontal;
	margin:60px -15px;
	flex-wrap: wrap;
	width: 100%;
}
@media (max-width: 767px) {.template-06{margin:30px -15px;width: auto;}}

.template-06 .item{
	flex: 0 1 calc(33.33%);
	padding:15px;
}
@media (max-width: 480px) {.template-06 .item{flex: 0 1 calc(100%);}}

.template-06 .item img{
	width:100%;
}
.template-06 .item .title {
	font-size: 20px;
	font-weight: 600;
	padding: 15px;
	text-align: center;
	line-height: 1.2;
}
@media (max-width: 767px) {.template-06 .item .title{font-size: 20px;}}

/* ---07 一列2個圖文----*/
.template-07 {
	display: flex;
	-webkit-box-orient: horizontal;
	margin:60px -15px;
	flex-wrap: wrap;
	width: 100%;
}
@media (max-width: 767px) {.template-07{margin:30px -15px;width: auto;}}

.template-07 .item{
	flex: 0 1 calc(50%);
	padding:15px;
}
@media (max-width: 480px) {.template-07 .item{flex: 0 1 calc(100%);}}

.template-07 .item img{
	width:100%;
}
.template-07 .item .title {
	font-size: 20px;
	font-weight: 600;
	padding: 15px;
	text-align: center;
}
.page--homepage .container.faq {
	width: 1210px;
	margin: -140px auto 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
}
@media (max-width: 767px) {.page--homepage .container.faq{width: 100%;margin: 0;padding: 0 20px;}}

.page--homepage .container.blog {
	width: 1210px;
	margin: -280px auto 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
}
@media(max-width: 1209px) {.page--homepage .container.blog{width: 100%;padding: 0 20px;margin: -340px auto 160px;}}
@media(max-width: 567px) {.page--homepage .container.blog{margin: -20px auto 0;}}
.page--homepage .container.about {
	max-width: 1680px;
    width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
}
.contact-bg {
	background: url("/upload/contact-bg.png?v=20260223") no-repeat center center;
	background-size: cover;
}
.contact-top {
	padding: 120px 0 80px;
	text-align: center;
}
@media(max-width: 567px) {.contact-top{padding: 30px 0;text-align: left;}}

.contact-top h1{
	font-size:56px;
	font-weight: 700;
	color:#0C163A;
}
@media(max-width: 567px) {.contact-top h1{font-size:20px;}}

.contact__section {
	padding: 30px 25px;
	border-radius: 8px;
	margin: 0 auto;
	background-color: #fff;
	position: relative;
	width: 900px;
}
@media(max-width: 900px) {.contact__section{width: 100%;}}

.contact--send-button {
	height: 50px;
	color: #fff;
	background-color: #F3B94B;
	border: none;
	padding: 12px 5px;
	font-weight: 500;
	width: 200px;
	margin: 0 auto;
	border-radius: 4px;
	align-self: center;
}
@media(max-width: 567px) {.contact--send-button{width: 100%;}}

.p-explore .l-explore__pagination {
	display: flex;
	justify-content: center;
	position: relative;
}
.l-section__container {
	position: relative;
}
.course-box {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	margin: 0 -15px;
}
@media(max-width: 567px) {.course-box{margin: 0;}}

.course-box .course-item {
	width: 33.33%;
	margin-bottom: 30px;
	padding: 0;
}
@media(max-width: 567px) {.course-box .course-item{width: 100%;}}

.tag-item.active {background: #F3B94B;}
.btn-save {
	position: absolute;
	right: 20px;
	top: 30px;
	color: #327DFF;
	border: 0;
	background: #ffffff;
}
@media(max-width: 567px) {.btn-save{top: 17px;font-size: 14px;align-items: center;justify-content: center;display: inline-flex;}}
@media(max-width: 567px) {.btn-save i{font-size: 18px;}}

.btn-camera {
	position: absolute;
	right: 0;
	top: 90px;
	color: #333;
	background: #ffffff;
	border-radius: 100px;
	width: 30px;
	height: 30px;
	box-shadow: 0 2px 15px -2px rgba(0,0,0,.12),0 2px 6px -2px rgba(0,0,0,.05);
	cursor: pointer;
}
.r-now {
	margin: 15px 0;
	font-size: 14px;
}
.r-now a{
	color: #3280FF;
}
.toolbar-inner .nav_link.active span{
	color: #3175FA;
}
.tova-blue{
	color: #3175FA;
}
.mobile-accordion{
	font-size: 18px;
	color: #0C163A;
}
.comment__content{
	width: 90%;
}
.swiper.ad{
	padding: 0;
}
#explore-menu-container span.active{
	color: #3175FA;
}
#explore-menu-container svg.active2{
	color: #3175FA;
}
.copyurl-box {
	display: flex;
  align-items: center; 
  gap: 12px;    
}
.copyurl {
	display: inline-flex;
	color: #0C163A;
	align-items: center;
	gap: 6px;
}
.copyurl2 {
	display: inline-flex;
	color: #0C163A;
	align-items: center;
	gap: 6px;
}
.news-banner{
	width: 100%;
	height: 720px;
	overflow: hidden;
}
@media(max-width: 567px) {.news-banner{height: 150px;}}

.news-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* 關鍵 */
    display: block;
}
.container.news {
	padding: 30px 0;
	max-width: 1200px;
}
.article-block {
	margin: 0;
}
.mobile-lt label{
	display: none;
}
@media(max-width: 567px) {.mobile-lt label{display: block;font-size: 14px;width: 100px;}}
@media(max-width: 567px) {.mobile-lt{border-bottom: 1px solid #DBDBDB;}}
.mobile-loginBtn {
	box-sizing: border-box;
	width: 100%;
	padding: 0 20px;
}
.mobile-loginBtn a {
  display: block;
  width: 100%;
}
.cart-title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 60px;
}
@media(max-width: 567px) {.cart-title{font-size: 20px;}}

.cart-title2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}
@media(max-width: 567px) {.cart-title2{font-size: 20px;margin-bottom: 20px;}}

.cancel {
}
@media(max-width: 567px) {.cancel{position: absolute;top: 10px;right: 0;}}
.course-mBuy {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 10030;
	padding: 0;
	background-color: rgb(255, 255, 255);
	box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 8px 0px, rgba(0, 0, 0, 0.16) 0px 6px 24px 0px;
	transition: transform 0.3s ease-in-out;
	display: none;
}
@media(max-width: 567px) {.course-mBuy{display: block;}}

#pagination button.active {
            color: #3280FF !important;
        }
.sidebar ul {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
.menu-scroll {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 80px;
}
@media(max-width: 1240px) {
	.sidebar {
	display: flex;
	flex-direction: column;
	inset: 0;
}
}