.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: 1.5em auto;border-radius: initial;display: block;width: 1200px;font-family: Arial, "Microsoft JhengHei", 微軟正黑體, "LiHei Pro", 儷黑體, PMingLiu, 新細明體, sans-serif;}
#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;}

.column_1 ul li {width: 18.2%;display: inline-grid;margin: 0 0 0 1.3%;}
.column_1 ul li img {width: 95%; }
.column_4 ul li {display: inline-block;line-height: 1rem;padding: 4px 12px;width: 33%;text-align: center;font-size: 1.4rem;color: #365886;font-weight: bold;}
.column_4 ul li img {border-radius: 5px;}

header{}
header.top_map{background-color: #e8e5e7;}
#BodyContentMain h2 {font-size: 2em;margin: 0 0 0.4em;min-height: 0.5em;line-height: 1.25;text-align: center;font-family: Verdana,MStiffHeiHK;font-family: 'Noto Sans TC', sans-serif;}
#BodyContentMain h3 {font-size: 1.5em;margin: 7.5px 0;color: #fff;text-align: center;padding: 4px 4px 2.5px;letter-spacing: 7px;}
#BodyContentMain .column_2 h4 {background-color: #fff7ea;padding: 4px 12px;font-size: 1.15rem;font-family: 'Noto Sans TC', sans-serif;}
p {line-height: 2.1rem;padding: 4px 12px;font-size: 1.05rem;}
.t1{ color:#23577c;}
.t2{ color:#e79a00;}
.t3{ color:#e95429;}
.t4{ color:#6a94ce;}
.color_1{ background-color:#23577c;}
.color_2{ background-color:#f6b207;}
.color_3{ background-color:#e95429;}
.color_4{ background-color:#6a94ce;}

.column_3 p:nth-child(2n-1){background-color:#fff4ef}




/*想瞭解更多公民與社會科資源*/
.chosen-list p {line-height: initial;font-size: 1.4rem;}
#Ask h1 {color: #607D8B;border-bottom: solid;font-size: 1.7rem;}
#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: 1.2rem;}
    #video {padding: 2rem 0 0;}
	#BodyContentMain section {width: 100%;}
	#BodyContentMain h2 {font-size: 1.6em;margin: 0 5% 0.4em;}
	#BodyContentMain h3 {font-size: 1.3em;}
	#BodyContentMain .column_2 h4 {padding: 4px 12px;font-size: 1.1rem;}
	.column_1 ul {margin: 5% 5% 12%;display: inline-flex;flex-direction: row;flex-wrap: wrap;justify-content: center;}
	.column_1 ul li {width: 160px;}	
	.column_4 ul li {padding: 4px 12px 14px;width: auto;}
	p {line-height: 1.6rem;padding: 7px 12px 10px;font-size: 1rem;}
	.ask-title {font-size: 1.05rem;}

	
}