/* common.css */
:root {
  --primary : #141B28;

  --ff-pret : "Pretendard";
  --ff-popp : "Poppins", sans-serif;
}
#wrap { background: var(--primary);}

/* util */
.br-mo {display: none;}
.br-pc {display: block;}

img {max-width: 100%;}


/* ani */
.fade-zoom-in {transform: scale(1.1); opacity: 0; transition-property: transform, opacity; transition-duration: 1.6s, 1s; display: block;}
.ani-started .fade-zoom-in {opacity: 1; transform: scale(1);}

.fade-up {transform: translateY(50px); opacity: 0; transition-property: transform, opacity; transition-duration: 0.8s, 0.8s;}
.ani-started .fade-up {opacity: 1; transform: translateY(0);}

.fade-in {opacity: 0; transition-property: opacity; transition-duration: 0.8s;}
.ani-started .fade-in {opacity: 1;}

.ani-started [data-delay="0.2"] {transition-delay: 0.2s;}
.ani-started [data-delay="0.4"] {transition-delay: 0.4s;}
.ani-started [data-delay="0.6"] {transition-delay: 0.6s;}
.ani-started [data-delay="0.8"] {transition-delay: 0.8s;}


/* header */
header {width: 100%; position: fixed; left: 0; top: 0;  z-index: 999; overflow: hidden; }
header .inner {padding: 50px 80px; font-size: 0;}
header .logo {height: 40px;}
header .logo img {height: 100%;}

@media screen and (max-width:1024px){
  header .inner {padding: 24px 5%;}
  header .logo {height: 24px;}
}
@media screen and (max-width:480px){
  header .inner {padding: 16px 5%;}
  header .logo {height: 20px;}
}



/* footer */
footer {padding-bottom: var(--gap-80); }
footer .inner {padding: 0 80px; width: 100%; font-family: var(--ff-popp);}
footer .f-top {border-top: 1px solid rgba(255, 255, 255, 0.3); padding: 40px 0; font-weight: 600; font-size: var(--font-25); }
footer .f-top ul {display: flex; justify-content: end; align-items: center; gap: 72px; line-height: 1.2; }
footer .f-btm {margin-top: 40px; display: flex; justify-content: space-between; align-items: end; }
footer .f-btm .logo {font-size: 0; height: 60px;}
footer .f-btm .logo img {height: 100%;}
footer .f-btm .copyright {font-size: var(--font-20); font-weight: 500; color: #5A5F68; }

@media screen and (max-width:1260px) {
    footer .f-top ul {gap: var(--gap-40);}
}
@media screen and (max-width:1024px) {
    footer .inner {padding: 0 5%;}
    footer .f-top {padding: 24px 0;}
    footer .f-btm .logo {height: 44px;}
}
@media screen and (max-width:768px){
  footer .f-top ul {gap: 8px 16px; font-size: 16px; flex-wrap: wrap;}
  footer .f-btm {flex-direction: column; align-items: start; gap: 8px; }
  footer .f-btm .logo {height: 28px;}
  footer .f-btm .copyright {font-size: 13px; text-align: right;}
}
@media screen and (max-width:480px){
  footer .f-top ul { font-size: 14px; }
}



/* 공통 section */
section {width: 100%; box-sizing: border-box;  overflow: hidden; position: relative;}
section .anchor {position: absolute; left: 0; top: calc(var(--gap-80)*-1);}
section .inner {width: 90%; margin: 0 auto;}
section .head {text-align: center;}
section .head .sub-tit {font-family: var(--ff-popp); font-size: 30px; font-weight: 600; line-height: 1.1;}
section .head h2 {font-family: var(--ff-popp); font-weight: 800; font-size: 120px; line-height: 1.1; color: inherit;}
section .head .desc {font-weight: 500; font-size: 25px;}

section .bg-box {background: linear-gradient(to bottom, #FFFFFF, #D9E8FF); border-radius: 40px;}

section .br-mo {display: none;}
section .br-pc {display: block;}

@media screen and (max-width:1480px){
    section .head h2 {font-size: 100px;}
}
@media screen and (max-width:1260px){
    section .head h2 {font-size: 90px;}
    section .head .desc {font-size: 20px;}
}
@media screen and (max-width:1024px){
    section .head .sub-tit {font-size: 25px;}
  section .head h2 {font-size: 68px;}
  section .head .desc {font-size: 18px;}
}
@media screen and (max-width:768px){
    section .head .sub-tit {font-size: 20px;}
    section .head h2 {font-size: 54px;}
    section .head .desc {font-size: 16px;}

    section .br-mo {display: block;}
    section .br-pc {display: none;}

    section .bg-box {border-radius: 20px;}
  
}
@media screen and (max-width:480px){
    section .head .sub-tit {font-size: 18px;}
    section .head h2 {font-size: 40px;}
    section .head .desc {font-size: 14px;}
}

/* sect1 */
.sect1 { position: relative; overflow: visible;}
.sect1 .sticky-box {position: sticky; left: 0; top: 0; padding-top: calc(var(--gap-80)*2.75); width: 100%;}
.sect1 .head {margin-bottom: var(--gap-80); }
.sect1 .head h2 {margin: var(--gap-40) 0;}
.sect1 .cont {width: 100%;}
.sect1 .cont .img-box {width: 100%; font-size: 0; clip-path: inset(0 calc(50% - 650px) 0 calc(50% - 650px) round 40px 40px 40px 40px); overflow: hidden;}
.sect1 .cont .img-box img {width: 100%;}
@media screen and (max-width:1024px) {
    .sect1 .sticky-box {padding-top: calc(var(--vh)*10);}
    .sect1 .cont .img-box {height: calc(var(--vh)*90 - 200px);}
    .sect1 .cont .img-box img {height: 100%; object-fit: cover; }
}
@media screen and (max-width:768px){
}
@media screen and (max-width:480px){
    .sect1 .sticky-box {padding-top: calc(var(--vh)*15);}
    .sect1 .cont .img-box {height: calc(var(--vh)*85 - 200px);}
}

/* sect2 */
.sect2 {margin-top: calc(var(--gap-80)*3);}
.sect2 .head {}
.sect2 .cont {}
.sect2 .cont .line {font-family: var(--ff-popp); line-height: 1.1; font-size: 100px; font-weight: 800; text-align: center; display: flex; justify-content: center; gap: 20px; align-items: center; margin: 55px 0;}
.sect2 .cont .line .img {--width:200px; height: calc(var(--width)*0.55); width: 0px; display: block; position: relative; border-radius: 55px; transition-property: width; transition-duration: 0.5s; }
.sect2 .cont .line .img .ing {width: 100%; font-size: 0; position: absolute; left: 0; bottom: 0;}
.sect2 .cont p {margin-top: 3.6em; font-weight: 500; font-size: var(--font-25); text-align: center;}

.sect2 .cont .line .img1 {background: linear-gradient(to bottom, #E5ECF9, #A2BDEE, #20365E);}
.sect2 .cont .line .img2 {background: linear-gradient(to bottom, #FFFCF5, #EBD5A5, #654A11); transition-delay: 0.2s;}

.sect2.ani-started .cont .line .img {width: var(--width);}
@media screen and (max-width:1640px) {
    .sect2 .cont .line {font-size: 72px;}
    .sect2 .cont .line .img {--width:164px;}
}
@media screen and (max-width:1260px){
    .sect2 .cont .line {flex-wrap: wrap; }
    .sect2 .cont .line span:last-child {width: 100%;}
}
@media screen and (max-width:1024px){
    .sect2 .cont .line {font-size: 62px; margin: 0.5em 0;}
    .sect2 .cont .line .img {--width:138px; }
}
@media screen and (max-width:768px){
    .sect2 .cont .line {font-size: 42px; gap: 0.5em 0.3em;}
    .sect2 .cont .line .img {--width:100px;}
}
@media screen and (max-width:480px){
    .sect2 .cont .line {font-size: 34px; }
    .sect2 .cont .line .img {--width:94px;}
}

/* sect3 */
.sect3 {color: var(--primary); margin-top: calc(var(--gap-80)*3);}
.sect3 .inner {width: calc(100% - 40px); overflow: hidden; padding: calc(var(--gap-80)*2.25) 0 calc(var(--gap-80)*2.5);}
.sect3 .head {margin-bottom: var(--gap-100);}
.sect3 .head h2 {margin-bottom: var(--gap-40);}
.sect3 .rolling {font-weight: 800; --size:50px; font-size: var(--size); overflow: hidden;}
.sect3 .rolling + .rolling {margin-top: 30px;}
.sect3 .rolling .roll-wrap {display: flex; align-items: center; width: max-content; }
.sect3 .rolling:nth-child(2n-1) .roll-wrap {animation: marqueeAni 60s 1s linear infinite;}
.sect3 .rolling:nth-child(2n) .roll-wrap {animation: marqueeReverseAni 60s 1s linear infinite;}
.sect3 .rolling .roll-wrap span {padding-left: calc(var(--size)*1.8); position: relative; flex-shrink: 0;}
.sect3 .rolling .roll-wrap span::before {content:""; width: 10px; height: 10px; position: absolute; top: 50%; left: 0; transform: translate(calc(var(--size)*0.9), -50%) rotate(45deg); background: #3D4553;}
.sect3 .rolling .roll-wrap span:nth-child(2n-1) {font-size: calc(var(--size)*0.9); font-weight: 600; color: #999; }

@keyframes marqueeAni {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-50%);}
}
@keyframes marqueeReverseAni {
    0% {transform: translateX(-50%);}
    100% {transform: translateX(0%);}
}
@media screen and (max-width:1260px) {
    .sect3 .rolling {--size:40px; }
}
@media screen and (max-width:1024px){
    .sect3 .rolling {--size:36px; }
    .sect3 .rolling + .rolling {margin-top: 0.6em;}
}
@media screen and (max-width:768px){
    .sect3 .rolling {--size:28px; }
}
@media screen and (max-width:480px){
    .sect3 .inner {padding: calc(var(--gap-80)*1.5) 0 calc(var(--gap-80)*2);}
    .sect3 .rolling {--size:24px; }
}

/* sect4 */
.sect4 { margin: calc(var(--gap-80)*3.4) 0 calc(var(--gap-80)*3);}
.sect4 .head {margin-bottom: var(--gap-100);}
.sect4 .head h2 {margin-bottom: var(--gap-40); }
.sect4 .inner {max-width: 1640px; }
.sect4 .flex-box {display: flex; align-items: stretch; gap: 40px;}
.sect4 .flex-box .item {width: calc(50% - 20px); position: relative; }
.sect4 .flex-box .item .box {width: 100%;  background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; border-radius: 40px; padding: 80px; position: relative; display: flex; align-items: center; justify-content: start; transition: transform 0.6s, opacity 0.6s; opacity: 0;}
.sect4 .flex-box .item .box::before {content:""; position: absolute; width: 100%; height: 100%; left: 0;top: 0; opacity: 0.5; transition: 0.4s;}
.sect4 .flex-box .item.item1 .box {background-image: url(/img/img_sect4_01.jpg); transform-origin: 100% 100%; transform: rotate(-45deg);  } 
.sect4 .flex-box .item.item1 .box::before {background: #141B28;}
.sect4 .flex-box .item.item2 .box {background-image: url(/img/img_sect4_02.jpg); transform-origin: 0% 100%; transform: rotate(45deg);  }
.sect4 .flex-box .item.item2 .box::before {background: #285F73; }
.sect4 .flex-box .item .box .text-box {position: relative; z-index: 1; width: 100%;}
.sect4 .flex-box .item .box .text-box .tit {font-weight: 800; font-size: 40px; text-align: center; transition: 0.4s; width: 100%; white-space: nowrap;}
.sect4 .flex-box .item .box .text-box .hide-txt {padding-top: 20px; }
.sect4 .flex-box .item .box .text-box p {font-weight: 700; font-size: var(--font-25);}
.sect4 .flex-box .item .box .text-box ul {font-weight: 500; font-size: var(--font-25); margin-top: 1.6em;}


.sect4 .flex-box .item.item1.ani-started .box {transform: rotate(0deg); opacity: 1;}
.sect4 .flex-box .item.item2.ani-started .box {transform: rotate(0deg); opacity: 1;}


@media screen and (max-width:1260px) {
    .sect4 .flex-box .item .box {padding: 60px;}
}
@media screen and (min-width:1025px){
    .sect4 .flex-box .item .box {height: 545px;}
    .sect4 .flex-box .item .box::before { transition: 0.4s;}
    .sect4 .flex-box .item .box .text-box .hide-txt { overflow: hidden; height: 0; opacity: 0; transition: 0.5s;}

    .sect4 .flex-box .item.ani-started:hover .box::before {opacity: 0.7;}
    .sect4 .flex-box .item.ani-started:hover .box .text-box .tit {width: 0%; }
    .sect4 .flex-box .item.ani-started:hover .box .text-box .hide-txt {height: 325px; opacity: 1; }
}
@media screen and (max-width:1024px) {
    .sect4 .flex-box {flex-direction: column; }
    .sect4 .flex-box .item {width: 100%;}
    .sect4 .flex-box .item .box {}
    .sect4 .flex-box .item .box::before {opacity: 0.7;}
    .sect4 .flex-box .item .box .text-box .tit {text-align: left;}

    .sect4 .flex-box .item.item1 .box {transform: translate(-20%,20%) rotate(-45deg); transform-origin: 50% 100%;}
    .sect4 .flex-box .item.item2 .box {transform: translate(20%,20%) rotate(45deg); transform-origin: 50% 100%;}
}
@media screen and (max-width:768px){
    .sect4 .flex-box .item .box {padding: 36px; border-radius: 20px;}
    .sect4 .flex-box .item .box .text-box .tit {font-size: 30px;}
}
@media screen and (max-width:480px){
    .sect4 .flex-box .item .box .text-box .tit {font-size: 24px;}
    .sect4 .flex-box .item .box .text-box p {font-weight: 600;}
    .sect4 .flex-box .item .box .text-box ul {font-size: 16px;}
}


/* sect5 */
.sect5 {overflow: visible;}
.sect5 .sect-wrapper {height: calc(var(--vh)*450); position: relative; width: 100%;}
.sect5 .plan-wrap {width: 100%; height: calc(var(--vh)*100); position: sticky; left: 0; top: 0;}
.sect5 .plan-wrap .plan-item {position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: calc(var(--vh)*100); display: flex; align-items: center; width: 100%; background: var(--primary); opacity: 0; transition: opacity 0.1s;}
.sect5 article {}
.sect5 article .inner {max-width: 1520px; display: flex; align-items: start; justify-content: space-between; }
.sect5 article .left {width: 60%;}
.sect5 article .left .head {text-align: left; margin-bottom: 150px; }
.sect5 article .left .text-box {position: relative; --size:160px; padding-left: calc(var(--size)*0.85);}
.sect5 article .left .text-box .back {font-family: var(--ff-popp); font-weight: 800; line-height: 1.1; font-size: var(--size); position: absolute; left: 0; top: 0; transform: translateY(-30%); transition-delay: 0.2s;}
.sect5 article .left .text-box .back span {opacity: 0.1;}
.sect5 article .left .text-box .tit {font-weight: 800; font-size: 40px; transition-delay: 0.2s;}
.sect5 article .left .text-box .desc {font-weight: 500; font-size: 25px; margin-top: var(--font-16); height: 3em; transition-delay: 0.3s;}
.sect5 article .right {width: 40%;}
.sect5 article .right ul {display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;}
.sect5 article .right ul li {width: calc(50% - 10px); --main:#D9E8FF; --sub:#fff;  }
.sect5 article .right ul li:nth-child(2),
.sect5 article .right ul li:nth-child(3) {--main:#fff; --sub:#D9E8FF;}
.sect5 article .right ul li .item {width: 100%; border-radius: 40px; position: relative; padding: 40px; text-align: center; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: end; background: var(--main); opacity: 0; transform:translateY(50px); transition: opacity 0.8s, transform 0.8s; }
.sect5 article .right ul li:nth-child(1) .item {transition-delay: 0.08s;}
.sect5 article .right ul li:nth-child(2) .item {transition-delay: 0.16s;}
.sect5 article .right ul li:nth-child(3) .item {transition-delay: 0.32s;}
.sect5 article .right ul li:nth-child(4) .item {transition-delay: 0.48s;}
.sect5 article .right ul li .item .badge {display: flex; align-items: center; justify-content: center; text-align: center; width: 48px; height: 48px; position: absolute; left: 0; top: 0; transform: translate(20px,20px); font-weight: 800; font-size: var(--font-25); border-radius: 50%; background: var(--sub); color: var(--primary); }
.sect5 article .right ul li .item .icon {width: 90%; max-width: 120px; font-size: 0; margin: 0 auto;}
.sect5 article .right ul li .item .text {font-size: var(--font-25); font-weight: 800; margin-top: 1em; color: var(--primary);}

.sect5 .plan-wrap .plan-item.ani-started {opacity: 1;}
.sect5 .plan-item.ani-started .right ul li .item {opacity: 1; transform: translateY(0); }
@media screen and (max-width:1480px){
    .sect5 article .right ul li .item .text {font-size: 22px;}
}
@media screen and (max-width:1260px) {
    .sect5 article .left .head {margin-bottom: 110px;}
    .sect5 article .left .text-box {--size: 120px;}
    .sect5 article .left .text-box .tit {font-size: 32px;}
    .sect5 article .left .text-box .desc {font-size: 20px;}

    .sect5 article .right ul li .item {border-radius: 36px; padding: 32px;}
    .sect5 article .right ul li .item .text {font-size: 18px;}
    .sect5 article .right ul li .item .badge {width: 38px; height: 38px; font-size: 18px;} 
}
@media screen and (max-width:1024px){
    .sect5 article .inner {flex-direction: column; gap: var(--gap-100);}
    .sect5 article .left {width: 100%; }
    .sect5 article .left .head {margin-bottom: var(--gap-100); text-align: center;}
    .sect5 article .left .text-box { width: fit-content; margin: auto;}
    .sect5 article .right {width: 90%; max-width: 460px; margin: auto;}
    .sect5 article .right ul li {max-width: 200px;}
    .sect5 article .right ul li .item {border-radius: 20px;}
    .sect5 article .right ul li .item .icon {max-width: 80px;}
}
@media screen and (max-width:768px){
    .sect5 article .left .text-box {--size:94px;}
    .sect5 article .left .text-box .tit {font-size: 26px;}
    .sect5 article .left .text-box .desc {font-size: 18px;}
}
@media screen and (max-width:480px){
    .sect5 .sect-wrapper {height: calc(var(--vh)*300);}
    .sect5 article .left .text-box {--size:80px; }
    .sect5 article .left .text-box .tit {font-size: 20px;}
    .sect5 article .left .text-box .desc {font-size: 16px;}

    .sect5 article .right ul {gap: 12px; }
    .sect5 article .right ul li .item {padding: 24px; }
    .sect5 article .right ul li .item .icon {max-width: 64px; }
    .sect5 article .right ul li .item .text {font-size: 16px; font-weight: 700;}
    .sect5 article .right ul li .item .badge {width: 30px; height: 30px; font-size: 15px; transform: translate(16px,16px);}
}

/* sect6 */
.sect6 {}
.sect6 .inner {width: calc(100% - 40px); overflow: hidden; padding: calc(var(--gap-80)*2.5) 0 calc(var(--gap-80)*3.1); }
.sect6 .head {color: var(--primary); margin-bottom: var(--gap-100);}
.sect6 .head h2 {margin-bottom: var(--font-20); } 
.sect6 .head .desc {font-weight: 800; font-size: 40px;}
.sect6 .cont {max-width: 1520px; width: 90%; margin: auto;}
.sect6 .cont ul {display: flex; gap: 40px; }
.sect6 .cont ul li {width: calc((100% - 80px)/3); }
.sect6 .cont .item {border-radius: 40px; overflow: hidden; transform: translateY(10%); transition-property: transform, opacity; transition-duration: 0.5s, 0.5s; opacity: 0; display: block;}
.sect6 .cont .item .img-box {font-size: 0;}
.sect6 .cont .item .text-box {margin-top: -40px; padding: 40px; border-radius: 40px; background: linear-gradient(to bottom, var(--primary), #2156A8); position: relative; z-index: 1;}
.sect6 .cont .item .text-box .tit {font-weight: 700; font-size: var(--font-30);}
.sect6 .cont .item .text-box P {color: #D5E5FF; font-weight: 500; font-size: 20px; margin-top: 0.5em;}

.sect6 .cont li.ani-started .item {opacity: 1; transform: translateY(0);}
@media screen and (max-width:1480px){
    .sect6 .cont .item .text-box .tit {font-size: 26px;}
}
@media screen and (max-width:1260px){
    .sect6 .head .desc {font-size: 34px;} 

    .sect6 .cont ul {gap: 28px;}
    .sect6 .cont ul li {width: calc((100% - 56px)/3);}

    .sect6 .cont .item {border-radius: 32px;}
    .sect6 .cont .item .text-box {padding: 28px; border-radius: 32px;}
    .sect6 .cont .item .text-box .tit {font-size: 20px;}
    .sect6 .cont .item .text-box P {font-size: 16px;}
}
@media screen and (min-width:1025px){
    .sect6 .cont ul li:nth-child(1) .item {transition-delay: 0.2s;}
    .sect6 .cont ul li:nth-child(2) .item {transition-delay: 0.4s;}
    .sect6 .cont ul li:nth-child(3) .item {transition-delay: 0.6s;}
}
@media screen and (max-width:1024px) {
    .sect6 .head .desc {font-size: 28px;}
    .sect6 .cont ul {flex-direction: column; align-items: center;}
    .sect6 .cont ul li {width: 100%; max-width: 480px; }
    .sect6 .cont .item {transition-delay: 0.1s;}
}
@media screen and (max-width:768px){
    .sect6 {margin-top: var(--gap-100);}
    .sect6 .head .desc {font-size: 22px;}
    .sect6 .cont .item {border-radius: 20px;}
    .sect6 .cont .item .text-box {border-radius: 20px;}
}
@media screen and (max-width:480px){
    .sect6 .inner {padding: calc(var(--gap-80)*1.5) 0 calc(var(--gap-80)*2); width: 90%;}
    .sect6 .head .desc {font-size: 18px; font-weight: 700;}

    .sect6 .cont .item .text-box .tit {font-size: 18px;}
    .sect6 .cont .item .text-box P {font-size: 15px;}
}


/* sect7 */
.sect7 {margin-top: var(--gap-80); overflow: visible;}
.sect7 .inner {max-width: 1520px; }
.sect7 .head {}
.sect7 .head .flex-box {margin-top: var(--gap-100); display: flex; justify-content: space-between; align-items: start;}
.sect7 .head .flex-box .bold {font-size: 40px; font-weight: 800; transition-delay: 0.2s;}
.sect7 .head .flex-box .desc {transition-delay: 0.4s;}
.sect7 .sticky-area {position: sticky; left: 0; top: 0; width: 100%; height: calc(var(--vh)*100); }
.sect7 .sticky-area .inwrap {padding-top: calc(var(--gap-80)*2);}
.sect7 .scroll-area {position: relative; padding: calc(var(--vh)*20) 0 calc(var(--vh)*110);}
.sect7 .scroll-area .inner {display: flex; gap: min(11vw, 220px); justify-content: center; align-items: start;}
.sect7 .scroll-area .card { border-radius: 40px; overflow: hidden; aspect-ratio: 1/1.3; width: 500px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.sect7 .scroll-area .card .text-box {position: relative; height: 100%; padding: 50px;}
.sect7 .scroll-area .card .text-box .tit {font-family: var(--ff-popp); font-weight: 800; font-size: var(--font-30); line-height: 1.3;}
.sect7 .scroll-area .card .text-box .desc {font-weight: 500; font-size: var(--font-20); margin-top: 25px;}
.sect7 .scroll-area .card .text-box a {width: 86px; height: 86px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0; margin-left: auto; transition: background-color 0.4s;}
.sect7 .scroll-area .card .text-box a .icon {display: block; max-width: 30px; width: 50%;}
.sect7 .scroll-area .card .text-box a .icon svg {stroke: var(--primary);}
.sect7 .scroll-area .card .text-box .inbox {display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: space-between;}
.sect7 .back {width: 100%;}
.sect7 .back svg {stroke-dasharray:2105; stroke-dashoffset:2105; transition: 0.6s 0.6s;}

.sect7 .scroll-area .card .text-box a:hover {background: var(--primary);}
.sect7 .scroll-area .card .text-box a:hover .icon svg {stroke: #fff;}

.sect7 .scroll-area .card.item1 {background-image: url(/img/img_sect7_01.jpg); background-color: #284273;}
.sect7 .scroll-area .card.item1 .text-box {background: linear-gradient(to bottom, #284273 50%, rgba(0,0,0,0));}
.sect7 .scroll-area .card.item2 {background-image: url(/img/img_sect7_02.jpg); background-color: #285F73; margin-top: 200px;}
.sect7 .scroll-area .card.item2 .text-box {background: linear-gradient(to bottom, #285F73 50%, rgba(0,0,0,0));}

.sect7.ani-started svg {stroke-dashoffset:0;}
@media screen and (max-width:1260px){
    .sect7 .head .flex-box .bold {font-size: 34px;}

    .sect7 .scroll-area .inner {gap: 5%;}

    .sect7 .scroll-area .card {width: 42%; max-width: 500px; }
    .sect7 .scroll-area .card .text-box {padding: 38px;}
    .sect7 .scroll-area .card .text-box a {width: 64px; height: 64px;}
}
@media screen and (max-width:1024px){
    .sect7 .sticky-area .inwrap {padding-top: calc(var(--vh)*15);}
    .sect7 .head .flex-box {flex-wrap: wrap; gap: var(--font-20);}
    .sect7 .head .flex-box p {width: 100%; }

    .sect7 .scroll-area .inner {flex-direction: column; gap: calc(var(--vh)*20);}
    .sect7 .scroll-area .card {width: 85%; max-width: 360px; }
    .sect7 .scroll-area .card.item2 {margin-top: 0; margin-left: auto;}
}
@media screen and (max-width:768px){
    .sect7 .head .flex-box .bold {font-size: 28px;}

    .sect7 .sticky-area .inwrap {height: 100%; display: flex; align-items: center; justify-content: center; padding: calc(var(--vh)*10) 0 calc(var(--vh)*5); flex-direction: column; gap: calc(var(--vh)*5);}

    .sect7 .scroll-area {padding: 0 0 calc(var(--vh)*110);}
    .sect7 .scroll-area .card {border-radius: 20px;}
    .sect7 .scroll-area .card .text-box .tit {font-size: var(--font-28);}
    .sect7 .scroll-area .card .text-box a {width: 42px; height: 42px;}
}
@media screen and (max-width:480px){
    .sect7 .head .flex-box .bold {font-size: 24px;}
    .sect7 .scroll-area .card .text-box {padding: 32px;}
    .sect7 .scroll-area .card .text-box .tit {font-size: 18px;}
    .sect7 .scroll-area .card .text-box .desc {font-size: 15px;}
}

/* sect8 */
.sect8 {margin-top: calc(var(--gap-80)*3); margin-bottom: var(--gap-80);}
.sect8 .inner {width: calc(100% - 40px); }
.sect8 .cont {position: relative; overflow: hidden; border-radius: 40px; height: 900px; background: rgba(255,255,255,0.1);}
.sect8 .cont .cont-wrap {width: 100%; height: 100%; text-align: center; position: absolute; left: 0; top: 0; display: flex; align-items: center; pointer-events: none; }

.sect8 .effect-box {width: 100%; height: 100%;}
.sect8 .effect-box canvas {display: block; border: none; width: 100%; height: 100%;}

.sect8 .head h2 {font-size: 100px;}
.sect8 .head p {margin-top: var(--font-20);}

.sect8 .text-box {width: 100%;}
.sect8 .text-box .btn-box {margin-top: var(--gap-80);}
.sect8 .text-box .btn-box a {display: inline-flex; background: #fff; color: var(--primary); font-size: var(--font-20); font-weight: 600; padding: 1em 2em; border-radius: 1.75em; pointer-events: auto; position: relative;}
.sect8 .text-box .btn-box a span {position: relative; display: inline-block;}
.sect8 .text-box .btn-box a span::before {content:""; width: 0%; height: 1px; position: absolute; background: var(--primary); left: 0; bottom: 0; transition: width 0.4s;}
.sect8 .text-box .btn-box a input {position: absolute; opacity: 0; left: 0; top: 0; pointer-events: none; }

.sect8 .text-box .btn-box a:hover span::before {width: 100%;}

@media screen and (max-width:1260px) {
    .sect8 .cont {height: 700px;}
    .sect8 .head h2 {font-size: 80px;}
}
@media screen and (max-width:1024px) {
    .sect8 .head h2 {font-size: 60px;}
}
@media screen and (max-width:768px){
    .sect8 .cont {height: 480px; border-radius: 20px;}
    .sect8 .head h2 {font-size: 48px;}
}
@media screen and (max-width:480px){
    .sect8 .head h2 {font-size: 36px;}
    .sect8 .text-box .btn-box a {padding: 0.8em 2em;}
}