﻿#event_master {text-align: center;}
#event_master h1 {font-size: 4.6rem;font-weight: bold;}
#event_master h2 {font-size: 3.2rem;}
#EventContainer h1 {text-align: center;line-height: 4.3rem;padding: 2% 0 1%;}
#EventContainer .bgcolor0 {background: url(../../images/1205004/1205004_bg.png) no-repeat top fixed ;}
#EventContainer .bgcolor1 {background: linear-gradient(to top,#b1b1b16e 2%,#ffffff00 50%)}
#EventContainer .bg2 {background-color: #df3117;}
#EventContainer .bg3 {background-color: #5d9a33;}
#EventContainer .bg4 {background-color: #2a8acb;}
#EventContainer .bg5 {background: linear-gradient(to bottom,#ffffff00 12%,#d1d1d199 30%);}
#EventContainer .bg6 {background: linear-gradient(to right, #df3117 10%, #5d9a33 50%, #2a8acb 90%);}
#EventContainer .bg6a {background: linear-gradient(to right, #df3117 10%, #5d9a33 50%, #2a8acb 90%);padding: 1%;}
#EventContainer .bg7 {background-color: #363636;}
#EventContainer .fcol0 {color: #fff;}
#EventContainer .fcol1 {color: #df3117;}
#EventContainer .fcol2 {color: #5d9a33;}
#EventContainer .fcol3 {color: #2a8acb;}
#event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth, #event_seventh, .event_cont {padding: 1rem;}

:root {
	--red: #ff4311;
	--blue: #039be6;
	--green: #519E8C;
	--yellow: #FFEE38;
	--orange: #F09B1A;
	--navy: #056EC8;
	--cream:#fff9cc;
	--gray: #484848;
}
small{font-size: 0.9rem;}

/* 主圖 */
.banner {}
.model {border-top: solid 5px;border-bottom: solid 5px;width: 100%;display: inline-block;margin-bottom: 1.5%;}
.model li {font-size: 3rem;font-weight: bold;}
.model > li:last-of-type {font-size: 4rem;}
.model li strong {color: var(--red);}
.model ul li {font-size: 2.5rem;font-weight: initial;display: inline-block;padding: 0.3rem 1.5rem;}
.model ul li a {text-decoration: none;}
.model ul li a:hover {color: #2a8acb;}

/* 高普考修正考科 */
.revise {padding: 1% 0 4%;}
.revise dt {font-size: 2.5rem;text-align: center;border-bottom: solid 10px transparent;border-image: linear-gradient(to right, #df3117 10%, #5d9a33 50%, #2a8acb 90%);border-image-slice: 1;color: #df3117;}
.revise dd {font-size: 1.25rem;border-bottom: 2px dotted;padding: 0.25rem 0.5rem;margin-top: 0.5rem;}

/* 113年度面授新班 */
.calendar dl {width: calc(100%/4 - 2rem);margin: 1rem;text-align: center;background-color: white;border-radius: 0.8rem;padding: 0 0 1%;}
.calendar dl dt {background-color: #2a8acb;color: white;font-size: 1.25rem;padding: 0.25rem 0;border-radius: 0.8rem 0.8rem 0 0;}
.calendar dl dt a {background: initial;margin: auto;}
.calendar dl dd {padding: 0.25rem 0.5rem;/*padding: 0.25rem 1rem;*/}
.more-link {text-align: center;padding: 1rem 0;}
.more-link a {border: 1px solid white;border-radius: 1rem;padding: 0.8rem 3rem;text-decoration: none;color: white;font-size: 1.5rem;}
.more-link a::after {content: '\f061';font-family: "Font Awesome 5 Free";margin-left: 1rem;font-weight: bold;}
.more-link a:hover {background-color: rgba(223, 223, 223, 1);border: none;transition: 0.5s all;-webkit-transition: 0.5s all;color:#df3117;}
.note {width: fit-content;margin: 1rem auto auto;color: white;font-size: 1.1rem;}
.note a {font-weight: bold;}
.note .line, .line-sign .line {color: #00cd00;}
.note .vod {color: #2da5f7;}
.twice{display: flex;flex-wrap: wrap;}
.twice dd{width: calc(100%/2);}

/* 名師高質量批改申論 */
.h1 {font-size: 3.75rem;text-align: center;line-height: 4.3rem;padding: 2% 0px 1%;}
.paper img {margin: auto;}
.paper_note {text-align: center;font-size: 1.35rem;color: #0B4170;font-weight: bold;}
.paper_note a {color: #7EB64F;}

/* 輔考資源完整 */
.resource dl {width: calc(100%/3 - 1rem);margin: 0 auto;}
.resource dl dt {font-size: 1.5rem;background-color: #2a8acb;color: white;text-align: center;padding: 0.25rem 0;border-radius: 0.8rem 0.8rem 0 0;}
.resource dl dd img {height: 230px;width: 370px;object-fit: cover;}

/* 面授自由組搭VOD/雲端課程 */
.learn-type {width: 31%;box-sizing: border-box;padding: 2%;background: linear-gradient(to bottom, #f1f1f1 60%, #b9b9b9 95%);margin: 1% auto;border-radius: 1em;line-height: 1.6em;}
.mode-style {margin: 0% auto 5%;text-align: left;font-weight: initial;}
.mode-style dt {font-size: 1.5rem;font-weight: bold;text-align: center;border-radius: 0.5em 0.5em 0 0;padding: 3% 0;margin: -6% -6% 5%;background: linear-gradient(to right,#cca73d 40%,#b18010 90%);}
.mode-style dt a {color: white;}
.mode-style dd {display: list-item;margin-left: 1rem;color: #2a8acb;}

/* 從基礎到進階 */
.equation {margin: 1rem auto 2rem;}
.equation-title {font-size: 1.8rem;width: 15%;padding: 1%;text-align: center;color: white;}
.equation dl {background-color: white;border-radius: 0.25rem;width: calc(85%/3 - 1.5rem);margin: 0 0.75rem;text-align: center;padding: 0.25rem 0.5rem 0.5rem;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.equation dl dt {font-size: 1.25rem;color: #fff;font-weight: bold;background-color: #858585;padding: 0.2rem;margin-bottom: 0.3rem;}
.equation-title strong {color: #ffdb29;display: block;}
.equation:nth-of-type(3) dl {width: calc(85%/2 - 1.5rem);}
.equation:nth-of-type(4) dl {width: calc(85%/4 - 1.5rem);}
.equation dl dd {font-size: 1.1rem;}
.equation dd i {margin: auto 0.25rem;}
.step {position: relative;padding: 0 0 1rem;}
.step::after {content: '\f078';font-family: "Font Awesome 5 Free";position: absolute;bottom: -0.25rem;left: 0;right: 0;font-weight: bold;}
.equation dl dd:nth-of-type(3) {padding-top: 1rem;}
.custom-note {font-size: 1rem;text-align: left;padding: 1rem;color: var(--gray);background-color: seashell;margin-top: 8%;}
.annual {color: var(--red);margin-right: 0.25rem;}
.line-sign {font-size: 1.5rem;font-style: italic;text-align: center;padding: 0 0 2%;}
.line-key {/*background-color: white;*/background-color: seashell;padding: 0 1.5rem 0 0.5rem;margin-left: 0.25rem;position: relative;display: inline-block;font-weight: bold;}
.program dl {width: calc(85% / 4 - 1.5rem);}

/* 首選名師戰隊 */
#teaIMGout {width: 100%;margin-bottom: 3%;}
.content1,.content2 {display: block;padding: 0;width: 100%;}
#teaIMGout .active2 {border-bottom: 5px #df3117 solid;color: #df3117;font-weight: bold;padding-bottom: 0.5%;font-size: 1.8em;}
.select1,.select2 {border-bottom: 1px #919191 solid;color: #919191;text-align: center;width: 49%;margin-bottom: 3%;font-weight: bold;cursor: pointer;font-size: 1.6em;}
.select1,.select2 {border-bottom:1px #919191 solid; color: #919191;text-align: center;width:49%;margin-bottom: 3%;font-weight: bold;}
.select1:hover,.select2:hover {cursor: pointer;}
.tea_photo1,.tea_photo2,.tea_photo3,.tea_photo4,.tea_photo5,.tea_photo6,.tea_photo7,.tea_photo8,.tea_photo9,.tea_photo10,.tea_photo11,.tea_photo12 {width:170px;}
.swiper-button-black {opacity: 0.3;}
.out_tea_1,.out_tea_2,.out_tea_3,.out_tea_4,.out_tea_5,.out_tea_6,.out_tea_7,.out_tea_8,.out_tea_9,.out_tea_10,.out_tea_11,.out_tea_12 {border:0px #000 solid;opacity: 0.9;width:100%;padding:5px 0;text-align: center;z-index: 1;} 
.tea_show {margin-top:2%;height: 125px;}   
.tea_show small {font-size: 0.875rem;}
.out_tea_1,.out_tea_7 {background-color:#df3117 ;}.out_tea_2,.out_tea_8 {background-color:#3c3993 ;}
.out_tea_3,.out_tea_9 {background-color:#2a8acb ;}.out_tea_4,.out_tea_10 {background-color:#2c8b93 ;}
.out_tea_5,.out_tea_11 {background-color: #5d9a33;}.out_tea_6,.out_tea_12 {background-color:#bb7827 ;}
.tea_show,.tea_show a {color: #fff;}
.tea_show dt {border-bottom:dotted 1px #fff;padding: 0% 0 2%;}
.tea_show dd {margin: 1% 0;font-size: 0.8em;}
.active {display: inline-block;animation-name:ani;animation-duration:0.5s;}
.active2 {border-bottom: 5px #2f8bc8 solid;color:#136a99;font-weight: bold;padding-bottom: 0.5%;}
.active3 {display: block;animation-name: fadeInUpNEW;animation-duration: 1s;bottom: 0;}

/* 優秀上榜學員現身說法 */
.experience header {/*width: calc(100%/2);*/}
.experience h1 {font-size: 3rem;padding-bottom: 2rem;}
.experience h1 strong {font-size: 3.5rem;padding: 0 0 0 2rem;}
.student_box {width: calc(100%/2);padding: 0 1rem;}
.student_box figure {width: 150px;border-radius: 50%;border: 10px solid #6da447;overflow: hidden;}
.student_box figure img {width: 100%;}
.student_box dl {padding: 0 1% 3% 0;}
.student_box dt {font-size: 1.5rem;border-bottom: dotted 1px;margin-bottom: 0.5rem;}
.student_box dd a.more {background-color: #6da447;padding: 0.2em 0.8em;border-radius: 1em;text-decoration: none;display: inline-block;font-size: 0.9rem;color: white;}
.pass {padding-left: 0.5rem;color: #df3117;}
.Community {margin: 2rem auto auto;}

@media screen and (min-width: 1201px){	
	#event_master, #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth, #event_seventh, .event_cont {width: 1200px;margin: auto;}
}

@media screen and (max-width: 1180px){
	.calendar dl{width: calc(100% / 2 - 2rem);}
}

@media screen and (max-width: 1023px){
	.experience h1 strong {display: block;padding: 0;}	
}

@media screen and (max-width: 1023px){
	.resource dl dd img {width: 230px;height: 150px;}
}

@media screen and (min-width: 768px) and (max-width: 1199px){
	.equation-title {width: 100%;}
	.equation-title strong {display: inline-block;margin-left: 0.5rem;}
	.equation dl {width: calc(100%/3 - 1.5rem);margin: 0.5rem auto;}
	.program dl {width: calc(100% / 2 - 1.5rem);}
	.equation:nth-of-type(3) dl {width: calc(100%/2 - 1.5rem);}
	.equation:nth-of-type(4) dl {width: calc(100%/4 - 1.5rem);}
	.model ul li {padding: 0.3rem 0.5rem;}	
	
}

@media screen and (max-width: 767px){
	.model {border-top: solid 3px;border-bottom: solid 3px;}
	.model ul li {font-size: 1.2rem;padding: 0.1rem 0.1rem;}
	#EventContainer h1, .h1 {line-height: 2.5rem;font-size: 2.0rem;}
	.line-sign,.paper_note {font-size: 1.2rem;}
	.revise dt {font-size: 1.5rem;}
	.resource dl dt {font-size: 1.2rem;}
	.calendar dl, .learn-type, .equation-title, .experience header, .student_wrap {width: 100%;}
	.equation dl, .equation:nth-of-type(n+3):nth-of-type(-n+4) dl {width: 100%;margin: 0.5rem auto;}
	.mode-style dt {margin: auto auto 5%;}
	.more-link a {font-size: 1.25rem;}
	.experience h1 strong {font-size: 2.0rem;}
	.student_box {width: 100%;}
	.student_box figure {margin: 0 auto;}
	.sm\:twice{display: flex;flex-wrap: wrap;}
	.sm\:twice dd{width: calc(100%/2);}
}

@media screen and (max-width: 767px) and (orientation: portrait) {	
	.resource dl {width: 100%;}
	.resource dl dd img {width: 370px;height: 230px;}
	.resource dl dd {margin: auto auto 1rem;}
}