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

@import url('https://fonts.googleapis.com/css?family=Roboto');

@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');


html,body{height:100%;}

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

h1 { font-size:22px; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#050505; }
h2 { font-size:22px; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#050505; }
h3 { font-size:20px; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#050505; }
h4 { font-size:18px; font-family: 'Noto Sans TC', sans-serif; font-weight:400; color:#050505; }

.h1 { font-size:22px; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#050505;}
.h2 { font-size:22px; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#050505; }



.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:#cf5e64; color:#FFF;}
.btn_standard:visited {color:#FFF;text-decoration:none;}
.btn_standard:hover { background-color:#cf5e64; 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:#cf5e64; color:#FFF; padding-left:15px; padding-right:15px; border:none; border-radius:0px;}
.inputbtn_standard:link {}
.inputbtn_standard:visited {}
.inputbtn_standard:hover {background-color:#cf5e64; color:#FFF; cursor:pointer;}
.inputbtn_standard:active {background-color:#cf5e64; 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:#cf5e64;}
.link_main_color:link { color:#cf5e64; text-decoration:none;}
.link_main_color:visited { color:#cf5e64;}
.link_main_color:hover { color:#cf5e64; opacity:0.7; text-decoration:none;}
.link_main_color:active { color:#cf5e64;}



.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:#cf5e64; text-decoration:none;}
.link_black_to_maincolor:active { color:#000; text-decoration:none;}



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




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

.nav-link_a {
	display: block;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 1);
}
.nav-link_a:link {
    color: rgba(255, 255, 255, 1);
	text-decoration:none;
}
.nav-link_a:visited {
    color: rgba(255, 255, 255, 1);
}
.nav-link_a:hover {
    color: rgba(255, 255, 255, 0.4);
}
.nav-link_a:active {
    color: rgba(255, 255, 255, 1);
}


.btn-outline-primary {
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline-primary:hover {
  color: #FFF;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

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

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #FFF;
  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: #fff;
  background-color: #FFF;
  border-color: #FFF;
}

.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(255, 255, 255, 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;}


}