/* 랜딩페이지 작업 전 유의사항
- 다정한우유때처럼 미리 스타일링 변수값 잡고 하기.
  . 폰트값, gap값, 색상값

- 데스크톱만 br = br-pc / 모바일만 br = br-mobile.

- 공통된 스타일값([class*=-inner]) 미리 잡고 ㄱ

- 반응형 디바이스는
  . 큰 모니터 = 1920~2480
  . 일반 모니터 = 1024~1920
  . 태블릿 = 768~1024
  . 큰 모바일 = 500~768 (폴드)
  . 일반 모바일 = 320~500 (아이폰)

- 섹션을 시간별로 나눠서 몇개 할건지 정하고 하기.
ex) 섹션 12개면 1시간에 3개씩 css까지 작업. */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: var(--main-fnt);
}
h1,h2,h3,h4,h5,h6,p{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: var(--blk);
}
ul,li,ol{
    list-style: none;
}
main{
    position: relative;
    width: 100%;
}
section{
    min-height: 50vh;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* #################### COMMON STYLES #################### */
section [class*=-inner]{
    max-width: var(--sec-inner);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 20;
}
[class*=headline]{
    width: 100%;
}
[class*=headline-title]{
    font-size: var(--fs-64);
    font-weight: 700;
    line-height: var(--fs-70);
    word-break: keep-all;
}
[class*=headline-title]>b{
    color: var(--f-red);
    font-weight: 700;
}
[class*=headline-sub]{
    font-size: var(--fs-36);
    font-weight: 300;
}
[class*=headline-sub]>b{
    font-weight: 700;
}
.br-pc{
    display: block;
}
.br-mobile{
    display: none;
}
@media (max-width:768px){
    .br-pc{
        display: none
    }
    .br-mobile{
        display: block;;
    }
    [class*=headline-title]{
        font-size: var(--fs-30);
        line-height: var(--fs-36);
    }
    [class*=headline-sub]{
        font-size: var(--fs-18);
    }
}

/* #################### HEADER STYLES #################### */
header{
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 10vh;
    background-color: #fff;
}
.header-inner{
    display: flex;
    align-items: center;
    padding: 10px 0;
    gap: var(--gap-5);
}
.header-inner p{
    font-size: var(--fs-24);
    font-weight: 700;
}
.header-inner p>b{
    font-weight: 700;
    color: var(--f-red);
}
.header-inner button{
    min-width: 10vw;
    padding: 10px 0;
    background-color: var(--f-red);
    border: none;
    border-radius: 60px;
}
.header-inner button>span{
    font-family: var(--main-fnt);
    font-size: var(--fs-20);
    line-height: var(--fs-22);
    font-weight: 700;
    color: var(--wht);
    cursor: pointer;
}
header.sticky{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}
@media (max-width:768px){
    header{
        min-height: 8vh;
    }
    .header-inner p{
        font-size: var(--fs-16);
    }
    .header-inner button{
        padding: 5px 10px 3px;
    }
    .header-inner button>span{
        font-size: var(--fs-16);
    }
}

/* #################### SEC01 STYLES #################### */
.sec01{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background-image: linear-gradient(135deg, var(--nav)30%, var(--vlo)100%);
    padding: 18vh 0;
    overflow: hidden;
}
.sec01-headline-title{
    color: var(--wht);
    text-shadow: 0 5px 5px rgba(0,0,0,0.5);
}
p.sec01-badge{
    min-width: 15vw;
    font-size: var(--fs-20);
    font-weight: 700;
    padding: 10px;
    background-image: linear-gradient(180deg, #e85667 0%, var(--f-red) 50%);
    color: var(--wht);
    border-radius: 50px;
    margin-bottom: 2vh;
    box-shadow: 0 3px 3px rgba(0,0,0,0.5);
}
/* ########## SEC01 WRAP ########## */
.sec01-wrap{
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
}
.sec01-headdesc{
    position: relative;
}
.sec01-headdesc::before,
.sec01-headdesc::after{
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    border-top: 1px solid var(--wht);
}
.sec01-headdesc p{
    font-family: var(--sub-fnt);
    font-size: var(--fs-36);
    line-height: var(--fs-44);
    color: var(--wht);
    padding: 4vh 0;
    letter-spacing: -1px;
    font-weight: 300;
}
.sec01-headdesc p>span{
    font-weight: 800;
}
.sec01-headdesc p>span.stat{
    font-family: var(--eng-fnt);
    color: var(--f-red);
    font-size: var(--fs-44);
    font-weight: 500;
}
.sec01-headdesc p>span.stat>b{
    font-size: var(--fs-64);
    font-weight: 700;
}
.sec01-headdesc p>span.impact{
    display: inline-block;
    font-family: 'LotteMartDream';
    color: var(--wht);
    padding: 5px 10px;
    background-color: var(--f-red);
    border-radius: 5px;
}
/* ########## SEC01 STATS ########## */
.sec01-stats{
    padding: 4vh;
}
.sec01-stats ul{
    display: flex;
    gap: var(--gap-20);
}
.sec01-stat{
    font-size: var(--fs-24);
    font-weight: 300;
    color: var(--wht);
}
.sec01-stat .stat-imp{
    color: var(--f-red);
    font-size: var(--fs-36);
    font-weight: 600;
    letter-spacing: 0px;
    text-shadow: 0 3px 3px rgba(0,0,0,0.5);
}
.sec01-stat .stat-imp b{
    font-size: var(--fs-64);
    font-weight: 900;
    letter-spacing: -1px;
}
.section-objects{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15vw;
    z-index: 1;
}
.section-objects [class*=-objects]{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.section-objects [class*=-objects]>[class*=-obj]{
    position: absolute;
}
[class*=-obj].one{
    top:10%;
    animation-name: float-tp;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}
[class*=-obj].two{
    top:33%;
    animation-name: float-md;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}
[class*=-obj].three{
    top:60%;
    animation-name: float-bt;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}
.lft-obj.one{
    display: block;
    z-index: 5;
    transform: translate(80%, 0%) rotate(10deg) scale(0.8);
    opacity: 0.5;
    filter: blur(4px);
}
.lft-obj.two{
    z-index: 10;
    transform: translate(0%, 0%) rotate(-15deg);
}
.lft-obj.three{
    z-index: 20;
    transform: translate(30%, 0%) rotate(10deg) scale(1.1);
}
.rgt-obj.one{
    z-index: 20;
    transform: translate(-30%, 0%) rotate(-20deg);
}
.rgt-obj.two{
    display: block;
    z-index: 5;
    transform: translate(15%, 20%) rotate(15deg) scale(0.6);
    opacity: 0.5;
    filter: blur(4px);
}
.rgt-obj.three{
    z-index: 10;
    transform: translate(-20%, 0%) rotate(5deg) scalex(-1);
}
@keyframes float-tp{
    0%{
        top: 10%;
    }
    50%{
        top: 11%;
    }
    100%{
        top: 10%;
    }
}
@keyframes float-md{
    0%{
        top: 33%;
    }
    50%{
        top: 34%;
    }
    100%{
        top: 33%;
    }
}
@keyframes float-bt{
    0%{
        top: 60%;
    }
    50%{
        top: 61%;
    }
    100%{
        top: 60%;
    }
}
@media(max-width:768px){
    .sec01{
        min-height: 100vh;
    }
    [class*=-obj]>img{
        max-height: 50px;
    }
    p.sec01-badge{
        font-size: var(--fs-16);
        padding: 8px 14px;
    }
    .sec01-headdesc p{
        font-size: var(--fs-20);
        line-height: var(--fs-24);
        padding: 2vh 0;
    }
    .sec01-headdesc p>span.stat{
        font-size: var(--fs-30);
    }
    .sec01-headdesc p>span.stat>b{
        font-size: var(--fs-36);
    }
    .sec01-stat .stat-imp{
        font-size: var(--fs-18);
        white-space: nowrap;
    }
    .sec01-stat .stat-imp b{
        font-size: var(--fs-30);
    }
    .sec01-stat{
        font-size: var(--fs-12);
        word-break: keep-all;
        white-space: nowrap;
    }
    .sec01-stats ul{
        gap: var(--gap-4);
    }
    .lft-obj.one{
        display: none;
    }
    .lft-obj.two{
        transform: translate(30%, -200%) rotate(-15deg)
    }
    .lft-obj.three{
        transform: translate(30%, 70%) rotate(10deg);
    }
    .rgt-obj.one{
        transform: translate(-30%, -20%) rotate(20deg)
    }
    .rgt-obj.two{
        display: none;
    }
    .rgt-obj.three{
        transform: translate(-20%, 80%) rotate(5deg) scalex(-1)
    }
    .lft-obj.two img{
        max-height: 12vh;
    }
    .lft-obj.three img{
        max-height: 20vh;
    }
    .rgt-obj.one img{
        max-height: 15vh;
    }
    .rgt-obj.three img{
        max-height: 15vh;
    }
}

/* #################### SEC02 STYLES #################### */
.sec02{
    background-color: var(--dgy);
}
.sec02 .section-inner{
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-14);
}
.sec02-media{
    min-width: 20vw;
    aspect-ratio: 9/16;
}
.sec02-media iframe{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.sec02-media-desc{
    font-size: var(--fs-20);
    letter-spacing: -1px;
    margin-top: 10px;
}
.sec02-headline{
    display: flex;
    flex-direction: column;
    min-width: 22vw;
    text-align: left;
    gap: var(--gap-5);
}
.sec02-headline-title{
    font-size: var(--fs-40);
    line-height: var(--fs-64);
    font-weight: 500;
}
.sec02-headline-title>b{
    font-size: var(--fs-70);
    font-weight: 700;
}
.sec02-headline-sub{
    font-weight: 700;
}
@media(max-width:768px){
    .sec02{
        display: block;
        min-height: 120vh;
    }
    .sec02 .section-inner{
        padding: 6vh 20px;
        flex-direction: column-reverse;
        justify-content: center;
        gap: var(--gap-8);
    }
    .sec02-headline{
        text-align: center;
    }
    .sec02-headline-title{
        font-size: var(--fs-40);
        line-height: var(--fs-48);
    }
    .sec02-headline-title>b{
        font-size: var(--fs-48);
    }
    .sec02-headline-sub{
        font-size: var(--fs-26);
    }
    .sec02-media-desc{
        font-size: var(--fs-18);
    }
}

/* #################### SEC03 STYLES #################### */
.sec03{
    background-color: var(--wht);
    max-height: 110vh;
}
.sec03 .section-inner{
    min-height: 110vh;
    display: flex;
    justify-content: center;
    gap: var(--gap-20);
}
.sec03-cards{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-4);
}
.sec03-card{
    width: 100%;
    padding: 20px 0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.sec03-card img{
    max-height: 12vh;
}
.sec03-card-desc{
    font-weight: 500;
    color: var(--blk);
}
.sec03-card-title{
    font-size: var(--fs-36);
}
.sec03-card-title>b{
    color: var(--f-red);
}
.sec03-card-txt{
    font-size: var(--fs-18);
    margin-top: 5px;
}
@media(max-width:768px){
    .sec03{
        display: flex;
        min-height: 140vh;
        justify-content: center;
    }
    .sec03 .section-inner{
        padding: 6vh 20px;
        gap: var(--gap-8);

    }
    .sec03-headline-title{
        font-size: var(--fs-30);
        line-height: var(--fs-36);
    }
    .sec03-cards{
        grid-template-columns: repeat(1, 1fr)
    }
    .sec03-card-title{
        font-size: var(--fs-20);
        font-weight: 700;
    }
    .sec03-card-title>b{
        font-weight: 700;
    }
    .sec03-card-txt{
        font-size: var(--fs-14);
    }
}

/* #################### SEC04 STYLES #################### */
.sec04{
    background-image: linear-gradient(135deg, var(--nav)30%, var(--vlo)100%);
    max-height: 110vh;
}
.sec04 .section-inner{
    min-height: 110vh;
    justify-content: center;
    align-items: center;
    gap: var(--gap-20);
}
[class*=sec04-headline-]{
    color: #fff;
}
.sec04-wrap{
    display: flex;
    gap: var(--gap-5);
    min-height: 60vh;
    height: 100%;
    align-items: center;
}
.sec04-service{
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
    box-shadow: 0 3px 5px rgba(0,0,0,0.5);
}
.sec04-service.two{
    position: relative;
    min-width: 20vw;
    min-height: 60vh;
    border: 8px solid var(--f-red);
    border-radius: 15px;
    z-index: 20;
}
.sec04-service.two::before{
    content: 'NEW';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    font-size: var(--fs-20);
    letter-spacing: -1px;
    color: #fff;
    background-color: var(--f-red);
    transform: translate(-5%, -100%);
    border-top-left-radius: 5px;
    border-top-right-radius: 24px;
    padding: 8px 20px 10px 10px;
    clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
    z-index: 10;
}
.sec04-service img{
    max-width: 35vh;
}
.sec04-service.two>*{
    max-width: 40vh;
    transform: translateY(-7%);
}
.sec04-service.two .sec04-service-desc{
    transform: translateY(-5%);
    gap: var(--gap-6);
}
.sec04-service-desc{
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
}
.sec04-service-desc .title{
    font-size: var(--fs-30);
    font-weight: 700;
}
.sec04-service.two .sec04-service-desc .title{
    font-size: var(--fs-40);
}
.sec04-service.one .sec04-service-desc .title>b{
    color: var(--grn);
    font-weight: 700;
}
.sec04-service.two .sec04-service-desc .title>b{
    color: var(--f-red);
    font-weight: 700;
}
.sec04-service.three .sec04-service-desc .title>b{
    color: var(--vlo);
    font-weight: 700;
}
.sec04-service-desc span{
    font-size: var(--fs-18);
}
.sec04-service.two .sec04-service-desc span{
    font-size: var(--fs-24);
}
.sec04-service-desc p.impact{
    width: 90%;
    margin: auto;
    padding: 10px 0;
    background-color: var(--f-red);
    color: #fff;
    font-size: var(--fs-22);
    border-radius: 10px;
}
.sec04-service.one .sec04-service-desc{
    gap: var(--gap-2);
}
.sec04-service.three .sec04-service-desc{
    gap: var(--gap-2);
}
.sec04-service.one .sec04-service-desc p.impact{
    background-color: var(--grn);
}
.sec04-service.two .sec04-service-desc p.impact{
    padding: 20px 0;
    font-size: var(--fs-26);
}
.sec04-service.three .sec04-service-desc p.impact{
    background-color: var(--vlo);
}
@media(max-width:768px){
    .sec04{
        display: flex;
        min-height: 190vh;
        justify-content: center;
    }
    .sec04 .section-inner{
        gap: var(--gap-10);
    }
    .sec04-wrap{
        flex-direction: column;
        gap: var(--gap-8);
    }
    .sec04-service{
        position: relative;
        width: 100%;
        min-height: 48vh;
        align-items: center;
        padding: 10px 0;
        gap: var(--gap-3);
    }
    .sec04-service img{
        min-width: 90vw;
        max-height: 25vh;
        object-fit: cover;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        z-index: 20;
    }
    .sec04-service-desc p.impact{
        min-width: 58vw;
        width: 100%;
    }
    .sec04-service.two{
        min-height: 54vh;
        transform: translateY(3%);
    }
    .sec04-service.two>*{
        transform: translateY(-5%);
    }
    .sec04-service.two::before{
        font-size: var(--fs-18);
    }
    .sec04-service.two img{
        max-height: 30vh;
    }
    .sec04-service.two .sec04-service-desc{
        gap: var(--gap-2);
    }
    .sec04-service.two .sec04-service-desc .title{
        font-size: var(--fs-30);
    }
    .sec04-service.two .sec04-service-desc p.impact{
        font-size: var(--fs-24);
        padding: 15px 0;
    }
    .sec04-service.two .sec04-service-desc span{
        font-size: var(--fs-18);
    }
}

/* #################### SEC05 STYLES #################### */
.sec05{
    background-color: var(--dgy);
    max-height: 110vh;
}
.sec05 .section-inner{
    width: 100%;
    min-height: 110vh;
    display: flex;
    justify-content: center;
    gap: var(--gap-10);
    text-align: left;
}
.sec05-headline-sub{
    display: block;
    font-size: var(--fs-30);
    margin-top: 10px;
}
.sec05-contents{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
}
.sec05-contents-top{
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    background-color: #fff;

}
.sec05-contents-top .upper{
    max-width: var(--sec-inner);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 15px 8vw;
    align-content: space-between;
    justify-content: center;
}
.sec05-contents-top .lower{
    width: 100%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--grn);
    color: #fff;
    font-size: var(--fs-20);
    text-shadow: 0 5px 5px rgba(0,0,0,0.3);
}
.sec05-contents-top .lower p{
    font-size: var(--fs-40);
    font-weight: 700;
    letter-spacing: 2px;
}
.upper .sec05-card{
    max-width: 30vw;
    padding: 20px 40px;
    font-size: var(--fs-18);
}
.upper .sec05-card p{
    font-size: var(--fs-36);
    color: var(--f-red);
    font-weight: 700;
}
.sec05-contents-bottom{
    padding: 0 14vw;
    display: flex;
    justify-content: space-between;
}
[class*=sec05-contents-bottom-]{
    display: flex;
    flex-direction: column;
}
.sec05-contents-bottom-lft img{
    max-height: 15vw;
}
.sec05-contents-bottom-lft .overview{
    width: 100%;
    padding: 16px;
    background-color: var(--f-red);
    text-align: center;
}
.sec05-contents-bottom-lft .overview span{
    color: #fff;
    font-size: var(--fs-22);
    font-weight: 700;
}
.sec05-contents-bottom-rgt{
    gap: var(--gap-2);
}
.sec05-contents-bottom-rgt>img{
    max-height: 10vw;
    object-fit: contain;
}
p.sec05-contents-bottom-rgt-info{
    font-size: var(--fs-36);
    letter-spacing: -1px;
}
p.sec05-contents-bottom-rgt-info span>b{
    color: var(--f-red);
}
.sec05-contents-bottom-rgt .kakao{
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #fff;
    border-radius: 60px;
    gap: var(--gap-3);
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}
.sec05-contents-bottom-rgt .kakao .kakao-icon{
    position: relative;
    padding: 20px;
    background-color: var(--yel);
    border-radius: 50px;
}
.sec05-contents-bottom-rgt .kakao .kakao-icon>img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
}
.sec05-contents-bottom-rgt .kakao .kakao-txt{
    font-size: var(--fs-20);
    font-weight: 500;
}
@media(min-width:1921px) and (max-width:2480px){
    .sec05-contents-bottom{
        padding: 0 8vw;
    }
}
@media(max-width:768px){
    .sec05{
        display: flex;
        min-height: 180vh;
    }
    .sec05 .section-inner{
        padding: 10vh 10px;
        gap: var(--gap-6);
    }
    .sec05-headline{
        text-align: center;
    }
    .sec05-headline-sub{
        font-size: var(--fs-18);
        margin-top: 5px;
    }
    .sec05-contents{
        gap: var(--gap-10);
    }
    .sec05-contents-top{
        border-radius: 6px;
    }
    .sec05-contents-top .upper{
        grid-template-columns: repeat(1, 1fr);
        padding: 15px 4vw;
    }
    .upper .sec05-card{
        max-width: 100vw;
        padding: 8px 10px;
        font-size: var(--fs-16);
    }
    .upper .sec05-card p{
        font-size: var(--fs-20);
    }
    .sec05-contents-top .lower{
        text-shadow: 0 2px 2px rgba(0,0,0,0.2);
    }
    .sec05-contents-top .lower p{
        font-size: var(--fs-28);
        letter-spacing: -1px;
    }
    .sec05-contents-bottom{
        padding: 0 10px;
        flex-direction: column;
        align-items: center;
        gap: var(--gap-8);
    }
    .sec05-contents-bottom-lft img{
        max-height: 30vh;
    }
    .sec05-contents-bottom-lft .overview{
        padding: 10px;
    }
    .sec05-contents-bottom-rgt>img{
        max-height: 30vh;
    }
    .sec05-contents-bottom-rgt .kakao{
        gap: var(--gap-5);
    }
}

/* #################### SEC06 STYLES #################### */
.sec06{
    background-color: var(--wht);
    max-height: 200vh;
}
.sec06 .section-inner{
    width: 100%;
    min-height: 160vh;
    justify-content: center;
    gap: var(--gap-15);
}
.sec06-headline{
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: var(--gap-3);
}
.sec06-headline-sub{
    font-size: var(--fs-30);
    word-break: keep-all;
}
.sec06-contents{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.sec06-contents-top{
    display: flex;
    flex-direction: column;
    gap: var(--gap-12);
    border: 1px solid var(--lgy);
    padding: 30px 5vw;
}
.sec06-contents-top-info{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: start;
    gap: var(--gap-4);
    padding: 0 5vw;
}
.sec06-contents-top-info::after{
    content: '';
    position: absolute;
    display: block;
    width: 90%;
    height: 1px;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid var(--lgy);
}
.sec06-contents-top-info li{
    display: flex;
    align-items: center;
}
.sec06-contents-top-info li::before{
    content: '';
    display: inline-block;
    padding: 10px;
    background: url(../images/icons/patch.svg)no-repeat;
    background-size: cover;
    margin-right: 5px;
}
.sec06-contents-top-info li span{
    font-size: var(--fs-18);
}
.sec06-contents-top-info li span>b{
    color: var(--f-red);
}
.sec06-contents-top-items{
    display: flex;
    justify-content: space-between;
    gap: var(--gap-5);
}
.sec06-contents-top-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-1);
    padding: 20px;
    background-color: var(--f-red);
    border-radius: 20px;
}
.sec06-contents-top-item span{
    color: #fff;
    font-size: var(--fs-24);
}
.sec06-contents-top-item span.impact{
    font-size: var(--fs-50);
    font-weight: 700;
}
.sec06-contents-bottom-ytbs{
    display: flex;
    gap: var(--gap-10);
    justify-content: center;
    padding: 3vh 0;
}
.sec06-contents-bottom-ytbs .ytb-media{
    min-height: 15vw;
    border-radius: 10px;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.sec06-contents-bottom-ytbs .ytb-media iframe{
    width: 100%;
    height: 100%;
}
.sec06-contents-bottom-ytbs .ytb-media.two iframe{
    object-fit: cover;
}
.sec06-contents-bottom-plans{
    display: flex;
    justify-content: center;
    gap: var(--gap-3);
}
.sec06-contents-bottom-plans .plan{
    min-width: 15vw;
    min-height: 40vh;
    border-radius: 10px;
    overflow: hidden;
}
.sec06-contents-bottom-plans .plan .plan-thumb{
    position: relative;
    width: 100%;
    padding-top: 120%;
}
.sec06-contents-bottom-plans .plan .plan-thumb img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sec06-contents-bottom-plans .plan:nth-child(2) .plan-thumb img,
.sec06-contents-bottom-plans .plan:nth-child(4) .plan-thumb img{
    top: 50%;
    height: 90%;
    object-fit: contain;
    transform: translateY(-50%);
}
.sec06-contents-bottom-plans .plan .plan-info{
    padding: 10px 0;
    background-color: var(--f-red);
}
.sec06-contents-bottom-plans .plan .plan-info span{
    color: #fff;
    font-size: var(--fs-20);
}
.sec06-contents-bottom-plans .plan .plan-info span>b{
    font-size: var(--fs-22);
}
.sec06-contents-bottom-plans .plan:nth-child(3) .plan-info span{
    font-size: var(--fs-18);
}
@media(min-width:1921px) and (max-width:2480px){
    .sec06-contents-top-info{
        padding: 0 3vw;
    }
}
@media(max-width:768px){
    .sec06{
        display: flex;
        min-height: 220vh;
    }
    .sec06 .section-inner{
        gap: var(--gap-4);
        padding: 20vh 20px;
    }
    .sec06-headline-sub{
        font-size: var(--fs-18);
    }
    .sec06-contents-top{
        padding: 20px 3vw;
        gap: var(--gap-6);
    }
    .sec06-contents-top-info{
        grid-template-columns: repeat(1, 1fr);
        gap: var(--gap-3);
        padding: 0;
    }
    .sec06-contents-top-info::after{
        width: 95%;
        top: 104%;
    }
    .sec06-contents-top-info li{
        position: relative;
    }
    .sec06-contents-top-info li::before{
        transform: translateY(2px);
        position: absolute;
        padding: 8px;
        top: 0;
    }
    .sec06-contents-top-info li span{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: var(--fs-16);
        margin-left: 20px;
    }
    .sec06-contents-top-items{
        gap: var(--gap-2);
    }
    .sec06-contents-top-item{
        border-radius: 5px;
        padding: 10px 5px;
    }
    .sec06-contents-top-item span{
        font-size: var(--fs-12);
    }
    .sec06-contents-top-item span.impact{
        font-size: var(--fs-28);
    }
    .sec06-contents-bottom-ytbs{
        flex-direction: column;
        gap: var(--gap-2);
    }
    .sec06-contents-bottom-ytbs .ytb-media{
        border-radius: 5px;
    }
    .sec06-contents-bottom-plans{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .sec06-contents-bottom-plans .plan{
        min-height: 30vh;
    }
    .sec06-contents-bottom-plans .plan .plan-info{
        padding: 10px;
        word-break: keep-all;
    }
    .sec06-contents-bottom-plans .plan .plan-info span{
        font-size: var(--fs-14);
    }
    .sec06-contents-bottom-plans .plan .plan-info span>b{
        font-size: var(--fs-16);
    }
    .sec06-contents-bottom-plans .plan:nth-child(3) .plan-info span{
        font-size: var(--fs-12);
    }
}

/* #################### SEC07 STYLES #################### */
.sec07{
    background-color: var(--dgy);
    max-height: 200vh;
}
.sec07 .section-inner{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    gap: var(--gap-15);
}
.sec07-info-table{
    background-color: #fff;
    border: none;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}
.sec07-info-table thead tr th,
.sec07-info-table tbody tr td{
    padding: 20px;
}
.sec07-info-table>*{
    font-size: var(--fs-22);
}
.sec07-info-table thead tr th.table-header{
    background-color: var(--lgy);
    font-size: var(--fs-24);
    font-weight: 500;
}
.sec07-info-table thead tr th.table-header-list.bagic{
    background-color: var(--gry);
    font-size: var(--fs-24);
    font-weight: 500;
}
.sec07-info-table thead tr th.table-header-list.paper{
    background-color: var(--f-red);
    font-size: var(--fs-28);
    color: #fff;
}
.sec07-info-table tbody tr td{
    position: relative;
    padding: 30px 60px;
}
.sec07-info-table tbody tr td.row-txt.two{
    padding: 0 30px;
    background-color: var(--blk);
    color: #fff;
}
.sec07-info-table tbody tr td.row-header{
    font-weight: 700;
}
.sec07-info-table tbody tr td::after{
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    width: 9vw;
    bottom: 1px;
    border-bottom: 1px solid var(--lgy);
    transform: translateX(-50%);
}
.sec07-info-table tbody tr:last-child td::after{
    display: none;
}
.sec07-info-table tbody tr td.one::after{
    width: 12vw;
}
.sec07-info-table tbody tr td.two::after{
    width: 16vw;
    border-bottom: 1px solid var(--wht);
}
.sec07-info-table tbody tr td.two>b{
    display: inline-block;
    padding: 5px;
    background-color: #fff;
    color: var(--blk);
}
.sec07-info-table tbody tr:nth-child(1) td.row-txt.one,
.sec07-info-table tbody tr:nth-child(2) td.row-txt.one{
    color:var(--f-red);
}
@media(max-width:768px){
    .sec07{
        display: flex;
        min-height: 80vh;
    }
    .sec07 .section-inner{
        gap: var(--gap-8);
        padding: 10vh 10px;
        min-height: 80vh;
    }
    .sec07-headline{
        display: flex;
        flex-direction: column;
        gap: var(--gap-1);
    }
    .sec07-info-table{
        border-radius: 5px;
    }
    .sec07-info-table thead tr th.table-header{
        font-size: var(--fs-14);
    }
    .sec07-info-table thead tr th.table-header-list.bagic{
        font-size: var(--fs-14);
    }
    .sec07-info-table thead tr th.table-header-list.paper{
        font-size: var(--fs-16);
    }
    .sec07-info-table tbody tr td{
        padding: 10px 20px;
    }
    .sec07-info-table thead tr th,
    .sec07-info-table tbody tr td{
        padding: 10px 8px;
    }
    .sec07-info-table>*{
        font-size: var(--fs-13);
        letter-spacing: -1px;
    }
    .sec07-info-table tbody tr td.row-txt.two{
        padding: 0 10px;
    }
    .sec07-info-table tbody tr td.two>b{
        padding: 1px 3px;
        margin-left: 1px;
    }
    td.row-txt.one{
        font-size: var(--fs-13);
    }
}

/* #################### SEC08 STYLES #################### */
.sec08{
    background-image: linear-gradient(135deg, var(--nav)30%, var(--vlo)100%);
    max-height: 200vh;
}
.sec08 .section-inner{
    width: 100%;
    min-height: 170vh;
    display: flex;
    justify-content: center;
    gap: var(--gap-15);
}
.sec08-headline{
    color: #fff;
}
.sec08-contents{
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
}
.sec08-contents-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60vw;
    gap: var(--gap-2);
}
.sec08-contents-top-data-wrap{
    display: flex;
    width: 100%;
    gap: var(--gap-2);
    justify-content: space-between;
}
.sec08-contents-top-data{
    min-width: 22vw;
    min-height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-3);
    background-color: rgba(256,256,256,0.4);
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #fff;
}
.sec08-contents-top-data .impact{
    font-size: var(--fs-54);
    background: linear-gradient(180deg, #dc3d4f 00%, var(--f-red) 40%, #4f0009 100%);
    font-weight: 500;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
}
.sec08-contents-top-data .impact>b{
    font-size: var(--fs-64);
    font-weight: 900;
    letter-spacing: 2px;
}
.sec08-contents-top-data .desc{
    font-size: var(--fs-24);
    color: #fff;
}
.sec08-contents-top-item-wrap{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--gap-2);
}
.sec08-contents-top-item{
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: rgba(256,256,256,0.4);
    gap: var(--gap-1);
    border: 1px solid #fff;
    min-height: 30vh;
    border-radius: 10px;
}
.sec08-contents-top-item .item-head{
    font-size: var(--fs-24);
    font-weight: 700;
}
.sec08-contents-top-item>*{
    color: #fff;
}
.sec08-contents-top-item img{
    margin-bottom: 16px;
}
.sec08-contents-bottom-ytb .ytb-media{
    position: relative;
    aspect-ratio: 16/9;
    border: 1px solid #fff;
    border-radius: 5px;
    overflow: hidden;
}
.sec08-contents-bottom-ytb .ytb-media iframe{
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sec08-contents-bottom-ytb .ytb-info{
    display: inline-block;
    margin-top: 10px;
    font-size: var(--fs-22);
    font-weight: 700;
    color: #fff;
}
@media(max-width:768px){
    .sec08{
        display: flex;
    }
    .sec08 .section-inner{
        min-height: 130vh;
        gap: var(--gap-8);
    }
    .sec08-headline{
        display: flex;
        flex-direction: column;
        gap: var(--gap-1);
    }
    .sec08-contents{
        padding: 0 10px;
    }
    .sec08-contents-top-data{
        padding: 5px;
        min-width: 30vw;
    }
    .sec08-contents-top-data-wrap{
        gap: var(--gap-1);
    }
    .sec08-contents-top-data .impact{
        font-size: var(--fs-20);
        letter-spacing: -1px;
    }
    .sec08-contents-top-data .impact>b{
        font-size: var(--fs-40);
        letter-spacing: -1px;
    }
    .sec08-contents-top-data .desc{
        font-size: var(--fs-16);
        word-break: keep-all;
    }
    .sec08-contents-top-item-wrap{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .sec08-contents-top-item{
        min-height: 25vh;
        border-radius: 6px;
    }
    .sec08-contents-top-item img{
        max-width: 20vw;
    }
    .sec08-contents-top-item .item-head{
        font-size: var(--fs-18);
    }
    .sec08-contents-top-item>*{
        font-size: var(--fs-13);
        word-break: keep-all;
    }
    .sec08-contents-bottom-ytb .ytb-info{
        font-size: var(--fs-16);
    }
}

/* #################### SEC09 STYLES #################### */
.sec09{
    background: url(../images/sec09-bg.png)no-repeat;
    background-size: cover;
    background-position: center center;
    max-height: 100vh;
}
.sec09 .section-inner{
    width: 100%;
    min-height: 100vh;
    gap: var(--gap-10);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec09-headline{
    color: #fff;
}
.sec09-contents-ytbs{
    display: flex;
    gap: var(--gap-10);
}
.sec09-contents-ytbs .ytb{
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}
.sec09-contents-ytbs .ytb .ytb-media{
    position: relative;
    min-height: 40vh;
    aspect-ratio: 16/9;
    border: 1px solid #fff;
    border-radius: 10px;
    overflow: hidden;
}
.sec09-contents-ytbs .ytb .ytb-media iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sec09-contents-ytbs .ytb .ytb-info{
    font-size: var(--fs-28);
    font-weight: 700;
    color: #fff;
}
@media(max-width:768px){
    .sec09{
        display: flex;
    }
    .sec09 .section-inner{
        min-height: 80vh;
    }
    .sec09-contents-ytbs{
        flex-direction: column;
    }
    .sec09-contents-ytbs .ytb .ytb-media{
        min-height: 20vh;
        border-radius: 5px;
    }
    .sec09-contents-ytbs .ytb .ytb-info{
        font-size: var(--fs-14);
    }
}

/* #################### SEC10 STYLES #################### */
.sec10{
    position: relative;
    background: url(../images/sec10-bg.png)no-repeat;
    max-height: 200vh;
    background-size: cover;
}
.sec10 .section-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 180vh;
    gap: var(--gap-5);
}
.sec10-headline{
    color: #fff;
    text-shadow: 0 3px 3px rgba(0,0,0,0.2);
}
.sec10-contents{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-10);
}
.sec10-contents-table>*{
    font-size: var(--fs-22);
}
.sec10-contents-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 70vh;
    gap: var(--gap-10);
}
.sec10-contents-table{
    max-width: 60vw;
    border: none;
    border-collapse: collapse;
    background-color: #fff;
    z-index: 20;
}
.sec10-contents-table thead tr th,
.sec10-contents-table tbody tr td{
    padding: 30px;
}
.sec10-contents-objects{
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 90vw;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}
[class*=sec10-contents-objects-]{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sec10-contents-objects-lft img:first-child{
    transform: translate(10%, -10%) rotate(-10deg);
    max-width: 15vw;
    filter: blur(3px);
    opacity: 0.7;
    animation-name: object;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}
.sec10-contents-objects-lft img:nth-child(2){
    transform: translate(50%, 20%) rotate(10deg);
    min-width: 15vw;
    animation-name: object;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}
.sec10-contents-objects-rgt img:first-child{
    transform: translate(10%, 60%) rotate(-20deg);
    max-width: 8vw;
    filter: blur(3px);
    opacity: 0.7;
    animation-name: object;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
    animation-duration: 3s;
}
.sec10-contents-objects-rgt img:nth-child(2){
    transform: translate(-10%, -10%) rotate(-10deg);
    min-width: 10vw;
    animation-name: object;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
    animation-duration: 3s;
}
.sec10-contents-objects-rgt img:nth-child(3){
    transform: translate(-50%, -50%) rotate(-10deg);
    max-width: 10vw;
    animation-name: object;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
    animation-duration: 3s;
}
@keyframes object{
    0%{
        margin-top: 0px;
    }
    50%{
        margin-top: 5px;
    }
    100%{
        margin-top: 0px;
    }
}
.sec10-contents-table thead tr [class*=table-header]{
    background-color: #64659E;
    color: #fff;
    font-weight: 500;
}
.sec10-contents-table thead tr .table-header-list{
    font-size: var(--fs-26);
    font-weight: 700;
}
.sec10-contents-table thead tr .table-header-list.new{
    background-color: #373866;
}
.sec10-contents-table thead tr .table-header-list.basis{
    background-color: #242543;
}
.sec10-contents-table tbody tr.target{
    font-weight: 700;
}
.sec10-contents-table tbody tr.service td:nth-child(2){
    display: flex;
    flex-direction: column;
}
.sec10-contents-table tbody tr.service span[class*=impact]{
    font-weight: 700;
}
.sec10-contents-table tbody tr.service span.impact-r{
    color: var(--f-red);
}
.sec10-contents-table tbody tr.price td:not(td:nth-child(1))>span{
    padding: 10px 20px;
    background-color: var(--f-red);
    font-size: var(--fs-28);
    border-radius: 50px;
    font-weight: 700;
    color: #fff;
}
.sec10-contents-table tbody tr.term td:not(td:nth-child(1)){
    font-size: var(--fs-26);
    font-weight: 700;
}
.sec10-contents-top p.now{
    padding: 12px 30px;
    font-size: var(--fs-24);
    font-weight: 500;
    color: var(--f-red);
    background-color: #fff;
}
.sec10-contents-table tbody tr td{
    position: relative;
}
.sec10-contents-table tbody tr td::after{
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    width: 15vw;
    bottom: 1px;
    border-bottom: 1px solid var(--lgy);
    transform: translateX(-50%);
}
.sec10-contents-table tbody tr td:first-child::after{
    width: 7vw;
}
.sec10-contents-table tbody tr:last-child td::after{
    display: none;
}
.sec10-contents-table tbody tr td::before{
    content: '';
    position: absolute;
    display: block;
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    border-right: 1px solid var(--lgy);
    transform: translateX(1px);
}
.sec10-contents-table tbody tr td:last-child::before{
    display: none;
}
.sec10-contents-bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sec10-contents-bottom .ytb-media{
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #fff;
}
.sec10-contents-bottom .ytb-media iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sec10-contents-bottom .ytb-info{
    display: inline-block;
    margin-top: 10px;
    font-size: var(--fs-20);
    font-weight: 700;
    color: #fff;
}
@media(max-width:768px){
    .sec10{
        display: flex;
    }
    .sec10 .section-inner{
        padding: 10vh 10px;
        min-height: 10vh;
    }
    .sec10-contents{
        gap: var(--gap-20);
    }
    .sec10-contents-table{
        min-width: 95vw;
    }
    .sec10-contents-table>*{
        font-size: var(--fs-12);
    }
    .sec10-contents-table thead tr th,
    .sec10-contents-table tbody tr td{
        padding: 20px;
    }
    .sec10-contents-table thead tr .table-header-list{
        font-size: var(--fs-14);
    }
    .sec10-contents-table tbody tr td:first-child::after{
        width: 16vw;
    }
    .sec10-contents-table tbody tr.price td:not(td:nth-child(1))>span{
        font-size: var(--fs-16);
        padding: 5px 10px;
    }
    .sec10-contents-table tbody tr.term td:not(td:nth-child(1)){
        font-size: var(--fs-16);
    }
    .sec10-contents-table thead tr th,
    .sec10-contents-table tbody tr td{
        padding: 10px 5px;
    }
    .sec10-contents-table tbody tr td::after{
        width: 30vw;
    }
    .sec10-contents-top{
        gap: var(--gap-4);
    }
    .sec10-contents-top p.now{
        font-size: var(--fs-16);
        padding: 10px;
    }
    .sec10-contents-objects-lft img:first-child{
        transform: translate(10%, -27%) rotate(-10deg);
        filter: blur(1px);
    }
    .sec10-contents-objects-lft img:nth-child(2){
        transform: translate(10%, 500%) rotate(10deg);
        min-height: 9.5vh;
        object-fit: contain;
        z-index: 10;
    }
    .sec10-contents-objects-rgt img:first-child{
        transform: translate(10%, 100%) rotate(-10deg);
        filter: blur(2px);
    }
    .sec10-contents-objects-rgt img:nth-child(2){
        transform: translate(-42%, -40%) rotate(-10deg);
        min-height: 12vh;
        object-fit: contain;
    }
    .sec10-contents-objects-rgt img:nth-child(3){
        transform: translate(-50%, 450%) rotate(-10deg);
        min-height: 8.5vh;
        min-width: 18vw;
        object-fit: contain;
    }
    .sec10-contents-bottom{
        z-index: 50;
    }
}

/* #################### SEC11 STYLES #################### */
.sec11{
    background-color: #fff;
    max-height: 100vh;
}
.sec11 .section-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    gap: var(--gap-10);
}
.sec11-headline{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-4);
}
.sec11-headline-sub{
    font-size: var(--fs-26);
}
.sec11-contents{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-4);
}
.sec11-contents-links{
    display: flex;
    gap: var(--gap-5);
}
.sec11-contents-link{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2);
    min-width: 15vw;
    padding: 20px 0;
    background-color: var(--f-red);
    border-radius: 50px;
    cursor: pointer;
}
.sec11-contents-link-icon{
    position: absolute;
    top: 50%;
    transform: translate(20%, -50%);
    border-radius: 100px;
    padding: 20px;
    background-color: #fff;
    left: 0;
}
.sec11-contents-link-icon img{
    position: absolute;
    width: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.sec11-contents-link-txt{
    transform: translateX(10%);
    font-size: var(--fs-24);
    font-weight: 700;
    line-height: var(--fs-18);
    color: #fff;
    user-select: none;
}
.sec11-contents-info{
    min-width: 40vw;
    width: 100%;
    background-color: var(--blk);
    padding: 30px 0;
    border-radius: 10px;
}
.sec11-contents-info .info-list{
    position: relative;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
}
.sec11-contents-info .info-list::after{
    content: '';
    position: absolute;
    display: block;
    left: 50%;
    bottom: 0;
    width: 80%;
    height: 1px;
    border-bottom: 0.5px solid var(--gry);
    transform: translateX(-50%);
}
.sec11-contents-info .info-list:last-child::after{
    display: none;
}
.sec11-contents-info .info-list>*{
    color: #fff;
    font-size: var(--fs-22);
    font-weight: 300;
}
.sec11-contents-info .info-list .info-title{
    min-width: 10vw;
    text-align: center;
    font-weight: 700;
}
.sec11-contents-info .info-list .info-desc{
    min-width: 30vw;
    text-align: center;
}
@media(max-width:768px){
    .sec11{
        display: flex;
    }
    .sec11 .section-inner{
        max-width: 80vw;
        padding: 10vh 10px;
    }
    .sec11-headline-sub{
        font-size: var(--fs-18);
        word-break: keep-all;
    }
    .sec11-contents{
        gap: var(--gap-8);
    }
    .sec11-contents-links{
        flex-direction: column;
        gap: var(--gap-2);
    }
    .sec11-contents-link{
        min-width: 60vw;
        padding: 15px 0;
    }
    .sec11-contents-link-icon{
        transform: translate(10%, -50%);
    }
    .sec11-contents-link-txt{
        font-size: var(--fs-18);
    }
    .sec11-contents-info{
        min-width: 90vw;
        max-width: 100vw;
    }
    .sec11-contents-info .info-list{
        padding: 10px 20px;
    }
    .sec11-contents-info .info-list>*{
        font-size: var(--fs-14);
    }
    .sec11-contents-info .info-list .info-title{
        min-width: 20vw;
    }
    .sec11-contents-info .info-list .info-desc{
        min-width: 60vw;
    }
}

/* #################### SEC12 STYLES #################### */
.sec12{
    background-color: var(--dgy);
    max-height: 200vh;
}
.sec12 .section-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 100px 0;
    gap: var(--gap-10);
}
.sec12-contents{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-10);
}
.sec12-contents-qnas{
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    min-width: 60vw;
}
.question{
    position: relative;
    padding: 10px;
    min-width: 60vw;
    text-align: left;
    background-color: var(--f-red);
    border-radius: 60px;
    z-index: 30;
    cursor: pointer;
}
.question span{
    position: relative;
    display: inline-block;
    font-size: var(--fs-24);
    font-weight: 500;
    color: #fff;
    margin-left: 2.2vw;
    user-select: none;
}
.question span::before{
    content: '';
    position: absolute;
    display: inline-block;
    background: url(../images/icons/sec12-question.svg)no-repeat;
    background-size: cover;
    padding: 20px;
    top: 50%;
    left: 0;
    transform: translate(-120%, -50%);
}
.question [class*=s]{
    display: none;
}
.question [class*=s].active{
    display: block;
}
.question [class*=s].active img{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-100%, -50%);
}
.question span>b{
    font-weight: 700;
    color: var(--yel);
}
.question.active span>b{
    font-weight: 700;
    color: var(--yel);
}
.answer{
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    text-align: left;
    background-color: var(--blk);
    z-index: 20;
    padding: 0 20px 20px;
}
.qna:nth-child(1) .answer,
.qna:nth-child(4) .answer,
.qna:nth-child(5) .answer{
    transform: translateY(-40%);
    padding: 0 20px;
}
.qna:nth-child(2) .answer,
.qna:nth-child(3) .answer{
    transform: translateY(-70%);
    padding: 0 20px;
}
.qna:last-child .answer{
    transform: translateY(-20%);
    padding: 0 20px;
}
.answer.active{
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
    width: 100%;
    text-align: left;
    background-color: var(--blk);
    z-index: 20;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: 0.5s;
}
.answer span{
    position: relative;
    display: inline-block;
    color: #fff;
    line-height: 0px;
    bottom: 20px;
}
.answer.active span{
    color: #fff;
    font-size: var(--fs-18);
    line-height: var(--fs-26);
    font-weight: 300;
    bottom: 0px;
}
.answer.active span>b{
    font-weight: 700;
}
.qna:nth-child(1) .answer.active,
.qna:nth-child(4) .answer.active,
.qna:nth-child(5) .answer.active{
    transform: translateY(-20%);
    max-height: 10vh;
    padding: 3vh 20px 20px;
}
.qna:nth-child(2) .answer.active,
.qna:nth-child(3) .answer.active{
    transform: translateY(-35%);
    max-height: 8vh;
    padding: 4vh 20px 20px;
}
.qna:last-child .answer.active{
    transform: translateY(-10%);
    max-height: 30vh;
    padding: 4vh 20px 20px;
}
.sec12-service-downbtn{
    display: block;
    border: none;
    max-width: 26vw;
    width: 100%;
    margin: auto;
    padding: 20px 0;
    background-color: var(--f-red);
    border-radius: 10px;
    cursor: pointer;
}
.sec12-service-downbtn span{
    font-family: var(--main-fnt);
    font-size: var(--fs-24);
    color: #fff;
    user-select: none;
}
.sec12-service-downbtn span:last-child{
    display: inline-block;
    font-size: var(--fs-20);
    opacity: 0.5;
    margin-left: 10px;
}
@media(min-width:1921px) and (max-width:2480px){
    .question span::before{
        transform: translate(-150%, -50%);
    }
}
@media(max-width:768px){
    .sec12{
        display: flex;
        max-height: 300vh;
    }
    .sec12 .section-inner{
        min-height: 80vh;
        justify-content: center;
        padding: 0 10px;
        gap: var(--gap-6);
    }
    .sec12-headline{
        display: flex;
        flex-direction: column;
        gap: var(--gap-2);
    }
    .sec12-headline-sub{
        font-size: var(--fs-16);
    }
    .question{
        padding: 5px 0;
        max-width: 95vw;
    }
    .question span{
        font-size: var(--fs-12);
        margin-left: 7vw;
        transform: translateY(-2px);
    }
    .question span::before{
        padding: 10px;
        transform: translate(-120%, -50%);
    }
    .question [class*=s].active img{
        width: 12px;
        height: 12px;
    }
    .sec12-contents{
        gap: var(--gap-16);
    }
    .sec12-contents-qnas{
        max-width: 95vw;
    }
    .sec12-service-downbtn{
        max-width: 70vw;
        padding: 10px 0;
    }
    .sec12-service-downbtn span{
        font-size: var(--fs-18);
    }
    .qna{
        max-height: 12vh;
    }
    .qna:nth-child(1),
    .qna:nth-child(4),
    .qna:nth-child(5){
        max-height: 12vh;
    }
    .qna:nth-child(1) .answer,
    .qna:nth-child(4) .answer,
    .qna:nth-child(5) .answer{
        transform: translateY(-20%);
    }
    .qna:nth-child(1) .answer.active,
    .qna:nth-child(4) .answer.active,
    .qna:nth-child(5) .answer.active{
        transform: translateY(-20%);
    }
    .qna:nth-child(2),
    .qna:nth-child(3){
        max-height: 10vh;
    }
    .qna:nth-child(2) .answer,
    .qna:nth-child(3) .answer{
        transform: translateY(-70%);
    }
    .qna:nth-child(2) .answer.active,
    .qna:nth-child(3) .answer.active{
        transform: translateY(-25%);
        padding: 2vh 20px 10px;
    }
    .answer.active span{
        font-size: var(--fs-11);
        line-height: var(--fs-14);
        letter-spacing: -0.8px;
    }
    .qna:last-child .answer{
        transform: translateY(-8%);
        padding: 0 10px;
    }
    .qna:last-child .answer.active{
        transform: translateY(-8%);
        padding: 2vh 10px 12px;
        min-height: 16vh;
    }
}

/* #################### FOOTER STYLES #################### */
footer{
    background-color: #2A2F43;
    max-height: 35vh;
}
.footer-inner{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gap-18);
    padding: 50px 0;
    min-height: 20vh;
}
.footer-section{
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
}
.footer-section>*{
    color: #fff;
}
.footer-section.one .footer-section-headline{
    font-size: var(--fs-30);
    font-weight: 700;
}
.footer-section-headline{
    font-size: var(--fs-22);
}
.footer-section-txt{
    font-size: var(--fs-18);
    font-weight: 300;
    line-height: var(--fs-24);
}
.footer-section:not(.footer-section.one) ul li{
    font-size: var(--fs-16);
    line-height: var(--fs-24);
    font-weight: 300;
    cursor: pointer;
}
@media(max-width:768px){
    footer{
        display: flex;
        min-height: 60vh;
    }
    .footer-inner{
        flex-direction: column;
        gap: var(--gap-5);
        padding: 10vh 20px;
    }
    .footer-section.one .footer-section-headline{
        font-size: var(--fs-24);
    }
    .footer-section-txt{
        font-size: var(--fs-14);
        line-height: var(--fs-18);
    }
    .footer-section-headline{
        font-size: var(--fs-14);
    }
    .footer-section:not(.footer-section.one) ul li{
        font-size: var(--fs-12);
        line-height: var(--fs-16);
    }
}