@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

.area-subVisual{ --radius: 8rem; position: relative; z-index: 8; height: 600rem; padding-top: var(--header-height); background: var(--black) no-repeat 50% / cover; background-position: center 25%;
    &[data-sublayout="about"]{ background-image: url('/images/content/img_about.jpg'); background-position: center 50%; }
    &[data-sublayout="business"]{ background-image: url('/images/content/img_business.jpg'); background-position: center 50%; }
    &[data-sublayout="notice"]{ background-image: url('/images/content/img_news.jpg'); }
    &:before { content: ''; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.3); display: block; width: 100%; height: 100%; }
    /* &[data-sublayout="equipment"]{ background-image: url('/images/content/visual-4.jpg'); } */
    /* &[data-sublayout="board"]{ background-image: url('/images/content/visual-5.jpg'); } */
    .inr{ display: grid; grid-template-rows: 1fr auto; align-items: center; height: 100%; }
    .title-group{ padding-bottom: 2.3%; }
    .eng{ font: 500 clamp(18rem, calc( 20 / var(--inr) * 100vw ), 20rem) var(--font-pop); color: #fff; }
    .title{ margin-top: 28rem; font: 600 clamp(30rem, calc( 70 / var(--inr) * 100vw ), 70rem) var(--font-pre); color: #fff; }
    .lnb-group{ --size: 70rem; position: relative; display: grid; grid-template-columns: var(--size) 1fr; width: 450rem; height: var(--size); }
    .home{ display: grid; place-items: center; height: 100%; aspect-ratio: 1; background: var(--primary); border-radius: var(--radius) 0 0 0; }
    .home-icon{ width: 18rem; height: 18rem; fill: #fff; }
    .lnb-btn{ display: flex; align-items: center; justify-content: space-between; padding: 0px 32rem 0 29rem; background: #fff; border-radius: 0 var(--radius) 0 0; font: 500 18rem var(--font-pre); }
    .lnb-btn::after{ content: ''; translate: 0 -33%; display: block; width: 9rem; aspect-ratio: 1; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; }
    .lnb{ position: absolute; inset: 100% 0 auto; padding: 44rem 46rem 45rem; background: #fff; border: 3rem solid var(--secondary); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 15rem 30rem rgba(0, 0, 0, 0.1); font: 300 18rem var(--font-pre); -webkit-clip-path: inset(0 -50rem 100%); clip-path: inset(0 -50rem 100%); }
    .lnb.isExpanded{ -webkit-clip-path: inset(0 -50rem -50rem); clip-path: inset(0 -50rem -50rem); }
    .lnb > ul{ display: grid; gap: 17rem; }
    @media(prefers-reduced-motion:no-preference){
        .lnb-btn::after, .lnb{ transition: .6s; }
    }
    @media(any-hover){
        .lnb a:hover{ color: var(--secondary); }
    }
    @media screen and (max-width: 1280px) {
        height: 360rem;
    }
    @media screen and (max-width: 767px){
        height: 280rem;

        .title{margin-top: 0;}
        .lnb-group{--size: 60rem;width: auto;}
    }
}

#content{ padding: clamp(70rem, calc( 144 / var(--inr) * 100vw ), 144rem) 0; }
.sub-title, .subt{ font: 700 var(--fs40) var(--font-pre);text-align: center;margin-bottom: clamp(50rem, calc(100 / var(--inr)* 100vw), 100rem);}

.sub01.sp01 {
    .ceo-write{width:auto;margin:0 auto;/* border:1px solid #eaeaea; */ padding:25rem 30rem;}
    @media screen and (min-width: 767px){
        .ceo-write {width: 80%;}
    }
}

.sub01.sp02 {
    .timeline {
        h3{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;text-align:center;margin:0 auto;font-size:var(--fs25);border:1px solid #e1e2e3;padding:10rem 25rem;}
        ul li{list-style-type:none;position:relative;width:2rem;margin:0 auto;padding-top:50rem;background: #e0e0e0;}
        ul li::after{content:'';position:absolute;left:50%;bottom:7rem;transform:translateX(-50%);width:12rem;height:12rem;border-radius:50%;background: var(--primary);}
        ul li.now::after{width:22rem;height:22rem;}
        ul li div{position:relative;bottom:0;width:400rem;padding:15rem;background:#f4f1f1;}
        ul li div::before{content:'';position:absolute;bottom:7rem;width:0;height:0;border-style:solid;}
        ul li:nth-child(odd) div{left:45rem}
        ul li:nth-child(odd) div::before{left:-15rem;border-width:8rem 16rem 8rem 0;border-color:transparent #f4f1f1 transparent transparent;}
        ul li:nth-child(even) div{left:-439rem;}
        ul li:nth-child(even) div::before{right:-15rem;border-width:8rem 0 8rem 16rem;border-color:transparent transparent transparent #f4f1f1;}
        .timeline-card-title {font-style: normal;}
        .timeline-card-title time{display:block;font-size:20rem;font-weight:700;margin-bottom:3rem;color: var(--primary);}
        figure{position:relative;margin-top: 16rem;}
        figure figcaption{width:100%;height:100rem;position:absolute;bottom:0;font-size:18rem;font-weight:600;display:flex;align-items:flex-end;justify-content:center;padding-bottom:15rem;background:#020024;background:linear-gradient(0deg,rgba(2,0,36,1) 0,rgba(0,0,0,0) 100%);color:#fff;text-wrap:pretty;padding-inline:10rem;text-align:center;}
     
    } 
    @media screen and (max-width: 900px) {
        .timeline {
            & ul li div{width:250rem;}
            & ul li:nth-child(even) div {left: -289rem; /*250+45-6*/}
        }
    }
    @media screen and (max-width: 767px) {
        .timeline h3 {margin: 0 0;width: auto;} 
    }
    @media screen and (max-width: 600px) {
        .timeline {
            & ul li{margin-left:20rem;}
            & ul li div{width:calc(100vw - 91rem);}
            & ul li:nth-child(even) div{left:45rem;}
            & ul li:nth-child(even) div::before{left:-15rem;border-width:8rem 16rem 8rem 0;border-color:transparent #f4f1f1 transparent transparent;}
        }
    }
}

.sub01.sp03 {
    .certiList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10rem;padding-bottom:15rem;}
    .certiList figure{border:1px solid #e1e2e3;height: 100%;}
    .certiList figcaption{padding:15rem 20rem;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
    .certiList figcaption em{font-size: var(--fs20);font-weight: 600;color: #444;}
    .certiList figcaption i{font-size:14rem;font-weight:400;color:#b5b5b5;display:flex;flex-direction:row;align-items:center;gap:7rem}
    .certiList figcaption i::before{content:' ';display:block;height:1rem;width:25rem;background-color:#b5b5b5;}
    @media screen and (min-width: 768px) {
        .certiList {grid-template-columns:repeat(4,minmax(0,1fr));gap: 25rem;}
    } 
}

.sub02 {
    .img_car-container img{display:block;width:80%;margin: 0 auto;}
    .point-group {position: relative;}
    .point-group .point-group_spot {
        --details-image-width: 400rem;
        --padding-cards: 20rem;
 
        display: block;
        position: absolute; 
        width: 30rem;
        height: 30rem;

        summary {display: block;position: absolute;position: relative;width: 30rem;height: 30rem;font-size: 0;cursor: pointer;
            &:before{content:'';position:absolute;display:block;width:300%;height:300%;box-sizing:border-box;margin-left:-100%;margin-top:-100%;border-radius:50%;background-color:var(--primary);-webkit-animation:pulse-ring 1.25s cubic-bezier(.215,.61,.355,1) infinite;animation:pulse-ring 1.25s cubic-bezier(.215,.61,.355,1) infinite;}
            &:after{content:'';position:absolute;left:0;top:0;display:block;width:100%;height:100%;background-color:#fff;border-radius:50%;box-shadow:0 0 8px rgba(0,0,0,.3);-webkit-animation:pulse-dot 1.25s cubic-bezier(.455,.03,.515,.955) -.4s infinite;animation:pulse-dot 1.25s cubic-bezier(.455,.03,.515,.955) -.4s infinite;}
        }

        figure {background-color: #fff;display: flex;flex-direction: column;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;border: #e1e2e3;padding: var(--padding-cards);position: relative;right: calc(var(--details-image-width) / 2);margin-block: 20rem;box-shadow: 3px 3px 12px #3333336b;z-index: 9;}
        figure::after{content:"\2715";position:absolute;top:var(--padding-cards);right:var(--padding-cards);width:25rem;height:25rem;color:#fff;display:flex;align-items:center;justify-content:center;background-color:#333;}
        figure.point_bottom{top:calc(var(--details-image-width)* -1);left:calc((calc(var(--details-image-width)/ 2))* -1);right:auto;}
        /* figure.point_right {
            top: calc(var(--details-image-width)* -1);
            left: calc((calc(var(--details-image-width) - 80rem))* -1);
            right: auto;
        } */
        figure.point_right {
            top: calc(calc(var(--details-image-width) - 180rem)* -1);
            left: calc((calc(var(--details-image-width) + 50rem))* -1);
            right: auto;
        }
        figure img{width:var(--details-image-width);}
        figure figcaption{text-align:center;padding-top:15rem;text-transform:uppercase;}

        &[open] summary~*{-webkit-animation:open .5s;animation:open .5s;} 
        &.closing summary~*{-webkit-animation:close .5s;animation:close .5s;}

        @media (max-width: 767px) {
            --details-image-width: 200rem;
            --padding-cards: 5rem;
            width: 16rem;
            height: 16rem;
     
            summary {width: 16rem;height: 16rem;} 
            figure::after{width:16rem;height:16rem;font-size:10rem;}
            figure figcaption{padding-top: 7rem;font-size: 12rem;}
            figure.point_right {
                top: calc(calc(var(--details-image-width) - 110rem)* -1);
                left: calc((calc(var(--details-image-width) + 20rem))* -1); 
            }
        }
    } 

    @media (max-width: 767px) {
        .img_car-container img{width:100%;}
    }
}  

.sub02.sp01 { 
    .point-group .point-group_spot  { 
        &[data-design-line=lugage]{top:70rem;right:370rem;}
        &[data-design-line=lugage2]{top:200rem;right:230rem;}
        &[data-design-line=console]{top:300rem;left:660rem;}
        &[data-design-line=wheel]{bottom:200rem;left:640rem;}
        &[data-design-line=ivt]{bottom:260rem;left:430rem;}
        &[data-design-line=tube-assy]{bottom:300rem;left:500rem;}
        &[data-design-line=muffler]{bottom:360rem;left:720rem;}
        &[data-design-line=differential]{bottom: 450rem;right: 400rem;}
        &[data-design-line=differential2]{bottom: 477rem;right: 470rem;}
        &[data-design-line=differential3]{bottom: 500rem;right: 530rem;}
        &[data-design-line=guard]{bottom: 490rem;right: 340rem;}

        @media (max-width: 1280px) {
            &[data-design-line=lugage]{top:40rem;right:280rem;}
            &[data-design-line=lugage2]{top:110rem;right:140rem;}
            &[data-design-line=console]{top:200rem;left:380rem;}
            &[data-design-line=wheel]{bottom:100rem;left:400rem;}
            &[data-design-line=ivt]{bottom:160rem;left:280rem;}
            &[data-design-line=tube-assy]{bottom:180rem;left:360rem;}
            &[data-design-line=muffler]{bottom:240rem;left:480rem;}
            &[data-design-line=differential]{bottom: 290rem;right: 260rem;}
            &[data-design-line=differential2]{bottom: 320rem;right: 300rem;}
            &[data-design-line=differential3]{bottom: 360rem;right: 330rem;}
            &[data-design-line=guard]{bottom: 320rem;right: 200rem;}
        }
        @media (max-width: 767px) { 
            &[data-design-line=lugage]{top:10rem;right:90rem;}
            &[data-design-line=lugage2]{top:60rem;right:40rem;}
            &[data-design-line=console]{top:100rem;left:150rem;}
            &[data-design-line=wheel]{bottom:40rem;left:160rem;}
            &[data-design-line=ivt]{bottom:70rem;left:100rem;}
            &[data-design-line=tube-assy]{bottom:90rem;left:145rem;}
            &[data-design-line=muffler]{bottom:105rem;left:185rem;}
            &[data-design-line=differential]{bottom: 110rem;right: 100rem;}
            &[data-design-line=differential2]{bottom: 120rem;right: 120rem;}
            &[data-design-line=differential3]{bottom: 150rem;right: 130rem;}
            &[data-design-line=guard]{bottom: 145rem;right: 83rem;}
        }
    } 
}

.sub02.sp02 {
    .point-group .point-group_spot {
        &[data-body-line=reinf]{top:230rem;right:610rem;}
        &[data-body-line=railroof-ctr]{top:100rem;right:550rem;}
        &[data-body-line=railroof-fr]{top:50rem;right:430rem;}
        &[data-body-line=railroof-fr2]{top:140rem;right:690rem;}
        &[data-body-line=tailgate]{top:140rem;right:300rem;}
        &[data-body-line=side-otr]{top:220rem;right:270rem;}
        &[data-body-line=quarter-inr]{bottom: 470rem;right:320rem;}
        &[data-body-line=apron-mbr]{bottom: 160rem;left: 520rem;}
        &[data-body-line=cowl-dash]{bottom: 390rem;left: 550rem;}
        &[data-body-line=pnl-dr]{bottom: 330rem;left: 800rem;}
        &[data-body-line=pnl-dr2]{bottom: 420rem;right: 430rem;}
        &[data-body-line=ctr-floor]{bottom: 190rem;left: 730rem;}
        &[data-body-line=rr-floor]{bottom: 340rem;right: 400rem;}

         

        @media (max-width: 1279px) {
            &[data-body-line=reinf]{top: 160rem; right: 400rem;}
            &[data-body-line=railroof-ctr]{top:50rem;right:370rem;}
            &[data-body-line=railroof-fr]{top:80rem;right:430rem;}
            &[data-body-line=railroof-fr2]{top:30rem;right:280rem;}
            &[data-body-line=tailgate]{top:80rem;right:200rem;}
            &[data-body-line=side-otr]{top:130rem;right:170rem;}
            &[data-body-line=quarter-inr]{bottom: 290rem;right:210rem;}
            &[data-body-line=apron-mbr]{bottom: 100rem;left: 330rem;}
            &[data-body-line=cowl-dash]{bottom: 250rem;left: 350rem;}
            &[data-body-line=pnl-dr]{bottom: 230rem;left: 530rem;}
            &[data-body-line=pnl-dr2]{bottom: 280rem;right: 280rem;}
            &[data-body-line=ctr-floor]{bottom: 130rem;left: 480rem;}
            &[data-body-line=rr-floor]{bottom: 210rem;right: 260rem;}
        }

        @media (max-width: 767px) {
            &[data-body-line=reinf]{top: 70rem; right: 150rem;}
            &[data-body-line=railroof-ctr]{top: 25rem; right: 140rem;}
            &[data-body-line=railroof-fr]{top:35rem;right:180rem;}
            &[data-body-line=railroof-fr2]{top:10rem;right:110rem;}
            &[data-body-line=tailgate]{top:37rem;right:40rem;}
            &[data-body-line=side-otr]{top:75rem;right:30rem;}
            &[data-body-line=quarter-inr]{bottom: 150rem;right:48rem;}
            &[data-body-line=apron-mbr]{bottom: 45rem;left: 125rem;}
            &[data-body-line=cowl-dash]{bottom: 130rem;left: 130rem;}
            &[data-body-line=pnl-dr]{bottom: 110rem;left: 200rem;}
            &[data-body-line=pnl-dr2]{bottom: 140rem;right: 100rem;}
            &[data-body-line=ctr-floor]{bottom: 65rem;left: 200rem;}
            &[data-body-line=rr-floor]{bottom: 110rem;right: 75rem;}
        }
    }
}

.sub02.sp01, .sub02.sp02 {
    .tl-container, .tl-containers { display: grid; grid-template-columns: repeat(18, 1fr); --tl-height : 60rem; --tl-margin: calc(var(--tl-height) / 2); }
    .tl-container .tl-year, .tl-container .tl-ops { display: flex; position: relative; align-items: center; justify-content: center; min-height: 120rem; }
    .tl-container .tl-year {
        span { color: var(--primary); font: 700 var(--fs28) var(--font-pre); }
    }
    .tl-container .tl-ops {
        &:before { display: block; position: absolute; content: ''; width: 100%; height: 2rem; top: 50%; left: 0; background: #e0e0e0; }
        &:after { display: block; position: absolute; content: ''; width: 13rem; height: 13rem; top: 50%; left: 50%; border-radius: 12rem; transform: translateX(-50%) translateY(-49%); background: var(--primary); }
    }
    .tl-container .tl-ops:not(:has(span)) {
        &::after { display: none;}
    }
    .tl-container .tl-ops:nth-of-type(2),
    .tl-container .tl-ops:nth-of-type(6),
    .tl-container .tl-ops:nth-of-type(10),
    .tl-container .tl-ops:nth-of-type(14),
    .tl-container .tl-ops:nth-of-type(18) {
        span { display: block; position: relative; background: var(--primary); height: var(--tl-height); width: 2rem; bottom: var(--tl-margin); }
    }
    .tl-container .tl-ops:nth-of-type(2),
    .tl-container .tl-ops:nth-of-type(10),
    .tl-container .tl-ops:nth-of-type(18) {
        --tl-height: 120rem;
        --tl-margin: calc(var(--tl-height) / 2);
    }
    .tl-container .tl-ops:nth-of-type(6) {
        --tl-height: 80rem;
        --tl-margin: calc(var(--tl-height) / 2);
    }

    .tl-container .tl-ops:nth-of-type(4),
    .tl-container .tl-ops:nth-of-type(8),
    .tl-container .tl-ops:nth-of-type(12),
    .tl-container .tl-ops:nth-of-type(16) {
        span { display: block; position: relative; background: var(--primary); height: var(--tl-height); width: 2rem; top: var(--tl-margin); }
    }
    .tl-container.tl2 .tl-ops:nth-of-type(4),
    .tl-container.tl2 .tl-ops:nth-of-type(8),
    .tl-container.tl2 .tl-ops:nth-of-type(12),
    .tl-container.tl2 .tl-ops:nth-of-type(16) {
        span { top: auto; bottom: var(--tl-margin); }
    }
    .tl-container .tl-ops:nth-of-type(8),
    .tl-container .tl-ops:nth-of-type(16) {
        --tl-height: 120rem;
        --tl-margin: calc(var(--tl-height) / 2);
    }
    .tl-container.tl2 .tl-ops:nth-of-type(12) {
        --tl-height: 80rem;
        --tl-margin: calc(var(--tl-height) / 2);
    }
    .tl-container .tl-title { display: flex; gap: 10rem; align-items: flex-start; justify-content: center; margin-block: 10rem; }
    .tl-container .tl-title .num { color: var(--primary); font: 700 18rem/19rem var(--font-pre); }
    .tl-container .tl-title .tit { font-weight: 700; font: 500 17rem var(--font-pre); }
    .tl-container .tl-title.t1 { grid-column: 1 / span 5; }
    .tl-container .tl-title.t2 { grid-column: 2 / span 6; }
    .tl-container .tl-title.t3 { grid-column: 4 / span 5; }
    .tl-container.tl2 .tl-title.t3 { grid-column: 2 / span 5; }
    .tl-container .tl-title.t4 { grid-column: 6 / span 5; }
    .tl-container .tl-title.t5 { grid-column: 8 / span 5; }
    .tl-container.tl2 .tl-title.t5 { grid-column: 6 / span 5; }
    .tl-container .tl-title.t6 { grid-column: 10 / span 5; }
    .tl-container .tl-title.t7 { grid-column: 12 / span 5; }
    .tl-container.tl2 .tl-title.t7 { grid-column: 10 / span 5; }
    .tl-container .tl-title.t8 { grid-column: 13 / span 6; }
    .tl-container .tl-title.t9 { grid-column: 14 / span 5; }
    .tl-block { display: flex; height: -webkit-max-content; height: -moz-max-content; height: max-content; margin-bottom: 100rem; }
    .tl-block ul li { position: relative; width: 2rem; background: #e0e0e0; padding-bottom: 30rem; left: 10rem; margin-top: 30rem; }
    .tl-block ul li .tl-year { position: absolute; color: var(--primary); font: 700 var(--fs28) var(--font-pre); left: -10rem; top: -28rem; }
    .tl-block ul li .tl-title { display: flex; position: relative; width: 84vw; top: 10rem; left: 20rem; gap: 10rem; }
    .tl-block ul li .tl-title::after { display: block; position: absolute; content: ''; width: 9rem; height: 9rem; top: 5rem; left: -23rem; border-radius: 12rem; background: var(--primary); }
    
    .tl-block .tl-title .num { color: var(--primary); font: 700 16rem var(--font-pre); }
    .tl-block .tl-title .tit { font-weight: 700; font: 500 16rem var(--font-pre); }
    @media (max-width: 767px) {
        .tl-container { display: none; }
    }
    @media (min-width: 768px) {
        .tl-block { display: none; }
    }
    .ops { display: flex; flex-direction: column; margin-top: clamp(30rem, calc(50 / var(--inr)* 100vw), 50rem); margin-bottom: clamp(30rem, calc(50 / var(--inr)* 100vw), 50rem); }
    .ops h2 { margin-bottom: clamp(30rem, calc(50 / var(--inr)* 100vw), 50rem); }
    .ops-block { display: grid; grid-template-columns: repeat(6, 1fr); -moz-column-gap: 40rem; column-gap: 40rem; }
    .ops .ops-box { display: flex; flex-direction: column; gap: 10rem; position: relative; }
    .ops .ops-box .ops-img { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 20rem; overflow: hidden; border: 2px solid #e0e0e0; }
    .ops .ops-box::after { display: block; content: ''; width: 20rem; height: 20rem; -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%); clip-path: polygon(0% 0%, 100% 50%, 0% 100%); position: absolute; background: #35FF8C; top: 40%; right: -30rem; transform: translateY(-50%); }
    .ops .ops-box:nth-child(7)::after { display: none; }
    .ops .ops-box .ops-img img { -o-object-fit: cover; object-fit: cover; width: 122%; height: auto; -o-object-position: center center; object-position: center center; }
    .ops .ops-box .ops-title { display: flex; align-items: center; justify-content: center; padding: 10rem 20rem; background: var(--primary); color: var(--color-white); border-radius: 20rem; }
    .ops .ops-dist, .ops .ops-dist-m, .ops .ops-dist-l, .ops .ops-dist-x { background: #e0e0e0; border-radius: 20rem; }
    .ops .ops-dist span, .ops .ops-dist-m span, .ops .ops-dist-l span, .ops .ops-dist-x span { display: flex; align-items: center; justify-content: center; padding: 10rem 20rem; color: var(--primary); font: 500 18rem var(--font-pre); }
    .ops .ops-dist:first-child { grid-column: 1 / span 3; }
    .ops .ops-dist:nth-child(2) { grid-column: 4 / span 2; }
    
    .ops .ops-dist:last-child { grid-column: 6; }
    @media (max-width: 767px) {
        .ops .ops-box .ops-img { border-radius: 10rem; }
        .ops .ops-box::after { width: 15rem; height: 15rem; top: 40%; right: -15rem; transform: translateY(-50%); }
        .ops .ops-box:nth-child(3):after, .ops .ops-box:nth-child(7):after { display: none; }
        .ops .ops-box .ops-title { border-radius: 10rem; padding: 5rem; }
        .ops .ops-dist span, .ops .ops-dist-m span, .ops .ops-dist-l span, .ops .ops-dist-x span { padding: 5rem; }
        .ops .ops-dist, .ops .ops-dist-m, .ops .ops-dist-l, .ops .ops-dist-x { padding: 5rem; border-radius: 10rem; }
        .ops .ops-dist-m, .ops .ops-dist-l, .ops .ops-dist-x { margin-top: 10rem; margin-bottom: 20rem; }
        .ops .ops-dist-m { grid-column: 1 / span 3; }
        .ops .ops-dist-l { grid-column: 1 / span 2; }
        .ops .ops-dist-x { grid-column: 3; }
        .ops-block { grid-template-columns: repeat(3, 1fr); -moz-column-gap: 20rem; column-gap: 20rem; }
        .ops .ops-dist { display: none; }
    }
    @media (min-width: 768px) {
        .ops .ops-dist-m, .ops .ops-dist-l, .ops .ops-dist-x { display: none; }
    }
}

.sub01.sp02 {
    .history { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
    .history .history-tl { display: flex; flex-direction: column; }
    .history .history-tl .sub-title { text-align: left; margin-bottom: 10rem; color: var(--primary); }
    .history .history-tl p { font: 500 var(--fs20) var(--font-pre); }
    .history .history-tl .history-tl-box { margin-top: clamp(20rem, calc(50 / var(--inr)* 100vw), 50rem); }
    .history .history-tl .history-tl-box ul li { display: flex; gap: 20rem; font-family: 'Noto Sans KR'; margin-block: 30rem; align-items: flex-start; }
    .history .history-tl .history-tl-box ul li .year { color: var(--primary); font: 700 var(--fs20) 'Noto Sans KR'; }
    .history .history-tl .history-tl-box ul li .event { font: 400 var(--fs20) 'Noto Sans KR'; }
    .history .history-img { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
    .history .history-img figure { overflow: hidden; width: 100%; height: auto; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
    .history .history-img figure img { width: 113%; -o-object-fit: cover; object-fit: cover; height: auto; }
    .history .history-img figure.ol { position: relative; }
    .history .history-img figure.ol::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); display: block; }
    .history .history-img figure .tagline { display: flex; flex-direction: column; gap: 10rem; align-items: center; justify-content: center; background: var(--primary); flex-grow: 1; width: 100%; height: 100%; }
    .history .history-img figure .tagline h3 { font: 700 var(--fs28) var(--font-pre); color: var(--color-white); }
    .history .history-img figure .tagline h4 { font: 700 var(--fs20) var(--font-pre); color: var(--color-white); }
    @media (max-width: 767px) {
        .history { grid-template-columns: 1fr; }
    }
}

/* keyframes pulse dot in contents/02_business/  */
@-webkit-keyframes pulse-ring {
    0%{transform:scale(.33);}
    100%,80%{opacity:0;}
}
@keyframes pulse-ring {
    0%{transform:scale(.33);}
    100%,80%{opacity:0;}
}

@-webkit-keyframes pulse-dot {
    0%{transform:scale(.8);}
    50%{transform:scale(1);}
    100%{transform:scale(.8);}
}

@keyframes pulse-dot {
    0%{transform:scale(.8);}
    50%{transform:scale(1);}
    100%{transform:scale(.8);}
}

@-webkit-keyframes open {
    0%{opacity:0;transform:translateY(20px);}
    100%{opacity:1;transform:translateY(0);}
}

@keyframes open {
    0%{opacity:0;transform:translateY(20px);}
    100%{opacity:1;transform:translateY(0);}
}

/* closing animation */
@-webkit-keyframes close {
    0%{opacity:1;}
    100%{opacity:0;}
}
@keyframes close {
    0%{opacity:1;}
    100%{opacity:0;}
} 
/* end  */

.mx20 {
    margin-top: 10rem;
    margin-bottom: 20rem;
}
}