@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.headerRwdContainer { display: none; }
.rwdMenuContainer { display: flex; height: 70px; width: 100%; background: #0088d2; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); padding: 0 5px; position: sticky; top: 0; z-index: 150; }
.rwdMenuIcon { width: 50px; height: 100%; color: #333; text-align: center; cursor: pointer; line-height: 50px; position: absolute; right: 10px;}
.rwdMenuIcon .ion-navicon {font-size: 28px; padding: 1px 8px; color: #fff;}
.rwdMenuIcon .fa-times {font-size: 24px; padding: 1px 8px; color: #fff; margin-top: 14px;}
.rwdMenuLogo { vertical-align: middle; text-align: center; margin: 10px 0 10px 8px; }
.rwdMenuLogo .step{ position: absolute; right: 8px; }
.rwdMenuLogo>a>img { width: 130px; }
.rwdMenuSearch{width: 50px;text-align: center; color: #ccc; cursor: pointer; line-height: 50px; font-size: 24px;}
.rwdMenuSearchContainer {
  height: 50px;
  background: rgba(180, 180, 180, 0.8);
  position: fixed;
  z-index: 39;
  top: 50;
  width: 100%;
  padding-top: 5px;
}

.rwdMenuSearchContainer input {
  font: normal 14px '微軟正黑體';
  letter-spacing: 1px;
  color: #555;
  line-height: 20px;
  border: none;
  border-bottom: solid 1px #ddd;
  padding: 5px;
  background: rgba(255, 255, 255, 0);
  border-radius: 0;
}

.rwdMenuSearchContainer input:focus {
  outline: none;
  background: none;
  border: none;
  border-bottom: solid 1px #ddd;
  box-shadow: none;
}

.rwdMenuSearchContainer .search {
  width: 50px;
  font: bold 25px "Century Gothic";
  letter-spacing: 1px;
  text-align: center;
  line-height: 40px;
}

.rwdMenuSearchContainer .search>a {
  color: #555;
  display: block;
  cursor: pointer;
}
.rwdMenuSearchContainer .search>a:hover{
  text-decoration: none;
}
.rwdHeaderNavContainer { position: fixed; top: 0; bottom: 0; right:0; padding-top: 50px; width: 100%; background: rgba(255, 255, 255, 0.5); z-index: 50; }
.rwdHeaderNav { position: absolute; top: 0; bottom: 0; right: 0; width: 250px; background: rgba(220, 220, 220, 0.9); z-index: 50; font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 50px; letter-spacing: 1px; padding: 70px 40px 0; overflow-x: hidden; overflow-y: scroll; }
.rwdHeaderNav>ul>li { border-bottom: 1px solid #999; }
.rwdHeaderNav>ul>li>a { color: #333; }
.rwdHeaderNav ul>li>a:hover { text-decoration: none; }
.rwdSideNavSecLayer { background: #777;}
.rwdSideNavSecLayer > ul { padding: 10px 0 10px 15px; margin: 5px 0; }
.rwdSideNavSecLayer > ul > li { line-height: 1.6; margin: 12px 0;}
.rwdSideNavSecLayer > ul > li > a { color: #ccc; padding: 0 0 0 0px;  }
.rwdSideNavThirdLayer { background: #999;}
.rwdSideNavThirdLayer ul { padding: 10px 0 10px 15px; }
.rwdSideNavThirdLayer ul li { line-height: 1.6; margin: 12px 0; }
.rwdSideNavThirdLayer>ul>li>a { color: #000; padding: 0 0 0 0px;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.phoneMenu { width: 100%; height: 50px; background: rgba(150,150,150, 0.7); position: fixed; bottom: 0; z-index: 30; display: none; }
.phoneMenuBox { text-align: center; padding: 5px 0; }
.phoneMenuBox a { color: #fff; }
.phoneMenuBox a:hover{
	text-decoration: none;
}
.phoneMenuBox i {
	font-size: 20px;
	line-height: 25px;
}
.phoneMenuTitle { font: normal 12px 'Century Gothic','微軟正黑體'; line-height: 16px; letter-spacing: 2px; }
.phoneMenuCartTitle { }

@supports(padding: env(safe-area-inset-bottom)) {
  .phoneMenu {
    /* bottom: calc(env(safe-area-inset-bottom));
    left: env(safe-area-inset-left);
    right: env(safe-area-inset-right);
    height: calc(50px + env(safe-area-inset-bottom)); */
    height: calc(50px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); /* 增加內邊距以確保內容不會被安全區域遮擋 */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> RWD<<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1280px) {}
@media screen and (max-width:1200px) {
  /*20201223 聯絡我們圖片改為3D圖片*/
  .indexContactImg{
    width: 100%;
    /* padding-bottom: 50%; */
    position: relative;
  }
  .indexContactImg iframe{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  /**/
}
@media screen and (max-width:1100px) {
}
@media screen and (max-width:1000px) {

}
@media screen and (max-width:992px){
body{
	margin-bottom: 100px;
}
.rwd_header_mt { margin-top: 50px; }
.banner { padding-top: 0; }
.breadcrumb{padding-top: 30px;}
.indexArrivalImg{width: 90%;}
.indexArrivalTextContainer {
  width: calc(80% - 15px);
  background: rgba(0,0,0,0.6);
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 20%;
}
.indexProductContentHover{background: rgba(0,0,0,0.5);}
.indexProductContent{opacity: 1;}
.cartListTableContainer td{
  position: relative;
}
.cartListTableProductDeleteContainer{
  position: absolute;
  top: 10px;
  right: 10px;
}
.memberInfoContainer, .cartListContainer, .aboutContainer, .contactContainer, .FAQContainer, .memberOrderContainer, .productDetailContainer, .productBanner, .productDetailContainer, .cartCheckContainer, .cartInfoContainer { padding-top: 0; }

}
@media screen and (max-width:950px){}
@media screen and (max-width:900px) {}
@media screen and (max-width:830px) {
.memberPointContainer .tableHeaderRwdHide { display: none; }
.memberPointContainer .tableHeaderHide { display: table-header-group; }
.memberPointContainer .tableRwdHide { display: none }
.memberPointContainer tr td.tableRwdBox .tableRwdContent { display: block; line-height: 30px; }
.memberPointContainer tr td.tableRwdBox .tableRwdContent .tableRwdContentTitle { display: inline-block; width: 80px; }
.memberPointContainer .tableDeleteBtn { position: absolute; top: 0px; right: 10px; }
}
@media screen and (max-width:800px) {
.memberRechargeContainer .tableHeaderRwdHide { display: none; }
.memberRechargeContainer .tableHeaderHide { display: table-header-group; }
.memberRechargeContainer .tableRwdHide { display: none }
.memberRechargeContainer tr td.tableRwdBox .tableRwdContent { display: block; line-height: 30px; }
.memberRechargeContainer tr td.tableRwdBox .tableRwdContent .tableRwdContentTitle { display: inline-block; width: 80px; }
.memberRechargeContainer .tableDeleteBtn { position: absolute; top: 0px; right: 10px; }
}
@media screen and (max-width:768px) {
.headerContainer { display: none; }
.headerRwdContainer { display: block; }
.indexProductTitleContainer{
  height: 100px;
}
.indexProductTitle{
  font-size: 25px;
  line-height: 40px;

}
.pageBanner { margin-top: 60px; }
.indexChangeContainer .container { max-width: 96%; width: 96%; }
.footer .container { max-width: 96%; width: 96%; }
.footer { display: none; }
.phoneMenu { display: block; }
.cartListFreightInfoContainer{
  border: double 3px #aaa;
  padding: 15px;
}

.profile {
  padding: 40px 10px 0;
  width: 100%;
  max-width: 100%;
}

.teacher-profile main {
  padding: 20px 0 40px;
}
.courseCardContainer .cardContainer .indexCard{
  width: calc(50% - 15px);
}


.playlist-item .info-box p { width: 100%; }

.playlist-item .info-box .view-times { text-align: left; }
/* 課程內頁 */
.banner { background: url(../img/banner03.jpg) no-repeat center top; background-size: cover; }
.banner img { display: none; }
.banner h1 { font-size: 1.25em; }
.video-area .video-box, .video-area .item-list { width: 100%; }
.video-area .video-box { height: auto; }
.video-area .item-list ul.unit-list {height: calc(100% - 290px);}
.video-play { position: relative; display: block; }     
.course-unit .card-body { padding: 5px;}
.course-unit .select-bar ul li { width: 50%; margin-bottom: 1em; }
.course-unit .select-bar ul i { font-size: 2em; }
.course-unit .sellbox { text-align: center; padding: 15px 0; border-top: 1px solid #ced4da; border-bottom: 1px solid #ced4da;}
.course-unit .btn-box {padding: 20px;}
.course-unit .top-area { background: #f3f3f1; }

}


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

}
@media screen and (max-width:700px) {
.indexProductContent p{
  font-size: 20px;
}
}
@media screen and (max-width:650px) {}
@media screen and (max-width:600px) {}

@media screen and (max-width:576px) {
/* .indexContactImg{
  padding-bottom: 66%;
} */
.indexArrivalContainer{
  padding: 60px 0 110px;
}
.indexArrivalImg{width: calc(100% - 0px);}
.indexArrivalTextContainer {
  width: calc(80%);
  background: rgba(0,0,0,0.6);
  position: absolute;
  top: 50px;
  bottom: -50px;
  left: 10%;
}
.indexArrivalTextTitle{
  font-size: 25px;
  margin: 0 0 5px 0;
  line-height: 30px;
}
.indexArrivalTextContent{
  line-height: 20px;
  margin: 0 0 15px 0;
}
.pr-75{padding-right: 15px;}
.pl-75{padding-left: 15px;}
.indexProductContentContainer .col-sm-6 .indexProductContentHover{
  width: calc(100% - 30px);
}
.cartListTableProductNameBox{
  margin-top: 10px;
  margin-bottom: 5px;
  top: 0;
  transform: translateY(0);
}
.cartListTableProductNameBoxContainer {
  position: relative;
}
.cartNavContainer ul>li {
  width: 60px;
  margin: 0 4px 0 0;
  letter-spacing: 0;
  font-size: 12px;
}
.cartNavContainer ul>li::after {
  right: -6px;
  margin-top: 12px;
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent #555;
}
.promotion-share-container {
  flex-direction: column;
}
.promotion-share-container .section:first-of-type{
  border-bottom: 1px solid #eee;
}
.promotion-share-container .divider{
  display: none;
}

}
@media screen and (max-width:500px) {
.indexProductContent p{
	margin-bottom: 5px;
}
.ifile.maxWidth-300px { overflow: hidden; width: 95%; }
.upfile.maxWidth-150px { max-width: 100px; }
}
@media screen and (max-width:480px) {
  .courseCardContainer .cardContainer .indexCard{
    width: 100%;
    margin-right: 0;
  }
  .indexTeachersList .teacherItem {
    width: calc(50% - 15px);
    flex-shrink: 0;
    padding: 10px;
  }
  .squareCardContainer .indexSquareCard{
    width: calc(50% - 15px);
    margin-right: 15px;
    flex-shrink: 0;
    border-radius: 16px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, .1);
    background-color: #fff;
  }
  .indexNewProductsList .productItem {
    width: calc(50% - 15px);
    margin-right: 15px;
    flex-shrink: 0;
  }

  .coupon-input {
    width: 160px;
  }
}
@media screen and (max-width:450px) {}
@media screen and (max-width:400px) {
}
@media screen and (max-width:380px) {

}
@media screen and (max-width:360px) {
	.container{
		max-width: 98%;
	}
}
@media (min-width: 768px) {
    /*
        index.php
    */
    .banner-slideShow .owl-carousel .owl-nav {
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      margin-top: 0;
      width: 720px;
  }
  .banner-slideShow .owl-carousel .owl-item img{
      max-width: 720px;
  }
  .banner-slideShow .owl-carousel .owl-nav .owl-prev,
  .banner-slideShow .owl-carousel .owl-nav .owl-next{
      display: flex;
  }
  
}
@media screen and (min-width: 992px) {
    /*
        index.php
    */
    .banner-slideShow .owl-carousel .owl-nav{
        width: 960px;
    }
    .banner-slideShow .owl-carousel .owl-item img{
        max-width: 960px;
    }
}
@media (min-width: 1024px) {
  .banner-background {
    height: 66%;
    top: 29%;
  }

  .banner img {
    clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
  }
  .index-product-slider .swiper-button-prev,
  .index-product-slider .swiper-button-next {
    top: 40%;
  }
  /* .indexTeachersList .teacherItem .teacherBox {
    margin-right: 0;
  } */
  .indexNewProductsList .productItem {
    width: calc(20% - 15px);
  }
  .indexTeachersList .teacherItem .teacherBox .teacherImgContainer img { padding: 8px; }

  .indexNewProductsList .productItem {
    width: calc(20% - 15px);
  }
  .indexTeachersList .teacherItem {
    width: calc(20% - 15px);
    flex-shrink: 0;
    padding: 10px;
  }
  .squareCardContainer .indexSquareCard{
    width: calc(20% - 15px);
  }
  .headerNavigateContainer .item .text{
    font-size: 16px;
  }
  
  .headerNavigateContainer {
    position: sticky;
    top: 125px;
  }

  .headerNavigateContainer .item a img{
    height: 20px;
    width: auto;
  }

  .teacherItem .productBox { padding:12px 18px;}
}
@media (min-width: 1200px) {
  .index-product-slider .swiper-button-prev,
  .index-product-slider .swiper-button-next {
    top: 45%;
  }
  .index-product-slider .swiper-button-prev {
    left: -5px;
  }
  .index-product-slider .swiper-button-next {
    right: -5px;
  }
  
  .indexCardContainer .cardContainer{
   flex-wrap: wrap;
    gap: 16px 30px;
  }
  .indexCardContainer .cardContainer .indexCard {
    margin-right: 0;
  }
}