@charset "utf-8";

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

.main-container {overflow: hidden; font-family: "GMarketSans", sans-serif;}
.sub-container {overflow: hidden; font-family: "Pretendard", sans-serif; font-weight: 400;}

.section-200 {padding: 200px 0;}
.section-180 {padding: 180px 0;}
.section-140 {padding: 140px 0;}

.common-flex {display: flex; column-gap: 40px; row-gap: 60px; align-items: flex-end; flex-wrap: wrap;}
.common-flex-s {column-gap: 24px;}
.common-flex-2 a {width: calc(100% / 2 - 20px);}
.common-flex-4 a {width: calc(100% / 4 - 18px);}

.primary {color: var(--primary);}
.secondary {color: var(--secondary);}
.thrid {color: var(--thrid);}

.title {display: flex; align-items: flex-end; column-gap: 10px; margin-bottom: 40px;}
.title h4 {line-height: 1; word-break: keep-all;}

section h2 {font-size: 64px;}
section h3 {font-size: 42px;}
section h4 {font-size: 36px;}
section h5 {font-size: 24px;}

section {position: relative;}
section > img {position: absolute;}

.font-regular {font-weight: 300;}
.font-bold {font-weight: 700;}

.card {display: flex; flex-direction: column; row-gap: 40px;}
.card:hover .more-btn {background: linear-gradient(135deg, #FF8AC9, #FF5FAE); border: 0; transition: all 0.2s; color: #fff;}
.card:hover .more-btn svg path {stroke: #fff; transition: all 0.2s;}
.card .text > p {font-size: 18px; line-height: 1; margin-bottom: 14px;}
.card h5,
.card .text h5 {line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}

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

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

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

.more-btn {width: 135px; height: 40px; display: flex; align-items: center; justify-content: center; column-gap: 6px; font-size: 15px; color: var(--gray); border: 1px solid var(--gray); border-radius: 100px;}
 
.bg {background-color: var(--bg);}

/* animation */
section:not(.main-visual) img.left {animation: petalFallLeft 8s linear infinite;}
section:not(.main-visual) img.right {animation: petalFallRight 7s ease-in infinite;}

@keyframes petalFallLeft {
  0% {
    transform: translate(0, -50px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(40px, 300px) rotate(120deg);
  }
  100% {
    transform: translate(-30px, 700px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes petalFallRight {
  0% {
    transform: translate(0, -50px) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  40% {
    transform: translate(-60px, 250px) rotate(180deg) scale(1);
  }
  70% {
    transform: translate(30px, 500px) rotate(260deg);
  }
  100% {
    transform: translate(-20px, 750px) rotate(420deg) scale(0.8);
    opacity: 0;
  }
}

.petal-float-1 {
  animation: petalFloat1 6s ease-in-out infinite;
  animation-duration: 6.3s;
}

@keyframes petalFloat1 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(6px, 8px) rotate(2deg); }
  50%  { transform: translate(-4px, 14px) rotate(-2deg); }
  75%  { transform: translate(5px, 8px) rotate(1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

.petal-float-2 {
  animation: petalFloat2 7s ease-in-out infinite;
  animation-duration: 7.1s;
}

@keyframes petalFloat2 {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(12px) rotate(3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.petal-float-3 {
  animation: petalFloat3 8s linear infinite;
  animation-duration: 8.4s;
}

@keyframes petalFloat3 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(5px, 10px) rotate(2deg); }
  50%  { transform: translate(0px, 18px) rotate(0deg); }
  75%  { transform: translate(-5px, 10px) rotate(-2deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* layout */
header {width: 100%; position: fixed; top: 0; height: 130px; z-index: 999999;}
header .inner {height: 100%; display: flex; align-items: center; justify-content: space-between;}
header.scroll{background-color: #fff; transition: all 0.3s; box-shadow: 0 1px 1px 0 rgba(0,0,0,.05);}
header .mo-btn{position:relative; font-size:0; width:36px; height:22px; cursor: pointer;}
header .mo-btn:before {position:absolute; content:''; top:0; left:0; width:2px; height:2px; border-radius:100%; background: #fff;}
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: #fff; transition:all 0.4s;}
header .mo-btn span:nth-child(1){width:calc(100% - 8px);}
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%;}
header .mo-btn:hover span:nth-child(1){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(--text1);}
.menu-open .mo-btn span,
header.scroll .mo-btn span {background: var(--text1);}
.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: #fff; visibility: hidden; opacity: 0; transition: 0.3s ease-out; display: flex; align-items: center; justify-content: center;}
#gnb_all > ul > li {display: flex; align-items: center; justify-content: center; flex-direction: column; border-bottom: 2px solid var(--text1); font-family: "Pretendard", sans-serif;}
#gnb_all > ul > li > a { font-size: 36px; padding: 20px 0; font-weight: 700;}
#gnb_all > ul > li:hover > a {color: #E1148F; transition: 0.3s;}
#gnb_all > ul > li:nth-of-type(1) {border-top: 2px solid var(--text1);}
#gnb_all .sub-menu li {font-size: 20px; text-align: center; padding: 4px 0;}
#gnb_all .sub-menu li:hover a {color: var(--primary); transition: 0.3s;}
#gnb_all .sub-menu li:last-of-type {padding-bottom: 20px;}

.footer-top {width: 100%; height: 68px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #FF8AC9, #FF5FAE);}
.footer-top p {color: #fff; text-align: center;}
footer {padding: 70px 0; background-color: var(--text1);}
footer .logo {display: flex; padding-bottom: 40px;}
footer ul { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 8px; padding-bottom: 24px;}
footer ul li {position: relative; color: #fff; 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(--text1); 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-color: var(--primary); border: 0; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);}

/* main */
/* 메인 배너 */
.main-visual {height: 820px; display: flex; align-items: center; justify-content: center; background: url(../img/main-visual-img.svg) no-repeat center center / cover;}
.main-visual .main-tit {display: flex; flex-direction: column; row-gap: 16px; z-index: 10; justify-content: center; text-align: center;}
.main-visual .main-tit b {font-weight: 700;}
.main-visual .left {top: 25%; left: 2%;}
.main-visual .right {top: 30%; right: 4%;}
.main-visual .center {bottom: -60px; right: 40%;}

/* 회사 소개 */
.section01 .text .title {position: relative;}
.section01 .text {margin-bottom: 100px;}
.section01 .text h5 {word-break: keep-all;}
.section01 .title {position: relative;}
.section01 .title > img:nth-of-type(2) {position: absolute; left: -90px; top: -82px; animation: spin 25s linear infinite;}
.section01 .card {row-gap: 20px;}
.section01 .card h4 {line-height: 1;}
.section01 .card .img-wrap {position: relative;}
.section01 .card .img-wrap::after {position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(17, 17, 17, 0), rgba(17, 17, 17, 1)); top: 0; bottom: 0; right: 0; left: 0; content: ''; display: block; z-index: 1;}
.section01 .card .img-wrap span {position: absolute; color: #fff; left: 50px; bottom: 40px; z-index: 2;}
.section01 .left {bottom: 90px; left: 5%;}
.section01 .right {right: 3%; top: 220px;}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 활동소식 */
.section02 .right {bottom: -30%; right: 20%;}

/* 활동기사 */
.section03 .center {bottom: -39%; right: -318px; z-index: -1;}

/* 지난호 웹진 */
.section04 {padding: 20px 0 180px 0;}
.section04 .right {bottom: 106px; right: 16%;}
.section04 .card .img-wrap {height: 488px;}
.section04 .card h5,
.section04 .card .text h5 {-webkit-line-clamp: 1;}

/* 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: #fff;}
.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: #fff; 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: #FFF5FA; 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: #fff; text-align: center; word-break: keep-all;}
.mo-btn-area a h5 {position: relative; z-index: 2; font-size: 20px; color: #fff; 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(--text1); 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(--text1);}

/*  장애인전용주차구역 */
.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: #fff; font-weight: 800; font-size: 14px; border-radius: 50%; background-color: #E1148F; margin-top: 3px;}

/* 반응형 */
@media screen and (max-width: 1800px) {
  .section03 .center {width: 39vw; bottom: -20vw; right: -16vw; z-index: -1;}
}
@media screen and (max-width: 1520px) {
}
@media screen and (max-width: 1440px) {

  .section04 .card .img-wrap {height: 34vw;}
}
@media screen and (max-width: 1280px) {
  .section01 .text h5 br:nth-of-type(2) {display: none;}

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

  .section-200,
  .section-180 {padding: 120px 0;}
  .section-140 {padding: 100px 0;}
  
  .common-flex-2 a {width: 100%;}
  .common-flex-2 .img-wrap {height: 40vw;}
  .card {row-gap: 30px;}

  .main-visual {height: 80vw;}
  .main-visual .main-tit {row-gap: 1vw;}
  .main-visual .main-tit h2 {font-size: 7vw;}
  .main-visual .main-tit h3 {font-size: 4vw;}
  .main-visual .left {width: 20vw; height: auto;}
  .main-visual .right {width: 19vw; height: auto;}
  .main-visual .center {width: 18vw; height: auto; bottom: -8vw;}

  .section04 {padding: 0 0 120px 0;}
}
@media screen and (max-width: 768px) {

  .section-200,
  .section-180 {padding: 100px 0;}
  .section-140 {padding: 80px 0;}

  section h4 {font-size: 32px;}

  .title {margin-bottom: 30px;}
  .title img {height: 36px;}

  #top_btn {right: 4%;}

  .common-flex-2 .img-wrap {height: 48vw;}
  .common-flex-4 a {width: calc(100% / 2 - 12px);}

  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;}
  
  .section01 .text h5 {font-size: 20px; word-break: keep-all;}
  .section01 .card .img-wrap span {left: 6vw; bottom: 5vw;}
  .section01 .title > img:nth-of-type(2) {width: 140px; height: 140px; top: -64px; left: -68px;}

  .section04 {padding: 0 0 100px 0;}
  .section04 .card .img-wrap {height: 68vw;}

  /* 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;}
  
  section h4 {font-size: 28px;}
  section h5 {font-size: 22px;}
  
  .main-visual .main-tit h3 {font-size: 4vw;}
  .common-flex-2 .img-wrap {height: 58vw;}
  
  .section01 .text {margin-bottom: 80px;}
  .section01 .card .img-wrap span {font-size: 5vw;}
  .section04 .card .img-wrap {height: 61vw;}
  .section04 .card h5,
  .section04 .card .text h5 {-webkit-line-clamp: 2;}

  .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) {
  
  .br-30 {border-radius: 20px;}
  .common-flex {row-gap: 15vw;}
  .common-flex-2 a {row-gap: 20px;}
  .common-flex-2 .img-wrap {height: 54vw;}
  
  footer .logo img {width: 80%;}

  .section-200,
  .section-180,
  .section-140 {padding: 80px 0;}
  
  .section01 {padding: 24vw 0;}
  .section01 .card .btn-area .more-btn {width: 40px; font-size: 0;}
  .section01 .text h5 {font-size: 5.5vw;}
  .section01 .text .title {margin-bottom: 8vw;}
  .section01 .text .title h4,
  .section02 .common-flex-2 a .title h4 {font-size: 7vw;}
}

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

  .common-flex-4 a {width: 100%;}
  .section04 .card .img-wrap {height: 130vw !important;}
}

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