style.css 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527
  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 {
  310. color: #fff;
  311. }
  312. .news_lay_box .news_lay_item .list_item.news_1 a:hover {
  313. color: #fff;
  314. }
  315. .news_lay_box .news_lay_item .list_item .title {
  316. flex: 1;
  317. padding-right: 30px;
  318. text-overflow: ellipsis;
  319. white-space: nowrap;
  320. overflow: hidden;
  321. }
  322. .news_lay_box .news_lay_item .s_item {
  323. padding: 12px 0;
  324. font-size: 14px;
  325. line-height: 28px;
  326. border-bottom: 1px solid #e5e5e5;
  327. }
  328. .news_lay_box .news_lay_item .s_item .title {
  329. width: 100%;
  330. overflow: hidden;
  331. text-overflow: ellipsis;
  332. white-space: nowrap;
  333. }
  334. .news_lay_box .news_lay_item .s_item .item_date {
  335. font-size: 12px;
  336. color: #848484;
  337. }
  338. .news_lay_box .news_lay_item .s_item img {
  339. height: 210px;
  340. width: 100%;
  341. object-fit: cover;
  342. }
  343. .news_lay_box .news_lay_item .s_item .cover {
  344. display: none;
  345. height: 210px;
  346. width: 100%;
  347. overflow: hidden;
  348. margin-bottom: 10px;
  349. }
  350. .news_lay_box .news_lay_item .s_item.news_1 {
  351. padding-top: 0;
  352. font-size: 16px;
  353. }
  354. .news_lay_box .news_lay_item .s_item.news_1 .cover {
  355. display: block;
  356. }
  357. .news_lay_box .news_lay_item .item {
  358. width: 100%;
  359. color: var(--vt-c-indigo);
  360. cursor: pointer;
  361. overflow: hidden;
  362. transition: all 0.2s ease-in-out;
  363. }
  364. .news_lay_box .news_lay_item .item:hover a {
  365. color: var(--vt-c-primary);
  366. }
  367. .news_lay_box .news_lay_item .item a:hover {
  368. color: var(--vt-c-primary);
  369. }
  370. .news_lay_box .news_lay_item .item:hover img {
  371. transform: scale(1.2);
  372. transition: all 0.2s ease-in-out;
  373. }
  374. .list_more {
  375. text-align: center;
  376. }
  377. .list_more.mt {
  378. margin-top: 50px;
  379. }
  380. .list_more .more_text {
  381. color: var(--vt-c-primary);
  382. cursor: pointer;
  383. }
  384. .list_more .arrow {
  385. display: inline-block;
  386. margin-left: 6px;
  387. width: 18px;
  388. height: 18px;
  389. object-fit: contain;
  390. vertical-align: text-bottom;
  391. background: url("../images/arrow_right_primary.png") no-repeat center/contain;
  392. }
  393. .spe_cards {
  394. display: flex;
  395. height: 460px;
  396. }
  397. .spe_cards .cards_item {
  398. position: relative;
  399. flex: 1;
  400. margin: 0 12px;
  401. height: 460px;
  402. padding: 70px 20px 40px;
  403. color: #fff;
  404. box-sizing: border-box;
  405. background-color: #fff;
  406. transition: all 0.3s ease-in-out;
  407. }
  408. .spe_cards .cards_item:first-child {
  409. margin-left: 0;
  410. }
  411. .spe_cards .cards_item:last-child {
  412. margin-right: 0;
  413. }
  414. .spe_cards .cards_item .card_icon {
  415. line-height: 1;
  416. }
  417. .spe_cards .cards_item .card_icon {
  418. width: 72px;
  419. height: 72px;
  420. }
  421. .spe_cards .cards_item .card_icon.icon_1 {
  422. background: url("../images/icon_home_specialty_1.png") no-repeat center /
  423. contain;
  424. }
  425. .spe_cards .cards_item:hover .card_icon.icon_1 {
  426. background: url("../images/icon_home_specialty_1_hover.png") no-repeat center /
  427. contain;
  428. }
  429. .spe_cards .cards_item .card_icon.icon_2 {
  430. background: url("../images/icon_home_specialty_2.png") no-repeat center /
  431. contain;
  432. }
  433. .spe_cards .cards_item:hover .card_icon.icon_2 {
  434. background: url("../images/icon_home_specialty_2_hover.png") no-repeat center /
  435. contain;
  436. }
  437. .spe_cards .cards_item .card_icon.icon_3 {
  438. background: url("../images/icon_home_specialty_3.png") no-repeat center /
  439. contain;
  440. }
  441. .spe_cards .cards_item:hover .card_icon.icon_3 {
  442. background: url("../images/icon_home_specialty_3_hover.png") no-repeat center /
  443. contain;
  444. }
  445. .spe_cards .cards_item .card_icon.icon_4 {
  446. background: url("../images/icon_home_specialty_4.png") no-repeat center /
  447. contain;
  448. }
  449. .spe_cards .cards_item:hover .card_icon.icon_4 {
  450. background: url("../images/icon_home_specialty_4_hover.png") no-repeat center /
  451. contain;
  452. }
  453. .spe_cards .cards_item .card_icon.icon_5 {
  454. background: url("../images/icon_home_specialty_5.png") no-repeat center /
  455. contain;
  456. }
  457. .spe_cards .cards_item:hover .card_icon.icon_5 {
  458. background: url("../images/icon_home_specialty_5_hover.png") no-repeat center /
  459. contain;
  460. }
  461. .spe_cards .cards_item .card_tit {
  462. margin-top: 20px;
  463. font-size: 20px;
  464. line-height: 1;
  465. color: var(--vt-c-primary);
  466. }
  467. .spe_cards .cards_item .card_tit a {
  468. color: var(--vt-c-primary);
  469. }
  470. .spe_cards .cards_item:hover .card_tit,
  471. .spe_cards .cards_item:hover .card_tit a {
  472. color: #fff;
  473. }
  474. .spe_cards .cards_item .card_desc a {
  475. color: #fff;
  476. }
  477. .spe_cards .cards_item .card_desc {
  478. position: absolute;
  479. bottom: 0;
  480. left: 0;
  481. width: 100%;
  482. padding: 0 20px 40px;
  483. opacity: 0;
  484. }
  485. .spe_cards .cards_item .card_desc .desc {
  486. font-size: 14px;
  487. line-height: 24px;
  488. }
  489. .spe_cards .cards_item .card_desc .more {
  490. margin-top: 20px;
  491. text-align: r;
  492. }
  493. .spe_cards .cards_item .card_desc .more .more_text {
  494. font-size: 16px;
  495. color: #fff;
  496. }
  497. .spe_cards .cards_item .card_desc .more .arrow {
  498. margin-left: 6px;
  499. width: 18px;
  500. height: 18px;
  501. display: inline-block;
  502. object-fit: contain;
  503. vertical-align: text-bottom;
  504. background: url("../images/arrow_right.png") no-repeat center/contain;
  505. }
  506. .spe_cards .cards_item:hover {
  507. flex: 2;
  508. background-color: var(--vt-c-primary);
  509. }
  510. .spe_cards .cards_item:hover .card_desc {
  511. animation: fadeInUp 0.3s ease-in-out;
  512. animation-fill-mode: forwards;
  513. }
  514. .wrapper.wrapper_teacher_bg {
  515. background: url("../images/bg_teachers.png") no-repeat center/cover;
  516. }
  517. /*teacher*/
  518. .teachers_box .teachers_swiper {
  519. width: 100%;
  520. display: grid;
  521. gap: 24px;
  522. grid-template-columns: repeat(5, 1fr);
  523. }
  524. .teachers_box .teachers_swiper .teacher_slide {
  525. text-align: center;
  526. }
  527. .teachers_box .teacher_item {
  528. width: 100%;
  529. position: relative;
  530. }
  531. .teachers_box .teacher_item a {
  532. display: block;
  533. position: relative;
  534. padding-top: 100%;
  535. }
  536. .teachers_box .teacher_item img {
  537. position: absolute;
  538. top: 0;
  539. left: 0;
  540. width: 100%;
  541. height: 100%;
  542. object-fit: cover;
  543. border-radius: 50%;
  544. transition: all 0.3s ease-in-out;
  545. }
  546. .teachers_box .teacher_item:hover img {
  547. transform: scale(1.1);
  548. }
  549. .teachers_box .teacher_slide .item_footer {
  550. margin-top: 20px;
  551. display: block;
  552. }
  553. .teachers_box .teacher_slide .name a {
  554. color: #000;
  555. font-size: 20px;
  556. font-weight: 600;
  557. }
  558. .teachers_box .teacher_slide:hover .name a {
  559. color: var(--vt-c-primary);
  560. }
  561. .tabs_header {
  562. display: flex;
  563. align-items: center;
  564. margin-bottom: 30px;
  565. }
  566. .tabs_header .home_lay_title {
  567. margin-bottom: 0;
  568. }
  569. .tabs_header .tabs_nav_list {
  570. flex: 1;
  571. position: relative;
  572. display: flex;
  573. align-self: stretch;
  574. overflow: hidden;
  575. white-space: nowrap;
  576. justify-content: flex-end;
  577. }
  578. .tabs_header .tabs_nav_list .list_item {
  579. position: relative;
  580. padding: 14px 0;
  581. font-size: 18px;
  582. color: rgba(0, 0, 0, 0.8);
  583. cursor: pointer;
  584. }
  585. .works_tab .tabs_header .tabs_nav_list .list_item {
  586. color: rgba(255, 255, 255, 0.8);
  587. }
  588. .tabs_header .tabs_nav_list .list_item.selected {
  589. color: #000;
  590. }
  591. .works_tab .tabs_header .tabs_nav_list .list_item.selected {
  592. color: #fff;
  593. }
  594. .tabs_header .tabs_nav_list .list_item.selected::after {
  595. position: absolute;
  596. content: "";
  597. bottom: 0;
  598. left: 50%;
  599. -webkit-transform: translateX(-50%);
  600. -ms-transform: translateX(-50%);
  601. transform: translateX(-50%);
  602. width: 28px;
  603. height: 2px;
  604. background-color: var(--vt-c-primary);
  605. }
  606. .works_tab .tabs_header .tabs_nav_list .list_item.selected::after {
  607. background-color: #fff;
  608. }
  609. .tabs_header .tabs_nav_list .list_item + .list_item {
  610. margin-left: 30px;
  611. }
  612. .tab_list {
  613. display: grid;
  614. grid-template-columns: repeat(4, 1fr);
  615. gap: 24px;
  616. }
  617. .tab_list.research_list {
  618. grid-template-columns: repeat(2, 1fr);
  619. }
  620. .tab_list .list_item,
  621. .page_article_list .list_item {
  622. width: 100%;
  623. background-color: #fff;
  624. overflow: hidden;
  625. position: relative;
  626. }
  627. .tab_list .list_item .item {
  628. position: relative;
  629. display: block;
  630. /* border-bottom: 2px solid rgba(159, 159, 159, 0.5); */
  631. cursor: pointer;
  632. }
  633. .page_article_list .list_item .item {
  634. display: flex;
  635. align-items: center;
  636. margin-bottom: 20px;
  637. }
  638. .page_article_list .list_item .item:hover {
  639. background-color: #f5f5f5;
  640. }
  641. /* .tab_list .list_item .item::before {
  642. content: "";
  643. position: absolute;
  644. bottom: 0;
  645. right: 0;
  646. border-width: 6px;
  647. border-style: solid;
  648. border-color: transparent rgba(159, 159, 159, 0.5) rgba(159, 159, 159, 0.5)
  649. transparent;
  650. } */
  651. /* .tab_list .list_item .item::after {
  652. content: "";
  653. position: absolute;
  654. bottom: -2px;
  655. right: 0;
  656. width: 0;
  657. height: 2px;
  658. background-color: var(--vt-c-primary);
  659. transition: width 0.3s ease-in-out;
  660. }
  661. .tab_list .list_item .item:hover::before {
  662. border-color: transparent var(--vt-c-primary) var(--vt-c-primary) transparent;
  663. }
  664. .tab_list .list_item .item:hover::after {
  665. width: 100%;
  666. } */
  667. .tab_list .list_item .item:hover img,
  668. .page_article_list .list_item .item:hover img {
  669. transform: scale(1.2);
  670. }
  671. .tab_list.research_list .list_item .item {
  672. position: relative;
  673. }
  674. .tab_list.research_list .list_item .item .list_img {
  675. width: 100%;
  676. height: 400px;
  677. overflow: hidden;
  678. }
  679. .tab_list.research_list .list_item img {
  680. height: 400px;
  681. }
  682. .tab_list.research_list .list_item .item_tit a {
  683. color: #fff;
  684. }
  685. .tab_list.research_list .list_item .item_tit a:hover {
  686. color: #fff;
  687. }
  688. .tab_list.research_list .list_item .item .info_box {
  689. position: absolute;
  690. left: 0;
  691. bottom: 0;
  692. padding: 30px 20px;
  693. width: 100%;
  694. color: #fff;
  695. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  696. opacity: 0;
  697. overflow: hidden;
  698. }
  699. .tab_list.research_list .list_item .item:hover .info_box {
  700. animation: fadeInUp 0.3s ease-in-out;
  701. animation-fill-mode: forwards;
  702. }
  703. .tab_list.research_list .list_item .item .info_box .item_tit {
  704. height: auto;
  705. font-size: 20px;
  706. font-weight: 600;
  707. width: 100%;
  708. overflow: hidden;
  709. text-overflow: ellipsis;
  710. white-space: nowrap;
  711. color: #fff;
  712. }
  713. .tab_list.research_list .list_item .item .info_box .item_date {
  714. color: #fff;
  715. }
  716. .tab_list .list_item .list_img {
  717. width: 100%;
  718. height: 300px;
  719. overflow: hidden;
  720. }
  721. .tab_list .list_item img {
  722. width: 100%;
  723. height: 300px;
  724. object-fit: cover;
  725. transition: all 0.3s ease-in-out;
  726. }
  727. .tab_list .list_item .info_box {
  728. padding: 16px 18px;
  729. }
  730. .tab_list .list_item .item_tit {
  731. height: 48px;
  732. font-size: 16px;
  733. line-height: 24px;
  734. color: var(--vt-c-indigo);
  735. overflow: hidden;
  736. }
  737. .tab_list .list_item .item:hover .item_tit a {
  738. color: var(--vt-c-primary);
  739. }
  740. .tab_list .list_item .item_tit a {
  741. color: var(--vt-c-indigo);
  742. }
  743. .tab_list .list_item .item_tit a:hover {
  744. color: var(--vt-c-primary);
  745. }
  746. .tab_list .list_item .item_desc {
  747. height: 72px;
  748. overflow: hidden;
  749. margin-top: 20px;
  750. font-size: 16px;
  751. line-height: 24px;
  752. font-weight: 400;
  753. color: #666666;
  754. word-break: break-all;
  755. }
  756. .tab_list .list_item .item_desc a {
  757. color: #666666;
  758. }
  759. .tab_list .list_item .item_desc a:hover {
  760. color: var(--vt-c-primary);
  761. }
  762. .tab_list .list_item .item_date {
  763. font-size: 14px;
  764. margin-top: 10px;
  765. font-weight: 400;
  766. color: #999999;
  767. }
  768. .page_article_list .list_img {
  769. width: 240px;
  770. height: 160px;
  771. overflow: hidden;
  772. }
  773. .page_article_list img {
  774. width: 100%;
  775. height: 160px;
  776. object-fit: cover;
  777. transition: all 0.3s ease-in-out;
  778. }
  779. .page_article_list .info_box {
  780. flex: 1;
  781. height: 160px;
  782. padding: 16px;
  783. }
  784. .page_article_list .item_tit {
  785. width: 100%;
  786. font-weight: 500;
  787. font-size: 20px;
  788. color: #333333;
  789. line-height: 24px;
  790. white-space: nowrap;
  791. text-overflow: ellipsis;
  792. overflow: hidden;
  793. }
  794. .page_article_list .item_tit a {
  795. color: var(--vt-c-indigo);
  796. }
  797. .page_article_list .item_tit a:hover {
  798. color: var(--vt-c-primary);
  799. }
  800. .page_article_list .item_desc {
  801. height: 70px;
  802. margin-top: 15px;
  803. font-size: 12px;
  804. line-height: 20px;
  805. font-weight: 400;
  806. color: #666666;
  807. overflow: hidden;
  808. word-break: break-all;
  809. }
  810. .page_article_list .item_desc a {
  811. color: #666666;
  812. }
  813. .page_article_list .item_desc a:hover {
  814. color: var(--vt-c-primary);
  815. }
  816. .page_article_list .item_date {
  817. font-size: 12px;
  818. font-weight: 300;
  819. color: #999999;
  820. }
  821. .research_bg {
  822. background: url("../images/bg_research.png") no-repeat center top/100% auto;
  823. }
  824. .teach_bg {
  825. position: relative;
  826. }
  827. .talent_tab {
  828. position: relative;
  829. z-index: 2;
  830. }
  831. .work_bg {
  832. background: url("../images/bg_works.png") no-repeat center top/100% auto;
  833. }
  834. .works_tab .tab_list .list_item {
  835. height: 320px;
  836. }
  837. .works_tab .tab_list .list_item .item_link {
  838. display: block;
  839. position: relative;
  840. width: 100%;
  841. height: 100%;
  842. overflow: hidden;
  843. cursor: pointer;
  844. }
  845. .works_tab .tab_list .list_item .item_link .item_txt {
  846. position: absolute;
  847. left: 0;
  848. bottom: 0;
  849. padding: 30px 20px;
  850. width: 100%;
  851. color: #fff;
  852. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  853. opacity: 0;
  854. overflow: hidden;
  855. }
  856. .works_tab .tab_list .list_item .item_link .item_txt .name {
  857. font-size: 20px;
  858. font-weight: 600;
  859. width: 100%;
  860. overflow: hidden;
  861. text-overflow: ellipsis;
  862. white-space: nowrap;
  863. }
  864. .works_tab .tab_list .list_item .item_link .item_txt .name a {
  865. color: #fff;
  866. }
  867. .works_tab .tab_list .list_item .item_link:hover img {
  868. transform: scale(1.2);
  869. }
  870. .works_tab .tab_list .list_item .item_link:hover .item_txt {
  871. animation: fadeInUp 0.3s ease-in-out;
  872. animation-fill-mode: forwards;
  873. }
  874. .works_tab .tab_list .list_item img {
  875. width: 100%;
  876. height: 100%;
  877. object-fit: cover;
  878. transition: all 0.3s ease-in-out;
  879. }
  880. @keyframes fadeInUp {
  881. from {
  882. opacity: 0;
  883. transform: translate3d(0, 100%, 0);
  884. }
  885. to {
  886. opacity: 1;
  887. transform: translate3d(0, 0, 0);
  888. }
  889. }
  890. .services_bg {
  891. position: relative;
  892. }
  893. /* .services_bg::after {
  894. position: absolute;
  895. content: "";
  896. left: 0;
  897. top: 40%;
  898. width: 60%;
  899. height: 200px;
  900. background-color: rgba(53, 152, 107, 0.1);
  901. } */
  902. .service_list {
  903. position: relative;
  904. display: grid;
  905. grid-template-columns: repeat(3, 1fr);
  906. gap: 24px;
  907. z-index: 2;
  908. }
  909. .service_list .ser_item {
  910. background-color: #fff;
  911. }
  912. .service_list .ser_item a {
  913. padding: 30px 50px;
  914. display: flex;
  915. align-items: center;
  916. color: var(--vt-c-indigo);
  917. }
  918. .service_list .ser_item a .ser_icon {
  919. padding-right: 40px;
  920. border-right: 1px solid #d3d9de;
  921. }
  922. .service_list .ser_item a .ser_icon img {
  923. width: 108px;
  924. height: 108px;
  925. object-fit: contain;
  926. }
  927. .service_list .ser_item a .ser_tit {
  928. flex: 1;
  929. font-size: 24px;
  930. padding-left: 40px;
  931. }
  932. .service_list .ser_item a .ser_tit p {
  933. margin: 0;
  934. }
  935. .service_list .ser_item a .ser_tit .desc {
  936. margin-top: 20px;
  937. font-size: 16px;
  938. line-height: 20px;
  939. color: #999;
  940. }
  941. .service_list .ser_item a:hover .ser_icon img {
  942. animation: heartBeat 2s ease-in-out infinite;
  943. }
  944. @keyframes heartBeat {
  945. 0% {
  946. transform: scale(1);
  947. }
  948. 14% {
  949. transform: scale(1.2);
  950. }
  951. 28% {
  952. transform: scale(1);
  953. }
  954. 42% {
  955. transform: scale(1.2);
  956. }
  957. 70% {
  958. transform: scale(1);
  959. }
  960. }
  961. .footer_layout .footer_fix_link {
  962. position: fixed;
  963. right: 0;
  964. top: 50%;
  965. z-index: 9;
  966. }
  967. .footer_layout .top_btn {
  968. display: none;
  969. position: fixed;
  970. right: 0;
  971. bottom: 40px;
  972. z-index: 9;
  973. cursor: pointer;
  974. }
  975. .footer_layout .top_btn img {
  976. width: 40px;
  977. height: 40px;
  978. object-fit: contain;
  979. }
  980. .footer_layout .footer_fix_link .link_vertical {
  981. display: inline-flex;
  982. flex-direction: column;
  983. }
  984. .footer_layout .footer_fix_link a {
  985. display: inline-flex;
  986. align-items: center;
  987. justify-content: center;
  988. color: #fff;
  989. writing-mode: vertical-lr;
  990. width: 40px;
  991. height: 105px;
  992. }
  993. .footer_layout .footer_fix_link .xihua_link {
  994. background: url("../images/bg_links_1.png") no-repeat center / 100%;
  995. }
  996. .footer_layout .footer_fix_link .index_link {
  997. margin-top: 24px;
  998. background: url("../images/bg_links_2.png") no-repeat center / 100%;
  999. }
  1000. .footer_layout .lay_footer {
  1001. background-color: #454847;
  1002. }
  1003. .footer_layout .lay_footer .footer_menu {
  1004. padding: 100px 140px;
  1005. display: flex;
  1006. }
  1007. .footer_layout .lay_footer .footer_menu .logo {
  1008. padding-right: 75px;
  1009. border-right: 1px solid rgba(112, 112, 112, 0.5);
  1010. }
  1011. .footer_layout .lay_footer .footer_menu .logo .footer_logo img {
  1012. height: 65px;
  1013. object-fit: contain;
  1014. }
  1015. .footer_layout .lay_footer .footer_menu .logo .footer_tips {
  1016. margin-top: 88px;
  1017. }
  1018. .footer_layout .lay_footer .footer_menu .logo .footer_tips img {
  1019. height: 38px;
  1020. object-fit: contain;
  1021. }
  1022. .footer_layout .lay_footer .footer_menu .logo .contact_view {
  1023. margin-top: 90px;
  1024. color: #ffffff;
  1025. font-size: 14px;
  1026. }
  1027. .footer_layout .lay_footer .footer_menu .logo .contact_view p {
  1028. margin-top: 18px;
  1029. }
  1030. .footer_layout .lay_footer .footer_menu .logo .contact_view .title {
  1031. font-size: 18px;
  1032. margin-top: 0;
  1033. }
  1034. .footer_layout .lay_footer .footer_menu .logo .contact_view .qrcode {
  1035. margin-top: 35px;
  1036. }
  1037. .footer_layout .lay_footer .footer_menu .logo .contact_view .qrcode img {
  1038. height: 120px;
  1039. object-fit: contain;
  1040. }
  1041. .footer_layout .lay_footer .footer_menu .menus .wp-menu {
  1042. flex: 1;
  1043. padding: 30px 0 0 75px;
  1044. display: grid;
  1045. gap: 40px;
  1046. grid-template-columns: repeat(5, 1fr);
  1047. }
  1048. .footer_layout .lay_footer .footer_menu .menus .menu-link {
  1049. font-size: 18px;
  1050. color: #ffffff;
  1051. }
  1052. .footer_layout .lay_footer .footer_menu .menus .sub-link {
  1053. margin-top: 18px;
  1054. display: block;
  1055. font-size: 14px;
  1056. color: rgba(255, 255, 255, 0.5);
  1057. }
  1058. .footer_layout .lay_footer .footer_menu .menus .sub-link:hover {
  1059. color: #ffffff;
  1060. }
  1061. .footer_layout .lay_footer .footer_menu .menus .sub-menu {
  1062. margin-top: 20px;
  1063. }
  1064. .footer_layout .copyright {
  1065. padding: 28px 20px;
  1066. font-size: 12px;
  1067. line-height: 1.5;
  1068. text-align: center;
  1069. background-color: #242424;
  1070. color: rgba(255, 255, 255, 0.6);
  1071. }
  1072. .page_title_box {
  1073. position: relative;
  1074. height: 500px;
  1075. background-position: center center;
  1076. background-repeat: no-repeat;
  1077. background-size: cover;
  1078. }
  1079. .page_title_box img {
  1080. display: none;
  1081. }
  1082. .page_title_box::after {
  1083. content: "";
  1084. position: absolute;
  1085. bottom: 0;
  1086. left: 0;
  1087. width: 100%;
  1088. height: 220px;
  1089. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  1090. opacity: 0.7;
  1091. z-index: 1;
  1092. }
  1093. .page_title_box .title {
  1094. position: relative;
  1095. height: 100%;
  1096. display: flex;
  1097. flex-direction: column;
  1098. justify-content: flex-end;
  1099. padding-bottom: 28px;
  1100. z-index: 2;
  1101. }
  1102. .page_title_box .title h1 {
  1103. font-size: 36px;
  1104. font-weight: 400;
  1105. margin-bottom: 16px;
  1106. color: #fff;
  1107. }
  1108. .page_title_box .title h2 {
  1109. margin-bottom: 0;
  1110. height: 1em;
  1111. font-size: 14px;
  1112. font-weight: 300;
  1113. color: #fff;
  1114. }
  1115. .content_wrapper {
  1116. flex: 1;
  1117. padding-left: 40px;
  1118. }
  1119. .content_wrapper .page_article_box {
  1120. padding: 20px 28px;
  1121. background-color: #fff;
  1122. }
  1123. .content_wrapper .page_article_box .list_title h2 {
  1124. padding-bottom: 20px;
  1125. font-weight: 500;
  1126. font-size: 20px;
  1127. color: #111111;
  1128. line-height: 26px;
  1129. border-bottom: 1px solid #e5e5e5;
  1130. }
  1131. .article {
  1132. padding: 20px 28px;
  1133. background-color: #fff;
  1134. }
  1135. .article h1.arti_title {
  1136. line-height: 36px;
  1137. font-family: "Microsoft YaHei";
  1138. font-size: 28px;
  1139. color: #333;
  1140. } /**文章标题**/
  1141. .article h2.arti_title {
  1142. line-height: 28px;
  1143. font-family: "Microsoft YaHei";
  1144. font-size: 16px;
  1145. color: var(--vt-c-text-light-2);
  1146. } /**文章副标题**/
  1147. .article .arti_metas {
  1148. padding-top: 10px;
  1149. }
  1150. .article .arti_metas span {
  1151. margin: 0 5px;
  1152. font-size: 12px;
  1153. color: #787878;
  1154. } /**文章其他属性**/
  1155. .article .entry {
  1156. margin: 0 auto;
  1157. overflow: hidden;
  1158. margin-top: 30px;
  1159. } /**文章内容**/
  1160. .article .entry .read,
  1161. .page_article_box .wp_entry {
  1162. font-size: 14px;
  1163. line-height: 1.5;
  1164. }
  1165. .article .entry .read p,
  1166. .page_article_box .wp_entry p {
  1167. margin-bottom: 1em;
  1168. }
  1169. .article .entry .read img,
  1170. .page_article_box .wp_entry img {
  1171. margin: 0 auto;
  1172. max-width: 100%;
  1173. } /**文章阅读部分图片大小限制**/
  1174. .article .entry .read table,
  1175. .page_article_box .wp_entry table {
  1176. border: none !important;
  1177. }
  1178. .article .entry .read table td {
  1179. background-color: transparent;
  1180. }
  1181. .page_tabs_box {
  1182. position: relative;
  1183. width: 220px;
  1184. }
  1185. .page_tabs_box .column_title_box {
  1186. display: flex;
  1187. align-items: center;
  1188. margin-bottom: 16px;
  1189. padding: 24px 20px;
  1190. background: var(--vt-c-primary);
  1191. overflow: hidden;
  1192. width: 100%;
  1193. }
  1194. .page_tabs_box .column_title {
  1195. flex: 1;
  1196. font-weight: 600;
  1197. font-size: 28px;
  1198. line-height: 28px;
  1199. color: #ffffff;
  1200. white-space: nowrap;
  1201. overflow: hidden;
  1202. }
  1203. .column_title_box .arrow {
  1204. display: none;
  1205. width: 40px;
  1206. height: 40px;
  1207. background: url("../images/arrow_down_white.png") no-repeat center/contain;
  1208. transition: all 0.4s ease-in-out;
  1209. cursor: pointer;
  1210. }
  1211. .column_title_box .arrow.up {
  1212. transform: rotate(-180deg);
  1213. }
  1214. .page_tabs_box .page_tab_list {
  1215. position: relative;
  1216. width: 100%;
  1217. background-color: #fff;
  1218. }
  1219. .page_tabs_box .page_tab_list .page_list_item {
  1220. width: 100%;
  1221. overflow: hidden;
  1222. border-bottom: 1px solid #e5e5e5;
  1223. }
  1224. .page_tabs_box .page_tab_list .page_list_item:last-child {
  1225. border-bottom: none;
  1226. }
  1227. .page_tabs_box .page_tab_list .page_list_item.selected .sub_list,
  1228. .page_tabs_box .page_tab_list .page_list_item.parent .sub_list {
  1229. display: block;
  1230. }
  1231. .page_tabs_box .page_tab_list .page_list_item .sub_list {
  1232. display: none;
  1233. padding: 0 20px 20px;
  1234. width: 100%;
  1235. }
  1236. .page_tab_list .sub_list .sub_item {
  1237. margin-bottom: 5px;
  1238. }
  1239. .page_tab_list .sub_list .sub_item:last-child {
  1240. margin-bottom: 0;
  1241. }
  1242. .page_tab_list .sub_list .sub_item .sub_item_link {
  1243. display: block;
  1244. padding: 8px 10px;
  1245. color: #666;
  1246. font-size: 14px;
  1247. font-weight: 500;
  1248. border-radius: 2px;
  1249. }
  1250. .page_tab_list .sub_list .sub_item .sub_item_link:hover,
  1251. .page_tab_list .sub_list .sub_item .sub_item_link.selected {
  1252. color: var(--vt-c-primary);
  1253. background-color: rgba(65, 150, 156, 0.1);
  1254. }
  1255. .page_tabs_box .page_tab_list .page_list_item .item_link {
  1256. position: relative;
  1257. display: block;
  1258. width: 100%;
  1259. padding: 20px 18px;
  1260. color: #666;
  1261. font-size: 16px;
  1262. text-overflow: ellipsis;
  1263. overflow: hidden;
  1264. white-space: nowrap;
  1265. }
  1266. .page_tabs_box .page_tab_list .page_list_item .item_link::after {
  1267. content: "";
  1268. position: absolute;
  1269. top: 50%;
  1270. left: 0;
  1271. -webkit-transform: translateY(-50%);
  1272. -ms-transform: translateY(-50%);
  1273. transform: translateY(-50%);
  1274. height: 0;
  1275. width: 0;
  1276. border-left: 3px solid var(--vt-c-primary);
  1277. }
  1278. .page_tabs_box .page_tab_list .page_list_item .item_link.selected,
  1279. .page_tabs_box .page_tab_list .page_list_item .item_link.parent {
  1280. font-weight: 500;
  1281. color: var(--vt-c-primary);
  1282. }
  1283. .page_tabs_box .page_tab_list .page_list_item .item_link.selected::after,
  1284. .page_tabs_box .page_tab_list .page_list_item .item_link.parent::after {
  1285. height: 18px;
  1286. }
  1287. .page_article_list,
  1288. .page_teacher_list {
  1289. display: block;
  1290. padding: 30px 0 50px;
  1291. }
  1292. .page_teacher_list {
  1293. width: 100%;
  1294. overflow: hidden;
  1295. }
  1296. .page_teacher_list .item {
  1297. display: flex;
  1298. align-items: center;
  1299. margin-bottom: 20px;
  1300. }
  1301. .page_teacher_list .item .list_img {
  1302. width: 160px;
  1303. height: 160px;
  1304. padding-bottom: 20px;
  1305. overflow: hidden;
  1306. }
  1307. .page_teacher_list .item .info_box {
  1308. flex: 1;
  1309. height: 160px;
  1310. padding: 0 16px 20px;
  1311. border-bottom: 1px solid #e5e5e5;
  1312. }
  1313. .page_teacher_list .item .info_box .item_tit {
  1314. width: 100%;
  1315. font-weight: 500;
  1316. font-size: 18px;
  1317. color: #333333;
  1318. line-height: 24px;
  1319. white-space: nowrap;
  1320. text-overflow: ellipsis;
  1321. overflow: hidden;
  1322. }
  1323. .page_teacher_list .item .info_box .item_tit a {
  1324. color: var(--vt-c-indigo);
  1325. }
  1326. .page_teacher_list .item .info_box .item_tit a:hover {
  1327. color: var(--vt-c-primary);
  1328. }
  1329. .page_teacher_list .item .info_box .item_desc {
  1330. height: 70px;
  1331. margin-top: 15px;
  1332. font-size: 12px;
  1333. line-height: 20px;
  1334. font-weight: 400;
  1335. color: #666666;
  1336. overflow: hidden;
  1337. word-break: break-all;
  1338. }
  1339. .page_teacher_list .item .info_box .item_desc a {
  1340. color: #666666;
  1341. }
  1342. .page_teacher_list .item .info_box .item_desc a:hover {
  1343. color: var(--vt-c-primary);
  1344. }
  1345. .page_teacher_list .item .info_box .more {
  1346. text-align: right;
  1347. }
  1348. .page_teacher_list .item .info_box .more_text {
  1349. color: var(--vt-c-primary);
  1350. cursor: pointer;
  1351. }
  1352. .page_teacher_list .item .info_box .arrow {
  1353. display: inline-block;
  1354. margin-left: 4px;
  1355. width: 16px;
  1356. height: 16px;
  1357. object-fit: contain;
  1358. vertical-align: text-bottom;
  1359. background: url("../images/arrow_right_primary.png") no-repeat center/contain;
  1360. }
  1361. .page_teacher_list .item img {
  1362. width: 160px;
  1363. height: 160px;
  1364. object-fit: cover;
  1365. border-radius: 80px;
  1366. transition: all 0.3s ease-in-out;
  1367. }
  1368. .page_def_list {
  1369. display: block;
  1370. padding: 30px 0 50px;
  1371. }
  1372. .page_def_list .item {
  1373. position: relative;
  1374. display: flex;
  1375. align-items: center;
  1376. border-bottom: 1px solid #e5e5e5;
  1377. }
  1378. .page_def_list .item:hover {
  1379. background-color: #f5f5f5;
  1380. }
  1381. .page_def_list .item .item_title {
  1382. flex: 1;
  1383. }
  1384. .page_def_list .item .item_date {
  1385. padding-right: 20px;
  1386. font-size: 12px;
  1387. color: #747474;
  1388. }
  1389. .page_def_list .item:hover a {
  1390. color: var(--vt-c-primary);
  1391. }
  1392. .page_def_list .item a {
  1393. position: relative;
  1394. display: block;
  1395. line-height: 20px;
  1396. width: 100%;
  1397. font-size: 16px;
  1398. padding: 12px 20px;
  1399. text-overflow: ellipsis;
  1400. white-space: nowrap;
  1401. overflow: hidden;
  1402. }
  1403. .header_btns {
  1404. display: flex;
  1405. align-items: center;
  1406. }
  1407. .search_box {
  1408. position: relative;
  1409. padding-left: 20px;
  1410. }
  1411. .search_box .wp-search {
  1412. position: fixed;
  1413. top: -100%;
  1414. left: 0;
  1415. z-index: 201;
  1416. width: 100%;
  1417. padding: 16px 25px;
  1418. background-color: #fff;
  1419. overflow: hidden;
  1420. }
  1421. .search_box .wp-search .form_box {
  1422. display: flex;
  1423. align-items: center;
  1424. width: 100%;
  1425. height: 65px;
  1426. margin: 0 auto;
  1427. }
  1428. .search_box .wp-search .form_box .search-input {
  1429. flex: 1;
  1430. }
  1431. .search_box .wp-search .form_box .search-input input {
  1432. display: inline-block;
  1433. line-height: 1.5;
  1434. width: 100%;
  1435. padding: 6px 14px;
  1436. color: rgba(0, 0, 0, 0.85);
  1437. font-size: 14px;
  1438. background-color: transparent;
  1439. border: 1px solid #d9d9d9;
  1440. border-radius: 2px 0 0 2px;
  1441. transition: all 0.3s;
  1442. }
  1443. .search_box .wp-search .form_box .search-btn input {
  1444. background-color: var(--vt-c-primary);
  1445. color: #fff;
  1446. line-height: 1.5;
  1447. font-size: 14px;
  1448. padding: 6px 20px;
  1449. border: 1px solid var(--vt-c-primary);
  1450. border-radius: 0 2px 2px 0;
  1451. cursor: pointer;
  1452. }
  1453. .search_box .search_icon {
  1454. display: block;
  1455. width: 40px;
  1456. height: 40px;
  1457. background: url("../images/icon_search.png") no-repeat center/contain;
  1458. cursor: pointer;
  1459. }
  1460. .search_box .close_icon {
  1461. display: block;
  1462. margin-left: 10px;
  1463. width: 40px;
  1464. height: 40px;
  1465. background: url("../images/icon_close.png") no-repeat center/contain;
  1466. cursor: pointer;
  1467. }
  1468. .page_article_box .wp_paging {
  1469. margin-top: 20px;
  1470. float: none;
  1471. text-align: center;
  1472. }
  1473. .page_article_box .wp_paging li {
  1474. float: none;
  1475. }
  1476. .page_teacher_name_list {
  1477. display: grid;
  1478. grid-template-columns: repeat(3, 1fr);
  1479. gap: 12px;
  1480. padding: 30px 0 50px;
  1481. }
  1482. .page_teacher_name_list .item,
  1483. .page_teacher_name_list .item .item_tit {
  1484. width: 100%;
  1485. overflow: hidden;
  1486. }
  1487. .page_teacher_name_list .item .item_tit a {
  1488. display: block;
  1489. width: 100%;
  1490. padding: 16px 20px;
  1491. overflow: hidden;
  1492. text-overflow: ellipsis;
  1493. white-space: nowrap;
  1494. font-size: 16px;
  1495. color: var(--vt-c-indigo);
  1496. border: 1px solid #f5f5f5;
  1497. }
  1498. .page_teacher_name_list .item .item_tit a:hover {
  1499. color: var(--vt-c-primary);
  1500. background-color: #f5f5f5;
  1501. }