/*Event 重設*/
#EventContainer section h1::before {content: initial;}
/*Event 預設*/
#event_master, #event_sec, #event_third, #event_fifth, #event_sixth {padding: 1rem;}
#EventContainer .bgcolor0 {background: url(../../images/0911042_02.png) repeat-y fixed center top;background-size: 100%;}
#EventContainer .bgcolor1 {background: linear-gradient(to right,#12428c 20%,#e9363c 80%);}
/*定位*/
.fixed {position: fixed;}
/*內外距*/
.my-2 {margin-top: 0.5rem;margin-bottom: 0.5rem;}.p-2 {padding: 0.5rem;}
/*字級*/
.text-base {font-size:1rem}.text-xl {font-size:1.25rem}
.text-2xl {font-size:1.5rem}.text-3xl {font-size:1.875rem}
/*行距*/
.leading-loose {line-height: 2;}
/*字顏色*/
.text-yellow-300 {color:#fff0c4}.text-white {color:#fff}
/*DIY--設計可增加用樣式Start*/
#Master_title img {margin: auto;}
.ADLink {left: 0;bottom: 3.5rem;border-radius: 0 10px 10px 0;background: linear-gradient(to right,#3B39C2,#FB2E53);padding: 0.5rem;}
.ADLink dd {font-size: 1.125rem;padding: 0.125rem 0.25rem;}
.ADLink dd,.ADLink dd a {color: #fff0c4;text-decoration: none;}
.ft_NOTO {font-family: 'Noto Sans TC', sans-serif;}
.ft_NOTOSer {font-family: 'Noto Serif TC', serif;}
.ft_Meiro {font-family: Meiryo, "Meiryo UI", Arial, sans-serif;}
.grade_title {background:linear-gradient(to right,#002e75 20%,#f12d33 80%);color:#FFF;border-radius:10px;transform:skewX(-20deg);margin:0 5%;text-align:center;font-weight:bold;padding:0.5% 0;box-shadow:5px 5px 6px rgba(0,0,0,.4);font-family: "Microsoft YaHei";letter-spacing: 2px;font-size: 2.8rem;}
.grade_title img {vertical-align: middle;transform: skewX(20deg);width: 40px;margin-right: 1%;display: inline-block;}
.grade_title b {color: #eccc68;}
.grade_title h1 {font-size: 1.875rem;text-align: center;}
.bg-orange-spec {background-color: #F9B234;}
.classShow dt {display: inline-block;}
.classShow dd {max-width: 80%;}
.classShow dd img {width: 100%;border-radius: 10px;border:5px #3d6eb4 solid;}
.classShow .far {color: #7EB64F;}
.grade_A, .grade_B, .grade_C, .grade_D {padding: 1% 5%;font-size: 1.5rem;text-align: center;}
.grade_A li {width: calc(100%/2 - 0.5rem);margin: auto 0.25rem;font-size: 2rem;}
.grade_B li {width: calc(100%/4 - 0.5rem);margin: auto 0.25rem;}
.grade_D li {width: calc(100%/3 - 0.5rem);margin: auto 0.25rem;text-align: left;}
.grade_B .m-auto {width: calc(100%/4 - 0.5rem);margin: auto;}
.grade_C li {width: calc(100%/2 - 0.5rem);margin: auto 0.25rem;text-align: left;}
.grade_C li strong {padding: 0 0.75rem 0 0;}
.photo_intro {text-align: center;}
.photo_intro img, .paper img, .grade_content1 img {margin: auto;}

/* 主圖 */
.banner {text-align: center;color: white;}
.banner img {margin: auto;}
.banner_title {font-size: 4rem;font-weight: bold;}
.comma {margin: auto -0.75rem;}
.king {font-size: 5rem;}
.text-yellow {color: yellow;}

/*行政學院風雲人物賞*/
.heroic-box {position: relative;padding: 7rem 0 8rem;}
.media-wrap .heroic {width: 70%;}
.media-wrap .heroic figure {width: 300px;height: 300px;/*border-radius: 67% 33% 28% 72% / 60% 51% 49% 40%;*/border-radius: 75% 40% 35% 85% / 70% 70% 45% 50%;background: linear-gradient(to left, #002e75 0%, #f12d33 100%);display: flex;align-items: flex-end;justify-content: center;}
.media-wrap .heroic img {height: 380px;border-radius: 0 0 85px 145px;}
.heroic:nth-of-type(2) img {border-radius: 0 0 75px 125px;}
.media-wrap .heroic:nth-of-type(2) {bottom: 0;position: absolute;right: 0;text-align: right;}
.media-wrap .heroic:nth-of-type(1) dl {padding-left: 5%;}
.media-wrap .heroic dl {width: calc(100% - 300px);margin: -5rem auto auto 0rem;z-index: 2;/*text-shadow: 2px 0 2px #fff, -2px 0 2px #fff, 0 2px 2px #fff, 0 -2px 2px #fff, 0 0 4px #fff;*/}
.heroic dl dt {color: #e9363c;}
.heroic dl dt strong {font-size: 2.4rem;border-left: initial;padding-left: initial;display: block;line-height: 1.1em;}
.media-wrap .heroic:nth-of-type(2) dt {margin-right: 0rem;line-height: 1.3em;}
.media-item {width: calc(100%/4);justify-content: center;margin: 0 auto auto;padding: 2rem 0;}
.heroic {margin: 0;padding: 0;}
.media-item figure {width: 120px;}
.media-item figure img {border-radius:50%;}
.media-item dl {width: 91%;color:#184994;font-size: 1.0em;padding: 1% 0%;border-bottom: dotted 1px;margin: 2% auto;}
.media-item dl a {color:#184994;}
.media-item dl dd {padding: 0 0 0.5rem;}
.media-item dd .name {font-size: 1.3em;}
.media-item dt {font-weight:bold;font-size: 1.3em;margin-bottom: 0.5em;}
.media-item dt strong {font-size: 1.15rem;color: #e9363c;border-left: solid 3px;padding-left: 0.5em;display: block;line-height: 1.35em;}
.exp-btn {border: 1px solid #184994;padding: 0 10px 3px;font-size: 0.8em;border-radius: 1em;text-decoration: none;font-weight: bold;margin-left: 3px;}
.media-item dl dd strong {background: linear-gradient(to bottom, #ffffff00 45%, #deeefd 45%, #deeefd 100%);}

/*緞帶標題*/
.ribbon {left:0;right:0;margin:0 auto;width:80%;position:absolute;text-align:center;font-size:18px!important;background:linear-gradient(to bottom,#216caf 10%,#0b406f 90%);box-shadow:rgba(000,000,000,0.3) 0 0 0}
.ribbon:before,.ribbon:after {content:'';position:absolute;display:block;bottom:-1em;border:1.5em solid #1c63a2;z-index:-1}
.ribbon:before {left:-2em;border-right-width:1.5em;border-left-color:transparent;-webkit-box-shadow:rgba(000,000,000,0.4) 0 0 0;-moz-box-shadow:rgba(000,000,000,0.4) 0 0 0;box-shadow:rgba(000,000,000,0.4) 0 0 0}
.ribbon:after {right:-2em;border-left-width:1.5em;border-right-color:transparent;-webkit-box-shadow:rgba(000,000,000,0.4) -0 0 0;-moz-box-shadow:rgba(000,000,000,0.4) -0 0 0;box-shadow:rgba(000,000,000,0.4) -0 0 0}
.ribbon .ribbon-content:before,.ribbon .ribbon-content:after {border-color:#0e3350 transparent transparent;position:absolute;display:block;border-style:solid;bottom:-1em;content:''}
.ribbon .ribbon-content:before {left:0;border-width:1em 0 0 1em}
.ribbon .ribbon-content:after {right:0;border-width:1em 1em 0 0}
.ribbon-stitches-top {margin-top:2px;border-top:0 dashed rgba(0,0,0,0.2);-moz-box-shadow:0 0 2px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.5);box-shadow:0 0 2px rgba(255,255,255,0.5)}
.ribbon-stitches-bottom {margin-bottom:2px;border-top:0 dashed rgba(0,0,0,0.2);-moz-box-shadow:0 0 2px rgba(0,0,0,0.3);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.3);box-shadow:0 0 2px rgba(255,255,255,0.3)}
.ribbon a {color:white;}
/*變換區*/
.billboard_tab_out {position: relative;z-index: 0;}
.grade_bg_click {color:#fff;font-size:1.3em;width:98%;margin: 0 auto;padding: 1%;}
.grade_bg_click > div {text-decoration: underline;cursor: pointer;}
.grade_bg_click > div:hover {text-decoration: none;}
.grade_click1, .grade_click2, .grade_click3, .grade_click4 {width:calc(100%/4 - .5rem);display: inline-table;text-align: center;margin: 0 auto;}
.grade_content1, .grade_content2, .grade_content3, .grade_content4 {display: none;margin-top: 5%;}    
.image_title {text-align: center;font-size:1.3em;margin: 1% 0;}
.image_title,.image_title a {color: #FFF;text-decoration: underline;background-color: #f12d33;padding: 0.3em;margin: 0;border-radius: 0 0 0.8em 0.8em;}
.active {display: block;animation-name:ani;animation-duration:0.5s;}
@keyframes ani {from {opacity: 0;}to {opacity:10;}}
.grade_A li,.grade_C li {border-bottom: dotted 1px #fff0c4;;}
/*上榜四大關鍵*/
[id*="tab"] {display: none;}
[id*="content"] {display:none;padding: 1rem;width:100%;animation: leftToRight 0.5s ease-in-out;color: #002e75;text-align: center;overflow: hidden;}
#key_points {overflow: hidden;}
#key_points input:checked + label {color: #216CAF;text-decoration: none;}
#tab1:checked ~ #content1,#tab2:checked ~ #content2,#tab3:checked ~ #content3 {display:block;}
#key_points label {cursor: pointer;font-size: 1.5rem;width: calc(100%/3);color: #f12d33;font-weight: 900;font-family: MStiffHeiHK;padding: 2rem 0;text-align: center;text-decoration: underline;border-bottom: dotted 2px #f12d33;}
#lab a:hover {top: initial;}
/*備考資源*/
.month_arrowTitle {text-align:center;background:linear-gradient(to right,#216caf 30%,#0b406f 100%);border-radius:.5em;padding: 0.75rem 0;position:relative;font-family: MStiffHeiHK;}
.month_arrowTitle strong {color: #ffd53b;}
.service-item {width: calc(100%/3 - 1rem);display: flex;margin: 1rem auto 0;}
.service-item:nth-of-type(n+7):nth-of-type(-n+10) {margin: 1.5rem auto;}
.service-item dl {font-size: 1.0rem;width: 100%;background-color: #deeefd;border-radius: 0.5em;}
.service-item dt {font-size: 1.25rem;font-weight: bold;text-align: center;background-color: #4697de;padding: 0.5rem;border-radius: 0.5em 0.5em 0 0;color: white;margin: auto auto 0.5rem;}
.service-item dt a {color: white;}
.service-item dd {padding: 0 2rem 0 3rem;color: #184994;text-indent: -1rem;}
.service-item dd::before {content: '•';padding: 0 0.5rem 0 0;font-size: 1.25rem;}
.service-item .mobile {padding: 0 2rem 0.35rem 3rem;}
.service-item figure {text-align: center;padding: 0.5rem;}
.service-item figure img {margin: auto;}
.number {background-color: #184994;color: #fff;width: 15px;height: 15px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-size: 0.8em;}
.learn-type {text-align: center;margin: 1rem auto auto;}
.learn-type a {background-color: #002e75;color: #fff;padding: 1rem;display: inline-block;margin: 1rem;border-radius: 2rem;text-decoration: none;}
.learn-type a:hover {background-color: #7F2E53;}

@media screen and (min-width: 1201px) {
	#event_master, #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {width: 1200px;margin: auto;}
	.ADLink dd {position: relative;}
	.ADLink dd a::before {content: '☑ ';}
	.ADLink dd a {}
	.photo_intro {width: 80%;margin: auto;}
	#alt_txt a {width: 875px;display: block;margin: auto;}
	#back-top {bottom: 2rem !important;}
	.media-wrap .heroic:nth-of-type(2) {width: 80%;text-wrap: balance;}
	.media-wrap .heroic:nth-of-type(2) dl {margin: auto -6rem 0 auto;padding-right: 15%;}
	.heroic dl dd {padding: 0;}
}
@media screen and (max-width: 1200px) {
	.bgcolor0 {background-size: cover;}
	.classShow dd {width: 100%;}
	.grade_bg_click {font-size: 0.9em;}    
	.grade_subtitle {font-size: 1.1rem;}
	.media-item {width: calc(100%/2);padding: 1rem 0;}
	.ADLink {border-radius: 0;margin:0;bottom:0%;right:0;left: 0;box-shadow: 0px 0px 3px rgb(238, 253, 170);z-index: 7;width: 100%;text-align: center;box-sizing: border-box;}
	.ADLink dd {margin: auto;display: inline-block;}
	.ADLink dd a {text-decoration: underline;font-size: 0.9rem;}	
	.grade_A, .grade_B, .grade_C {justify-content: center;}
	.grade_A li, .grade_C li {width: calc(100% - 0.5rem);}
	.grade_B li, .grade_D li {width: calc(100%/2 - 0.5rem);}
	#Footer .footer-wrap {padding: 1.5rem 0.5rem 5rem;}
	.ribbon:before, .ribbon:after {bottom: 0.25rem;}
	.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {bottom: auto;top: -1rem;}
	.ribbon .ribbon-content:before {transform: rotate(90deg);}
	.ribbon .ribbon-content:after {transform: rotate(-90deg);}
	/*行政學院風雲人物賞*/
	.heroic-box {display: flex;flex-wrap: wrap;align-items: flex-start;padding: 2rem 0 0;}
	.media-wrap .heroic {width: calc(100%/2);}
	.media-wrap .heroic dl {width: 100%;margin: auto;}
	.heroic dl dt, .media-wrap .heroic:nth-of-type(2) dt {margin: auto;text-align: center;}
	.media-wrap .heroic:nth-of-type(2) {text-align: left;}
	.media-wrap .heroic figure {width: 160px;height: 160px;}
	.media-wrap .heroic img {height: 200px;max-width: initial;border-radius: 0 0 40px 80px;}
	.media-wrap .heroic:nth-of-type(2) {position: initial;}
	.heroic:nth-of-type(2) dl {order: 2;}
	.heroic:nth-of-type(2) figure {order: 1;}
	.service-item dd, .service-item .mobile {padding: 0 1rem 0 1.5rem;}
}
@media screen and (max-width:767px) { 
	.sm\:block {display: block;}
	#key_points label {font-size: 1.1rem;line-height: 1.3em;padding: 0.5rem 0;}	
	[id*="content"] {padding: 1rem 0;}
	.photo_intro, .service-item figure, .media-item dl {width: 100%;}
	.grade_content1, .grade_content2, .grade_content3, .grade_content4 {margin-top: 10%;}	
	.grade_click1, .grade_click2, .grade_click3, .grade_click4 {line-height: 2;}
	#back-top {bottom: 10% !important;}
	.ADLink {padding: 0.25rem;}
	.ADLink dd,.ADLink dd a {line-height: 1;}
	.service-item {width: 100%;}
	.media-item figure {margin: auto;}
	.grade_A, .grade_B, .grade_C, .grade_D {font-size: 1.25rem;}
	.grade_A li {font-size: 1.25rem;}
	.grade_B li, .grade_D li {width: calc(100% - 0.5rem);}	
	.grade_C {padding: 1%;}
	.grade_C li strong {display: block;}
	.media-item, .media-wrap .heroic {width: 100%;}
	.grade_title {font-size: 1.5rem;}
	.heroic:nth-of-type(2) {padding-top: 2rem;}	
}