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

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');


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

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

h1 { font-size:1.8em; font-family: 'Noto Sans TC', sans-serif; font-weight:500; color:#050505; letter-spacing:0.15em; }
h2 { font-size:1.5em; 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; }
P { font-size:1.1em; font-family: 'Noto Sans TC', sans-serif; line-height:1.7em; letter-spacing:0.05em; }

.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; }


a {text-decoration:none;}
a:link {text-decoration:none;}
a:visited {}
a:hover {text-decoration:none;}
a:active {}


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


.btn_purple_standard {font-family: 'Noto Sans TC', sans-serif; display:block; font-size:17px; height:45px; line-height:45px; padding-left:15px; padding-right:15px; width:100%; text-align:center; background-color:#7e5f8e; color:#FFF;}
.btn_purple_standard:visited {color:#FFF;text-decoration:none;}
.btn_purple_standard:hover { background-color:#926ea4; color:#FFF; text-decoration:none; cursor:pointer;}
.btn_purple_standard:active {color:#FFF;text-decoration:none;}


.btn_standard_frame {font-family: 'Noto Sans TC', sans-serif; display:block; font-size:17px; height:45px; line-height:45px; padding-left:15px; padding-right:15px; width:100%; text-align:center; border:solid 1px #af5c7e; color:#af5c7e; border-radius:6px;}
.btn_standard_frame:visited {color:#af5c7e;text-decoration:none;}
.btn_standard_frame:hover { color:#af5c7e; text-decoration:none; cursor:pointer;}
.btn_standard_frame:active {color:#af5c7e;text-decoration:none;}


.btn_red_standard {font-family: 'Noto Sans TC', sans-serif; display:block; font-size:17px; height:45px; line-height:45px; padding-left:15px; padding-right:15px; width:100%; text-align:center; background-color:#cf5e64; color:#FFF;}
.btn_red_standard:visited {color:#FFF;text-decoration:none;}
.btn_red_standard:hover { background-color:#c3545a; color:#FFF; text-decoration:none; cursor:pointer;}
.btn_red_standard:active {color:#FFF;text-decoration:none;}


.btn_gray_standard {font-family: 'Noto Sans TC', sans-serif; display:block; font-size:17px; 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; cursor:pointer;}
.btn_gray_standard:active {color:#FFF;text-decoration:none;}

.btn_white_standard_s {font-family: 'Noto Sans TC', sans-serif; display:block; border:solid 1px #DDD; border-radius:5px; font-size:15px; height:37px; line-height:37px; padding-left:15px; padding-right:15px; width:100%; text-align:center; background-color:#F6F6F6; color:#333;}
.btn_white_standard_s:link { }
.btn_white_standard_s:visited {text-decoration:none;}
.btn_white_standard_s:hover { background-color:#F1F1F1; color:#222; text-decoration:none; cursor:pointer;}
.btn_white_standard_s:active { text-decoration:none;}



.btn_blue_standard {font-family: 'Noto Sans TC', sans-serif; display:block; font-size:17px; height:45px; line-height:45px; padding-left:15px; padding-right:15px; width:100%; text-align:center; background-color:#51badc; color:#FFF;}
.btn_blue_standard:link {}
.btn_blue_standard:visited {color:#FFF;text-decoration:none;}
.btn_blue_standard:hover { background-color:#47aed0; color:#FFF; text-decoration:none; cursor:pointer;}
.btn_blue_standard:active {color:#FFF;text-decoration:none;}


.btn_lilac_standard {font-family: 'Noto Sans TC', sans-serif; display:block; font-size:17px; height:45px; line-height:45px; padding-left:15px; padding-right:15px; width:100%; text-align:center; background-color:#6385bf; color:#FFF;}
.btn_lilac_standard:link {}
.btn_lilac_standard:visited {color:#FFF;text-decoration:none;}
.btn_lilac_standard:hover { background-color:#5a7bb3; color:#FFF; text-decoration:none; cursor:pointer;}
.btn_lilac_standard:active {color:#FFF;text-decoration:none;}


.btn_light_green_standard {font-family: 'Noto Sans TC', sans-serif; display:block; font-size:17px; height:45px; line-height:45px; padding-left:15px; padding-right:15px; width:100%; text-align:center; background-color:#61c8c8; color:#FFF;}
.btn_light_green_standard:link {}
.btn_light_green_standard:visited {color:#FFF;text-decoration:none;}
.btn_light_green_standard:hover { background-color:#54b887; color:#FFF; text-decoration:none; cursor:pointer;}
.btn_light_green_standard:active {color:#FFF;text-decoration:none;}






.btn_green_standard {font-family: 'Noto Sans TC', sans-serif; display:block; font-size:17px; height:45px; line-height:45px; padding-left:15px; padding-right:15px; width:100%; text-align:center; background-color:#63bf6f; color:#FFF;}
.btn_green_standard:link {}
.btn_green_standard:visited {color:#FFF;text-decoration:none;}
.btn_green_standard:hover { background-color:#58b064; color:#FFF; text-decoration:none; cursor:pointer;}
.btn_green_standard:active {color:#FFF;text-decoration:none;}



.inputbtn_standard {font-family: 'Noto Sans TC', sans-serif; font-size:17px; height:45px; width:100%; text-align:center; background-color:#be6a8d; color:#FFF; padding-left:15px; padding-right:15px; border:none; border-radius:0px;}
.inputbtn_standard:link {}
.inputbtn_standard:visited {}
.inputbtn_standard:hover {background-color:#af5c7e; color:#FFF; cursor:pointer;}
.inputbtn_standard:active {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; cursor:pointer;}
.link_white:active { color:#FFF;}



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



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



.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; cursor:pointer;}
.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;}

.font_price {color:#CF5A5A;}

.required_red {color:#F00; font-size:1.3em;}



.cursor_pointer {cursor:pointer;}
.cursor_pointer:hover {cursor:pointer; text-decoration:none;}





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

.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;}




/* nav */
.nav-link_a {
	font-size:1.2rem;
	display: block;
    padding: 0.8rem 1rem 1.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);
}


}