@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600&display=swap');
@import url("reset.css?v=3");

html, body{
  width: 100%;
  height: 100%;
  /* font-family: Arial, "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", sans-serif;	 */
  
}


body{
  position: relative;
  background-size: cover;
  
}

p{
  line-height: 1.4;
  color:#736357;
  margin-bottom: .5rem;
}

p.priceTxt{
  font-size: 1.4rem;
  color:#a93124;
}

#loading{
  width: 100%;
  height: 100%;
  background: #fcf7f1;
  z-index: 999999;
  position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#loading img{
  width: 20%;
  height: auto;
  position: absolute;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

table.cust-table tr th,
table.cust-table tr td{
  line-height: 1.3;
}

table.cust-table thead tr{
  background: #c79c6e;
  color:#ffffff;
}

table.cust-table tr:nth-child(even) {background: #f2f2f2}


h3.cust-h3{
  font-size: 1.5rem; 
  color:#926137;
  line-height: 1.4;
}

.w-10{
  width: 10%;
}

.w-20{
  width: 20%;
}

.w-70{
  width: 70%;
}

.w-80{
  width: 80%;
}



.img-w100{
  width:100%;
  height: auto;
}

.btn-link:focus {
  outline: none;
  box-shadow: none; /* 如果有阴影效果，可以同时移除 */
}


.for_pc_block{
  display: none!important;
}

.for_pc_flex{
  display: none!important;
}

.for_m_block{
  display: block!important;
}

.for_m_flex{
  display: flex!important;
}

.border-0{
  border: none!important;
}

.btn-main{
  background: #C69C6D!important;
  color:#fff;
}

.msgbox{
  line-height: 1.6;
}

/* .bg-mainColor{
  background: #C69C6D!important;
} */

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(183,134,87, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: none;
} 

ol>li{
  line-height: 1.5;
  color:#736357;
}

ul>li{
  line-height: 1.5;
  list-style: disc;
  color:#736357;
}

ul.mainMenu>li,
ul.loginMenu>li{
  list-style: none;	
}

ul.cust-ul>li{
  list-style: square;
  font-size: 1rem;
  line-height: 1.6;
}


ul.courseIntro>li{
  list-style: square;
  padding-bottom:1.2rem;
}


ul.courseIntro li h4{
  color:#333;
}

ul.courseIntro li p{
  margin-bottom:.25rem;
}


ul.mainMenu li .dropdown-menu{
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: transparent;
  background-clip: padding-box;
  border:0;
  border-top: 1px solid #c79c6e;
  border-bottom: 1px solid #c79c6e;
  border-radius: 0;
}

ul.mainMenu li .dropdown-menu .dropdown-item{
  color: #333;
  text-align: inherit;
  white-space: nowrap;
  border: 0;
}

ul.mainMenu li .dropdown-menu .dropdown-item:hover{
  background-color: #c79c6e;
  color:#ffffff;
}

.navbar-nav.loginMenu{
  background: #bf9162;
  margin:0;
  padding:.5rem;
  align-items: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.navbar-nav.loginMenu li a{
  text-decoration: none;
  color:#fff;
  padding:0 1.5rem;
}

/* ======================================== 選單 ===================================== */

.navbar-brand img{
  width:auto;
  height:100px;
}

.bgColorBar{
  width:100%;
  top:35px;
  height:50px;
  position: absolute;
  background: #F7EDE0;
  z-index: -1;
}

.loginBtnGrp{
  position: absolute;
  right:20px;
  top:20px;
  display: flex;
}

.loginBtnGrp a:link,
.loginBtnGrp a:visited,
.loginBtnGrp a:active{
  width:auto;
  display: flex;
  font-size: .8rem!important;
  padding:.25rem .5rem;
  background: #333;
  color:#fff;
  border-radius: 10px;
  text-decoration: none;
}

.loginBtnGrp a:hover{
  opacity: .8;
}

.navbar-nav .nav-item:focus,
.navbar-nav a:focus {
  outline: none; /* 移除預設的藍色框 */
  box-shadow: none; /* 移除 Bootstrap 預設的陰影（如果有） */
}

.navbar-nav .nav-item a.nav-link{
  color:#333;
  padding-right:.8rem;
  padding-left:.8rem;
  -moz-user-focus: none;
}

#navbarCollapse{
  background: #f6eadb;
  margin: 0 1.5rem;
  border:1px solid #bf9162;
  border-radius: 10px;
}

/* ======================================== 首頁 ===================================== */
  .carousel-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  height: 40px;
  width: 40px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 20%;
  /* border: 1px solid black; */
  background-image: none;
}

.carousel-control-prev-icon:after {
  content: '〈';
  font-size: 2rem;
  font-weight: bolder;
  color: #333;
}

.carousel-control-next-icon:after {
  content: '〉';
  font-size: 2rem;
  font-weight: bolder;
  color: #333;
}

h1{
  width:100%;
  text-align: center;
  color: #374D58;
  font-size: 1.8rem;
  line-height: 1.6;
}

.serve-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:0 1rem;
  padding-left:0!important;
  padding-right: 0!important;
  align-items: flex-start;
}

.serve-desc h2{
  font-size: 1.3rem;
  line-height: 1.4;
}

.serve-desc h2 span{
  display: block;
}

.tutor-desc {
  display: flex;
  flex-direction: column;
  padding:0 1rem;
  align-items: flex-start;
}

.tutor-desc h3{
  font-size: 1.3rem;
  color:#8b633e!important;
}


h3.prdTitle{
  font-size: 1.5rem;
  line-height: 1.6;
}

.img-box{
  margin-bottom:1.5rem;
  display: flex;
  justify-content: center;
}

.img-circle{
  width:160px;
  height:160px;
  border-radius: 50%;
  background: #f5ede1;
  flex-shrink: 0; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-circle.real-tutor{
  border:1px solid #a28662;
}

.img-circle img{
  width:85%;
  height:auto;
}

.img-circle.real-tutor img{
  width:100%;
  height:auto;
}

.blockquote{
  height: auto;
  overflow: hidden;
  transition:all .5s ease-in-out;
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
}

.blockquote:after,
.blockquote:before{
  position: absolute;
  font-size: 3rem;
  color:#dac8b3;
  font-weight: bolder;
}

.blockquote:after{
  content:"「";
  top: 70px;
  left: -52px;
  font-weight: bold;
}

.blockquote:before{
  content:"」";
  font-weight: bold;
  bottom:0px;
  right:-52px;
}

.blockquote h2{
  font-size: 1.5rem;
  color: #713b1f;
}

.blockquote p{
  margin-bottom:1rem;
  font-size: 1rem;
  line-height: 1.6;
}

h3.card-title{
  font-size: 2rem;
  line-height: 1.8;
  color:#926137;
  
}

h4.sub-title{
  font-size: 1.5rem;
  line-height: 1.3;
  color:#4d4d4d;
}

h5.card-title{
  font-size: 2rem;
  line-height: 1.8;
  color:#926137;
}

#aboutusMore{
  width: 40px;
  margin: 0 auto;
  background: #bf9e73;
  color:#fff;
  border-radius: 6px;
  font-size: 1rem;
  display: flex;
  padding: .5rem;
  justify-content: center;
}

#aboutusMore:hover{
  cursor:pointer;
}

#aboutusMore img{
  width:90%;
  height:auto;
}

.card-img{
  position: relative;
  display: flex;
}

.card-img .itemDes{
  position: absolute;
  bottom:0;
  width:100%;
  height:auto;
  background: rgba(0,0,0,.7);
  padding: .8rem;
}

.card-img .itemDes p{
  color:#fff;
  margin-bottom:0;
}

.jumbotron.inpage{
  background: #f5ede1!important;
}

.custom-accordion{
  padding: 1.25rem;
  padding-top:0; 
}

.accordion.custom-accordion>.card>.card-header{
  padding:.75rem!important;
  background-color:#f4ede2;
}

.accordion.custom-accordion>.card>.card-header>.btn-link{
  color:#f4ede2!important;
  text-decoration: none;
}

.accordion.custom-accordion>.card>.card-header .btn-link:after{
  content:'▶';
  font-size: .6rem;
  display: block;
  position: absolute;
  top:5px;
  right:5px;
  color:#bf9e73;
}

.accordion.custom-accordion>.card>.card-header .btn-link.collapsed{
  color:#8b633e!important;
  text-decoration: none;
}

.accordion.custom-accordion>.card.expanded>.card-header{
  background-color:#bf9e73;
  
}

.accordion.custom-accordion>.card.expanded>.card-header .btn-link{
  color:#ffffff!important;
  text-decoration: none;
}

.accordion.custom-accordion>.card.expanded>.card-header .btn-link:after{
  content:'▼';
  font-size: .6rem;
  display: block;
  position: absolute;
  top:5px;
  right:5px;
  color:#f4ede2;
}

/* .accordion.custom-accordion>.card>.card-header .btn-link[aria-expanded="true"]{
  
} */

.outlineBox{
  border:1px solid #926137;
  border-radius: 10px;
  padding: 1.2rem;
}

.lineBtn{
  background: #06C755;
  display: flex;
  width: fit-content;
}

.lineBtn:hover{
  color:#fff;
}

.lineBtn img{
  height:32px;
}

.lineBtn p{
  margin:0;
  color:#fff;
  margin:0 .5rem;
}

.copyIcon{
  width: 22px;
  height: 22px;
  display: block;
  background: url(../images/copy_icon.svg) #926137;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  margin-left:.5rem;
}

#copyToken:hover{
  cursor: pointer;
}

#copyToken:hover h4{
  text-decoration: underline;
}

h4#theToken{
  color:#926137;
  font-size: 1.3rem;
}

.copyNoteWap{
  width:100vw;
  height:100vh;
  display:none;
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  left: 0;
  top:0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
}

.copyNoteWap .copyNote{
  width: fit-content;
  height: min-content;
  padding:.15rem .35rem;
  line-height: 1.4;
  background: rgba(0,0,0,.5);
  border-radius: 5px;
  font-size: 10pt;
  text-align: center;
  color: #fff;
  font-weight: 300;
}

/* footer */
.footerCnt{
  background: #F7EDE0;
  padding:1.5rem;
}

.footBtnGrp{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.footBtnGrp a{
  text-decoration: none;
  margin-bottom:0.25rem;
}

a .btnDes{
  display: flex;
  align-items: flex-start
}

a .btnDes img{
  width:28px;
}

a .btnDes .btnDesTxt p{
  font-size: 1.1rem;
  color:#926137;
  margin-bottom:0;
  margin-left:1.2rem;
  font-weight: 400;
}

.footBtnGrp a p.contactTxt{
  font-size: 1rem;
  color:#4d4d4d;
}