.civics_header {background-color: var(--off-white);}
.civics_header a {text-align: center;padding: 0.25rem 0;display: block;outline: 0;}
.civics_header a img {margin: auto;width: 300px;}
:root {
    --blue:#003986;
    --light-blue: #ECF0F7;
    --tiffany: #6AC2CF;
    --blue-green: #106772;
    --yellow: #f3dd16;
    --black: #373737;
    --orange: #FA7600;
    --red: #ED1F1D;
    --off-white: #f4f4f4;
}
body {background-color: initial;font-family: 'Noto Sans TC', sans-serif;}
#BodyContentMain {background-color: initial;display: initial;}
#BodyContentMain section {margin: auto;border-radius:initial;display: block;}
#BodyContentMain .bg1 {background: url(../images/1208102_01.png) repeat-y;}
#BodyContentMain .bg2 {background: url(../images/1208102_top.png) no-repeat right;}
#BodyContentMain .bg-blue {background-color: var(--light-blue);}
#BodyContentMain .bg-off {background-color: var(--off-white);}
#BodyContentMain .bg-tif {/*background-color: var(--tiffany);*/background: linear-gradient(to right,#ff8625 10%,#ffa838 90%);overflow: hidden;}
#BodyContentMain .bg-pic {background: url(../images/study_group_3.jpg);background-size: cover;background-position-y: 80%;padding: 20% 0 0;_height: 600px;display: flex;}

/*公民時事通*/
/*#BodyContentMain section:first-of-type {border-radius: 5rem 0 0 0;}*/
#channel_master {width: 100%;margin: auto auto;padding: 0;position: relative;overflow: hidden;}
.banner_inner2 {width: fit-content;margin: auto;padding: 4rem 0;}
.banner_inner {width: max-content;top: 0;left: 49%;position: relative;}
.civics_banner h1 {font-size: 5rem;color: var(--blue);}
.banner_des {font-size: 3rem;color: var(--black);}
.column_title {font-size: 3.5rem;text-align: center;color: #FFF;}
.column_title span {color: #1b3875;font-weight: bold;}

/*大考學報*/
.arrow_start {background-color: #ff972e;width: 5rem;height: 5rem;border-radius: 50%;display: flex;align-items: flex-start;justify-content: center;margin: auto;position: absolute;left: 0;right: 0;top: -1.5rem;padding: 0.75rem 0 0 0;}
.arrow_start i {transform: rotate(135deg);font-size: 2rem;color: var(--light-blue);}
.arrow_start:hover {opacity: initial;}
.arrow_start:hover i {opacity: 0.5;}
#channel_sec {padding: 2rem 1rem;}
#channel_third, #channel_fifth, #Ask {padding: 3rem 1rem;}
.journal {padding: 1rem 0 0;}
.common_title {color: var(--black);font-size: 2.6rem;font-weight: bold;}
.common_title span {border-bottom: 2px solid #1b60c6;color: #1b60c6;margin: auto 0.5rem auto auto;padding: 0 0 0.35rem 0;letter-spacing: 2px;}
.journal_title {padding: 1rem 0 0;}
.journal figure {width: 20rem;z-index: 2;margin: auto auto auto 1rem;}
.journal figure img {box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;}
.journal_intro {width: calc(100% - 22rem);}
.journal_box {padding: 2rem 0 2rem 2rem;}
.journal_box li {width: calc(100%/3 - 0.5rem);padding: 0rem 1rem;font-size: 1.25rem;border-right: 1px solid rgba(0, 57, 134, 0.2);text-align: justify;}
.journal_box li span {font-size: 1.75rem;display: block;padding: 0.3rem 0;background: linear-gradient(to right,hsla(0,0%,100%,0%) 0%,#f4d780 7%,#fbf9d8 40%,#fbf9d8 80%,#f4d780 93%,hsla(0,0%,100%,0%) 100%);text-align: center;color: #1b3875;margin-bottom: 0.5rem;}
.journal_box li span i {padding: 0 0.5rem 0 0;font-size: 2rem;color:#ff8625;}
.journal_box li > div {padding: 0 0.5rem;}
.journal_box li:nth-of-type(2) span i {padding: 0 0.25rem 0 0;}
.journal_box li:first-of-type {padding: 0rem 1rem 1rem 0;}
.journal_box li:nth-of-type(2) {width: calc(100%/3 + 1rem);}
.journal_box li:last-of-type {border: 0;padding: 0rem 0 1rem 1rem;}
.apply_btn {text-align: center;}
.apply_btn a {color: #FFF;background-color: #34cf53;display: inline-block;padding: 0.3rem 0 .3rem 1.5rem;border-radius: 2rem;margin: auto;font-size: 1.8rem;font-weight: bold;transition: all 0.25s ease;}
.apply_btn a:hover {opacity: initial;background-color: transparent;color: white;}
.apply_btn a:hover i {margin: auto auto auto 0.5rem;}
.apply_btn a i {background-color: white;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;width: 2.5rem;height: 2.5rem;margin: auto auto auto 0.5rem;color: #34cf53;}
.target-fix {position: relative;top: -1rem;display: block;visibility: hidden;}

/*深動課*/
.common_des {font-size: 1.7rem;padding: 2rem 0;line-height: 2.2rem;color: #1b3875;}
.course_box {text-align: center;justify-content: space-around;padding: 0 0 4rem;}
.course_box dl {margin: 1rem auto;width: calc(100%/3);position: relative;}
.course_box dl dt {height: 275px;width: 275px;border-radius: 50%;box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 10%);display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: center;margin: auto;}
.course_box dl:nth-of-type(1) dt {background: url(../images/course-01.png);background-size: cover;}
.course_box dl:nth-of-type(2) dt {background: url(../images/course-02.png);background-size: cover;}
.course_box dl:nth-of-type(3) dt {background: url(../images/course-03.png);background-size: cover;}
.course_box dl dd {font-size: 1.75rem;padding: 0.5rem 0 0;color: #ff7b23;}
.course_box dl:not(:last-of-type):after {content: '\f148';font-family: "Font Awesome 5 Free";font-weight: bold;position: absolute;right: -5%;bottom: 25%;font-size: 2rem;transform: rotate(90deg);color: #ff8a27;}
.advanced .apply_btn a:hover {color: var(--blue-green);}
.open_day {width: 100%;justify-content: center;}
.open_day dt {font-size: 1.3rem;background-color: #1b60c6;color: white;text-align: center;padding: 0.2rem;}
.open_day dd {font-size: 1.35rem;border-bottom: 1px solid rgba(0, 57, 134, 0.2);transition: all 0.25s;width: calc(100%/3 - 2rem);margin: 1rem;background-color: white;border-radius: 2rem 2rem 0 0;overflow: hidden;}
.open_day dd:hover {border-bottom: 1px solid rgba(0, 57, 134, 1);}
.open_day ul li {padding: 1rem 0;text-align: center;border-bottom: 1px #607D8B dotted;}
.open_day ul li:first-of-type {font-size: 1.3rem;background-color: #1b60c6;color: white;text-align: center;padding: 0.5rem 0;}



/*考前讀書會*/
.fourth_out {width: 100%;background: linear-gradient(to right, transparent 50%, white 51%);margin: auto 0 0 auto;}
#channel_fourth {padding: 0;}
.fourth_inner {background-color: white;padding: 2rem 0 2rem 4rem;border-radius: 5rem 0 0 0;width: 95%;margin: auto 0 auto auto;}
.study_list {padding: 3rem 0 0;}
.study_list li {width: calc(100%/2 - 2rem);font-size: 1.25rem;text-indent: -1.5rem;padding: 0 0 1rem 1.5rem;}
.study_list li:nth-of-type(odd) {margin: auto 4rem auto 0;}
.study_list li strong {color: #ff7b23;font-size: 1.5rem;}
.study_list li strong::before {content: '\f192';font-family: "Font Awesome 5 Free";font-weight: bold;padding: 0 0.25rem 0 0;}

/*線上影音館*/
#BodyContentMain .VueCarousel {background-color: transparent;}
#video {position: relative;padding: 2rem 0;}
#video::before {content: '';width: 90%;height: 300px;background: linear-gradient(to right, #1450a7 0%, #3395e6 100%);position: absolute;left: -50%;top: 0;border-radius: 0 5rem 5rem 0;}
.video_item img {border-radius: 5rem 0.25rem 5rem 0.25rem;width: 500px;background: linear-gradient(to right, #dfdfdf 0%, #ffffff 100%);}
.video_item a {position: relative;}
.video_item a::before {content: '\f04b';font-family: "Font Awesome 5 Free";font-weight: bold;background-color: white;color: var(--orange);font-size: 1rem;border-radius: 50%;width: 3rem;height: 3rem;display: flex;align-items: center;justify-content: center;position: absolute;right: 10%;bottom: 10%;margin: auto;z-index: 1;box-shadow: rgb(0 0 0 / 5%) 0px 6px 24px 0px, rgb(0 0 0 / 8%) 0px 0px 0px 1px;}
.video_item a:hover {opacity: initial;}
.video_item a:hover::before {background-color: var(--orange);color: white;transition: all 0.25s;}
.video_item .contrast {filter: contrast(125%);}
.video_item .brightness {filter: brightness(1.25);}
.video_item dl {width: calc(100% - 500px);padding: 0 2rem;}
.video_item dl dt {font-size: 1.9rem;padding: 0 0 0.3rem 0;color: #ff7b23;border-bottom: dotted 1px;margin-bottom: 0.5rem;}
.video_item dl dd {padding: 0 0 0.5rem 0;font-size: 1.1rem;}
.video_item dl dd:first-of-type {font-size: 1.25rem;color: #1b3875;}
.decimal {list-style-type: decimal;margin: auto auto auto 1rem;}

/*想瞭解更多公民與社會科資源*/
.chosen-list p {line-height: initial;font-size: 1.4rem;}
#Ask h1 {color: #1b60c6;border-bottom: solid;}
#formlist .input_bg {background-color: #1b60c6;}

@media screen and (min-width: 1201px) {	
    .column_item {position: relative;}
    .column_item::before {position: absolute;content: '';width: 44rem;height: 34rem;background: linear-gradient(to bottom, #1590b2 10%, #34cf53 30%);border-radius: 50%;left: -12rem;bottom: -75%;}
    .journal_box li:first-of-type {letter-spacing: 1px;}
}

@media screen and (min-width: 121px) and (max-width: 1850px) {	
   
}
@media screen and (max-width: 1200px) {	
    .course_box {padding: 0;}
    .course_box dl dt {width: 200px;height: 200px;}
    .study_list li {width: 100%;text-indent: -1.875rem;padding: 0 0 1rem 1.875rem;}    
    .study_list li:nth-of-type(odd) {margin: auto;}
    #video {width: 90%;margin: auto;}
    .video_item dl {width: 100%;}
    .fourth_inner {width: 100%;padding: 2rem;}
    #channel_fifth {padding: 3rem 1rem 0;}
    #BodyContentMain .bg-pic {height: auto;background-size: contain;padding: 45% 0 0;background-position-y: 0;}    
    .course_title span {display: block;width: fit-content;margin: auto auto auto 0;}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .banner_inner {width: 75%;left: 35%;}    
    .journal_box li, .journal_box li:nth-of-type(2), .journal_box li:last-of-type {width: 100%;border: 0;padding: 0 0 1rem;}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
}

@media screen and (min-width: 768px) and (max-width: 991px) {
}

@media screen and (max-width: 767px) and (orientation: portrait) {	    
	.banner_inner {top: 0;left: auto;right: 0;position: inherit;transform: scale(1.2);order: 2;}
	.banner_inner2 {top: 0;right: 0;position: inherit;order: 1;padding: 3rem 0.5rem;}
	.column_title {font-size: 2rem;}
    .column_title span {display: block;}
	.common_title {font-size: 2.0rem;}    
    .study_title span {display: block;width: fit-content;margin: auto auto auto 0;}
    #channel_sec, #channel_third, #channel_fifth, #Ask {padding: 1rem;}    
    .open_day dd {width: 100%;}
    .open_day ul li {padding: 1rem 0;}
    .video_item img {width: 100%;}
    .study_list {padding: 1rem 0 0;}
    #video::before {height: 180px;}
    .course_box dl {width: 100%;}    
    .course_box dl:not(:last-of-type):after {right: 0;transform: rotateX(180deg);}
    .course_des {padding: 2rem 0 0;}
    .journal_box {padding: 0;}
    .journal_box li, .journal_box li:nth-of-type(2) {width: 100%;} 
    .journal_title {padding: 1rem 0;}
    .journal .journal_box li {padding: 1rem;border: 0;}    
    .journal figure {width: 15rem;margin: auto;}
    .journal_intro {width: 100%;}
    #Ask h1 {font-size: 2.0rem;}
    #video {padding: 2rem 0 0;}
}