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

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"); /* bootstrap icon */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+TC:wght@200;500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


html,body{height:100%; font-size:16px;}



input { border:none;}
.input { border:none;}

h1 { font-size:2.5rem; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#004393; }
h2 { font-size:1.9rem; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#004393; }
h3 { font-size:1.6rem; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#004393; }
h4 { font-size:1.4rem; font-family: 'Noto Sans TC', sans-serif; font-weight:400; color:#004393; }
h5 { font-size:1.2rem; font-family: 'Noto Sans TC', sans-serif; font-weight:400; color:#004393; }

.h1 { font-size:2.5rem; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#004393;}
.h2 { font-size:1.8rem; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#004393; }



.btn_standard {font-family:'Noto Sans TC', sans-serif, Verdana, System, sans-serif; display:block; font-size:18px; height:45px; line-height:45px; padding-left:15px; padding-right:15px; width:100%; text-align:center; background-color:#004393; color:#FFF;}
.btn_standard:visited {color:#FFF;text-decoration:none;}
.btn_standard:hover { background-color:#004393; color:#FFF; text-decoration:none;}
.btn_standard:active {color:#FFF;text-decoration:none;}



.btn_gray_standard {font-family:'Noto Sans TC', sans-serif, Verdana, System, sans-serif; display:block; font-size:18px; height:45px; line-height:45px; padding-left:15px; padding-right:15px; width:100%; text-align:center; background-color:#b9b9b9; color:#FFF;}
.btn_gray_standard:link {}
.btn_gray_standard:visited {color:#FFF;text-decoration:none;}
.btn_gray_standard:hover { background-color:#d2d2d2; color:#FFF; text-decoration:none;}
.btn_gray_standard:active {color:#FFF;text-decoration:none;}


.inputbtn_standard {font-family:'Noto Sans TC', sans-serif, Verdana, System, sans-serif; font-size:18px; height:45px; width:100%; text-align:center; background-color:#004393; color:#FFF; padding-left:15px; padding-right:15px; border:none; border-radius:0px;}
.inputbtn_standard:link {}
.inputbtn_standard:visited {}
.inputbtn_standard:hover {background-color:#004393; color:#FFF; cursor:pointer;}
.inputbtn_standard:active {background-color:#004393; color:#FFF; cursor:pointer;}


.link_white { color:#FFF;}
.link_white:link { color:#FFF; text-decoration:none;}
.link_white:visited { color:#FFF;}
.link_white:hover { color:#FFF; opacity:0.7; text-decoration:none;}
.link_white:active { color:#FFF;}



.link_main_color { color:#004393;}
.link_main_color:link { color:#004393; text-decoration:none;}
.link_main_color:visited { color:#004393;}
.link_main_color:hover { color:#004393; opacity:0.7; text-decoration:none;}
.link_main_color:active { color:#004393;}



.link_black { color:#000;}
.link_black:link { color:#000; text-decoration:none; text-decoration:none;}
.link_black:visited { color:#000;}
.link_black:hover { color:#000; opacity:0.7; text-decoration:none;}
.link_black:active { color:#000;}



.link_black_to_maincolor { color:#000;}
.link_black_to_maincolor:link { color:#000; text-decoration:none; text-decoration:none;}
.link_black_to_maincolor:visited { color:#000; text-decoration:none;}
.link_black_to_maincolor:hover { color:#004393; text-decoration:none;}
.link_black_to_maincolor:active { color:#000; text-decoration:none;}



.icon_btn { color:#004393; border:solid 1px; border-color:rgba(207, 94, 100, 0.5);}
.icon_btn_anti_white {background-color:#004393; color:#FFF;}




/* nav */
.nav_bg {background-color:#FFF;}

.nav-item { padding-left:0.6rem; padding-right:0.6rem;}





.btn-outline-primary {
  color: #004393;
  border-color: rgba(0, 71, 157, 0.3);
}

.btn-outline-primary:hover {
  color: #004393;
  background-color: rgba(0, 71, 157, 0.1);
  border-color: rgba(0, 71, 157, 0.5);
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 71, 157, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #004393;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #004393;
  background-color: #004393;
  border-color: #004393;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 71, 157, 0.5);
  
  
  
  



/* 針對桌面電腦（Desktop）的樣式設定 */
@media (min-width: 1200px) {
.desktop_on {display:block;}
.desktop_off {display:none;}
}



/* 針對平板（Tablet）的樣式設定 */
@media (min-width: 768px) and (max-width: 1199px) {
.tablet_on {display:block;}
.tablet_off {display:none;}
}




/* 針對手機（Phone）的樣式設定 */
@media (max-width: 767px) {
.phone_on {display:block;}
.phone_off {display:none;}


}