@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap"); :root { --main-color: #4c660a; --second-color: #808f4c; --logo-color: #78ad42; --dark-color: #656565; --dark-gray: #969696; --light-gray: #d6d6d8; --font-md: 15px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Noto Sans TC", sans-serif; font-weight: 400; } /* 共通樣式 start */ .zz-sleeper { width: 20px !important; height: 20px !important; border-radius: 100%; background: #7e6950; color: #fff; } a { color: #006e9a; text-decoration: none; } img { image-rendering: -webkit-optimize-contrast; } button { -webkit-appearance: none; /* For Chrome */ -moz-appearance: none; /* For Mozilla */ appearance: none; border-radius: 0; } .bhouseweb_loc_content { width: 50%; margin: 0 auto; } @media screen and (max-width: 1200px) { .bhouseweb_loc_content { width: 70%; } } @media screen and (max-width: 767px) { .bhouseweb_loc_content { width: 95%; } } .line { display: block; margin: 35px 0 50px; border-bottom: 1px solid grey; } .bhouseweb_loc_line { background: grey; height: 0.01rem !important; opacity: 1 !important; } .bhouse_title { color: #4c660b; font-size: 1.2rem; font-weight: 600; letter-spacing: 3px; } @media screen and (max-width: 767px) { .bhouse_title { font-size: 1rem; } } .bhouse_subtitle, .bhouse_subtitle b { color: #4c660b; font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 1rem; font-weight: 700; } .likeSee__state { display: flex; justify-content: space-between; align-items: center; letter-spacing: 2px; } .likeSee__state img { width: 40px; } @media screen and (max-width: 767px) { .likeSee__state img { width: 30px; } } .mt-03 { margin-top: 0.3rem; } .mt-15 { margin-top: 15px; } .mt-50 { margin-top: 50px; } .mt-30 { margin-top: 30px; } .my-80 { margin: 80px 0; } .my-50 { margin: 50px 0; } .mt-80 { margin-top: 80px; } .mb-80 { margin-bottom: 80px; } .mt-100 { margin-top: 100px; } .readMore, .article_readMore { font-size: 0.9rem; font-weight: bold; color: #656565; cursor: pointer; letter-spacing: 1px; } .readMore:hover, .article_readMore:hover { opacity: 0.8; } .slider_loading { display: none !important; } .blog_loading { display: none !important; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.3); } } @keyframes dot { 0% { transform: translate(0, 0); } 30% { transform: translate(717px, 0); } 40% { transform: translate(717px, 123px); } 70% { transform: translate(18px, 123px); } 80% { transform: translate(18px, 205px); } 100% { transform: translate(550px, 205px); } } @keyframes dot_768px { 0% { transform: translate(0, -5px); } 30% { transform: translate(620px, -5px); } 40% { transform: translate(620px, 123px); } 70% { transform: translate(20px, 123px); } 80% { transform: translate(20px, 193px); } 100% { transform: translate(490px, 193px); } } /* 共通樣式 end */ /* header start */ .navbar { background-color: var(--second-color); } .navbar ul { white-space: nowrap; } .navbar .nav-item { padding: 13px 0; } @media (max-width: 991px) { .navbar .nav-item { padding: 0; } } .navbar .nav-item:hover { background-color: var(--main-color); } .navbar .nav-item:hover .navbar-link { color: #fff; } .navbar .navbar-link { padding: 13px 20px; color: var(--main-color); font-weight: 500; } .navbar .navbar-link:hover { color: #ffffff; background: var(--main-color); } .navbar .navbar-brand { display: none; } @media (max-width: 991px) { .navbar .navbar-brand { margin: 0; } } .navbar .mx-auto { padding: 0; } .navbar .navbar-brand img { margin-left: 10%; -o-object-fit: contain; object-fit: contain; } .navbar .close-btn { display: inline-block; position: relative; top: -5px; width: 23px; height: 2px; background: #ffffff; transform: rotate(45deg); } .navbar .close-btn::after { content: ""; display: block; width: 23px; height: 2px; background: #ffffff; transform: rotate(-90deg); } @media (max-width: 991px) { .navbar { padding: 0; top: 0; /* 收合時覆蓋內容 */ width: 100%; position: absolute; z-index: 999; } .navbar .navbar-link { display: block; padding: 20px 0px; 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 { display: none; } .navbar .navbar-nav { height: 100vh; white-space: nowrap; border-top: 1px solid var(--dark-gray); } .navbar .navbar-nav li:last-child a { border: none; } .navbar .navbar-toggler { width: 30px; margin-right: 30px; border: none; } .navbar .navbar-toggler:focus, .navbar .navbar-toggler:active { outline: none !important; box-shadow: none; } .navbar .navbar-brand { display: block; } } .news-link { display: flex; padding: 10px 0; background-color: #da831c; font-weight: bold; } .news-link a { margin: auto; color: #fff; font-size: 14px; text-align: center; letter-spacing: 2px; } .news-link a:hover { opacity: 0.8; } @media (max-width: 991px) { .news-link { margin-top: 70px; } } @media (max-width: 767px) { .news-link { margin-top: 70px; } } .navbar > .container-fluid { display: flex !important; } /* header end */ /* slick start */ .slick-dots { bottom: 10px; } .slick-dots li button:before { opacity: 1; content: "●"; color: #ffffff; font-size: 18px; } .slick-dots li.slick-active button:before { opacity: 1; color: var(--second-color); } .slider-item { position: relative; } .slider-item img { width: 100%; height: 845px; -o-object-fit: cover; object-fit: cover; } @media (max-width: 991px) { .slider-item img { height: 500px; } } @media (max-width: 576px) { .slider-item img { height: 335px; } } .slider-item div { padding: 20px 18vw; position: absolute; left: 0; right: 0; bottom: 0px; background-color: rgba(128, 143, 76, 0.8); text-align: end; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 768px) { .slider-item div { padding: 20px 10vw; } } .slider-item p { margin: 0; color: #ffffff; font-size: 18px; font-weight: 500; letter-spacing: 2px; } @media (max-width: 767px) { .slider-item p { display: flex; justify-content: end; text-align: left; } } @media (max-width: 575px) { .slider-item p { font-size: 14px; } } @media (max-width: 576px) { .slider-item p:first-child { margin-left: 24px; } } @media (max-width: 400px) { .slider-item p:first-child { margin-left: auto; } } .slider-item p:last-child { font-size: 18px; text-align: right; } @media (max-width: 575px) { .slider-item p:last-child { font-size: 14px; } } @media (max-width: 767px) { .slider-item div { padding: 20px 5vw; } } @media (max-width: 575px) { .slider-item div { padding: 20px 19px; height: 105px; } } /* slick end */ /* footer start */ .footer { padding: 0 18vw; font-size: 15px; background-color: var(--light-gray); } .footer img { display: none; margin: 50px; } .footer ul { padding: 0; list-style: none; font-weight: bold; margin-bottom: 30px; } .footer .row { padding: 60px 0; } .footer .list { display: flex; } .footer .list li { padding: 5px 0; } .footer .title { font-size: 15px; color: var(--main-color); font-weight: 500; letter-spacing: 1px; } .footer .list li a, .footer .copyright, .footer .copyright a { color: #68686b; letter-spacing: 1px; } .footer .mobile-list nav { padding: 30px 30px; border-bottom: 1px solid var(--dark-gray); } .footer .mobile-list nav .breadcrumb-item a { display: flex; font-weight: 700; color: var(--main-color); } .footer .mobile-list nav #breadcrumb_minor { color: #68686b; font-weight: 700 !important; } .footer .mobile-list .mobile-tab-list { font-size: 18px; margin: 30px auto; justify-content: space-around; } .footer .mobile-list .mobile-tab-list button { display: flex; font-weight: 700; color: var(--main-color); } .footer .mobile-list .mobile-tab-list button span { display: none; margin-left: 15px; } .footer .mobile-list .mobile-tab-list .active span { display: block; } .footer .mobile-list .mobile-tab-list .nav-pills .nav-link.active { color: var(--main-color); background: none !important; } .footer .mobile-list .mobile-tab-list .tab-content { width: 30vw; } .footer .mobile-list .mobile-tab-list .tab-content li { margin: 7px 0 15px; } .footer .mobile-list .mobile-tab-list .tab-content li a { color: #68686b; font-weight: 700; letter-spacing: 1px; } .footer .mobile-list .mobile-tab-list #v-pills-tab { width: 200px; } .footer .copyright { padding: 20px 0; border-top: 1px solid var(--dark-gray); } .footer .copyright a { padding: 0 5px; } .footer .copyright span { position: relative; top: -1px; } @media (max-width: 1200px) { .footer { padding: 0 8vw; } } @media (max-width: 767px) { .footer { padding: 0 1.5vw; } .footer img { display: inline-block; } .footer .list { display: none; } } /* footer end */ /* home start */ .home-content { width: 50%; margin: 0 auto; } .home-content a:hover p { opacity: 0.8; } .home-content img { max-width: 500px; width: 100%; } .home-content .bottom-box { position: relative; } .home-content .bottom-box div { background: rgba(128, 143, 76, 0.8); padding: 20px 20px 20px 50px; } @media screen and (max-width: 767px) { .home-content .bottom-box div { padding: 20px 18px; } } .home-content .bottom-box p { margin: auto; text-align: left; color: #fff; font-weight: 700; letter-spacing: 2px; display: flex; margin-left: auto; justify-content: end; } .home-content .bottom-box p:first-child { font-size: 20px; } @media screen and (max-width: 767px) { .home-content .bottom-box p:first-child { font-size: 14px; } } .home-content .bottom-box p:last-child { font-size: 16px; padding-top: 10px; margin-right: 10px; text-align: end; } @media screen and (max-width: 767px) { .home-content .bottom-box p:last-child { font-size: 12px; } } @media (max-width: 1200px) { .home-content { width: 70%; } } @media (max-width: 767px) { .home-content { width: 98.5%; } .home-content img { max-width: 100%; width: 100%; } } .home-content img { height: auto; } .home-content .bg-img { width: 100%; padding: 40% 0; background-position: center; background-size: cover; transition: all 0.5s; } .home-content .bg-portfolio .bg-img { background-image: url(/img/home/X-1-02.webp); } .home-content .bg-serve .bg-img { background-image: url(/img/home/X-1-03.webp); } .home-content .bg-qa .bg-img { background-image: url(/img/home/X-1-04.webp); } .home-content .bg-store .bg-img { background-image: url(/img/home/X-1-05.webp); } .reserve { position: fixed; bottom: 3vw; right: 3vw; z-index: 999; } .reserve img { width: 120px !important; } /* home end */ /* 服務常見QA-frequently_asked_questions start */ .faq-md-content .accordion { padding: 200px 25% 40px; border-bottom: 1px solid var(--dark-gray); } .faq-md-content .accordion .accordion-item { padding: 10px 0; border-width: 2px; border-color: var(--second-color); } .faq-md-content .accordion .accordion-item .title { display: flex; align-items: center; margin: auto; font-size: 30px; font-weight: bold; letter-spacing: 3px; color: var(--second-color); } .faq-md-content .accordion .accordion-button, .faq-md-content .accordion .accordion-button p { font-size: 14px; font-weight: 500; letter-spacing: 1px; background: transparent !important; } .faq-md-content .accordion .accordion-button:not(.collapsed) { color: #000000; box-shadow: none; } .faq-md-content .accordion .accordion-button:not(.collapsed)::after { background-image: url(/img/field_q6_h@2x.png); } .faq-md-content .accordion .accordion-button:focus, .faq-md-content .accordion .accordion-button:active { outline: none !important; box-shadow: none; border-color: var(--second-color); } .faq-md-content .accordion .accordion-button::after { width: 1.8rem; height: 1.8rem; background-size: 2rem; background-image: url(/img/field_q6_h@2x.png); image-rendering: -webkit-optimize-contrast; } .faq-md-content .accordion .accordion-button span { margin-left: 10px; letter-spacing: 1px; color: #000; font-size: 20px; font-weight: 500; } .faq-md-content .accordion .accordion-button span img { width: 60%; } .faq-md-content .accordion .accordion-body, .faq-md-content .accordion .accordion-body p, .faq-md-content .accordion .accordion-body div, .faq-md-content .accordion .accordion-body span { font-size: 14px !important; line-height: 28px !important; letter-spacing: 1px !important; } .faq-md-content .accordion .botder-item { margin-bottom: 10px; border-radius: 0; border: 2px solid var(--second-color); line-height: 28px; } .faq-md-content .botder-item::after { margin-right: 20px; } .faq-md-content .accordion .subtitle { display: none; padding: 20px 0 0; font-size: 14px; text-align: center; font-weight: bold; color: var(--dark-color); } @media (max-width: 1200px) { .faq-md-content .accordion { padding: 185px 15% 40px; } } @media (max-width: 767px) { .faq-md-content .accordion { padding: 150px 5% 40px; } .faq-md-content .accordion .botder-item { padding: 0; } .faq-md-content .accordion .botder-item p { padding: 20px; margin: 5px 0; font-size: 16px; } .faq-md-content .accordion .mobile-body { font-size: 16px; } .faq-md-content .accordion .mobile-body, .faq-md-content .accordion .accordion-body { font-size: 16px; line-height: 30px; } .faq-md-content .accordion .accordion-item { padding: 15px 0; } .faq-md-content .accordion .subtitle { display: block; } } .faq-md-content .qa-navs { padding: 20px 0; } .faq-md-content .qa-navs .home-content { display: flex; } @media (max-width: 767px) { .faq-md-content .qa-navs { padding: 40px 0; } } /* 服務常見QA-frequently_asked_questions end */ /* Banner start */ .bhouseweb_loc_banner { position: relative; } @media screen and (max-width: 991px) { .bhouseweb_loc_banner { padding-top: 70px; } } @media screen and (max-width: 991px) { .bhouseweb_loc_banner .banner-img { -o-object-fit: cover; object-fit: cover; } } .bt_container { transition: all 0.3s; } .bt_container_margin { margin-bottom: -180px; } @media screen and (max-width: 767px) { .bt_container_margin { margin-bottom: -150px; } } .bt_slogan { position: relative; right: 80px; bottom: 20px; width: 90px; background: rgba(76, 102, 11, 0.6); color: #fff; cursor: pointer; display: none; } .bt_slogan img { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(324deg) brightness(104%) contrast(102%); } @media screen and (max-width: 767px) { .bt_slogan { right: 5%; width: 80px; } } @media screen and (max-width: 575px) { .bt_slogan { right: 3%; width: 50px; } } .bt_slogan_portfolio { width: 350px; -o-object-fit: cover; object-fit: cover; position: absolute; right: 260px; bottom: -175px; cursor: pointer; } @media screen and (max-width: 991px) { .bt_slogan_portfolio { width: 300px; right: 250px; height: 200px; } } @media screen and (max-width: 767px) { .bt_slogan_portfolio { right: 150px; bottom: -140px; } } @media screen and (max-width: 575px) { .bt_slogan_portfolio { right: 75px; width: 250px; height: 180px; } } .bhouseweb_loc_banner .bt_slogan img { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(324deg) brightness(104%) contrast(102%); } /* Banner end */ /* 室內設計作品-collection start */ .collection_banner_text_box { padding: 20px 20vw; position: absolute; left: 0; right: 0; bottom: 0px; background-color: rgba(128, 143, 76, 0.8); text-align: end; } @media screen and (max-width: 767px) { .collection_banner_text_box { padding: 20px 2vw 20px 0; } } .collection_banner_text_box p { margin: 0; color: #ffffff; font-size: 22px; font-weight: 500; letter-spacing: 2px; } @media screen and (max-width: 767px) { .collection_banner_text_box p { font-size: 17px; } } .collection_banner_text_box p:last-child { font-size: 18px; } @media (max-width: 575px) { .collection_banner_text_box p:last-child { font-size: 14px; } } .style_house_banner { position: relative; } .select { border-bottom: 1.5px solid #565656 !important; } .bhouseweb_item_type { cursor: pointer; } .readMore { margin-top: 15px; } .title_underline { border-bottom: 2px #fff solid; padding-bottom: 5px; } .bhouseweb_loc_banner { position: relative; } @media screen and (max-width: 991px) { .bhouseweb_loc_banner { padding-top: 70px; } } @media screen and (max-width: 991px) { .bhouseweb_loc_banner .banner-img { height: 200px; -o-object-fit: cover; object-fit: cover; } } .bhouseweb_loc_sec01 { width: auto; margin-top: 180px; color: #656565; font-size: 0.9rem; } @media screen and (max-width: 767px) { .bhouseweb_loc_sec01 { width: auto; margin-top: 150px; overflow-x: auto; } } .bhouseweb_loc_sec01 .bhouseweb_loc_type, .bhouseweb_loc_sec01 .bhouseweb_loc_pattern, .bhouseweb_loc_sec01 .bhouseweb_loc_budget, .bhouseweb_loc_sec01 .bhouseweb_loc_size { margin: 10px; } .bhouseweb_loc_type { width: auto; white-space: nowrap; overflow-x: auto; } @media screen and (max-width: 767px) { .bhouseweb_loc_type { width: auto; white-space: nowrap; } } @media screen and (max-width: 767px) { .bhouseweb_item_type { display: inline-block; } } @media screen and (max-width: 767px) { .bhouseweb_loc_sec01 .bhouseweb_loc_type, .bhouseweb_loc_sec01 .bhouseweb_loc_pattern, .bhouseweb_loc_sec01 .bhouseweb_loc_budget, .bhouseweb_loc_sec01 .bhouseweb_loc_size { margin: 5px; } } .bhouseweb_loc_sec01 .bhouseweb_loc_type a, .bhouseweb_loc_sec01 .bhouseweb_loc_pattern a, .bhouseweb_loc_sec01 .bhouseweb_loc_budget a, .bhouseweb_loc_sec01 .bhouseweb_loc_size a { text-decoration: none; color: #565656; padding: 3px 15px; } @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, .bhouseweb_loc_sec01 .bhouseweb_loc_size a { padding: 3px 5px; } } .bhouseweb_loc_box { display: flex; align-items: center; } .bhouseweb_loc_box p { min-width: 55px; padding-left: 25px; font-weight: 500 !important; } @media screen and (max-width: 767px) { .bhouseweb_loc_box p { min-width: 45px; padding-left: 10px; } } .bhouseweb_loc_search_box { width: 100%; background: #565656; } .bhouseweb_loc_search_box .bhouseweb_search_img { width: 20%; font-size: 24px; color: #fff; padding-left: 30px; } @media screen and (max-width: 767px) { .bhouseweb_loc_search_box .bhouseweb_search_img { padding-left: 10px; width: 15%; font-size: 16px; } } .bhouseweb_loc_search_box .bhouseweb_search_form { padding: 0.35rem 0.35rem; } .bhouseweb_loc_search_box #bhouseweb_search, .bhouseweb_loc_search_box #blog_search { width: 70%; background: #565656 !important; border: none; font-size: 14.4px; line-height: 1.5; outline: none; color: #bcbcbc; } @media screen and (max-width: 767px) { .bhouseweb_loc_search_box #bhouseweb_search, .bhouseweb_loc_search_box #blog_search { width: 86%; font-size: 14.4px; } } input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: inline-block; width: 12px; height: 12px; margin-left: 10px; 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%), linear-gradient(135deg, transparent 0%, transparent 43%, #fff 45%, #fff 55%, transparent 57%, transparent 100%); } .bhouseweb_loc_search_box ::-moz-placeholder { color: #bcbcbc; } .bhouseweb_loc_search_box ::placeholder { color: #bcbcbc; } .bhouseweb_loc_search_box :-ms-input-placeholder { /* IE 10+ */ color: #bcbcbc; } .bhouseweb_loc_search_box ::-moz-placeholder { /* Firefox 19+ */ color: #bcbcbc; } .bhouseweb_loc_sec02 { height: 1230px; overflow: hidden; } .bhouseweb_loc_sec02_card { background: var(--logo-color); position: relative; transition: 0.5s ease-in-out; cursor: pointer; overflow: hidden; height: 300px; } @media screen and (max-width: 767px) { .bhouseweb_loc_sec02_card { height: 300px; padding: 0; } } .bhouseweb_loc_sec02_card a { text-decoration: none; } .bhouseweb_loc_sec02_card .sec02-p-dec { color: #fff; text-align: center; font-size: 14px; font-weight: 900; transition: 0.5s; letter-spacing: 1px; width: 100%; position: absolute; top: 50%; left: 50%; font-size: 16px; transform: translate(-50%, -50%); opacity: 0; } @media screen and (max-width: 767px) { .bhouseweb_loc_sec02_card .sec02-p-dec { display: none; } } .bhouseweb_loc_sec02_card img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .bhouseweb_loc_sec02_card img { height: 250px; -o-object-fit: cover; object-fit: cover; } } .bhouseweb_loc_sec02_card:hover .sec02-p-dec, .bhouseweb_loc_sec02_card:hover .sec03-p-dec { opacity: 1; } .bhouseweb_loc_sec02_card:hover img { opacity: 0.2; } @media screen and (max-width: 767px) { .bhouseweb_loc_sec02_card:hover img { opacity: 1; } } .bhouseweb_loc_sec02_card .slide_item_text { padding: 15px; background-color: rgba(128, 143, 76, 0.8); } .bhouseweb_loc_sec02_card .slide_item_text p { color: #fff; letter-spacing: 1px; text-align: right; } .style_house_sec02 .img-content:last-child .slide_item_text { margin-bottom: 0px; } .img-content { display: flex; flex-direction: column; } .img-content .slide_item_text { margin-bottom: 30px; background-color: rgba(128, 143, 76, 0.8); } .img-content .slide_item_text p { margin-bottom: 0; padding: 20px 60px; line-height: 28px; font-weight: 500; letter-spacing: 1px; color: #fff; text-align: left; } .img-height-vw { -o-object-fit: contain; object-fit: contain; height: 33vw !important; } @media (max-width: 1200px) { .img-height-vw { height: 48vw !important; } } @media (max-width: 767px) { .img-height-vw { height: 67vw !important; } } @media (max-width: 576px) { .img-height-vw { height: 70vw !important; } } /* 室內設計作品-collection end */ /* 室內設計作品內頁-simple_korean_style_hous start */ .bg-portfolio .bg-img { background-image: url(/img/home/X-1-02.webp); } .bg-serve .bg-img { background-image: url(/img/home/X-1-03.webp); } .bg-qa .bg-img { background-image: url(/img/home/X-1-04.webp); } .bg-store .bg-img { background-image: url(/img/home/X-1-05.webp); } .icon-box { display: flex; } .icon-box img { margin-top: 0px; width: 35px; } .style_house_ads { padding: 15px; background: #fff; } @media screen and (max-width: 991px) { .style_house_ads { padding-top: 13px; } } .style_house_ads .style_house_text { margin: 0 auto; } .style_house_line { background: grey; height: 1px; opacity: 1 !important; } .title_underline { border-bottom: 2px #fff solid; padding-bottom: 5px; } .style_house_banner img { width: 100%; height: 80vh; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .style_house_banner img { height: 300px; } } .style_house_title { color: #4c660b; font-size: 1.4rem; letter-spacing: 3px; margin-bottom: 25px; font-weight: 700; text-align: center; } @media screen and (max-width: 767px) { .style_house_title { font-size: 1rem; } } .style_house_subtitle { color: #4c660b; font-size: 1.2rem; font-weight: 600; letter-spacing: 3px; font-weight: 700; } .style_house_content { width: 50%; margin: 0 auto; } @media screen and (max-width: 1199px) { .style_house_content { width: 70%; } } @media screen and (max-width: 767px) { .style_house_content { width: 95%; } } .style_house_sec01 { text-align: center; margin: 50px auto; } @media screen and (max-width: 767px) { .style_house_sec01 { margin-top: 30px; } } .style_house_sec01 h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; } @media screen and (max-width: 767px) { .style_house_sec01 h3 { font-size: 1rem; } } .style_house_sec01 p { color: #808e4c; font-weight: 500; letter-spacing: 2px; } @media screen and (max-width: 767px) { .style_house_sec01 p { font-size: 0.6rem; } } .style_house_sec01 .style_house_sec01_box { margin-top: 30px; } @media screen and (max-width: 767px) { .style_house_sec01 .style_house_sec01_box { margin-top: 10px; } } .style_house_sec01 .style_house_sec01_box-1 { margin: auto; } .style_house_sec02 { margin-top: 50px; margin-bottom: 35px; } .style_house_sec02 .style_house_sec02_content { margin-top: 50px; } @media screen and (max-width: 767px) { .style_house_sec02 .style_house_sec02_content { margin-top: 10px; } } .style_house_sec02_slide .slick-prev { width: 50px; height: 50px; position: absolute; top: 45%; left: 10px; z-index: 1; } .style_house_sec02_slide .slick-prev:before { content: "" !important; display: none !important; } .style_house_sec02_slide .slick-next:before { content: "" !important; display: none !important; } .style_house_sec02_slide .slick-next { width: 50px; height: 50px; position: absolute; right: 10px; top: 45%; z-index: 1; } .style_house_sec02 .slide-box { width: 100%; display: flex !important; flex-direction: column; justify-content: center; } @media screen and (max-width: 1199px) { .style_house_sec02 .slide-box { height: auto; } } @media screen and (max-width: 576px) { .style_house_sec02 .slide-box { height: 100vw; } } .style_house_sec02 .style_house_sec02_slide { margin-top: 30px; } .style_house_sec02 .style_house_sec02_slide .slide_item_text { padding: 15px; background-color: rgba(128, 143, 76, 0.8); } .style_house_sec02 .style_house_sec02_slide .slide_item_text p { color: #fff; padding: 0px 20px; } .style_house_sec02 p { margin-bottom: 0; font-size: 16px; line-height: 28px; letter-spacing: 2px; font-weight: 500; } @media screen and (max-width: 767px) { .style_house_sec02 p { font-size: 14px; } } @media screen and (max-width: 767px) { .style_house_sec02 p { font-size: 1rem; } } .style_house_sec02 .style_house_sec02_slide_list { margin-top: -50px; } .style_house_sec02 .style_house_sec02_slide_list .sec02_slide_item { padding: 5px; } .style_house_sec02_slide .slick-dots { display: none !important; } .style_house_sec03 { margin-top: 35px; letter-spacing: 1px; } .style_house_sec03 .table1 { margin-top: 30px; margin-bottom: 50px; font-weight: 600; border-color: grey; border-spacing: 2px; } .style_house_sec03 .table1 th { font-weight: 600; width: 15%; padding-left: 15px; padding-top: 10px; } @media screen and (max-width: 767px) { .style_house_sec03 .table1 th { width: 15%; font-size: 1rem; } } .style_house_sec03 .table1 td { font-weight: 600; padding: 15px; } .style_house_sec03 .table1 td p { font-weight: 400 !important; } @media screen and (max-width: 767px) { .style_house_sec03 .table1 td { padding: 5px; font-size: 1rem; font-weight: 500 !important; } } .style_house_sec03 .table2 { margin-top: 30px; margin-bottom: 50px; font-weight: 600; border-color: grey; border-spacing: 2px; } .style_house_sec03 .table2 th { width: 15%; padding-left: 15px; padding-top: 10px; font-weight: 500 !important; } @media screen and (max-width: 767px) { .style_house_sec03 .table2 th { width: 25%; font-size: 1rem; font-weight: 500 !important; } } .style_house_sec03 .table2 td p { margin-bottom: 0; line-height: 2; font-weight: 600; font-weight: 500 !important; } @media screen and (max-width: 767px) { .style_house_sec03 .table2 td p { font-size: 1rem; } } .style_house_sec04 { margin-top: 50px; margin-bottom: 50px; } @media screen and (max-width: 767px) { .style_house_sec04 { margin-top: 30px; } } .style_house_sec04 p { font-weight: 500; } .style_house_sec05 { margin-top: 50px; margin-bottom: 100px; } @media screen and (max-width: 767px) { .style_house_sec05 { margin-bottom: 30px; margin-top: 30px; } } .style_house_sec05_box a { text-decoration: none; padding: 8px 5px; background: #808e4c; color: #fff; margin-right: 5px; transition: 0.3s; border: 1px solid #808e4c; } .style_house_sec05_box a:hover { border: 1px solid #808e4c; background: #fff; color: #808e4c; } .style_house_sec06 { margin: 30px 0; } /* 室內設計作品內頁-simple_korean_style_hous end */ /* 成家設計服務-room_planner start */ .process { padding: 85px 0 60px; background-color: #f0f6dd; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } @media (max-width: 767px) { .process { padding: 100px 0 60px; } } .process .dot, .process .dot_mb { position: absolute; } .process .dot::before, .process .dot_mb::before { content: "\a"; width: 10px; height: 10px; margin: 0 10px; border-radius: 50%; display: inline-block; background: #649e2e; position: absolute; z-index: 0; top: 33px; left: 0; animation: dot2 8s infinite; } @media (min-width: 576px) { .process .dot_mb::before { animation: none; } } .process .room-planner-process-ruler2 { width: 118px; position: absolute; top: -70px; right: 100px; } @media screen and (max-width: 1024px) { .process .room-planner-process-ruler2 { width: 100px; top: -50px; right: 50px; } } @media screen and (max-width: 767px) { .process .room-planner-process-ruler2 { top: 580px; right: 20px; width: 118px; } } .process div { display: flex; margin: 0 50px; } @media screen and (min-width: 768px) { .process div { margin: 0 auto; } } @media (max-width: 767px) { .process div { margin: auto; } } .process .house_img { position: absolute; top: -95px; left: 100px; max-width: 180px; } @media (max-width: 1200px) { .process .house_img { top: -8vw; max-width: 15%; } } @media (max-width: 767px) { .process .house_img { top: -60px; left: 35%; max-width: 25vw; } } @media (max-width: 475px) { .process .house_img { left: 33%; max-width: 35vw; } } .process .star_green { width: 20px; position: absolute; top: -60px; left: 90px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @media (max-width: 767px) { .process .star_green { left: 30vw; top: -4%; } } .process .star_yellow { width: 20px; position: absolute; top: -85px; left: 280px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: linear; } @media (max-width: 1199px) { .process .star_yellow { left: 24%; } } @media (max-width: 991px) { .process .star_yellow { left: 27%; top: -15%; } } @media (max-width: 767px) { .process .star_yellow { left: 60vw; top: -7%; } } @media (max-width: 475px) { .process .star_yellow { left: 67vw; } } .process .ruler_img { position: absolute; top: -70px; right: 100px; max-width: 110px; } .process .line_01 { position: absolute; width: 700px; top: 25%; } @media (max-width: 890px) { .process .line_01 { width: 600px; } } .process .line_02 { position: absolute; width: 700px; top: 85%; right: 48%; max-width: 700px; height: 100%; } @media (max-width: 890px) { .process .line_02 { width: 600px; top: 67%; } } .process section { margin-right: 80px; } @media screen and (min-width: 768px) { .process section { margin-right: 0px; } } @media (max-width: 767px) { .process section { margin-right: 0; } } .process section img { width: 100%; max-width: 90px; height: 90px; -o-object-fit: contain; object-fit: contain; position: relative; z-index: 1; cursor: pointer; } @media (max-width: 767px) { .process section img { width: auto; } } .process section span { display: block; position: absolute; } .process section span img { width: 40px; height: 45px; position: absolute; top: -110px; left: 65px; z-index: 10; -o-object-fit: contain; object-fit: contain; } .process section h4 { font-size: 16px; text-align: center; margin: 15px 0; font-weight: 500; } .process_mb .row img { position: relative; z-index: 20; } .process_mb .row div { position: relative; justify-content: center; margin-bottom: 10vw; } @media screen and (min-width: 768px) { .process_mb .row div { margin-bottom: 0; } } .process_mb .row .mb_line_01 { background-size: contain; background-repeat: no-repeat; background-image: url("/img/blog/line01_mb.svg"); position: absolute; height: 5px; width: 66%; top: 32%; left: 68%; z-index: 10; } .process_mb .row .mb_line_03 { background-size: contain; background-repeat: no-repeat; background-image: url("/img/blog/line01_mb.svg"); position: absolute; height: 5px; width: 66%; top: 32%; left: 68%; z-index: 10; } @media screen and (max-width: 767px) { .process_mb .row .mb_line_03 { display: none; } } .process_mb .row .mb_line_02 { background-size: contain; background-repeat: no-repeat; background-image: url("/img/blog/line02_mb.svg"); position: absolute; height: 125px; width: 100%; top: 90%; left: -50%; z-index: 10; } @media screen and (min-width: 768px) { .process_mb .row .mb_line_02 { display: none; } } @media screen and (max-width: 1024px) { .room-planner-process-destop { display: none; } } @media screen and (min-width: 1025px) { .room-planner-process-mb { display: none; } } .f-78B142-20 { color: #78b142; font-size: 20px; font-weight: 700; letter-spacing: 1.5px; } .f-2A2A2A-20 { font-size: 20px; font-weight: 500; color: #2a2a2a; letter-spacing: 1.5px; } .f-2A2A2A-16 { font-size: 16px; font-weight: 500; color: #2a2a2a; letter-spacing: 1.5px; } .f-2A2A2A-16-400 { font-size: 16px; color: #2b2b2b; letter-spacing: 1.5px; } .f-fff-18 { font-weight: 700; color: #fff; font-size: 18px; } .f-649E2E-24 { font-weight: 700; color: #649e2e; font-size: 24px; margin-top: 3px; } .f-649E2E-18 { font-weight: 700; color: #649e2e; font-size: 18px; } .f-649E2E-20-q { font-family: Quicksand; font-weight: 700; color: #649e2e; font-size: 20px; } .f-2b2b2b-18-q { font-family: Quicksand; font-weight: 300; color: #2b2b2b; font-size: 18px; } .room-planner-service { font-weight: 500; font-size: 28px; letter-spacing: 2%; } @media screen and (max-width: 767px) { .room-planner-service { text-align: center; } } .room-planner-service mark { padding: 2px 1px; border-radius: 2%; color: #2a2a2a; font-weight: 500; background: linear-gradient(#fff 30%, #f0f6dd 70%); } .bg-ruler-img { margin-top: -55px; } .room-planner-service2 { font-weight: 500; font-size: 28px; } .room-planner-service2 mark { padding: 2px 1px; border-radius: 2%; color: #000; font-weight: 500; background: linear-gradient(#f0f6dd 50%, #e0ee79 100%); } .room-planner-service2 .mark-title { background: linear-gradient(#f0f6dd 50%, #e0ee79 100%); } .mark-title { padding: 2px 1px; display: inline; border-radius: 2%; color: #000; font-weight: 500; font-size: 28px; background: linear-gradient(#fff 30%, #f0f6dd 70%); } .room-planner-service-no { font-family: "Quicksand", sans-serif; font-size: 36px; color: #649e2e; } .room-planner-service-no-28 { font-family: "Quicksand", sans-serif; font-size: 28px; color: #649e2e; } .room-planner-service-icon-box { margin-top: 30px; width: 650px; padding: 0 20px; text-align: center; } @media screen and (max-width: 767px) { .room-planner-service-icon-box { width: 80%; margin: 30px auto; padding: 0 10px; } } .room-planner-service-icon-box2 { margin-top: 30px; width: 650px; padding: 0 20px; text-align: center; } @media screen and (max-width: 767px) { .room-planner-service-icon-box2 p { color: #2b2b2b !important; } } @media screen and (max-width: 767px) { .room-planner-service-icon-box2 { width: 85%; margin: 30px auto; padding: 0 10px; } } .room-planner-service-icon-box2 .icon-radius-img04 { margin-top: 10px; width: 68px; } @media screen and (max-width: 767px) { .room-planner-service-icon-box2 .icon-radius-img04 { margin-top: 15px; width: 41px; } } .room-planner-service-icon-box2 .icon-radius-img05 { margin-top: 10px; width: 58px; } @media screen and (max-width: 767px) { .room-planner-service-icon-box2 .icon-radius-img05 { margin-top: 15px; width: 35px; } } .room-planner-service-icon-box2 .icon-radius-img06 { margin-top: 10px; width: 66px; } @media screen and (max-width: 767px) { .room-planner-service-icon-box2 .icon-radius-img06 { width: 40px; } } @media screen and (max-width: 767px) { .room-planner-service-icon-box .room-planner-service-icon-box-item, .room-planner-service-icon-box2 .room-planner-service-icon-box-item { margin-top: 15px; } } .room-planner-service-icon-box .icon-radius-text, .room-planner-service-icon-box2 .icon-radius-text { color: #78b142; font-size: 20px; font-weight: 700; margin-top: 15px; } .room-planner-service-icon-box .icon-radius, .room-planner-service-icon-box2 .icon-radius { border: 1px solid #e0ee79; border-radius: 100%; padding: 20px; width: 120px; height: 120px; margin: 0 auto; } @media screen and (max-width: 767px) { .room-planner-service-icon-box .icon-radius, .room-planner-service-icon-box2 .icon-radius { width: 72px; height: 72px; padding: 5px; } } .room-planner-service-icon-box .icon-radius img, .room-planner-service-icon-box2 .icon-radius img { height: auto; -o-object-fit: cover; object-fit: cover; } .room-planner-service-icon-box .icon-radius .icon-radius-img01, .room-planner-service-icon-box2 .icon-radius .icon-radius-img01 { margin-top: 10px; width: 55px; } @media screen and (max-width: 767px) { .room-planner-service-icon-box .icon-radius .icon-radius-img01, .room-planner-service-icon-box2 .icon-radius .icon-radius-img01 { margin-top: 15px; width: 33px; } } .room-planner-service-icon-box .icon-radius .icon-radius-img02, .room-planner-service-icon-box2 .icon-radius .icon-radius-img02 { margin-top: 10px; width: 71px; } @media screen and (max-width: 767px) { .room-planner-service-icon-box .icon-radius .icon-radius-img02, .room-planner-service-icon-box2 .icon-radius .icon-radius-img02 { width: 42px; } } .room-planner-service-icon-box .icon-radius .icon-radius-img03, .room-planner-service-icon-box2 .icon-radius .icon-radius-img03 { margin-top: 10px; width: 56px; } @media screen and (max-width: 767px) { .room-planner-service-icon-box .icon-radius .icon-radius-img03, .room-planner-service-icon-box2 .icon-radius .icon-radius-img03 { width: 33.6px; } } .room-planner-process { position: relative; background: #f0f6dd; padding: 100px 0; } @media screen and (max-width: 767px) { .room-planner-process { margin-top: 50px; padding: 15px 0; } } .room-planner-process .room-planner-process-house { position: absolute; left: 100px; top: -100px; width: 199px; } @media screen and (max-width: 1024px) { .room-planner-process .room-planner-process-house { width: 150px; top: -50px; left: 50px; } } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-house { left: 100px; top: -100px; width: 199px; } } .room-planner-process .room-planner-process-star-green { position: absolute; left: 100px; top: -70px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @media screen and (max-width: 1024px) { .room-planner-process .room-planner-process-star-green { left: 50px; top: -50px; } } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-star-green { left: 100px; top: -70px; } } .room-planner-process .room-planner-process-star-yellow { position: absolute; left: 300px; top: -100px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: linear; } @media screen and (max-width: 1024px) { .room-planner-process .room-planner-process-star-yellow { left: 210px; top: -50px; } } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-star-yellow { left: 300px; top: -100px; } } .room-planner-process .room-planner-process-ruler2 { width: 118px; position: absolute; top: -70px; right: 100px; } @media screen and (max-width: 1024px) { .room-planner-process .room-planner-process-ruler2 { width: 100px; top: -50px; right: 50px; } } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-ruler2 { top: 580px; right: 20px; width: 118px; } } .room-planner-process .room-planner-process-box { width: 60%; margin: 0 auto; position: relative; } @media screen and (max-width: 1199px) { .room-planner-process .room-planner-process-box { width: 65%; } } @media screen and (max-width: 1024px) { .room-planner-process .room-planner-process-box { width: 80%; } } .room-planner-process .room-planner-process-box .room-planner-process-box_line_01 { position: absolute; width: 50vw; top: 40px; right: 100px; } @media screen and (min-width: 2500px) { .room-planner-process .room-planner-process-box .room-planner-process-box_line_01 { right: 200px; } } @media screen and (max-width: 2200px) { .room-planner-process .room-planner-process-box .room-planner-process-box_line_01 { width: 50vw; right: 100px; } } @media screen and (max-width: 1441px) { .room-planner-process .room-planner-process-box .room-planner-process-box_line_01 { width: 48vw; right: 100px; } } @media screen and (max-width: 1024px) { .room-planner-process .room-planner-process-box .room-planner-process-box_line_01 { width: 60vw; } } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-box .room-planner-process-box_line_01 { display: none; } } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-box { width: 90%; margin-top: 80px; } } @media screen and (max-width: 375px) { .room-planner-process .room-planner-process-box { width: 90%; } } .room-planner-process .room-planner-process-box .col-6 { position: relative; } .room-planner-process .room-planner-process-box .col-6 .room-planner-process-box_mb_line { display: none; background-repeat: no-repeat; background-size: contain; background-image: url(/img/room_planner/mb_line01.svg); width: 40vw; position: absolute; top: 32%; left: 60%; height: 3px; z-index: 10px; } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-box .col-6 .room-planner-process-box_mb_line { display: block; } } .room-planner-process .room-planner-process-box .col-6 .room-planner-process-box_mb_line2 { display: none; background-repeat: no-repeat; background-size: contain; background-image: url(/img/room_planner/mb_line02.svg); width: 100%; position: absolute; top: 90%; left: -50%; height: 125px; z-index: 10px; } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-box .col-6 .room-planner-process-box_mb_line2 { display: block; } } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-box .col-6 { margin-bottom: 50px; } } .room-planner-process .room-planner-process-box .room-planner-process-icon-number { position: absolute; right: -5px; top: -35px; font-family: "Quicksand", sans-serif; font-size: 40px; color: #fff; -webkit-text-stroke: 2px #78b142; z-index: 13; } @media screen and (max-width: 767px) { .room-planner-process .room-planner-process-box .room-planner-process-icon-number { right: 30px; } } .room-planner-process .room-planner-process-box .room-planner-process-icon { position: relative; z-index: 12; padding: 15px; background: #fff; border-radius: 16px; width: 90px; height: 90px; margin: 0 auto; text-align: center; cursor: pointer; } .room-planner-process .room-planner-process-box .room-planner-process-icon img { height: auto; -o-object-fit: cover; object-fit: cover; } .room-planner-process .room-planner-process-box .room-planner-process-icon-text { margin-top: 10px; font-weight: 500; font-size: 16px; color: #000; text-align: center; } .bg-F0F6DD { background: #f0f6dd; } @media screen and (max-width: 767px) { .tree2-img { display: none; } } .room_planner-sales-service { margin-top: 30px; } .room_planner-sales-service-box { width: 77%; margin: 30px auto; padding: 50px 0; } @media screen and (max-width: 1024px) { .room_planner-sales-service-box { width: 95%; } } @media screen and (max-width: 767px) { .room_planner-sales-service-box { width: 100%; margin: 0 auto; } } .room_planner-sales-service-box .room-planner-service-content { margin-top: 50px; height: 188px; } @media screen and (min-width: 1441px) { .room_planner-sales-service-box .room-planner-service-content { width: 90%; margin: 50px auto; } } .room_planner-sales-service-box .room-planner-service-content img { width: 21px; height: 21px; } @media screen and (max-width: 767px) { .room_planner-sales-service-box .room-planner-service-content { width: 60%; margin: 50px auto; } } .room_planner-sales-service-box .room-planner-service-content p { margin-bottom: 0.9rem; } .divider { width: 1px; height: 350px !important; border-left: 4px dotted #e0ee79; position: relative; } @media screen and (max-width: 767px) { .divider { display: none; } } @media screen and (min-width: 1024px) { #room-planner-service-5-service-inf2 { height: 180px; } } @media screen and (max-width: 767px) { #room-planner-service-5-service-inf2 { display: flex; justify-content: center; } } .room-planner-service-5-service-inf ul { padding: 0; list-style: none; } .room-planner-service-5-service-inf .list { display: flex; } @media screen and (max-width: 1400px) { .room-planner-service-5-service-inf .list { flex-direction: column; } } .room-planner-service-5-service-inf li { font-size: 16px; font-weight: 500; color: #2a2a2a; letter-spacing: 1.5px; line-height: 2; } .room-planner-service-5-service-inf li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 7.5px; background-color: #e0ee79; margin-right: 8px; } .room_planner-sales-service-left-text { margin-top: 30px; } @media screen and (max-width: 1024px) { .room_planner-sales-service-left-text { margin-top: 50px; } } @media screen and (max-width: 767px) { .room_planner-sales-service-left-text { margin-top: 30px; } } .room_planner-sales-service-right-text { margin-top: 50px; } @media screen and (max-width: 1024px) { .room_planner-sales-service-right-text { margin-top: 0; } } @media screen and (max-width: 767px) { .room_planner-sales-service-right-text { margin-top: 50px; } } .room_planner-sales-service-CTA { width: 160px; height: 50px; border-radius: 16px; background: #78b142; background-image: url(/img/room_planner/icon.png); background-repeat: no-repeat; background-size: 14px 14px; background-position: right 28px center; transition: all 300ms ease-in-out; box-shadow: 3px 5px #f0f6dd; position: relative; bottom: 0; left: 0; } .room_planner-sales-service-CTA:hover { bottom: -5px; left: 4px; background-position: right 20px center; box-shadow: none; } .main-border { border: 1px solid #95cf54; border-radius: 16px; box-shadow: 3px 5px #f0f6dd; } .border-E0EE79 { border: 1px solid #95cf54; border-radius: 16px; box-shadow: 5px 5px #e0ee79; } .room-planner-process-sub-title { margin-top: -45px; } .step-sub-title { color: #4b7718; font-weight: 700; font-size: 36px; } @media screen and (max-width: 767px) { .step-sub-title { font-size: 28px; } } .steup-mb-title { font-weight: 700; font-family: "Quicksand", sans-serif; font-size: 28px; color: #78b142; } .dotted { border: none; border-top: 4px dotted #e0ee79; color: #fff; background-color: #fff; width: 100%; opacity: 1 !important; } .fix-img { position: absolute; right: 180px; bottom: -50px; } @media screen and (max-width: 767px) { .fix-img { display: none; } } .room-planner-process-main { position: relative; margin: 100px 0; } @media screen and (max-width: 1024px) { .room-planner-process-main { display: none; } } @media screen and (max-width: 767px) { .room-planner-process-main { display: none; } } .room-planner-process-main .main-content-bg-line { position: absolute; right: -60px; top: -75px; width: 23vw; } @media screen and (max-width: 2057px) { .room-planner-process-main .main-content-bg-line { right: -60px; top: -75px; width: 22vw; } } @media screen and (max-width: 1921px) { .room-planner-process-main .main-content-bg-line { right: -60px; top: -75px; width: 24vw; } } @media screen and (max-width: 1800px) { .room-planner-process-main .main-content-bg-line { right: -60px; top: -75px; width: 24vw; } } @media screen and (max-width: 1700px) { .room-planner-process-main .main-content-bg-line { right: -60px; top: -75px; width: 31vw; } } @media screen and (max-width: 1600px) { .room-planner-process-main .main-content-bg-line { top: -95px; right: -90px; z-index: -5; width: 32vw; } } @media screen and (max-width: 1441px) { .room-planner-process-main .main-content-bg-line { top: -95px; right: -90px; z-index: -5; width: 34.7vw; } } .room-planner-process-main .bg01-hand { margin-top: -100px; } .room-planner-process-main .bg03-table { position: absolute; width: 304px; right: 30px; bottom: -130px; } .room-planner-process-main .step2 { width: 90%; margin-top: -150px; } @media screen and (min-width: 2500px) { .room-planner-process-main .step2 { width: 75%; margin-top: -130px; margin-left: 130px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .step2 { width: 90%; margin-top: -150px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .step2 { width: 90%; margin-top: -130px; } } @media screen and (max-width: 1700px) { .room-planner-process-main .step2 { margin-top: -30px; margin-left: 10px; } } @media screen and (max-width: 1600px) { .room-planner-process-main .step2 { margin-top: -30px; margin-left: 10px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .step2 { width: 100%; margin-top: -30px; margin-left: 10px; } } .room-planner-process-main .step1-0 { width: 40%; margin-top: -50px; margin-left: 100px; } @media screen and (min-width: 2500px) { .room-planner-process-main .step1-0 { width: 30%; margin-top: -100px; margin-left: 200px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .step1-0 { width: 40%; margin-top: -50px; margin-left: 100px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .step1-0 { width: 40%; margin-top: -30px; margin-left: 100px; } } @media screen and (max-width: 1700px) { .room-planner-process-main .step1-0 { margin-left: 0px; margin-top: 0px; } } @media screen and (max-width: 1600px) { .room-planner-process-main .step1-0 { width: 40%; margin-left: 0px; margin-top: 0px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .step1-0 { width: 40%; margin-left: 0px; margin-top: 0px; } } .room-planner-process-main .step1-1 { width: 80%; margin-top: -110px; margin-left: 70px; } @media screen and (min-width: 2500px) { .room-planner-process-main .step1-1 { width: 60%; margin-top: -50px; margin-left: 250px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .step1-1 { width: 80%; margin-top: -110px; margin-left: 70px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .step1-1 { width: 80%; margin-top: -80px; margin-left: 80px; } } @media screen and (max-width: 1700px) { .room-planner-process-main .step1-1 { margin-left: 30px; margin-top: 0px; } } @media screen and (max-width: 1600px) { .room-planner-process-main .step1-1 { margin-left: 30px; margin-top: 0px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .step1-1 { width: 90%; margin-left: 30px; margin-top: 0px; } } .room-planner-process-main .step3 { width: 75%; margin-top: -60px; margin-left: 100px; } @media screen and (min-width: 2500px) { .room-planner-process-main .step3 { width: 75%; margin-top: -120px; margin-left: 120px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .step3 { width: 75%; margin-top: -60px; margin-left: 100px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .step3 { width: 80%; margin-top: -50px; margin-left: 60px; } } @media screen and (max-width: 1700px) { .room-planner-process-main .step3 { margin-top: 30px; margin-left: 0px; } } @media screen and (max-width: 1600px) { .room-planner-process-main .step3 { width: 90%; margin-top: 30px; margin-left: 0px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .step3 { width: 90%; margin-top: 30px; margin-left: 0px; } } .room-planner-process-main .step4 { width: 45%; margin-top: -70px; margin-right: 70px; } @media screen and (min-width: 2500px) { .room-planner-process-main .step4 { width: 40%; margin-top: 50px; margin-right: 50px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .step4 { width: 45%; margin-top: -70px; margin-right: 70px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .step4 { width: 50%; margin-top: -100px; margin-right: 80px; } } @media screen and (max-width: 1700px) { .room-planner-process-main .step4 { margin-right: 50px; margin-top: -10px; } } @media screen and (max-width: 1600px) { .room-planner-process-main .step4 { width: 60%; margin-right: 50px; margin-top: -10px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .step4 { width: 60%; margin-right: 50px; margin-top: -10px; } } .room-planner-process-main .step5 { width: 85%; margin-top: -80px; margin-left: 70px; } @media screen and (min-width: 2500px) { .room-planner-process-main .step5 { width: 80%; margin-top: -130px; margin-left: 120px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .step5 { width: 85%; margin-top: -80px; margin-left: 70px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .step5 { width: 90%; margin-top: -100px; margin-left: 50px; } } @media screen and (max-width: 1700px) { .room-planner-process-main .step5 { margin-top: 10px; margin-left: 50px; } } @media screen and (max-width: 1600px) { .room-planner-process-main .step5 { width: 90%; margin-top: 10px; margin-left: 50px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .step5 { width: 100%; margin-top: -20px; margin-left: 0px; } } .room-planner-process-main .step5-2 { width: 35%; margin-right: 50px; margin-top: -100px; } @media screen and (min-width: 2500px) { .room-planner-process-main .step5-2 { width: 30%; margin-right: -30px; margin-top: -100px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .step5-2 { width: 35%; margin-right: 50px; margin-top: -100px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .step5-2 { margin-right: 0px; margin-top: -80px; } } @media screen and (max-width: 1700px) { .room-planner-process-main .step5-2 { margin-right: 80px; margin-top: -80px; } } @media screen and (max-width: 1600px) { .room-planner-process-main .step5-2 { width: 40%; margin-right: 80px; margin-top: -80px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .step5-2 { width: 40%; margin-right: 80px; margin-top: -80px; } } .room-planner-process-main .meihaochengjia { position: absolute; width: 130px; right: 50px; top: 10px; } @media screen and (min-width: 2500px) { .room-planner-process-main .meihaochengjia { width: 130px; position: absolute; right: 50px; top: -10px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .meihaochengjia { width: 130px; position: absolute; right: 50px; top: 10px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .meihaochengjia { width: 130px; position: absolute; right: 50px; top: 20px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .meihaochengjia { width: 130px; position: absolute; right: 30px; top: 30px; } } .room-planner-process-main .room-planner-process-main-box { width: 95%; margin: 0 auto; } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-content-left-box { position: relative; padding: 20px; background: #fff; border-radius: 16px; } @media screen and (max-width: 1200px) { .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-content-left-box { padding: 10px; } } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-content-left-box .step04_direction { position: absolute; left: -50px; top: 50px; z-index: -1; } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-content-left-box .step03_direction { position: absolute; left: -50px; top: 150px; z-index: -1; } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-content-left-box .step02_direction { position: absolute; left: -50px; bottom: 150px; z-index: -1; } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-content-left-box .step01_direction { position: absolute; right: -50px; top: 50px; z-index: -1; } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-content-left-box .step05_direction { position: absolute; right: -50px; top: 180px; z-index: -1; } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-content-left-step .room-planner-process-main-content-left-step-item { margin-top: 30px; } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-content-left-step p { margin-bottom: 0.5rem; } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-title-box { width: 520px; padding: 10px 20px; } .room-planner-process-main .room-planner-process-main-box .room-planner-process-main-title-box .room-planner-process-main-title { font-style: oblique; font-weight: 700; color: #4b7718; font-size: 38px; letter-spacing: 5px; } .room-planner-process-main .room-planner-process-main-box .step-number-circle { background: #649e2e; width: 26px; height: 26px; text-align: center; border-radius: 100%; padding: 1px 0; } .room-planner-process-main .room-planner-process-main-box .step-number-circle .step-number { display: block; font-size: 16px; font-family: Quicksand; font-weight: 700; color: #fff; } .room-planner-process-main .room-planner-process-main-box .step-qa-circle-q { background: #e0ee79; width: 26px; height: 26px; text-align: center; border-radius: 100%; padding: 1px 0; } .room-planner-process-main .room-planner-process-main-box .step-qa-circle-q .step-qa-q { font-size: 14px; font-family: Quicksand; font-weight: 700; color: #54891d; } .room-planner-process-main .room-planner-process-main-star-green { position: absolute; bottom: 10px; right: 150px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @media screen and (min-width: 2560px) { .room-planner-process-main .room-planner-process-main-star-green { top: 40px; right: 170px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .room-planner-process-main-star-green { bottom: 20px; right: 190px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .room-planner-process-main-star-green { bottom: 20px; right: 190px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .room-planner-process-main-star-green { bottom: -15px; right: 170px; } } .room-planner-process-main .room-planner-process-main-star-line { position: absolute; bottom: 10px; right: 5px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @media screen and (min-width: 2560px) { .room-planner-process-main .room-planner-process-main-star-line { top: 50px; right: 40px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .room-planner-process-main-star-line { bottom: 10px; right: 20px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .room-planner-process-main-star-line { bottom: 10px; right: 20px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .room-planner-process-main-star-line { bottom: -40px; right: 15px; } } .room-planner-process-main .room-planner-process-main-star-yellow { position: absolute; right: -15px; top: 50px; animation-name: star; animation-duration: 2s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: linear; } @media screen and (min-width: 2560px) { .room-planner-process-main .room-planner-process-main-star-yellow { top: -15px; right: 20px; } } @media screen and (max-width: 2057px) { .room-planner-process-main .room-planner-process-main-star-yellow { top: 5px; right: 5px; } } @media screen and (max-width: 1921px) { .room-planner-process-main .room-planner-process-main-star-yellow { top: 5px; right: 5px; } } @media screen and (max-width: 1441px) { .room-planner-process-main .room-planner-process-main-star-yellow { right: -5px; top: 30px; } } .room-planner-process-main-content-step-img { margin-top: -50px; } .room-planner-process-main-content-step-4-6img { margin-top: 380px; } @media screen and (min-width: 2500px) { .room-planner-process-main-content-step-4-6img { margin-top: 200px; } } @media screen and (max-width: 2057px) { .room-planner-process-main-content-step-4-6img { margin-top: 320px; } } @media screen and (max-width: 1921px) { .room-planner-process-main-content-step-4-6img { margin-top: 380px; } } @media screen and (max-width: 1700px) { .room-planner-process-main-content-step-4-6img { margin-top: 400px; } } @media screen and (max-width: 1600px) { .room-planner-process-main-content-step-4-6img { margin-top: 300px; } } @media screen and (max-width: 1441px) { .room-planner-process-main-content-step-4-6img { margin-top: 380px; } } .stepbox { height: 100%; background: #4b7718; border-radius: 100px; padding: 0 15px; font-family: Quicksand; color: #fff; font-weight: 700; font-size: 24px; } .room-planner-process-main-chenjia { background: #ffe35f; width: 150px; border-radius: 100px; padding: 5px 15px; color: #736357; font-weight: 700; margin: 50px auto; font-size: 24px; } @media screen and (min-width: 1025px) { .section-room-planner-process-mb-main { display: none; } } @media screen and (max-width: 991px) { .section-room-planner-process-mb-main { display: block; } } .room-planner-process-mb-main .room-planner-process-main-title-box { width: 100%; padding: 10px; margin: 30px auto; } .room-planner-process-mb-main .room-planner-process-main-title-box .room-planner-process-main-title { text-align: center; font-style: oblique; font-weight: 700; color: #4b7718; font-size: 34px; letter-spacing: 5px; } @media screen and (max-width: 375px) { .room-planner-process-mb-main .room-planner-process-main-title-box .room-planner-process-main-title { font-size: 32px; } } .room-planner-process-mb-main .step-number-circle { background: #649e2e; width: 26px; height: 26px; text-align: center; border-radius: 100%; padding: 1px 0; } .room-planner-process-mb-main .step-number-circle .step-number { font-size: 16px; font-family: Quicksand; font-weight: 700; color: #fff; } .room-planner-process-mb-main .step-qa-circle-q { background: #e0ee79; width: 26px; height: 26px; text-align: center; border-radius: 100%; padding: 1px 0; } .room-planner-process-mb-main .step-qa-circle-q .step-qa-q { font-size: 14px; font-family: Quicksand; font-weight: 700; color: #54891d; } .room-planner-process-mb-main .accordion-body { padding: 0; } .room-planner-process-mb-main .accordion-button:focus { background: #fff; box-shadow: none; } .room-planner-process-mb-main .accordion-item { border-top: 1.5px solid #e0ee79 !important; border-left: none; border-right: none; border-bottom: none; } .room-planner-process-mb-main .accordion-item .accordion-button { padding-top: 30px; } .room-planner-process-mb-main .accordion-button:not(.collapsed) { background: #fff; box-shadow: none; } .room-planner-process-mb-main .accordion-button::after { background-image: url(/img/room_planner/open.png); } .room-planner-process-mb-main .accordion .accordion-button:not(.collapsed)::after { width: 20px; height: 20px; background-image: url(/img/room_planner/close.png); background-position: center; transform: none; } .room-planner-process-mb-main .accordion-header { padding-bottom: 15px; } .room-planner-process-mb-main { width: 95%; margin: 0 auto; } .room-planner { display: flex; flex-direction: column; } .room-planner h1 { background-image: url("/img/banner/bn_serve@2x.png"); background-position: center; background-size: cover; width: 100%; height: 21vw; text-indent: 101%; white-space: nowrap; overflow: hidden; } @media (max-width: 991px) { .room-planner h1 { height: 200px; } } .room-planner .sub-banner { margin: 210px auto 50px; } @media screen and (max-width: 767px) { .room-planner .sub-banner { margin: 160px auto 50px; } } .sub-banner2 { width: 650px; margin: 100px auto; } @media screen and (max-width: 767px) { .sub-banner2 { width: 100%; margin: 50px auto; } } .room-planner .room-planner-images { padding: 0 70px 100px; position: relative; } .room-planner .room-planner-images .row { padding: 50px 0; } .room-planner .room-planner-images .img-box { border-radius: 40px; background-color: #99a56f; border: 3px solid var(--second-color); background-size: cover; background-position: center; background-repeat: no-repeat; } .room-planner .room-planner-images .bg-item { max-width: 830px; height: 270px; } .room-planner .room-planner-images .step-01 { background-image: url(/img/room_planner/step1.webp); } .room-planner .room-planner-images .step-02 { background-image: url(/img/room_planner/step2.webp); } .room-planner .room-planner-images .step-03 { background-position: right; background-image: url(/img/room_planner/step3.webp); } .room-planner .room-planner-images .step-04 { background-image: url(/img/room_planner/step4.webp); } .room-planner .room-planner-images .step-06 { background-image: url(/img/room_planner/step6.webp); } .room-planner .room-planner-images .step-09 { background-image: url(/img/room_planner/step9.webp); } .room-planner .room-planner-images .line-1, .room-planner .room-planner-images .line-2, .room-planner .room-planner-images .line-3, .room-planner .room-planner-images .line-4, .room-planner .room-planner-images .line-5 { position: absolute; z-index: -1; } .room-planner .room-planner-images .line-1 { top: -50px; width: 580px; height: 200px; border-left: 3px solid var(--second-color); } .room-planner .room-planner-images .line-2 { top: 185px; width: 585px; height: 370px; border: 3px solid var(--second-color); border-left: none; } .room-planner .room-planner-images .line-3 { top: 600px; width: 580px; height: 200px; border-left: 3px solid var(--second-color); } .room-planner .room-planner-images .line-4 { top: 930px; width: 585px; height: 380px; border: 3px solid var(--second-color); border-left: none; } .room-planner .room-planner-images .line-5 { width: 590px; height: 300px; bottom: 300px; border-left: 3px solid var(--second-color); } @media (max-width: 991px) { .room-planner .room-planner-images .bg-item { min-width: 750px; } .room-planner .room-planner-images .line-2, .room-planner .room-planner-images .line-3 { width: 540px; } .room-planner .room-planner-images .line-4 { width: 510px; } } @media (max-width: 767px) { .room-planner .room-planner-images { display: none; } } .room-planner .room-planner-moblie .row { margin-bottom: 50px; padding: 0 65px; } .room-planner .room-planner-moblie .img-box { border-radius: 30px; background-color: #99a56f; border: 3px solid var(--second-color); } .room-planner .room-planner-moblie .text-box { margin-right: 10vw; font-size: 20px; font-weight: bold; text-align: center; } .room-planner .room-planner-moblie .text-box span { font-size: 44px; color: #99a56f; } .room-planner .room-planner-moblie .line-6 { height: 2800px; position: absolute; top: -50px; right: 29%; z-index: -1; border-right: 2px solid var(--second-color); } @media (min-width: 767px) { .room-planner .room-planner-moblie { display: none; } } @media (max-width: 575px) { .room-planner .room-planner-moblie .line-6 { right: 36%; } .room-planner .room-planner-moblie .text-box { margin-right: 0; } } .room-planner .rp-navs { padding: 35px 25px; } .room-planner .rp-navs .home-content { width: 100%; max-width: 850px; display: flex; } @media (max-width: 767px) { .room-planner .rp-navs { display: none; } } .hover_up { cursor: pointer; } .hover_up:hover { animation: float 1.5s ease-out infinite; } @keyframes float { 50% { transform: translate(0, -20px); } } .room-planner-process-main-star-yellow-m { position: absolute; right: 100px; bottom: 50px; animation-name: star; animation-duration: 2s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: linear; } @media screen and (max-width: 1024px) { .room-planner-process-main-star-yellow-m { right: 35vw; } } @media screen and (max-width: 767px) { .room-planner-process-main-star-yellow-m { right: 100px; bottom: 50px; } } .room-planner-process-main-star-green-m { position: absolute; bottom: -10px; left: 100px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @media screen and (max-width: 1024px) { .room-planner-process-main-star-green-m { left: 35vw; } } @media screen and (max-width: 767px) { .room-planner-process-main-star-green-m { bottom: -30px; left: 80px; } } @media screen and (max-width: 375px) { .room-planner-process-main-star-green-m { left: 80px; } } .room-planner-process-main-star-line-m { position: absolute; bottom: -30px; right: 100px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @media screen and (max-width: 1024px) { .room-planner-process-main-star-line-m { right: 35vw; } } @media screen and (max-width: 767px) { .room-planner-process-main-star-line-m { bottom: -30px; right: 100px; } } /* 成家設計服務-room_planner end */ /* 成家知識專欄-categories start */ .w-80-auto { width: 80%; margin: 0 auto; } @media screen and (max-width: 1024px) { .w-80-auto { margin: 0 auto; width: 100%; } } @media screen and (max-width: 767px) { .w-80-auto { width: 100%; margin: 0 auto; } } .blog-categories .container { width: 50%; margin: 40px auto 25px; } .blog-categories .container .breadcrumb-item { font-weight: 500; } .blog-categories .container .breadcrumb-item a, .blog_article .breadcrumb-item a, .style_house_content .breadcrumb-item a { font-weight: 500; color: var(--main-color); } .blog-categories .container .link-list { width: 100%; } .blog-categories .container .link-list button { text-decoration: none; margin: 0 0.1rem 0.5rem; padding: 5px 10px; background: #808e4c; margin-right: 5px; transition: 0.3s; border: 1px solid #808e4c; } .blog-categories .container .link-list button:hover { border: 1px solid #808e4c; background: #fff; color: #808e4c; } .blog-categories .container .link-list button:hover a { color: #808e4c; } .blog-categories .container .link-list a { color: #fff; } .blog-categories .container .bhouseweb_search_form { padding: 0; } .blog-categories .container .bhouseweb_search_form .bhouseweb_search_img img { width: 38px; } .blog-categories .article { width: 50%; margin: auto; display: flex; flex-direction: column; margin-top: 25px; } .blog-categories .article .article-item { display: flex; margin: 25px 0; padding-bottom: 50px; border-bottom: 1px solid var(--dark-gray); align-items: center; } .blog-categories .article .article-item h4 { font-size: 24px; line-height: 32px; color: #4c660b; font-weight: 700; } .blog-categories .article .article-item h4:hover { opacity: 0.8; } .blog-categories .article .article-item .description { color: var(--dark-color); } .blog-categories .article .article-item .description:hover { opacity: 0.8; } .blog-categories .article .article-item img { width: 240px; height: auto; margin-right: 35px; } .blog-categories .nav-link { padding: 0; margin-bottom: 50px; padding-top: 30px; text-align: center; font-weight: bold; font-size: 14px; letter-spacing: 1px; color: var(--dark-color); } @media (max-width: 991px) { .blog-categories .container, .blog-categories .article { width: 75%; } } @media (max-width: 767px) { .room-planner-process-box .container { width: 75%; } } @media (max-width: 575px) { .blog-categories .container, .blog-categories .article, .room-planner-process-box .container { width: 90%; } .blog-categories .container .article-item, .blog-categories .article .article-item { flex-direction: column; } .blog-categories .container .article-item a, .blog-categories .article .article-item a { margin-top: 20px; } .blog-categories .container .article-item img, .blog-categories .article .article-item img { width: 100%; margin-right: 15px; } } .blog-main .text-box { margin: 70px auto; } .blog-main .text-box .title { text-align: center; font-weight: 700; font-size: 32px; letter-spacing: 2%; color: #649e2e; } .blog-main .text-box div { position: relative; max-width: 480px; margin: auto; } .blog-main .text-box div p { max-width: 480px; margin: 40px auto; text-align: center; font-weight: 500; font-size: 20px; line-height: 36px; color: #78b142; } .blog-main .text-box div img { width: 2.5%; } .blog-main .text-box div .left_img { position: absolute; top: 0; left: 0; } @media (max-width: 767px) { .blog-main .text-box div .left_img { left: 10vw; } } .blog-main .text-box div .right_img { position: absolute; top: 0; right: 0; } @media (max-width: 767px) { .blog-main .text-box div .right_img { right: 10vw; } } .blog-main .text-box .underline { display: block; background: #f0f6dd; height: 10px; width: 210px; margin: auto; margin-top: -35px; } .blog-main .process { padding: 85px 0 60px; background-color: #f0f6dd; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } @media (max-width: 767px) { .blog-main .process { padding: 100px 0 60px; } } .blog-main .process div { display: flex; margin: 0 50px; } @media (max-width: 767px) { .blog-main .process div { margin: auto; } } .blog-main .process div:last-child { padding: 0 145px; margin-top: 58px; } @media (max-width: 890px) { .blog-main .process div:last-child { margin-top: 27px; } } @media (max-width: 767px) { .blog-main .process div:last-child { padding: 0; margin-top: 0; } } .blog-main .process .house_img { position: absolute; top: -95px; left: 100px; max-width: 180px; } @media (max-width: 1200px) { .blog-main .process .house_img { top: -8vw; max-width: 15%; } } @media (max-width: 767px) { .blog-main .process .house_img { top: -60px; left: 35%; max-width: 25vw; } } @media (max-width: 475px) { .blog-main .process .house_img { left: 33%; max-width: 35vw; } } .blog-main .process .star_green { width: 20px; position: absolute; top: -60px; left: 90px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @media (max-width: 767px) { .blog-main .process .star_green { left: 30vw; top: -4%; } } .blog-main .process .star_yellow { width: 20px; position: absolute; top: -85px; left: 280px; animation-name: star; animation-duration: 1s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: linear; } @media (max-width: 1199px) { .blog-main .process .star_yellow { left: 24%; } } @media (max-width: 991px) { .blog-main .process .star_yellow { left: 27%; top: -15%; } } @media (max-width: 767px) { .blog-main .process .star_yellow { left: 60vw; top: -7%; } } @media (max-width: 475px) { .blog-main .process .star_yellow { left: 67vw; } } .blog-main .process .ruler_img { position: absolute; top: -70px; right: 100px; max-width: 110px; } .blog-main .process .line_01 { position: absolute; width: 700px; top: 25%; } @media (max-width: 890px) { .blog-main .process .line_01 { width: 600px; } } .blog-main .process .line_02 { position: absolute; width: 700px; top: 85%; right: 48%; max-width: 700px; height: 100%; z-index: 10; } @media (max-width: 890px) { .blog-main .process .line_02 { width: 600px; top: 67%; } } .blog-main .process .dot, .blog-main .process .dot_mb { position: absolute; } .blog-main .process .dot_mb { z-index: 20; } .blog-main .process .dot::before, .blog-main .process .dot_mb::before { content: "\a"; width: 10px; height: 10px; margin: 0 10px; border-radius: 50%; display: inline-block; background: #649e2e; position: absolute; z-index: 15; top: 34px; left: 0; } .blog-main .process .dot::before { animation: dot 8s infinite; } @media (max-width: 892px) { .blog-main .process .dot::before { animation: none; } } @media (width: 768px) { .blog-main .process .dot::before { animation: dot_768px 8s infinite; } } @media (min-width: 576px) { .blog-main .process .dot_mb::before { animation: none; } } .blog-main .process section { margin-right: 80px; } @media (max-width: 767px) { .blog-main .process section { margin-right: 0; } } .blog-main .process section img { width: 100%; max-width: 90px; height: 90px; -o-object-fit: contain; object-fit: contain; position: relative; z-index: 20; cursor: pointer; } @media (max-width: 767px) { .blog-main .process section img { width: auto; } } .blog-main .process section span { display: block; position: absolute; } .blog-main .process section span img { width: 40px; height: 45px; position: absolute; top: -110px; left: 65px; z-index: 25; -o-object-fit: contain; object-fit: contain; } .blog-main .process section h4 { font-size: 16px; text-align: center; margin: 15px 0; font-weight: 500; } .blog-main .process_mb .row img { position: relative; z-index: 25; } .blog-main .process_mb .row div { position: relative; justify-content: center; margin-bottom: 10vw; } .blog-main .process_mb .row .mb_line_01 { background-size: contain; background-repeat: no-repeat; background-image: url("/img/blog/line01_mb.svg"); position: absolute; height: 5px; width: 66%; top: 32%; left: 68%; z-index: 10; } .blog-main .process_mb .row .mb_line_02 { background-size: contain; background-repeat: no-repeat; background-image: url("/img/blog/line02_mb.svg"); position: absolute; height: 125px; width: 100%; top: 90%; left: -50%; z-index: 10; } .blog-main .article_list { margin-top: 100px; } @media (max-width: 767px) { .blog-main .article_list { margin-top: 0; } } .blog-main .article_list .article_item { width: 65%; display: flex; justify-content: center; align-items: center; flex-direction: column; } @media (max-width: 1199px) { .blog-main .article_list .article_item { width: 80%; } } @media (max-width: 991px) { .blog-main .article_list .article_item { width: 97%; } } @media (max-width: 767px) { .blog-main .article_list .article_item { width: 100%; margin: auto; } } .blog-main .article_list .article_item .row { height: 500px; } @media (max-width: 991px) { .blog-main .article_list .article_item .row { height: 530px; } } .blog-main .article_list .article_item .img_box { position: relative; } @media (max-width: 767px) { .blog-main .article_list .article_item .img_box { display: flex; flex-direction: column; align-items: center; margin: 80px auto; } } .blog-main .article_list .article_item .img_box img:first-child { width: 100%; } @media (max-width: 767px) { .blog-main .article_list .article_item .img_box img:first-child { width: 75%; } } .blog-main .article_list .article_item .img_box img:last-child { width: 55px; position: absolute; left: 80%; top: -20px; } @media (max-width: 1199px) { .blog-main .article_list .article_item .img_box img:last-child { left: 19vw; } } @media (max-width: 991px) { .blog-main .article_list .article_item .img_box img:last-child { left: 23vw; top: -25px; } } @media (max-width: 767px) { .blog-main .article_list .article_item .img_box img:last-child { position: absolute; left: 65vw; width: 60px; top: -10px; } } .blog-main .article_list .article_item .mobile_line img { width: 100%; margin-bottom: -25px; } .blog-main .article_list .article_item .text_box { display: flex; flex-direction: column; position: relative; } .blog-main .article_list .article_item .text_box h4 { color: #649e2e; font-size: 35px; font-weight: 700; } @media (max-width: 767px) { .blog-main .article_list .article_item .text_box h4 { font-size: 26px; } } .blog-main .article_list .article_item .text_box h4 span { color: #78b142; font-size: 28px; font-weight: 500; } @media (max-width: 767px) { .blog-main .article_list .article_item .text_box h4 span { font-size: 24px; } } .blog-main .article_list .article_item .text_box ul { list-style: none; margin-top: 15px; padding-left: 20px; } .blog-main .article_list .article_item .text_box ul li:last-child { display: none; } .blog-main .article_list .article_item .text_box ul li { display: flex; align-items: center; } @media (max-width: 767px) { .blog-main .article_list .article_item .text_box ul li { align-items: flex-start; } } .blog-main .article_list .article_item .text_box ul li:hover .blog_text h5 a { background: linear-gradient(to bottom, #fff 50%, #ffe55f 50%); } .blog-main .article_list .article_item .text_box ul li:hover .blog_img span img { transform: scale(1.1); } .blog-main .article_list .article_item .text_box ul li .blog_img { position: relative; } .blog-main .article_list .article_item .text_box ul li .blog_img span { display: block; width: 120px; height: 80px; overflow: hidden; border-radius: 10px; } .blog-main .article_list .article_item .text_box ul li .blog_img span img { width: 120px; height: 80px; border-radius: 10px; } .blog-main .article_list .article_item .text_box ul li .blog_img img { transition: all 0.5s; } .blog-main .article_list .article_item .text_box ul li .blog_img img:first-child { width: 120px; height: 80px; border-radius: 10px; } .blog-main .article_list .article_item .text_box ul li .blog_img .point-img { position: absolute; width: 50px; left: -20px; top: -20px; } .blog-main .article_list .article_item .text_box ul li .blog_text { margin-left: 20px; } .blog-main .article_list .article_item .text_box ul li .blog_text h5 a { width: 130%; font-size: 18px; font-weight: 500; color: #000; } .blog-main .article_list .article_item .text_box ul li .blog_text p { margin: 0; width: 100%; color: #78b142; line-height: 20px; font-size: 14px; } .blog-main .article_list .article_item .text_box ul li span { display: block; margin: 5px 0; } .blog-main .article_list .article_item .text_box ul li span img { width: 100%; } @media (max-width: 767px) { .blog-main .article_list .article_item .text_box ul li span img { width: 100%; } } @media (max-width: 767px) { .blog-main .article_list .article_item .text_box ul li .divider-mb { margin: 20px 0; } .blog-main .article_list .article_item .text_box ul li .divider-mb img { width: 86vw; } } @media (max-width: 576px) { .blog-main .article_list .article_item .text_box ul li .divider-mb img { width: 83vw; } } .blog-main .article_list .article_item .text_box .btn_box { margin-top: 10px; margin-left: 20px; position: relative; z-index: 1000; } @media (max-width: 767px) { .blog-main .article_list .article_item .text_box .btn_box { position: relative; margin: 20px auto; } } .blog-main .article_list .article_item .text_box .btn_box .read_more { display: flex; align-items: center; justify-content: center; width: 160px; height: 50px; color: #fff; background-color: #78b142; border: none; border-radius: 12px; position: relative; bottom: 0; left: 0; transition: all 0.2s; letter-spacing: 1px; font-size: 18px; font-weight: 500; cursor: pointer; } .blog-main .article_list .article_item .text_box .btn_box .read_more p { margin: 0; margin-left: -10px; } .blog-main .article_list .article_item .text_box .btn_box .read_more:hover { bottom: -5px; left: 4px; } .blog-main .article_list .article_item .text_box .btn_box .read_more:hover img { right: -15px; } .blog-main .article_list .article_item .text_box .btn_box .read_more img { position: relative; right: -10px; transition: all 0.2s; } .blog-main .article_list .article_item .text_box .btn_box span { width: 160px; height: 50px; background: #f0f6dd; position: absolute; z-index: -1; bottom: -5px; left: 5px; border-radius: 12px; } @media (max-width: 767px) { .blog-main .article_list .article_item .text_box .btn_box span { left: 3.5%; } } .blog-main .article_list .article_item .blog_divider { position: relative; } .blog-main .article_list .article_item .blog_divider .bg_img { width: 45vw; height: 5px; margin: 50px 0; background-image: url("/img/blog/Vector.png"); background-repeat: no-repeat; } @media (max-width: 1199px) { .blog-main .article_list .article_item .blog_divider .bg_img { width: 33vw; } } @media (max-width: 991px) { .blog-main .article_list .article_item .blog_divider .bg_img { width: 25vw; } } .blog-main .article_list .article_item .blog_divider img { width: 45vw; margin: 50px 0; } .blog-main .article_list .article_item .blog_divider .line_left { position: absolute; width: 311px; height: 610px; top: 0px; right: -300px; } @media (max-width: 991px) { .blog-main .article_list .article_item .blog_divider .line_left { height: 640px; } } .blog-main .article_list .article_item .blog_divider .line_right { position: absolute; width: 300px; height: 590px; top: -1px; left: -290px; } @media (max-width: 991px) { .blog-main .article_list .article_item .blog_divider .line_right { height: 620px; } } .blog-main .article_list .article_item .blog_divider .logo_01, .blog-main .article_list .article_item .blog_divider .logo_02, .blog-main .article_list .article_item .blog_divider .logo_03 { position: absolute; width: 70px; } @media (max-width: 991px) { .blog-main .article_list .article_item .blog_divider .logo_01, .blog-main .article_list .article_item .blog_divider .logo_02, .blog-main .article_list .article_item .blog_divider .logo_03 { display: none; } } .blog-main .article_list .article_item .blog_divider .logo_01 { left: -43%; top: 150px; } @media (max-width: 1199px) { .blog-main .article_list .article_item .blog_divider .logo_01 { left: -90%; } } .blog-main .article_list .article_item .blog_divider .logo_02 { right: -45%; top: 80px; } @media (max-width: 1199px) { .blog-main .article_list .article_item .blog_divider .logo_02 { right: -90%; top: 60px; } } .blog-main .article_list .article_item .blog_divider .logo_03 { right: -45%; top: -250px; } @media (max-width: 1199px) { .blog-main .article_list .article_item .blog_divider .logo_03 { right: -90%; } } .blog-main .article_list .topic_list { height: 295px; margin-bottom: -50px; background-color: #f0f6dd; display: flex; justify-content: center; align-items: center; position: relative; } @media (max-width: 767px) { .blog-main .article_list .topic_list { height: 100%; margin-top: 80px; } } .blog-main .article_list .topic_list img { position: absolute; top: -45px; left: 100px; max-width: 125px; } @media (max-width: 767px) { .blog-main .article_list .topic_list img { top: -50px; left: 35vw; max-width: 120px; } } .blog-main .article_list .topic_list section { display: flex; flex-direction: column; } @media (max-width: 767px) { .blog-main .article_list .topic_list section { padding: 70px 0; justify-content: center; } } .blog-main .article_list .topic_list section h5 { width: 125px; margin: auto; font-size: 28px; text-align: center; font-weight: 700; background: linear-gradient(to bottom, #f0f6dd 50%, #e0ee79 50%); margin-bottom: 25px; } .blog-main .article_list .topic_list section div { width: 100%; max-width: 535px; margin: auto; } .blog-main .article_list .topic_list section div a { display: inline-block; color: #000; background-color: #fff; padding: 10px 15px; margin: 10px 5px; border-radius: 100px; transition: all 0.3s; } .blog-main .article_list .topic_list section div a:hover { color: #fff; background-color: #649e2e; } @media (max-width: 767px) { .blog-main .article_list .topic_list section div a { margin: 10px 3px; box-sizing: border-box; } } @media (max-width: 767px) { .blog-main .article_list .topic_list main { width: 600px; display: flex; justify-content: center; } .blog-main .article_list .topic_list .container { display: inline-flex; flex-wrap: wrap; width: 500px; margin: auto; } } @media (max-width: 475px) { .blog-main .article_list .topic_list main { width: 350px; } .blog-main .article_list .topic_list .container { width: 310px; justify-content: center; } } /* 成家知識專欄-categories end */ /* 成家知識專欄-article start */ .blog_article span { font-weight: bold; letter-spacing: 2px; } .blog_article .br-tag { display: block; height: 15px; } .blog_article ul { margin: 0; padding: 0; list-style: none; } .blog_article li { letter-spacing: 1px; line-height: 32px; } .blog_article p { margin-bottom: 15px; line-height: 32px; letter-spacing: 1px; } .blog_article .content { width: 50%; margin: 60px auto 0; } @media (max-width: 1200px) { .blog_article .content { width: 70%; } } @media (max-width: 992px) { .blog_article .content { width: 90%; } } .blog_article .content section:first-child { margin: 60px auto; padding-bottom: 60px; border-bottom: 1px solid var(--dark-gray); } .blog_article .content img { width: 100%; margin-top: 30px; } .blog_article hr { margin: 50px 0; } .blog_article .br-tag { display: block; height: 15px; } .blog_article .question-box { display: flex; align-items: center; flex-direction: column; border: 2px solid var(--second-color); margin-bottom: 50px; padding: 20px 50px 10px; } .blog_article .question-box ol { padding: 0 15px; list-style: "- " !important; } .blog_article .question-box ul li { margin: 10px 0; letter-spacing: 1px; font-weight: bold; } .blog_article .question-box ul a { margin-left: 5px; color: #006e9a; } .blog_article .question-box ul a:hover { opacity: 0.8; } .blog_article .question-box p { font-size: 20px; font-weight: 700; } .blog_article .img-text { margin: -15px 0 40px; padding: 20px 60px; background-color: rgba(128, 143, 76, 0.8); text-align: start; color: #ffffff; font-size: 16px; line-height: 28px; font-weight: 500; letter-spacing: 1px; } @media (max-width: 767px) { .blog_article .img-text { padding: 20px 30px; } } .blog_article .icon-box img { margin-top: 0px; width: 35px; } .blog_article h1 { color: #4c660b; font-weight: 900; font-size: 1.75rem; margin-bottom: 50px; } .blog_article h2 { margin-top: 30px; margin-bottom: 30px; font-size: 20px; font-weight: 700; color: var(--main-color); } .blog_article h3, .blog_article h4 { font-size: 18px; font-weight: 700; margin-top: 20px; } .blog_article h5, .blog_article h6 { font-size: 14px; font-weight: 400; } .blog_article h6 { color: #68686b; } .blog_article b { font-weight: 700; } .blog_article .list-title { font-size: 20px; font-weight: bold; font-weight: 700; } .blog_article table { margin: 20px 0; width: 100%; } @media (max-width: 767px) { .blog_article table { display: block; overflow-x: auto; white-space: nowrap; } } .blog_article table td, .blog_article table th { padding: 5px 10px; border: 1px solid #333; } .blog_article .link-box { margin-top: 50px; padding-bottom: 50px; border-bottom: 1px solid var(--dark-gray); } .blog_article .link-box .link-list { width: 100%; } @media (max-width: 575px) { .blog_article .link-box .link-list { width: 300px; } } .blog_article .link-box .link-list a { display: inline-block; margin: 3px; padding: 7px 10px; background: #808e4c; color: #fff; transition: 0.3s; text-decoration: none; border: 1px solid #808e4c; } .blog_article .link-box .link-list a:hover { border: 1px solid #808e4c; background: #fff; color: #808e4c; } .blog_article .article_readMore { margin: 25px 0; } .blog_article .read-more-list { padding-top: 30px; border-top: 1px solid var(--dark-gray); font-size: 18px; letter-spacing: 2px; } .blog_article .read-more-list a { color: var(--main-color); } .blog_article .read-more-list li { margin: 15px 0; font-weight: bold; } @media (max-width: 575px) { .blog_article .read-more-list li { margin: 20px 0; } } .blog_article button { border: none; margin: 1px; } .blog-content .video-box { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .blog-content .video-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 成家知識專欄-article end */ /* 最新消息公告-news start */ .news-content img { margin-bottom: 30px; } .news-content p { margin-bottom: 0; line-height: 32px; letter-spacing: 1px; margin-top: 10px; } .news-content h2 { margin-top: 3rem; margin-bottom: 15px; font-size: 20px; font-weight: bold; font-weight: 700; color: #000; letter-spacing: 1px; } .bhouseweb_loc_content .subtitle { font-weight: 900; } .bhouseweb_loc_content .bhouseWeb_news_content { letter-spacing: 1px; line-height: 28px; } .likeSee__state__filter p { width: 110px; margin-left: 50px; font-weight: 500; letter-spacing: 1px; } .NewsDescription { width: 100%; } .NewsDescription .NewsDescription_p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } /* 最新消息公告-news end */ /* 小寶設計單品-furniture_design start */ .furniture_design_content { width: 55%; margin: 0 auto; } @media (max-width: 991px) { .furniture_design_content { width: 75%; } } @media (max-width: 575px) { .furniture_design_content { width: 90%; } } .furniture_design_content .tw-15 { font-weight: bold; } .furniture-design p { padding-right: 15px; text-align: justify; } .furniture-design h5 { font-weight: bold; color: var(--main-color); font-weight: 700; } .furniture-design p, .furniture-design h5 { line-height: 32px; letter-spacing: 1px; } .furniture-design img { width: 100%; } .furniture-design .text-box { width: 380px; text-align: center; margin: auto; } @media screen and (max-width: 575px) { .furniture-design .text-box { width: auto; } } .furniture-design .nav-link { font-size: 14px; color: var(--dark-color); } .furniture-design .tab-title .nav-item { width: 200px; justify-content: center; } .furniture-design .tab-title .nav-link { margin: atuo; font-size: 18px; } .furniture-design ul { display: flex; flex-wrap: nowrap; list-style: none; } .furniture-design ul li { display: flex; flex-wrap: wrap; list-style: none; } .furniture-design .design-list { display: flex; flex-wrap: wrap; list-style: none; } @media (max-width: 767px) { .furniture-design .design-list a { border: 1px solid #d9d9d9; } .furniture-design .design-list a:hover { background-color: #d9d9d9; } } @media (max-width: 575px) { .furniture-design .design-list { width: 105%; margin: 0; margin-left: -20px; } } @media (max-width: 413px) { .furniture-design .design-list { padding: 0; margin-left: -9px; justify-content: center; } } @media (max-width: 361px) { .furniture-design .design-list { margin-left: -4px; justify-content: flex-start; } } .furniture-design .design-list li { margin: 5px 10px 0px; } @media (max-width: 767px) { .furniture-design .design-list li { margin: 5px 8px; } } #cabinet { padding-left: 37px; padding-right: 37px; } #dining_chair { padding-left: 22px; padding-right: 22px; } .furniture-design .sub-tab-content h4 { margin: 0; color: #ffffff; background-color: rgba(128, 142, 76, 0.8); padding: 10px 20px; transition: all 0.3s; font-size: 1.3rem; white-space: nowrap; text-align: center; letter-spacing: 2px; font-weight: 500; } .mattress-top { margin-top: 280px; } @media (max-width: 576px) { .mattress-top { margin-top: 380px; } } .furniture-design .sub-tab-content .text-item div { display: flex; justify-content: center; align-items: center; transition: all 0.3s; position: absolute; left: 0; right: 0; } .furniture-design .sub-tab-content .text-item div .custom-title { font-size: 1rem; } @media (max-width: 991px) { .furniture-design .sub-tab-content .text-item div .custom-title { font-size: 0.8rem; } } @media (max-width: 767px) { .furniture-design .sub-tab-content .text-item div .custom-title { font-size: 1rem; } } .furniture-design .sub-tab-content .mattress-text-box { width: 400px; } @media (max-width: 575px) { .furniture-design .sub-tab-content .mattress-text-box { width: auto; } } .furniture-design .mattress-price p { text-align: center; margin-bottom: 5px; } .furniture-design .mattress-price .price-item { font-size: 18px; font-weight: 500; } .furniture-design .nav-pills .nav-link.active { color: var(--dark-color); background-color: transparent; border-bottom: 2px solid var(--second-color); border-radius: 0; } @media (max-width: 991px) { .furniture-design .nav-pills { padding-top: 30px; } } @media (max-width: 767px) { .furniture-design .nav-pills { padding-top: 12px; } } .furniture-design #systeam-furniture .cabinet-03 { height: 500px; display: flex; flex-direction: column; align-items: center; } .furniture-design #systeam-furniture .cabinet-03 h5 { margin: 20px; } .furniture-design #systeam-furniture .cabinet-03 img { width: 150px; height: 150px; -o-object-fit: contain; object-fit: contain; } @media (max-width: 991px) { .furniture-design #systeam-furniture .cabinet-03 { height: auto; } } .b-bottom { border-bottom: 1px solid var(--dark-gray); } .furniture-design .bg-text { position: absolute; left: 0; width: 100%; background-color: #80a251; } .furniture-design .bg-text p { margin: 0; padding: 70px 0; font-size: 24px; text-align: center; line-height: 50px; color: #fff; font-weight: 700; letter-spacing: 2px; } #two_pillow_bed { width: 40%; } @media (max-width: 767px) { #two_pillow_bed { width: 100%; } } .furniture-design .mobile-tab { padding: 20px; letter-spacing: 1px; } @media (max-width: 475px) { .furniture-design .mobile-tab { padding: 10px; } } .furniture-design .mobile-tab ul { padding-bottom: 20px; } @media screen and (max-width: 575px) { .furniture-design .mobile-tab .all-tab { padding: 0 6px; } } @media screen and (max-width: 475px) { .furniture-design .mobile-tab .all-tab { width: 40%; } } .furniture-design .mobile-tab #all-design-tab { margin: 0 0.3rem; text-align: center; font-size: 18px; color: #fff; background: #808e4c; font-size: 1rem; } .furniture-design .mobile-tab #all-design-tab:hover { background: #68686b; } @media screen and (max-width: 575px) { .furniture-design .mobile-tab #all-design-tab { font-size: 14px; } } .furniture-design .mobile-tab #pills-tab .nav-item { width: 100%; transition: all 0.3s; } @media (max-width: 475px) { .furniture-design .mobile-tab #pills-tab .nav-item { width: auto; margin: 0 3px; } } .furniture-design .mobile-tab #pills-tab .nav-item:hover { background: #68686b; } .furniture-design .mobile-tab #pills-tab .nav-active { background: #68686b; } .furniture-design .mobile-tab #pills-tab a { font-size: 1rem !important; } @media (max-width: 575px) { .furniture-design .mobile-tab #pills-tab a { padding: 8px 3px; font-size: 14px !important; } } @media (max-width: 575px) { .furniture-design .mobile-tab #pills-tab .col-4 { padding: 0 3px; } } .furniture-design .mobile-tab .nav-link { margin: auto; } .furniture-design .mobile-tab .tab-title { display: flex; flex-wrap: nowrap; } .tw-85 { width: 85%; } .tw-15 { width: 15%; } /* 小寶設計單品-furniture_design end */ /* 設計家具 start */ .design-container { padding-top: 50px; } .design-container .me-3 { font-weight: bold; } .design-container p { line-height: 32px; } .design-container h3, .design-container h6 { font-weight: bold; color: var(--main-color); font-weight: 700; } .design-container h6 { font-size: 20px; } .design-container ul { display: flex; flex-direction: column; padding: 0; list-style: none; } .design-container ul li { line-height: 32px; } .design-container .slider-box { width: 60%; } .design-container .slider-box .slider { margin-right: 20px; } @media (max-width: 767px) { .design-container .slider-box { width: 100%; } } .design-container .slider-nav img { cursor: pointer; } .design-container .slider-nav .middle-item { padding: 0 5px; } .furniture-design .design-border { border-bottom: 2px solid var(--second-color); border-radius: 0; } @media (max-width: 991px) { .design-container .slider-nav img { width: 95%; height: auto; margin: auto; } .design-container .slider-nav .middle-item { margin: 0; } } /* 設計家具 end */ .bhouse_line { background: #000; height: 1px; opacity: 1 !important; } .bhouse_title { font-size: 1.3rem; letter-spacing: 2px; text-align: justify; color: #4c660b; font-weight: 700; } @media screen and (max-width: 767px) { .bhouse_title { font-size: 1rem; } } .bhouse_subtitle { color: #4c660b; font-size: 1.2rem; font-weight: 600; letter-spacing: 3px; } .brand_sec02_content { margin: 50px 0; } .brand_sec02_content p { letter-spacing: 2px; line-height: 28px; } .brand_content { width: 50%; margin: 0 auto; } @media screen and (max-width: 991px) { .brand_content { width: 70%; } } @media screen and (max-width: 767px) { .brand_content { width: 95%; } .store-line { margin: 35px 20px; } } .brand_sec01, .brand_sec02 { margin: 50px 0; } .likeSee__state { display: flex; justify-content: space-between; align-items: center; } .likeSee__state img { width: 40px; } @media screen and (max-width: 767px) { .likeSee__state img { width: 30px; } } .mt-15 { margin-top: 15px; } .mt-30 { margin-top: 30px; } .my-80 { margin: 80px 0; } .my-50 { margin: 50px 0; } .mt-80 { margin-top: 80px; } .mb-80 { margin-bottom: 80px; } .article__readMore { color: #656565; font-size: 0.9rem; font-weight: 500; cursor: pointer; } .sec01_store_map_img { width: 100%; height: 700px; margin: 0 auto; position: relative; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 767px) { .sec01_store_map_img { width: 80%; height: 400px; } } @media screen and (max-width: 575px) { .sec01_store_map_img { margin-left: 20px; } } .store_cta_box_reserve { position: absolute; left: 30px; top: 100px; } @media screen and (max-width: 1200px) { .store_cta_box_reserve { left: -10px; top: 130px; } } @media screen and (max-width: 767px) { .store_cta_box_reserve { left: 30px; top: 50px; } } @media screen and (max-width: 575px) { .store_cta_box_reserve { left: 15px; } } .store_cta_box_reserve .store_cta { background: #808f4c; width: 150px; padding: 16px; color: #fff; border-radius: 15px; text-align: center; font-size: 18px; letter-spacing: 2px; font-weight: 500; } @media screen and (max-width: 767px) { .store_cta_box_reserve .store_cta { width: 120px; padding: 10px; font-size: 12px; } } .store_cta_box_reserve p { text-align: center; color: #68686b; font-weight: bold; letter-spacing: 2px; font-size: 14px; } .store_cta_box_reserve p a { font-weight: 700; } @media screen and (max-width: 767px) { .store_cta_box_reserve p { font-size: 12px; } } .store_cta_box_reserve a { color: #2980b8; } @media screen and (max-width: 767px) { .store_cta_box_reserve a { font-size: 12px; } } .store_cta_box { position: absolute; top: 40%; right: 0px; } @media screen and (max-width: 1200px) { .store_cta_box { right: -20px; } } @media screen and (max-width: 767px) { .store_cta_box { right: 0px; } } .store_cta_box_form { margin-top: 70px; position: relative; } @media screen and (max-width: 767px) { .store_cta_box_form { left: -10px; } } .store_cta_box_form .store_cta { background-color: var(--dark-gray); width: 160px; padding: 15px 5px; color: #fff; border-radius: 15px; text-align: center; margin: 0 auto; font-size: 18px; letter-spacing: 2px; font-weight: 500; } @media screen and (max-width: 767px) { .store_cta_box_form .store_cta { width: 125px; padding: 10px 5px; font-size: 12px; } } .store_cta_box_form p { text-align: center; color: #68686b; font-weight: bold; letter-spacing: 2px; font-size: 14px; } .store_cta_box_form p a { font-weight: 700; } @media screen and (max-width: 767px) { .store_cta_box_form p { width: 130px; font-size: 12px; } } .store_cta_box_form a { color: #2980b8; } @media screen and (max-width: 767px) { .store_cta_box_form a { font-size: 12px; } } .store_content a { color: #68686b; font-weight: 600; } .store_content a span:last-child { color: #000; cursor: default; } .store-link { color: #2980b8 !important; cursor: pointer; font-weight: 600; } .store-link:hover { opacity: 0.7; } .store-tab #pills-tab .nav-item { margin: 0 0.8rem; } @media screen and (max-width: 767px) { .store-tab #pills-tab .nav-item { margin: 0 0.5rem; } } .store-tab #pills-tab a, .mobile-tab #pills-tab a { color: #fff; text-decoration: none; font-size: 1.2rem; -webkit-appearance: none; border-radius: 0; } .store-tab #pills-tab .nav-item, .mobile-tab #pills-tab .nav-item { width: auto; background: #808e4c; } .store-tab #pills-tab .nav-item-link, .mobile-tab #pills-tab .nav-item-link, #anchor-tab li a { display: block; text-decoration: none; margin: 0 0.1rem; padding: 0.4rem 1.8rem; background: #808e4c; color: #fff; margin-right: 5px; transition: 0.3s; letter-spacing: 2px; text-align: center; margin: 0; } .store-tab #pills-tab .nav-item-link:hover, .mobile-tab #pills-tab .nav-item-link:hover, #anchor-tab li a:hover { background: #68686b !important; } @media screen and (max-width: 575px) { .store-tab #pills-tab .nav-item-link, .mobile-tab #pills-tab .nav-item-link, #anchor-tab li a { font-size: 16px; padding: 0.4rem 1rem; } } #anchor-tab { list-style: none; } #anchor-tab li { margin: 0 0.8rem; cursor: pointer; } @media screen and (max-width: 767px) { .store-tab #pills-tab .nav-item-link li, #anchor-tab li { margin: 0 0.5rem; } } .store-tab #pills-tab .nav-item-link.active, .mobile-tab #pills-tab .nav-item-link.active { color: #fff; background: #68686b !important; -webkit-appearance: none; border-radius: 0 !important; } /* .tab-content { margin-bottom: 40vh; } @media screen and (max-width: 767px) { .tab-content { margin-bottom: 20vh; } } */ .store_title { color: #4c660b; font-size: 1.8rem; font-weight: 700; } @media screen and (max-width: 767px) { .store_title { margin-top: 15px; } } .store_content { font-weight: 600; letter-spacing: 2px; } .store_content .reservation-link { margin-top: 15px; color: #2980b8; font-weight: 600; font-size: 17px; } .store_content .reservation-link:hover { opacity: 0.7; } .store_content .store_content_item { margin-bottom: 10px; } .store_content_item .title { font-weight: 500; } @media (max-width: 576px) { .store_content_item .title { width: 30%; } } .store_content_item .link_item { width: 100%; } @media (max-width: 991px) { .store_content_item .link_item { width: 95%; } } @media (max-width: 475px) { .store_content_item .link_item { width: 80%; } } .assign-link { border-bottom: 2px solid var(--second-color); } @media (max-width: 767px) { .assign-link { border-bottom: none; background-color: #d9d9d9; } } .card-img, .card-img-top { border-radius: 0 !important; } .breadcrumb-item + .breadcrumb-item::before { content: ">" !important; }/*# sourceMappingURL=style.bhouse.css.map */