@import url("../../../File/css/event_common.css");
*{transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;box-sizing:border-box}
body{font-family:"Microsoft JhengHei", sans-serif,Arial}
.row100{width:100%}
.row1200{width:1200px;margin:0 auto}
[class*="flex"]{display:flex;flex-wrap:wrap;display:-ms-flexbox}
[class*="grid"]{display:grid}
.bgpadding{padding:1.5% 0}
.bgcolor0{background:url(../images/1009041_01.png) no-repeat bottom center #FFF}
.bgcolor1{background:#fdfbe6}
.bgcolor2{background:#f5eae4}
.bgcolor3{background:#ffF}
.bgcolor4{background:#f7f7f7}
.bgcolor5{background:url(../images/1009041_plan2.png) no-repeat bottom right fixed #dc3c3c}
.bgcolor6{background:url(../images/1009041_rock.png) no-repeat bottom center #FFF}
#event{position:relative}
#event i{margin-right:5px}
#event h1,#event h2,#event h3{text-align:center;font-family:"Microsoft YaHei"}
#event h1{font-size:2.8rem}
#event h2{font-size:3.2rem;margin:0 auto 2%}
#event h2 mark{background:#e50303;color:#fff;position:relative;margin:0 1.5% 0 auto;padding:2px 15px;font-size:2rem;line-height:45px;font-weight:500;display:inline-block}
#event h2 mark::before{content:"";position:absolute;border-style:solid;right:-12px;top:23%;border-width:12px 0 12px 12px;border-color:transparent transparent transparent #e50303}
#event h3{font-size:3.2rem;color:#355393;margin:0 auto 2%}
#event h3~p{font-size:2rem;text-align:center;font-weight:700;background-color:#355393;color:#fff;padding:.3em 0;border-radius:1em}
#Master_title{text-align:center;position:relative;width:1200px;margin:0 auto}
.flag li{position:absolute;list-style:none}
.flag li:nth-child(1){top:47%;left:43%}
.flag li:nth-child(2){top:50%;left:30%}
.flag li:nth-child(3){top:47%;left:43%}
.flag li:hover{transform:scale(1.05)}
.img-Responsive,.thumbnail > img,.thumbnail a > img,.carousel-inner > .item > img,.carousel-inner > .item > a > img{display:inline-block;max-width:100%;height:auto}
.feature_list{margin:1% 5% 0;background-color:#fff;border-radius:2em;padding:1em .5em}
.feature_list>li{margin:0 auto 0 8%;text-align:left;font-size:1.5rem;line-height:1.8em}
.feature_list>li:before{content:"\f058";font-family:"Font Awesome 5 Free";font-weight:900;color:#e50303;font-size:1.8rem}
.feature_list>li strong,.feature_list>li a{color:#e50303}
.timeline_box{margin:1% auto;}
.timeline{grid-template-columns:1fr;}
.year,.month{grid-template-columns:repeat(12,1fr);justify-items:flex-start}
.year>div{font-size:1.65rem;font-weight:700;border-bottom:solid 4px;margin-bottom:.5em}
.year>div:nth-of-type(1){grid-area:1/1/2/2}
.year>div:nth-of-type(2){grid-area:1/5/2/6}
.month{border-bottom:1px solid #333;margin:5px 0}
.month>div{font-size:1.05rem;position:relative}
.course{grid-template-columns:repeat(4,1fr) repeat(12,.5fr) repeat(2,1fr);grid-gap:8px 0}
.course>div{font-size:1.2rem;display:flex;align-items:center;justify-content:center;padding:13px 5px;text-align:center}
.course>div,.course>div>a{color:#FFF}
.course>div:hover{transform:scale(1.05)}
.course>div:nth-of-type(1){grid-area:1/1/2/span 2;background:#287ed7}
.course>div:nth-of-type(2){grid-area:1/3/2/span 2;background:#2ac3db}
/* .course>div:nth-of-type(3){grid-area:1/6/2/span 8;background:#a0cd33} */
.course>div:nth-of-type(3){grid-area:2/7/3/span 7;background:#df6727}
.course>div:nth-of-type(4){grid-area:1/5/2/span 8;background:#c5731f}
.course>div:nth-of-type(5){grid-area:1/13/2/span 2;background:#371e9b}
/* .course>div:nth-of-type(7){grid-area:4/11/5/span 2;background:#7643c9} */
.course>div:nth-of-type(6){grid-area:2/14/2/span 3;background:#9c47c7}
.course>div:nth-of-type(7){grid-area:2/17/2/span 2;background:#d545b6}
.course li a {color: white;}
.teacher_box{margin:0 auto 2%;justify-content: center;}
.teacher_list{width:calc(92%/3);margin:1%}
.teacher_list a{color:#FFF}
.teacher_list a figure:before{content:"\f144";font-family:"Font Awesome 5 Free";font-weight:900;left:43%;top:45%;font-size:2.5rem;color:rgba(255,255,255,0.8);position:absolute;z-index:1;opacity:0}
.teacher_list a:hover figcaption{opacity:0}
.teacher_list a:hover figure:before{opacity:1}
.teacher_list figure{position:relative}
.teacher_list figure>img{max-width:100%;border-radius:8px;display:block}
.teacher_list figure figcaption{position:absolute;bottom:0;left:0;background:rgba(0,0,0,0.5);font-size:1.25rem;line-height:2em;width:100%;border-radius:0 0 8px 8px;text-align:center}
.teacher_note{padding:0 0 1%;font-size:.95rem;text-align:center}
.bonus_box{margin:1% auto}
.bonus_list{width:calc(90%/2);margin:0 auto;z-index:1}
.bonus_list>h4{font-size:1.7rem;text-align:center;background:#fc4128;border-radius:15px 15px 0 0;color:#FFF;padding:1.5% 0}
.bonus_list>h4>span{display:block;color:#fef23a;font-size:1.5rem}
.bonus_list>div{text-align:left;padding:2% 10% 2.5%;font-size:1.3rem;background:#f1f1f1;border-radius:0 0 15px 15px}
.bonus_list>div>ol>li{counter-increment:li;line-height:1.8em}
.bonus_list>div>ol>li:before{content:counter(li);width:28px;height:28px;color:#FFF;display:inline-block;margin:0 1.5% 0 0;background:#fc4128;border-radius:50%;line-height:28px;font-size:1.25rem;text-align:center}
.dcardwrap{margin:2% auto 0}
.Vuetabs {margin-bottom: -2px;display: flex;justify-content: space-around;}
.Vuetabs a{width: 50%;font-size: 1.4rem;cursor: pointer;padding: .8rem 3rem;transition: background-color 0.2s;border: 1px solid #ccc; border-right: none;background-color: #f1f1f1;border-radius: 2em 2em 0 0;font-weight: 900;}
.Vuetabs a:last-child {border-right: 1px solid #ccc;}
.Vuetabs a:hover {background-color: #aaa; color: #fff;}
.Vuetabs a.active {background-color: #fff;color: #484848;cursor: default;border-bottom: 2px solid #fff;}
.topgrade{background:#FFF;border-radius:0 0 2em 2em;padding:2%;}
.topgrade .topgrade_wrap{display: flex;justify-content: center;flex-direction: column;align-items: center;margin: 0.5rem 0;}
.topgrade .f-red{color: red;font-weight: 900;}
.topgrade ul li{font-size:1.4rem;line-height:1.7em;text-align:left}
.topgrade .topgrade_wrap ul li:before{content:"\f559";font-family:"Font Awesome 5 Free";font-weight:900;font-size:2rem;margin-right:8px;color:#fc4128}
.topgrade ul li strong{font-size:1.8rem;color:#fc4128}
.topgrade_focus{font-size: 1.8rem;font-weight: 900;background-color: #fef23a;display: inline-block;width:90%;}
.more_board{margin:2% auto}
.more_board>ul{margin:0 auto 0 8%}
.more_board>ul>li{width:50%;text-align:left;font-size:1.15rem;line-height:1.8em;color:#000}
.more_board>ul>li>span{color:#fc4128;font-weight: bold;}
.more_board .board li{font-size: 1.3rem;color: #000;margin: .1rem auto;}
.more_board .board li:last-child{margin-block-end:.5rem;}
.basemap_icon ul li{position:absolute;list-style:none}
.basemap_icon ul li:nth-child(1){top:10%;left:5%}
.basemap_icon ul li:nth-child(2){top:16%;right:7%}
.basemap_icon ul li:nth-child(3){top:20%;left:5%}
.basemap_icon ul li:nth-child(4){top:31%;right:0}
.basemap_icon ul li:nth-child(5){top:54%;left:10%}
.navlink{margin:2% auto;text-align:center}
.navlink>li{display:inline;margin:0 1%;font-size:1.5rem}
.navlink>li>a{background:#e50303;color:#FFF;padding:.3em 1em;text-decoration:none;border-radius:1em;border:0 solid #b16900;display:inline-block;font-weight:700}
.navlink>li>a:hover{transform:scale(1.02)}
.navlink>li>a.bt{background:#000}
.askarea_out,.askarea{background:#b9a592}
#formlist input[type="submit"],#formlist input[type="reset"]{color:#FFF;background:#6c5b4a}

/*錨點*/
.bar { width: 180px; height: auto; padding: 1rem; position: fixed; top: 36%; right: 1%; z-index: 5; background-image: linear-gradient(to top, #e6e9f0e7 0%, #eef1f5da 100%);border-radius: 30px; font-size: 1.4rem; font-weight: 900;text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
.bar a{color: #000;text-decoration: none;border-bottom: dotted 3px #b16900;padding: 0.1rem;display: inline-block;}
.bar a:hover{color: #e50303;}
.bar ul{display: flex;flex-wrap: wrap;justify-content: space-around;list-style: none;}
.bar img{max-width: 100%;vertical-align: bottom;}

@media(max-width:767px) {

.bgpadding{padding:5% 2%}
#event h1 span,#event h2 span,#event h3 span{display:block}
#event h1,#event h2,#event h3{font-size:1.6rem}
#event h2 mark{font-size:1.5rem;line-height:1.5em;display:block;margin:0 auto;width:70%}
#event h3~p{font-size:1.2rem;margin:1% auto 4%;padding:.3em .7em}
#Master_title{width:100%}
.bgcolor0{background-size:cover}
.bgcolor5{background-size:0}
.flag img{width:35%;margin-left:-75%}
.feature_list{margin:3% auto 2%;padding:1em 1.5em}
.feature_list>li{margin:0 auto 1.5%;font-size:1.2rem;line-height:1.55em}
.feature_list>li:before{font-size:1.5rem}
.Vuetabs a{font-size: 1rem;}
.topgrade>ul>li strong{font-size:1.2rem}
.course>div{font-size:1.05rem}
.teacher_list{width:calc(96%/2)}
.teacher_list figure figcaption{font-size:1rem;line-height:1.8em}
.teacher_list a figure:before{font-size:2rem;left:41%}
.teacher_note{padding:2%;font-size:.9rem}
.bonus_box{padding:0 3%}
.bonus_list{width:100%;margin:2% auto}
.bonus_list>h4{font-size:1.4rem;padding:2% 8%}
.bonus_list>h4>span{font-size:1.25rem;line-height:1.3em}
.bonus_list>div{font-size:1.1rem;padding:3% 5%}
.bonus_list>div>ol>li:before{width:23px;height:23px;font-size:1.05rem;line-height:23px}
.swiper-slide img{width:100%;height:100%}
.swiper-container{width:100%;height:auto}
.swiper-slide{width:100%;height:auto}
.swiper-button-prev.swiper-button-gray{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23a8a8a8'%2F%3E%3C%2Fsvg%3E");left:0;right:auto}
.swiper-button-next.swiper-button-gray{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23a8a8a8'%2F%3E%3C%2Fsvg%3E");right:0;left:auto}
.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:20px;height:40px;margin-top:-20px;z-index:10;cursor:pointer;background-size:20px 40px;background-position:center;background-repeat:no-repeat}
.topgrade{padding:4% 3%}
.topgrade ul{margin:4% auto 0;padding:0 2%}
.topgrade ul li{font-size:1.2rem;line-height:1.5em;margin:0 auto 2%}
.topgrade ul li:before{font-size:1.5rem}
.topgrade_focus{font-size: 1.2rem;width: 100%;}
.more_board>ul{margin:0 auto}
.more_board>ul>li{width:100%;font-size:.95rem}
.more_board .board li{font-size: 1rem;}
.navlink{margin:4% auto 2%}
.navlink>li{font-size:1.2rem}
.navlink>li>a{padding:1% 5%;margin:1.5% 1%}
.timeline_box{width: 150%;}
.timeline{overflow-x: scroll;}
.bar {font-size: 0.8rem !important}
}

@media (min-width:768px) and (max-width:991px) {
#event h1{font-size:2.3rem;line-height:1.1em}
#event h2{font-size:2.5rem;line-height:1.1em}
#event h3{font-size:2.5rem}
#event h3~p{font-size:1.6rem;padding:1%}
#event h1 span,#event h2 span,#event h3 span{display:block}
#event .teacher h2 span,#event .more_board h2 span{display:inline-block}
#Master_title{width:100%}
.bgcolor0{background-size:cover}
.bgcolor5{background-size:0}
.feature_list{margin:1% auto;padding:1.5em .5em}
.feature_list>li{margin:0 auto 0 4%}
.timeline_box{margin:2% auto}
.year>div{font-size:1.4rem}
.teacher_box{width:90%;margin:auto auto 4%}
.teacher_list{width:calc(92%/2);margin:1% 2%}
.bonus_list{width:calc(96%/2)}
.bonus_list>h4{padding:2%}
.topgrade ul{margin:2% auto 1% 3%}
.topgrade ul li{font-size:1.4rem}
.topgrade_focus{font-size: 1.6rem;}
.more_board>ul{margin:0 auto}
.more_board>ul>li{font-size:1rem}
.navlink>li>a{display:inline-block;margin:1%}
.flag img{width:75%;margin-left:-40%}
}
@media (min-width:992px) and (max-width:1200px) {
#event h2{font-size:2.7rem}
}
@media (min-width:768px) and (max-width:1200px) {
.bgpadding{padding:4% 0}

}
@media(max-width:1200px){
.row1200{width:96%}
.basemap_icon{display:none}
.bar {width: 95%; height: auto; padding: 0.5% 1% 1%; position: fixed; top: initial; bottom: 0; right: 0; left: 0; z-index: 5; border-radius: 0; text-align: center; align-items: center; justify-content: space-around; margin: 0 auto; border-radius: 12px 12px 0 0;font-size: 1.8rem;}
.bar ul{flex-wrap: nowrap;}
.bar li { margin: 0 0.5rem;}
}

@media(max-width:1650px){
.plan-hidden {display: none;}
}