/* 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 */

:root {
    --pink: #e0416f;
    --deep_green: #31849b;
}

body{margin:0 auto;padding:0;font-family: '微軟正黑體', 'Noto Sans TC', sans-serif;}
#BodyContainer{margin:0 auto}
#BodyContentEvent,#event{width:100%}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.bgcolor1{background: linear-gradient(#0095b26f 10%, #c4e2d0 0%);background-size: 100% 2%;}
.bgcolor2{position: relative;z-index:0;}
.bgcolor2::before{opacity: 0.6;position: absolute;content: '';width: 100%;height: 100%;top: 0;left: 0;background: linear-gradient(to bottom,white 40% ,#edcc4a3f 70%);z-index: -1;  }
.bgcolor3{background: #fcecec;background: linear-gradient(#fffbea 12%, #fff1f1 0%);background-size: 100% .6%;}
/* .bgcolor4{background-color: #F6F6F6;}
.bgcolor5{background-color: #EBEBEB;} */
h1{font-size: 3rem;}
h2{font-size: 2rem;}
small{font-size: small}
mark{background: #fffd8a;padding:0 .25rem;}
.red{color:#d20000;}
.pink{color: var(--pink);}
.deep_green{color: var(--deep_green);}
.wrap_all{word-break: keep-all;overflow-wrap: break-word;-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;-webkit-text-size-adjust: 100%;}
.br{display: block;}
#event_master a:hover{left: 0;top: 0;}
.banner{text-align: center;}
.subtitle{font-size: 1.5rem;display: flex;justify-content: center}
.subtitle div{padding: 0 2%;}
.item{display: grid;justify-content: center}

#event_targets dl{z-index: 5;position: relative;padding: 1.5rem 2.5rem;background: #fcecec;margin: 2rem auto 0;border-radius: 1rem;box-shadow: 0 0 10px rgba(0,0,0,0.1);width: 86%;max-width: 1200px;font-size: 1.2rem;line-height: 1.7;}
#event_targets .info1_box dt{font-size: 1.55rem;font-weight: bold;color: var(--deep_green);}
#event_targets .info1_box dt:nth-of-type(2){color: var(--pink);margin-top: 0.6rem;}
#event_targets .info1_box{border: 2px solid var(--deep_green);}
.info1_box .cube{width: 100%;height: 12px;border-bottom: 1px dashed var(--deep_green);vertical-align: middle;margin: auto;display: inline-block;}
#event_targets .info2_box{border: 1px solid var(--pink);}
#event_targets dl span{color:brown}
.target_box_container{display: flex;justify-content: center;align-items: flex-start;flex-wrap: wrap;}
.target_box, .teacher_box{font-size: 1.35rem;display: flex;justify-content:left;align-items: flex-start;flex-wrap: wrap;width: 46%;}
:is(.target_box, .teacher_box) span{color: var(--pink);font-weight: bold;}
.info2_box dt{font-weight: 700;color: orange}
.target_box dt{text-align: center}

/*科目*/
.booklist{padding: 1.5rem 0;}
.books{background:#e1f3ea;}
.books tbody{background:#edfaf0;filter: drop-shadow(2px 2px 5px #0000003f);}
.books, .books th, .books td {border-collapse: collapse;text-align: center;padding: .25rem .5rem;font-size: 1.1rem;margin: 0 auto .6rem;}
.books th, .books td {border: solid thin var(--deep_green);}
.books_item{color: #fff;background: var(--deep_green);}
.books_item th{font-weight: bold;font-family: "微軟正黑體";padding: .25rem;letter-spacing: .2rem;}
.books td:nth-child(4){text-align: left;}
.books th:nth-child(1){width: 20%;}
.books th:nth-child(2){width: 20%;}
.books th:nth-child(3){width: 20%;}
.books th:nth-child(4){width: 40%;}
.books tr:nth-child(5),.books tr:nth-child(7),.books tr:nth-child(9){background:#ffffff;}
.books a{text-decoration: underline;}
caption{font-size: 2.45rem;text-align: center;padding:3rem 0 1rem;color: var(--pink);font-family: "華康新特明體","DFMingXBold-B5","DFMingBold-B5","DFMingMdium-B5";}
caption img{display: block;margin: auto;width: 70%;}

.remark{width: 90%;font-size: 1.05rem;padding:1.5rem 0 2rem;margin: auto;line-height: 2rem;}
.remark h2{width: fit-content;font-size: 1.5rem;font-weight: bold;color: var(--pink);background: #fff;border: 1px solid;padding: .2rem 2rem;border-radius: 1rem;margin: 0 0 .25rem;}
.remark a{display: inline-block;color: var(--deep_green);font-weight: bold;text-decoration: underline;}
.remark a:hover , .lec_box a:hover {color: var(--pink);}
.remark li span {display: block;text-indent:1rem;}
.price{font-size: 1.5rem;padding: 0 0 1rem;}
.price i{display: inline-block;margin: auto;width: 100%;text-align: center;animation: coming .8s ease-in infinite;}
@keyframes coming {
    0% {transform: translate(0%, 0%);}
    25% {transform: translate(0.3%, 0%);}
    50% {transform: translate(0%, 0%);}
    75% {transform: translate(0.3%, 0%);}
    100% {transform: translate(0%, 0%);}    
}
.price h3{font-size: 1.35rem;color: var(--pink);font-weight: bold;font-family: microsoft yahei;}
.price2{font-size: 1.2rem;display: inline-block;padding: .6rem 2rem;border-radius: 1rem;background: white;border: 1px solid var(--deep_green);color: var(--deep_green);margin: .6rem auto;}
.price b{color:#d20000;font-family: Verdana,"Microsoft JhengHei";padding: 0 .2rem;}
.buy_group{padding: 1.5rem 0 3.5rem;font-size: 1.3rem;font-weight: bold; border-top:1px dashed var(--deep_green);}
.buy_group a {display: inline-block;color: var(--pink);background: #fff;border: 1px solid;padding: .3rem 1.5rem ;margin: 0 .2rem;border-radius: 1rem;}
.buy_group a:hover {color: #fff;background:var(--pink);transition: .8s;}
.line{margin: 0 1%; }
.line a{display: inline-block;}
.buy i{padding: 0 .1rem;}

/*講座*/
.lec_title{font-size: 2.45rem;text-align: center;padding:3rem 0 1rem;color: var(--deep_green);font-family: "華康新特明體","DFMingXBold-B5","DFMingBold-B5","DFMingMdium-B5";}
.lec_title img{display: block;margin: auto;width: 50%;}
.lecture{display: grid;grid-template-columns: 1fr 1fr}
.lec_box{font-size: 1.2rem;border: 1px solid #ccc;background: linear-gradient(-45deg, #fffafa 10%, #fffefa 50%);filter: drop-shadow(2px 2px 3px #0000003f);margin: 0.5rem;padding: 2rem;border-radius: 1rem;/*position: relative;*/}
.lec_box dd:nth-last-child(1){text-align: center;}

/* 講座主題 */.lec_box dd:nth-child(4){font-weight:700;text-indent: -3.6rem;padding: 0 0 0 3.6rem;}
/* 講座精華內容 細節 */
.lec_box dd:nth-child(6){padding: 1rem 0;}
.lec_box dd:nth-child(6) ol li{padding: .2rem 0;}
.lec_box:nth-child(1) dd:nth-child(6) ol li , .lec_box:nth-child(2) dd:nth-child(6) ol li{text-indent: -1.3rem;padding: .2rem 0 .2rem 1.55rem;}
.lec_box:nth-child(3) dd:nth-child(6) ol li{text-indent: -2.5rem;padding: .2rem 0 .2rem 2.5rem;}

.lec_box .book{float: right;/* float-文繞圖效果 */display: block;width: 32%;padding: .2rem;/*position: absolute;top: 1.5rem;right: 1.5rem;*/}
.lec_box .book img{width: 100%;/*filter: drop-shadow(2px 2px 3px #0000002f);*/}
.lec_box a{color: var(--deep_green);font-weight: bold;text-decoration: underline;}
.box_offline { display: none; }
.register {font-size: 1.3rem;padding: 1.5rem 0 .5rem;}
.register a, .media_box dd:is(.red){
    font-weight: bold;text-decoration: none;color: var(--pink);background: #fff;
    border: 1px solid;padding: .3rem 2rem;border-radius: 1rem;display: inline-block;
}
.register a:hover{color: #fff;background:var(--pink);transition: .8s;}

.animation_scaleDraw{width: 24%;padding: 0 0 0 1rem;color: #d20000;animation: scaleDraw 8s ease-in-out infinite;-webkit-animation: scaleDraw 8s ease-in-out infinite;}

/*經驗談*/
.stu_title{font-size: 2.45rem;text-align: center;padding:3rem 0 1rem;color: var(--deep_green);font-family: "華康新特明體","DFMingXBold-B5","DFMingBold-B5","DFMingMdium-B5";}
.target_box_container .stu_title img{width: 100%;}
.stu_title img{display: block;margin: auto;width: 50%;}
.student dl{padding: 1rem 0;line-height: 1.6;}
.student dt{font-size: 1.3rem;color: var(--pink);font-weight: 700;}
.student dt span{color: var(--deep_green);}

/*試聽*/
.media_title{font-size: 2.45rem;text-align: center;padding:3rem 0 1rem;color: var(--deep_green);font-family: "華康新特明體","DFMingXBold-B5","DFMingBold-B5","DFMingMdium-B5";}
.media_title img{display: block;margin: auto;width: 50%;}
.media {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}
.media_box iframe {width: 100%;aspect-ratio: 16 / 9; /* 保持 16:9 比例 */}
.media_box{
    width: calc(100%/2 - 2rem);max-width: 480px;
    font-size: 1.2rem;border: 1px solid #ccc;background: linear-gradient(-45deg, #fffafa 10%, #fffefa 50%);
    filter: drop-shadow(2px 2px 3px #0000003f);margin: 0.5rem auto;
    padding: 2rem;border-radius: 1rem;/*text-align: center;display: flex*/;
    /*justify-content: center;align-items: center;*/flex-wrap: wrap;
}
.media_box dt{font-size: clamp(1.2rem, 2vw, 1.5rem);color: steelblue;font-weight: 700;    width: 86%;
    margin-left: 4rem;
    text-indent: -4rem;}
.media_box dd:is(.red) { margin: 0.5rem auto;width: 40%;}
.media_box dd { display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;width: 100%;padding: 0.2rem 0;line-height: 1.7;}
.media_box dd a.line { background: #50b337;color: white;padding: 0 1rem;border-radius: 8px;width: 80%;display: flex;justify-content: center;align-items: center;margin-bottom: 0.6rem;}
.media{display: flex;flex-wrap: wrap;justify-content: center;/*align-items: center;*/}
.media_box b{font-size: 1.3rem;font-weight: 700;}
.media_box span{color: var(--pink);display: block;}
.media_box iframe{width: 400px;object-fit: cover;border-radius: 8px;margin: .8rem auto 0;min-width: -webkit-fill-available;}

/* event_menu */
.event_menu{
	width: 100%;text-align: center;position: fixed;
    font-size: 1.3rem;margin: auto;/*top: 0;*/    bottom: 0;
    left: 0;right: 0;z-index: 999;padding: 1% 0;
	border-radius: 0 0 10px 16px;
    background: orange;color: #ffffff;
    /*display: none;opacity: 0;*/
}
.event_menu_nav-fixed{ opacity: 1;     bottom: 0;/*top: 0*/;width: 100%;padding:1% 0;border-radius: inherit;/*transition: 1.5s ease-in;*/display: block;}
.menuflex{width: 90%;justify-content: space-around;margin: auto;}
.menuflex a{padding: 0 1.5rem;color: #ffffff;border-left: solid 2px rgb(255, 255, 255);/*transition: 0.25s ease-in;*/}
.menuflex a:hover { top: 0;left: 0;letter-spacing: 0.05rem; color: #fdf497;border-left: solid 2px #fdf497;padding-left: 1rem;}
.menuflex .fab{font-size: 1.8rem;}

/*ask*/
#askarea SELECT {color: black;background-color: #FFFFFF;}
#askarea_out{/*background-color: #eb543f;*/background: #f7f4ef;display: none;}
#askarea{width: 1200px;margin: 0 auto;padding: 1rem 5rem;text-align: left;}
#askarea .asktitle {color:var(--light_brown);text-align: center;font-size: 1.9rem;margin: 17px;}
#formlist SELECT,#formlist input{border-radius: 0.3rem;background-color: #FFFFFF;border:#FFFFFF;padding: 0.25rem;}
#askarea SELECT{background-color: #FFFFFF;border: #FFFFFF;padding: 0.5%;margin:auto 1% 1% auto;}
#formlist label{display: block;margin: 1rem 0;color: #4a3f3b;font-size: 1.2rem;}
#formlist img{display: inline-block;}
#formlist input{color: #585858;}
#askarea input[type="submit"],#askarea input[type="reset"]{padding: 0.3rem 0.8rem;margin-top: 2%;border: 1px #FFFFFF solid;box-shadow: 1px 2px 5px #0000003f;color: #FFFFFF!important;}
#askarea input[type="submit"]:hover ,#askarea input[type="reset"]:hover {box-shadow: 1px 2px 1px #0000000f;}
#askarea input[type="submit"]{background:#926710;}
#askarea input[type="reset"]{background-color:#9f9f9f;}
label > select {margin: 0 1rem;}
#formlist{justify-content: space-around;}
#askarea textarea[name="sContent"]{width:98%;height:300px;font-size: 1.15em;border: 7px #ffcac3 solid;padding: 10px}
#askarea input[type="text"]{width:32%;}
#askarea input[name="sContent"]{width: 2%;}
#askcontent{color:#FFFFFF;line-height: 2.5rem;}

@media (max-width: 767px){
    .student{margin: 0 1rem;}
    .student dl{padding: 0 0 1rem;}
    .media{flex-direction: column;align-items: center;}
    .media_box{width: 96%;}
    .media_box dd:is(.red){width: fit-content;}
    .media_box iframe{width: 100%;}
    .teacher_box dd{width: inherit;}
}

@keyframes scaleDraw {
    0% {transform: scale(1);}
    25% {transform: scale(1.05);color: #000;background: #fffd8a;}
    50% {transform: scale(1);}
    75% {transform: scale(1.05);background: #fffd8a;}
}

/*各大相容檢視*/
@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 {
}