*{ --navy:#020B21; --navy2:#061E4A; --ink:#0b1c3d; --txt:#28374f; --blue:#1b4ca0; --blue2:#2358c4; --blue3:#2f7fd4; --cyan:#34A7E2; --txt:#3f4d68; --muted:#6a7891; --line:#e4ecf7; --soft:#f6f9fd; --r:18px; } /* 서브상단 */ #sVisual{position:relative; width:100%; height:400px; /* overflow:hidden; */} #sVisual:before{display:block;content:""; width:100%; height:100%; background:#000; opacity:0.5; position:absolute; left:0; top:0; z-index:1} #sVisual .sv_box{position: relative; overflow: hidden; height: 400px;} #sVisual .sv_box div.sv{background:url("/images/sub/sVisual.jpg") no-repeat 50% 0;background-size:cover;height:100%; position:absolute; left:0; top:0; width:100%; height:100%; -webkit-background-size:cover !important; background-size:cover !important; animation:mymove 3s;/* background:#333; */} @keyframes mymove { from {transform:scale(1.1)} to {transform:scale(1)} } #sVisual p{ animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:calc(60ms * var(--char-index)); } #sVisual .slogan{position:absolute; top: 0; left: 0; margin:0px auto; z-index:1; text-align:left; display:table; width:100%; height:100%; box-sizing:border-box;} #sVisual .slo-wrap{display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center;} #sVisual .slogan h1{margin-top:2.5%;} #sVisual .slogan h1 big{display:block;font-weight:600;font-size: 52px;letter-spacing:-0.1px;color:#fff;-webkit-transition-delay:0.3s;transition-delay:0.3s;padding-top: 10px;} #sVisual .slogan h1 small{letter-spacing:.5px; margin-top:10px; display:block; font-size:18px; font-weight:600; color:rgba(255,255,255,0.6);} #sVisual:after{opacity:0; transform:translate(0, 40px); transition:all 1s 0.6s ease;} #sVisual.in-view:after{opacity:1; transform:translate(0, 0); transition:all 1s 0.6s ease;} @media (max-width: 1240px){ } @media (max-width: 767px){ #sVisual{height:240px;} #sVisual .sv_box{height: 240px;} #sVisual .slogan h1 big{font-size:28px;} #sVisual .slogan h1 small{font-size:13px; margin-top:5px;} } .loca{width: 100%; padding: 10px 0; z-index: 10;} .loca ul.loc{} .loca ul.loc li{display:inline-block; font-size: 20px; padding: 0 20px 0 0; color: #bbb; position: relative;} .loca ul.loc li:after{display:block; width: 3px; height: 3px; background-color: #cdcdcd; border-radius:50%; content:''; position: absolute; right: 6px; top: 9px;} .loca ul.loc li.last{color:#bbb; position: relative; padding: 0;} .loca ul.loc li.last:after{display:none;} .loca ul.loc li.home i{color: #fff; opacity: .5; transition:all 0.4s ease;} .loca ul.loc li.home:hover i{opacity: 1;} @media (max-width: 991px){ .loca ul.loc li {padding: 0 15px 0 0; font-size: 16px;} .loca ul.loc li:after{top: 7px;} } @media (max-width: 640px){ .loca{padding: 5px 0;} .loca ul.loc li {font-size: 14px;} } /* 서브네비 */ .sub_menu{position: absolute; bottom: 40px; width: 100%; text-align: center; z-index: 10;} .sub_menu .vNav{display: inline-block; width: auto; margin:0 auto; height: 60px; box-sizing:border-box;} .sub_menu .vNav ul{position: relative; display: flex; flex-wrap: wrap; height: 100%; justify-content: center; align-items: flex-end; border-radius: 100px; background: rgba(0,0,0,0.4); padding: 0 60px; gap: 60px; backdrop-filter : blur(3px);} .sub_menu .vNav ul li{position:relative;display:inline-block;height: 100%;} .sub_menu .vNav ul li a{display: flex; position: relative; height: 100%; font-size: 20px; line-height: 1.3; color: #fff; letter-spacing: -0.015em; font-weight: 500; text-decoration: none; align-items: center; border: 0;} .sub_menu .vNav ul li a i{margin:0 0 3px 5px;} .sub_menu .vNav ul li a:hover{transition:.3s; color: #34A7E2;} .sub_menu .vNav ul li > a{transition:all ease .3s;} .sub_menu .vNav ul li a span{position: relative;} .sub_menu .line{opacity:0; display:inline-block; z-index:1; position:absolute; left:0; top:-1px; width:100px; height:2px; background:none;} .sub_menu .m_sub_menu{position:relative; z-index:990;} .sub_menu .m_sub_menu .btn_s_menu{border:0; width:100%; height:40px; background:rgba(0,0,0,0.4);} .sub_menu .m_sub_menu .btn_s_menu > span{color:#fff;} .sub_menu .m_sub_menu .s_menu{display:none; padding:2%; box-shadow:0px 40px 40px 0px rgb(0 0 0 / 15%); background:#fff; opacity:0.95;} .sub_menu .m_sub_menu .s_menu li{} .sub_menu .m_sub_menu .s_menu li a{display:block; padding:1.5%; width:100%; text-align: center; font-size:15px; color:#000;} .sub_menu .m_sub_menu i{color:#fff;} .sub_menu #page0{display:none;} @media (max-width: 1400px){ .sub_menu{bottom: 20px;} .sub_menu .vNav {height: 50px;} .sub_menu .vNav ul {padding: 0 40px; gap: 30px;} .sub_menu .vNav ul li a {font-size: 16px;} } @media (max-width: 1200px){ .sub_menu .vNav{height: 45px;} .sub_menu .vNav ul{} } @media (max-width: 1000px){ .sub_menu .vNav{height: 42px;} .sub_menu .vNav ul{height: auto; row-gap: 5px; padding: 8px 30px;} .sub_menu .vNav ul li a{font-size: 15px;} } @media (max-width: 740px){ .sub_menu{} .sub_menu .vNav{display: block; width: 95%; margin: 0 auto 10px;} .sub_menu .vNav ul{gap: 20px; row-gap: 5px;} } @media (max-width: 500px){ .sub_menu .vNav ul{gap: 12px; row-gap: 5px; padding: 8px 20px; border-radius: 10px;} .sub_menu .vNav ul li a{font-size: 14px;} } /* 서브공통 */ .sContWrap{position:relative; width:100%; height:100%; min-height:500px;} .sContWrap:after{display:block; content:""; clear:both;} .sCont{padding:100px 0; width:90%; max-width:1400px; margin:0 auto; position:relative;} .sCont .sCont_title{padding-bottom:40px; color:#222; text-align:center; font-size:44px; font-weight:800; position:relative;} .w1200{max-width:1200px;} .sub-total{position:relative;} .sub-total .sub-top-tit{text-align:center;} .sub-total .sub-top-tit big{display:block; font-weight:600; font-size:60px; color:#0e2c3f; text-transform:uppercase;} .sub-total .sub-top-tit small{display:block; font-weight:400; font-size:24px; letter-spacing:-0.5px; color:#2b2b2b; line-height:1.5; padding-top:27px; word-break:keep-all;} .sub-total .sub-top-tit big{opacity:0; transform:translateY(20px);} .sub-total .in-view .sub-top-tit big{opacity:1; transform:translateY(0px); transition:all 1s 0.4s ease;} .sub-total .sub-top-tit small{opacity:0; transform:translateY(40px);} .sub-total .in-view .sub-top-tit small{opacity:1;transform:translateY(0px); transition:all 1s 0.8s ease;} .sub-total .sub-tab{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; margin:40px 0 80px 0;} .sub-total .sub-tab li{width:50%; cursor:pointer;} .sub-total .sub-tab li:first-child a{border-left:none;} .sub-total .sub-tab li a{ padding:20px 20px; overflow:hidden; width:100%; height:100%; min-height:auto; text-align:center; display:flex; vertical-align:middle; font-size:22px; line-height:1; letter-spacing:0px; color:#888; font-family:'NEXEN_TIRE_Regular'; font-weight:normal; border-top:1px solid #f9f9f9; border-bottom:1px solid #f9f9f9; border-left:1px solid #e2e2e2; background:#f9f9f9; align-items:center; justify-content:center; word-break:break-all; } .sub-total .sub-tab li a.on{color:#2f677e; border:1px solid #2f677e; background:#fff;} .sub-total .sub-tab{opacity:0; transform:translateY(20px);} .sub-total .in-view .sub-tab{opacity:1; transform:translateY(0px); transition:all 1s 0.4s ease;} .sub-board-bottom{margin-bottom:100px;} @media (max-height: 2000px){ .sContWrap{/*min-height:1200px;*/} } @media (max-width: 1024px){ .sContWrap{min-height:auto;} .sCont{padding:60px 0;} } @media (max-width: 767px){ .sCont{padding:40px 0;} .sCont .sCont-stitle{font-size:28px; padding-bottom:30px;} .sCont .sCont_title{padding-bottom:30px; font-size:30px;} .sub-board-bottom{margin-bottom:40px;} } /* sub1_1 : 인사말 */ #axHello{position:relative; margin-top:6px;} /* ── 상단 이미지 : 스크롤 시 확대 ─────────────── */ #axHello .gt-visual{width:100vw; margin:8px calc(50% - 50vw) 0; display:flex; justify-content:center;} #axHello .gt-visual .img{width:calc(100% - 80px); max-width:1400px; height:520px; overflow:hidden; border-radius:16px; will-change:width; transition:width .9s cubic-bezier(.22,.61,.36,1), border-radius .9s cubic-bezier(.22,.61,.36,1);} #axHello .gt-visual .img.on{width:100%; border-radius:0;} #axHello .gt-visual .img img{width:100%; height:100%; object-fit:cover; display:block;} /* ── 좌우 배치 ─────────────────────────────── */ #axHello .gt-main{display: flex; justify-content: space-between; align-items: flex-start; gap:80px; margin-top:96px; } /* 좌 : 대표 문장 */ #axHello .gt-lead{position:sticky; top:120px; width: 30%;} #axHello .gt-lead .eng{display:block; margin-bottom:26px; font-family: "Fira Sans", sans-serif; font-size:20px; font-weight:500; font-style: italic; letter-spacing:1px; color:var(--txt); word-break: keep-all;} #axHello .gt-lead .eng b.blue{color: #34A7E2;} #axHello .gt-lead .eng b.green{color: #06e1c1;} #axHello .gt-lead .statement{font-size:46px; font-weight:800; line-height:1.25; color:var(--ink); letter-spacing:-.5px; word-break:keep-all;} /* 우 : 인사말 본문 */ #axHello .gt-body{width: 70%;} #axHello .gt-body p{font-family: 'Pretendard', sans-serif; font-size:22px; font-weight:500; letter-spacing: -.4px; line-height:2; color:var(--txt); word-break:keep-all;} #axHello .gt-body p + p{margin-top:26px;} #axHello .gt-body b.hl{font-weight:700; color:var(--ink);} #axHello .gt-body .key{font-weight:700; color:var(--ink);} #axHello .gt-body .motto{font-weight:700; color:var(--ink);} #axHello .gt-body .slg{font-weight:700; color:var(--ink);} #axHello .gt-body .slg span{color:var(--blue);} /* 서명 */ #axHello .gt-sign{margin-top:56px; padding-top:32px; border-top:1px solid var(--line); text-align:right;} #axHello .gt-sign .stx{display:block; font-size:20px; font-weight:500; color:var(--muted);} #axHello .gt-sign .snm{display:block; margin-top:12px; font-family: 'KimJeongCheolHandwriting', sans-serif; font-size:38px; font-weight:700; color:var(--ink); letter-spacing:8px;} #axHello .gt-sign .snm .last{letter-spacing:0;} /* ── 스크롤 텍스트 필 ─────────────────────────── */ #axHello .fill .w{opacity:.18; transition:opacity .4s ease;} #axHello .fill .w.on{opacity:1;} @media (prefers-reduced-motion: reduce){ #axHello .fill .w{opacity:1; transition:none;} } /* ═══ 반응형 ═══ */ @media (max-width:1600px){ #axHello .gt-lead .statement{font-size: 36px;} #axHello .gt-body p{font-size: 25px;} } @media (max-width:1240px){ #axHello .gt-visual .img{height: 300px;} #axHello .gt-main{display: block; margin-top:50px;} #axHello .gt-lead{width: 100%; margin-bottom: 20px;} #axHello .gt-lead .statement{font-size:30px;} #axHello .gt-lead .statement br{display: none;} #axHello .gt-lead .eng{margin-bottom: 15px; font-size: 18px;} #axHello .gt-body{width: 100%;} #axHello .gt-body p{font-size: 18px;} #axHello .gt-body p + p{margin-top: 20px;} #axHello .gt-sign .stx{font-size: 18px;} #axHello .gt-sign .snm{font-size: 28px;} } @media (max-width:1024px){ #axHello .gt-visual .img{height:280px;} #axHello .gt-main{margin-top:60px;} #axHello .gt-lead{position:static;} #axHello .gt-lead .eng{margin-bottom:20px;} #axHello .gt-lead .statement{font-size:32px; line-height:1.4;} #axHello .gt-body{width: 100%;} #axHello .gt-body p{font-size:18px;} } @media (max-width:767px){ #axHello .gt-visual{margin-top:4px;} #axHello .gt-visual .img{height:230px; border-radius:12px;} #axHello .gt-main{margin-top:44px;} #axHello .gt-lead .eng{margin-bottom:16px; font-size:16px; letter-spacing:2px;} #axHello .gt-lead .statement{font-size:25px; line-height:1.45;} #axHello .gt-body .lead{font-size:18px; line-height:1.75;} #axHello .gt-body p{font-size:17px; line-height:1.9;} #axHello .gt-body p + p{margin-top:20px;} #axHello .gt-body .lead + p{margin-top:20px;} #axHello .gt-sign{margin-top:40px; padding-top:24px;} #axHello .gt-sign .stx{font-size:17px;} #axHello .gt-sign .snm{font-size:25px; letter-spacing:6px;} } @media (max-width:500px){ #axHello .gt-visual .img{width: calc(100% - 40px); height: 180px;} #axHello .gt-main{margin-top: 25px;} #axHello .gt-lead{margin-bottom: 15px;} #axHello .gt-lead .eng{margin-bottom: 10px; font-size: 12px;} #axHello .gt-lead .statement{font-size: 20px;} #axHello .gt-body p{font-size: 15px; line-height: 1.7;} #axHello .gt-sign .stx{font-size: 16px;} #axHello .gt-sign .snm{font-size: 22px; letter-spacing: 3px;} } /* sub1_2 : 학과 개요 */ #axOv{position:relative; margin-top:6px;} /* ── 공통 섹션 헤더 ─────────────────────────── */ #axOv .ov-sec{position:relative; padding:70px 40px;} #axOv .sec-head{text-align:center; margin-bottom:52px;} #axOv .sec-head h2{font-size:40px; font-weight:800; color:var(--ink); line-height:1.28; word-break:keep-all;} #axOv .sec-head h2 em{font-style:normal; color:var(--blue2);} #axOv .sec-head p{margin-top:18px; font-size:22px; font-weight:500; color:var(--txt); line-height:1.7; word-break:keep-all;} /* ── HERO : 비전 + 3대 방향 ─────────────────── */ #axOv .ov-sec.ov-edu{width: 100%; max-width: 1600px; margin: 0 auto;} #axOv .ov-hero{position:relative; overflow:hidden; width: calc(100% - 80px); margin:0 auto 8px; padding:64px 40px 60px; border-radius:26px; background: url('../images/sub/ov-hero_tit_BG.jpg') no-repeat 50% 50% /cover;} #axOv .ov-hero::before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.4); z-index: 0;} #axOv .ov-hero .in{position:relative; z-index:2; text-align:center;} #axOv .ov-hero .badge{display:inline-block; margin-bottom:22px; padding:9px 22px; border:1px solid rgba(255,255,255,.35); border-radius:999px; font-size:16px; font-family: "Russo One", sans-serif; font-weight:400; letter-spacing:1px; color:#dbe9ff;} #axOv .ov-hero h1{font-size:46px; font-weight:800; color:#fff; line-height:1.32; word-break:keep-all; letter-spacing:-.5px;} #axOv .ov-hero h1 span{color:#8fd4ff;} #axOv .ov-hero p{margin-top:20px; font-size:20px; font-weight:400; color:rgba(255,255,255,.78); line-height:1.7; word-break:keep-all;} #axOv .ov-hero p b{font-weight: 400; color: #fff;} #axOv .ov-goals{position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px;} #axOv .ov-goals .g{display:flex; align-items:center; gap:18px; padding:24px 26px; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:rgba(255,255,255,.08); backdrop-filter:blur(4px);} #axOv .ov-goals .g .ic{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,#34A7E2,#2f7fd4);} #axOv .ov-goals .g .ic img{width:32px; height:32px; object-fit:contain;} #axOv .ov-goals .g b{font-size:23px; font-weight:600; color:#fff; line-height:1.4; word-break:keep-all;} /* ── 교육체계 : 전주기 4단계 ────────────────── */ #axOv .flow{display:grid; grid-template-columns:repeat(4,1fr); gap:44px; margin-bottom:20px;} #axOv .flow .step{position:relative; padding: 25px 25px; border:1px solid var(--line); border-radius:var(--r); background:#fff; transition:transform .5s, box-shadow .5s, border-color .5s;} /* 단계 표시 : 일정 시간마다 1→2→3→4 순으로 .active 부여 (호버 아님) */ #axOv .flow .step.active{transform:translateY(-6px); border-color:var(--blue3);} #axOv .flow .step.active .ic img{filter: invert(24%) sepia(26%) saturate(3929%) hue-rotate(198deg) brightness(97%) contrast(95%); opacity:1;} #axOv .flow .step .no{transition:box-shadow .5s;} #axOv .flow .step .ic img{transition:opacity .5s;} #axOv .flow .step:not(:last-child):after{content:""; position:absolute; top:50%; right:-30px; width:16px; height:16px; margin-top:-8px; border-top:3px solid #c4d3ea; border-right:3px solid #c4d3ea; transform:rotate(45deg);} #axOv .flow .step .top{display:flex; align-items:center; gap:14px; margin-bottom:18px;} #axOv .flow .step .no{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--blue3)); font-size:18px; font-weight:800; color:#fff;} #axOv .flow .step .ic{position: absolute; top: 30px; right: 24px; flex:0 0 auto; width:40px; height:40px;} #axOv .flow .step .ic img{width:40px; height:40px; object-fit:contain; opacity: .2;} #axOv .flow .step h3{font-size:24px; font-weight:800; color:var(--ink); line-height:1.3; word-break:keep-all; margin-bottom:16px;} #axOv .flow .step ul li{position:relative; padding-left:18px; font-size:18px; font-weight:500; color:var(--txt); line-height:1.55; word-break:keep-all;} #axOv .flow .step ul li + li{margin-top:9px;} #axOv .flow .step ul li:before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--blue3),var(--cyan));} /* X-Cube 정의 스트립 */ #axOv .xcube_wr{width: 100%; margin: 0 auto;} #axOv .xcube{display:flex; align-items:center; gap:10%; padding:15px 15px 15px 10%; margin-top:40px; border-radius:var(--r); background:linear-gradient(120deg,#0b1c3d 0%,#14336f 100%);} #axOv .xcube .mark{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:10px;} #axOv .xcube .mark img{width:70px; height:70px; object-fit:contain;} #axOv .xcube .mark b{font-size:18px; font-weight:800; letter-spacing:1px; color:#8fd4ff;} #axOv .xcube .defs{flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:10px;} #axOv .xcube .defs .d{padding:20px; background: rgba(255,255,255,.1); border-radius: 10px; text-align: center;} #axOv .xcube .defs .d strong{display:block; margin-bottom:8px; font-family: "Russo One", sans-serif; font-weight: 400; font-size:38px; color:#fff;} #axOv .xcube .defs .d span{font-size:18px; font-weight:400; color:rgba(255,255,255,.8); line-height:1.55; word-break:keep-all;} /* 교육 운영 3요소 */ #axOv .support{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;} #axOv .support .s{display:flex; align-items:center; justify-content:center; gap:14px; padding:20px 18px; border:1px solid var(--line); border-radius:14px; background:var(--soft);} #axOv .support .s .ic{flex:0 0 auto; width:34px; height:34px;} #axOv .support .s .ic img{width:30px; height:30px; object-fit:contain; filter: invert(24%) sepia(26%) saturate(3929%) hue-rotate(198deg) brightness(97%) contrast(95%); opacity: .7;} #axOv .support .s b{font-size:22px; font-weight:600; color:var(--blue); word-break:keep-all;} /* ── AXEL 인재 양성 모델 ────────────────────── */ #axOv .ov-axel{background: #f9f9f9; border-radius: 25px 25px 0 0;} #axOv .ov-axel .ov-axel-wr{width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 40px;} #axOv .axel{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;} #axOv .axel .card{position:relative; overflow:hidden; padding:34px 26px 30px; border-radius:var(--r); background:#fff; box-shadow:0 12px 30px rgba(18,41,95,.07);} #axOv .axel .card .ic{display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:22px; border-radius:16px; background:linear-gradient(135deg,#eaf2fd,#dcecfb);} #axOv .axel .card .ic img{width:36px; height:36px; object-fit:contain; filter: invert(10%) sepia(20%) saturate(4332%) hue-rotate(199deg) brightness(93%) contrast(100%);} #axOv .axel .card .en{display:block; font-size:20px; font-weight:800; color:var(--blue3); line-height:1.3;} #axOv .axel .card .ko{display:block; margin-top:7px; font-size:20px; font-weight:700; color:var(--ink);} #axOv .axel .card .desc{margin-top:16px; padding-top:16px; border-top:1px dashed #dde8f4; font-size:18px; font-weight:500; color:var(--txt); line-height:1.4; word-break:keep-all;} /* ── 연구 협력 체계 (풀블리드) ──────────────── */ #axOv .ov-research{position:relative; border-top:0; margin:0 calc(50% - 50vw); padding:80px 40px; background:linear-gradient(180deg,#0a1a3a 0%,#061634 100%); border-radius: 25px 25px 0 0;} #axOv .ov-research .sec-head .eng{color:#69D5FF;} #axOv .ov-research .sec-head h2{color:#fff;} #axOv .ov-research .sec-head p{color:rgba(255,255,255,.72);} #axOv .centers{position: relative; display:grid; grid-template-columns:1fr 1fr; gap:24px; padding: 20px 0;} #axOv .centers::before{content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); display: block; width: 80%; height: 22px; border: 1px solid rgba(255,255,255,.22); border-bottom: 0; z-index: 0;} #axOv .centers::after{content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); display: block; width: 80%; height: 22px; border: 1px solid rgba(255,255,255,.22); border-top: 0; z-index: 0;} #axOv .center{position:relative; padding:36px 32px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:#fff; backdrop-filter:blur(4px);} #axOv .center .c-head{position: relative; display:flex; align-items:center; gap:16px; padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,.14);} #axOv .center .c-head .logo{position: absolute; top: 0; right: 0; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:220px; height:60px; border-radius:10px; background: #fff;} #axOv .center01 .c-head .logo img{height: 38px;} #axOv .center02 .c-head .logo img{height: 35px;} #axOv .center01 .c-head .t em{color: #16a9dd;} #axOv .center02 .c-head .t em{color: #96ca9c;} #axOv .center01 .fields .f .ic{background:linear-gradient(135deg,#1ec4ff,#16a9dd);} #axOv .center02 .fields .f .ic{background:linear-gradient(135deg,#96ca9c,#5ecd6b);} #axOv .center01 .chain .node{background:rgba(52,167,226,.18); border:1px solid rgba(52,167,226,.35);} #axOv .center02 .chain .node{background:rgba(58,169,69,.18); border:1px solid rgba(56,169,112,.35);} #axOv .center .c-head .t b{display:block; font-size:30px; font-weight:700; color:var(--ink); line-height:1.3; word-break:keep-all;} #axOv .center .c-head .t em{display:block; margin-top:6px; font-family: "Russo One", sans-serif; font-style:normal; font-size:16px; font-weight:400; letter-spacing:.3px;} #axOv .center .fields{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:24px;} #axOv .center .fields .f{display:flex; flex-direction:column; align-items:center; gap:11px; padding:16px 8px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:#f9f9f9; text-align:center;} #axOv .center .fields .f .ic{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px;} #axOv .center .fields .f .ic img{width:26px; height:26px; object-fit:contain;} #axOv .center .fields .f b{font-size:17px; font-weight:700; color:#222; line-height:1.35; word-break:keep-all;} #axOv .center .fields .f span{font-family: "Russo One", sans-serif; font-size:13px; font-weight:400; color: #555; line-height:1.3; letter-spacing: .4px; word-break:keep-all;} #axOv .center .chain{display:flex; flex-wrap:wrap; justify-content: center; align-items:center; gap:8px;} #axOv .center .chain .node{padding:9px 16px; border-radius:999px; font-size:16px; font-weight:600; color:#222;} #axOv .center .chain .arw{width:9px; height:9px; border-top:2px solid rgba(255,255,255,.45); border-right:2px solid rgba(255,255,255,.45); transform:rotate(45deg);} /* ── 산학연 연계 : 학과 타이틀 + 상·하단 교류 밴드 ── */ #axOv .rc-flow{position:relative; width: 100%; max-width: none;} /* 학과 타이틀 (최상단) */ #axOv .rc-dept{display:flex; flex-direction:column; align-items:center; gap:7px; padding:24px 30px; border-radius:18px; background:linear-gradient(135deg,#1b4ca0 0%,#2f7fd4 100%); box-shadow:0 14px 34px rgba(0,0,0,.28);} #axOv .rc-dept b{font-size:30px; font-weight:800; color:#fff; letter-spacing:.5px; word-break:keep-all;} #axOv .rc-dept span{font-family:"Russo One",sans-serif; font-size:14px; font-weight:400; letter-spacing:.6px; color:rgba(255,255,255,.78);} /* 교류(화살표) 밴드 */ #axOv .rc-exchange{position:relative; display:flex; align-items:stretch; justify-content:center; padding:18px 22px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);} #axOv .rc-ex-top{margin:20px 0;} #axOv .rc-ex-bottom{margin:20px 0 0;} #axOv .rc-exchange .ex-col{flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:14px; padding:6px 14px; text-align:center;} #axOv .rc-exchange .ex-col + .ex-col{border-left:1px solid rgba(255,255,255,.1);} #axOv .rc-exchange .ex-col p{font-size:18px; font-weight:600; color:#eaf4ff; line-height:1.5; word-break:keep-all;} #axOv .rc-exchange .ex-arrow{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; font-size:24px; line-height:1; font-weight:800; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.25);} #axOv .rc-exchange .ex-col.down .ex-arrow{background:linear-gradient(135deg,#34A7E2,#2f7fd4);} #axOv .rc-exchange .ex-col.up .ex-arrow{background:linear-gradient(135deg,#96ca9c,#5ecd6b);} #axOv .rc-exchange .ex-col.mid .ex-arrow{background:rgba(255,255,255,.16); color:#8fd4ff;} /* 밴드 ↔ 상하 요소를 잇는 커넥터 */ #axOv .rc-exchange::before, #axOv .rc-exchange::after{content:""; position:absolute; left:50%; width:1px; height:20px; background:rgba(255,255,255,.22); transform:translateX(-50%);} #axOv .rc-exchange::before{top:-20px;} #axOv .rc-exchange::after{bottom:-20px;} #axOv .rc-ex-bottom::after{display:none;} /* ── 협력기업 및 산업 파트너 ────────────────── */ #axOv .partners{margin-top: 20px; padding: 70px 32px 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); padding: 40px; border-radius: 16px;} #axOv .partners .partners_tit{margin-bottom: 15px; padding: 15px 20px; border-radius: 10px; background: linear-gradient(135deg,#1b4ca0 0%,#2f7fd4 100%); font-size: 24px; font-weight: 600; text-align: center; color: #fff; letter-spacing: .5px; word-break: keep-all;} #axOv .partners .p-block{margin-bottom:15px; padding:34px 34px 30px; border:1px solid var(--line); border-radius:var(--r); background:#fff; box-shadow:0 12px 30px rgba(18,41,95,.06);} #axOv .partners .p-block .lbl{display:flex; align-items:center; gap:30px; margin-bottom:24px;} #axOv .partners .p-block .lbl b{font-size:20px; font-weight:700; color:var(--blue);} #axOv .partners .p-block .lbl:after{content:""; flex:1 1 auto; height:1px; background:var(--line);} #axOv .partners .logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:22px 40px;} #axOv .partners .logos img{height:38px; width:auto; max-width:180px; object-fit:contain;} #axOv .partners .idm .logos img{height:34px;} #axOv .collab{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px;} #axOv .collab .c{display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 18px; border:1px solid var(--line); border-radius:14px; background:var(--soft); text-align:center;} #axOv .collab .c .ic{display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--blue3));} #axOv .collab .c .ic img{width:35px; height:35px; object-fit:contain; -webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);} #axOv .collab .c b{font-size:20px; font-weight:700; color:var(--ink); line-height:1.45; word-break:keep-all;} /* ── 다이어그램 가로 스크롤 래퍼 + 모바일 안내 ────── */ #axOv .rc-flow-wrap{position:relative; width:100%;} #axOv .rc-scroll{position:relative; width:100%;} #axOv .rc-hint{display:none;} #axOv .center .c-head .t{padding-right:240px;} @keyframes rcHintSwipe{0%,100%{transform:translateX(-7px);} 50%{transform:translateX(7px);}} /* ═══ 반응형 ═══ */ @media (min-width:1820px){ #axOv .ov-hero{max-width: 1600px;} #axOv .sec-head{width: 100%; max-width: 1600px; margin: 0 auto 52px;} #axOv .rc-flow-wrap{width: 100%; max-width: 1600px; margin: 0 auto;} #axOv .partners{width: 100%; max-width: 1600px; margin: 20px auto 0;} } /* ── 1600 ─────────────────────────────────── */ @media (max-width:1600px){ #axOv .ov-sec{padding:64px 36px;} #axOv .sec-head{margin-bottom:46px;} #axOv .sec-head h2{font-size:36px;} #axOv .sec-head p{margin-top:16px; font-size:20px;} #axOv .ov-hero{padding:58px 36px 54px;} #axOv .ov-hero .badge{margin-bottom:20px; font-size:15px;} #axOv .ov-hero h1{font-size:42px;} #axOv .ov-hero p{margin-top:18px; font-size:19px;} #axOv .ov-goals{gap:16px; margin-top:38px;} #axOv .ov-goals .g{gap:16px; padding:22px;} #axOv .ov-goals .g .ic{width:52px; height:52px;} #axOv .ov-goals .g .ic img{width:30px; height:30px;} #axOv .ov-goals .g b{font-size:21px;} #axOv .flow{gap:36px;} #axOv .flow .step{padding:22px;} #axOv .flow .step:not(:last-child):after{right:-26px;} #axOv .flow .step h3{font-size:22px;} #axOv .flow .step ul li{font-size:17px;} #axOv .xcube{gap:7%; padding:15px 15px 15px 7%;} #axOv .xcube .defs .d strong{font-size:34px;} #axOv .xcube .defs .d span{font-size:17px;} #axOv .support .s b{font-size:20px;} #axOv .axel .card{padding:30px 22px 28px;} #axOv .axel .card .en{font-size:19px;} #axOv .axel .card .ko{font-size:19px;} #axOv .axel .card .desc{font-size:17px;} #axOv .ov-research{padding:72px 36px;} #axOv .center{padding:32px 26px;} #axOv .center .c-head .logo{width:190px; height:54px;} #axOv .center .c-head .t{padding-right:206px;} #axOv .center .c-head .t b{font-size:26px;} #axOv .center .c-head .t em{font-size:15px;} #axOv .center .fields .f b{font-size:16px;} #axOv .center .fields .f span{font-size:12px;} #axOv .center .chain .node{padding:8px 14px; font-size:15px;} #axOv .rc-dept b{font-size:27px;} #axOv .rc-exchange .ex-col p{font-size:17px;} #axOv .rc-exchange .ex-arrow{width:44px; height:44px; font-size:22px;} #axOv .partners{padding:36px;} #axOv .partners .partners_tit{font-size:22px;} #axOv .partners .p-block{padding:30px 30px 28px;} #axOv .partners .logos img{height:34px;} #axOv .partners .idm .logos img{height:31px;} #axOv .collab .c b{font-size:18px;} } /* ── 1400 ─────────────────────────────────── */ @media (max-width:1400px){ #axOv .ov-sec{padding:58px 32px;} #axOv .sec-head{margin-bottom:42px;} #axOv .sec-head h2{font-size:32px;} #axOv .sec-head p{font-size:19px;} #axOv .ov-hero{width:calc(100% - 64px); padding:52px 32px 48px;} #axOv .ov-hero h1{font-size:38px;} #axOv .ov-hero p{font-size:18px;} #axOv .ov-goals{gap:14px; margin-top:34px;} #axOv .ov-goals .g{gap:14px; padding:20px 18px;} #axOv .ov-goals .g .ic{width:48px; height:48px;} #axOv .ov-goals .g .ic img{width:28px; height:28px;} #axOv .ov-goals .g b{font-size:19px;} #axOv .flow{gap:30px;} #axOv .flow .step{padding:22px 20px;} #axOv .flow .step:not(:last-child):after{right:-23px; width:14px; height:14px; margin-top:-7px;} #axOv .flow .step .no{width:40px; height:40px; font-size:17px;} #axOv .flow .step .ic{top:26px; right:20px; width:34px; height:34px;} #axOv .flow .step .ic img{width:34px; height:34px;} #axOv .flow .step h3{margin-bottom:14px; font-size:21px;} #axOv .flow .step ul li{font-size:16px;} #axOv .xcube{gap:5%; padding:15px 15px 15px 5%; margin-top:34px;} #axOv .xcube .mark img{width:62px; height:62px;} #axOv .xcube .defs .d{padding:16px;} #axOv .xcube .defs .d strong{font-size:30px;} #axOv .xcube .defs .d span{font-size:16px;} #axOv .support .s{gap:12px; padding:18px 14px;} #axOv .support .s b{font-size:19px;} #axOv .ov-axel .ov-axel-wr{padding:0 32px;} #axOv .axel{gap:16px;} #axOv .axel .card{padding:28px 20px 26px;} #axOv .axel .card .ic{width:58px; height:58px; margin-bottom:18px;} #axOv .axel .card .en{font-size:18px;} #axOv .axel .card .ko{font-size:18px;} #axOv .axel .card .desc{margin-top:14px; padding-top:14px; font-size:16px;} #axOv .ov-research{padding:64px 32px;} #axOv .center{padding:28px 22px;} #axOv .center .c-head{gap:12px; padding-bottom:18px; margin-bottom:20px;} #axOv .center .c-head .logo{width:168px; height:48px;} #axOv .center01 .c-head .logo img{height:32px;} #axOv .center02 .c-head .logo img{height:30px;} #axOv .center .c-head .t{padding-right:182px;} #axOv .center .c-head .t b{font-size:24px;} #axOv .center .c-head .t em{font-size:14px;} #axOv .center .fields{gap:8px; margin-bottom:20px;} #axOv .center .fields .f{gap:9px; padding:14px 6px;} #axOv .center .fields .f .ic{width:42px; height:42px;} #axOv .center .fields .f .ic img{width:24px; height:24px;} #axOv .center .fields .f b{font-size:15px;} #axOv .center .fields .f span{font-size:11px;} #axOv .center .chain .node{padding:8px 12px; font-size:14px;} #axOv .rc-dept{padding:22px 26px;} #axOv .rc-dept b{font-size:25px;} #axOv .rc-dept span{font-size:13px;} #axOv .rc-exchange{padding:16px 18px;} #axOv .rc-exchange .ex-col{gap:12px; padding:6px 10px;} #axOv .rc-exchange .ex-col p{font-size:16px;} #axOv .rc-exchange .ex-arrow{width:42px; height:42px; font-size:21px;} #axOv .partners{padding:32px;} #axOv .partners .partners_tit{font-size:21px;} #axOv .partners .p-block{padding:28px 26px 26px;} #axOv .partners .p-block .lbl{gap:22px; margin-bottom:20px;} #axOv .partners .p-block .lbl b{font-size:19px;} #axOv .partners .logos{gap:20px 32px;} #axOv .partners .logos img{height:32px; max-width:150px;} #axOv .partners .idm .logos img{height:29px;} #axOv .collab{gap:14px;} #axOv .collab .c{gap:12px; padding:24px 14px;} #axOv .collab .c .ic{width:56px; height:56px;} #axOv .collab .c .ic img{width:32px; height:32px;} #axOv .collab .c b{font-size:17px;} } /* ── 1200 ─────────────────────────────────── */ @media (max-width:1200px){ #axOv .ov-sec{padding:52px 28px;} #axOv .sec-head{margin-bottom:36px;} #axOv .sec-head h2{font-size:30px;} #axOv .sec-head p{margin-top:14px; font-size:18px;} #axOv .ov-hero{width:calc(100% - 56px); padding:46px 28px 44px;} #axOv .ov-hero .badge{margin-bottom:16px; padding:8px 18px; font-size:14px;} #axOv .ov-hero h1{font-size:34px;} #axOv .ov-hero p{margin-top:16px; font-size:17px;} #axOv .ov-goals{gap:12px; margin-top:30px;} #axOv .ov-goals .g{gap:12px; padding:18px 16px;} #axOv .ov-goals .g .ic{width:44px; height:44px;} #axOv .ov-goals .g .ic img{width:26px; height:26px;} #axOv .ov-goals .g b{font-size:17px;} #axOv .flow{grid-template-columns:repeat(2,1fr); gap:32px 30px;} #axOv .flow .step:nth-child(2):after{display:none;} #axOv .flow .step h3{font-size:20px;} #axOv .xcube{flex-direction:column; align-items:stretch; gap:22px; padding:26px;} #axOv .xcube .defs{gap:14px;} #axOv .support{gap:12px;} #axOv .support .s{padding:18px 12px;} #axOv .support .s b{font-size:17px;} #axOv .ov-axel .ov-axel-wr{padding:0 28px;} #axOv .axel{grid-template-columns:repeat(2,1fr); gap:16px;} #axOv .ov-research{padding:56px 28px;} #axOv .partners{padding:28px;} #axOv .collab{grid-template-columns:repeat(2,1fr);} } /* ── 1200 이하 : 연구 협력 다이어그램은 데스크톱 구조 그대로 가로 스크롤 ── 2단 센터 · 5열 필드 배치를 유지한 채 다이어그램 폭을 1200px로 고정하고, 좁은 화면에서는 좌우 스크롤로 전체를 확인하도록 함 */ @media (max-width:1200px){ /* 가로 스크롤 컨테이너 */ #axOv .rc-scroll{overflow-x:auto; overflow-y:hidden; padding:2px 0 14px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.4) rgba(255,255,255,.08);} #axOv .rc-scroll::-webkit-scrollbar{height:6px;} #axOv .rc-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.08); border-radius:999px;} #axOv .rc-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4); border-radius:999px;} /* 다이어그램 고정 폭 : 데스크톱 배치 유지 */ #axOv .rc-flow{width:1200px; max-width:none;} #axOv .centers{grid-template-columns:1fr 1fr; gap:24px; padding:20px 0;} #axOv .centers::before, #axOv .centers::after{width:80%;} /* 좌우 스크롤 안내 오버레이 */ #axOv .rc-hint{position:absolute; top:0; left:0; display:block; width:100%; height:100%; padding:0; border:0; border-radius:14px; background:rgba(0,0,0,.2); cursor:pointer; z-index:5; transition:opacity .3s ease, visibility .3s ease;} #axOv .rc-hint .rc-hint-in{position:sticky; top:38vh; display:flex; flex-direction:column; align-items:center; gap:6px; width:max-content; max-width:86%; margin:0 auto; padding:16px 22px; border:1px solid rgba(255,255,255,.3); border-radius:14px; background:rgba(9,24,54,.82); box-shadow:0 12px 30px rgba(0,0,0,.4); text-align:center;} #axOv .rc-hint i{font-size:26px; line-height:1; color:#8fd4ff; animation:rcHintSwipe 1.5s ease-in-out infinite;} #axOv .rc-hint b{font-size:16px; font-weight:700; color:#fff; letter-spacing:-.2px;} #axOv .rc-hint em{font-size:12px; font-weight:400; font-style:normal; color:rgba(255,255,255,.68);} #axOv .rc-flow-wrap.hint-off .rc-hint{opacity:0; visibility:hidden; pointer-events:none;} } /* ── 1024 ─────────────────────────────────── */ @media (max-width:1024px){ #axOv .ov-sec{padding:46px 24px;} #axOv .sec-head{margin-bottom:32px;} #axOv .sec-head h2{font-size:27px;} #axOv .sec-head p{font-size:17px;} #axOv .ov-hero{width:calc(100% - 48px); padding:42px 24px 40px; border-radius:22px;} #axOv .ov-hero h1{font-size:30px;} #axOv .ov-hero p{font-size:16px;} #axOv .ov-goals{grid-template-columns:repeat(3,1fr); gap:10px; margin-top:28px;} #axOv .ov-goals .g{flex-direction:column; align-items:center; gap:12px; padding:18px 12px; text-align:center;} #axOv .ov-goals .g b{font-size:16px;} #axOv .flow{gap:24px 22px;} #axOv .flow .step{padding:20px 18px;} #axOv .flow .step:not(:last-child):after{display:none;} #axOv .flow .step h3{font-size:19px;} #axOv .flow .step ul li{padding-left:16px; font-size:15px;} #axOv .xcube{gap:20px; padding:24px 20px; margin-top:28px;} #axOv .xcube .mark{flex-direction:row; justify-content:center; gap:14px;} #axOv .xcube .mark img{width:52px; height:52px;} #axOv .xcube .defs{grid-template-columns:repeat(3,1fr); gap:12px;} #axOv .xcube .defs .d{padding:14px 10px;} #axOv .xcube .defs .d strong{font-size:26px;} #axOv .xcube .defs .d span{font-size:15px;} #axOv .support{grid-template-columns:repeat(3,1fr); gap:10px;} #axOv .support .s{flex-direction:column; gap:10px; padding:16px 10px; text-align:center;} #axOv .support .s b{font-size:16px;} #axOv .ov-axel .ov-axel-wr{padding:0 24px;} #axOv .axel .card{padding:26px 20px 24px;} #axOv .axel .card .ic{width:52px; height:52px; margin-bottom:16px;} #axOv .axel .card .en{font-size:17px;} #axOv .axel .card .ko{font-size:17px;} #axOv .axel .card .desc{font-size:15px;} #axOv .ov-research{padding:50px 24px;} #axOv .partners{padding:24px; border-radius:14px;} #axOv .partners .partners_tit{padding:13px 16px; font-size:19px;} #axOv .partners .p-block{padding:24px 20px 22px;} #axOv .partners .p-block .lbl{gap:18px; margin-bottom:18px;} #axOv .partners .p-block .lbl b{font-size:17px;} #axOv .partners .logos{gap:18px 26px;} #axOv .partners .logos img{height:29px; max-width:130px;} #axOv .partners .idm .logos img{height:26px;} #axOv .collab{grid-template-columns:repeat(2,1fr); gap:12px;} #axOv .collab .c{padding:20px 12px;} #axOv .collab .c .ic{width:50px; height:50px;} #axOv .collab .c .ic img{width:28px; height:28px;} #axOv .collab .c b{font-size:16px;} } /* ── 768 (모바일) ─────────────────────────── */ @media (max-width:768px){ #axOv .ov-sec{padding:40px 16px;} #axOv .sec-head{margin-bottom:26px;} #axOv .sec-head h2{font-size:23px;} #axOv .sec-head p{margin-top:12px; font-size:15px;} /* 모바일 전용 배경 이미지 : images/sub/ov-hero_tit_BG_m.jpg 등록 */ #axOv .ov-hero{width:calc(100% - 32px); padding:34px 20px 32px; border-radius:18px; background-image:url('../images/sub/ov-hero_tit_BG_m.jpg');} #axOv .ov-hero .badge{margin-bottom:14px; padding:7px 14px; font-size:12px; letter-spacing:.5px;} #axOv .ov-hero h1{font-size:24px;} #axOv .ov-hero p{margin-top:14px; font-size:15px;} #axOv .ov-goals{grid-template-columns:1fr; gap:10px; margin-top:24px;} #axOv .ov-goals .g{flex-direction:row; align-items:center; gap:14px; padding:14px 16px; text-align:left;} #axOv .ov-goals .g .ic{width:42px; height:42px; border-radius:12px;} #axOv .ov-goals .g .ic img{width:24px; height:24px;} #axOv .ov-goals .g b{font-size:16px;} #axOv .flow{grid-template-columns:1fr; gap:12px;} #axOv .flow .step{padding:18px 16px;} #axOv .flow .step.active{transform:none;} #axOv .flow .step .top{margin-bottom:12px;} #axOv .flow .step .no{width:36px; height:36px; border-radius:10px; font-size:15px;} #axOv .flow .step .ic{top:20px; right:16px; width:30px; height:30px;} #axOv .flow .step .ic img{width:30px; height:30px;} #axOv .flow .step h3{margin-bottom:10px; font-size:18px;} #axOv .flow .step ul li{font-size:14px;} #axOv .flow .step ul li + li{margin-top:6px;} #axOv .flow .step ul li:before{top:7px; width:6px; height:6px;} #axOv .xcube{gap:16px; padding:20px 16px; margin-top:22px;} #axOv .xcube .mark img{width:44px; height:44px;} #axOv .xcube .mark b{font-size:16px;} #axOv .xcube .defs{grid-template-columns:1fr; gap:8px;} #axOv .xcube .defs .d{display:flex; align-items:center; gap:12px; padding:12px 14px; text-align:left;} #axOv .xcube .defs .d strong{margin-bottom:0; font-size:22px;} #axOv .xcube .defs .d span{font-size:14px;} #axOv .support{grid-template-columns:1fr; gap:8px;} #axOv .support .s{flex-direction:row; justify-content:flex-start; gap:10px; padding:14px 16px; text-align:left;} #axOv .support .s .ic{width:28px; height:28px;} #axOv .support .s .ic img{width:26px; height:26px;} #axOv .support .s b{font-size:15px;} #axOv .ov-axel{border-radius:18px 18px 0 0;} #axOv .ov-axel .ov-axel-wr{padding:0 16px;} #axOv .axel{grid-template-columns:1fr; gap:12px;} #axOv .axel .card{padding:22px 18px 20px; border-radius:14px;} #axOv .axel .card .ic{width:46px; height:46px; margin-bottom:14px; border-radius:12px;} #axOv .axel .card .ic img{width:28px; height:28px;} #axOv .axel .card .en{font-size:16px;} #axOv .axel .card .ko{margin-top:5px; font-size:16px;} #axOv .axel .card .desc{margin-top:12px; padding-top:12px; font-size:14px;} #axOv .axel .card .desc br{display:none;} #axOv .ov-research{padding:44px 16px; border-radius:18px 18px 0 0;} /* 파트너 */ #axOv .partners{margin-top:16px; padding:20px 16px; border-radius:14px;} #axOv .partners .partners_tit{margin-bottom:12px; padding:11px 14px; font-size:17px;} #axOv .partners .p-block{margin-bottom:12px; padding:20px 16px 18px; border-radius:14px;} #axOv .partners .p-block .lbl{gap:14px; margin-bottom:14px;} #axOv .partners .p-block .lbl b{font-size:15px;} #axOv .partners .logos{gap:14px 22px;} #axOv .partners .logos img{height:25px; max-width:110px;} #axOv .partners .idm .logos img{height:22px;} #axOv .collab{grid-template-columns:repeat(2,1fr); gap:8px;} #axOv .collab .c{gap:10px; padding:16px 8px;} #axOv .collab .c .ic{width:44px; height:44px; border-radius:12px;} #axOv .collab .c .ic img{width:24px; height:24px;} #axOv .collab .c b{font-size:14px; line-height:1.35;} } /* ── 500 ──────────────────────────────────── */ @media (max-width:500px){ #axOv .ov-sec{padding:32px 12px;} #axOv .sec-head{margin-bottom:22px;} #axOv .sec-head h2{font-size:20px;} #axOv .sec-head p{margin-top:10px; font-size:14px;} #axOv .sec-head p br{display:none;} #axOv .ov-hero{width:calc(100% - 24px); padding:28px 16px 26px; border-radius:16px;} #axOv .ov-hero .badge{padding:6px 12px; font-size:11px;} #axOv .ov-hero h1{font-size:20px;} #axOv .ov-hero h1 br{display:none;} #axOv .ov-hero p{margin-top:12px; font-size:14px;} #axOv .ov-goals{margin-top:20px;} #axOv .ov-goals .g{gap:12px; padding:12px 14px;} #axOv .ov-goals .g .ic{width:38px; height:38px;} #axOv .ov-goals .g .ic img{width:21px; height:21px;} #axOv .ov-goals .g b{font-size:15px;} #axOv .flow .step{padding:16px 14px;} #axOv .flow .step .no{width:32px; height:32px; font-size:14px;} #axOv .flow .step .ic{top:18px; right:14px; width:26px; height:26px;} #axOv .flow .step .ic img{width:26px; height:26px;} #axOv .flow .step h3{font-size:17px;} #axOv .flow .step ul li{font-size:13px;} #axOv .xcube{padding:18px 14px;} #axOv .xcube .mark img{width:40px; height:40px;} #axOv .xcube .mark b{font-size:14px;} #axOv .xcube .defs .d{padding:11px 12px;} #axOv .xcube .defs .d strong{font-size:20px;} #axOv .xcube .defs .d span{font-size:13px;} #axOv .support .s{padding:12px 14px;} #axOv .support .s b{font-size:14px;} #axOv .ov-axel .ov-axel-wr{padding:0 12px;} #axOv .axel .card{padding:20px 16px 18px;} #axOv .axel .card .en{font-size:15px;} #axOv .axel .card .ko{font-size:15px;} #axOv .axel .card .desc{font-size:13px;} #axOv .ov-research{padding:36px 12px;} #axOv .rc-hint .rc-hint-in{padding:14px 18px;} #axOv .rc-hint i{font-size:23px;} #axOv .rc-hint b{font-size:15px;} #axOv .rc-hint em{font-size:11px;} #axOv .partners{padding:16px 12px;} #axOv .partners .partners_tit{padding:10px 12px; font-size:15px;} #axOv .partners .p-block{padding:16px 14px;} #axOv .partners .p-block .lbl b{font-size:14px;} #axOv .partners .logos{gap:12px 18px;} #axOv .partners .logos img{height:22px; max-width:92px;} #axOv .partners .idm .logos img{height:19px;} #axOv .collab{grid-template-columns:1fr; gap:8px;} #axOv .collab .c{flex-direction:row; justify-content:flex-start; gap:12px; padding:14px; text-align:left;} #axOv .collab .c .ic{width:40px; height:40px;} #axOv .collab .c .ic img{width:22px; height:22px;} #axOv .collab .c b{font-size:14px;} } /* sub1_4 : 찾아오시는 길 */ #sContact { position: relative; word-break: keep-all; } #sContact .map-wrap { position: relative; padding: 0 50px; } #sContact iframe { overflow: hidden; position: relative; border-radius: 20px; } #sContact .map-info { position: relative; display: flex; padding-top: 40px; } #sContact .map-info .left { width: 30.76%; } #sContact .map-info .map-tit {} #sContact .map-info .map-tit big {display: block; font-size: 42px; font-weight: 700; line-height: 1.4; letter-spacing: -0.5px; color: var(--ink); transition: all 0.4s ease; } #sContact .map-info .map-tit big strong {font-weight: 700; color: var(--blue2);} #sContact .map-info .map-tit small { display: block; font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: -0.025em; color: #999; font-weight: 600; margin-top: 10px; transition: all 0.4s ease; } #sContact .map-info .right { width: calc(100% - 30.76%); font-size: 18px; line-height: 1.8; color: #535353; letter-spacing: -0.025em; transition: all 0.4s ease; } #sContact .map-info .map-txt dl { font-weight: 500; font-size: 20px; line-height: 1.6; padding: 15px 0; transition: all 0.4s ease; } #sContact .map-info .map-txt dl:first-child { padding: 0 0 15px; border-bottom: 2px dotted #ddd;} #sContact .map-info .map-txt dl+dl {} #sContact .map-info .map-txt dt { position: relative; margin-bottom: 10px; padding-left: 15px; font-weight: 700; font-size: 24px; color: #333; line-height: 1; text-align: left; border-left: 3px solid #337590; } #sContact .map-info .map-txt dd {display: flex; margin-bottom: 10px; padding: 10px 20px; font-weight: 400; color: #333; word-break: keep-all !important; border: 1px solid #eee; background: rgba(255,255,255,.5); border-radius: 10px;} #sContact .map-info .map-txt dd span {display: inline-block; width: 80px; font-size: 18px; font-weight: 600; color: #222; word-break: keep-all; } #sContact .map-info .map-txt dd p { width: calc(100% - 80px); word-break: keep-all !important; font-weight: 500; font-size: 18px; } #sContact .map-info .map-txt dd a { font-size: 18px; color: #333; transition: all 0.5s ease;} #sContact .map-info .map-txt dd a:hover{color: #222;} #sContact .map-info .map-txt dd.mail{padding-bottom: 10px;} #sContact .map-info .map-txt dd.mail span img{width: 17px;} #sContact .map-info .map-txt dd.traffic{display: block; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.1);} #sContact .map-info .map-txt dd.traffic ul{margin-top: 5px;} #sContact .map-info .map-txt dd.traffic ul li{display: flex; align-items: center; gap: 5px; } #sContact .map-info .map-txt dd.traffic ul li > span{display: inline-block; width: 20px; height: 20px; font-weight: 600; font-size: 14px; text-align: center; line-height: 20px; color: #fff;} #sContact .map-info .map-txt dd.traffic ul li > span.type{background: #222;} #sContact .map-info .map-txt dd.traffic ul li > span.subw{background: #37b42d; border-radius: 50%; font-size: 12px;} #sContact .map-info .map-txt dd.traffic ul li p{margin-left: 3px;} #sContact .map-info .map-link { display: flex; margin-top: 20px; gap: 20px; } #sContact .map-info .map-link>li { width: 50%; } #sContact .map-info .map-link>li a { display: flex; align-items: center; justify-content: center; padding: 0 26px; height: 58px; border: 1px solid #eee; background: #fff; font-size: 18px; font-weight: 500; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 8px; transition: all 0.5s ease; } #sContact .map-info .map-link>li:first-child a {} #sContact .map-info .map-link>li:nth-child(2) a {} #sContact .map-info .map-link>li a:hover { border-color: var(--blue2); } #sContact .map-info .map-link>li .icon { display: inline-block; vertical-align: middle; width: 28px; height: 28px; background: center/contain no-repeat; margin-right: 10px; } #sContact .map-info .map-link>li .icon.icon-n { background-image: url("/images/sub/loca_naver.png"); } #sContact .map-info .map-link>li .icon.icon-k { background-image: url("/images/sub/loca_kakao.png"); } #sContact .map-info .loca_link { margin-top: 40px; } #sContact .map-info .loca_link a { display: flex; align-items: center; justify-content: center; padding: 0 26px; height: 58px; border: 1px solid #ddd; font-size: 18px; font-weight: 500; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background: #042f35; box-sizing: border-box; border-radius: 8px; transition: all 0.5s ease; } #sContact .map-info .loca_link a span { margin-left: 6px; } #sContact .map-info .loca_link a i { transition: all 0.5s ease; } #sContact .map-info .loca_link a:hover i { color: #9cecd8; } @media (max-width: 1240px) { #sContact .map-info {margin-top: 40px;padding-bottom: 32px;flex-direction: column;align-items: center;} #sContact .map-info .left { width: 100%; text-align: center; margin-bottom: 20px; } #sContact .map-info .left br { display: none; } #sContact .map-info .map-tit big{font-size: 34px;} #sContact .map-info .map-tit small { margin-top: 5px; } #sContact .map-info .map-txt dd span{width: 100px;} #sContact .map-info .map-txt dd p{width: calc(100% - 100px);} #sContact .map-info .map-txt dd.traffic ul li{align-items: flex-start;} #sContact .map-info .right { width: 100%; } } @media (max-width: 740px) { #sContact .map-wrap { padding: 0; } #sContact .map-info .left { margin-bottom: 20px; } #sContact .map-info .map-tit big { font-size: 25px; } #sContact .map-info .map-tit small { display: block; font-size: 19px; } #sContact .map-info .map-txt dl { font-size: 16px; line-height: 1.5; } #sContact .map-info .map-txt dt { width: 100px; padding-left: 25px; } #sContact .map-info .map-txt .stat dt { padding-left: 15px; font-size: 20px; } #sContact .map-info .map-txt dt i { font-size: 18px; top: 2px; } #sContact .map-info .map-txt dd { width: 100%; } #sContact .map-info .map-link { margin-top: 10px; gap: 10px; flex-direction: column; align-items: center; } #sContact .map-info .map-txt dd span {width: 90px; font-size: 14px; } #sContact .map-info .map-txt dd p {width: calc(100% - 90px); font-size: 14px; } #sContact .map-info .map-txt dd a { font-size: 14px; } #sContact .map-info .map-txt dd.traffic ul li > span{margin-top: 5px; font-size: 12px;} #sContact .map-info .map-link>li { width: 100%; } #sContact .map-info .map-link>li a{height: 48px; font-size: 16px;} #sContact .map-info .map-link>li .icon{width: 22px; height: 22px;} } @media (max-width: 450px) { #sContact .map-wrap { padding: 0; } #sContact iframe { height: 300px; border-radius: 20px; } #sContact .map-info { margin-top: 20px;} #sContact .map-info .map-txt dd { flex-wrap: wrap; } #sContact .map-info .map-txt dd span { width: 100%; } #sContact .map-info .map-txt dd p { width: 100%; } #sContact .map-info .map-tit big { font-size: 22px; } #sContact .map-info .map-tit big br { display: none; } #sContact .map-info .map-tit small { font-weight: 500; font-size: 16px; } } /* ============================================================ 연구분야(Research) — sub3_1 ============================================================ */ #rschPage{ --navy:#020B21; --navy2:#061E4A; --navy3:#051C46; --blue:#1f5fc4; --cyan:#34A7E2; --sky:#69D5FF; --p1:#16a9dd; --p2:#96ca9c; --r:16px; position:relative; } /* .cg-sec 풀블리드용 가로 스크롤 방지 */ #sub-cont{overflow-x:hidden;} #rschPage.p-sub3_1 .cg-item.on .cg-body{max-height:none;} /* 섹션 타이틀 */ #rschPage .sec-lead{margin:-10px 0 54px; font-size:18px; font-weight:500; color:#444; line-height:1.65; text-align:center;} #rschPage .sec-head{text-align:center; margin-bottom:54px;} #rschPage .sec-head .eng{display:block; margin-bottom:10px; font-size:16px; font-weight:700; letter-spacing:3px; color:var(--cyan); text-transform:uppercase;} #rschPage .sec-head h2{font-size:44px; font-weight:800; color:#0b1c3d;} #rschPage .sec-head h2 em{font-style:normal; background:linear-gradient(90deg,var(--p1),var(--p2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} #rschPage .sec-head p{margin-top:18px; font-size:18px; font-weight:500; color:#444; line-height:1.65;} /* 연구분야 : 탭 */ #rschPage .rt-sec{position:relative;} #rschPage .rt-wrap{--rt-pad:18px; border:1px solid #e4ecf7; border-radius:24px; background:#f6f7f8; box-shadow:0 20px 50px rgba(6,25,60,.08);} /* 탭 바 */ #rschPage .rt-tabs{position:relative; display:grid; grid-template-columns:repeat(4,1fr); padding:var(--rt-pad); border-bottom:1px solid #eaf1f8;} #rschPage .rt-tab{position:relative; z-index:1; display:flex; align-items:center; gap:16px; width:100%; padding:18px 20px; border:0; border-radius:16px; background:none; text-align:left; cursor:pointer;} #rschPage .rt-tab + .rt-tab:before{content:""; position:absolute; left:0; top:50%; width:1px; height:46px; margin-top:-23px; background:#e6edf6; transition:opacity .3s;} /* 탭 아이콘 — 컬러 변경 */ #rschPage .rt-tab .ic{ flex:0 0 auto; display:inline-block; width: 35px; height: 35px; line-height:1; background-color:#1b4ca0; transition:background-color .3s; -webkit-mask:var(--ic) no-repeat center / contain; mask:var(--ic) no-repeat center / contain; } #rschPage .rt-tab:nth-child(1) .ic{--ic:url('../images/sub/rsch-icon01.svg');} #rschPage .rt-tab:nth-child(2) .ic{--ic:url('../images/sub/rsch-icon02.svg');} #rschPage .rt-tab:nth-child(3) .ic{--ic:url('../images/sub/rsch-icon03.svg');} #rschPage .rt-tab:nth-child(4) .ic{--ic:url('../images/sub/rsch-icon04.svg');} #rschPage .rt-tab .ic img{display:none;} #rschPage .rt-tab:hover .ic{background-color:#2f7fd4;} #rschPage .rt-tab.on .ic{background-color:#fff;} #rschPage .rt-vis .ico img{width: 40px;/* height: 40px; */object-fit:contain;} #rschPage .rt-tab .tx{min-width:0;} #rschPage .rt-tab .no{display:block; font-size:16px; font-weight:700; letter-spacing:.12em; color:#a7b5c9; transition:color .3s;} #rschPage .rt-tab .tt{display:block; margin-top:5px; font-size:21px; font-weight:700; line-height:1.3; color:#33415a; word-break:keep-all; transition:color .3s;} #rschPage .rt-tab:hover .ic, #rschPage .rt-tab:hover .tt{color:#2f7fd4;} #rschPage .rt-tab.on .ic{color:#fff;} #rschPage .rt-tab.on .no{color:rgba(255,255,255,.75);} #rschPage .rt-tab.on .tt{color:#fff;} #rschPage .rt-tab.on:before, #rschPage .rt-tab.on + .rt-tab:before{opacity:0;} #rschPage .rt-ink{position:absolute; left:var(--rt-pad); top:var(--rt-pad); z-index:0; width:calc((100% - var(--rt-pad) * 2) / 4); height:calc(100% - var(--rt-pad) * 2); border-radius:16px; background:linear-gradient(135deg,#1b4ca0 0%,#2358c4 55%,#2f7fd4 100%); box-shadow:0 12px 26px rgba(27,76,160,.28); transform:translateX(calc(var(--i,0) * 100%)); transition:transform .45s cubic-bezier(.2,.8,.25,1);} /* 패널 */ #rschPage .rt-panels{padding:var(--rt-pad);} #rschPage .rt-panel{display:none;} #rschPage .rt-panel.on{display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:0; animation:rtIn .5s cubic-bezier(.2,.8,.25,1) both;} @keyframes rtIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} } /* 좌측 비주얼 */ #rschPage .rt-vis{position:relative; min-height:440px; overflow:hidden; border-radius:18px 0 0 18px; background:var(--navy2);} #rschPage .rt-vis .bg{position:absolute; left:0; top:0; width:100%; height:100%; background-position:50% 50%; background-size:cover; background-repeat:no-repeat; transform:scale(1.04);} #rschPage .rt-vis:after{content:""; position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; background:linear-gradient(165deg,rgba(2,11,33,.72) 0%,rgba(6,30,74,.80) 50%,rgba(2,11,33,.92) 100%);} #rschPage .rt-vis .in{position:relative; z-index:2; display:flex; flex-direction:column; height:100%; padding:35px 30px 85px 30px;} #rschPage .rt-vis .ico{display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:auto; border-radius:12px; font-size:28px; color:#fff; background:linear-gradient(135deg,var(--p1),var(--p2));} #rschPage .rt-vis h3{margin-top:30px; font-size:32px; font-weight:700; color:#fff; line-height:1.25; word-break:keep-all;} #rschPage .rt-vis p{margin-top:15px; font-size:17px; font-weight:400; color:rgba(255,255,255,.7); line-height:1.65; word-break:keep-all;} /* 우측 내용 */ #rschPage .rt-body{padding:26px 24px 26px 44px; border-radius:0 16px 16px 0; background:#fff;} #rschPage .rt-box + .rt-box{margin-top:26px; padding-top:26px; border-top:1px dashed #dfe8f4;} #rschPage .rt-box h4{margin-bottom:14px; font-size:22px; font-weight:700; color:#1b4ca0; text-transform:uppercase;} #rschPage .rt-box p{font-size:17px; font-weight:500; color:#3f4d68; line-height:1.7; word-break:keep-all;} #rschPage .rt-box ul li{position:relative; padding-left:16px; font-size:17px; font-weight:500; color:#3f4d68; line-height:1.65; word-break:keep-all;} #rschPage .rt-box ul li + li{margin-top:9px;} #rschPage .rt-box ul li:before{content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#2f7fd4,var(--p1));} #rschPage .rt-tags{display:flex; flex-wrap:wrap; gap:8px;} #rschPage .rt-tags span{display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border:1px solid rgba(47,127,212,.24); border-radius:999px; font-size:16px; font-weight:500; color:#12295f; background:rgba(47,127,212,.06); white-space:nowrap; transition:background .2s,border-color .2s,color .2s;} #rschPage .rt-tags span i{font-size:16px; color:#2f7fd4; transition:color .2s;} #rschPage .rt-tags span a{display:inline-flex; align-items:center; gap:7px;} #rschPage .rt-tags span:has(a:hover){background:var(--blue); border-color:var(--blue); color:#fff;} #rschPage .rt-tags span:has(a:hover) i{color:rgba(255,255,255,.9);} #rschPage .rt-tags span a, #rschPage .rt-tags span a:hover, #rschPage .cg-tags span a{color:inherit; text-decoration:none;} #rschPage .cg-tags span a:hover{text-decoration:underline;} #rschPage .cg-colead .p b a, #rschPage .cg-face b a{color:inherit; text-decoration:none;} #rschPage .cg-colead .p b a:hover, #rschPage .cg-face b a:hover{text-decoration:underline;} /* 핵심연구그룹 */ #rschPage .cg-sec{position:relative; overflow:hidden; margin:0 calc(50% - 50vw); padding:110px calc(50vw - 50%) 120px; background:linear-gradient(180deg,#fbfdff 0%,#eff5fc 100%);} #rschPage .cg-sec:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/images/sub/cg_bg.jpg') no-repeat 50% 50%; background-size:cover; opacity:.045; mix-blend-mode:multiply;} #rschPage .cg-sec > *{position:relative; z-index:2;} #rschPage .cg-bar{display:flex; align-items:center; justify-content:center; height:64px; margin-bottom:30px; border-radius:var(--r); background:linear-gradient(90deg,#154a9e,#2f7fd4 50%,#154a9e); font-size:26px; font-weight:700; color:#fff; letter-spacing:2px;} #rschPage .cg-list{display:flex; flex-direction:column; gap:20px;} #rschPage .cg-item{position:relative; overflow:hidden; border:1px solid #dde8f6; border-radius:var(--r); background:#fff; box-shadow:0 10px 26px rgba(18,41,95,.08); transition:transform .4s, border-color .4s, box-shadow .4s;} #rschPage .cg-item:not(.on):hover{transform:translateY(-5px); border-color:#2f7fd4; box-shadow:0 18px 38px rgba(18,41,95,.16);} #rschPage .cg-item.on{border-color:#2f7fd4; box-shadow:0 18px 38px rgba(18,41,95,.16);} #rschPage .cg-item.on .cg-head{box-shadow:inset 0 -1px 0 #dde8f6;} #rschPage .cg-item .cg-head{position:relative; display:flex; align-items:stretch; flex-wrap:wrap; background:linear-gradient(90deg,#eaf2fb 0%,#f5f9fd 60%,#fff 100%); cursor:pointer; user-select:none; border-radius:var(--r); padding:10px;} #rschPage .cg-item .cg-no{display:flex; flex:0 0 110px; align-items:center; justify-content:center; background:linear-gradient(135deg,#1b4ca0,#2f7fd4); font-size:22px; font-weight:700; color:#fff; letter-spacing:.5px; border-radius:var(--r);} #rschPage .cg-item .cg-htxt{display:flex; align-items:center; gap:18px; flex:1 1 auto; min-width:0; padding:18px 26px;} #rschPage .cg-item .cg-ico{display:flex; flex:0 0 54px; align-items:center; justify-content:center; width:54px; height:54px; border-radius:var(--r); background:rgba(47,127,212,.12); font-size:27px; color:#1b4ca0;} #rschPage .cg-item .cg-tit{font-size:28px; font-weight:700; color:#0b2a5e; white-space:nowrap;} /* 펼침 토글 */ #rschPage .cg-tog{position:relative; flex:0 0 38px; align-self:center; width:38px; height:38px; margin:0 26px 0 18px; padding:0; border:1px solid #2f7fd4; border-radius:50%; background:#fff; cursor:pointer; transition:background .3s, border-color .3s;} #rschPage .cg-head:hover .cg-tog{background:#2f7fd4;} #rschPage .cg-tog:before, #rschPage .cg-tog:after{content:""; position:absolute; left:50%; top:50%; background:#1b4ca0; transition:transform .35s, background .3s;} #rschPage .cg-tog:before{width:14px; height:2px; margin:-1px 0 0 -7px;} #rschPage .cg-tog:after{width:2px; height:14px; margin:-7px 0 0 -1px;} #rschPage .cg-head:hover .cg-tog:before, #rschPage .cg-head:hover .cg-tog:after{background:#fff;} #rschPage .cg-item.on .cg-tog:after{transform:scaleY(0);} /* 공동연구책임 : 참여 교수 박스 상단 */ #rschPage .cg-colead{margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed #dae6f4;} #rschPage .cg-colead .p{display:flex; align-items:center; padding:11px 18px; border:1px solid #d9e6f4; border-radius:var(--r); background:#fff;} #rschPage .cg-colead .p .tx{display:block; min-width:0;} #rschPage .cg-colead .p b{display:block; font-size:20px; font-weight:700; color:#12295f;} #rschPage .cg-colead .p em{display:block; margin-top:5px; font-style:normal; font-size:17px; font-weight:500; color:#2f7fd4;} #rschPage .cg-item .cg-body{display:flex; flex-direction:column; max-height:0; overflow:hidden; transition:max-height .55s cubic-bezier(.2,.8,.25,1);} #rschPage .cg-item .cg-main{display:flex; flex-direction:row; flex-wrap:wrap; gap:14px; width:100%; padding:24px 26px 26px;} #rschPage .cg-item .cg-main > .cg-box:first-child{flex:1 1 480px; min-width:0;} #rschPage .cg-item .cg-main > .cg-box:last-child{flex:0 1 330px; min-width:0;} #rschPage .cg-item .cg-box{padding:24px; border:1px solid #e4edf8; border-radius:var(--r); background:#f6f9fd;} #rschPage .cg-item .cg-box h4{display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:20px; font-weight:700; color:#1b4ca0;} #rschPage .cg-item .cg-box h4 i{font-size:20px; color:#2f7fd4;} #rschPage .cg-item .cg-career{display:flex; align-items:flex-start; gap:30px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed #dae6f4;} #rschPage .cg-item .cg-career .cg-face{flex:0 0 120px; width:120px; text-align:center;} #rschPage .cg-item .cg-career .cg-face .ph{display:block; width:120px; height:120px; overflow:hidden; border-radius:50%; background:#e9f1fa; box-shadow:5px 5px 10px #ced5de91;} #rschPage .cg-item .cg-career .cg-face .ph img{width:100%; height:100%; object-fit:cover; object-position:50% 12%;} #rschPage .cg-item .cg-career .cg-face b{display:block; margin-top:10px; font-size:20px; font-weight:700; color:#12295f; white-space:nowrap;} #rschPage .cg-item .cg-career .cg-face .role{display:block; margin-top:4px; font-style:normal; font-size:17px; font-weight:600; color:#2f7fd4; white-space:nowrap;} #rschPage .cg-item .cg-career .cg-desc{flex:1 1 0; min-width:0; padding-top:4px;} #rschPage .cg-item .cg-desc{columns:1;} #rschPage .cg-item:first-child .cg-career + .cg-desc{columns:2; column-gap:34px;} #rschPage .cg-item .cg-desc li{position:relative; padding-left:15px; margin-bottom:8px; font-size:17px; font-weight:500; color:#3f4d68; line-height:1.55; break-inside:avoid; word-break:keep-all;} #rschPage .cg-item .cg-desc li:before{content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#2f7fd4,var(--p1));} #rschPage .cg-item .cg-partner{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:14px; padding-top:13px; border-top:1px dashed #dae6f4;} #rschPage .cg-item .cg-partner span{font-size:16px; font-weight:600; color:#7b8ba6; letter-spacing:.5px;} #rschPage .cg-item .cg-tags{display:flex; flex-wrap:wrap; gap:7px;} #rschPage .cg-item .cg-tags span{display:inline-block; padding:7px 15px; border:1px solid rgba(47,127,212,.24); border-radius:12px; font-size:16px; font-weight:500; color:#12295f; background:rgba(47,127,212,.08); white-space:nowrap;} @media (max-width:1240px){ #rschPage .sec-head h2{font-size:38px;} #rschPage .rt-tab{gap:12px; padding:16px 14px;} #rschPage .rt-tab .ic{width:30px; height:30px;} #rschPage .rt-tab .tt{font-size:19px;} #rschPage .rt-panel.on{grid-template-columns:minmax(0,330px) minmax(0,1fr);} #rschPage .rt-vis .in{padding:36px 30px;} #rschPage .rt-vis h3{font-size:28px;} #rschPage .rt-body{padding:22px 18px 22px 34px;} #rschPage .cg-item:first-child .cg-career + .cg-desc{columns:1;} #rschPage .cg-item .cg-main{flex-direction:column;} #rschPage .cg-item .cg-main > .cg-box:first-child, #rschPage .cg-item .cg-main > .cg-box:last-child{flex:1 1 100%;} } @media (max-width:1024px){ #rschPage .rt-sec{padding-bottom:80px;} #rschPage .cg-sec{padding-top:80px; padding-bottom:90px;} #rschPage .rt-panels{background: #fff;} #rschPage .rt-panel.on{grid-template-columns:minmax(0,1fr);} #rschPage .rt-body{padding:26px 6px 6px;} #rschPage .rt-vis{min-height:0; border-radius: 15px;} #rschPage .rt-vis .in{padding:34px 30px;} #rschPage .rt-vis .ico{margin-bottom:24px;} #rschPage .rt-vis h3{margin-top:0;} } @media (max-width:767px){ #rschPage .sec-lead{margin-bottom:34px; font-size:16px;} #rschPage .sec-head{margin-bottom:34px;} #rschPage .sec-head h2{font-size:28px;} #rschPage .sec-head p{font-size:16px;} #rschPage .rt-wrap{--rt-pad:10px; border-radius:18px;} #rschPage .rt-tabs{grid-template-columns:repeat(2,1fr); gap:8px;} #rschPage .rt-tab{gap:11px; padding:14px 12px; border:1px solid #e2ebf6;} #rschPage .rt-tab + .rt-tab:before{display:none;} #rschPage .rt-tab .ic{width:26px; height:26px;} #rschPage .rt-tab .no{font-size:16px;} #rschPage .rt-tab .tt{margin-top:4px; font-size:17px;} #rschPage .rt-tab.on{border-color:transparent; background:linear-gradient(135deg,#1b4ca0,#2f7fd4);} #rschPage .rt-tab.on .no{color:rgba(255,255,255,.75);} #rschPage .rt-tab.on .tt{color:#fff;} #rschPage .rt-ink{display:none;} #rschPage .rt-vis .in{padding:28px 22px;} #rschPage .rt-vis h3{font-size:24px;} #rschPage .rt-vis p{font-size:16px;} #rschPage .rt-body{padding:24px 4px 4px;} #rschPage .rt-box p, #rschPage .rt-box ul li{font-size:16px;} #rschPage .rt-tags span{font-size:16px; padding:6px 13px;} #rschPage .cg-sec{padding-top:60px; padding-bottom:60px;} #rschPage .cg-bar{height:54px; font-size:20px; letter-spacing:1px;} #rschPage .cg-item .cg-no{flex:1 1 100%; justify-content:flex-start; padding:10px 20px; font-size:18px;} #rschPage .cg-item .cg-htxt{flex:1 1 100%; gap:14px; padding:18px 20px 6px;} /* 모바일 : 토글을 상단 그룹번호 바 우측으로 */ #rschPage .cg-tog{right:14px; top:8px; flex:0 0 30px; width:30px; height:30px; border-color:rgba(255,255,255,.65); background:none;} #rschPage .cg-tog:before, #rschPage .cg-tog:after{background:#fff;} #rschPage .cg-head:hover .cg-tog{background:rgba(255,255,255,.18);} #rschPage .cg-tog:before{width:12px; margin-left:-6px;} #rschPage .cg-tog:after{height:12px; margin-top:-6px;} #rschPage .cg-item .cg-ico{flex:0 0 46px; width:46px; height:46px; font-size:23px;} #rschPage .cg-item .cg-tit{font-size:23px; white-space:normal;} #rschPage .cg-colead .p{padding:11px 14px;} #rschPage .cg-colead .p b{font-size:17px;} #rschPage .cg-colead .p em{font-size:16px;} #rschPage .cg-item .cg-main{padding:20px;} #rschPage .cg-item .cg-box{padding:18px 16px;} #rschPage .cg-item .cg-career{gap:16px; margin-bottom:14px; padding-bottom:14px;} #rschPage .cg-item .cg-career .cg-face{flex:0 0 86px; width:86px;} #rschPage .cg-item .cg-career .cg-face .ph{width:86px; height:86px;} #rschPage .cg-item .cg-career .cg-face b{font-size:16px;} #rschPage .cg-item .cg-desc li{font-size:16px;} #rschPage .cg-item .cg-tags span{font-size:16px; padding:6px 13px;} } @media (max-width:500px){ #rschPage .rt-tab{flex-direction: row-reverse; justify-content: space-between; border-radius: 8px;} #rschPage .rt-tab .no{font-size: 12px;} #rschPage .rt-tab .tt{font-size: 15px;} #rschPage .rt-tab .ic{width:20px; height:20px;} } /* ============================================================ 입학(Admission) — sub4_1 ============================================================ */ #axAdms{ --ad-navy:#020B21; --ad-navy2:#061E4A; --ad-ink:#0b1c3d; --ad-blue:#1b4ca0; --ad-blue2:#2358c4; --ad-blue3:#2f7fd4; --ad-cyan:#34A7E2; --ad-txt:#3f4d68; --ad-muted:#6a7891; --ad-line:#e4ecf7; --ad-soft:#f6f9fd; --ad-r:18px; position:relative; margin-top:6px; word-break:keep-all; } #axAdms .ad-sec{position:relative; padding:100px 0;} #axAdms .ad-sec-intro{padding-top:0;} #axAdms .ad-sec-sch{padding-bottom:20px;} /* ── 공통 섹션 헤더 ─────────────────────────── */ #axAdms .sec-head{margin-bottom:50px; text-align:center;} #axAdms .sec-head .eng{display:block; margin-bottom:10px; font-size:16px; font-weight:700; letter-spacing:3px; color:var(--ad-cyan); text-transform:uppercase;} #axAdms .sec-head h2{font-size:44px; font-weight:800; line-height:1.25; color:var(--ad-ink); letter-spacing:-.5px;} #axAdms .sec-head p{margin-top:18px; font-size:18px; font-weight:500; line-height:1.65; color:#444;} /* ── 입학 개요 : 히어로 ───────────────────────── */ /* PC 배경 이미지 : images/sub/ad-hero_BG.jpg */ #axAdms .ad-hero{position:relative; overflow:hidden; padding:70px 60px 62px; border-radius:24px; background:url('../images/sub/ad-hero_BG.jpg') no-repeat 50% 50% /cover; text-align:center;} /* 배경 이미지가 밝아 흰 글자가 묻히면 아래 한 줄의 주석을 해제 (어두운 막) */ /* #axAdms .ad-hero{box-shadow:inset 0 0 0 9999px rgba(2,11,33,.45);} */ #axAdms .ad-hero:before{content:""; position:absolute; right:-140px; top:-160px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle,rgba(52,167,226,.34) 0%,rgba(52,167,226,0) 70%);} #axAdms .ad-hero:after{content:""; position:absolute; left:-120px; bottom:-180px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(35,88,196,.30) 0%,rgba(35,88,196,0) 70%);} #axAdms .ad-hero > *{position:relative; z-index:2;} #axAdms .ad-hero .badge{display:inline-block; margin-bottom:22px; padding:9px 22px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.08); font-size:15px; font-weight:700; letter-spacing:3px; color:var(--ad-cyan);} #axAdms .ad-hero h2{font-size:42px; font-weight:800; line-height:1.3; color:#fff; letter-spacing:-.5px;} #axAdms .ad-hero p{margin-top:22px; font-size:20px; font-weight:400; line-height:1.75; color:rgba(255,255,255,.78);} #axAdms .ad-hero p b{font-weight:700; color:#fff;} #axAdms .ad-terms{display:flex; justify-content:center; gap:16px; margin-top:36px;} #axAdms .ad-terms .t{display:flex; align-items:center; gap:14px; min-width:280px; padding:18px 28px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(255,255,255,.06);} #axAdms .ad-terms .t .lb{flex:0 0 auto; padding:6px 16px; border-radius:999px; background:linear-gradient(135deg,var(--ad-blue) 0%,var(--ad-blue3) 100%); font-size:17px; font-weight:700; color:#fff;} #axAdms .ad-terms .t b{font-size:20px; font-weight:600; color:#fff;} #axAdms .ad-golink{display:inline-flex; align-items:center; gap:12px; margin-top:34px; padding:16px 30px; border:1px solid rgba(255,255,255,.26); border-radius:999px; background:rgba(255,255,255,.05); font-size:18px; font-weight:500; color:rgba(255,255,255,.82); text-decoration:none; transition:background .3s, border-color .3s, color .3s;} #axAdms .ad-golink .tx em{font-style:normal; font-weight:700; color:#fff; text-decoration:underline; text-underline-offset:4px;} #axAdms .ad-golink i{font-size:20px; color:var(--ad-cyan); transition:transform .3s, color .3s;} #axAdms .ad-golink:hover{border-color:var(--ad-cyan); background:rgba(52,167,226,.16); color:#fff;} #axAdms .ad-golink:hover .ar{transform:translate(3px,-3px);} /* ── 모집전형 ───────────────────────────────── */ #axAdms .ad-tg{display:grid; grid-template-columns:1fr 1fr 2fr; gap:20px; align-items:stretch;} #axAdms .tg-group{display:flex; flex-direction:column;} #axAdms .tg-gtit{display:flex; align-items:center; justify-content:center; height:64px; margin-bottom:14px; padding:0 18px; border-radius:14px; background:linear-gradient(135deg,var(--ad-blue) 0%,var(--ad-blue2) 55%,var(--ad-blue3) 100%); box-shadow:0 12px 26px rgba(27,76,160,.24); font-size:24px; font-weight:700; color:#fff; text-align:center; letter-spacing:-.3px;} #axAdms .tg-cols{display:grid; grid-template-columns:1fr; gap:14px; flex:1 1 auto;} #axAdms .tg-cols.is-2{grid-template-columns:1fr 1fr;} #axAdms .tg-card{display:flex; flex-direction:column; padding:26px 24px 24px; border:1px solid var(--ad-line); border-radius:var(--ad-r); background:#fff; box-shadow:0 12px 30px rgba(18,41,95,.06);} #axAdms .tg-card .tg-track{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-bottom:18px; border-bottom:1px dashed #dfe8f4;} #axAdms .tg-card .tg-track i{font-size:22px; color:var(--ad-blue3);} #axAdms .tg-card .tg-track b{font-size:22px; font-weight:700; color:var(--ad-ink);} #axAdms .tg-card .tg-track small{display:block; width:100%; padding-left:30px; font-size:16px; font-weight:500; color:var(--ad-muted);} #axAdms .tg-card .tg-info{flex:1 1 auto; padding-top:18px;} #axAdms .tg-card .tg-info .lb{display:inline-block; margin-bottom:10px; padding:5px 13px; border-radius:8px; background:rgba(47,127,212,.10); font-size:15px; font-weight:600; color:var(--ad-blue);} #axAdms .tg-card .tg-info p{font-size:18px; font-weight:500; line-height:1.6; color:var(--ad-txt);} #axAdms .tg-card.is-falcon{border-color:rgba(52,167,226,.45); background:linear-gradient(160deg,#f4fbff 0%,#eef6ff 100%);} #axAdms .tg-card.is-falcon .tg-track i{color:var(--ad-cyan);} #axAdms .tg-card.is-falcon .tg-track b{color:var(--ad-blue);} #axAdms .tg-card.is-falcon .tg-info .lb{background:rgba(52,167,226,.16); color:#0f6ea6;} #axAdms .ad-note{display:flex; align-items:flex-start; gap:8px; margin-top:24px; padding:18px 24px; border:1px solid var(--ad-line); border-radius:12px; background:var(--ad-soft); font-size:17px; font-weight:500; line-height:1.6; color:var(--ad-txt);} #axAdms .ad-note .mk{flex:0 0 auto; color:var(--ad-blue3); font-weight:700;} /* ── 팰컨트랙 ───────────────────────────────── */ /* 배경 풀블리드 : 좌우 여백은 .sCont 폭 유지 */ #axAdms .ad-sec-falcon:before{content:""; position:absolute; left:calc(50% - 50vw); top:0; z-index:0; width:100vw; height:100%; background:linear-gradient(180deg,#fbfdff 0%,#eff5fc 100%);} #axAdms .ad-sec-falcon > *{position:relative; z-index:1;} #axAdms .ad-fl{display:flex; flex-direction:column; gap:16px;} #axAdms .fl-row{display:grid; grid-template-columns:280px minmax(0,1fr); gap:0; overflow:hidden; border:1px solid #dde8f6; border-radius:var(--ad-r); background:#fff; box-shadow:0 10px 26px rgba(18,41,95,.07);} #axAdms .fl-th{display:flex; align-items:center; gap:16px; padding:30px 28px; background:linear-gradient(135deg,var(--ad-blue) 0%,var(--ad-blue3) 100%);} #axAdms .fl-th .ic{display:flex; align-items:center; justify-content:center; flex:0 0 48px; width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.16);} #axAdms .fl-th .ic i{font-size:24px; color:#fff;} #axAdms .fl-th b{font-size:23px; font-weight:700; color:#fff; letter-spacing:-.3px;} #axAdms .fl-td{padding:30px 34px;} #axAdms .fl-td ul li{position:relative; padding-left:17px; font-size:18px; font-weight:500; line-height:1.7; color:var(--ad-txt);} #axAdms .fl-td ul li + li{margin-top:10px;} #axAdms .fl-td ul li:before{content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,var(--ad-blue3),var(--ad-cyan));} /* ── 입시일정 ───────────────────────────────── */ #axAdms .ad-schbar{display:flex; align-items:center; gap:22px; margin-bottom:36px; padding:0 34px; height:74px; border-radius:var(--ad-r); background:linear-gradient(90deg,#154a9e 0%,var(--ad-blue3) 50%,#154a9e 100%); box-shadow:0 14px 30px rgba(27,76,160,.22);} #axAdms .ad-schbar .lb{flex:0 0 auto; padding:7px 18px; border-radius:999px; background:rgba(255,255,255,.18); font-size:16px; font-weight:600; color:#fff; letter-spacing:1px;} #axAdms .ad-schbar b{font-size:26px; font-weight:700; color:#fff; letter-spacing:.5px;} #axAdms .ad-tl{position:relative; padding-left:34px; list-style:none;} #axAdms .ad-tl:before{content:""; position:absolute; left:23px; top:14px; bottom:14px; width:2px; background:linear-gradient(180deg,var(--ad-blue3) 0%,rgba(47,127,212,.18) 100%);} #axAdms .tl-item{position:relative;} #axAdms .tl-item + .tl-item{margin-top:16px;} #axAdms .tl-item .no{position:absolute; left:-34px; top:26px; z-index:2; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:4px solid #fff; border-radius:50%; background:linear-gradient(135deg,var(--ad-blue) 0%,var(--ad-blue3) 100%); box-shadow:0 8px 18px rgba(27,76,160,.26); font-size:16px; font-weight:700; color:#fff; letter-spacing:.5px;} #axAdms .tl-in{display:grid; grid-template-columns:380px minmax(0,1fr); gap:0; margin-left:34px; overflow:hidden; border:1px solid var(--ad-line); border-radius:var(--ad-r); background:#fff; box-shadow:0 10px 26px rgba(18,41,95,.07);} #axAdms .tl-l{padding:28px 30px; background:linear-gradient(135deg,#f3f8fe 0%,#eaf2fb 100%); border-right:1px solid var(--ad-line);} #axAdms .tl-l .tit{display:block; font-size:22px; font-weight:700; line-height:1.4; color:var(--ad-ink); letter-spacing:-.3px;} #axAdms .tl-l .date{display:block; margin-top:10px; font-size:18px; font-weight:600; line-height:1.5; color:var(--ad-blue2);} #axAdms .tl-r{display: flex; align-items: flex-start; flex-direction: column; justify-content: center;padding:28px 32px;} #axAdms .tl-r ul li{position:relative; padding-left:17px; font-size:18px; font-weight:500; line-height:1.7; color:var(--ad-txt);} #axAdms .tl-r ul li + li{margin-top:8px;} #axAdms .tl-r ul li:before{content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,var(--ad-blue3),var(--ad-cyan));} #axAdms .tl-r ul li a{color:var(--ad-blue2); font-weight:600; text-decoration:underline; text-underline-offset:3px;} #axAdms .tl-r ul li a:hover{color:var(--ad-cyan);} #axAdms .tl-r .ntc{margin-top:10px; font-size:16px; font-weight:500; line-height:1.6; color:var(--ad-muted);} #axAdms .tl-r ul + .ntc{margin-top:12px;} #axAdms .tl-in.is-solo{grid-template-columns:1fr;} #axAdms .tl-in.is-solo .tl-l{border-right:0;} /* ═══════════════ 반응형 ═══════════════ */ @media (max-width:1600px){ #axAdms .ad-sec{padding:90px 0;} #axAdms .sec-head{margin-bottom:46px;} #axAdms .sec-head h2{font-size:40px;} #axAdms .sec-head p{font-size:17px;} #axAdms .ad-hero{padding:64px 52px 56px;} #axAdms .ad-hero h2{font-size:38px;} #axAdms .ad-hero p{font-size:19px;} #axAdms .tg-gtit{height:60px; font-size:22px;} #axAdms .tg-card .tg-track b{font-size:21px;} #axAdms .tg-card .tg-info p{font-size:17px;} #axAdms .fl-row{grid-template-columns:260px minmax(0,1fr);} #axAdms .fl-th b{font-size:22px;} #axAdms .fl-td ul li{font-size:17px;} #axAdms .ad-schbar b{font-size:24px;} #axAdms .tl-in{grid-template-columns:350px minmax(0,1fr);} #axAdms .tl-l .tit{font-size:21px;} #axAdms .tl-l .date{font-size:17px;} #axAdms .tl-r ul li{font-size:17px;} } @media (max-width:1400px){ #axAdms .ad-sec{padding:80px 0;} #axAdms .sec-head h2{font-size:38px;} #axAdms .ad-hero{padding:58px 44px 52px; border-radius:22px;} #axAdms .ad-hero h2{font-size:34px;} #axAdms .ad-hero p{margin-top:20px; font-size:18px;} #axAdms .ad-terms .t{min-width:250px; padding:16px 24px;} #axAdms .ad-terms .t b{font-size:19px;} #axAdms .ad-golink{margin-top:30px; padding:15px 26px; font-size:17px;} #axAdms .ad-tg{gap:16px;} #axAdms .tg-card{padding:24px 22px 22px;} #axAdms .tg-card .tg-track b{font-size:20px;} #axAdms .tg-card .tg-track small{font-size:15px;} #axAdms .ad-note{font-size:16px;} #axAdms .fl-row{grid-template-columns:240px minmax(0,1fr);} #axAdms .fl-th{padding:26px 24px; gap:14px;} #axAdms .fl-th b{font-size:21px;} #axAdms .fl-td{padding:26px 28px;} #axAdms .ad-schbar{height:70px; padding:0 28px; margin-bottom:32px;} #axAdms .ad-schbar b{font-size:23px;} #axAdms .tl-in{grid-template-columns:320px minmax(0,1fr);} #axAdms .tl-l{padding:26px;} #axAdms .tl-l .tit{font-size:20px;} #axAdms .tl-r{padding:26px 28px;} } @media (max-width:1200px){ #axAdms .ad-sec{padding:70px 0;} #axAdms .sec-head{margin-bottom:40px;} #axAdms .sec-head .eng{font-size:15px; letter-spacing:2.5px;} #axAdms .sec-head h2{font-size:34px;} #axAdms .sec-head p{margin-top:14px; font-size:17px;} #axAdms .ad-hero{padding:52px 38px 46px;} #axAdms .ad-hero .badge{margin-bottom:18px; padding:8px 20px; font-size:14px;} #axAdms .ad-hero h2{font-size:31px;} #axAdms .ad-hero p{font-size:18px;} #axAdms .ad-hero p br{display:none;} #axAdms .ad-terms{margin-top:30px; gap:14px;} #axAdms .ad-terms .t{flex:1 1 0; min-width:0; padding:15px 20px; gap:12px;} #axAdms .ad-terms .t .lb{padding:5px 14px; font-size:16px;} #axAdms .ad-terms .t b{font-size:18px;} #axAdms .ad-golink{margin-top:28px;} /* 모집전형 : 2단 (석사 · 박사 / 통합과정) */ #axAdms .ad-tg{grid-template-columns:1fr 1fr;} #axAdms .tg-group.is-wide{grid-column:1 / -1;} #axAdms .tg-gtit{height:56px; font-size:21px;} #axAdms .tg-card .tg-info .lb{font-size:14px;} #axAdms .tg-card .tg-info p{font-size:17px;} #axAdms .fl-row{grid-template-columns:220px minmax(0,1fr);} #axAdms .fl-th{padding:24px 20px;} #axAdms .fl-th .ic{flex:0 0 42px; width:42px; height:42px;} #axAdms .fl-th .ic i{font-size:21px;} #axAdms .fl-th b{font-size:20px;} #axAdms .fl-td{padding:24px;} #axAdms .fl-td ul li{font-size:17px;} #axAdms .ad-schbar{height:64px; padding:0 24px; gap:16px;} #axAdms .ad-schbar .lb{padding:6px 15px; font-size:15px;} #axAdms .ad-schbar b{font-size:21px;} #axAdms .tl-in{grid-template-columns:290px minmax(0,1fr);} #axAdms .tl-l .tit{font-size:19px;} #axAdms .tl-l .date{font-size:16px;} #axAdms .tl-r ul li{font-size:17px;} #axAdms .tl-r .ntc{font-size:15px;} } @media (max-width:1024px){ #axAdms .ad-sec{padding:60px 0;} #axAdms .sec-head{margin-bottom:34px;} #axAdms .sec-head h2{font-size:30px;} #axAdms .sec-head p{font-size:16px;} #axAdms .ad-hero{padding:46px 32px 42px; border-radius:20px;} #axAdms .ad-hero h2{font-size:28px;} #axAdms .ad-hero p{margin-top:18px; font-size:17px;} #axAdms .ad-terms{margin-top:26px; gap:12px;} #axAdms .ad-terms .t{flex-direction:column; align-items:flex-start; gap:9px; padding:16px 18px;} #axAdms .ad-terms .t b{font-size:17px;} #axAdms .ad-golink{margin-top:24px; padding:14px 22px; font-size:16px; gap:10px;} #axAdms .ad-golink i{font-size:18px;} #axAdms .ad-tg{gap:14px;} #axAdms .tg-gtit{height:52px; margin-bottom:12px; font-size:20px;} #axAdms .tg-card{padding:22px 20px 20px;} #axAdms .tg-card .tg-track{padding-bottom:15px; gap:7px;} #axAdms .tg-card .tg-track i{font-size:20px;} #axAdms .tg-card .tg-track b{font-size:19px;} #axAdms .tg-card .tg-track small{padding-left:27px; font-size:15px;} #axAdms .tg-card .tg-info{padding-top:15px;} #axAdms .tg-card .tg-info p{font-size:16px;} #axAdms .ad-note{margin-top:20px; padding:16px 20px; font-size:16px;} /* 팰컨트랙 : 세로 배치 */ #axAdms .fl-row{grid-template-columns:1fr;} #axAdms .fl-th{padding:18px 22px;} #axAdms .fl-th .ic{flex:0 0 38px; width:38px; height:38px; border-radius:10px;} #axAdms .fl-th .ic i{font-size:19px;} #axAdms .fl-th b{font-size:19px;} #axAdms .fl-td{padding:22px;} #axAdms .fl-td ul li{font-size:16px;} /* 입시일정 : 세로 배치 */ #axAdms .ad-schbar{height:auto; padding:16px 22px; margin-bottom:28px; gap:14px; flex-wrap:wrap;} #axAdms .ad-schbar b{font-size:20px;} #axAdms .ad-tl{padding-left:28px;} #axAdms .ad-tl:before{left:19px;} #axAdms .tl-item .no{left:-28px; top:20px; width:40px; height:40px; border-width:3px; font-size:15px;} #axAdms .tl-in{grid-template-columns:1fr; margin-left:30px;} #axAdms .tl-l{padding:20px 22px; border-right:0; border-bottom:1px solid var(--ad-line);} #axAdms .tl-l .tit{font-size:19px;} #axAdms .tl-l .tit br{display:none;} #axAdms .tl-l .date{margin-top:8px; font-size:16px;} #axAdms .tl-r{padding:20px 22px;} #axAdms .tl-r ul li{font-size:16px;} #axAdms .tl-in.is-solo .tl-l{border-bottom:0;} } @media (max-width:768px){ #axAdms .ad-sec{padding:0 0 50px;} #axAdms .sec-head{margin-bottom:28px;} #axAdms .sec-head .eng{margin-bottom:8px; font-size:14px; letter-spacing:2px;} #axAdms .sec-head h2{font-size:26px;} #axAdms .sec-head p{margin-top:12px; font-size:15px;} /* 모바일 전용 배경 이미지 : images/sub/ad-hero_BG_m.jpg 등록 */ #axAdms .ad-hero{padding:38px 24px 34px; border-radius:16px; background-image:url('../images/sub/ad-hero_BG_m.jpg');} #axAdms .ad-hero:before{right:-100px; top:-120px; width:320px; height:320px;} #axAdms .ad-hero:after{left:-90px; bottom:-140px; width:290px; height:290px;} #axAdms .ad-hero .badge{margin-bottom:15px; padding:7px 17px; font-size:13px; letter-spacing:2px;} #axAdms .ad-hero h2{font-size:23px;} #axAdms .ad-hero p{margin-top:15px; font-size:16px; line-height:1.7;} #axAdms .ad-terms{flex-direction:column; margin-top:22px; gap:10px;} #axAdms .ad-terms .t{flex-direction:row; align-items:center; gap:12px; padding:13px 16px; border-radius:12px;} #axAdms .ad-terms .t .lb{padding:5px 13px; font-size:15px;} #axAdms .ad-terms .t b{font-size:16px;} #axAdms .ad-golink{display:flex; width:100%; justify-content:center; margin-top:20px; padding:13px 18px; font-size:15px; gap:8px;} #axAdms .ad-golink .tx{text-align:left;} #axAdms .ad-golink i{font-size:17px;} /* 모집전형 : 1단 카드 */ #axAdms .ad-tg{grid-template-columns:1fr; gap:20px;} #axAdms .tg-cols.is-2{grid-template-columns:1fr; gap:12px;} #axAdms .tg-gtit{height:48px; margin-bottom:10px; font-size:18px; border-radius:12px;} #axAdms .tg-card{padding:19px 17px 17px; border-radius:14px;} #axAdms .tg-card .tg-track{padding-bottom:13px;} #axAdms .tg-card .tg-track i{font-size:18px;} #axAdms .tg-card .tg-track b{font-size:17px;} #axAdms .tg-card .tg-track small{padding-left:0; margin-top:2px; font-size:14px;} #axAdms .tg-card .tg-info{padding-top:13px;} #axAdms .tg-card .tg-info .lb{margin-bottom:8px; padding:4px 11px; font-size:13px;} #axAdms .tg-card .tg-info p{font-size:15px;} #axAdms .ad-note{margin-top:18px; padding:14px 16px; font-size:15px; line-height:1.55;} #axAdms .fl-row{border-radius:14px;} #axAdms .fl-th{padding:15px 17px; gap:11px;} #axAdms .fl-th .ic{flex:0 0 34px; width:34px; height:34px;} #axAdms .fl-th .ic i{font-size:17px;} #axAdms .fl-th b{font-size:17px;} #axAdms .fl-td{padding:18px 17px;} #axAdms .fl-td ul li{padding-left:15px; font-size:15px; line-height:1.65;} #axAdms .fl-td ul li:before{top:10px; width:5px; height:5px;} /* 입시일정 : 타임라인 → 카드 (번호는 카드 우측 상단) */ #axAdms .ad-schbar{padding:14px 17px; margin-bottom:22px; gap:11px; border-radius:14px;} #axAdms .ad-schbar .lb{padding:4px 12px; font-size:13px;} #axAdms .ad-schbar b{font-size:17px;} #axAdms .ad-tl{padding-left:0;} #axAdms .ad-tl:before{display:none;} #axAdms .tl-item + .tl-item{margin-top:12px;} #axAdms .tl-item .no{left:auto; right:14px; top:14px; width:auto; height:auto; border:0; border-radius:0; background:none; box-shadow:none; font-size:14px; font-weight:700; color:var(--ad-blue3);} #axAdms .tl-in{margin-left:0; border-radius:14px;} #axAdms .tl-l{padding:16px 52px 15px 17px;} #axAdms .tl-l .tit{font-size:17px;} #axAdms .tl-l .date{margin-top:6px; font-size:15px;} #axAdms .tl-r{padding:16px 17px;} #axAdms .tl-r ul li{padding-left:15px; font-size:15px; line-height:1.65;} #axAdms .tl-r ul li:before{top:10px; width:5px; height:5px;} #axAdms .tl-r .ntc{margin-top:8px; font-size:14px;} } @media (max-width:500px){ #axAdms .ad-sec{padding:0 0 42px;} #axAdms .sec-head{margin-bottom:24px;} #axAdms .sec-head .eng{font-size:13px;} #axAdms .sec-head h2{font-size:23px;} #axAdms .sec-head p{font-size:14px;} #axAdms .ad-hero{padding:32px 18px 28px; border-radius:14px;} #axAdms .ad-hero .badge{font-size:12px;} #axAdms .ad-hero h2{font-size:20px;} #axAdms .ad-hero p{margin-top:13px; font-size:14px;} #axAdms .ad-terms .t{padding:12px 14px; gap:10px;} #axAdms .ad-terms .t .lb{padding:4px 11px; font-size:14px;} #axAdms .ad-terms .t b{font-size:15px;} #axAdms .ad-golink{padding:12px 14px; font-size:14px;} #axAdms .ad-tg{gap:16px;} #axAdms .tg-gtit{height:44px; font-size:17px;} #axAdms .tg-card{padding:16px 14px 15px;} #axAdms .tg-card .tg-track b{font-size:16px;} #axAdms .tg-card .tg-track small{font-size:13px;} #axAdms .tg-card .tg-info .lb{font-size:12px;} #axAdms .tg-card .tg-info p{font-size:14px;} #axAdms .ad-note{padding:13px 14px; font-size:14px;} #axAdms .fl-th{padding:13px 14px; gap:10px;} #axAdms .fl-th .ic{flex:0 0 30px; width:30px; height:30px; border-radius:8px;} #axAdms .fl-th .ic i{font-size:16px;} #axAdms .fl-th b{font-size:16px;} #axAdms .fl-td{padding:16px 14px;} #axAdms .fl-td ul li{font-size:14px;} #axAdms .fl-td ul li + li{margin-top:8px;} #axAdms .ad-schbar{padding:12px 14px; gap:9px;} #axAdms .ad-schbar .lb{font-size:12px;} #axAdms .ad-schbar b{font-size:15px;} #axAdms .tl-item .no{right:12px; top:12px; font-size:13px;} #axAdms .tl-l{padding:14px 46px 13px 14px;} #axAdms .tl-l .tit{font-size:15px;} #axAdms .tl-l .date{margin-top:5px; font-size:14px;} #axAdms .tl-r{padding:14px;} #axAdms .tl-r ul li{font-size:14px;} #axAdms .tl-r .ntc{font-size:13px;} } /* ============================================================ 홍보 영상(Promotion Video) — sub1_5 ============================================================ */ #axPromo{ --pv-navy:#020B21; --pv-navy2:#061E4A; --pv-ink:#0b1c3d; --pv-blue:#1b4ca0; --pv-blue2:#2358c4; --pv-blue3:#2f7fd4; --pv-cyan:#34A7E2; --pv-txt:#3f4d68; --pv-muted:#6a7891; --pv-line:#e4ecf7; --pv-soft:#f6f9fd; --pv-r:18px; position:relative; margin-top:6px; word-break:keep-all; } #axPromo .pv-sec{position:relative; padding:0 0 40px;} /* ── 섹션 헤더 ─────────────────────────────── */ #axPromo .sec-head{margin-bottom:50px; text-align:center;} #axPromo .sec-head .eng{display:block; margin-bottom:10px; font-size:16px; font-weight:700; letter-spacing:3px; color:var(--pv-cyan); text-transform:uppercase;} #axPromo .sec-head h2{font-size:44px; font-weight:800; line-height:1.25; color:var(--pv-ink); letter-spacing:-.5px;} #axPromo .sec-head h2 em{font-style:normal; background:linear-gradient(90deg,var(--pv-blue) 0%,var(--pv-cyan) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} #axPromo .sec-head p{margin-top:18px; font-size:18px; font-weight:500; line-height:1.7; color:#444;} /* ── 영상 스테이지 ──────────────────────────── */ /* PC 배경 이미지 : images/sub/pv-stage_BG.jpg */ #axPromo .pv-stage{position:relative; padding:26px; border-radius:26px; background:url('../images/sub/pv-stage_BG.jpg') no-repeat 50% 50% /cover; box-shadow:0 26px 60px rgba(6,25,60,.22);} /* 배경 이미지가 밝아 흰 글자가 묻히면 아래 한 줄의 주석을 해제 (어두운 막) */ /* #axPromo .pv-stage{box-shadow:0 26px 60px rgba(6,25,60,.22), inset 0 0 0 9999px rgba(2,11,33,.45);} */ #axPromo .pv-stage:before{content:""; position:absolute; right:-130px; top:-150px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(52,167,226,.30) 0%,rgba(52,167,226,0) 70%); pointer-events:none;} #axPromo .pv-stage > *{position:relative; z-index:1;} /* 16:9 비율 유지 프레임 */ #axPromo .pv-frame{position:relative; width:100%; padding-top:56.25%; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:#000;} #axPromo .pv-video{position:absolute; left:0; top:0; display:block; width:100%; height:100%; object-fit:contain; background:#000;} #axPromo .pv-video a{color:#9ad6ff;} /* 재생 오버레이 */ #axPromo .pv-play{position:absolute; left:0; top:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; width:100%; height:100%; padding:0; border:0; background:linear-gradient(160deg,rgba(2,11,33,.55) 0%,rgba(6,30,74,.62) 100%); cursor:pointer; transition:opacity .35s ease, visibility .35s ease;} #axPromo .pv-play .ic{position:relative; display:flex; align-items:center; justify-content:center; width:104px; height:104px; border-radius:50%; background:linear-gradient(135deg,var(--pv-blue) 0%,var(--pv-blue3) 55%,var(--pv-cyan) 100%); box-shadow:0 16px 36px rgba(27,76,160,.46);} #axPromo .pv-play .ic:before{content:""; position:absolute; left:50%; top:50%; width:104px; height:104px; margin:-52px 0 0 -52px; border:2px solid rgba(255,255,255,.5); border-radius:50%; animation:pvPulse 2.4s ease-out infinite;} #axPromo .pv-play .ic i{margin-left:5px; font-size:46px; line-height:1; color:#fff;} #axPromo .pv-play.is-hide{opacity:0; visibility:hidden;} @keyframes pvPulse{ 0%{transform:scale(1); opacity:.85;} 70%{transform:scale(1.42); opacity:0;} 100%{transform:scale(1.42); opacity:0;} } @media (prefers-reduced-motion: reduce){ #axPromo .pv-play .ic:before{animation:none;} } /* 캡션 바 */ #axPromo .pv-cap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:20px;} #axPromo .pv-cap .l{display:flex; align-items:center; gap:11px; min-width:0;} #axPromo .pv-cap .l .dot{flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--pv-cyan); box-shadow:0 0 0 5px rgba(52,167,226,.22);} #axPromo .pv-cap .l b{font-size:20px; font-weight:600; color:#fff; letter-spacing:-.2px;} #axPromo .pv-cap .r{display:flex; align-items:center; gap:10px;} #axPromo .pv-cap .fs{display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border:1px solid rgba(255,255,255,.26); border-radius:999px; background:rgba(255,255,255,.06); font-size:16px; font-weight:500; color:#fff; cursor:pointer; transition:background .3s, border-color .3s;} #axPromo .pv-cap .fs i{font-size:17px; color:var(--pv-cyan); transition:color .3s;} #axPromo .pv-cap .fs:hover{border-color:var(--pv-cyan); background:rgba(52,167,226,.18);} #axPromo .pv-cap .fs:hover i{color:#fff;} /* ═══════════════ 반응형 ═══════════════ */ @media (max-width:1600px){ #axPromo .sec-head{margin-bottom:46px;} #axPromo .sec-head h2{font-size:40px;} #axPromo .sec-head p{font-size:17px;} #axPromo .pv-stage{padding:24px;} #axPromo .pv-play .ic{width:96px; height:96px;} #axPromo .pv-play .ic:before{width:96px; height:96px; margin:-48px 0 0 -48px;} #axPromo .pv-play .ic i{font-size:42px;} #axPromo .pv-cap .l b{font-size:19px;} } @media (max-width:1400px){ #axPromo .sec-head{margin-bottom:42px;} #axPromo .sec-head h2{font-size:38px;} #axPromo .pv-stage{padding:22px; border-radius:24px;} #axPromo .pv-frame{border-radius:14px;} #axPromo .pv-play{gap:18px;} #axPromo .pv-play .ic{width:90px; height:90px;} #axPromo .pv-play .ic:before{width:90px; height:90px; margin:-45px 0 0 -45px;} #axPromo .pv-play .ic i{font-size:39px;} #axPromo .pv-cap{margin-top:18px;} #axPromo .pv-cap .fs{padding:8px 15px; font-size:15px;} } @media (max-width:1200px){ #axPromo .sec-head{margin-bottom:38px;} #axPromo .sec-head .eng{font-size:15px; letter-spacing:2.5px;} #axPromo .sec-head h2{font-size:34px;} #axPromo .sec-head p{margin-top:15px; font-size:17px;} #axPromo .pv-stage{padding:20px;} #axPromo .pv-play .ic{width:84px; height:84px;} #axPromo .pv-play .ic:before{width:84px; height:84px; margin:-42px 0 0 -42px;} #axPromo .pv-play .ic i{font-size:36px;} #axPromo .pv-cap .l b{font-size:18px;} } @media (max-width:1024px){ #axPromo .pv-sec{padding-bottom:30px;} #axPromo .sec-head{margin-bottom:32px;} #axPromo .sec-head h2{font-size:30px;} #axPromo .sec-head p{font-size:16px;} #axPromo .pv-stage{padding:16px; border-radius:20px;} #axPromo .pv-stage:before{display: none;} #axPromo .pv-play{gap:15px;} #axPromo .pv-play .ic{width:74px; height:74px;} #axPromo .pv-play .ic:before{width:74px; height:74px; margin:-37px 0 0 -37px;} #axPromo .pv-play .ic i{font-size:32px;} #axPromo .pv-cap{margin-top:16px;} #axPromo .pv-cap .l b{font-size:17px;} #axPromo .pv-cap .fs{padding:7px 14px; font-size:14px;} #axPromo .pv-cap .fs i{font-size:16px;} } @media (max-width:768px){ #axPromo .pv-sec{padding-bottom:20px;} #axPromo .sec-head{margin-bottom:26px;} #axPromo .sec-head .eng{margin-bottom:8px; font-size:14px; letter-spacing:2px;} #axPromo .sec-head h2{font-size:26px;} #axPromo .sec-head p{margin-top:12px; font-size:15px; line-height:1.65;} #axPromo .sec-head p br{display:none;} #axPromo .pv-stage{padding:12px; border-radius:16px; box-shadow: none;} #axPromo .pv-frame{border-radius:12px;} #axPromo .pv-play{gap:12px;} #axPromo .pv-play .ic{width:60px; height:60px;} #axPromo .pv-play .ic:before{width:60px; height:60px; margin:-30px 0 0 -30px; border-width:1px;} #axPromo .pv-play .ic i{margin-left:3px; font-size:26px;} #axPromo .pv-cap{margin-top:13px; gap:10px;} #axPromo .pv-cap .l{flex:1 1 100%;} #axPromo .pv-cap .l .dot{width:7px; height:7px; box-shadow:0 0 0 4px rgba(52,167,226,.22);} #axPromo .pv-cap .l b{font-size:15px;} #axPromo .pv-cap .r{flex:1 1 100%; gap:8px;} #axPromo .pv-cap .fs{flex:1 1 0; justify-content:center; padding:9px 12px; font-size:14px;} } @media (max-width:500px){ #axPromo .sec-head{margin-bottom:22px;} #axPromo .sec-head .eng{font-size:13px;} #axPromo .sec-head h2{font-size:22px;} #axPromo .sec-head p{font-size:14px;} #axPromo .pv-stage{padding:9px; border-radius:14px;} #axPromo .pv-frame{border-radius:10px;} #axPromo .pv-play .ic{width:52px; height:52px;} #axPromo .pv-play .ic:before{width:52px; height:52px; margin:-26px 0 0 -26px;} #axPromo .pv-play .ic i{font-size:23px;} #axPromo .pv-cap{margin-top:11px;} #axPromo .pv-cap .l b{font-size:14px;} #axPromo .pv-cap .fs{padding:8px 10px; font-size:13px;} #axPromo .pv-cap .fs i{font-size:15px;} }