@charset "utf-8";

/**************************************************
  중소기업 동반성장
***************************************************/

:root{
  --fs-28: 28px;
  --fs-64: 64px;
  
  --gray-700: #333;
}

@media (max-width:1024px){
  :root{
    --fs-28:24px;
    --fs-64:54px;
  }
}

/* Visual Title Center */
.sub-visual:has(.visual-title-center) {align-items: center;}
.visual-title-center {font-size: var(--fs-64);font-weight: 800;color:var(--white); text-align: center}

/* Sub Growth Visual*/
.sub-visual-0205 {background: url('/resources/user/web/images/sub/growth/img_sub_visual_0205.jpg') center/cover no-repeat;align-items: center;}

/* Sub Card Slider */
.sub-visual-card-slider {position: relative;padding: 0 35px;margin-top: -200px}
.notice-slider-wrap {position:relative;}
.noticeSwiper {overflow:hidden;}
.noticeSwiper .swiper-wrapper {align-items: stretch;}
.noticeSwiper .swiper-slide {display: flex; padding: 20px;height: auto}
.noticeSwiper .notice-card {display:flex;flex-direction:column;align-items: flex-start;width: 100%; min-height:200px;padding:35px 30px;background:var(--white);border-radius:0 30px 0 30px;color:var(--gray-500);box-shadow:4px 4px 15px 0 rgba(0,0,0,.08);transition:.3s;}
.noticeSwiper .notice-card:hover {transform: translateY(-20px);}
.sub-visual-card-slider .badge{display:inline-flex;align-items:center;justify-content:center;height:26px;padding: 0 15px; border-radius:50px;font-size:var(--fs-14);}
.sub-visual-card-slider .badge-ing {background: rgba(11, 80, 208, 0.1);color:var(--primary-1);}
.sub-visual-card-slider .badge-end {background: rgba(0, 0, 0, 0.1);color:var(--gray-400);}
.sub-visual-card-slider .card-title {margin-top:20px;font-size:var(--fs-20);font-weight:700;color:var(--gray-500);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sub-visual-card-slider .card-date {margin-top:auto;padding-top:20px;font-size:var(--fs-14);color:var(--gray-400);}
.sub-visual-card-slider .swiper-btn {position:absolute;top:50%;width:45px;height:45px;border:none;border-radius:50%;background:rgba(0,0,0,.45);cursor:pointer;transform:translateY(-50%);z-index:10;}
.sub-visual-card-slider .swiper-prev {left:0;}
.sub-visual-card-slider .swiper-next {right:0;}
.sub-visual-card-slider .swiper-prev::before,
.sub-visual-card-slider .swiper-next::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-top:2px solid var(--white);border-right:2px solid var(--white);}
.sub-visual-card-slider .swiper-prev::before{transform:translate(-30%,-50%) rotate(-135deg);}
.sub-visual-card-slider .swiper-next::before{transform:translate(-70%,-50%) rotate(45deg);}

/* Sub Growth Content*/
.growth-main-wrap {margin-top:20px}
.growth-main-con {display: flex;justify-content: space-between;gap: 50px;align-items: flex-start;}
.growth-main-con .brd-wrap {position: relative;flex: 1;min-width: 0;}
.growth-main-con .brd-wrap .title-wrap {display: flex;align-items: center;justify-content: space-between;gap: 20px;border-bottom: 1px solid var(--gray-300);padding-bottom: 30px;}
.growth-main-con .brd-wrap .title-wrap h2 {font-size: var(--fs-36);}
.growth-main-con .brd-wrap .title-wrap .view-btn-more {    position: absolute;top: 12px;right: 0;width: 36px;height: 36px;display: block;border: 1px solid var(--gray-300);border-radius: 50px;transition: transform .3s ease;}
.growth-main-con .brd-wrap .title-wrap .view-btn-more::before {content: '';width: 2px;height: 18px;background: var(--gray-300);position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.growth-main-con .brd-wrap .title-wrap .view-btn-more::after {content: '';width: 18px;height: 2px;background: var(--gray-300);position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.growth-main-con .brd-wrap .title-wrap .view-btn-more:is(:hover, :focus-visible) {transform: rotate(180deg); background: var(--primary);}
.growth-main-con .brd-wrap .title-wrap .view-btn-more:is(:hover, :focus-visible)::before {background: var(--white);}
.growth-main-con .brd-wrap .title-wrap .view-btn-more:is(:hover, :focus-visible)::after {background: var(--white);}
.growth-main-con .brd-wrap .brd-list {}
.growth-main-con .brd-wrap .brd-list li {}
.growth-main-con .brd-wrap .brd-list li a {position: relative;display: flex;align-items:center;justify-content: space-between;gap: 20px;padding:20px 0;border-bottom: 1px dashed var(--border);}
.growth-main-con .brd-wrap .brd-list li a .list-subject {position: relative;padding-left: 15px;font-size: var(--fs-20);color:var(--gray-400);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.growth-main-con .brd-wrap .brd-list li:hover a .list-subject,
.growth-main-con .brd-wrap .brd-list li:focus-within a .list-subject {font-weight: 700; color:var(--primary-1);text-decoration: underline}
.growth-main-con .brd-wrap .brd-list li a .list-subject::before {content: "";position: absolute;left: 0;top:12px;display: block;width: 5px;height: 5px;background:#AFCFFF;}
.growth-main-con .brd-wrap .brd-list li .date {display: block;font-size: var(--fs-16); color: var(--gray-300);min-width: 80px;flex-shrink: 0;}


.banner-area {width: 554px;flex-shrink: 0;display: flex;flex-direction: column;gap:30px;}
.banner-area .center-card-view {display: flex;justify-content: space-between;align-items: flex-end; gap:20px;background:var(--secondary-2);color:var(--white);border-radius: 20px;padding: 40px 50px;}
.banner-area .center-card-view .txt-box {display: flex;flex-direction: column;align-items: flex-start;gap:20px;}
.banner-area .center-card-view .txt-box h2 {font-size: var(--fs-28);font-weight: 700;}
.banner-area .center-card-view .txt-box p {font-size: var(--fs-16);}
.banner-area .center-card-view .txt-box .view-btn {flex-shrink: 0; min-width:130px;height: 40px;display: flex;align-items: center;justify-content: center;gap:20px;background:#055650;padding: 0 24px;font-size: var(--fs-14); color: var(--white);border-radius: 50px;overflow: hidden;}
.banner-area .center-card-view .txt-box .view-btn::after {content: '';background: url('/resources/user/web/images/sub/growth/icon_growth_sprite.svg') no-repeat -30px 0;width: 6px;height:10px;}
.banner-area .center-card-view .icon-con {display: block;width: 107px;height: 107px;background: url('/resources/user/web/images/sub/growth/icon_speak.png') no-repeat 0 0;}
.banner-area .center-con-view{}
.banner-area .center-con-view ul {display:flex;align-items:center;background:#EEF7FF;border-radius:10px;padding:30px 5px;}
.banner-area .center-con-view li {flex:1;position:relative;padding: 0 10px}
.banner-area .center-con-view li:not(:last-child)::after {content:"";position:absolute;top:50%;right:0;width:1px;height:36px;background:var(--gray-200);transform:translateY(-50%);}
.banner-area .center-con-view a {display:flex;align-items:center;justify-content:center;gap:14px;font-size:var(--fs-20);font-weight:700;color:var(--gray-700);}
.banner-area .icon-con {display:block;width:36px;height:36px;background-image: url('/resources/user/web/images/sub/growth/icon_growth_sprite.svg');background-repeat: no-repeat;}
.banner-area .icon-01 {background-position:-40px 0}
.banner-area .icon-02 {background-position:-80px 0}
.banner-area .icon-03 {background-position:-120px 0}


.growth-shortcut{margin:120px 0 0;}
.growth-shortcut ul {display:grid;grid-template-columns:repeat(4,1fr);gap:25px;}
.growth-shortcut li {min-height:150px;}
.growth-shortcut li a {position:relative;display:flex;justify-content:space-between;align-items:flex-start;height:100%;padding:50px 30px;background:#f1f1f1;border-radius:10px;color:var(--gray-500);transition:transform .3s ease, box-shadow .3s ease, background .3s ease;}
.growth-shortcut li a:hover,
.growth-shortcut li a:focus-visible {background:var(--secondary-1);transform:translateY(-10px);box-shadow:0 10px 25px rgba(0,0,0,.15);}
.growth-shortcut .con-title {font-size:var(--fs-20);font-weight:600;color:var(--gray-500)}
.growth-shortcut li a:hover .con-title,
.growth-shortcut li a:focus-visible .con-title {color:var(--white);}
.growth-shortcut .icon-con {flex-shrink:0;width:72px;height:72px;border-radius:50%;background-color:var(--white);background-repeat:no-repeat;background-position: center center;}
.shortcut1 .icon-con {background-image:url("/resources/user/web/images/sub/growth/icon_growth_shortcut_1.png");}
.shortcut2 .icon-con {background-image:url("/resources/user/web/images/sub/growth/icon_growth_shortcut_2.png");}
.shortcut3 .icon-con {background-image:url("/resources/user/web/images/sub/growth/icon_growth_shortcut_1.png");}
.shortcut4 .icon-con {background-image:url("/resources/user/web/images/sub/growth/icon_growth_shortcut_4.png");}


@media (max-width:1200px){
  .sub-visual-0205 .sub-visual-inner {align-items: center}
  .visual-title-center {margin-top: -100px}
  .growth-main-wrap {margin-top: 0;}
  .banner-area {width: 450px;}
  .banner-area .center-con-view ul {padding: 25px 10px;}
  .growth-shortcut .icon-con {width: 60px;height: 60px;background-size: 60% auto;}
}
@media (max-width:1024px){
  .growth-main-con {flex-direction: column;align-items: stretch}
  .banner-area {width: 100%;}
  .growth-shortcut ul {grid-template-columns: repeat(2,1fr);gap: 20px;}
}
@media (max-width:768px){
  .sub-visual-card-slider {position: relative;padding: 0 35px;margin-top: -150px;}
  .noticeSwiper .notice-card {min-height: 150px;padding: 30px 25px;border-radius: 0 20px 0 20px;}
  .sub-visual-card-slider .swiper-btn {width: 40px;height: 40px;}
  .sub-visual-card-slider .swiper-prev {left:10px;}
  .sub-visual-card-slider .swiper-next {right:10px;}
  
  .growth-shortcut {margin: 80px 0 0;}  
}
@media (max-width:640px){
  .growth-shortcut ul {grid-template-columns: repeat(1,1fr);}
  .growth-shortcut li a {padding: 30px 20px;}
  .growth-shortcut li {min-height:80px;}
}
@media (max-width:480px){
  .sub-visual-card-slider .swiper-btn {width: 35px;height: 35px;}
  .growth-main-con .brd-wrap .brd-list li a {flex-direction: column;align-items: flex-start;justify-content:flex-start;gap:5px;}
  .growth-main-con .brd-wrap .brd-list li a .list-subject {width: 100%;}
  .growth-main-con .brd-wrap .brd-list li .date {padding-left: 15px}
  
  .banner-area .center-card-view {padding:25px 30px;}
  .banner-area .center-card-view .txt-box p br {display: none}
  .banner-area .center-card-view .txt-box .view-btn {min-width: 100px;gap: 10px;padding: 0 20px;line-height: 1}
  .banner-area .center-card-view .txt-box .view-btn::after {content: '';background: url('/resources/user/web/images/sub/growth/icon_growth_sprite.svg') no-repeat -30px 0;width: 6px;height: 10px;}
  .banner-area .center-card-view .icon-con {flex-shrink: 0;width: 80px;height: 80px;background-size:90%;}
  .banner-area .center-con-view a {flex-direction: column;}
  .banner-area .center-con-view li:not(:last-child)::after {height: 80px;}
}