@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; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: NSJP-300; } @font-face { font-family: NSJP-100; src: url(../font/NotoSansJP-Thin.otf); } @font-face { font-family: NSJP-300; src: url(../font/NotoSansJP-Light.otf); } @font-face { font-family: NSJP-400; src: url(../font/NotoSansJP-Regular.otf); } @font-face { font-family: NSJP-500; src: url(../font/NotoSansJP-Medium.otf); } @font-face { font-family: NSJP-700; src: url(../font/NotoSansJP-Bold.otf); } @font-face { font-family: NSJP-900; src: url(../font/NotoSansJP-Black.otf); } /* 共通樣式 start */ a { text-decoration: none; } img { image-rendering: -webkit-optimize-contrast; } .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: 50px 0; border-bottom: 1px solid grey; } .bhouseweb_loc_line { background: grey; height: 1px; 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-family: NSJP-700; } .likeSee__state { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; 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; } @-webkit-keyframes star { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes star { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.3); transform: scale(1.3); } } /* 共通樣式 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: 0 20px; color: var(--main-color); font-family: NSJP-500; } .navbar .navbar-link:hover { color: #ffffff; } .navbar .navbar-brand { display: none; } @media (max-width: 991px) { .navbar .navbar-brand { margin: 0; } } .navbar .navbar-brand img { width: 70%; margin-left: 25%; -o-object-fit: contain; object-fit: contain; } .navbar .close-btn { display: inline-block; position: relative; top: -5px; width: 23px; height: 2px; background: #ffffff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .navbar .close-btn::after { content: ""; display: block; width: 23px; height: 2px; background: #ffffff; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } @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; -webkit-box-shadow: none; box-shadow: none; } .navbar .navbar-brand { display: block; } } .news-link { display: -webkit-box; display: -ms-flexbox; 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: 80px; } } /* header end */ /* slick start */ .slick-dots { bottom: 115px; } .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: 700px; -o-object-fit: cover; object-fit: cover; } @media (max-width: 991px) { .slider-item img { height: auto; } } .slider-item div { padding: 20px 20vw; position: absolute; left: 0; right: 0; bottom: 0px; background-color: rgba(128, 143, 76, 0.8); text-align: end; } .slider-item p { margin: 0; color: #ffffff; font-size: 22px; font-family: NSJP-500; letter-spacing: 2px; } @media (max-width: 575px) { .slider-item p { font-size: 17px; } } .slider-item p:last-child { font-size: 18px; } @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 2vw 20px 0; } } /* 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: -webkit-box; display: -ms-flexbox; display: flex; } .footer .list li { padding: 5px 0; } .footer .title a { font-size: 15px; color: var(--main-color); font-family: NSJP-500; font-weight: bold; letter-spacing: 1px; } .footer .list li a, .footer .copyright, .footer .copyright a { color: #68686b; font-weight: bold; font-family: NSJP-400; letter-spacing: 1px; } .footer .mobile-list { display: none; border-top: 1px solid var(--dark-gray); padding-top: 10px; margin-bottom: 30px; } .footer .mobile-list li { margin: 20px 0 20px 50px; } .footer .mobile-list a { font-size: 20px; color: var(--main-color); font-family: NSJP-400; } .footer .mobile-list a:hover { opacity: 0.8; } .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 .mobile-list { display: block; } } /* 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 { position: absolute; bottom: 0; right: 0; left: 0; background: rgba(128, 143, 76, 0.6); padding: 20px 50px; } .home-content .bottom-box p { margin: auto; text-align: right; color: #fff; font-family: NSJP-700; letter-spacing: 2px; } .home-content .bottom-box p:first-child { font-size: 20px; } .home-content .bottom-box p:last-child { font-size: 16px; padding-top: 10px; } @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: 100%; } .home-content .bg-img { width: 100%; padding: 40% 0; background-position: center; background-size: cover; -webkit-transition: all 0.5s; transition: all 0.5s; } .home-content .bg-portfolio .bg-img { background-image: url(/img/home/X-1-02.png); } .home-content .bg-serve .bg-img { background-image: url(/img/home/X-1-03.png); } .home-content .bg-qa .bg-img { background-image: url(/img/home/X-1-04.png); } .home-content .bg-store .bg-img { background-image: url(/img/home/X-1-05.png); } .reserve { position: fixed; bottom: 5vw; right: 5vw; } .reserve img { width: 100px; } /* 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; 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-family: NSJP-500; letter-spacing: 1px; background: transparent !important; } .faq-md-content .accordion .accordion-button:not(.collapsed) { color: #000000; -webkit-box-shadow: none; 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; -webkit-box-shadow: none; 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: 14px; font-family: NSJP-500; font-weight: normal; } .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; font-family: NSJP-700 !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: -webkit-box; display: -ms-flexbox; 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: 80px; } } @media screen and (max-width: 991px) { .bhouseweb_loc_banner .banner-img { -o-object-fit: cover; object-fit: cover; } } .bt_container { -webkit-transition: all 0.3s; 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: 24px; width: 90px; background: rgba(76, 102, 11, 0.6); color: #fff; cursor: pointer; display: none; } .bt_slogan img { -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(324deg) brightness(104%) contrast(102%); 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 { -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(324deg) brightness(104%) contrast(102%); 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-family: NSJP-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, .article_readMore { margin-top: 30px; } .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: 80px; } } @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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bhouseweb_loc_box p { min-width: 55px; padding-left: 25px; } @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 { width: 70%; background: #565656 !important; border: none; font-size: 14.4px; font-weight: 400; line-height: 1.5; outline: none; color: #bcbcbc; } @media screen and (max-width: 767px) { .bhouseweb_loc_search_box #bhouseweb_search { width: 86%; font-size: 14.4px; } } .bhouseweb_loc_search_box ::-webkit-input-placeholder { /* Chrome, Safari */ color: #bcbcbc; } .bhouseweb_loc_search_box :-ms-input-placeholder { color: #bcbcbc; } .bhouseweb_loc_search_box ::-ms-input-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: 170vh; overflow: hidden; } .bhouseweb_loc_sec02_card { background: var(--logo-color); position: relative; -webkit-transition: 0.5s ease-in-out; 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; -webkit-transition: 0.5s; transition: 0.5s; letter-spacing: 1px; width: 100%; position: absolute; top: 50%; left: 50%; font-size: 16px; -webkit-transform: translate(-50%, -50%); 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 { background-color: rgba(128, 143, 76, 0.8); padding: 15px; } .bhouseweb_loc_sec02_card .slide_item_text p { color: #fff; letter-spacing: 1px; text-align: right; } /* 成家故事作品集-collection end */ /* 成家故事作品集內頁-simple_korean_style_hous start */ .bg-portfolio .bg-img { background-image: url(/img/home/X-1-02.png); } .bg-serve .bg-img { background-image: url(/img/home/X-1-03.png); } .bg-qa .bg-img { background-image: url(/img/home/X-1-04.png); } .bg-store .bg-img { background-image: url(/img/home/X-1-05.png); } .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 { width: 80.5%; margin: 0 auto; } @media screen and (max-width: 767px) { .style_house_ads .style_house_text { width: 95%; } } .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-family: NSJP-700; } @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-family: NSJP-700; } .style_house_content { width: 50%; margin: 0 auto; } @media screen and (max-width: 767px) { .style_house_content { width: 95%; } } .style_house_sec01 { margin-top: 100px; text-align: center; margin-bottom: 50px; } @media screen and (max-width: 767px) { .style_house_sec01 { margin-top: 30px; } } .style_house_sec01 h3 { font-size: 1.5rem; font-family: NSJP-700; letter-spacing: 2px; } @media screen and (max-width: 767px) { .style_house_sec01 h3 { font-size: 1rem; } } .style_house_sec01 p { color: #808e4c; font-family: NSJP-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 .style_house_sec02_slide { margin-top: 30px; } .style_house_sec02 .style_house_sec02_slide .slide_item_text { background-color: rgba(128, 143, 76, 0.8); padding: 15px; } .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: 14px; line-height: 28px; letter-spacing: 2px; font-family: NSJP-500; } @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; font-family: NSJP-400; } @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: 600; font-family: NSJP-400 !important; } @media screen and (max-width: 767px) { .style_house_sec03 .table1 td { padding: 5px; font-size: 1rem; font-family: NSJP-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-family: NSJP-500 !important; } .style_house_sec03 .table2 td { font-family: NSJP-400; } @media screen and (max-width: 767px) { .style_house_sec03 .table2 th { width: 25%; font-size: 1rem; font-family: NSJP-500 !important; } } .style_house_sec03 .table2 td p { margin-bottom: 0; line-height: 2; font-weight: 600; font-family: NSJP-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-family: NSJP-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; -webkit-transition: 0.3s; 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 */ .f-78B142-20 { color: #78b142; font-size: 20px; font-family: NSJP-700; letter-spacing: 1.5px; } .f-2A2A2A-20 { font-size: 20px; font-family: NSJP-500; color: #2a2a2a; letter-spacing: 1.5px; } .f-2A2A2A-16 { font-size: 16px; font-family: NSJP-500; color: #2a2a2a; letter-spacing: 1.5px; } .f-2A2A2A-16-400 { font-size: 16px; font-family: NSJP-300 !important; color: #2b2b2b; letter-spacing: 1.5px; } .f-fff-18 { font-family: NSJP-700; color: #fff; font-size: 18px; } .f-649E2E-24 { font-family: NSJP-700; color: #649e2e; font-size: 24px; } .f-649E2E-18 { font-family: NSJP-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-family: NSJP-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-family: NSJP-500; background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #fff), color-stop(70%, #f0f6dd)); background: linear-gradient(#fff 30%, #f0f6dd 70%); } .bg-ruler-img { margin-top: -55px; } .room-planner-service2 { font-family: NSJP-500; font-size: 28px; } .room-planner-service2 mark { padding: 2px 1px; border-radius: 2%; color: #000; font-family: NSJP-500; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), to(#e0ee79)); background: linear-gradient(#fff 50%, #e0ee79 100%); } .room-planner-service-no { font-family: NSJP-500; font-size: 36px; color: #649e2e; } .room-planner-service-no-28 { font-family: NSJP-500; 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-family: NSJP-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; -webkit-animation-name: star; animation-name: star; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; 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; -webkit-animation-name: star; animation-name: star; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-direction: alternate-reverse; -webkit-animation-timing-function: linear; 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: 48vw; top: 40px; 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-image: url(/img/blog/mobile_line_01.png); width: 40vw; position: absolute; top: 32%; left: 60%; height: 6px; 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_line_02.png); 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; } .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-family: NSJP-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 (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; } .room_planner-sales-service-box img { width: 21px; height: 21px; } .divider { width: 1px; height: 350px !important; border-left: 4px dotted #e0ee79; position: relative; } @media screen and (max-width: 767px) { .divider { display: none; } } .room-planner-service-5-service-inf ul { list-style: none; } .room-planner-service-5-service-inf li { font-size: 16px; font-family: NSJP-500; color: #2a2a2a; letter-spacing: 1.5px; margin-top: -5px; } .room-planner-service-5-service-inf li::before { content: "\2022"; color: #e0ee79; font-weight: bold; display: inline-block; width: 0.6em; margin-left: -1em; font-size: 28px; } .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; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; -webkit-box-shadow: 3px 5px #f0f6dd; 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; -webkit-box-shadow: none; box-shadow: none; } .main-border { border: 1px solid #95cf54; border-radius: 16px; -webkit-box-shadow: 3px 5px #f0f6dd; box-shadow: 3px 5px #f0f6dd; } .border-E0EE79 { border: 1px solid #95cf54; border-radius: 16px; -webkit-box-shadow: 5px 5px #e0ee79; box-shadow: 5px 5px #e0ee79; } .room-planner-process-sub-title { margin-top: -45px; } .step-sub-title { color: #4b7718; font-family: NSJP-700; font-size: 36px; } @media screen and (max-width: 767px) { .step-sub-title { font-size: 28px; } } .steup-mb-title { font-family: NSJP-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; top: -95px; right: -90px; z-index: -5; width: 34.7vw; } @media screen and (max-width: 1200px) { .room-planner-process-main .main-content-bg-line { width: 36vw; } } .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 { margin-top: -50px; } @media screen and (max-width: 1200px) { .room-planner-process-main .step2 { margin-top: -30px; } } .room-planner-process-main .step1-0 { width: 40%; } .room-planner-process-main .step1-1 { width: 90%; margin-left: 30px; } .room-planner-process-main .step3 { width: 90%; margin-top: 30px; } .room-planner-process-main .step4 { width: 60%; margin-right: 50px; margin-top: -30px; } .room-planner-process-main .step5 { margin-top: 30px; } .room-planner-process-main .step5-2 { margin-right: 70px; margin-top: -50px; } .room-planner-process-main .meihaochengjia { width: 130px; position: absolute; right: 30px; top: 20px; } .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: 431px; 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-family: NSJP-700; color: #4b7718; font-size: 42px; 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 { 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; -webkit-animation-name: star; animation-name: star; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .room-planner-process-main .room-planner-process-main-star-line { position: absolute; bottom: 10px; right: 5px; -webkit-animation-name: star; animation-name: star; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .room-planner-process-main .room-planner-process-main-star-yellow { position: absolute; right: -15px; top: 50px; -webkit-animation-name: star; animation-name: star; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-direction: alternate-reverse; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .room-planner-process-main-content-step-img { margin-top: -50px; } .room-planner-process-main-content-step-4-6img { margin-top: 380px; } .stepbox { background: #4b7718; border-radius: 100px; padding: 5px 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-family: NSJP-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-family: NSJP-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; -webkit-box-shadow: none; 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; -webkit-box-shadow: none; 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; -webkit-transform: none; 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .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: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 767px) { .room-planner .rp-navs { display: none; } } .hover_up { -webkit-transition: 0.3s; transition: 0.3s; cursor: pointer; } .hover_up:hover { -webkit-transform: translate(0, -20px) !important; transform: translate(0, -20px) !important; } /* 成家設計服務-room_planner end */ /* 成家知識專欄-categories start */ .w-80-auto { width: 80%; margin: 0 auto; } @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-family: NSJP-500; } .blog-categories .container .breadcrumb-item a { font-family: NSJP-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; -webkit-transition: 0.3s; 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 25px; } .blog-categories .article .article-item { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 25px 0; padding-bottom: 50px; border-bottom: 1px solid var(--dark-gray); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-categories .article .article-item h4 { font-size: 24px; line-height: 32px; color: #4c660b; font-family: NSJP-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 .article .nav-link { padding: 0; margin-bottom: 50px; 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 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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-family: NSJP-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-family: NSJP-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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } @media (max-width: 767px) { .blog-main .process { padding: 100px 0 60px; } } .blog-main .process div { display: -webkit-box; display: -ms-flexbox; 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; -webkit-animation-name: star; animation-name: star; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; 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; -webkit-animation-name: star; animation-name: star; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-direction: alternate-reverse; -webkit-animation-timing-function: linear; 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%; } @media (max-width: 890px) { .blog-main .process .line_02 { width: 600px; top: 67%; } } .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: 1; } @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: 10; -o-object-fit: contain; object-fit: contain; } .blog-main .process section h4 { font-size: 16px; text-align: center; margin: 15px 0; font-family: NSJP-500; } .blog-main .process_mb .row img { position: relative; z-index: 20; } .blog-main .process_mb .row div { position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 10vw; } .blog-main .process_mb .row .mb_line_01 { background-repeat: no-repeat; background-image: url("/img/blog/mobile_line_01.png"); position: absolute; height: 5px; width: 40vw; top: 32%; left: 55%; z-index: 10; } .blog-main .process_mb .row .mb_line_02 { background-size: contain; background-repeat: no-repeat; background-image: url("/img/blog/mobile_line_02.png"); 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; 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: 15vw; top: -10px; } @media (max-width: 767px) { .blog-main .article_list .article_item .img_box img:last-child { position: absolute; left: 65vw; width: 60px; } } .blog-main .article_list .article_item .mobile_line img { width: 100%; margin-bottom: -25px; } .blog-main .article_list .article_item .text_box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .blog-main .article_list .article_item .text_box h4 { color: #649e2e; font-size: 35px; font-family: NSJP-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-family: NSJP-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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .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 img:first-child { width: 120px; height: 80px; border-radius: 10px; } .blog-main .article_list .article_item .text_box ul li .blog_img img:last-child { 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-family: NSJP-500; color: #000; } .blog-main .article_list .article_item .text_box ul li .blog_text h5 a:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #ffe55f)); background: linear-gradient(to bottom, #fff 50%, #ffe55f 50%); } .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%; } } .blog-main .article_list .article_item .text_box .btn_box { margin-top: 10px; margin-left: 20px; } @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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 160px; height: 50px; color: #fff; background-color: #78b142; border: none; border-radius: 12px; position: relative; bottom: 0; left: 0; -webkit-transition: all 0.2s; transition: all 0.2s; letter-spacing: 1px; font-size: 18px; font-family: NSJP-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; -webkit-transition: all 0.2s; 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: 25px; 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (max-width: 767px) { .blog-main .article_list .topic_list section { padding: 70px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .blog-main .article_list .topic_list section h5 { width: 125px; margin: auto; font-size: 28px; text-align: center; font-family: NSJP-700; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #f0f6dd), color-stop(50%, #e0ee79)); 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; -webkit-transition: all 0.3s; 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 { width: 95px; margin: 10px 3px; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media (max-width: 767px) { .blog-main .article_list .topic_list main { width: 600px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .blog-main .article_list .topic_list .container { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /* 成家知識專欄-categories end */ /* 成家知識專欄-article start */ .blog_article h3 { color: #4c660b; font-weight: bold; font-family: NSJP-900; margin-bottom: 50px; } .blog_article span { font-weight: bold; letter-spacing: 2px; } .blog_article ul { margin: 0; padding: 0; list-style: none; } .blog_article p { margin-bottom: 0; line-height: 32px; letter-spacing: 1px; font-family: NSJP-400; } .blog_article .content { width: 50%; margin: 60px auto; padding-bottom: 60px; } .blog_article .content section:first-child { margin: 60px auto; padding-bottom: 60px; border-bottom: 1px solid var(--dark-gray); } @media (max-width: 1200px) { .blog_article .content { width: 70%; } } @media (max-width: 992px) { .blog_article .content { width: 90%; } } .blog_article hr { margin: 50px 0; } .blog_article .question-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 2px solid var(--second-color); margin-bottom: 50px; padding: 20px 50px 10px; } .blog_article .question-box ul li { margin: 10px 0; letter-spacing: 1px; font-weight: bold; } .blog_article .question-box p { font-size: 20px; font-family: NSJP-700; } .blog_article .question-box ul a { margin-left: 5px; color: #006e9a; } .blog_article .question-box ul a:hover { opacity: 0.8; } .blog_article .img-text { margin: 0; margin-bottom: 50px; padding: 20px 60px; background-color: rgba(128, 143, 76, 0.8); text-align: start; color: #ffffff; font-size: 14px; line-height: 28px; font-family: NSJP-500; letter-spacing: 2px; } @media (max-width: 767px) { .blog_article .img-text { padding: 20px 30px; } } .blog_article .content img { width: 100%; margin-top: 30px; } .blog_article .icon-box img { margin-top: 0px; width: 35px; } .blog_article h2 { margin-bottom: 30px; font-size: 20px; font-weight: bold; font-family: NSJP-700; color: var(--main-color); } .blog_article b { font-family: NSJP-700; } .blog_article li, .blog_article table td { font-family: NSJP-400; } .blog_article li { letter-spacing: 1px; line-height: 32px; } .blog_article .list-title { font-size: 20px; font-weight: bold; font-family: NSJP-700; } .blog_article table { width: 100%; margin-bottom: 50px; } .blog_article table, .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%; } .blog_article .link-box .link-list a { text-decoration: none; padding: 7px 10px; background: #808e4c; color: #fff; -webkit-transition: 0.3s; transition: 0.3s; border: 1px solid #808e4c; font-weight: bold; } .blog_article .link-box .link-list a:hover { border: 1px solid #808e4c; background: #fff; color: #808e4c; } .blog_article .readMore, .blog_article .article_readMore { margin: 25px 0; } .blog_article .read-more-list { padding-top: 60px; border-top: 1px solid var(--dark-gray); font-size: 18px; letter-spacing: 2px; } .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 .read-more-list a { color: var(--main-color); } .blog_article button { border: none; margin: 1px; } /* 成家知識專欄-article end */ /* 最新消息公告-news start */ .news-content img { margin-bottom: 30px; } .news-content p { margin-bottom: 0; line-height: 32px; letter-spacing: 1px; font-family: NSJP-400; margin-top: 10px; } .news-content h2 { margin-bottom: 30px; font-size: 20px; font-weight: bold; font-family: NSJP-700; color: #000; letter-spacing: 1px; } .bhouseweb_loc_content .subtitle { font-family: NSJP-900; } .bhouseweb_loc_content .bhouseWeb_news_content { letter-spacing: 1px; line-height: 28px; } .likeSee__state__filter p { width: 110px; margin-left: 50px; font-family: NSJP-500; letter-spacing: 1px; } .bhouseweb_loc_sec p { font-family: NSJP-400; } .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 p { padding-right: 15px; text-align: justify; font-family: NSJP-400; } .furniture-design h5 { font-weight: bold; color: var(--main-color); font-family: NSJP-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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .furniture-design .tab-title .nav-link { margin: atuo; font-size: 18px; font-family: NSJP-400; } .furniture-design ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; list-style: none; } .furniture-design ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; font-family: NSJP-400; } .furniture-design .design-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (max-width: 361px) { .furniture-design .design-list { margin-left: -4px; -webkit-box-pack: start; -ms-flex-pack: start; 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; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 1.3rem; white-space: nowrap; text-align: center; letter-spacing: 2px; font-family: NSJP-500; } .furniture-design .sub-tab-content .text-item div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.3s; transition: all 0.3s; } .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-family: NSJP-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: 15px; } } .furniture-design #systeam-furniture .cabinet-03 { height: 500px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; 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-family: NSJP-700; letter-spacing: 2px; } .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; } .furniture-design .mobile-tab #all-design-tab { text-align: center; font-weight: bold; font-size: 18px; } .furniture-design .mobile-tab #pills-tab .nav-item { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 475px) { .furniture-design .mobile-tab #pills-tab .nav-item { width: auto; margin: auto; } } .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; } .furniture-design .mobile-tab .nav-link { margin: auto; } .furniture-design .mobile-tab .tab-title { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .tw-85 { width: 85%; } .tw-15 { width: 15%; } /* 小寶設計單品-furniture_design end */ /* 設計家具 start */ .design-container { padding-top: 50px; } /* @media (max-width: 991px) { .design-container { padding-top: 150px; } } */ .design-container p { line-height: 32px; } .design-container h3, .design-container h6 { font-weight: bold; color: var(--main-color); font-family: NSJP-700; } .design-container h6 { font-size: 20px; } .design-container div { font-family: NSJP-400; } .design-container ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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-family: NSJP-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; font-family: NSJP-400; } .brand_content { width: 50%; margin: 0 auto; } @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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; 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-family: NSJP-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-family: NSJP-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-family: NSJP-400; } @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: -70px; } @media screen and (max-width: 1200px) { .store_cta_box { right: -170px; } } @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-family: NSJP-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-family: NSJP-400; } @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-link { color: #2980b8 !important; } .store-link:hover { opacity: 0.7; } .store-tab #pills-tab a, .mobile-tab #pills-tab a { color: #fff; text-decoration: none; font-size: 1.2rem; font-family: NSJP-400; -webkit-appearance: none; border-radius: 0; } .store-tab #pills-tab .nav-item, .mobile-tab #pills-tab .nav-item { margin: 0 0.8rem; width: auto; background: #808e4c; } @media screen and (max-width: 575px) { .store-tab #pills-tab .nav-item, .mobile-tab #pills-tab .nav-item { margin: 0 0.5rem; } } .store-tab #pills-tab .nav-item-link, .mobile-tab #pills-tab .nav-item-link { display: block; text-decoration: none; margin: 0 0.1rem; padding: 0.4rem 1.8rem; background: #808e4c; color: #fff; margin-right: 5px; -webkit-transition: 0.3s; transition: 0.3s; font-family: NSJP-400; letter-spacing: 2px; text-align: center; margin: 0; } .store-tab #pills-tab .nav-item-link:hover, .mobile-tab #pills-tab .nav-item-link:hover { background: #68686b !important; } @media screen and (max-width: 575px) { .store-tab #pills-tab .nav-item-link, .mobile-tab #pills-tab .nav-item-link { font-size: 16px; padding: 0.4rem 1rem; } } @media screen and (max-width: 767px) { .store-tab #pills-tab .nav-item-link { margin: 0 0rem; } } .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-family: NSJP-700; } @media screen and (max-width: 767px) { .store_title { margin-top: 15px; } } .store_content { font-weight: 600; letter-spacing: 2px; } .store_content a { color: #68686b; font-weight: 600; } .store_content .reservation-link { margin-top: 15px; color: #4c660b; font-weight: 600; font-size: 17px; } .store_content .store_content_item { margin-bottom: 10px; } .store_content_item span { font-family: NSJP-500; } .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 */