rv_web2.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
  1. @charset "UTF-8";
  2. .radarBox {
  3. width: 50%;
  4. margin: 0;
  5. -webkit-transition: all 300ms ease-in-out;
  6. transition: all 300ms ease-in-out;
  7. }
  8. @media (max-width: 576px) {
  9. .radarBox {
  10. width: 100%;
  11. background-color: #FFF;
  12. -webkit-box-shadow: 0 1px 10px #cecece;
  13. box-shadow: 0 1px 10px #cecece;
  14. }
  15. }
  16. .radarBox canvas {
  17. -webkit-transform: unset;
  18. transform: unset;
  19. -webkit-transition: all 300ms ease-in-out;
  20. transition: all 300ms ease-in-out;
  21. }
  22. @media (max-width: 576px) {
  23. .radarBox canvas {
  24. -webkit-transform: scale(0.85);
  25. transform: scale(0.85);
  26. margin-left: auto;
  27. margin-right: auto;
  28. }
  29. }
  30. .text-underline {
  31. text-decoration: underline;
  32. }
  33. .swiper-button-next:focus, .swiper-button-prev:focus {
  34. outline: none !important;
  35. display: none;
  36. }
  37. .intro {
  38. padding: 1.5rem 0;
  39. }
  40. .intro__section {
  41. padding: 1rem;
  42. -webkit-transition: all 300ms ease-in-out;
  43. transition: all 300ms ease-in-out;
  44. }
  45. @media (max-width: 576px) {
  46. .intro__section {
  47. padding: 0;
  48. }
  49. }
  50. .intro__section__info {
  51. padding: 1rem;
  52. color: #727679;
  53. position: relative;
  54. -webkit-transition: all 300ms ease-in-out;
  55. transition: all 300ms ease-in-out;
  56. }
  57. @media (max-width: 576px) {
  58. .intro__section__info {
  59. padding: 0.5rem 0.7rem;
  60. }
  61. }
  62. .intro__infoItems {
  63. padding: 1rem 0 0 0;
  64. line-height: 1.5;
  65. min-width: 87%;
  66. -webkit-transition: all 300ms ease-in-out;
  67. transition: all 300ms ease-in-out;
  68. }
  69. @media (max-width: 1199px) {
  70. .intro__infoItems {
  71. padding: 0 0 1.5rem 1rem;
  72. }
  73. }
  74. @media (max-width: 992px) {
  75. .intro__infoItems {
  76. padding: 0 0 1.5rem 0;
  77. max-width: 100%;
  78. }
  79. }
  80. @media (max-width: 576px) {
  81. .intro__infoItems {
  82. padding: 0;
  83. line-height: 2;
  84. }
  85. }
  86. .intro__infoItems__list {
  87. display: -webkit-box;
  88. display: -ms-flexbox;
  89. display: flex;
  90. }
  91. .intro__infoItems__list--lf {
  92. -ms-flex-preferred-size: 13%;
  93. flex-basis: 13%;
  94. -webkit-box-flex: 0;
  95. -ms-flex-positive: 0;
  96. flex-grow: 0;
  97. max-width: 13%;
  98. display: -webkit-box;
  99. display: -ms-flexbox;
  100. display: flex;
  101. -webkit-box-pack: end;
  102. -ms-flex-pack: end;
  103. justify-content: flex-end;
  104. -webkit-box-align: start;
  105. -ms-flex-align: start;
  106. align-items: start;
  107. -webkit-transition: all 300ms ease-in-out;
  108. transition: all 300ms ease-in-out;
  109. }
  110. @media (max-width: 1199px) {
  111. .intro__infoItems__list--lf {
  112. -ms-flex-preferred-size: 20%;
  113. flex-basis: 20%;
  114. }
  115. }
  116. @media (max-width: 992px) {
  117. .intro__infoItems__list--lf {
  118. -ms-flex-preferred-size: 30%;
  119. flex-basis: 30%;
  120. max-width: 30%;
  121. }
  122. }
  123. @media (max-width: 576px) {
  124. .intro__infoItems__list--lf {
  125. -ms-flex-preferred-size: 25%;
  126. flex-basis: 25%;
  127. max-width: 25%;
  128. }
  129. }
  130. @media (max-width: 321px) {
  131. .intro__infoItems__list--lf {
  132. -ms-flex-preferred-size: 30%;
  133. flex-basis: 30%;
  134. max-width: 30%;
  135. }
  136. }
  137. .intro__infoItems__list--rt {
  138. -ms-flex-preferred-size: 87%;
  139. flex-basis: 87%;
  140. -webkit-box-flex: 0;
  141. -ms-flex-positive: 0;
  142. flex-grow: 0;
  143. max-width: 87%;
  144. -webkit-box-pack: start;
  145. -ms-flex-pack: start;
  146. justify-content: start;
  147. word-break: break-all;
  148. }
  149. @media (max-width: 576px) {
  150. .intro__infoItems__list--rt {
  151. -ms-flex-preferred-size: 70%;
  152. flex-basis: 70%;
  153. max-width: 70%;
  154. }
  155. }
  156. .intro__infoItems__list .small {
  157. color: #AAA;
  158. }
  159. .intro__infoItems__list a:hover {
  160. color: #727679;
  161. }
  162. .intro .marked-dollar {
  163. position: absolute;
  164. right: 15px;
  165. top: 15px;
  166. }
  167. .intro .marked {
  168. font-size: 2.5rem;
  169. font-weight: bold;
  170. color: #FF0000;
  171. line-height: 0.9;
  172. margin: 0 0.5rem 0 0;
  173. -webkit-transition: all 300ms ease-in-out;
  174. transition: all 300ms ease-in-out;
  175. }
  176. @media (max-width: 1199px) {
  177. .intro .marked {
  178. font-size: 2.5rem;
  179. }
  180. }
  181. @media (max-width: 992px) {
  182. .intro .marked {
  183. font-size: 1.5rem;
  184. }
  185. }
  186. @media (max-width: 576px) {
  187. .intro .marked {
  188. font-size: 1.5rem;
  189. color: #FF0000;
  190. line-height: 1.2;
  191. }
  192. }
  193. .intro__section__contact {
  194. padding: 0.5rem;
  195. width: 50%;
  196. -webkit-transition: all 300ms ease-in-out;
  197. transition: all 300ms ease-in-out;
  198. }
  199. @media (max-width: 576px) {
  200. .intro__section__contact {
  201. padding: 1rem;
  202. width: 100%;
  203. }
  204. }
  205. .intro__section__contact .contactTitle-wrapper {
  206. line-height: 1.2;
  207. }
  208. .intro__section__contact .contactTitle {
  209. color: #727679;
  210. font-size: 1.125rem;
  211. font-weight: normal;
  212. -webkit-transition: all 300ms ease-in-out;
  213. transition: all 300ms ease-in-out;
  214. }
  215. @media (max-width: 576px) {
  216. .intro__section__contact .contactTitle {
  217. font-size: 1.125rem;
  218. font-weight: bold;
  219. }
  220. }
  221. .intro__section__contact a {
  222. color: #EE751B;
  223. font-size: 1.5rem;
  224. font-weight: bold;
  225. padding: 0;
  226. -webkit-transition: all 300ms ease-in-out;
  227. transition: all 300ms ease-in-out;
  228. }
  229. @media (max-width: 1199px) {
  230. .intro__section__contact a {
  231. font-size: 1.1rem;
  232. }
  233. }
  234. @media (max-width: 576px) {
  235. .intro__section__contact a {
  236. padding: 0.5rem 0;
  237. font-size: 1.5rem;
  238. }
  239. }
  240. .intro__section__contact .btn {
  241. padding: 0.9rem 2rem;
  242. -webkit-transition: all 300ms ease-in-out;
  243. transition: all 300ms ease-in-out;
  244. }
  245. @media (max-width: 1199px) {
  246. .intro__section__contact .btn {
  247. padding: 0.5rem 1rem;
  248. }
  249. }
  250. @media (max-width: 992px) {
  251. .intro__section__contact .btn {
  252. padding: 0.5rem;
  253. }
  254. }
  255. .introShort__above {
  256. display: -webkit-box;
  257. display: -ms-flexbox;
  258. display: flex;
  259. -webkit-box-pack: justify;
  260. -ms-flex-pack: justify;
  261. justify-content: space-between;
  262. -webkit-box-align: center;
  263. -ms-flex-align: center;
  264. align-items: center;
  265. }
  266. .introShort__vr {
  267. top: 15px;
  268. right: 15px;
  269. text-align: center;
  270. color: #EE751B;
  271. border: 1px solid #EE751B;
  272. border-radius: 0.25rem;
  273. line-height: 1.1;
  274. -webkit-transform: scale(0.9);
  275. transform: scale(0.9);
  276. padding: 0.5rem 0.8rem;
  277. -webkit-transition: all 300ms ease-in-out;
  278. transition: all 300ms ease-in-out;
  279. }
  280. @media (max-width: 576px) {
  281. .introShort__vr {
  282. top: 16px;
  283. right: 15px;
  284. padding: 0;
  285. line-height: 1.2;
  286. }
  287. }
  288. .introShort__vr:hover {
  289. cursor: pointer;
  290. }
  291. .introShort__vr__big {
  292. font-size: 265%;
  293. font-weight: bold;
  294. -webkit-transition: all 300ms ease-in-out;
  295. transition: all 300ms ease-in-out;
  296. }
  297. @media (max-width: 576px) {
  298. .introShort__vr__big {
  299. font-size: 170%;
  300. }
  301. }
  302. .introShort__vr__text::before {
  303. content: '全景預覽';
  304. display: inline-block;
  305. -webkit-transform: scale(0.8);
  306. transform: scale(0.8);
  307. }
  308. @media (max-width: 576px) {
  309. .introShort__vr__text::before {
  310. -webkit-transform: scale(0.75);
  311. transform: scale(0.75);
  312. }
  313. }
  314. .introShort__price {
  315. top: 15px;
  316. right: 15px;
  317. text-align: center;
  318. color: #EE751B;
  319. border: 1px solid #EE751B;
  320. border-radius: 0.25rem;
  321. background: #ee7518;
  322. color: #FFF;
  323. line-height: 1.1;
  324. -webkit-transform: scale(0.9);
  325. transform: scale(0.9);
  326. padding: 0.5rem;
  327. -webkit-transition: all 300ms ease-in-out;
  328. transition: all 300ms ease-in-out;
  329. }
  330. @media (max-width: 576px) {
  331. .introShort__price {
  332. top: 16px;
  333. right: 15px;
  334. padding: 0;
  335. line-height: 1.2;
  336. }
  337. }
  338. .introShort__price:hover {
  339. cursor: pointer;
  340. }
  341. .introShort__price__big {
  342. font-size: 265%;
  343. font-weight: bold;
  344. -webkit-transform: scale(0.75);
  345. transform: scale(0.75);
  346. -webkit-transition: all 300ms ease-in-out;
  347. transition: all 300ms ease-in-out;
  348. }
  349. @media (max-width: 576px) {
  350. .introShort__price__big {
  351. font-size: 170%;
  352. -webkit-transform: unset;
  353. transform: unset;
  354. }
  355. }
  356. .introShort__price__text::before {
  357. content: '實價登錄';
  358. display: inline-block;
  359. -webkit-transform: scale(0.8);
  360. transform: scale(0.8);
  361. }
  362. @media (max-width: 576px) {
  363. .introShort__price__text::before {
  364. -webkit-transform: scale(0.75);
  365. transform: scale(0.75);
  366. }
  367. }
  368. .introShort__content {
  369. margin: 1rem 0 0;
  370. color: #727679;
  371. }
  372. .buildVideo__bgImg {
  373. height: 406px;
  374. background-repeat: no-repeat;
  375. background-size: cover;
  376. background-position: center;
  377. position: relative;
  378. -webkit-transition: all 300ms ease-in-out;
  379. transition: all 300ms ease-in-out;
  380. }
  381. @media (max-width: 576px) {
  382. .buildVideo__bgImg {
  383. height: 250px;
  384. }
  385. }
  386. .buildVideo__play {
  387. position: absolute;
  388. top: 43%;
  389. left: 47%;
  390. width: 55px;
  391. -webkit-transition: all 300ms ease-in-out;
  392. transition: all 300ms ease-in-out;
  393. }
  394. @media (max-width: 576px) {
  395. .buildVideo__play {
  396. top: 35%;
  397. left: 40%;
  398. width: 85px;
  399. height: 85px;
  400. }
  401. }
  402. .buildVideo__link {
  403. position: relative;
  404. display: -webkit-box;
  405. display: -ms-flexbox;
  406. display: flex;
  407. -webkit-box-pack: center;
  408. -ms-flex-pack: center;
  409. justify-content: center;
  410. -webkit-box-align: center;
  411. -ms-flex-align: center;
  412. align-items: center;
  413. max-width: 1310px;
  414. margin: 0 auto;
  415. background: #fff;
  416. min-height: 750px;
  417. -webkit-transition: all 300ms ease-in-out;
  418. transition: all 300ms ease-in-out;
  419. }
  420. @media (max-width: 576px) {
  421. .buildVideo__link {
  422. min-height: unset;
  423. }
  424. }
  425. .buildVideo__img {
  426. max-height: 650px;
  427. }
  428. .buildVideo picture img {
  429. position: absolute;
  430. top: 45%;
  431. left: 45.5%;
  432. width: 110px;
  433. height: 110px;
  434. }
  435. .buildVideo .swiper-button-prev:after {
  436. content: '';
  437. width: 23px;
  438. height: 40px;
  439. background: url("../../images/rv_web/arrow-left.png") no-repeat;
  440. background-position: center;
  441. display: inline-block;
  442. }
  443. .buildVideo .swiper-button-next:after {
  444. content: '';
  445. width: 23px;
  446. height: 40px;
  447. background: url("../../images/rv_web/arrow-right.png") no-repeat;
  448. background-position: center;
  449. display: inline-block;
  450. }
  451. .buildSlider__bgImg {
  452. height: 406px;
  453. background-repeat: no-repeat;
  454. background-size: 100% 100%;
  455. background-position: center;
  456. }
  457. .buildSlider__title {
  458. margin: 0.5rem 0;
  459. color: #43484C;
  460. font-size: 1.125rem;
  461. }
  462. .buildSlider__title--ellipse {
  463. -webkit-box-orient: vertical;
  464. box-orient: vertical;
  465. -webkit-line-clamp: 2;
  466. height: calc(18px * 2 *1.5);
  467. overflow: hidden;
  468. text-overflow: ellipsis;
  469. display: -webkit-box;
  470. }
  471. .likeSee__tag--item {
  472. font-size: 1.125rem;
  473. font-weight: bold;
  474. -webkit-transition: all 300ms ease-in-out;
  475. transition: all 300ms ease-in-out;
  476. }
  477. @media (max-width: 576px) {
  478. .likeSee__tag--item {
  479. font-size: 1rem;
  480. }
  481. }
  482. .likeSee a:hover {
  483. color: #727679;
  484. }
  485. .card .card-link {
  486. position: relative;
  487. }
  488. .card .card-link picture img {
  489. position: absolute;
  490. top: 45%;
  491. left: 45%;
  492. width: 46px;
  493. height: 46px;
  494. -webkit-transition: all 300ms ease-in-out;
  495. transition: all 300ms ease-in-out;
  496. }
  497. @media (max-width: 576px) {
  498. .card .card-link picture img {
  499. top: 39%;
  500. left: 39%;
  501. width: 40px;
  502. height: 40px;
  503. }
  504. }
  505. /*# sourceMappingURL=rv_web2.css.map */