@charset "utf-8";

:root {
    /* main color */
    --color-main:#3A8DF6;
    --color-sub:#5CA3FF;
    --color-main-rgb:58,141,246;

    /* base color */
    --color-white:#FFF;

    /* background */
    --bg-main-1:#F4F9FF;

    /* grayscale */
    --grayscale11: #0A0A0A;
    --grayscale10: #171717;
    --grayscale9: #262626;
    --grayscale8: #404040;
    --grayscale7: #525252;
    --grayscale6: #737373;
    --grayscale5: #A3A3A3;
    --grayscale4: #D4D4D4;
    --grayscale3: #E5E5E5;
    --grayscale2: #F5F5F5;
    --grayscale1: #FAFAFA;
    --grayscale1-rgb:250,250,250;

    /* font size */
    --fs-72:clamp(42px,5vw,72px);
    --fs-64:clamp(40px,4.44vw,64px);
    --fs-56:clamp(34px,3.89vw,56px);
    --fs-48:clamp(32px,3.33vw,48px);
    --fs-40:clamp(28px,2.78vw,40px);
    --fs-36:clamp(28px,2.5vw,36px);
    --fs-32:clamp(24px,2.22vw,32px);
    --fs-24:clamp(20px,1.67vw,24px);
    --fs-20:clamp(18px,1.39vw,20px);
    --fs-18:clamp(16px,1.25vw,18px);
    --fs-16:clamp(15px,1.11vw,16px);
    --fs-15:clamp(13px,1.04vw,15px);
    --fs-14:clamp(12px,0.97vw,14px);
    --fs-13:clamp(11px,0.9vw,13px);
    --fs-12:clamp(10px,0.83vw,12px);

    /* shadow */
    --shadow:0 4px 10px 0 rgba(0,0,0,.25);

    /* shadow */
    --gradient-main:linear-gradient(90deg,#91BCF3 0%,#3A8DF6 100%);
    
}

/*==========================================================
    TEXT COLOR
==========================================================*/
.color-main{color:var(--color-main)!important;}
.color-sub{color:var(--color-sub)!important;}
.color-white{color:var(--color-white)!important;}
.gray-11{color:var(--grayscale11)!important;}
.gray-10{color:var(--grayscale10)!important;}
.gray-9{color:var(--grayscale9)!important;}
.gray-8{color:var(--grayscale8)!important;}
.gray-7{color:var(--grayscale7)!important;}
.gray-6{color:var(--grayscale6)!important;}
.gray-5{color:var(--grayscale5)!important;}
.gray-4{color:var(--grayscale4)!important;}
.gray-3{color:var(--grayscale3)!important;}
.gray-2{color:var(--grayscale2)!important;}
.gray-1{color:var(--grayscale1)!important;}

/*==========================================================
    BACKGROUND
==========================================================*/
.bg-main-1{background:var(--bg-main-1)!important;}
.bg-main{background:var(--color-main)!important;}
.bg-sub{background:var(--color-sub)!important;}
.bg-white{background:var(--color-white)!important;}
.bg-gray-11{background:var(--grayscale11)!important;}
.bg-gray-10{background:var(--grayscale10)!important;}
.bg-gray-9{background:var(--grayscale9)!important;}
.bg-gray-8{background:var(--grayscale8)!important;}
.bg-gray-7{background:var(--grayscale7)!important;}
.bg-gray-6{background:var(--grayscale6)!important;}
.bg-gray-5{background:var(--grayscale5)!important;}
.bg-gray-4{background:var(--grayscale4)!important;}
.bg-gray-3{background:var(--grayscale3)!important;}
.bg-gray-2{background:var(--grayscale2)!important;}
.bg-gray-1{background:var(--grayscale1)!important;}

/*==========================================================
    SHADOW
==========================================================*/
.shadow{box-shadow:var(--shadow)!important;}

/*==========================================================
    GRADIENT
==========================================================*/
.gradient-main{background:var(--gradient-main)!important;}

/*==========================================================
    TYPOGRAPHY
==========================================================*/
.section-tit{word-break:keep-all; font-size:var(--fs-32); font-weight:600; line-height:1.4; color:var(--grayscale11);}
.card-tit{word-break:keep-all; font-size:var(--fs-24); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.body-txt{word-break:keep-all; font-size:var(--fs-18); font-weight:400; line-height:1.5; color:var(--grayscale7);}
.category-txt{font-size:var(--fs-15); font-weight:600; line-height:1.5; color:var(--color-main);}
.card-txt{font-size:var(--fs-16); font-weight:400; line-height:1.5; color:var(--grayscale8);}

/*==========================================================
    BTTOUN
==========================================================*/
.btn {width: fit-content; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border:1px solid transparent; border-radius:999px; font-size:var(--fs-16); font-weight:600; line-height:1; text-decoration:none; white-space:nowrap; transition:all .3s ease; cursor:pointer;}
.btn svg{width:24px; height:24px; flex-shrink:0; transition:transform .3s ease;}
.btn-outline {background:var(--color-white); border-color:var(--color-main); color:var(--color-main);}
.btn-outline:hover {background:rgba(var(--color-main-rgb),.1);}
.btn-outline-w {background:transparent; border-color:var(--color-white); color:var(--color-white);}
.btn-outline-w:hover {background:rgba(var(--grayscale1-rgb),.15);}
.btn-outline:hover svg,
.btn-primary:hover svg,
.btn-outline-w:hover svg{transform:translateX(4px);}
.btn-disabled{background:var(--grayscale4); border-color:var(--grayscale4); color:var(--color-white); cursor:default; pointer-events:none;}

/* 공통부분 */
.inner-l {width: calc(100% - 32px); max-width: 1440px; margin: 0 auto;}
.inner {width: calc(100% - 32px); max-width: 1262px; margin: 0 auto;}
.inner-s {width: calc(100% - 32px); max-width: 1006px; margin: 0 auto;}

.pd-120 {padding: 120px 0;}
.pd-100 {padding: 100px 0;}

.common-flex {display: flex; column-gap: 30px; row-gap: 60px;  flex-wrap: wrap;}
.common-flex-3 > a {width: calc(100% / 3 - 20px);}

.btn-area {display: flex; justify-content: space-between; align-items: center; column-gap: 20px; }

.br-12 {border-radius: 12px;}

.img-wrap {overflow: hidden;}
.img-wrap img {width: 100%; height: 100%; object-fit: cover;}


/* layout */
header {width: 100%; position: fixed; top: 0; height: 80px; z-index: 999999;}
header .inner {height: 100%; display: flex; align-items: center; justify-content: space-between;}
header .logo img {height: 50px;}
header.scroll{background-color: var(--color-white); transition: all 0.3s; box-shadow: 0 1px 1px 0 rgba(0,0,0,.05);}
header .mo-btn{position:relative; font-size:0; width:24px; height:15px; cursor: pointer;}
header .mo-btn:before {position:absolute; content:''; top:0; left:0; width:2px; height:2px; border-radius:100%; background: var(--color-white);}
header .mo-btn:after{top:auto; left:auto; right:0; bottom:0;}
header .mo-btn span {position:absolute; top:0; right:0; width:100%; height:2px; border-radius:5px; background: var(--color-white); transition:all 0.4s;}
header .mo-btn span:nth-child(2){top:50%; margin-top:-1px;}
header .mo-btn span:nth-child(3){top:100%; margin-top:-2px; right:auto; left:0; width:100%;}
.menu-open header.scroll{background-color: transparent; transition: all 0.3s; box-shadow: none;}
.menu-open .mo-btn:before,
header.scroll .mo-btn:before {background: var(--grayscale10);}
.menu-open .mo-btn span,
header.scroll .mo-btn span {background: var(--grayscale10);}
.menu-open #gnb_all{opacity: 1; visibility: visible;}
.menu-open header .logo {visibility: hidden;}
.menu-open .mo-btn:hover span:nth-child(1){width:calc(100% - 8px);}
.menu-open .mo-btn span:nth-child(1) {background:transparent;}
.menu-open .mo-btn span:nth-child(2) {top: 8px; transform:rotate(-45deg);}
.menu-open .mo-btn span:nth-child(3) {top: 8px; transform:rotate(45deg);}
.menu-open .mo-btn:before {display: none;}
#gnb_all {position: fixed; top: 0; width: 100%; height: 100vh; z-index: 99999; background-color: var(--color-white); visibility: hidden; opacity: 0; transition: 0.3s ease-out; display: flex; align-items: center; justify-content: center;}
#gnb_all > ul > li {display: flex; flex-direction: column;}
#gnb_all > ul > li:not(:last-of-type) {border-bottom: 1px solid var(--grayscale3);}
#gnb_all > ul > li > a {display: flex; align-items: center; column-gap: 40px; padding: 32px 0; color: var(--grayscale7);}
#gnb_all > ul > li:hover > a {color: var(--grayscale10);}
#gnb_all > ul > li > a .num {color: var(--color-main);}
#gnb_all .sub-menu {display: flex; flex-direction: column; row-gap: 12px;}
#gnb_all .sub-menu li a {font-size: var(--fs-20); color: var(--grayscale7);}

.footer-top {width: 100%; height: 68px; display: flex; align-items: center; justify-content: center; background: var(--gradient-main);}
.footer-top p {color: var(--color-white); text-align: center;}
footer {padding: 70px 0; background-color: var(--grayscale10);}
footer .logo {display: flex; padding-bottom: 40px;}
footer .logo img {height: 50px;}
footer ul { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 8px; padding-bottom: 24px;}
footer ul li {position: relative; color: var(--color-white); opacity: 0.6;}
footer ul li::after {position: absolute; width: 1px; height: 14px; background-color: #707070; top: 50%; right: -14px; transform: translate(0, -50%); display: block; content: '';}
footer ul li:nth-of-type(3):after {display: none;}
footer .design-by{ opacity:0; transition: all 0.15s; font-size:13px; color: var(--grayscale10); pointer-events:none;}
footer .design-by.show{ opacity:1; pointer-events:auto;}
#top_btn {position:fixed;bottom:50px;right:8%;width:64px;height:64px;z-index: 999;display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gradient-main); border: 0; cursor: pointer; box-shadow: var(--shadow);}

/* main */
.main-tit {width: 100%; display: flex; align-items: center; column-gap: 20px; margin-bottom: 40px;}
.main-tit span {display: block; width: 4px; height: 37px; background-color: var(--color-main);}

/* 메인 배너 */
.main-visual {position: relative; height: 640px; display: flex; align-items: center; justify-content: center; background:linear-gradient(to bottom,var(--color-main) 0%,rgba(192,220,255,0) 100%);}
.main-visual .cloud{position:absolute; z-index:2; will-change:transform;}
.main-visual .cloud-left{bottom:-30px; left:-180px; animation:cloudLeftSlow 160s linear infinite,cloudFloat2 12s ease-in-out infinite;}
.main-visual .cloud-right{top:90px; right:-120px; animation:cloudRight 100s linear infinite,cloudFloat1 10s ease-in-out infinite;}
.main-visual .visual-text {display: flex; align-items: center; justify-content: center; flex-direction: column;}
.main-visual .visual-text .year {font-size: var(--fs-48); color: var(--color-white); font-weight:500;}
.main-visual .visual-text h2 {font-size: 96px; color: var(--color-white); font-weight:700; padding: 6px 0;}
.main-visual .visual-text strong {font-size: var(--fs-48); color: var(--color-main); font-weight:500;}
.main-visual .visual-text .line {display: block; background-color: var(--color-white); width: 200px; height: 2px; margin: 30px 0;}
.main-visual .visual-text p {font-size: var(--fs-18); letter-spacing: 0.2em; color: #475569; text-transform: uppercase; font-weight: 500;}

@keyframes cloudLeft{
    0%{transform:translateX(0);}
    50%{transform:translateX(80px);}
    100%{transform:translateX(0);}
}

@keyframes cloudLeftSlow{
    0%{transform:translateX(0);}
    50%{transform:translateX(120px);}
    100%{transform:translateX(0);}
}

@keyframes cloudRight{
    0%{transform:translateX(0);}
    50%{transform:translateX(-100px);}
    100%{transform:translateX(0);}
}

@keyframes cloudFloat1{
    0%,100%{margin-top:0;}
    50%{margin-top:-18px;}
}

@keyframes cloudFloat2{
    0%,100%{margin-top:0;}
    50%{margin-top:20px;}
}

@keyframes cloudFloat3{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
}

/* 인사말 */
.section01 .greeting-cont {display: flex; align-items: center; column-gap: 100px;}
.section01 .greeting-cont .img-wrap {width: 100%; max-width: 490px; height: 512px;}
.section01 .greeting-cont .greetin-text {display: flex; flex-direction: column; row-gap: 20px;}
.section01 .greeting-cont .greetin-text .card-tit {margin-bottom: 20px;}
.section01 .greeting-cont .greetin-text .btn {margin-top: 60px;}

/* 주요소식 */
.section02 .img-wrap {position: relative;}
.section02 .info {position: absolute; left: 60px; bottom: 60px; display: flex; flex-direction: column; row-gap: 12px; z-index: 1;}
.section02 .info .btn {margin-top: 12px;}


/* 활동기사 */
.section03 {display: flex; flex-direction: column; row-gap: 120px;}
.section03 .common-flex > a img{display:block; width:100%; transition:.4s;}
.section03 .common-flex > a:hover img{transform:scale(1.05);}
.section03 .common-flex > a .article-info {margin-top:24px; display: flex; flex-direction: column; row-gap: 6px;}
.section03 .common-flex > a .article-info .card-tit {display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.section03 .common-flex > a .article-info .card-txt {margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}

.section03 .article-swiper-wrap{position:relative;}
.section03 .article-swiper{overflow:hidden;}
.section03 .article-swiper .swiper-slide{height:auto;}
.section03 .article-swiper .img-wrap img{display:block; width:100%; transition:.4s;}
.section03 .article-swiper .swiper-slide:hover img{transform:scale(1.05);}
.section03 .article-swiper .text {margin-top:24px; display: flex; flex-direction: column; row-gap: 6px;}
.section03 .article-swiper .card-tit {display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.section03 .swiper-btn-wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.section03 .swiper-btn-wrap .main-tit {margin-bottom: 0;}
.section03 .swiper-btn {display: flex; align-items: center; column-gap: 10px;}
.section03 .swiper-btn .article-prev,
.section03 .swiper-btn .article-next{display:flex; align-items:center; justify-content:center; position:revert; width:56px; height:56px;}


/* sub */
.sub-visual {position: relative; height: 420px; display: flex; align-items: center; justify-content: center;}
.sub-visual.activity {background: url(../img/sub/sub-activity-bg.webp) no-repeat center center / cover;}
.sub-visual.interview {background: url(../img/sub/sub-interview-bg.webp) no-repeat center center / cover;}
.sub-visual.greeting {background: url(../img/sub/sub-greeting-bg.webp) no-repeat center center / cover;}
.sub-visual.opening {background: url(../img/sub/sub-opening-bg.webp) no-repeat center center / cover;}
.sub-visual.parking {background: url(../img/sub/sub-parking-bg.webp) no-repeat center center / cover;}
.sub-visual.safety {background: url(../img/sub/sub-safety-bg.webp) no-repeat center center / cover;}
.sub-visual::after {position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; display: block; background-color: #1A1A1A; opacity: 0.48; content: ''; z-index: 1;}
.sub-visual .sub-tit {position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 12px; padding-top: 50px;}
.sub-visual .sub-tit h2,
.sub-visual .sub-tit h5 {color: var(--color-white);}
.sub-visual .sub-tit h2 {font-size: 64px; font-weight: 700; text-align: center; word-break: keep-all;}
.sub-visual .sub-tit h5 {font-size: 28px; font-weight: 500; text-align: center; word-break: keep-all;}
.sub-article {padding: 100px 0 140px 0;}
.article-tit {display: flex; flex-direction: column; row-gap: 30px; padding-bottom: 40px;}
.article-tit h2 {font-size: 42px; font-weight: 700;}
.article-tit h5 {font-size: 24px; font-weight: 500; line-height: 1.3;}
.article-cont {display: flex; flex-direction: column; row-gap: 50px; padding: 50px 0 100px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.article-cont .primary {color: #E1148F;}
.article-cont .img-wrap {height: auto;}
.article-cont .img-wrap.img-center {text-align: center;}
.article-cont .img-wrap.img-center img {width: 50%;}
.article-cont .cont {display: flex; flex-direction: column; row-gap: 30px;}
.article-cont .cont p {font-size: 20px; font-weight: 500;}
.article-cont .cont ul {display: flex; flex-direction: column; row-gap: 10px;}
.article-cont .cont ul li {display: flex; align-items: center; font-size: 20px; column-gap: 4px; word-break: keep-all; line-height: 1.3;}
.article-cont .cont ul li.cont-tit {padding-bottom: 4px; align-items: flex-start;}
.article-cont .cont ul li.cont-tit.kakao {align-items: center; column-gap: 10px;}
.article-cont .cont ul li.cont-tit svg {width: 32px; height: 32px;}
.article-cont .cont ul li.cont-tit,
.article-cont .cont ul li.cont-tit b {font-weight: 700;}
.article-cont .cont ul li:not(.cont-tit) {font-weight: 500; color: #555; padding-left: 10px;}
.article-cont .cont ul li.bullet {align-items: flex-start; column-gap: 8px;}
.article-cont .cont ul li.bullet span {font-weight: 500; color: #555; flex-shrink: 0;}
.article-cont .cont.p-flex {display: flex; flex-direction: column; row-gap: 14px;}
.article-cont h5.call {display: flex; align-items: center; column-gap: 12px; font-size: 32px; font-weight: 700;}
.article-cont h5.call span {width: 5px; height: 28px; display: block; background-color: #E1148F;}
.article-cont h5.call b {font-weight: 700;}
.article-cont .img-flex-2 {display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 30px;}
.article-cont .img-flex-2 li {width: calc(100% / 2 - 15px);}
.article-cont .img-flex-2 li .img-wrap {height: auto;}
.article-cont .img-flex-3 {display: flex; flex-wrap: wrap; column-gap: 30px;}
.article-cont .img-flex-3 li {width: calc(100% / 3 - 24px); display: flex; flex-direction: column; row-gap: 30px; align-items: center; justify-content: center;}
.article-cont .img-flex-3 li .img-wrap {height: auto;}
.article-cont .img-flex-3 li .circle {width: 46px; height: 46px; border-radius: 50%; font-size: 24px; color: var(--color-white); background-color: #E1148F; display: flex; align-items: center; justify-content: center;}
.article-cont .img-flex-3.kakao-img {align-items: flex-start;}
.article-cont .img-flex-3.kakao-img .img-wrap {text-align: center;}
.article-cont .img-flex-3.kakao-img .img-wrap img {box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);}
.article-btn-area {display: flex; justify-content: space-between; column-gap: 20px; margin-top: 60px; align-items: center;}
.article-btn-area .main-btn {width: 80%; max-width: 266px; height: 55px; background-color: var(--color-white)5FA; display: flex; align-items: center; justify-content: center; border-radius: 100px; font-size: 18px; font-weight: 600;}
.article-btn-area a:not(.main-btn) {height: fit-content; flex-shrink: 0; display: flex; align-items: center; column-gap: 10px; border: 1px solid #878787; padding: 10px 20px; border-radius: 40px;}
.article-btn-area a:not(.main-btn) span {color: #666; font-size: 18px; font-weight: 500;}
.article-btn-area a:not(.main-btn) svg {flex-shrink: 0;}
.mo-btn-area {display: flex;}
.mo-btn-area a {position: relative; width: 50%; height: 280px; display: flex; flex-direction: column; row-gap: 8px; justify-content: center; align-items: center; padding-inline-start: 20px; transition: all 0.3s;}
.mo-btn-area a::after {position: absolute; width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; display: block; background-color: #1A1A1A; opacity: 0.6; z-index: 1; content: '';}
.mo-btn-area a img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.mo-btn-area a h2 {position: relative; z-index: 2; font-size: 32px; font-weight: 600; color: var(--color-white); text-align: center; word-break: keep-all;}
.mo-btn-area a h5 {position: relative; z-index: 2; font-size: 20px; color: var(--color-white); text-align: center; word-break: keep-all; padding-top: 36px; transition: all 0.3s;}
.mo-btn-area a svg {position: relative; z-index: 2; width: 36px; height: 36px; opacity: 0;}
.mo-btn-area a:hover::after {opacity: 0.9; transition: all 0.3s;}
.mo-btn-area a:hover svg {opacity: 1;  transition: all 0.3s;}
.mo-btn-area a:hover h5 {padding: 0;}

/* 회장님 인사말 */
.article-greeting .article-cont .cont ul li.bullet {line-height: 1.6; padding-left: 0; color: var(--grayscale10); font-weight: 400;}
.article-greeting .article-cont .cont ul li.sign {padding-top: 30px; align-items: center; text-align: right; column-gap: 40px; flex-wrap: wrap; row-gap: 20px; justify-content: flex-end;}
.article-greeting .article-cont .cont ul li.sign .name {font-size: 36px; font-family: 'DeokongPrincess';}
.article-greeting .article-cont .img-wrap.img-center img {width: 60%;}
.article-greeting .article-cont .cont .tit svg {width: 80px; height: 80px; opacity: 0.9;}
.article-greeting .article-cont .cont .tit p {font-size: 48px; font-weight: 700; color: var(--grayscale10);}

/*  장애인전용주차구역 */
.article-parking .article-cont .cont ul li.bullet {padding-left: 0;}
.article-parking .article-cont .cont ul li.cont-tit {align-items: center; font-size: 24px; padding-bottom: 8px;}
.article-parking .article-cont .cont ul li.cont-tit span {width: 4px; height: 22px; background-color: #E1148F; margin-right: 6px;}
.article-parking .article-cont .cont ul li.bullet span.num {width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--color-white); font-weight: 800; font-size: 14px; border-radius: 50%; background-color: #E1148F; margin-top: 3px;}

/* 반응형 */
@media screen and (max-width: 1800px) {

}
@media screen and (max-width: 1520px) {
}
@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 1024px) {


}
@media screen and (max-width: 768px) {

  #top_btn {right: 4%;}

  header {height: 100px;}
  header .logo img {height: 64px;}
  #gnb_all > ul > li > a {font-size: 5vw; padding: 2.8vw 0;}
  #gnb_all .sub-menu li:last-of-type {padding-bottom: 2.8vw;}
  #gnb_all .sub-menu li {font-size: 3.8vw; padding: 0.2vw 0;}

  .footer-top {height: 54px;}
  .footer-top p {font-size: 15px;}
  footer {padding: 60px 0;}
  footer .logo {padding-bottom: 30px;}
  footer .logo img {height: 58px;}
  footer ul {width: 100%; max-width: 500px;}
  footer ul li:nth-of-type(2):after {display: none;}
  

  /* sub */
  .sub-visual {height: 54vw;}
  .sub-visual .sub-tit {padding-top: 5vw; row-gap: 1.2vw;}
  .sub-visual .sub-tit h2 {font-size: 8vw;}
  .sub-visual .sub-tit h5 {font-size: 3.5vw;}
  
  .article-tit h2 {font-size: 36px; word-break: keep-all;}
  .article-tit h5 {font-size: 20px;}
  .article-cont .img-flex-2 {row-gap: 30px;}
  .article-cont .img-flex-2 li {width: 100%;}

  .mo-btn-area {flex-direction: column;}
  .mo-btn-area a {width: 100%; height: 200px;}
  .mo-btn-area a h2 {font-size: 24px;}
  .mo-btn-area a h5 {font-size: 18px; padding-top: 30px;}
  .mo-btn-area a svg {width: 30px; height: 30px;}

}
@media screen and (max-width: 600px) {
    
}
@media screen and (max-width: 500px) {

  header {height: 80px;}
  header .logo img {height: 42px;}
  header .mo-btn {width: 28px; height: 18px;}

  footer .logo img {width: 70%; height: auto;}
  footer ul {max-width: 100%; flex-direction: column;}
  footer ul li:nth-of-type(3):after {display: none;}
  #top_btn {width: 54px; height: 54px; }
  #top_btn svg {width: 32px; height: 32px;}

  .sub-article {padding: 80px 0 100px 0;}
  .article-tit {row-gap: 20px; padding-bottom: 30px;}
  .article-tit h5 br {display: none;}

  .article-cont {padding: 40px 0 80px 0; row-gap: 40px;}
  .article-cont .img-flex-3 {row-gap: 30px;}
  .article-cont .img-flex-3 li {width: 100%;}
  .article-cont .img-flex-3.kakao-img .img-wrap img {width: 70%;}

  .article-cont .cont ul {row-gap: 6px;}
  .article-btn-area {justify-content: center; margin-top: 40px;}
  /* .article-btn-area a:not(.main-btn) {width: 44px; height: 44px; padding: 0; justify-content: center;}
  .article-btn-area a:not(.main-btn) span {display: none;} */
  .article-btn-area a:not(.main-btn) {display: none;}

  .article-greeting .article-cont .cont ul li.sign .name {font-size: 28px;}
  .article-greeting .article-cont .img-wrap.img-center img {width: 90%;}
  .article-greeting .article-cont .cont ul li.sign {column-gap: 20px;}
  .article-greeting .article-cont .cont .tit svg {width: 48px; height: 48px;}
  .article-greeting .article-cont .cont .tit p {font-size: 36px;}
}

@media screen and (max-width: 480px) {
  .card h5 br,
  .card .text h5 br {display: none;}
}

@media screen and (max-width: 375px) {

  
  footer .logo img {width: 80%;}

}

@media screen and (max-width: 340px) {

}

/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/