rv_web.css 51 KB

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