@charset "utf-8";

.bg{position: absolute; left: 0; top: 0; width: 100%; object-fit: cover;}
.back_gray{background: #F5F5F5;}
.py_default{padding-block: 130px 160px;}
.typo{-webkit-mask-image: var(--mask-img); -webkit-mask-position: center center; -webkit-mask-repeat: no repeat; -webkit-mask-size: auto; mask-image: var(--mask-img); mask-position: center center; mask-repeat: no-repeat; mask-size: auto; object-fit: cover;  display: block;}
.subpage-wrapper{padding-block: 265px 213px;}
.relative{position: relative;}
.banner{position: relative; height: 270px;}
.banner-mo{display: none;}
@media screen and (max-width: 1399px) {
    .banner-mo{display: block;}
    .banner{height: 455px;}
}
@media screen and (max-width: 767px) {
    .banner{height: initial;}
    .banner .bg{position: initial; min-height: 234px;}
    .banner .bt--box{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
}

.banner-area{
    position: relative; padding: 83px 0 0; height: 802px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    .bg{top: 83px; height: calc(100% - 83px); z-index: -1;}
    h1{font-size: 60px; font-weight: 700; margin: 0 0 14px; line-height: 1.2;}
    span{font-size: 26px; line-height: 1.538;}
}

.intro-content{
    display: flex; margin: 36.2px auto 0; align-items: center; justify-content: space-between; max-width: 1014px;
    div{font-size: 37px; line-height: 1.35;}
    div span{color: #2D8FFF; font-weight: 700;}

    @media screen and (max-width: 1399px) {
        div{font-size: 24px;}
        img{max-width: 50%;}
    }

    @media screen and (max-width: 767px) {
        flex-direction: column;
        img{max-width: 100%;};
        margin: 40px auto 0;
    }
}
/* outline */
#outline{
    padding-block: 265px 0;
    .sp-title{margin: 0 0 24px;}
    .py_default.section2{margin-top: 83px;}
    /* HUROTICS Introduction */
    .hurotics-intro{
        .intro-header{
            margin-bottom: 16.4px; gap: 16.5px;
            .intro-label{font-size: 28px; color: #1D32B9; font-weight: 700; }
            span:not(.intro-label){flex: 1; border-bottom: 5px solid #E5E5E5; padding: 5px 0 0;}
        }
        .typo{--mask-img: url(../images/company/outline-typo-1.svg); background: #E5E5E5;}
    }
    /* Core Philosophy */
    .philosophy-section{
        .philosophy-intro{font-size: 36px; text-align: center; line-height: 1.44; font-weight: 700; max-width: 710px; margin: 0 auto 67px;}
        .philosophy-content{
            .philosophy-diagram{
                position: relative; max-width: 596px;
                .spin{position: absolute; left: 64px; top: 81px; z-index: -1; animation: spin-rotate .6s linear infinite; max-width: 464px;}
                
                @media screen and (max-width: 767px) {
                    .spin{left: 11.7%; top: 16%; max-width: 76%;}
                }
            }
            .philosophy-descriptions{
                .phil-desc-item{
                    margin-bottom: 44px;
                    &:last-child{margin-bottom: 0;}
                    .phil-desc-title{font-size: 22px; font-weight: 700; color: #2D8FFF;}
                    .phil-desc-sub{margin-block: 14px 10px; display: block;}
                    .phil-desc-text{font-size: 17px;}

                    @media screen and (max-width: 767px) {
                        .phil-desc-title{font-size: 20px;}
                        .phil-desc-sub{font-size: 14px;}
                        .phil-desc-text{font-size: 15px;}
                    }
                }
                @media screen and (max-width: 767px) {
                    text-align: center;

                    .phil-desc-item{margin-bottom: 30px;}
                }
            }

            @media screen and (max-width: 1399px) {
                flex-direction: column;
                .philosophy-descriptions{margin-top: 140px;}
            }

            @media screen and (max-width: 767px) {
                .philosophy-descriptions{margin-top: 80px;}
            }
        }

        @media screen and (max-width: 1399px) {
            padding-bottom: 0;
        }
        @media screen and (max-width: 767px) {
            word-break: keep-all;
            .philosophy-intro{font-size: 26px; word-break: keep-all; margin: 0 auto 40px;}
        }
    }

    .awards-section{margin: 0 0 97.5px; gap: 16px;}
    .awards-section:last-child{margin: 0;}
    .awards-content{border-top: 1px solid #2D8FFF; padding-top: 43.5px; display: flex; flex-direction: column; flex: 1;}
    .awards-title{font-size: 26px; font-weight: 700; line-height: 1.46;}
    .awards-subtitle{font-size: 17px; margin: 38px 0 0;}
    .awards-subtitle span{color: #2D8FFF; font-weight: 700; display: block;}
    .awards-link-btn{margin-top: auto; background: #000; color: #fff; display: flex; align-items: center; border-radius: 21px; width: fit-content; height: 41px; justify-content: center; gap: 10px; padding-inline: 14px; transition: all .4s;}

    @media (hover: hover) {
        .awards-link-btn:hover{background: #247ADC;}
    }
    
    /* 태블릿/모바일 터치 지원 */
    @media (hover: none) and (pointer: coarse) {
        .awards-link-btn:active,
        .awards-link-btn.touch-active{background: #247ADC;}
        .awards-link-btn{touch-action: manipulation;}
    }

    @media screen and (max-width: 1399px) {
        .typo{mask-size: 100%;}
        
        .awards-section{flex-direction: column; gap: 40px;}
        .awards-link-btn{margin: 20px 0 0;}
        .sp-sub{font-size: 20px;}
    }

    @media screen and (max-width: 767px) {
        padding-block: 187px 0px;

        .py_default.section2{margin-top: 60px;}
        .py_default{padding-block: 90px 120px;}

        .awards-section{margin: 0 0 60px;}
        .awards-content{align-items: center; text-align: center;}
        .awards-subtitle{margin: 20px 0 0; font-size: 16px;}
        .awards-link-btn{font-size: 14px;}
    }
}

@keyframes spin-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes arrowExpand {
    from {
        transform: translate(-50%, -50%) scaleX(0);
    }
    to {
        transform: translate(-50%, -50%) scaleX(1);
    }
}

/* history */
.history-content {background: #fff;}
.content-grid {display: grid; grid-template-columns: 444px 1fr;}
.philosophy-section {display: flex; flex-direction: column;}
.philosophy-section.left{gap: 473px; position: relative;}
.philosophy-section.left h3{font-size: 60px; font-weight: 700; line-height: 1.3; margin: 0 0 24px;}
.philosophy-section.left p{font-size: 26px;}
.philosophy-section.left .move{display: flex; flex-direction: column; gap: 21px; position: sticky; top: 180px;}
.philosophy-section.left .move a{color: #DBDBDB; font-weight: 600; font-size: 25px; line-height: 1; padding-left: 25px; position: relative;}
.philosophy-section.left .move a::before{content: ''; width: 8px; height: 8px; background: #DBDBDB; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.philosophy-section.left .move a.active{color: #2D8FFF;}
.timeline-section {position: relative;}
.vertical-timeline {position: relative; --progress: 0%; /* CSS 변수 추가 */}

/* 기존 회색 막대 유지 */
.vertical-timeline::before {content: ''; position: absolute; left: 0px; top: 0; bottom: 0; width: 6px; background: #F8F7F6; border-radius: 10px;}
/* 빨간색으로 채워지는 막대 */
.vertical-timeline::after {content: ''; position: absolute; left: 0px; top: 0; width: 6px; background: #2D8FFF; height: var(--progress); transition: height 0.3s ease; border-radius: 10px;}
.timeline-item{position: relative; margin-bottom: 90px; padding-left: 48px; display: flex; flex-direction: column;}
.timeline-item:nth-child(7), .timeline-item:nth-child(17){margin-bottom: 180px;}
.timeline-year{font-size: 79px; line-height: 1.3; margin: 0 0 39px; color: #B1B1B1;}
.timeline-item.active .timeline-year{color: #2D8FFF;}
.timeline-content ul{list-style: none; border-top: 1px solid #E6E6E6;}
.timeline-content li{font-size: 18px; color: #717171; position: relative; border-bottom: 1px solid #E6E6E6; padding-block: 17px; padding-inline: 20px;}
.timeline-content li .num{margin: 0 18.5px 0 0; font-weight: 700;}
.timeline-content li span:not(.num){display: block; text-indent: 48px; margin: 17px 0 0;}
.timeline-item.active .timeline-content li{color: #000;}
.timeline-item.active .timeline-content li .num{color: #2D8FFF; width: 29px; display: inline-block; text-align: center;}
.timeline-content li:last-child{margin-bottom: 0;}

@media (hover: hover) {
    .philosophy-section.left .move a:hover{color: #2D8FFF;}
    .philosophy-section.left .move a:hover::before{background: #2D8FFF;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
    .philosophy-section.left .move a:active,
    .philosophy-section.left .move a.touch-active{color: #2D8FFF;}
    .philosophy-section.left .move a:active::before,
    .philosophy-section.left .move a.touch-active::before{background: #2D8FFF;}
    .philosophy-section.left .move a{touch-action: manipulation;}
}
/* @media screen and (max-width: 1500px) {
  .history-content {overflow: hidden;}
} */
@media screen and (max-width: 1399px) {
  .content-grid{grid-template-columns: 220px 1fr;}
  .timeline-content li{word-break: keep-all;}
  .philosophy-section{justify-content: space-between; padding-bottom: 130px;}
  .philosophy-item:nth-child(1){margin: 0;}
  .philosophy-item:nth-child(2){margin: 0;}

  .timeline-year{font-size: 60px;}
  .philosophy-section.left{justify-content: initial; gap: 200px; padding-bottom: 0;}
  .philosophy-section.left h3{font-size: 50px;}
  .philosophy-section.left p{font-size: 20px;}
  .philosophy-section.left .move a{font-size: 20px;}
  .timeline-content li{font-size: 14px; padding-inline: 10px;}
  .timeline-content li .t.pl{padding-left: 44px; display: inline-block;}
}
@media screen and (max-width: 767px) {
  .subpage-wrapper{padding-block: 187px 100px;}

  .timeline-item{padding-left: 30px; margin-bottom: 40px;}
  .timeline-item{flex-direction: column; gap: 10px;}
  .content-grid{grid-template-columns: 1fr;}
  #history .philosophy-section{text-align: center; margin-bottom: 60px;}
  .timeline-year{font-size: 24px; margin: 0 0 20px;}
  .timeline-item:nth-child(7), .timeline-item:nth-child(17){margin-bottom: 80px;}

  .timeline-section{overflow: hidden;}
  .philosophy-section.left{gap: 0;}
  .philosophy-item{margin: 0 0 20px !important;}
  .philosophy-section.left h3{font-size: 38px;}
  .philosophy-section.left .move{flex-direction: initial; position: fixed; left: 0; bottom: 0; background: #F6F6F6; top: initial; width: 100%; z-index: 100; justify-content: space-between; padding: 15px; gap: 0px;}
  .philosophy-section.left .move a{padding-left: 0; font-size: 14px;}
  .philosophy-section.left .move a::before{display: none;}
  .timeline-item.active .timeline-content li .num{margin: 0;}

  .timeline-content li{text-indent: -29px; padding-left: 49px;}
  .timeline-content li span:not(.num){text-indent: 0; margin: 10px 0 0;}
}

/* core */
.text-cont{text-align: center;}
.sp-title{font-size: 60px; font-weight: 700; line-height: 1.2; margin: 0 0 92px;}
.sp-sub{font-size: 26px;}

@media screen and (max-width: 767px) {
    .sp-title{font-size: 38px !important; margin: 0 0 60px;}
}

#core{
    img{pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none;}
    .bg{position: initial;}
    .sp-title{margin: 0 0 24px;}
    &.subpage-wrapper{padding-block: 265px 0;}
    .bg{z-index: -1; height: 100vh;}
    .cont{margin: 80px 0 0; position: relative; color: #fff; overflow: hidden; position: relative;}
    .cont .flex{justify-content: space-between; z-index: 1; position: relative; max-width: 1200px; position: absolute; width: 100%; top: 105px; left: 50%; transform: translateX(-50%);}
    .flex-left h2{font-size: 36px; font-weight: 700; line-height: 1.36; margin: 0 0 18px;}
    .flex-left span{font-size: 26px; font-weight: 700; color: #2D8FFF;}
    .flex-right .right-desc{font-size: 17px; margin-bottom: 12px;}
    .flex-right .right-desc:last-child{margin-bottom: 0;}
    .core-img{position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%);}
    .core-img.one{opacity: 0; animation: fadeIn 1.5s ease-in-out forwards;}
    .core-img.left{left: calc(50% - 294.5px); animation-delay: 0s;}
    .core-img.mid{z-index: 1; left: calc(50% - 25px); animation: arrowExpand 0.8s ease-out forwards, fadeIn 0.8s ease-out forwards; animation-delay: .5s; transform-origin: left center; opacity: 0;}
    .core-img.right{left: calc(50% + 291px); animation-delay: 1s;}
    .black-cover{position: absolute; width: 100%; height: 100%; top: 0px; left: 0; background: rgba(0,0,0,.7); z-index: -1;}
    .radar-cover{position: absolute; left: 68%; top: 62%; transform: translate(-50%, -50%);}
    .radar-cover .radar .flex{position: initial;}
    .radar-cover .core-img{position: initial; transform: initial; min-height: 618px; min-width: 457px;}
    .radar .dot-overlay{background: #2D8FFF;}
    .bullet.r1{background: rgba(177,177,177,.8);}
    .bullet.r2{background: rgba(177,177,177,.5);}
    .radar:nth-child(1){top: 35.5%; left: 33%;}
    .radar:nth-child(2){left: 42%; bottom: 36.3%;}


    .lnb{position: absolute; bottom: 98px; left: 50%; transform: translateX(-50%);}
    .lnb li:hover:has(.active){opacity: 1;}
    .core-tab-content{display: none;}
    .core-tab-content.show{display: block;}
    .core-tab-content:not(.show){display: none !important;}

    @media screen and (max-width: 1399px) {
        .cont .flex{padding-inline: 15px; max-width: 720px; gap: 10px;}
        .flex-left{min-width: 300px; max-width: 300px; margin: auto;}
        .flex-left h2{font-size: 24px;}
        .flex-left span{font-size: 20px;}
        .flex-right .right-desc{font-size: 14px;}

        
        .core-img.one{max-width: 300px;}
        .core-img.left{left: calc(50% - 194.5px);}
        .core-img.mid{}
        .core-img.right{left: calc(50% + 191px);}
    }
    @media screen and (max-width: 767px) {
        &.subpage-wrapper{padding-block: 187px 0;}
        .sp-sub{font-size: 20px;}
        .cont{margin: 60px 0 0; display: flex; flex-direction: column-reverse; background: #F8F8F8; color: #000; text-align: center;}
        .cont .flex{flex-direction: column; top: 0; position: initial; transform: initial; padding: 66px 0 77px; gap: 0;}
        .bg{z-index: initial; height: auto; min-height: 430px;}
        .core-img.one{display: none;}
        .bg.one{content: url(../images/company/core1-mo.png);}
        .bg.two{content: url(../images/company/core2-mo.png);}
        .bg.three{content: url(../images/company/core-bg3-mo.png); min-height: 430px;}
        .bg.four{content: url(../images/company/core4-mo.png);}
        .bg.five{content: url(../images/company/core5-mo.png);}
        .bg.six{content: url(../images/company/core6-mo.png);}
        .flex-left span{margin-bottom: 36px; display: block;}
        .core-img{width: min(calc(100% - 30px), 720px); top: initial; bottom: 0;}
        .core-img.three{content: url(../images/company/core3-1-mo.png);}
        .radar-cover{top: 80%; left: 65%;}
        .radar-cover .radar .flex{padding: 0;}
        .radar-cover .core-img{min-width: 60vw; min-height: initial;}
        .radar:nth-child(1){top: 36%; left: 31%;}
        .radar:nth-child(2){bottom: 36%; left: 40%;}
        
        .core-tab-content:not(.show){display: flex !important; margin: 0; padding-top: 60px;}
        .core-tab-content:last-child{padding-block: 60px 100px;}
        .core-tab-content.show{display: flex;}
        
        .lnb{bottom: 47px; padding-inline: 15px; display: none;}
        .lnb a{font-size: 16px; width: 34px; height: 34px;}
        .lnb button.core-tab-btn{font-size: 16px; width: 34px; height: 34px;}
    }
    @media screen and (max-width: 710px) {
        .radar:nth-child(2){bottom: 36%;}
    }
    @media screen and (max-width: 620px) {
        .radar:nth-child(2){bottom: 35.5%;}
    }
    @media screen and (max-width: 550px) {
        .radar:nth-child(1){top: 35.5%; left: 29.5%;}
        .radar:nth-child(2){bottom: 35%; left: 37%;}
    }
    @media screen and (max-width: 430px) {
        .radar:nth-child(1){top: 35%;}
        .radar:nth-child(2){bottom: 34.5%;}
    }
    @media screen and (max-width: 400px) {
        .radar:nth-child(1){top: 34.5%;}
        .radar:nth-child(2){bottom: 34%;}
    }
    @media screen and (max-width: 380px) {
        .radar:nth-child(1){top: 34%;}
        .radar:nth-child(2){bottom: 33.5%;}
    }
}

.lnb{display: flex; align-items: center; justify-content: space-between; width: 349px; margin: auto;}
.lnb a{font-size: 20px; font-weight: 700; background: #000; color: #fff; border: 1px solid #484848; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; opacity: .5; border: none;}
.lnb a.active{background: #2D8FFF; opacity: 1 !important;}
.lnb button.core-tab-btn{font-size: 20px; font-weight: 700; background: #000; color: #fff; border: 1px solid #484848; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; opacity: .5; border: none; cursor: pointer; padding: 0; font-family: inherit;}
.lnb button.core-tab-btn.active{background: #2D8FFF; opacity: 1 !important;}

@media (hover: hover) {
    .lnb a:hover{opacity: .7;}
    .lnb button.core-tab-btn:hover{opacity: .7;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
    .lnb a:active,
    .lnb a.touch-active{opacity: .7;}
    .lnb button.core-tab-btn:active,
    .lnb button.core-tab-btn.touch-active{opacity: .7;}
    .lnb a,
    .lnb button.core-tab-btn{touch-action: manipulation;}
}

/* cert */
#cert{
    .sp-title{margin: 0 0 44px;}
    .bg{z-index: -1; border-radius: 17px; height: 100%;}
    .banner{display: flex; justify-content: space-between; align-items: center; padding-inline: 60px 50px;}
    .banner p{font-size: 26px; font-weight: 700; color: #fff; line-height: 1.38;}
    .banner p span{display: block; color: #000; font-size: 17px; line-height: 1.4; margin-block: 12px 0;}
    .banner ul{gap: 25px; text-align: center; font-size: 14px; font-weight: 700; color: rgba(75,75,75,.82);}
    .banner ul span{display: block; margin-top: 12px; line-height: 1.28;}
    .tab{margin: 86px 0 60.3px;}
    .tab li.active a{background: #2D8FFF; color: #fff;}
    .cert-list{grid-template-columns: repeat(5,1fr); gap: 53px 32px;}
    .cert-item .thumb img{border: 1px solid #D6D6D6;}
    .cert-item .cont{padding: 20px 0 0; border-bottom: none;}
    .cert-type{font-weight: 700; color: #2D8FFF; height: 19px; display: block;}
    .cert-type.diff{color: #1D32B9;}
    .cert-item .cont .tit{font-size: 17px; font-weight: 700; margin: 10px 0 14px;}
    .cert-number{color: #B1B1B1; height: 19px; display: block;}
    .paging{padding-top: 124px;}

    .board-view-head .info-item{gap: 0; font-weight: 700; font-size: 18px; color: #B1B1B1; margin-bottom: 10px;}
    .bar{margin-inline: 10px; color: #707070;}
    .ca{color: #2D8FFF;}
    .ca.no{color: #1D32B9;}
    .ca.no + .bar{display: none;}
    .date{margin-left: auto; color: #000;}

    @media screen and (max-width: 1399px) {
        .banner div{padding-bottom: 180px;}
        .banner p{font-size: 20px;}
        .cert-item .cont .tit{font-size: 16px;}
        .cert-list{grid-template-columns: repeat(3, 1fr);}
        .cert-item a{display: flex; flex-direction: column; height: 100%;}
        .cert-item .cont{display: flex; flex-direction: column;}
        .cert-item .cont .tit{margin: 10px 0 auto;}
        .cert-number{margin-top: 14px;}
    }

    @media screen and (max-width: 767px) {
        .tab{margin: 60px 0;}

        .banner{padding-inline: 0;}
        .banner .bt--box{padding-inline: 20px 10px; left: 0; top: 10%; transform: inherit;}
        .cert-list{grid-template-columns: repeat(2, 1fr); gap: 20px;}
        .thumb img{margin: auto;}
        .cert-item .cont{text-align: center;}
        .cert-type{height: initial; line-height: 1.2; font-size: 14px;}
        .cert-number{font-size: 14px; line-height: 1.2;}
        .cert-item .cont .tit{font-size: 14px;}
    }
}
.list-empty{padding: 0 !important;}
.cert-list:has(.list-empty){grid-template-columns: repeat(1, 1fr) !important;}
.paging__btn{background: rgba(243,243,243, .37);}
.paging .arrow{border-top: 2px solid #B1B1B1; border-right: 2px solid #B1B1B1;}
.paging .paging__num{border: none !important;}
.paging .paging__num.active{background: #2D8FFF; border-radius: 5px; color: #fff !important;}


/* partners */
#partners{
    .cert-list{grid-template-columns: repeat(5,1fr); gap: 31px 19px;}
    .category{background: #F8F8F8; border-top: 1px solid #2D8FFF; color: #2D8FFF; font-size: 17px; font-weight: 700; padding: 6px 11px;}
    .category.change{color: #1D32B9;}
    .cert-item .thumb{height: 99px; display: flex; align-items: center; justify-content: center;}
    .cert-item .thumb img{aspect-ratio: initial; border: none;}
    .tab li.active a{background: #000; color: #fff;}
    .tab li:nth-child(2n).active a{background: #2D8FFF;}
    .tab li:nth-child(2n+1).active a{background: #1D32B9;}
    .tab li:first-child.active a{background: #000;}


    @media screen and (max-width: 1399px) {
        .banner p{font-size: 20px;}
        .cert-item .cont .tit{font-size: 16px;}
        .cert-list{grid-template-columns: repeat(3, 1fr);}
    }

    @media screen and (max-width: 767px) {
        .tab{display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 0; border-radius: 14px; background: none; gap: 19px 9px;}
        .tab li:nth-child(4)::after{display: none;}
        .tab li a{background: #F8F8F8;}
        
        .banner{padding-inline: 20px 10px;}
        .cert-list{grid-template-columns: repeat(2, 1fr); gap: 20px;}
        .thumb img{margin: auto;}
        .cert-item .cont{text-align: center;}
    }
}

/* location */
#location {
    .grid{grid-template-columns: 1fr 895px; gap: 60px 16px; display: none !important;}
    .grid.active{display: grid !important;}
    iframe{width: 100%;}
    .grid li:nth-child(2n+1){border-top: 1px solid #707070; padding-top: 19.5px;}
    .grid li span{font-size: 20px; margin-top: 26px; line-height: 1.75; display: block;}
    .tab li::after{display: none;}
    .america .blue-text{color: #1D32B9;}

    @media screen and (max-width: 1399px) {
        .grid{grid-template-columns: 1fr; gap: 20px;}
        .grid li:nth-child(2n+1){margin-top: 70px;}
        .grid li:first-child{margin-top: 0;}
        .grid li span br{display: none;}
    }
    @media screen and (max-width: 767px) {
        .blue-text{font-size: 20px;}
        .grid li span{font-size: 18px; margin-top: 10px;}
    }
}
.tab{display: flex; margin-block: 0 92px; background: rgba(177,177,177,.09); border-radius: 28px;}
.tab li{flex: 1;}
.tab li a{width: 100%; text-align: center; display: block; font-weight: 700; color: #B1B1B1; border-radius: 28px; padding-block: 6px;}
.tab li.prevent a{pointer-events: none;}
.tab .dome.active a{background: #2D8FFF; color: #fff}
.tab .over.active a{background: #1D32B9; color: #fff;}
.blue-text{color: #2D8FFF; font-size: 30px; font-weight: 700;}

@media screen and (max-width: 767px) {
    .tab{margin-block: 0 40px;}
    .tab li a{font-size: 14px;}
}

/* guide */
#guide{
    .sp-title{margin: 0 0 43px;}
    .banner{display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; color: #fff; font-weight: 700; text-align: center;}
    .bg{z-index: -1;}
    .banner .flex{gap: 17px; font-size: 16px; margin: 25px 0 0;}
    .banner .flex a{background: #2D8FFF; border-radius: 15px; width: 212px; text-align: center; padding-block: 7px;}
    .bottom{margin: 87px 0 0;}
    b{font-size: 26px; font-weight: 700; margin-bottom: 27.5px; display: block;}
    ul{display: flex; border-radius: 17px; height: 305px; align-items: center; background: #F6F6F6;}
    ul li{width: 25%; text-align: center; background: #F6F6F6; height: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: 17px; position: relative;}
    ul li::after{content: ''; width: 1px; height: 264px; background: #CCCCCC; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
    .arrow{position: absolute; left: -17px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #646464; border: none; border-radius: 50%; z-index: 2;}
    .arrow svg{max-height: 15px;}
    ul li span{color: #2D8FFF; font-size: 17px; font-weight: 700; margin: 0 0 13px; display: block;}
    ul li strong{font-size: 24px;}
    ul li div:not(.arrow){width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; margin: 13px auto 19px;}
    ul li div img{width: fit-content;}
    ul li p{font-size: 18px;}
    ul li:first-child::after{display: none;}
    ul li.active{ border: 2px solid #1D32B9; background: #fff;}
    ul li.active span, ul li.active strong{color: #1D32B9;}
    ul li.active div{background: #F6F6F6;}
    ul li.active .arrow{background: #1D32B9;}

    @media screen and (max-width: 1399px) {
        .bg{height: 100%; border-radius: 17px;}
        ul li p{font-size: 14px;}
    }
    @media screen and (max-width: 767px) {
        &.subpage-wrapper{padding-block: 109px 100px;}

        .banner{font-size: 20px;}
        .banner .flex{flex-direction: column;}
        .banner .flex a{margin: auto;}
        .bottom{margin: 60px 0 0;}
        b{text-align: center;}
        ul{display: grid; grid-template-columns: 1fr; height: initial; gap: 40px; background: none;}
        ul li{width: 100%; padding-block: 40px; background: #f6f6f6;}
        ul li::after{display: none;}
        .arrow{top: -57px; left: 50%; transform: translateX(-50%) rotate(90deg); width: 75px; height: 75px;}
        .arrow svg{max-height: initial;}
        ul li strong{font-size: 18px;}
        ul li span{font-size: 15px;}
    }
}

/* inquiry */
#inquiry{
    .sp-title{margin: 0 0 44px;}
    .bg{z-index: -1;}
    .banner{display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; color: #fff; text-align: center; margin-bottom: 72px;}
    .banner span{display: block; font-weight: 700;}

    .inq_head{display: flex; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid #000; line-height: 1; margin-bottom: 39px;}
    h4{font-size: 26px; font-weight: 700;}
    .req{color: #2D8FFF;}
    b{font-size: 20px; font-weight: 700;}
    .dd-inp .radio-group{gap: 0px;}
    .dd-inp .radio-group .radio{width: 210px;}
    .dd-form-table tbody tr :where(th, td){padding-block: 16px;}
    .dd-form-table tbody tr th .label{letter-spacing: -0.04em; font-size: 18px;}
    .dd-inp .radio-group .radio label .label{color: #707070;}
    .dd-inp .inp-box{border-radius: 24px; border: none; background: #F6F6F6;}
    .dd-form-indiv-policy{padding: 42px 0 0; margin: 75px 0 0; border-top: 1px solid #000;}
    .dd-form-indiv-policy .title{font-size: 26px; letter-spacing: -0.04em; color: #000; margin-bottom: 16px;}
    .dd-form-indiv-policy .dd-inp .checkbox-group .checkbox label input:checked ~ .label{color: #2D8FFF;}
    .dd-form .submit-button{border-radius: 31px; background: #000; padding: 0.5em 1.53em;}
    .dd-form-indiv-policy .content{height: 580px;}

    @media screen and (max-width: 1399px) {
        .bg{height: 100%; border-radius: 17px;}
    }
    @media screen and (max-width: 767px) {
        &.subpage-wrapper{padding-block: 109px 100px;}
        .banner{font-size: 20px; margin-bottom: 60px;}
        h4{font-size: 20px;}
        .dd-inp .radio-group{display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
        .dd-inp .radio-group .radio{width: initial;}
        .dd-form-table tbody tr :where(th, td){padding-block: 10px;}
        .dd-form-indiv-policy .title{font-size: 20px; text-align: center;}
    }
}

/* manual */
#manual{
    .cert-list{gap: 0; grid-template-columns: repeat(4,1fr); gap: 53px 39px;}
    .cert-item{border-top: 1px solid #B8B8B8;}
    .cert-item .cont{border-bottom: none; padding: 27px 0 20px; display: flex; justify-content: space-between;}
    .cert-item .cont .tit{font-size: 18px; font-weight: 700;}
    .cert-item .btn{border-radius: 50%; width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; background: #2D8FFF;}
    .cert-item:nth-child(2n) .btn{background: #1D32B9;}
    .cert-item .thumb img{border: none;}

    @media screen and (max-width: 1399px) {
        .cert-list{grid-template-columns: repeat(3, 1fr);}
    }
    @media screen and (max-width: 767px) {
        &.subpage-wrapper{padding-block: 109px 100px;}
        .cert-list{grid-template-columns: repeat(2, 1fr); gap: 20px;}
        .cert-item .btn{min-width: 39px; min-height: 39px;}
    }
}
.manual_inquiry .dd-inp .inp-box .inp{border-radius: 24px;}
.manual_inquiry .dd-inp .inp-box{border-radius: 24px;}
.inq_head.m__head{display: flex; margin-bottom: 10px;}
.inq_head.m__head b{margin-left: auto;}

/* news */
#news{
    .sp-title{margin: 0 0 55px;}
    .bg{z-index: -1;}
    .banner{display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; font-weight: 600; color: #fff; text-align: center; margin-bottom: 72px;}
    .banner span{color: #2D8FFF; font-size: 24px; font-weight: 700;}
    .banner p{margin-block: 7px 16px;}
    .banner a{background: #fff; color: #2D8FFF; font-weight: 700; font-size: 16px; display: block; border-radius: 24px; width: 138px; height: 38px; align-items: center; justify-content: center; display: flex; margin: auto;}
    .tab li.active a{background: #000; color: #fff;}
    .tab li:nth-child(2).active a{background: var(--primary);}
    .tab li:nth-child(3).active a{background: #1D32B9;}
    .tab li:nth-child(4).active a{background: #00C4B6;}
    .gall-ls--h:has(.list-empty){grid-template-columns: 1fr;}
    .gall-ls--h > li > a .thumb{z-index: initial; position: initial; width: 100%;}
    .gall-ls--h {display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 43px;}
    .gall-ls--h > li{border-bottom: none;}
    .gall-ls--h li a{flex-direction: column; padding-block: 0; gap: 33px;}
    .gall-ls--h > li > a .content{border-bottom: none;}
    .gall-ls--h > li > a .content .wrap .tag {margin-bottom: 23px;}
    .gall-ls--h > li > a .content .wrap .tag.blog{color: #1D32B9;}
    .gall-ls--h > li > a .content .wrap .tag.newsletter{color: #00C4B6;}
    .gall-ls--h > li > a .content .wrap .tag span{color: #B1B1B1;}
    .gall-ls--h > li > a .content .wrap .title{margin-bottom: 22px; font-size: 23px;}
    .gall-ls--h > li > a .content .wrap .date{font-size: 18px; color: #B1B1B1; font-weight: normal;;}

    .board-view-head .info-item{gap: 0; font-weight: 700; font-size: 18px; color: #B1B1B1; margin-bottom: 10px;}
    .bar{margin-inline: 10px; color: #707070;}
    .ca{color: #00C4B6;}
    .ca.masscom{color: #2D8FFF;}
    .ca.blog{color: #1D32B9;}
    .date{margin-left: auto; color: #000;}

    @media screen and (max-width: 1399px) {
        .bg{height: 100%; border-radius: 17px;}
        .gall-ls--h{gap: 40px 20px;}
    }

    @media screen and (max-width: 767px) {
        &.subpage-wrapper{padding-block: 109px 100px;}
        .banner{margin-bottom: 60px;}
        .banner span{font-size: 18px;}
        .banner p{font-size: 20px;}
        .banner a{font-size: 16px;}

        .gall-ls--h{grid-template-columns: repeat(2, 1fr);}
        .gall-ls--h > li > a .content .wrap{padding-inline: 0;}
        .gall-ls--h > li > a .content .wrap .title{font-size: 16px;}
        .gall-ls--h > li > a .content .wrap .date{font-size: 16px; margin-left: 0;}
        .gall-ls--h li a{gap: 25px;}
        .gall-ls--h > li > a .content .wrap .tag{margin-bottom: 15px;}
        .gall-ls--h > li > a .content .wrap .title{margin-bottom: 15px;}
    }
    @media screen and (max-width: 520px) {
        .gall-ls--h{grid-template-columns: 1fr;}
    }
}
.tab li{position: relative;}
.tab li::after{content: ''; width: 1px; height: 24px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: rgba(112,112,112,.18);}
.tab li:last-child::after{display: none;}

/* recruit */
#recruit{
    .sp-title{margin: 0 0 55px;}
    .bg{z-index: -1;}
    .banner{font-size: 30px; font-weight: 600; margin-bottom: 62px; line-height: 1.36; padding-inline: 47px; padding-block: 48px 32px;}
    .banner .bt--box{display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%;}
    .banner a{margin-top: auto; display: block; font-size: 16px; font-weight: 700; color: #fff; background: #2D8FFF; width: 152px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 24px;}
    .intro-content{margin-block: 0;}
    .value {margin-block: 48px 111px;}
    .value .top{border-bottom: 1px solid #888888; padding-bottom: 9px; margin-bottom: 28px;}
    h4{font-size: 26px; font-weight: 700;}

    .value .bottom{display: grid; grid-template-columns: 147px 1fr; align-items: center; gap: 0 27.3px; position: relative; padding-left: 20px;}
    .value .bottom::before{content: ''; background: #F6F6F6; border: 2px dashed #8B8B8B; height: calc(100% + 10px); width: 167px; position: absolute; left: 10px; top: 0; border-radius: 84px; z-index: -1;}
    .value .bottom li{padding-block: 33.5px 26px; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; font-size: 17px; position: relative;}
    .value .bottom li:nth-child(3), .value .bottom li:nth-child(4){border-bottom: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6;}
    .value .bottom li img{margin: auto;}
    .value .bottom li b{font-size: 26px; color: #6A6A6A;}
    .value .bottom li b span{color: #2D8FFF;}
    .value .bottom li .plus{background: #2D8FFF; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%);}
    .value .bottom li .plus:first-child{top: -11px;}
    .value .bottom li .plus:last-child{bottom: -11px;}
    
    .step ul{display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 44.5px;}
    .step ul li{background: #fff; border-radius: 17px; padding: 16px 21px 17px 19px; height: 177px; display: flex; flex-direction: column; cursor: pointer;}
    .step ul li .flex{justify-content: space-between; align-items: center;}
    .step ul li .left{font-size: 22px; font-weight: 700; color: #6A6A6A;}
    .step ul li span{display: block; font-size: 17px; color: #000; margin-bottom: 10px;}
    .step ul li .right{width: 88px; height: 88px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center;}
    .arrow_box{margin: auto 0 0 auto; background: #F5F5F5; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
    .step ul li.active{background: var(--primary);}
    .step ul li.active .left{color: #fff;}
    .step ul li.active span{color: #fff;}
    .step ul li.active .right{background: #1074BB;}
    .step ul li.active .arrow_box{background: #fff;}
    .step ul li.active .arrow_box svg{transform: rotate(90deg);}
    .step ul li.active:first-child img{content: url(../images/recruit/step1-active.png);}
    .step ul li.active:nth-child(2) img{content: url(../images/recruit/step2-active.png);}
    .step ul li.active:nth-child(3) img{content: url(../images/recruit/step3-active.png);}
    .step ul li.active:last-child img{content: url(../images/recruit/step4-active.png);}
    .step_bottom{ height: 60px;}
    .step_bottom>div{display: none; align-items: center; padding-bottom: 14.5px; height: 100%; margin-top: 18px; justify-content: space-between; color: #2D8FFF; font-weight: 700; border-bottom: 2px solid var(--primary);}
    .step_bottom>div.active{display: flex;}
    .dot p{position: relative; padding-left: 14px;}
    .dot p::before{content: ''; width: 5px; height: 5px; left: 0; top: 8px; position: absolute; background-color: var(--primary); border-radius: 50%;}
    .step_bottom .three{justify-content: center; gap: 42px;}
    .step_bottom .three p:first-child{margin-left: 260px;}
    .step_bottom .four{justify-content: flex-end;}
    .link_btn{color: #fff; background: #000; height: 45px; width: 166px; font-weight: 700;}
    .grid{grid-template-columns: 188px 1fr; padding-block: 61.5px 0; gap: 48px 0;}
    .g-title{font-size: 22px;}
    .g-cont p{position: relative; margin-block: 4px 10px;}
    .g-cont.dot p::before{background: #000;}
    .g-cont.flex{align-items: flex-end; justify-content: space-between;}
    .g-cont .link_btn{width: 273px;}
    .g-cont .link_btn span{margin-left: 10px; text-decoration: underline;}

    .announcement{padding-block: 130px 0;}
    .announcement .flex{align-items: center; justify-content: space-between;}
    .announcement .flex p{font-weight: 700; font-size: 18px;}
    .announcement .flex p span{color: var(--primary);}
    .recruit-list{margin-top: 33px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 47px 24px;}
    .recruit-list:has(.list-empty){grid-template-columns: 1fr;}
    .recruit-item{border: 1px solid var(--primary); border-radius: 15px; padding: 17px 17.5px 19px; text-align: center; font-weight: 700; height: 283px;}
    .recruit-item .cont{display: flex; flex-direction: column; align-items: center; height: 100%; cursor: pointer;}
    .recruit-item .day{background: var(--primary); width: 232px; height: 36px; color: #fff; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 22px;}
    .recruit-item .recruit-type{font-size: 18px; color: var(--primary); margin-block: 25px 13px; display: block;}
    .recruit-item .tit{font-size: 20px; word-break: keep-all; max-width: 186px; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;  overflow: hidden;  text-overflow: ellipsis;}
    .recruit-item .recruit-number{font-weight: 600; color: #757575; border-top: 1px solid #DBDBDB; padding-top: 17px; margin-top: auto; width: 100%;}
    .recruit-item.end{background: #F6F6F6; border-color: #F6F6F6;}
    .recruit-item.end .day{background: #757575;}
    .recruit-item.end .recruit-type{color: #6A6A6A;}

    .info-item{font-size: 18px; font-weight: 600; color: #757575; align-items: center; justify-content: space-between; margin-bottom: 10px;}
    .info-item .recruit-type{font-size: 18px; color: var(--primary); display: block;}

    @media screen and (max-width: 1399px) {
        .bg{height: 100%; border-radius: 17px;}
        .step ul{grid-template-columns: repeat(2, 1fr);}
        .dot p{font-size: 14px;}
        .dot p::before{top: 8px; transform: initial;}
        .step_bottom .three{justify-content: flex-start;}
        .step_bottom .three p:first-child{margin-left: 0;}
        .g-cont .link_btn{flex-direction: column; line-height: 1.2;}
        .recruit-list{grid-template-columns: repeat(2, 1fr); gap: 20px;}
    }
    @media screen and (max-width: 767px) {
        &.subpage-wrapper{padding-block: 109px 100px;}
        .banner{padding-inline: 0; padding-block: 0;}
        .banner .bt--box{padding: 40px 15px; font-size: 20px;}

        h4{font-size: 20px;}
        .value .bottom{grid-template-columns: 100px 1fr;}
        .value .bottom::before{width: 120px;}
        .value .bottom li{font-size: 14px;}
        .value .bottom li b{font-size: 20px;}

        .py_default{padding-block: 90px 120px;}
        .step ul{margin-top: 40px; grid-template-columns: 1fr; gap: 20px;}
        .step ul li{height: initial; text-align: left;}
        .step ul li .flex{flex-direction: row; flex-wrap: wrap;}
        .step ul li span{font-size: 14px;}
        .step ul li .left{font-size: 20px;}
        .step ul li .mo{width: 100%; margin-top: 6px;}
        .step ul li p{font-size: 14px; color: #2D8FFF; font-weight: normal;}
        .step .dot p{margin-bottom: 6px;}
        .step .dot p:last-child{margin-bottom: 0;}
        .step_bottom{display: none;}
        .step_bottom>div{flex-direction: column; height: initial; gap: 15px;}
        .step li .link_btn{font-size: 14px; height: 35px; margin-top: 30px;}
        .step_bottom .three{gap: 15px;}
        .step ul li .left div{margin-top: 14px;}
        .step ul li .left .link_btn{margin-top: 30px; width: 146px;}
        .step ul li .right{width: 72px; height: 72px; min-width: 72px;}
        .step ul li .right img{max-width: 42px;}
        .step ul li:last-child .arrow_box{display: none;}
        .arrow_box{transform: rotate(90deg); background: #2D8FFF; width: 52px; height: 52px; margin: 0 10px -42px auto;}
        .arrow_box svg{width: 34px; height: 33px;}
        .arrow_box path{stroke: #fff; stroke-width: 4;}

        .grid{grid-template-columns: 1fr; padding-block: 60px 0; gap: 10px 0;}
        .g-cont:not(.flex){margin-bottom: 30px;}
        .g-cont.flex{flex-direction: column; align-items: flex-start; gap: 10px;}
        .g-cont .link_btn{width: 100%; flex-direction: row; margin-top: 10px;}

        .announcement{padding-block: 90px 0;}
        .recruit-item{height: initial;}
        .recruit-item .day{width: 100%; font-size: 16px;}
        .recruit-item .recruit-type{margin-block: 15px 5px;}
        .recruit-item .recruit-number{font-size: 16px; padding-top: 15px; margin-top: 30px;}
    }
    @media screen and (max-width: 520px) {
        .recruit-list{grid-template-columns: 1fr;}
    }
}
.link_btn{border-radius: 57px; display: flex; align-items: center; justify-content: center;}
.board-view{margin-top: 86px;}
.board-view-paging .btn--next svg{transform: rotate(180deg);}

/* Temp */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {
    .board-view{margin-top: 0;}
}
@media screen and (max-width: 499px) {}



.section video{object-fit: cover; width: 100%; height: calc(100% - 83px); position: absolute; top: 83px; left: 0; background: no-repeat / cover;}
.swiper-slide{position: relative;}

/* lnb-bar */
/* .lnb{position: absolute; bottom: 0; left: 0; z-index: 6; width: 100%; background-color: #2B2B2B;} */
/* .lnb .flex{gap: 148px;} */
/* .lnb li{font-size: 18px; color: #757575; padding: 24.5px 0 32px;} */
/* .lnb .progress-bar{width: 100%; height: 2px; background-color: #707070;} */
/* .lnb .progress-bar .bar-inner{background: #fff; height: 2px; width: 0%; transition: all .4s;} */
.fp-viewing-sub2 .lnb.type1 .progress-bar .bar-inner{width: 236px;}
.fp-viewing-sub2 .lnb.type1 li:nth-child(2){font-weight: 700; color: #fff; opacity: 1;}
.fp-viewing-sub2 .lnb.type2 .progress-bar .bar-inner{width: 368px;}
.fp-viewing-sub2 .lnb.type2 li:nth-child(2){font-weight: 700; color: #fff; opacity: 1;}
.fp-viewing-sub3 .lnb.type1 .progress-bar .bar-inner{width: 445px;}
.fp-viewing-sub3 .lnb.type1 li:nth-child(3){font-weight: 700; color: #fff; opacity: 1;}
.fp-viewing-sub3 .lnb.type2 .progress-bar .bar-inner{width: 602px;}
.fp-viewing-sub3 .lnb.type2 li:nth-child(3){font-weight: 700; color: #fff; opacity: 1;}
.fp-viewing-sub4 .lnb .progress-bar .bar-inner{width: 850px;}
.fp-viewing-sub4 .lnb li:nth-child(4){font-weight: 700; color: #fff; opacity: 1;}
.lnb.white{background: #fff;}
.lnb.white.type1 .progress-bar .bar-inner{width: 933px; background-color: #2D8FFF;}
.lnb.white.type1 li:nth-child(5){font-weight: 700; color: #2D8FFF;}

@media (hover: hover) {
  .lnb li:hover{opacity: .7;}
}


/* Product Main Swiper */
.product-main-swiper {width: 100%; height: calc(var(--vh, 1vh) * 100); overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch;}
.product-main-swiper .swiper-slide {width: 100%; height: calc(var(--vh, 1vh) * 100); overflow-y: auto; position: relative; overscroll-behavior: none; -webkit-overflow-scrolling: touch;}
.product-main-swiper .swiper-slide:last-child {overflow-y: auto; overscroll-behavior: none;}
/* Product 페이지 초기 스크롤 방지 */
body.product-page {overflow: hidden !important; overscroll-behavior: none;}
.product-main-swiper .container--wide{height: 100%; display: flex; align-items: center; position: relative; z-index: 1;}
.product-main-swiper .container--wide .tel{color: #7A7A7A; margin-top: 14.7px;}

/* overview */
.overview{position: relative; width: 100%; height: calc(var(--vh, 1vh) * 100); color: #fff;}
.overview .cont{flex-direction: column; height: 100%;}
.overview.one .cont{width: 693px; height: 515px;}
.overview h1{font-family: var(--ff-third); font-size: 114px; font-weight: 700; line-height: 1;}
.overview b{font-size: 31px; font-family: var(--ff-third);}
.overview ul{margin: auto 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 21px; row-gap: 29px;}
.overview ul li{display: flex; gap: 16px; height: 86px; border-top: 3px solid rgba(242,242,242,.2); align-items: center; justify-content: flex-start; align-items: center; padding-inline: 0 6px;}
.overview ul li div{display: flex; align-items: center; justify-content: center; width: 83px;}
.overview ul li p{font-size: 18px; font-weight: 700; line-height: 1.33; align-items: center;}
.overview ul li:first-child p{padding-top: 24px;}
.overview ul li p span{font-weight: normal; display: block; color: #B1B1B1;}
.bg-black{object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat / cover; background-color: #2B2B2B;}
.bg-white{object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat / cover; background-color: #fff;}
.cont .title{font-size: 40px; font-family: var(--ff-third); line-height: 1; color: #B1B1B1;}
.cont .slogan{font-size: 30px; color: #B1B1B1; line-height: 1.4; margin: 65px 0 0;}
.cont .slogan span{color: #fff; font-weight: 700;}
.slogan{margin: 164px 0 41px;}
.cont .text_underline{text-decoration: underline; font-size: 18px; font-weight: 700; margin: 43px 0 17px; color: #CFCFCF;}
.cont .sm-text{font-size: 17px;}
.cont .sm-text span{font-weight: 700;}
.cont .ps{font-size: 14px; color: #B1B1B1; text-indent: -12px; padding-left: 12px; margin: auto 0 0;}
.cont-box{align-items: center; height: 693px; justify-content: space-between; width: 100%;}
.overview.feat .cont-box{padding-right: 198px;}
.overview .right{position: relative;}
.overview .radar p{font-size: 31px; line-height: 1.322;}
.radar p span{font-weight: 700; color: #00FFE5; display: block;}
.radar{position: absolute;}
.radar .flex{align-items: center; margin: 4.5px 0 9.5px;}
.radar .line{height: 1px; background: #fff; display: block;}
.overview .radar:nth-child(1){left: -100px; bottom: 286px;}
.overview .radar:nth-child(1) .line{width: 183px;}
.overview .radar:nth-child(2){right: -130px; bottom: 326px;}
.overview .radar:nth-child(2) .line{width: 213px;}
.overview .radar:nth-child(2) p{text-align: right;}
.radar .dot{position: relative; width: 13.5px; height: 13.5px;}
.radar .dot-overlay{background: #00FFE5; display: block; width: 100%; height: 100%; border-radius: 50%; position: relative; z-index: 2;}
.overview .radar .func{color: #B1B1B1; font-size: 20px;}
.text-r{text-align: right;}
.bullet{width: 29.5px; height: 29.5px; background: #fff; border-radius: 50%; display: block; opacity: 0.4; position: absolute; flex-shrink: 0; z-index: 0; left: -8px; top: -8px;}
.bullet.r1 {animation: radarR1 1s linear infinite;}
.bullet.r2 {animation: radarR2 1s linear infinite; opacity: 0.2;}
.links{display: flex; align-items: center; gap: 15px; margin: 55px 0 -18.7px;}
.links a{width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #363636; border-radius: 50%; font-size: 20px; font-weight: 700; color: #6A6A6A;}
.links a.active{background: #00FFE5; color: #000;}

@keyframes radarR1 {
  0% {transform: scale(0.5);}
  100% {transform: scale(1.5);}
}
@keyframes radarR2 {
  0% {transform: scale(1);}
  100% {transform: scale(2);}
}

@keyframes radarR3 {
  0% {transform: scale(1);}
  100% {transform: scale(1.7);}
}

.swip-nav{position: absolute; z-index: 10; bottom: 140px; left: 50%; transform: translate(-50% , 0); width: min(var(--container-wide-width), calc(100% - 100px));}
.swip-nav .container, .sub-visual-nav .container {display: flex; align-items: center; justify-content: flex-end; color: #fff; gap: 15px; padding-bottom: 0;}
.swip-nav .pagination, .sub-visual-nav .pagination {display: flex; align-items: center; justify-content: flex-start; gap: 15px; margin: 0; width: auto;}


/* 커스텀 페이지네이션 스타일 */
.swip-nav .pagination .swiper-pagination-bullet{width: 44px; height: 44px; border: none; background: #363636; color: rgba(106, 106, 106); font-size: 20px; font-weight: 700; margin: 0; flex-shrink: 0; transition: all 0.3s ease; cursor: pointer; position: relative; border-radius: 0; opacity: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.swip-nav .pagination .swiper-pagination-bullet-active{color: #000; background: #00FFE5;}

/* feature */
.feature{position: relative; width: 100%; height: calc(var(--vh, 1vh) * 100); color: #fff;}
.feature .container--wide {height: 100%; position: relative; z-index: 1; display: flex; align-items: center;}
.feature .cont{flex-direction: column; height: 100%; color: #B1B1B1; margin-right: auto;}
.feature .cont-box{flex-direction: column; position: relative;}
.feature .right{position: relative; margin-top: -128px;}
.feature .radar:nth-child(1){left: 434px; top: 248px;}
.feature .radar:nth-child(2){left: 411px; top: 314px;}
.feature .radar:nth-child(3){left: 497px; bottom: 428px;}
.feature .radar:nth-child(4){right: 375px; bottom: 418px;}
.feature .radar:nth-child(5){right: 390px; top: 376px;}
.feature .radar:nth-child(6){right: 460px; bottom: 427px;}
.feature .links{position: absolute; left: 1px; top: 668px; margin: 0;}

/* product */
.product{position: relative; width: 100%; height: calc(var(--vh, 1vh) * 100); color: #fff;}
.product .container--wide{color: #fff;}
.product .cont-box{flex-direction: column;}
.product .cont{display: flex; justify-content: space-between; width: 100%; justify-content: initial; padding-bottom: 20.5px; border-bottom: 1px solid #555555; margin-bottom: 29px;}
.product .t--r{margin: 0 auto 0 300px;}
.product.ex .t--r{margin: 0 auto 0 300px;}
.product .text-box{align-items: flex-end; gap: 26px;}
.product .text-box b{font-size: 78px; font-weight: 600; color: #00FFE5; line-height: 1;}
.product .text-box p{font-size: 49px; line-height: 1.2; position: relative;}
.product .text-box p::before{content: ''; width: 3px; height: 36.5px; background: #606060; position: absolute; left: -15px; top: 50%; transform: translateY(-50%);}
.product .text-box p span{font-weight: 700;}
.product .text-box + span{font-size: 17px; color: #B1B1B1;}
.product .text-box span{font-size: 17px; color: #B1B1B1;}
.product .text-box span strong{color: #fff; font-weight: 400;}
.product button{display: flex; align-items: center; background: #6A6A6A; height: fit-content; border-radius: 22px; height: 45px; padding-inline: 7px 22px; justify-content: center; gap: 11px; font-size: 18px; font-weight: 700; margin-top: auto; transition: all .6s;}
.product button div{width: 33px; height: 33px; display: flex; align-items: center; justify-content: center; background: #454545; border-radius: 50%; transition: all .6s;}

.product .slogan{font-size: 23px; color: #B1B1B1; margin: 0;}
.product .slogan span{color: #fff; font-weight: 700;}
.product .info{display: flex; width: 100%;}
.product .info ul{display: grid; grid-template-columns: repeat(2, 1fr); padding-top: 3px; height: fit-content; min-width: initial; gap: 14px 0; margin-left: 100px;}
.product .info ul li{font-size: 17px; color: #B1B1B1; position: relative; width: fit-content; height: fit-content; padding-left: 14px; line-height: 1;}
.product .info ul li::before{content: ''; width: 5px; height: 5px; background: #fff; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.product .info ul span{font-weight: 700; color: #fff;}

.product .right a{color: #B1B1B1; font-size: 18px; font-weight: 700; background: #6A6A6A; border-radius: 22px; width: 100%; display: block; display: flex; align-items: center; justify-content: center; height: 44px; transition: all .6s;}
.product .right .ver2 a{margin: 14px 0 0;}
.product .product-box{padding: 28.5px 0 7.7px; width: 346px; height: 425px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(0,255,229,.08); border: 1px solid #00FFE5; border-radius: 20px; margin: 14px 0 0;}
.product .right .ver2 .product-box{margin-top: 0;}
.product .product-box p{color: #00FFE5; font-size: 18px; font-weight: 700; margin: 0 0 12.8px;}
.product .right{display: flex; justify-content: space-between; width: 100%; margin-top: 53px;}
.product.ex .right ul{gap: 5px;}
.product .right ul{gap: 3px;}
.product .right li{position: relative; display: flex; align-items: flex-end;}

.animate-spin-slow {
    animation: spin 20s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (hover: hover) {
    .feature .menu li a:not(.active):hover{opacity: .7;}
    .product button:hover{background: var(--primary);}
    .product button:hover div{background: #1074BB;}
    .product .right a:hover{background: #00FFE5; color: #000;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
    .feature .menu li a:not(.active):active,
    .feature .menu li a:not(.active).touch-active{opacity: .7;}
    .product button:active,
    .product button.touch-active{background: var(--primary);}
    .product button:active div,
    .product button.touch-active div{background: #1074BB;}
    .product .right a:active,
    .product .right a.touch-active{background: #00FFE5; color: #000;}
    .feature .menu li a,
    .product button,
    .product .right a{touch-action: manipulation;}
}

.popup{position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; z-index: 12; flex-direction: column; background: rgba(0,0,0,.78); gap: 9px; border-radius: 0;}
.popup.active{display: flex;}
.popup .close{ background: none; border: 1px solid #fff; padding: 0; width: 80px; height: 37px; gap: 5.3px; display: flex; color: #fff; border-radius: 19px; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; gap: 5.5px; background: #000; transition: all .4s;}
.popup div{width: 413px; display: flex; justify-content: flex-end;}
.popup video{width: 413px; height: 616px; position: initial; border-radius: 20px;}

.popup.ver2{gap: 25px;}
.popup.ver2 div{width: 831px;}
.popup.ver2 video{width: 831px; height: 468px;}

@media (hover: hover) {
    .popup .close:hover{background: var(--primary); color: #fff;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
    .popup .close:active,
    .popup .close.touch-active{background: var(--primary); color: #fff;}
    .popup .close{touch-action: manipulation;}
}

/* application */
.application{color: #000;}
.application .bg-black{background: #F3F3F3;}
.application .cont-box{align-items: flex-start; justify-content: initial;}
.application .cont{flex-direction: column;}
.application .cont .slogan{margin: 40px 0 52px; font-size: 40px; color: #000;}
.application .cont .slogan span{color: #000;}
.application .cont .sm-text{margin-bottom: 29px;}
.application .radar{right: 120px; top: 83px; z-index: -1;}
.application .radar .dot{width: 250px; height: 250px;}
.application .radar .dot-overlay{background: #2D8FFF;}
.application .radar .bullet{width: 210px; height: 210px; background-color: rgba(45,143,255,.6); left: 18px; top: 18px;  animation: radarR1 1.5s linear infinite;}
.application .radar .bullet.r2{background: rgba(45,143,255,.3); animation: radarR3 1.5s linear infinite;}
.application .right{flex: 1; padding-top: 158px;}
.application .right .tab{text-align: center; font-size: 18px; color: #757575;background: #fff; margin-block: 0 59px;}
.application .right .tab li{height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 20px; cursor: pointer;}
.application .right .tab .active{background: var(--primary); color: #fff; font-weight: 700;}
.application .right img{display: none;}
.application .right img.active{display: block;}

/* spec */
.spec{color: #000;}
.spec .cont{flex-direction: column; height: 100%;}
.spec .cont-box{align-items: flex-start;}
.spec .slogan{color: #6A6A6A; margin: 28px 0 0; font-size: 29px; font-weight: 700; line-height: 1.55;}
.spec .slogan span{display: block; color: #000;}
.spec .img-box{position: relative; margin: auto 0 37px;}
.spec .img-box>div{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center;}
.spec .img-box>img{border-radius: 22px;}
.spec .play{background: rgba(72,72,72,.89); border-radius: 50%; width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .6s;}
.spec .img-box span{color: #fff; margin: 11.5px 0 0;}
.spec .cont ul{display: flex; flex-direction: column; gap: 12px; margin-bottom: -22px;}
.spec .cont ul a{background: #EEEEEE; color: #CFCFCF; font-size: 18px; font-weight: 700; border-radius: 22px; display: flex; align-items: center; justify-content: center; height: 45px; transition: all .6s;}
.spec .cont ul a.active{background: var(--primary); color: #fff;}

.spec .right .r--title{font-size: 78px; font-weight: 600; color: #6A6A6A; line-height: 1.19; margin-top: -40px;}
.spec .right ul{display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; margin-block: 30px 25px;}
.spec .right ul li{border-top: 1px solid#B1B1B1;}
.spec .right span{font-size: 27px; font-weight: 700; color: var(--primary); display: block; margin-block: 9px 19px; line-height: 1.2;}
.spec .right ul li .flex{gap: 12px;}

.spec .table-cover p{text-align: right; margin-bottom: 6.5px;}
.spec table{width: 100%; text-align: center; border-top: 1px solid #2D8FFF; border-bottom: 1px solid #ccc;}
.spec table tr{height: 49px;}
.spec table th{font-weight: 700; color: var(--primary); background: #F5F5F5; border-bottom: 1px solid #C8C8C8; width: 143px; position: relative;}
.spec table tr:nth-child(1) th::before{content: ''; background: #fff; height: 100%; width: 2px; position: absolute; right: 0px; top: 0;}
.spec table td{border-bottom: 1px solid #C8C8C8; width: calc((100% - 143px)/3);}
.spec table tr:first-child td{border-bottom: none;}
.spec table tr:nth-child(2) td{border-top: 1px solid #C8C8C8;}
.spec table tr:not(:first-child, :last-child) td:nth-child(2){border-left: 5px solid #fff;}
.spec table tr:not(:first-child, :last-child) td:nth-child(3){border-left: 5px solid #fff; border-right: 5px solid #fff;}
.spec table tr:not(:first-child, :last-child) td:nth-child(5){border-left: 5px solid #fff;}
.spec table tr:nth-child(1) td{font-weight: 700;}
.spec .footer .container--wide>.flex{width: 100%;}

@media (hover: hover) {
    .spec .play:hover{background: var(--primary);}
    .spec .cont ul a:hover{background: #2D8FFF; color: #fff;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
    .spec .play:active,
    .spec .play.touch-active{background: var(--primary);}
    .spec .cont ul a:active,
    .spec .cont ul a.touch-active{background: #2D8FFF; color: #fff;}
    .spec .play,
    .spec .cont ul a{touch-action: manipulation;}
}

@media screen and (max-width: 1399px) {
    .section video{height: calc(100% - 113px); top: 59px;}

    .overview ul{max-width: 450px;}
    .overview ul li{flex-direction: column; text-align: center; padding-top: 10px; height: initial;}
    .overview ul li div{height: 56px;}
    .overview ul li p{font-size: 16px; margin-top: auto;}
    .overview ul li:first-child p{padding-top: 0;}

    .cont-box{padding: 60px 0 0; justify-content: flex-start;}
    .overview.feat .cont-box{padding-right: 0; flex-direction: column; position: relative; align-items: flex-start;}
    .cont .slogan{font-size: 20px; margin: 20px 0 0;}
    .cont .text_underline{font-size: 16px; margin: 10px 0 20px;}
    .cont .sm-text{font-size: 14px;}
    .cont .ps{margin-top: 2px;}
    .overview .right{max-width: 340px; margin: auto;}
    .overview .radar p{font-size: 18px;}
    .overview .radar .func{font-size: 14px;}
    .links{position: absolute; bottom: 20px; left: 0; width: 100%; z-index: 10;}
    .overview .radar:nth-child(1){bottom: 190px; left: -130px;}
    .overview .radar:nth-child(2){right: -155px; bottom: 200px;}
    .feature .radar:nth-child(1){left: 482px; top: 290px;}
    .feature .radar:nth-child(2){left: 440px; top: 284px;}
    .feature .radar:nth-child(3){left: 467px; bottom: 313px;}
    .feature .radar:nth-child(4){right: 463px; bottom: 253px;}
    .feature .radar:nth-child(5){right: 416px; top: 284px;}
    .feature .radar:nth-child(6){right: 448px; bottom: 389px;}

    .feature .links{top: 668px;}

    .product .cont{flex-direction: column; padding-bottom: 10px; margin-bottom: 10px;}
    .product .t--r{margin: 0; text-align: center;}
    .product.ex .t--r{margin: 0; text-align: center;}
    .product .text-box{margin-block: 0 15px; justify-content: center; margin-block: 15px; flex-direction: column; align-items: center; gap: 10px;}
    .product .text-box b{font-size: 40px;}
    .product .text-box p{font-size: 30px;}
    .product button{max-width: 200px; margin: 10px auto 0; font-size: 14px;}
    .product .slogan{font-size: 20px;}
    .product .info{align-items: center;}
    .product .info ul{gap: 10px 0; grid-template-columns: 1fr;}
    .product .info ul li{font-size: 14px;}
    .product .info ul li::before{top: 4px; transform: initial;}
    .product .right{margin-top: 10px; gap: 15px; padding-bottom: 18px;}
    .product .product-box{width: 200px; height: initial;}
    .product .product-box p{font-size: 14px;}
    .product .product-box img{max-width: 65px;}
    .product .right a{font-size: 14px;}

    .popup{left: 0 !important; top: 0 !important;}
    .popup.ver2 video{width: 631px; height: auto;}
    .popup.ver2 div{width: 631px;}

    .application .cont .slogan{font-size: 20px;}
    .application .cont .slogan{margin: 20px 0;}
    .application .relative img{max-width: 332px; margin-top: 95px;}
    .application .right{padding-top: 0px; max-width: 620px; margin: auto;}
    .application .right .tab{margin-block: 0 40px;}
    .application .radar{right: 50px;}
    .application .radar .dot{width: 180px; height: 180px;}
    .application .radar .bullet{width: 140px; height: 140px;}
    .spec .cont-box{flex-direction: column;}
    .spec .cont{width: 100%;}
    .spec .img-box{max-width: 332px; margin: -102px 0 0 auto; display: block;}
    .spec .img-box.mo{display: none;}
    .spec .cont ul{max-width: 200px; margin-top: -70px;}
    .spec .cont ul a{font-size: 14px; height: 35px;}
    .spec .right{display: flex; flex-wrap: wrap; gap: 0 20px; padding-bottom: 20px;}
    .spec .right .r--title{font-size: 32px; width: 100%;}
    .spec .right ul{margin-block: 10px 0; grid-template-columns: 1fr; gap: 10px;}
    .spec .right span{font-size: 18px; margin-block: 4px 6px;}
    .spec .right ul li .flex{display: grid !important; grid-template-columns: repeat(2, 1fr);}
    .spec .right ul li .flex img{max-width: 130px;}
    .spec .table-cover{flex: 1; margin-top: -24px;}
    .spec table{margin-top: 10px; height: calc(100% - 34px);}
    .spec table th{font-size: 14px; width: 68px;}
    .spec table tr{height: initial;}
    .spec table td{font-size: 14px;}
    
    /* Product 페이지 푸터만 스타일 적용 */
    .product-main-swiper ~ footer, body:has(.product-main-swiper) footer {margin-bottom: 54px;}
}

@media screen and (max-width: 767px) {
    .no-mo{display: none;}
    .visual-bg.mo{display: block;}

    .section::-webkit-scrollbar{display: none;}
    .section video{height: calc(100% - 103px); top: 49px;}
    .cont .title{font-size: 24px;}

    .overview{overflow-x: hidden;}
    .overview.one .cont{height: 100%; padding-top: 104px; width: 100%;}
    .overview h1{font-size: 57px; text-align: center;}
    .overview ul{margin: auto -15px -462px; background: #1A1A1A; max-width: calc(100% + 30px); width: calc(100% + 30px); padding-block: 0 154px; grid-template-columns: 1fr;}
    .overview ul li{flex-direction: row; text-align: left; justify-content: center;}
    .overview ul li p{min-width: 205px; margin-top: initial;}

    .product-main-swiper .container--wide{align-items: flex-start;}
    .cont-box{height: calc(100% - 103px); top: 49px; position: relative;}
    .overview .cont-box{min-height: 1100px;}
    .overview.feat .cont-box{text-align: center; justify-content: flex-start;}
    .overview .cont{width: 100%; height: fit-content;}
    .cont .ps{margin-top: 10px;}
    .overview .right{margin: 60px auto 0;}
    .overview .right img{content: url(../images/product/overview2-mo.png); margin-left: 21px; max-width: 330px;}
    .overview .radar:nth-child(1){top: 215px; bottom: initial; left: 90px;}
    .overview .radar:nth-child(2){top: 210px; bottom: initial; right: 45px;}
    .overview .radar p{display: none;}
    .overview .radar .line{display: none;}
    .overview .radar .func{display: none;}
    .links{bottom: initial; top: 940px; justify-content: center; margin: 0;}

    .feature .cont-box{justify-content: flex-start; min-height: 1100px;}
    .feature .cont{margin-right: 0; height: fit-content;}
    .feature .right{margin-top: -30px;}
    .feature .right img{content: url(../images/product/feature1-mo.png); max-width: 340px;}
    .feature .links{top: 940px;}
    .feature .radar:nth-child(1){top: 46.5%; left: 30%;}
    .feature .radar:nth-child(2){top: 51.2%; left: 16.4%;}
    .feature .radar:nth-child(3){top: 53.6%; left: 34.5%;}
    .feature .radar:nth-child(4){opacity: 0;}
    .feature .radar:nth-child(5){bottom: initial; top: 9.4%; right: 23%;}
    .feature .radar:nth-child(6){bottom: initial; top: 13.8%; right: 26.9%;}

    .product .cont{text-align: center; padding-bottom: 40px; margin-bottom: 30px;}
    .product .text-box{flex-direction: column; align-items: center; gap: 13px;}
    .product .text-box p::before{display: none;}
    .product .info{flex-direction: column; align-items: flex-start; gap: 20px;}
    .product .info ul{grid-template-columns: repeat(2, 1fr); margin-left: 0; gap: 15px;}
    .product .right{margin-top: 60px; padding-bottom: 154px; flex-direction: column;}
    .product .right>div:first-child{display: none;}
    .product .r--cont{gap: 20px;}
    .product .r--cont .flex{gap: 20px;}
    .product .r--cont .ver2{flex: 1;}
    .product .r--cont .ver2.no a{background: #6A6A6A; border: 1px solid #6A6A6A;}
    .product .r--cont .ver2.no .product-box p{color: #B1B1B1;}
    .product .r--cont .ver2.no img{opacity: .7;}
    .product .product-box{width: 100%; margin: 40px 0 0;}
    .product .t--r{margin: 60px 0 0;}
    .product.ex .t--r{margin: 60px 0 0;}
    .product button.pc{display: none;}
    .product .popup .close{margin: 0 0 0 auto;}

    .popup{transform: initial !important; max-width: initial; z-index: 9999;}
    .popup video{width: calc(100% - 30px); height: auto; object-fit: cover; max-height: 80vh;}
    .popup div{width: 100%; padding-inline: 15px;}
    .popup.ver2 video{width: calc(100% - 30px);}
    .popup.ver2 div{width: calc(100% - 30px);}

    .application .cont-box{text-align: center; flex-direction: column;}
    .application .cont{width: 100%;}
    .application .relative{display: none;}
    .application .right{padding-bottom: 154px;}
    .application .right .tab{background: none; gap: 10px;}
    .application .right .tab li{font-size: 14px; height: 34px; background: #fff; height: 40px;}
    .tab li::after{display: none;}
    .application .relative.mo{display: block;}
    .application .right .relative.mo img{display: block; max-width: 229px; margin: auto;}
    .application .radar{right: 42%; top: 23px;}
    .application .radar .dot{width: 160px; height: 160px;}
    .application .radar .bullet{width: 120px; height: 120px; left: 20px; top: 20px;}

    .spec .cont-box{gap: 60px;}
    .spec .cont{text-align: center;}
    .spec .slogan span{display: inline;}
    .spec .img-box{margin: 40px auto;}
    .spec .img-box.pc{display: none;}
    .spec .cont ul{margin: 30px auto 0; min-width: 100%;}
    .spec .cont ul a{height: 40px;}
    .spec .right{flex-direction: column; padding-bottom: 154px; width: 100%; flex-wrap: initial;}
    .spec .right .r--title{text-align: center;}
    .spec .right .r--title{margin-top: 0;}
    .spec .right ul{width: 100%; margin-block: 30px 0; gap: 30px;}
    .spec .right ul li .flex img{max-width: 100%; width: 100%;}
    .spec .right span{margin-block: 6px 16px;}
    .spec .right button+span{margin-block: 11.5px 0; font-size: 16px; color: #fff;}

    .spec .table-cover{margin-top: 30px;}
    .spec table{height: initial;}
    .spec table th{width: 22%;}
    .spec table td{width: 26%;}
    .spec .img-box.mo{display: block; margin: 40px auto 0;}

}

@media screen and (max-width: 570px) {
    .product .info ul{grid-template-columns: 1fr;}
}

@media screen and (min-width: 1399px) and (max-height: 980px) {
    .cont-box {transform: scale(0.9);}
}
/* @media screen and (max-height: 900px) {
    .cont-box {transform: scale(0.7);}
} */
@media screen and (min-width: 1399px) and (max-height: 800px) {
    .cont-box {transform: scale(0.7);}
}
@media screen and (min-width: 1399px) and (max-height: 730px) {
    .cont-box {transform: scale(0.6);}
}
@media screen and (min-width: 768px) and (max-height: 800px) {
    .product-main-swiper .container--wide{padding-bottom: 108px;}
    .overview.one .cont{height: 466px;}
    .cont-box {transform: scale(0.8);}
}
@media screen and (min-width: 768px) and (max-height: 590px) {
    .cont-box {transform: scale(0.6);}
}
@media screen and (min-width: 768px) and (max-height: 520px) {
    .cont-box {transform: scale(0.5);}
}

/* lnb-bar */
.lnb-bar{position: absolute; bottom: 0; left: 0; z-index: 6; width: 100%; background-color: #2B2B2B; transition: all .6s; opacity: 0; pointer-events: none;}
.lnb-bar .flex{gap: 195px;}
.lnb-bar li{font-size: 18px; color: #757575; padding: 24.5px 0 32px;}
.lnb-bar .progress-bar{width: 100%; height: 2px; background-color: #707070;}
.lnb-bar .progress-bar .bar-inner{background: #fff; height: 2px; width: 0%; transition: all .4s;}
.lnb-bar.white{background: #fff;}
.lnb-bar.white.type1 .progress-bar .bar-inner{width: 933px; background-color: #2D8FFF;}
.lnb-bar.white.type1 li:nth-child(5){font-weight: 700; color: #2D8FFF;}

@media (hover: hover) {
  .lnb-bar li:hover{opacity: .7;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
  .lnb-bar li:active,
  .lnb-bar li.touch-active{opacity: .7;}
  .lnb-bar li{touch-action: manipulation;}
}

@media screen and (max-width: 1500px) {
    .lnb-bar .flex{gap: 185px;}
    .lnb-bar li a{font-size: 16px;}
}

/* 모바일에서는 lnb-bar 숨기기 */
@media screen and (max-width: 1399px) {
    .lnb-bar {display: none !important;}
}

/* Temp */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}

/* 모바일 네비게이션 */
.mobile-nav {display: grid; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #2B2B2B; z-index: 100;}
.mobile-nav { grid-template-columns: 118px 1fr 118px; align-items: center; justify-content: space-between; padding: 15px;}
.mobile-nav .nav-btn {display: flex; align-items: center; gap: 8px; background: none; border: none; color: #B1B1B1; font-size: 14px; font-weight: normal; cursor: pointer; padding: 0; flex: 0 0 auto;}
.mobile-nav .nav-btn svg {width: 20px; height: 20px; color: #B1B1B1;}
.mobile-nav .nav-btn.prev-btn {flex-direction: row;}
.mobile-nav .nav-btn.next-btn {flex-direction: row; justify-content: flex-end;}
.mobile-nav .nav-current {flex: 1; text-align: center;}
.mobile-nav .nav-current .nav-label { color: #fff; font-size: 14px; font-weight: 700;}
.mobile-nav .nav-progress {position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #707070;}
.mobile-nav .nav-progress-fill { height: 100%; background-color: #fff; width: 0%; transition: width 0.4s;}

/* 데스크톱에서는 모바일 네비게이션 숨기기 */
@media screen and (min-width: 1399px) {
    .mobile-nav {display: none !important;}
}