@charset "utf-8";
@import url(normalize.css);
@import url(fonts.css);

/* CSS Document */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-size: 100%;
    font-family: 微軟正黑體, "Microsoft JhengHei", sans-serif;
    margin: 0 auto;
    padding: 0;
    line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
}

figure {
	text-align: center;
}

a {
	color: #004e98;
	text-decoration: none;
}

a:hover {
	opacity: 0.9;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}

h2 {
	font-size: 1.75rem;
}

/*h2:before {
    content: "";
    border-top: .2rem solid #499bea;
    width: 3rem;
    display: inline-block;
    transform: translateY(6.5rem);
    position: absolute;
    padding: 2rem 0 0 0;
}*/

h3 {
	font-size: 1.5rem;
	color: #004e98;
	text-align: center;
	padding: 40px 0 20px 0;
}

p {
	font-size: 1.125rem;
}

.blue , .share_box.blue a {
	color: #004e98;
}

.graybg {
	background-color: #eef0f3;
}

.pad3rem {
	padding: 0 0 3rem 0;
}

.bline {
	width: 3rem;
    height: 3px;
    background-color: #499bea;
    display: block;
    position: relative;
    margin: 6% 0;
}
@media (max-width: 768px) {
	.bline {
		margin: 3% 0;
	}
}
@media (max-width: 480px) {
	.bline {
		margin: 6% 0;
	}
}

.btn {
  	color: #fff;
  	text-align: center;
	display: block;
	color: #004e98;
	margin: 0 auto;
}

.btn a {
	padding: 10px 40px;
	border: solid 1px #004e98;
}

.btn a:hover {
	padding: 10px 40px;
	color: #fff;
	background-color: #004e98;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}

.img-container {
  width: 100%;
  height: 100%;
  display: flex;
}

.img-container .featured-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.custom-object-fit {
  position: relative;
  background-size: cover;
  background-position: center center;
}

.custom-object-fit .featured-image {
  opacity: 0;
}

.content_wrapper figcaption {
    margin: 2rem 0 3rem 0;
    text-align: justify;
}

.content_wrapper figcaption:before {
    content: "";
    border-top: .1rem solid #499bea;
    width: 3rem;
    display: inline-block;
    transform: translateY(-1rem);
    position: absolute;
    padding: 10px 0 0 0;
}

/* header */
header {
    display: table;
    width: 100%;
    padding: 11px 0;
    border-bottom: 1px solid #e1e1e1;
}

.logo_box {
	color: #004e98;
	font-size: 1.6rem;
	font-weight: bold;
	float: left;
}

i.icon-cnalogo {
    font-size: 1.5rem;
    margin: 0 10px 0 0;
}

.feedback_box {
	float: right;
    line-height: 2.375em;
}

.support_btn {
	float: left;
	margin: 0 0.5rem 0 0;
	font-size: 1rem;
}
.support_btn a {
	color: #fff;
    padding: 5px 10px;
    background-color: #004e98;
}
.support_btn_m {
	display: none;
}

.feedback {
	float: right;
	font-size: 1.6rem;
	line-height: 1.5em;
}

.wrapper {
	max-width: 1280px;
	margin: 0 auto;
	clear: both;
}
@media (max-width: 1280px) {
	.wrapper {
		width: 96%;
	}
}
@media (max-width: 640px) {
	.wrapper {
		width: 90%;
	}
}

/* section */
section {
	background-repeat: no-repeat;
	background-size: 100% 80px;
	background-image: linear-gradient(to bottom, #eef0f3, rgba(255, 255, 255, 0));
}

.bottom_info {
	width: 100%;
	display: table;
	padding: 1rem 0;
	vertical-align: middle;
	color: #697A94;
}
.share_box {
	font-size: 1.5rem;
	display: table-cell;
}

.share_box a {
	padding: 0 10px 0 0;
	color: #697A94;
}
.share_box a:nth-child(2) {
	padding: 0;
} 

.date {
	text-align: right;
	font-size: 0.875em;
	display: table-cell;
}

.maintopic {
	width: 100%;
	display: table;
	clear: both;
	color: #fff;
	padding: 40px 0 0 0;
	position: relative;
}

.maintopic a {
	color: #fff;
}

.maininfo {
	float: left;
	width: 100%;
	height: auto;
	max-width: 32%;
	min-height: 500px;
	overflow: hidden;
	display: table-cell;
    position: relative;
   	background-color: #004e98;
}
.tag {
	padding: 1.6rem;
	background-color: #499bea;
	font-size: 1.25rem;
	position: absolute;
    display: inline-block;
    z-index: 1;
    font-weight: bold;
}
@media (max-width: 768px) {
	.tag {
		padding: 1.4rem;
	}
}

.infobox-1st {
	position: absolute;
	bottom: 0;
	margin: 8%;
}

.mainpic {
	float: right;
	width: 100%;
	height: auto;
	max-width: 68%;
	height: 500px;
	overflow: hidden;
	display: table-cell;
}
@media (max-width: 1024px) {
	.maininfo {
		max-width: 40%;
	}
	.mainpic {
		max-width: 60%;
	}
}
@media (max-width: 768px) {
	.maininfo {
		max-width: 100%;
	    min-height: auto;
	}
	.mainpic {
		max-width: 100%;
	}
	.infobox-1st {
		position: relative;
		margin: 4%;
	}
}
@media (max-width: 480px) {
	.mainpic {
		height: 300px;
	}
	.infobox-1st {
		position: relative;
		margin: 8%;
	}
}

/* list_box */
.list_box {
	position: relative;
}
.list_box ul {
	display: table;
}
.list_box ul li {
	width: 32%;
    float: left;
    margin: 0 2% 2% 0;
    list-style: none;
    padding: 12px;
    background-color: #fff;
    box-shadow: 0 2px 2px 0 rgba(200, 200, 200, 0.25);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0);
}
.list_box ul li a p {
	color: #232323;
}
.list_box ul li:hover {
	-webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
    box-shadow: 0 4px 4px 0 rgba(200, 200, 200, 0.8);
    transition: all 0.1s;
}
.list_box ul li:nth-child(3n) {
	margin: 0 0 2% 0;
}

.list_box ul li h3 {
    text-align: left;
    padding: 10px 0;
    height: 90px;
}
.list_box .bottom_info {
	padding: 1rem 0 0 0;
}
@media (max-width: 768px) {
	.list_box ul li {
		width: 49%;
	}
	.list_box ul li:nth-child(2n) {
		margin: 0 0 2% 0;
	}
	.list_box ul li:nth-child(3n) {
    	margin: 0 0 2% 0;
    	float: right;
	}
}
@media (max-width: 480px) {
	.list_box ul li , .list_box ul li:nth-child(2n), .list_box ul li:nth-child(3n){
		width: 100%;
		margin: 0 auto 6% auto;
	}
}

.pic {
	height: 290px;
}
@media (max-width: 1024px) {
	.pic {
		height: 250px;
	}
}
@media (max-width: 480px) {
	.pic {
		height: 267px;
	}
}
@media (max-width: 375px) {
	.pic {
		height: 245px;
	}
}
@media (max-width: 320px) {
	.pic {
		height: 210px;
	}
}

.mask, .mask2 {
	width: 100%;
	height: 100px;
	position: absolute;
	bottom: 0;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 21%, #eef0f3);
}

.mask .btn, .mask2 .btn {
	position: relative;
	margin: 0 auto;
	top: 50%;
}

.visually-hidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

/* footer */
footer {
	font-size: 0.875rem;
	color: #697a94;
	text-align: center;
	padding: 1rem 0;
}

@media (max-width: 640px) {
	.mhide {
		display: none;
	}
	.support_btn_m {
	    display: inline-block;
	    float: left;
	    font-size: 1.75rem;
	    margin: 0 0.8rem 0 0;
	}
}

/* back2top */
.cd-top {
	color: #fff;
    font-size: 1.2rem;
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    position: fixed;
    bottom: 40px;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* image replacement properties */
    overflow: hidden;
    background: #697a94 no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 100%;
    z-index: 10;
}
.cd-top.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
}

.cd-top.cd-fade-out {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5;
}

.no-touch .cd-top:hover {
    background-color: #e86256;
    opacity: 1;
}

@media only screen and (min-width: 768px) {
    .cd-top {
        right: 20px;
        bottom: 20px;
    }
}

@media only screen and (min-width: 1024px) {
    .cd-top {
        height: 50px;
        width: 50px;
        line-height: 50px;
        right: 30px;
        bottom: 30px;
    }
}

/* Gabby */
.ellipsis_6 { height: 80px;}

.in-app { display: none;}
.in-app-module .in-app { display: inline-block;}
.in-app-module .not-in-app{display: none;}