@charset "utf-8";
/* ====== Quick Service 반응형 ====== */
.img-box {
    height: 310px;
}
/* 태블릿 (1024px 이하): 좌우 패널은 유지하되 여백/폰트만 축소 */
@media (max-width: 1024px) {
  .quick-service { margin: 40px auto; gap: 24px; }
  .left-panel .title { font-size: 22px; }
  .menu-item .label { font-size: 13.5px; }
}

/* 태블릿~모바일 (900px 이하): 좌/우 패널을 세로로 쌓기 */
@media (max-width: 900px) {
  .quick-service {
    flex-direction: column;
    min-height: auto;
  }
  .left-panel,
  .right-panel {
    width: 100%;
    flex: none;
  }
  .right-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .deco-dots,
  .deco-lines { display: none; } /* 장식 요소는 모바일에서 정리 */
}

/* 모바일 (640px 이하): 메뉴 2열 → 1열 */
@media (max-width: 640px) {
  .menu-columns {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .menu-col {
    width: 100%;
  }
  .menu-item {
    padding: 16px 4px;
  }
  .menu-item .icon-wrap { width: 40px; height: 40px; }
  .menu-item .icon-wrap img { width: 32px; height: 32px; }
  .menu-item .arrow { display: none; } /* 좁은 화면에서 화살표 생략 */

  .right-panel {
    grid-template-columns: 1fr 1fr; /* 타일은 2x2 유지 */
  }
  .tile { min-height: 140px; }
  .tile-label { font-size: 14px; }
  .tile-icon { width: 36px; height: 36px; }
}

/* 초소형 모바일 (400px 이하): 타일도 1열로 */
@media (max-width: 400px) {
  .right-panel {
    grid-template-columns: 1fr;
  }
  .tile { min-height: 120px; }
}
/* 앵커사업단 페이페이지 수정 */
.wrap-visual .text_1 {font-size: 4.5rem;line-height: 5rem;}
.wrap-visual .text_0 {font-size: 2rem; line-height: 3rem; margin-top: 55px;margin-bottom: 10px;}
.wrap-visual .detail-view {margin-top: 6rem;}
#multipleContentsDiv_temp04_14 {display: flex; gap:25px;}
:root { --navy: #1e3a5f; --gray-text: #4a5568; --box-bg: #f4f4f5; --box-bg-hover: #eceef0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
.hero { text-align: center; max-width: 900px; margin: 0 auto 56px; }
.eyebrow { font-size: 15px; letter-spacing: 3px; color: #9aa5b1; font-weight: 500; margin-bottom: 10px; }
.title { font-size: 40px; font-weight: 800; color: #2d3748; margin-bottom: 20px; }
.title .accent { color: var(--navy); }
.subtitle { font-size: 15px; line-height: 1.7; color: #718096; }
.menu-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 0 auto; }
.menu-item { background: var(--box-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 10px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; text-decoration: none; }
.menu-item:hover { background: var(--box-bg-hover); transform: translateY(-2px); }
.menu-item .icon-wrap { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.menu-item .icon-wrap img { width: 48px; height: 48px; object-fit: contain; display: block; }
.menu-item .label { font-size: 15px; font-weight: 600; color: #2d3748; }
/*메인 2*/
#multipleDiv_cnanchor_896 {background: #f1f5f8; padding: 4%; margin: 3% 0;}
#multipleContentsDiv_cnanchor_896 {display: flex; justify-content: space-between;}
.clearfix::after, .clear-fix::after {display:none;}
/*메인 4*/
.quick-service { display: flex; margin: 60px auto; min-height: 400px; }

/* ===== 왼쪽 패널 ===== */
.quick-service .left-panel { flex: 1.65; background: var(--box-bg); position: relative; overflow: hidden; padding: 40px 50px; }
.quick-service .left-panel::before { content: ""; position: absolute; top: -120px; left: 220px; width: 340px; height: 340px; border-radius: 50%; background: #e7dfe8; opacity: .6; }
.quick-service .left-panel::after { content: ""; position: absolute; bottom: -80px; right: -60px; width: 160px; height: 160px; border-radius: 50%; border: 30px solid #eef0f2; }
.quick-service .deco-dots { position: absolute; top: 40px; left: 20px; width: 60px; height: 60px; background-image: radial-gradient(#d7dade 1.5px, transparent 1.5px); background-size: 8px 8px; opacity: .7; }
.quick-service .deco-lines { position: absolute; top: 40px; left: 40px; width: 60px; height: 60px; background: repeating-linear-gradient(-45deg, #d7dade 0 1px, transparent 1px 8px); opacity: .5; }
.quick-service .deco-wave { position: absolute; bottom: 30px; right: 40px; width: 90px; z-index: 1; }

.quick-service .eyebrow { position: relative; z-index: 2; font-size: 13px; letter-spacing: 3px; color: #9aa5b1; font-weight: 700; margin-bottom: 10px; }
.quick-service .eyebrow-mark { display: block; width: 8px; height: 8px; background: var(--navy); margin: 8px 0 12px; }
.quick-service .title { position: relative; z-index: 2; font-size: 28px; font-weight: 800; color: #2d3748; margin-bottom: 34px; }

.quick-service .menu-columns { position: relative; z-index: 2; display: flex; gap: 60px; }
.quick-service .menu-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.quick-service .menu-item { display: flex; align-items: center; gap: 16px; padding: 14px 4px; text-decoration: none; cursor: pointer; border-radius: 6px; transition: background 0.2s ease; flex-direction: unset; }
.quick-service .menu-item:hover { background: var(--box-bg-hover); }
.quick-service .menu-item .icon-wrap { width: 40px; height: 40px; border-radius: 50%; background: #e3e7ee; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-service .menu-item .icon-wrap img { width: 20px; height: 20px; object-fit: contain; display: block; }
.quick-service .menu-item .label { font-size: 15px; font-weight: 600; color: #2d3748; flex: 1; }
.quick-service .menu-item .arrow { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #dde1e6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--navy); font-size: 11px; }

/* ===== 오른쪽 패널 (2x2 이미지) ===== */
.quick-service .right-panel { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.quick-service .tile { position: relative; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-decoration: none; overflow: hidden; }
.quick-service .tile img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.quick-service .tile .overlay { position: absolute; inset: 0; background: rgba(20, 40, 70, 0.15); z-index: 1; }
.quick-service .tile .tile-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.quick-service .tile .tile-icon { width: 60px; height: 60px; object-fit: contain; }
.quick-service .tile .tile-label { font-size: 18px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.quick-service .tile .nav-arrows { display: flex; gap: 8px; font-size: 22px; margin-bottom: 4px; }

.quick-service .tile-way    { background-color: #4a7a4a; }
.quick-service .tile-recruit{ background-color: var(--navy); }
.quick-service .tile-press  { background-color: #4c8fa8; }
.quick-service .tile-qna    { background-color: #6b6b6b; }

  @media (max-width: 900px) {
    .menu-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .title { font-size: 30px; }
  }

  @media (max-width: 520px) {
    .menu-grid { grid-template-columns: repeat(2, 1fr); }
  }


/* section2 */
#multipleDiv_temp04_14 {max-width:172rem; min-height:88.3rem; margin:0 auto; padding:14rem 0 10rem; }
/* section3 - live on */
#multipleDiv_temp04_41 {padding:13rem 0 15rem 0; background: url('../../images/main/live_on_bg.jpg') no-repeat center / cover;}
#multipleContentsDiv_temp04_41 {max-width:172rem; margin:0 auto;}
/* section4 - news life */
#multipleContentsDiv_temp04_94 {padding:12.5rem 0 10rem 0; background:url('../../images/main/bg-news-life.png') no-repeat left top -80%;}
#multipleContentsDiv_temp04_94::before {content:'Industry-Academic\A Cooperation Group'; position: absolute; right:-1rem; top:-1.5rem; font-family: 'paper'; font-weight: 700; color:#F7F7F7; font-size: 9rem; line-height: 10rem; white-space:pre; text-transform: uppercase; letter-spacing: -.05em; text-align:right;}
@media screen and (max-width:1800px) {
    #multipleDiv_temp04_14 {margin:0 2rem;}
    #multipleContentsDiv_temp04_41 {padding:0 2rem;}
}
@media screen and (max-width:1200px) {
    #multipleDiv_temp04_14 {padding:8rem 0;}

    #multipleDiv_temp04_41 {padding:8rem 0;}

    #multipleContentsDiv_temp04_94 {overflow:hidden; padding:8rem 0; background-size:22rem;}
    #multipleContentsDiv_temp04_94::before {right:0; font-size: 5rem; line-height: 6rem;}
}
@media screen and (max-width:768px) {
    #multipleDiv_temp04_14 {padding: 5rem 0;}
    
    #multipleDiv_temp04_41 {padding: 5rem 0;}

    #multipleContentsDiv_temp04_94 {padding: 5rem 0; background-size:15rem; background-position: left top;}
    #multipleContentsDiv_temp04_94::before {font-size: 6vw; line-height: 1.5; top:-0.7rem;}
}

/* 비주얼 슬로건 */
#menu1295_obj12 {position: absolute; top:30%; left:10rem; z-index: 1;}
.wrap-visual-slogan {position: relative; font-family: 'paper'; color:#fff;}
.wrap-visual-slogan strong {font-weight: 600; font-size: 6.5rem; line-height: 8rem; text-shadow: 0.2rem 0.2rem 0.5rem rgba(0,0,0,0.3);}
.wrap-visual-slogan p {margin-top: 1.7rem; font-weight: 400; font-size: 2rem; line-height: 1.5;}
.wrap-visual-slogan .more {display: flex; align-items: center; width:17rem; height:5rem; margin-top: 5.5rem; padding:0 2rem; background:url('../../images/main/ic-visual-arrw.png') no-repeat right 2rem center; border:1px solid rgba(255,255,255,0.4); border-radius:5rem; font-weight: 400; font-size: 1.4rem; color:#fff; transition: .3s;}
.wrap-visual-slogan .more:hover {border:1px solid #fff;}
@media screen and (max-width:1800px) {
    #menu1295_obj12 {left:2rem;}
}
@media screen and (max-width:1200px) {
    .wrap-visual-slogan strong {font-size: 5.5rem; line-height: 1.2;}
}
@media screen and (max-width:768px) {
    .wrap-visual-slogan strong {font-size: 4.5rem;}
    .wrap-visual-slogan p {font-size: 1.6rem;}
    .wrap-visual-slogan .more {margin-top: 3rem;}
}

/* section02 */
.sec02-text h1{font-size: 8rem; font-family: 'paper'; font-weight: 800; line-height:1; color:red;}
.sec02-text span {font-size: 1.8rem; font-family: 'paper'; font-weight: 400; margin-top: 4.7rem; display: block; color:#1C1C1C;}
/*
.sec02-link > ul{border-top:1px solid #000; margin-right: 50px;}
.sec02-link > ul > li{border-bottom:1px solid #000;position:relative;}
.sec02-link > ul > li a:after{content:'';width:29.6rem;height:31.1rem; position:absolute;right:-5rem;top:-3rem;z-index: 1;transition:all ease .5s;opacity:0;}
.sec02-link > ul > li a:before{content:'';width:11rem;height:11rem;background:url('../../images/main/r-arrow.png') no-repeat;position:absolute;right: 3.5rem;top: 50%; z-index: 2; margin-top: -5.5rem;transition:all ease .5s;opacity:0;}
.sec02-link > ul > li:nth-child(1) a:after {background:url('../../images/main/sec02-img1.png') no-repeat center; }
.sec02-link > ul > li:nth-child(2) a:after {background:url('../../images/main/sec02-img2.png') no-repeat center; }
.sec02-link > ul > li:nth-child(3) a:after {background:url('../../images/main/sec02-img3.png') no-repeat center; }
.sec02-link > ul > li:nth-child(4) a:after {background:url('../../images/main/sec02-img4.png') no-repeat center; }
.sec02-link > ul > li:nth-child(5) a:after {background:url('../../images/main/sec02-img5.png') no-repeat center; }
.sec02-link > ul > li a{padding:3rem 0 2.5rem;display:block;transition: all ease .5s;}
.sec02-link > ul > li strong{font-size:2.8rem;color:#323232;font-family: 'paper'; font-weight: 700; display:block;}
.sec02-link > ul > li p{font-size:1.6rem;color:#656565;font-family: 'paper'; font-weight: 400; max-width:55%; opacity: 0;transition: all ease .5s;height: 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}

.sec02-link > ul > li.on a{padding:5rem 0 2.5rem;}
.sec02-link > ul > li.on p{opacity: 1;height: auto;margin: 1.8rem 0;}
.sec02-link > ul > li.on a:before,
.sec02-link > ul > li.on a:after{opacity:1;}

@media screen and (max-width:1500px) {
    .sec02-text h1 {font-size: 6rem;}
}
@media screen and (max-width:1200px) {
    .sec02-text {margin-bottom: 3.5rem;}
    .sec02-text h1 {font-size: 5rem; line-height: 6rem;}
    .sec02-text h1 br:first-child {display: none;}
    .sec02-text span br {display: none;}
    
    #multipleContentsDiv_temp04_14 {display: flex; flex-direction: column; gap:2rem;}
    .order3 {order:3;}
    .sec02-link {margin-top: 5rem;}
    .sec02-link > ul {margin-right: 0;}
    .sec02-link > ul > li a:before {right:8.5rem;}
    .sec02-link > ul > li a:after {right:0rem;}
    .sec02-link > ul > li.on a {padding: 5.5rem 0 3rem;}
    .sec02-link > ul > li.on p {margin:1.5rem 0 3rem 0;}

}
@media screen and (max-width:768px) {
    .sec02-text h1 {font-size: 4rem; line-height: 5rem;}
    .sec02-text h1 br {display: none;}
    .sec02-text span {font-size: 1.6rem; margin-top: 3rem;}

    .sec02-link {margin-top: 0rem;}
    .sec02-link > ul > li strong {font-size: 2.2rem;}
    .sec02-link > ul > li p {font-size: 1.6rem; max-width:100%;}
    .sec02-link > ul > li a:before {right:unset; left:50%; top:calc(50% + 3rem); margin-left:-5.5rem; bottom:50%; margin-top:unset; visibility: hidden;}
    .sec02-link > ul > li:after{display: none;}
    .sec02-link > ul > li a {display: block;}
    .sec02-link > ul > li.on a:before {visibility: visible;}
    .sec02-link > ul > li a:after{content:'';width:29.6rem;height:0px; position:absolute;right:-5rem;z-index: 1;transition:ease .5s; transition-property: opacity, top; opacity:0; top:0;}
    .sec02-link > ul > li a:after {margin:0 auto; position: relative; display:block; left:unset; right:unset;}
    .sec02-link > ul > li.on a:after{opacity:1; height:31.1rem;}
    .sec02-link > ul > li:nth-child(1) a:after {background:url('../../images/main/sec02-img1.png') no-repeat center; }
    .sec02-link > ul > li:nth-child(2) a:after {background:url('../../images/main/sec02-img2.png') no-repeat center; }
    .sec02-link > ul > li:nth-child(3) a:after {background:url('../../images/main/sec02-img3.png') no-repeat center; }
    .sec02-link > ul > li:nth-child(4) a:after {background:url('../../images/main/sec02-img4.png') no-repeat center; }
    .sec02-link > ul > li:nth-child(5) a:after {background:url('../../images/main/sec02-img5.png') no-repeat center; }

    .sec02-link > ul > li.on a {padding:2.5rem 0 3rem;}
    .sec02-link > ul > li.on p {margin:0.8rem 0 3rem 0;}
}
*/

/* live on */
.live-on-text {width:33rem;}
.live-on-text .title > strong{font-size:8rem;color:#fff;font-family:'paper'; font-weight: 800; display:block;margin-bottom:3rem;line-height:1.15;}
.live-on-text .title > p{font-size:2rem; font-weight: 400; color:#fff;font-family:'paper';line-height:1.5;margin-bottom:17.5rem;}
.live-on-text .title > p > i{display:block;}
.live-on-text .title > ul{max-width:33rem;}
.live-on-text .title > ul > li > a{position:relative;color:#fff;border:1px solid #fff;padding:2.3rem 3rem 2.3rem 11rem;display:block;transition:all ease .5s;text-align:left;border-radius:1rem;font-size:1.8rem;font-family:'SUITE SemiBold';}
.live-on-text .title > ul > li > a:before{content:'';width:5rem;height:5rem;position:absolute;left:4rem;top:50%;margin-top:-2.5rem;}
.live-on-text .title > ul > li:nth-child(1) > a:before{background:url('../../images/main/live-icon1.png') no-repeat center;}
.live-on-text .title > ul > li:nth-child(2) > a:before{background:url('../../images/main/live-icon2.png') no-repeat center;}
.live-on-text .title > ul > li:nth-child(3) > a:before{background:url('../../images/main/live-icon3.png') no-repeat center;}
.live-on-text .title > ul > li > a:hover{background:#2296E1;border:1px solid #2296E1;}
.live-on-text .title > ul > li + li{margin-top:1.7rem;}

@media all and (max-width:1200px){
  .live-on-text {width:100%;}
  .live-on-text .title > strong{font-size:5rem; margin-bottom: 1.5rem;}
  .live-on-text .title > ul {display: flex; max-width:100%; gap:1rem;}
  .live-on-text .title > ul > li {width:100%;}
  .live-on-text .title > ul > li + li {margin-top: 0;}
  .live-on-text .title > ul > li > a {padding:2.3rem 3rem 2.3rem 8rem;}
  .live-on-text .title > ul > li > a:before{left:2rem;}
  .live-on-text .title > p{margin-bottom:4.5rem;}
  .live-on-text .title > p i {display: none;}
}

@media all and (max-width:767px){
  .live-on-text{padding-right:0;}    
  .live-on-text .title > strong{font-size:4rem;}
  .live-on-text .title > p{margin-bottom:3.5rem; font-size:1.6rem;}
  .live-on-text .title > p > i{display: inline-block;padding: 0;}
  .live-on-text .title > ul {flex-wrap:wrap;}
  .live-on-text .title > ul > li > a{font-size:1.8rem;padding-left: 9rem;}
  .live-on-text .title > ul > li > a:before{left:2rem;}  
}



.sec04-text {position: relative;}
.sec04-text .frame {max-width:172rem; width:100%; margin:0 auto;}
.sec04-text h1{font-size: 8rem; font-family: 'paper'; font-weight: 800; line-height:1;}
.sec04-text span {font-size: 2rem; font-family: 'paper'; font-weight: 400; margin-top: 3rem; display: block;}
.sec04-text span i {display: block;}
@media screen and (max-width:1800px) {
    .sec04-text .frame {padding:0 2rem;}
}
@media screen and (max-width:1200px) {
    .sec04-text {margin-bottom: 4.5rem;}
    .sec04-text h1 {font-size: 5rem;}
    .sec04-text span {margin-top: 1.3rem;}
    .sec04-text span i {display: none;}
}
@media screen and (max-width:768px) {
    .sec04-text .inner {padding:0 2rem;}
    .sec04-text h1 {font-size: 4rem;}
    .sec04-text span {font-size: 1.6rem;}
}