@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('../css/fonts.css');
body {
	font-family: 'Noto Sans', 'Noto Sans TC', sans-serif;
	overflow-x: hidden;
}
.font_e {
	font-family: 'felixtitlingmt';
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none; /* 移除背景 */
	padding: 10px; /* 添加內邊距以提升點擊區域 */
	border: 1px solid #ccc; /* 添加邊框 */
}
html {
	overflow-x: hidden;
	width: 100%;
	position: relative;
}
img {
	max-width: 100%;
	height: auto;
}
div:focus {
	outline: none;
}
a {
	text-decoration: none;
	color: #3b5658;
}
a:hover {
	color: #1e919a;
}
textarea {
	resize: none;
}
.gotop {
	position: fixed;
	right: 10px;
	bottom: 25%;
	z-index: 9999;
	width: 60px;
	text-align: center;
}
.m_top {
	margin-top: 70px;
}
.pic_img {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-size: cover;
	transition: all 1s ease-out;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #fff;
	position: relative;
}
.pic_img::before {
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.30);
 position: absolute;
 top: 0;
 left: 0;
 content: '';
}
.spic_img {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	transition: all 1s ease-out;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #fff;
	position: relative;
}
.spic_img::before {
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.30);
 position: absolute;
 top: 0;
 left: 0;
 content: '';
}
.img {
	width: 100%;
	aspect-ratio: 1 / 1; /* 保持比例 */
	position: relative;
	overflow: hidden; /* 限制內部內容超出範圍 */
	background-color: #fff;
}
.img::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: inherit;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 transition: transform 0.6s ease-out;
}
.img:hover::before, a:hover .img::before {
 transform: scale(1.1); /* 放大但不超出邊框 */
}
.img16X9 {
	width: 100%;
	aspect-ratio: 16 / 9; /* 保持比例 */
	position: relative;
	overflow: hidden; /* 限制內部內容超出範圍 */
	background-color: #fff;
}
.img16X9::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: inherit;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 transition: transform 0.6s ease-out;
}
.img16X9:hover::before, a:hover .img16X9::before {
 transform: scale(1.1); /* 放大但不超出邊框 */
}
.font_vertical_title {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	height: 35px;
}
.font_vertical_text {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	height: 50px;
}
/*--------------------------------------------------------------
# font-size
--------------------------------------------------------------*/
.fs_6 {
 --min-size: 14;
 --max-size: 15;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_5 {
 --min-size: 16;
 --max-size: 18;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_4 {
 --min-size: 17;
 --max-size: 24;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_3 {
 --min-size: 25;
 --max-size: 32;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_2 {
 --min-size: 30;
 --max-size: 40;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_1 {
 --min-size: 35;
 --max-size: 50;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_small {
 --min-size: 12;
 --max-size: 14;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
/*--------------------------------------------------------------
# social_media
--------------------------------------------------------------*/
ul.social_media {
	display:inline;
	padding:0px;
	margin:0;
	text-align:center;
}
ul.social_media li {
	display:inline-block;
	position:relative;
}
ul.social_media li a i {
	width:35px;
	height:35px;
	line-height:35px;
	border-radius:5px;
	font-size:20px;
	text-align:center;
	background-color:#eed9b0;
	border-radius:50px;
	color:#1899a3;
}
ul.social_media li a:hover i {
	background-color:#1899a3;
	color:#fff;
}
ul.social_media li a img {
	width:30px;
	height:30px;
	line-height:30px;
}
/*--------------------------------------------------------------
# pagination
--------------------------------------------------------------*/
.pagination {
	justify-content: center;
}
.page-link {
	color: #333;
	border-radius: 50px;
	margin: 0 10px;
	width: 35px;
	height: 35px;
	line-height: 35px;
	padding: 0;
	background-color: #ccc;
	border: 0;
}
.page-item.active .page-link {
	z-index: 3;
	color: #fff;
	background-color: #1e919a;
	border-color: #1e919a;
}
.page-link:hover {
	color: #fff;
	background-color: #1e919a;
	border-color: #1e919a;
}
.page-link:focus {
	z-index: 3;
	color: #fff;
	background-color: #1e919a;
	outline: 0;
	box-shadow: 0 0 0 0rem rgba(13, 110, 253, .25);
}
.page-item:first-child .page-link {
	border-radius: 50px;
}
.page-item.active .page-link {
	border-radius: 50px;
}
.page-item:last-child .page-link {
	border-radius: 50px;
}
/*--------------------------------------------------------------
# form style
--------------------------------------------------------------*/
.form-control {
	line-height: 28px;
	border-radius: 0px;
	background-color: transparent;
	border: 0;
	color: #222529;
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
}
.form-control::placeholder {
 color: #222529;
}
.form-control:focus {
	border-color: #DF8E3B;
	border: 0;
	box-shadow: 0 0 0 0 transparent;
	color: #DF8E3B;
	background-color: transparent;
	border-bottom: 1px solid #1e919a;
}
.form-select {
	line-height: 28px;
	border-radius: 0px;
	background-color: transparent;
	border: 0;
	color: #222529;
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
}
.form-select:focus {
	border-color: #DF8E3B;
	border: 0;
	box-shadow: 0 0 0 0 transparent;
	color: #222529;
	background-color: transparent;
	border-bottom: 1px solid #1e919a;
}
/*btn*/
.btn:focus {
	box-shadow: 0 0 0 0rem rgba(0, 140, 255, 1.00);
	-webkit-box-shadow: 0 0 0 0rem rgba(0, 140, 255, 1.00);
}
.main_btn {
	color: #fff;
	background-color: #222529;
	padding: 11px 13px;
	position: relative;
	border: 1px solid #222529;
	border-radius: 4px;
}
.main_btn:hover, a:hover.main_btn {
	border: 1px solid #222529;
	border-radius: 4px;
	background-color: transparent;
}
.more_btn {
	color: #d97721;
	position: relative;
	padding: 0 70px 0 0;
}
.more_btn::before {
 position: absolute;
 top: 50%;
 right: 0;
 width: 50px;
 height: 1px;
 background-color: #d97721;
 content: '';
}
/*--------------------------------------------------------------
# color
--------------------------------------------------------------*/
.main_color {
	color: #2b5f63;
}
.seablue_color {
	color: #1e919a;
}
.gray_bg_color {
	background-color: #ebebe7;
}
/*--------------------------------------------------------------
# navbar
--------------------------------------------------------------*/
.navbar-light .navbar-nav .nav-link {
	color: #2b5f63;
	font-size: 16px;
	padding: 15px;
}
.navbar-light .navbar-nav a:hover.nav-link {
	color: #1e919a;
}
.dropdown-menu a{
	background-color: #eed9b0;
	color: #000;
}
.dropdown-menu a:hover {
	background-color: #1e919a;
	color: #fff;
}
.dropdown-toggle::after {
 position: absolute;
 right: 15px;
 font-size: 20px;
 font-family: "Font Awesome 6 Free";
 content: '\f107';
 font-weight: 700;
 border: 0;
 top: 15px;
}
.navbar-collapse {
	height: 100vh;
	background-color: #fff;
}
.nav-link {
	padding: 15px 0;
	border-bottom: 1px solid #eee;
}
.dropdown-menu {
	border: 0;
	background-color: #f7f7f7;
	padding: 0;
}
.dropdown-item {
	padding: 10px 15px 10px 30px;
	border-bottom: 1px solid #eee;
}
/*--------------------------------------------------------------
# top
--------------------------------------------------------------*/
.top_bg {
	/* Permalink - use to edit and share this gradient. 固定鏈接 - 用於編輯和分享此漸變： https://colorzilla.com/gradient-editor/#29959f+0,86d6dd+100 */
  background: linear-gradient(to bottom, #29959f 0%, #86d6dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.menu_bg {
	/* Permalink - use to edit and share this gradient. 固定鏈接 - 用於編輯和分享此漸變： https://colorzilla.com/gradient-editor/#29959f+0,86d6dd+100 */
  background: linear-gradient(to bottom, #29959f 0%, #86d6dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.logo_area img {
	max-height: 40px;
}
/*--------------------------------------------------------------
# side-nav-list
--------------------------------------------------------------*/
.side_box {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4393b1+0,80b9cf+100 */
  background: linear-gradient(to bottom, #4393b1 0%, #80b9cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding: 40px 10px;
	font-size: 30px;
	color: #fff;
}
ul.side_menu_box {
	padding-left: 0;
	list-style: none;
	margin: 0;
}
ul.side_menu_box li {
	position: relative;
	margin-bottom: 1px;
}
ul.side_menu_box li a {
	position: relative;
	display: block;
	padding: 20px 20px 20px 35px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	font-size: 16px;
	color: #000;
}
ul.side_menu_box li a:hover, ul.side_menu_box li a.current {
	position: relative;
	display: block;
	padding: 20px 20px 20px 35px;
	border-bottom: 1px solid #eee;
	font-size: 16px;
	color: #fff;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4393b1+0,80b9cf+100 */
  background: linear-gradient(to bottom, #4393b1 0%, #80b9cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
ul.side_menu_box li a::after {
 position: absolute;
 top: 45%;
 left: 15px;
 font-size: 5px;
 font-family: "FontAwesome";
 content: '\f111';
 font-weight: 700;
}
ul.side_menu_box_c {
	padding-left: 0;
	list-style: none;
	margin: 0;
}
ul.side_menu_box_c li {
	display: inline-block;
	position: relative;
	margin-left: 15px;
}
ul.side_menu_box_c li a {
	color: #1e919a;
	background-color: #fff;
	border: 1px solid #1e919a;
	border-radius: 50px;
	padding: 10px 25px 10px 30px;
	font-size: 16px;
}
ul.side_menu_box_c li a:hover, ul.side_menu_box_c li a.current {
	color: #fff;
	background-color: #1e919a;
	border: 1px solid #1e919a;
}
ul.side_menu_box_c li a::after {
 position: absolute;
 top: 20%;
 left: 15px;
 font-size: 10px;
 font-family: "FontAwesome";
 content: '\f111';
 font-weight: 700;
}
/*--------------------------------------------------------------
# mobile_dropdown
--------------------------------------------------------------*/
.accordion-button {
	position: relative;
}
.accordion-button:focus {
	z-index: 3;
	border-color: #1e919a;
	outline: 0;
	box-shadow: 0 0 0 0 rgba(13, 110, 253, .25);
}
.accordion-button:not(.collapsed) {
 color: #fff;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4393b1+0,80b9cf+100 */
  background: linear-gradient(to bottom, #4393b1 0%, #80b9cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}
.accordion-button::after {
 flex-shrink: 0;
 width: 1.25rem;
 height: 1.25rem;
 margin-left: auto;
 transition: transform .2s ease-in-out;
 position: absolute;
 top: 35%;
 right: 15px;
 content: "\f078";
 color: #1e919a;
 font-size: 20px;
 font-family: FontAwesome;
 line-height: 1;
 z-index: 1;
 background-image: none;
}
.accordion-button:not(.collapsed)::after {
 background-image: none;
 transform: rotate(-180deg);
 position: absolute;
 top: 25%;
 right: 15px;
 color: #fff;
}
ul.mobile_dropdown {
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}
ul.mobile_dropdown li a {
	display: block;
	color: #000;
	padding: 13px 10px 13px 30px;
	font-size: 15px;
	margin: 0;
	cursor: pointer;
	border-bottom: 1px solid #eee;
	background-color: #fff;
	text-align: left;
	position: relative;
}
ul.mobile_dropdown li a:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4393b1+0,80b9cf+100 */
  background: linear-gradient(to bottom, #4393b1 0%, #80b9cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: #fff;
	border-radius: 0px;
}
ul.mobile_dropdown li a::before {
 position: absolute;
 top: 43%;
 left: 15px;
 font-size: 5px;
 font-family: "FontAwesome";
 content: '\f111';
 font-weight: 700;
}
/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
.footer_bg {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4393b1+0,80b9cf+100 */
  background: linear-gradient(to bottom, #4393b1 0%, #80b9cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/*--------------------------------------------------------------
# main
--------------------------------------------------------------*/
.d_bg {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#90c7d6+42,b3e8ee+100 */
  background: linear-gradient(to bottom, #90c7d6 42%, #b3e8ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	margin-top: 30px;
	position: relative;
	z-index: 0;
	min-height:570px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
.d_bg::before {
 content: '101Skin doctors';
 position: absolute;
 left: 0;
 bottom: -15px;
 font-family: 'felixtitlingmt';
 font-size: 36px;
 text-align: center;
 color: #fff;
 width: 100%;
 opacity: 0.4;
}
.d_box {
	color: #3b5658;
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	max-width: 730px;
}
.d_box h1 {
	font-size: 36px;
	margin-bottom: 30px;
}
.d_box p {
	font-size: 16px;
}
.d_pic {
	padding-top: 200px;
	text-align: center;
	margin: auto;
}
.shop_area {
	position: relative;
	z-index: 0;
}
.shop_area::before {
 content: 'BEAUTIFUL';
 position: absolute;
 right: 0;
 bottom: -20px;
 font-family: 'felixtitlingmt';
 font-size: 60px;
 color: #fff;
 z-index: -1;
 opacity: 0.4;
}
.main_area {
	position: relative;
	z-index: 0;
}
.main_area::before {
 content: 'BEAUTIFUL';
 position: absolute;
 right: 0;
 bottom: -20px;
 font-family: 'felixtitlingmt';
 font-size: 60px;
 color: #fff;
 z-index: -1;
 opacity: 0.4;
}
@media (min-width:414px) {
 .d_bg::before {
 font-size: 45px;
}
}
@media (min-width:480px) {
 .d_box {
 top: 8%;
}
}
@media (min-width:533px) {
 .d_bg::before {
 font-size: 55px;
}
 .d_box {
 top: 8%;
 left: 5%;
}
}
@media (min-width:768px) {
 .main_area::before {
 bottom: -50px;
 font-size: 125px;
}
 .shop_area::before {
 bottom: -50px;
 font-size: 125px;
}
 .d_box {
 top: 20%;
 left: 5%;
 max-width: 400px;
}
 .d_bg {
 margin-top: 80px;
}
 .d_pic {
 padding-top: 0px;
}
 .d_bg::before {
 font-size: 75px;
 bottom: -30px;
}
 .d_box h1 {
 font-size: 40px;
 margin-bottom: 30px;
}
 .d_box p {
 font-size: 16px;
}
}
@media (min-width:992px) {
 .menu_bg {
 background: #fff;
}
  /*--------------------------------------------------------------
# navbar
--------------------------------------------------------------*/
  .navbar-expand-lg .navbar-nav .nav-link {
 padding: 10px 30px;
}
 .dropdown-toggle::after {
 display: none;
}
 .nav-item {
 position: relative;
}
 .nav-item::after {
 top: 7px;
 right: 0px;
 position: absolute;
 font-size: 20px;
 font-family: "Font Awesome 6 Free";
 content: '/';
 font-weight: 700;
 color: #2b5f63;
}
 .navbar-collapse {
 height: auto;
}
 .nav-link {
 padding: 15px 0;
 border-bottom: 0;
 position: relative;
}
 .dropdown-item {
 padding: 10px 15px;
 border-bottom: 1px solid #eee;
}
 .dropdown-menu {
 padding: 0;
}
 .m_top {
 margin-top: 90px;
}
 .pic_img {
 aspect-ratio: 21 / 10;
}
 .d_bg::before {
 font-size: 110px;
 bottom: -45px;
}
 .d_box {
 top: 30%;
}
 .d_box h1 {
 font-size: 50px;
}
 .d_box p {
 font-size: 18px;
}
}
@media (min-width:1200px) {
  /*--------------------------------------------------------------
# navbar
--------------------------------------------------------------*/
  .navbar-light .navbar-nav .nav-link {
 font-size: 18px;
}
 .navbar-expand-lg .navbar-nav .nav-link {
 padding: 10px 35px;
}
 .main_area::before {
 font-size: 180px;
 bottom: -65px;
}
 .shop_area::before {
 font-size: 180px;
 bottom: -65px;
}
 .d_bg::before {
 font-size: 130px;
 bottom: -50px;
}
 .d_box {
 max-width: 500px;
 top: 35%;
}
 .d_box h1 {
 font-size: 60px;
}
 .d_box p {
 font-size: 20px;
}
}
@media (min-width:1400px) {
 .d_bg::before {
 font-size: 150px;
 bottom: -60px;
}
 .d_box {
 left: 10%;
 top: 30%;
}
}
@media (min-width:1600px) {
 .pic_img {
 aspect-ratio: 21 / 6;
}
}
@media (min-width:1900px) {
 .d_bg::before {
 font-size: 200px;
 bottom: -80px;
}
 .d_box {
 max-width: 700px;
 left: 10%;
 top: 30%;
}
 .d_box h1 {
 font-size: 80px;
}
 .d_box p {
 font-size: 25px;
}
}