.page-content{

    align-items:center;
    display: flex;
    flex-direction: column;
    align-items:center;
}

.hero {
    display: flex;
height: 325px;
padding: 190px 0 120px 0;
flex-direction: column;
align-items: center;
align-self: stretch;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), linear-gradient(99deg, #0A1A2F 0%, #0C3B6A 100%);
text-align: left;
}

.hero__inner{
    display: flex;
flex-direction: column;
align-items: center;
}

.hero__row{
    display: flex;
align-items: flex-start;
gap: 16px;
}

.hero__copy{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}

.hero__title{
    color: #FFF;
font-family: "Pretendard Variable";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 48px */
letter-spacing: -0.48px;
}

.hero__subtitle{
    color: #FFF;
font-family: "Pretendard Variable";
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.425px;
}

.hero_img{
    width: 306.294px;
height: 299.012px;
}


.hero_back2{
    width: 1572px;
height: 309px;
fill: linear-gradient(180deg, #3253E8 0%, rgba(0, 0, 0, 0.00) 100%);
filter: blur(26.850000381469727px);
}


.section--why{
    display: flex;
padding: 160px 0;
flex-direction: column;
align-items: center;
gap: 20px;
align-self: stretch;    
}

.section__title--why{
color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 58px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 81.2px */
letter-spacing: -1.45px;
}

.section__desc--why{
    color: #1D1D1D;
text-align: center;
font-family: "Pretendard Variable";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 30px */
letter-spacing: -0.4px;
}

.introRow{
    display: flex;
max-width: 985;
width: 100%;
padding: 80px 109px 160px 106px;
justify-content: space-between;
align-items: center;

}

.introRow__iconFrame{
width: 180px;
height: 180px;
aspect-ratio: 1/1;
}

.introRow__content{
    text-align: left;
}

.introRow__title{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 52.8px */
letter-spacing: -1.2px;
}
.introRow__textGroup{
    display: flex;
flex-direction: column;
align-items: flex-start;

}

.introRow__lead{
    align-self: stretch;
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 21px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 31.5px */
letter-spacing: -0.525px;
}

.introRow__bullets{
    align-self: stretch;
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */
letter-spacing: -0.34px;
}

.section--components{
    background: #F5F5F7;
display: flex;
padding: 160px 121px;
flex-direction: column;
align-items: center;
gap: 100px;
align-self: stretch;
}

.components{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 67px;
text-align: left;
}
.components__heading{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 67.2px */
letter-spacing: -1.2px;
}


.components__figure{
    display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
align-self: stretch;
}

.components__img{
    width: 958px;
height: 417px;
aspect-ratio: 958/417;
background: url(/img/WEbCore_1.png) lightgray 50% / cover no-repeat;
}

.components__caption{
    color: #1D1D1D;
text-align: center;
font-family: "Pretendard Variable";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */
letter-spacing: -0.34px;
}

.codeCard{
    display: flex;
max-width: 818px;
width: 100%;
padding: 48px 70px;
align-items: center;

border-radius: 12px;
background: #FFF;
box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.08);
}
.codeCard__mono{
    color: #222;
font-family: "Courier New";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22px; /* 137.5% */
text-align: left;
}


.htmlAutoTag{
    display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
}


.htmlAutoTag__header{
    display: flex;
max-width: 1079px;
width: 100%;
padding: 160px 0 100px 121px;
flex-direction: column;
align-items: flex-start;
text-align: left;

}

.htmlAutoTag__headerInner{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
align-self: stretch;
}
.htmlAutoTag__title{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 67.2px */
letter-spacing: -1.2px;
}
.htmlAutoTag__descGroup{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.htmlAutoTag__lead{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 30px */
letter-spacing: -0.5px;
}
.htmlAutoTag__desc{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */
letter-spacing: -0.34px;
padding-inline-start:20px;
}

.htmlAutoTag__desc2{
color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */
letter-spacing: -0.34px;
}


.codeBlockWrap{
    display: flex;
    max-width: 1200px;
    width: 100%;
flex-direction: column;
align-items: center;
}

.codeBlock{
    display: flex;
padding: 44px 66px;
justify-content: center;
align-items: center;
border-radius: 8px;
background: #020617;
}
.codeBlock__mono{
    color: #E5E7EB;
font-family: "Courier New";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 26px; /* 162.5% */
text-align: left;
}

.htmlAutoTag__noteRow{
    display: flex;
max-width: 1079px;
width: 100%;
padding: 26px 0 100px 121px;
flex-direction: column;
align-items: flex-start;

}
.htmlAutoTag__noteRowInner{
    display: flex;
align-items: center;
}
.htmlAutoTag__noteText{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */
letter-spacing: -0.425px;
text-align: left;
}

.security{
    display: flex;
padding: 160px 0;
flex-direction: column;
align-items: center;
gap: 160px;
align-self: stretch;
background: #000;
}

.security__row{
    display: flex;
max-width: 938px;
width: 100%;
padding: 0 121px;
justify-content: space-between;
align-items: center;
}

.security__copy{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
text-align: left;
}

.security__title{
    color: #FFF;
font-family: "Pretendard Variable";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 67.2px */
letter-spacing: -1.2px;
width: 100%;
}

.security__group{
    display: flex;
flex-direction: column;
align-items: flex-start;

}
.security__subtitle{
    color: #FFF;
font-family: "Pretendard Variable";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 30px */
letter-spacing: -0.5px;
}
.security__text{
    color: #FFF;
font-family: "Pretendard Variable";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */
letter-spacing: -0.425px;
text-align: left;
}

.security__imgPad{
    display: flex;
padding: 7px 30px;
align-items: center;
}

.security__imgPadSmall{
    display: flex;
padding: 9px;
align-items: center;
}

.security__copy2{
   display: flex;
flex-direction: column;
align-items: flex-end;
gap: 20px; 
text-align: left;
}

.security__fineprint{
    width: 577px;
    color: #FFF;
font-family: "Pretendard Variable";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: -0.35px;
}

.section--future{
    display: flex;
  
padding: 160px 0;
flex-direction: column;
align-items: center;
gap: 67px;
align-self: stretch;
background: #F5F5F7;
}

.future__headingRow{
    display: flex;
max-width: 1200px;
padding-left: 121px;
align-items: flex-start;
}

.future__heading{
    width: 950px;
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 67.2px */
letter-spacing: -1.2px;
}

.future__cards{
    display: flex;
max-width: 1152px;
align-items: flex-start;
gap: 20px;
height: 391px;
text-align: left;

}

.futureCard--case{
    border-radius: 20px;
background: #FFF;
display: flex;

padding: 60px 15px 60px 30px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
flex: 1 0 0;
align-self:stretch;
}

.futureCard__title{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 39.2px */
letter-spacing: -0.7px;
}

.futureCard__body{
    display: flex;
width: 306px;
flex-direction: column;
align-items: flex-start;
gap: 75px;
}
.futureCard__text{
    align-self: stretch;
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 16px;
font-style: normal;

font-weight: 400;
line-height: 150%; /* 24px */
letter-spacing: -0.4px;
    padding-inline-start: 17px;
        margin-block-start:0px;
            margin-block-end: 0px;
}


.futureCard__note{
    width: 258px;
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: -0.35px;
}

.futureCard--perf{
    display: flex;
padding: 60px 15px 60px 30px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
flex: 1 0 0;
align-self: stretch;
border-radius: 20px;
background: #FFF;
}

.futureCard--roadmap{
    display: flex;
padding: 60px 15px 60px 30px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
flex: 1 0 0;
align-self: stretch;
border-radius: 20px;
background: #FFF;
}




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


    .introRow{
        display: flex;
max-width: 1030px;
padding: 80px 40px 160px 26px;
justify-content: space-between;
align-items: center;
    }
    .introRow__title{
        font-size: 40px;
    }

    .section--components{
        padding: 160px 40px;

    }
    .components{
        display: flex;
flex-direction: column;
align-items: flex-start;
gap: 67px;
width: 100%;


    }
    .components__heading{
            color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 56px */
letter-spacing: -1px;
    }
    .components__img{

width: 100%;
height: auto;
align-self: stretch;
aspect-ratio: 720.00/313.40;
    }
    .htmlAutoTag{

    }
    .htmlAutoTag__header{
        max-width: 958px;
padding: 160px 40px 100px 40px;
width: auto;

    }
    .codeBlockWrap{
        padding: 0 20px;
        width: auto;

    }
    .codeBlock{
        padding: 44px 40px;

    }
    .codeBlock__mono{
        flex: 1 0 0;
        font-size: 15px;
        align-self: stretch;

    }

.htmlAutoTag__noteRow{
    display: flex;
max-width: 1200px;
padding: 26px 40px 100px 40px;
flex-direction: column;
align-items: center;
width: auto;
align-self: stretch;
}
.htmlAutoTag__noteRowInner{
    display: flex;
max-width: 958px;
align-items: flex-start;
align-self: stretch;
}
    .htmlAutoTag__noteText{
        flex: 1 0 0;
        color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */
letter-spacing: -0.425px;
    }
    .section--future{
padding: 160px 40px;

    }
    .security__row{
        display: flex;
padding: 0 40px;
justify-content: space-between;
align-items: center;
width: fit-content;
    }
    .security__copy{
        display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
flex: 1 0 0;
    }
    .security__title{
        font-size: 40px;
        width: fit-content;



    }
    .security__imgPad{
        display: flex;
padding: 7px 8px 7px 27px;
align-items: center;
    }
    .security__title{
        width: 100%;
    }
    .security__imgPadSmall{
        display: flex;
padding: 8px 44px 8px 8px;
align-items: center;
    }
    .security__fineprint{
        align-self: stretch;
    }
    .future__headingRow{
        display: flex;
max-width: 958px;
align-items: flex-start;
align-self: stretch;
padding-left: 0px;
    }
    .future__cards{
        display: flex;
max-width: 958px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
align-self: stretch;
    }
    .futureCard__body{
        align-self: stretch;
        width: auto;

    }
    .futureCard__note{
        width: auto;
        align-self: stretch;
    }
    .future__cards{
        height: auto;
    }
}



@media screen and (max-width: 800px) {
.hero{
    display: flex;
height: 455px;
padding: 158px 0 64px 0;
flex-direction: column;
align-items: center;
align-self: stretch;
overflow: hidden;
}
.hero__inner{
    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.hero__row{
    display: flex;
height: 378.294px;
flex-direction: column;
align-items: center;
gap: 20px;
align-self: stretch;
}
.hero__copy{
    display: flex;
padding: 0 262.5px;
flex-direction: column;
align-items: center;
gap: 16px;
align-self: stretch;
}
.hero__title{
    color: #FFF;
font-family: "Pretendard Variable";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 35.2px */
letter-spacing: -0.32px;
max-width: 255px;
}
.hero__subtitle{
    color: #FFF;
font-family: "Pretendard Variable";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 27px */
}
.hero_img{
width: 235.602px;
height: 230px;
flex-shrink: 0;
}
.section--why{
    gap: 40px;
    padding: 160px 16px;

}
.section__title--why{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 52px */
letter-spacing: -1px;
max-width: 579px;
text-align: left;
}
.section__desc--why{
    max-width: 579px;
color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 27px */
letter-spacing: -0.36px;
text-align: left;
}
.introRow{
    display: flex;
height: 745px;
max-width: 1200px;
padding: 60px 16px 160px 16px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
width: auto;
}
.introRow__content{
    display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
}
.introRow__title{
    max-width: 579px;
width: 100%;
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 38.4px */
letter-spacing: -0.8px;
}
.introRow__textGroup{
    display: flex;
padding: 0 15px;
flex-direction: column;
align-items: flex-end;
gap: 1px;
}

.introRow__lead{
        max-width: 579px;
        color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 27px */
letter-spacing: -0.45px;
width: 100%;
}
.introRow__bullets{
    padding-inline-start: 20px;
}
.section--components{
    padding: 160px 16px;

}
.components__heading{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 41.6px */
letter-spacing: -0.8px;
width: 100%;
}
.components__figure{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;}
.components__caption{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 22.4px */
letter-spacing: -0.28px;
}
.codeCard{
    padding: 42px 10px;

}
.codeCard__mono{
    color: #222;
font-family: "Courier New";
font-size: 13px;
font-style: normal;
font-weight: 700;
line-height: 22px; /* 169.231% */
letter-spacing: -0.26px;
}
.htmlAutoTag__header{
    padding: 160px 16px 100px 16px;

}
.htmlAutoTag__headerInner{
    display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
}
.htmlAutoTag__title{
    max-width: 579px;
align-self: stretch;
color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 41.6px */
letter-spacing: -0.8px;
}
.htmlAutoTag__descGroup{
    display: flex;
flex-direction: column;

gap: 15px;
align-self: stretch;
}
.htmlAutoTag__lead{
    max-width: 579px;
align-self: stretch;
color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 27px */
letter-spacing: -0.45px;
}
.codeCard{
    
align-self: stretch;
width: auto;
}
.htmlAutoTag__desc{
 padding-inline-start:20px   ;
max-width: 579px;
align-items: flex-start;
gap: 2px;
text-align: left;
}
.htmlAutoTag__desc2{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 22.4px */
letter-spacing: -0.28px;
}

.codeBlockWrap{
    display: flex;
padding: 0 16px;
flex-direction: column;
align-items: center;
align-self: stretch;
}

.codeBlock{
    display: flex;
padding: 28px 16px;
justify-content: center;
align-items: center;
align-self: stretch;
border-radius: 8px;
background: #020617;
}
.codeBlock__mono{
    flex: 1 0 0;
    color: #E5E7EB;
font-family: "Courier New";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 26px; /* 185.714% */
width: -webkit-fill-available;
overflow:auto;
}
.htmlAutoTag__noteRow{
    display: flex;
max-width: 1200px;
padding: 18px 16px 100px 16px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.htmlAutoTag__noteText{
    flex: 1 0 0;
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 22.4px */
letter-spacing: -0.28px;
}
.codeBlockWrap{
    display: flex;
padding: 0 16px;
flex-direction: column;
align-items: center;
align-self: stretch;
}

.security{
    display: flex;
padding: 160px 0;
flex-direction: column;
align-items: center;
gap: 160px;
align-self: stretch;
}
.security__row{
    display: flex;
padding: 0 16px;
flex-direction: column-reverse;
align-items: center;
gap: 60px;
}
.security__imgPad{
    display: flex;
padding: 7px 30px;
align-items: center;
}
.security__copy{
    display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
align-self: stretch;
}
.security__title{
    max-width: 579px;
align-self: stretch;
color: #FFF;
font-family: "Pretendard Variable";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 38.4px */
letter-spacing: -0.8px;
}
.security__group{
    display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
align-self: stretch;
}
.security__subtitle{
    max-width: 579px;
align-self: stretch;
color: #FFF;
font-family: "Pretendard Variable";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */
letter-spacing: -0.45px;
}
.security__text{
    max-width: 579px;
align-self: stretch;
color: #FFF;
font-family: "Pretendard Variable";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: -0.28px;
padding-inline-start: 20px;
}
.security__row2{
    display: flex;
padding: 0 16px;
flex-direction: column;
align-items: center;
gap: 60px;
}
.security__fineprint{
    max-width: 579px;
align-self: stretch;
color: #FFF;
font-family: "Pretendard Variable";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: -0.28px;
width: 100%;
}
.section--future{
    padding: 160px 16px;

}
.future__headingRow{
    display: flex;
justify-content: center;
align-items: flex-start;
align-self: stretch;
}
.future__heading{
    max-width: 579px;
flex: 1 0 0;
color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 44.8px */
letter-spacing: -0.8px;
}
.future__cards{
    gap: 16px;

}
.futureCard{
    display: flex;
padding: 40px 10px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
align-self: stretch;
border-radius: 20px;
background: #FFF;
}
.futureCard__title{
    color: #1D1D1D;
font-family: "Pretendard Variable";
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 33.6px */
letter-spacing: -0.6px;
}
.futureCard__body{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 65px;
align-self: stretch;
}
.futureCard__text{
    font-size: 14px;
letter-spacing: -0.28px;
}
.futureCard__note{
       font-size: 14px;
letter-spacing: -0.28px;
 
}
}