style.css 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428
  1. @import "./base.css";
  2. .headtop {
  3. background-color: #fff;
  4. }
  5. .header_wapper {
  6. position: fixed;
  7. left: 0;
  8. top: 0;
  9. z-index: 200;
  10. width: 100%;
  11. box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.06);
  12. }
  13. .header_layout {
  14. display: flex;
  15. align-items: center;
  16. padding: 16px 25px;
  17. background: #fff;
  18. }
  19. .header_logo a {
  20. display: block;
  21. font-size: 0;
  22. }
  23. .header_logo img {
  24. max-width: 440px;
  25. height: 65px;
  26. object-fit: contain;
  27. }
  28. .header_layout .header_menu {
  29. position: relative;
  30. padding-left: 50px;
  31. flex: 1;
  32. }
  33. .header_layout .nav .wp-menu {
  34. display: flex;
  35. justify-content: flex-end;
  36. align-items: center;
  37. }
  38. .header_layout .nav .wp-menu .menu-item {
  39. width: 10%;
  40. margin-top: 16px;
  41. padding-bottom: 22px;
  42. max-width: 120px;
  43. position: relative;
  44. }
  45. .header_layout .nav .wp-menu .menu-item .menu-link {
  46. display: inline-block;
  47. width: 100%;
  48. font-size: 18px;
  49. line-height: 20px;
  50. text-align: center;
  51. white-space: nowrap;
  52. color: #767676;
  53. }
  54. .header_layout .nav .wp-menu .menu-item::before {
  55. content: "";
  56. position: absolute;
  57. bottom: 10px;
  58. left: 50%;
  59. transform: translateX(-50%);
  60. width: 0;
  61. height: 2px;
  62. background-color: var(--vt-c-primary);
  63. transition: width 0.3s ease-in-out;
  64. }
  65. .header_layout .nav .wp-menu .menu-item a:hover {
  66. color: var(--vt-c-primary);
  67. }
  68. .header_layout .nav .wp-menu .menu-item.hover::before {
  69. width: 24px;
  70. }
  71. .header_layout .nav .wp-menu .menu-item.hover .menu-link {
  72. color: var(--vt-c-primary);
  73. }
  74. .header_layout .nav .wp-menu .menu-item::after {
  75. content: "";
  76. position: absolute;
  77. top: 2px;
  78. right: 0;
  79. height: 20px;
  80. border-right: 1px solid rgba(132, 132, 132, 20%);
  81. }
  82. .header_layout .nav .sub-menu {
  83. display: none;
  84. position: absolute;
  85. left: 50%;
  86. top: 38px;
  87. min-width: 130px;
  88. transform: translateX(-50%);
  89. z-index: 100;
  90. padding: 10px 0;
  91. background: #fff;
  92. box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  93. 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  94. }
  95. .header_layout .nav .sub-menu .sub-item {
  96. position: relative;
  97. white-space: nowrap;
  98. vertical-align: top;
  99. _zoom: 1;
  100. }
  101. .header_layout .nav .sub-menu .sub-item a {
  102. display: block;
  103. height: 32px;
  104. line-height: 32px;
  105. padding: 0 12px;
  106. font-size: 16px;
  107. text-align: center;
  108. }
  109. .header_layout .nav .sub-menu .sub-item a:hover {
  110. color: var(--vt-c-primary);
  111. background-color: #f5f5f5;
  112. }
  113. .header_layout .mobile_menu {
  114. position: relative;
  115. display: none;
  116. margin-left: 15px;
  117. padding-left: 15px;
  118. }
  119. .header_layout .mobile_menu .menu_divider {
  120. position: absolute;
  121. top: 50%;
  122. left: 0;
  123. height: 20px;
  124. transform: translateY(-50%);
  125. border-left: 1px solid rgba(132, 132, 132, 0.2);
  126. }
  127. .mobile_menu .mobile_menu_taggle {
  128. width: 40px;
  129. height: 40px;
  130. }
  131. .wp-navi-aside {
  132. display: none;
  133. }
  134. .banner_wrapper {
  135. padding-top: 98px;
  136. background: #fff;
  137. }
  138. .banner_wrapper .inner {
  139. width: auto;
  140. padding: 0;
  141. max-width: 1920px;
  142. text-align: center;
  143. position: relative;
  144. }
  145. .banner_wrapper .focus .focus-pagination {
  146. position: absolute;
  147. left: 50%;
  148. bottom: 12px;
  149. right: auto;
  150. height: auto;
  151. transform: translateX(-50%);
  152. display: inline-block;
  153. padding: 6px 9px;
  154. border-radius: 30px;
  155. background-color: rgba(0, 0, 0, 0.56);
  156. z-index: 60;
  157. font-size: 0;
  158. }
  159. .banner_wrapper .focus .focus-page {
  160. display: inline-block;
  161. width: 12px;
  162. height: 12px;
  163. margin: 0 4px;
  164. line-height: 1;
  165. font-size: 0;
  166. border-radius: 6px;
  167. background-color: rgba(255, 255, 255, 0.6);
  168. -webkit-transition: all 0.3s ease-in-out;
  169. transition: all 0.3s ease-in-out;
  170. cursor: pointer;
  171. }
  172. .banner_wrapper .focus .focus-page-active {
  173. width: 24px;
  174. background-color: rgba(255, 255, 255, 1);
  175. }
  176. .banner_wrapper .focus .focus-navigation {
  177. width: 66px;
  178. height: 66px;
  179. opacity: 0.7;
  180. filter: alpha(opacity=70);
  181. font-size: 0;
  182. }
  183. .banner_wrapper .focus .focus-navigation:hover {
  184. opacity: 1;
  185. filter: alpha(opacity=100);
  186. }
  187. .banner_wrapper .focus .focus-navigation:active {
  188. opacity: 1;
  189. filter: alpha(opacity=100);
  190. }
  191. .banner_wrapper .focus .focus-prev {
  192. background: url("../images/botton_prev.png") no-repeat center/contain;
  193. }
  194. .banner_wrapper .focus .focus-next {
  195. background: url("../images/botton_next.png") no-repeat center/contain;
  196. }
  197. .header_btm_wrapper {
  198. padding: 130px 0;
  199. display: flex;
  200. width: 100%;
  201. max-width: 1280px;
  202. margin: 0 auto;
  203. }
  204. .home_lay_title {
  205. margin-bottom: 30px;
  206. font-size: 30px;
  207. color: var(--vt-c-indigo);
  208. line-height: 1;
  209. }
  210. .home_lay_title span {
  211. text-transform: uppercase;
  212. padding-left: 10px;
  213. font-weight: 100;
  214. color: rgba(123, 123, 123, 1);
  215. }
  216. .home_lay_title.white {
  217. color: #fff;
  218. }
  219. .home_lay_title.white span {
  220. color: #fff;
  221. }
  222. .home_lay_item_box {
  223. padding: 60px 0;
  224. }
  225. .news_tit {
  226. display: flex;
  227. align-items: center;
  228. justify-content: space-between;
  229. font-size: 20px;
  230. color: var(--vt-c-indigo);
  231. line-height: 1;
  232. margin-bottom: 14px;
  233. }
  234. .news_tit .list_more {
  235. font-size: 16px;
  236. }
  237. .news_lay_box {
  238. display: grid;
  239. grid-template-columns: 2fr 1fr 1fr;
  240. gap: 24px;
  241. }
  242. .news_lay_box .news_lay_item {
  243. /* flex: 1; */
  244. /* max-width: 390px; */
  245. padding: 20px;
  246. overflow: hidden;
  247. background-color: #fff;
  248. }
  249. .news_lay_box .news_lay_item .list_item {
  250. position: relative;
  251. padding: 20px 0;
  252. font-size: 14px;
  253. line-height: 28px;
  254. border-bottom: 1px solid #e5e5e5;
  255. }
  256. .news_lay_box .news_lay_item .list_item img {
  257. width: 100%;
  258. }
  259. .news_lay_box .news_lay_item .list_item .cover {
  260. display: none;
  261. height: 430px;
  262. width: 100%;
  263. overflow: hidden;
  264. }
  265. .news_lay_box .news_lay_item .list_item.news_1 {
  266. display: block;
  267. }
  268. .news_lay_box .news_lay_item .list_item .item_info {
  269. display: flex;
  270. align-items: center;
  271. justify-content: space-between;
  272. }
  273. .news_lay_box .news_lay_item .list_item.news_1 .item_info {
  274. position: absolute;
  275. display: block;
  276. left: 0;
  277. bottom: 20px;
  278. width: 100%;
  279. height: 80px;
  280. padding: 10px 20px;
  281. background: linear-gradient(180deg, rgba(3, 3, 3, 0) 0%, #000000 100%);
  282. color: #fff;
  283. }
  284. .news_lay_box .news_lay_item .list_item.news_1 .cover {
  285. display: block;
  286. }
  287. .news_lay_box .news_lay_item .list_item.news_1 .first_date {
  288. display: block;
  289. }
  290. .news_lay_box .news_lay_item .list_item.news_1 .item_date {
  291. display: none;
  292. }
  293. .news_lay_box .news_lay_item .list_item .first_date {
  294. display: none;
  295. font-size: 16px;
  296. }
  297. .news_lay_box .news_lay_item .list_item .item_date {
  298. display: block;
  299. color: #848484;
  300. }
  301. .news_lay_box .news_lay_item .list_item.news_1 {
  302. padding-top: 0;
  303. font-size: 24px;
  304. line-height: 28px;
  305. }
  306. .news_lay_box .news_lay_item .list_item.news_1 .title {
  307. padding-right: 0;
  308. }
  309. .news_lay_box .news_lay_item .list_item.news_1 a:hover {
  310. color: #fff;
  311. }
  312. .news_lay_box .news_lay_item .list_item .title {
  313. flex: 1;
  314. padding-right: 30px;
  315. text-overflow: ellipsis;
  316. white-space: nowrap;
  317. overflow: hidden;
  318. }
  319. .news_lay_box .news_lay_item .s_item {
  320. padding: 12px 0;
  321. font-size: 14px;
  322. line-height: 28px;
  323. border-bottom: 1px solid #e5e5e5;
  324. }
  325. .news_lay_box .news_lay_item .s_item .title {
  326. width: 100%;
  327. overflow: hidden;
  328. text-overflow: ellipsis;
  329. white-space: nowrap;
  330. }
  331. .news_lay_box .news_lay_item .s_item .item_date {
  332. font-size: 12px;
  333. color: #848484;
  334. }
  335. .news_lay_box .news_lay_item .s_item img {
  336. height: 210px;
  337. width: 100%;
  338. object-fit: cover;
  339. }
  340. .news_lay_box .news_lay_item .s_item .cover {
  341. display: none;
  342. height: 210px;
  343. width: 100%;
  344. overflow: hidden;
  345. margin-bottom: 10px;
  346. }
  347. .news_lay_box .news_lay_item .s_item.news_1 {
  348. padding-top: 0;
  349. font-size: 16px;
  350. }
  351. .news_lay_box .news_lay_item .s_item.news_1 .cover {
  352. display: block;
  353. }
  354. .news_lay_box .news_lay_item .item {
  355. width: 100%;
  356. color: var(--vt-c-indigo);
  357. cursor: pointer;
  358. overflow: hidden;
  359. transition: all 0.2s ease-in-out;
  360. }
  361. .news_lay_box .news_lay_item .item a:hover {
  362. color: var(--vt-c-primary);
  363. }
  364. .news_lay_box .news_lay_item .item:hover img {
  365. transform: scale(1.2);
  366. transition: all 0.2s ease-in-out;
  367. }
  368. .list_more {
  369. text-align: center;
  370. }
  371. .list_more.mt {
  372. margin-top: 50px;
  373. }
  374. .list_more .more_text {
  375. color: var(--vt-c-primary);
  376. cursor: pointer;
  377. }
  378. .list_more .arrow {
  379. display: inline-block;
  380. margin-left: 6px;
  381. width: 18px;
  382. height: 18px;
  383. object-fit: contain;
  384. vertical-align: text-bottom;
  385. background: url("../images/arrow_right_primary.png") no-repeat center/contain;
  386. }
  387. .spe_cards {
  388. display: flex;
  389. height: 460px;
  390. }
  391. .spe_cards .cards_item {
  392. position: relative;
  393. flex: 1;
  394. margin: 0 12px;
  395. height: 460px;
  396. padding: 70px 20px 40px;
  397. color: #fff;
  398. box-sizing: border-box;
  399. background-color: #fff;
  400. transition: all 0.3s ease-in-out;
  401. }
  402. .spe_cards .cards_item:first-child {
  403. margin-left: 0;
  404. }
  405. .spe_cards .cards_item:last-child {
  406. margin-right: 0;
  407. }
  408. .spe_cards .cards_item .card_icon {
  409. line-height: 1;
  410. }
  411. .spe_cards .cards_item .card_icon {
  412. width: 72px;
  413. height: 72px;
  414. }
  415. .spe_cards .cards_item .card_icon.icon_1 {
  416. background: url("../images/icon_home_specialty_1.png") no-repeat center /
  417. contain;
  418. }
  419. .spe_cards .cards_item:hover .card_icon.icon_1 {
  420. background: url("../images/icon_home_specialty_1_hover.png") no-repeat center /
  421. contain;
  422. }
  423. .spe_cards .cards_item .card_icon.icon_2 {
  424. background: url("../images/icon_home_specialty_2.png") no-repeat center /
  425. contain;
  426. }
  427. .spe_cards .cards_item:hover .card_icon.icon_2 {
  428. background: url("../images/icon_home_specialty_2_hover.png") no-repeat center /
  429. contain;
  430. }
  431. .spe_cards .cards_item .card_icon.icon_3 {
  432. background: url("../images/icon_home_specialty_3.png") no-repeat center /
  433. contain;
  434. }
  435. .spe_cards .cards_item:hover .card_icon.icon_3 {
  436. background: url("../images/icon_home_specialty_3_hover.png") no-repeat center /
  437. contain;
  438. }
  439. .spe_cards .cards_item .card_icon.icon_4 {
  440. background: url("../images/icon_home_specialty_4.png") no-repeat center /
  441. contain;
  442. }
  443. .spe_cards .cards_item:hover .card_icon.icon_4 {
  444. background: url("../images/icon_home_specialty_4_hover.png") no-repeat center /
  445. contain;
  446. }
  447. .spe_cards .cards_item .card_icon.icon_5 {
  448. background: url("../images/icon_home_specialty_5.png") no-repeat center /
  449. contain;
  450. }
  451. .spe_cards .cards_item:hover .card_icon.icon_5 {
  452. background: url("../images/icon_home_specialty_5_hover.png") no-repeat center /
  453. contain;
  454. }
  455. .spe_cards .cards_item .card_tit {
  456. margin-top: 20px;
  457. font-size: 20px;
  458. line-height: 1;
  459. color: var(--vt-c-primary);
  460. }
  461. .spe_cards .cards_item .card_tit a {
  462. color: var(--vt-c-primary);
  463. }
  464. .spe_cards .cards_item:hover .card_tit,
  465. .spe_cards .cards_item:hover .card_tit a {
  466. color: #fff;
  467. }
  468. .spe_cards .cards_item .card_desc a {
  469. color: #fff;
  470. }
  471. .spe_cards .cards_item .card_desc {
  472. position: absolute;
  473. bottom: 0;
  474. left: 0;
  475. width: 100%;
  476. padding: 0 20px 40px;
  477. opacity: 0;
  478. }
  479. .spe_cards .cards_item .card_desc .desc {
  480. font-size: 14px;
  481. line-height: 24px;
  482. }
  483. .spe_cards .cards_item .card_desc .more {
  484. margin-top: 20px;
  485. text-align: r;
  486. }
  487. .spe_cards .cards_item .card_desc .more .more_text {
  488. font-size: 16px;
  489. color: #fff;
  490. }
  491. .spe_cards .cards_item .card_desc .more .arrow {
  492. margin-left: 6px;
  493. width: 18px;
  494. height: 18px;
  495. display: inline-block;
  496. object-fit: contain;
  497. vertical-align: text-bottom;
  498. background: url("../images/arrow_right.png") no-repeat center/contain;
  499. }
  500. .spe_cards .cards_item:hover {
  501. flex: 2;
  502. background-color: var(--vt-c-primary);
  503. }
  504. .spe_cards .cards_item:hover .card_desc {
  505. animation: fadeInUp 0.3s ease-in-out;
  506. animation-fill-mode: forwards;
  507. }
  508. .wrapper.wrapper_teacher_bg {
  509. background: url("../images/bg_teachers.png") no-repeat center/cover;
  510. }
  511. /*teacher*/
  512. .teachers_box .teachers_swiper {
  513. width: 100%;
  514. display: grid;
  515. gap: 24px;
  516. grid-template-columns: repeat(5, 1fr);
  517. }
  518. .teachers_box .teachers_swiper .teacher_slide {
  519. text-align: center;
  520. }
  521. .teachers_box .teacher_item {
  522. width: 100%;
  523. position: relative;
  524. overflow: hidden;
  525. }
  526. .teachers_box .teacher_item img {
  527. width: 100%;
  528. height: 100%;
  529. object-fit: contain;
  530. border-radius: 50%;
  531. transition: all 0.3s ease-in-out;
  532. }
  533. .teachers_box .teacher_item:hover img {
  534. transform: scale(1.2);
  535. }
  536. .teachers_box .teacher_slide .item_footer {
  537. margin-top: 20px;
  538. display: block;
  539. }
  540. .teachers_box .teacher_slide .name a {
  541. color: #000;
  542. font-size: 20px;
  543. font-weight: 600;
  544. }
  545. .tabs_header {
  546. display: flex;
  547. align-items: center;
  548. margin-bottom: 30px;
  549. }
  550. .tabs_header .home_lay_title {
  551. margin-bottom: 0;
  552. }
  553. .tabs_header .tabs_nav_list {
  554. flex: 1;
  555. position: relative;
  556. display: flex;
  557. align-self: stretch;
  558. overflow: hidden;
  559. white-space: nowrap;
  560. justify-content: flex-end;
  561. }
  562. .tabs_header .tabs_nav_list .list_item {
  563. position: relative;
  564. padding: 14px 0;
  565. font-size: 18px;
  566. color: rgba(0, 0, 0, 0.8);
  567. cursor: pointer;
  568. }
  569. .works_tab .tabs_header .tabs_nav_list .list_item {
  570. color: rgba(255, 255, 255, 0.8);
  571. }
  572. .tabs_header .tabs_nav_list .list_item.selected {
  573. color: #000;
  574. }
  575. .works_tab .tabs_header .tabs_nav_list .list_item.selected {
  576. color: #fff;
  577. }
  578. .tabs_header .tabs_nav_list .list_item.selected::after {
  579. position: absolute;
  580. content: "";
  581. bottom: 0;
  582. left: 50%;
  583. -webkit-transform: translateX(-50%);
  584. -ms-transform: translateX(-50%);
  585. transform: translateX(-50%);
  586. width: 28px;
  587. height: 2px;
  588. background-color: var(--vt-c-primary);
  589. }
  590. .works_tab .tabs_header .tabs_nav_list .list_item.selected::after {
  591. background-color: #fff;
  592. }
  593. .tabs_header .tabs_nav_list .list_item + .list_item {
  594. margin-left: 30px;
  595. }
  596. .tab_list {
  597. display: grid;
  598. grid-template-columns: repeat(4, 1fr);
  599. gap: 24px;
  600. }
  601. .tab_list.research_list {
  602. grid-template-columns: repeat(2, 1fr);
  603. }
  604. .tab_list .list_item,
  605. .page_article_list .list_item {
  606. width: 100%;
  607. background-color: #fff;
  608. overflow: hidden;
  609. position: relative;
  610. }
  611. .tab_list .list_item .item {
  612. position: relative;
  613. display: block;
  614. /* border-bottom: 2px solid rgba(159, 159, 159, 0.5); */
  615. cursor: pointer;
  616. }
  617. .page_article_list .list_item .item {
  618. display: flex;
  619. align-items: center;
  620. margin-bottom: 20px;
  621. }
  622. .page_article_list .list_item .item:hover {
  623. background-color: #f5f5f5;
  624. }
  625. /* .tab_list .list_item .item::before {
  626. content: "";
  627. position: absolute;
  628. bottom: 0;
  629. right: 0;
  630. border-width: 6px;
  631. border-style: solid;
  632. border-color: transparent rgba(159, 159, 159, 0.5) rgba(159, 159, 159, 0.5)
  633. transparent;
  634. } */
  635. /* .tab_list .list_item .item::after {
  636. content: "";
  637. position: absolute;
  638. bottom: -2px;
  639. right: 0;
  640. width: 0;
  641. height: 2px;
  642. background-color: var(--vt-c-primary);
  643. transition: width 0.3s ease-in-out;
  644. }
  645. .tab_list .list_item .item:hover::before {
  646. border-color: transparent var(--vt-c-primary) var(--vt-c-primary) transparent;
  647. }
  648. .tab_list .list_item .item:hover::after {
  649. width: 100%;
  650. } */
  651. .tab_list .list_item .item:hover img,
  652. .page_article_list .list_item .item:hover img {
  653. transform: scale(1.2);
  654. }
  655. .tab_list.research_list .list_item .item {
  656. position: relative;
  657. }
  658. .tab_list.research_list .list_item .item .list_img {
  659. width: 100%;
  660. height: 400px;
  661. overflow: hidden;
  662. }
  663. .tab_list.research_list .list_item .item .info_box {
  664. position: absolute;
  665. left: 0;
  666. bottom: 0;
  667. padding: 30px 20px;
  668. width: 100%;
  669. color: #fff;
  670. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  671. opacity: 0;
  672. overflow: hidden;
  673. }
  674. .tab_list.research_list .list_item .item:hover .info_box {
  675. animation: fadeInUp 0.3s ease-in-out;
  676. animation-fill-mode: forwards;
  677. }
  678. .tab_list.research_list .list_item .item .info_box .item_tit {
  679. height: auto;
  680. font-size: 20px;
  681. font-weight: 600;
  682. width: 100%;
  683. overflow: hidden;
  684. text-overflow: ellipsis;
  685. white-space: nowrap;
  686. color: #fff;
  687. }
  688. .tab_list.research_list .list_item .item .info_box .item_date {
  689. color: #fff;
  690. }
  691. .tab_list .list_item .list_img {
  692. width: 100%;
  693. height: 300px;
  694. overflow: hidden;
  695. }
  696. .tab_list .list_item img {
  697. width: 100%;
  698. height: 300px;
  699. object-fit: cover;
  700. transition: all 0.3s ease-in-out;
  701. }
  702. .tab_list .list_item .info_box {
  703. padding: 16px 18px;
  704. }
  705. .tab_list .list_item .item_tit {
  706. height: 48px;
  707. font-size: 16px;
  708. line-height: 24px;
  709. color: var(--vt-c-indigo);
  710. overflow: hidden;
  711. }
  712. .tab_list .list_item .item_desc {
  713. height: 72px;
  714. overflow: hidden;
  715. margin-top: 20px;
  716. font-size: 16px;
  717. line-height: 24px;
  718. font-weight: 400;
  719. color: #666666;
  720. word-break: break-all;
  721. }
  722. .tab_list .list_item .item_date {
  723. font-size: 14px;
  724. margin-top: 10px;
  725. font-weight: 400;
  726. color: #999999;
  727. }
  728. .page_article_list .list_img {
  729. width: 240px;
  730. height: 160px;
  731. overflow: hidden;
  732. }
  733. .page_article_list img {
  734. width: 100%;
  735. height: 160px;
  736. object-fit: cover;
  737. transition: all 0.3s ease-in-out;
  738. }
  739. .page_article_list .info_box {
  740. flex: 1;
  741. height: 160px;
  742. padding: 16px;
  743. }
  744. .page_article_list .item_tit {
  745. width: 100%;
  746. font-weight: 500;
  747. font-size: 20px;
  748. color: #333333;
  749. line-height: 24px;
  750. white-space: nowrap;
  751. text-overflow: ellipsis;
  752. overflow: hidden;
  753. }
  754. .page_article_list .item_desc {
  755. height: 70px;
  756. margin-top: 15px;
  757. font-size: 12px;
  758. line-height: 20px;
  759. font-weight: 400;
  760. color: #666666;
  761. overflow: hidden;
  762. word-break: break-all;
  763. }
  764. .page_article_list .item_date {
  765. font-size: 12px;
  766. font-weight: 300;
  767. color: #999999;
  768. }
  769. .research_bg {
  770. background: url("../images/bg_research.png") no-repeat center top/100% auto;
  771. }
  772. .teach_bg {
  773. position: relative;
  774. }
  775. .talent_tab {
  776. position: relative;
  777. z-index: 2;
  778. }
  779. .work_bg {
  780. background: url("../images/bg_works.png") no-repeat center top/100% auto;
  781. }
  782. .works_tab .tab_list .list_item {
  783. height: 320px;
  784. }
  785. .works_tab .tab_list .list_item .item_link {
  786. display: block;
  787. position: relative;
  788. width: 100%;
  789. height: 100%;
  790. overflow: hidden;
  791. cursor: pointer;
  792. }
  793. .works_tab .tab_list .list_item .item_link .item_txt {
  794. position: absolute;
  795. left: 0;
  796. bottom: 0;
  797. padding: 30px 20px;
  798. width: 100%;
  799. color: #fff;
  800. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  801. opacity: 0;
  802. overflow: hidden;
  803. }
  804. .works_tab .tab_list .list_item .item_link .item_txt .name {
  805. font-size: 20px;
  806. font-weight: 600;
  807. width: 100%;
  808. overflow: hidden;
  809. text-overflow: ellipsis;
  810. white-space: nowrap;
  811. }
  812. .works_tab .tab_list .list_item .item_link .item_txt .name a {
  813. color: #fff;
  814. }
  815. .works_tab .tab_list .list_item .item_link:hover img {
  816. transform: scale(1.2);
  817. }
  818. .works_tab .tab_list .list_item .item_link:hover .item_txt {
  819. animation: fadeInUp 0.3s ease-in-out;
  820. animation-fill-mode: forwards;
  821. }
  822. .works_tab .tab_list .list_item img {
  823. width: 100%;
  824. height: 100%;
  825. object-fit: cover;
  826. transition: all 0.3s ease-in-out;
  827. }
  828. @keyframes fadeInUp {
  829. from {
  830. opacity: 0;
  831. transform: translate3d(0, 100%, 0);
  832. }
  833. to {
  834. opacity: 1;
  835. transform: translate3d(0, 0, 0);
  836. }
  837. }
  838. .services_bg {
  839. position: relative;
  840. }
  841. /* .services_bg::after {
  842. position: absolute;
  843. content: "";
  844. left: 0;
  845. top: 40%;
  846. width: 60%;
  847. height: 200px;
  848. background-color: rgba(53, 152, 107, 0.1);
  849. } */
  850. .service_list {
  851. position: relative;
  852. display: grid;
  853. grid-template-columns: repeat(3, 1fr);
  854. gap: 24px;
  855. z-index: 2;
  856. }
  857. .service_list .ser_item {
  858. background-color: #fff;
  859. }
  860. .service_list .ser_item a {
  861. padding: 30px 50px;
  862. display: flex;
  863. align-items: center;
  864. color: var(--vt-c-indigo);
  865. }
  866. .service_list .ser_item a .ser_icon {
  867. padding-right: 40px;
  868. border-right: 1px solid #d3d9de;
  869. }
  870. .service_list .ser_item a .ser_icon img {
  871. width: 108px;
  872. height: 108px;
  873. object-fit: contain;
  874. }
  875. .service_list .ser_item a .ser_tit {
  876. flex: 1;
  877. font-size: 24px;
  878. padding-left: 40px;
  879. }
  880. .service_list .ser_item a .ser_tit p {
  881. margin: 0;
  882. }
  883. .service_list .ser_item a .ser_tit .desc {
  884. margin-top: 20px;
  885. font-size: 16px;
  886. line-height: 20px;
  887. color: #999;
  888. }
  889. .service_list .ser_item a:hover .ser_icon img {
  890. animation: heartBeat 2s ease-in-out infinite;
  891. }
  892. @keyframes heartBeat {
  893. 0% {
  894. transform: scale(1);
  895. }
  896. 14% {
  897. transform: scale(1.2);
  898. }
  899. 28% {
  900. transform: scale(1);
  901. }
  902. 42% {
  903. transform: scale(1.2);
  904. }
  905. 70% {
  906. transform: scale(1);
  907. }
  908. }
  909. .footer_layout .footer_fix_link {
  910. position: fixed;
  911. right: 0;
  912. top: 50%;
  913. z-index: 9;
  914. }
  915. .footer_layout .top_btn {
  916. display: none;
  917. position: fixed;
  918. right: 0;
  919. bottom: 40px;
  920. z-index: 9;
  921. cursor: pointer;
  922. }
  923. .footer_layout .top_btn img {
  924. width: 40px;
  925. height: 40px;
  926. object-fit: contain;
  927. }
  928. .footer_layout .footer_fix_link .link_vertical {
  929. display: inline-flex;
  930. flex-direction: column;
  931. }
  932. .footer_layout .footer_fix_link a {
  933. display: inline-flex;
  934. align-items: center;
  935. justify-content: center;
  936. color: #fff;
  937. writing-mode: vertical-lr;
  938. width: 40px;
  939. height: 105px;
  940. }
  941. .footer_layout .footer_fix_link .xihua_link {
  942. background: url("../images/bg_links_1.png") no-repeat center / 100%;
  943. }
  944. .footer_layout .footer_fix_link .index_link {
  945. margin-top: 24px;
  946. background: url("../images/bg_links_2.png") no-repeat center / 100%;
  947. }
  948. .footer_layout .lay_footer {
  949. background-color: #454847;
  950. }
  951. .footer_layout .lay_footer .footer_menu {
  952. padding: 100px 140px;
  953. display: flex;
  954. }
  955. .footer_layout .lay_footer .footer_menu .logo {
  956. padding-right: 75px;
  957. border-right: 1px solid rgba(112, 112, 112, 0.5);
  958. }
  959. .footer_layout .lay_footer .footer_menu .logo .footer_logo img {
  960. height: 65px;
  961. object-fit: contain;
  962. }
  963. .footer_layout .lay_footer .footer_menu .logo .footer_tips {
  964. margin-top: 88px;
  965. }
  966. .footer_layout .lay_footer .footer_menu .logo .footer_tips img {
  967. height: 38px;
  968. object-fit: contain;
  969. }
  970. .footer_layout .lay_footer .footer_menu .logo .contact_view {
  971. margin-top: 90px;
  972. color: #ffffff;
  973. font-size: 14px;
  974. }
  975. .footer_layout .lay_footer .footer_menu .logo .contact_view p {
  976. margin-top: 18px;
  977. }
  978. .footer_layout .lay_footer .footer_menu .logo .contact_view .title {
  979. font-size: 18px;
  980. margin-top: 0;
  981. }
  982. .footer_layout .lay_footer .footer_menu .logo .contact_view .qrcode {
  983. margin-top: 35px;
  984. }
  985. .footer_layout .lay_footer .footer_menu .logo .contact_view .qrcode img {
  986. height: 120px;
  987. object-fit: contain;
  988. }
  989. .footer_layout .lay_footer .footer_menu .menus .wp-menu {
  990. flex: 1;
  991. padding: 30px 0 0 75px;
  992. display: grid;
  993. gap: 40px;
  994. grid-template-columns: repeat(5, 1fr);
  995. }
  996. .footer_layout .lay_footer .footer_menu .menus .menu-link {
  997. font-size: 18px;
  998. color: #ffffff;
  999. }
  1000. .footer_layout .lay_footer .footer_menu .menus .sub-link {
  1001. margin-top: 18px;
  1002. display: block;
  1003. font-size: 14px;
  1004. color: rgba(255, 255, 255, 0.5);
  1005. }
  1006. .footer_layout .lay_footer .footer_menu .menus .sub-link:hover {
  1007. color: #ffffff;
  1008. }
  1009. .footer_layout .lay_footer .footer_menu .menus .sub-menu {
  1010. margin-top: 20px;
  1011. }
  1012. .footer_layout .copyright {
  1013. padding: 28px 20px;
  1014. font-size: 12px;
  1015. line-height: 1.5;
  1016. text-align: center;
  1017. background-color: #242424;
  1018. color: rgba(255, 255, 255, 0.6);
  1019. }
  1020. .page_title_box {
  1021. position: relative;
  1022. height: 500px;
  1023. background-position: center center;
  1024. background-repeat: no-repeat;
  1025. background-size: cover;
  1026. }
  1027. .page_title_box img {
  1028. display: none;
  1029. }
  1030. .page_title_box::after {
  1031. content: "";
  1032. position: absolute;
  1033. bottom: 0;
  1034. left: 0;
  1035. width: 100%;
  1036. height: 220px;
  1037. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  1038. opacity: 0.7;
  1039. z-index: 1;
  1040. }
  1041. .page_title_box .title {
  1042. position: relative;
  1043. height: 100%;
  1044. display: flex;
  1045. flex-direction: column;
  1046. justify-content: flex-end;
  1047. padding-bottom: 28px;
  1048. z-index: 2;
  1049. }
  1050. .page_title_box .title h1 {
  1051. font-size: 36px;
  1052. font-weight: 400;
  1053. margin-bottom: 16px;
  1054. color: #fff;
  1055. }
  1056. .page_title_box .title h2 {
  1057. margin-bottom: 0;
  1058. height: 1em;
  1059. font-size: 14px;
  1060. font-weight: 300;
  1061. color: #fff;
  1062. }
  1063. .content_wrapper {
  1064. flex: 1;
  1065. padding-left: 40px;
  1066. }
  1067. .content_wrapper .page_article_box {
  1068. padding: 20px 28px;
  1069. background-color: #fff;
  1070. }
  1071. .content_wrapper .page_article_box .list_title {
  1072. padding-bottom: 20px;
  1073. font-weight: 500;
  1074. font-size: 20px;
  1075. color: #111111;
  1076. line-height: 26px;
  1077. border-bottom: 1px solid #e5e5e5;
  1078. }
  1079. .article {
  1080. padding: 20px 28px;
  1081. background-color: #fff;
  1082. }
  1083. .article h1.arti_title {
  1084. line-height: 36px;
  1085. font-family: "Microsoft YaHei";
  1086. font-size: 28px;
  1087. color: #333;
  1088. } /**文章标题**/
  1089. .article h2.arti_title {
  1090. line-height: 28px;
  1091. font-family: "Microsoft YaHei";
  1092. font-size: 16px;
  1093. color: var(--vt-c-text-light-2);
  1094. } /**文章副标题**/
  1095. .article .arti_metas {
  1096. padding-top: 10px;
  1097. }
  1098. .article .arti_metas span {
  1099. margin: 0 5px;
  1100. font-size: 12px;
  1101. color: #787878;
  1102. } /**文章其他属性**/
  1103. .article .entry {
  1104. margin: 0 auto;
  1105. overflow: hidden;
  1106. margin-top: 30px;
  1107. } /**文章内容**/
  1108. .article .entry .read,
  1109. .page_article_box .wp_entry {
  1110. font-size: 14px;
  1111. line-height: 1.5;
  1112. }
  1113. .article .entry .read p,
  1114. .page_article_box .wp_entry p {
  1115. margin-bottom: 1em;
  1116. }
  1117. .article .entry .read img,
  1118. .page_article_box .wp_entry img {
  1119. margin: 0 auto;
  1120. max-width: 100%;
  1121. } /**文章阅读部分图片大小限制**/
  1122. .article .entry .read table,
  1123. .page_article_box .wp_entry table {
  1124. border: none !important;
  1125. }
  1126. .article .entry .read table td {
  1127. background-color: transparent;
  1128. }
  1129. .page_tabs_box {
  1130. position: relative;
  1131. width: 220px;
  1132. }
  1133. .page_tabs_box .column_title_box {
  1134. display: flex;
  1135. align-items: center;
  1136. margin-bottom: 16px;
  1137. padding: 24px 20px;
  1138. background: var(--vt-c-primary);
  1139. overflow: hidden;
  1140. width: 100%;
  1141. }
  1142. .page_tabs_box .column_title {
  1143. flex: 1;
  1144. font-weight: 600;
  1145. font-size: 28px;
  1146. line-height: 28px;
  1147. color: #ffffff;
  1148. white-space: nowrap;
  1149. overflow: hidden;
  1150. }
  1151. .column_title_box .arrow {
  1152. display: none;
  1153. width: 40px;
  1154. height: 40px;
  1155. background: url("../images/arrow_down_white.png") no-repeat center/contain;
  1156. transition: all 0.4s ease-in-out;
  1157. cursor: pointer;
  1158. }
  1159. .column_title_box .arrow.up {
  1160. transform: rotate(-180deg);
  1161. }
  1162. .page_tabs_box .page_tab_list {
  1163. position: relative;
  1164. width: 100%;
  1165. background-color: #fff;
  1166. }
  1167. .page_tabs_box .page_tab_list .page_list_item {
  1168. width: 100%;
  1169. overflow: hidden;
  1170. border-bottom: 1px solid #e5e5e5;
  1171. }
  1172. .page_tabs_box .page_tab_list .page_list_item:last-child {
  1173. border-bottom: none;
  1174. }
  1175. .page_tabs_box .page_tab_list .page_list_item.selected .sub_list,
  1176. .page_tabs_box .page_tab_list .page_list_item.parent .sub_list {
  1177. display: block;
  1178. }
  1179. .page_tabs_box .page_tab_list .page_list_item .sub_list {
  1180. display: none;
  1181. padding: 0 20px 20px;
  1182. width: 100%;
  1183. }
  1184. .page_tab_list .sub_list .sub_item {
  1185. margin-bottom: 5px;
  1186. }
  1187. .page_tab_list .sub_list .sub_item:last-child {
  1188. margin-bottom: 0;
  1189. }
  1190. .page_tab_list .sub_list .sub_item .sub_item_link {
  1191. display: block;
  1192. padding: 8px 10px;
  1193. color: #666;
  1194. font-size: 14px;
  1195. font-weight: 500;
  1196. border-radius: 2px;
  1197. }
  1198. .page_tab_list .sub_list .sub_item .sub_item_link:hover,
  1199. .page_tab_list .sub_list .sub_item .sub_item_link.selected {
  1200. color: var(--vt-c-primary);
  1201. background-color: rgba(65, 150, 156, 0.1);
  1202. }
  1203. .page_tabs_box .page_tab_list .page_list_item .item_link {
  1204. position: relative;
  1205. display: block;
  1206. width: 100%;
  1207. padding: 20px 18px;
  1208. color: #666;
  1209. font-size: 16px;
  1210. text-overflow: ellipsis;
  1211. overflow: hidden;
  1212. white-space: nowrap;
  1213. }
  1214. .page_tabs_box .page_tab_list .page_list_item .item_link::after {
  1215. content: "";
  1216. position: absolute;
  1217. top: 50%;
  1218. left: 0;
  1219. -webkit-transform: translateY(-50%);
  1220. -ms-transform: translateY(-50%);
  1221. transform: translateY(-50%);
  1222. height: 0;
  1223. width: 0;
  1224. border-left: 3px solid var(--vt-c-primary);
  1225. }
  1226. .page_tabs_box .page_tab_list .page_list_item .item_link.selected,
  1227. .page_tabs_box .page_tab_list .page_list_item .item_link.parent {
  1228. font-weight: 500;
  1229. color: var(--vt-c-primary);
  1230. }
  1231. .page_tabs_box .page_tab_list .page_list_item .item_link.selected::after,
  1232. .page_tabs_box .page_tab_list .page_list_item .item_link.parent::after {
  1233. height: 18px;
  1234. }
  1235. .page_article_list,
  1236. .page_teacher_list {
  1237. display: block;
  1238. padding: 30px 0 50px;
  1239. }
  1240. .page_teacher_list {
  1241. width: 100%;
  1242. overflow: hidden;
  1243. }
  1244. .page_teacher_list .item {
  1245. display: flex;
  1246. align-items: center;
  1247. margin-bottom: 20px;
  1248. }
  1249. .page_teacher_list .item .list_img {
  1250. width: 160px;
  1251. height: 160px;
  1252. padding-bottom: 20px;
  1253. overflow: hidden;
  1254. }
  1255. .page_teacher_list .item .info_box {
  1256. flex: 1;
  1257. height: 160px;
  1258. padding: 0 16px 20px;
  1259. border-bottom: 1px solid #e5e5e5;
  1260. }
  1261. .page_teacher_list .item .info_box .item_tit {
  1262. width: 100%;
  1263. font-weight: 500;
  1264. font-size: 18px;
  1265. color: #333333;
  1266. line-height: 24px;
  1267. white-space: nowrap;
  1268. text-overflow: ellipsis;
  1269. overflow: hidden;
  1270. }
  1271. .page_teacher_list .item .info_box .item_desc {
  1272. height: 70px;
  1273. margin-top: 15px;
  1274. font-size: 12px;
  1275. line-height: 20px;
  1276. font-weight: 400;
  1277. color: #666666;
  1278. overflow: hidden;
  1279. word-break: break-all;
  1280. }
  1281. .page_teacher_list .item .info_box .list_more {
  1282. text-align: right;
  1283. }
  1284. .page_teacher_list .item img {
  1285. width: 160px;
  1286. height: 160px;
  1287. object-fit: cover;
  1288. border-radius: 80px;
  1289. transition: all 0.3s ease-in-out;
  1290. }
  1291. .page_teacher_list .item:hover img {
  1292. transform: scale(1.2);
  1293. }
  1294. .page_def_list {
  1295. display: block;
  1296. padding: 30px 0 50px;
  1297. }
  1298. .page_def_list .item {
  1299. position: relative;
  1300. display: flex;
  1301. align-items: center;
  1302. border-bottom: 1px solid #e5e5e5;
  1303. }
  1304. .page_def_list .item:hover {
  1305. background-color: #f5f5f5;
  1306. }
  1307. .page_def_list .item .item_title {
  1308. flex: 1;
  1309. }
  1310. .page_def_list .item .item_date {
  1311. font-size: 12px;
  1312. color: #747474;
  1313. }
  1314. .page_def_list .item:hover a {
  1315. color: var(--vt-c-primary);
  1316. }
  1317. .page_def_list .item a {
  1318. position: relative;
  1319. display: block;
  1320. line-height: 20px;
  1321. width: 100%;
  1322. font-size: 16px;
  1323. padding: 12px 20px;
  1324. text-overflow: ellipsis;
  1325. white-space: nowrap;
  1326. overflow: hidden;
  1327. }
  1328. .header_btns {
  1329. display: flex;
  1330. align-items: center;
  1331. }
  1332. .search_box {
  1333. position: relative;
  1334. padding-left: 20px;
  1335. }
  1336. .search_box .wp-search {
  1337. position: fixed;
  1338. top: -100%;
  1339. left: 0;
  1340. z-index: 201;
  1341. width: 100%;
  1342. padding: 16px 25px;
  1343. background-color: #fff;
  1344. overflow: hidden;
  1345. }
  1346. .search_box .wp-search .form_box {
  1347. display: flex;
  1348. align-items: center;
  1349. width: 100%;
  1350. height: 65px;
  1351. margin: 0 auto;
  1352. }
  1353. .search_box .wp-search .form_box .search-input {
  1354. flex: 1;
  1355. }
  1356. .search_box .wp-search .form_box .search-input input {
  1357. display: inline-block;
  1358. line-height: 1.5;
  1359. width: 100%;
  1360. padding: 6px 14px;
  1361. color: rgba(0, 0, 0, 0.85);
  1362. font-size: 14px;
  1363. background-color: transparent;
  1364. border: 1px solid #d9d9d9;
  1365. border-radius: 2px 0 0 2px;
  1366. transition: all 0.3s;
  1367. }
  1368. .search_box .wp-search .form_box .search-btn input {
  1369. background-color: var(--vt-c-primary);
  1370. color: #fff;
  1371. line-height: 1.5;
  1372. font-size: 14px;
  1373. padding: 6px 20px;
  1374. border: 1px solid var(--vt-c-primary);
  1375. border-radius: 0 2px 2px 0;
  1376. cursor: pointer;
  1377. }
  1378. .search_box .search_icon {
  1379. display: block;
  1380. width: 40px;
  1381. height: 40px;
  1382. background: url("../images/icon_search.png") no-repeat center/contain;
  1383. cursor: pointer;
  1384. }
  1385. .search_box .close_icon {
  1386. display: block;
  1387. margin-left: 10px;
  1388. width: 40px;
  1389. height: 40px;
  1390. background: url("../images/icon_close.png") no-repeat center/contain;
  1391. cursor: pointer;
  1392. }
  1393. .page_article_box .wp_paging {
  1394. margin-top: 20px;
  1395. float: none;
  1396. text-align: center;
  1397. }
  1398. .page_article_box .wp_paging li {
  1399. float: none;
  1400. }