@charset "utf-8";
/* CSS Document */
html,
body {   
	position: relative;
width: 100%;		
	 font-family: "微軟正黑體","Arial" ;	
	 margin:0 ;
    padding:0;
}
.center{
	margin:0;
  display: flex;
  justify-content: center;
  align-items: center; 
}
/*==================top==================*/
.bggray{    
    background: url("img/top_bg.png") top left no-repeat;
    background-size: 100% auto;
    background-color: #61ae76;
}
.ocean{
    position: relative;
    width: 100%;     
    background-color: #acadc2;
     background: url("img/top_pic.png") top left no-repeat;
    background-size: 100% 100%;
    height:1020px;
}
.logomenu{
    position: relative;
    top: 15px;
    width: 96%;
    margin: 0 2%;
}
.logo img{
    width:180px;
}
.menu{    
    position: absolute;
    width: 320px;
    height: auto;
    padding: 7px;
    background-color: #f69739;
    color: #fff;
    text-align: center;
    font-size: 22px;   
    font-weight: 300;
    border-radius: 20px;
    right: 0;
        top:0;
}
.menu a:hover{
    font-weight: bold;
}
.menu a:link, .menu a:hover, .menu a:active, .menu a:visited{
	color:#fff;
    text-decoration: none;
}
.ocean_top{
    position: absolute;
    width: 38%;
    margin: 0 62% auto 0;
    left:30px;
    top: 60px;
}
.top_title{    
    z-index: 2;
}
/*==================box==================*/
.Abg{
    background: url("img/sing01_bg.png") top left  no-repeat;
    background-size: 100% 100%;
}
.A{
    background-color: rgba(249, 240, 220, 0.7);
    width: 100%;
    border-radius: 30px;
    padding: 70px;    
}
.sing01_btn{
    width: 30%;
    margin: 10px 35% 0;
}
.sing01_btnM{
    width: 70%;
    margin: 10px 15% 0;
}
.B img,.Bm img,.C img,.Cm img,.Ctitle img{
    max-width: 100%; height: auto; 
    border: 0;
    } 
.Bbg{
    background: url("img/sing02_bg.png") top left  repeat-x; 
    background-size: 100% 100% ;
}
.Btitle{
    margin: 20px 0;
}
.sing02{
    padding: 0 5px;
}
.Cbg{
    background: url("img/sing03_bg.png") top left  no-repeat; 
    background-size: 100% 100%;
    background-position: center bottom;
    background-color: #427aad;
}
.Ctitle{
    margin: 60px auto 20px;
}
.bg-content{
    background-size: 100% auto;
background-position: top left ;
}
.mt-200{
    margin-top: 200px;
}
.mt-80{
    margin-top: 80px;
}
.mb-20{
   margin-bottom: 20px;
}
.notice_title{
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
    position: relative;
    text-align: center;
}
.triangle-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #fff;
    position: absolute;
    top: -5px;
    margin-left: 10px;
}
.mt--10{
    margin-top: -8px;
}
.accordion-header {
    width: 80%;
    margin: 0 10%;
}
.accordion-item {
     background-color: transparent; 
     border: 0; 
}
.accordion-item:first-of-type .accordion-button {
    border-radius: 50px;
}
.accordion-item:last-of-type .accordion-button.collapsed {
   border-radius: 50px;
     border:3px solid #fada85;    
    box-shadow:10px 10px #ff7500;
}
.accordion-item:last-of-type {
    border-radius: 50px;
}
.accordion-item:first-of-type {
 border-radius: 50px;
}
.accordion-body {
    padding: 0; 
    opacity: .9;    
    margin-top: 30px;
}
.accordion-button{ 
 background: #f69739;   
    color: #fff;
}
.accordion-button:not(.collapsed) {
    background: #f69739;   
    color: #fff;
        border:3px solid #fada85;
    box-shadow:10px 10px #ff7500;
}
.accordion-button:focus {
    border:3px solid #fada85;
/*        box-shadow:none;*/
}
.accordion-button:not(.collapsed) {
    background: #f69739;   
    color: #fff;
        border:3px solid #fada85;
    box-shadow:10px 10px #ff7500;
}
.accordion-button::after {
   margin-left: 5px;
    color: #fff;
    background-image: url("img/download1.png");
    background-size: 100% 100%;
     width: 40px;
    height: 40px;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("img/download1.png");
    background-size: 100% 100%;
    width: 40px;
    height: 40px;
}
/*==================copyright==================*/
.card {
    border: 0px;
    border-radius:0;
}
.btn:hover,.btn:focus,.btn:active ,.btn:visited{
    color: #fff;
    text-decoration: none;
}
.noticebg{
    background: url("img/notebg.png") top left  repeat-y;
    background-size: 100% auto;
    background-color: #427aad;
}
.notice{
    width: 100%;
		font-size: 18px;
	font-weight:bold;
    padding: 50px 5% 30px;
    position: relative;
    margin: 18px auto;
    background-color:#fff;  
    border-radius: 20px;
    text-align: justify;
}
.notice ul{
    counter-reset:num num num;
}
.notice ul li{
  display:block;
    position: relative;
}
.notice ul > li::before {
     counter-increment:num; 
  content:counter(num);
    position: absolute;
  top: 3px;
  left: -30px;
  display: inline-block;
  width: 24px;
  height: 24px; 
  background-color: #f69739;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 17px;
}

.notice ol li:before{
/*    counter-increment:num; */
  content:counter(num, disc);
    font-size: 30px;
    color: #f69739;
    display: inline-block;
    position: absolute;
    top: -10px;
  left: -18px;
    width: 20px;
  height: 20px;
}
ol .nontypeA  li:before {
/*    counter-increment:num; */
  content:counter(num, disclosure-closed);
    font-size:20px;
    color: #f69739;
    display: inline-block;
    position: absolute;
    top: -2px;
  left: -15px;
    width: 20px;
  height: 20px;
}
ol .nontype  li:before {
/*    counter-increment:num; */
  content:counter(num, disc);
    font-size:30px;
    color: #f69739;
    display: inline-block;
    position: absolute;
    top: -10px;
  left: -18px;
    width: 20px;
  height: 20px;
}
.notice .org{
    color: #f69739;
}
.copyright{
	background-color: #152c3f;
	color: #fff;
	padding-top:20px;
	padding-bottom: 20px;
	font-size: 16px;
	font-weight: bold;
}
.copyright a:link, .copyright a:hover, .copyright a:active, .copyright a:visited{
	color:#fff;
}
/*==================sidebar==================*/

.sidebar{
    display:none;
    right:10px;
    bottom: 70px;
    height:auto;
    z-index: 99; 
}
#btn_gotop {
    cursor: pointer;
}
/*==================modal==================*/

.modal-content {    
    border: 2px solid #427aad;
    border-radius: 20px;
}
.modal-header {
    display: block;
    text-align: center;
    border-bottom: 0;
}
.modal-title {
    font-size: 2rem;
    font-weight: bold;
    color: #FF0004;
}
.modal-body{
    font-size: 1.2rem;
    font-weight: 700;
}
.modal-footer {
    display: block;
    text-align: center;
    border-top: 0;
}
.btn_sure {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  letter-spacing: 10px;
  padding: 5px 35px 5px 45px;
  border-radius: 40px;
    border: 2px solid #fada85;
    box-shadow: 2px 2px #ff7500;
background: #f69739;
}

.btn_sure:hover,
.btn_sure:active {
  color: #fff;
  text-decoration: none;
}