|
|
@@ -295,212 +295,201 @@ button {
|
|
|
/* 共通樣式 end */
|
|
|
|
|
|
/* header start */
|
|
|
-.bg-3C7062{
|
|
|
- background-color: #3C7062 !important;
|
|
|
+.bg-3C7062 {
|
|
|
+ background-color: #3c7062 !important;
|
|
|
}
|
|
|
|
|
|
.navbar {
|
|
|
position: relative;
|
|
|
z-index: 999;
|
|
|
- // width: 100vw;
|
|
|
- height: 100px;
|
|
|
- transition: 0.3s;
|
|
|
- cursor: pointer;
|
|
|
- background: #3C7062;
|
|
|
-
|
|
|
- @media (max-width: 991px) {
|
|
|
- background: #3C7062;
|
|
|
- height: 60px;
|
|
|
+ // width: 100vw;
|
|
|
+ height: 100px;
|
|
|
+ transition: 0.3s;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #3c7062;
|
|
|
|
|
|
+ @media (max-width: 991px) {
|
|
|
+ background: #3c7062;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.navbar-logo {
|
|
|
+ padding-right: 50px;
|
|
|
+}
|
|
|
+.navbar-nav {
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ @media (max-width: 767px) {
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+.navbar .nav-item {
|
|
|
+ padding: 13px 0;
|
|
|
+ @media (max-width: 767px) {
|
|
|
+ padding: 13px 50px;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .navbar-link {
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+.navbar .navbar-link {
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ text-decoration: none;
|
|
|
+ letter-spacing: 0.4em;
|
|
|
+ font-family: "Noto Sans TC";
|
|
|
+ @media (max-width: 1025px) {
|
|
|
+ // padding: 13px 10px 0px 10px;
|
|
|
+ // justify-content: flex-start;
|
|
|
}
|
|
|
- .navbar-logo{
|
|
|
- padding-right: 50px;
|
|
|
}
|
|
|
-.navbar-nav{
|
|
|
- width: 100%; justify-content: space-evenly;
|
|
|
+
|
|
|
+.navbar .navbar-link:hover {
|
|
|
+ color: #ffffff;
|
|
|
+ // background: var(--main-color);
|
|
|
+}
|
|
|
+
|
|
|
+.navbar .navbar-brand {
|
|
|
+ display: none;
|
|
|
+ @media (max-width: 991px) {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.navbar .mx-auto {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar .navbar-brand img {
|
|
|
+ // width: 70%;
|
|
|
+ margin-left: 10%;
|
|
|
+ object-fit: contain;
|
|
|
+
|
|
|
@media (max-width: 767px) {
|
|
|
- justify-content: flex-start;
|
|
|
+ width: 100px;
|
|
|
+ // height: 60px;
|
|
|
}
|
|
|
+}
|
|
|
+.nav-mobile {
|
|
|
+ @media (max-width: 767px) {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ transition: background-color 0.5s;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+.navbar .close-btn {
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ top: -5px;
|
|
|
+ width: 23px;
|
|
|
+ height: 2px;
|
|
|
+ background: #ffffff;
|
|
|
+ -webkit-transform: rotate(45deg);
|
|
|
+ transform: rotate(45deg);
|
|
|
+}
|
|
|
|
|
|
+.navbar .close-btn::after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 23px;
|
|
|
+ height: 2px;
|
|
|
+ background: #ffffff;
|
|
|
+ -webkit-transform: rotate(-90deg);
|
|
|
+ transform: rotate(-90deg);
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- .navbar .nav-item {
|
|
|
- padding: 13px 0;
|
|
|
- @media (max-width: 767px) {
|
|
|
- padding: 13px 50px;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- .navbar-link {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
+@media (max-width: 991px) {
|
|
|
+ .navbar {
|
|
|
+ padding: 0;
|
|
|
+ top: 0;
|
|
|
+ /* 收合時覆蓋內容 */
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.navbar .navbar-link {
|
|
|
- width: 100%;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- text-decoration: none;
|
|
|
- letter-spacing: 0.4em;
|
|
|
- font-family: 'Noto Sans TC';
|
|
|
- @media (max-width: 1025px) {
|
|
|
- // padding: 13px 10px 0px 10px;
|
|
|
- // justify-content: flex-start;
|
|
|
- }
|
|
|
+ display: block;
|
|
|
+ padding: 20px 10px;
|
|
|
+ // margin: 0 50px;
|
|
|
+ color: #ffffff;
|
|
|
+ border-bottom: 1px solid var(--dark-gray);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.navbar .navbar-link:hover {
|
|
|
- color: #ffffff;
|
|
|
- // background: var(--main-color);
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
}
|
|
|
-
|
|
|
- .navbar .navbar-brand {
|
|
|
- display: none;
|
|
|
- @media (max-width: 991px) {
|
|
|
- margin: 0;
|
|
|
+
|
|
|
+ .navbar .navbar-logo {
|
|
|
+ @media (max-width: 767px) {
|
|
|
+ display: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- .navbar .mx-auto {
|
|
|
- padding: 0;
|
|
|
+ .navbar .navbar-nav {
|
|
|
+ height: 100vh;
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
+ // justify-content: space-evenly;
|
|
|
+ // border-top: 1px solid var(--dark-gray);
|
|
|
}
|
|
|
-
|
|
|
- .navbar .navbar-brand img {
|
|
|
- // width: 70%;
|
|
|
- margin-left: 10%;
|
|
|
- object-fit: contain;
|
|
|
|
|
|
- @media (max-width: 767px) {
|
|
|
- width: 100px;
|
|
|
- // height: 60px;
|
|
|
+ .navbar .navbar-nav li:last-child a {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ .navbar .navbar-toggler {
|
|
|
+ width: 30px;
|
|
|
+ margin-right: 30px;
|
|
|
+ margin-top: 0px;
|
|
|
+ border: none;
|
|
|
}
|
|
|
- .nav-mobile{
|
|
|
- @media (max-width: 767px) {
|
|
|
-
|
|
|
- position: absolute;
|
|
|
- top:0;
|
|
|
- transition: background-color 0.5s;
|
|
|
- z-index: 1000;
|
|
|
- }
|
|
|
+
|
|
|
+ .navbar .navbar-toggler:focus,
|
|
|
+ .navbar .navbar-toggler:active {
|
|
|
+ outline: none !important;
|
|
|
+ -webkit-box-shadow: none;
|
|
|
+ box-shadow: none;
|
|
|
}
|
|
|
-
|
|
|
- .navbar .close-btn {
|
|
|
- display: inline-block;
|
|
|
- position: relative;
|
|
|
- top: -5px;
|
|
|
- width: 23px;
|
|
|
- height: 2px;
|
|
|
- background: #ffffff;
|
|
|
- -webkit-transform: rotate(45deg);
|
|
|
- transform: rotate(45deg);
|
|
|
- }
|
|
|
-
|
|
|
- .navbar .close-btn::after {
|
|
|
- content: "";
|
|
|
+
|
|
|
+ .navbar .navbar-brand {
|
|
|
display: block;
|
|
|
- width: 23px;
|
|
|
- height: 2px;
|
|
|
- background: #ffffff;
|
|
|
- -webkit-transform: rotate(-90deg);
|
|
|
- transform: rotate(-90deg);
|
|
|
}
|
|
|
-
|
|
|
- @media (max-width: 991px) {
|
|
|
- .navbar {
|
|
|
- padding: 0;
|
|
|
- top: 0;
|
|
|
- /* 收合時覆蓋內容 */
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
-
|
|
|
- .navbar .navbar-link {
|
|
|
- display: block;
|
|
|
- padding: 20px 10px;
|
|
|
- // margin: 0 50px;
|
|
|
- color: #ffffff;
|
|
|
- border-bottom: 1px solid var(--dark-gray);
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- .navbar .navbar-link:hover {
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .navbar .navbar-logo {
|
|
|
- @media (max-width: 767px) {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .navbar .navbar-nav {
|
|
|
- height: 100vh;
|
|
|
- white-space: nowrap;
|
|
|
- width: 100%;
|
|
|
- // justify-content: space-evenly;
|
|
|
- // border-top: 1px solid var(--dark-gray);
|
|
|
- }
|
|
|
-
|
|
|
- .navbar .navbar-nav li:last-child a {
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .navbar .navbar-toggler {
|
|
|
- width: 30px;
|
|
|
- margin-right: 30px;
|
|
|
- margin-top: 0px;
|
|
|
- border: none;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .navbar .navbar-toggler:focus,
|
|
|
- .navbar .navbar-toggler:active {
|
|
|
- outline: none !important;
|
|
|
- -webkit-box-shadow: none;
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
-
|
|
|
- .navbar .navbar-brand {
|
|
|
- display: block;
|
|
|
+.news-link {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 0;
|
|
|
+ background-color: #da831c;
|
|
|
+ font-weight: bold;
|
|
|
+ a {
|
|
|
+ margin: auto;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .news-link {
|
|
|
- display: flex;
|
|
|
- padding: 10px 0;
|
|
|
- background-color: #da831c;
|
|
|
- font-weight: bold;
|
|
|
- a {
|
|
|
- margin: auto;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- letter-spacing: 2px;
|
|
|
- &:hover {
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
- @media (max-width: 991px) {
|
|
|
- margin-top: 70px;
|
|
|
- }
|
|
|
- @media (max-width: 767px) {
|
|
|
- margin-top: 70px;
|
|
|
- }
|
|
|
+ @media (max-width: 991px) {
|
|
|
+ margin-top: 70px;
|
|
|
}
|
|
|
-
|
|
|
- .navbar > .container-fluid {
|
|
|
- display: flex !important;
|
|
|
+ @media (max-width: 767px) {
|
|
|
+ margin-top: 70px;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.navbar > .container-fluid {
|
|
|
+ display: flex !important;
|
|
|
+}
|
|
|
|
|
|
// .navbar {
|
|
|
// background-color: var(--second-color);
|
|
|
@@ -661,7 +650,6 @@ button {
|
|
|
// display: flex !important;
|
|
|
// }
|
|
|
|
|
|
-
|
|
|
/* header end */
|
|
|
|
|
|
/* slick start */
|
|
|
@@ -772,7 +760,7 @@ button {
|
|
|
.footer {
|
|
|
padding: 0 87px;
|
|
|
font-size: 15px;
|
|
|
- background: #3C7062;
|
|
|
+ background: #3c7062;
|
|
|
}
|
|
|
|
|
|
.footer img {
|
|
|
@@ -787,7 +775,6 @@ button {
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.footer .list {
|
|
|
display: -webkit-box;
|
|
|
display: -ms-flexbox;
|
|
|
@@ -796,34 +783,33 @@ button {
|
|
|
}
|
|
|
|
|
|
.footer .list li {
|
|
|
- padding-top: 18px;
|
|
|
-
|
|
|
+ padding-top: 18px;
|
|
|
}
|
|
|
|
|
|
.footer .title {
|
|
|
padding-top: 85px;
|
|
|
- color:#fff;
|
|
|
- font-family: 'Noto Sans TC';
|
|
|
+ color: #fff;
|
|
|
+ font-family: "Noto Sans TC";
|
|
|
font-style: normal;
|
|
|
font-weight: 500;
|
|
|
font-size: 20px;
|
|
|
line-height: 150%;
|
|
|
/* identical to box height, or 30px */
|
|
|
-
|
|
|
+
|
|
|
letter-spacing: 0.4em;
|
|
|
}
|
|
|
|
|
|
.footer .list li a,
|
|
|
.footer .copyright,
|
|
|
.footer .copyright a {
|
|
|
- color:#ffff;
|
|
|
- font-family: 'Noto Sans TC';
|
|
|
+ color: #ffff;
|
|
|
+ font-family: "Noto Sans TC";
|
|
|
font-style: normal;
|
|
|
font-weight: 300;
|
|
|
font-size: 16px;
|
|
|
line-height: 150%;
|
|
|
/* identical to box height, or 24px */
|
|
|
-
|
|
|
+
|
|
|
letter-spacing: 0.4em;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
@@ -849,7 +835,7 @@ button {
|
|
|
button {
|
|
|
display: flex;
|
|
|
font-weight: 700;
|
|
|
- color:#fff;
|
|
|
+ color: #fff;
|
|
|
span {
|
|
|
display: none;
|
|
|
margin-left: 15px;
|
|
|
@@ -860,12 +846,11 @@ button {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
- .nav-link{
|
|
|
-
|
|
|
+ .nav-link {
|
|
|
padding: 1rem 1rem;
|
|
|
}
|
|
|
.nav-pills .nav-link.active {
|
|
|
- color:#fff;
|
|
|
+ color: #fff;
|
|
|
background: none !important;
|
|
|
}
|
|
|
.tab-content {
|
|
|
@@ -888,21 +873,21 @@ button {
|
|
|
.footer .copyright {
|
|
|
margin-top: 55px;
|
|
|
padding-top: 32px;
|
|
|
-padding-bottom: 53px;
|
|
|
+ padding-bottom: 53px;
|
|
|
border-top: 1px solid #fff;
|
|
|
@media (max-width: 767px) {
|
|
|
- border:none;
|
|
|
+ border: none;
|
|
|
}
|
|
|
}
|
|
|
-.copyright{
|
|
|
- p{
|
|
|
- font-family: 'Noto Sans TC';
|
|
|
- font-style: normal;
|
|
|
- font-weight: 300;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- letter-spacing: 0.4em;
|
|
|
- color: #FFFFFF;
|
|
|
+.copyright {
|
|
|
+ p {
|
|
|
+ font-family: "Noto Sans TC";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ letter-spacing: 0.4em;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1598,7 +1583,6 @@ padding-bottom: 53px;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
-
|
|
|
.bhouseweb_loc_sec01 .bhouseweb_loc_type,
|
|
|
.bhouseweb_loc_sec01 .bhouseweb_loc_pattern,
|
|
|
.bhouseweb_loc_sec01 .bhouseweb_loc_budget,
|
|
|
@@ -1617,7 +1601,6 @@ padding-bottom: 53px;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
-
|
|
|
.bhouseweb_loc_sec01 .bhouseweb_loc_type a,
|
|
|
.bhouseweb_loc_sec01 .bhouseweb_loc_pattern a,
|
|
|
.bhouseweb_loc_sec01 .bhouseweb_loc_budget a,
|
|
|
@@ -1678,7 +1661,6 @@ padding-bottom: 53px;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
-
|
|
|
.bhouseweb_loc_search_box #bhouseweb_search,
|
|
|
.bhouseweb_loc_search_box #blog_search {
|
|
|
width: 86%;
|
|
|
@@ -1692,13 +1674,15 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
margin-left: 10px;
|
|
|
- background: linear-gradient(45deg,
|
|
|
+ background: linear-gradient(
|
|
|
+ 45deg,
|
|
|
rgba(0, 0, 0, 0) 0%,
|
|
|
rgba(0, 0, 0, 0) 43%,
|
|
|
#fff 45%,
|
|
|
#fff 55%,
|
|
|
rgba(0, 0, 0, 0) 57%,
|
|
|
- rgba(0, 0, 0, 0) 100%),
|
|
|
+ rgba(0, 0, 0, 0) 100%
|
|
|
+ ),
|
|
|
linear-gradient(135deg, transparent 0%, transparent 43%, #fff 45%, #fff 55%, transparent 57%, transparent 100%);
|
|
|
}
|
|
|
|
|
|
@@ -4068,7 +4052,7 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
flex-direction: column;
|
|
|
|
|
|
h1 {
|
|
|
- background-image: url('/img/banner/bn_serve@2x.png');
|
|
|
+ background-image: url("/img/banner/bn_serve@2x.png");
|
|
|
background-position: center;
|
|
|
background-size: cover;
|
|
|
width: 100%;
|
|
|
@@ -4380,7 +4364,8 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
right: 100px;
|
|
|
}
|
|
|
|
|
|
- @media screen and (max-width: 375px) {}
|
|
|
+ @media screen and (max-width: 375px) {
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/* 成家設計服務-room_planner end */
|
|
|
@@ -4526,7 +4511,6 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
}
|
|
|
|
|
|
@media (max-width: 991px) {
|
|
|
-
|
|
|
.blog-categories .container,
|
|
|
.blog-categories .article {
|
|
|
width: 75%;
|
|
|
@@ -4540,7 +4524,6 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
}
|
|
|
|
|
|
@media (max-width: 575px) {
|
|
|
-
|
|
|
.blog-categories .container,
|
|
|
.blog-categories .article,
|
|
|
.room-planner-process-box .container {
|
|
|
@@ -5632,7 +5615,6 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.blog-content {
|
|
|
.video-box {
|
|
|
position: relative;
|
|
|
@@ -6586,7 +6568,6 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
// }
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
-
|
|
|
.store-tab #pills-tab .nav-item-link,
|
|
|
#anchor-tab {
|
|
|
li {
|
|
|
@@ -6691,6 +6672,6 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
border-radius: 0 !important;
|
|
|
}
|
|
|
|
|
|
-.breadcrumb-item+.breadcrumb-item::before {
|
|
|
+.breadcrumb-item + .breadcrumb-item::before {
|
|
|
content: "＞" !important;
|
|
|
-}
|
|
|
+}
|
