@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css');


:root {
  --border-1: #32D28B; /* 1등급 테두리*/
  --border-2: #FFA94D; /* 2등급 테두리*/
  --border-3: #70C0E8; /* 3등급 테두리*/
  --border-4: #BCAEF1; /* 4등급 테두리*/
  --border-5: #E0E0E0; /* 5등급 테두리*/
  --bg-1: #FFF4CC; /* 기부 1위 배경 */
  --bg-1: #EAF4FF; /* 기부 2위 배경 */
  --bg-1: #FBE6D4; /* 기부 3위 배경 */
  --col-0: #FFFFFF; /* 흰색 */
  --col-1: #F5F5F5; /* 배경 */
  --col-2: #CCCCCC; /* 선 */
  --col-3: #808080; /* 라이트 그레이 */
  --col-4: #666666; /* 그레이 */
  --col-5: #4D4D4D; /* 다크 그레이 */
  --col-6: #333333; /* 블랙 */
  --col-main: #0077FF; /* 메인 */
  --col-mainbg: #E9F4FF; /* 서브(배경) */
}


/* 전체 적용 */
* {font-family: 'SUIT Variable'; list-style: none; text-decoration: none; color: var(--col-6); letter-spacing: -0.03em;}
.container {max-width: 1120px !important;}
main{min-height: calc(100vh - 200px); padding: 120px 0;}

/* 헤더 네비 */
header {background-color: #fffc; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;}
nav a{color: var(--col-3); }
nav a:hover {color: var(--col-main);}



/* 메인 배너 스와이퍼 */
.swiper {
        max-width: 700px;
        height: 400px;
        overflow: visible;
        overflow: hidden;
        }

        .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;
        }

        .swiper-slide img {
        width: 100%;
        height: 100%;
        max-width: 700px;
        object-fit: cover;
        }

        .swiper {
        --swiper-theme-color: grey;
        --swiper-pagination-bullet-size: 10px;
        --swiper-pagination-bullet-inactive-color: var(--col-sub);
        --swiper-pagination-bullet-inactive-opacity: 0.7;
        }
        .swiper-pagination-bullet {background-color: var(--col-mainbg);}
        .swiper-pagination-bullet-active {background-color: var(--col-main);}
        
/* 분류 */

.img-zoom {
  transition: transform 0.3s ease;
  max-height: 176px;
  object-fit : cover;
}
a:hover .img-zoom {
  transform: scale(1.05);
}   

.img-zoomin {
  transition: transform 0.3s ease;
  object-fit : cover;
}
a:hover .img-zoomin {
  transform: scale(1.05);
}