@charset "utf-8";

.header .logo svg .text path { fill:#fff; }
.header .gnb__list > li.all > a::after { border-color: #fff; background-image: url("/img/common/gnb_arrow_s_w.svg"); }
.header .gnb__list > li > a { color: #fff; }

.header.on .logo svg .text path { fill:#231F20; }
.header.on .gnb__list > li.all > a::after { background-image: url("/img/common/gnb_arrow_s.svg"); }
.header.on .gnb__list > li > a { color: #111; }

.main section .inner { max-width: 1820px; }

.main-visual { position: relative; min-height: 600px; height: 100vh; background-color: gray; }
.main .main-visual .inner { max-width: 1680px; }
.visual-swiper { height: 100%; }
.visual-swiper .swiper-slide { height: 100%; }
.visual-swiper .swiper-slide::before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.00) 100%); z-index: 3; }
.visual-swiper .swiper-slide::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 29.25%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.00) 100%); z-index: 3; }
.visual-swiper .swiper-slide > a { display: block; width: 100%; height: 100%; }
.visual-swiper .swiper-slide img { position: absolute; left: 0; top: 0; width: 100%; min-height: 100%; object-fit: cover; z-index: 1; }
.visual-swiper .swiper-slide .inner { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-bottom: 12px; z-index: 5; }
.visual-swiper .swiper-slide .inner .hide-box { overflow: hidden; }
.visual-swiper .visual__title { font-size: clamp(30px,5.21vw,100px); font-weight: 700; color: #fff; }
.visual-swiper .visual__text { margin-top: 2.5em; font-size: clamp(14px,1.25vw,24px); line-height: 1.6; color: #fff; }
.visual-swiper .swiper-slide-active .visual__title { animation: textUp 0.8s 0.8s ease-out both; }
.visual-swiper .swiper-slide-active .visual__text { animation: textUp 0.8s 1.6s ease-out both; }
.visual-swiper .swiper-slide-active.first .visual__title { animation: textUp 0.8s ease-out both; }
.visual-swiper .swiper-slide-active.first .visual__text { animation: textUp 0.8s 0.8s ease-out both; }
.visual-swiper .swiper-slide.swiper-slide-active img { animation: visualScale 10s 0.8s ease-out both; }
.visual-swiper .swiper-slide.swiper-slide-active.first img { animation: visualScale 10s ease-out both; }
.swiper-opt__wrap { position: absolute; left: 50%; bottom: 100px; display: flex; align-items: center; column-gap: 43px; transform: translateX(-50%); z-index: 10; }
.swiper-button-next, .swiper-button-prev { position: relative; left: auto; right:auto; top: auto; width: 100px; height: 100px; margin-top: 0; border: 1px solid #fff; border-radius: 50%; }
.swiper-button-next::before, .swiper-button-prev::before { content: ""; position: absolute; left: 50%; top: 50%; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; transform: translate(-50%, -50%); transition: 0.3s ease-out; }
.swiper-button-next::after, .swiper-button-prev::after { position: absolute; left: 50%; top: 50%;  width: 11px; height: 18px; font-size: 0; opacity: 0; transition: 0.3s ease-out; background: no-repeat center center/contain; }
.swiper-button-next::after { transform: translate(-50%, -50%) scale(0) rotate(-90deg); }
.swiper-button-prev::after { transform: translate(-50%, -50%) scale(0) rotate(90deg); }
.swiper-button-next::after { background-image: url("/img/main/swiper_next.svg"); }
.swiper-button-prev::after { background-image: url("/img/main/swiper_prev.svg"); }
.swiper-button-next:hover::before, .swiper-button-prev:hover::before { opacity: 0; }
.swiper-button-next:hover::after, .swiper-button-prev:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
.swiper-pagination-fraction { position: static; display: flex; align-items: center; column-gap: 20px; width: fit-content; }
.swiper-pagination-fraction > span:not(.dot) { min-width: 15px; font-size: 20px; font-weight: 500; color: #fff; }
.swiper-pagination-fraction > .swiper-pagination-current { color: rgba(255, 255, 255, 0.6); }
.swiper-pagination-fraction .dot { width: 3px; height: 3px; background-color: #fff; border-radius: 50%; }
.scroll-text { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 10; }
.scroll-text > p { font-size: 17px; font-weight: 600; color: #fff; transform: translateY(-4px); animation: scrollText 1.6s ease-out infinite both; }
.scroll-text > .bar { position: relative; margin-top: 20px; width: 4px; height: 60px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.2); }
.scroll-text > .bar::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 50%; border-radius: 4px; background-color: #fff; animation: scrollAni 4s infinite both; }

.main-content { overflow: hidden; position: relative; }
.main-content::before { content: ""; position: absolute; left: 50%; top: -71px; display: block; width: 111.1vw; aspect-ratio: 1.77/1; background: url("/img/main/main_bg_01.png") no-repeat center bottom/ cover; transform: translateX(-50%) scale(0.927); transition: 0.6s; }
.main-content.ani::after { width: 0; }
.phrase__wrap { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; padding: 50px 0; z-index: 10;}
.phrase__wrap .object-img { position: absolute; opacity: 0; transition: 0.6s; margin-top: 50px; }
.phrase__wrap .object-img.bulb { left: 0; top: 36.3%; width: clamp(200px,25.94vw,498px);  }
.phrase__wrap .object-img.ball { right: 102px; top: 10.6%; width: clamp(147px,19.17vw,368px); }
.phrase__wrap .row { overflow: hidden; display: flex; align-items: center; }
.phrase__wrap .row + .row { margin-top: 15px; }
.phrase__wrap .row.mt-text { margin-top: 29px; }
.phrase__wrap .row span { display: inline-block; font-size: 48px; font-weight: 600; color: #111; }
.phrase__wrap .row .tag { padding: 0.4em 0.79em; border-radius: 100px; color: #fff; margin: 0 20px; transform: translateY(101%); transition: transform 0.4s calc(0.1s * var(--time) + 0.3s) ease-out; }
.phrase__wrap .row .tag.yellow { background-color: #FFC121; margin: 0; }
.phrase__wrap .row .tag.green { position: relative; background-color: #A6CE39; left: -5px; margin: 0; }
.phrase__wrap .row .tag.blue { position: relative; background-color: #3A90CF; left: -10px; margin-left: 0; }
.phrase__wrap .row .tag.pink { background-color: #D95389; }
.phrase__wrap .row .tag.violet { background-color: #876BC2; }
.phrase__wrap .row .tag.img { overflow: hidden; width: 0; padding: 0; opacity: 0; transition: width 0.8s calc(0.1s * var(--time) + 0.3s) ease-out, opacity 0.8s calc(0.1s * var(--time) + 0.3s) ease-out; }
.phrase__wrap .row .tag.img img { width: clamp(107px,15.625vw,300px); max-width: initial; }
.phrase__wrap .row .text { transform: translateY(125%); transition: transform 0.4s calc(0.1s * var(--time) + 0.3s) ease-out; }

[data-aos="text-ani"].aos-animate .object-img { opacity: 1; margin-top: 0; animation: objectMove 1.2s 1.2s infinite linear both; }
[data-aos="text-ani"].aos-animate .row .tag { transform: translateY(0); }
[data-aos="text-ani"].aos-animate .row .text { transform: translateY(0); }
[data-aos="text-ani"].aos-animate .row .tag.img { opacity: 1; width: clamp(107px,15.625vw,300px); }

.content__box { padding: 0 50px; }
.content__box + .content__box { margin-top: 160px; }
.content__box.line { padding: 70px 50px 55px; border: 1px solid rgba(255,203,5, 0.5); border-radius: 50px; background-color: #fff; }
.content__box.bg { position: relative; margin-top: 120px; padding-bottom: 200px; }
.content__box.bg::before { content: ""; position: absolute; left: 50%; bottom: 0; display: block; width: 100vw; aspect-ratio: 6.71/1; background: url("/img/main/main_bg_04.png") no-repeat center bottom/contain; transform: translateX(-50%); }
.content__box .title-box { display: flex; margin-bottom: 40px;}
.content__box .title-box .num { width: 50px; font-size: 24px; line-height: 50px; border-radius: 50%; font-weight: 600; color: #fff; background-color: var(--main-color2); text-align: center; }
.content__box .title-box .title { padding: 0 24px; line-height: 48px; border: 1px solid var(--main-color2); border-radius: 50px; font-size: 22px; font-weight: 500; color: #555; background-color: #fff; }
.content__box:nth-child(1) { position: relative; }
.content__box:nth-child(1)::before { content: ""; position: absolute; left: 50%; bottom: -29.76%; display: block; width: 100vw; aspect-ratio: 4.44/1; background: url("/img/main/main_bg_02.png") no-repeat center center/contain; transform: translateX(-50%); z-index: -1; }
.content__box:nth-child(2) { position: relative; }
.content__box:nth-child(2)::before { content: ""; position: absolute; left: 65.1vw; bottom: -55.4%; display: block; width: 65.1vw; aspect-ratio: 1.96/1; background: url("/img/main/main_bg_03.png") no-repeat center center/contain; transform: translateX(-50%); z-index: -1; }
.content__box:nth-child(2) .title-box .num { background-color: #555555; }
.content__box:nth-child(2) .title-box .title { border-color: #555555; }
.content__box:nth-child(3) .title-box .num { background-color: #A6CE39; }
.content__box:nth-child(3) .title-box .title { border-color: #A6CE39; }
.service-swiper__wrap { position: relative; height: 600px; /* margin-top: 65px; */ }
.service-swiper { height: 100%; }
.service-swiper .swiper-slide { overflow: hidden; position: relative; border-radius: 20px; height: fit-content; transition: width 0.8s; }
.service-swiper .swiper-slide::before { content: ""; display: block; padding-top: 57.1%; }
.service-swiper .swiper-slide img { position: absolute; width: 100%; min-height: 100%; object-fit: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.service-swiper .swiper-slide .text-box { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 58.3%; padding: 50px; background: linear-gradient(0deg, #FFA514 21.13%, rgba(255, 165, 20, 0.00) 100%); visibility: hidden; opacity: 0; transform: translateY(50px); transition: 0.4s ease-out; }
.service-swiper .swiper-slide .text-box .title { font-size: 45px; font-weight: 700; color: #fff; }
.service-swiper .swiper-slide .text-box .text { margin-top: 1.25em; font-size: 20px; font-weight: 300; color: rgba(255, 255, 255, 0.8); }
.service-swiper .swiper-slide.swiper-slide-active:hover .text-box { visibility: visible; opacity: 1; transform: translateY(0); } 
.service-swiper .swiper-opt__wrap { left: auto; right: 0; bottom: 50%; transform: translateY(calc(50% + 10px)); column-gap: 10px; z-index: 5; }
.service-swiper .swiper-button-next, .service-swiper .swiper-button-prev { width: 80px; height: 80px; border-color: #BBBBBB; transition: 0.4s; }
.service-swiper .swiper-button-next:hover, .service-swiper .swiper-button-prev:hover {  border-color: var(--main-color2); background-color: var(--main-color2); }
.service-swiper .swiper-button-next::before, .service-swiper .swiper-button-prev::before { display: none; }
.service-swiper .swiper-button-next::after{ width: 40px; height: 40px; background-image: url("/img/main/swiper_next_gray.svg"); opacity: 1; transform: translate(-50%,-50%) scale(1); transition: 0.4s; }
.service-swiper .swiper-button-prev::after { width: 40px; height: 40px; background-image: url("/img/main/swiper_prev_gray.svg"); opacity: 1; transform: translate(-50%,-50%) scale(1); transition: 0.4s; }
.service-swiper .swiper-button-next:hover::after, .service-swiper .swiper-button-prev:hover::after { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.tag__area { position: absolute; right: 0;bottom: 0; width: 100%; max-width: 650px; z-index: 10; }
.tag__box { display: none; }
.tag__box.on { display: block; }
.tag__box > .flex { display: flex; flex-wrap: wrap; gap: 15px 10px; }  
.tag__box > .flex .tag { display: flex; justify-content: center; align-items: center; width: calc((100% - 10px)/2);  height: 56px; border: 1px solid #DDDDDD; border-radius: 100px; color: #343D42; text-align: center; transition: 0.4s; }
.tag__box > .flex .tag > div { position: relative; display: flex; justify-content: center; align-items: center; width: fit-content; height: 100%; }
.tag__box > .flex .tag .text { font-size: 18px; line-height: 1; font-weight: 500; transition: 0.4s; }
.tag__box > .flex .tag > div::after { content: ""; position: absolute; right: -14px; top: 50%; display: block; width: 14px; height: 14px; background: url("/img/main/icon_link_more_01.svg") no-repeat center center/contain; opacity: 0; transform: translateY(-50%); transition: 0.4s; }
.tag__box > .flex .tag.col-3 { width: calc((100% - 20px)/3); }
.tag__box > .flex .tag:hover { border-color: #343D42; background-color: #343D42; color: #fff; }
.tag__box > .flex .tag:hover .text { transform: translateX(-10px); }
.tag__box > .flex .tag:hover > div::after { opacity: 1; } 
.story__wrap > .row { display: flex; flex-wrap: wrap; gap: 20px; }
.story__wrap > .row + .row { margin-top: 20px; } 
.story__wrap .item__box { height: 360px; border-radius: 20px; }
.story__wrap .item__box > a { display: block; position: relative; height: 100%; }
.story__wrap > .row-01 .item__box { width: calc(50% - 10px); }
.story__wrap > .row-02 .item__box:first-child { width: 69.77%; }
.story__wrap > .row-02 .item__box:last-child { width: calc(30.23% - 20px); }
.story__wrap .item__box .text-box { position: relative; padding: 60px 60px 57px; height: 100%; z-index: 5; }
.story__wrap .item__box .sub-title { display: inline-block; margin-bottom: 1em; font-size: 20px; font-weight: 600; }
.story__wrap .item__box .main-title { display: block; font-size: 36px; font-weight: 600; line-height: 1.5; }
.story__wrap .item__box .link-more { position: relative; display: inline-block; width: 60px; height: 60px; margin-top: 26px; border: 2px solid #fff; border-radius: 50%; transition: 0.4s ease-out; }
.story__wrap .item__box .link-more > span { position: absolute; left: 50%; top: 50%; display: inline-block; width: 20px; height: 2px; background-color: #fff; transform: translate(-50%, -50%); }
.story__wrap .item__box .link-more > span:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg); }
.story__wrap .item__box .img-box { position: absolute; bottom: 50%; transform: translateY(50%); transition: 0.4s ease-out; }
.story__wrap .item__box .img-box img {transition: transform 0.4s ease-out; }
.story__wrap .item__box:hover .link-more { transform: rotate(-180deg); }
.story__wrap .item__box:hover .img-box img { transform: translateY(-10px); }
.story__wrap .item__box.green { background-color: #E5FFD8; }
.story__wrap .item__box.green .sub-title { color: #80B166; }
.story__wrap .item__box.green .link-more { border-color: #80B166; }
.story__wrap .item__box.green .link-more > span { background-color: #80B166; }
.story__wrap .item__box.green .img-box { /*right: 8.23%;*/right: 2.5%; width: 44.2%; }
.story__wrap .item__box.yellow { background-color: #FFF7D8; }
.story__wrap .item__box.yellow .sub-title { color: #FFA514; }
.story__wrap .item__box.yellow .link-more { border-color: #FFA514; }
.story__wrap .item__box.yellow .link-more > span { background-color: #FFA514; }
.story__wrap .item__box.yellow .img-box { right: 10.35%; width: 37.4%; }
.story__wrap .item__box.pink { background-color: #FFE3EE; }
.story__wrap .item__box.pink .sub-title { color: #D77CA0; }
.story__wrap .item__box.pink .link-more { border-color: #D77CA0; }
.story__wrap .item__box.pink .link-more > span { background-color: #D77CA0; }
.story__wrap .item__box.pink .img-box { right: 10.58%; bottom: 0; width: 40.16%; transform: translateY(10px); clip-path: inset(0 0 10px 0); }
.story__wrap .item__box.blue { background-color: #D8EEFF; }
.story__wrap .item__box.blue .sub-title { color: #3A90CF; }
.story__wrap .item__box.blue .link-more { border-color: #3A90CF; }
.story__wrap .item__box.blue .link-more > span { background-color: #3A90CF; }
.story__wrap .item__box.blue .img-box { right: 0; bottom: 0; width: 53.2%; transform: translateY(0); }

.title-box-2 { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 74px; }
.title-box-2 > .title { font-size: clamp(20px,3.125vw,60px); font-weight: 500; color: #111; }
.notice__list { display: flex; flex-wrap: wrap; gap: 30px; }
.notice__list > li { overflow: hidden; width: calc((100% - 90px)/4); border-radius: 20px; background-color: #FAFBFB; transition: 0.4s ease-out; }
.notice__list .text-box { padding: 40px 30px; }
.notice__list .text-box > * { transition: 0.4s ease-out; }
.notice__list .text-box .tag { display: inline-block; margin-bottom: 30px; padding: 10px 20px; font-size: 17px; font-weight: 600; color: #777; border-radius: 10px; background-color: #EFF1F2; }
.notice__list .text-box .title { overflow: hidden; min-height: 3.2em; margin-bottom: 1.25em; font-size: 24px; font-weight: 600; line-height: 1.6; color: #333; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notice__list .text-box .date { font-size: 18px; color: #999; }
.notice__list .img-box { position: relative; }
.notice__list .img-box::before { content: ""; display: block; padding-top: 66.34%; }
.notice__list .img-box img { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); transition: 0.4s ease-out; }
.notice__list > li:hover { background-color: #343D42; transform: translateY(-14px); }
.notice__list > li:hover .text-box .tag { color: rgba(255, 255, 255, 0.6); background-color: #444F56; }
.notice__list > li:hover .text-box .title { color: #fff;}
.notice__list > li:hover .img-box img { transform: translate(-50%, -50%) scale(1.049); }

@keyframes textUp {
    0%{ transform: translateY(100%); }
    100%{ transform: translateY(0); }
}
@keyframes textUp2 {
    0%{ transform: translateY(125%); }
    100%{ transform: translateY(0); }
}
@keyframes visualScale{
    0%{ transform:scale(1.05); }
    100%{ transform:scale(1); }
}
@keyframes scrollText {
    0%{ transform: translateY(-4px); }
    50%{ transform: translateY(0); }
    100%{ transform: translateY(-4px); }
}
@keyframes scrollAni {
    0%{ top: 0; }
    74%{ top: 50%; }
    76.7%{ top: 50%; }
    100%{ top: 0; }
}
@keyframes objectMove {
    0%{ transform: translateY(0);}
    50%{ transform: translateY(10px); }
    100%{ transform: translateY(0); }
}

@supports (height: 100svh) {
    .main-visual, .main-content::after, .phrase__wrap { height: 100svh; }
}

@media screen and (max-width:1640px) {
    .phrase__wrap .row span { font-size: clamp(17px,2.9vw,48px); }
    .story__wrap .item__box .main-title { font-size: clamp(16px,2.19vw,36px); }
    .story__wrap .item__box .img-box { bottom: 5%; transform: none; }
    .service-swiper .swiper-slide .text-box .title { font-size: clamp(18px,2.74vw,45px); }
    .service-swiper .swiper-slide .text-box .text { font-size: clamp(14px,1.219vw,20px); }
    .notice__list .text-box .tag { margin-bottom: 20px; font-size: 16px; }
    .notice__list .text-box .title { font-size: 20px; }
    .notice__list .text-box .date { font-size: 16px; }
}
@media screen and (max-width:1400px) {
    .notice__list { gap:20px; }
    .notice__list > li { width: calc((100% - 60px)/4); }
    .notice__list .text-box { padding: 30px 20px; }
}
@media screen and (max-width:1200px) {
    .header .logo svg .text path { fill:#231F20; }
    .main { padding-top: var(--header-H); }
    .main-visual { height: calc(100vh - var(--header-H)); }
    .visual-swiper .swiper-slide .inner { padding-bottom: 0; }
    .swiper-opt__wrap { column-gap: 20px; }
    .swiper-button-next, .swiper-button-prev { width: 60px; height: 60px; }
    .swiper-pagination-fraction > span:not(.dot) { font-size: 16px; }
    .phrase__wrap .object-img.bulb { left: -3%; }
    .phrase__wrap .object-img.ball { right: 0; }
    .content__box.line { padding: 30px 20px; }
    .service-swiper__wrap { height: auto; }
    .service-swiper { height: 360px; }
    .service-swiper .swiper-opt__wrap { bottom: 0; transform: none; }
    .service-swiper .swiper-slide .text-box { padding: 30px; }
    .tag__area { position: static; margin-top: 40px; margin-left: auto; }
    .content__box { padding: 20px; }
    .story__wrap .item__box { height: 320px; }
    .story__wrap .item__box .text-box { padding: 30px; }
    .story__wrap .item__box.green .img-box, .story__wrap .item__box.yellow .img-box, .story__wrap .item__box.pink .img-box { right:0; }
    .notice__list > li { width: calc(50% - 10px); }
    .notice__list .text-box .tag { margin-bottom: 1em; padding: 4px 10px; border-radius: 5px; font-size: 14px; }
    .notice__list .text-box .date { font-size: 14px; }
    
    @supports (height: 100svh) {
        .main-visual { height: calc(100svh - var(--header-H)); }
    }
}
@media screen and (min-width:1025px) {
    .main-content.ani::before { transform: translateX(-50%) scale(1); }
    .main-content.ani::after { width: 0; }
    .service-swiper .swiper-slide.swiper-slide-active, .service-swiper .swiper-slide.swiper-slide-duplicate-active { width: calc(50% - 20px) !important; }
    .service-swiper .swiper-slide.swiper-slide-active::before, .service-swiper .swiper-slide.swiper-slide-duplicate-active::before { padding-top: 71.43%; }
}
@media screen and (max-width:1024px) {
    .scroll-text { display: none; }
    .swiper-opt__wrap { justify-content: center; bottom: 40px; }
    .swiper-button-next, .swiper-button-prev { width: 40px; height: 40px; }
    .swiper-button-next::before, .swiper-button-prev::before { width: 3px; height: 3px; }
    .swiper-button-next::after, .swiper-button-prev::after { width: 8px; height: 13px; }
    .swiper-pagination-fraction { column-gap: 10px; }
    .swiper-pagination-fraction > span:not(.dot) { font-size: 14px; }

    .content__box { padding: 0px; }
    .content__box + .content__box { margin-top: 80px; }
    .content__box.bg { padding-bottom: 100px; }
    .main-content::before { top: 350px; transform: translate(-50%, -50%) scale(1); }
    .main-content::after { display: none; }
    .title-box-2 { margin-bottom: 50px; }
    .content__box.line { border-radius: 30px; }
    .content__box .title-box { margin-bottom: 20px; }
    .content__box .title-box .num { width: 40px; line-height: 40px; font-size: 20px; }
    .content__box .title-box .title { padding: 0 16px; font-size: 18px; line-height: 38px; }
    .phrase__wrap { height: 700px; }
    .phrase__wrap .row + .row { margin-top: 7px; }
    .phrase__wrap .row.mt-text { margin-top: 14px; }
    .phrase__wrap .row .tag { margin: 0 10px; }
    .story__wrap .item__box { height: 260px; }
    .service-swiper { height: auto; }
    .service-swiper__wrap { margin-top: 0; }
    .service-swiper .swiper-slide.swiper-slide-active .text-box { visibility: visible; opacity: 1; transform: translateY(0); } 
    .service-swiper .swiper-opt__wrap { position: static; margin-top: 30px; }
    .service-swiper .swiper-button-next, .service-swiper .swiper-button-prev { width: 50px; height: 50px; }
    .service-swiper .swiper-button-prev::after, .service-swiper .swiper-button-next::after { width: 35px; height: 35px; }
    .tag__area { margin: 30px auto 0; }
    .tag__box > .flex .tag { height: 45px; }
    .tag__box > .flex .tag .text { font-size: 16px; }
    .notice__list .text-box { padding: 20px; }
    .notice__list .text-box .title { font-size: 18px; }
}
@media screen and (max-width:768px) {
    .main-visual { min-height: 450px; max-height: 550px; }
    .visual-swiper .visual__text { margin-top: 2em; }
    .main-content::before  { top: 250px; }
    .title-box-2 { display: block; margin-bottom: 30px; }
    .title-box-2  .btn-link-02 { margin-top: 20px; margin-left: auto; }
    .phrase__wrap { height: 500px; }
    .phrase__wrap .object-img.bulb { left: -50px;  top: 45.5%;}
    .phrase__wrap .object-img.ball { right: -20px; top: 15.6%; }
    .phrase__wrap .row + .row { margin-top: 4px; }
    .phrase__wrap .row .tag { margin: 0 4px; }
    .phrase__wrap .row .tag.blue { margin-right: -5px; }

    .content__box.line { padding: 20px 10px; }
    .content__box .title-box .num { font-size: 18px; }
    .content__box .title-box .title { font-size: 16px; }
    .service-swiper .swiper-slide .text-box { height: 70%; padding: 14px; }
    .service-swiper .swiper-slide .text-box .text { margin-top: 0.5em; }
    .tag__box > .flex { gap: 10px 5px; }
    .tag__box > .flex .tag { width: calc(50% - 2.5px); height: 40px; }
    .tag__box > .flex .tag.col-3 { width: calc(50% - 2.5px); }
    .tag__box > .flex .tag .text { font-size: 13px; }
    .tag__box > .flex .tag > div::after { width: 10px; height: 10px; right:-10px; }
    .tag__box > .flex .tag:hover .text { transform: translateX(-4px); }

    .story__wrap .item__box { height: auto; }
    .story__wrap .item__box .text-box { padding: 20px; }
    .story__wrap .item__box .sub-title { font-size: 14px; }
    .story__wrap .item__box .link-more { width: 40px; height: 40px; }
    .story__wrap .item__box .link-more > span { width: 15px; }
    .story__wrap > .row { gap: 10px; }
    .story__wrap > .row + .row { margin-top: 10px; }
    .story__wrap > .row-01 .item__box { width: 100%; }
    .story__wrap > .row-02 .item__box:nth-child(n) { width: 100%; }
    .story__wrap .item__box .img-box { max-width: 30%; }
}
@media screen and (max-width:500px) {
    .phrase__wrap .object-img.bulb { left: -100px; }
    .phrase__wrap .object-img.ball { right: -50px; }
    .story__wrap .item__box .img-box { display: none; }
    .story__wrap .item__box .link-more { position: absolute; right: 20px; top: 50%; margin-top: 0; transform: translateY(-50%); }
    .story__wrap .item__box:hover .link-more { transform: translateY(-50%) rotate(-180deg); }
    .notice__list > li { width: 100%; } 
}