@charset "UTF-8";
/*****custom grid star******/
html,body{min-width: 320px;width: 100%; margin: 0 auto;position: relative;}
.text-color-29ABE2{color: #29ABE2;}
.bg-color-F2F2F2{background-color: #F2F2F2;}
.bg-color-F2F5F9{background-color: #F2F5F9;}
.bg-color-00C6EC{background-color: #00C6EC;}
.bg-color-AF4BD8{background-color: #AF4BD8;}
.bg-color-F9F5FC{background-color: #F9F5FC;}
.bg-color-FCF9E8{background-color: #FCF9E8;}
.datepicker table tr td, .datepicker table tr th{font-size: 14px;}
.title_style{text-align: center;font-weight: bolder;color: #326CDB;}
.title_h1{font-size: 2.5rem;}
.title_h2{font-size: 2rem;}
.title_h3{font-size: 2rem;text-align: center;font-weight: bolder;color: #919191;}
.fs-7 {font-size: 0.75rem !important;}
.navbar {  --bs-navbar-color: #8F8F8F;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
:root {  --bs-font-sans-serif:"微軟正黑體",arial, system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
.ft_family{font-family: 'Source Sans 3';}
.ft_century_Gothic_bold{font-family: "century-gothic", sans-serif;font-weight: 700;font-style: normal;}
.form-control,.form-select{text-align: center; /** text-align-last: center; **/}
.form-control:focus,.form-select:focus {border-color: #ced4da;box-shadow: none;}
.form-select{padding-left: 0;padding-right: 0;}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 1px;
  text-overflow: '';
}
select::-ms-expand {
  display: none;
}
.img-bg-cover,.img-bg-contain{width: 100%; height: 100%; position: relative; overflow: hidden;}
.img-bg-cover img{
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);}
.img-bg-contain img{
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
}
.scrollfade {
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
    -webkit-transition: .8s;
    -o-transition: .8s;
    transition: .8s;
    opacity: 0;

}
.scrollfadewidth{
  width: 0;
  transition: width .5s ease-in-out .3s;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.inViewWidth{
  width: 100%;
}
.inView {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}
.container-720,.container-960,.container-1140,.container-2100 {
  width: 100%;
  margin-right: auto;
  margin-left: auto
}
.container-720{max-width: 720px;}
.container-960{max-width: 960px;}
.container-1140{max-width: 1140px;}
.container-2100{max-width: 2100px;}
.navbar-brand img {width: 300px;height: auto;}

/* faq css */
#FAQ_block{background-color: #E8EBF9;border-radius: 25px;padding: 3rem 4.5rem 1.5rem;}
.FAQ_box{margin-bottom: 1rem;}
.question_title{background-color: #FFFFFF;border-radius: 25px 8px 8px 25px;display: flex;flex-wrap: nowrap;overflow: hidden; cursor: pointer;}
.question_title > span{display: block;font-weight: bolder;}
.question_title > span:nth-child(1){background-color: #4F66FF;flex: 0 0 auto;width: auto;font-size: 2.5rem;padding: 1.5rem 2.5rem; color: #FFFFFF;display: flex;align-items: center;}
.question_title > span:nth-child(2){flex: 1 0 0; color: #29ABE2;align-self: center; font-size: 1.5rem;padding: 1rem 3.5rem 1rem 2rem;position: relative;}
.question_title > span:nth-child(2)::after{content: "";width: 30px;height: 30px;position: absolute;right: 20px;top: 50%;transform: translateY(-50%) rotate(0);background-repeat: no-repeat;background-size: 80%;background-position: center;transition: transform .5s ease-in-out;border: 1px solid #4F66FF;border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022.45%2022.48%22%3E%3Cpath%20d%3D%22m11.78%2C12.17v10.31h-1.5v-10.31H0v-1.5h10.28V0h1.5v10.67h10.67v1.5h-10.67Z%22%20fill%3D%22%234F66FF%22%2F%3E%3C%2Fsvg%3E");}
.FAQ_box.active .question_title > span:nth-child(2)::after{transform: translateY(-50%) rotate(225deg);}
.FAQ_box .answer{display: grid;  grid-template-rows: 0fr;transition: all 0.5s ease-in-out;padding: 1rem;}
.FAQ_box.active .answer{grid-template-rows: 1fr;}
.FAQ_box .answer p{margin-bottom: 0;font-size: 1.15rem; letter-spacing: 2px;overflow: hidden;}
@media (max-width:991px) {
  .question_title > span:nth-child(1) {font-size: 2rem;}
  .question_title > span:nth-child(2) {font-size: 1.25rem;}
}
@media (max-width:767px) {
  #FAQ_block,.question_title > span:nth-child(1){padding-left: 1rem;padding-right: 1rem;}
  .question_title > span:nth-child(1) {font-size: 1.75rem;}
  .question_title > span:nth-child(2){padding-left: 1rem;}
  .FAQ_box .answer{padding: 0.5rem 1rem;}
}
@media (max-width:575px) {
  .question_title > span:nth-child(1) {font-size: 1.5rem;padding-top: 1rem;padding-bottom: 1rem;}
  .question_title > span:nth-child(2) {font-size: 1rem;padding-right: 2rem;}
  .question_title > span:nth-child(2)::after {width: 20px;height: 20px;right: 8px;}
  .FAQ_box .answer p {font-size: 1rem;}
}

@media (max-width:375px) {
  .question_title {border-radius: 8px;}
  .question_title > span:nth-child(1) {font-size: 1.15rem;padding-left: 0.5rem;padding-right: 0.5rem;}
}
/* faq css */
/* pagination css */
.pagination_container{display: flex;margin: 0 auto;flex-wrap: nowrap;justify-content: center;}
.pagination_container .pagination_dots{flex: 0 0 auto;padding: 0 5px;}
.pagination_dots span{ width: 28px;height: 28px;display: inline-block;border-radius: 100%;color: #FFFFFF;background-color: #4B9EFF;text-align: center;line-height: 28px;cursor: pointer;}
/* .pagination-style-2 .pagination_dots span{background-image: linear-gradient(90deg, #AD39BD 37.4%, #1E00FF 100%);}
.pagination-style-3 .pagination_dots span{background-image: linear-gradient(90deg, #F8AB00 37.4%, #FFDB00 100%);} */
/* pagination css */
#gotop {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 50px;
    padding: 15px 15px;
    background-image: linear-gradient(102deg, #77AFFA 12.19%, #AB69FD 95.97%);
    color: white;
    cursor: pointer;
    text-align: center;
    border-radius: 50%;
    z-index: 100;
}
#gotop img {
    width: 30px;
    height: 30px;
}
#gotop:hover {
    opacity: 0.7;
}
@keyframes animation-large{
  0% {
    transform: translate(-50%,-50%) scale(1.0);
  }
  50% {
    transform: translate(-50%,-50%) scale(1.8);
  }
  100% {
    transform: translate(-50%,-50%) scale(1.0);
  }
}

@keyframes animation-large-medium{
  0% {
    transform: translate(-50%,-50%) scale(1.0);
  }
  50% {
    transform: translate(-50%,-50%) scale(1.3);
  }
  100% {
    transform: translate(-50%,-50%) scale(1.0);
  }
}
@keyframes AnimeGrade{
  0%{
    background-position: 0% 50%;color: #FFFFFF;
  }
  100%{
    background-position: 100% 50%;color: #4A39BD;
  }
}
.htitle_01{font-size: 3.5rem;font-weight: bolder;}
.border_white{border: 1px solid #FFFFFF;}
.btn_more{font-size: 1.5rem; display: inline-block;margin: 0 auto;padding: 6px 35px;border-radius: 25px;color:#FFFFFF;text-decoration: none;background: linear-gradient(45deg, rgba(74,57,189,1), rgba(74,57,189,1), rgba(74,57,189,1));}
.btn_more:hover{animation: AnimeGrade 2s ease forwards;background: linear-gradient(45deg, rgba(0,0,255,.9), rgba(255,255,0,.9));background-size: 600% 600%;}
.btn_more_01{background: #02C6EC;border:1px solid #FFFFFF}
.btn_style_01{background-color: #FFFFFF;border-radius: 38px;padding: 3px;border-width: 5px;border-style: solid;}
.btn_style_01 span{display: inline-block;font-size: 1.25rem;padding: 5px 1.75rem;border-radius: 25px;font-weight: bolder;}
#btn_check.btn_style_01{border-color: #1808B5;}
#btn_register.btn_style_01,#btn-save-confirm.btn_style_01{border-color: #B7EE1E;}
#btn-error.btn_style_01{border-color: #FF00FF;}
#btn-error.btn_style_01 span{background-color: #FF00FF;color: #FFFFFF;}
#btn_check.btn_style_01 span{color: #FFFFFF;background-color: #1808B5;}
#btn_register.btn_style_01 span,#btn-save-confirm.btn_style_01 span{color: #1B1464;background-color: #B7EE1E;}
.btn_style_02,.btn_style_02:hover,.btn_style_02:focus,.btn.btn_style_02:first-child:active {border-radius: 25px;padding: 5px 2rem;border: 2px solid #3399CC; color: #3399CC;font-weight: bolder;}
.navbar-nav .nav-link.active, .navbar-nav .show>.nav-link{color: #0000FF;}
.navbar_submenu{display: flex;flex-wrap: nowrap;}
.navbar_submenu .btn-style-03{display: flex;flex-wrap: wrap; justify-content: center; border: none;margin-left: 8px;padding: 10px 0 5px;width: 92px;align-items: center;}
.navbar_submenu .btn-style-03 img{width: 50px;height: auto;}
.navbar_submenu .btn-style-03 span{flex: 0 0 auto;width: 100%;text-align: center;font-weight: bolder;}
.navbar_submenu .dropdown-menu.show,.navbar_submenu .dropdown-menu.show:focus{left: auto;right: 0;; background-color: #FFFF00;}
#MemberName{text-align: center;font-size: 1.25rem;color: #0071BC;font-weight: bolder;display: block;position: relative;padding: 0.5rem 1rem 1rem;}
#MemberName::before{content: "";width: 90%;height: 5px;background-color: #FFFFFF;position: absolute;bottom: 7px;left: 50%;transform: translateX(-50%);}
.dropdown-submenu:hover > .dropdown-menu, .dropdown-submenu:focus > .dropdown-menu{
  display: flex;
  flex-direction: column;
  position: absolute !important;
  margin-top: -30px;
  right: 100%!important;
}
.navbar_submenu .dropdown-submenu ul{list-style-type: none;}
.navbar_submenu .dropdown-submenu ul .dropdown-item{color: #666666; }
.navbar_submenu .dropdown-item{color: #0071BC;font-weight: bolder;}
.navbar_submenu .dropdown-item:hover{background-color: transparent;}
.navbar-expand-lg .navbar-nav .navbar_submenu  .dropdown-menu{position: relative;}
.btn-style-03.dropdown-toggle::after{display: none;}
#nav_apply{background-color: #40D5FF;color: #FFFFFF;}
#nav_resume{background-color: #FFFF00;color: #000000;}
footer{background-image: linear-gradient(180deg, #4A39BD 21.35%, #00B6FF 100%);padding: 5rem 0 1.5rem;}
#contact_tel{display: inline-block;padding-left: 20px;position: relative; color: #FFFFFF;margin-top: 1.5rem;}
#contact_tel::before{content: "";width: 16px;height: 16px;background-image: url("../images/icon_phone.svg");background-position: center;background-repeat: no-repeat;background-size: contain;position: absolute;left: 0;top: 2px;}
.icon-refresh{display: block; width: 40px;height: 40px;background-image: url("../images/refresh.svg");background-size: 85%;background-repeat: no-repeat;background-position: center;margin-left: 8px;cursor: pointer;transition: transform .3s ease-in-out;}
.icon-refresh:hover{transform: rotate(45deg);}
#sitemap{display: flex;flex-wrap: wrap;}
#sitemap h5,#sitemap ul li a{color:#FFFFFF; text-decoration: none;}
#sitemap ul li a{display: inline-block;padding: 6px 0;}
#sitemap ul{list-style-type: none;padding-left: 0;}
#sitemap ul li{position: relative;padding-left: 20px;}
#sitemap ul li::before{content: "";width: 10px;height: 10px;border-radius: 100%;background-color: #7ED6FF;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
#copyright{color: #FFFFFF; text-align: center;padding-top: 1rem;}
#gotop,#gosearch {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 130px;
  padding: 15px 15px;
  background-image: linear-gradient(90deg, #4A39BD 37%, #00B6FF 100%);
  color: white;
  cursor: pointer;
  text-align: center;
  border-radius: 50%;
  z-index: 100;
}
#gotop img,#gosearch img {
  width: 30px;
  height: 30px;
}

.fancy-block {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.59);
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 999;
  display: none;
}
.content-block, .contentFliterBlock {
  width: 100%;
  height: 100%;
  position: relative;
}
.content-block > div, .fliterWrap {
  width: 90%;
  height: 90%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 375px;
  max-height: 280px;
  text-align: center;
  display: none;
  background-color: #FFFFFF;
  border: 5px solid #E6E6E6;border-radius: 25px; overflow: hidden;
}
.fliterWrap{max-width: 500px;max-height: 340px;padding: 1rem;}
.fliterWrap .table-hover>tbody>tr:hover>*{background-color: #bdd9e5;color: #FFFFFF;}
.fliterWrap .contentBox{padding-top: 1rem; border: 1px solid rgb(222, 226, 230); border-radius: 8px;}
.tableScroll{height: 200px;overflow-y: scroll;}
.fliterWrap .contentBox h6{border-bottom: 1px solid rgb(222, 226, 230);margin-bottom: 0;padding-bottom: 8px;color: #B3B3B3;font-weight: bolder;}
/* #fancyFliterBox tbody tr td{cursor: pointer;} */
#fancyFliterBox label{color: #3399CC;font-weight: bolder;}
#fancyFliterBox table{margin-bottom: 0;color: #B3B3B3;}
#fancyFliterBox table tbody tr:nth-last-child(1) td{border-bottom: none;}
#fancyFliterBox .searchBox{display: flex;flex-wrap: wrap;padding-bottom: 1rem;}
.btnSearchKeyword{color: #FFFFFF;background-color: #CACACA;border-radius: 25px;padding: 7px 16px;cursor: pointer;}
.contentFliterBlock .bgClose{position: absolute;width: 100%;height: 100%;}
.success-wrap > div,.error-wrap > div{display: flex; flex-wrap: nowrap; align-items: center;justify-content: center;height: 100%;margin: 0;color: #8F8F8F;font-size: 1.15rem;font-weight: bolder;padding: 0 1.5rem;}
.success-wrap > div > div,.error-wrap > div > div{padding: 0 0.5rem;}
.success-wrap > div img,.error-wrap > div img{width: 100%;max-width: 100%;}
@media (min-width:992px) {
  .navbar-expand-lg .navbar-collapse{justify-content: center;}
}
@media (max-width:1200px) {
  .navbar-brand img {width: 265px;}
}
@media (max-width:991px) {
  header {position: fixed;width: 100%;top: 0;z-index: 99;background-color: #FFFFFF;}
  header .container{max-width: 100%;}
  header > .container,.navbar > .container-fluid{padding-left: 0;padding-right: 0;}
  .navbar-brand{margin-left: 12px;}
  .navbar-toggler{margin-right: 12px;}
  .navbar-nav{background-color: #F5F8FD;height: calc(100vh - 58.28px);}
  .navbar_submenu{padding-right: 8px;}
  .navbar_submenu .navbar-nav{height: auto;flex-direction: row;}
  .nav-item{position: relative;}
  .navbar_submenu .nav-item{background-color: #FFFFFF;}
  .navbar_submenu .nav-item::before,.navbar_submenu .nav-link > span::before{display: none;}
  .navbar-nav .dropdown-menu,.nav-item::before,.nav-link > span{width: 240px; margin: 0 auto;background-color: transparent;border: none;}
  .navbar_submenu .navbar-nav .dropdown-menu{border:none;position: absolute;width: auto;top: 105%;}
  .navbar_submenu .dropdown-menu li::before{display: none;}
  .nav-link.dropdown-toggle.show{background-color: #1558FF; color: #FFFFFF;}
  .nav-item::before{content: "";display: block;height: 1px;background-color: #1B4BC0;position: absolute;left: 50%;bottom: -1px; transform: translateX(-50%);}
  .nav-link,.nav-link:focus, .nav-link:hover{color: #1B4BC0;padding: 0;}
  .navbar_submenu .nav-link,.navbar_submenu .nav-link:focus,.navbar_submenu .nav-link:hover{padding: 10px 5px 5px;}
  .nav-link.dropdown-toggle.show{color: #FFFFFF;}

  .nav-link > span{display: block;padding: 8px 0;font-weight: bold;position: relative;letter-spacing: 4px;padding-left: 8px;}
  .nav-link > span::before{content: "";display: block;width: 8px;height: 8px;border: 1px solid ;border-width: 1px 0 0 1px; position: absolute;right: 10px;top: 15px;transform: rotate(225deg);transition: transform .3s, top .3s ease-in-out;}
  .nav-link.dropdown-toggle.show > span::before{transform: rotate(45deg);top: 18px;}
  .dropdown-toggle::after{display: none;}
  .dropdown-menu li a,.dropdown-menu li a:hover,.dropdown-menu li a:focus{color: #1558FF; letter-spacing: 3px;}
  .navbar_submenu .dropdown-menu li a,.navbar_submenu .dropdown-menu li a:hover,.navbar_submenu .dropdown-menu li a:focus{letter-spacing: 0;}
  .dropdown-menu li{position: relative;padding-left: 16px;}
  .navbar_submenu .dropdown-menu li{padding-left: 0;}
  .dropdown-menu li::before{content: "";width: 8px;height: 8px;border-radius: 100%;background-color: #1558FF;position: absolute; left: 5px;top: 50%;transform: translateY(-50%);}
  #slider{margin-top: 101.89px;}
  .navbar_submenu .btn-style-03 span {font-size: 0.65rem;}
  .navbar_submenu .btn-style-03 img {width: 30px;}
  .navbar-toggler{order:-1;border: none;}
  .navbar-collapse{order: 7;}
  .navbar-toggler:focus {box-shadow: none;border: none;}
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M7.2,21.8L22.8,6.2 M7.2,6.2l15.6,15.6'/%3e%3c/svg%3e");}
  .htitle_01{font-size: 2.5rem;}
  #footer_img{text-align: center;}
  #contact_tel{text-align: center;}
}
@media (max-width:991px) and (min-width:576px) {
  .navbar_submenu .btn-style-03{width: auto;}
  .navbar-brand img{width: 215px;}
  #slider {margin-top: 71px;}
  .navbar_submenu .btn-style-03 span {width: auto;flex: 0 0 auto;font-size: 1rem;}
}

@media (max-width:767px) {
  .navbar_submenu .nav-link > span {letter-spacing: 0px;}
}
@media (max-width:575px) {
  #sitemap{max-width: 375px;margin: 0 auto;padding-bottom: 1rem;}
  #sitemap > div{padding: 0 0.75rem;}
  .navbar_submenu .btn-style-03 span {display: none;}
  .navbar_submenu .btn-style-03 {width: 42px;border-radius: 100%;}
  .navbar-brand img {width: 225px;}
  #slider{margin-top: 61.17px;}
  .title_h3{font-size: 1.5rem;}
  .fliterWrap {
	  max-height: 390px;
	}
}
@media (max-width:450px) {
  .navbar-brand img {width: 180px;}
  #slider{margin-top: 58.28px;}
  .btn_more {font-size: 1rem;}
  .title_h1 {font-size: 2rem;}
  .title_h2{font-size: 1.5rem;}
  .title_h3{font-size: 1.25rem;}
}
@media (max-width:400px) {
  .title_h1 {font-size: 1.75rem;}
  .title_h2{font-size: 1.35rem;}
  .title_h3{font-size: 1.15rem;}
  .navbar > div{padding: 0;}
  .navbar-brand{margin-right: 0;}
  footer{padding-top: 3rem;}
  #sitemap h5{font-size: 1rem;}
  #sitemap ul li a,#contact_tel {font-size: 0.75rem;}
  #sitemap {max-width: 320px;}
}
@media (max-width:375px) {
  .navbar-brand img {width: 165px;}
}
@media (max-width:350px) {
  .navbar-toggler {padding: 0 3px;}
  .navbar_submenu .btn-style-03 img {width: 25px;}
  .navbar_submenu .btn-style-03 {width: 37px;}
  #slider{margin-top: 56.88px;}
}
@media (max-width:330px) {
  .navbar-brand img {width: 160px;}
}
@keyframes animate01 {
  0% {
            transform: translateX(0);
            opacity: 0.5;
  }
  50% {
            transform: translateX(10%);
            opacity: 1;
  }
  100% {
            transform: translateX(0);
            opacity: 0.5;
  }
}
@keyframes animate02 {
  0% {
            transform: translateY(0);
            opacity: 0.5;
  }
  50% {
            transform: translateY(10%);
            opacity: 1;
  }
  100% {
            transform: translateY(0);
            opacity: 0.5;
  }
}
@keyframes animate03 {
  0% {
            transform: scale(1);
  }
  50% {
            transform: scale(1.2);
  }
  100% {
            transform: scale(1);
  }
}
@keyframes animate04 {
  0% {
            transform: translateX(0);
  }
  49.99% {
            transform: translateX(-150px);
  }
  50% {
            transform: translateX(-150px);
  }
  99.99% {
            transform: translateX(0);
  }
  100% {
            transform: translateX(0);
  }
}
@keyframes animate05 {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-100px) translateY(-100px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}