style.css 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685
  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. * Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
  13. */
  14. @font-face {
  15. font-family: 'Noto Sans TC';
  16. font-style: normal;
  17. font-weight: 100;
  18. src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format("opentype");
  19. }
  20. @font-face {
  21. font-family: 'Noto Sans TC';
  22. font-style: normal;
  23. font-weight: 300;
  24. src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format("opentype");
  25. }
  26. @font-face {
  27. font-family: 'Noto Sans TC';
  28. font-style: normal;
  29. font-weight: 400;
  30. src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format("opentype");
  31. }
  32. @font-face {
  33. font-family: 'Noto Sans TC';
  34. font-style: normal;
  35. font-weight: 500;
  36. src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format("opentype");
  37. }
  38. @font-face {
  39. font-family: 'Noto Sans TC';
  40. font-style: normal;
  41. font-weight: 700;
  42. src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format("opentype");
  43. }
  44. @font-face {
  45. font-family: 'Noto Sans TC';
  46. font-style: normal;
  47. font-weight: 900;
  48. src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format("opentype");
  49. }
  50. @-webkit-keyframes fadeIn {
  51. 0% {
  52. opacity: 0;
  53. }
  54. 100% {
  55. opacity: 1;
  56. }
  57. }
  58. @keyframes fadeIn {
  59. 0% {
  60. opacity: 0;
  61. }
  62. 100% {
  63. opacity: 1;
  64. }
  65. }
  66. .fade {
  67. -webkit-animation: fadeIn 1.5s;
  68. animation: fadeIn 1.5s;
  69. -webkit-animation-fill-mode: forwards;
  70. animation-fill-mode: forwards;
  71. }
  72. body {
  73. overflow-x: hidden;
  74. }
  75. .bhousev2_sec_img_title {
  76. font-family: 'Noto Sans TC';
  77. font-style: normal;
  78. font-weight: 600;
  79. font-size: 40px;
  80. line-height: 150%;
  81. letter-spacing: 0.03em;
  82. text-align: center;
  83. }
  84. @media (max-width: 1000px) {
  85. .bhousev2_sec_img_title {
  86. font-size: 36px;
  87. }
  88. }
  89. @media (max-width: 767px) {
  90. .bhousev2_sec_img_title {
  91. letter-spacing: 0.2em;
  92. font-size: 20px;
  93. }
  94. }
  95. .bhousev2_sec_img_title2 {
  96. padding-bottom: 27px;
  97. font-family: 'Noto Sans TC';
  98. font-style: normal;
  99. font-weight: 700;
  100. font-size: 28px;
  101. line-height: 150%;
  102. text-align: center;
  103. color: #FFFFFF;
  104. }
  105. @media (max-width: 1000px) {
  106. .bhousev2_sec_img_title2 {
  107. font-size: 24px;
  108. }
  109. }
  110. @media (max-width: 767px) {
  111. .bhousev2_sec_img_title2 {
  112. font-size: 14px;
  113. letter-spacing: 0.4em;
  114. font-weight: 400;
  115. }
  116. }
  117. .bhousev2_sec_img_text {
  118. padding-top: 35px;
  119. font-family: 'Noto Sans TC';
  120. font-style: normal;
  121. font-weight: 400;
  122. font-size: 20px;
  123. line-height: 150%;
  124. text-align: center;
  125. letter-spacing: 0.4em;
  126. }
  127. @media (max-width: 767px) {
  128. .bhousev2_sec_img_text {
  129. font-size: 14px;
  130. }
  131. }
  132. .reserve {
  133. position: fixed;
  134. bottom: 3vw;
  135. right: 18px;
  136. z-index: 999;
  137. }
  138. .reserve img {
  139. width: 87px !important;
  140. }
  141. .bhousev2_title {
  142. color: #727171;
  143. font-family: 'Noto Sans TC';
  144. font-style: normal;
  145. font-size: 36px;
  146. font-weight: 400;
  147. }
  148. @media (max-width: 1000px) {
  149. .bhousev2_title {
  150. font-size: 24px;
  151. }
  152. }
  153. @media (max-width: 767px) {
  154. .bhousev2_title {
  155. text-align: center;
  156. margin-bottom: 33px;
  157. font-size: 20px;
  158. line-height: 150%;
  159. letter-spacing: 4px;
  160. font-weight: 500;
  161. }
  162. }
  163. .bhousev2_mobile_title {
  164. margin-bottom: 52px;
  165. }
  166. @media (min-width: 1025px) {
  167. .bhousev2_mobile_title {
  168. display: none;
  169. }
  170. }
  171. @media (max-width: 767px) {
  172. .sec05-destitle {
  173. display: none;
  174. }
  175. }
  176. .bhouse_slogan {
  177. font-family: 'Noto Sans TC';
  178. font-style: normal;
  179. font-weight: 500;
  180. font-size: 40px;
  181. line-height: 150%;
  182. /* identical to box height, or 60px */
  183. letter-spacing: 0.5em;
  184. text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  185. color: #fff;
  186. -webkit-transition: 0.5s;
  187. transition: 0.5s;
  188. cursor: pointer;
  189. }
  190. @media (max-width: 767px) {
  191. .bhouse_slogan {
  192. font-size: 14px;
  193. color: #ffff;
  194. }
  195. }
  196. .bg-3C7062 {
  197. background-color: #3C7062 !important;
  198. }
  199. .navbar {
  200. position: relative;
  201. z-index: 999;
  202. width: 100vw;
  203. height: 100px;
  204. -webkit-transition: 0.3s;
  205. transition: 0.3s;
  206. cursor: pointer;
  207. }
  208. @media (max-width: 991px) {
  209. .navbar {
  210. background: #3C7062;
  211. height: 60px;
  212. }
  213. }
  214. .navbar:hover {
  215. background: #3c7062;
  216. }
  217. .navbar-logo {
  218. padding-right: 50px;
  219. }
  220. .navbar-nav {
  221. width: 100%;
  222. -webkit-box-pack: space-evenly;
  223. -ms-flex-pack: space-evenly;
  224. justify-content: space-evenly;
  225. }
  226. @media (max-width: 767px) {
  227. .navbar-nav {
  228. -webkit-box-pack: start;
  229. -ms-flex-pack: start;
  230. justify-content: flex-start;
  231. }
  232. }
  233. .navbar .nav-item {
  234. padding: 13px 0;
  235. }
  236. @media (max-width: 767px) {
  237. .navbar .nav-item {
  238. padding: 13px 50px;
  239. }
  240. }
  241. .navbar .nav-item:hover .navbar-link {
  242. color: #fff;
  243. }
  244. .navbar .navbar-link {
  245. width: 100%;
  246. color: #fff;
  247. font-size: 14px;
  248. text-decoration: none;
  249. letter-spacing: 0.4em;
  250. font-family: 'Noto Sans TC';
  251. }
  252. .navbar .navbar-link:hover {
  253. color: #ffffff;
  254. }
  255. .navbar .navbar-brand {
  256. display: none;
  257. }
  258. @media (max-width: 991px) {
  259. .navbar .navbar-brand {
  260. margin: 0;
  261. }
  262. }
  263. .navbar .mx-auto {
  264. padding: 0;
  265. }
  266. .navbar .navbar-brand img {
  267. margin-left: 10%;
  268. -o-object-fit: contain;
  269. object-fit: contain;
  270. }
  271. @media (max-width: 767px) {
  272. .navbar .navbar-brand img {
  273. width: 100px;
  274. }
  275. }
  276. @media (max-width: 767px) {
  277. .nav-mobile {
  278. position: absolute;
  279. top: 0;
  280. -webkit-transition: background-color 0.5s;
  281. transition: background-color 0.5s;
  282. z-index: 1000;
  283. }
  284. }
  285. .navbar .close-btn {
  286. display: inline-block;
  287. position: relative;
  288. top: -5px;
  289. width: 23px;
  290. height: 2px;
  291. background: #ffffff;
  292. -webkit-transform: rotate(45deg);
  293. transform: rotate(45deg);
  294. }
  295. .navbar .close-btn::after {
  296. content: "";
  297. display: block;
  298. width: 23px;
  299. height: 2px;
  300. background: #ffffff;
  301. -webkit-transform: rotate(-90deg);
  302. transform: rotate(-90deg);
  303. }
  304. @media (max-width: 991px) {
  305. .navbar {
  306. padding: 0;
  307. top: 0;
  308. /* 收合時覆蓋內容 */
  309. width: 100%;
  310. position: fixed;
  311. z-index: 999;
  312. }
  313. .navbar .navbar-link {
  314. display: block;
  315. padding: 20px 10px;
  316. color: #ffffff;
  317. border-bottom: 1px solid var(--dark-gray);
  318. }
  319. .navbar .navbar-link:hover {
  320. color: rgba(255, 255, 255, 0.6);
  321. }
  322. }
  323. @media (max-width: 991px) and (max-width: 767px) {
  324. .navbar .navbar-logo {
  325. display: none;
  326. }
  327. }
  328. @media (max-width: 991px) {
  329. .navbar .navbar-nav {
  330. height: 100vh;
  331. white-space: nowrap;
  332. width: 100%;
  333. }
  334. .navbar .navbar-nav li:last-child a {
  335. border: none;
  336. }
  337. .navbar .navbar-toggler {
  338. width: 30px;
  339. margin-right: 30px;
  340. margin-top: 0px;
  341. border: none;
  342. }
  343. .navbar .navbar-toggler:focus,
  344. .navbar .navbar-toggler:active {
  345. outline: none !important;
  346. -webkit-box-shadow: none;
  347. box-shadow: none;
  348. }
  349. .navbar .navbar-brand {
  350. display: block;
  351. }
  352. }
  353. .news-link {
  354. display: -webkit-box;
  355. display: -ms-flexbox;
  356. display: flex;
  357. padding: 10px 0;
  358. background-color: #da831c;
  359. font-weight: bold;
  360. }
  361. .news-link a {
  362. margin: auto;
  363. color: #fff;
  364. font-size: 14px;
  365. text-align: center;
  366. letter-spacing: 2px;
  367. }
  368. .news-link a:hover {
  369. opacity: 0.8;
  370. }
  371. @media (max-width: 991px) {
  372. .news-link {
  373. margin-top: 70px;
  374. }
  375. }
  376. @media (max-width: 767px) {
  377. .news-link {
  378. margin-top: 70px;
  379. }
  380. }
  381. .navbar > .container-fluid {
  382. display: -webkit-box !important;
  383. display: -ms-flexbox !important;
  384. display: flex !important;
  385. }
  386. /* header end */
  387. /* slick start */
  388. .slick-dots {
  389. bottom: 10px;
  390. }
  391. .slick-dots li button:before {
  392. opacity: 0.8;
  393. content: "●";
  394. color: #D9D9D933;
  395. font-size: 18px;
  396. }
  397. .slick-dots li.slick-active button:before {
  398. opacity: 1;
  399. color: #D9D9D9;
  400. }
  401. .slider-item {
  402. position: relative;
  403. }
  404. .slider-item img {
  405. width: 100%;
  406. height: 845px;
  407. -o-object-fit: cover;
  408. object-fit: cover;
  409. }
  410. @media (max-width: 991px) {
  411. .slider-item img {
  412. height: 500px;
  413. }
  414. }
  415. @media (max-width: 576px) {
  416. .slider-item img {
  417. height: 335px;
  418. }
  419. }
  420. .slider-item div {
  421. padding: 20px 18vw;
  422. position: absolute;
  423. left: 0;
  424. right: 0;
  425. bottom: 0px;
  426. background-color: rgba(128, 143, 76, 0.8);
  427. text-align: end;
  428. display: -webkit-box;
  429. display: -ms-flexbox;
  430. display: flex;
  431. -webkit-box-orient: vertical;
  432. -webkit-box-direction: normal;
  433. -ms-flex-direction: column;
  434. flex-direction: column;
  435. -webkit-box-pack: center;
  436. -ms-flex-pack: center;
  437. justify-content: center;
  438. }
  439. @media (max-width: 768px) {
  440. .slider-item div {
  441. padding: 20px 10vw;
  442. }
  443. }
  444. .slider-item p {
  445. margin: 0;
  446. color: #ffffff;
  447. font-size: 18px;
  448. font-weight: 500;
  449. letter-spacing: 2px;
  450. }
  451. @media (max-width: 767px) {
  452. .slider-item p {
  453. display: -webkit-box;
  454. display: -ms-flexbox;
  455. display: flex;
  456. -webkit-box-pack: end;
  457. -ms-flex-pack: end;
  458. justify-content: end;
  459. text-align: left;
  460. }
  461. }
  462. @media (max-width: 575px) {
  463. .slider-item p {
  464. font-size: 14px;
  465. }
  466. }
  467. @media (max-width: 576px) {
  468. .slider-item p:first-child {
  469. margin-left: 24px;
  470. }
  471. }
  472. @media (max-width: 400px) {
  473. .slider-item p:first-child {
  474. margin-left: auto;
  475. }
  476. }
  477. .slider-item p:last-child {
  478. font-size: 18px;
  479. text-align: right;
  480. }
  481. @media (max-width: 575px) {
  482. .slider-item p:last-child {
  483. font-size: 14px;
  484. }
  485. }
  486. @media (max-width: 767px) {
  487. .slider-item div {
  488. padding: 20px 5vw;
  489. }
  490. }
  491. @media (max-width: 575px) {
  492. .slider-item div {
  493. padding: 20px 19px;
  494. height: 105px;
  495. }
  496. }
  497. /* slick end */
  498. /* footer start */
  499. .banner1, .banner2, .banner3, .banner4 {
  500. height: 100vh;
  501. background-size: cover;
  502. background-repeat: no-repeat;
  503. background-position: center;
  504. padding-right: 0 !important;
  505. }
  506. @media (max-width: 767px) {
  507. .banner1, .banner2, .banner3, .banner4 {
  508. height: 213px;
  509. margin-top: 0px;
  510. background-size: cover;
  511. }
  512. }
  513. .bhousev2_banner_slide {
  514. top: -100px;
  515. z-index: 998;
  516. }
  517. @media (max-width: 767px) {
  518. .bhousev2_banner_slide {
  519. top: 60px;
  520. }
  521. }
  522. .hover-nav-box {
  523. width: 100vw;
  524. background: transparent;
  525. height: 100px;
  526. position: relative;
  527. z-index: 99;
  528. }
  529. .bhousev2_sec01 {
  530. width: 80%;
  531. margin: 50px auto;
  532. padding-bottom: 100px;
  533. }
  534. @media (max-width: 767px) {
  535. .bhousev2_sec01 {
  536. margin: 100px auto;
  537. width: 90%;
  538. padding-bottom: 43px;
  539. }
  540. }
  541. .bhousev2_sec01 .bhousev2_sec01_hr {
  542. height: 1px;
  543. background: #727171;
  544. width: 180px;
  545. margin: 30px 0px;
  546. }
  547. @media (max-width: 1000px) {
  548. .bhousev2_sec01 .bhousev2_sec01_hr {
  549. display: none;
  550. }
  551. }
  552. @media (max-width: 767px) {
  553. .bhousev2_sec01 .bhousev2_sec01_hr {
  554. display: none;
  555. }
  556. }
  557. .bhousev2_sec01 .bhousev2_sec01_text {
  558. max-width: 461px;
  559. color: #727171;
  560. font-size: 14px;
  561. text-align: justify;
  562. letter-spacing: 0.4em;
  563. font-style: normal;
  564. }
  565. @media (max-width: 1000px) {
  566. .bhousev2_sec01 .bhousev2_sec01_text {
  567. width: 90%;
  568. margin: 0 auto;
  569. }
  570. }
  571. @media (max-width: 767px) {
  572. .bhousev2_sec01 .bhousev2_sec01_text {
  573. width: 100%;
  574. padding-top: 26px;
  575. }
  576. }
  577. .bhousev2_sec01 .bhousev2_sec01_title {
  578. font-family: 'Noto Sans TC';
  579. font-style: normal;
  580. font-weight: 400;
  581. font-size: 36px;
  582. color: #727171;
  583. }
  584. @media (max-width: 1000px) {
  585. .bhousev2_sec01 .bhousev2_sec01_title {
  586. padding-top: 54px;
  587. margin-bottom: 33px;
  588. text-align: center;
  589. font-size: 20px;
  590. font-weight: 500;
  591. }
  592. }
  593. @media (max-width: 767px) {
  594. .bhousev2_sec01 .bhousev2_sec01_title {
  595. width: 100%;
  596. padding-top: 54px;
  597. margin-bottom: 33px;
  598. text-align: center;
  599. }
  600. }
  601. .video-wrapper {
  602. width: 50%;
  603. }
  604. .bhousev2_sec02 {
  605. padding-top: 68px;
  606. padding-bottom: 92px;
  607. width: 80%;
  608. margin: 0 auto;
  609. }
  610. @media (max-width: 767px) {
  611. .bhousev2_sec02 {
  612. width: 100%;
  613. padding-top: 44px;
  614. }
  615. }
  616. .bhousev2_sec02 .bhousev2_sec02_title {
  617. padding: 30px 0px;
  618. color: #727171;
  619. font-family: 'Noto Sans TC';
  620. font-style: normal;
  621. }
  622. .bhousev2_sec02 .bhousev2_sec02_collection {
  623. padding: 15px 0;
  624. cursor: pointer;
  625. background: #D9D9D9;
  626. border: none;
  627. }
  628. .bhousev2_sec02 .bhousev2_sec02_collection .bhousev2_sec02_collection_img {
  629. width: 100%;
  630. height: 382px;
  631. -o-object-fit: cover;
  632. object-fit: cover;
  633. }
  634. @media (max-width: 767px) {
  635. .bhousev2_sec02 .bhousev2_sec02_collection .bhousev2_sec02_collection_img {
  636. width: 100%;
  637. height: auto;
  638. }
  639. }
  640. .bhousev2_sec02 .bhousev2_sec02_collection .bhousev2_sec02_collection_text {
  641. margin-bottom: 30px;
  642. opacity: 0;
  643. -webkit-transition: 0.5s;
  644. transition: 0.5s;
  645. }
  646. @media (max-width: 1000px) {
  647. .bhousev2_sec02 .bhousev2_sec02_collection .bhousev2_sec02_collection_text {
  648. margin-bottom: 16px;
  649. opacity: 1;
  650. }
  651. }
  652. @media (max-width: 767px) {
  653. .bhousev2_sec02 .bhousev2_sec02_collection .bhousev2_sec02_collection_text {
  654. margin-bottom: 16px;
  655. opacity: 1;
  656. }
  657. }
  658. .bhousev2_sec02 .bhousev2_sec02_collection .bhousev2_sec02_collection_text h2 {
  659. font-family: 'Noto Sans TC';
  660. font-style: normal;
  661. font-weight: 600;
  662. font-size: 28px;
  663. margin-bottom: 1rem;
  664. }
  665. @media (max-width: 767px) {
  666. .bhousev2_sec02 .bhousev2_sec02_collection .bhousev2_sec02_collection_text h2 {
  667. font-size: 20px;
  668. }
  669. }
  670. .bhousev2_sec02 .bhousev2_sec02_collection .bhousev2_sec02_collection_text p {
  671. font-family: 'Noto Sans TC';
  672. font-style: normal;
  673. font-weight: 300;
  674. font-size: 16px;
  675. margin-bottom: 0px;
  676. line-height: 150%;
  677. letter-spacing: 0.4em;
  678. }
  679. @media (max-width: 767px) {
  680. .bhousev2_sec02 .bhousev2_sec02_collection .bhousev2_sec02_collection_text p {
  681. font-size: 14px;
  682. letter-spacing: 1px;
  683. }
  684. }
  685. .bhousev2_sec02 .bhousev2_sec02_collection:hover img {
  686. -webkit-filter: brightness(80%);
  687. filter: brightness(80%);
  688. }
  689. .bhousev2_sec02 .bhousev2_sec02_collection:hover .bhousev2_sec02_collection_text {
  690. opacity: 1;
  691. }
  692. .bhousev2_sec02 .bhousev2_sec02_collection img {
  693. -webkit-filter: brightness(100%);
  694. filter: brightness(100%);
  695. }
  696. @media (max-width: 767px) {
  697. .bhousev2_sec02 .bhousev2_sec02_collection img {
  698. -webkit-filter: brightness(80%);
  699. filter: brightness(80%);
  700. }
  701. }
  702. .bhousev2_sec02 .bhousev2_sec02_collection .card-img-overlay {
  703. bottom: -10px;
  704. position: absolute;
  705. }
  706. .bhousev2_sec02_box {
  707. padding: 30px;
  708. }
  709. @media (max-width: 767px) {
  710. .bhousev2_sec02_box {
  711. padding: 0px 5px;
  712. }
  713. }
  714. .bhousev2_sec02_fluid {
  715. background: #D9D9D9;
  716. }
  717. .sec02_load_more {
  718. color: #727171;
  719. font-family: 'Noto Sans TC';
  720. font-style: normal;
  721. font-size: 20px;
  722. border: 1px solid #727171;
  723. background: none;
  724. padding: 10px 30px;
  725. -webkit-transition: 0.3s;
  726. transition: 0.3s;
  727. }
  728. @media (max-width: 767px) {
  729. .sec02_load_more {
  730. margin-top: 49px;
  731. }
  732. }
  733. .sec02_load_more a {
  734. text-decoration: none;
  735. color: #727171;
  736. }
  737. .sec02_load_more:hover {
  738. background: #3c7062;
  739. color: #fff;
  740. }
  741. .sec02_load_more:hover a {
  742. color: #ffff;
  743. }
  744. .bhousev2_sec03 {
  745. width: 50%;
  746. margin: 0 auto;
  747. padding: 100px 0px;
  748. }
  749. @media (max-width: 1000px) {
  750. .bhousev2_sec03 {
  751. width: 90%;
  752. }
  753. }
  754. @media (max-width: 767px) {
  755. .bhousev2_sec03 {
  756. width: 90%;
  757. }
  758. }
  759. .bhousev2_sec03 h2 {
  760. text-align: center;
  761. color: #3C7062;
  762. font-family: 'Noto Sans TC';
  763. font-style: normal;
  764. font-weight: 600;
  765. font-size: 28px;
  766. }
  767. @media (max-width: 767px) {
  768. .bhousev2_sec03 h2 {
  769. font-size: 16px;
  770. }
  771. }
  772. .bhousev2_sec03 .bhousev2_sec03_btn {
  773. margin-top: 64.5px;
  774. background: #3C7062;
  775. width: 398px;
  776. border-radius: 52.3684px;
  777. padding: 10px 30px;
  778. margin: 64px auto;
  779. text-align: center;
  780. }
  781. @media (max-width: 767px) {
  782. .bhousev2_sec03 .bhousev2_sec03_btn {
  783. width: 270px;
  784. margin: 33px auto;
  785. }
  786. }
  787. .bhousev2_sec03 .bhousev2_sec03_btn p {
  788. color: #fff;
  789. margin-bottom: 0px;
  790. font-weight: 700;
  791. font-family: 'Noto Sans TC';
  792. font-style: normal;
  793. }
  794. @media (max-width: 767px) {
  795. .bhousev2_sec03 .bhousev2_sec03_btn p {
  796. font-size: 12px;
  797. }
  798. }
  799. .bhousev2_sec03 .bhousev2_sec03_btn .bhousev2_sec03_number {
  800. font-size: 36.97px;
  801. padding: 1rem;
  802. }
  803. @media (max-width: 767px) {
  804. .bhousev2_sec03 .bhousev2_sec03_btn .bhousev2_sec03_number {
  805. font-size: 20px;
  806. padding: 0.5rem;
  807. }
  808. }
  809. .bhousev2_sec03 .bhousev2_sec03_text h2 {
  810. color: #3C7062;
  811. font-family: 'Noto Sans TC';
  812. font-style: normal;
  813. font-weight: 700;
  814. text-align: center;
  815. font-size: 32px;
  816. margin-bottom: 0;
  817. }
  818. @media (max-width: 767px) {
  819. .bhousev2_sec03 .bhousev2_sec03_text h2 {
  820. margin-top: 50px;
  821. font-size: 14px;
  822. letter-spacing: 4.2px;
  823. width: 50%;
  824. margin: 0 auto;
  825. }
  826. }
  827. .bhousev2_sec03 .bhousev2_sec03_text p {
  828. font-size: 14px;
  829. font-weight: 400;
  830. color: #3C7062;
  831. font-family: 'Noto Sans TC';
  832. font-style: normal;
  833. letter-spacing: 0.4em;
  834. text-align: center;
  835. margin-top: 30px;
  836. }
  837. @media (max-width: 767px) {
  838. .bhousev2_sec03 .bhousev2_sec03_text p {
  839. letter-spacing: 4.2px;
  840. width: 50%;
  841. margin: 30px auto;
  842. }
  843. }
  844. .bhousev2_sec03 .bhousev2_sec03_text .bhousev2_sec03_scroll {
  845. color: #3C7062;
  846. font-size: 28px;
  847. }
  848. @media (max-width: 767px) {
  849. .bhousev2_sec03 .bhousev2_sec03_text .bhousev2_sec03_scroll {
  850. font-size: 16px;
  851. }
  852. }
  853. @media (max-width: 767px) {
  854. .bhousev2_sec04 .bhousev2_sec04_slide_text {
  855. width: 55%;
  856. margin: 0 auto;
  857. }
  858. }
  859. .bhousev2_sec04 .bhousev2_sec04_img {
  860. width: 100%;
  861. -o-object-fit: cover;
  862. object-fit: cover;
  863. height: 548px;
  864. -webkit-filter: brightness(0.8);
  865. filter: brightness(0.8);
  866. }
  867. @media (max-width: 767px) {
  868. .bhousev2_sec04 .bhousev2_sec04_img {
  869. height: 305px;
  870. }
  871. }
  872. .bhousev2_sec04 .slick-prev:before {
  873. content: none;
  874. }
  875. .bhousev2_sec04 .slick-prev {
  876. left: 50px;
  877. z-index: 99;
  878. }
  879. @media (max-width: 767px) {
  880. .bhousev2_sec04 .slick-prev {
  881. left: 20px;
  882. }
  883. }
  884. .bhousev2_sec04 .slick-dots {
  885. bottom: 10px;
  886. }
  887. @media (max-width: 767px) {
  888. .bhousev2_sec04 .slick-dots {
  889. display: none;
  890. }
  891. }
  892. .bhousev2_sec04 .slick-next:before {
  893. content: none;
  894. }
  895. .bhousev2_sec04 .slick-next {
  896. right: 50px;
  897. z-index: 99;
  898. }
  899. @media (max-width: 767px) {
  900. .bhousev2_sec04 .slick-next {
  901. right: 20px;
  902. }
  903. }
  904. .bhousev2_sec06_img, .bhousev2_sec010_img {
  905. -webkit-filter: brightness(60%);
  906. filter: brightness(60%);
  907. -o-object-fit: cover;
  908. object-fit: cover;
  909. }
  910. @media (max-width: 767px) {
  911. .bhousev2_sec010_img {
  912. height: 241px;
  913. }
  914. }
  915. @media (max-width: 767px) {
  916. .bhousev2_sec06_img {
  917. height: 414px;
  918. }
  919. }
  920. @media (max-width: 767px) {
  921. .bhousev2_sec06_content {
  922. width: 61%;
  923. margin: 0 auto;
  924. }
  925. }
  926. .bhousev2_img_h584 {
  927. width: 100%;
  928. -o-object-fit: cover;
  929. object-fit: cover;
  930. height: 548px;
  931. -webkit-filter: brightness(0.8);
  932. filter: brightness(0.8);
  933. }
  934. .bhousev2_sec05 {
  935. width: 80%;
  936. margin: 0 auto;
  937. padding-top: 64px;
  938. padding-bottom: 136px;
  939. }
  940. @media (max-width: 767px) {
  941. .bhousev2_sec05 {
  942. width: 100%;
  943. }
  944. }
  945. .bhousev2_sec05 h2 {
  946. color: #727171;
  947. font-size: 28px;
  948. font-family: 'Noto Sans TC';
  949. font-style: normal;
  950. }
  951. @media (max-width: 767px) {
  952. .bhousev2_sec05 h2 {
  953. margin-bottom: 44px;
  954. }
  955. }
  956. .bhousev2_sec05 .bhousev2_sec05_loc_list {
  957. padding-top: 64px;
  958. }
  959. .bhousev2_sec05 .bhousev2_sec05_loc {
  960. margin-left: 30px;
  961. }
  962. .bhousev2_sec05 .bhousev2_sec05_loc ul {
  963. padding-left: 0px;
  964. padding-top: 30px;
  965. }
  966. @media (max-width: 767px) {
  967. .bhousev2_sec05 .bhousev2_sec05_loc ul {
  968. padding-left: 20px;
  969. }
  970. }
  971. .bhousev2_sec05 .bhousev2_sec05_loc ul li {
  972. font-size: 20px;
  973. color: #727171;
  974. font-family: 'Noto Sans TC';
  975. font-style: normal;
  976. font-weight: 600;
  977. letter-spacing: 0.4em;
  978. }
  979. .bhousev2_sec05 .bhousev2_sec05_loc p {
  980. color: #3C7062;
  981. font-family: 'Noto Sans TC';
  982. font-style: normal;
  983. font-weight: 400;
  984. font-size: 16px;
  985. letter-spacing: 0.4em;
  986. }
  987. .bhousev2_sec05 .bhousev2_sec05_load_more {
  988. margin-top: 58px;
  989. }
  990. @media (max-width: 767px) {
  991. .bhousev2_sec05 .bhousev2_sec05_load_more {
  992. text-align: center;
  993. }
  994. }
  995. .bhousev2_sec07 {
  996. padding-top: 92px;
  997. width: 80%;
  998. margin: 0 auto;
  999. padding-bottom: 86px;
  1000. }
  1001. @media (max-width: 767px) {
  1002. .bhousev2_sec07 {
  1003. width: 90%;
  1004. }
  1005. }
  1006. .bhousev2_sec07 .bhousev2_sec07_slide_mobile {
  1007. padding-top: 28px;
  1008. }
  1009. @media (min-width: 1025px) {
  1010. .bhousev2_sec07 .bhousev2_sec07_slide_mobile {
  1011. display: none;
  1012. }
  1013. }
  1014. @media (min-width: 767px) {
  1015. .bhousev2_sec07 .bhousev2_sec07_slide_mobile {
  1016. display: none;
  1017. }
  1018. }
  1019. .bhousev2_sec07 .slick-next:before {
  1020. content: none;
  1021. }
  1022. .bhousev2_sec07 .slick-prev:before {
  1023. content: none;
  1024. }
  1025. .bhousev2_sec07 .slick-prev {
  1026. width: 15px;
  1027. left: -50px;
  1028. z-index: 99;
  1029. top: 60%;
  1030. }
  1031. @media (max-width: 767px) {
  1032. .bhousev2_sec07 .slick-prev {
  1033. left: -10px;
  1034. }
  1035. }
  1036. .bhousev2_sec07 .slick-next {
  1037. width: 15px;
  1038. right: -50px;
  1039. z-index: 99;
  1040. top: 60%;
  1041. }
  1042. @media (max-width: 767px) {
  1043. .bhousev2_sec07 .slick-next {
  1044. right: -10px;
  1045. }
  1046. }
  1047. .bhousev2_sec07 .bhousev2_sec07_slide {
  1048. padding-top: 92px;
  1049. }
  1050. @media (max-width: 767px) {
  1051. .bhousev2_sec07 .bhousev2_sec07_slide {
  1052. display: none;
  1053. }
  1054. }
  1055. .bhousev2_sec07 .bhousev2_sec07_slide .bhousev2_sec07_slide_item {
  1056. padding: 0px 20px;
  1057. }
  1058. .bhousev2_sec07 .bhousev2_sec07_slide .bhousev2_sec07_slide_item_name {
  1059. padding: 16px 0px;
  1060. background: #3C7062;
  1061. color: #fff;
  1062. font-family: 'Noto Sans TC';
  1063. font-style: normal;
  1064. font-weight: 700;
  1065. font-size: 20px;
  1066. letter-spacing: 0.4em;
  1067. text-align: center;
  1068. margin-bottom: 36px;
  1069. }
  1070. .bhousev2_sec07 .bhousev2_sec07_slide .bhousev2_sec07_slide_item_name h3 {
  1071. margin-bottom: 0px;
  1072. }
  1073. .bhousev2_sec07 .bhousev2_sec07_slide .bhousev2_sec07_slide_item_text {
  1074. margin-top: 42px;
  1075. }
  1076. .bhousev2_sec07 .bhousev2_sec07_slide .bhousev2_sec07_slide_item_text p {
  1077. font-family: 'Noto Sans TC';
  1078. font-style: normal;
  1079. font-weight: 300;
  1080. font-size: 16px;
  1081. letter-spacing: 0.4em;
  1082. line-height: 150%;
  1083. }
  1084. .bhousev2_sec08_fluid {
  1085. background: rgba(217, 217, 217, 0.3);
  1086. }
  1087. .bhousev2_sec08_fluid .bhousev2_sec08 {
  1088. padding-top: 154px;
  1089. width: 60%;
  1090. margin: 0 auto;
  1091. padding-bottom: 170px;
  1092. }
  1093. @media (max-width: 1000px) {
  1094. .bhousev2_sec08_fluid .bhousev2_sec08 {
  1095. width: 100%;
  1096. padding-top: 58px;
  1097. padding-bottom: 74px;
  1098. }
  1099. }
  1100. @media (max-width: 767px) {
  1101. .bhousev2_sec08_fluid .bhousev2_sec08 {
  1102. width: 84%;
  1103. padding-top: 50px;
  1104. padding-bottom: 50px;
  1105. }
  1106. }
  1107. @media (max-width: 767px) {
  1108. .bhousev2_sec08_fluid .bhousev2_sec08 .pl-m-64 {
  1109. padding-left: 64px;
  1110. }
  1111. }
  1112. @media (max-width: 767px) {
  1113. .bhousev2_sec08_fluid .bhousev2_sec08 .pe-m-64 {
  1114. padding-right: 64px;
  1115. }
  1116. }
  1117. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon {
  1118. padding-top: 103px;
  1119. }
  1120. @media (max-width: 767px) {
  1121. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon {
  1122. padding-top: 25px;
  1123. }
  1124. }
  1125. @media (max-width: 767px) {
  1126. .bhousev2_sec08_fluid .bhousev2_sec08 .room-planner-process-icon {
  1127. height: 35px;
  1128. }
  1129. }
  1130. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon1 {
  1131. width: 80px;
  1132. -o-object-fit: cover;
  1133. object-fit: cover;
  1134. }
  1135. @media (max-width: 767px) {
  1136. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon1 {
  1137. width: 60px;
  1138. height: auto;
  1139. }
  1140. }
  1141. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon2 {
  1142. width: 80px;
  1143. -o-object-fit: cover;
  1144. object-fit: cover;
  1145. }
  1146. @media (max-width: 767px) {
  1147. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon2 {
  1148. width: 60px;
  1149. height: auto;
  1150. }
  1151. }
  1152. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon3 {
  1153. width: 80px;
  1154. -o-object-fit: cover;
  1155. object-fit: cover;
  1156. }
  1157. @media (max-width: 767px) {
  1158. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon3 {
  1159. width: 60px;
  1160. height: auto;
  1161. }
  1162. }
  1163. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon4 {
  1164. width: 80px;
  1165. -o-object-fit: cover;
  1166. object-fit: cover;
  1167. }
  1168. @media (max-width: 767px) {
  1169. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon4 {
  1170. width: 60px;
  1171. height: auto;
  1172. }
  1173. }
  1174. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon5 {
  1175. width: 80px;
  1176. -o-object-fit: cover;
  1177. object-fit: cover;
  1178. }
  1179. @media (max-width: 767px) {
  1180. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon5 {
  1181. width: 60px;
  1182. height: auto;
  1183. }
  1184. }
  1185. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_title_mobile {
  1186. width: 100%;
  1187. }
  1188. @media (max-width: 767px) {
  1189. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_title_mobile {
  1190. width: 60%;
  1191. margin: 0 auto;
  1192. }
  1193. }
  1194. @media (max-width: 400px) {
  1195. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_title_mobile {
  1196. width: 70%;
  1197. margin: 0 auto;
  1198. }
  1199. }
  1200. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon-text {
  1201. margin-top: 15px;
  1202. color: #727171;
  1203. font-family: 'Noto Sans TC';
  1204. font-style: normal;
  1205. font-weight: 400;
  1206. font-size: 20px;
  1207. text-align: center;
  1208. letter-spacing: 0.4em;
  1209. }
  1210. @media (max-width: 767px) {
  1211. .bhousev2_sec08_fluid .bhousev2_sec08 .bhousev2_sec08_icon-text {
  1212. font-size: 10px;
  1213. margin-top: 20px;
  1214. }
  1215. }
  1216. .bhousev2_sec09 {
  1217. padding-top: 86px;
  1218. width: 90%;
  1219. margin: 0 auto;
  1220. padding-bottom: 230px;
  1221. }
  1222. @media (max-width: 767px) {
  1223. .bhousev2_sec09 {
  1224. padding-top: 70px;
  1225. padding-bottom: 70px;
  1226. }
  1227. }
  1228. .bhousev2_sec09 .tainan-store {
  1229. padding-top: 120px;
  1230. }
  1231. @media (max-width: 767px) {
  1232. .bhousev2_sec09 .tainan-store {
  1233. padding-top: 31px;
  1234. }
  1235. }
  1236. @media (max-width: 767px) {
  1237. .bhousev2_sec09 .destop_title {
  1238. display: none;
  1239. }
  1240. }
  1241. @media (min-width: 1025px) {
  1242. .bhousev2_sec09 .mobile_title {
  1243. display: none;
  1244. }
  1245. }
  1246. @media (max-width: 767px) {
  1247. .destop_title {
  1248. display: none;
  1249. }
  1250. }
  1251. @media (min-width: 1025px) {
  1252. .mobile_title {
  1253. display: none;
  1254. }
  1255. }
  1256. @media (min-width: 767px) {
  1257. .mobile_title {
  1258. display: none;
  1259. }
  1260. }
  1261. .bhousev2_sec10 {
  1262. margin-bottom: 117px;
  1263. }
  1264. @media (max-width: 767px) {
  1265. .bhousev2_sec10 {
  1266. margin-bottom: 10px;
  1267. }
  1268. }
  1269. .bhousev2_sec10 .cta_line {
  1270. background: none;
  1271. border: 1px solid #fff;
  1272. padding: 15px;
  1273. text-align: center;
  1274. width: 206px;
  1275. margin: 50px auto;
  1276. }
  1277. @media (max-width: 767px) {
  1278. .bhousev2_sec10 .cta_line {
  1279. margin: 30px auto;
  1280. }
  1281. }
  1282. .bhousev2_sec10 .cta_line a {
  1283. letter-spacing: 0.4em;
  1284. font-family: 'Noto Sans TC';
  1285. font-style: normal;
  1286. font-weight: 600;
  1287. font-size: 20px;
  1288. text-decoration: none;
  1289. color: #ffff;
  1290. }
  1291. .footer {
  1292. padding: 0 87px;
  1293. font-size: 15px;
  1294. background: #3C7062;
  1295. }
  1296. .footer img {
  1297. display: none;
  1298. margin: 50px;
  1299. }
  1300. .footer ul {
  1301. padding: 0;
  1302. list-style: none;
  1303. font-weight: bold;
  1304. margin-bottom: 30px;
  1305. }
  1306. .footer .list {
  1307. display: -webkit-box;
  1308. display: -ms-flexbox;
  1309. display: flex;
  1310. padding-left: 32px;
  1311. }
  1312. .footer .list li {
  1313. padding-top: 18px;
  1314. }
  1315. .footer .title {
  1316. padding-top: 85px;
  1317. color: #fff;
  1318. font-family: 'Noto Sans TC';
  1319. font-style: normal;
  1320. font-weight: 500;
  1321. font-size: 20px;
  1322. line-height: 150%;
  1323. /* identical to box height, or 30px */
  1324. letter-spacing: 0.4em;
  1325. }
  1326. .footer .list li a,
  1327. .footer .copyright,
  1328. .footer .copyright a {
  1329. color: #ffff;
  1330. font-family: 'Noto Sans TC';
  1331. font-style: normal;
  1332. font-weight: 300;
  1333. font-size: 16px;
  1334. line-height: 150%;
  1335. /* identical to box height, or 24px */
  1336. letter-spacing: 0.4em;
  1337. text-decoration: none;
  1338. }
  1339. .footer .mobile-list nav {
  1340. padding: 30px 30px;
  1341. }
  1342. .footer .mobile-list nav .breadcrumb-item a {
  1343. display: -webkit-box;
  1344. display: -ms-flexbox;
  1345. display: flex;
  1346. font-weight: 700;
  1347. color: var(--main-color);
  1348. }
  1349. .footer .mobile-list nav #breadcrumb_minor {
  1350. color: #68686b;
  1351. font-weight: 700 !important;
  1352. }
  1353. .footer .mobile-list .mobile-tab-list {
  1354. font-size: 18px;
  1355. margin: 30px auto;
  1356. -ms-flex-pack: distribute;
  1357. justify-content: space-around;
  1358. }
  1359. .footer .mobile-list .mobile-tab-list button {
  1360. display: -webkit-box;
  1361. display: -ms-flexbox;
  1362. display: flex;
  1363. font-weight: 700;
  1364. color: #fff;
  1365. }
  1366. .footer .mobile-list .mobile-tab-list button span {
  1367. display: none;
  1368. margin-left: 15px;
  1369. }
  1370. .footer .mobile-list .mobile-tab-list .active span {
  1371. display: block;
  1372. }
  1373. .footer .mobile-list .mobile-tab-list .nav-link {
  1374. padding: 1rem 1rem;
  1375. }
  1376. .footer .mobile-list .mobile-tab-list .nav-pills .nav-link.active {
  1377. color: #fff;
  1378. background: none !important;
  1379. }
  1380. .footer .mobile-list .mobile-tab-list .tab-content {
  1381. width: 30vw;
  1382. }
  1383. .footer .mobile-list .mobile-tab-list .tab-content li {
  1384. margin: 7px 0 15px;
  1385. }
  1386. .footer .mobile-list .mobile-tab-list .tab-content li a {
  1387. color: #fff;
  1388. font-weight: 700;
  1389. letter-spacing: 1px;
  1390. }
  1391. .footer .mobile-list .mobile-tab-list #v-pills-tab {
  1392. width: 200px;
  1393. }
  1394. .footer .copyright {
  1395. margin-top: 55px;
  1396. padding-top: 32px;
  1397. padding-bottom: 53px;
  1398. border-top: 1px solid #fff;
  1399. }
  1400. @media (max-width: 767px) {
  1401. .footer .copyright {
  1402. border: none;
  1403. }
  1404. }
  1405. .copyright p {
  1406. font-family: 'Noto Sans TC';
  1407. font-style: normal;
  1408. font-weight: 300;
  1409. font-size: 16px;
  1410. line-height: 150%;
  1411. letter-spacing: 0.4em;
  1412. color: #FFFFFF;
  1413. }
  1414. .footer .copyright a {
  1415. padding: 0 5px;
  1416. }
  1417. .footer .copyright span {
  1418. position: relative;
  1419. top: -1px;
  1420. }
  1421. @media (max-width: 1200px) {
  1422. .footer {
  1423. padding: 0 8vw;
  1424. }
  1425. }
  1426. @media (max-width: 767px) {
  1427. .footer {
  1428. padding: 0 1.5vw;
  1429. }
  1430. .footer img {
  1431. display: inline-block;
  1432. }
  1433. .footer .list {
  1434. display: none;
  1435. }
  1436. }
  1437. /* footer end */
  1438. /*# sourceMappingURL=style.css.map */