.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;background-color: #f4eada;}
#BodyContentMain {background-color: initial;display: initial;}

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

#BodyContentMain section {margin: 2em auto;border-radius: initial;display: block;width: max-content;width: 100%;line-height: 2.1rem;padding: 4px 12px;font-size: 1.1rem;}
#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.column_1{width: 100%; font-size:1.2rem;}
.column_1 ul li {list-style: decimal;margin-bottom: 2%;}
.column_1 ul li p {margin-left: 20%;margin-right: -2.6%;padding-bottom: 1%;border-bottom: 1px #29a0c2 solid;}
.title_s {padding: 2px 1%;background: linear-gradient(180deg,#af002d 0%,#a45a7b 76.05%);margin: 2px 5px 5px 0px;display: inline-block;color: #fff;font-weight: normal;width: 180px;    text-align: center;font-size: 1.5rem;border-radius: 50px;float: left;}
#BodyContentMain section.column_2 {width: 100%;background-color: #77293f;margin: 0;padding: 2% 0;}
.key123 {width: 1000px;margin: 0 auto;}
.learn123 {width: 1000px;margin: 0 auto;}
.learn123 h2 {font-size: 2.5em !important;color: #fffbbe;text-align: center;margin: 0 0 0.5em !important;min-height: 0em !important;}
.learn123 h3{font-size: 1.7em;width: 100%;text-align: center;}
.learn123 .grid-1 {width: 100%;}
.learn123 .grid-1 .grid-3 {margin: 0 0.5% 15px;padding: 1.1% 2% 1.5%;background-color: #ccc;width: 32%;background: linear-gradient(180deg,#fafffc 0%,#d6c9b6 76.05%);display: flex;    align-content: flex-start;}
.learn123 .grid-1 .grid-3 p {border-bottom: 1px #a55274 solid;width: 100%;height: 94px;}
.learn123 ul li {list-style-type: none;margin-left: -10px;}
.learn123 ul li:before {
    content: '‧';
    color: #d1718d;
    font-size: 2rem;
    vertical-align: bottom;
}
.learn123 .grid-1 .grid-3 p .t1 {background-color: #d46f8c33;display: flex;padding: 1px 7px 1px 12px;border-radius: 2px;letter-spacing: 3px;width: 100%;justify-content: center;}
.telephone {padding: 0.5% 2.1%;background-color: #edece3;display: block;margin: 0 auto;text-align: center;border-radius: 50px;width: fit-content;font-size: 1.2rem;line-height: 2rem;}
.map{width: 100%;}
#BodyContentMain .map img{border-radius: 10px;margin: 2% auto 1%;}


/*想瞭解更多公民與社會科資源*/
.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) {	
.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;}
	
}