@charset "utf-8";

.pc{display: block;}
.tbt{display: none;}
.mo{display: none;}
img{width: 100%;}
.pt{padding-top: 88px;}
.subpage .header{background: #fff;}
.subpage .header.prod-header{background: #000;}
.subpage .header.header--scrolled{backdrop-filter: blur(31px) brightness(1.04); background: transparent;}
.subpage .header.header.prod-header.header--scrolled{background: #000;}
.subpage .header .logo{width: fit-content; content: url(../images/common/logo-color.png);}
.subpage .header.prod-header .logo{content: url(../images//common/logo-white.png);}
.subpage .header .header-gnb-item > a{color: #000;}
.subpage .header.prod-header .header-gnb-item > a{color: #fff;}
.subpage .header.prod-header .header-gnb:has(.header-gnb-item:hover) .header-gnb-item:not(:hover) > a{color: rgba(255,255,255,.6); opacity: 1;}
.subpage .header.prod-header .header-gnb:has(.header-gnb-item:hover) .header-gnb-item:not(:hover) > a.active{color: #8FD9FF; opacity: .6;}
.subpage .header .header-gnb-item > a.active{color: var(--primary);}
.subpage .header.prod-header .header-gnb-item > a.active{color: #8FD9FF;}
.subpage .header .header-lang-nav .lang-ls a{color: rgba(93,93,93,.8);}
.subpage .header.prod-header .header-lang-nav .lang-ls a{color: rgba(255,255,255,.6);}
.subpage .header .header-lang-nav .lang-ls a:not(:last-child)::after{background: rgba(93,93,93,.8);}
.subpage .header.prod-header .header-lang-nav .lang-ls a:not(:last-child)::after{background: rgba(255,255,255,.6);}
.subpage .header .header-lang-nav .lang-ls a.active{color: #000;}
.subpage .header.prod-header .header-lang-nav .lang-ls a.active{color: #fff;}
.header:has(.header-gnb-item:hover).prod-header .header-submenu{background: #4C5155; border: none;}
.header.prod-header .header-gnb:has(.header-gnb-item:hover) .header-submenu-item > a{color: #fff;}
.header.prod-header .header-gnb:has(.header-gnb-item:hover) .header-submenu-item > a:hover{color: #8FD9FF;}
.header.prod-header .header-gnb:has(.header-gnb-item:hover) + .header-etc-nav .header-lang-nav .lang-ls a{color: rgba(255,255,255,.6);}
.subpage:has(#product) .header .header-gnb:has(.header-gnb-item:hover) + .header-etc-nav .header-lang-nav .lang-ls a:not(:last-child)::after{background: rgba(255,255,255,.6);}
.header.prod-header .header-gnb:has(.header-gnb-item:hover) + .header-etc-nav .header-lang-nav .lang-ls a.active{color: #fff;}
.header:has(.header-gnb-item:hover).prod-header .logo img{content: initial;}

.subpage .footer img{max-width: fit-content;}
.blue-text{color: var(--primary);}
.func-text{color: #00BDDB;}
.back-img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; z-index: -1;}
.banner{position: relative;}
.banner{color: #fff; padding-block: 114px 109px;}
.banner h1{font-size: 48px; font-weight: 700; line-height: 1.33; font-family: var(--ff-third); margin-bottom: 30px;}
.banner h1 span{color: #5786FF;}
.banner p{font-size: 20px; line-height: 1.9;}
.bold{font-weight: 700;}
.upper{text-transform: uppercase;}

.primary{color: var(--primary);}
.subpage-wrapper{padding-block: 88px 0;}
.bg-gray{background: #F5F7F9;}
.title{font-size: 60px; font-weight: 700; font-family: var(--ff-third);}
.sub-title{font-size: 48px; font-weight: 700; font-family: var(--ff-third);}
.bold{font-weight: 700;}
.t--area{display: flex; justify-content: space-between; align-items: center; margin-bottom: 59px;}
.t--area p{color: #3A70FF;}
.nav-box{display: flex; align-items: center; gap: 12px;}
.cert-list:has(.list-empty){grid-template-columns: 1fr;}

.ptype1{padding-block: 122px 83px;}
.ptype2{padding-block: 122px 0;}
.ptype3{padding-block: 120px 220px;}

.paging ul{gap: 10px;}
.paging .paging__num{background: none !important; border-radius: 5px !important; border: 1px solid #C9CCD2 !important; color: #8B8E9E !important;}
.paging .paging__num.active{background: var(--primary) !important; color: #fff !important; border-color: var(--primary);}

#greeting{
    h3{font-size: 40px; font-weight: 700; padding-bottom: 30px; border-bottom: 5px solid #E0E0E0;}
    .cont{
        display: grid; grid-template-columns: 1fr 944px; gap: 49px;
        .top{padding-block: 30px; border-bottom: 1px solid #E0E0E0; margin-bottom: 50px;}
        b{font-size: 30px; font-weight: 700; display: block;
            &:first-child{margin-block: 0 4px;}
            &:last-child{text-align: right;}
        }
        p{
            font-size: 18px; line-height: 1.66; margin-bottom: 30px;
            span{font-weight: 700;}
            &:last-child{margin-bottom: 0;}
        }
        strong{
            display: block; text-align: right; font-size: 18px;
            span:not(.blue-text){font-size: 30px; margin-left: 30px;}
        }
    }
    .innovation{
        padding-bottom: 137px;
        .grid{grid-template-columns: 1fr 944px; gap: 50px;}
        .blue-text{font-size: 48px; line-height: 1.3; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid rgba(0,0,0,.2); font-weight: 700; font-family: var(--ff-third);}
        .grid>div p:not(.blue-text){font-size: 18px; line-height: 1.66;}
        ul.flex{flex-direction: column; color: #fff; gap: 18px;}
        .t--box{margin-top: -103px; padding: 0 43px 34px; line-height: 1.3;}
        ul li span{font-weight: 700; color: rgba(255,255,255,.75); margin-bottom: 4px; display: block;}
        li .flex{align-items: flex-end; gap: 34px;}
        li .flex b{font-size: 34px; font-weight: 700;}
    }
}

/* about */
#about{
    .ptype1{padding-block: 122px 40px;}
    .cont{max-width: 1280px; margin: auto;}
    .c--list{display: flex; align-items: center;}
    ul{display: flex; flex-direction: column; gap: 110px;}
    ul li{position: relative;}
    ul li::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 580px; height: 1px; background: #3A70FF;}
    li .c--list div:not(.img-box){flex: 1;}
    li:nth-child(2n) .c--list div:not(.img-box){order: 2; text-align: right;}
    li:nth-child(2n) .c--list .img-box{order: 1;}
    li:nth-child(2n)::before{right: 0; left: initial;}
    .c--list span{font-size: 22px; font-family: var(--ff-third); font-weight: 700;}
    .c--list p{font-size: 18px; line-height: 1.77;}
    .c--list .about--t{font-size: 40px; font-weight: 700; font-family: var(--ff-third); line-height: 1.3; margin-block: 6px 40px;}
    .img-box{position: relative;}
    .img-box::before{content: ''; width: 14px; height: 14px; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); background: #3A70FF; border-radius: 50%;}
    .img-box::after{content: ''; width: 30px; height: 30px; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); background: rgba(58,112,255,.35); border-radius: 50%;}
    li:nth-child(2n) .c--list .img-box::before{left: initial; right: -7px;}
    li:nth-child(2n) .c--list .img-box::after{left: initial; right: -15px;}
    .c--block{padding-block: 132px 158px;}
    .organization{height: 1322px; padding-block: 154px 220px; position: relative; color: #fff;}
    .organization h1{margin-bottom: -50px; font-size: 48px; font-weight: 700;}
    .organization .container--wide img{max-width: 1280px; margin: auto;}
}

#history{
    .sub-title + p{font-size: 20px; line-height: 1.9; margin-top: 24px;}
    .sub-title + p span{font-weight: 700;}

    .history-list{margin-top: 90px; display: flex; flex-direction: column; gap: 173px;}
    
    .history-item{
        margin-bottom: 0;
        > .h--banner{text-align: center; color: #fff; font-size: 30px; height: 248px; border-radius: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 47px; position: relative;}
    }
    .history-content{display: grid; grid-template-columns: 456px 1fr; gap: 121.5px; align-items: start;}
    .history-left{
        padding-top: 10px;
        .period-subtitle{font-size: 26px; color: #E0E0E0; margin-bottom: 11px; font-weight: 700; font-family: var(--ff-third);}
        .period-title{font-size: 50px; font-weight: 700; margin-bottom: 258px; line-height: 1.2;}
        .history-image{
            margin-top: 0;
            img{width: 100%; max-width: 456px; border-radius: 20px;}
            .t--img{max-width: 370px;}
        }
    }
    .history-right{position: relative;}
    .timeline{position: relative; padding-left: 76.5px;}
    .timeline-line{position: absolute; left: 0; top: 20px; width: 3px; height: 100%; background: rgba(58, 112, 255, 0.2);}
    .timeline-progress{position: absolute; left: 0; top: 0; width: 3px; height: 0; background: #3A70FF; transform-origin: top;}
    .timeline-dot{position: absolute; left: -6px; top: 0; width: 14px; height: 14px; background: #3A70FF; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(58, 112, 255, 0.3); z-index: 2; transform: translateY(-50%);}
    .timeline-items{display: flex; flex-direction: column; gap: 35px;}
    .timeline-item{
        position: relative; display: flex; align-items: flex-start; gap: 40px; transition: opacity 0.3s;
        &.active{opacity: 1;}
    }
    .timeline-year{font-size: 22px; color: var(--primary); font-weight: 700; min-width: 65px; position: relative;}
    .timeline-year::before{content: ''; width: 7px; height: 7px; background: #E0E0E0; border-radius: 50%; position: absolute; left: -20px; top: 50%; transform: translateY(-50%);}
    .timeline-item.active .timeline-year::before{background: #3A70FF;}
    .timeline-event{font-size: 18px; line-height: 1.5; padding-top: 3px; position: relative;}
    .timeline-event:not(:has(span))::before{content: ''; width: 4px; height: 4px; background: #D4D4D4; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); border-radius: 50%;}
    .timeline-event span{display: block; margin-bottom: 17px; position: relative;}
    .timeline-event span:last-child{margin-bottom: 0;}
    .timeline-event span::before{content: ''; width: 4px; height: 4px; background: #D4D4D4; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); border-radius: 50%;}

    @media screen and (max-width: 1399px) {
        .history-content{grid-template-columns: 1fr; gap: 40px;}
        .history-left{
            .period-title{font-size: 40px; margin-bottom: 40px;}
            .history-image img{max-width: 100%;}
        }
        .history-right{padding-top: 0;}
        .timeline{padding-left: 60px; padding-top: 10px;}
        .timeline-dot{left: -6px;}
        .history-item:last-child .history-content{gap: 0;}
    }
    @media screen and (max-width: 767px) {
        .sub-title .blue-text{display: block;}
        .sub-title + p{font-size: 16px;}
        .history-list{gap: 80px; margin-top: 60px;}
        .history-item > .h--banner{height: 200px; font-size: 18px; margin-bottom: 20px;}
        .history-left{
            .period-subtitle{font-size: 16px;}
            .period-title{font-size: 32px;}
            .history-image img{max-width: 100%;}
        }
        .timeline{padding-left: 35px; padding-top: 15px;}
        .timeline-dot{left: -33px; width: 12px; height: 12px;}
        .timeline-year{font-size: 16px; min-width: 50px;}
        .timeline-event{font-size: 16px; padding-top: 0;}
        .timeline-event span::before{top: 8px; transform: initial;}
        .timeline-event:not(:has(span))::before{transform: initial; top: 8px;}
        .timeline-items{gap: 30px;}
        .timeline-item{gap: 20px;}
    }
}

/* cert */
#cert{
    .cert-list{grid-template-columns: repeat(5, 1fr);}
    .cert-list.cert-list:has(.list-empty){grid-template-columns: 1fr;}
    .cert-item .cont{padding: 30px 0 0; border-bottom: none;}
    .cert-item .cont .category{font-weight: 700; color: var(--primary);}
    .cert-item .cont .tit{font-size: 18px; font-weight: 700; word-break: keep-all; margin-block: 8px 14px;}
    .cert-item .cont .wr1{color: #8C8C8C;}
    .list-empty{padding: 0;}
}

/* news */
#news{
    .cert-item .cont{padding: 0; border-bottom: none;}
    .cert-item .cont .tit{font-size: 22px; font-weight: 700; line-height: 1.54; padding-block: 16px 18px;}
    .cert-item .thumb{position: relative; border: 2px solid #E0E0E0;}
    .cert-item .thumb::after{display: none;}
    .cert-item.notice .thumb{border: 2px solid var(--primary);}
    .cert-item .thumb img{aspect-ratio: initial; border: none;}
    .cert-item .category{position: absolute; left: 0; top: 0; background: #E0E0E0; width: 70px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--ff-third); color: #626262;}
    .cert-item.notice .category{background: var(--primary); color: #fff;}
    .cert-item .date{color: #8C8C8C;}
    .board-view{margin-bottom: 220px;}
    .board-view.news{border-top: 2px solid #E0E0E0;}
    .board-view.news .tag{color: #E0E0E0;}
    .board-view.news .board-view-head .info-item b{color: #E0E0E0;}
    .board-view.news .btn-list{background: #E0E0E0;}
}

/* faq */
#faq{
    .ptype3{padding-block: 78px 165px;}
    .faq-ls{border-top: none;}
    .faq-ls--item:first-child{border-top: 1px solid #F2F2F2;}
    .faq-ls--item{border-bottom: 1px solid #F2F2F2; overflow: hidden;}
    .faq-ls--item.active{background: #F4F8FF; border-radius: 20px; border-top: none; border-bottom: none;}
    .faq-ls--item.active .answer{background: #F4F8FF;}
    .faq-ls--item .question{font-size: 22px;}
    .faq-ls--item .question .tag{color: var(--primary);}
    .faq-ls--item .question .cont .tit{font-size: 20px; font-weight: 700;}
    .faq-ls--item .question .ico-box .ico{border: none; margin-right: 35px;}
    .faq-ls--item.active .answer{align-items: center; padding: 8px 0 30px;}
    .faq-ls--item.active .answer .tag{text-align: center; font-size: 22px; color: #00BDDB;}
    .banner.ver2{padding-block: 70px 60px;}
    .banner.ver2 .container--wide{display: flex; align-items: center;}
    .banner.ver2 h1{font-size: 50px; margin-bottom: 0; color: #DBE5FF; font-weight: 500;}
    .banner.ver2 h1 span{color: #fff; font-weight: 700;}
    .bar{height: 3px; width: 523px; background: #fff; margin-inline: auto 62.5px;}
    .banner a{width: 180px; height: 47px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 26px; color: #3A70FF; gap: 40px; transition: all .6s;}
    .banner a path{transition: all .6s;}
    @media (hover: hover) {
        .banner a:hover{background: var(--primary); color: #fff;}
        .banner a:hover path{stroke: #fff;}
    }
}

/* catalog */
#catalog{
    .ptype2{border-bottom: 1px solid #E0E0E0;}
    .ptype3{padding-block: 0 220px;}
    .gall-ls--v{grid-template-columns: repeat(5, 1fr); gap: 67px;}
    .gall-ls--v:has(.list-empty){grid-template-columns: 1fr;}
    .gall-ls--v > li > a .thumb{margin-bottom: 20px;}
    .gall-ls--v > li > a .title{text-align: left; font-size: 20px; word-break: keep-all;}
    .gall-ls--v .date{color: #8C8C8C; margin-top: 18px; display: block; font-size: 16px;}
    .gall-ls--v > li > a .thumb .overlay .icon svg{height: auto; width: 62%;}
}

/* video */
#video{
    padding-bottom: 220px;
    .video-ls{gap: 40px;}
    .video-ls > li > a .content{padding-block: 16px 0; border-bottom: none;}
    .video-ls > li > a .content .title{font-size: 22px; font-weight: 700;}
    .video-ls > li > a .content .date{margin-top: 18px; font-size: 16px; color: #8C8C8C;}
    .video-ls > li > a .thumb{border: none;}
}

/* inquiry */
#inquiry{
    .need{font-size: 20px; font-weight: 700; border-bottom: 1px solid #000; padding-bottom: 28px; margin-bottom: 9.5px;}
    .need span{color: #00BBFF;}
    .dd-form-table tbody tr th .label{font-size: 18px;}
    .dd-form-table tbody tr th span.req{color: #00BBFF;}
    .dd-form-table tbody tr :where(th, td){padding-block: 18.5px;}
    .dd-inp .inp-box{border-radius: 24px; border: none; background: #F6F6F6;}
    .dd-form-indiv-policy{padding: 90px 0 0; border-top: 1px solid #C9C9C9; margin-top: 71.5px;}
    .dd-form-indiv-policy .title{font-size: 26px; color: #000;}
    .dd-form-indiv-policy .dd-inp .checkbox-group .checkbox label input:checked ~ .label{color: var(--primary);}
    .dd-form .submit-button{border-radius: 31px; padding: 11.5px 30px; background: #000;}
    .container{padding-bottom: 220px;}
    .dd-form-indiv-policy .content{height: 580px; padding: 43.5px 45px; border: 1px solid #E8E8E8; background: #fff;}
    .dd-form-indiv-policy .policy-doc{background: #fff;}
}

/* location */
#location{
    .ptype1{padding-block: 122px 220px;}
    iframe{width: 100%; height: 621px;}
    .container{background: #3A70FF; color: #fff; align-items: center; justify-content: center; height: 225px; display: flex; margin-top: -113px; position: relative; z-index: 1;;}
    ul{display: flex; align-items: center; gap: 68px;}
    li{display: flex; align-items: center; gap: 20px;}
    .i--box{background: #fff; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
    .i--box + div p:nth-child(2) span{margin-bottom: 0;}
    .i--box img{width: fit-content;}
    .l--title{font-family: var(--ff-third); font-size: 20px; font-weight: 700; margin-bottom: 10px;}
    span.l--title{display: inline-block;}
    p{line-height: 1.3;}
}

#lineup{
    .bg-gray{padding-block: 143px 220px;}
    ul{display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
    li img{width: fit-content; margin-top: auto; height: 358px;}
    li a{background: #fff; display: block; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 31px 0; box-shadow: 0 10px 30px rgba(0,0,0,.12); height: 546px; border: 3px solid transparent;}
    li span{font-family: var(--ff-third); font-size: 22px; font-weight: 700;}
    li h3{font-size: 34px; font-weight: 700; margin-block: 13px 24px; line-height: 1.2;}
    li div{font-weight: 700; color: rgba(0,0,0,.48); display: flex; align-items: center; gap: 14px;}
    li div svg{opacity: 0.48;}
    
    @media (hover: hover) {
        li a:hover{border: 3px solid var(--primary);}
        li:nth-child(4) a:hover, li:nth-child(5) a:hover, li:nth-child(6) a:hover, li:nth-child(7) a:hover,  li:nth-child(8) a:hover{border: 3px solid #00BDDB;}
        li a:hover div{color: var(--primary);}
        li a:hover div svg{opacity: 1;}
        li a:hover div svg path{stroke: var(--primary);}
        li:nth-child(1) a:hover img{content: url(../images/product/lineup1.png);}
        li:nth-child(2) a:hover img{content: url(../images/product/lineup-hover-orove.png);}
        li:nth-child(3) a:hover img{content: url(../images/product/line-up-hover2.png);}
        li:nth-child(4) a:hover img{content: url(../images/product/line-up-hover4.png);}
        li:nth-child(5) a:hover img{content: url(../images/product/line-up-hover5.png);}
        li:nth-child(6) a:hover img{content: url(../images/product/line-up-hover6.png);}
        li:nth-child(7) a:hover img{content: url(../images/product/line-up-hover7.png);}
        li:nth-child(8) a:hover img{content: url(../images/product/line-up-hover8.png);}
    }
}

/* product */
#product{
    .p--visual{height: 820px; padding-block: 212px 120px; position: relative; color: #fff;}
    .p--visual .container--wide{display: flex; flex-direction: column; height: 100%;}
    &.ver2 .p--visual{color: #000;}
    .p--title{font-size: 60px; font-weight: 700;}
    .p--visual .visual--sp{font-size: 24px; font-size: 24px; margin-block: 20px 36px; display: block;}
    .p--visual .visual--sp b{display: inline-block;}
    .p--visual ul{display: flex; flex-direction: column; gap: 14px;}
    .p--visual li{padding-left: 14px; font-size: 18px; color: #E0E0E0; position: relative; font-weight: 500;}
    &.ver2 .p--visual li{color: #5a5a5a;}
    .p--visual li::before{content: ''; background: #E0E0E0; width: 6px; height: 6px; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); border-radius: 50%;}
    &.ver2 .p--visual li::before{background: #8C8C8C;}
    a{background: #fff; color: #3A70FF; display: flex; max-width: 166px; justify-content: space-between; align-items: center; padding-inline: 24px; border-radius: 26px; padding-block: 14px; font-weight: 500; line-height: 1.2; margin-top: auto; transition: all .6s;}
    a svg path{transition: all .6s;}
    a svg line{transition: all .6s;}
    a.ver2{max-width: 205px; padding-block: 10.5px;}

    
    .p-sub-visual{position: relative; color: #fff; background: #F5F7F9;}
    .p-sub-visual .back-img{height: initial;}
    .p-sub-visual .container--wide{display: flex; align-items: center; justify-content: space-between; height: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
    .p-sub-visual .container--wide img{max-width: fit-content;}
    .p-sub-visual p{font-size: 18px; line-height: 1.66;}
    .p-sub-visual a{margin-top: 0; height: fit-content; max-width: initial; width: 217px; padding-inline: 34px 30px; font-size: 20px; font-weight: 700; padding-block: 16px; border-radius: 40px;}

    .cont{padding-block: 180px 0;}
    .cont .container--wide{justify-content: space-between;}
    .prod-img{padding-left: 112px; position: relative;}
    .radar{position: absolute;}
    .radar .dot{background: var(--primary); width: 12px; height: 12px; position: relative; border-radius: 50%; z-index: 1;}
    .radar .dot .r1{width: 30px; height: 30px; background: rgba(58,112,255,.33); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; animation: radar 1s linear infinite;}
    .radar .dot .r2{width: 112px; height: 112px; background: rgba(58,112,255,.19); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -2; animation: radar 1s linear infinite;}
    .radar .dot .r3{width: 200px; height: 200px; background: rgba(58,112,255,.08); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -3; animation: radar 1s linear infinite;}
    .mbass .radar:nth-child(2){top: 94px; right: 0px;}
    .mbass .radar:nth-child(3){top: 537px; left: 150px;}
    .mbass .radar:nth-child(4){top: 786px; right: 24px;}
    .mbass .radar:nth-child(5){top: 1014px; left: 148px;}
    .orove .radar:nth-child(2){top: 58px; right: 49px;}
    .orove .radar:nth-child(3){top: 223px; left: 145px;}
    .orove .radar:nth-child(4){top: 557px; right: 46px;}
    .oregeul .radar:nth-child(2){top: 89px; left: 164px;}
    .oregeul .radar:nth-child(3){top: 195px; right: 0px;}
    .oregeul .radar:nth-child(4){top: 410px; left: 154px;}
    .oregeul .radar:nth-child(5){top: 960px; left: 154px;}
    .daily .radar:nth-child(2){top: 50px; right: 44px;}
    .daily .radar:nth-child(3){top: 175px; right: 130px;}
    .daily .radar:nth-child(4){top: 510px; left: 144px;}
    .emt .radar:nth-child(2){top: 70px; right: 10px;}
    .emt .radar:nth-child(3){top: 560px; right: 100px;}
    .atom .radar:nth-child(2){top: 60px; right: 25px;}
    .atom .radar:nth-child(3){top: 160px; left: 144px;}
    .atom .radar:nth-child(4){top: 610px; right: 116px;}
    .bio .radar:nth-child(2){top: 60px; right: 20px;}
    .bio .radar:nth-child(3){top: 410px; left: 144px;}

    .p--img{width: fit-content; max-width: 169px;}
    .prod-intro{display: flex; flex-direction: column; gap: 120px;}
    .prod-intro>div{padding-bottom: 120px; border-bottom: 1px solid #E0E0E0;}
    .prod-intro>div:last-child{padding-bottom: 180px; border-bottom: none;}
    .prod-intro h2{font-size: 34px; font-weight: 700;}
    .prod-intro p{font-size: 18px; line-height: 1.66; margin-block: 30px 40px;}

    @media (hover: hover) {
        a:hover{background: #3A70FF; color: #fff;}
        a:hover svg path{stroke: #fff;}
        a:hover svg line{stroke: #fff}
    }
}
.prod-info{background: #303030; padding-block: 157px 200px; color: #fff; position: relative; overflow: hidden;}
.prod-info::before{content: ''; background: #303030; height: 100%; width: calc(50% - 110px); position: absolute; left: 0; top: 0; z-index: 100;}
.prod-info .container--wide{display: flex;}
.prod-info .container--wide>div:not(.slide-section){position: relative; z-index: 101;}
.prod-info p{font-weight: 700; font-family: var(--ff-third); font-size: 22px;}
.prod-info h3{font-size: 60px; font-family: var(--ff-third); font-weight: 700; margin-block: 11px 32px; line-height: 1.26;}
.prod-info ul{min-width: 483px; gap: 0;}
.prod-info ul li{border-top: 1px solid rgba(255,255,255,.2); display: flex; gap: 34px; padding-block: 10px;}
.prod-info ul li div{color: #E0E0E0;}
.prod-info ul li div span{font-weight: 700; margin-right: 8px;}
.prod-info ul li div span.sm{font-size: 14px; font-weight: 400; display: block; padding-left: 70px;}
.prod-info ul li div .block{margin-bottom: 6px;}
.prod-info .slide-section{flex: 1; padding-left: 107px; position: relative;}
.prod-info .slide-section.two::after{content: ''; background: #303030; width: 100%; height: 100%; position: absolute; right: -85%; top: 0; z-index: 1;}
.product-slider{position: relative; overflow: visible;}
.product-slider .swiper-wrapper{display: flex; align-items: center;}
.product-slider .swiper-slide{width: 356px; opacity: 0.3; flex-shrink: 0; cursor: pointer; box-sizing: border-box; transition: width 0.6s ease, opacity 0.6s ease;}
.product-slider .swiper-slide-active{opacity: 1; width: 430px;}
.product-slider .slide-image{background: #fff; border-radius: 20px; margin-bottom: 23px; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 480px; padding: 30px; width: 356px;}
.product-slider .swiper-slide-active .slide-image{height: 580px; box-shadow: 0 15px 15px rgba(0,0,0,.59); width: 430px;}
.product-slider .swiper-slide-active .slide-image::before{display: none;}
.product-slider .swiper-slide.six img{margin-bottom: -60px;}
.product-slider .slide-image img{width: fit-content; height: auto; display: block; max-height: 400px;}
.product-slider .swiper-slide-active .slide-image img{max-height: 500px;}
.product-slider .slide-text{font-size: 20px; font-weight: 500; color: #fff; opacity: 0; transition: opacity 0.3s; text-align: center; white-space: nowrap;}
.product-slider .swiper-slide-active .slide-text{opacity: 1;}
.product-slider .slide-text span{color: rgba(255,255,255,.4); padding-inline: 14px;}
.slider-progress{width: 100%; height: 5px; background: rgba(255,255,255,.2); margin-top: 50px; border-radius: 1px; overflow: hidden; max-width: 810px;}
.slider-progress-bar{height: 100%; background: #fff; width: 33.33%; transition: width 0.5s ease; border-radius: 1px;}

@keyframes radar {
    0% {transform: translate(-50%, -50%) scale(0.5);}
    100% {transform: translate(-50%, -50%) scale(1);}
}

@keyframes rotate {
    0% {transform: translate(-50%, -50%) rotate(0deg);}
    100% {transform: translate(-50%, -50%) rotate(360deg);}
}

#core{
    .banner{position: relative; z-index: 1;}
    .c--visual{max-width: 1440px; margin: -363px auto 0; position: relative;}
    .circle{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: fit-content; animation: rotate 10s linear infinite; max-width: 471px; width: 33.1vw;}
    .bg-gray{padding-block: 160px; margin-top: 64px;}
    h2{font-size: 50px; font-weight: 700; margin-bottom: 120px; text-align: center;}
    .bg-gray .cont{display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px 0;}
    .bg-gray .cont>li:nth-child(2),.bg-gray .cont>li:nth-child(3){display: flex; flex-direction: column; justify-content: center; padding-left: 117px;}
    .bg-gray .cont b{font-size: 40px; padding-bottom: 28.4px; margin-bottom: 32.6px; position: relative; line-height: 1.3;}
    .bg-gray .cont b::after{content: ''; background: #E0E0E0; height: 3px; width: 80.3px; position: absolute; bottom: 0; left: 0;}
    .bg-gray .cont ul{display: flex; flex-direction: column; gap: 18px;}
    .bg-gray .cont ul li{font-size: 18px; position: relative; padding-left: 14px;}
    .bg-gray .cont ul li::before{content: ''; background: #E0E0E0; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%;}

    .why{padding-block: 154px 220px;}
    .why .container--wide{display: flex; justify-content: space-between;}
    .why h2{margin-bottom: 0; text-align: left; color: var(--primary); font-family: var(--ff-third);}
    .why ul{display: grid; grid-template-columns: repeat(3, 1fr); gap: 89px 38px;}
    .why ul li{display: flex; gap: 30px; align-items: center;}
    .why ul li .why--i{width: 100px; height: 100px; border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 5px 5px 15px rgba(0,0,0,.16);}
    .why ul li p{font-size: 18px; line-height: 1.66;}
    .why ul li p span{font-weight: 700;}

    .business{padding-block: 120px 0;}
    .business h2{margin-bottom: 60px;}
    .business .box{position: relative;}
    .business-bar{position: absolute; left: 50%; top: calc(50% + 15px); transform: translate(-50%, -50%); width: 100%; max-width: 797px; height: 1px; z-index: 1; pointer-events: none;}
    .business-bar-line{width: 100%; height: 100%; background: repeating-linear-gradient(to right, #3A70FF 0, #3A70FF 3px, transparent 3px, transparent 5px);}
    .business-bar-dot{position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; background: #3A70FF; border-radius: 50%; z-index: 2; transition: left 9s linear;}
    .business-bar-dot.move-to-1{left: 0;}
    .business-bar-dot.move-to-2{left: 50%;}
    .business-bar-dot.move-to-3{left: 100%;}
    .business ul{display: flex; margin: auto; justify-content: center; align-items: center; position: relative; z-index: 3;}
    .business ul li{mix-blend-mode: multiply; width: 331px; height: 331px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; padding-inline: 85px; box-shadow: 0 5px 15px rgba(58,112,255,.3);}
    .business ul li:nth-child(2){margin-inline: -23px;}
    .business ul li:nth-child(3){padding-inline: 80px 40px;}
    .business span{font-size: 20px; font-weight: 700; color: #ABABAB;}
    .business b{font-family: var(--ff-third); font-size: 50px; font-weight: 500; margin-block: 0 25px; display: block;}
    .business b span{font-size: 30px; font-weight: 400; color: #000;}
    .business p{font-size: 20px; font-weight: 500; height: 60px;}
    .business ul li.active b,.business ul li.active p,.business li.active b span{color: var(--primary);}
    .ability{padding-top: 200px;}
    .ability .container--wide{display: flex; width: 100%; justify-content: space-between;}
    .ability h2{margin-bottom: 46px; text-align: left;}
    .ability p{font-size: 28px; font-weight: 700;}
    .ability .blue-text{color: var(--primary); font-size: 28px; font-weight: 700;}
    .ability img{width: fit-content; margin-bottom: 42px;}
    .ability ul{margin: 0; display: initial;}
    .ability ul li{mix-blend-mode: initial; width: initial !important; height: initial !important; border-radius: initial; flex-direction: initial; justify-content: space-between; padding-inline: initial !important; box-shadow: initial; border-bottom: 1px solid #E0E0E0; padding-bottom: 17px; align-items: flex-end;}
    .ability ul li:nth-child(2){margin-inline: 0; margin-top: 42px;}
    .ability span{font-size: 24px; font-weight: 500; color: #000;}
    .ability b{font-size: 24px; font-weight: 700; margin-block: 0; display: inline-block; font-family: initial;}
    .ability strong{font-size: 60px; font-family: var(--ff-third); font-weight: 700; padding-inline: 50px 10px; line-height: 1;}
    .business + .bg-gray{display: block; min-height: 764px; margin-top: -500px;}
}

/* facility */
#facility{
    .ptype2{border-bottom: 1px solid #E0E0E0;}
    .prod-info{padding-block: 110px 0; background: #fff;}
    .prod-info::before{background: linear-gradient(to top, #F5F7F9 400px, #fff 400px);}
    .prod-info[data-tab-content]{display: none;}
    .prod-info[data-tab-content].active{display: block;}
    .prod-info h3{color: #000; margin-block: 0;}
    .bg-gray{display: block; min-height: 675px; margin-top: -400px; position: relative;}
    .swiper-slide-duplicate-active{position: relative;}
    .slider-progress{background: #DAE3EC;}
    .slider-progress-bar{background: var(--primary);}
    .product-slider .swiper-slide{border-radius: 20px; width: 390px; opacity: 1;}
    .product-slider .swiper-slide-active{background: #fff; width: 390px; box-shadow: 0 5px 15px rgba(0,0,0,.1);}
    .product-slider .slide-image{padding: 0; width: 390px; margin-bottom: 20px; height: initial; position: relative;}
    .product-slider .slide-image .num{position: absolute; left: 30px; top: 34px; background: #636363; color: #fff; font-size: 14px; font-family: var(--ff-third); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(99,99,99,.2); font-weight: 700;}
    .product-slider .swiper-slide-active .slide-image .num{background: var(--primary); box-shadow: 0 0 0 6px rgba(58,112,255,.2);}
    .product-slider .swiper-slide-active .slide-image{box-shadow: none; height: initial; width: initial;}
    .product-slider .slide-text{color: #000; font-size: 20px; padding-bottom: 20px; opacity: 1;}
    .product-slider .slide-text p{font-size: 16px; color: #6A6A6A; margin-top: 12px; height: 48px; font-weight: 400;}
    .slider-progress{margin-top: 88px;}
    .product-slider .slide-image::before{content: ''; background: rgba(255,255,255,.6); width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
}
.tabs{padding-block: 60px 84px;}
.tabs .container--wide{display: flex; gap: 14px;}
.tabs button,.tabs a{border: 1px solid #E0E0E0; border-radius: 40px; padding: 20px 46px; line-height: 1; background: transparent; color: #000; cursor: pointer; text-decoration: none; display: inline-block;}
.tabs button.active,.tabs a.active{background: var(--primary); color: #fff; font-weight: 700;}

/* qa */
#qa{
    .cont{padding-block: 120px 220px;}
    .container--wide>.flex{justify-content: space-between;}
    h2{font-size: 34px; font-weight: 700;}
    .grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 26px; padding-bottom: 120px; border-bottom: 1px solid #E0E0E0; margin-bottom: 120px;}
    .grid li div:not(.flex){background: var(--primary); color: #fff; border-radius: 12px; padding-block: 7px; padding-inline: 15px; font-weight: 700; font-size: 24px;}
    .grid ul{padding-block: 23px; padding-inline: 15px; display: flex; flex-direction: column; gap: 14px;}
    .grid ul li{padding-left: 14px; position: relative;}
    .grid ul li::before{content: ''; background: #00BDDB; border-radius: 50%; width: 6px; height: 6px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
    .right strong{font-size: 28px; margin-bottom: 40px; display: block;}
    .right .flex{gap: 22px;}
    .right .blue-text{font-size: 22px; margin-block: 27px 17px; display: block;}
    .right p span{font-weight: 700;}
    .qa-table{border-collapse: collapse; width: 100%; margin-top: 40px; border: 1px solid #fff;}
    .qa-table td{border: 1px solid #fff; font-size: 16px;}
    .qa-table-header{background: #00BDDB; color: #fff; text-align: center; width: 170px; padding-block: 10px; font-weight: 700; font-size: 18px !important;}
    .qa-table-label{background: #00BDDB; color: #fff; vertical-align: middle; text-align: center; font-weight: 700; font-size: 18px !important;}
    .qa-table-standard{background: #fff; color: #000; text-align: left; padding: 10px 20px; border-top: 1px solid #E0E0E0 !important; border-bottom: 1px solid #E0E0E0 !important;}
    .qa-table-item{background: #F2F2F2; color: #000; text-align: center; vertical-align: middle; width: 152px;}
    .qa-table-item strong{display: block; margin-bottom: 0; font-size: 16px;}
    .qa-table-item ul{list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;}
    .qa-table-item li{font-weight: 400; font-size: 18px;}
    .qa-table-note{font-size: 14px; color: #000; text-align: right; margin-top: 10px;}
    .qa-table ul{padding: 15px;}
    .qa-table .table-grid{display: grid; grid-template-columns: repeat(2, 1fr);}
    .qa-table td:has(.table-grid){border-bottom: 1px solid #E0E0E0 !important;}
    .qa-table .last{border-bottom: 1px solid #E0E0E0;}
    .qa-table tr:nth-child(3) .qa-table-item{border-bottom: 1px solid #E0E0E0;}
}

@media screen and (max-width: 1450px) {
    .prod-info .container--wide{flex-direction: column; gap: 40px;}
    .prod-info .slide-section{padding-left: 0;}
    .prod-info::before{display: none;}
    .prod-info .swiper{margin-left: 0; max-width: 100% !important;}
    .prod-info .swiper::before{content: ''; height: 100%; width: 100%; background: #303030; position: absolute; left: calc(-100% - 20px); top: -7px; z-index: 100;}
    .slider-progress{max-width: 100%;}

    #facility{
        .prod-info .swiper::before{background: linear-gradient(180deg,rgba(255, 255, 255, 1) 36%, rgba(245, 247, 249, 1) 36%);}
    }
}

@media screen and (max-width: 1440px) {
    .pc{display: none;}
    .tbt{display: block;}
    .subpage-wrapper{padding-block: 60px 0;}

    .t--area{flex-direction: column-reverse; justify-content: center; margin-bottom: 40px;}
    .nav-box{font-size: 14px;}
    .sub-title{text-align: center; font-size: 40px;}
    .banner{text-align: center;}
    .banner h1{font-size: 32px;}
    .tabs .container--wide{justify-content: center;}

    #greeting {
        h3{text-align: center;}
        .cont{grid-template-columns: 1fr;}
        .cont img{max-width: 200px; margin: 49px auto 0;}
        & .innovation {
            .grid {
                grid-template-columns: 1fr;
            }
            .blue-text{font-size: 45px; text-align: center;}
            .grid>div p:not(.blue-text){text-align: center;}
            .t--box{padding: 0 24px 34px;}
        }
    }

    #about {
        .cont {
            max-width: 720px;
            margin: auto;
        }

        .c--list{flex-direction: column; text-align: center;}
        .img-box{margin-top: 20px;}
        ul li::before{display: none;}
        .img-box::before{display: none;}
        .img-box::after{display: none;}
        li:nth-child(2n) .c--list div:not(.img-box){text-align: center; order: 1;}
        li:nth-child(2n) .c--list .img-box{grid-row-end: 2;}

        .organization{height: 822px;}
        .organization h1{font-size: 38px;}
    }

    #history{
        .sub-title + p{text-align: center;}

    }

    #cert{
        .cert-list{grid-template-columns: repeat(4, 1fr);}
        .cert-item .cont{padding: 20px 0 0;}
        .cert-item .cont .category{font-size: 14px;}
        .cert-item .cont .tit{font-size: 16px;}
        .cert-item .cont .wr1{font-size: 14px;}
    }

    .why .container--wide{
        flex-direction: column;
    }

    #core{
        .c--visual{margin: -200px auto 0;}
        .bg-gray .cont{grid-template-columns: 1fr; gap: 40px;}
        .bg-gray .cont>li:nth-child(2), .bg-gray .cont>li:nth-child(3){padding-left: 0;}
        .bg-gray .cont>li:nth-child(2){margin-bottom: 60px;}
        .bg-gray .cont>li:nth-child(3){order: 4;}
        .bg-gray .cont>li:nth-child(4){order: 3;}

        .why h2{margin-bottom: 40px;}
        .why h2 br{display: none;}
        .why ul{grid-template-columns: repeat(2, 1fr);}

        .business{padding-block: 80px 0;}
        .business ul li{padding-inline: 50px; width: 261px; height: 261px;}
        .business ul li:nth-child(3){padding-inline: 30px 0;}
        .business b{font-size: 30px;}
        .business span{font-size: 16px;}
        .business p{height: initial; margin-bottom: 0px; font-size: 16px;}
        .ability{padding-top: 100px;}
        .ability .container--wide{flex-direction: column;}
        .ability h2{font-size: 30px; margin-bottom: 20px;}
        .ability p{font-size: 24px; margin-bottom: 40px;}
        .business + .bg-gray{margin-top: -400px; min-height: 500px; padding-block: 160px 80px;}
        .ability strong{font-size: 40px;}
        .ability .blue-text{font-size: 24px;}
        .ability span{font-size: 20px;}
        .ability b{font-size: 20px;}
    }

    #qa{
        h2{margin-bottom: 30px;}
        .container--wide>.flex{flex-direction: column;}
        .grid li img{width: 50%;}
        .grid ul{padding-inline: 0px;}
        .grid ul li::before{top: 7px; transform: initial;}
        .qa-table .table-grid{grid-template-columns: 1fr;}
    }

    #lineup{
        ul{grid-template-columns: repeat(2, 1fr);}
        li h3{font-size: 24px;}
        li span{font-size: 16px;}
    }

    #product{
        .p-sub-visual{min-height: 360px;}
        .p-sub-visual>img{position: absolute; left: 0; top: 0; object-fit: cover; height: 100%;}
        .p-sub-visual .container--wide{flex-direction: column; justify-content: center; gap: 30px;}
        .p-sub-visual .container--wide img{max-width: 180px;}
        .p-sub-visual a{padding-block: 10px; width: 180px;}
        .p-sub-visual p{font-size: 16px; text-align: center;}
        .cont .container--wide{flex-direction: column;}
        .prod-img{width: fit-content; margin: auto; padding-left: 0;}
        .prod-intro h2{font-size: 28px;}
        .prod-intro p{font-size: 16px;}
        .mbass .radar:nth-child(3){left: 38px;}
        .mbass .radar:nth-child(5){left: 36px;}
        .orove .radar:nth-child(3){left: 13px;}
        .oregeul .radar:nth-child(2){left: 52px;}
        .oregeul .radar:nth-child(4){left: 42px;}
        .oregeul .radar:nth-child(5){left: 42px;}
        .daily .radar:nth-child(4){left: 32px;}
        .atom .radar:nth-child(3){left: 32px;}
        .bio .radar:nth-child(3){left: 22px;}
        .product-slider .swiper-slide{width: 348px;}
        .product-slider .slide-image{width: 348px;}
        .prod-info .slide-section.two::after{right: -100%;}
        .p--title{text-align: center;}
    }
    .product-slider .slide-text{white-space: wrap; min-height: 60px;}
    
    #catalog {
        .gall-ls--v{grid-template-columns: repeat(3, 1fr);}
    }

    #location{
        .container{height: initial;}
        ul{flex-direction: column; align-items: flex-start; gap: 40px; padding-block: 40px;}
    }
}

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

    .subpage-wrapper{padding-block: 50px;}
    .ptype1{padding-block: 80px;}
    .ptype2{padding-block: 80px 0;}

    .t--area{margin-bottom: 30px;}
    .title{font-size: 40px; line-height: 1; margin-top: 20px; text-align: center;}
    .sub-title{font-size: 26px;}
    .banner{padding-block: 40px;}
    .banner h1{font-size: 22px; margin-bottom: 20px;}
    .banner p{font-size: 16px;}
    .nav-box{line-height: 1.2;}
    .tabs{padding-block: 30px;}
    .tabs button, .tabs a{padding: 15px 0; width: 50%; font-size: 14px; text-align: center;}


    #greeting {
        h3 {
            font-size: 24px;
        }
        & .cont {
            text-align: center;
            .top{
                text-align: center;
                & b {
                    font-size: 20px; display: inline;
                }
            }
            p{
                font-size: 16px;
                margin-bottom: 20px;
            }
            strong{text-align: center;}
            strong .blue-text{display: block; margin-bottom: 10px;}
        }

        & .innovation{
            padding-bottom: 0;
            .blue-text{font-size: 32px;}
            .grid{
                gap: 30px;
            }
            .t--box{
                padding: 0;
                margin-top: 0;
            }
            .t--box{color: #000; padding-block: 20px 30px;}
            ul li span{color: #000; font-size: 14px;}
            li .flex{flex-direction: column; align-items: flex-start; gap: 20px;}
            li .flex b{font-size: 24px;}
        }
    }

    #about{
        padding-block: 50px 0;
        .ptype1{padding-block: 80px 0;}
        .c--block{padding-block: 60px;}
        .c--list span{font-size: 18px;}
        .c--list .about--t{font-size: 32px; margin-block: 6px 20px;}
        .cont{padding-inline: 15px;}
        ul{gap: 40px;}
        .organization{height: initial; padding-block: 80px;}
        .organization h1{margin-bottom: 20px; font-size: 32px;}
        .organization .box{width: calc(100% + 30px); overflow-x: scroll; margin-inline: -15px; padding-inline: 15px;}
        .organization .box img{min-width: 720px;}
    }

    #cert{
        &.subpage-wrapper{padding-block: 50px 0;}
        .cert-list{grid-template-columns: repeat(2, 1fr);}
    }

    #core{
        &.subpage-wrapper{padding-block: 50px 0;}
        .c--visual{width: 100%; margin: -140px auto 0;}

        .bg-gray{padding-block: 80px;}
        h2{font-size: 30px; margin-bottom: 30px;}
        .bg-gray .cont b{font-size: 24px;}
        .bg-gray .cont ul li{font-size: 14px;}

        .why{padding-block: 80px;}
        .why h2{font-size: 30px; text-align: center;}
        .why ul{grid-template-columns: 1fr; width: fit-content; margin: auto; gap: 60px;}

        .business{padding-block: 80px 0;}
        .business .box{text-align: center;}
        .business h2{margin-bottom: 30px;}
        .business ul{flex-direction: column;}
        .business ul li{padding-inline: 40px;}
        .business ul li:nth-child(2){margin-block: -30px; margin-inline: initial;}
        .business ul li:nth-child(3){padding-inline: 0;}
        .business-bar{display: none;}
        .ability{padding-top: 80px;}
        .ability h2{text-align: center; margin-bottom: 20px;}
        .ability p{text-align: center; font-size: 20px;}
        .ability .blue-text{font-size: 20px;}
        .ability ul li{flex-direction: column;}
        .ability ul li:nth-child(2){margin-block: 40px 0;}
        .ability li span{display: flex; align-items: flex-end; width: 100%;}
        .ability li span:first-child{margin-bottom: 20px;}
        .ability b{margin-left: 6px;}
        .ability strong{padding-inline: 0; margin: 0 10px 0 auto; display: block; font-size: 34px;}
    }

    #facility{
        &.subpage-wrapper{padding-block: 50px 0;}
        .prod-info{padding-block: 80px 0;}
        .prod-info h3{font-size: 30px; text-align: center;}
        .bg-gray{min-height: 540px;}
        .slider-progress{margin-top: 40px;}
        .product-slider .swiper-slide{width: 330px;}
        .product-slider .slide-image{width: 100%;}
        .product-slider .slide-text p{font-size: 14px;}
    }

    #qa{
        .cont{padding-block: 80px 30px;}
        h2{text-align: center; font-size: 24px;}
        .grid{gap: 30px 20px; margin-bottom: 40px; padding-bottom: 40px;}
        .grid li div:not(.flex){font-size: 18px;}
        .grid ul{padding-block: 15px 20px; gap: 10px;}
        .grid ul + .flex{flex-direction: column; gap: 10px;}
        .grid ul + .flex img{width: 100%;}
        .right strong{font-size: 20px; margin-bottom: 30px;}
        .right .flex{flex-direction: column; gap: 40px;}
        .right .blue-text{font-size: 18px;}
        .right .flex p br{display: none;}
        .right .flex p{text-indent: -73px; padding-left: 73px;}
        .right .qa-table-item strong{font-size: 16px;}
        .ptype2{padding-block: 60px 0;}
        .table-cover{overflow-x: scroll; margin-inline: -15px; padding-inline: 15px; padding-bottom: 15px;}
        .qa-table{min-width: 602px; margin: 0;}
    }

    #lineup{
        .bg-gray{padding-block: 80px 0;}
        ul{grid-template-columns: 1fr;}
    }
    .product-menu li a{font-size: 14px;}
    #product{
        .p--visual{padding-block: 170px 80px; height: 720px;}
        .p--visual .container--wide{align-items: center;}
        .p--visual .visual--sp{margin-block: 20px 30px;}
        .p--title{font-size: 40px;}
        .p--visual .visual--sp{font-size: 20px; text-align: center;}
        .p--visual li{font-size: 14px;}
        .p-sub-visual p{font-size: 14px;}
        .p-sub-visual p br{display: none;}
        a{gap: 10px;}
        .p-sub-visual{min-height: 400px;}
        .p-sub-visual a{font-size: 16px; width: 160px;}
        .cont{padding-block: 80px 0;}
        .prod-intro{text-align: center; gap: 40px; padding-block: 80px;}
        .prod-intro h2{font-size: 24px;}
        .prod-intro p{margin-block: 20px 30px;}
        .prod-intro p br{display: none;}
        .prod-intro>div{padding-bottom: 40px;}
        .prod-intro>div:last-child{padding-bottom: 80px;}
        .prod-info p{text-align: center;}
        .prod-info h3{font-size: 40px; text-align: center;}
        .prod-info ul{min-width: 100%;}
        .prod-info ul li{flex-direction: column; gap: 6px; font-size: 14px;}
        /* .ver2 .prod-info ul li div{text-indent: -54px; padding-left: 54px;} */
        /* .ver2 .prod-info ul li div span.sm{text-indent: 0; padding-left: 18px;} */
        .product-slider .swiper-slide{width: 330px;}
        .product-slider .slide-image{width: 330px;}

        .mbass-mo{content: url(../images/product/mbass-mo.png);}
        .orove-mo{content: url(../images/product/orove-mo.png);}
        .orgeul-mo{content: url(../images/product/orgeul-mo.png);}
        .daily-mo{content: url(../images/product/daily-mo.png);}
        .emt-mo{content: url(../images/product/emt-mo.png);}
        .atom-mo{content: url(../images/product/atom-mo.png);}
        .bio-mo{content: url(../images/product/bio-mo.png);}
        .bidam-mo{content: url(../images/product/bidam-mo.png);}
    }

    #faq{
        &.subpage-wrapper{padding-block: 50px 0;}
        .faq-ls--item .question{padding-inline: 10px;}
        .faq-ls--item .answer .content{padding-inline: 10px;}
        .banner.ver2 .container--wide{flex-direction: column; gap: 15px;}
        .banner.ver2 h1{font-size: 30px;}
        .bar{width: 100%;}
        .banner a{font-size: 14px; width: 150px; height: 37px;}
    }

    #catalog {
        .gall-ls--v{grid-template-columns: repeat(2, 1fr);}
        .gall-ls--v > li > a .title{padding-inline: 0; font-size: 18px;}
    }

    #inquiry{
        .dd-form-table tbody tr :where(th, td){padding-block: 15px 0;}
    }

    #location{
        &.subpage-wrapper{padding-block: 50px 0;}
        .ptype1{padding-block: 80px 0;}
        .container{margin-top: 0; width: 100%; padding-inline: 15px;}
        iframe{max-height: 400px;}
        .i--box{min-width: 70px;}
        .l--title{font-size: 16px;}
        p{font-size: 14px;}
    }
}
@media screen and (max-width: 550px) {
    #product{
        .c--info1{content: url(../images/product/mbass-info1-mo.png);}
        .c--info2{content: url(../images/product/orove-info2-mo.png);}
        .c--info3{content: url(../images/product/orove-info3-mo.png);}
        .c--info4{content: url(../images/product/orove-info4-mo.png);}
        .c--info5{content: url(../images/product/orgeul-info1-mo.png);}
        .c--info6{content: url(../images/product/orgeul-info2-mo.png);}
        .c--info7{content: url(../images/product/orgeul-info3-mo.png);}
        .c--info8{content: url(../images/product/daily-info1-mo.png);}
        .c--info9{content: url(../images/product/emt-info1-mo.png);}
        .c--info10{content: url(../images/product/atom-info1-mo.png);}
        .c--info11{content: url(../images/product/bio-info1-mo.png);}
        .c--info12{content: url(../images/product/bidam-info1-mo.png);}
        .color-img{content: url(../images/product/color-mo.png);}
    }

    #core{
        .c--visual{margin: -60px auto 0}
        .c--visual img:not(.circle){content: url(../images/core/c-visual.png);}
        .circle{top: 49vw; width: 71vw;}
    }
}


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