@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==================*/
.bg{
/*    background: url("images/bg.png") top left repeat;*/
}
.bggray{    
    background: url("images/mainbg01.png") top left no-repeat;
    background-size: 100% auto;
}
.ocean{
    position: relative;
    width: 100%;     
    background-color: #acadc2;
     background: url("images/mainbg.png") top left no-repeat;
    background-size: 100% 100%;
    height:950px;
}
/*
.logomenu{
    position: relative;
    width: 96%;
    margin: 0 2%;
}
*/

.logo img{
    width:180px;
}
.menu{    
    position: absolute;
    width: 320px;
    height: auto;
    padding: 7px;
    background-color: #D59964;
    color: #fff;
    text-align: center;
    font-size: 22px;   
    font-weight: 300;
    border-radius: 20px;
     right: 10px;
/*
    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: 50%;
    margin: 0 25% 10%;
*/
    top: -150px;
}
.oceanM_top{
    position: absolute;
}
.top_title{    
    z-index: 2;
}
/*==================box==================*/
.Abg{
    background: url("images/3stepbg.png") top left  no-repeat;
    background-size: 100% 100%;
}
.B img,.Bm img,.C img,.Ctitle img{
    max-width: 100%; height: auto; 
    border: 0;
    } 
/*
.A{
    background: url("img/Atablebg.png") top left  no-repeat; 
    background-size: 100% ;
}
.Am{
    background: url("img/Atablebg_mobile.png") top left  no-repeat; 
    background-size: 100% ;
}
*/
.Bbg{
    background: url("images/skybg.png") top left  no-repeat; 
    background-size: 100% 101% ;
}
.Btitle{
    margin: 20px 0;
}
.mt-sky{
    margin-top: 270px;
}
.Cbg{
    background: url("images/flybg00.png") top left  no-repeat; 
    background-size: 100% auto;
    background-color: #fff;
}
.Ctitle{
    margin: 60px auto 20px;
}
.Cnote{
    margin: 20px;
}
.Dbg{
    background: url("images/lifebg.png") top left  no-repeat; 
    background-size: 100% 100%;
}
.gap-5{
    --bs-gap: 5rem;
}
.Dtitle{
    margin: 20px;
}
.mt-50{
    margin-top: 50px;
}
.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: 10px;
}
.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 #003CA1;
}
.accordion-item:last-of-type {
    border-radius: 50px;
}
.accordion-item:first-of-type {
 border-radius: 50px;
}
.accordion-body {
    padding: 0; 
    opacity: .8;
}
.accordion-button{ 
 background: #fff;   
    color: #003CA1;
}
.accordion-button:not(.collapsed) {
    background: #fff;   
    color: #003CA1;
        border:3px solid #003CA1;
}
.accordion-button:focus {
    border:3px solid #003CA1;
        box-shadow:none;
}
.accordion-button:not(.collapsed) {
    background: #fff;   
    color: #003CA1;
        border:3px solid #003CA1;
}
.accordion-button::after {
   margin-left: 5px;
    color: #fff;
    background-image: url("images/download1.png");
    background-size: 100% 100%;
     width: 40px;
    height: 40px;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("images/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("images/notebg.png") top left  repeat-y;
    background-size: 100% auto;
    background-color: #76bfeb;
}
.notice{
    width: 100%;
		font-size: 18px;
	font-weight:bold;
    padding: 50px 5% 30px;
    position: relative;
    margin-bottom: 20px;
    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: #003CA1;
  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: #003CA1;
    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: #007CFF;
    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: #007CFF;
    display: inline-block;
    position: absolute;
    top: -10px;
  left: -18px;
    width: 20px;
  height: 20px;
}
.notice .bule{
    color: #004196;
}
.notice .bule1{
    color: #006cb1;
}
.copyright{
	background-color: #D59964;
	color: #fff;	
	font-size: 16px;
	font-weight: bold;
}
.copyright a:link, .copyright a:hover, .copyright a:active, .copyright a:visited{
	color:#fff;
}
.copyright-text{
    text-align: end;
    align-self: center;
}
/*==================sidebar==================*/

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

.modal-content {    
    border: 2px solid #003ca1;
    border-radius: 30px; 
}
.modal-header {
    display: block;
    text-align: center;
    border-bottom: 0;
}
.modal-title {
    font-size: 2rem;
    font-weight: bold;
    color: #003ca1;
}
.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: none;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#db2b2e+0,ba0100+100 */
background: linear-gradient(to bottom,  #db2b2e 0%,#ba0100 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

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