list-style.scss 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145
  1. body {
  2. font-family: "Helvetica Neue";
  3. }
  4. .sec-00 {
  5. background-color: rgb(202, 202, 202);
  6. transition-property: height;
  7. transition-duration: 300ms;
  8. &__close {
  9. position: absolute;
  10. top: 0;
  11. right: 20px;
  12. width: 50px;
  13. height: 30px;
  14. background-color: hsla(0, 0%, 100%, 0.66);
  15. border-radius: 0 0 50px 50px;
  16. color: #888;
  17. border: none;
  18. outline: none;
  19. font-size: 11px;
  20. box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
  21. line-height: 12px;
  22. z-index: 3;
  23. }
  24. &.bannerClose {
  25. height: 0;
  26. overflow: hidden;
  27. transition-property: height;
  28. transition-duration: 300ms;
  29. }
  30. .container-fluid {
  31. background-color: rgb(202, 202, 202);
  32. // height: 295px;
  33. // @media (max-width: 1850px) {
  34. // height: 260px;
  35. // }
  36. // @media (max-width: 1550px) {
  37. // height: 230px;
  38. // }
  39. // @media (max-width: 1100px) {
  40. // height: 200px;
  41. // }
  42. }
  43. &__slider {
  44. margin: 0 auto;
  45. width: 100%;
  46. height: 100%;
  47. max-width: 1310px;
  48. padding-top: 20px;
  49. padding-bottom: 24px;
  50. @media (max-width: 1850px) {
  51. max-width: 1310px;
  52. }
  53. @media (max-width: 1550px) {
  54. max-width: 1310px;
  55. }
  56. @media (max-width:576px) {
  57. max-width: 100%;
  58. height: auto;
  59. }
  60. .slide-item {
  61. width: 100%;
  62. height: 100%;
  63. max-width: 1310px;
  64. max-height: 300px;
  65. -o-object-fit: contain;
  66. object-fit: contain;
  67. height: 300px;
  68. cursor: pointer;
  69. @media (max-width:576px) {
  70. max-width: 100%;
  71. height: auto;
  72. }
  73. }
  74. }
  75. .slick-next {
  76. @media (max-width:576px) {
  77. right: 25px;
  78. }
  79. }
  80. .slick-prev {
  81. z-index: 100;
  82. @media (max-width:576px) {
  83. left: 25px;
  84. }
  85. }
  86. .slick-prev:before,
  87. .slick-next:before {
  88. display: none;
  89. }
  90. }
  91. /* 設計師列表頁_navbar start*/
  92. .v-toolbar {
  93. box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  94. }
  95. .v-toolbar__content_nav_box {
  96. justify-content: center;
  97. height: 100%;
  98. }
  99. .layout {
  100. display: flex;
  101. flex: 1 1 auto;
  102. flex-wrap: nowrap;
  103. min-width: 0;
  104. }
  105. .v-toolbar__content {
  106. position: relative;
  107. align-items: center;
  108. display: flex;
  109. .logo {
  110. position: absolute;
  111. left: 10px;
  112. top: 8px;
  113. z-index: 200;
  114. }
  115. }
  116. .shadow-none {
  117. box-shadow: none;
  118. }
  119. .text-promote-color {
  120. color: #ee7800 !important;
  121. }
  122. .navbar-main {
  123. background: #fff;
  124. z-index: 1000;
  125. }
  126. .dropdown {
  127. position: relative;
  128. }
  129. #app_user {
  130. .dropdown-toggle {
  131. padding: 15px 0;
  132. }
  133. .dropdown:hover .dropdown-menu {
  134. display: block;
  135. }
  136. .dropdown-menu {
  137. position: absolute;
  138. top: 62px;
  139. left: 0;
  140. right: 0;
  141. text-align: center;
  142. &:hover {
  143. background-color: #eeeeee;
  144. }
  145. }
  146. }
  147. @media (min-width:991px) {
  148. li.dropdown:hover>.dropdown-menu {
  149. display: block;
  150. }
  151. }
  152. // li.dropdown:hover>.dropdown-menu {
  153. // display: block;
  154. // @media (max-width:991px) {
  155. // }
  156. // }
  157. // .dropdown-menu li:hover .sub-menu {
  158. // visibility: visible;
  159. // }
  160. // .dropdown:hover .dropdown-menu {
  161. // display: block;
  162. // }
  163. .nav-item {
  164. position: relative;
  165. .nav-link {
  166. position: relative;
  167. color: rgba(0, 0, 0, 0.87);
  168. font-size: 1.17rem;
  169. padding: 1.075rem 10px;
  170. @media (max-width: 991px) {
  171. padding: 0;
  172. }
  173. }
  174. .dropdown-menu {
  175. position: absolute;
  176. top: 100%;
  177. left: 0;
  178. z-index: 1050;
  179. float: left;
  180. min-width: 10rem;
  181. padding: 0.5rem 0;
  182. margin: 0.125rem 0 0;
  183. font-size: 1rem;
  184. color: #212529;
  185. text-align: left;
  186. list-style: none;
  187. background-color: #fff;
  188. background-clip: padding-box;
  189. border: 1px solid rgba(0, 0, 0, 0.15);
  190. border-radius: 0.25rem;
  191. transition: 0.3s;
  192. }
  193. }
  194. .nav-item .thdmenu-block {
  195. display: none;
  196. position: absolute;
  197. left: 99.5%;
  198. top: -1px;
  199. }
  200. .dropdown-menu {
  201. // position: relative;
  202. min-height: 42px;
  203. margin-left: 10px;
  204. }
  205. .dropdown-toggle::after {
  206. display: none !important;
  207. }
  208. .thdmenu-block {
  209. position: absolute;
  210. left: 99.5% !important;
  211. top: -1px !important;
  212. }
  213. .dropdown-item {
  214. cursor: pointer;
  215. }
  216. .v-toolbar .navbar-nav>li:hover>.dropdown-menu {
  217. display: block;
  218. }
  219. .v-toolbar .dropdown-menu>li:hover>.thdmenu-block {
  220. // color:#0000;
  221. display: block;
  222. }
  223. .navbar .dropdown-menu.dropdown-level-width {
  224. min-width: 13.5rem;
  225. }
  226. .navbar .navbar-nav .dropdown-item:hover {
  227. background: transparent !important;
  228. }
  229. .dropdown-sub:hover .submenu,
  230. .dropdown-sub:hover>div .thdmenu-block>li:hover>.dropdown-item,
  231. .dropdown-sub:hover i {
  232. color: #ee7800;
  233. }
  234. .navbar .dropdown-menu {
  235. top: 98%;
  236. }
  237. .navbar-nav .dropdown-menu {
  238. // position: static;
  239. float: none;
  240. }
  241. .navbar-expand-lg .navbar-nav .dropdown-menu {
  242. position: absolute;
  243. top: 72px;
  244. @media (max-width: 1200px) {
  245. top: 69px;
  246. }
  247. @media (max-width: 991px) {
  248. top: 0;
  249. position: initial;
  250. }
  251. // &>li:hover>.thdmenu-block {
  252. // display: block;
  253. // }
  254. }
  255. .dropdown-menu li {
  256. position: relative;
  257. }
  258. .dropdown-menu .thdmenu-block {
  259. display: none;
  260. position: absolute;
  261. left: 100%;
  262. top: -7px;
  263. }
  264. @media (min-width:991px) {
  265. .dropdown-menu>li:hover>.thdmenu-block {
  266. display: block;
  267. }
  268. }
  269. // .dropdown-menu>li:hover>.thdmenu-block {
  270. // display: block;
  271. // }
  272. .thdmenu-block>li:hover>.dropdown-item {
  273. color: #ee7800;
  274. }
  275. .dropdown-sub {
  276. a {
  277. font-size: 16px;
  278. }
  279. p {
  280. font-size: 16px;
  281. }
  282. }
  283. .dropdown-sub {
  284. .dropdown-menu {
  285. // top: 45px !important;
  286. // left: 185px;
  287. top: -10px !important;
  288. left: 213px;
  289. &>li:hover>a {
  290. color: #ee7800;
  291. }
  292. }
  293. .submenu {
  294. color: #34404b;
  295. }
  296. @media (min-width: 991px) {
  297. &:hover .dropdown-menu {
  298. display: block;
  299. }
  300. }
  301. @media (max-width: 991px) {
  302. // .nav-link {
  303. // padding-left: 30px;
  304. // }
  305. .submenu {
  306. // padding-left: 50px;
  307. padding: 10px 20px;
  308. }
  309. }
  310. .dropdown-menu {
  311. padding-left: 10px;
  312. @media (max-width: 991px) {
  313. padding-left: 30px;
  314. }
  315. }
  316. }
  317. .dropdown {
  318. .list {
  319. @media (max-width: 991px) {
  320. .dropdown-sub {
  321. & {
  322. padding-left: 30px;
  323. }
  324. .nav-link {
  325. padding-left: 30px;
  326. }
  327. // padding-left: 30px;
  328. .submenu {
  329. padding: 8px 20px;
  330. }
  331. }
  332. .hover-block {
  333. padding: 0 !important;
  334. }
  335. }
  336. }
  337. }
  338. // .hover-block:hover .dropdown-menu {
  339. // display: block;
  340. // }
  341. // .hover-block > li:hover > a {
  342. // color: #ee7800;
  343. // }
  344. .hover-block {
  345. .nav-link {
  346. border-bottom: none !important;
  347. &:hover {
  348. a,
  349. p {
  350. color: var(--sub-color);
  351. }
  352. }
  353. }
  354. }
  355. .sticky-top {
  356. position: sticky;
  357. top: 0;
  358. z-index: 1020;
  359. }
  360. .toolbar .member-center {
  361. top: 5px;
  362. position: absolute;
  363. right: 8px;
  364. display: flex;
  365. align-items: center;
  366. z-index: 99;
  367. }
  368. .v-btn {
  369. height: 50px;
  370. transition: 0.3s;
  371. border-radius: 2px;
  372. }
  373. .v-btn__content {
  374. align-items: center;
  375. display: flex;
  376. flex: 1 0 auto;
  377. justify-content: center;
  378. margin: 0 auto;
  379. position: relative;
  380. transition: 0.3scubic-bezier (0.25, 0.8, 0.5, 1);
  381. white-space: nowrap;
  382. width: inherit;
  383. padding: 5px 8px;
  384. a {
  385. font-size: 14px;
  386. font-weight: normal;
  387. cursor: pointer;
  388. color: #000;
  389. font-family: Helvetica, Noto Sans TC, Roboto, Arial, sans-serif !important;
  390. }
  391. }
  392. .v-btn:hover {
  393. position: relative;
  394. }
  395. .v-btn:hover {
  396. background-color: #e5e6e5;
  397. }
  398. .navbar-login {
  399. padding-right: 8px !important;
  400. }
  401. .navbar-mb {
  402. box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  403. -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
  404. 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  405. -moz-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  406. padding-top: 5px;
  407. padding-bottom: 5px;
  408. background-color: white !important;
  409. z-index: 99;
  410. &-toggler {
  411. padding-left: 0;
  412. border-color: transparent !important;
  413. &:focus {
  414. box-shadow: none;
  415. }
  416. }
  417. &-toggler-icon {
  418. display: flex;
  419. justify-items: center;
  420. i {
  421. font-size: 25px;
  422. line-height: 30px;
  423. display: inline-block;
  424. }
  425. }
  426. &-search {
  427. padding-right: 2px;
  428. }
  429. &-brand {
  430. font-size: 1.5rem;
  431. }
  432. }
  433. .navbar-main.sticky {
  434. position: fixed;
  435. top: 0;
  436. width: 100%;
  437. }
  438. .navbar-main.sticky+.sec-01 {
  439. padding-top: 58px;
  440. }
  441. .sticky {
  442. position: fixed;
  443. top: 0;
  444. width: 100%;
  445. z-index: 3000;
  446. }
  447. .sticky+.sec-01 {
  448. padding-top: 58px;
  449. }
  450. .sec-menu {
  451. display: none;
  452. z-index: 105;
  453. position: absolute;
  454. top: 0;
  455. left: 0;
  456. right: 0;
  457. font-size: 14px;
  458. &-block {
  459. padding-top: 61px;
  460. margin: 0;
  461. // display: none;
  462. // transform: translateX(-500px);
  463. transition: transform 0.5s;
  464. position: fixed;
  465. top: 0;
  466. left: -100%;
  467. right: 0;
  468. height: 100%;
  469. overflow-y: scroll;
  470. max-width: 100%;
  471. background-color: white;
  472. transition: all 0.3s;
  473. // &.slidein {
  474. // -webkit-animation: slidein 0.3s;
  475. // animation: slidein 0.3s;
  476. // }
  477. // &.slideout {
  478. // -webkit-animation: slideout 0.3s;
  479. // animation: slideout 0.3s;
  480. // }
  481. }
  482. &-list {
  483. background: white;
  484. margin-bottom: 0;
  485. .navbar-nav {
  486. padding: 0 2rem;
  487. width: 100%;
  488. .dropdown-menu {
  489. border: none;
  490. padding: 0;
  491. height: 0;
  492. opacity: 0;
  493. transition: all 1s;
  494. &.show {
  495. height: fit-content;
  496. opacity: 1;
  497. }
  498. .dropdown-item {
  499. padding-left: 3rem;
  500. &:active,
  501. &.active,
  502. &:focus {
  503. background-color: white;
  504. }
  505. &:hover {
  506. background-color: white;
  507. }
  508. }
  509. .sub-menu {
  510. .dropdown-item {
  511. padding-left: 6rem;
  512. }
  513. }
  514. }
  515. }
  516. .nav-item {
  517. font-size: 17px;
  518. display: block;
  519. width: 100%;
  520. }
  521. .nav-link {
  522. padding-top: 11px;
  523. padding-bottom: 8px;
  524. color: #707070;
  525. position: relative;
  526. -webkit-appearance: none !important;
  527. appearance: none !important;
  528. border-radius: 0;
  529. .link_div {
  530. width: 25px;
  531. }
  532. a {
  533. color: #707070;
  534. text-decoration: none;
  535. }
  536. &.show {
  537. i {
  538. transform: rotate(-180deg);
  539. }
  540. }
  541. .expand {
  542. position: absolute;
  543. right: 10px;
  544. i {
  545. font-size: 11px;
  546. color: #d3d3d3;
  547. transition: all 0.5s;
  548. }
  549. }
  550. &.text-main {
  551. color: #ee7800;
  552. }
  553. }
  554. .sub-link {
  555. .expand {
  556. position: absolute;
  557. right: 20px;
  558. top: 8px;
  559. width: 1.5rem;
  560. text-align: center;
  561. }
  562. }
  563. .sub-menu {
  564. display: none;
  565. }
  566. .sub-menu.show {
  567. display: block;
  568. }
  569. hr {
  570. margin: 3px 0;
  571. background-color: rgb(187, 187, 187);
  572. }
  573. }
  574. &-follows {
  575. padding: 2rem 2.5rem;
  576. background-color: #e6e6e6ef;
  577. margin-top: -9px;
  578. &-title {
  579. color: #797979;
  580. font-size: 14px;
  581. }
  582. }
  583. &-links {
  584. margin-bottom: 2.5rem;
  585. a {
  586. color: #797979;
  587. text-decoration: none;
  588. display: inline-block;
  589. padding: 1px 0;
  590. border-bottom: 1px solid #acacac;
  591. margin: 0 0.6rem;
  592. flex-wrap: nowrap;
  593. @media (max-width: 385px) {
  594. margin: 0 0.4rem;
  595. }
  596. }
  597. }
  598. .follows-fp {
  599. color: #797979;
  600. text-decoration: none;
  601. font-weight: 400;
  602. display: block;
  603. padding-left: 0.5rem;
  604. &:nth-of-type(1) {
  605. margin-bottom: 0.6rem;
  606. }
  607. }
  608. .copyright {
  609. color: #797979;
  610. font-size: 13px;
  611. }
  612. }
  613. // @keyframes slidein {
  614. // 100% {
  615. // left: 0;
  616. // }
  617. // }
  618. // @keyframes slideout {
  619. // 100% {
  620. // left: -100%;
  621. // }
  622. // }
  623. .navbar-light .navbar-brand {
  624. cursor: pointer;
  625. }
  626. .designers-nav {
  627. li {
  628. .nav-link {
  629. font-size: 16px;
  630. &:hover {
  631. opacity: 0.8;
  632. }
  633. }
  634. }
  635. .text-phone {
  636. color: #ea068c;
  637. }
  638. .nav-item .nav-link:after {
  639. border: none !important;
  640. }
  641. }
  642. /* 設計師列表頁_navbar end */
  643. #navbarSupportedContent {
  644. img {
  645. width: 20px;
  646. }
  647. }
  648. #navbar {
  649. position: sticky;
  650. top: 0;
  651. z-index: 1000;
  652. }
  653. .navbar {
  654. box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  655. -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
  656. 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  657. -moz-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  658. padding-top: 5px;
  659. padding-bottom: 5px;
  660. background-color: white !important;
  661. z-index: 99;
  662. .container-fluid {
  663. padding: 0 2.5rem;
  664. @media (max-width: 1100px) {
  665. padding: 0 0.6rem;
  666. }
  667. }
  668. &-toggler {
  669. padding-left: 0;
  670. border-color: transparent !important;
  671. &:focus {
  672. box-shadow: none;
  673. }
  674. }
  675. &-toggler-icon {
  676. display: flex;
  677. justify-items: center;
  678. i {
  679. font-size: 25px;
  680. line-height: 30px;
  681. display: inline-block;
  682. }
  683. }
  684. &-search,
  685. &-login {
  686. padding-right: 2px;
  687. }
  688. &-login {
  689. cursor: pointer;
  690. }
  691. &-search {
  692. &-magnify {
  693. cursor: pointer;
  694. }
  695. }
  696. &-brand {
  697. font-size: 1.5rem;
  698. &.navbar-logo {
  699. display: flex;
  700. align-items: center;
  701. }
  702. .navbar-login {
  703. font-size: 1rem;
  704. color: #ee7800;
  705. text-decoration: none;
  706. }
  707. }
  708. .nav-link {
  709. cursor: pointer;
  710. @media (max-width: 1100px) {
  711. font-size: 0.9rem;
  712. }
  713. .expand {
  714. transition: all .3s;
  715. i {
  716. color: #D3D3D3;
  717. }
  718. }
  719. .rotate {
  720. transform: rotate(180deg);
  721. }
  722. }
  723. .navbar-nav {
  724. @media (max-width: 991px) {
  725. &>li {
  726. padding: 15px 0;
  727. }
  728. li {
  729. border-bottom: 1px solid #F4F4F4;
  730. }
  731. .dropdown-menu {
  732. border: none;
  733. margin: 15px 0 -15px;
  734. .dropdown-sub {
  735. &:first-child {
  736. border-top: 1px solid #F4F4F4;
  737. }
  738. &:last-child {
  739. border-bottom: none;
  740. }
  741. }
  742. }
  743. .dropdown-sub {
  744. .dropdown-menu {
  745. margin: 0;
  746. li {
  747. padding: 8px 50px;
  748. &:first-child {
  749. border-top: 1px solid #F4F4F4;
  750. }
  751. &:last-child {
  752. border-bottom: none;
  753. }
  754. }
  755. }
  756. }
  757. }
  758. .nav-item {
  759. margin: 0 0.5rem;
  760. @media (max-width: 1200px) {
  761. margin: 0 0.25rem;
  762. }
  763. .dropbox {
  764. visibility: hidden;
  765. opacity: 0;
  766. transition: all 0.4s;
  767. position: absolute;
  768. width: 100vw;
  769. top: 100%;
  770. left: 0;
  771. background-color: rgba(255, 255, 255, 0.932);
  772. padding-top: 1.5rem;
  773. padding-bottom: 3rem;
  774. ul {
  775. padding-left: 0;
  776. }
  777. &-item {
  778. margin-bottom: 0.5rem;
  779. &.first {
  780. font-size: 1.1rem;
  781. font-weight: 600;
  782. .dropbox-link {
  783. color: black;
  784. }
  785. }
  786. }
  787. &-link {
  788. text-decoration: none;
  789. color: rgb(146, 146, 146);
  790. font-size: 0.85rem;
  791. &:hover {
  792. color: #ee7800;
  793. }
  794. &.dropbox-btn {
  795. border: 1px solid rgb(146, 146, 146);
  796. padding: 0.5rem 2rem;
  797. border-radius: 5px;
  798. width: 85%;
  799. min-width: 7rem;
  800. max-width: 11rem;
  801. }
  802. }
  803. &-btn {
  804. display: flex;
  805. align-items: center;
  806. justify-content: center;
  807. }
  808. .container {
  809. max-width: 900px;
  810. width: 70%;
  811. &.stylebox {
  812. transform: translateX(-30%);
  813. }
  814. &.designerbox {
  815. transform: translateX(-5%);
  816. }
  817. &.newbox {
  818. transform: translateX(15%);
  819. }
  820. &.forumbox {
  821. transform: translateX(50%);
  822. }
  823. }
  824. }
  825. .nav-link {
  826. // padding-top: 20px;
  827. position: relative;
  828. font-size: 19px;
  829. cursor: pointer;
  830. color: #34404b;
  831. border-bottom: 4px solid transparent;
  832. @media (max-width: 1200px) {
  833. font-size: 17px;
  834. }
  835. @media (max-width: 991px) {
  836. border-bottom: none;
  837. }
  838. a {
  839. transition: all .2s;
  840. }
  841. &:hover {
  842. border-bottom: 4px solid #ee7800;
  843. @media (max-width: 991px) {
  844. color: #ee7800;
  845. border-bottom: none;
  846. a {
  847. color: #ee7800;
  848. }
  849. }
  850. }
  851. span {
  852. display: block;
  853. // padding-top: .25rem;
  854. }
  855. .search-btn {
  856. border: none;
  857. background: transparent;
  858. padding-top: 4px;
  859. @media (max-width: 1200px) {
  860. padding-top: 3px;
  861. }
  862. img {
  863. padding-bottom: 4px;
  864. @media (max-width: 1200px) {
  865. padding-bottom: 3px;
  866. }
  867. @media (max-width: 1100px) {
  868. padding-bottom: 2px;
  869. }
  870. }
  871. }
  872. }
  873. .search-btn {
  874. border: none;
  875. background: transparent;
  876. }
  877. // .nav-link:after {
  878. // position: absolute;
  879. // content: " ";
  880. // width: 100%;
  881. // height: 100%;
  882. // top: 0;
  883. // right: 0;
  884. // border-bottom: 4px solid #ee7800;
  885. // opacity: 0;
  886. // transform: opacity 1s;
  887. // }
  888. &:hover {
  889. // .nav-link:after {
  890. // opacity: 1;
  891. // }
  892. >.dropbox {
  893. visibility: visible;
  894. opacity: 1;
  895. }
  896. }
  897. }
  898. .nav-item.lg {
  899. .container {
  900. max-width: 1200px;
  901. width: 90%;
  902. }
  903. .dropbox-link {
  904. text-decoration: none;
  905. color: rgb(146, 146, 146);
  906. font-size: 0.7rem;
  907. &:hover {
  908. color: #ee7800;
  909. }
  910. }
  911. .dropbox-item {
  912. margin-bottom: 0.1rem;
  913. &.first {
  914. .dropbox-link {
  915. font-size: 0.85rem;
  916. }
  917. }
  918. }
  919. }
  920. }
  921. &-search {
  922. .container {
  923. max-width: 900px;
  924. width: 70%;
  925. @media (max-width: 1100px) {
  926. width: 90%;
  927. }
  928. }
  929. .dropbox {
  930. visibility: hidden;
  931. opacity: 0;
  932. transition: all 0.2s;
  933. position: absolute;
  934. width: 100vw;
  935. top: 100%;
  936. left: 0;
  937. background-color: rgba(255, 255, 255, 0.932);
  938. padding-top: 1.5rem;
  939. padding-bottom: 3rem;
  940. &.open {
  941. visibility: visible;
  942. opacity: 1;
  943. }
  944. &__searchtab {
  945. width: 100%;
  946. background-color: gray;
  947. border-radius: 3px;
  948. padding: 0.2rem 1rem;
  949. padding-bottom: 1rem;
  950. }
  951. &__hots {
  952. &__title {
  953. font-size: 1rem;
  954. color: rgb(107, 107, 107);
  955. }
  956. &__link {
  957. font-size: 0.9rem;
  958. color: rgb(146, 146, 146);
  959. text-decoration: none;
  960. cursor: pointer;
  961. margin: 0 0.2rem;
  962. }
  963. }
  964. &__searchBar {
  965. &__input {
  966. width: 100%;
  967. outline: none;
  968. border: 2px solid #ee7800;
  969. border-radius: 5rem;
  970. padding: 0.3rem 1.2rem;
  971. font-size: 0.9rem;
  972. }
  973. &__submit {
  974. outline: none;
  975. border: none;
  976. font-size: 0.9rem;
  977. background-color: transparent;
  978. color: #ee7800;
  979. margin-left: -1rem;
  980. transform: translateX(-100%);
  981. padding: 0 0.6rem;
  982. }
  983. }
  984. &__tab {
  985. .nav-item {
  986. margin: 0 0.6rem;
  987. }
  988. }
  989. .nav-item-link {
  990. border: none;
  991. outline: none;
  992. font-size: 1rem;
  993. color: white;
  994. padding: 3px;
  995. position: relative;
  996. &::after {
  997. position: absolute;
  998. content: "";
  999. top: 0;
  1000. left: 0;
  1001. width: 100%;
  1002. height: 100%;
  1003. border-bottom: 3px solid #ee7800;
  1004. opacity: 0;
  1005. }
  1006. &.active::after {
  1007. opacity: 1;
  1008. }
  1009. }
  1010. }
  1011. .dropbox-tab-content {
  1012. .tabpar {
  1013. display: flex;
  1014. padding-top: 0.5rem;
  1015. .col {
  1016. margin: 0 0.6rem;
  1017. }
  1018. .select {
  1019. font-size: 1rem;
  1020. padding: 0.6rem;
  1021. border-radius: 3px;
  1022. color: rgb(116, 116, 116);
  1023. }
  1024. button {
  1025. border: none;
  1026. outline: none;
  1027. background-color: #ee7800;
  1028. border-radius: 3px;
  1029. color: white;
  1030. font-size: 1rem;
  1031. padding: 0.6rem;
  1032. }
  1033. .image-search {
  1034. border: none;
  1035. outline: none;
  1036. background-color: #ee7800;
  1037. border-radius: 3px;
  1038. color: white;
  1039. font-size: 1rem;
  1040. }
  1041. .article-btn {
  1042. border: none;
  1043. outline: none;
  1044. background-color: #ee7800;
  1045. border-radius: 3px;
  1046. color: white;
  1047. font-size: 1rem;
  1048. padding: 0.6rem;
  1049. }
  1050. .home-btn {
  1051. border: none;
  1052. outline: none;
  1053. background-color: #ee7800;
  1054. border-radius: 3px;
  1055. color: white;
  1056. font-size: 1rem;
  1057. padding: 0.6rem;
  1058. }
  1059. }
  1060. }
  1061. }
  1062. #search-btn {
  1063. font-size: 20px;
  1064. border: none;
  1065. background: transparent;
  1066. }
  1067. }
  1068. .navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
  1069. opacity: 1;
  1070. }
  1071. .navbar-main.sticky {
  1072. position: fixed;
  1073. top: 0;
  1074. width: 100%;
  1075. }
  1076. .navbar-main.sticky+.sec-02 {
  1077. padding-top: 53.5px;
  1078. }
  1079. .shadow-item {
  1080. position: absolute;
  1081. display: none;
  1082. height: 3px;
  1083. top: 51px;
  1084. width: 100vw;
  1085. right: 0;
  1086. left: 0;
  1087. margin: auto;
  1088. box-shadow: 0px 2px 3px #00000029;
  1089. border-bottom: 1px solid #ccc;
  1090. @media (max-width: 991px) {
  1091. display: block;
  1092. }
  1093. }
  1094. .sec-02 {
  1095. &__slider {
  1096. width: 100%;
  1097. height: 100%;
  1098. .slide-item {
  1099. width: 100%;
  1100. height: 74vh;
  1101. background-position: center center;
  1102. background-size: cover;
  1103. background-repeat: no-repeat;
  1104. cursor: pointer;
  1105. }
  1106. }
  1107. .slick-prev:before,
  1108. .slick-next:before {
  1109. display: none;
  1110. }
  1111. .slick-prev {
  1112. left: 15px;
  1113. z-index: 3;
  1114. }
  1115. .slick-next {
  1116. right: 15px;
  1117. }
  1118. }
  1119. a {
  1120. text-decoration: none;
  1121. }
  1122. .text-hhh {
  1123. color: #ee7800;
  1124. }
  1125. .content {
  1126. background-color: #fcfcfc;
  1127. padding: 1rem 30px 0.5rem;
  1128. .infoCard {
  1129. color: #727679;
  1130. text-align: center;
  1131. padding: 1rem;
  1132. background-color: rgba(244, 244, 244, 0.8);
  1133. box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  1134. transform: translateY(-150px);
  1135. &__seo {
  1136. font-size: 0.9rem;
  1137. text-align: center;
  1138. padding: 1rem;
  1139. display: block;
  1140. line-height: 1.2;
  1141. }
  1142. &__approve {
  1143. color: #ff0000;
  1144. }
  1145. &__avatar {
  1146. width: 200px;
  1147. height: 200px;
  1148. border: 3px solid #fff;
  1149. border-radius: 50%;
  1150. background-size: cover;
  1151. background-repeat: no-repeat;
  1152. }
  1153. &__detail {
  1154. aside {
  1155. line-height: 2;
  1156. font-size: 0.9rem;
  1157. }
  1158. &__l {
  1159. flex-basis: 30%;
  1160. display: flex;
  1161. justify-content: flex-end;
  1162. flex-grow: 0;
  1163. max-width: 30%;
  1164. &.title {
  1165. color: #aaaaaa;
  1166. font-size: 1.125rem;
  1167. font-weight: 400;
  1168. transform: translateX(-15px);
  1169. }
  1170. }
  1171. &__r {
  1172. flex-basis: 70%;
  1173. text-align: start;
  1174. flex-grow: 0;
  1175. max-width: 70%;
  1176. word-break: break-all;
  1177. a {
  1178. color: #727679;
  1179. &:hover {
  1180. color: #ee7800;
  1181. }
  1182. }
  1183. }
  1184. }
  1185. .scMedia {
  1186. display: flex;
  1187. padding: 1rem 0;
  1188. width: 100%;
  1189. margin-left: auto;
  1190. margin-right: auto;
  1191. justify-content: space-around;
  1192. a {
  1193. width: 16%;
  1194. img {
  1195. width: 100%;
  1196. }
  1197. }
  1198. span {
  1199. width: 16%;
  1200. cursor: pointer;
  1201. img {
  1202. width: 100%;
  1203. }
  1204. }
  1205. }
  1206. }
  1207. }
  1208. .infoContent {
  1209. a {
  1210. color: #727679;
  1211. text-decoration: none;
  1212. font-size: 0.9rem;
  1213. &.active {
  1214. color: #ee7800;
  1215. }
  1216. }
  1217. .nav-item {
  1218. margin: 0 0.8rem;
  1219. width: auto;
  1220. &-link {
  1221. display: block;
  1222. padding: 0.5rem 2.5rem;
  1223. text-decoration: none;
  1224. background-color: transparent;
  1225. font-size: 0.9rem;
  1226. color: #727679;
  1227. transition: all 0.3s;
  1228. -webkit-appearance: none !important;
  1229. @media (max-width: 1200px) {
  1230. padding: 0.5rem 0.8rem;
  1231. }
  1232. &:hover {
  1233. color: #ee7800;
  1234. }
  1235. &.active {
  1236. color: #ee7800;
  1237. border-bottom: 2px solid #ee7800;
  1238. }
  1239. }
  1240. }
  1241. .likeSee {
  1242. margin-top: 0.8rem;
  1243. @media (max-width: 1200px) {
  1244. width: 12%;
  1245. position: absolute;
  1246. right: -1.5rem;
  1247. bottom: -1.5rem;
  1248. }
  1249. span {
  1250. color: #727679;
  1251. font-size: 0.9rem;
  1252. cursor: pointer;
  1253. &:hover {
  1254. color: #ee7800;
  1255. }
  1256. }
  1257. &__divider {
  1258. height: 12px;
  1259. display: inline-block;
  1260. border: 0.5px solid #9d9d9d;
  1261. }
  1262. }
  1263. .card {
  1264. box-shadow: 0 1px 10px #eee;
  1265. margin: 0 0 1.5rem;
  1266. border: none;
  1267. overflow: hidden;
  1268. &:hover .card__bgImg {
  1269. transform: scale(1.1);
  1270. }
  1271. &__bgImg {
  1272. height: 293px;
  1273. background-repeat: no-repeat;
  1274. background-size: cover;
  1275. background-position: center;
  1276. position: relative;
  1277. display: flex;
  1278. justify-content: center;
  1279. -webkit-box-align: center;
  1280. align-items: center;
  1281. -webkit-box-pack: center;
  1282. transition: all 0.4s;
  1283. }
  1284. &-body {
  1285. padding: 0.5rem 1rem;
  1286. }
  1287. &__title {
  1288. font-size: 1.125rem;
  1289. -webkit-box-orient: vertical;
  1290. box-orient: vertical;
  1291. -webkit-line-clamp: 2;
  1292. height: calc(18px * 2 * 1.5);
  1293. overflow: hidden;
  1294. text-overflow: ellipsis;
  1295. display: -webkit-box;
  1296. font-weight: bold;
  1297. margin: 0.5rem 0;
  1298. color: #727679;
  1299. }
  1300. &__tag {
  1301. margin: 0 0.2rem 0 0;
  1302. &:hover {
  1303. color: #ee7800;
  1304. }
  1305. }
  1306. }
  1307. .company {
  1308. &__block {
  1309. margin: 0 0 2rem;
  1310. }
  1311. &__title {
  1312. color: #aaaaaa;
  1313. font-size: 2rem;
  1314. font-weight: bold;
  1315. }
  1316. &__text {
  1317. color: #43484c;
  1318. }
  1319. }
  1320. }
  1321. .nav-collapse-fixed {
  1322. position: fixed;
  1323. top: 52px;
  1324. z-index: -1;
  1325. width: 100%;
  1326. @media (max-width: 1200px) {
  1327. width: auto;
  1328. }
  1329. opacity: 0;
  1330. transition: opacity 0.5s;
  1331. &.sticky {
  1332. display: block;
  1333. opacity: 1;
  1334. z-index: 20;
  1335. }
  1336. .nav-collpase {
  1337. padding: 1rem 0;
  1338. background-color: #fcfcfc;
  1339. box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  1340. }
  1341. }
  1342. .navbar-main.sticky+.hero {
  1343. padding-top: 53px;
  1344. }
  1345. .page-link {
  1346. color: #727679;
  1347. &:hover {
  1348. color: #fff;
  1349. background-color: #ee7800;
  1350. border-color: #ee7800;
  1351. }
  1352. }
  1353. .page-link:focus {
  1354. color: #fff;
  1355. background-color: #ee7800;
  1356. border-color: #ee7800;
  1357. box-shadow: none;
  1358. }
  1359. .page-active {
  1360. color: #fff;
  1361. background-color: #ee7800;
  1362. border-color: #ee7800;
  1363. }
  1364. .fixed-btn {
  1365. position: fixed;
  1366. right: 15px;
  1367. bottom: 2rem;
  1368. .btn-gotop,
  1369. .btn-login,
  1370. .btn-favor {
  1371. cursor: pointer;
  1372. padding: 1.2rem 0.8rem;
  1373. background-color: rgba(255, 255, 255, 0.897);
  1374. display: flex;
  1375. align-items: center;
  1376. box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  1377. -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
  1378. 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  1379. -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
  1380. 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  1381. }
  1382. }
  1383. .footer__block-socials {
  1384. padding-left: 0;
  1385. display: flex;
  1386. align-items: center;
  1387. justify-content: space-between;
  1388. @media (max-width: 1100px) {
  1389. & img {
  1390. width: 30px;
  1391. }
  1392. }
  1393. @media (max-width: 575px) {
  1394. justify-content: center;
  1395. & li {
  1396. margin: 5px;
  1397. }
  1398. }
  1399. }
  1400. .like {
  1401. display: none;
  1402. }
  1403. // #pills-intro {
  1404. // .work__row {
  1405. // .col-md-4:nth-of-type(3n-1) {
  1406. // margin-top: .5rem;
  1407. // }
  1408. // .col-md-4:nth-of-type(3n) {
  1409. // margin-top: -1rem;
  1410. // }
  1411. // .col-md-4:nth-of-type(3n+1) {
  1412. // margin-top: -1rem;
  1413. // }
  1414. // .col-md-4:nth-of-type(2) {
  1415. // margin-top: .5rem;
  1416. // }
  1417. // }
  1418. // }
  1419. .emodal {
  1420. &-title {
  1421. color: #ee7800;
  1422. margin: 0 auto;
  1423. font-size: 18px;
  1424. }
  1425. .form-control:focus {
  1426. border-color: #ffb76f;
  1427. box-shadow: none;
  1428. }
  1429. .btn-plus {
  1430. color: #aaa;
  1431. border-color: #aaa;
  1432. }
  1433. .btn-send {
  1434. background-color: #ee7800;
  1435. color: white;
  1436. width: 30%;
  1437. border: none;
  1438. padding: 0.875rem 1rem;
  1439. border-radius: 2px;
  1440. }
  1441. .btn-dismiss {
  1442. width: 30%;
  1443. border: none;
  1444. padding: 0.875rem 1rem;
  1445. background-color: #d1d2d3;
  1446. border-radius: 2px;
  1447. color: #fff;
  1448. }
  1449. }
  1450. #putEmail_hidden {
  1451. border: 1px solid;
  1452. border-radius: 28px;
  1453. color: #ee7800 !important;
  1454. .fm-email-btn {
  1455. padding: 2px 5px 2px 5px;
  1456. }
  1457. }
  1458. /* designers.html start */
  1459. .text-primary {
  1460. color: #ee7800 !important;
  1461. }
  1462. .border-primary {
  1463. border-color: #ee7800 !important;
  1464. }
  1465. .container-searchbar {
  1466. max-width: 990px;
  1467. }
  1468. .list-head {
  1469. font-weight: bold;
  1470. font-size: 1.5rem;
  1471. font-family: "Microsoft JhengHei", Helvetica, Noto Sans TC, Roboto, Arial, sans-serif;
  1472. }
  1473. .search-bar-keyword {
  1474. a {
  1475. color: #ee7800;
  1476. text-decoration: none;
  1477. background-color: transparent;
  1478. }
  1479. }
  1480. .search-bar {
  1481. .search-bar-aside {
  1482. position: fixed;
  1483. top: 490px;
  1484. z-index: 999;
  1485. transform: translateX(0%);
  1486. }
  1487. .search-bar-aside-text {
  1488. position: absolute;
  1489. top: -24px;
  1490. color: #444;
  1491. background: rgba(255, 255, 255, 0.75);
  1492. padding: 0 5px;
  1493. width: 100%;
  1494. text-align: right;
  1495. cursor: pointer;
  1496. }
  1497. .search-bar-block {
  1498. padding: 0 8px 8px 0;
  1499. transform: translateX(0%);
  1500. transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  1501. background: rgba(255, 255, 255, 0.75);
  1502. }
  1503. .search-bar-aside-arrow {
  1504. transition: transform 300ms ease-in-out;
  1505. }
  1506. .is-hidden {
  1507. transform: translateX(-90%);
  1508. }
  1509. .is-rotate {
  1510. transform: rotate(180deg);
  1511. }
  1512. }
  1513. .input-group {
  1514. height: calc(1.5em + 2rem + 2px);
  1515. .input-group-text,
  1516. .keywords {
  1517. font-weight: bold;
  1518. font-size: 0.875rem !important;
  1519. }
  1520. .input-group-text {
  1521. display: flex;
  1522. -webkit-box-align: center;
  1523. align-items: center;
  1524. padding: 0.5rem 2rem !important;
  1525. margin-bottom: 0;
  1526. color: #fff;
  1527. text-align: center;
  1528. white-space: nowrap;
  1529. background-color: #ee7800;
  1530. border: 2px solid #ee7800;
  1531. line-height: 1.5;
  1532. border-radius: 0.3rem;
  1533. cursor: pointer;
  1534. }
  1535. .keywords {
  1536. border: 2px solid;
  1537. padding: 0 2rem;
  1538. }
  1539. }
  1540. .search-tab {
  1541. .bg-main {
  1542. background-color: #fafafa;
  1543. }
  1544. .dropdown-wrapper {
  1545. display: flex;
  1546. }
  1547. small {
  1548. font-size: 16px;
  1549. span {
  1550. font-size: 20px;
  1551. font-weight: bold;
  1552. }
  1553. }
  1554. .btn-original {
  1555. background-color: #fff;
  1556. font-weight: bold;
  1557. border-color: #dbdbdb;
  1558. }
  1559. .btn-original:focus {
  1560. box-shadow: none;
  1561. color: #ee7800;
  1562. border-color: #ee7800;
  1563. }
  1564. .tab-content {
  1565. .dropdown-menu {
  1566. padding: 0;
  1567. min-width: 20rem;
  1568. max-height: 300px;
  1569. overflow-y: auto;
  1570. transform: none !important;
  1571. top: 38px !important;
  1572. inset: auto !important;
  1573. }
  1574. }
  1575. .form-check-input,
  1576. .form-check-label {
  1577. cursor: pointer;
  1578. }
  1579. .form-check-input:checked {
  1580. background-color: #000;
  1581. border-color: #000;
  1582. }
  1583. .form-check-input:focus {
  1584. box-shadow: none !important;
  1585. }
  1586. .search-tab-filter {
  1587. a {
  1588. color: #000;
  1589. &:hover {
  1590. text-decoration: none;
  1591. color: #ee7800;
  1592. }
  1593. }
  1594. .divider::before {
  1595. content: "";
  1596. border: 0.5px solid #aaaaaa;
  1597. }
  1598. }
  1599. }
  1600. .designer-container {
  1601. h6 {
  1602. color: #000;
  1603. }
  1604. img {
  1605. width: 100%;
  1606. height: 300px;
  1607. object-fit: cover;
  1608. }
  1609. .item-card-person {
  1610. width: 80px;
  1611. height: 80px;
  1612. border-radius: 50%;
  1613. background-size: cover;
  1614. box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.15);
  1615. }
  1616. .item-card-company,
  1617. h6 {
  1618. -webkit-box-orient: vertical;
  1619. font-size: 0.875rem;
  1620. overflow: hidden;
  1621. text-overflow: ellipsis;
  1622. display: -webkit-box;
  1623. -webkit-line-clamp: 1;
  1624. line-height: 1.25;
  1625. height: 1.09375rem;
  1626. }
  1627. .ad-image {
  1628. width: 100%;
  1629. height: 295px;
  1630. background-position: center center;
  1631. background-repeat: no-repeat;
  1632. background-size: contain;
  1633. image-rendering: -webkit-optimize-contrast;
  1634. }
  1635. }
  1636. .search-tab-itemResult img {
  1637. cursor: pointer;
  1638. }
  1639. .btn-box {
  1640. position: fixed;
  1641. right: 13px;
  1642. bottom: 170px;
  1643. // bottom: 225px;
  1644. z-index: 10;
  1645. font-size: 32px;
  1646. width: 50px;
  1647. height: 50px;
  1648. cursor: pointer;
  1649. @media (max-width: 767px) {
  1650. right: 5px;
  1651. bottom: 85px;
  1652. }
  1653. a {
  1654. color: #000;
  1655. display: flex;
  1656. justify-content: center;
  1657. align-items: center;
  1658. }
  1659. button {
  1660. width: 46px;
  1661. height: 46px;
  1662. margin: 3px 0;
  1663. border: none;
  1664. border-radius: 5px;
  1665. box-shadow: 0px 2px 3px #ccc;
  1666. background: rgba(255, 255, 255, 0.9);
  1667. &:hover {
  1668. transition: all .5s;
  1669. background: rgb(255, 255, 255);
  1670. }
  1671. &:hover img {
  1672. filter: invert(50%) sepia(50%) saturate(4600%) hue-rotate(365deg) brightness(100%) contrast(100%);
  1673. }
  1674. img {
  1675. width: 20px;
  1676. }
  1677. }
  1678. .btn-gotop {
  1679. img {
  1680. margin-top: -7px;
  1681. }
  1682. }
  1683. // button {
  1684. // width: 50px;
  1685. // height: 50px;
  1686. // border: none;
  1687. // &:hover {
  1688. // .top_img {
  1689. // box-shadow: 1px 3px 11px -3px rgba(0, 0, 0, 0.35);
  1690. // }
  1691. // }
  1692. // .top_img {
  1693. // width: 50px;
  1694. // height: 50px;
  1695. // display: block;
  1696. // background-size: cover;
  1697. // background-image: url("https://hhh.com.tw/assets/images/section/icon/new-tool-icon/top1.svg");
  1698. // }
  1699. // }
  1700. // .note,
  1701. // .user,
  1702. // .cart,
  1703. // .top_img {
  1704. // background: #fff;
  1705. // box-shadow: 1px 3px 11px -3px rgba(0, 0, 0, 0.55);
  1706. // &:hover {
  1707. // box-shadow: 1px 3px 11px -3px rgba(0, 0, 0, 0.35);
  1708. // }
  1709. // }
  1710. // .note {
  1711. // margin-bottom: 10px;
  1712. // img {
  1713. // width: 22px;
  1714. // height: 22px;
  1715. // margin-left: 5px;
  1716. // }
  1717. // }
  1718. // .user {
  1719. // margin-bottom: 10px;
  1720. // img {
  1721. // width: 20px;
  1722. // height: 20px;
  1723. // }
  1724. // }
  1725. // .cart {
  1726. // img {
  1727. // width: 25px;
  1728. // height: 25px;
  1729. // }
  1730. // }
  1731. }
  1732. .fixed-bottom {
  1733. padding: 10px 0;
  1734. position: fixed !important;
  1735. bottom: 0;
  1736. right: 0;
  1737. left: 0;
  1738. background-color: white;
  1739. justify-content: space-evenly;
  1740. box-shadow: 0 8px 15px 2px rgba(0, 0, 0, 0.15);
  1741. display: none;
  1742. @media (max-width: 767px) {
  1743. display: flex;
  1744. }
  1745. div {
  1746. padding: 0 15px;
  1747. }
  1748. a {
  1749. display: flex;
  1750. flex-direction: column;
  1751. justify-content: center;
  1752. align-items: center;
  1753. cursor: pointer;
  1754. img {
  1755. width: 70px;
  1756. height: auto;
  1757. max-width: 100%;
  1758. }
  1759. span {
  1760. margin: 5px 0;
  1761. }
  1762. }
  1763. }
  1764. .designerlist-footer {
  1765. @media (max-width: 767px) {
  1766. display: none;
  1767. }
  1768. }
  1769. .designer-pagination {
  1770. @media (max-width: 767px) {
  1771. margin: 0 70px 115px;
  1772. }
  1773. }
  1774. /* designers.html end */
  1775. /* columns.html start */
  1776. #columns {
  1777. .dropdown-menu li:hover .sub-menu {
  1778. visibility: visible;
  1779. }
  1780. // .dropdown:hover .dropdown-menu {
  1781. // display: block;
  1782. // }
  1783. // .dropdown-menu>li:hover>.thdmenu-block {
  1784. // display: block;
  1785. // }
  1786. }
  1787. /* columns.html end */