:root {
  --primary-color:#0075c1;
  --second-color:#f39800;
  --shadow: 0 5px 20px 0 rgba(60,64,67,0.15);
  --text-color:#424b52;
  --YT-link:#8e4848;
  --width:1280px
}
html {font-size: 16px;}
#BodyContentMain { padding-bottom:10px;}
main { width: 100%; background:url(../image/bg_cafe.png) repeat-x;}
main .container { display: flex;flex-wrap: wrap;}
main a{transition: all 0.2s ease-out 0s; transform: none; color:inherit; display: inline-flex;}
main a:hover {text-decoration: none;transform:scale(1.05, 1.05); color:inherit;}
main a:link, main a:active, main a:focus {text-decoration: none;}

header {
  --border-color: #94c6e8;
  --link-color: #ffffff;
  --hover-bg: #3693d0;
  position: relative;
  font-size: 1rem;
  font-weight: bold;
  overflow: hidden;
}

header img {object-fit:cover;width: 100%;height:auto;}
header figure {position:absolute; width:80%;top:10%;z-index: 1;}
header figure img { max-width: 100%; height: auto;}
header nav {position:absolute;bottom: 0;z-index: 1;display: flex;height:auto;}
header nav ul {padding-left: 0;margin: 0;display: flex; width:100%;}
header nav li {list-style: none; position: relative; flex:1}

header nav a {display: flex;justify-content: center;align-items: center;height: 45px;margin: 0 -1px -1px 0;border: 1px solid var(--hover-bg);color: var(--link-color);margin: 0 -1px -1px 0;background: rgba(62, 196, 255, 0.1);background: linear-gradient(155deg,rgba(62, 216, 255, 0.9) 0%,rgba(31, 144, 219, 0.4) 10%, rgba(0, 117, 193, 0.8) 80%);box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);backdrop-filter: blur( 6px);-webkit-backdrop-filter: blur(6px);}

header nav a:hover {background-color: var(--hover-bg); color:var(--link-color); font-weight: bold;border-radius:0;}

/*Section共同樣式*/
section > .container, #studyclub .container{padding:15px;display: flex; justify-content: space-between; flex-wrap: wrap; gap:30px;}
article a {color:#0075c1}
section article, section picture {position: relative;z-index:1;}
section picture {display: flex; align-items: center;justify-content: space-between;}
section picture img {max-width: 100%; height: auto;}
.flex-row { display: flex; justify-content: space-between; align-items: stretch; gap:15px;}
article h1, article h2 {text-align: left; color:#403735; }
article h1 { font-size:1.875rem; font-weight: bold; margin-top:0;}
article h2 { font-size:1.375rem; font-weight: normal; margin: 1em 0 2em;}
article p {padding:0 0 0.25rem; font-size: 1.125rem;}
.btn-main {background-color: #0075c1; border-radius: 24px; color:#ffffff; display: inline-flex; padding: 10px 22px;}
.btn-main:hover {color: #ffff00;}

.h-center article h1, .h-center article h2 {width: 100%;text-align:center}

.YT { color: var(--YT-link)!important; margin: 15px 0; display:flex;align-items: center; gap:7px}

.owl-theme .owl-nav.disabled+.owl-dots {margin-top: 1px;}
.owl-dots {width: 85%; display: flex;justify-content: space-between;}
.owl-theme .owl-dots .owl-dot {display: flex; flex:1}
.owl-theme .owl-dots .owl-dot span {width: 100%; border-radius: 0;margin:2px 1px; background:rgba(255,255,255,0.5)}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #ffffff;
}

/*社群互動*/
#community { background: #F3FAFE;
background: linear-gradient(0deg, rgba(243, 250, 254, 1) 0%, rgba(243, 250, 254, 0) 100%);}
#community .container, #essay .container, #studyclub .container{ flex-direction: row-reverse;}
 #studyclub .container { align-items: center;}
#community article:after {content:url(../image/pic_like.png); display: block;position: absolute; right: 10%; bottom: 5%;z-index:-1;}

/*課業諮詢*/
#online {background: url(../image/pic_rotates.png) right top no-repeat; background-position: 90% -70%;}
#online article {display: flex;flex-direction: column;}
#online .flex-row {flex-direction: column;}
#online .flex-row:first-of-type{order:2}
#online .notepad {box-shadow:var(--shadow); border-radius: 10px; padding: 1em;border:1px solid var(--primary-color); flex:1;flex-direction: column;}
#online .notepad h3 {font-size: 1.125rem;color:var(--primary-color); margin: 0 0 0.5em; display: flex; align-items: center; justify-content:space-between;}
#online .notepad h3 em{ font-style: normal;}
#online .notepad h3:after {content:url(../image/icon_go.png); display: inline-flex; width: 20px; height: 20px;border-radius: 10px; background-color: var(--primary-color); }
#online .notepad:nth-child(2) {border-color: var(--second-color);}
#online .notepad:nth-child(2) h3 {color:var(--second-color)}
#online .notepad:nth-child(2) h3:after {background-color: var(--second-color)}
.notepad .icon {border-radius: 50%; display: inline-flex; background-color: #f1f1f1; padding: 9px;}
.notepad {color: var(--text-color);}

/*寫作批改*/
#essay { background: url(../image/bg_exam.jpg) center top;}
#online .flex-row.guide, #essay .flex-row.guide {justify-content: flex-start;align-items: center;flex-direction: row !important; gap:10px}

/*助教預約*/
#reserve {background: url(../image/bg_Tutor.png) left top no-repeat;background-size:contain; background-position:20% 60px;}

/*讀書會*/
#studyclub { padding: 0 0 60px;}
#studyclub h1, #studyclub h2 {color: #ffffff;}
#studyclub .studyclubbg {background: url(../image/bg_Club.jpg) no-repeat;background-size:cover; border-bottom-right-radius:100px;}
/* .club-info {display:flex; flex-direction: column; flex:1; box-shadow: var(--shadow), 1px 5px 10px 0 rgba(60,64,67,0.3); padding: 30px; margin-bottom: 45px; border: 1px solid #ffffffd2; border-top-left-radius: 30px;border-top-right-radius: 30px; color:#ffffff;background-color: #209dc6; } 
.club-info.posner {background-color: #61caa4;}
.club-info h3 {margin: 0 0 0.5em;color:#ffffff}
.club-info p {min-height: 130px;}
.block {display: block; width: 100%;} */
.btn-club {display:inline-flex; justify-content: center; align-items: center; padding: 12px 25px; background-color: #fff; border-radius: 25px; color:#209dc6; gap:8px; font-weight: bold;}
.btn-club:after {content:url(../image/icon_go.png); display: inline-flex; width: 20px; height: 20px;border-radius: 10px; background-color:#209dc6}
.posner .btn-club{color:#61caa4}
.posner .btn-club:after{ background-color:#61caa4}

#studyclub .item figure {overflow: hidden; position: relative; display: flex;height: 240px; width: 100%; }
#studyclub .item figure img {
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
#studyclub article p {color: #fff;}

/*作題評量*/
#exam {background: #E8F5F4;
background: linear-gradient(180deg, rgba(232, 245, 244, 1) 0%, rgba(232, 245, 244, 0) 50%);}

#exam h3 {text-align: left; color:#fff; margin-bottom: 2rem;}

/* 整體容器樣式 */
.exam-tab-container {font-family: Arial, sans-serif; display: flex; flex-direction: column; width:100%;}

/* Tab 按鈕容器 */
.exam-tabs { display: flex; flex-direction: column; align-items: flex-end; background-color: #0075c1; color: #fff;}

/* 單個 Tab 按鈕樣式 */
.exam-tab { flex-grow: 1; width: 90%; padding: 15px 25px; cursor: pointer; margin-right: 15px; transition: all 0.3s ease; position: relative;}
.exam-tab:after {content: ""; width: 40%; position: absolute; bottom: 0; right: 0; border-bottom: 1px dotted #479ad1;}
.exam-tab:hover {border-left: 2px solid #e5f1f9;}

/* 活動中的 Tab 樣式 */
.exam-tab.active { border-left: 2px solid #e5f1f9; background-color: rgba(255, 255, 255, 0.1);}

/* 內容區域樣式 */
.exam-tab-contents { padding: 10px; flex:1; background-color: #f39800; color: #fff;}
/* 單個內容區塊樣式 */
.exam-tab-content {display: none; max-width: 600px;}
.exam-tab-content figcaption {text-align: center; color:#f7f7ea}
/* 活動中的內容區塊樣式 */
.exam-tab-content.active {display: flex; animation: fadeIn 0.5s ease; flex-direction: column;}
.exam-tab-content > * { padding: 5px 15px;}
.exam-tab-content img { border-radius: 8px; max-width: 100%; height: auto;}
#exam .btn-main {background-color: var(--second-color); padding: 7px 15px; margin: 0 15px;}


/* 淡入動畫 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}




/*書審口試*/
#interview{ background: url(../image/bg_interview.png) no-repeat;background-size:cover; padding-bottom: 60px;}
#interview p { text-align:center;padding: 0 0; }
#interview p b{background: rgba(171, 121, 55, 0.2); padding: 3px 8px; margin-right:8px;}
.onebyone-info {  width: 90%;background-color:#fff; border-radius: 15px; padding:10px 20px 10px; box-shadow: var(--shadow); margin: 0 auto;}
.onebyone-info h3{ color:var(--second-color)}

#interview .flex-row {margin-top: 30px; margin-bottom: 30px;}
#interview figure{ position: relative; }
#interview figcaption {position: absolute; bottom:8px; left:8px; background-color:rgba(255, 255, 255, 0.75); padding: 0 8px}
#interview .item {margin: -8px -8px 8px 8px;}
#interview figure img {border-radius: 45px 0; box-shadow: -3px 3px 8px #31302d67; max-width: 100%;}
#interview .owl-item:nth-child(even) { margin-top: 45px;}


#forMember {width: 90%; border-radius: 60px; padding: 15px 30px 30px ; border-top-right-radius: 0; border-bottom-left-radius: 0; background-color: #f39800; color: #fff; margin: 30px auto; flex-direction:column; font-size: 1.125rem;}
#forMember h1 {text-align: center; font-family:'Noto Serif TC', serif; margin: 15px 0 5px;}
#forMember h1:after {content: ""; display: flex; width: 1.5rem; margin: 10px auto; border-bottom:4px solid yellow;}
#forMember ul { padding-left:0; width: auto; margin: 0 auto;list-style:none}
#forMember ul li{position:relative; padding:15px 13px 10px; line-height: 32px; border-bottom: 1px solid #ecb14a;}
#forMember ul li:before {content: ""; background-color: var(--primary-color); position: absolute; top: 27px; left: 0; width: 6px;height: 6px;}

/*咖啡優惠*/
#cafe { background: url(../image/bg_cafe.png) repeat-x}
#cafe section {display: none; padding: 0; width:100%;flex-grow: 1;  border: 1px solid #ccc;box-shadow: 3px 3px 6px #e1e1e1;}
.cafetabs{width:100%;font-size:1.125rem;margin: 2rem auto -2px;text-align:center;display: flex;flex-wrap: wrap;}
.cafetabs input {display: none;}
.cafetabs label{padding: 0.5rem 0;margin: 0;transition: background-color 0.2s;border: 1px solid #ccc;border-right: none;background-color: #f1f1f1;flex:1;}

.cafetabs input:checked + label {color: #ffffff;background: #BE3931;border: none;border-bottom: 2px solid #fff;cursor: default;border: inset 5px #ffaf2c;}

.cafetabs #tab1:checked ~ #content1,
.cafetabs #tab2:checked ~ #content2 {
  display: block;
  background-color: #fff;
}

.cafetabs > label:last-of-type {
    border-right: 1px solid #ccc;
}

.cafetabs input:checked + label.posnercafe {background: #224C38;}
.cafetabs .flex-row {margin: 1.5rem 1rem 0;padding: 0;gap: 1rem;flex-direction: column;}
.cafetabs img {max-width: 100%; height: auto;}
.cafetabs .posnerpic {display: flex;gap: 15px; flex-direction: column;justify-content: center;}
.cafetabs nav{width: 100%;text-align: center;margin: 2rem auto;font-size: 1.3rem;}
.fa-star {color: #fdca2f; margin: 0 .2rem;}
.fa-location-dot {color: darkred; margin-right: 0.6rem;}
.cafetabs nav a {padding:.2rem 0.5rem;background: #0081C7;border-radius: 24px;color: white; text-decoration: none;}
.cafetabs .cafe_sale {background: #b99b6b;text-align: center;padding: 0.5rem 0;text-decoration: none; width: 100%;font-size: 1.3rem;}
.cafetabs .cafe_sale.cafe_sale2 {background: purple;}
.cafetabs a { color:white;font-size: 1.3rem;}
.cafetabs a { display: inline-block;}/*手機板所有超連結都是block*/

.followIG {font-size: 1.1rem; display: inline-block;color: #800080!important; background: white;padding: 0 1rem; border-radius:17px;}
@media(max-width:749px) {
  header figure{margin-left: -15px;}
  header .titlebg {margin:0 0 48px -7%;} 
  header img {width: 115%}
  header nav {width:calc(100% - 20px);margin:0 10px 20px;padding:0;flex-direction:column; box-shadow:  var(--shadow);border-top-right-radius: 20px;}
  main section {padding: 0 15px;}
  .btn-main {margin:0 auto}

  #studyclub .flex-row, #exam .flex-row {flex-direction: column;}
  #studyclub article { padding-top: 45px;}
  /* .club-info {padding: 30px 15px; margin:0 15px 45px;} */
  #exam p {font-size: 1rem; overflow: hidden;}
  #interview {padding-top: 45px;}
  #exam, #cafe {padding: 0;}
  .exam-tab i{transition: ease-in 0.2s;}
  .exam-tab:hover i {transform: rotate(90deg);}

}

/*重設寬度*/
@media (min-width:750px) {
  header figure { width:57%}
  header .titlebg {margin:0;} 
  header img {width: 100%;}
  header nav {position: absolute;width: 52%;height: 49%;bottom:0;z-index: 1;padding: 3% 0 0 4%;flex-direction:column}

  header nav ul {padding-left: 0;margin: 0;display: flex; width:100%}
  header nav li {list-style: none; position: relative; flex:1}
  header nav a {background: rgba(62, 196, 255, 0.1);background: linear-gradient(155deg,rgba(62, 216, 255, 0.9) 0%,rgba(62, 216, 255, 0.45) 10%, rgba(62, 216, 255, 0) 80%);display: flex;justify-content: center;align-items: center;}
  

  header nav li::before,
  header nav li::after {
    content: ""; position: absolute; background-color: var(--border-color);}

  header nav li::before {
    height: 9px; border-left: 1px solid var(--border-color); top: -5px;}

  header nav li::after {
    width: 9px; border-top: 1px solid var(--border-color); left: -4px; top: 0; z-index: 1;}

  header nav .on-prem a::before,
  header nav .on-prem a::after {content: ""; position: absolute; background-color: var(--border-color); z-index: 1;}

  header nav .on-prem a::before {height: 9px; border-right: 1px solid var(--border-color); right: -1px; bottom: -4px;}

  header nav .on-prem a::after {width: 9px; border-top: 1px solid var(--border-color); right: -5px; bottom: 0;}
  
  section, section > .container, #studyclub .container{padding:15px 15px 45px;}
  section article, section picture {flex:1;}
  article h1 {margin-top: 2em;}
  #studyclub .studyclub { width: 320px; margin-left: -30px;}
  #studyclub .item figure {height: 280px;}
  .exam-tab-container {flex-direction: row;}
  .exam-tabs {width:45%}
  .exam-tab-contents {width:55%}
  .exam-tab-contents { margin: 30px -20px -45px -15px;padding: 20px;}
  .cafetabs{font-size:1.875rem;}
  .cafetabs label{padding: 1rem 3rem;}
  .cafetabs nav a {padding:.3rem 2rem;}
}
@media (min-width:992px) {
  header { font-size: 1.125rem;}
  header .titlebg {margin-left:initial;}
  header img {width: 100%;}
  header nav {padding: 0 2% 0 6%;flex-direction:row;}
  header nav ul {flex: 1;flex-direction:column;}
  header nav li {flex:none; width:100%}
  #online .flex-row {flex-direction: row;}
  #online .flex-row:first-of-type{order:initial}
  #studyclub .studyclub { padding:0 30px; width:calc(50% - 45px);margin: 60px 0; }
  /* .club-info {width: calc(50% - 45px); float: left;}
  .club-info{ margin-left: 30px;} */
  .onebyone-info, #forMember{width:75%;}
  .cafetabs{width:85%;}
  .cafetabs .flex-row {margin: 1.5rem 3.5rem 0;padding: 0 2rem;}
  .cafetabs .posnerpic {flex-direction:row;}
}
@media (min-width: 1280px) {
    .container {width: var(--width); max-width: var(--width); }
    header figure { width:auto}
    header nav {padding: 0.25% 6% 0 7%;}
    header nav a {height: 50px; font-size: larger;}
    #studyclub .studyclub { padding:0 5%;}
    .exam-tab {  width: calc(var(--width) / 2 - 20%);}
  }


/*滾動卷軸，右下出現按鈕*/
#floatMenu { display: none; right: 5px;bottom: 60px;position: fixed; display:block; z-index: 9999;}
/*width: 94px;*/
.gotop {width: 55px;background: rgba(171, 121, 55, 0.8); border-top-left-radius:8px; border-bottom-right-radius: 8px; color: #fff;}
#floatMenu a {
  width: auto;
  padding: 12px 7px;
  text-align: center;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  text-decoration: none;
  line-height: 1.4;
  color: #fff;
  display: block;
  background: rgba(171, 121, 55, 0.8);
  margin-bottom: 1px;
}
#floatMenu a span {display: block;}
#floatMenu a:hover {background-color:rgba(255, 156, 0,0.8);}
@media(max-width:749px) {
  #floatMenu a span {display: none; padding: 5px 15px;}
  #floatMenu a:focus span, #floatMenu a:hover span, .gotop {display: block; }
  .gotop {width:34px; padding: 13px 0;}
}