﻿/* css reset 歸0 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,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%;line-height:1.5em}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
/* remember to define focus styles! */
:focus { outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* css reset 歸0 end */
body *{font-family: 'Noto Sans TC', sans-serif;}
#BodyContainer{background-color: #e0eefb;}
a{text-decoration: underline;}
a:hover{text-decoration: none;}
ul,li,h1,h2,h3,dd,dl,p{margin:0;padding:0;}
/* ul,li,ol{list-style-type:none;} */
.bg_padding{padding:1%;}
.bgcolor1{/*background-color: #fff8e7;*/background-color: #ffeff2;}
.bgcolor2{background-color: #fff;}
.bgcolor3{background-color: #EBEBEB;}
.bgcolor4{background-color: #F6F6F6;}
.bgcolor5{background-color: #EBEBEB;}
/*所有元素漸變0.5秒*/
*{transition: all .1s;}

#event_master *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

/*DIY--設計可增加用樣式*/

:root{
    --orange_gradient:linear-gradient(-2deg,#ff5e01 30%,#ff7504 60%,#fe8f00 70%);
    --blue_gradient:linear-gradient(-2deg,#014471 30%,#0c5c7f 60%,#1a668d 70%);
    --orange:#ff6002;
    --blue:#0c5c7f;
    --red:#db2200;

    --font_MicrosoftYaHei:"Microsoft YaHei";
}

.orange{color:var(--orange);}
.blue{color:var(--blue);}
.red{color:var(--red);}
mark{background: #fff7d0;padding: 0 .5rem;}
b, strong {font-weight: bold;font-family: var(--font_MicrosoftYaHei);}
small{font-size: smaller;}
.larger{font-size: larger;padding: 0 .1rem;}

#event_third,#event_fifth {border-top: 4px solid #db22000f;}
.banner{width: 100%;}
.banner img{width: 100%;vertical-align: middle;}
.banner_m{display: none;}

.title{width: 95%;font-size: 3.2rem;margin: 2.5rem auto 1.5rem;line-height: 3.8rem;-webkit-background-clip: text;color: transparent;background-image: var(--blue_gradient);font-weight: bold;font-family: "CHei3HK","MStiffHeiHK","Microsoft YaHei";position: relative;left: 0;top: 0;right: 0;bottom: 0;word-break:keep-all;overflow-wrap: break-word;-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;-webkit-text-size-adjust: 100%;}
.title::after{content: '';width: 300px;height: 30px;position: absolute;background: url('../image/1208046_line.png') no-repeat bottom / 100%;}
.title1::after{bottom: -15%;left: 24%;}
.title2::after{bottom: -20%;left: 48%;width: 415px;}
.title3::after{bottom: -15%;left: 16%;width: 315px;}
.link_btn{display: flex;justify-content: center;flex-wrap:wrap}
.link_btn div{/*border: 3px solid #d6dedf;color: var(--blue);background: #fffc;*/background: linear-gradient(180deg,#fffc 20%, #fed2a34f 100%); text-shadow: 1px 1px 1px #0000001f;box-shadow: 1px 1px 2px #0000001f;padding: .2rem 1.2rem;margin:1rem 1.5rem 3rem;border-radius: 2rem;font-size: 1.7rem;border: 2px solid #db22315f;color: #db2200;}
.link_btn div:hover{position: relative;top: 1px;left: 1px;color:#fff;border: 2px solid #fff1b0;background: var(--red);    background: var(--orange_gradient);}

.crucial ol{text-align: justify;/*list-style-type:decimal;*/}
.decimal{font-size: smaller;background-color: var(--blue);color: #fff;border-radius: 50rem;padding: 0 .6rem .15rem;margin: .2rem .5rem .2rem 0;}
.crucial ol li{border-bottom: 1px dashed #fdc47d;padding: 0.3rem 0;margin: auto;}
.crucial .detail{display: flex;justify-content: center;font-size: 1.5rem;}
.crucial .time{display: block;font-size: 1.3rem;font-weight: 700;line-height: 2.5rem;margin-left: 4em;text-indent: -2em;}
.crucial .photo img{width: calc(80%/3);margin: 1rem auto 0;border: 3px solid #d6dedf;}
.essential{display: flex;justify-content: center;flex-wrap: wrap;margin: 1rem auto 0;}
.essential .video{width: 36%;border: solid 6px #fdc47d;border-radius: 30px;margin-left:2rem;}
/* .crucial .photo{display: flex;flex-direction: column;width: 30%;}
.crucial .photo img{border: 3px solid #d6dedf;margin-bottom: .35rem;} */
iframe{width:100%;height:auto;aspect-ratio:9 / 16;}

.billboard {display: flex;justify-content: center;padding: 0 0 0.5rem;}
.billboard ul{text-align: justify;font-size: 1.5rem;}
.billboard ul li{padding: .2rem;border-bottom: 1px dashed #fdc47d;padding: 0.3rem 0;}

.experience .content{text-align: justify;display: flex;width: 80%;margin:0 auto .5rem;flex-wrap: wrap;justify-content: space-around;}
.experience .content dl{padding: 0.25rem;width: calc(100%/2 - 50px);}
.content .name{color: var(--orange);font-size: 1.45rem; text-align: center;line-height: 2.5rem;}
.content .pass_exam{/*color: #fff;background: var(--orange_gradient);padding: 0 0.5rem 0.1rem;margin: 0 0.5rem;border-radius: 2rem;*/display: block;color: #fff;font-size: x-large;font-weight: bold;background: var(--orange_gradient);padding: 0 0.5rem 0.1rem;margin: 0 auto;border-radius: 1.5rem 1.5rem 0 0;}
.content .stu_name{color: var(--blue);font-size: larger;line-height: 3rem;}
.content .stu_name , .experience .content dl dd a{text-decoration: underline;}
.content .name a:hover , .content .stu_name:hover , .experience .content dl dd a:hover{text-decoration:none;}
.experience .content dl dd{height: 240px;font-size: 1.15rem;padding: .5rem .8rem 1rem;border-bottom: 2px #fe8f00 solid;border-radius: 0 0 1.3rem 1.3rem;border-top: 1px #fdc47d dotted;}
.experience .content a{color: var(--orange);}

.sale dl{margin: auto;padding: 1.5rem;color: var(--red);}
.sale dt{font-size: 3.5rem;font-family: "CHei3HK","MStiffHeiHK","Microsoft YaHei";-webkit-background-clip: text;color: transparent;background-image: var(--orange_gradient);font-weight: bold;}
.sale dd{font-size: 2rem;margin: 0 auto .5rem;}

.videobox { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.videobox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
iframe { border-radius: 25px; }
.video_container { margin: 2rem 7rem; border-radius: 30px; border: solid 8px #fdc47d; }

.main2 { background: rgba(128, 128, 128, 0.514); height: 100vh; width: 100%; position: fixed; top: 0; left: 0; z-index: 99; }
.main .hit_box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }
.question_number{margin-bottom: 1rem;}
.question_content{text-indent:-2em;margin-left:2em;text-align:justify;font-size: 1.2rem;}
.topic{padding: 1rem;}
.hit_box p { background-color: #FF7D01; color: #FFF;padding: 0.6rem 0; text-align: center; font-size: 1.5rem;}
.main .close { height: 40px; width: 40px; background-color: #fff; text-align: center; line-height: 40px; position: absolute; right: 20px; top: 10px; cursor: pointer;border-radius: 50%;font-weight: 900;font-size: 1.5rem;}
.btn_main { text-align: center; }
.topic{border: #000 solid 1px;padding-top: 0.5rem;}
.airimage { padding: 0.5rem 1rem; background-color: #FFF7D0; color: var(--red); border: none; cursor: pointer;margin-top: 1rem;font-size: 1.2rem;}
#app { width: 75%; margin: 2rem auto }
button.VueCarousel-navigation-button.VueCarousel-navigation-prev { left: 0%; }
button.VueCarousel-navigation-button.VueCarousel-navigation-next { left: 99%; }

/*各大相容檢視*/
@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 {
}

/*站內原有樣式*/
body{margin: 0;padding: 0;}
#BodyContent{width:1200px;padding:0;margin:0 auto;}
#BodyContainer_event{width:100%;margin:0;}
#BodyHeader_event_rwd,#topli{display:none;}

/*資料集中1200px寬外框*/
#event_master,#event_sec,#event_third,#event_fourth,#event_fifth{margin:0 auto;display:inline-block;width:100%;padding:0;text-align: center;font-size: 1.4rem;}
#Master_title{display:block;}/*主圖位置ID*/

/*瀏覽器相容性通知*/
#noie{color: #FFF;width: 100%;height:60px;text-align: center;border: 1px solid #006699;	background-color: #3399CC;_z-index: 9999;z-index: 9999;	position:fixed; _top:expression(documentElement.scrollTop+"px");
    /*讓選單覆蓋內容不會隨著捲軸滑動而消失專用*/
left: 0;top: 0;}
#noie a{color: #FC0;}
.hottxt{ color: #ffd942; font-size: 13px; }

/* bodyHeader */
#BodyHeader_rwd,#Bodymenunav{display: none;}
#BodyHeader_event,#header-share {background-color: #FFF;}
#BodyHeader_event a,#BodyHeader_event #header-share{font-size: 1.1em;}
#BodyHeader_event #header-share {margin:0 auto;	background-color: #FFF;}	
#BodyHeader_event #header-share img {margin-bottom: 5px;display: inline;}
#header-share a {color: #333;}
#header-share a:hover {color: #666;/*position: relative;top: 2px;bottom: 2px;*/}

/*ask*/
#askarea SELECT {color: black;background-color: white;}
#askarea_out{background:#ffffffbd;border-radius: 0 0 2rem 2rem;border-top: 5px solid #fff;}
#askarea{width: auto;margin: 0 auto;padding: 1rem 5rem;text-align: left;}
#askarea .asktitle{color: rgb(0, 0, 0);text-align: center;font-size: 1.6rem;padding: 1rem 0 0;}
#formlist p {margin: .6rem auto;color: #000;}
#formlist SELECT,#formlist input{border-radius: 0.3rem;background-color: #FFF;border: #FFF;padding: 0.25rem;}
#formlist input[name="sContent"]{width:80%;}
#formlist label{display: block;margin: 1rem 0;color: rgb(0, 0, 0);font-size: 1.2rem;}
#formlist img{display: inline-block;}
#formlist input{color: #A1A1A1;}
#formlist input[type="submit"],#formlist input[type="reset"]{color: rgb(0, 0, 0);}
label > select {margin: 0 1rem;}
#formlist{justify-content: space-around;}
#formlist SELECT, #formlist input {border: 1px #e8e5dc solid !important;}
#formlist {padding: 0 0 1.5%;}


/* Footer */
#BodyFooter_rwd,#footer_inline ul,#footer_inline ul li,#footer_address,#footer_address ul,#footer_address ul li{width:100%;}
#BodyFooter_rwd{float: left;background-color:#FFF;}
#BodyFooter_rwd a:hover{text-decoration: none;}
#BodyFooter_rwd #footer_line {width: 90%;height: auto;margin:1% 5%;display: block;float: left;text-align: center;border-top: thin solid #999;}
#BodyFooter_rwd #footer_inline a {color: #000;font-size:1em;}
#BodyFooter_rwd #footer_inline ul{float: left;padding:0;margin:3% auto 0% auto;}
#BodyFooter_rwd #footer_inline ul li{display: inline;line-height: 2em;font-size: 1em;	clear: both;	margin-right: 0.5em;}
#BodyFooter_rwd #footer_inline ul li img{width:10%;height:auto;vertical-align: middle;display: inline;}
#BodyFooter_rwd #footer_address{margin: 0% auto auto auto;text-align: center;}
#BodyFooter_rwd #footer_address a{color:#000;}
#BodyFooter_rwd #footer_address ul{padding:0;margin-bottom: 1%;text-align: center;}
#BodyFooter_rwd #footer_address ul li{margin-right:0;line-height: 2em;text-align: center;font-size: 1em;	list-style-type: none;	display:inline-block;}
/* Footer end */


@media all and (min-width: 1px) and (max-width: 1200px){

    /* 新增 */
    .block_m{display: block;}

    .title {font-size: 2.8rem;margin: 2.5rem auto 0.5rem;line-height: 3.2rem;}
    .title::after{display: none;}
    /* .crucial .photo img {width: calc(100%/3 - 2%);} */
    .detail .block_m{padding:0 0 0 2.3rem;}
    .billboard .block_m{line-height: 2.8rem;border-top: ;}
    .experience .content {display: flex;flex-wrap: wrap;}
    .experience .content dl {width: 45%;margin: 0 0.6rem;}
    .experience .content dl dd{height: auto;}
    .sale dt {font-size: 3.1rem;}
    .video_container{margin: 1rem 0.5rem;border: solid 6px #fdc47d;}
    .main .hit_box{width: 100%;}
    .hit_box p{font-size: 1rem;padding: 0.2rem 0;}
    #app { margin: 0.5rem auto; }
/*修正獨立event選單click按鈕大小*/
/* .st-content img{
    width: unset!important;
    height:unset!important;
}  */

.feature_group{width: calc(100%/1);}
.books > div:nth-child(1),.books > div:nth-child(2){display: none;}


/*****站內原有樣式Mobile*****/
/*隱藏的區塊*/
#BodyHeader_event,.hottxt,#noie{display:none;}
/*會撐開的版面控制*/
#BodyContent{width: 100%;padding:0;}
#BodyContainer_event{width: 100%;}
/*會撐開的版面控制END*/
/* Header */
#BodyHeader_event_rwd{text-align:center;width:100%;height:auto;margin:0 auto;background-color:#FFF;position:fixed;top:0;float:left;z-index:9;display: initial;}
#BodyHeader_rwd,#Bodymenunav{display: block;}
/*orientation: portrait   直式
 orientation: landscape  橫式*/
#BodyHeader_event_rwd img {height: auto;margin:2.5% auto;}
@media screen and  (orientation:portrait) {#BodyHeader_event_rwd img {max-width: 50%;}}
@media screen and  (orientation:landscape) {#BodyHeader_event_rwd img {max-width: 25%;}}
/*body*/
#Master_title{display:block;}/*主圖位置ID*/
@media all and (orientation : portrait){#Master_title{margin-top: 15%;}}
@media screen and  (orientation:landscape) {#Master_title{margin-top: 10%;}}





/*資料集中1200px寬外框*/
#event_master,#event_sec,#event_third,#event_fourth,#event_fifth{margin:0 auto;display:inline-block;width:100%;}
/*ask*/
#askarea{padding: 0.8rem;}
#askarea .asktitle > p{line-height: 2.2rem;}
#formlist{margin: 0 auto;}
#formlist label{font-size: 1.0rem;}
#formlist input[name="sContent"],#formlist label,#formlist SELECT,#formlist input{width:100%;margin: 0.25rem 0;}
#formlist input[type="submit"],#formlist input[type="reset"]{width: calc(100%/4.5);}


/*TOP按鈕*/
#topli,#topli a{color: #fff;text-decoration: none;}
#topli{width:50px;height:50px;text-align:center;border-radius:9999em;background-color:#000;opacity:.4;position:fixed;line-height:50px;font-size:15px;display: initial;}
@media screen and  (orientation:portrait) {#topli{right:1%;bottom:15%;}}
@media screen and  (orientation:landscape){#topli{right:1%;bottom:15.8%;}}


/* Footer */
#BodyFooter_rwd,#footer_line,#footer_inline ul,#footer_inline ul li,#footer_address,#footer_address ul,#footer_address ul li{width:100%;float: left;}
#BodyFooter_rwd{background-color:#FFF;margin-top:5%;}
#BodyFooter_rwd #footer_line{margin:5% auto 3%;display:block;height:auto;text-align:center;border-top:thin solid #999}
#BodyFooter_rwd #footer_inline a {color: #000;line-height: 2em;}
#BodyFooter_rwd #footer_inline ul{padding:0;margin-bottom:1%;text-align:center}
#BodyFooter_rwd #footer_inline ul li img{width:40%;height:auto;margin-bottom:2%;margin: 0 auto;}
#BodyFooter_rwd #footer_inline ul li{display:inline-block;margin-right:auto;line-height:2em;font-size:1em;clear:both}
#BodyFooter_rwd #footer_address{margin: 0% auto auto auto;text-align: center;}
#BodyFooter_rwd #footer_address a {	color: #000;line-height: 2em;}
#BodyFooter_rwd #footer_address ul{padding:0;text-align:center;margin-bottom:1%;clear:both}
#BodyFooter_rwd #footer_address ul li{display:block;line-height:2em;text-align:center;font-size:.8em}
/* Footer end */

}

@media(min-width:1201px){

    
}
    
@media(max-width:767px){
    #event_master,#event_sec,#event_third,#event_fourth,#event_fifth{font-size: 1.2rem;}

    .banner{display: none;}
    .banner_m{display:block;width: 100%;}
    .banner_m img{width: 100%;vertical-align: middle;}
    .title {font-size: 2rem;margin: 1rem auto 0.5rem;line-height: 2.8rem;}
    .link_btn {padding: 0.5rem 0.5rem 1.5rem 0.5rem;}
    .link_btn div {width: 100%;font-size: 1.4rem;margin: 0.6rem 1.5rem;}
    .crucial .time{font-size: 1rem;}
    .crucial .detail ol,.billboard ul{font-size: 1.3rem;margin: 0 1.5rem;}
    /* .crucial .photo img{width: 85%;} */
    .crucial .photo{width: 85%;}
    .crucial .photo img{width: 100%;}
    .essential .video{width: 85%;margin-left: 0;margin-top: .5rem;}
    .billboard .block_m {line-height: 2rem;}  
    .experience .content {width: 90%;}
    .experience .content dl {width: calc(100%);}
    .sale dl{padding: .5rem;}
    .sale dt {font-size: 2.2rem;margin: 1rem auto 0.5rem;line-height: 2.8rem;}
    .sale dd {font-size: 1.5rem;}
    .content .name {font-size: 1.35rem;}
    .experience .content dl dd {font-size: 1.1rem;}
    #askarea .asktitle {font-size: 1.4rem;}
    .airimage{font-size: 0.8rem;padding: 0.2rem 1rem;}
    .question_number,.question_content{font-size: 1rem;}
    button.VueCarousel-navigation-button.VueCarousel-navigation-prev,button.VueCarousel-navigation-button.VueCarousel-navigation-next{font-size: 0.8rem;}
}
    
@media all and (min-width: 768px) and (max-width: 991px){
    #BodyContent { margin-top: 5%!important; }
    .crucial ol,.billboard ul{margin: 0 2.5rem;}

}
    
@media all and (min-width: 992px) and (max-width: 1199px){

}
