@import url('https://fonts.googleapis.com/css2?family=Chiron+Hei+HK:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&family=Noto+Sans+TC:wght@100..900&display=swap');

/* css reset 歸0 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tfoot,thead{margin:0;padding:0;border:0;outline:0;font-size:100%}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
/* css reset 歸0 end */

body{margin:0 auto;padding:0;color: #272727}
#BodyContainer{margin:0 auto}
#BodyContentEvent,#event{width:100%}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.bgcolor1{background:linear-gradient(to top,#172b53 60%, #000e2c 100%)}
.bgcolor3{background: #ffdaa0;position: relative;z-index: 1;padding: 3.5rem 0 2rem;}
.bgcolor2, .bgcolor4{background: white;padding: 3.5rem 0 2rem;overflow: hidden;position: relative;z-index: 1;}
.bgcolor4_1{padding: 1.5rem 0 0;}
.bgcolor2::before{
  content: "";position: absolute;top: -4.1rem;left: -14rem;width: 382px;height: 1710px;background: url("../images/1507059_linebg2.png") no-repeat left top / 100% auto;
  z-index: -1;opacity: 0.07;}
.bgcolor2::after{
  content: "";position: absolute;top: -4.1rem;right: -14rem;width: 382px;height: 1710px;background: url("../images/1507059_linebg2.png") no-repeat left top / 100% auto;
  z-index: -1;opacity: 0.07;}
.bgcolor4::before{
  content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;background: url("../images/1507059_bg2.png") no-repeat left top / cover;background-attachment: fixed;
  z-index: -1;opacity: 0.65;}
h1,h2,h3,h4{letter-spacing: 0.09rem;}
h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); color: var(--blue_dark);font-family: var(--font_family2);font-weight: 600;line-height: 1;}
h1 span{ color: var(--brown_dark);}
h2 { 
  color: var(--blue_dark); margin: 0 0 1.5rem; border-bottom: 2px solid var(--golden_cube); font-size: clamp(1.5rem, 3vw, 3.2rem);
  font-weight: 600; padding-left: 2rem; position: relative;
}
.title { --line-width: 25%; }
.title::before { content: ""; position: absolute; bottom: -.4rem; left: 0; width: var(--line-width); height: .4rem; background: var(--golden_cube); }
h2 span { color: var(--red_dark);}
h4{ font-size: 1.1rem;line-height: 1.7;margin-bottom: 0.3rem;}

:root{
  --blue_dark: #0a295b;
  --blue_dark2: #172b53;
  --blue_light: #1674d3;
  --brown_dark: #af7715;
  --brown_light: #d97706;
  --blue_dark2-90: rgb(from var(--blue_dark2) r g b / .95);
  --blue_dark2-80: rgb(from var(--blue_dark2) r g b / .8);
  --blue_dark2-70: rgb(from var(--blue_dark2) r g b / .7);
  --blue_dark2-40: rgb(from var(--blue_dark2) r g b / .4);
  --blue_dark2-30: rgb(from var(--blue_dark2) r g b / .3);
  --red_dark: #c4181f;
  --white_light: #fcf7e3;
  --golden_cube: #ffa500;
  --font_family1: microsoft yahei;
  --font_family2: "Chiron Hei HK", sans-serif;
  --golden_linear:linear-gradient(90deg, #d8aa57 0%, #e3bd78 10%, #faecb2 20%, #e3c786 34%, #c4974e 46%, #e1c88e 55%,
  #fcf6c9 62%, #dec08a 70%, #c9943a 82%, #d79f35 92%, #e1a630 100%);
}
        
.text-red { color: var(--red_dark); }
.bg-org{background: var(--golden_cube);color: #FFFFFF;font-size: 0.9em;padding: 0 .6rem;}
.listdot { margin-left: 1rem;text-indent: -1rem;}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin-bottom: 1.5rem; }
.grid-2-second{grid-template-columns: 1fr 2fr;}
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: 1.5rem; }
.grid-3-once {grid-template-columns: 1fr 1.2fr 1.25fr;}
.grid-3-second {grid-template-columns: 1.4fr 1fr 1fr;}
.grid-3-third {grid-template-columns: 1fr 1fr 1.2fr;}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: 1.5rem; }

.flex-5{display: flex;flex-wrap: wrap;justify-content: center;gap: .4rem;}
.flex-5 .student{width: calc((100% - 2 * 8px) / 3);  box-sizing: border-box; margin-bottom: 1.5rem;}

/*導覽列*/
.nav-bar {
	display: flex;justify-content: center;align-items: center;padding: 15px 5%;background: var(--blue_dark2-90);color: white;
	position: sticky;top: 0;z-index: 1000;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.nav-links a { margin:0 20px; text-decoration: none; color: var(--white_light); font-weight: bold; font-size: 1.2rem;letter-spacing: 0.1rem; }
.nav-links a i { color: var(--golden_cube); }

/*主圖*/
.main-hero { align-items: center;justify-content: space-between; padding: 8.5rem 3.6rem 4.2rem;background: white; position: relative;z-index: 1;overflow: hidden;clip-path: polygon(0 0, 100% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 0); }
.main-hero::before, .main-hero::after { position: absolute;content: '';}
.main-hero::before { background: url("../images/1507059_bg2.png") no-repeat center left / cover; width: 680px; height: 100%; top: 0; left: 0;z-index: -2; }
.main-hero::after { background: url("../images/1507059_bg1.png") no-repeat center right / cover; width: 680px; height: 100%; top: 0; right: 0;z-index: -1;}
.main_logo{position: absolute;content: '';left: 3rem;top: 1.4rem;}
.hero-left { flex: 0 74%; text-align: center; gap: 1.5rem; flex-direction: column; align-items: center; }
.hero-right { flex: 0 24%; justify-content: flex-end; }
.sub-headline { font-size: clamp(1.3rem, 3vw, 2.1rem); font-weight: bold;color: var(--blue_dark); }
.sub-headline span{ color: var(--red_dark); }
.feature-grid { gap: 1rem; font-size: clamp(1rem, 2vw, 1.15rem);color: var(--white_light);align-items: normal; }
.feature-item {
	color: white;background: var(--blue_dark2);text-align: center;border: 1px solid var(--golden_cube);padding: 1.8rem .8rem 1rem;
	flex: 1;border-radius: 1rem;position: relative;z-index: 0;overflow: hidden;align-items: center;gap: 0.3rem;
}
.feature-item::before { 
  position: absolute; content: ''; width: 100%; height: .4rem;z-index: -1;left: 0;top: 0;
  background: var(--golden_linear);font-size: clamp(1.1rem, 3vw, 1.15rem);
}
.feature-icon{flex: 1 20%;font-size: 2.05rem;color: var(--golden_cube);}
.feature-content{flex: 1 70%;text-align: left;}
.feature-item h3 { font-size: clamp(1rem, 2vw, 1.3rem);font-weight: 700;color: var(--white_light); }
.circle-badge {
  font-size: 1.3rem;width: 220px;height: 220px;border: 5px solid var(--golden_cube);border-radius: 50%;flex-direction: column;justify-content: center;align-items: center;
  text-align: center;font-weight: bold;line-height: 2.2;position: relative;z-index: 2;color: #ffd039;letter-spacing: 0.08rem;font-family: var(--font_family2);
}
.circle-badge::before { position: absolute; content: ''; width: 220px; height: 220px; background: url("../images/1507059_circle-badge.png") no-repeat center center / cover; z-index: -1; }
.circle-badge p:first-child{ color:white;font-size: 0.9em;}
.circle-badge_big{font-size: clamp(1.5rem, 3vw, 1.7rem);line-height: 1.2;font-weight: bolder;}

/*課程內容*/
.container { margin: 0 auto; }
.container2 { width: 98%; margin: 0 auto 1.5rem; padding: 1rem 1rem 0.5rem;  border-radius: 1rem;background: #eaedf5; }
.container2 h2::before, .container3 h2::before, .cta-banner h2::before{ display: none; }
.container2 .card{background: white;border: 1px dashed var(--blue_light);}
.container2 .card h3{color: var(--blue_light);border-bottom: solid 1px var(--brown_dark);font-size: 120%;}
.container3 .card h3{color: var(--brown_light); border-bottom: solid 1px var(--blue_light);font-size: 120%;word-break: keep-all;}
.container3 h2{color: var(--white_light);border-bottom: none;}
.container3 { width: 98%; margin: 0 auto; padding: 1rem; border: 1px solid #ccc; padding: 1rem; border-radius: 1rem;background: var(--blue_dark);color: white;}
.container3 h2 span { color:  var(--golden_cube);}
.sub-title{font-size:clamp(1.2rem, 3vw, 1.7rem );border-bottom:none;margin: 2.5rem 0 .5rem;font-weight: 600;}
.sub-title span{color: var(--red_dark);}
.container3 .sub-title h2{color: white;}
.container3 .card { background: white;color: var(--blue_dark); }
.card {
  display: flex;flex-wrap: wrap;flex-direction: column;border: 2px solid var(--blue_light); padding: 1rem .8rem; border-radius: 1rem;
  background:linear-gradient(166deg, #fffaf7 5%, transparent 30%); font-size: 1.1rem;text-align: justify;
}

.card h3 { color: var(--blue_dark); font-weight: 700; font-size: 140%; padding-bottom: .3rem; margin-bottom: .3rem; border-bottom: solid 1px var(--golden_cube);text-align: center; }
.card a{ color: var(--red_dark);text-decoration: underline;}
.card p{ /*text-align: left;*/}
.card>div{ margin: .6rem auto;}
.card-icon{display:block;width:70px;height:60px;object-fit:contain;margin:0 auto}
.info-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; }
.info-table th, .info-table td { border: 1px solid #ccc; padding: 15px; vertical-align: top; }
.info-table th { background: #f4f4f4; text-align: left; }
.highlight-text { color: #d00; font-weight: bold; }
        
/*師資*/
#Carousel{width:94%; margin:2rem auto}
.VueCarousel-slide{align-items:flex-start;justify-content:center;box-sizing:border-box;gap:20px;}
.VueCarousel-navigation-button{color: var(--blue_light)!important;}
.fade-enter-active, .fade-leave-active {transition: opacity .3s;}
.fade-enter, .fade-leave-to {opacity: 0;transition: opacity 0.15s;}
/* .carousel-container{position: relative;} */
/* .carousel-container{display:grid;grid-template-columns: repeat(5, 1fr);overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding-bottom:20px;scrollbar-width:none} 
.carousel-container::-webkit-scrollbar{display:none} */
.tacher{scroll-snap-align:start;background:linear-gradient(36deg,#ececec 0%,white 20%);padding:20px;border:1px solid #e5e7eb;border-radius:12px;text-align:center}
.tacher img{width: 150px;margin: auto;object-fit: scale-down;object-position: center;}
.subject{color:var(--blue_light);font-size:1.2em;font-weight:700;margin-bottom:10px}
.avatar{width:140px;height:160px;background:#eee;margin:0 auto 10px;border-radius:8px;object-fit:cover}
.name{font-size:1.1em;font-weight:700;margin-bottom:5px;color: var(--brown_light);}
.intro{color:#374151;margin-bottom:10px;height:4em}
.intro mark{background-color:var(--brown_light) ;color: #FFF;}
button{cursor:pointer;border:1px solid var(--blue_light);background:#fff;color:var(--blue_light);border-radius:4px;padding:5px 15px}
button:hover{background:var(--blue_light);color:#fff}
.tacher button~button{border:1px solid var(--red_dark);color:var(--red_dark);}
.tacher button~button:hover{background:var(--red_dark);color:#fff}
.details{display:none;margin-top:15px;text-align:left;border-top:1px dashed #ccc;padding-top:10px}
.details a{color:#059669}
.more{text-align: right;}

/*學員*/
.student{ background: white; padding: 1rem 3rem 1rem 1rem; border: 1px solid var(--blue_dark2-30); border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
.student a{color: var(--blue_dark);text-decoration: underline;margin-left: 0.4rem;}
.student strong{font-size: 120%;color: var(--blue_dark2);font-weight: 500;}
.student strong img{display: block;}
.step { color: var(--brown_light); font-weight: 500; font-size: clamp(1.1rem, 3vw, 1.3rem); font-family: "Rosario", sans-serif; display: block; margin-bottom: 5px; }
.quote { color: var(--blue_light); font-family: "LXGW WenKai TC", cursive; border-left: 3px solid var(--blue_dark); padding-left: 10px; margin-top: 10px;font-size: 1rem; }
.author { margin-top: 5px; text-align: right; }
.student strong,.step-icon{display: flex;flex-wrap: wrap; justify-content: center;align-items: center;margin: 0.5rem auto;}
.step-icon i{font-size: 48px;color: var(--brown_dark);line-height: 1.25;}
.wtite-title{font-size: 120%;color: var(--blue_dark2);font-weight: 500;}
.wtite-title span{display: inline-block;background: var(--blue_dark);color: white;padding: .2rem .5rem;font-size: 90%;}
.address_container{margin:1rem auto 0;display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:2rem;}
.adress a{display: inline-flex;margin: 0.2rem auto;}

/*方案*/
.plans-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
.plan-card { background: linear-gradient(36deg, #ececec 0%, white 20%); border: 1px solid #ccc; padding: 20px; border-radius: 8px; display: flex; flex-direction: column; }
.plan-header { font-weight: bold; font-size: 1.2em; margin-bottom: 10px; border-bottom: 2px solid #ddd; padding-bottom: 10px;color: var(--brown_dark); }
.plan-header.highlight { background-color: #8e8e6b; color: white; padding: 10px; border-radius: 4px; }
.plan-suitability { font-weight: bold; margin-bottom: 15px; color: #555; }
.feature-list { list-style: none; padding: 0; flex-grow: 1; }
.feature-list li { margin-bottom: 10px; display: flex; align-items: flex-start; }
.feature-list li::before { content: "☑"; margin-right: 8px; color: #333; }
.cta-btn { display: inline-block; background-color: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px; margin-top: 20px; text-align: center; }
.cta-banner h2{margin: auto;}

/*問答*/
.faq-container { margin: 0 auto; display: grid; grid-template-columns: repeat(1, 1fr); gap: 15px; }
.faq-item { border: 1px solid #ccc; border-radius: 8px; overflow: hidden; background: #fff; }
.faq-item a { color: #601b0f;}
.faq-header::after { content: '▼'; font-size: 0.8em; transition: transform 0.3s ease; }
.faq-item.active .faq-header::after { transform: rotate(180deg); }
.faq-header { font-size: 1.2rem; padding: 1rem; background: #f9f9f9; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.faq-content { font-size: 1.1rem; padding: 1rem; display: none; border-top: 1px solid #eee; }    
.faq-content b{ color: var(--blue_light);font-weight: 600; }    
.faq-item.active .faq-content { display: block; }
.faq-item.active .faq-header { background: #fff2e1; }

/*Call-to-Action*/
.cta-banner { background: #e67e22; color: white; padding: 40px 20px; text-align: center; margin-top: 50px;position: relative;overflow: hidden;z-index: 0; }
.cta-banner::after { content: ''; position: absolute; background: url("../images/1507059_linebg.png") no-repeat center center / 100% auto; width: 353px; height: 508px; top: -2rem; right: 0;opacity: 0.3;z-index: -1; }
.cta-banner h2 { color: white; font-size: 2rem; border-bottom: none; }
.cta-buttons { display: flex; font-size: 1.5rem; justify-content: center; gap: 20px; }
.cta-btn { background: var(--blue_light); color: white; padding: 12px 30px; text-decoration: none; font-weight: bold; border-radius: 5px; }
.cta-btn:hover { background: var(--blue_dark); }

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .main-hero{align-items: flex-end;}
  .main-hero::after{transform: translate(80px, 0);}
  .more{margin-right: 2rem;}
}

@media screen and (min-width: 0px) and (max-width: 991px) {
  .main-hero{flex-direction: column;text-align: center;clip-path: none;padding:10rem 1.2rem 1.5rem;gap: 1rem;align-items: normal;}
  .main-hero::before{background: linear-gradient(to bottom, white 15%, transparent 70%);top: 0;width: 100%;height: 100%;}
  .main-hero::after{width: 100%;height: 100%;opacity: .32;}
  .main_logo{left: 0;right: 0;margin: auto;display: flex;justify-content: center;align-items: center;}
  h1 span{display: block;}
  .hero-left{padding-right: 0;}
  .hero-right{justify-content: center;}
  .feature-item{flex-direction: column;}
  .feature-icon, .feature-content{flex: 1;}
}

@media (max-width: 767px) {
  .feature-grid{gap: 0.2rem;align-items: stretch;}
  .hero-left{padding-right: 0;}
  #Carousel{width: 80%;}
  .bgcolor2::before,.bgcolor2::after{display: none;}
  .grid-2, .grid-3, .grid-4 {grid-template-columns: 1fr;}
  .flex-5 .student{width: 100%;margin-bottom: auto;}
  .adress a{display: ruby;;}
  .cta-banner::after{opacity: 0.05;}
  .container,.container2{width: 92%;}
  .more{margin-right: 2rem;}
}

/*各大相容檢視*/
@media screen and (-webkit-min-device-pixel-ratio:0) { /*Webkit*/
}
@-moz-document url-prefix(){/*Firefox*/
}

@media \0screen\,screen\9 {/*IE 6 7 8*/
}

@media screen\0 {/*IE 8 9 10 11*/
}

@media print {
}