.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;}
a:hover{ opacity:0.7}
: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;
    background: linear-gradient(to left ,#e6e1e7 0% ,#ffffff 50%,#ffffff 20% ,#e6e1e7 100%);
}
.top_color {
    background: linear-gradient(to left ,#e8ac2a 0% ,#f4d89a 50%,#446cb1 100%);
    height: 38px;
}

#BodyContentMain {background-color: initial;display: initial;background:}

#BodyContentMain section {
    margin: 0em auto;
    border-radius: initial;
    display: block;
    width: max-content;
    width: 1000px;
    padding: 0px 12px 4px;
    font-size: 1.1rem;
    background-color: #fff0;
}

.sub_title {
    width: 20%;
    float: left;
    background-color: #f8b300;
    color: #fff;
    font-family: 'Noto Serif TC', serif;
    font-size: 1.7rem;
    font-weight: bold;
    padding: 5% 2% 3.5% 2%;
    margin-left: 6%;
}
.sub_title .t {
    color: #492a05;
    font-family: "Microsoft YaHei",Meiryo, "Meiryo UI", Arial, sans-serif;
    border: 1px #fff solid;
    border-left: 0px;
    border-right: 0px;
    text-align: center;
    padding: 5px;
    margin-top: 10px;
	font-size: 1.5rem;
}

.piechart {
    font-family: CHei3HK-Bold-B5pc-H, CHei3HK;
    margin-top: -11%;
    display: inline-block;
    width: 100%;
    background: url(../images/1301085_bgmap.png) no-repeat 130% 23%;
}

.piechart span { 
    color: #EA5427;

}


.piechart_img {}  
.piechart_img img{ width:70%;font-family: 'Noto Serif TC', serif;}
.piechart_img svg {
    width: 105%;
    height: 761px;
    font-weight: bold;
    margin-top: -2%;
}

.linebg {
    background: url(../images/1301085_linebg.png) no-repeat 100% 0,#fff !important;
    background-size: inherit;
}
.lecture {
    padding: 2% 0 1%;
}
.lecture h1 {
    color: #EA5427;
    font-size: 3rem;
    font-family: 'Noto Serif TC', serif;
    font-family: "CHei3HK","microsoft yahei";
	letter-spacing: -1px;
	text-align: center;
}
.lecture span {
    color: #EA5427;
    font-size: 2.2rem;
}
.lecture table {
    border-collapse: collapse;
    width: 98%;
    margin: 0 auto;
}
.lecture table tbody tr th {
    color: #fff;
    letter-spacing: 1px;
    font-weight: normal;
    font-size: 1.4rem;
    border-left: 1px #fff dotted;
}
.lecture table tbody tr td {
    border-bottom: 1px #607D8B solid;
    padding: 7px 0;
}
.lecture table tbody tr td:first-child {text-align: center;border-right: 1px #607D8B dotted;}
.lecture table tbody tr td:nth-child(2) {text-align: center;border-right: 1px #607D8B dotted;}
.lecture table tbody tr td:nth-child(4) {text-align: center}
.lecture table tbody tr .point-line{text-align: center;border-right: 1px #607D8B dotted;}
.lecture table tbody .tr_bg1 {background-image: linear-gradient(to right, #871805 0%, #ef523f 100%);}

.learning {
    padding: 1% 0 2%;
}
.learning h1 {
    color: ;
    font-size: 2em;
    font-family: 'Noto Serif TC', serif;
    font-family: "CHei3HK","microsoft yahei";
	text-align: center;
}
.learning ul {text-align: center;}
.learning ul li {
    width: 32.5%;
    display: inline-grid;
    font-size: 1.4rem;
}
.learning ul li a {
    border-radius: 0 30px;
    padding: 2%;
    background-color: #00BCD4;
    border-bottom: 5px #d2d1d1 solid;
    color: #fff;
}
.learning ul li a:hover{}
.txt108 {
    position: absolute;
    top: 53%;
    right: 15%;
    width: 16.5%;
    margin: 0 auto;
}
.txt108 {
    position: relative;
    top: 264px;
    width: 258px;
    margin: 0 auto;
    left: 39%;
}
.txt108 p {
    font-family: Arial, Microsoft JhengHei, "微軟正黑體", LiHei Pro, "儷黑體", PMingLiu,"新細明體", sans-serif;
    font-weight: bold;
    letter-spacing: -1px;
    font-size: 1.4rem;
    line-height: 2rem;
    position: absolute;
}
.t_red {color: #EA5527;}


/*想瞭解更多公民與社會科資源*/
.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;}
.main_title{text-align: right;}
.main_title .t1, .main_title .t3 {
    font-family: 'Noto Serif TC', serif;
    font-size: 4.4rem;
    line-height: 4.5rem;
    font-weight: 900;
    background-image: linear-gradient(to bottom, #015e89 0%, #2dbeff 100%);
    background-image: linear-gradient(to bottom, #3b82d9 0%, #1e4485 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -2px;
}
.main_title .t2 {
    letter-spacing: 2px;
    font-family: 'Noto Serif TC', serif;
    font-size: 4.5rem;
    background-image: linear-gradient(to bottom, #EA5427 20%, #ff9778 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    padding: 0;
}
.main_title .t3 {
    display: block;
    margin-top: -0.7rem;
}
.main_title .t4 {
    margin-top: 1%;
    color: #fff;
    padding: 1% 2%;
    background-color: #ccc;
    background-image: linear-gradient(to bottom, #2dbeff 0%, #015e89 100%);
	background-image: linear-gradient(to bottom, #3b82d9 0%, #1e4485 100%);
    display: inline-block;
    border-radius: 50px;
    font-size: 2rem;
}




@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) {	
.wrap_all{
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    -webkit-text-size-adjust: 100%;
    }
    #BodyContentMain section {display: block;width: max-content;width: auto;}    
	.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.4rem;}
    #video {padding: 2rem 0 0;}
	.learn123 {width: auto;margin: 0 auto;}
	.learn123 h2 {font-size: 1.55em !important;}
	.learn123 h3 {font-size: 1.4em}
	.learn123 .grid-1 .grid-3 {margin: 0 auto 4%;padding: 1.1% 3% 1.5%;background-color: #ccc;width: 86%;}
	.key123 {width: 100%;}
	.grid-1, .grid-2, .grid-3 {display: flex;flex-wrap: wrap;flex-direction: column;}
	.telephone {display: inherit;margin: 0 auto 7%;padding: 0.5% 4.1%;}
	.title_s {float: none;width: 160px;font-size: 1.35rem;}
	.column_1 ul li p {margin: 0 0 0 5%;font-size: 1.05rem;text-align: justify;}
	#BodyContentMain section.column_1 {width: 87%;font-size: 1.2rem;}
	.learn123 .grid-1 .grid-3 p {height: auto;font-size: 1.05rem;}
	.learn123 ul li {margin-left: -10px;font-size: 1rem;line-height: 1.8rem;}
	.main_title {text-align: center;}
	.main_title .t1, .main_title .t3 {font-size: 2.9rem;}
	.main_title .t2 {display: inline-block;font-size: 2.4rem;line-height: 2.4rem;background-clip: text;margin: -2% 0 -3% 1%;letter-spacing: 0;}
	.main_title .t4 {font-size: 1.9rem;margin-top: 0%;color: #fff;padding: 1% 6%;}
	.sub_title {width: 50%;font-size: 1.5rem;margin-left: 1%;}
	.sub_title p{line-height: 1.6rem}
	.piechart_img {overflow: hidden;}
	.piechart_img svg {width: 118%;height: auto;font-weight: bold;margin-top: 7%;}
	.lecture h1 {font-size: 2.4rem;line-height: 2.4rem;margin: 6% 4% 3%;font-family: 'Noto Serif TC', serif;font-weight: bold;}
	.lecture span {font-size: 1.75rem;}
	.lecture table tbody tr th {letter-spacing: 0px;font-size: 1.2rem;}
	.lecture table tbody tr td {padding: 7px 1%;font-size: 1.1rem;line-height: 1.45rem;}
	.learning ul li {width: 78%;border-radius: 0 25px;font-size: 1.3rem;margin-bottom: 1%;}
	.learning {padding: 3% 0 7%;}
	.ask-title {font-size: 1.07rem;}
	.piechart {margin-top: -8%;}
    .txt108 {position: initial;width: 248px;margin: 16% auto -5%;}
    .txt108 p {font-weight: normal;letter-spacing: -1px;font-size: 1.33rem;position: inherit;}
	
}