PageSourceSearch

https://admission.ncnu.edu.tw/p/426-1055-3.php?Lang=zh-tw

html ncnu.edu.tw collected 2026-10-01 10:24:36 UTC 95,159 bytes, 3,348 lines download raw bytes

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.