/*reset*/
body.downloadBg{
	color: #fff;
	font: 18px/170% "Noto Sans TC","微軟正黑體","Helvetica Neue",sans-serif;
	font-weight: 400;
	background:#fff url(../images/bg_01.jpg) center top no-repeat; 
	background-size: cover; 
	background-attachment: fixed;
}
body.bgN {color: #666666;background:#fff ;}
body.wh{ background: #fbfbfb; color: #222;}

/*reset end*/

/*-----------------頁面-----------------*/
.bgN .wrapper {  padding-top: 40px; }
.wrapper { padding-top: 100px;}
.container { background: none; }

h1.title { margin-bottom: 40px; text-align: center; font-size: 36px; line-height: 1.2em; font-weight: 400; }


/*按鈕*/
.btn {  }
.btn a { display: inline-block; width: 40%; margin: 0 10px; line-height: 54px; text-align: center; font-weight: 500; color: #fff; background: #0db2cf linear-gradient(90deg,rgba(13, 178, 207, 1) 0%, rgba(55, 150, 204, 1) 30%, rgba(175, 135, 255, 1) 100%); border-radius: 4px; transition: 0.2s; }
.btn a.bt_gray { background: #666; }
.btn a:hover { background: #0db2cf; }

.imgbox { margin-bottom: 20px; }
.imgbox img { display: block; max-width: 100%; }

.whitebox { padding: 20px 25px; color: #06162d; background: rgba(255,255,255,0.6); }

.textshadow { text-shadow: rgba(32,42,76,0.5) 0.1em 0.1em 1em; }

/*兩欄*/
.columnArea { display: flex; align-items: stretch; min-height: calc(100vh - 100px); }
.columnArea .pagesize { display: flex; align-items: center; padding: 20px; }
.column_inner { flex: 1 1 auto; padding: 30px 35px;  border-radius: 4px; }
/*兩欄_說明*/
.column_text { align-self: center; padding: 20px 10% 40px; }
.textInner { max-width: 640px; margin: 0 auto;}
.textInner .columnTitle { max-width: 527px;  }
.textInner .subTitle { margin-bottom: 10px; font-size: 30px; line-height: 1.4em; font-weight: bold; text-shadow: rgba(32,42,76,0.5) 0.1em 0.1em 1em; }
.textInner p{ line-height: 1.5;}
/*兩欄_圖片欄*/
.column_img { flex: 0 1 50%; max-width: 613px; background: url(../images/screen_01.png) right center no-repeat; background-size: 100% auto; }

.detailList {  }
.detailList li { display: flex; padding: 10px 0; border-bottom: solid 1px rgba(66,59,70,0.25); }
.detailList li:nth-last-child(1) { border: none; }
.detailList .title { flex: 0 0 auto; width: 6.5em; font-weight: bold; }
.detailList .text {  }
.detailList .title, .detailList .text{ font-size: 1.125rem; line-height: 1.5;}

/*行事曆*/
.calender_box{ padding-bottom: 30px; }
.calender_box img{ width: 100%; height: auto;}
.calender_box h1 { font-size: 58px; line-height: 1.2em; margin-bottom: 20px; }
.calender_box .info_com { display: flex; margin-bottom: 30px; }
.calender_box .info_com .block { flex: 1; border-right: 1px solid #a7a7a7; padding-right: 20px; margin-right: 20px; }
.calender_box .info_com .block:last-child { border-right: none; padding-right: 0px; margin-right: 0px;}
.info_com h2 { color: #ff012a; font-size: 24px; margin-bottom: 10px; }
.info_com li { position: relative; padding-left: 100px; }
.info_com li span { position: absolute; top: 0; left: 0; }
.calender_title { position: relative; text-align: center; margin-bottom: 20px; padding: 0 140px; }
.calender_title h2 { line-height: 60px; border: 1px solid #0d68a6; color: #0d68a6; max-width: 500px; width: 100%; display: inline-block; border-radius: 5px; font-size: 30px; }
.calender_title::after { content: ""; position: absolute; top: 5px; right: 0; width: 128px; height: 43px; background: url('../images/icon_onair.png') no-repeat; background-size: contain;  }
.calender_main { margin-bottom: 30px; }
.cal_head { display: flex; background-color: #ebebeb; margin-bottom: 10px; }
.cal_head .item { flex: 1; text-align: center; line-height: 50px; font-size: 24px;text-transform:uppercase;   }
.cal_head .item:first-child, .cal_head .item:last-child { background-color: #0d68a6; color: #fff; }
.cal_body { display: flex; flex-wrap: wrap;border-top: 1px solid #bbb; border-left: 1px solid #bbb; margin-bottom: 30px; }
.cal_body .item { width: 14.285%; padding: 10px; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; }
.cal_body .day { font-size: 22px; line-height: 1em; margin-bottom: 10px; }
.cal_body .day.holiday { color: #0d68a6; }
.cal_body .day span { margin-left: 10px; display: none; }
.cal_body ul { font-size: 18px; }
.cal_body .item.off ul { display: none; }
.cal_body li { background-color: #ededed; letter-spacing: 0; background-position: right 5px center; background-repeat: no-repeat; background-size: auto 18px; border-radius: 3px; margin-bottom: 3px; padding: 0 5px; }
.cal_body li.lv1 { background-image: url('../images/lv1.png');  }
.cal_body li.lv2 { background-image: url('../images/lv2.png');  }
.cal_body li.lv3 { background-image: url('../images/lv3.png');  }

/*影片box*/
.videoBox{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.videoBox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.videoIntro { display: flex; }
.videoIntro_video { flex: 0 0 55%; margin-right: 40px; }
.videoIntro_inner {  }
.videoIntro_inner h3 { margin-bottom: 15px; font-size: 26px; color: #005bab; font-weight: 500; }
/*影音*/
.list_video { display: flex; flex-wrap: wrap; }
.list_video li { flex: 0 1 calc((100% - 40px) / 3 ); position: relative; margin: 0 20px 40px 0; }
.list_video li:nth-child(3n) { margin-right: 0; }
.videoImg { position: relative; margin-bottom: 20px; }
.videoImg::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0, 0, 0, 0.5) url(../images/icon_video_01.png) center no-repeat; transition: 0.3s; }
.videoImg img { width: 100%; }
.list_video p { font-size: 21px; font-weight: 400;}
.list_video p.date { font-size: 18px; font-weight: 300; color: #898989; }
.list_video a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 3; }
.list_video li:hover .videoImg::after { background-color: rgba(0, 0, 0, 0.4); }
/*影音pop*/
.popup_box.popup_video { padding: 20px; }
.video-box { position: relative; padding-bottom: 56.25%; overflow: hidden; }
.video-box iframe { position: absolute; top: 0;left: 0; width: 100%; height: 100%; }
/*popup*/
.area_popup { }
.popup_bg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000; background: rgba(0, 0, 0, 0.5); }
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 30px)); width: calc(100% - 20px); max-width: 720px; z-index: 10001;  }
.popup_close { display: block; width: 21px; height: 21px; margin: 0 0 10px auto; background: url(../images/btn_popup_close.png) center no-repeat; }
.popup_box { width: 100%; padding: 60px 40px 40px; background: #fff; border-radius: 10px; }

/*FAQ*/
/*NAV*/
.innernav01 {
  margin-bottom: 30px;
  padding: 0 25px;
  border-top: solid 1px #c8d6de;
  border-bottom: solid 1px #c8d6de;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.innernav01.start {
  justify-content: flex-start;
}

.innernav01 a{
  position: relative;
  display: inline-block;
  font-weight: 400;
  padding: 0 10px;
  line-height: 60px;
  font-size: 22px;
  color: #1b1b1b;
}

.innernav01 a:hover {
  color: #5062cb;
}

.innernav01 a.on {
  position: relative;
  padding: 0 20px;
  font-weight: bold;
  color: #5062cb;
}

.innernav01 a.on::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #5062cb;
}

.innernav01 .title{
  font-weight: 400;
  padding: 0 10px;
  line-height: 60px;
  font-size: 22px;
  color: #1b1b1b;
}

/*faq_list*/
.faq_qalist {
  margin-bottom: 40px;
}

.faq_qalist .que {
  position: relative;
  min-height: 48px;
  padding: 15px 40px 15px 30px;
  cursor: pointer;
  border-bottom: solid 1px #eee;
}

.faq_qalist .que::before {
  content: "";
  display: block;
  position: absolute;
  top: 25px;
  left: 8px;
  width: 8px;
  height: 8px;
  background: #5076cb;
  border-radius: 4px;
}

.faq_qalist .que::after {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  right: 0px;
  width: 20px;
  height: 20px;
  background: url(../images/icon_faq_open.png) center no-repeat;
  background-size: contain;
  transition: 0.3s;
}

.faq_qalist .open .que::after {
  transform: rotate(90deg);
}

.faq_qalist .ans {
  display: none;
  padding: 15px 40px 15px 30px;
  background: #f5f5f5;
}

.faq_qalist .ans a{
  color: #158ce8;
  text-decoration: underline;
}

.faq_qalist .ans .imgbox {
  margin-bottom: 10px;
}

.faq_qalist p{
  line-height: 1.5;
}


@media screen and (max-width: 1024px) {
	/*兩欄_說明*/
	.column_text { align-self: center; padding: 20px 40px; }

	.textInner { max-width: 530px; }
	/*行事曆*/
	.cal_body li { text-align: center; background-position: center bottom 10px; padding-bottom: 30px; }
}


/*mobile*/
@media screen and (max-width: 800px) {
	.web{ display:none; }
	.mobile{ display:block; }

	body { font-size: 16px; }

	.bigT { font-size: 16px; }
	.biggerT { font-size: 18px; }

	.wrapper { padding-top: 60px; }
	.content{ padding: 20px 0 0 0;}
	
	.header .pagesize { height: 60px; }
	.header a.logo { width: 150px; height: 35px; }
	.btn a { display: block; margin: 0 auto 10px; width: 100%; max-width: 300px;  }
	
	.column_text { padding: 20px; }
	.textInner { max-width: 100%; text-align: center; }
	.textInner .columnTitle { max-width: 300px; margin: 0 auto 10px; }
	.textInner .whitebox { text-align: left; }

	.column_img { display: none; }

	h1.title { margin-bottom: 20px; font-size: 24px;}
    
  /*行事曆*/
  .calender_box img.web{ display: block;}
  .calender_box img.mobile{ display: none;}
  .calender_box h1 { font-size: 30px; line-height: 1.2em; margin: 20px 0; }
	.calender_box .info_com { display: block; margin-bottom: 20px; }
	.calender_box .info_com .block { border-right: none; padding-right: 0px; margin-right: 0px; border-bottom: 1px solid #a7a7a7;  padding-bottom: 10px; margin-bottom: 10px; }
	.calender_box .info_com .block:last-child { border-bottom: none;  padding-bottom: 0px; margin-bottom: 0px;}
	.info_com h2 { font-size: 24px; margin-bottom: 10px; }
	.info_com li { padding-left: 90px; margin-bottom: 5px; }
	.calender_title { position: relative; text-align: center; margin-bottom: 20px; padding: 0 110px 0 0; }
	.calender_title h2 { line-height: 40px; font-size: 20px; }
	.calender_title::after { top: 5px; right: 0; width: 100px; height: 33px;  }
	.calender_main { margin: 0 -20px;  }
	.cal_head { display: none; }
	.cal_body { display: block; border: none; }
	.cal_body .item { width: auto; padding: 0px; border: none; }
	.cal_body .item.off { display: none; }
	.cal_body .day { font-size: 20px; line-height: 1em; background-color: #ebebeb; margin-bottom: 0px; padding: 10px; }
	.cal_body .day::before{ display: inline; }
	.cal_body.m01 .day::before{ content: '01/'; }
	.cal_body.m02 .day::before{ content: '02/'; }
	.cal_body.m03 .day::before{ content: '03/'; }
	.cal_body.m04 .day::before{ content: '04/'; }
	.cal_body.m05 .day::before{ content: '05/'; }
	.cal_body.m06 .day::before{ content: '06/'; }
	.cal_body.m07 .day::before{ content: '07/'; }
	.cal_body.m08 .day::before{ content: '08/'; }
	.cal_body.m09 .day::before{ content: '09/'; }
	.cal_body.m10 .day::before{ content: '10/'; }
	.cal_body.m11 .day::before{ content: '11/'; }
	.cal_body.m12 .day::before{ content: '12/'; }
	.cal_body .day.holiday { background-color: #0d68a6; color: #fff; }
	.cal_body .day.holiday ~ ul { border-color: #0d68a6; }
	.cal_body .day span { display: inline; }
	.cal_body ul { display: flex; border-bottom: 1px solid #ddd; }
	.cal_body li { flex: 1; text-align: center; background-color: transparent; background-position: center bottom 10px; margin-bottom: 0px; padding: 5px 10px 30px 10px; border-right: 1px solid #ebebeb; }
    
    	/*影音*/
	.videoImg { margin-bottom: 10px; }
	.list_video p { font-size: 18px; }
	.list_video p.date { font-size: 16px; }
    	/*影音*/
	.list_video li { flex: 0 1 calc((100% - 10px) / 2 ); position: relative; margin: 0 10px 20px 0; }
	.list_video li:nth-child(3n) { margin-right: 10px; }
	.list_video li:nth-child(2n) { margin-right: 0; }

	/*FAQ*/
  /*NAV*/
	.innernav01{ padding: 0;}
	.innernav01 .title{ line-height: 48px; font-size: 18px;}

  /*downlload*/
  .detailList .title, .detailList .text{ font-size: 1rem;}

}

@media screen and (max-width: 650px) {
    /*行事曆*/
    .calender_box img.web{ display: none;}
    .calender_box img.mobile{ display: block;}
}

@media screen and (max-width: 480px) {
	/*影音*/
	.videoImg { margin-bottom: 5px; }
	.list_video li { flex: 0 1 100%; position: relative; margin: 0 0 20px; }
	.list_video li:nth-child(2n) { margin-right: 0; }
}