@import url("../../../icon_new_6.2/css/all.min.css");
/*DIY*/
.adlink{background-image: linear-gradient( 180deg, #121540 5%,#264588 50%, #2e7db5 100%);
padding: 0.5rem;border-radius: 0.5rem;}
.adlink,.adlink a{color: white;}
.adlink dt{color:  #eb4907;text-align: center;}
.adlink dd{margin: 0.25rem 0;}
.adlink dd:hover a,.adlink:hover dd{color: #4e4e4e;}
.grade {padding: 0% 0 0%;position: relative;}
.course_title,.feature_title,.price_title,.photolist_title,.media_title{font-size: 3.5rem;margin: 1rem 0;font-family: DFMingXBold-B5, MStiffHeiHK, sans-serif;filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.7));line-height: 4rem;}
.grade dt{color: #ffffff;margin: 0% 0 2% 11%;padding: 2% 0 2% 3%;font-size: 2.6em;line-height: 1.5em;background-image: linear-gradient( 180deg, #7b747c 60%,#49444a 95%);}

.ribbon{width: 100px;padding: 10px 10px;position: absolute;text-align: center;border-top-left-radius: 6px;position: absolute;left: 1%;top: -6px;background-color:#CA0404;color: white;font-size: 3.0em;font-weight: bold;}
.ribbon:before, .ribbon:after{content: "";position: absolute;}
.ribbon:before {height: 0;width: 0;right: -5.5px;top: 0.1px;border-bottom: 6px solid #C02031;border-right: 6px solid transparent;}
.ribbon:after {height: 0;width: 0;bottom: -15px;left: 0;border-left: 50px solid #CA0404;border-right: 50px solid #CA0404;border-bottom: 15px solid transparent;}
@-webkit-keyframes flow {
	0% { left:-20px;opacity: 0;}
	50% {left:30px;opacity: 0.3;}
    100%{ left:70px;opacity: 0;}
}
@keyframes flow {
	0% { left:-20px;opacity: 0;}
	50% {left:30px;opacity: 0.3;}
    100%{ left:70px;opacity: 0;}
}
.glow{ background: rgb(255,255,255); width:30px; height:140%; z-index:2;top: 0px;position:absolute;
    -webkit-animation: flow 1.5s linear infinite;
    -moz-animation: flow 1.5s linear infinite;
    -webkit-transform: skew(20deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ border-left:1px solid #fff;
}
.gradefloat{max-width: 90%;margin: 0 auto;}
.gradefloat img{max-width: 282px;max-height: 190px;}
.gradefloat dd{font-size: 1.5rem;}

.grade dd{font-size:1.3rem;word-break: break-word;color: #303030;line-height: 1.8em;border-bottom: dashed 1px #e9887b;}
.grade dd strong{font-size:1.5rem;color: #ce1405;background-color: white;padding: 0.1em 0.8em;border-radius:1.0em;margin: 0.2em 0.5em 0.2em 0;display: inline-block;font-family: DFMingXBold-B5, MStiffHeiHK, sans-serif; }
.grade_more{font-size:1.1rem;color: #303030;line-height: 1.8em;padding: 0% 0 2%;}
.circle{display: flex;justify-content: center;align-items: center;margin: 0 auto 3%;}
.feature_group{padding: 0.5rem;}
.feature_content{text-align: center;color: #f4c744;font-size: 1.3rem;margin: 0 2% 5%;border-right: dotted 1px;padding-right: 3%;}
.feature_content a{text-decoration: underline;}
.price_list,.price_list th,.price_list td{border:1px #9b9b9b solid;border-collapse: collapse;}
.price_list th{font-size: 1.4rem;}
.price_list th:nth-child(1){background-color: #5d7446;color: white;padding: 0.2em;}
.price_list th:nth-child(2){background-color: #a44887;color: white;padding: 0.2em;}
.pice_listOut{overflow-x:auto;}
.price_list .imp{background-color: yellow;color: #000;font-size: inherit;font-weight: inherit;}
.price_list td{vertical-align: sub;font-size: 1.3rem;}
.price_list td .f1{color: #5d7446;text-align: center;}
.price_list td .f2{color: #a44887;}
.price_list{width: ;background-color: white;font-size: 1.1em;margin: ;}
.price_list tr:nth-child(n+3) td{text-align: left;padding: 0.5% 2%;}
.price_list td b{font-size:2.0rem;color: #eb770b;font-family: DFMingXBold-B5, MStiffHeiHK, sans-serif;}
.price_list td strong{font-size:1.3rem;color: #227ec7;font-family: DFMingXBold-B5, MStiffHeiHK, sans-serif;}
.sale{font-size:1.4rem;color: #e52f17;font-weight: bold;}
.media,.photolist{margin: 0 0 5%;}
.media_kind {padding: 0.125rem 0.5rem;color: #ffffff;font-size: 1.3em;background: #1c5abd;
    background: -moz-linear-gradient(left, #1c5abd 0%, #28a9e2 100%);
    background: -webkit-linear-gradient(left, #1c5abd 0%,#28a9e2 100%);
    background: linear-gradient(to right, #1c5abd 0%,#28a9e2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c5abd', endColorstr='#28a9e2',GradientType=1 );
}
.ps{margin: 1rem 0;text-align: center;font-size: 1.0em;color: #000;}
.ps a{color: #525252;text-decoration: underline;}
.media_content dt{color: #1c5abd;font-size: 1.7em;margin-top: 0.2em;}
.media_content dt span{color: #ea6e0c;border-left: dotted 1px;margin: 0.2em 0.5em;padding-left: 0.5em;}
.media_content dd{color: #383838;font-size: 1.1em;line-height: 1.7em;}
.media_group{margin: 1rem 0;text-align: left;}
small{font-size: 0.8em;}
.
.course_out{padding: 1rem;}
.course_content dt{font-size: 1.5rem;color: #eb6e11;}
.course_content dd{font-size: 1.2rem;text-indent: -0.9em;}
.text_indent {text-indent: 0em!important;}
/*.course_content dd::before {content: "．";}*/
.course_content dd a{color: #eb6e11;text-decoration: underline;}
.course_content{margin: 0 0.1rem;width: calc(100% / 3.1);color: #373737;padding: 1.5rem 1.5rem 1.5rem 2.5rem;text-align: left;background-image: linear-gradient(180deg, rgb(179 179 179 / 33%) 20%, rgb(215 215 215 / 9%) 100%);}
/*.course_content:nth-child(1){background-image: linear-gradient(180deg, #234590 10%, #0297d8 90%)}
.course_content:nth-child(2){background-image: linear-gradient(180deg, #00763f 10%, #8bb024 90%);}
.course_content:nth-child(3){background-image: linear-gradient(180deg, #e72518 10%, #f0b400 90%)}*/
.course_note {font-size: 1.2em;padding: 1% ;}
.course_note span,.offer_title span{color:#e52f17;}
.offer_title{font-size: 2.4rem;font-weight: 900;color: #169ba9;margin: 1rem 0;}
.border_out{border: 4px solid #ffbc52;border-radius: 6px solid rgb(249 180 5);}
.offer_content{font-size: 1.7rem;word-break:keep-all;padding: 1.5rem;margin: 1rem 0;background-color: #ffffff80;}
.offer_content span{color: #ffffff;padding: 0 0.5rem;margin: 0 0.5rem;transform: skewX(-18deg);display: inline-block;background-image: linear-gradient(90deg, #e7570f 10%, #f0b400 90%);}
.date_list dd{font-size: 1.8rem;text-align: center;}
.date_list dd a{text-decoration: underline;}
.date_list span{color: #13a7b3;}
.lec_out{padding: 2rem;background-image: linear-gradient(180deg, rgb(255 196 104 / 87%) 20%, rgb(255 225 156 / 32%) 100%);margin: 2% 0 4%;}
.lecture{text-align: center;}
.lecture dt{text-align: center;font-size: 2.5rem;font-weight: 900;color: #eb4907;}
.lecture dd{font-size: 1.5rem;padding: 0.5rem;border-bottom: solid 1px #ffab2e;}
.lecture dd:last-child{font-size: 1.2rem;padding: 0.5rem;border-bottom: none;text-align: center;}
.lecture dd b{color:#169ba9;}
#app{margin:0rem auto}
.offer_content a{color: #e8630d;text-decoration: underline;}
.offer_content a:hover{text-decoration: none;}
.lecture a{background: #169ba9;color: white;padding: 0 0.5rem;margin: 0 0.5rem;display: inline-block;}
.VueCarousel-slide{height:190px;color:#fff;display:flex;align-items:center;justify-content:center;border-right:1px solid white;box-sizing:border-box;font-size:1.5rem;text-align:center}
.text-white{color:white;}
.grade_other_title {animation: myfirst 1.5s infinite alternate ease-in-out;
    font-size: 3.4rem;
    padding: 0.5rem 0;
    color: #fff;
    font-family: 'Noto Serif TC', serif;
    font-weight: 900;
    text-align: center;
    position: relative;
    background-image: linear-gradient(90deg, #b7280200 0%, #b72802 8%, #e95910 50%, #ee9905 92%, #ee990500 100%);
}
@keyframes myfirst{
    0%{opacity:1}
    15%{opacity:0}
    25%{opacity:1}
    100%{opacity:1}
}
.grade_setlist {
    font-size: 2.5rem;
    padding-bottom: 3%;
    font-family: 'Noto Sans TC';
    font-weight: normal;
    padding: 1% 0;
    border-bottom: dotted #eb4907;
}
.grade_setlist li {
    margin: 0.5rem 1rem;
    color: #4e4e4e;
}
.grade_setlist strong {
    color: #eb4907;
}
.grade_group {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 900;
    margin: 0rem 0 1rem;
}
.grade_set_ant_list li {
    width: calc(100% / 6);
    font-size: 2rem;
    color: #1568ad;
    font-weight: normal;
}
button.VueCarousel-navigation-button.VueCarousel-navigation-prev {
    left: 0%;
}
button.VueCarousel-navigation-button.VueCarousel-navigation-next {
    left: 95%;
}

body *{font-family: 'Noto Sans TC', sans-serif;font-weight: ;}
#event_master *{
    line-height: ;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

/*20220803*/ 
.feaNew {transform: skewX(-15deg);height: auto;margin-bottom: 2%;}
.feaNew dl > dt{font-weight: 900;}
.feaNew dl:nth-child(1) dt{font-size: 3rem;padding-top: %;font-weight: normal;}  
.feaNew dl{width: calc(100%/4);height: 110px;align-items: center;} 
.feaNew dl:nth-child(n+2){color: white;padding: 0 1%;}
.feaNew dl:nth-child(n+2) dt{font-size: 1.6rem;letter-spacing: 0.2em;}
.feaNew dl:nth-child(1){background-image: linear-gradient( 180deg, rgb(91 91 91 / 75%) 2%, rgb(215 215 215 / 70%)40%);}
.feaNew dl:nth-child(2){background-image: linear-gradient(180deg, #093a64 5%, #2363ab 50%, #419ecd 100%);}
.feaNew dl:nth-child(3){background-image: linear-gradient(180deg, #b72802 5%, #e95910 50%, #ee9905 100%);}
.feaNew dl:nth-child(4){background-image: linear-gradient(180deg, #137489 5%, #1894a3 50%, #0bc4ca 100%);}
.feaNew dd{font-size: 1.5rem;letter-spacing: 0.05em;}
.feaNew dt span{display: block;}
.gradefloat dl{font-weight:300;max-width:282px;max-height:190px;width:282px;height:190px;padding:3.6rem 0 0;border:1px solid #9b949d;position:relative}
.gradefloat dt{font-size:2.15rem;margin:auto;line-height:2.8rem}
.gradefloat dd{width:fit-content;font-size:2.25rem;color:#ce1405;border-bottom:1px dotted;margin:auto}
.gradefloat dl::before{content:'';width:55px;height:40px;position:absolute;top:0;left:50%;transform:translate(-50%,0);background:linear-gradient(0deg,#989898 30%,#ffffff 100%);clip-path:polygon(100% 0,0 0,50% 100%)}
.media_title{font-size:3.5rem;margin:1rem 0;font-family:DFMingXBold-B5,MStiffHeiHK,sans-serif;line-height:3.5rem}
.media_group{margin:0.5rem 0;text-align:left}
.media_kind{padding:.125rem .5rem;color:#ffffff;font-size:1.3em;background:#1c5abd;background:-moz-linear-gradient(left,#1c5abd 0%,#28a9e2 100%);background:-webkit-linear-gradient(left,#1c5abd 0%,#28a9e2 100%);background:linear-gradient(to right,#1c5abd 0%,#28a9e2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c5abd',endColorstr='#28a9e2',GradientType=1)}
.media_content dt{color:#2b51a8;font-size:1.7em;margin-top:.2em}
.media_content dt span{color:#ea6e0c;border-left:dotted 1px;margin:.2em .5em;padding-left:.5em}
.media_content dd{color:#383838;font-size:1.1em;line-height:1.7em}
.media_content a{color:#2b51a8;text-decoration: underline;}
/*DIV END*/
.bg_padding{padding:1%;}
.bgcolor0{background: url(../images/1107036_01.png) no-repeat center;background-size: cover;}
.bgcolor1{background: linear-gradient(to right, #e62f17 0%,#f0b400 100%);}
.bgcolor2{background: linear-gradient(to right, #145ca3 0%,#0a8ccf 100%);}
.bgcolor3{background: linear-gradient(to right, #00793e 0%,#82ab28 100%);}
.bgcolor4{background: linear-gradient(to right, #ec8d06 0%,#ffcf3f 100%);}
.bgcolor5{background: url(../images/1105018_bg.png) no-repeat center fixed;}
.fcolor1{color: #FFF;}
.fcolor2{filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.2));color: #eb4907;}
.fcolor3{color: #FFF;}
.bgcolor6{
    background:  #fff;
}
/*所有元素漸變0.5秒*/*{transition: all .5s;}

/*各大相容檢視*/
@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 {
}

/*Back to top button */
#back-top{position:fixed;bottom:5rem;margin-left:-150px;right:1%;z-index:99}#back-top a{width:50px;height:50px;border-radius:50%;display:block;text-align:center;font:11px/100% Arial,Helvetica,sans-serif;text-transform:uppercase;text-decoration:none;color:#bbb;transition:1s}#back-top a:hover{color:#000}#back-top span{width:50px;height:50px;display:block;margin-bottom:7px;background:rgba(99,99,99,0.74) url(../images/up-arrow.png) no-repeat center center;border-radius:50%;transition:1s}#back-top a:hover span{background-color:#777}

/*ask*/
#askarea SELECT {color: black;background-color: white;}
#askarea_out{background-color: #c1b9b6;}
#askarea{width: 1200px;margin: 0 auto;padding: 1rem 5rem;text-align: left;}
#askarea .asktitle{color: white;text-align: center;font-size: 1.4rem;}
#formlist SELECT,#formlist input{border-radius: 0.3rem;background-color: #FFF;border: #FFF;padding: 0.25rem;}
#askarea SELECT{background-color: #FFF;border: #FFF;padding: 0.5%;margin:auto 1% 1% auto;}
#formlist label{display: block;margin: 1rem 0;color: white;font-size: 1.2rem;}
#formlist img{display: inline-block;}
#formlist input{color: #A1A1A1;}
#askarea input[type="submit"],#askarea input[type="reset"]{padding: 0.5em;margin-top: 2%;border: 2px #fff solid;color: #ffffff !important;}
#askarea input[type="submit"]{background-color: #e52f17;}
#askarea input[type="reset"]{background-color: #8d9297}
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;}
#askarea input[type="text"]{width:32%;}
#askcontent{color:white;line-height: 2.5rem;}

@media all and (min-width: 1px) and (max-width: 1200px){
    
    .course_content{width: calc(100%/1);}
    .grade{padding: 0.5rem}
    /* .grade dd{word-break:break-all;word-wrap:break-word; } */
	.price_list{width:;margin: 0 auto;}
    .price_list td {
        font-size: 1.1rem;
    }
/*ask*/
#askarea{width: 100%;padding: 0.8rem;}
#askarea .asktitle{font-size: 1.1rem;}
#askarea .asktitle > p{line-height: 2.2rem;}
#formlist{margin: 0 auto;}
#askarea input[type="text"]{width:100%;}
#askarea input[type="checkbox"]{width: initial;}
#formlist label{font-size: 1.0rem;}
#formlist input[name="sContent"],#formlist label,#formlist SELECT,#formlist input{margin: 0.25rem 0;}
#formlist input[type="submit"],#formlist input[type="reset"]{width: calc(100%/4.5);}
	}
@media (max-width: 1199px) and (min-width: 768px){
 .grade dt {margin: 1% 0 2% 17%;}
}

@media (max-width: 767px) {
	.feaNew dl {
    height: auto;
}
	.feaNew dt span{display: contents;}
    .grade_set_ant_list li {
        width: calc(100% / 2);
        text-align: center;
        font-size: 1.8rem;
    }
    .grade_other_title {
        font-size: 1.7rem;
        background-color: #d13e26;
        padding: 0.5rem;
        word-break: keep-all;
        word-wrap: break-word;
    }
    .grade_setlist {
        font-size: 1.7rem;
    }
    .grade_setlist li {
        margin: 0.3rem;
    }
	.feaNew {transform: skewX(0deg);}
	.ribbon {width: 70px;}
	.ribbon:after {border-left: 35px solid #CA0404;border-right: 35px solid #CA0404;}
.grade dt {margin: 1% 0 2% 18%;font-size: 1.6em;}
	.course_title,.feature_title, .price_title, .photolist_title, .media_title {font-size: 2.3rem;text-align: center;line-height: 3rem;}
	.feature_content {border-right: dotted 0px;
}
	.offer_title {font-size: 1.5rem;}
	.offer_content {font-size: 1.3rem;}
	.lecture dt {font-size: 1.8rem;}
}

