.about{overflow-x: hidden;}

/* s1 */
.about .s1{
    position: relative;
    height: 100vh;
    margin-top: -1px;
}
.about .s1 .bgBx{
    background-color: #202021;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow:hidden;
}
.about .s1 .bg{
    background-image: url(/asset/img/sub/btsoft/about/s1_bg.jpg);
    background-size: 100vw 100vh;
    background-position: center;
    background-repeat: no-repeat;
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* clip-path: polygon(33% 0, 66% 0, 66% 100%, 33% 100%); */
    /* will-change: clip-path; */
}
.about .s1 .wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.about .s1 .txtBx{display: flex;flex-direction: column;gap: 20px;align-items: center;justify-content: center;text-align: center;}
.about .s1 .txtBx > div{overflow: hidden;}
.about .s1 .txtBx small{display: block;font-size: 20px;font-weight: 400;color: #fff;letter-spacing: -0.05em;font-family: 'Inter Tight';}
.about .s1 .txtBx h2{font-size: 66px;font-weight: 600;color: #fff;letter-spacing: -0.05em;line-height: 1.51515;}

.about .s1 .txtBx br._820{display: none;}

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

    .about .s1 .txtBx h2{font-size: clamp(58px, 58 / 1440 * 100vw, 66px);}
}
@media screen and (max-width: 1440px) {

    .about .s1 .txtBx small {font-size: clamp(18px, 18 / 1280 * 100vw, 20px);}
    .about .s1 .txtBx h2{font-size: clamp(48px, 48 / 1280 * 100vw, 58px);}
}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {
    ._sub.about ._contents {padding: unset;}
    .about .s1 .txtBx h2 {font-size: clamp(42px, 42 / 820 * 100vw, 48px);}
}
@media screen and (max-width: 820px) {

    .about .s1 .txtBx h2 {font-size: clamp(28px, 28 / 500 * 100vw, 42px);}
    .about .s1 .txtBx br{display: none;}
    .about .s1 .txtBx br._820{display: block;}

}
@media screen and (max-width: 500px) {
    .about .s1{height: 80vh;}
    .about .s1 .txtBx small {font-size: clamp(16px, 16 / 360 * 100vw, 18px);}
    .about .s1 .txtBx h2 {font-size: clamp(22px, 22 / 360 * 100vw, 28px);}
}
@media screen and (max-width: 360px) {
    .about .s1 .txtBx small {font-size: clamp(14px, 14 / 280 * 100vw, 16px);}
    .about .s1 .txtBx h2 {font-size: clamp(18px, 18 / 280 * 100vw, 22px);}
}

/* s2 */
.about .s2{padding-top: 160px;box-sizing: border-box;}
.about .s2 .wrap{padding-left: 55px;padding-right: 55px;box-sizing: border-box;}
.about .s2 .txtBx > div {overflow: hidden;}
.about .s2 .txtBx h2{font-size: 62px;font-weight: 700;color: #000;line-height: 1.46774;letter-spacing: -0.05em;}

.about .s2 .cardBx{display: flex;gap: 30px;justify-content: flex-end;padding-top: 120px;}
.about .s2 .cardBx .card{max-width: 227px;width: 100%;background: #2e2e2e;border-radius: 17px;
padding: 25px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between; gap: 3.8em;transition: background 0.3s,top 0.3s;position: relative;top: 0;}
.about .s2 .cardBx .card:hover{background-color: var(--red);top: -65px;}
.about .s2 .cardBx .card ._tit p{font-size: 17px;font-weight: 500;color: #fff;letter-spacing: -0.05em;line-height: 1.35294;}
.about .s2 .cardBx .card .count{display: flex;align-items: center;gap: 4px; font-size: 83px;font-weight: 400;color: #fff;letter-spacing: -0.005em;min-height: 1em;}
.about .s2 .cardBx .card .count p{font-size: 18px;font-weight: 600;color: #adadad;margin-top: 2.2em;}
.about .s2 .cardBx .card .count .odometer{line-height: 1;}

@media screen and (max-width: 1680px) {
    .about .s2 .txtBx h2{font-size: clamp(52px, 52 / 1440 * 100vw, 62px);}
    .about .s2 .cardBx .card .count{font-size: clamp(73px, 73 / 1440 * 100vw, 83px);}
}
@media screen and (max-width: 1440px) {
    .about .s2 .txtBx h2 {font-size: clamp(48px, 48 / 1280 * 100vw, 52px);}
    .about .s2 .cardBx .card .count{font-size: clamp(63px, 63 / 1280 * 100vw, 73px);}
    .about .s2 .cardBx .card .count p{margin-top: 1.6em;}
}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {
    .about .s2 .txtBx h2 {font-size: clamp(38px, 38 / 820 * 100vw, 48px);}
    .about .s2 .cardBx .card ._tit p{font-size: clamp(15px, 15 / 820 * 100vw, 17px);}
    .about .s2 .cardBx .card .count{font-size: clamp(53px, 53 / 820 * 100vw, 63px);}
    .about .s2 .cardBx .card .count p{font-size: clamp(16px, 16 / 820 * 100vw, 18px);}
    .about .s2 .cardBx .card:hover{top:unset;background-color: #2e2e2e;}
}
@media screen and (max-width: 820px) {
    .about .s2{padding-top: 100px;}
    .about .s2 .wrap{padding:unset;}
    .about .s2 .txtBx h2 {font-size: clamp(32px, 32 / 500 * 100vw, 38px);}
    .about .s2 .cardBx{gap: 10px;justify-content: center;padding-top: 60px;}
    .about .s2 .cardBx .card .count {font-size: clamp(32px, 32 / 500 * 100vw, 53px);}
    .about .s2 .cardBx .card .count p {margin-top: 0.9em;}
}
@media screen and (max-width: 500px) {
    .about .s2 .txtBx h2 {font-size: clamp(28px, 28 / 360 * 100vw, 32px);}
    .about .s2 .cardBx{flex-direction: column;gap: 20px;}
    .about .s2 .cardBx .card{max-width: unset;}

    .about .s2 .cardBx .card .count {font-size: clamp(42px, 42 / 360 * 100vw, 53px);}
}
@media screen and (max-width: 360px) {
    .about .s2 .txtBx h2 {font-size: clamp(22px, 22 / 280 * 100vw, 28px);}
    .about .s2 .cardBx .card .count{font-size: clamp(32px, 32 / 280 * 100vw, 42px);}
    .about .s2 .cardBx .card .count p {font-size: clamp(14px, 14 / 280 * 100vw, 16px);}
}

/* s3 */

.about .s3{padding-top: 160px;box-sizing: border-box;padding-bottom: 60px;}
.about .s3 .txtBx{text-align: center;}
.about .s3 .txtBx > div{overflow: hidden;}
.about .s3 .txtBx h3{font-size: 52px;font-weight: 700;color: #000; line-height: 1.51923;letter-spacing: -0.05em;}

.about .s3 .marqueeBx:nth-child(2){margin-top: 70px;}
.about .s3 .marqueeBx{display: flex; overflow: hidden; width: fit-content;}
.about .s3 .marqueeBx .marquee{
    display: flex; gap: 20px;
    animation: marquee 120s linear infinite;
    padding: 0 10px;
}
.about .s3 .marqueeBx .marquee.n2{
    display: flex; gap: 20px;
    animation: marquee 120s linear infinite reverse;
    padding: 0 10px;
}

.about .s3 .marqueeBx .marquee > div{min-width: 225px;width: 100%;min-height: 121px;border: 2px solid #d4d4da;display: flex;align-items: center;justify-content: center;transition: border 0.3s;}
.about .s3 .marqueeBx .marquee > div:hover{background-color: #c01640;}
.about .s3 .marqueeBx .marquee > div:hover img{filter: brightness(0.3) invert(1);}
.about .s3 .marqueeBx .marquee > div img{
    /* filter: grayscale(1) brightness(1); */
    /* max-width: 50%; */
    /* max-width: 60%; */
}

.about .s3 .marqueeBx{ margin-top: 30px;}

@keyframes marquee {
    0% {transform: translateX(0);}
    100% {transform: translateX(-100%);}
}

.about .s3 .marqueeTxt{overflow: hidden;width: fit-content;display: flex;align-items: center;margin-top: 120px;}
.about .s3 .marqueeTxt .inner{display: flex;gap: 40px;animation: marquee 30s linear infinite;}
.about .s3 .marqueeTxt .inner > div{padding-right: 40px;box-sizing: border-box;display: flex;gap: 80px;}
.about .s3 .marqueeTxt .inner p{font-size: 138px;font-weight: 700;font-family: 'Inter Tight';color:#cccccc;white-space: nowrap;line-height: 1.3;}
.about .s3 .marqueeTxt .inner em{color: #2c2929;font-size: 138px;font-weight: 700;font-family: 'Inter Tight';white-space: nowrap;line-height: 1.3;}

@media screen and (max-width: 1680px) {
    .about .s3 .txtBx h3{font-size: clamp(48px, 48 / 1440 * 100vw, 52px);}
    .about .s3 .marqueeTxt .inner em, .about .s3 .marqueeTxt .inner p{font-size: clamp(128px, 128 / 1440 * 100vw, 138px);}
}
@media screen and (max-width: 1440px) {
    .about .s3 .txtBx h3{font-size: clamp(42px, 42 / 1280 * 100vw, 48px);}
    .about .s3 .marqueeTxt .inner em, .about .s3 .marqueeTxt .inner p{font-size: clamp(118px, 118 / 1280 * 100vw, 128px);}
}
@media screen and (max-width: 1280px) {
    .about .s3 .marqueeTxt .inner em, .about .s3 .marqueeTxt .inner p{font-size: clamp(108px, 108 / 1024 * 100vw, 118px);}
    
    .about .s3 .marqueeTxt .inner > div{gap: 40px;padding-right: 10px;}
}
@media screen and (max-width: 1024px) {
    .about .s3 .txtBx h3{font-size: clamp(38px, 38 / 820 * 100vw, 42px);}
    .about .s3 .marqueeBx .marquee > div{min-width: 200px;min-height: 109px;}
    .about .s3 .marqueeTxt .inner{gap: 20px;}
    .about .s3 .marqueeTxt .inner em, .about .s3 .marqueeTxt .inner p{font-size: clamp(88px, 88 / 820 * 100vw, 98px);}
}
@media screen and (max-width: 820px) {
    .about .s3{padding-top: 120px;}
    .about .s3 .txtBx h3{font-size: clamp(32px, 32 / 500 * 100vw, 38px);}
    .about .s3 .marqueeBx .marquee > div{min-width: 180px;min-height: 99px;}
    .about .s3 .marqueeTxt .inner em, .about .s3 .marqueeTxt .inner p{font-size: clamp(58px, 58 / 500 * 100vw, 78px);}
    .about .s3 .marqueeTxt{margin-top: 80px;}
}
@media screen and (max-width: 500px) {
    .about .s3 .txtBx h3{font-size: clamp(24px, 24 / 360 * 100vw, 32px);}
    .about .s3 .marqueeTxt .inner em, .about .s3 .marqueeTxt .inner p{font-size: clamp(48px, 48 / 360 * 100vw, 58px);}
    .about .s3 .marqueeTxt .inner > div {gap: 20px;}
}
@media screen and (max-width: 360px) {
    .about .s3 .txtBx h3{font-size: clamp(20px, 20 / 280 * 100vw, 24px);}
    .about .s3 .marqueeTxt .inner em, .about .s3 .marqueeTxt .inner p{font-size: clamp(38px, 38 / 280 * 100vw, 48px);}
}

/* s4 */
.about .s4 {position: relative;padding: 200px 0;box-sizing: border-box;}
.about .s4 .bg{
    background-image: url(/asset/img/sub/btsoft/about/s4_bg.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.about .s4 .wrap{}
.about .s4 ._titBx{display: flex;flex-direction: column;gap: 20px;align-items: center;justify-content: center;text-align: center; margin-bottom: 150px;}
.about .s4 ._titBx > div{overflow: hidden;}
.about .s4 ._titBx small{font-size: 17px;font-weight: 400;color: #fff;letter-spacing: -0.05em;display: block;}
.about .s4 ._titBx h3{font-size: 66px;font-weight: 700;color: #fff;line-height: 1.590909;letter-spacing: -0.05em;}

.about .s4 .contBx{padding:60px 40px;padding-top:120px;box-sizing: border-box;position: relative;display: flex;align-items: flex-start;justify-content: space-between;}
.about .s4 .contBx .barBx{
    width: 1px;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0.3) 0%, #ffffff 20%, #ffffff 80%, rgba(36, 36, 36, 0.3) 100%);
    position: absolute;
    left: -20%;
    transform: translateX(-50%);
}
.about .s4 .contBx .barBx .dot {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 1;
    box-sizing: border-box;
    width: 44px;
}
.about .s4 .contBx .barBx .dot{}
.about .s4 .contBx .barBx .dot img{}
.about .s4 .contBx .left .txtBx > div{overflow: hidden;}
.about .s4 .contBx .left .txtBx small{font-size: 22px;font-weight: 400;color: #fff;letter-spacing: -0.05em;display: block;}
.about .s4 .contBx .left .txtBx h2{font-size: 62px;font-weight: 700;color: #fff;line-height: 1.5;letter-spacing: -0.05em;padding-top: 30px;}

.about .s4 .contBx .right{display: flex;flex-direction: column;position: relative;align-items: flex-start;height: 100%;}
.about .s4 .contBx .right ._list {font-size: 58px;}
.about .s4 .contBx .right ._list > div{overflow: hidden;}
.about .s4 .contBx .right ._list h3{font-size: inherit;font-weight: 700;color: rgba(255, 255, 255, 0.2);font-family: 'Inter Tight';transition: color 0.3s,transform 0.3s;}
.about .s4 .contBx .right ._list small{font-size: 24px;font-weight: 500;color: rgba(255, 255, 255, 0.2);letter-spacing: -0.045em;transition: color 0.3s,transform 0.3s;padding-top: 20px;display: block;}
.about .s4 .right ._list.is-active h3{color:#c01640;}   /* h3 활성 색 */
.about .s4 .right ._list.is-active small{color:#ffffff;}/* small 활성 색 */
/* .about .s4 .contBx .right ._list:not(:first-child){margin-top: 160px;} */
.about .s4 .contBx .right ._list:not(:last-child){margin-bottom: 160px;}
.about .s4 .contBx .right ._list:nth-child(2){margin-top: 50px;}

@media screen and (max-width: 1680px) {
    .about .s4{padding: 100px 0;}
    .about .s4 ._titBx h3{font-size: clamp(58px, 58 / 1440 * 100vw, 66px);}
    .about .s4 .contBx .left .txtBx h2{font-size: clamp(58px, 58 / 1440 * 100vw, 62px);padding-top: 15px;}
    .about .s4 .contBx .right ._list {font-size: clamp(52px, 52 / 1440 * 100vw, 58px);}
    .about .s4 .contBx .right ._list small{font-size: clamp(22px, 22 / 1440 * 100vw, 24px);padding-top: 15px;}
}
@media screen and (max-width: 1440px) {
    .about .s4 ._titBx h3{font-size: clamp(46px, 46 / 1280 * 100vw, 58px);}
    .about .s4 .contBx .left .txtBx h2{font-size: clamp(48px, 48 / 1280 * 100vw, 52px)}
    .about .s4 .contBx .right ._list {font-size: clamp(42px, 42 / 1280 * 100vw, 48px);}
    .about .s4 .contBx .right ._list:not(:last-child){margin-bottom: 100px;}

    /* .about .s4 .contBx .left .txtBx{padding-top: 40px;} */
}
@media screen and (max-width: 1280px) {
    .about .s4 ._titBx {margin-bottom: 80px; margin-top: 40px;}
    .about .s4 ._titBx h3{font-size: clamp(42px, 42 / 1024 * 100vw, 46px);}
    .about .s4 .contBx {padding: 160px 40px 80px;}
    .about .s4 .contBx .left .txtBx h2{font-size: clamp(42px, 42 / 1024 * 100vw, 48px)}
    .about .s4 .contBx .right ._list {font-size: clamp(38px, 38 / 1024 * 100vw, 42px);}
    .about .s4 .contBx .left .txtBx small{font-size: clamp(20px, 20 / 1024 * 100vw, 22px);}
    .about .s4 .contBx .right ._list:not(:last-child) {
        margin-bottom: calc(70/48*1em);
    }
    .about .s4 .contBx .right ._list:nth-child(2) {
        margin-top: 25px;
    }
}
@media screen and (max-width: 1024px) {
    .about .s4{padding: 120px 0;}

    .about .s4 ._titBx h3{font-size: clamp(38px, 38 / 820 * 100vw, 42px);}
    .about .s4 .contBx .left .txtBx h2{font-size: clamp(38px, 38 / 820 * 100vw, 42px)}
    .about .s4 .contBx .right ._list {font-size: clamp(32px, 32 / 820 * 100vw, 38px);}
    .about .s4 .contBx .left .txtBx small{font-size: clamp(18px, 18 / 820 * 100vw, 20px);}

    .about .s4 .contBx .barBx{display: none;}
    .about .s4 .contBx{flex-direction: column;padding-top: unset;}
    .about .s4 .contBx .right ._list:not(:last-child) {margin-bottom: 40px;}
}
@media screen and (max-width: 820px) {
    .about .s4 ._titBx {margin-top: 0; margin-bottom: 150px;}
    .about .s4 ._titBx h3{font-size: clamp(32px, 32 / 500 * 100vw, 38px);}
    .about .s4 .contBx .left .txtBx h2{font-size: clamp(32px, 32 / 500 * 100vw, 38px)}
    .about .s4 .contBx .left .txtBx small{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .about .s4 .contBx .right ._list {font-size: clamp(28px, 28 / 500 * 100vw, 32px);}
    .about .s4 .contBx .right ._list small{font-size: clamp(18px, 18 / 500 * 100vw, 22px);}
    

}
@media screen and (max-width: 500px) {
    .about .s4 ._titBx small{font-size: 16px;}
    .about .s4 ._titBx h3{font-size: clamp(28px, 28 / 360 * 100vw, 32px);}
    .about .s4 .contBx {padding: 0 20px 0 20px;}
    .about .s4 .contBx .left .txtBx h2{font-size: clamp(28px, 28 / 360 * 100vw, 32px)}
    .about .s4 .contBx .right ._list {font-size: clamp(22px, 22 / 360 * 100vw, 28px);}
    .about .s4 .contBx .right ._list small{font-size: clamp(16px, 16 / 360 * 100vw, 18px);}
}
@media screen and (max-width: 360px) {
    .about .s4 ._titBx small{font-size: clamp(13px, 13 / 280 * 100vw, 16px);}
    .about .s4 ._titBx h3 {font-size: clamp(24px, 24 / 280 * 100vw, 28px);}
    .about .s4 .contBx {padding: 0 15px 0 15px;}
    .about .s4 .contBx .left .txtBx small {font-size: clamp(13px, 13 / 280 * 100vw, 16px);}
    .about .s4 .contBx .left .txtBx h2 {font-size: clamp(22px, 22 / 280 * 100vw, 28px);}
}

/* s5 */

.about .s5{position: relative;width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;
    /* box-shadow: 0 0 0 1px dodgerblue; */
    --octagonScale: 330px;
    margin-top: calc((100vh - var(--octagonScale)) / -2);
}
.about .s5 .fullImg{
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    /* width: 330px;
    height: 330px; */
    /* aspect-ratio: 1920 / 980; */
    /* clip-path: polygon(46.4404% 33.1633%,
    53.5596% 33.1633%,
    58.5938% 43.0260%,
    58.5938% 56.9740%,
    53.5596% 66.8367%,
    46.4404% 66.8367%,
    41.4063% 56.9740%,
    41.4063% 43.0260%); */

}

.about .s5 .fullImg .octagon{
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    
    width: var(--octagonScale);
    height: var(--octagonScale);
    display: flex; align-items: center; justify-content: center;
    /* transition: width 1s, height 1s, rotate 1s; */
    flex: 0 0 auto;
}
.about .s5 .fullImg .octagon div{
    background-image: url(/asset/img/sub/btsoft/about/s5_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    position: absolute;
}

.about .s5 .contBx{
    opacity: 0;visibility: hidden;
    position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
    /* padding: 100px 0; */
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    /* gap: 2em; */
    /* 4em -> 2em */
    flex-direction: column;
    justify-content: center;
}
.about .s5 .contBx .txtBx{text-align: center;display: flex;flex-direction: column;gap: 20px;align-items: center;justify-content: center;}
.about .s5 .contBx .txtBx > div{overflow: hidden;}
.about .s5 .contBx .txtBx small{font-size: 17px;font-weight: 400;color: #d0d0d0; letter-spacing: -0.05em;}
.about .s5 .contBx .txtBx h3{font-size: 62px;font-weight: 700;color: #fff; line-height: 1.51923;letter-spacing: -0.05em;line-height: 1.5645;letter-spacing: -0.05em;}
.about .s5 .contBx .cardBx{display: flex;gap: 40px;justify-content: center;padding-top: 40px;}
.about .s5 .contBx .cardBx .card{
    max-width: 345px;width: 100%;
    background-color: rgba(21, 21, 21, 0.67);
    border-radius: 24px;
    padding: 50px 20px;box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.about .s5 .contBx .cardBx .card ._line{
    width:20px;height: 2px;background-color: var(--red);
}
.about .s5 .contBx .cardBx .card p{font-size: 22px;font-weight: 400;color: #fff; letter-spacing: -0.05em;line-height: 1.5645;text-align: center;letter-spacing: -0.045em;}


.about .s5 .flxBx {display: flex;align-items: center;justify-content: center;
    position: absolute;top: 50%;left: 51%;transform: translate(-50%,-50%);
    width: 100%;gap: 6.5em;
}
.about .s5 .flxBx > div{overflow: hidden;}
.about .s5 .flxBx .imgBx{
    /* 위치잡기용 */
    width: 330px;
    height: 330px;
    clip-path: polygon(
        46.4404% 33.1633%,
        53.5596% 33.1633%,
        58.5938% 43.0260%,
        58.5938% 56.9740%,
        53.5596% 66.8367%,
        46.4404% 66.8367%,
        41.4063% 56.9740%,
        41.4063% 43.0260%
    );
}
.about .s5 .flxBx h3{font-size: 68px;font-weight: 700;color: #000; line-height: 1.51923;letter-spacing: -0.05em;height: 100px;box-sizing: border-box;}

.about .s5 .bottomTxt{
    position: absolute;bottom: 10%;left: 50%;transform: translateX(-50%);
    width: 100%;text-align: center;
}
/* .about .s5 .bottomTxt > div{overflow: hidden;}
.about .s5 .bottomTxt p{font-size: 22px;font-weight: 400;color: #000; letter-spacing: -0.05em;line-height: 1.5645;text-align: center;letter-spacing: -0.045em;height: 69px;} */
.about .s5 .bottomTxt > div {
    font-size: 20px;
    font-weight: 500;
    color: #727272;
    padding-top: 25px;
    overflow: hidden;
    /* position: absolute; */
    /* bottom: -50px; */
}
.about .s5 .bottomTxt > div:last-child{padding-top: 10px;}
.about .s5 .bottomTxt p{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    /* line-height: 1.5645; */
    letter-spacing: -0.045em;
    
}
.about .s5 .cardBx .card p._mob{display: none;}

@media screen and (max-width: 1680px) {
    .about .s5 .flxBx h3{font-size: clamp(58px, 58 / 1440 * 100vw, 68px);}
    .about .s5 .contBx .txtBx h3{font-size: clamp(58px, 58 / 1440 * 100vw, 68px);}
    .about .s5 .contBx .cardBx{padding-top: 0;}
    .about .s5 .contBx .cardBx .card p{font-size: clamp(20px, 20 / 1440 * 100vw, 22px);}
}
@media screen and (max-width: 1440px) {
    .about .s5 .contBx{gap: 2em;justify-content: center;}
    .about .s5 .contBx .txtBx {gap:8px;padding-top: 5em;}
    .about .s5 .flxBx h3{font-size: clamp(52px, 52 / 1280 * 100vw, 58px);}
    .about .s5 .contBx .txtBx h3{font-size: clamp(52px, 52 / 1280 * 100vw, 58px);}
}
@media screen and (max-width: 1280px) {
    .about .s5 .flxBx {gap:3.5em;}
    .about .s5 .flxBx h3 {font-size: clamp(42px, 42 / 1024 * 100vw, 52px);}
    .about .s5 .bottomTxt {bottom: 5%;}

    .about .s5 .contBx .txtBx h3{font-size: clamp(42px, 42 / 1024 * 100vw, 52px);}
    .about .s5 .contBx .cardBx .card {max-width: 250px;}
    .about .s5 .contBx .cardBx .card p{font-size: clamp(18px, 18 / 1024 * 100vw, 20px);}
}
@media screen and (max-width: 1024px) {
    .about .s5 .flxBx h3{font-size: clamp(32px, 32 / 820 * 100vw, 42px);height: fit-content;}
    .about .s5 .flxBx .imgBx{width: 280px;height: 280px;}
    .about .s5{--octagonScale: 280px;}
    .about .s5 .bottomTxt > div{font-size: clamp(18px, 18 / 820 * 100vw, 20px);}

    .about .s5 .contBx .txtBx small{font-size: clamp(14px, 14 / 820 * 100vw, 17px);}
    .about .s5 .contBx .txtBx h3{font-size: clamp(32px, 32 / 820 * 100vw, 42px);}

    .about .s5 .contBx .cardBx .card p{font-size: clamp(16px, 16 / 820 * 100vw, 18px);}
    .about .s5 .contBx .cardBx .card {max-width: 200px;padding: 20px;}
}
@media screen and (max-width: 820px) {
    .about .s5 .flxBx{flex-direction: column;gap: 2em;}
    .about .s5 .flxBx h3{font-size: clamp(28px, 28 / 500 * 100vw, 32px);}
    .about .s5 .bottomTxt > div{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}

    .about .s5 .contBx .txtBx h3{font-size: clamp(28px, 28 / 500 * 100vw, 32px);}
    .about .s5 .contBx .cardBx{padding: 0 15px;gap: 15px;}
    .about .s5 .contBx .cardBx .card{justify-content: flex-start;}
    .about .s5 .contBx .cardBx .card .icon{max-width: 20px;}
    .about .s5 .contBx .cardBx .card p{font-size: clamp(14px, 14 / 500 * 100vw, 16px);}
    .about .s5 .cardBx .card p._mob{display: block;}
}
@media screen and (max-width: 500px) {
    .about .s5 .flxBx .imgBx{width: 240px;height: 240px;}
    .about .s5{--octagonScale: 240px;}
    .about .s5 .flxBx h3{font-size: clamp(24px, 24 / 360 * 100vw, 28px);}
    .about .s5 .bottomTxt {bottom: 10%;}
    .about .s5 .contBx .cardBx{flex-direction: column;gap: 15px;}
    .about .s5 .contBx .cardBx .card{max-width: unset;}
    .about .s5 .contBx .cardBx .card p._mob{display: none;}

    .about .s5 .contBx .txtBx h3{font-size: clamp(24px, 24 / 360 * 100vw, 28px);}
}
@media screen and (max-width: 360px) {
    .about .s5 .flxBx .imgBx{width: 200px;height: 200px;}
    .about .s5{--octagonScale: 200px;}
    .about .s5 .flxBx h3{font-size: clamp(20px, 20 / 280 * 100vw, 24px);}
    .about .s5 .contBx .txtBx h3{font-size: clamp(20px, 20 / 280 * 100vw, 24px);}
    .about .s5 .bottomTxt > div{font-size: clamp(14px, 14 / 280 * 100vw, 16px);}
}


/* s6 */

.about .s6{position: relative;width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;
    padding: 80px 0;box-sizing: border-box;
    --octagonScale2: 130px;
    /* margin-top: calc((100vh - var(--octagonScale2)) / -2); */
}
.about .s6 .flxBx .octagon{
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    
    width: var(--octagonScale2);
    height: var(--octagonScale2);
    display: flex; align-items: center; justify-content: center;
    /* transition: width .5s, height .5s, rotate .5s; */
    position: absolute;
    top: 50%;left: 50%;transform: translate(-50%,-50%);
    z-index: -1;
}
.about .s6 .flxBx .octagon div{
    background-image: url(/asset/img/sub/btsoft/about/s6_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    position: absolute;
}
.about .s6 .flxBx{display: flex;align-items: center;justify-content: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;gap: 1em;
    /* transition: gap .8s; */
}
.about .s6 .flxBx > div{overflow: hidden;}

.about .s6 .flxBx h3{font-size: 68px;font-weight: 700;color: #000; line-height: 1.51923;letter-spacing: -0.05em;height: 100px;box-sizing: border-box;}

.about .s6 .bottomTxt{
    position: absolute;bottom: 5%;left: 50%;transform: translateX(-50%);
    width: 100%;text-align: center;
}
/* .about .s6 .bottomTxt > div{overflow: hidden;}
.about .s6 .bottomTxt p{font-size: 22px;font-weight: 400;color: #000; letter-spacing: -0.05em;line-height: 1.5645;text-align: center;letter-spacing: -0.045em;height: 69px;} */

.about .s6 .bottomTxt > div {
    font-size: 20px;
    font-weight: 600;
    color: #727272;
    /* padding-top: 25px; */
    overflow: hidden;
    /* position: absolute; */
    /* bottom: -50px; */
}
.about .s6 .bottomTxt > div:last-child{padding-top: 10px;}
.about .s6 .bottomTxt p{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    /* line-height: 1.5645; */
    letter-spacing: -0.045em;
    
}

@media screen and (max-width: 1680px) {
    .about .s6 .flxBx h3{font-size: clamp(58px, 58 / 1440 * 100vw, 68px);}
}
@media screen and (max-width: 1440px) {
    .about .s6 .flxBx h3{font-size: clamp(52px, 52 / 1280 * 100vw, 58px);}
}
@media screen and (max-width: 1280px) {
    .about .s6 .flxBx h3 {font-size: clamp(44px, 44 / 1024 * 100vw, 52px);height: fit-content;}
    
}
@media screen and (max-width: 1024px) {
    .about .s6 .bottomTxt > div{font-size: clamp(18px, 18 / 820 * 100vw, 20px);}
    .about .s6 .flxBx h3 {font-size: clamp(38px, 38 / 820 * 100vw, 44px);}
}
@media screen and (max-width: 820px) {
    .about .s6 .flxBx{flex-direction: column;gap: 0;}
    .about .s6 .flxBx h3{line-height: 1.05;font-size: clamp(34px, 34 / 820 * 100vw, 44px);}

    .about .s6 .flxBx > div:last-child{margin-top: -0.5em;}
}
@media screen and (max-width: 500px) {
    .about .s6 .flxBx h3{font-size: clamp(28px, 28 / 360 * 100vw, 34px);}
    .about .s6 .bottomTxt > div{font-size: clamp(16px, 16 / 360 * 100vw, 18px);}
    .about .s6{--octagonScale2: 50px;}
    
}
@media screen and (max-width: 360px) {
    .about .s6 .flxBx h3{font-size: clamp(24px, 24 / 280 * 100vw, 28px);}
}

/* s7 */

.about .s7 {
    box-sizing: border-box;
    /* overflow: hidden; */
    margin-bottom: 200px;
}
.about .s7 .pin{margin-bottom: 80px; perspective: 300px;}
.about .s7 .pin.last{margin-bottom: 0;}

.about .s7 .pin .box{
    min-height: 480px;
    display: flex; flex-direction: column; justify-content: flex-end; position: relative;
    color: #fff; filter: brightness(1); padding: 100px 150px; box-sizing: border-box;
    border-radius: 30px; overflow: hidden;
}
.about .s7 .pin .bg{
    position: absolute; left: 0; top: 0; z-index: -1;
    width: 100%; height: 100%;
}
.about .s7 .pin .bg.n1{background-color: #ececec;}
.about .s7 .pin .bg.n2{background-color: #2a2a2a;}
.about .s7 .pin .bg.n3{background-color: var(--red);}
.about .s7 .pin .bt_logo{position: absolute;top: 8%;right: 3%;}
.about .s7 .pin .cont{display: flex;gap: 8em;justify-content: flex-start;align-items: center;}
.about .s7 .pin .cont .left .num{
    font-size: 380px;
    font-weight: 300;
    font-family: 'Inter Tight';
    color: #fff;
    overflow: hidden;
    position: relative;
}
.about .s7 .pin .cont .left .num > div {overflow: hidden;position: relative;top: calc(-1em / 4);}
.about .s7 .pin .cont .left .num p{font-size: inherit;position: relative;top: calc(1em/3);}
.about .s7 .pin .cont .left .num._black{color: #000000;}
.about .s7 .pin .cont .right .txtBx{display: flex;flex-direction: column;gap: 40px;}
.about .s7 .pin .cont .right .txtBx h3{
    font-size: 44px;font-weight: 700;color: #fff;line-height: 1.3;
}
.about .s7 .pin .cont .right .txtBx p{
    font-size: 22px;font-weight: 600;color: #fff;line-height: 1.72727;
}
.about .s7 .pin .cont .right .txtBx span{
    font-size: 16px;font-weight: 300;color: #e7bac2;letter-spacing: -0.045em;line-height: 1.75;
}
.about .s7 .pin .cont .right .txtBx h3._black{color: #000000;}
.about .s7 .pin .cont .right .txtBx p._black{color: #000000;}
.about .s7 .pin .cont .right .txtBx span._black{color: #000000;}
.about .s7 .pin .cont .right .txtBx span._white{color: #ffffff;}

@media screen and (max-width: 1680px) {
    .about .s7 .pin .cont .left .num{font-size: clamp(320px, 320 / 1440 * 100vw, 380px);}
    .about .s7 .pin .cont .right .txtBx h3{font-size: clamp(40px, 40 / 1440 * 100vw, 44px);}
}
@media screen and (max-width: 1440px) {
    .about .s7 .pin .cont .left .num{font-size: clamp(300px, 300 / 1280 * 100vw, 320px);}
    .about .s7 .pin .cont .right .txtBx h3{font-size: clamp(34px, 34 / 1280 * 100vw, 40px);}
    .about .s7 .pin .cont .right .txtBx p{font-size: clamp(20px, 20 / 1280 * 100vw, 22px);}
}
@media screen and (max-width: 1280px) {
    .about .s7 .pin .box{justify-content: center;padding: 50px;min-height: 400px;}
    .about .s7 .pin .cont .left .num{font-size: clamp(280px, 280 / 1024 * 100vw, 300px);}
    .about .s7 .pin .cont {gap: 4em;justify-content: center;}

    .about .s7 .pin .cont .right .txtBx h3 {font-size: clamp(28px, 28 / 1024 * 100vw, 34px);}
    .about .s7 .pin .cont .right .txtBx p{font-size: clamp(18px, 18 / 1024 * 100vw, 20px);}
    .about .s7 .pin .cont .right .txtBx span{font-size: clamp(14px, 14 / 1024 * 100vw, 16px);}
}
@media screen and (max-width: 1024px) {
    .about .s7 .pin{margin-bottom: 40px;}
    .about .s7 .pin .box{min-height: 360px;}
    .about .s7 .pin .cont .left .num {font-size: clamp(240px, 240 / 820 * 100vw, 280px);}
    .about .s7 .pin .cont .right .txtBx h3 {font-size: clamp(24px, 24 / 820 * 100vw, 28px);}

    .about .s7 .pin .cont .right .txtBx span br{display: none;}
    .about .s7 .pin .cont .right .txtBx p {font-size: clamp(16px, 16 / 820 * 100vw, 18px);}
}
@media screen and (max-width: 820px) {
    .about .s7 .pin .cont{align-items: flex-start;flex-direction: column;gap: unset;}
    .about .s7 .pin .cont .left .num{font-size: clamp(200px, 200 / 500 * 100vw, 240px);}
    .about .s7 .pin .bt_logo {top: 4%;right: 4%;}
}
@media screen and (max-width: 500px) {

    .about .s7 .pin .bt_logo{max-width:35px;}
    .about .s7 .pin .bt_logo {top: 5%;right: 5%;}
    .about .s7 .pin .cont .left .num{font-size: clamp(140px, 140 / 360 * 100vw, 200px);}
    .about .s7 .pin .box {padding: 35px;}
    .about .s7 .pin .cont .right .txtBx{gap: 20px;}

    .about .s7 .pin .cont .right .txtBx h3 {font-size: clamp(20px, 20 / 360 * 100vw, 24px);}
}
@media screen and (max-width: 360px) {
    .about .s7 .pin .bt_logo {top: 5%;right: 7%;}
    .about .s7 .pin .cont .left .num{font-size: clamp(100px, 100 / 280 * 100vw, 140px);}
    .about .s7 .pin .cont .right .txtBx p br{display: none;}

    .about .s7 .pin .box {padding: 25px;}
    .about .s7 .pin .cont .right .txtBx {gap: 8px;}
    .about .s7 .pin .cont .right .txtBx h3 {font-size: clamp(18px, 18 / 280 * 100vw, 20px);}
    .about .s7 .pin .cont .right .txtBx p {font-size: clamp(14px, 14 / 280 * 100vw, 16px);}
}