html {
scroll-behavior: smooth;
}
.company{ width:100%; max-width:var(--max-width); margin:0px auto; }
.company:after { content:""; display:block; clear:both; }
.company{ overflow:hidden}
.company .slogan_back { text-align:center;border-top:1px solid #EEE; border-bottom:1px solid #EEE; margin:0em 0 2em 0; padding-top:1em; padding-bottom:1em; }
.company .slogan_text{ font-size:2.5em; letter-spacing:-2px; color:#333; line-height:1.4em; }
.company .ceo_img{ float:left; width:25%; height:500px;}
.company .ceo_img img{width:100%; }
.company .ceo_txt{ float:left; width:75%; padding:0 50px;}
.company .ceo_txt h2 { display: inline-block; font-size:2em; font-weight:300; line-height:1.3em; color:#000; letter-spacing:-0.05em; }
.company .ceo_txt p { margin-top:30px;}
.company .ceo_txt p strong {color:#000 !important; display:block; font-size:1.2em; padding-bottom:10px;}
.company .ceo_sign {float:left; font-size:1em; color:#222; margin-top:40px; }
.company .ceo_sign img { margin-left:-15px; vertical-align: middle;}
.company .summary { clear:both; float:left; width:100%; margin-top:50px;}
.guide_box2 { width:100%; max-width:var(--max-width); margin:0px auto; border-top:1px solid #333;}
.guide_box2:after {clear:both; content:''; display:block;}
.guide_box2 .con_wrap { width:100%; padding:30px 0; border-bottom:1px solid #eee;}
.guide_box2 .con_wrap:after {clear:both; content:''; display:block;}
.guide_box2 .con_wrap .con_area {padding:0 20px;}
.guide_box2 .con_wrap .left {width:25%; float:left; padding:0; }
.guide_box2 .con_wrap .left .con_title {font-size:1.8em; font-weight:600; color:#000;line-height: 1.3;}
.guide_box2 .con_wrap .left .con_title em {display:block; font-size:15px; font-weight:400; text-transform:uppercase; font-style:normal; letter-spacing:0.05em; color:#c0c0c0; }
.guide_box2 .con_wrap .right {width:75%; float:left; padding:0; }
.guide_box2 .con_wrap .right ul li {position: relative; margin-bottom: 20px; padding-left: 20px; line-height: 1.3em; word-break: keep-all; font-size: 1.0em;}
.guide_box2 .con_wrap .right ul li:last-child {margin-bottom:0}
.guide_box2 .con_wrap .right ul li .txt_depth {font-size:1em; color:#aaa; text-transform:uppercase; padding-top:5px; }
.guide_box2 .con_wrap .right ul li .numb { position:absolute; left:0; font-weight:300; font-size: 1.3em; color: #696969; }
.issu_title{
text-align:center;
}
.issu_title h3{
font-weight:600;
font-size:2em;
}
.issu_title h3:after{
content:'년';
}
.bg-light {
background-color: #f4f8fa !important;
}
.display-5 {
font-size: 2.5rem;
}
.text_col_teal {
color: #3CC2CC !important;
}
.d-block{
display: block !important;
}
.d-inline-block{
display: inline-block !important;
vertical-align: middle;
}
.issu_tabs{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
justify-content:flex-start;
margin-bottom:15px;
}
.issu_tabs > li{
flex:0 0 auto;
width:150px;
}
.issu_tabs .issu-tab-btn{
display:block;
padding:10px 25px;
text-align:center;
background-color:#ffffff;
border:1px solid #dedede;
border-radius:6px;
font-weight:500;
font-size:1.15em;
transition:all 0.25s;
}
.issu_tabs .issu-tab-btn:after{
content:'년';
}
.issu_tabs .issu-tab-btn:hover, .issu_tabs .issu-tab-btn.active{
background-color:var(--title-color);
color:#ffffff;
transition:all 0.25s;
border-color:var(--title-color);
}
/* 반응형 중간기기 1200px 사이즈 이하*/
@media all and (max-width:1200px){
}
/* 반응형 중간기기 992px 사이즈 이하*/
@media all and (max-width:992px){
.guide_box2 .con_wrap .left {width:100%;}
.guide_box2 .con_wrap .right {width:100%; margin-top:30px; }
}
/* 반응형 중간기기 992px 사이즈 이하*/
@media all and (max-width:992px){
}
/* 반응형 중간기기 768사이즈 이하 */
@media screen and (max-width: 768px) {
.step_box { padding:0 4%; margin-top:50px; }
.step_box ul li { width:100%; min-height:auto; margin-bottom:50px; text-align:left; }
.step_box ul li:after { top: unset; bottom:-40px; margin-top:0; left:50%; margin-left:-15px; transform: rotate(90deg);}
.step_box ul li:nth-child(even):after {display:block; }
.step_box ul li:nth-child(4n):after {display:block}
.step_box ul li:last-child:after {display:none;}
.step_box ul li:last-child {margin-bottom:0;}
.step_box ul.ea2 li {width:100%;}
.step_box ul.ea2 li:after {top: unset; bottom:-40px; margin-top:0; left:50%; margin-left:-15px; transform: rotate(90deg);}
.step_box ul.ea2 li:nth-child(2n):after {display:block}
.step_box ul.ea2 li:last-child:after {display:none}
}
/* 반응형 작은기기 480사이즈 이하 */
@media screen and (max-width: 480px) {
}
/* 반응형 작은기기 360사이즈 이하 */
@media screen and (max-width: 360px) {
}
/* =========================================================
SW융합교육 (sw-convergence) 전용 컴포넌트
색상: #1D92A8 연계 / #3F74BB 융합 / #4656AA MD
========================================================= */
/* 전공 운영 현황 3카드 */
.swc_status { display:flex; gap:14px; margin-top:6px; align-items:stretch; }
.swc_status > div { flex:1; display:flex; flex-direction:column; border:2px solid #1D92A8; border-radius:10px; overflow:hidden; background:#fff; }
.swc_status_head { display:flex; align-items:center; justify-content:center; padding:15px 20px; background:#1D92A8; }
.swc_status_head span { font-size:18px; font-weight:700; color:#fff; letter-spacing:-0.03em; word-break:keep-all; text-align:center; }
.swc_status_body { flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 20px 24px; text-align:center; }
.swc_status_num { font-size:34px; font-weight:800; line-height:1; letter-spacing:-0.02em; color:#333; }
.swc_status_num em { margin-left:2px; font-size:16px; font-weight:400; font-style:normal; color:#666; }
.swc_status_desc { font-size:16px; font-weight:400; line-height:1.55; letter-spacing:-0.03em; color:#666; word-break:keep-all; }
.swc_status > div:nth-child(2) { border-color:#3F74BB; }
.swc_status > div:nth-child(2) .swc_status_head { background:#3F74BB; }
.swc_status > div:nth-child(3) { border-color:#4656AA; }
.swc_status > div:nth-child(3) .swc_status_head { background:#4656AA; }
.swc_status > div:nth-child(1) .swc_status_num { color:#1D92A8; }
.swc_status > div:nth-child(2) .swc_status_num { color:#3F74BB; }
.swc_status > div:nth-child(3) .swc_status_num { color:#4656AA; }
/* 전공별 시간표 자리(추후 엑셀 연동) */
.swc_timetable { margin-top:16px; padding:38px 20px; border:1px dashed #c3ccd8; border-radius:10px; background:#fff; text-align:center; font-size:16px; font-weight:400; letter-spacing:-0.03em; color:#8a94a3; word-break:keep-all; }
/* O / X 표기 */
.section_tbl table td.swc_o { color:#1c7ec9; font-weight:700; }
.section_tbl table td.swc_x { color:#b7bdc7; font-weight:700; }
.section_tbl table tbody th.swc_group { background-color:#e8eef7; color:#0b3c72; font-weight:700; word-break:keep-all; letter-spacing:-0.02em; }
@media screen and (max-width:768px) {
.swc_status { flex-direction:column; }
}
/* ---------- 이수 절차: 번호 단계 + 곡선 연결선 (피그마 137-6159) ---------- */
.swc_flow { position:relative; margin-top:22px; background:#fff; border-radius:14px; padding:38px 34px 34px; }
.swc_flow_row { position:relative; display:flex; align-items:flex-start; gap:14px; flex-wrap:nowrap; }
.swc_flow_row.r1 { justify-content:center; }
.swc_flow_row.r2 { justify-content:flex-start; margin-top:34px; }
.swc_flow_row.r2 .swc_node { flex:0 0 calc((100% - 28px) / 3); }
.swc_node { position:relative; z-index:1; flex:1 1 0; min-width:0; text-align:center; padding:0 6px; }
.swc_node_no { position:relative; z-index:2; width:50px; height:50px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; letter-spacing:-0.03em; color:#fff; background:#3F74BB; }
.swc_node_pill { display:flex; align-items:center; justify-content:center; min-height:66px; padding:12px 22px 10px; border-radius:40px; font-size:16px; font-weight:800; color:#333; background:#EAF1F9; line-height:1.35; word-break:keep-all; letter-spacing:-0.02em; }
.swc_node > p { margin-top:16px; font-size:18px; font-weight:500; color:#333; line-height:1.5; word-break:keep-all; letter-spacing:-0.03em; }
.swc_node > p.lead { font-weight:500; color:#333; }
.swc_grad { margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.swc_grad img { display:block; height:60px; width:auto; }
.swc_grad span { font-size:18px; font-weight:500; color:#333; letter-spacing:-0.03em; }
.swc_node_ul { margin-top:10px; text-align:left; display:inline-block; }
.swc_node_ul li { font-size:15px; font-weight:400; color:#333; line-height:1.65; list-style:none; padding-left:14px; text-indent:-14px; word-break:keep-all; letter-spacing:-0.02em; }
.swc_node_ul li::before { content:"- "; }
.swc_node.s1 .swc_node_no { background:#1D92A8; } .swc_node.s1 .swc_node_pill { background:#DDEFF2; color:#1D92A8; }
.swc_node.s2 .swc_node_no { background:#2773C9; } .swc_node.s2 .swc_node_pill { background:#DFEAF7; color:#2773C9; }
.swc_node.s3 .swc_node_no { background:#4656AA; } .swc_node.s3 .swc_node_pill { background:#E3E6F2; color:#4656AA; }
.swc_node.s4 .swc_node_no { background:#3662AA; } .swc_node.s4 .swc_node_pill { background:#E1E8F2; color:#3662AA; }
.swc_node.s5 .swc_node_no { background:#083C72; } .swc_node.s5 .swc_node_pill { background:#083C72; color:#fff; }
@media screen and (max-width:768px) {
.swc_flow { padding:28px 18px; }
.swc_flow_row, .swc_flow_row.r1, .swc_flow_row.r2 { flex-direction:column; gap:26px; margin-top:0; }
.swc_flow_row.r2 { margin-top:26px; }
.swc_flow_row.r2 .swc_node { flex:0 0 auto; }
.swc_flow_row.r2 .swc_node.s4 { order:1; }
.swc_flow_row.r2 .swc_node.s5 { order:2; }
.swc_node { width:100%; padding:0; max-width:440px; margin:0 auto; }
.swc_node_pill { min-height:0; }
}
/* ---------- 매트릭스 표(전공목록): 모바일에서 행→카드 ---------- */
.swc_rtbl { overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media screen and (max-width:768px) {
.swc_rtbl { overflow:visible; }
.swc_rtbl table, .swc_rtbl thead, .swc_rtbl tbody, .swc_rtbl tr, .swc_rtbl th, .swc_rtbl td { display:block; width:auto !important; }
.swc_rtbl colgroup, .swc_rtbl col { display:none; }
.swc_rtbl thead { display:none; }
.swc_rtbl tbody tr { margin-bottom:10px; border:0; border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px #cfdbea; background:#fff; }
.swc_rtbl tbody tr:has(th.swc_group) { margin-top:24px; }
.swc_rtbl tbody th, .swc_rtbl tbody td { border:0 !important; }
.swc_rtbl tbody th.swc_group { background:#0b3c72 !important; color:#fff !important; text-align:center; padding:11px; font-size:15px; font-weight:700; }
.swc_rtbl tbody td { border-top:1px solid #eef2f7 !important; padding:11px 16px; text-align:left !important; font-size:15px; line-height:1.5; }
.swc_rtbl tbody td:nth-of-type(1) { border-top:0 !important; background:#EEF4FD; font-size:17px; font-weight:700; color:#0b3c72; }
.swc_rtbl tbody td:nth-of-type(2)::before { content:"주관학과(부)"; }
.swc_rtbl tbody td:nth-of-type(3)::before { content:"부전공"; }
.swc_rtbl tbody td:nth-of-type(4)::before { content:"복수전공"; }
.swc_rtbl tbody td:nth-of-type(n+2)::before { display:inline-block; min-width:104px; margin-right:6px; font-size:13px; font-weight:700; color:#3F74BB; }
}
/* 연계/융합/MD 전공별 상세 (02~04.php) - 주관/참여학과 · 주요 학습 내용
피그마 "전공 운영 현황" 카드형식(컬러헤더 + 흰본문) 준용 */
.swc_major_note { margin:0 0 4px; font-size:15px; font-weight:400; letter-spacing:-0.03em; color:#8a94a3; word-break:keep-all; }
.swc_major_wrap { margin-top:36px; padding-top:36px; border-top:1px solid #e0e2e6; }
.swc_major_wrap:first-of-type { margin-top:12px; padding-top:0; border-top:0; }
.swc_major_name { position:relative; margin-bottom:10px; padding-left:26px; font-size:22px; font-weight:700; letter-spacing:-0.03em; color:#222; word-break:keep-all; }
.swc_major_name:before { content:""; position:absolute; left:0; top:5px; width:16px; height:22px; background:url("image/swc_bullet_mouse.png") no-repeat left center/contain; }
.swc_major_wrap .swc_major_learn.section_ul.last { margin:0 0 16px; padding-bottom:0; border-bottom:0; }
.swc_major_wrap .swc_major_learn > ul > li { font-size:18px; line-height:1.6em; word-break:keep-all; }
.swc_major { display:flex; flex-direction:column; gap:10px; }
.swc_major_row { display:flex; gap:10px; }
.swc_major_item { flex:1; display:flex; flex-direction:column; border:2px solid #083C72; border-radius:10px; overflow:hidden; background:#fff; }
.swc_major_head { padding:14px 30px; background:#083C72; text-align:center; font-size:18px; font-weight:700; line-height:1.35; letter-spacing:-0.03em; color:#fff; word-break:keep-all; }
.swc_major_body { flex:1; display:flex; align-items:center; justify-content:center; padding:16px 22px; background:#fff; text-align:center; font-size:16px; font-weight:400; line-height:1.6; letter-spacing:-0.03em; color:#666; word-break:keep-all; }
.swc_major_item.c_join { border-color:#3F74BB; }
.swc_major_item.c_join .swc_major_head { background:#3F74BB; }
.swc_major_item.c_learn { border-color:#4656AA; }
.swc_major_item.c_learn .swc_major_head { background:#4656AA; }
.swc_major_item.c_learn .swc_major_body { justify-content:flex-start; text-align:left; }
.swc_mdlink { display:inline-flex; align-items:center; margin-top:14px; padding:9px 20px; border:1px solid #4656AA; border-radius:22px; font-size:15px; font-weight:500; letter-spacing:-0.03em; color:#4656AA; text-decoration:none; transition:background .15s,color .15s; }
.swc_mdlink:hover, .swc_mdlink:focus { background:#4656AA; color:#fff; }
.swc_major_tt { margin-top:14px; padding:18px 20px; border:1px dashed #c3ccd8; border-radius:8px; background:#fafbfc; text-align:center; font-size:15px; font-weight:400; letter-spacing:-0.03em; color:#8a94a3; word-break:keep-all; }
@media screen and (max-width:768px) {
.swc_major_row { flex-direction:column; }
.swc_major_wrap { padding:20px 5px; }
.swc_major_head { padding:12px 18px; font-size:16px; }
}
.swc_major_wrap[id] { scroll-margin-top:90px; }
/* 신청 안내 카드 (01.php - 이수 절차 하단) */
.content_section .section_box > .setction_tit.swc_apply_tit { margin-top:50px; }
.swc_apply { display:flex; gap:14px; margin-top:22px; align-items:stretch; }
.swc_apply > div { flex:1; display:flex; flex-direction:column; border:2px solid #1D92A8; border-radius:10px; overflow:hidden; background:#fff; }
.swc_apply_head { padding:13px 20px; background:#1D92A8; text-align:center; font-size:18px; font-weight:700; letter-spacing:-0.03em; color:#fff; }
.swc_apply_body { flex:1; display:flex; align-items:center; justify-content:center; padding:18px 20px; background:#fff; text-align:center; font-size:16px; font-weight:400; line-height:1.6; letter-spacing:-0.03em; color:#666; word-break:keep-all; }
.swc_apply_body > p { margin:0; font-size:16px; font-weight:400; line-height:1.6; letter-spacing:-0.03em; color:#666; }
.swc_apply_strong { font-weight:600; }
.swc_apply > div:nth-child(2) { border-color:#3F74BB; }
.swc_apply > div:nth-child(2) .swc_apply_head { background:#3F74BB; }
.swc_apply > div:nth-child(3) { border-color:#4656AA; }
.swc_apply > div:nth-child(3) .swc_apply_head { background:#4656AA; }
@media screen and (max-width:768px) { .swc_apply { flex-direction:column; } }
/* 전공별 교과목 타이틀 우측 엑셀 다운로드 버튼 (02~04.php) */
.content_section > .setction_tit.swc_courses_tit { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; }
.content_section > .setction_tit.swc_courses_tit h2 { margin-bottom:0; }
.swc_xls_btn { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; background:#1D6F42; border-radius:6px; font-size:15px; font-weight:500; letter-spacing:-0.03em; color:#fff; text-decoration:none; white-space:nowrap; transition:background .15s; }
.swc_xls_btn:hover, .swc_xls_btn:focus { background:#155c36; color:#fff; }
.swc_xls_btn:before { content:""; width:15px; height:15px; flex:0 0 auto; background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat; }
@media screen and (max-width:768px) {
.content_section > .setction_tit.swc_courses_tit { justify-content:flex-start; }
}
/* 전공별 교과목 - 학과 탭 (02~04.php) */
.swc_tabs { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 8px; }
.swc_tabs a { display:inline-flex; align-items:center; padding:7px 15px; border:1px solid #cbd3de; border-radius:18px; background:#fff; font-size:15px; font-weight:500; letter-spacing:-0.03em; color:#4a5568; text-decoration:none; transition:border-color .15s,color .15s,background .15s; }
.swc_tabs a:hover, .swc_tabs a:focus { border-color:#083C72; background:#083C72; color:#fff; }
/* 이수 학점 안내 3카드 (01.php) */
.swc_credit { display:flex; gap:14px; margin:6px 0 26px; align-items:stretch; }
.content_section .section_box .swc_credit + p { margin-top:0; }
.content_section .section_box .swc_credit ~ p { margin-bottom:8px; line-height:1.7; }
.swc_credit > div { flex:1; display:flex; flex-direction:column; border:2px solid #1D92A8; border-radius:10px; overflow:hidden; background:#fff; }
.swc_credit_head { padding:14px 16px; background:#1D92A8; text-align:center; font-size:18px; font-weight:700; letter-spacing:-0.03em; color:#fff; word-break:keep-all; }
.swc_credit_body { flex:1; display:flex; align-items:center; justify-content:center; padding:22px 16px; background:#fff; text-align:center; font-size:17px; font-weight:400; letter-spacing:-0.02em; color:#555; }
.swc_credit_body strong { margin-right:3px; font-size:30px; font-weight:800; letter-spacing:-0.02em; color:#333; }
.swc_credit > div:nth-child(2) { border-color:#3F74BB; }
.swc_credit > div:nth-child(2) .swc_credit_head { background:#3F74BB; }
.swc_credit > div:nth-child(3) { border-color:#4656AA; }
.swc_credit > div:nth-child(3) .swc_credit_head { background:#4656AA; }
@media screen and (max-width:768px) {
.swc_credit { flex-direction:column; }
}
/* =========================================================
스크롤 등장 애니메이션 (sw-convergence) 2026-09
========================================================= */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; will-change:opacity,transform; }
.reveal.in { opacity:1; transform:none; }
.swm-stagger > * { opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease; }
.swm-stagger.in > * { opacity:1; transform:none; }
.swm-stagger.in > *:nth-child(1){transition-delay:.00s} .swm-stagger.in > *:nth-child(2){transition-delay:.09s}
.swm-stagger.in > *:nth-child(3){transition-delay:.18s} .swm-stagger.in > *:nth-child(4){transition-delay:.27s}
.swm-stagger.in > *:nth-child(5){transition-delay:.36s} .swm-stagger.in > *:nth-child(6){transition-delay:.45s}
.swm-stagger.in > *:nth-child(n+7){transition-delay:.54s}
@media (prefers-reduced-motion:reduce){ .reveal, .swm-stagger > * { opacity:1 !important; transform:none !important; transition:none !important; } }