@charset "utf-8";
/* CSS Document */
.pageblock{ margin: 0 auto; max-width: 1240px; padding:40px 20px 140px 20px; }

.wordarea{ display:flex; }
.wordarea .wordleft{ width:220px;  }
.wordarea .wordright{ width:calc(100% - 220px); }

/* 沒有左側選單 變滿版 */
.fluid .wordright{ width: 100%; }
.fluid .wordright .rightblock{ padding: 0;}

.leftmenuBtn{ display:none; }
.moblistbox{ display:none; }

.leftmenu{ width:100%; display:block; }
.leftmenu .leftTitle{ border-bottom:5px solid #1e5282; font-size:1.563rem; font-weight:bold; color:#1e5282; padding-bottom:5px; }
.leftmenu .leftTitle .sss{ font-size:1rem; }
.leftmenu .listbox{ background:#eee; padding:10px 0; }
.leftmenu .listbox .list{ display:block; padding:10px 30px 10px 15px; position:relative; font-size:1rem; color:#333; }
.leftmenu .listbox .list.hold{ background:#f3c91d; }

@media screen and (min-width:1024px){
	.leftmenu .listbox .list.hold:after{ content:""; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); display:block; width:8px; height:8px; border-top:2px solid #333; border-right:2px solid #333; position:absolute; right:10px; top:50%; margin-top:-4px; }
}

.rightblock{ padding:0 0 0 40px; }
.rightblock_full{ padding:0 0 0 0px; }

/*麵包屑*/
.nav{ border-bottom:5px solid #eee; padding:0 0 5px 0; margin:0 0 10px 0;/* height:43px; position:relative;*/ }
/*.nav .nlist{ position:absolute; bottom:5px; left:0; }*/
.nav a{ font-size:0.875rem; color:#333; }
.nav span{ font-size:0.875rem; color:#215181; }

/*最新消息*/
.selectbox{ display:inline-block; border:1px solid #ccc; padding:0 15px; margin:0 0 5px 0; }
.selectbox span{ display:inline-block; vertical-align:middle; line-height:36px; font-size:1rem; }
.selectbox select{ background:none; border:none; line-height:36px; display:inline-block; vertical-align:middle; font-size:1rem; }

.newlist .lists{ display:block; padding:10px 0; border-bottom:1px dashed #ccc; }
.newlist .lists .data{ padding:0 0 0 15px; background-image:url(../images/page/icon_date.png); background-position:left; background-repeat:no-repeat; background-size:12px; color:#215181; font-size:0.875rem; }
.newlist .lists .h3{ display:block; font-size:1.125rem; color:#333; padding:5px 0 0 0; }

/*最新消息-詳細*/
.newsdeTitle{ font-size:1.75rem; color:#333; }
/* .news_fun{ display:table; width:100%; margin-top:15px; } */
.news_fun{ display:block; text-align: right; }
.news_fun .lefttd{ display:table-cell; vertical-align:middle; }
/* .news_fun .righttd{ display:table-cell; vertical-align:middle; text-align:right; width: 200px; } */
.news_fun .righttd{display: inline-block;}
.news_fun .lefttd .date{ padding: 0 0 0 15px; background-image: url(../images/page/icon_date.png); background-position: left; background-repeat: no-repeat; background-size: 12px; color: #215181; font-size: 0.875rem; }
.news_fun .righttd .shareicon{ width:28px; display:inline-block; vertical-align:middle; font-size:0rem; }
.news_fun .righttd .shareicon img{ width:100%; }
.newsp{ font-size:1rem; color:#333; line-height:1.6; padding:40px 0; }
.newsp img{ max-width:100%; }

.rangelist{ padding:30px 0 0 0; }
.rangelist .rTitle{ font-size:1.25rem; color:#1e5282; font-weight:bold; border-bottom:4px solid #1e5282; }
.rangelist .rbox{ padding:10px 15px; background:#eee; }
.rangelist .rbox .gs{ margin-left:-10px; font-size:0rem; }
.rangelist .rbox .grids{ width:50%; display:inline-block; vertical-align:top; padding:5px 0 5px 10px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.rangelist .rbox .grids .bs{ width:100%; display:table; height:90px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; position:relative; background:#fff; text-decoration:none; }
.rangelist .rbox .grids .bs .icon{ display:table-cell; vertical-align:middle; width:30px; background-repeat:no-repeat; background-position:center; background-size:60px;  }
.rangelist .rbox .grids .bs .icon.pdf{ background-image:url(../images/page/file-pdf.png); }
.rangelist .rbox .grids .bs .icon.doc{ background-image:url(../images/page/file-doc.png); }
.rangelist .rbox .grids .bs .icon.jpg{ background-image:url(../images/page/file-jpg.png); }
.rangelist .rbox .grids .bs .icon.png{ background-image:url(../images/page/file-png.png); }
.rangelist .rbox .grids .bs .icon.ppt{ background-image:url(../images/page/file-ppt.png); }
.rangelist .rbox .grids .bs .icon.txt{ background-image:url(../images/page/file-txt.png); }
.rangelist .rbox .grids .bs .icon.file{ background-image:url(../images/page/file-all_file.png); }
.rangelist .rbox .grids .bs .icon.xls{ background-image:url(../images/page/file-xls.png); }
.rangelist .rbox .grids .bs .text{ display:table-cell; vertical-align:middle; }
.rangelist .rbox .grids .bs .title{ font-size:1rem; color:#333; }
.rangelist .rbox .grids .bs .data{ font-size:0.875rem; color:#333; } 
.rangelist .rlink{ text-decoration:none; font-size:0.875rem; color:#333; word-break: break-all; }

.btnback{ padding:50px 0 0 0; text-align:center; }
.btnback .btns{ display:inline-block; vertical-align:middle; line-height:40px; background:#f0ce2e; color:#333; font-size:1.25rem; text-decoration:none; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; padding:0 10px; }

/*表單*/
.formTxt{ font-size:0.875rem; color:#333; line-height:1.6; }

.formTable{ display:flex; margin-left:-15px; flex-wrap:wrap; margin-top: 20px; }
.formTable .fgrids{ display:flex; width:50%; padding-left:15px; }
.formTable .fgrids.long{ width:100%; }
.formTable .fgrids .bgs{ display:block; width:100%; padding-bottom:10px; padding-top:10px; border-bottom:1px #ccc solid; }
.formTable .fgrids .bgs .table{ display:table; width:100%; }
.formTable .fgrids .bgs .table .td-title{ display:table-cell; vertical-align:middle; width:140px; font-size:1.125rem; color:#215181; line-height:36px; }
.formTable .fgrids .bgs .table .td-title .reds{ color:#f00; }
.formTable .fgrids .bgs .table .td-text{ display:table-cell; vertical-align:top; }
.formTable .inputs{ background:#f8f8f8; border:none; width:100%; line-height:36px; height:36px; font-size:1rem; color:#333; padding:0 10px; }
.formTable .file{ background:#f8f8f8; border:none; width:100%; height:36px; font-size:1rem; color:#333; padding:0 10px; }
.formTable .textareas{ background:#f8f8f8; border:none; width:100%; line-height:24px; height:120px; font-size:1rem; color:#333; padding:0 10px; resize:none; }
.formTable .disnone{ display:none; }

.codetable{ display:table; width:100%; }
.codetable .codeimg{ display:table-cell; vertical-align:middle; width:100px; font-size:0rem; }
.codetable .codeimg img{ width:100%; }
.codetable .codeinput{ display:table-cell; vertical-align:middle; padding:0 0 0 10px; }

.formBtn{ text-align:center; padding:60px 0 0 0; }
.formBtn .btns01{ display: inline-block; vertical-align: middle; line-height: 40px; background: #f0ce2e; color: #333; font-size: 1.25rem; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 0 10px; border:none; margin:0 10px; cursor:pointer; }
.formBtn .btns02{ display: inline-block; vertical-align: middle; line-height: 40px; background: #eee; color: #333; font-size: 1.25rem; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 0 10px; border:none; margin:0 10px; cursor:pointer; }


/*活動*/
.actlist{ display:block; padding:10px 0; }
.actlist .listtab{ display:table; width:100%; margin-bottom:20px; }
.actlist .listtab:last-child{ margin:0; }
.actlist .listtab .imgtd{ display:table-cell; width:33%; vertical-align:top; }
.actlist .listtab .imgtd .imgs{ width:100%; padding-bottom:72%; position:relative; overflow:hidden; }
.actlist .listtab .imgtd .imgs img{ position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; width:100%; }
.actlist .listtab .textd{ display:table-cell; vertical-align:top; padding:10px 0 40px 15px; position:relative; }
.actlist .listtab .textd .ltitles{ font-size:1.125rem; color: #333; padding:0 0 5px 0; }
.actlist .listtab .textd .ltxt{ font-size:0.875rem; color:#666; padding:15px 0 0 0; line-height:1.6; }
.actlist .listtab .textd .date{ padding: 0 0 0 15px; background-image: url(../images/page/icon_date.png); background-position: left; background-repeat: no-repeat; background-size: 12px; color: #215181; font-size: 0.875rem; }
.actlist .listtab .textd .mores{ position:absolute; bottom:10px; right:0; font-size:0.875rem; color:#215181; padding-right:15px; }
.actlist .listtab .textd .mores:before{ content:""; display:block; position:absolute; top:50%; margin-top:-4px; right:1px; width:6px; height:6px; border-right:2px solid #215181; border-top:2px solid #215181; -webkit-transform:rotate(45deg); }
.actlist .listtab .textd .browse{ position:absolute; left:15px; bottom:10px; font-size:0.875rem; color:#215181; }

/*頁碼*/
.pagenum{ font-size:0; text-align:center; padding:40px 0 0 0; }
.pagenum a{ display:inline-block; vertical-align:middle; min-width:40px; border:1px solid #ccc; font-size:1rem; color:#333; line-height:40px; margin:0 3px; }
.pagenum a .hold{ background:#f3c91d; }

.pagenum span{ display:inline-block; vertical-align:middle; min-width:40px; border:1px solid #ccc; font-size:1rem; color:#333; line-height:40px; margin:0 3px; }
.pagenum .hold{ background:#f3c91d; }

.pagenum.totaltxt{ text-align: center; padding: 10px 0 40px 0; vertical-align: middle; font-size: 1rem; color: #333; line-height: 40px; margin: 0 3px; }

/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
.leftmenu .listbox .list:hover{ background:#f3c91d; }
}


/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
.pageblock{ padding: 30px 20px; }

.wordarea{ display:block; }
.wordarea .wordright{ width:auto; }
.wordarea .wordright_full{ width:auto; }
.wordarea .wordleft{ width:auto; }

.rightblock{ padding:0; }
.rightblock_full{ padding:0; }

.leftmenu{ margin-bottom:30px; }

.leftmenuBtn{ display:block; margin:10px 0; text-align:center; border:1px solid #1e5282; padding:10px 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.leftmenuBtn span{ display:inline-block; vertical-align:middle; font-size:1.125rem; color:#1e5282; }
.leftmenuBtn .icons{ display:inline-block; vertical-align:middle; width:13px; height:13px; position:relative; }
.leftmenuBtn .icons:before{ content:""; display:block; width:3px; height:100%; background:#1e5282; position:absolute; top:0; bottom:0px; left:0px; right:0px; margin:auto; }
.leftmenuBtn .icons:after{ content:""; display:block; width:100%; height:3px; background:#1e5282; position:absolute; top:0; bottom:0px; left:0px; right:0px; margin:auto; }
.leftmenuBtn.close .icons{ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }

/*手機用選單*/
.moblistbox{ background: #eee; margin-bottom:20px; }
.moblistbox .list { display: block; padding: 10px 30px 10px 15px; position: relative; font-size: 1rem; color: #333; }
.moblistbox .list.hold{ background:#f3c91d; }

}


/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
.pageblock{ padding: 30px 20px; }

.wordarea{ display:block; }
.wordarea .wordright{ width:auto; }
.wordarea .wordright_full{ width: auto; }
.wordarea .wordleft{ width:auto; }

.rightblock{ padding:0; }
.rightblock_full{ padding:0; }

.leftmenu{ margin-bottom:30px; }
.leftmenu .leftTitle{ font-size:1.125rem; border-bottom:3px solid #1e5282; }
.leftmenu .listbox{ padding:0; }
.leftmenu .listbox .list{ font-size:0.875rem; }


.leftmenuBtn{ display:block; margin:10px 0; text-align:center; border:1px solid #1e5282; padding:8px 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.leftmenuBtn span{ display:inline-block; vertical-align:middle; font-size:1rem; color:#1e5282; }
.leftmenuBtn .icons{ display:inline-block; vertical-align:middle; width:13px; height:13px; position:relative; }
.leftmenuBtn .icons:before{ content:""; display:block; width:3px; height:100%; background:#1e5282; position:absolute; top:0; bottom:0px; left:0px; right:0px; margin:auto; }
.leftmenuBtn .icons:after{ content:""; display:block; width:100%; height:3px; background:#1e5282; position:absolute; top:0; bottom:0px; left:0px; right:0px; margin:auto; }
.leftmenuBtn.close .icons{ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }	

/*手機用選單*/
.moblistbox{ background: #eee; margin-bottom:20px; }
.moblistbox .list { display: block; padding: 10px 30px 10px 15px; position: relative; font-size:0.875rem; color: #333;  }
.moblistbox .list.hold{ background:#f3c91d; }

/*麵包屑*/
.nav a{ font-size:0.75rem; }
.nav span{ font-size:0.75rem; }

/*最新消息*/
.newlist .lists .h3{ font-size:1rem; }

/*最新消息-詳細*/
.newsdeTitle{ font-size:1.25rem; }
.newsp{ font-size:0.875rem; }

.rangelist .rTitle{ font-size:1.125rem; }
.rangelist .rbox .grids{ display:block; width:auto; }
.rangelist .rbox .grids .bs{ height:60px; }
.rangelist .rbox .grids .bs .title{ font-size:0.875rem; margin:0 0 5px 0; }
.rangelist .rbox .grids .bs .data{ font-size:0.75rem; }
.rangelist .rbox .grids .bs .icon{ width: 48px; background-size: 36px; }
.rangelist .rbox .grids .bs .text{ padding:5px; }

.btnback{ padding:20px 0; }
.btnback .btns{ font-size:1rem; }

/*表單*/
.formTable{ margin:20px 0 0 0; }
.formTable .fgrids{ width:100%; padding-left:0px; }
.formTable .fgrids .bgs .table{ display:block; }
.formTable .fgrids .bgs .table .td-title{ display:block; font-size:1rem; }
.formTable .fgrids .bgs .table .td-text{ display:block; }

.formBtn{ padding:30px 0 40px 0; }
.formBtn .btns01{ font-size:1rem; }
.formBtn .btns02{ font-size:1rem; }

/*活動*/
.actlist .listtab{ display:block; }
.actlist .listtab .imgtd{ display:block; width:auto; }
.actlist .listtab .textd{ display:block; padding: 10px 0 40px 0; }
.actlist .listtab .textd .browse{ left:0; }
.actlist .listtab .textd .ltitles{ font-size:1rem; }
.actlist .listtab .textd .ltxt{ font-size:0.75rem; }

/*頁碼*/
.pagenum a{ font-size:0.75rem; line-height: 32px; min-width:32px; }
.pagenum span{ font-size:0.75rem; line-height: 32px; min-width:32px; }
.pagenum.totaltxt{ font-size: 0.75rem; letter-spacing: 2px; }

}

@media screen and (max-width:1023px){
	.leftmenu .listbox { display: none; }
	.moblistbox.showListbox { display: block; }
}

/*寫信步驟*/
.mail-header{
	display: flex;
	justify-content: space-between;
	margin-top: 1rem;
}
.mail-header .mail-title{
	color: #215181;	
}
.mail-header .mail-body{
	list-style: none;
	display: flex;
}
.mail-header .mail-body li a{
	border-radius: .5rem;
	padding: .5rem;
	margin: 0 .5rem;
	background: #eee;
	display: block;
}
.mail-header .mail-body li a::before{
	margin: 0 .2rem;
	vertical-align: middle;
}
.mail-header .mail-body li:first-child a::before{
	content: url(./images/layout/search.png);
}
.mail-header .mail-body li:last-child a::before{
	content: url(./images/layout/email.png);
}
.mail-header .mail-body li a:hover,
.mail-header .mail-body li a:focus{
	background: #f0ce2e;
	font-weight: bold;
}
.step{
	margin: 1rem 0;
	text-align: center;
	width: 100%;
}
.step .step-item{
	list-style-type: none;
	width: 18%;
	height: 18rem;
	box-sizing: border-box;
	margin: 4% .5%;
	padding: 1.5%;
	background: #ddd;
	border-radius: 1rem;
	text-align: center;
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.step .step-item.active{
	background: #deefff;
	box-shadow: 0 0 0px 4px #215181;
}
.step .step-item .step-number{
	font-size: 1.6rem;
	font-weight: bold;
	background: #215181;
	color: #fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: block;
	text-align: center;
	line-height: 40px;
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
}
.step .step-item .step-txt{
	color: #215181;
	font-size: 1.15rem;
	font-weight: bold;
}
.step .step-item .step-txt:before{
	content: '';
	width: 100%;
	padding: 15%;
	margin-top: 1rem;
	box-sizing: border-box;
	display: block;
}
.step .step-item:nth-child(1) .step-txt:before {
	content: url(/images/resume.svg)
}
.step .step-item:nth-child(2) .step-txt:before {
	content: url(/images/mail.svg);
}
.step .step-item:nth-child(3) .step-txt:before {
	content: url(/images/calendar.svg);
}
.step .step-item:nth-child(4) .step-txt:before {
	content: url(/images/correct.svg);
}
.step .step-item:nth-child(5) .step-txt:before {
	content: url(/images/send.svg);
}
.step .step-item .warning-txt{
	color: #dc3545;
	font-weight: bold;
	font-size: .9rem;
}
@media (max-width: 768px) {
	.step .step-item{
		width: 30%;
		height: 19rem;
	}
}
@media (max-width: 415px) { 
	.step .step-item{
		width: 47%;
		height: 17rem;
	}
}