@charset "utf-8";
/* CSS Document */

/* == 共用區 ============================================================================= */

*{
	margin:0; 
	padding:0;
	-webkit-box-sizing:border-box; /*safari & chrome*/
	-moz-box-sizing:border-box; /*firebox*/
	box-sizing:border-box; /*解除padding影響寬度關係*/
}

html, body{
	-webkit-text-size-adjust: 100%; /*避免文字自動放大*/
	width:100%;
	height:100%;
	font-family:"微軟正黑體", Arial, Helvetica,sans-serif; 
	background:#f7f1e9;
}

*,*::before,*::after {
	box-sizing: border-box;
}    /*----------不用算padding內距------------*/


/*----nav----*/
.bg-color{
background-color: #d70c18;
}

.nav-item{
color: #fff;
font-weight: 600;
font-size: 18px;
}

.navbar {
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0);
}

.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255);
}/*-----NAV 選項字體顏色------*/

.navbar-brand {
	padding-top: 0.3125rem;
	padding-bottom: 0.3125rem;
	margin-right: 0rem;
	font-size: 1.25rem;
	text-decoration: none;
	white-space: nowrap;
}

.navbar-toggler:focus {
	text-decoration: none;
	outline: 0;
	box-shadow: 0 0 0 ;/*---取消漢堡點擊出現框框----*/
} 


.navbar-dark .navbar-toggler-icon {
background-image: url("../list.svg");
}

.logotype{
	width: 225px;
    height: 60px;
    padding: 5px 0;
}

.hvr-underline-reveal:before{
	content:"";
	position:absolute;
	z-index:-1;
	left:0;
	right:0;
	bottom:0;
	background:#aad2ec;
	height:4px;
	-webkit-transform:translateY(4px);transform:translateY(4px);
	-webkit-transition-property:transform;
	transition-property:transform;-webkit-transition-duration:.3s;
	transition-duration:.3s;
	-webkit-transition-timing-function:ease-out;
	transition-timing-function:ease-out
}


/* == 桌機版 ============================================================================= */


.goopen{
	background-color: #ffa011;
	border-radius: 5px;
	padding: 10px;
	color: rgb(255, 255, 255);
}


/* == BANNER == */
.head{
background-size: cover;
background-image: url("../head_bg.png");
background-position:center; /*背景圖置中*/
background-repeat: no-repeat;
margin-top:  3rem;
height: 590px;
}





.head .box{
background-position:center; /*背景圖置中*/
position: relative;
z-index:1;
}

.head .box img{
	width: 292px;
	height: auto;
}


.box01{
	width: 80%;
	margin: 0 auto;
	padding-top: 2rem;
}


h2{
	font-size: 1.5em;
	color: #19417e;
	font-weight: bold;
	padding-bottom: 20px;
	text-align: left;
	line-height: 2em;
}

h4{
    font-size: 1.2em;
    color: rgb(51, 51, 51);
    text-align: left;
    line-height: 1.6em;
    margin-top: -20px;
}

p{
    font-size: 1.2em;
    color: #C00;
    text-align: center;
    line-height: 1.8em;
	font-weight: bold;
	margin-top: 1rem;
    margin-bottom: 1rem;
}

 txt {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.36px;
  color: #2F3E48;
  margin-bottom: 0px;
}

h1{
	font-size: 28px;
	color: #19417e;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 20px;
	font-weight: bold;
}

th, td{
	padding: 4px;
	border: 1px solid #a3a3a3;
	font-size: 16px;
}


ul li{ 
	list-style-type:none;
}
table{ 
	width: 100%;
}

.t01 th{ 
	background-color: #ffe2d6;
	width:12%;
	text-align: center;
}

.t01 td{ 
	background-color:#ffffff; 
}

.t02 th{ 
	background-color:#FFE8E3; 
	width:12% ;
	text-align: center;
}

.t02 td{ 
	background-color:#ffffff;
	text-align: center;
}


.t03{
	background-color:#ffffff;
}

.t03 th{
	background-color: #ffe2d6;
	text-align: center;
}



.t05{
	background-color:#ffffff;
	text-align: center;
}

.t05 th{
	background-color: #D3E8FE;
	text-align: center;
}
.t04 th{
	background-color: #D1E9E9;
	text-align: center;
}

.t04 td{
	background-color: #ffffff;
	text-align: center;
}

ol{
padding-left: 2rem;
padding-right: 0rem;
/*	list-style-position: outside;*/
}

ul {
padding-left: 1rem;
padding-right: 0rem;
}




ol,
ul,
dl {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
/*	list-style-position: outside;*/
}

.text-bold{
	font-weight: 800;
}

.text-red{
	color: rgb(243, 17, 17);
}

.text-ps{
	font-size: 14px;
}

small, .small {
  font-size: 0.875em;
  color: rgba(223,70,131,1.00);
  font-weight: 600;
}



.tg  {
	border-collapse:collapse;
	border-spacing:0;
	margin:10px auto;
	width: 80%;
}
.tg td{
	border-color:black;
	border-style:solid;
	border-width:1px;
	font-size:14px;
	overflow:hidden;
	padding:5px 5px;
	word-break:normal;
}
.tg th{
	border-color:black;
	border-style:solid;
	border-width:1px;
	font-size:14px;
	font-weight:normal;
	overflow:hidden;
	padding:5px 5px;
	word-break:normal;
}
.tg .tg-7geq{
	background-color:#FFFFFF;
	text-align:center;
	vertical-align:top
}
.tg .tg-cxh8{
	background-color:#fffbee;
	color:#333333;
	text-align:center;
	vertical-align:top
}




.tg .tg-wyha{
	background-color:#FFFFFF;
	text-align:center;
	vertical-align:middle
}
.tg .tg-cs1i{
	background-color:#fffbee;
	color:#333333;
	text-align:center;
	vertical-align:middle
}


h6{
	font-size: 14px;
	color: #ff0a00;
	padding-top: 10px;
	padding-bottom: 20px;
	line-height: 22px;
}



.bless{
	width: 60%;
	height: auto;
	padding-top: 3rem;
	padding-bottom: 3rem;
}








/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
  padding: 20px 0;
  display: block;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;

  color: #fff;

  clear: both;
  background-size: 100%;
  background-color: #d70c18;

  letter-spacing: 1px;
  font-size: 15px;
  line-height: 18px;
  margin: 0px auto;

}




@media (max-width: 767px) {
  footer {

    margin-bottom: 65px;
  }

  footer span {
    display: block;
    text-indent: -99999px;
    height: 7px;
  }
}




/* ============================= pad ================================== */	
@media (min-width: 768px) and (max-width: 991.98px){

/* == NAV BANNER == */

.logotype{
width: 180px;
height: 52px;
}

.head{
width: 100%;
height: auto;
padding-bottom: 40%;
background-size: cover;
position: relative;
overflow: hidden;
}




.head .box {
width: 65%;
height: auto;
margin:0 auto;
position: relative;
background-position:center;
top:10%;
z-index: 1;
}


.box01{
	width: 100%;
	margin: 0 auto;
	padding-top: 1rem;
}

.bless{
	width: 80%;
	height: auto;
	padding-top: 2rem;
	padding-bottom: 2rem;
}


/* == FOOTER == */

.footer-lg{
display: none;
}

.footer-sm{
display: block;
font-size: 13px;
}


}



/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){

/* ==NAV  BANNER == */
.navbar-brand {
	width: 80%;
}

.logotype{
width: auto;
height: 47.46px;
padding:10px 5px;
}

.navbar-nav {
padding-left: 10px;
}

.nav-item{
font-size: 16px;
}

.head{
width: 100%;
height: auto;
padding-bottom: 70%;
background-size: cover;
background-image: url("../head_bg_m.png");
position: relative;
overflow: hidden;
}



.head .box {
width: 85%;
height: auto;
margin:0 auto;
position: relative;
background-position:center;
top:2%;
z-index: 1;
}


.box01{
	width: 100%;
	margin: 0 auto;
	padding-top: 1rem;
}





h2{
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 0px;
}

h4{
    font-size: 16px;
    color: #000;
    text-align: left;
    line-height: 26px;
    margin-top: 0px;
}

p{
    font-size: 18px;
    text-align: center;
    line-height: 1.8em;
	font-weight: bold;
	margin-top: 1rem;
    margin-bottom: 1rem;
}

h1{
	font-size: 22px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 5px;
}



th, td{
	padding: 1px;
	border: 1px solid #D0D0D0;
	font-size: 14px;
	line-height: 22px;
}


.t01 th{
	width: 20%;
}

ol {
padding-left: 1.5rem;
padding-right: 0rem;
/*	list-style-position: outside;*/
	
}


ul {
padding-left: 0.5rem;
padding-right: 0rem;
}




.tg {
	width: 50% !important;
}
.tg col {
	width: auto !important;
}
.tg-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: auto 0px;
}

.tg {
	width: auto !important;
}
.tg col {
	width: auto !important;
}
.tg-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: auto 0px;
}


.bless{
	width: 100%;
	height: auto;
	padding-top: 1rem;
	padding-bottom: 1rem;
}












/* == FOOTER == */
.cis{
font-size: 8px;
}

.footer-lg{
display: none;
}

.footer-sm{
display: block;
font-size: 13px;
}

}