style.scss 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. $table: 1024px;
  7. $moblie: 767px;
  8. $process: #6f645a;
  9. // 行動裝置
  10. @font-face {
  11. font-family: 追奇手寫體;
  12. src: url(./goto1.woff);
  13. font-weight: 900;
  14. font-display:swap;
  15. }
  16. @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;600&display=swap');
  17. $Font-color: #fff;
  18. $toggle: #9c857b;
  19. $title-color: #4b515e;
  20. body {
  21. .title {
  22. font-weight: bolder;
  23. padding: 15px;
  24. font-family: 'Noto Serif TC', serif !important;
  25. color:$title-color;
  26. text-align: center;
  27. @media screen and(max-width:$table) {
  28. font-size: 48px;
  29. }
  30. @media screen and(max-width:$moblie) {
  31. font-size: 40px;
  32. }
  33. @media screen and(max-width:400px) {
  34. font-size:30px!important;
  35. }
  36. }
  37. .btn {
  38. width: 100vw;
  39. text-align: center;
  40. }
  41. .btn-main {
  42. box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
  43. border: none;
  44. padding: 15px;
  45. background: rgb(64, 72, 84);
  46. color: $Font-color;
  47. font-size: 16px;
  48. letter-spacing: 1px;
  49. width: 280px;
  50. border-radius: 30px;
  51. transition: 0.3s;
  52. &:hover {
  53. background-color: $toggle;
  54. width: 285px;
  55. font-size: 16px;
  56. }
  57. @media screen and(max-width:$table) {
  58. font-size: 16px;
  59. padding: 15px;
  60. }
  61. }
  62. .arrow {
  63. position: fixed;
  64. right: 3vw;
  65. bottom: 100px;
  66. width: 45px;
  67. height: 40px;
  68. z-index: 10;
  69. background-color: #E06649;
  70. &:hover{
  71. box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
  72. }
  73. }
  74. }
  75. .navigation {
  76. width: 100vw;
  77. height: 60px;
  78. background: #fff;
  79. box-shadow: 0 5px 9px rgba(0, 0, 0, 0.3);
  80. // position: relative;
  81. z-index: 5;
  82. position: fixed;
  83. overflow: hidden;
  84. .logo {
  85. padding: 10px;
  86. margin-bottom: 5px;
  87. img {
  88. width: 128px;
  89. }
  90. }
  91. #menu-btn1 {
  92. position: absolute;
  93. right: 40px;
  94. top: 15px;
  95. width: 32px;
  96. height: 32px;
  97. z-index: 6;
  98. }
  99. }
  100. #banner-box {
  101. height: 50vh;
  102. overflow: hidden;
  103. position:relative;
  104. @media screen and(max-width:$moblie) {
  105. height: 90vh;
  106. }
  107. .banner-slider {
  108. height: 45vh;
  109. @media screen and(max-width:$moblie) {
  110. height: 80vh;
  111. }
  112. .slick-dots {
  113. margin-bottom: 50px;
  114. ::before{
  115. color:#fff;
  116. }
  117. @media screen and(max-width:$table) {
  118. font-size: 48px;
  119. }
  120. }
  121. .banner1,
  122. .banner2,
  123. .banner3 {
  124. width: 100vw;
  125. height: 45vh;
  126. // background-size: contain;
  127. background-repeat: no-repeat;
  128. background-size: cover;
  129. background-position: center center;
  130. @media screen and(max-width:$moblie) {
  131. height: 80vh;
  132. }
  133. @media screen and(min-height:800px) {
  134. background-position:55% 50% ;
  135. }
  136. h1 {
  137. line-height: 40vh;
  138. text-align: center;
  139. padding: 15px;
  140. color: #fff;
  141. font-family: 追奇手寫體 !important;
  142. font-size: 72px;
  143. @media screen and(max-width:$moblie) {
  144. line-height: 80vh;
  145. }
  146. }
  147. .img {
  148. width: 20px;
  149. }
  150. }
  151. .banner1 {
  152. background-image: url(./img/banner/001.webp);
  153. }
  154. .banner2 {
  155. background-image: url(./img/banner/002.webp);
  156. }
  157. .banner3 {
  158. background-image: url(./img/banner/003.webp);
  159. }
  160. }
  161. }
  162. #content1 {
  163. margin-top: 100px;
  164. width: 100vw;
  165. .title {
  166. text-align: center;
  167. margin: 30px 0px;
  168. font-family: "Times New Roman", Times, serif;
  169. @media screen and(max-width:$moblie) {
  170. font-size: 30px;
  171. }
  172. @media screen and(max-width:400px) {
  173. font-size: 25px;
  174. }
  175. }
  176. .box{
  177. margin: 0 auto;
  178. width: 85vw;
  179. @media screen and(max-width:350px) {
  180. width: 90vw;
  181. }
  182. }
  183. .text {
  184. position: relative;
  185. .text2 {
  186. position: absolute;
  187. top: 15vw;
  188. left: 10vw;
  189. z-index: 1;
  190. @media screen and(max-width:$table) {
  191. width: 65vw;
  192. height: 30vw;
  193. }
  194. @media screen and(max-width:$moblie) {
  195. width: 80vw;
  196. left: 5vw;
  197. }
  198. @media screen and(max-width:350px) {
  199. width: 85vw;
  200. left: 3vw;
  201. }
  202. h2 {
  203. line-height: 1.5;
  204. color: #fff;
  205. text-align-last: left;
  206. font-size: 20px;
  207. letter-spacing: 1px;
  208. font-weight: 900;
  209. @media screen and(max-width:$table) {
  210. font-size: 32px;
  211. }
  212. @media screen and(max-width:$moblie) {
  213. font-size: 1.3rem;
  214. }
  215. @media screen and(max-width: 400px) {
  216. font-size: 1.1rem;
  217. }
  218. }
  219. }
  220. }
  221. img {
  222. margin: 15px auto;
  223. width: 85vw;
  224. height: 30vh;
  225. object-fit: cover;
  226. filter: brightness(70%);
  227. @media screen and(max-width:$moblie) {
  228. width: 85vw;
  229. }
  230. @media screen and(max-width:350px) {
  231. width: 90vw;
  232. }
  233. }
  234. }
  235. #service {
  236. width: 100vw;
  237. text-align: center;
  238. h1{
  239. @media screen and(max-width: 400px) {
  240. margin: 50px 0;
  241. padding: 0;
  242. font-size: 30px !important;
  243. }
  244. }
  245. .text {
  246. font-size: 1.5rem;
  247. display: inline;
  248. text-align: left;
  249. @media screen and(max-width:$moblie) {
  250. font-size: 1rem;
  251. }
  252. @media screen and(max-width: 576px) {
  253. font-size: 0.8rem;
  254. }
  255. .left-box {
  256. .left-text{
  257. color: #000;
  258. font-weight: 900;
  259. @media screen and(max-width: 769px) {
  260. padding-top: 3vw;
  261. }
  262. @media screen and(max-width: 576px) {
  263. font-size: 0.9rem;
  264. padding-top: 5vw;
  265. }
  266. @media screen and(max-width: 400px) {
  267. font-size: 0.7rem;
  268. }
  269. }
  270. @media screen and(max-width: 769px) {
  271. width: 45vw;
  272. padding-left: 50px;
  273. margin-top: 30px;
  274. }
  275. @media screen and(max-width: 576px) {
  276. padding-left: 30px;
  277. margin-top: 20px;
  278. }
  279. @media screen and(max-width: 400px) {
  280. padding-top:5px;
  281. margin-top: 15px;
  282. padding-left: 10px; }
  283. }
  284. }
  285. .icon {
  286. width: 20vw;
  287. }
  288. h1 {
  289. margin: 50px;
  290. @media screen and(max-width:$moblie) {
  291. font-size: 34px;
  292. }
  293. @media screen and(max-width: 400px) {
  294. font-size:30px!important;
  295. }
  296. }
  297. }
  298. #service-process {
  299. margin: 0 auto;
  300. width: 65vw;
  301. background-color: #f7f7f7;
  302. @media screen and(max-width:$moblie) {
  303. width: 85vw;
  304. }
  305. h1 {
  306. @media screen and(max-width:$table) {
  307. margin-bottom: 150px;
  308. }
  309. @media screen and(max-width:$moblie) {
  310. font-size: 32px;
  311. margin-bottom: 30px;
  312. }
  313. }
  314. #box1-text{
  315. margin-top: 100px;
  316. @media screen and(max-width:$moblie) {
  317. margin-top: 50px;
  318. }
  319. }
  320. .process-box {
  321. width: 65vw;
  322. display: grid;
  323. margin: 0px auto;
  324. grid-template-columns: repeat(2, 1fr);
  325. grid-gap: 3vw;
  326. @media screen and(max-width:$moblie) {
  327. width: 75vw;
  328. }
  329. }
  330. img {
  331. width: 128px;
  332. height: 128px;
  333. object-fit: cover;
  334. @media screen and(max-width:$table) {
  335. height: 256px;
  336. width: 256px;
  337. }
  338. @media screen and(max-width:$moblie) {
  339. width: 128px;
  340. height: 128px;
  341. }
  342. }
  343. .process-title {
  344. text-align: center;
  345. width: 190px;
  346. @media screen and(max-width:$table) {
  347. width: 30vw;
  348. }
  349. @media screen and(max-width:$table) {
  350. width: 40vw;
  351. }
  352. .p-text{
  353. font-size: 20px;
  354. font-family: 微軟正黑體;
  355. font-weight: bolder;
  356. color: $process;
  357. @media screen and(max-width:$table) {
  358. width: 40vw;
  359. font-size: 38px;
  360. }
  361. @media screen and(max-width:$moblie) {
  362. font-size: 18px;
  363. width: 40vw;
  364. }
  365. @media screen and(max-width:350px) {
  366. font-size: 16px;
  367. }
  368. }
  369. img {
  370. @media screen and(max-width:$table) {
  371. margin-top: 80px;
  372. width: 40px;
  373. height: 40px;
  374. }
  375. @media screen and(max-width:$moblie) {
  376. width: 8vw;
  377. height:8vw;
  378. margin-top: 10px;
  379. }
  380. }
  381. }
  382. }
  383. #feedback {
  384. margin: auto;
  385. width: 70vw;
  386. padding-top: 50px;
  387. @media screen and(max-width:$moblie) {
  388. width: 90vw;
  389. }
  390. .feedback-slider1 {
  391. width: 70vw;
  392. @media screen and(max-width:$moblie) {
  393. width: 90vw;
  394. }
  395. }
  396. h1 {
  397. margin-bottom: 50px;
  398. }
  399. .box {
  400. position: relative;
  401. p {
  402. margin: 20px;
  403. text-align: center;
  404. font-size: 18px;
  405. font-weight: 600;
  406. }
  407. img {
  408. width: 390px;
  409. height: 195px;
  410. object-fit: cover;
  411. @media screen and(max-width:$table) {
  412. width: 70vw;
  413. height: 30vh;
  414. }
  415. @media screen and(max-width:$moblie) {
  416. width: 90vw;
  417. }
  418. }
  419. .play{
  420. position: absolute;
  421. left:32vw;
  422. top:15vw;
  423. width: 10vw;
  424. height: 10vw;
  425. opacity: 0.8;
  426. z-index: 10;
  427. @media screen and(max-width:$moblie) {
  428. left:40vw;
  429. top:20vw;
  430. width: 15vw;
  431. height: 15vw;
  432. opacity: 0.8;
  433. z-index: 10;
  434. }
  435. }
  436. }
  437. }
  438. #contact-us {
  439. margin-top: 100px;
  440. p {
  441. font-size: 16px;
  442. font-weight: 600;
  443. margin: 0px 10px;
  444. @media screen and(max-width:$table) {
  445. font-size: 24px;
  446. text-align: center;
  447. }
  448. @media screen and(max-width:$moblie) {
  449. font-size: 16px;
  450. }
  451. }
  452. #form-title {
  453. padding-top: 100px;
  454. margin-bottom: 50px;
  455. color: $title-color;
  456. }
  457. #form-text {
  458. width: 100vw;
  459. margin: 30px auto;
  460. @media screen and(max-width:$table) {
  461. font-size: 24px;
  462. text-align: center;
  463. margin: 30px auto;
  464. }
  465. @media screen and(max-width:$moblie) {
  466. font-size: 16px;
  467. margin: 30px auto;
  468. }
  469. }
  470. h1 {
  471. text-align: center;
  472. font-size: 24px;
  473. font-weight: 900;
  474. @media screen and(max-width:$table) {
  475. font-size: 36px;
  476. }
  477. @media screen and(max-width:$moblie) {
  478. font-size: 24px;
  479. }
  480. }
  481. #contact-form {
  482. text-align: center;
  483. .btn {
  484. margin: 50px auto;
  485. border: none;
  486. padding: 15px;
  487. background: #ffaf60;
  488. color: rgb(64, 72, 84);
  489. font-size: 20px;
  490. width: 300px;
  491. border-radius: 30px;
  492. &:hover {
  493. color: #fff;
  494. background-color: #745c54;
  495. }
  496. }
  497. #location,
  498. #type,
  499. #modal,
  500. #budget,
  501. #square,
  502. #style,
  503. #date,
  504. #email,
  505. #name,
  506. #phone,
  507. #gender,
  508. #rooms,
  509. #livingroom,
  510. #bathroom {
  511. border-radius: 3px;
  512. width: 85%;
  513. height: 60px;
  514. margin: 15px 0;
  515. padding-left: 15px;
  516. border: 1px solid rgba(0, 0, 0, 0.3);
  517. font-size: 18px;
  518. appearance: none;
  519. background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
  520. background-size: 10px 10px;
  521. background-color: #fff;
  522. }
  523. #square,
  524. #date,
  525. #email,
  526. #name,
  527. #phone {
  528. font-size: 18px;
  529. width: 85%;
  530. background: none;
  531. }
  532. #gender {
  533. display: block;
  534. margin: 0 auto;
  535. }
  536. #fb-button{
  537. margin: 15px auto;
  538. width: 85vw;
  539. height: 60px;
  540. border: 1px solid #3B5998;
  541. text-align: right;
  542. // background: url(./img/facebook.png) 10% 50% no-repeat scroll transparent;
  543. // background-size: 32px 32px;
  544. background-color: #fff;
  545. transition: 0.3s;
  546. position: relative;
  547. color: #3C3C3C;
  548. p {
  549. position: absolute;
  550. top: 2vw;
  551. font-weight: normal;
  552. color:#626262;
  553. @media screen and(max-width:$table) {
  554. top: 2vw;
  555. right: 10vw;
  556. font-size: 20px;
  557. }
  558. @media screen and(max-width:$moblie) {
  559. top: 1.8vw;
  560. right: 5vw;
  561. font-size: 16px;
  562. }
  563. @media screen and(max-width:350px) {
  564. font-size: 16px;
  565. }
  566. .sapn-line{
  567. padding-right: 1vw;
  568. font-size: 28px;
  569. color: #8E8E8E;
  570. font-weight: 100;
  571. @media screen and(min-width:700px) {
  572. display: none;
  573. }
  574. @media screen and(max-width:$moblie) {
  575. padding-right: 5vw;
  576. }
  577. @media screen and(max-width:400px) {
  578. padding-right: 2vw;
  579. }
  580. @media screen and(max-width:350px) {
  581. padding-right: 3vw;
  582. font-size: 27px;
  583. }
  584. }
  585. }
  586. img {
  587. position: absolute;
  588. left: 30px;
  589. top: 15px;
  590. width: 32px;
  591. height: 32px;
  592. filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
  593. @media screen and(max-width:350px) {
  594. left: 15px;
  595. }
  596. }
  597. &:hover {
  598. background-color: #2a4f91;
  599. color: #fff;
  600. img {
  601. filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
  602. }
  603. }
  604. }
  605. a {
  606. text-decoration: none;
  607. color: #ee751b;
  608. }
  609. #checkbox {
  610. margin-top: 30px;
  611. }
  612. #email,
  613. #name,
  614. #phone {
  615. background: none;
  616. background-color: #fff;
  617. }
  618. .option {
  619. width: 85%;
  620. }
  621. }
  622. #form {
  623. text-align: center;
  624. position: relative;
  625. #phone {
  626. position: absolute;
  627. left: 500px;
  628. }
  629. }
  630. }
  631. #footer {
  632. padding-top: 50px;
  633. width: 100vw;
  634. height: 150px;
  635. background-color: #ebe6e2;
  636. color: $title-color;
  637. text-align: center;
  638. font-size: 16px;
  639. line-height: 2;
  640. font-weight: 900;
  641. a {
  642. text-decoration: none;
  643. color: $title-color;
  644. }
  645. p {
  646. margin-left: 5px;
  647. display: inline;
  648. }
  649. }
  650. #menu-box {
  651. top: 60px;
  652. height: 25vh;
  653. width: 100vw;
  654. position: fixed;
  655. z-index: 5;
  656. overflow: hidden;
  657. @media screen and(max-width:$moblie) {
  658. height: 47vh;
  659. }
  660. @media screen and(max-width:350px) {
  661. height: 55vh;
  662. }
  663. hr {
  664. display: inline-block;
  665. margin: 0px auto !important;
  666. width: 90vw;
  667. background: #65584c;
  668. }
  669. #menu-box2 {
  670. width: 100vw;
  671. height: 25vh;
  672. background-color: #f4f4f3;
  673. opacity: 0.9;
  674. z-index: 7;
  675. text-align: center;
  676. @media screen and(max-width:$moblie) {
  677. height: 45vh;
  678. }
  679. @media screen and(max-width:350px) {
  680. height: 55vh;
  681. }
  682. #menu-link {
  683. display: grid;
  684. grid-template-columns: repeat(3, 1fr);
  685. width: 80vw;
  686. margin: 0 auto;
  687. }
  688. .menu-logo {
  689. opacity: 1;
  690. img {
  691. width: 40px;
  692. height: 40px;
  693. filter: invert(34%) sepia(7%) saturate(1111%) hue-rotate(347deg) brightness(98%) contrast(88%);
  694. @media screen and(max-width:$moblie) {
  695. width: 35px;
  696. height: 35px;
  697. }
  698. @media screen and(max-width:350px) {
  699. width: 35px;
  700. height: 35px;
  701. }
  702. }
  703. }
  704. a {
  705. display: inline-block;
  706. text-decoration: none;
  707. color: #65584c;
  708. font-size: 16px;
  709. margin-top: 20px;
  710. font-weight: 900;
  711. @media screen and(max-width:$moblie) {
  712. margin-top: 4vw;
  713. }
  714. }
  715. .menu-text {
  716. width: 100vw;
  717. text-align: center;
  718. margin-bottom: 10px;
  719. @media screen and(max-width:$moblie) {
  720. margin-bottom: 5px !important;
  721. }
  722. }
  723. }
  724. }