style.bhouse.css 46 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708
  1. @charset "UTF-8";
  2. :root {
  3. --main-color: #4c660a;
  4. --second-color: #808f4c;
  5. --logo-color: #78ad42;
  6. --dark-color: #656565;
  7. --dark-gray: #969696;
  8. --light-gray: #d6d6d8;
  9. --font-md: 15px;
  10. }
  11. * {
  12. margin: 0;
  13. padding: 0;
  14. -webkit-box-sizing: border-box;
  15. box-sizing: border-box;
  16. font-family: NSJP-300;
  17. }
  18. @font-face {
  19. font-family: NSJP-100;
  20. src: url(../font/NotoSansJP-Thin.otf);
  21. }
  22. @font-face {
  23. font-family: NSJP-300;
  24. src: url(../font/NotoSansJP-Light.otf);
  25. }
  26. @font-face {
  27. font-family: NSJP-400;
  28. src: url(../font/NotoSansJP-Regular.otf);
  29. }
  30. @font-face {
  31. font-family: NSJP-500;
  32. src: url(../font/NotoSansJP-Medium.otf);
  33. }
  34. @font-face {
  35. font-family: NSJP-700;
  36. src: url(../font/NotoSansJP-Bold.otf);
  37. }
  38. @font-face {
  39. font-family: NSJP-900;
  40. src: url(../font/NotoSansJP-Black.otf);
  41. }
  42. /* 共通樣式 start */
  43. a {
  44. text-decoration: none;
  45. }
  46. img {
  47. image-rendering: -webkit-optimize-contrast;
  48. }
  49. .bhouseweb_loc_content {
  50. width: 50%;
  51. margin: 0 auto;
  52. }
  53. @media screen and (max-width: 1200px) {
  54. .bhouseweb_loc_content {
  55. width: 70%;
  56. }
  57. }
  58. @media screen and (max-width: 767px) {
  59. .bhouseweb_loc_content {
  60. width: 95%;
  61. }
  62. }
  63. .bhouseweb_loc_line {
  64. background: var(--dark-gray);
  65. height: 1px;
  66. opacity: 1 !important;
  67. }
  68. .bhouse_title {
  69. color: #4c660b;
  70. font-size: 1.2rem;
  71. font-weight: 600;
  72. letter-spacing: 3px;
  73. }
  74. @media screen and (max-width: 767px) {
  75. .bhouse_title {
  76. font-size: 1rem;
  77. }
  78. }
  79. .bhouse_subtitle,
  80. .bhouse_subtitle b {
  81. color: #4c660b;
  82. font-size: 1.2rem;
  83. letter-spacing: 3px;
  84. margin-bottom: 1rem;
  85. font-family: NSJP-700;
  86. }
  87. .likeSee__state {
  88. display: -webkit-box;
  89. display: -ms-flexbox;
  90. display: flex;
  91. -webkit-box-pack: justify;
  92. -ms-flex-pack: justify;
  93. justify-content: space-between;
  94. -webkit-box-align: center;
  95. -ms-flex-align: center;
  96. align-items: center;
  97. letter-spacing: 2px;
  98. }
  99. .likeSee__state img {
  100. width: 40px;
  101. }
  102. @media screen and (max-width: 767px) {
  103. .likeSee__state img {
  104. width: 30px;
  105. }
  106. }
  107. .mt-15 {
  108. margin-top: 15px;
  109. }
  110. .mt-30 {
  111. margin-top: 30px;
  112. }
  113. .my-80 {
  114. margin: 80px 0;
  115. }
  116. .my-50 {
  117. margin: 50px 0;
  118. }
  119. .mt-80 {
  120. margin-top: 80px;
  121. }
  122. .mb-80 {
  123. margin-bottom: 80px;
  124. }
  125. .readMore,
  126. .article_readMore {
  127. font-size: 0.9rem;
  128. font-weight: bold;
  129. color: #656565;
  130. cursor: pointer;
  131. letter-spacing: 1px;
  132. }
  133. .readMore:hover,
  134. .article_readMore:hover {
  135. opacity: 0.8;
  136. }
  137. .qa-banner,
  138. .blog-banner,
  139. .brand-banner,
  140. .store-banner,
  141. .design-banner,
  142. .news-page-banner,
  143. .collection-banner,
  144. .room-planner-banner {
  145. padding: 175px 0;
  146. background-size: cover;
  147. background-position: center;
  148. background-repeat: no-repeat;
  149. image-rendering: -webkit-optimize-contrast;
  150. }
  151. @media (max-width: 991px) {
  152. .qa-banner,
  153. .blog-banner,
  154. .store-banner,
  155. .design-banner,
  156. .room-planner-banner {
  157. background-position: bottom -50px right 50%;
  158. }
  159. }
  160. /* 共通樣式 end */
  161. /* header start */
  162. .navbar {
  163. background-color: var(--second-color);
  164. }
  165. .navbar ul {
  166. white-space: nowrap;
  167. }
  168. .navbar .navbar-link {
  169. padding: 0 20px;
  170. color: var(--main-color);
  171. font-family: NSJP-500;
  172. }
  173. .navbar .navbar-link:hover {
  174. color: #ffffff;
  175. }
  176. .navbar .navbar-brand {
  177. display: none;
  178. }
  179. .navbar .close-btn {
  180. display: inline-block;
  181. position: relative;
  182. top: -5px;
  183. width: 23px;
  184. height: 2px;
  185. background: #ffffff;
  186. -webkit-transform: rotate(45deg);
  187. transform: rotate(45deg);
  188. }
  189. .navbar .close-btn::after {
  190. content: "";
  191. display: block;
  192. width: 23px;
  193. height: 2px;
  194. background: #ffffff;
  195. -webkit-transform: rotate(-90deg);
  196. transform: rotate(-90deg);
  197. }
  198. @media (max-width: 991px) {
  199. .navbar {
  200. padding: 0;
  201. /* 收合時覆蓋內容 */
  202. width: 100%;
  203. position: absolute;
  204. z-index: 999;
  205. }
  206. .navbar .navbar-link {
  207. display: block;
  208. padding: 20px 0px;
  209. margin: 0 50px;
  210. color: #ffffff;
  211. border-bottom: 1px solid var(--dark-gray);
  212. }
  213. .navbar .navbar-link:hover {
  214. color: rgba(255, 255, 255, 0.6);
  215. }
  216. .navbar .navbar-logo {
  217. display: none;
  218. }
  219. .navbar .navbar-nav {
  220. height: 100vh;
  221. white-space: nowrap;
  222. border-top: 1px solid var(--dark-gray);
  223. }
  224. .navbar .navbar-nav li:last-child a {
  225. border: none;
  226. }
  227. .navbar .navbar-toggler {
  228. width: 30px;
  229. margin-right: 30px;
  230. border: none;
  231. }
  232. .navbar .navbar-toggler:focus,
  233. .navbar .navbar-toggler:active {
  234. outline: none !important;
  235. -webkit-box-shadow: none;
  236. box-shadow: none;
  237. }
  238. .navbar .navbar-brand {
  239. display: block;
  240. }
  241. }
  242. .news-link {
  243. display: -webkit-box;
  244. display: -ms-flexbox;
  245. display: flex;
  246. padding: 20px 0;
  247. background-color: #da831c;
  248. }
  249. .news-link a {
  250. margin: auto;
  251. color: #fff;
  252. font-size: 14px;
  253. text-align: center;
  254. letter-spacing: 2px;
  255. }
  256. .news-link a:hover {
  257. opacity: 0.8;
  258. }
  259. /* header end */
  260. /* slick start */
  261. .slick-dots {
  262. bottom: 115px;
  263. }
  264. .slick-dots li button:before {
  265. opacity: 1;
  266. content: "●";
  267. color: #ffffff;
  268. font-size: 18px;
  269. }
  270. .slick-dots li.slick-active button:before {
  271. opacity: 1;
  272. color: var(--second-color);
  273. }
  274. .slider-item {
  275. position: relative;
  276. }
  277. .slider-item img {
  278. width: 100%;
  279. height: 700px;
  280. -o-object-fit: cover;
  281. object-fit: cover;
  282. }
  283. @media (max-width: 575px) {
  284. .slider-item img {
  285. height: 350px;
  286. }
  287. }
  288. .slider-item div {
  289. padding: 20px 20vw;
  290. position: absolute;
  291. left: 0;
  292. right: 0;
  293. bottom: 0px;
  294. background-color: rgba(128, 143, 76, 0.6);
  295. text-align: end;
  296. }
  297. .slider-item p {
  298. margin: 0;
  299. color: #ffffff;
  300. font-size: 22px;
  301. font-family: NSJP-500;
  302. letter-spacing: 2px;
  303. }
  304. @media (max-width: 575px) {
  305. .slider-item p {
  306. font-size: 18px;
  307. }
  308. }
  309. .slider-item p:last-child {
  310. font-size: 18px;
  311. }
  312. @media (max-width: 575px) {
  313. .slider-item p:last-child {
  314. font-size: 14px;
  315. }
  316. }
  317. @media (max-width: 767px) {
  318. .slider-item div {
  319. padding: 20px 5vw;
  320. }
  321. }
  322. /* slick end */
  323. /* footer start */
  324. .footer {
  325. padding: 0 18vw;
  326. font-size: 15px;
  327. background-color: var(--light-gray);
  328. }
  329. .footer img {
  330. display: none;
  331. margin: 50px;
  332. }
  333. .footer ul {
  334. padding: 0;
  335. list-style: none;
  336. font-weight: bold;
  337. margin-bottom: 30px;
  338. }
  339. .footer .row {
  340. padding: 60px 0;
  341. }
  342. .footer .list {
  343. display: -webkit-box;
  344. display: -ms-flexbox;
  345. display: flex;
  346. }
  347. .footer .list li {
  348. padding: 5px 0;
  349. }
  350. .footer .title a {
  351. font-size: 15px;
  352. color: var(--main-color);
  353. font-family: NSJP-400;
  354. font-weight: bold;
  355. letter-spacing: 1px;
  356. }
  357. .footer .list li a,
  358. .footer .copyright,
  359. .footer .copyright a {
  360. color: #68686b;
  361. font-weight: bold;
  362. font-family: NSJP-300;
  363. letter-spacing: 1px;
  364. }
  365. .footer .mobile-list {
  366. display: none;
  367. border-top: 1px solid var(--dark-gray);
  368. padding-top: 10px;
  369. margin-bottom: 30px;
  370. }
  371. .footer .mobile-list li {
  372. margin: 20px 0 20px 50px;
  373. }
  374. .footer .mobile-list a {
  375. font-size: 20px;
  376. color: var(--main-color);
  377. }
  378. .footer .mobile-list a:hover {
  379. opacity: 0.8;
  380. }
  381. .footer .copyright {
  382. padding: 20px 0;
  383. border-top: 1px solid var(--dark-gray);
  384. }
  385. .footer .copyright a {
  386. padding: 0 5px;
  387. }
  388. .footer .copyright span {
  389. position: relative;
  390. top: -1px;
  391. }
  392. @media (max-width: 1200px) {
  393. .footer {
  394. padding: 0 8vw;
  395. }
  396. }
  397. @media (max-width: 767px) {
  398. .footer {
  399. padding: 0 1.5vw;
  400. }
  401. .footer img {
  402. display: inline-block;
  403. }
  404. .footer .list {
  405. display: none;
  406. }
  407. .footer .mobile-list {
  408. display: block;
  409. }
  410. }
  411. /* footer end */
  412. /* home start */
  413. .home-container {
  414. padding: 100px 0 125px;
  415. }
  416. .home-content {
  417. width: 50%;
  418. margin: 0 auto;
  419. }
  420. .home-content a:hover p {
  421. opacity: 0.8;
  422. }
  423. .home-content img {
  424. max-width: 500px;
  425. width: 100%;
  426. }
  427. .home-content .bottom-box {
  428. position: relative;
  429. }
  430. .home-content .bottom-box div {
  431. position: absolute;
  432. bottom: 0;
  433. right: 0;
  434. left: 0;
  435. background: rgba(128, 143, 76, 0.6);
  436. padding: 20px 50px;
  437. }
  438. .home-content .bottom-box p {
  439. margin: auto;
  440. text-align: right;
  441. color: #fff;
  442. font-family: NSJP-700;
  443. letter-spacing: 2px;
  444. }
  445. .home-content .bottom-box p:first-child {
  446. font-size: 20px;
  447. }
  448. .home-content .bottom-box p:last-child {
  449. font-size: 16px;
  450. padding-top: 10px;
  451. }
  452. @media (max-width: 1200px) {
  453. .home-content {
  454. width: 70%;
  455. }
  456. }
  457. @media (max-width: 767px) {
  458. .home-container {
  459. padding: 80px 0 200px;
  460. }
  461. .home-content {
  462. width: 98.5%;
  463. }
  464. .home-content:last-child {
  465. display: none;
  466. }
  467. .home-content img {
  468. max-width: 100%;
  469. width: 100%;
  470. }
  471. }
  472. .home-content img {
  473. height: 100%;
  474. }
  475. .home-content .bg-img {
  476. width: 100%;
  477. padding: 40% 0;
  478. background-position: center;
  479. background-size: cover;
  480. -webkit-transition: all 0.5s;
  481. transition: all 0.5s;
  482. }
  483. .home-content .bg-portfolio .bg-img {
  484. background-image: url(/img/bt_linkto_portfolio_web_h@2x.png);
  485. }
  486. .home-content .bg-portfolio:hover .bg-img {
  487. background-image: url(/img/bt_linkto_portfolio_web_n@2x.png);
  488. }
  489. .home-content .bg-serve .bg-img {
  490. background-image: url(/img/bt_linkto_serve_web_h@2x.png);
  491. }
  492. .home-content .bg-serve:hover .bg-img {
  493. background-image: url(/img/bt_linkto_serve_web_n@2x.png);
  494. }
  495. .home-content .bg-qa .bg-img {
  496. background-image: url(/img/bt_linkto_qa_web_h@2x.png);
  497. }
  498. .home-content .bg-qa:hover .bg-img {
  499. background-image: url(/img/bt_linkto_qa_web_n@2x.png);
  500. }
  501. .home-content .bg-store .bg-img {
  502. background-image: url(/img/bt_linkto_store_web_h@2x.png);
  503. }
  504. .home-content .bg-store:hover .bg-img {
  505. background-image: url(/img/bt_linkto_store_web_n@2x.png);
  506. }
  507. @media (max-width: 767px) {
  508. .home-content .bg-portfolio .bg-img {
  509. background-image: url(/img/bt_linkto_portfolio_mobile@2x.png);
  510. }
  511. .home-content .bg-serve .bg-img {
  512. background-image: url(/img/bt_linkto_serve_mobile@2x.png);
  513. }
  514. .home-content .bg-qa .bg-img {
  515. background-image: url(/img/bt_linkto_qa_mobile@2x.png);
  516. }
  517. .home-content .bg-store .bg-img {
  518. background-image: url(/img/bt_linkto_store_mobile@2x.png);
  519. }
  520. }
  521. .reserve {
  522. position: fixed;
  523. bottom: 5vw;
  524. right: 5vw;
  525. }
  526. .reserve img {
  527. width: 130px;
  528. }
  529. /* home end */
  530. /* 服務常見QA-frequently_asked_questions start */
  531. .qa-banner {
  532. background-image: url(/img/banner/bn_qa@2x.png);
  533. }
  534. .accordion {
  535. padding: 140px 25% 40px;
  536. border-bottom: 1px solid var(--dark-gray);
  537. }
  538. .accordion .accordion-item {
  539. padding: 10px 0;
  540. border-width: 2px;
  541. border-color: var(--second-color);
  542. }
  543. .accordion .accordion-button,
  544. .accordion .accordion-button p {
  545. font-size: 14px;
  546. font-family: NSJP-500;
  547. letter-spacing: 1px;
  548. background: transparent !important;
  549. }
  550. .accordion .accordion-button:not(.collapsed) {
  551. color: #000000;
  552. -webkit-box-shadow: none;
  553. box-shadow: none;
  554. }
  555. .accordion .accordion-button:not(.collapsed)::after {
  556. background-image: url(/img/field_q6_h@2x.png);
  557. }
  558. .accordion .accordion-button:focus,
  559. .accordion .accordion-button:active {
  560. outline: none !important;
  561. -webkit-box-shadow: none;
  562. box-shadow: none;
  563. border-color: var(--second-color);
  564. }
  565. .accordion .accordion-button::after {
  566. width: 1.8rem;
  567. height: 1.8rem;
  568. background-size: 2rem;
  569. background-image: url(/img/field_q6_h@2x.png);
  570. image-rendering: -webkit-optimize-contrast;
  571. }
  572. .accordion .accordion-button span {
  573. position: absolute;
  574. top: -30px;
  575. left: -30px;
  576. }
  577. .accordion .accordion-button span img {
  578. width: 60%;
  579. }
  580. .accordion .accordion-body {
  581. font-size: 14px;
  582. line-height: 28px;
  583. font-family: NSJP-900;
  584. letter-spacing: 1px;
  585. }
  586. .accordion .botder-item {
  587. margin-bottom: 10px;
  588. border-radius: 0;
  589. border: 2px solid var(--second-color);
  590. line-height: 28px;
  591. }
  592. .botder-item::after {
  593. margin-right: 20px;
  594. }
  595. .accordion .subtitle {
  596. display: none;
  597. padding: 20px 0 0;
  598. font-size: 14px;
  599. text-align: center;
  600. font-weight: bold;
  601. color: var(--dark-color);
  602. }
  603. @media (max-width: 1200px) {
  604. .accordion {
  605. padding: 140px 15% 40px;
  606. }
  607. }
  608. @media (max-width: 767px) {
  609. .accordion {
  610. padding: 140px 5% 40px;
  611. }
  612. .accordion .botder-item {
  613. padding: 0;
  614. }
  615. .accordion .botder-item p {
  616. padding: 20px;
  617. margin: 5px 0;
  618. font-size: 16px;
  619. }
  620. .accordion .mobile-body {
  621. font-size: 16px;
  622. }
  623. .accordion .mobile-body,
  624. .accordion .accordion-body {
  625. font-size: 16px;
  626. line-height: 30px;
  627. }
  628. .accordion .accordion-item {
  629. padding: 5px 0;
  630. }
  631. .accordion .subtitle {
  632. display: block;
  633. }
  634. }
  635. .qa-navs {
  636. padding: 20px 0;
  637. }
  638. .qa-navs .home-content {
  639. display: -webkit-box;
  640. display: -ms-flexbox;
  641. display: flex;
  642. }
  643. @media (max-width: 767px) {
  644. .qa-navs {
  645. padding: 40px 0;
  646. }
  647. }
  648. /* 服務常見QA-frequently_asked_questions end */
  649. /* Banner start */
  650. .bhouseweb_loc_banner {
  651. position: relative;
  652. }
  653. @media screen and (max-width: 991px) {
  654. .bhouseweb_loc_banner {
  655. padding-top: 80px;
  656. }
  657. }
  658. @media screen and (max-width: 991px) {
  659. .bhouseweb_loc_banner .banner-img {
  660. height: 150px;
  661. -o-object-fit: cover;
  662. object-fit: cover;
  663. }
  664. }
  665. .bt_container {
  666. -webkit-transition: all 0.3s;
  667. transition: all 0.3s;
  668. }
  669. .bt_container_margin {
  670. margin-bottom: -100px;
  671. }
  672. .bt_slogan {
  673. position: relative;
  674. right: 80px;
  675. bottom: 24px;
  676. width: 90px;
  677. background: rgba(76, 102, 11, 0.6);
  678. color: #fff;
  679. cursor: pointer;
  680. display: none;
  681. }
  682. .bt_slogan img {
  683. -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(324deg) brightness(104%) contrast(102%);
  684. filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(324deg) brightness(104%) contrast(102%);
  685. }
  686. @media screen and (max-width: 767px) {
  687. .bt_slogan {
  688. right: 5%;
  689. width: 80px;
  690. }
  691. }
  692. @media screen and (max-width: 575px) {
  693. .bt_slogan {
  694. right: 3%;
  695. width: 50px;
  696. }
  697. }
  698. .bt_slogan_portfolio {
  699. width: 350px;
  700. -o-object-fit: cover;
  701. object-fit: cover;
  702. position: absolute;
  703. right: 260px;
  704. bottom: -36%;
  705. cursor: pointer;
  706. }
  707. @media screen and (max-width: 991px) {
  708. .bt_slogan_portfolio {
  709. width: 300px;
  710. right: 250px;
  711. height: 200px;
  712. bottom: -120px;
  713. }
  714. }
  715. @media screen and (max-width: 767px) {
  716. .bt_slogan_portfolio {
  717. right: 150px;
  718. }
  719. }
  720. @media screen and (max-width: 575px) {
  721. .bt_slogan_portfolio {
  722. right: 75px;
  723. width: 250px;
  724. height: 180px;
  725. }
  726. }
  727. .bhouseweb_loc_banner .bt_slogan img {
  728. -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(324deg) brightness(104%) contrast(102%);
  729. filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(324deg) brightness(104%) contrast(102%);
  730. }
  731. /* Banner end */
  732. /* 成家故事作品集-collection start */
  733. .select {
  734. text-decoration: underline !important;
  735. }
  736. .bhouseweb_item_type {
  737. cursor: pointer;
  738. }
  739. .readMore,
  740. .article_readMore {
  741. margin-top: 30px;
  742. }
  743. .title_underline {
  744. border-bottom: 2px #fff solid;
  745. padding-bottom: 5px;
  746. }
  747. .collection-banner {
  748. background-image: url(/img/bn_portfolio2x.png);
  749. }
  750. .bhouseweb_loc_banner {
  751. position: relative;
  752. }
  753. @media screen and (max-width: 991px) {
  754. .bhouseweb_loc_banner {
  755. padding-top: 80px;
  756. }
  757. }
  758. @media screen and (max-width: 767px) {
  759. .bhouseweb_loc_banner .banner-img {
  760. height: 150px;
  761. -o-object-fit: cover;
  762. object-fit: cover;
  763. }
  764. }
  765. .bhouseweb_loc_sec01 {
  766. width: 80%;
  767. margin-top: 180px;
  768. color: #656565;
  769. font-size: 0.9rem;
  770. }
  771. @media screen and (max-width: 767px) {
  772. .bhouseweb_loc_sec01 {
  773. width: 95%;
  774. margin-top: 130px;
  775. }
  776. }
  777. .bhouseweb_loc_sec01 .bhouseweb_loc_type,
  778. .bhouseweb_loc_sec01 .bhouseweb_loc_pattern,
  779. .bhouseweb_loc_sec01 .bhouseweb_loc_budget,
  780. .bhouseweb_loc_sec01 .bhouseweb_loc_size {
  781. margin: 10px;
  782. }
  783. @media screen and (max-width: 767px) {
  784. .bhouseweb_loc_sec01 .bhouseweb_loc_type,
  785. .bhouseweb_loc_sec01 .bhouseweb_loc_pattern,
  786. .bhouseweb_loc_sec01 .bhouseweb_loc_budget,
  787. .bhouseweb_loc_sec01 .bhouseweb_loc_size {
  788. margin: 5px;
  789. }
  790. }
  791. .bhouseweb_loc_sec01 .bhouseweb_loc_type a,
  792. .bhouseweb_loc_sec01 .bhouseweb_loc_pattern a,
  793. .bhouseweb_loc_sec01 .bhouseweb_loc_budget a,
  794. .bhouseweb_loc_sec01 .bhouseweb_loc_size a {
  795. text-decoration: none;
  796. color: #565656;
  797. padding: 5px 15px;
  798. }
  799. @media screen and (max-width: 767px) {
  800. .bhouseweb_loc_sec01 .bhouseweb_loc_type a,
  801. .bhouseweb_loc_sec01 .bhouseweb_loc_pattern a,
  802. .bhouseweb_loc_sec01 .bhouseweb_loc_budget a,
  803. .bhouseweb_loc_sec01 .bhouseweb_loc_size a {
  804. padding: 5px 5px;
  805. }
  806. }
  807. .bhouseweb_loc_search_box {
  808. width: 100%;
  809. background: #565656;
  810. }
  811. .bhouseweb_loc_search_box .bhouseweb_search_img {
  812. width: 20%;
  813. font-size: 24px;
  814. color: #fff;
  815. padding-left: 30px;
  816. }
  817. @media screen and (max-width: 767px) {
  818. .bhouseweb_loc_search_box .bhouseweb_search_img {
  819. padding-left: 10px;
  820. width: 15%;
  821. font-size: 16px;
  822. }
  823. }
  824. .bhouseweb_loc_search_box .bhouseweb_search_form {
  825. padding: 0.35rem 0.35rem;
  826. }
  827. .bhouseweb_loc_search_box #bhouseweb_search {
  828. width: 70%;
  829. background: #565656 !important;
  830. border: none;
  831. font-size: 1rem;
  832. font-weight: 400;
  833. line-height: 1.5;
  834. outline: none;
  835. color: #bcbcbc;
  836. }
  837. @media screen and (max-width: 767px) {
  838. .bhouseweb_loc_search_box #bhouseweb_search {
  839. width: 86%;
  840. font-size: 0.5rem;
  841. }
  842. }
  843. .bhouseweb_loc_search_box ::-webkit-input-placeholder {
  844. /* Chrome, Safari */
  845. color: #bcbcbc;
  846. }
  847. .bhouseweb_loc_search_box :-ms-input-placeholder {
  848. color: #bcbcbc;
  849. }
  850. .bhouseweb_loc_search_box ::-ms-input-placeholder {
  851. color: #bcbcbc;
  852. }
  853. .bhouseweb_loc_search_box ::placeholder {
  854. color: #bcbcbc;
  855. }
  856. .bhouseweb_loc_search_box :-ms-input-placeholder {
  857. /* IE 10+ */
  858. color: #bcbcbc;
  859. }
  860. .bhouseweb_loc_search_box ::-moz-placeholder {
  861. /* Firefox 19+ */
  862. color: #bcbcbc;
  863. }
  864. .bhouseweb_loc_sec02 {
  865. height: 170vh;
  866. overflow: hidden;
  867. }
  868. .bhouseweb_loc_sec02_card {
  869. background: var(--logo-color);
  870. padding: 0px 0px 10px 10px;
  871. position: relative;
  872. -webkit-transition: 0.5s ease-in-out;
  873. transition: 0.5s ease-in-out;
  874. cursor: pointer;
  875. overflow: hidden;
  876. height: 300px;
  877. }
  878. @media screen and (max-width: 767px) {
  879. .bhouseweb_loc_sec02_card {
  880. height: 160px;
  881. padding: 0;
  882. }
  883. }
  884. .bhouseweb_loc_sec02_card a {
  885. text-decoration: none;
  886. }
  887. .bhouseweb_loc_sec02_card .sec02-p-dec {
  888. color: #fff;
  889. text-align: center;
  890. font-size: 14px;
  891. font-weight: 900;
  892. -webkit-transition: 0.5s;
  893. transition: 0.5s;
  894. letter-spacing: 1px;
  895. }
  896. @media screen and (min-width: 1025px) {
  897. .bhouseweb_loc_sec02_card .sec02-p-dec {
  898. width: 100%;
  899. position: absolute;
  900. top: 30%;
  901. left: 0px;
  902. font-size: 16px;
  903. opacity: 0;
  904. }
  905. }
  906. @media screen and (max-width: 767px) {
  907. .bhouseweb_loc_sec02_card .sec02-p-dec {
  908. display: none;
  909. }
  910. }
  911. .bhouseweb_loc_sec02_card img {
  912. width: 100%;
  913. height: 300px;
  914. -o-object-fit: cover;
  915. object-fit: cover;
  916. }
  917. @media screen and (max-width: 767px) {
  918. .bhouseweb_loc_sec02_card img {
  919. height: 100%;
  920. -o-object-fit: cover;
  921. object-fit: cover;
  922. }
  923. }
  924. .bhouseweb_loc_sec02_card:hover .sec02-p-dec,
  925. .bhouseweb_loc_sec02_card:hover .sec03-p-dec {
  926. opacity: 1;
  927. }
  928. .bhouseweb_loc_sec02_card:hover img {
  929. opacity: 0.2;
  930. }
  931. /* 成家故事作品集-collection end */
  932. /* 成家故事作品集內頁-simple_korean_style_hous start */
  933. .style_house_ads {
  934. padding: 15px;
  935. background: #fff;
  936. }
  937. @media screen and (max-width: 991px) {
  938. .style_house_ads {
  939. padding-top: 100px;
  940. }
  941. }
  942. .style_house_ads .style_house_text {
  943. width: 80.5%;
  944. margin: 0 auto;
  945. }
  946. @media screen and (max-width: 767px) {
  947. .style_house_ads .style_house_text {
  948. width: 95%;
  949. }
  950. }
  951. .style_house_line {
  952. background: #000;
  953. height: 1px;
  954. opacity: 1 !important;
  955. }
  956. .title_underline {
  957. border-bottom: 2px #fff solid;
  958. padding-bottom: 5px;
  959. }
  960. .style_house_banner img {
  961. width: 100%;
  962. height: 80vh;
  963. -o-object-fit: cover;
  964. object-fit: cover;
  965. }
  966. @media screen and (max-width: 767px) {
  967. .style_house_banner img {
  968. height: 150px;
  969. }
  970. }
  971. .style_house_title {
  972. color: #4c660b;
  973. font-size: 1.4rem;
  974. letter-spacing: 3px;
  975. margin-bottom: 50px;
  976. font-family: NSJP-700;
  977. }
  978. @media screen and (max-width: 767px) {
  979. .style_house_title {
  980. font-size: 1rem;
  981. }
  982. }
  983. .style_house_subtitle {
  984. color: #4c660b;
  985. font-size: 1.2rem;
  986. font-weight: 600;
  987. letter-spacing: 3px;
  988. font-family: NSJP-700;
  989. }
  990. .style_house_content {
  991. width: 50%;
  992. margin: 0 auto;
  993. }
  994. @media screen and (max-width: 767px) {
  995. .style_house_content {
  996. width: 95%;
  997. }
  998. }
  999. .style_house_sec01 {
  1000. margin-top: 100px;
  1001. text-align: center;
  1002. margin-bottom: 50px;
  1003. }
  1004. @media screen and (max-width: 767px) {
  1005. .style_house_sec01 {
  1006. margin-top: 30px;
  1007. }
  1008. }
  1009. .style_house_sec01 h3 {
  1010. font-size: 1.5rem;
  1011. font-family: NSJP-700;
  1012. letter-spacing: 2px;
  1013. }
  1014. @media screen and (max-width: 767px) {
  1015. .style_house_sec01 h3 {
  1016. font-size: 1rem;
  1017. }
  1018. }
  1019. .style_house_sec01 p {
  1020. color: #808e4c;
  1021. font-family: NSJP-500;
  1022. letter-spacing: 2px;
  1023. }
  1024. @media screen and (max-width: 767px) {
  1025. .style_house_sec01 p {
  1026. font-size: 0.6rem;
  1027. }
  1028. }
  1029. .style_house_sec01 .style_house_sec01_box {
  1030. margin-top: 30px;
  1031. }
  1032. @media screen and (max-width: 767px) {
  1033. .style_house_sec01 .style_house_sec01_box {
  1034. margin-top: 10px;
  1035. }
  1036. }
  1037. .style_house_sec01 .style_house_sec01_box-1 {
  1038. width: 90%;
  1039. margin: 0 auto;
  1040. }
  1041. .style_house_sec02 {
  1042. margin-top: 50px;
  1043. margin-bottom: 50px;
  1044. }
  1045. .style_house_sec02 .style_house_sec02_content {
  1046. margin-top: 50px;
  1047. }
  1048. @media screen and (max-width: 767px) {
  1049. .style_house_sec02 .style_house_sec02_content {
  1050. margin-top: 10px;
  1051. }
  1052. }
  1053. .style_house_sec02 .style_house_sec02_slide {
  1054. margin-top: 30px;
  1055. }
  1056. .style_house_sec02 .style_house_sec02_slide .slide_item_text {
  1057. background: rgba(76, 102, 11, 0.5);
  1058. padding: 15px;
  1059. -webkit-transform: translateY(-72px);
  1060. transform: translateY(-86px);
  1061. }
  1062. .style_house_sec02 .style_house_sec02_slide .slide_item_text p {
  1063. color: #fff;
  1064. padding-left: 30px;
  1065. }
  1066. .style_house_sec02 p {
  1067. margin-bottom: 0;
  1068. font-size: 14px;
  1069. line-height: 28px;
  1070. letter-spacing: 2px;
  1071. font-family: NSJP-500;
  1072. }
  1073. @media screen and (max-width: 767px) {
  1074. .style_house_sec02 p {
  1075. font-size: 0.6rem;
  1076. }
  1077. }
  1078. .style_house_sec02 .style_house_sec02_slide_list {
  1079. margin-top: -50px;
  1080. }
  1081. .style_house_sec02 .style_house_sec02_slide_list .sec02_slide_item {
  1082. padding: 5px;
  1083. }
  1084. .style_house_sec02_slide .slick-dots {
  1085. display: none !important;
  1086. }
  1087. .style_house_sec03 {
  1088. letter-spacing: 1px;
  1089. }
  1090. .style_house_sec03 .table1 {
  1091. margin-top: 30px;
  1092. margin-bottom: 50px;
  1093. font-weight: 600;
  1094. }
  1095. .style_house_sec03 .table1 th {
  1096. font-weight: 600;
  1097. width: 15%;
  1098. padding-left: 15px;
  1099. padding-top: 10px;
  1100. }
  1101. @media screen and (max-width: 767px) {
  1102. .style_house_sec03 .table1 th {
  1103. width: 25%;
  1104. font-size: 0.6rem;
  1105. }
  1106. }
  1107. .style_house_sec03 .table1 td {
  1108. padding: 15px;
  1109. }
  1110. @media screen and (max-width: 767px) {
  1111. .style_house_sec03 .table1 td {
  1112. padding: 5px;
  1113. font-size: 0.6rem;
  1114. }
  1115. }
  1116. .style_house_sec03 .table2 {
  1117. margin-top: 30px;
  1118. margin-bottom: 50px;
  1119. font-weight: 600;
  1120. }
  1121. .style_house_sec03 .table2 th {
  1122. width: 15%;
  1123. padding-left: 15px;
  1124. padding-top: 10px;
  1125. }
  1126. @media screen and (max-width: 767px) {
  1127. .style_house_sec03 .table2 th {
  1128. width: 25%;
  1129. font-size: 0.6rem;
  1130. }
  1131. }
  1132. .style_house_sec03 .table2 td p {
  1133. margin-bottom: 0;
  1134. line-height: 2;
  1135. }
  1136. @media screen and (max-width: 767px) {
  1137. .style_house_sec03 .table2 td p {
  1138. font-size: 0.6rem;
  1139. }
  1140. }
  1141. .style_house_sec04 {
  1142. margin-top: 50px;
  1143. margin-bottom: 100px;
  1144. }
  1145. @media screen and (max-width: 767px) {
  1146. .style_house_sec04 {
  1147. margin-top: 30px;
  1148. }
  1149. }
  1150. .style_house_sec05 {
  1151. margin-top: 50px;
  1152. margin-bottom: 100px;
  1153. }
  1154. @media screen and (max-width: 767px) {
  1155. .style_house_sec05 {
  1156. margin-bottom: 30px;
  1157. margin-top: 30px;
  1158. }
  1159. }
  1160. .style_house_sec05_box a {
  1161. text-decoration: none;
  1162. padding: 8px 5px;
  1163. background: #808e4c;
  1164. color: #fff;
  1165. margin-right: 5px;
  1166. -webkit-transition: 0.3s;
  1167. transition: 0.3s;
  1168. border: 1px solid #808e4c;
  1169. }
  1170. .style_house_sec05_box a:hover {
  1171. border: 1px solid #808e4c;
  1172. background: #fff;
  1173. color: #808e4c;
  1174. }
  1175. .style_house_sec06 {
  1176. margin: 30px 0;
  1177. }
  1178. /* 成家故事作品集內頁-simple_korean_style_hous end */
  1179. /* 成家設計服務-room_planner start */
  1180. .room-planner {
  1181. display: -webkit-box;
  1182. display: -ms-flexbox;
  1183. display: flex;
  1184. -webkit-box-orient: vertical;
  1185. -webkit-box-direction: normal;
  1186. -ms-flex-direction: column;
  1187. flex-direction: column;
  1188. }
  1189. .room-planner .row {
  1190. -webkit-box-align: center;
  1191. -ms-flex-align: center;
  1192. align-items: center;
  1193. -webkit-box-pack: center;
  1194. -ms-flex-pack: center;
  1195. justify-content: center;
  1196. -ms-flex-wrap: nowrap;
  1197. flex-wrap: nowrap;
  1198. }
  1199. .room-planner .room-planner-banner {
  1200. background-image: url(/img/banner/bn_serve@2x.png);
  1201. }
  1202. .room-planner .sub-banner {
  1203. margin: 150px auto 50px;
  1204. }
  1205. .room-planner .sub-banner img {
  1206. width: 100%;
  1207. max-width: 600px;
  1208. padding: 0 20px;
  1209. }
  1210. .room-planner .room-planner-images {
  1211. padding: 0 70px 100px;
  1212. position: relative;
  1213. }
  1214. .room-planner .room-planner-images .row {
  1215. padding: 50px 0;
  1216. }
  1217. .room-planner .room-planner-images .img-box {
  1218. border-radius: 40px;
  1219. background-color: #99a56f;
  1220. border: 3px solid var(--second-color);
  1221. background-size: cover;
  1222. background-position: center;
  1223. background-repeat: no-repeat;
  1224. }
  1225. .room-planner .room-planner-images .bg-item {
  1226. max-width: 830px;
  1227. height: 270px;
  1228. }
  1229. .room-planner .room-planner-images .step-01 {
  1230. background-image: url(/img/room_planner/step1.webp);
  1231. }
  1232. .room-planner .room-planner-images .step-02 {
  1233. background-image: url(/img/room_planner/step2.webp);
  1234. }
  1235. .room-planner .room-planner-images .step-03 {
  1236. background-position: right;
  1237. background-image: url(/img/room_planner/step3.webp);
  1238. }
  1239. .room-planner .room-planner-images .step-04 {
  1240. background-image: url(/img/room_planner/step4.webp);
  1241. }
  1242. .room-planner .room-planner-images .step-06 {
  1243. background-image: url(/img/room_planner/step6.webp);
  1244. }
  1245. .room-planner .room-planner-images .step-09 {
  1246. background-image: url(/img/room_planner/step9.webp);
  1247. }
  1248. .room-planner .room-planner-images .line-1,
  1249. .room-planner .room-planner-images .line-2,
  1250. .room-planner .room-planner-images .line-3,
  1251. .room-planner .room-planner-images .line-4,
  1252. .room-planner .room-planner-images .line-5 {
  1253. position: absolute;
  1254. z-index: -1;
  1255. }
  1256. .room-planner .room-planner-images .line-1 {
  1257. top: -50px;
  1258. width: 580px;
  1259. height: 200px;
  1260. border-left: 3px solid var(--second-color);
  1261. }
  1262. .room-planner .room-planner-images .line-2 {
  1263. top: 185px;
  1264. width: 585px;
  1265. height: 370px;
  1266. border: 3px solid var(--second-color);
  1267. border-left: none;
  1268. }
  1269. .room-planner .room-planner-images .line-3 {
  1270. top: 600px;
  1271. width: 580px;
  1272. height: 200px;
  1273. border-left: 3px solid var(--second-color);
  1274. }
  1275. .room-planner .room-planner-images .line-4 {
  1276. top: 930px;
  1277. width: 585px;
  1278. height: 380px;
  1279. border: 3px solid var(--second-color);
  1280. border-left: none;
  1281. }
  1282. .room-planner .room-planner-images .line-5 {
  1283. width: 590px;
  1284. height: 300px;
  1285. bottom: 300px;
  1286. border-left: 3px solid var(--second-color);
  1287. }
  1288. @media (max-width: 991px) {
  1289. .room-planner .room-planner-images .bg-item {
  1290. min-width: 750px;
  1291. }
  1292. .room-planner .room-planner-images .line-2,
  1293. .room-planner .room-planner-images .line-3 {
  1294. width: 540px;
  1295. }
  1296. .room-planner .room-planner-images .line-4 {
  1297. width: 510px;
  1298. }
  1299. }
  1300. @media (max-width: 767px) {
  1301. .room-planner .room-planner-images {
  1302. display: none;
  1303. }
  1304. }
  1305. .room-planner .room-planner-moblie .row {
  1306. margin-bottom: 50px;
  1307. padding: 0 65px;
  1308. }
  1309. .room-planner .room-planner-moblie .img-box {
  1310. border-radius: 30px;
  1311. background-color: #99a56f;
  1312. border: 3px solid var(--second-color);
  1313. }
  1314. .room-planner .room-planner-moblie .text-box {
  1315. margin-right: 10vw;
  1316. font-size: 20px;
  1317. font-weight: bold;
  1318. text-align: center;
  1319. }
  1320. .room-planner .room-planner-moblie .text-box span {
  1321. font-size: 44px;
  1322. color: #99a56f;
  1323. }
  1324. .room-planner .room-planner-moblie .line-6 {
  1325. height: 2800px;
  1326. position: absolute;
  1327. top: -50px;
  1328. right: 29%;
  1329. z-index: -1;
  1330. border-right: 2px solid var(--second-color);
  1331. }
  1332. @media (min-width: 767px) {
  1333. .room-planner .room-planner-moblie {
  1334. display: none;
  1335. }
  1336. }
  1337. @media (max-width: 576px) {
  1338. .room-planner .room-planner-moblie .line-6 {
  1339. right: 36%;
  1340. }
  1341. .room-planner .room-planner-moblie .text-box {
  1342. margin-right: 0;
  1343. }
  1344. }
  1345. .room-planner .rp-navs {
  1346. padding: 35px 25px;
  1347. }
  1348. .room-planner .rp-navs .home-content {
  1349. width: 100%;
  1350. max-width: 850px;
  1351. display: -webkit-box;
  1352. display: -ms-flexbox;
  1353. display: flex;
  1354. }
  1355. @media (max-width: 767px) {
  1356. .room-planner .rp-navs {
  1357. display: none;
  1358. }
  1359. }
  1360. /* 成家設計服務-room_planner end */
  1361. /* 成家知識專欄-categories start */
  1362. .blog-banner {
  1363. background-image: url(../img/banner/bn_blog@2x.png);
  1364. }
  1365. .blog-categories .container {
  1366. width: 50%;
  1367. margin: 40px auto 25px;
  1368. }
  1369. .blog-categories .container .breadcrumb-item {
  1370. font-weight: bold;
  1371. }
  1372. .blog-categories .container .breadcrumb-item a {
  1373. color: var(--main-color);
  1374. }
  1375. .blog-categories .container .link-list {
  1376. width: 100%;
  1377. max-width: 190px;
  1378. }
  1379. .blog-categories .container .link-list a {
  1380. text-decoration: none;
  1381. margin: 0 0.1rem;
  1382. padding: 7px 10px;
  1383. background: #808e4c;
  1384. color: #fff;
  1385. margin-right: 5px;
  1386. -webkit-transition: 0.3s;
  1387. transition: 0.3s;
  1388. border: 1px solid #808e4c;
  1389. }
  1390. .blog-categories .container .link-list a:hover {
  1391. border: 1px solid #808e4c;
  1392. background: #fff;
  1393. color: #808e4c;
  1394. }
  1395. .blog-categories .container .bhouseweb_search_form {
  1396. padding: 0;
  1397. }
  1398. .blog-categories .container .bhouseweb_search_form .bhouseweb_search_img img {
  1399. width: 38px;
  1400. }
  1401. .blog-categories .article {
  1402. width: 50%;
  1403. margin: auto;
  1404. display: -webkit-box;
  1405. display: -ms-flexbox;
  1406. display: flex;
  1407. -webkit-box-orient: vertical;
  1408. -webkit-box-direction: normal;
  1409. -ms-flex-direction: column;
  1410. flex-direction: column;
  1411. margin-top: 25px;
  1412. }
  1413. .blog-categories .article .article-item {
  1414. display: -webkit-box;
  1415. display: -ms-flexbox;
  1416. display: flex;
  1417. margin: 25px 0;
  1418. padding-bottom: 50px;
  1419. border-bottom: 1px solid var(--dark-gray);
  1420. }
  1421. .blog-categories .article .article-item h4 {
  1422. font-size: 24px;
  1423. line-height: 32px;
  1424. color: #4c660b;
  1425. font-family: NSJP-700;
  1426. }
  1427. .blog-categories .article .article-item h4:hover {
  1428. opacity: 0.8;
  1429. }
  1430. .blog-categories .article .article-item img {
  1431. width: 240px;
  1432. height: auto;
  1433. margin-right: 35px;
  1434. }
  1435. .blog-categories .article .nav-link {
  1436. padding: 0;
  1437. margin-bottom: 50px;
  1438. text-align: center;
  1439. font-weight: bold;
  1440. font-size: 14px;
  1441. letter-spacing: 1px;
  1442. color: var(--dark-color);
  1443. }
  1444. @media (max-width: 991px) {
  1445. .blog-categories .container,
  1446. .blog-categories .article {
  1447. width: 75%;
  1448. }
  1449. }
  1450. @media (max-width: 575px) {
  1451. .blog-categories .container,
  1452. .blog-categories .article {
  1453. width: 90%;
  1454. }
  1455. .blog-categories .container .article-item,
  1456. .blog-categories .article .article-item {
  1457. -webkit-box-orient: vertical;
  1458. -webkit-box-direction: normal;
  1459. -ms-flex-direction: column;
  1460. flex-direction: column;
  1461. }
  1462. .blog-categories .container .article-item a,
  1463. .blog-categories .article .article-item a {
  1464. margin-top: 20px;
  1465. }
  1466. .blog-categories .container .article-item img,
  1467. .blog-categories .article .article-item img {
  1468. width: 100%;
  1469. margin-right: 15px;
  1470. }
  1471. }
  1472. /* 成家知識專欄-categories end */
  1473. /* 成家知識專欄-article start */
  1474. .blog_article h3 {
  1475. color: #4c660b;
  1476. font-weight: bold;
  1477. font-family: NSJP-900;
  1478. }
  1479. .blog_article span {
  1480. font-weight: bold;
  1481. letter-spacing: 2px;
  1482. }
  1483. .blog_article ul {
  1484. margin: 0;
  1485. padding: 0;
  1486. list-style: none;
  1487. }
  1488. .blog_article p {
  1489. line-height: 32px;
  1490. letter-spacing: 1px;
  1491. font-family: NSJP-400;
  1492. }
  1493. .blog_article .content {
  1494. width: 50%;
  1495. margin: auto;
  1496. padding-bottom: 60px;
  1497. }
  1498. .blog_article .content section:first-child {
  1499. margin: 60px auto;
  1500. padding-bottom: 60px;
  1501. border-bottom: 1px solid var(--dark-gray);
  1502. }
  1503. @media (max-width: 1200px) {
  1504. .blog_article .content {
  1505. width: 70%;
  1506. }
  1507. }
  1508. @media (max-width: 992px) {
  1509. .blog_article .content {
  1510. width: 90%;
  1511. }
  1512. }
  1513. .blog_article .icon-box img {
  1514. width: 35px;
  1515. }
  1516. .blog_article .question-box {
  1517. display: -webkit-box;
  1518. display: -ms-flexbox;
  1519. display: flex;
  1520. -webkit-box-align: center;
  1521. -ms-flex-align: center;
  1522. align-items: center;
  1523. -webkit-box-orient: vertical;
  1524. -webkit-box-direction: normal;
  1525. -ms-flex-direction: column;
  1526. flex-direction: column;
  1527. border: 2px solid var(--second-color);
  1528. }
  1529. .blog_article .question-box ul {
  1530. padding: 20px 40px;
  1531. }
  1532. .blog_article .question-box ul li {
  1533. margin: 10px 0;
  1534. letter-spacing: 1px;
  1535. font-weight: bold;
  1536. }
  1537. .blog_article .question-box ul li:first-child {
  1538. font-size: 20px;
  1539. font-family: NSJP-700;
  1540. }
  1541. .blog_article .question-box ul a {
  1542. margin-left: 5px;
  1543. color: #006e9a;
  1544. }
  1545. .blog_article .question-box ul a:hover {
  1546. opacity: 0.8;
  1547. }
  1548. .blog_article .img-box {
  1549. margin: 50px 0;
  1550. position: relative;
  1551. }
  1552. .blog_article .img-box img {
  1553. width: 100%;
  1554. }
  1555. .blog_article .img-box p {
  1556. margin: 0;
  1557. padding: 20px 60px;
  1558. position: absolute;
  1559. left: 0;
  1560. right: 0;
  1561. bottom: 0px;
  1562. background-color: rgba(128, 143, 76, 0.6);
  1563. text-align: start;
  1564. color: #ffffff;
  1565. font-size: 14px;
  1566. line-height: 28px;
  1567. font-family: NSJP-500;
  1568. letter-spacing: 2px;
  1569. }
  1570. .blog_article section h4 {
  1571. margin-bottom: 30px;
  1572. font-size: 20px;
  1573. font-weight: bold;
  1574. font-family: NSJP-700;
  1575. color: var(--main-color);
  1576. }
  1577. .blog_article b {
  1578. font-family: NSJP-700;
  1579. }
  1580. .blog_article li,
  1581. .blog_article table td {
  1582. font-family: NSJP-400;
  1583. }
  1584. .blog_article .section-01 {
  1585. margin-bottom: 40px;
  1586. padding-bottom: 20px;
  1587. border-bottom: 1px solid var(--dark-gray);
  1588. }
  1589. .blog_article .section-02 li {
  1590. letter-spacing: 1px;
  1591. line-height: 32px;
  1592. }
  1593. .blog_article .section-02 li:first-child,
  1594. .blog_article .section-03 li:first-child {
  1595. margin-bottom: 20px;
  1596. font-size: 20px;
  1597. font-weight: bold;
  1598. font-family: NSJP-700;
  1599. }
  1600. .blog_article .section-03 {
  1601. padding-bottom: 10px;
  1602. border-bottom: 1px solid var(--dark-gray);
  1603. }
  1604. .blog_article .section-03 span {
  1605. line-height: 32px;
  1606. }
  1607. .blog_article .section-04 {
  1608. padding-bottom: 40px;
  1609. border-bottom: 1px solid var(--dark-gray);
  1610. }
  1611. .blog_article .section-04 h4 {
  1612. margin-top: 30px;
  1613. }
  1614. .blog_article .section-04 span {
  1615. line-height: 32px;
  1616. }
  1617. .blog_article .section-04 li:first-child {
  1618. margin-bottom: 40px;
  1619. }
  1620. .blog_article .section-04 table {
  1621. width: 100%;
  1622. margin-bottom: 50px;
  1623. }
  1624. .blog_article .section-04 table,
  1625. .blog_article .section-04 table td,
  1626. .blog_article .section-04 table th {
  1627. padding: 5px 10px;
  1628. border: 1px solid #333;
  1629. }
  1630. .blog_article .link-box {
  1631. margin-top: 50px;
  1632. padding-bottom: 50px;
  1633. border-bottom: 1px solid var(--dark-gray);
  1634. }
  1635. .blog_article .link-box .link-list {
  1636. width: 100%;
  1637. }
  1638. .blog_article .link-box .link-list a {
  1639. margin: 0;
  1640. text-decoration: none;
  1641. padding: 7px 10px;
  1642. background: #808e4c;
  1643. color: #fff;
  1644. -webkit-transition: 0.3s;
  1645. transition: 0.3s;
  1646. border: 1px solid #808e4c;
  1647. }
  1648. .blog_article .link-box .link-list a:hover {
  1649. border: 1px solid #808e4c;
  1650. background: #fff;
  1651. color: #808e4c;
  1652. }
  1653. .blog_article .readMore,
  1654. .blog_article .article_readMore {
  1655. margin: 25px 0;
  1656. }
  1657. .blog_article .read-more-list {
  1658. padding-top: 60px;
  1659. border-top: 1px solid var(--dark-gray);
  1660. font-size: 18px;
  1661. letter-spacing: 2px;
  1662. }
  1663. .blog_article .read-more-list li {
  1664. margin: 10px 0;
  1665. font-weight: bold;
  1666. }
  1667. .blog_article .read-more-list a {
  1668. color: var(--main-color);
  1669. }
  1670. /* 成家知識專欄-article end */
  1671. /* 最新消息公告-news start */
  1672. .news-page-banner {
  1673. background-image: url(/img/banner/bn_news@2x.png);
  1674. }
  1675. .bhouseweb_loc_content .subtitle {
  1676. font-family: NSJP-900;
  1677. }
  1678. .bhouseweb_loc_content .bhouseWeb_news_content {
  1679. letter-spacing: 1px;
  1680. line-height: 28px;
  1681. }
  1682. .likeSee__state__filter p {
  1683. width: 110px;
  1684. margin-left: 50px;
  1685. font-family: NSJP-500;
  1686. letter-spacing: 1px;
  1687. }
  1688. .bhouseweb_loc_sec p {
  1689. font-family: NSJP-400;
  1690. }
  1691. /* 最新消息公告-news end */
  1692. /* 小寶設計單品-furniture_design start */
  1693. .furniture-design p {
  1694. padding-right: 20px;
  1695. text-align: justify;
  1696. font-family: NSJP-400;
  1697. }
  1698. .furniture-design h5 {
  1699. font-weight: bold;
  1700. color: var(--main-color);
  1701. font-family: NSJP-700;
  1702. }
  1703. .furniture-design p,
  1704. .furniture-design h5 {
  1705. line-height: 32px;
  1706. letter-spacing: 1px;
  1707. }
  1708. .furniture-design img {
  1709. width: 100%;
  1710. }
  1711. .furniture-design .nav-link {
  1712. font-weight: bold;
  1713. font-size: 14px;
  1714. color: var(--dark-color);
  1715. }
  1716. .furniture-design .tab-title .nav-item {
  1717. width: 200px;
  1718. }
  1719. .furniture-design .tab-title .nav-link {
  1720. margin: 0 30px;
  1721. font-size: 18px;
  1722. }
  1723. .furniture-design ul {
  1724. display: -webkit-box;
  1725. display: -ms-flexbox;
  1726. display: flex;
  1727. -ms-flex-wrap: wrap;
  1728. flex-wrap: wrap;
  1729. list-style: none;
  1730. }
  1731. .furniture-design ul li {
  1732. display: -webkit-box;
  1733. display: -ms-flexbox;
  1734. display: flex;
  1735. -ms-flex-wrap: wrap;
  1736. flex-wrap: wrap;
  1737. list-style: none;
  1738. font-family: NSJP-400;
  1739. }
  1740. .furniture-design .design-list {
  1741. display: -webkit-box;
  1742. display: -ms-flexbox;
  1743. display: flex;
  1744. -ms-flex-wrap: wrap;
  1745. flex-wrap: wrap;
  1746. list-style: none;
  1747. }
  1748. .furniture-design .design-list li {
  1749. margin: 5px 10px;
  1750. }
  1751. .furniture-design .sub-tab-content h4 {
  1752. margin: 0;
  1753. color: #ffffff;
  1754. background-color: rgba(128, 142, 76, 0.8);
  1755. padding: 10px 20px;
  1756. -webkit-transition: all 0.3s;
  1757. transition: all 0.3s;
  1758. font-size: 1.3rem;
  1759. white-space: nowrap;
  1760. text-align: center;
  1761. letter-spacing: 2px;
  1762. font-family: NSJP-500;
  1763. }
  1764. .furniture-design .sub-tab-content img {
  1765. height: 350px;
  1766. -o-object-fit: cover;
  1767. object-fit: cover;
  1768. -o-object-position: center;
  1769. object-position: center;
  1770. }
  1771. @media screen and (max-width: 767px) {
  1772. .furniture-design .sub-tab-content img {
  1773. height: 350px;
  1774. }
  1775. }
  1776. .furniture-design .sub-tab-content .text-item div {
  1777. position: absolute;
  1778. top: 50%;
  1779. left: 50%;
  1780. -webkit-transform: translate(-50%, -50%);
  1781. transform: translate(-50%, -50%);
  1782. display: -webkit-box;
  1783. display: -ms-flexbox;
  1784. display: flex;
  1785. -webkit-box-pack: center;
  1786. -ms-flex-pack: center;
  1787. justify-content: center;
  1788. -webkit-box-align: center;
  1789. -ms-flex-align: center;
  1790. align-items: center;
  1791. -webkit-transition: all 0.3s;
  1792. transition: all 0.3s;
  1793. }
  1794. .furniture-design .sub-tab-content .text-item:hover div {
  1795. display: -webkit-box;
  1796. display: -ms-flexbox;
  1797. display: flex;
  1798. -webkit-box-pack: center;
  1799. -ms-flex-pack: center;
  1800. justify-content: center;
  1801. -webkit-box-align: center;
  1802. -ms-flex-align: center;
  1803. align-items: center;
  1804. width: 100%;
  1805. height: 100%;
  1806. background: rgba(128, 142, 76, 0.8);
  1807. cursor: pointer;
  1808. }
  1809. .furniture-design .sub-tab-content .text-item:hover div h4 {
  1810. background-color: transparent;
  1811. }
  1812. .furniture-design .sub-tab-content .mattress-text-box {
  1813. width: 400px;
  1814. }
  1815. @media (max-width: 575px) {
  1816. .furniture-design .sub-tab-content .mattress-text-box {
  1817. width: auto;
  1818. }
  1819. }
  1820. .furniture-design .mattress-price p {
  1821. text-align: center;
  1822. margin-bottom: 5px;
  1823. }
  1824. .furniture-design .mattress-price .price-item {
  1825. font-size: 18px;
  1826. font-family: NSJP-500;
  1827. }
  1828. .furniture-design .nav-pills .nav-link.active {
  1829. color: var(--dark-color);
  1830. background-color: transparent;
  1831. border-bottom: 2px solid var(--second-color);
  1832. border-radius: 0;
  1833. }
  1834. @media (max-width: 991px) {
  1835. .furniture-design .nav-pills {
  1836. padding-top: 30px;
  1837. }
  1838. }
  1839. .furniture-design .design-banner {
  1840. background-image: url(../img/banner/bn_product@2x.png);
  1841. }
  1842. .furniture-design #systeam-furniture p {
  1843. white-space: nowrap;
  1844. }
  1845. @media (max-width: 575px) {
  1846. .furniture-design #systeam-furniture p {
  1847. white-space: normal;
  1848. }
  1849. }
  1850. .furniture-design #systeam-furniture .cabinet-03 {
  1851. height: 500px;
  1852. display: -webkit-box;
  1853. display: -ms-flexbox;
  1854. display: flex;
  1855. -webkit-box-orient: vertical;
  1856. -webkit-box-direction: normal;
  1857. -ms-flex-direction: column;
  1858. flex-direction: column;
  1859. -webkit-box-align: center;
  1860. -ms-flex-align: center;
  1861. align-items: center;
  1862. }
  1863. .furniture-design #systeam-furniture .cabinet-03 h5 {
  1864. margin: 20px;
  1865. }
  1866. .furniture-design #systeam-furniture .cabinet-03 img {
  1867. width: 150px;
  1868. height: 150px;
  1869. -o-object-fit: contain;
  1870. object-fit: contain;
  1871. }
  1872. @media (max-width: 991px) {
  1873. .furniture-design #systeam-furniture .cabinet-03 {
  1874. height: auto;
  1875. }
  1876. }
  1877. .b-bottom {
  1878. border-bottom: 1px solid var(--dark-gray);
  1879. }
  1880. .furniture-design .bg-text {
  1881. position: absolute;
  1882. left: 0;
  1883. width: 100%;
  1884. background-color: #80a251;
  1885. }
  1886. .furniture-design .bg-text p {
  1887. margin: 0;
  1888. padding: 70px 0;
  1889. font-size: 24px;
  1890. text-align: center;
  1891. line-height: 50px;
  1892. color: #fff;
  1893. font-family: NSJP-700;
  1894. letter-spacing: 2px;
  1895. }
  1896. /* 小寶設計單品-furniture_design end */
  1897. /* 設計家具 start */
  1898. .design-container {
  1899. padding-top: 50px;
  1900. }
  1901. /* @media (max-width: 991px) {
  1902. .design-container {
  1903. padding-top: 150px;
  1904. }
  1905. } */
  1906. .design-container p {
  1907. line-height: 32px;
  1908. }
  1909. .design-container h3,
  1910. .design-container h6 {
  1911. font-weight: bold;
  1912. color: var(--main-color);
  1913. font-family: NSJP-700;
  1914. }
  1915. .design-container h6 {
  1916. font-size: 20px;
  1917. }
  1918. .design-container div {
  1919. font-family: NSJP-400;
  1920. }
  1921. .design-container ul {
  1922. padding: 0;
  1923. list-style: none;
  1924. }
  1925. .design-container ul li {
  1926. line-height: 32px;
  1927. }
  1928. .design-container .slider-box {
  1929. width: 60%;
  1930. }
  1931. @media (max-width: 767px) {
  1932. .design-container .slider-box {
  1933. width: 100%;
  1934. }
  1935. }
  1936. .design-container .slider-design .design-img img {
  1937. width: 96.3%;
  1938. max-height: 400px;
  1939. -o-object-fit: cover;
  1940. object-fit: cover;
  1941. }
  1942. @media (max-width: 991px) {
  1943. .design-container .slider-design .design-img img {
  1944. margin: auto;
  1945. max-width: 98%;
  1946. }
  1947. }
  1948. @media (max-width: 767px) {
  1949. .design-container .slider-design .design-img img {
  1950. width: 530px;
  1951. max-width: 100%;
  1952. padding-right: 1%;
  1953. }
  1954. }
  1955. @media (max-width: 575px) {
  1956. .design-container .slider-design .design-img img {
  1957. padding-right: 0;
  1958. padding: 0 1.5% 0 1%;
  1959. }
  1960. }
  1961. .design-container .slider-nav img {
  1962. width: 90%;
  1963. height: 130px;
  1964. -o-object-fit: cover;
  1965. object-fit: cover;
  1966. cursor: pointer;
  1967. }
  1968. .design-container .slider-nav .slick-slide {
  1969. width: 33% !important;
  1970. }
  1971. .design-container .slider-nav .slick-list {
  1972. padding: 0 !important;
  1973. }
  1974. .design-container .slider-nav .middle-item {
  1975. margin: auto;
  1976. }
  1977. .furniture-design .design-border {
  1978. border-bottom: 2px solid var(--second-color);
  1979. border-radius: 0;
  1980. }
  1981. @media (max-width: 991px) {
  1982. .design-container .slider-nav img {
  1983. width: 95%;
  1984. height: auto;
  1985. margin: auto;
  1986. }
  1987. .design-container .slider-nav .middle-item {
  1988. margin: 0;
  1989. }
  1990. }
  1991. /* 設計家具 end */
  1992. .bhouse_line {
  1993. background: #000;
  1994. height: 1px;
  1995. opacity: 1 !important;
  1996. }
  1997. .bhouse_title {
  1998. font-size: 1.3rem;
  1999. letter-spacing: 2px;
  2000. text-align: justify;
  2001. color: #4c660b;
  2002. font-family: NSJP-700;
  2003. }
  2004. @media screen and (max-width: 767px) {
  2005. .bhouse_title {
  2006. font-size: 1rem;
  2007. }
  2008. }
  2009. .bhouse_subtitle {
  2010. color: #4c660b;
  2011. font-size: 1.2rem;
  2012. font-weight: 600;
  2013. letter-spacing: 3px;
  2014. }
  2015. .brand_sec02_content {
  2016. margin: 50px 0;
  2017. }
  2018. .brand_sec02_content p {
  2019. letter-spacing: 2px;
  2020. line-height: 28px;
  2021. font-family: NSJP-400;
  2022. }
  2023. .brand-banner {
  2024. background-image: url(/img/banner/bn_concept@2x.png);
  2025. }
  2026. .brand_content {
  2027. width: 50%;
  2028. margin: 0 auto;
  2029. }
  2030. @media screen and (max-width: 767px) {
  2031. .brand_content {
  2032. width: 95%;
  2033. }
  2034. }
  2035. .brand_sec01,
  2036. .brand_sec02 {
  2037. margin: 50px 0;
  2038. }
  2039. .likeSee__state {
  2040. display: -webkit-box;
  2041. display: -ms-flexbox;
  2042. display: flex;
  2043. -webkit-box-pack: justify;
  2044. -ms-flex-pack: justify;
  2045. justify-content: space-between;
  2046. -webkit-box-align: center;
  2047. -ms-flex-align: center;
  2048. align-items: center;
  2049. }
  2050. .likeSee__state img {
  2051. width: 40px;
  2052. }
  2053. @media screen and (max-width: 767px) {
  2054. .likeSee__state img {
  2055. width: 30px;
  2056. }
  2057. }
  2058. .mt-15 {
  2059. margin-top: 15px;
  2060. }
  2061. .mt-30 {
  2062. margin-top: 30px;
  2063. }
  2064. .my-80 {
  2065. margin: 80px 0;
  2066. }
  2067. .my-50 {
  2068. margin: 50px 0;
  2069. }
  2070. .mt-80 {
  2071. margin-top: 80px;
  2072. }
  2073. .mb-80 {
  2074. margin-bottom: 80px;
  2075. }
  2076. .article__readMore {
  2077. color: #656565;
  2078. font-size: 0.9rem;
  2079. font-family: NSJP-500;
  2080. cursor: pointer;
  2081. }
  2082. .store-banner {
  2083. background-image: url(/img/banner/bn_store@2x.png);
  2084. }
  2085. .sec01_store_map_img {
  2086. width: 40%;
  2087. margin: 0 auto;
  2088. }
  2089. @media screen and (max-width: 767px) {
  2090. .sec01_store_map_img {
  2091. width: 38%;
  2092. }
  2093. }
  2094. .store_cta_box_reserve {
  2095. width: 150px;
  2096. margin-top: 80px;
  2097. position: relative;
  2098. left: 50px;
  2099. }
  2100. @media screen and (max-width: 767px) {
  2101. .store_cta_box_reserve {
  2102. margin-top: 10px;
  2103. left: -10px;
  2104. width: 120px;
  2105. }
  2106. }
  2107. .store_cta_box_reserve .store_cta {
  2108. background: #808f4c;
  2109. width: 150px;
  2110. padding: 16px;
  2111. color: #fff;
  2112. border-radius: 15px;
  2113. text-align: center;
  2114. font-size: 18px;
  2115. letter-spacing: 2px;
  2116. font-family: NSJP-500;
  2117. }
  2118. @media screen and (max-width: 767px) {
  2119. .store_cta_box_reserve .store_cta {
  2120. width: 120px;
  2121. padding: 10px;
  2122. font-size: 12px;
  2123. }
  2124. }
  2125. .store_cta_box_reserve p {
  2126. text-align: center;
  2127. color: #68686b;
  2128. font-weight: bold;
  2129. letter-spacing: 2px;
  2130. font-size: 14px;
  2131. }
  2132. .store_cta_box_reserve p a {
  2133. font-family: NSJP-400;
  2134. }
  2135. @media screen and (max-width: 767px) {
  2136. .store_cta_box_reserve p {
  2137. font-size: 12px;
  2138. }
  2139. }
  2140. .store_cta_box_reserve a {
  2141. color: #2980b8;
  2142. }
  2143. @media screen and (max-width: 767px) {
  2144. .store_cta_box_reserve a {
  2145. font-size: 12px;
  2146. }
  2147. }
  2148. .store_cta_box_form {
  2149. margin-top: 70px;
  2150. position: relative;
  2151. left: 50px;
  2152. }
  2153. @media screen and (max-width: 767px) {
  2154. .store_cta_box_form {
  2155. margin-top: 10px;
  2156. left: 10px;
  2157. }
  2158. }
  2159. .store_cta_box_form .store_cta {
  2160. background-color: var(--dark-gray);
  2161. width: 160px;
  2162. padding: 15px 5px;
  2163. color: #fff;
  2164. border-radius: 15px;
  2165. text-align: center;
  2166. margin: 0 auto;
  2167. font-size: 18px;
  2168. letter-spacing: 2px;
  2169. font-family: NSJP-500;
  2170. }
  2171. @media screen and (max-width: 767px) {
  2172. .store_cta_box_form .store_cta {
  2173. width: 125px;
  2174. padding: 10px 5px;
  2175. font-size: 12px;
  2176. }
  2177. }
  2178. .store_cta_box_form p {
  2179. text-align: center;
  2180. color: #68686b;
  2181. font-weight: bold;
  2182. letter-spacing: 2px;
  2183. font-size: 14px;
  2184. }
  2185. .store_cta_box_form p a {
  2186. font-family: NSJP-400;
  2187. }
  2188. @media screen and (max-width: 767px) {
  2189. .store_cta_box_form p {
  2190. width: 130px;
  2191. font-size: 12px;
  2192. }
  2193. }
  2194. .store_cta_box_form a {
  2195. color: #2980b8;
  2196. }
  2197. @media screen and (max-width: 767px) {
  2198. .store_cta_box_form a {
  2199. font-size: 12px;
  2200. }
  2201. }
  2202. .store-link {
  2203. color: #2980b8 !important;
  2204. }
  2205. .store-link:hover {
  2206. opacity: 0.7;
  2207. }
  2208. #pills-tab a {
  2209. color: #68686b;
  2210. text-decoration: none;
  2211. font-size: 1.2rem;
  2212. font-family: NSJP-400;
  2213. }
  2214. #pills-tab .nav-item {
  2215. margin: 0 0.8rem;
  2216. width: auto;
  2217. }
  2218. #pills-tab .nav-item-link {
  2219. display: block;
  2220. padding: 0.5rem 1rem;
  2221. margin: 0 2rem;
  2222. text-decoration: none;
  2223. background-color: transparent;
  2224. font-size: 1.2rem;
  2225. color: #68686b;
  2226. -webkit-transition: all 0.3s;
  2227. transition: all 0.3s;
  2228. -webkit-appearance: none !important;
  2229. border-bottom: 2px solid #fff;
  2230. font-family: NSJP-500;
  2231. }
  2232. @media screen and (max-width: 1200px) {
  2233. #pills-tab .nav-item-link {
  2234. padding: 0.5rem 0.8rem;
  2235. }
  2236. }
  2237. @media screen and (max-width: 767px) {
  2238. #pills-tab .nav-item-link {
  2239. margin: 0 0rem;
  2240. }
  2241. }
  2242. @media screen and (max-width: 375px) {
  2243. #pills-tab .nav-item-link {
  2244. padding: 0rem 0.5rem;
  2245. }
  2246. }
  2247. #pills-tab .nav-item-link.active {
  2248. color: #68686b;
  2249. border-bottom: 2px solid #68686b;
  2250. }
  2251. /* .tab-content {
  2252. margin-bottom: 40vh;
  2253. }
  2254. @media screen and (max-width: 767px) {
  2255. .tab-content {
  2256. margin-bottom: 20vh;
  2257. }
  2258. } */
  2259. .store_title {
  2260. color: #4c660b;
  2261. font-size: 1.8rem;
  2262. font-family: NSJP-700;
  2263. }
  2264. @media screen and (max-width: 767px) {
  2265. .store_title {
  2266. margin-top: 15px;
  2267. }
  2268. }
  2269. .store_content {
  2270. font-weight: 600;
  2271. letter-spacing: 2px;
  2272. }
  2273. .store_content a {
  2274. color: #68686b;
  2275. font-weight: 600;
  2276. }
  2277. .store_content .reservation-link {
  2278. margin-top: 15px;
  2279. color: #4c660b;
  2280. font-weight: 600;
  2281. font-size: 17px;
  2282. }
  2283. .store_content .store_content_item {
  2284. margin-bottom: 10px;
  2285. }
  2286. .assign-link {
  2287. border-bottom: 2px solid var(--second-color);
  2288. }
  2289. /*# sourceMappingURL=style.bhouse.css.map */