1<!DOCTYPE html> 2<html lang="zh-Hant-TW"> 3<head> 4 5 6<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 8<meta name="viewport" content="initial-scale=1.0, user-scalable=1, minimum-scale=1.0, maximum-scale=3.0"> 9<meta name="mobile-web-app-capable" content="yes"> 10<meta name="apple-mobile-web-app-status-bar-style" content="black"> 11<meta name="keywords" content="åç«æ¨ååé大å¸, æ¨å¤§, é«ä¸çå°å, 大叿ç, è½é»åæ, èè¶£æ¢ç´¢, å¸ç³»æ¢ç´¢, åå¸è³è¨, 叿¸¬, å人ç³è«, ç¹ææ¨è¦, æ ¡ç³»ä»ç´¹" /> 12<meta name="description" content="æ¨å¤§é«ä¸çå°åæä¾å¸ç³»æ¢ç´¢ãèè¶£åæãè½é»è©ä¼°ãåå¸è³è¨èæ ¡åçæ´»ä»ç´¹ï¼å¹«å©é«ä¸çèªèåç«æ¨ååé大å¸ï¼æ¾å°é©åèªå·±çå¸ç¿æ¹åã" /> 13 14<meta content="index,follow" name="robots"> 15<meta name="google-site-verification" content="cc6gyTI5JphImWOK77G2kUDHFSVH6iQUZNJh5aF4FIs" /> 16 17<meta property="og:image" content="/var/file/55/1055/msys_1055_2429802_66289.png" /> 18 19<title>é«ä¸çå°å </title> 20 21<link rel="shortcut icon" href="/var/file/55/1055/msys_1055_2429802_66289.png" type="image/x-icon" /> 22<link rel="icon" href="/var/file/55/1055/msys_1055_2429802_66289.png" type="image/x-icon" /> 23<link rel="bookmark" href="/var/file/55/1055/msys_1055_2429802_66289.png" type="image/x-icon" /> 24 25<link rel="apple-touch-icon-precomposed" href="/var/file/55/1055/msys_1055_2429802_66289.png"> 26<link rel="apple-touch-icon" href="/var/file/55/1055/msys_1055_2429802_66289.png"> 27 28<link rel="stylesheet" href="/var/file/55/1055/mobilestyle/combine-zh-tw.css?t=7479d7ca15" type="text/css" />
29<script language="javascript"><!-- 30 var isHome = false 31 --></script>
vendor: 1 bytes, line 31
31
32<script language="javascript"><!-- 33 var isExpanMenu = false 34 --></script>
vendor: 1 bytes, line 34
34
35<script type="text/javascript" src="/var/file/js/m_20260729.js" ></script>
35 36</head> 37 38<body class="page_mobileselfpg webfree "> 39 40<div class="wrap"> 41 42 43<a href="#start-C" class="focusable" title="è·³å°ä¸»è¦å §å®¹å">è·³å°ä¸»è¦å §å®¹å</a> 44 45 46<div class="fpbgvideo"></div> 47<div class="minner"> 48 49<div id="Dyn_head"> 50<div class="header"> 51 <div class="minner container"> 52 53 54 55 56 57 58 59 60<div class="selfhead"> 61 <div class="meditor"> 62 63 64 65 <style type="text/css"> 66 67/* ========================================================================== 68 69 1. å¾¹åºæ¹é¤åå» èè²ç²ç·èææéæ¡ 70 71 ========================================================================== */ 72 73html, body, .header, #wrapper, .header-layout, .container, #main, .center, #content, 74 75div[class*="header"], div[class*="banner"], [id*="header"], div[class*="menu"], 76 77.navbar, .navbar-nav, li, a, section, header { 78 79 border-top: none !important; 80 81 border-top-width: 0 !important; 82 83 border-top-style: none !important; 84 85 border-bottom: none !important; 86 87 border-bottom-width: 0 !important; 88 89 border-bottom-style: none !important; 90 91 box-shadow: none !important; 92 93} 94 95 96 97/* ========================================================================== 98 99 2. æ¡æ©çå°è¦½åæ¨£å¼ & ãçµæ¥µç©çé®ç·çã 100 101 ========================================================================== */ 102 103body:not([class*="page_mobilehome"]) .header #banner { 104 105 display: none; 106 107} 108 109body:not(.page_mobilehome) .minnav { 110 111 display: none; 112 113} 114 115 116 117/* 總å°è¦½å夿®¼ */ 118 119.head.container { 120 121 width: 100% !important; 122 123 max-width: 100% !important; 124 125 padding: 0 !important; 126 127 margin: 0 !important; 128 129 background-color: #ffffff !important; 130 131 position: relative !important; 132 133 padding-bottom: 65px !important; /* 䏿¹å塿¨éå®å ¨è·é¢ */ 134 135 z-index: 99999 !important; 136 137} 138 139 140 141/* é é¨é»åºå夿®¼ (ç©çé«åº¦ 42px) */ 142 143.head.container .mycollapse { 144 145 background-color: #1a1a1a !important; 146 147 width: 100% !important; 148 149 padding: 0 50px !important; 150 151 height: 42px !important; 152 153 min-height: 42px !important; 154 155 display: none !important; 156 157} 158 159 160 161/* é»åºé¸å®å */ 162 163.head.container .topnav { 164 165 display: block !important; 166 167 float: right !important; 168 169 height: 42px !important; 170 171 margin: 0 !important; 172 173 padding: 0 !important; 174 175} 176 177.head.container .topnav ul.navbar-nav { 178 179 margin: 0 !important; 180 181 padding: 0 !important; 182 183 list-style: none !important; 184 185 height: 42px !important; 186 187 float: right !important; 188 189} 190 191.head.container .topnav ul.navbar-nav > li { 192 193 margin: 0 !important; 194 195 padding: 0 !important; 196 197 height: 42px !important; 198 199 float: left !important; 200 201 display: block !important; 202 203} 204 205.head.container .topnav ul.navbar-nav > li > a { 206 207 color: #ffffff !important; 208 209 font-size: 14px !important; 210 211 font-weight: 500 !important; 212 213 margin: 0 !important; 214 215 padding: 0 !important; 216 217 padding-left: 30px !important; 218 219 padding-top: 1px !important; 220 221 height: 42px !important; 222 223 display: block !important; 224 225 background: transparent !important; 226 227 box-sizing: border-box !important; 228 229} 230 231.head.container .topnav ul.navbar-nav > li > a:hover { 232 233opacity: 0.5; 234 235} 236 237 238 239/* â â â ç½åºå¤§é¸å®å夿®¼ (ç©çé«åº¦ 65px) + çµæ¥µç©çé®ç·ç â â â */ 240 241.head.container .mainmenu { 242 243 position: absolute !important; 244 245 left: 0 !important; 246 247 right: 0 !important; 248 249 width: 100% !important; 250 251 height: 65px !important; 252 253 background-color: #ffffff !important; 254 255 padding: 0 30px 0 0 !important; 256 257 display: block !important; 258 259 z-index: 999 !important; 260 261 box-sizing: border-box !important; 262 263} 264 265 266 267/* 使ç¨å¤§é¸å®çå½å ç´ ååºä¸æ´æ¢å度 5px çç´ç½é®ç·çï¼å£å¨é¸å®æåºé¨ï¼å¼·è¡é»æ·ä¸¦èæä¸æ¹ä»»ä½èç· */ 268 269.head.container .mainmenu::after { 270 271 position: absolute !important; 272 273 bottom: -3px !important; /* å¾å¤å»¶ä¼¸ä¸é»é»ç¢ºä¿å£æ»èç· */ 274 275 left: 0 !important; 276 277 width: 100% !important; 278 279 height: 10px !important; 280 281 background: #ffffff !important; 282 283 display: block !important; 284 285 z-index: 999999 !important; 286 287 clear: both; /* åæä¿æåæ¬æ¸ 餿µ®åçåè½ */ 288 289} 290 291 292 293/* LOGO åºå®ä½ç½® */ 294 295.head.container .mlogo { 296 297 position: absolute !important; 298 299 left: 40px !important; 300 301 top: 5px !important; 302 303 z-index: 1000 !important; 304 305 margin: 0 !important; 306 307} 308 309.head.container .mlogo img { 310 311 height: 58px !important; 312 313 width: auto !important; 314 315 display: block !important; 316 317} 318 319 320 321/* ç½åºå¤§é¸å®å 裹層 */ 322 323.head.container .mainmenu ul.navbar-nav { 324 325 margin: 0 !important; 326 327 padding: 0 !important; 328 329 list-style: none !important; 330 331 height: 65px !important; 332 333 float: right !important; 334 335} 336 337.head.container .mainmenu ul.navbar-nav > li { 338 339 height: 65px !important; 340 341 margin: 0 2px !important; 342 343 padding: 0 !important; 344 345 float: left !important; 346 347 display: block !important; 348 349 position: relative !important; 350 351} 352 353 354 355/* ç½åºå¤§é¸å®åºæ¬åé«èæç */ 356 357.head.container .mainmenu ul.navbar-nav > li > a { 358 359 color: #334155 !important; 360 361 font-size: 15.5px !important; 362 363 font-weight: 700 !important; 364 365 margin: 0 !important; 366 367 height: 45px !important; 368 369 line-height: 65px !important; 370 371 background: transparent !important; 372 373 display: flex !important; 374 375 align-items: center !important; 376 377 position: relative !important; 378 379 box-sizing: border-box !important; 380 381 transition: color 0.2s ease !important; 382 383} 384 385.head.container .mainmenu ul.navbar-nav > li > a:hover { 386 387 color: #1d3776 !important; 388 389} 390 391 392 393/* ========================================================================== 394 395 â ãéå®ä¸æé ç®ã大細ç·ç®é ã精確åç´ç½®ä¸èçµ²æ»ç¿»è½åç« 396 397 ========================================================================== */ 398 399.head.container .mainmenu ul.navbar-nav > li:has(.dropdown-menu) > a { 400 401 padding-right: 32px !important; 402 403} 404 405 406 407/* 繪製å å¤§ç´°ç· V é ç®é (7px * 7px) */ 408 409.head.container .mainmenu ul.navbar-nav > li:has(.dropdown-menu) > a::after { 410 411 content: "" !important; 412 413 position: absolute !important; 414 415 right: 12px !important; 416 417 top: 50% !important; 418 419 width: 7px !important; 420 421 height: 7px !important; 422 423 border-right: 1.8px solid #475569 !important; 424 425 border-bottom: 1.8px solid #475569 !important; 426 427 transform: translateY(-55%) rotate(45deg) !important; 428 429 display: inline-block !important; 430 431 transform-origin: center center !important; 432 433 transition: border-color 0.25s ease, transform 0.25s ease !important; 434 435} 436 437 438 439/* Hover åç«æ´æ¹ï¼å¾®å¹ 䏿²ä¸¦æµæ¢æè½ 180 度æä¸ */ 440 441.head.container .mainmenu ul.navbar-nav > li:has(.dropdown-menu):hover > a::after { 442 443 border-right-color: #1d3776 !important; 444 445 border-bottom-color: #1d3776 !important; 446 447 transform: translateY(-35%) rotate(225deg) !important; 448 449} 450 451 452 453/* ========================================================================== 454 455 â Hover èªå觸æé¸å® 456 457 ========================================================================== */ 458 459.head.container .mainmenu ul.navbar-nav > li:has(.dropdown-menu):hover .dropdown-menu { 460 461 display: block !important; 462 463 opacity: 1 !important; 464 465 visibility: visible !important; 466 467} 468 469 470 471.head.container .mainmenu .dropdown-menu { 472 473 display: none; 474 475 position: absolute !important; 476 477 top: 65px !important; 478 479 left: 0 !important; 480 481 background-color: #ffffff !important; 482 483 min-width: 160px !important; 484 485 box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.05) !important; 486 487 padding: 8px 0 !important; 488 489 margin: 0 !important; 490 491 border: 1px solid #f1f5f9 !important; 492 493 border-radius: 0 0 8px 8px !important; 494 495 z-index: 1001 !important; 496 497} 498 499.head.container .mainmenu .dropdown-menu li { 500 501 width: 100% !important; 502 503 height: auto !important; 504 505 clear: both; 506 507} 508 509.head.container .mainmenu .dropdown-menu li a { 510 511 padding: 10px 20px !important; 512 513 color: #475569 !important; 514 515 font-size: 14px !important; 516 517 font-weight: 500 !important; 518 519 line-height: 1.5 !important; 520 521 display: block !important; 522 523 text-align: left !important; 524 525 transition: background 0.2s, color 0.2s !important; 526 527} 528 529.head.container .mainmenu .dropdown-menu li a:hover { 530 531 background-color: #f8fafc !important; 532 533 color: #1d3776 !important; 534 535} 536 537 538 539/* æå°æ¡æç精確åç´ç½®ä¸ */ 540 541.head.container .hsearch { 542 543 margin-right: 0 !important; 544 545 margin-left: 15px !important; 546 547 float: right !important; 548 549 margin-top: 18.5px !important; 550 551 height: 28px !important; 552 553} 554 555.head.container .hsearch .input-group { 556 557 display: flex !important; 558 559 align-items: center; 560 561} 562 563.head.container .hsearch .form-control { 564 565 background-color: #2b2b2b !important; 566 567 border: 1px solid #404040 !important; 568 569 border-radius: 20px 0 0 20px !important; 570 571 color: #ffffff !important; 572 573 height: 28px !important; 574 575 font-size: 12px !important; 576 577 padding: 0 12px !important; 578 579 width: 110px !important; 580 581} 582 583.head.container .hsearch .btn-default { 584 585 background-color: #404040 !important; 586 587 border: 1px solid #404040 !important; 588 589 color: #cbd5e1 !important; 590 591 border-radius: 0 20px 20px 0 !important; 592 593 height: 28px !important; 594 595 padding: 0 12px !important; 596 597 font-size: 12px !important; 598
599 line-height: 26px !important; 600 601} 602 603 604 605@media (min-width: 1400px){ 606 607 .container{ width: 100% !important; } 608 609} 610 611.container { padding: 0 !important; } 612 613 614 615/* ð åºé 滾å調æ´ï¼æ°å¢ææ©ç(1400px以ä¸)çåºé é«åº¦è£åï¼é¿å ç¶²é å §å®¹çªå è·³å */ 616 617.head.container.is-fixed { 618 619 position: fixed !important; 620 621 top: 0; left: 0; width: 100% !important; z-index: 999999 !important; 622 623 box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; 624 625} 626 627body.header-is-fixed { padding-top: 107px !important; } 628 629 630 631@media (max-width: 1399px) { 632 633 body.header-is-fixed { padding-top: 60px !important; } 634 .mlogo img, .mlogo h1 { margin-bottom: 0 !important; } 635} 636 637 638 639/* ========================================================================== 640 641 3. RWD ææ©çå°è¦½åæ¨£å¼ (å ¨é¢æ¹çºå°æ¼ 1400px 觸ç¼) 642 643 ========================================================================== */ 644 645.rwd-menu-btn, .rwd-fullscreen-menu { 646 647 display: none !important; 648 649} 650 651 652 653@media (max-width: 1399px) { 654 655 .head.container .mycollapse, 656 657 .head.container .mainmenu { 658 659 display: none !important; 660 661 } 662 663 664 665.head.container { 666 667 width: 100vw !important; /* 1. æå宿´çè¢å¹è¦çªå¯¬åº¦ */ 668 669 max-width: 100vw !important; /* 2. ç§»é¤ä»»ä½åå» çæå¤§å¯¬åº¦ä¸é */ 670 671 672 673 /* ð ãæ ¸å¿çªç ´ãå©ç¨å·¦å³è² å¤è· (Negative Margin) æé 平移ï¼å¼·è¡æå·¦å³éçæ¯éå°è¢å¹æéç·£ */ 674 675 position: relative !important; 676 677 left: 50% !important; 678 679 right: auto !important; 680 681 margin-left: -50vw !important; 682 683 margin-right: 0 !important; 684 685 686 687 height: 60px !important; 688 689 padding-bottom: 0 !important; 690 691 display: flex !important; 692 693 flex-direction: row !important; 694 695 align-items: center !important; 696 697 justify-content: space-between !important; /* è® Logo å MENU é²è¡æå·¦èæå³ç極端å°é½ */ 698 699 box-sizing: border-box !important; 700 701 z-index: 100001 !important; 702 703 background-color: #ffffff !important; 704 705 706 707 /* ð¯ ã夿ºè·é¢æ§å¶ã */ 708 709 /* é裡è¨å® 50px ä»£è¡¨å §å®¹é¢æå·¦èæå³è¢å¹éç·£çç½ 50pxã */ 710 711 /* 妿叿å®åãåå¾å¤æºä¸é»ãï¼å¯ä»¥ææ¸å¼æ¹å°ï¼ä¾å¦æ¹çº 30px æ 20pxï¼*/ 712 713 padding-left: 50px !important; 714 715 padding-right: 50px !important; 716 717 } 718 719.head.container::before, .head.container::after{ 720display: none !important; 721} 722 723 .head.container .mlogo { position: static !important; margin: 0 !important; z-index: 100002 !important; } 724 725 .head.container .mlogo img { height: 36px !important; width: auto !important; display: block !important; } 726 727 728 729 .rwd-menu-btn { 730 731 display: block !important; 732 733 margin: 0 !important; 734 735 z-index: 100002 !important; 736 737 background: #1d3776 !important; 738 739 color: #ffffff !important; 740 741 border: none !important; 742 743 padding: 6px 14px !important; 744 745 font-size: 13px !important; 746 747 font-weight: bold !important; 748 749 border-radius: 4px !important; 750 751 cursor: pointer; 752 753 } 754 755 756 757 .rwd-fullscreen-menu { 758 759 position: fixed !important; 760 761 top: 0 !important; 762 763 left: 0 !important; 764 765 width: 100vw !important; 766 767 height: 100vh !important; 768 769 background-color: #ffffff !important; 770 771 z-index: 100000 !important; 772 773 padding: 85px 24px 40px 24px !important; 774 775 overflow-y: auto !important; 776 777 box-sizing: border-box !important; 778 779 } 780 781 .rwd-fullscreen-menu.is-open { 782 783 display: block !important; 784 785 } 786 787 788 789 .rwd-fullscreen-menu ul, 790 791 .rwd-fullscreen-menu li, 792 793 .rwd-fullscreen-menu a { 794 795 list-style: none !important; 796 797 margin: 0 !important; 798 799 padding: 0 !important; 800 801 box-sizing: border-box !important; 802 803 background: transparent !important; 804 805 text-decoration: none !important; 806 807 } 808 809 810 811 .mobile-custom-topnav { 812 813 border-bottom: 1px solid #f1f5f9 !important; 814 815 padding-bottom: 14px !important; 816 817 margin-bottom: 25px !important; 818 819 width: 100% !important; 820 821 } 822 823 .mobile-custom-topnav ul { 824 825 display: flex !important; 826 827 flex-direction: row !important; 828 829 flex-wrap: wrap !important; 830 831 justify-content: center !important; 832 833 align-items: center !important; 834 835 gap: 8px 16px !important; 836 837 } 838 839 .mobile-custom-topnav li { width: auto !important; } 840 841 .mobile-custom-topnav li a { 842 843 display: block !important; 844 845 color: #64748b !important; 846 847 font-size: 13px !important; 848 849 font-weight: 500 !important; 850 851 } 852 853 854 855 .mobile-custom-mainmenu { 856 857 width: 100% !important; 858 859 } 860 861 .mobile-custom-mainmenu ul.rwd-main-ul { 862 863 display: flex !important; 864 865 flex-direction: column !important; 866 867 align-items: center !important; 868 869 gap: 16px !important; 870 871 } 872 873 .mobile-custom-mainmenu li.rwd-main-li { 874 875 width: 100% !important; 876 877 text-align: center !important; 878 879 } 880 881 882 883 .mobile-custom-mainmenu li.rwd-main-li > a { 884 885 color: #1e293b !important; 886 887 font-size: 16px !important; 888 889 font-weight: bold !important; 890 891 padding: 6px 25px 6px 10px !important; 892 893 display: inline-block !important; 894 895 position: relative !important; 896 897 cursor: pointer !important; 898 899 } 900 901 902 903 .mobile-custom-mainmenu li.rwd-main-li.has-sub > a::after { 904 905 content: " +" !important; 906 907 position: absolute !important; 908 909 right: 0 !important; 910 911 top: 50% !important; 912 913 transform: translateY(-50%) !important; 914 915 color: #1d3776 !important; 916 917 font-weight: bold !important; 918 919 font-size: 15px !important; 920 921 } 922 923 .mobile-custom-mainmenu li.rwd-main-li.has-sub.active > a::after { 924 925 content: " â" !important; 926 927 } 928 929 930 931 .mobile-custom-mainmenu ul.rwd-sub-ul { 932 933 display: none; 934 935 width: 100% !important; 936 937 background-color: transparent !important; 938 939 margin-top: 6px !important; 940 941 padding: 4px 0 !important; 942 943 } 944 945 .mobile-custom-mainmenu ul.rwd-sub-ul li { 946 947 width: 100% !important; 948 949 display: block !important; 950 951 text-align: center !important; 952 953 } 954 955 .mobile-custom-mainmenu ul.rwd-sub-ul li a { 956 957 display: block !important; 958 959 width: 100% !important; 960 961 color: #475569 !important; 962 963 font-size: 14px !important; 964 965 font-weight: normal !important; 966 967 padding: 8px 10px !important; 968 969 } 970 971} 972 973 974 975/* ç§»é¤ .mnavbar .mn-collapse 容å¨åºé¨çéæ¡èèæ¯å */ 976 977.mnavbar.mn-collapse { 978 979 border-bottom: none !important; 980 981 box-shadow: none !important; 982 983 background-image: none !important; 984 985} 986 987 988 989/* é¡å¤æ¸ é¤å¯è½åå¨çå½å ç´ èç· */ 990 991.mnavbar.mn-collapse::after, 992 993.mnavbar.mn-collapse::before { 994 995 content: none !important; 996 997 display: none !important; 998 999 border: none !important; 1000 1001} 1002 1003 1004 1005/* ========================================================================== 1006
1007 å¾¹åºæ¸ é¤é»æå¾ç黿¡èç¦é»æ¨£å¼ 1008 1009 ========================================================================== */ 1010 1011a:focus, 1012 1013button:focus, 1014 1015.mainmenu ul.navbar-nav > li > a:focus, 1016 1017.dropdown-menu > li > a:focus, 1018 1019.rwd-menu-btn:focus, 1020 1021*:focus { 1022 1023 outline: none !important; 1024 1025 box-shadow: none !important; 1026 1027 border: none !important; 1028 1029} 1030 1031 1032 1033/* 確ä¿é»ææä¸ææä»»ä½èè²ãé»è²æç°è²çéæ¡ */ 1034 1035a:active, 1036 1037button:active { 1038 1039 outline: none !important; 1040 1041 border: none !important; 1042 1043} 1044 1045 1046 1047@media (max-width: 767px){ 1048 1049 .mthide + .mb, .module-adv .mb, .module-ads .mb{ 1050 1051 padding-top: 0 !important; 1052 1053 } 1054 1055} 1056 1057 1058 1059/* ========================================================================== 1060 1061 éè· 1062 1063 ========================================================================== */ 1064 1065@media (max-width: 1399px){ 1066 1067 .container{ 1068 1069 width: 100% !important; 1070 1071 padding: 0 30px !important; 1072 1073 } 1074 1075} 1076 1077 1078 1079@media (min-width: 1200px){ 1080 1081 .container{ 1082 1083 width: 100% !important; 1084 1085 } 1086 1087} 1088 1089 1090@media (max-width: 480px){ 1091 1092.head.container{ 1093padding: 20px !important;} 1094} 1095 1096</style> 1097 1098 1099 1100<div class="head container"> 1101 1102 <div class="mlogo"> 1103 1104 <h1> 1105 1106 <a href="https://admission.ncnu.edu.tw/" title="åç«æ¨ååé大å¸"> 1107 1108 <img alt="logo" src="/var/file/55/1055/img/logo3-2048x417.png" /> 1109 1110 </a> 1111 1112 </h1> 1113 1114 </div> 1115 1116 1117 1118 <button class="rwd-menu-btn" type="button">MENU</button> 1119 1120 1121 1122 <div class="mycollapse"> 1123 1124 <div class="topnav" id="rpage-orig-topnav"> 1125 1126 1127 1128 1129 1130 1131<div class="headnavcust"> 1132 <div class="mnavbar mn-collapse"> 1133 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".hd-topnav_test" aria-expanded="false"> 1134 <span class="glyphicons show_lines">Menu</span> 1135 </button> 1136 <div class="nav-toggle collapse navbar-collapse iosScrollToggle hd-topnav_test"> 1137 <div class="hdmenu"> 1138 <ul class="nav navbar-nav" id="ae4a94552fe913dc4589ebf903fdf4255_MenuTop_topnav_test"> 1139 1140 <li class=" dropdown " id="Hln_4465" ><a href="https://rpage.ncnu.edu.tw/" title="Click to go æ¨å¤§é¦é ">æ¨å¤§é¦é </a></li> 1141 1142 <li class=" dropdown " id="Hln_4466" ><a href="https://aca.ncnu.edu.tw/" title="Click to go æåè">æåè</a></li> 1143 1144 <li class=" dropdown " id="Hln_4467" ><a href="/p/17-1055.php?Lang=zh-tw" title="Click to go ç¶²ç«å°è¦½">ç¶²ç«å°è¦½</a></li> 1145 1146 <li class=" dropdown " id="Hln_4468" ><a href="https://admission.ncnu.edu.tw/app/index.php?Lang=en" title="Click to go English">English</a></li> 1147 1148 1149 </ul> 1150 </div> 1151 </div> 1152 </div> 1153</div> 1154
1155<script> 1156$(document).ready(function(){ 1157 $(".mnavbar .navbar-toggle").click(function(){ 1158 $(this).toggleClass("open"); 1159 var ariaExpanded = $(this).attr('aria-expanded'); 1160 $(this).attr('aria-expanded',ariaExpanded !== 'true'); 1161 }); 1162 $(".mycollapse .navbar-toggle").click(function(){ 1163 $(this).toggleClass("open"); 1164 var ariaExpanded = $(this).attr('aria-expanded'); 1165 $(this).attr('aria-expanded',ariaExpanded !== 'true'); 1166 }); 1167 $('.iosScrollToggle').on('shown.bs.collapse', function () { 1168 var togglePos = $(this).css('position'); 1169 if(togglePos !== 'static'){ 1170 ModalHelper.afterOpen(); 1171 } 1172 }); 1173 1174 $('.iosScrollToggle').on('hide.bs.collapse', function () { 1175 var togglePos = $(this).css('position'); 1176 if(togglePos !== 'static'){ 1177 ModalHelper.beforeClose(); 1178 } 1179 }); 1180 1181 1182 1183 1184 1185}); 1186</script>
1186 1187 1188 1189 1190 1191
1192<script language="javascript"> 1193 1194 1195 MulttabSwitch("ae4a94552fe913dc4589ebf903fdf4255_MenuTop_topnav_test"); 1196 1197</script>
1197 1198 1199 1200 </div> 1201 1202 </div> 1203 1204 1205 1206 <div class="mainmenu" id="rpage-orig-mainmenu"> 1207 1208 1209 1210 1211 1212 1213<div class="headnavcust"> 1214 <div class="mnavbar mn-collapse"> 1215 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".hd-mainmenu_test" aria-expanded="false"> 1216 <span class="glyphicons show_lines">Menu</span> 1217 </button> 1218 <div class="nav-toggle collapse navbar-collapse iosScrollToggle hd-mainmenu_test"> 1219 <div class="hdmenu"> 1220 <ul class="nav navbar-nav" id="ae4a94552fe913dc4589ebf903fdf4255_MenuTop_mainmenu_test"> 1221 1222 <li class=" dropdown " id="Hln_4440" class="dropdown" ><a role="button" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" onclick="return false;" title="èªèæ¨å¤§">èªèæ¨å¤§</a><ul class="dropdown-menu" id="submenu1_4440"><li class=" dropdown " id="Hln_4441"><a href="https://admission.ncnu.edu.tw/p/404-1055-10952.php?Lang=zh-tw" title="Click to go ç³»æç°¡ä»">ç³»æç°¡ä»</a></li><li class=" dropdown " id="Hln_4442"><a href="https://online.fliphtml5.com/xrqju/nmbf/" title="Click to go æ¨å¤§å¸æ ¡ç°¡ä»">æ¨å¤§å¸æ ¡ç°¡ä»</a></li><li class=" dropdown " id="Hln_4443"><a href="https://online.fliphtml5.com/xrqju/zcba/" title="Click to go 2026ç¸ç´æ¨å¤§">2026ç¸ç´æ¨å¤§</a></li><li class=" dropdown " id="Hln_4444"><a href="https://online.fliphtml5.com/xrqju/vygz/" title="Click to go 2026æ¨å¤§æ¡æ">2026æ¨å¤§æ¡æ</a></li></ul></li> 1223 1224 <li class=" dropdown " id="Hln_4432" ><a href="https://admission.ncnu.edu.tw/p/426-1055-3.php?Lang=zh-tw#" title="Click to go é«ä¸çå°å">é«ä¸çå°å</a></li> 1225 1226 <li class=" dropdown " id="Hln_4567" ><a href="https://admission.ncnu.edu.tw/" title="Click to go æçè³è¨ç¶²">æçè³è¨ç¶²</a></li> 1227 1228 <li class=" dropdown " id="Hln_4433" class="dropdown" ><a role="button" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" onclick="return false;" title="å ¥å¸ç®¡éåå ±åè³è¨">å ¥å¸ç®¡éåå ±åè³è¨</a><ul class="dropdown-menu" id="submenu1_4433"><li class=" dropdown " id="Hln_4434"><a href="https://admission.ncnu.edu.tw/p/404-1055-11451.php?Lang=zh-tw" title="Click to go å¸å£«ç">å¸å£«ç</a></li><li class=" dropdown " id="Hln_4435"><a href="https://admission.ncnu.edu.tw/p/404-1055-11550.php?Lang=zh-tw" title="Click to go 碩士ç">碩士ç</a></li><li class=" dropdown " id="Hln_4436"><a href="https://admission.ncnu.edu.tw/p/404-1055-11558.php?Lang=zh-tw" title="Click to go å士ç">å士ç</a></li><li class=" dropdown " id="Hln_4437"><a href="https://admission.ncnu.edu.tw/p/404-1055-11560.php?Lang=zh-tw" title="Click to go å¢å¤ç">å¢å¤ç</a></li><li class=" dropdown " id="Hln_4438"><a href="https://admission.ncnu.edu.tw/p/404-1055-11567.php?Lang=zh-tw" title="Click to go æ°ä½æ°">æ°ä½æ°</a></li></ul></li> 1229 1230 <li class=" dropdown " id="Hln_4447" class="dropdown" ><a role="button" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" onclick="return false;" title="æçå ±åå°å">æçå ±åå°å</a><ul class="dropdown-menu" id="submenu1_4447"><li class=" dropdown " id="Hln_4448"><a href="https://apply.ncnu.edu.tw/" title="Click to go ðå¤åå¸ç">ðå¤åå¸ç</a></li><li class=" dropdown " id="Hln_4449"><a href="https://exam.ncnu.edu.tw/9Sport.html" title="Click to go ðéå績åª">ðéå績åª</a></li><li class=" dropdown " id="Hln_4450"><a href="https://exam.ncnu.edu.tw/7Uni.html" title="Click to go ð©·å¤§å¸ç³è«å ¥å¸è試">ð©·å¤§å¸ç³è«å ¥å¸è試</a></li><li class=" dropdown " id="Hln_4451"><a href="https://exam.ncnu.edu.tw/6AboClass.html" title="Click to go â¤ï¸æç¤¾ãè·çãé·ç §åå°">â¤ï¸æç¤¾ãè·çãé·ç §åå°</a></li><li class=" dropdown " id="Hln_4452"><a href="https://exam.ncnu.edu.tw/1Mas.html" title="Click to go ð碩士çå ¥å¸è試">ð碩士çå ¥å¸è試</a></li><li class=" dropdown " id="Hln_4453"><a href="https://exam.ncnu.edu.tw/2Phd.html" title="Click to go ðå士çå ¥å¸è試">ðå士çå ¥å¸è試</a></li>
1230<li class=" dropdown " id="Hln_4454"><a href="https://exam.ncnu.edu.tw/ApplyUni/" title="Click to go ð©µç³è«å ¥å¸èçå°å">ð©µç³è«å ¥å¸èçå°å</a></li></ul></li> 1231 1232 <li class=" dropdown " id="Hln_4445" ><a href="https://admission.ncnu.edu.tw/p/404-1055-594.php?Lang=zh-tw" title="Click to go çå©å¸é">çå©å¸é</a></li> 1233 1234 <li class=" dropdown " id="Hln_4439" ><a href="https://admission.ncnu.edu.tw/p/412-1055-1551.php?Lang=zh-tw" title="Click to go æ¦å®èæ³è¦">æ¦å®èæ³è¦</a></li> 1235 1236 <li class=" dropdown " id="Hln_4446" ><a href="https://www.lib.ncnu.edu.tw/index.php?option=com_content&view=category&id=100&Itemid=541&lang=tw" title="Click to go æ·å±èé¡">æ·å±èé¡</a></li> 1237 1238 1239 </ul> 1240 </div> 1241 </div> 1242 </div> 1243</div> 1244 1245 1246 1247 1248
1249<script language="javascript"> 1250 1251 1252 MulttabSwitch("ae4a94552fe913dc4589ebf903fdf4255_MenuTop_mainmenu_test"); 1253 1254</script>
1254 1255 1256 1257 </div> 1258 1259 1260 1261 <div class="rwd-fullscreen-menu"> 1262 1263 <div class="mobile-custom-topnav"> 1264 1265 <ul id="js-rwd-topnav"></ul> 1266 1267 </div> 1268 1269 <div class="mobile-custom-mainmenu"> 1270 1271 <ul class="rwd-main-ul" id="js-rwd-mainmenu"></ul> 1272 1273 </div> 1274 1275 </div> 1276 1277</div> 1278 1279 1280
1281<script> 1282 1283$(document).ready(function () { 1284 1285 $.hajaxOpenUrl("/app/index.php?Action=mobileloadmod&Type=mobileheadsch&Nbr=0", '#headsearch'); 1286 1287 $.hajaxOpenUrl("/app/index.php?Action=mobileloadmod&Type=mobile_sz_mstr&Nbr=9", '#banner'); 1288 1289 1290 1291 var header = $('.head.container'); 1292 1293 // ð ä¿®æ£æ»¾åå¤å®é»é«åº¦ï¼æ¡æ©çæé»æ¢(42px)ï¼ææ©çç´æ¥ä»¥ 0 çºåºæº 1294 1295 var getHeaderOffset = function() { 1296 1297 return $(window).width() >= 1400 ? 42 : 0; 1298 1299 }; 1300 1301 1302 1303 // ð æ´åå¯ä¸æ»¾å嵿¸¬ï¼åæå®ç¾æ¯æ´æ¡æ©çè 1400px 以ä¸çææ©ç 1304 1305 $(window).on('scroll resize', function() { 1306 1307 var scrollTop = $(window).scrollTop(); 1308 1309 var offsetLimit = getHeaderOffset(); 1310 1311 1312 1313 if (scrollTop > offsetLimit) { 1314 1315 header.addClass('is-fixed'); 1316 1317 $('body').addClass('header-is-fixed'); 1318 1319 } else { 1320 1321 header.removeClass('is-fixed'); 1322 1323 $('body').removeClass('header-is-fixed'); 1324 1325 } 1326 1327 }); 1328 1329 1330 1331 function rebuildMobileMenu() { 1332 1333 $('#js-rwd-topnav').empty(); 1334 1335 $('#rpage-orig-topnav ul.navbar-nav > li > a').each(function() { 1336 1337 var text = $(this).text().trim(); 1338 1339 var href = $(this).attr('href'); 1340 1341 if(text) { 1342 1343 $('#js-rwd-topnav').append('<li><a href="' + href + '">
1343' + text + '</a></li>'); 1344 1345 } 1346 1347 }); 1348 1349 1350 1351 $('#js-rwd-mainmenu').empty(); 1352 1353 $('#rpage-orig-mainmenu ul.navbar-nav > li').each(function() { 1354 1355 var $mainA = $(this).find('> a'); 1356 1357 var mainText = $mainA.text().replace(/[+\-]/g, '').trim(); 1358 1359 var mainHref = $mainA.attr('href') || '#'; 1360 1361 1362 1363 var $subLi = $(this).find('.dropdown-menu > li > a'); 1364 1365 1366 1367 if ($subLi.length > 0) { 1368 1369 var liHtml = '<li class="rwd-main-li has-sub">'; 1370 1371 liHtml += '<a href="' + mainHref + '">' + mainText + '</a>'; 1372 1373 liHtml += '<ul class="rwd-sub-ul">'; 1374 1375 1376 1377 $subLi.each(function() { 1378 1379 var subText = $(this).text().trim(); 1380 1381 var subHref = $(this).attr('href'); 1382 1383 liHtml += '<li><a href="' + subHref + '">' + subText + '</a></li>'; 1384 1385 }); 1386 1387 1388 1389 liHtml += '</ul></li>'; 1390 1391 $('#js-rwd-mainmenu').append(liHtml); 1392 1393 } else { 1394 1395 if(mainText) { 1396 1397 $('#js-rwd-mainmenu').append('<li class="rwd-main-li"><a href="' + mainHref + '">' + mainText + '</a></li>'); 1398 1399 } 1400 1401 } 1402 1403 }); 1404 1405 } 1406 1407 1408 1409 rebuildMobileMenu(); 1410 1411 setTimeout(rebuildMobileMenu, 800); 1412 1413 setTimeout(rebuildMobileMenu, 2000); 1414 1415 1416 1417 $('.rwd-menu-btn').click(function(e) { 1418 1419 e.preventDefault(); 1420 1421 var fullscreenMenu = $('.rwd-fullscreen-menu'); 1422 1423 fullscreenMenu.toggleClass('is-open'); 1424 1425 1426 1427 if (fullscreenMenu.hasClass('is-open')) { 1428 1429 $(this).text('CLOSE').css('background', '#334155'); 1430 1431 $('body').css('overflow', 'hidden'); 1432 1433 } else { 1434 1435 $(this).text('MENU').css('background', '#1d3776'); 1436 1437 $('body').css('overflow', ''); 1438 1439 $('.rwd-main-li.has-sub').removeClass('active').find('.rwd-sub-ul').hide(); 1440 1441 } 1442 1443 }); 1444 1445 1446 1447 $(document).on('click', '.rwd-main-li.has-sub > a', function(e) { 1448 1449 if ($(window).width() < 1400) { 1450 1451 e.preventDefault(); 1452 1453 var parentLi = $(this).parent('.rwd-main-li'); 1454 1455 var subMenu = parentLi.find('.rwd-sub-ul'); 1456 1457 1458 1459 parentLi.toggleClass('active'); 1460 1461 subMenu.stop(true, true).slideToggle(250); 1462 1463 parentLi.siblings('.has-sub').removeClass('active').find('.rwd-sub-ul').slideUp(200); 1464 1465 } 1466 1467 }); 1468 1469 1470 1471 setTimeout(function(){ 1472 1473 $('a.focusable, .header .mlogo a,.topnav ul li a').attr('tabindex', '1'); 1474 1475 $('.sch-toggle, .mainmenu .navbar-nav > li > a').attr('tabindex', '2'); 1476 1477 }, 1000); 1478 1479}); 1480 1481</script>
1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 </div> 1493</div> 1494 1495 1496 1497 1498 </div> 1499</div>
1500<script language="javascript"> 1501 1502 1503 1504if(typeof(_LoginHln)=='undefined') var _LoginHln = new hashUtil(); 1505 1506if(typeof(_LogoutHln)=='undefined') var _LogoutHln = new hashUtil(); 1507 1508if(typeof(_HomeHln)=='undefined') var _HomeHln = new hashUtil(); 1509 1510if(typeof(_InternalHln)=='undefined') var _InternalHln = new hashUtil(); 1511 1512 1513$(document).ready(function(){ 1514 if(typeof(loginStat)=='undefined') { 1515 if(popChkLogin()) loginStat="login"; 1516 else loginStat="logout"; 1517 } 1518 dealHln(isHome,loginStat,$('div.hdmenu')); 1519 1520 1521 MulttabSwitch("ae4a94552fe913dc4589ebf903fdf4255_MenuTop"); 1522 1523 1524}); 1525 1526var firstWidth = window.innerWidth; 1527function mobilehead_widthChangeCb() { 1528if((firstWidth>=767 && window.innerWidth<767) || (firstWidth<767 && window.innerWidth>=767)) location.reload(); 1529if(window.innerWidth <767) { 1530setTimeout(()=>{ 1531 var div = document.getElementsByClassName('mycollapse'); 1532 if(div=='undefined' || div.length==0) div = document.getElementsByClassName('mnavbar mn-collapse'); 1533 if(typeof(div)!='undefined'){ 1534 for (var i = 0; i < div.length; i++) { 1535 var focusableElements = div[i].querySelectorAll('a[href], button, input[type="text"], select, textarea'); 1536 if (focusableElements.length > 0) { 1537 focusableElements[focusableElements.length-1].addEventListener('keydown', function(event) { 1538 if (event.key === 'Tab') { 1539 $(".hdmenu .dropdown").removeClass("open"); 1540 var currentDiv = this.closest('.mycollapse') || this.closest('.mnavbar'); 1541 if (currentDiv) { 1542 var button= currentDiv.getElementsByClassName('navbar-toggle'); 1543 for (var j = 0; j < button.length; j++) { 1544 button[j].click(); 1545 } 1546 } 1547 } 1548 }); 1549 } 1550 } 1551 } 1552},1000); 1553}else{ 1554 var div = document.getElementsByClassName('mycollapse'); 1555 if(div=='undefined' || div.length==0) div = document.getElementsByClassName('mnavbar mn-collapse'); 1556 div = div[0]; 1557 if(typeof(div)!='undefined'){ 1558 var focusableElements = div.querySelectorAll('a[href]'); 1559 focusableElements[focusableElements.length-1].addEventListener('keydown', function(event) { 1560 if (event.key === 'Tab') { 1561 $(".hdmenu .dropdown").removeClass("open"); 1562 } 1563 }); 1564 } 1565} 1566} 1567window.addEventListener('resize', mobilehead_widthChangeCb); 1568mobilehead_widthChangeCb(); 1569</script>
1569 1570<noscript>æ¬åè½éä½¿ç¨æ¯æ´JavaScriptä¹çè¦½å¨æè½æ£å¸¸æä½</noscript> 1571<!-- generated at Wed Aug 05 2026 10:36:04 --></div> 1572 1573<main id="main-content"> 1574<div class="main"> 1575<div class="minner"> 1576 1577 1578 1579<div class="row col1 row_0"> 1580 <div class="mrow container"> 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 <div class="col col_02"> 1595 <div class="mcol"> 1596 1597 1598 1599 <div id="Dyn_2_1" class="M15106 "> 1600 1601<div class="module module-um md_style2"> 1602 <div class="mouter"> 1603 <header class="mt "> 1604 1605 <h2 class="mt-title">é«ä¸çå°å</h2> 1606</header> 1607 1608 <section class="mb"> 1609 <div class="minner"> 1610 <div class="meditor"> 1611 <!DOCTYPE html> 1612<html lang="zh-Hant"> 1613<head> 1614<meta charset="UTF-8"> 1615<meta name="viewport" content="width=device-width, initial-scale=1.0"> 1616<title>é«ä¸çå°å</title> 1617<link rel="preconnect" href="https://fonts.googleapis.com"> 1618<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800&family=Noto+Sans+TC:wght@400;500;700;800&family=Fraunces:ital,wght@1,500&display=swap" rel="stylesheet"> 1619<link rel="stylesheet" href="https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css"> 1620<style> 1621 :root{ 1622 --navy: #1d3776; 1623 --navy-deep: #10307A; 1624 --text: #1e1e1e; 1625 --text-muted: #64748b; 1626 --line: #e2e8f0; 1627 --ink: #232238; 1628 --orange: #e8703a; 1629 --teal: #60c2be; 1630 --gold-deep: #f0b429; 1631 --pink: #EA517E; 1632 --green: #34b37e; 1633 --purple: #8b6fd1; 1634 --sky: #2f8fe0; 1635 --icon-blue: #2f8fe0; 1636 } 1637 *{ box-sizing:border-box; margin:0; padding:0; } 1638 html{ scroll-behavior: smooth; } 1639 body{ 1640 font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif; 1641 color: var(--text); 1642 background:#fff; 1643 } 1644 1645 .px-outer{ padding-left:200px; padding-right:200px; } 1646 @media (max-width:1400px){ .px-outer{ padding-left:100px; padding-right:100px; } } 1647 @media (max-width:982px){ .px-outer{ padding-left:40px; padding-right:40px; } } 1648 @media (max-width:480px){ .px-outer{ padding-left:30px; padding-right:30px; } } 1649 1650 .hero-banner{ 1651 position:relative; 1652 overflow:hidden; 1653 background: #ffffff; 1654 padding-top: 90px; 1655 padding-bottom: 80px; 1656 border-bottom: 1px solid var(--line) !important; 1657 } 1658 1659 .hero-banner::before { 1660 content: ""; 1661 position: absolute; 1662 inset: 0; 1663 background-image: 1664 linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px), 1665 linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px); 1666 background-size: 40px 40px; 1667 pointer-events: none; 1668 } 1669 1670 .hero-banner-row{ 1671 position:relative; 1672 width: 100%; 1673 display:flex; 1674 align-items:center; 1675 justify-content:space-between; 1676 gap:40px; 1677 z-index: 2; 1678 } 1679 1680 .hero-text-side { 1681 flex: 1; 1682 max-width: 550px; 1683 } 1684 1685 .hero-eyebrow{ 1686 display:inline-flex; 1687 align-items:center; 1688 gap:8px; 1689 color: var(--navy-deep); 1690 font-weight: 700; 1691 font-size: 14px; 1692 letter-spacing: .15em; 1693 margin-bottom: 20px; 1694 text-transform: uppercase; 1695 background: #fff; 1696 border: 2px solid var(--ink); 1697 padding: 6px 18px; 1698 border-radius: 999px; 1699 box-shadow: 2px 3px 0 var(--ink); 1700 transform: rotate(-4deg); 1701 } 1702 1703 .hero-banner h1{ 1704 font-size: clamp(36px, 4.2vw, 50px); 1705 font-weight: 700; 1706 color: var(--text); 1707 line-height: 1.25; 1708 letter-spacing: -0.5px; 1709 margin-bottom: 20px; 1710 } 1711 1712 .hero-banner h1 span { 1713 display: block; 1714 font-family: "Fraunces", "Times New Roman", serif; 1715 font-style: italic; 1716 font-weight: 500; 1717 font-size: 0.62em; 1718 color: var(--navy-deep); 1719 opacity: 0.3; 1720 margin-top: 20px; 1721 letter-spacing: 0.5px; 1722 } 1723 1724 .hero-desc { 1725 font-size: 16px; 1726 color: var(--text-muted); 1727 line-height: 1.7; 1728 } 1729 1730 .hero-stickers{ 1731 position:relative; 1732 flex:0 0 auto; 1733 width:380px; 1734 height:260px; 1735 z-index: 2; 1736 } 1737 .sticker-circle{ 1738 position:absolute; 1739 border-radius:50%; 1740 border:2px solid var(--ink); 1741 display:flex; 1742 align-items:center; 1743 justify-content:center; 1744 box-shadow:2px 3px 0 var(--ink); 1745 font-family:"M PLUS Rounded 1c", sans-serif; 1746 font-weight:800; 1747 color:#fff; 1748 text-align:center; 1749 animation: floatY 4s ease-in-out infinite; 1750 padding: 8px; 1751 } 1752 1753 @keyframes floatY{ 1754 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 1755 50%{ transform:translateY(-12px) rotate(var(--r,0deg)); } 1756 } 1757 1758 .sc1 { 1759 width: 230px; height: 230px; 1760 background: #EA517E; 1761 font-size: 18px; 1762 top: -60px; 1763 right: 200px; 1764 --r: -8deg; 1765 animation-delay: 0s; 1766 } 1767 1768 .sc2 { 1769 width: 130px; height: 130px; 1770 background:#0c3388; 1771 font-size: 14px; 1772 top: 25px; right: -40px; 1773 --r: 6deg; 1774 animation-delay: .6s; 1775 } 1776 1777 .sc3 { 1778 width: 150px; height: 150px; 1779 background: var(--teal); 1780 font-size: 15px; 1781 bottom: -20px; right: 180px; 1782 --r: -4deg; 1783 animation-delay: 1.2s; 1784 } 1785 1786 .sc4 { 1787 width: 90px; height: 90px; 1788 background: #fdc645; 1789 color: var(--ink); 1790 font-size: 13px; 1791 bottom: 0px; right: 40px; 1792 --r: 10deg; 1793 animation-delay: 1.8s; 1794 } 1795 1796 @media (max-width:991px){ 1797 .hero-banner { padding-top: 80px; padding-bottom: 60px; } 1798 .hero-text-side { max-width: 100%; text-align: center; } 1799 .hero-eyebrow{ margin-left:auto; margin-right:auto; } 1800 .hero-stickers{ 1801 width: 260px; 1802 height: 180px; 1803 margin: 30px auto 0; 1804 transform: scale(0.85); 1805 } 1806 .sc1{ width:150px; height:150px; right:130px; font-size:14px; } 1807 .sc2{ width:90px; height:90px; right:-10px; top:10px; font-size:12px; } 1808 .sc3{ width:100px; height:100px; right:110px; bottom:-10px; font-size:12px; } 1809 .sc4{ width:64px; height:64px; right:30px; bottom:-10px; font-size:11px; } 1810 } 1811 1812 @media (max-width:600px){ 1813 .hero-stickers{ display:none; } 1814 } 1815 1816 /* ========================================================================== 1817 Section title block â æ¨é¡åå¡ 1818 ========================================================================== */ 1819 .section-title-block { 1820 text-align: center; 1821 margin-bottom: 40px; 1822 } 1823 1824 .section-tag{ 1825 display:inline-flex; 1826 align-items:center; 1827 font-family:"M PLUS Rounded 1c", sans-serif; 1828 font-weight:800; 1829 font-size:11px; 1830 letter-spacing:.15em; 1831 text-transform:uppercase; 1832 color:#fff; 1833 background: var(--tag-color, var(--pink)); 1834 border: 2px solid var(--ink); 1835 box-shadow: 2px 3px 0 var(--ink); 1836 padding:5px 14px; 1837 border-radius:100px; 1838 margin-bottom:30px; 1839 animation: tagFloat 1.6s cubic-bezier(.65,0,.35,1) infinite; 1840 transform-origin: bottom center; 1841 } 1842 @keyframes tagFloat{ 1843 0%, 15%{ transform: rotate(-3deg); } 1844 50%, 65%{ transform: rotate(3deg); } 1845 100%{ transform: rotate(-3deg); } 1846 } 1847 .section-tag .tag-dot{ 1848 display:none; 1849 } 1850 1851 .section-title-block h3 { 1852 font-size: 26px; 1853 font-weight: 700; 1854 color: var(--ink); 1855 letter-spacing: 2px; 1856 margin: 0 0 6px 0; 1857 padding: 0; 1858 } 1859 .section-title-block .title-desc { 1860 font-size: 15px; 1861 color: var(--text-muted); 1862 max-width: 660px; 1863 margin: 16px auto 0; 1864 line-height: 1.7; 1865 } 1866 1867 @media (max-width: 480px){ 1868 .section-title-block h3 { 1869 font-size: 22px; 1870 } 1871 .section-tag{ 1872 font-size: 11px; 1873 } 1874 } 1875 1876 /* ========================================================================== 1877 鏿å¸é¢ï¼æ¢ç´¢ç³»æ â èæ¯æ¹çºç°åºï¼åé»åæ¨£ï¼æ¯ç §åæ¬æ ¡åçæ´»è³è¨æ¨£å¼ï¼ 1878 ========================================================================== */ 1879 .college-sec{ 1880 position:relative; 1881 background: #f8fafc !important; 1882 border-top:1px solid var(--line) !important; 1883} 1884 .college-sec::before{ 1885 content:""; 1886 position:absolute; 1887 inset:0; 1888 background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1.5px, transparent 1.5px); 1889 background-size: 18px 18px; 1890 pointer-events:none; 1891 z-index:1; 1892 } 1893 .college-sec > *{ 1894 position:relative; 1895 z-index:2; 1896 } 1897 1898 .college-tabs-wrap{ 1899 position:relative; 1900 padding-top:90px; 1901 border-bottom: none !important; 1902 scroll-margin-top: 30px; 1903 } 1904 1905 .college-tabs{ 1906 list-style:none; 1907 display:flex; 1908 justify-content: center; 1909 flex-wrap:wrap; 1910 gap:12px; 1911 margin-top: 10px; 1912 border-bottom: 1px solid var(--line) !important; 1913 padding-bottom: 50px; 1914 } 1915 .college-tabs button{ 1916 all:unset; 1917 display:flex; 1918 align-items:center; 1919 gap:8px; 1920 padding:12px 24px; 1921 color: var(--text-muted); 1922 font-size:14px; 1923 font-weight:700; 1924 cursor:pointer; 1925 border: none; 1926 border-radius:999px; 1927 background:#ffffff; 1928 transition: all .2s ease; 1929 border: 1px solid var(--line); 1930 } 1931 .college-tabs .icon{ 1932 display:inline-flex; 1933 align-items:center; 1934 justify-content:center; 1935 width:22px; 1936 height:22px; 1937 flex-shrink:0; 1938 } 1939 .college-tabs .icon svg{ width:100%; height:100%; } 1940 .college-tabs button:hover{ 1941 background:#e2e8f0; 1942 color: var(--navy-deep); 1943 transform: translateY(-2px); 1944 } 1945 .college-tabs li.active button{ 1946 background: var(--navy-deep); 1947 color:#fff; 1948 box-shadow: 0 4px 15px rgba(16, 48, 122, 0.2); 1949 } 1950 1951 .dept-section{ 1952 position:relative; 1953 padding-top:50px; 1954 padding-bottom:90px; 1955 } 1956 1957 .dept-panel{ display:none; } 1958 .dept-panel.active{ 1959 display:block; 1960 animation: fadeUp .3s ease; 1961 } 1962 @keyframes fadeUp{ 1963 from{ opacity:0; transform:translateY(8px); } 1964 to{ opacity:1; transform:translateY(0); } 1965 } 1966 .content-head{ 1967 margin-bottom:24px; 1968 padding-bottom:14px;
1969 border-bottom:none !important; 1970 display:flex; 1971 align-items:center; 1972 gap:14px; 1973 flex-wrap:wrap; 1974 } 1975 .content-head .dept-count{ 1976 display:inline-block; 1977 background: #0000000f; 1978 color:#00000057; 1979 font-weight:700; 1980 font-size:12px; 1981 padding:4px 14px; 1982 border-radius:999px; 1983 } 1984 .content-head h2{ 1985 font-size:24px; 1986 font-weight:800; 1987 color: var(--text); 1988 display:inline-flex; 1989 align-items:center; 1990 gap:10px; 1991 } 1992 .content-head h2 svg{ 1993 width:28px; 1994 height:28px; 1995 flex-shrink:0; 1996 color: var(--navy-deep); 1997 } 1998 1999 .dept-grid{ 2000 display:grid; 2001 grid-template-columns:repeat(3, 1fr); 2002 gap:16px 18px; 2003 } 2004 .dept-item{ 2005 display:flex; 2006 align-items:center; 2007 min-height:60px; 2008 padding:16px 20px; 2009 border:1px solid var(--line); 2010 border-radius:12px; 2011 background:#fff; 2012 box-shadow: 0 2px 8px rgba(0,0,0,0.02); 2013 transition: all .2s ease; 2014 } 2015 .dept-item a{ 2016 color: var(--text); 2017 text-decoration:none; 2018 font-size:15px; 2019 font-weight:700; 2020 line-height:1.5; 2021 width: 100%; 2022 } 2023 .dept-item:hover{ 2024 transform: translateY(-3px); 2025 border-color: var(--navy-deep); 2026 box-shadow: 0 8px 20px rgba(16, 48, 122, 0.08); 2027 } 2028 .dept-item:hover a{ 2029 color: var(--navy-deep); 2030 } 2031 2032 @media (max-width:640px){ 2033 .dept-grid{ grid-template-columns:repeat(2, 1fr); } 2034 } 2035 @media (max-width:480px){ 2036 .dept-grid{ grid-template-columns:1fr; } 2037 } 2038 @media (min-width: 481px){ 2039 .row .col .mcol{ padding: 0 !important;} 2040 } 2041 #Dyn_2_1 .md_style2 .mt { 2042 display:none !important; 2043 } 2044 #Dyn_2_1.M15106 .mouter .mb{ 2045 padding-top:0 !important; 2046 } 2047 2048 /* ========================================================================== 2049 æ ¡åçæ´»è³è¨ â èæ¯æ¹çºç½è² 2050 ========================================================================== */ 2051 .campus-info-section{ 2052 position: relative; 2053 padding-top:80px; 2054 padding-bottom:80px; 2055 background:#fff !important; 2056 border-top: 1px solid var(--line) !important; 2057 scroll-margin-top: 30px; 2058 } 2059 .campus-info-section .px-outer-inner { 2060 position: relative; 2061 z-index: 2; 2062 } 2063 2064 /* ========================================================================== 2065 æ ¡åçæ´»å¡ç â åå§æ¨£å¼ï¼åç / å½©è²æ¨ç±¤ / æ¨é¡å §åµå示 / äºè§£æ´å¤æé 2066 ========================================================================== */ 2067 .card-grid{ 2068 display:grid; 2069 grid-template-columns:repeat(4, 1fr); 2070 gap:32px 24px; 2071 } 2072 .photo-card{ 2073 position:relative; 2074 background:#fff; 2075 border-radius:16px; 2076 border:1px solid var(--line); 2077 display:flex; 2078 flex-direction:column; 2079 overflow:hidden; 2080 transition: all .2s ease; 2081 } 2082 .photo-card:hover{ 2083 transform: translateY(-4px); 2084 box-shadow: 0 10px 24px rgba(16, 48, 122, 0.1); 2085 } 2086 .photo-card-media{ 2087 position:relative; 2088 aspect-ratio: 16 / 9; 2089 overflow:hidden; 2090 display:flex; 2091 align-items:center; 2092 justify-content:center; 2093 } 2094 .photo-card-media img{ 2095 width:100%; 2096 height:100%; 2097 object-fit:cover; 2098 display:block; 2099 } 2100 @media (max-width:991px){ 2101 .card-grid{ grid-template-columns:repeat(2, 1fr); gap:28px 22px; } 2102 } 2103 @media (max-width:640px){ 2104 .card-grid{ grid-template-columns:1fr; gap:28px; } 2105 } 2106 .card-icon-badge{ 2107 display:flex; 2108 align-items:center; 2109 justify-content:center; 2110 width:48px; 2111 height:48px; 2112 border-radius:14px; 2113 margin-bottom:14px; 2114 } 2115 .card-icon-badge svg{ 2116 width:26px; 2117 height:26px; 2118 } 2119 .card-icon-badge.badge-food{ background: rgba(234,81,126,.12); color: var(--pink); } 2120 .card-icon-badge.badge-housing{ background: rgba(240,180,41,.16); color: var(--gold-deep); } 2121 .card-icon-badge.badge-transport{ background: rgba(96,194,190,.16); color: var(--teal); } 2122 .card-icon-badge.badge-global{ background: rgba(16,48,122,.1); color: var(--navy-deep); } 2123 .card-icon-badge.badge-life{ background: rgba(232,112,58,.14); color: var(--orange); } 2124 .card-icon-badge.badge-future{ background: rgba(52,179,126,.14); color: var(--green); } 2125 .card-icon-badge.badge-scholarship{ background: rgba(139,111,209,.14); color: var(--purple); } 2126 .card-icon-badge.badge-lan{ background: rgba(47,143,224,.14); color: var(--sky); } 2127 2128 .photo-card-body{ 2129 padding:22px 24px 24px; 2130 flex:1; 2131 display:flex; 2132 flex-direction:column; 2133 } 2134 .photo-card-body h4{ 2135 font-size:16px; 2136 font-weight:800; 2137 color: var(--text); 2138 margin-bottom:8px; 2139 } 2140 .photo-card-body p{ 2141 font-size:13.5px; 2142 color: var(--text-muted); 2143 line-height:1.7; 2144 flex:1; 2145 } 2146 2147 .photo-card-link{ 2148 box-sizing: border-box !important; 2149 margin-top:16px !important; 2150 margin-bottom:0 !important; 2151 margin-left:0 !important; 2152 margin-right:0 !important; 2153 width:auto !important; 2154 max-width:none !important; 2155 height:auto !important; 2156 font-size:14px !important; 2157 font-weight:700 !important; 2158 line-height:1 !important; 2159 color: var(--navy-deep) !important; 2160 text-decoration:none !important; 2161 white-space:nowrap !important; 2162 display:inline-flex !important; 2163 flex-direction:row !important; 2164 flex-wrap:nowrap !important;
2165 align-items:center !important; 2166 justify-content:flex-start !important; 2167 gap:8px !important; 2168 background: transparent !important; 2169 border: none !important; 2170 padding:0 !important; 2171 border-radius:0 !important; 2172 transition: gap .2s ease !important; 2173 outline: none !important; 2174 } 2175 /* æ´å¤§é»æ/hoverç¯åå°æ´å¼µå¡çï¼.photo-card å·²æ¯ position:relative çå®ä½åºæºï¼ */ 2176 .photo-card-link::after{ 2177 content:""; 2178 position:absolute; 2179 inset: 0; 2180 z-index: 3; 2181 } 2182 .photo-card-link, 2183 .photo-card-link:link, 2184 .photo-card-link:visited, 2185 .photo-card-link:active, 2186 .photo-card-link:focus { 2187 color: var(--navy-deep) !important; 2188 text-decoration: none !important; 2189 } 2190 .photo-card-link .arrow-circle{ 2191 flex:0 0 auto !important; 2192 width:auto !important; 2193 height:auto !important; 2194 min-width:0 !important; 2195 min-height:0 !important; 2196 border-radius:0 !important; 2197 background: transparent !important; 2198 color: var(--navy-deep) !important; 2199 display:flex !important; 2200 align-items:center !important; 2201 justify-content:center !important; 2202 font-size:16px !important; 2203 line-height:1 !important; 2204 transition: transform .2s ease !important; 2205 } 2206 .photo-card-link:hover, 2207 .photo-card-link:hover:link, 2208 .photo-card-link:hover:visited { 2209 background: transparent !important; 2210 border-color: transparent !important; 2211 color: var(--navy-deep) !important; 2212 text-decoration: none !important; 2213 gap: 12px !important; 2214 } 2215 .photo-card-link:hover .arrow-circle{ 2216 background: transparent !important; 2217 color: var(--navy-deep) !important; 2218 transform: translateX(3px) !important; 2219 } 2220 2221 @media(max-width: 1399px){ 2222 .container{ 2223 padding: 0 !important;}} 2224 2225 @media(max-width: 768px){ 2226 .wrap > .minner{ 2227 padding: 0 !important;}} 2228 2229 /* ========================================================================== 2230 麵å å± 2231 ========================================================================== */ 2232 .breadcrumb{ 2233 background:#fff; 2234 border-bottom: 1px solid var(--line) !important; 2235 padding: 0 !important; 2236 margin-bottom: 0 !important; 2237 } 2238 .breadcrumb-inner{ 2239 display:flex; 2240 align-items:center; 2241 flex-wrap:wrap; 2242 gap:8px; 2243 padding: 10px 40px; 2244 font-size: 13px; 2245 } 2246 .breadcrumb-inner a{ 2247 color: var(--text-muted); 2248 text-decoration:none; 2249 font-weight:500; 2250 transition: color .2s ease; 2251 } 2252 .breadcrumb-inner a:hover{ color: var(--navy-deep); } 2253 .breadcrumb-inner .crumb-sep{ color: #cbd5e1; } 2254 .breadcrumb-inner .crumb-current{ 2255 color: var(--navy-deep); 2256 font-weight:700; 2257 } 2258 2259 @media (max-width:480px){ 2260 .breadcrumb{ margin-bottom:0; } 2261 .breadcrumb-inner{ justify-content:center; text-align:center; } 2262 } 2263 2264@media (max-width:480px) { 2265 .college-tabs { 2266 padding-bottom: 40px;} 2267 .dept-section{ 2268 padding-top: 20px;} 2269 .content-head{ 2270 margin-bottom: 0;} 2271} 2272 2273 /* ========================================================================== 2274 å ¥å£å°è¦½åå¡ï¼æ¢ç´¢å¸ç³»ï¼æ ¡åçæ´»è³è¨ï¼è½é»åæï¼â èæ¯æ¹çºéæï¼ç½è² 2275 ========================================================================== */ 2276 .portal-nav{ 2277 position: relative; 2278 padding-top:60px; 2279 padding-bottom:60px; 2280 border-bottom: 1px solid var(--line); 2281 } 2282 .portal-nav-grid{ 2283 display:grid; 2284 grid-template-columns:repeat(3, 1fr); 2285 } 2286 .portal-nav-item{ 2287 display:flex; 2288 flex-direction:column; 2289 align-items:center; 2290 justify-content:flex-start; 2291 text-align:center; 2292 gap:24px; 2293 padding:10px 30px 6px; 2294 text-decoration:none !important; 2295 transition: all .2s ease; 2296 } 2297 .portal-nav-item:nth-child(2), .portal-nav-item:nth-child(3){ 2298 border-left:1px solid var(--line);} 2299 .portal-nav-icon{ 2300 display:flex; 2301 align-items:center; 2302 justify-content:center; 2303 width:76px; 2304 height:76px; 2305 } 2306 .portal-nav-icon img{ 2307 width:100%; 2308 height:100%; 2309 object-fit:contain; 2310 transition: transform .2s ease; 2311 } 2312 .portal-nav-item:hover .portal-nav-icon img{ 2313 transform: translateY(-4px); 2314 } 2315 .portal-nav-icon--zoom img{ 2316 transform: scale(1.25); 2317 } 2318 .portal-nav-item:hover .portal-nav-icon--zoom img{ 2319 transform: scale(1.25) translateY(-4px); 2320 } 2321 .portal-nav-text-group{ 2322 display:flex; 2323 flex-direction:column; 2324 gap:4px; 2325 } 2326 .portal-nav-title{ 2327 font-size:20px; 2328 font-weight:800; 2329 color: var(--ink); 2330 } 2331 .portal-nav-subtitle{ 2332 font-size:11px; 2333 letter-spacing:.08em; 2334 text-transform:uppercase; 2335 color: var(--text-muted); 2336 opacity:.7; 2337 } 2338 .portal-nav-arrow{ 2339 margin-top:4px; 2340 font-size:18px; 2341 color: var(--navy-deep); 2342 transition: transform .2s ease; 2343 } 2344 .portal-nav-item:hover .portal-nav-arrow{ 2345 transform: translateX(4px); 2346 } 2347 2348 /* ä¸å¯¬è¢å¹ï¼å¹³æ¿æ©«åï¼å°çé»ï¼ï¼ç¶æä¸æ¬ï¼ä½ç¸®å°å §è·èå ç´ å°ºå¯¸ï¼é¿å ææ ææè¡è·ç */ 2349 @media (max-width:991px){ 2350 .portal-nav{ padding-top:50px; padding-bottom:50px; } 2351 .portal-nav-item{ padding:10px 16px 6px; gap:18px; } 2352 .portal-nav-icon{ width:60px; height:60px; } 2353 .portal-nav-title{ font-size:17px; } 2354 .portal-nav-subtitle{ font-size:10px; } 2355 } 2356 2357 @media (max-width:768px){ 2358 .portal-nav-grid{ grid-template-columns:1fr; } 2359 #Dyn_2_1 .portal-nav-grid .portal-nav-item{ 2360 border-left:none; 2361 padding:24px 20px; 2362 flex-direction:row; 2363 justify-content:flex-start; 2364 text-align:left; 2365 gap:20px; 2366 } 2367 .portal-nav-item:nth-child(2), .portal-nav-item:nth-child(3){ 2368 border-left:none; 2369 border-top:1px solid var(--line) !important; 2370 } 2371 .portal-nav-item:first-child{ border-top:none; } 2372 .portal-nav-item:last-child{ 2373 border-right:none; 2374 border-bottom:1px solid var(--line); 2375 } 2376 .portal-nav-icon{ width:52px; height:52px; flex-shrink:0; } 2377 .portal-nav-icon--zoom img{ transform: scale(1.1); } 2378 .portal-nav-item:hover .portal-nav-icon--zoom img{ transform: scale(1.1) translateY(-4px); } 2379 .portal-nav-text-group{ align-items:flex-start; } 2380 .portal-nav-arrow{ 2381 margin-left:auto; 2382 margin-top:0; 2383 flex-shrink:0; 2384 } 2385 } 2386 @media (max-width:480px){ 2387 .portal-nav{ padding-top:30px; padding-bottom:40px; } 2388 .portal-nav-item{ padding:18px 4px; gap:16px; } 2389 .portal-nav-icon{ width:46px; height:46px; } 2390 .portal-nav-title{ font-size:16px; } 2391 .portal-nav-subtitle{ font-size:10px; } 2392 } 2393 2394 /* ========================================================================== 2395 IOH å¸é·å§ç¶é©åäº«ï¼æ ¡åçæ´»è³è¨ 䏿¹æ°å¢åå¡ï¼ 2396 æ¨é¡æ²¿ç¨ section-title-blockï¼è·ã鏿å¸é¢ï¼æ¢ç´¢ç³»æããæ ¡åçæ´»è³è¨ãä¸è´ï¼ï¼
2397 åºä¸ååå¸é¢ä¸¦æä»¥ icon å¡çåç¾ï¼ä¸ä½¿ç¨ç½è²å¤æ¡å¤§å¡çã 2398 ååï¼å 大尺寸ãç·æ¢æ¹çº 1pxãicon æ¹ç¨ Flaticon CDN å示ï¼é è¨èè²ï¼hover æè®å¸é¢è²ï¼ã 2399 æåæ¾å¤§ä¸¦éä½ç²ç´°ã 2400 ========================================================================== */ 2401 .ioh-section{ 2402 position: relative; 2403 padding-top:70px; 2404 padding-bottom:90px; 2405 border-top: 1px solid var(--line) !important; 2406 } 2407 .ioh-all-btn{ 2408 display:inline-flex; 2409 align-items:center; 2410 gap:8px; 2411 margin-top:20px; 2412 padding:12px 28px; 2413 border-radius:999px; 2414 background: var(--navy-deep); 2415 color:#fff !important; 2416 font-weight:700; 2417 font-size:14px; 2418 text-decoration:none !important; 2419 box-shadow: 0 6px 16px rgba(16,48,122,.22); 2420 transition: all .2s ease; 2421 } 2422 .ioh-all-btn:hover{ 2423 background:#0c265f; 2424 transform: translateY(-2px); 2425 box-shadow: 0 8px 20px rgba(16,48,122,.3); 2426 } 2427 .ioh-all-btn span{ 2428 display:inline-block; 2429 transition: transform .2s ease; 2430 } 2431 .ioh-all-btn:hover span{ 2432 transform: translateX(3px); 2433 } 2434 .ioh-icon-grid{ 2435 display:flex; 2436 flex-wrap:wrap; 2437 justify-content:space-between; 2438 gap:16px; 2439 } 2440 .ioh-icon-card{ 2441 display:flex; 2442 flex-direction:column; 2443 align-items:center; 2444 justify-content:center; 2445 padding:10px; 2446 text-decoration:none; 2447 transition: transform .2s ease; 2448 } 2449 .ioh-icon-card:hover{ 2450 transform: translateY(-4px); 2451 text-decoration:none; 2452 } 2453 .ioh-icon-badge{ 2454 display:flex; 2455 flex-direction:column; 2456 align-items:center; 2457 justify-content:center; 2458 gap:14px; 2459 width:220px; 2460 height:220px; 2461 border-radius:32px; 2462 background:#fff; 2463 border: 1px solid var(--line); 2464 padding: 20px; 2465 transition: all .2s ease; 2466 } 2467 .ioh-icon-badge i{ 2468 font-size:46px; 2469 color: var(--icon-blue); 2470 flex-shrink:0; 2471 transition: color .2s ease; 2472 } 2473 .ioh-icon-badge .ioh-icon-label{ 2474 font-size:17px; 2475 font-weight:500; 2476 color: var(--text); 2477 line-height:1.35; 2478 } 2479 .ioh-icon-card:hover .ioh-icon-badge{ 2480 border-color: var(--badge-color, var(--navy-deep)); 2481 box-shadow: 0 10px 22px rgba(16,48,122,.14); 2482 } 2483 .ioh-icon-card:hover .ioh-icon-badge i{ 2484 color: var(--badge-color, var(--navy-deep)); 2485 } 2486 .ioh-icon-label{ 2487 font-size:17px; 2488 font-weight:500; 2489 color: var(--text); 2490 } 2491 .ioh-icon-card:hover .ioh-icon-label{ 2492 color: var(--navy-deep); 2493 } 2494 2495 @media (max-width:768px){ 2496 .ioh-icon-grid{ gap:16px; } 2497 } 2498 @media (max-width:480px){ 2499 .ioh-section{ padding-top:50px; padding-bottom:60px; } 2500 .ioh-icon-grid{ gap:16px; } 2501 .ioh-icon-badge{ width:160px; height:160px; } 2502 .ioh-icon-badge i{ font-size:34px; } 2503 .ioh-icon-badge .ioh-icon-label{ font-size:15px; } 2504 } 2505 2506 /* ========================================================================== 2507 åå°é 鍿é 2508 ========================================================================== */ 2509 .go-top-shadow{ 2510 position: fixed; 2511 bottom: 24px; 2512 right: 30px; 2513 width: 90px; 2514 height: 90px; 2515 border-radius: 50%; 2516 background: rgba(16,48,122,0.16); 2517 filter: blur(16px); 2518 -webkit-filter: blur(16px); 2519 z-index: 997; 2520 pointer-events: none; 2521 opacity: 0; 2522 transition: background 0.25s ease, opacity 0.3s ease; 2523 } 2524 .go-top-shadow.is-visible{ 2525 opacity: 1; 2526 } 2527 .go-top-btn{ 2528 position: fixed; 2529 bottom: 30px; 2530 right: 36px; 2531 width: 66px; 2532 height: 66px; 2533 border-radius: 50%; 2534 background: #ffffff; 2535 display: flex; 2536 align-items: center; 2537 justify-content: center; 2538 text-decoration: none; 2539 cursor: pointer; 2540 z-index: 998; 2541 border: none; 2542 padding: 0; 2543 box-shadow: 0 5px 12px rgba(16, 48, 122, 0.08), 0 2px 5px rgba(16, 48, 122, 0.05); 2544 filter: drop-shadow(0 3px 6px rgba(16, 48, 122, 0.12)); 2545 transition: box-shadow 0.25s ease, filter 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 2546 opacity 0.3s ease, visibility 0.3s ease; 2547 opacity: 0; 2548 visibility: hidden; 2549 transform: translateY(10px) scale(.9); 2550 } 2551 .go-top-btn.is-visible{ 2552 opacity: 1; 2553 visibility: visible; 2554 transform: translateY(0) scale(1); 2555 } 2556 .go-top-icon{ 2557 width: 24px; 2558 height: 24px; 2559 color: var(--navy-deep); 2560 transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 2561 } 2562 .go-top-btn:hover .go-top-icon{ 2563 transform: translateY(-3px); 2564 } 2565 @media (max-width: 768px){ 2566 .go-top-btn{ 2567 bottom: 16px; 2568 right: 16px; 2569 width: 52px; 2570 height: 52px; 2571 }
2572 .go-top-icon{ width: 20px; height: 20px; } 2573 .go-top-shadow{ display: none !important; } 2574 } 2575 2576</style> 2577</head> 2578<body> 2579 2580<section class="hero-banner"> 2581 <div class="px-outer hero-banner-row"> 2582 <div class="hero-text-side"> 2583 <span class="hero-eyebrow">â FOR FUTURE STUDENTS</span> 2584 <h1>é«ä¸çå°å<span>Explore NCNU</span></h1> 2585 <p class="hero-desc">æ¢ç´¢ç§ç³»ãé«é©æ ¡åï¼éåä½ ç大叿 ç¨ã</p> 2586 </div> 2587 2588 <div class="hero-stickers"> 2589 <div class="sticker-circle sc1">å¸ç³»æ¢ç´¢</div> 2590 <div class="sticker-circle sc2">æªä¾ç¼å±</div> 2591 <div class="sticker-circle sc3">æ ¡åçæ´»</div> 2592 <div class="sticker-circle sc4">æçè³è¨</div> 2593 </div> 2594 </div> 2595</section> 2596 2597<nav class="breadcrumb"> 2598 <div class="px-outer breadcrumb-inner"> 2599 <a href="https://admission.ncnu.edu.tw/">é¦é </a> 2600 <span class="crumb-sep">âº</span> 2601 <a href="https://admission.ncnu.edu.tw/p/426-1055-3.php?Lang=zh-tw#" class="crumb-current">é«ä¸çå°å</a> 2602 </div> 2603</nav> 2604 2605<section class="portal-nav px-outer"> 2606 <!-- 2607 åç¤ºä¾æºï¼ä¾è¦å®éæ¨æä½è åºèï¼ï¼ 2608 æ¢ç´¢å¸ç³»ï¼Graduation icon by justicon - https://www.flaticon.com/free-icon/graduation_2997322 2609 æ ¡åçæ´»è³è¨ï¼University icon by smashingstocks - https://www.flaticon.com/free-icon/school_3033314 2610 è½é»åæï¼Data science icon by vectorsmarket15 - https://www.flaticon.com/free-icon/data-science_2821637 2611 --> 2612 <div class="portal-nav-grid"> 2613 <a href="#explore-depts" class="portal-nav-item" style="--accent-color: var(--navy-deep);"> 2614 <span class="portal-nav-icon"><img src="https://cdn-icons-png.flaticon.com/512/2997/2997322.png" alt="æ¢ç´¢å¸ç³»"></span> 2615 <span class="portal-nav-text-group"> 2616 <span class="portal-nav-title">æ¢ç´¢å¸ç³»</span> 2617 <span class="portal-nav-subtitle">Explore Majors</span> 2618 </span> 2619 <span class="portal-nav-arrow">â</span> 2620 </a> 2621 <a href="#campus-life" class="portal-nav-item" style="--accent-color: var(--navy-deep);"> 2622 <span class="portal-nav-icon portal-nav-icon--zoom"><img src="https://cdn-icons-png.flaticon.com/512/3033/3033314.png" alt="æ ¡åçæ´»è³è¨"></span> 2623 <span class="portal-nav-text-group"> 2624 <span class="portal-nav-title">æ ¡åçæ´»è³è¨</span> 2625 <span class="portal-nav-subtitle">Campus Life</span> 2626 </span> 2627 <span class="portal-nav-arrow">â</span> 2628 </a> 2629 <a href="https://admission.ncnu.edu.tw/p/426-1055-6.php?Lang=zh-tw#top" target="_blank" rel="noopener" class="portal-nav-item" style="--accent-color: var(--navy-deep);"> 2630 <span class="portal-nav-icon"><img src="https://cdn-icons-png.flaticon.com/512/2821/2821637.png" alt="è½é»åæ"></span> 2631 <span class="portal-nav-text-group"> 2632 <span class="portal-nav-title">è½é»åæ</span> 2633 <span class="portal-nav-subtitle">Admission Analysis</span> 2634 </span> 2635 <span class="portal-nav-arrow">â</span> 2636 </a> 2637 </div> 2638</section> 2639 2640<section class="college-sec"> 2641<section class="college-tabs-wrap px-outer" id="explore-depts"> 2642 <div class="section-title-block"> 2643 <span class="section-tag" style="--tag-color: var(--pink);"><i class="tag-dot"></i>FIND YOUR MAJOR</span> 2644 <h3>鏿å¸é¢ï¼æ¢ç´¢ç³»æ</h3> 2645 <p class="title-desc">èªèæ¨å¤§çç¬¬ä¸æ¥ï¼é»é¸ä¸æ¹å¸é¢ï¼æ¢ç´¢åå¸ç³»ç¹è²è詳細ä»ç´¹ï¼æ¾å°æé©åä½ çç®æ¨ç§ç³»ã</p> 2646 </div> 2647 <ul class="college-tabs" id="collegeList"></ul> 2648</section> 2649 2650<section class="dept-section px-outer"> 2651 <div id="collegeContent"></div> 2652</section> 2653 2654<section class="campus-info-section px-outer" id="campus-life"> 2655 <div class="px-outer-inner"> 2656 <div class="section-title-block"> 2657 <span class="section-tag" style="--tag-color: var(--teal);"><i class="tag-dot"></i>CAMPUS LIFE</span> 2658 <h3>æ ¡åçæ´»è³è¨</h3> 2659 <p class="title-desc">便¨å¤§ä¹åï¼å èªèæ ¡åç°å¢ãçæ´»æ©è½å°åéè¦éï¼æåéåä½ ç大叿¢ç´¢æ ç¨ã</p> 2660 </div> 2661 2662 <div class="card-grid" id="campusLifeGrid"></div> 2663 </div> 2664</section> 2665 2666</section> 2667 2668<section class="ioh-section px-outer" style="display:none;"><!-- å é±èï¼ä¹å¾å¦é顯示è«ç§»é¤ style="display:none;" --> 2669 <div class="section-title-block"> 2670 <span class="section-tag" style="--tag-color: var(--purple);"><i class="tag-dot"></i>ALUMNI SHARING</span> 2671 <h3>IOH å¸é·å§ç¶é©å享</h3> 2672 <p class="title-desc">åå¾ IOH éæ¾å人ç¶é©å¹³å°ï¼è½è½æ¨å¤§å¸é·å§å享é¸ç³»å¿å¾èçå¯¦æ ¡åçæ´»ç¶é©ã</p> 2673 <a href="https://ioh.tw/schools/%E5%9C%8B%E7%AB%8B%E6%9A%A8%E5%8D%97%E5%9C%8B%E9%9A%9B%E5%A4%A7%E5%AD%B8" target="_blank" rel="noopener" class="ioh-all-btn">æ¥çææå¸é¢å享<span>â</span></a> 2674 </div> 2675 2676 <div class="ioh-icon-grid"> 2677 <a href="https://ioh.tw/schools/%E5%9C%8B%E7%AB%8B%E6%9A%A8%E5%8D%97%E5%9C%8B%E9%9A%9B%E5%A4%A7%E5%AD%B8/colleges/%E4%BA%BA%E6%96%87%E5%AD%B8%E9%99%A2" target="_blank" rel="noopener" class="ioh-icon-card">
2678 <span class="ioh-icon-badge" style="--badge-color: var(--pink);"> 2679 <i class="fi fi-rr-book-alt"></i> 2680 <span class="ioh-icon-label">人æå¸é¢</span> 2681 </span> 2682 </a> 2683 <a href="https://ioh.tw/schools/%E5%9C%8B%E7%AB%8B%E6%9A%A8%E5%8D%97%E5%9C%8B%E9%9A%9B%E5%A4%A7%E5%AD%B8/colleges/%E7%AE%A1%E7%90%86%E5%AD%B8%E9%99%A2" target="_blank" rel="noopener" class="ioh-icon-card"> 2684 <span class="ioh-icon-badge" style="--badge-color: var(--gold-deep);"> 2685 <i class="fi fi-rr-briefcase"></i> 2686 <span class="ioh-icon-label">管çå¸é¢</span> 2687 </span> 2688 </a> 2689 <a href="https://ioh.tw/schools/%E5%9C%8B%E7%AB%8B%E6%9A%A8%E5%8D%97%E5%9C%8B%E9%9A%9B%E5%A4%A7%E5%AD%B8/colleges/%E7%A7%91%E6%8A%80%E5%AD%B8%E9%99%A2" target="_blank" rel="noopener" class="ioh-icon-card"> 2690 <span class="ioh-icon-badge" style="--badge-color: var(--teal);"> 2691 <i class="fi fi-rr-microchip"></i> 2692 <span class="ioh-icon-label">ç§æå¸é¢</span> 2693 </span> 2694 </a> 2695 <a href="https://ioh.tw/schools/%E5%9C%8B%E7%AB%8B%E6%9A%A8%E5%8D%97%E5%9C%8B%E9%9A%9B%E5%A4%A7%E5%AD%B8/colleges/%E6%95%99%E8%82%B2%E5%AD%B8%E9%99%A2" target="_blank" rel="noopener" class="ioh-icon-card"> 2696 <span class="ioh-icon-badge" style="--badge-color: var(--sky);"> 2697 <i class="fi fi-rr-graduation-cap"></i> 2698 <span class="ioh-icon-label">æè²å¸é¢</span> 2699 </span> 2700 </a> 2701 </div> 2702</section> 2703 2704<!-- åå°é 鍿é --> 2705<div class="go-top-shadow" id="goTopShadow" aria-hidden="true"></div> 2706<button type="button" class="go-top-btn" id="goTopBtn" title="åå°é é¨" aria-label="åå°é é¨"> 2707 <svg class="go-top-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 2708 <path d="M12 19V5"/> 2709 <path d="M5 12l7-7 7 7"/> 2710 </svg> 2711</button> 2712
2713<script> 2714 const colleges = [ 2715 { 2716 id: "college-0", 2717 name: "人æå¸é¢", 2718 icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library-big-icon lucide-library-big"><rect width="8" height="18" x="3" y="3" rx="1"/><path d="M7 3v18"/><path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z"/></svg>', 2719 depts: [ 2720 { name: "ä¸åèªæå¸ç³»", url: "https://www.cll.ncnu.edu.tw/?page_id=15064" }, 2721 { name: "å¤åèªæå¸ç³»", url: "https://dfll.ncnu.edu.tw/p/404-1027-35969.php?Lang=zh-tw" }, 2722 { name: "ç¤¾ææ¿çè社æå·¥ä½å¸ç³»", url: "https://spsw.ncnu.edu.tw/p/412-1058-3381.php?Lang=zh-tw" }, 2723 { name: "å ¬å ±è¡æ¿èæ¿çå¸ç³»", url: "https://dppa.ncnu.edu.tw/p/406-1028-35814,r1496.php" }, 2724 { name: "æ·å²å¸ç³»", url: "https://cnhis.ncnu.edu.tw/p/404-1029-35725.php?Lang=zh-tw" }, 2725 { name: "æ±åäºå¸ç³»", url: "https://dseas.ncnu.edu.tw/p/403-1030-639.php?Lang=zh-tw" }, 2726 { name: "å使°æåç¢æ¥è社æå·¥ä½å¸å£«å¸ä½å¸ç¨å使°æå°ç", url: "https://indigenous.ncnu.edu.tw/p/403-1092-1517.php?Lang=zh-tw" }, 2727 ] 2728 }, 2729 { 2730 id: "college-1", 2731 name: "管çå¸é¢", 2732 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M2 12h20"/></svg>', 2733 depts: [ 2734 { name: "åé伿¥å¸ç³»", url: "https://www.ibs.ncnu.edu.tw/index.php/admission/freshmen#tab-2" }, 2735 { name: "ç¶æ¿å¸ç³»", url: "https://econ.ncnu.edu.tw/p/412-1076-3350.php?Lang=zh-tw" }, 2736 { name: "è³è¨ç®¡çå¸ç³»", url: "https://www.im.ncnu.edu.tw/%E9%AB%98%E4%B8%AD%E7%94%9F%E5%B0%88%E5%8D%80-2/" }, 2737 { name: "財åéèå¸ç³»", url: "https://finance.ncnu.edu.tw/p/404-1091-35928.php?Lang=zh-tw" }, 2738 { name: "è§å ä¼éè餿 管çå¸ç³»", url: "https://www.tourism.ncnu.edu.tw/highschool-intro/" }, 2739 { name: "管çå¸é¢å¸å£«ç", url: "https://bba.ncnu.edu.tw/p/404-1043-35991.php?Lang=zh-tw" }, 2740 ] 2741 }, 2742 { 2743 id: "college-2", 2744 name: "ç§æå¸é¢", 2745 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="1.5"/><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4"/></svg>', 2746 depts: [ 2747 { name: "忍工ç¨å¸ç³»", url: "https://ce.ncnu.edu.tw/p/412-1073-3453.php?Lang=zh-tw" }, 2748 { name: "è³è¨å·¥ç¨å¸ç³»", url: "https://www.csie.ncnu.edu.tw/admission/ProspectiveStudents" }, 2749 { name: "黿©å·¥ç¨å¸ç³»", url: "https://ee.ncnu.edu.tw/p/412-1074-3352.php?Lang=zh-tw" }, 2750 { name: "æç¨åå¸ç³»", url: "https://www.chem.ncnu.edu.tw/information/5/" }, 2751 { name: "æç¨ææåå é»å·¥ç¨å¸ç³»", url: "https://amoe.ncnu.edu.tw/p/412-1021-3347.php?Lang=zh-tw" }, 2752 { name: "ç§æå¸é¢å¸å£«ç", url: "https://www.bst.ncnu.edu.tw/faq" }, 2753 ] 2754 }, 2755 { 2756 id: "college-3", 2757 name: "æè²å¸é¢", 2758 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9l10-5 10 5-10 5-10-5Z"/><path d="M6 11v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5"/><path d="M22 9v6"/></svg>', 2759 depts: [ 2760 { name: "åéææèæ¯è¼æè²å¸ç³»", url: "https://ced.ncnu.edu.tw/p/412-1088-3348.php?Lang=zh-tw" }, 2761 { name: "æè²æ¿çèè¡æ¿å¸ç³»", url: "https://epa.ncnu.edu.tw/p/412-1065-3340.php?Lang=zh-tw" }, 2762 { name: "è«®åå¿çè人åè³æºç¼å±å¸ç³»", url: "https://www.dch.ncnu.edu.tw/admission/index.php?index_m1_id=24" }, 2763 { name: "æè²å¸é¢å¸å£«ç", url: "https://ipe.ncnu.edu.tw/p/412-1064-3432.php?Lang=zh-tw" }, 2764 ] 2765 }, 2766 { 2767 id: "college-5", 2768 name: "è·çæ¨å¥åº·ç¦ç¥å¸é¢", 2769 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 8.6c0 4.7-8.8 10.4-8.8 10.4S3.2 13.3 3.2 8.6a4.6 4.6 0 0 1 8.4-2.6 4.6 4.6 0 0 1 8.4 2.6Z"/><path d="M6 11h2l1.5-3 2 5 1.5-3H18"/></svg>', 2770 depts: [ 2771 { name: "è·çå¸ç³»", url: "https://nursing.ncnu.edu.tw/p/404-1087-36675.php?Lang=zh-tw" }, 2772 { name: "é«é½¡å¥åº·èé·æç §é¡§ç®¡çå¸å£«å¸ä½å¸ç¨å使°å°ç", url: "https://ltc.ncnu.edu.tw/p/404-1068-36151.php?Lang=zh-tw" }, 2773 ] 2774 }, 2775 { 2776 id: "college-6", 2777 name: "æºæ §æ¨æ°¸çºè¾²æ¥å°ç", 2778 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22V13"/><path d="M12 13c0-4 3-6 7-6 0 4-3 6-7 6Z"/><path d="M12 13c0-3-2.5-5-6-5 0 3 2.5 5 6 5Z"/></svg>', 2779 depts: [ 2780 { name: "æºæ §æ¨æ°¸çºè¾²æ¥å¸å£«å¸ä½å¸ç¨", url: "https://isa.ncnu.edu.tw/p/404-1085-24441.php?Lang=zh-tw" } 2781 ] 2782 }, 2783 { 2784 id: "college-7",
2785 name: "æºæ §å·¥ç¨å¸é¢(ç±åä¸)", 2786 icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-grid"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>', 2787 depts: [ 2788 { name: "åå°é«å·¥ç¨èæºæ §ç§æå¸ç³»å¸å£«ç(建置ä¸)", url: "#" }, 2789 { name: "æºæ §æ©æ¢°å¸ç³»å¸å£«ç(建置ä¸)", url: "#" }, 2790 { name: "æºæ §è£½é è系統管çå¸ç³»å¸å£«ç(ç¢æ¥æºæ §ç®¡ççµ)(建置ä¸)", url: "#" }, 2791 { name: "æºæ §è£½é è系統管çå¸ç³»å¸å£«ç(ç²¾å¯¦æºæ §è£½é çµ)(建置ä¸)", url: "#" }, 2792 { name: "æºæ §è»è¼å¸ç³»å¸å£«ç(建置ä¸)", url: "#" }, 2793 { name: "æºæ §é»è½ç§æå¸ç³»å¸å£«ç(建置ä¸)", url: "#" } 2794 ] 2795 } 2796 ]; 2797 2798 const listEl = document.getElementById("collegeList"); 2799 const contentEl = document.getElementById("collegeContent"); 2800 2801 colleges.forEach((college, i) => { 2802 const li = document.createElement("li"); 2803 if (i === 0) li.className = "active"; 2804 li.innerHTML = `<button data-target="${college.id}"><span class="icon">${college.icon}</span>${college.name}</button>`; 2805 listEl.appendChild(li); 2806 2807 const panel = document.createElement("div"); 2808 panel.className = "dept-panel" + (i === 0 ? " active" : ""); 2809 panel.id = college.id; 2810 panel.innerHTML = ` 2811 <div class="content-head"> 2812 <h2>${college.icon} ${college.name}</h2> 2813 <span class="dept-count">${college.depts.length} åç³»æï¼å¸ç¨</span> 2814 </div> 2815 <div class="dept-grid"> 2816 ${college.depts.map(d => `<div class="dept-item"><a href="${d.url}" target="_blank">${d.name}</a></div>`).join("")} 2817 </div> 2818 `; 2819 contentEl.appendChild(panel); 2820 }); 2821 2822 listEl.addEventListener("click", (e) => { 2823 const btn = e.target.closest("button[data-target]"); 2824 if (!btn) return; 2825 const targetId = btn.dataset.target; 2826 2827 listEl.querySelectorAll("li").forEach(li => li.classList.remove("active")); 2828 btn.closest("li").classList.add("active"); 2829 2830 contentEl.querySelectorAll(".dept-panel").forEach(p => p.classList.remove("active")); 2831 document.getElementById(targetId).classList.add("active"); 2832 }); 2833 2834 /* ========================================================================== 2835 æ ¡åçæ´»è³è¨å¡ç â è³æé£åçµ±ä¸ç®¡çï¼ä¹å¾è¦æåçï¼æåï¼Iconï¼é£çµ 2836 åªéä¿®æ¹ campusLife éåé£åå³å¯ï¼ä¸ç¨åä¸é¢ç HTML ç¢çé輯ã 2837 ========================================================================== */ 2838 const campusLife = [ 2839 { 2840 badge: "badge-food", 2841 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11h18a9 9 0 0 1-18 0Z"/><path d="M12 11V7"/><path d="M8.5 7c0-1.4.9-1.9.9-3.3M15.5 7c0-1.4-.9-1.9-.9-3.3"/></svg>', 2842 image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsJ12YFStpG8-1tv04GWvct7_Gf7NAaOYqxHUJv6TgrITYQ_0ThWsZbT6U&s=10", 2843 alt: "æ ¡åç¾é£è¡", 2844 title: "é£ï¼ æ¨å¤§", 2845 desc: "å¤å é¤é£²èèé©ç¨é¤ç©ºéï¼æ»¿è¶³ä½ çæ¯ä¸å¤©ã", 2846 url: "https://admission.ncnu.edu.tw/p/426-1055-4.php?Lang=zh-tw#food" 2847 }, 2848 { 2849 badge: "badge-housing", 2850 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-7 9 7"/><path d="M5 10v9a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1v-9"/></svg>', 2851 image: "https://housing.ncnu.edu.tw/var/file/81/1081/img/ALBUM_2024.3.13_240313_1_0.jpg", 2852 alt: "å¸ç宿è", 2853 title: "ä½ï¼ æ¨å¤§", 2854 desc: "大䏿°çä¿éä½å®¿ï¼æé 便å©åå®å¿çæ ¡åçæ´»ã", 2855 url: "https://admission.ncnu.edu.tw/p/426-1055-4.php?Lang=zh-tw#housing" 2856 }, 2857 { 2858 badge: "badge-transport", 2859 icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bus-icon lucide-bus"><path d="M8 6v6"/><path d="M15 6v6"/><path d="M2 12h19.6"/><path d="M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3"/><circle cx="7" cy="18" r="2"/><path d="M9 18h5"/><circle cx="16" cy="18" r="2"/></svg>',
2860 image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEuUN3PdfQah33eHCa3fddVLZ14gYxIcaxRh4M6ILzVXdDHUVPFgEchuTn&s=10", 2861 alt: "æ ¡å交é", 2862 title: "è¡ï¼ æ¨å¤§", 2863 desc: "夿¢å®¢éç´éæ ¡åï¼éå¤ãè¿éé½è¼é¬ä¾¿å©ã", 2864 url: "https://admission.ncnu.edu.tw/p/426-1055-4.php?Lang=zh-tw#transport" 2865 }, 2866 { 2867 badge: "badge-global", 2868 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3c2.5 2.7 4 6 4 9s-1.5 6.3-4 9c-2.5-2.7-4-6-4-9s1.5-6.3 4-9Z"/></svg>', 2869 image: "https://images.pexels.com/photos/30052431/pexels-photo-30052431.jpeg?_gl=1*123ug2d*_ga*MzYxMzAxNjIyLjE3ODQxODAwMjg.*_ga_8JE65Q40S6*czE3ODQxODM4NzIkbzIkZzEkdDE3ODQxODQwMDAkajU5JGwwJGgw", 2870 alt: "åé交æµ", 2871 title: "åéåï¼ æ¨å¤§", 2872 desc: "æä¾æµ·å¤äº¤æãéè¯å¸ä½åå¯¦ç¿æ©æï¼æå±ä½ çåéè¦éã", 2873 url: "https://admission.ncnu.edu.tw/p/426-1055-4.php?Lang=zh-tw#global" 2874 }, 2875 { 2876 badge: "badge-life", 2877 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17.5" cy="9" r="2.2"/><path d="M15.8 20c0-2.4 1.8-4.4 4-4.8"/></svg>', 2878 image: "https://images.pexels.com/photos/29922793/pexels-photo-29922793.jpeg?_gl=1*6pxyvr*_ga*MzYxMzAxNjIyLjE3ODQxODAwMjg.*_ga_8JE65Q40S6*czE3ODQxODM4NzIkbzIkZzEkdDE3ODQxODQ2MjYkajU5JGwwJGgw", 2879 alt: "æ ¡åçæ´»", 2880 title: "çæ´»ï¼ æ¨å¤§", 2881 desc: "å®åçæ ¡åè¨æ½èå¤å ç¤¾åæ´»åï¼è±å¯ä½ ç大å¸çæ´»ã", 2882 url: "https://admission.ncnu.edu.tw/p/426-1055-4.php?Lang=zh-tw#life" 2883 }, 2884 { 2885 badge: "badge-lan", 2886 icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-check-icon lucide-book-open-check"><path d="M12 5v16"/><path d="m16 12 2 2 4-4"/><path d="M22 6V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2h4.001A2 2 0 0022 17v-1.344"/></svg>', 2887 image: "https://ltrc.ncnu.edu.tw/web/index/images/02.JPG", 2888 alt: "èªæä¸å¿", 2889 title: "èªå@æ¨å¤§", 2890 desc: "æä¾èªè¨å¸ç¿ã檢å®èåé交æµè³æºï¼æåä½ çåéç«¶çåã", 2891 url: "https://admission.ncnu.edu.tw/p/426-1055-4.php?Lang=zh-tw#lan" 2892 }, 2893 { 2894 badge: "badge-future", 2895 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M15 7h6v6"/></svg>', 2896 image: "https://images.pexels.com/photos/684387/pexels-photo-684387.jpeg?_gl=1*1hmuj*_ga*MzYxMzAxNjIyLjE3ODQxODAwMjg.*_ga_8JE65Q40S6*czE3ODQxODM4NzIkbzIkZzEkdDE3ODQxODQyMzEkajUwJGwwJGgw", 2897 alt: "æªä¾ç¼å±", 2898 title: "æªä¾ï¼ æ¨å¤§", 2899 desc: "çµåç¢å¸åä½è實ç¿è³æºï¼å¹é¤æ¥è»è·å ´çç«¶çåã", 2900 url: "https://admission.ncnu.edu.tw/p/426-1055-4.php?Lang=zh-tw#future" 2901 }, 2902 { 2903 badge: "badge-scholarship", 2904 icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="5"/><path d="M9 13.5 7 22l5-3 5 3-2-8.5"/></svg>', 2905 image: "https://images.pexels.com/photos/9489804/pexels-photo-9489804.jpeg?_gl=1*2wdxr1*_ga*MzYxMzAxNjIyLjE3ODQxODAwMjg.*_ga_8JE65Q40S6*czE3ODQxODM4NzIkbzIkZzEkdDE3ODQxODQ0NjkkajMxJGwwJGgw", 2906 alt: "çå©å¸é", 2907 title: "çå©å¸éï¼ æ¨å¤§", 2908 desc: "æä¾å¤å çå©å¸éè³æºï¼éªä¼´ä½ å®å¿å®æå¸æ¥ã", 2909 url: "https://admission.ncnu.edu.tw/p/426-1055-4.php?Lang=zh-tw#scholarship" 2910 } 2911 ]; 2912 2913 const campusLifeGrid = document.getElementById("campusLifeGrid"); 2914 2915 campusLifeGrid.innerHTML = campusLife.map(card => ` 2916 <div class="photo-card"> 2917 <div class="photo-card-media"><img src="${card.image}" alt="${card.alt}" loading="lazy"></div> 2918 <div class="photo-card-body">
2919 <span class="card-icon-badge ${card.badge}">${card.icon}</span> 2920 <h4>${card.title}</h4> 2921 <p>${card.desc}</p> 2922 <a href="${card.url}" target="_blank" rel="noopener" class="photo-card-link">äºè§£æ´å¤<span class="arrow-circle">â</span></a> 2923 </div> 2924 </div> 2925 `).join(""); 2926 2927 /* ========================================================================== 2928 åå°é 鍿éï¼æ»¾åè¶ éä¸å®è·é¢æé¡¯ç¤ºï¼é»æå¹³æ»æ²åé é¨ï¼ 2929 é è¿é å°¾æèªåæ·¡åºï¼é¿å é®ä½é å°¾å §å®¹ 2930 ========================================================================== */ 2931 (function () { 2932 const goTopBtn = document.getElementById("goTopBtn"); 2933 const goTopShadow = document.getElementById("goTopShadow"); 2934 if (!goTopBtn || !goTopShadow) return; 2935 2936 const findFooterEl = () => { 2937 return document.querySelector(".footer_edit") 2938 || document.querySelector("footer") 2939 || document.querySelector('[id*="footer" i]') 2940 || document.querySelector('[class*="footer" i]'); 2941 }; 2942 2943 const isNearFooter = () => { 2944 const footerEl = findFooterEl(); 2945 if (!footerEl) return false; 2946 const rect = footerEl.getBoundingClientRect(); 2947 return rect.top <= window.innerHeight - 30; 2948 }; 2949
2950 const updateGoTopVisibility = () => { 2951 const shouldShow = window.scrollY > window.innerHeight * 0.6 && !isNearFooter(); 2952 goTopBtn.classList.toggle("is-visible", shouldShow); 2953 goTopShadow.classList.toggle("is-visible", shouldShow); 2954 }; 2955 2956 goTopBtn.addEventListener("click", () => { 2957 window.scrollTo({ top: 0, behavior: "smooth" }); 2958 }); 2959 2960 window.addEventListener("scroll", updateGoTopVisibility, { passive: true }); 2961 window.addEventListener("resize", updateGoTopVisibility); 2962 updateGoTopVisibility(); 2963 })(); 2964</script>
2964 2965 2966</body> 2967</html> 2968 </div> 2969 </div> 2970 </section> 2971 </div> 2972</div> 2973 2974<!-- generated at Thu Oct 01 2026 17:01:42 --></div> 2975 2976 2977 </div> 2978 </div> 2979 2980 2981 2982 2983 2984 2985 2986 </div> 2987</div> 2988 2989 2990</div> 2991</div> 2992</main> 2993 2994 2995 <style> 2996 @media (min-width: 481px) {.row_0 .col_01 { width: 0%;}.row_0 .col_02 { width: 100%;}.row_0 .col_03 { width: 0%;}} 2997 </style> 2998 2999 3000<div id="Dyn_footer"> 3001<div class="footer"> 3002<div class="minner "> 3003 3004 3005 3006 3007 3008 3009 3010<div class="copyright"> 3011<div class="meditor"> 3012 <link href="https://fonts.googleapis.com" rel="preconnect" /> 3013<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" /> 3014<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet" /> 3015<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" /> 3016<style type="text/css"> 3017/* ========================= 3018 ãæ ¸å¿è¦èè¨å®ã 3019========================= */ 3020html, body { 3021 margin: 0 !important; 3022 padding: 0 !important; 3023 width: 100% !important; 3024 overflow-x: hidden !important; 3025} 3026 3027.footer .minner, 3028.footer > .minner, 3029.footer_edit .minner { 3030 padding: 0 !important; 3031 border-top: none !important; 3032 margin: 0 !important; 3033} 3034 3035/* ========================= 3036 é 尾主è¦å §å®¹ 3037========================= */ 3038.footer_edit { 3039 background: #1d3776; 3040 color: #fff; 3041 font-family: 'Noto Sans TC', sans-serif; 3042 font-size: 14px; 3043 line-height: 1.8; 3044 border: none !important; 3045 box-shadow: none !important; 3046 width: 100vw !important; 3047 position: relative !important; 3048 left: 50% !important; 3049 right: 50% !important; 3050 margin-left: -50vw !important; 3051 margin-right: -50vw !important; 3052} 3053 3054.footer_edit * { 3055 box-sizing: border-box; 3056 font-style: normal; 3057} 3058 3059.footer_edit a { 3060 color: #fff; 3061 text-decoration: none; 3062 transition: opacity .3s ease; 3063} 3064 3065.footer_edit a:hover { 3066 opacity: .6; 3067} 3068 3069/* ââ ä¿®æ¹å¾ç容å¨ï¼å©ç¨ Grid ç stretch è border æ§å¶ç·æ¢ ââ */ 3070.footer_edit-container { 3071 max-width: 1200px; 3072 margin: 0 auto; 3073 padding: 60px 20px; 3074 display: grid; 3075 grid-template-columns: 1.5fr 1fr 1.3fr; 3076 gap: 0; 3077 align-items: stretch; /* ééµï¼å¼·å¶æææ¬ä½é«åº¦å°é½ */ 3078} 3079 3080/* çºæ¬ä½è¨å® padding èå³éæ¡ç· */ 3081.footer_edit-container > div { 3082 padding: 0 45px; /* æ¤æ¸å¼æ§å¶éè·ï¼ç·æ¢æèªåå°é½ */ 3083 border-right: 1px solid rgba(255, 255, 255, 0.12); 3084} 3085 3086/* å»é¤é¦å°¾éæ¡ */ 3087.footer_edit-container > div:first-child { padding-left: 0; } 3088.footer_edit-container > div:last-child { border-right: none; padding-right: 0; } 3089 3090/* ========================= 3091 å §å®¹åå¡ 3092========================= */ 3093.footer_edit-logo { margin-bottom: 20px; } 3094.footer_edit-logo img { width: 240px; max-width: 100%; height: auto; display: block; } 3095.footer_edit-info { display: grid; grid-template-columns: 45px 1fr; gap: 10px; opacity: 0.9; font-size: 14px; } 3096.footer_edit-info-title { color: rgba(255, 255, 255, 0.8); opacity: 0.7; } 3097.footer_edit-social { display: flex; gap: 20px; margin-top: 25px; } 3098.footer_edit-social a { font-size: 20px; line-height: 1; opacity: 0.8; } 3099.footer_edit-social a:hover { opacity: 1; } 3100 3101.footer_edit-menu h4 { margin: 0 0 18px; font-size: 16px; font-weight: 500; color: #ffffff; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; } 3102.footer_edit-menu-links { display: flex; flex-direction: column; gap: 10px; } 3103.footer_edit-menu-links a { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.85); } 3104.footer_edit-menu-links a i { font-size: 10px; opacity: 0.6; } 3105 3106.footer_edit-map h4 { margin: 0 0 18px; font-size: 16px; font-weight: 500; color: #ffffff; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; } 3107.footer_edit-map iframe { width: 100%; height: 160px; border: none; border-radius: 6px; display: block; } 3108 3109/* ========================= 3110 Copyright åå¡ 3111========================= */ 3112.footer_edit-bottom { 3113 background: #2b3352; 3114 margin: 0; 3115 padding: 0; 3116 font-family: 'Noto Sans TC', sans-serif; 3117 border: none !important; 3118 box-shadow: none !important; 3119 width: 100vw !important; 3120 position: relative !important; 3121 left: 50% !important; 3122 right: 50% !important; 3123 margin-left: -50vw !important; 3124 margin-right: -50vw !important; 3125} 3126 3127.footer_edit-bottom-container { 3128 max-width: 1200px; 3129 margin: 0 auto; 3130 padding: 18px 20px; 3131 display: flex; 3132 justify-content: space-between; 3133 align-items: center; 3134 gap: 20px; 3135 font-size: 13px; 3136 color: rgba(255, 255, 255, 0.85); 3137} 3138 3139.footer_edit-bottom-links a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } 3140.footer_edit-bottom-links a:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 11px; background-color: rgba(255, 255, 255, 0.3); margin: 0 15px; vertical-align: middle; } 3141 3142.footer_edit-credit-link { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; } 3143.footer_edit-credit-link:hover { opacity: .6; text-decoration: none !important; } 3144 3145/* ========================= 3146 RWD åªå 3147========================= */ 3148/* å¹³æ¿çï¼1024px 以ä¸ï¼ */ 3149@media(max-width:1024px){ 3150 .footer_edit-menu { 3151 display: none !important; 3152 } 3153 3154 /* ðãæ¬æ¬¡ä¿®æ¹ãï¼å¨ 1024px ä¸è®å°åæ¨é¡ç¶æé¡¯ç¤ºï¼ä¸åé±è */ 3155 .footer_edit-map h4 { 3156 display: flex !important; 3157 } 3158 3159 .footer_edit-container { 3160 grid-template-columns: 1fr 1fr; 3161 padding: 60px 40px !important; 3162 gap: 0px !important; 3163 } 3164 3165 .footer_edit-container > div {
3166 border-right: none !important; 3167 padding: 0 !important; 3168 } 3169 3170 .footer_edit-bottom-container { 3171 padding: 18px 40px !important; 3172 } 3173} 3174 3175/* ææ©çï¼767px 以ä¸ï¼ */ 3176@media(max-width:767px){ 3177 /* ðãæ¬æ¬¡ä¿®æ¹ãï¼çå° 767px 以ä¸ï¼æ ¡åä½ç½®åååæé±è */ 3178 .footer_edit-map h4 { 3179 display: none !important; 3180 } 3181 3182 .footer_edit-container { 3183 grid-template-columns: 1fr; 3184 padding: 40px 30px !important; 3185 gap: 0px !important; 3186 } 3187 3188 .footer_edit-bottom-container { 3189 padding: 18px 30px !important; 3190 flex-direction: column; 3191 text-align: center; 3192 gap: 12px; 3193 } 3194} 3195</style> 3196 3197<footer class="footer_edit"> 3198<div class="footer_edit-container"> 3199<div> 3200<div class="footer_edit-logo"><img alt="åç«æ¨ååé大å¸" height="103" src="/var/file/55/1055/img/9/mlogo_w.png" width="450" /></div> 3201 3202<div class="footer_edit-info"> 3203<div class="footer_edit-info-title">å°å</div> 3204<div>545301 åæç¸£åéé®å¤§å¸è·¯1è</div> 3205 3206<div class="footer_edit-info-title">é»è©±</div> 3207<div>886-49-2910960 è½ 2230~2239</div> 3208 3209<div class="footer_edit-info-title">å°ç·</div> 3210<div>886-49-2918305</div> 3211 3212<div class="footer_edit-info-title">å³ç</div> 3213<div>886-49-2913784</div> 3214 3215<div class="footer_edit-info-title">Email</div> 3216<div>[email protected]</div> 3217</div> 3218 3219<div class="footer_edit-social"> </div> 3220</div> 3221 3222<div class="footer_edit-menu"> 3223<h4>æçè³è¨</h4> 3224<div class="footer_edit-menu-links"><a href="https://exam.ncnu.edu.tw/ApplyUni/" rel="noopener noreferrer" target="_blank">ç³è«å ¥å¸è試å°å</a> <a href="https://apply.ncnu.edu.tw/" rel="noopener noreferrer" target="_blank"> å¤åå¸ç</a> <a href="https://exam.ncnu.edu.tw/9Sport.html" rel="noopener noreferrer" target="_blank"> éå績åª</a> <a href="https://exam.ncnu.edu.tw/7Uni.html" rel="noopener noreferrer" target="_blank"> 大å¸ç³è«å ¥å¸è試</a> <a href="https://exam.ncnu.edu.tw/6AboClass.html" rel="noopener noreferrer" target="_blank"> æç¤¾ãè·çãé·ç §åå°</a> <a href="https://exam.ncnu.edu.tw/1Mas.html" rel="noopener noreferrer" target="_blank"> 碩士çå ¥å¸è試</a> <a href="https://exam.ncnu.edu.tw/2Phd.html" rel="noopener noreferrer" target="_blank"> å士çå ¥å¸è試</a></div> 3225</div> 3226 3227<div class="footer_edit-map"> 3228<h4>æ ¡åä½ç½®</h4> 3229<iframe allowfullscreen="" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d29170.19228406057!2d120.92777!3d23.950748!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3468d82386bbae73%3A0xf8104b6caf56bdae!2z5ZyL56uL5pqo5Y2X5ZyL6Zqb5aSn5a24!5e0!3m2!1szh-TW!2sus!4v1780990848534!5m2!1szh-TW!2sus"></iframe></div> 3230</div> 3231</footer> 3232 3233<div class="footer_edit-bottom"> 3234<div class="footer_edit-bottom-container"> 3235<div>Copyright © åç«æ¨ååéå¤§å¸ National Chi Nan Universityï½<a class="footer_edit-credit-link" href="https://admission.ncnu.edu.tw/p/426-1055-7.php?Lang=zh-tw" target="_blank"> Icons by Flaticon </a></div> 3236</div> 3237 3238</div> 3239</div> 3240 3241 3242 3243 3244 3245</div> 3246</div> 3247<!-- generated at Wed Aug 05 2026 10:36:04 --></div> 3248 3249 3250</div> 3251</div> 3252<div class="fpbgvideo"></div> 3253 3254 3255 3256 3257<div id="_pop_login" class="mpopdiv">
3258<script>$(document).ready(function() {$.hajaxOpenUrl('/app/index.php?Action=mobileloadmod&Type=mobilepoplogin&Nbr=0','#_pop_login','',function(){menuDropAct();});})</script>
3258 3259</div> 3260 3261 3262 3263 3264<div id="_pop_tips" class="mtips"> 3265 <div class="mbox"> 3266 </div> 3267</div> 3268<div id="_pop_dialog" class="mdialog"> 3269 <div class="minner"> 3270 <div class="mcont"> 3271 </div> 3272 <footer class="mdialog-foot"> 3273 <button type="submit" class="mbtn mbtn-s">OK</button> 3274 <button type="submit" class="mbtn mbtn-c">Cancel</button> 3275 </footer> 3276 </div> 3277</div> 3278 3279<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 3280 <!-- Background of PhotoSwipe. 3281 It's a separate element, as animating opacity is faster than rgba(). --> 3282 <div class="pswp__bg"></div> 3283 <!-- Slides wrapper with overflow:hidden. --> 3284 <div class="pswp__scroll-wrap"> 3285 <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --> 3286 <!-- don't modify these 3 pswp__item elements, data is added later on. --> 3287 <div class="pswp__container"> 3288 <div class="pswp__item"></div> 3289 <div class="pswp__item"></div> 3290 <div class="pswp__item"></div> 3291 </div> 3292 <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> 3293 <div class="pswp__ui pswp__ui--hidden"> 3294 <div class="pswp__top-bar"> 3295 <!-- Controls are self-explanatory. Order can be changed. --> 3296 <div class="pswp__counter"></div> 3297 <button class="pswp__button pswp__button--close" title="Close (Esc)">Close (Esc)</button> 3298 <button class="pswp__button pswp__button--share" title="Share">Share</button> 3299 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen">Toggle fullscreen</button> 3300 <button class="pswp__button pswp__button--zoom" title="Zoom in/out">Zoom in/out</button> 3301 <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR --> 3302 <!-- element will get class pswp__preloader-active when preloader is running --> 3303 <div class="pswp__preloader"> 3304 <div class="pswp__preloader__icn"> 3305 <div class="pswp__preloader__cut"> 3306 <div class="pswp__preloader__donut"></div> 3307 </div> 3308 </div> 3309 </div> 3310 </div> 3311 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 3312 <div class="pswp__share-tooltip"></div> 3313 </div> 3314 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">Previous (arrow left)</button> 3315 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">Next (arrow right)</button> 3316 <div class="pswp__caption"> 3317 <div class="pswp__caption__center"></div> 3318 </div> 3319 </div> 3320</div> 3321</div> 3322 3323 3324 3325<!--
3325<script>NProgress.done();</script>
3325-->
3326<script> 3327function popChkLogin(){ 3328 if(typeof(loginStat)=='undefined') { 3329 var chkstat=0; 3330 var chkUrl='/app/index.php?Action=mobilelogin'; 3331 var chkData = {Op:'chklogin'}; 3332 var chkObj=$.hajaxReturn(chkUrl,chkData); 3333 chkstat=chkObj.stat; 3334 if(chkstat) { 3335 loginStat="login"; 3336 return true; 3337 }else { 3338 loginStat="logout"; 3339 return false; 3340 } 3341 }else { 3342 if(loginStat=="login") return true; 3343 else return false; 3344 } 3345} 3346 3347</script>
3347 3348<!-- generated at Wed Aug 05 2026 10:36:27 --></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.