/* 공통 */
.flex { display: flex; flex-wrap: wrap; }
.left-tit { width: 400px; }
.right-content { width: calc(100% - 400px); padding: 60px 0 0 20px; }
@media (max-width: 1180px) {
    .flex { display: block; }
    .left-tit { width: 100%; }
    .right-content { width: 100%; padding: 0 0 calc(100vw * (80 / 1180)) 0; }
}
@media (max-width: 767px) {
    .right-content { padding:0; }
}

/* ci */
.ci { margin: 120px 0 200px; }
.ci .right-content { max-width: 1220px; }
.ci .right-content .txt { margin: 40px 0 60px; }
.ci .right-content .btn-wrap { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 20px; }
.ci .right-content .btn-wrap .btn-down { color: #E61E15; }

.appliction { margin-bottom: 200px; }
.appliction .txt { margin-bottom: 80px; }
.small-title { display: block; margin-bottom: 40px; color: #191919; font-size: 20px; font-weight: 700; line-height: 1; }
.appliction .inner { margin-bottom: 100px; }
.appliction .inner:last-child { margin-bottom: 0; }
.appliction .inner ul { display: grid; gap: 40px 40px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
.appliction .inner ul:nth-of-type(2) { margin-top: 40px; }
.appliction .inner ul em { display: block; margin-top: 20px; color: #333; text-align: center; font-size: 18px; font-style: normal; font-weight: 400; line-height: 1; }

.color .right-content ol { display: grid; gap:75px; grid-template-columns: repeat(5, 1fr); grid-auto-rows: auto; }
.color .right-content ol li .color-shape { display: block; width: 184px; height: 209px; clip-path: polygon(0 50%, 100% 0%, 100% 50%, 0% 100%); }
.color .right-content ol li .color-shape img { width: 100%; height: 100%; object-fit: cover; }
.color .right-content ol li strong { display: block; margin-top: 40px; color: #191919; font-size: 20px; font-weight: 700; line-height: 1.4; }
.color .right-content ol li p { margin-top: 25px; color: #333; font-size: 18px; font-weight: 400; line-height: 1.6; }
@media (max-width: 1180px) {
    .ci { margin: calc(100vw * (120 / 1180)) 0 calc(100vw * (200 / 1180)); }
    .ci .right-content .txt { margin: calc(100vw * (40 / 1180)) 0 calc(100vw * (55 / 1180)); }
    .ci .right-content .btn-wrap { gap: calc(100vw * (20 / 1180)); }

    .appliction { margin-bottom: calc(100vw * (200 / 1180)); }
    .appliction .txt { margin: calc(100vw * (-40 / 1180)) 0 calc(100vw * (80 / 1180)); }
    .small-title { margin-bottom: calc(100vw * (40 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .appliction .inner { margin-bottom: calc(100vw * (100 / 1180)); }
    .appliction .inner ul { gap: calc(100vw * (40 / 1180)) calc(100vw * (24 / 1180)); grid-template-columns: repeat(3, 1fr); }
    .appliction .inner ul em { margin-top: calc(100vw * (20 / 1180)); font-size: calc(100vw * (18 / 1180)); }

    .color .right-content ol { gap:calc(100vw * (40 / 1180)); grid-template-columns: repeat(5, 1fr); }
    .color .right-content ol li .color-shape { width: calc(100vw * (184 / 1180)); height: calc(100vw * (209 / 1180)); }
    .color .right-content ol li strong { margin-top: calc(100vw * (40 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .color .right-content ol li p { margin-top: calc(100vw * (25 / 1180)); font-size: calc(100vw * (18 / 1180)); }
}
@media (max-width: 767px) {
    .display-none { display: none; }
    .ci { margin: calc(100vw * (100 / 767)) 0 calc(100vw * (200 / 767)); }
    .ci .right-content { margin-top: calc(100vw * (-20 / 767));  } 
    .ci .right-content .txt { margin: calc(100vw * (60 / 767)) 0 calc(100vw * (72 / 767)); }
    .ci .right-content .btn-wrap { flex-wrap: wrap; gap: calc(100vw * (32 / 767)); }
    .ci .right-content .btn-wrap .btn { width: 100%; }
    .ci .right-content .btn-wrap .btn span { display: block; width: 100%; text-align: left; }

    .appliction { margin-bottom: calc(100vw * (200 / 767)); }
    .appliction .txt { margin: calc(100vw * (-40 / 767)) 0 calc(100vw * (100 / 767)); }
    .small-title { margin-bottom: calc(100vw * (60 / 767)); font-size: calc(100vw * (32 / 767)); }
    .appliction .inner { margin-bottom: calc(100vw * (200 / 767)); }
    .appliction .inner ul { gap: calc(100vw * (80 / 767)) calc(100vw * (20 / 767)); grid-template-columns: repeat(2, 1fr); }
    .appliction .inner ul em { margin-top: calc(100vw * (30 / 767)); font-size: calc(100vw * (28 / 767)); }

    .color .right-content ol { gap: calc(100vw * (126 / 767)) calc(100vw * (80 / 767)); grid-template-columns: repeat(2, 1fr); }
    .color .right-content ol li .color-shape { width: calc(100vw * (219 / 767)); height: calc(100vw * (249 / 767)); }
    .color .right-content ol li strong { margin-top: calc(100vw * (40 / 767)); font-size: calc(100vw * (32 / 767)); }
    .color .right-content ol li p { margin-top: calc(100vw * (25 / 767)); font-size: calc(100vw * (28 / 767)); }

}

/* company */
.company { margin: 120px 0 200px; }
.company .flex { justify-content: space-between; }
.company .sub-title p { margin-top: 40px; }
.company .right-content { max-width: 1146px; }
.company .right-content ol { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
.company .right-content ol li { padding: 60px 37px; text-align: center; }
.company .right-content ol li:last-child { padding-left: 0; padding-right: 0; }
.company .right-content ol li .ic { display: block; margin: 0 auto; width: 120px; height: 120px; }
.company .right-content ol li .ic img { width: 100%; height: 100%; object-fit: cover; }
.company .right-content ol li strong { display: block; margin-top: 54px; color: #191919; font-size: 24px; font-weight: 700; line-height: 1; }
.company .right-content ol li p { margin-top: 15px; color: #333; font-size: 18px; font-weight: 400; line-height: 1.6; word-break: break-word; }

.vision { position: relative; }
.vision-txt-wrap { position: relative; height: 100vh; }
.vision .vision-txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.vision .vision-txt h2 { height: 144px; overflow: hidden;}
.vision .vision-txt h2 span { display: inline-block; width: 100%; color: #FFF; font-family: Red Hat Display; font-family: 'Red Hat Display', sans-serif; font-size: 120px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.vision .vision-txt h2:last-child span { position: relative; }
.vision .vision-txt h2:last-child span::after { 
    content: "";     
    width: 57px; 
    height: 83px;     
    background: #E61E15; 
    clip-path: polygon(50% 0, 100% 0, 50% 100%, 0% 100%); 
    position: absolute;
    top: 50%;
    right: 322px;
    bottom: 0;
    transform: translateY(-50%); }
.vision .bg { height: 100%; width: 100%; overflow: hidden; }
.vision .bg img { width: 100%; height: 100%; object-fit: cover; }

.partners { margin: 200px 0; overflow: hidden; }
.partners .partners-logo { position: relative; height: 170px; }
.partners .partners-logo>div { height: 100%; position: absolute; }
.partners .partners-logo>div span { width: 240px; height: 170px; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-right: 64px; }
.partners .partners-logo>div span img { max-width: 100%; }

.awards { width: 100%; }
.awards .tab-title { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; }
.awards .tab-title h2 a { position: relative; display: flex; align-items: center; justify-content: center; color: #9A9A9A; padding: 0 20px; height: 50px; font-size: 20px; font-weight: 600; line-height: 1; background: #F8F8F8; }
.awards .tab-title h2.on a { background: #191919; color:#fff; text-wrap: nowrap; }
.awards .tab-title h2.on a::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; background: #fff; clip-path: polygon(100% 100%, 100% 0, 0% 100%); }
.awards .tab-content { padding: 0; margin-top: 60px; }
.awards .tab-content li { display: none; }
.awards .tab-content li.on { display: block; }
.awards .tab-content .btn-wrap { text-align: center; padding-top: 90px; }
.awards .tab-content .btn-wrap .btn { border: 1px solid #E61E15; background: transparent; cursor: pointer; font-size: 0; }
.awards .tab-content .btn-wrap .btn::before { content: "더보기"; font-size: 18px; color: #E61E15; }
.awards .tab-content .btn-wrap .btn span { position: relative; margin-left: 10px; width: 16px; height: 16px; padding: 0; }
.awards .tab-content .btn-wrap .btn span::after { 
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%,-50%);
    width: 16px; 
    height: 2px; 
    background: #E61E15; 
    transition: transform .2s;
}
.awards .tab-content .btn-wrap .btn span::before {
    content: "";     
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-180deg);      
    width: 2px; 
    height: 16px; 
    background: #E61E15; 
    transition: transform .2s;
}
.awards .tab-content .btn-wrap .btn.close span::before { transform: translate(-50%,-50%) rotate(-90deg); }
.awards .tab-content .btn-wrap .btn.close::before { content: "숨기기"; font-size: 18px; }

@media (min-width: 1181px) {
    .awards .tab-content .btn-wrap .btn:hover { background: #E61E15; border-color:#E61E15; }
    .awards .tab-content .btn-wrap .btn:hover::before { color:#fff; }
    .awards .tab-content .btn-wrap .btn:hover span::after { background: #fff; }
    .awards .tab-content .btn-wrap .btn:hover span::before { background: #fff; }
}

.awards .certification-wrap .tab-content ul { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: auto; gap: 45px 19px; width: 100%; }
.awards .certification-wrap .tab-content ul li { width: 100%; text-align: center; }
.awards .certification-wrap .tab-content ul li .img-box { background: #F6F6F6; padding: 34px 0; }
.awards .certification-wrap .tab-content ul li .img { display: block; margin: 0 auto; width: 164px; height: 229px; }
.awards .certification-wrap .tab-content ul li .img img { width: 100%; height: 100%; object-fit: cover; }
.awards .certification-wrap .tab-content ul li em { display: block; color: #333; font-size: 20px; font-style: normal; font-weight: 400; line-height: 1.5; background: #fff; padding-top: 15px; }

.patent-wrap { margin-top: 200px; }
.patent-wrap .tab-content ul { border-top: 2px solid #333; }
.patent-wrap .tab-content ul li { flex-wrap: nowrap; height: 80px; border-bottom: 1px solid #C7C7C7; }
.patent-wrap .tab-content ul li.on { display: flex; }
.patent-wrap .tab-content ul li p { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; font-size: 18px; }
.patent-wrap .tab-content ul li:nth-child(1) { height: 60px; }
.patent-wrap .tab-content ul li:nth-child(1) span { color: #191919; text-align: center; font-size: 20px; font-weight: 600; line-height: 1;  }
.patent-wrap .tab-content ul li p:nth-child(1) { width: 40%; }
.patent-wrap .tab-content ul li p:nth-child(2),
.patent-wrap .tab-content ul li p:nth-child(3),
.patent-wrap .tab-content ul li p:nth-child(4) { width: 20%; }

.program-table.tab-content ul li p:nth-child(1),
.program-table.tab-content ul li p:nth-child(2),
.program-table.tab-content ul li p:nth-child(3) { width: 27%; line-height: 1.2; }
.program-table.tab-content ul li p:nth-child(4) { width: 19%; line-height: 1.2; }

.program-table.tab-content ul li p:nth-child(3) span { width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; }
.program-table.tab-content ul li p:nth-child(3) em { display: block; width: 50%; padding: 0 15px; text-align: center; font-style: normal; }
@media (max-width: 1700px) {
    .vision .vision-txt h2 { height: calc(100vw * (144 / 1700)); }
    .vision .vision-txt h2 span { font-size: calc(100vw * (120 / 1700)); }
    .vision .vision-txt h2:last-child span::after { width: calc(100vw * (57 / 1700)); height: calc(100vw * (83 / 1700)); right: calc(100vw * (322 / 1700)); }
}
@media (max-width: 1180px) {
    .company { margin: calc(100vw * (120 / 1180)) 0 calc(100vw * (200 / 1180)); }
    .company .sub-title p { margin-top: calc(100vw * (40 / 1180)); max-width: 520px; }
    .company .right-content { max-width: 100%; }
    .company .right-content ol li { padding: calc(100vw * (46 / 1180)) calc(100vw * (64 / 1180)) 0; }
    .company .right-content ol li:first-child { margin-bottom: calc(100vw * (58 / 1180)); }
    .company .right-content ol li .ic { width: calc(100vw * (120 / 1180)); height: calc(100vw * (120 / 1180)); }
    .company .right-content ol li strong { margin-top: calc(100vw * (54 / 1180)); font-size: calc(100vw * (24 / 1180)); }
    .company .right-content ol li p { margin-top: calc(100vw * (15 / 1180)); font-size: calc(100vw * (18 / 1180)); }

    .vision-txt-wrap { height: calc(100vw * (626 / 1180)); }
    .vision .vision-txt h2 { height: calc(100vw * (84 / 1180)); }
    .vision .vision-txt h2 span { font-size: calc(100vw * (70 / 1180)); }
    .vision .vision-txt h2:last-child span::after { width: calc(100vw * (33 / 1180)); height: calc(100vw * (49 / 1180)); right: calc(100vw * (180 / 1180)); }

    .partners { margin: calc(100vw * (200 / 1180)) 0; }
    .partners .partners-logo { height: calc(100vw * (170 / 1180)); }
    .partners .partners-logo>div span { width: calc(100vw * (240 / 1180)); height: calc(100vw * (170 / 1180)); margin-right: calc(100vw * (64 / 1180)); }

    .awards .tab-title { gap: calc(100vw * (16 / 1180)); }
    .awards .tab-title h2 a { padding: 0 calc(100vw * (20 / 1180)); height: calc(100vw * (50 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .awards .tab-title h2.on a::after { width: calc(100vw * (15 / 1180)); height: calc(100vw * (15 / 1180)); }
    .awards .tab-content { margin-top: calc(100vw * (60 / 1180)); }
    .awards .tab-content .btn-wrap { padding-top: calc(100vw * (60 / 1180)); }
    .awards .tab-content .btn-wrap .btn::before { font-size: calc(100vw * (18 / 1180)); }
    .awards .tab-content .btn-wrap .btn span { margin-left: calc(100vw * (6 / 1180)); width: calc(100vw * (16 / 1180)); height: calc(100vw * (16 / 1180)); }
    .awards .tab-content .btn-wrap .btn span::after { width: 100%; height: 2px; }
    .awards .tab-content .btn-wrap .btn span::before { width: 2px; height: 100%; }
    .awards .tab-content .btn-wrap .btn.close::before { font-size: calc(100vw * (18 / 1180)); }

    .awards .certification-wrap .tab-content ul { display: flex; flex-wrap: wrap; grid-template-columns: repeat(3, 1fr); gap: calc(100vw * (45 / 1180)) calc(100vw * (24 / 1180)); overflow: hidden; }
    .awards .certification-wrap .tab-content ul li { width: calc(100%/3 - calc(100vw * (16 / 1180))); }
    .awards .certification-wrap .tab-content ul li .img-box { padding: calc(100vw * (34 / 1180)) 0; }
    .awards .certification-wrap .tab-content ul li .img { width: calc(100vw * (164 / 1180)); height: calc(100vw * (229 / 1180)); }
    .awards .certification-wrap .tab-content ul li em { font-size: calc(100vw * (20 / 1180)); padding-top: calc(100vw * (15 / 1180)); }

    .patent-wrap { margin-top: calc(100vw * (200 / 1180)); }
    .patent-wrap .tab-content ul li { height: calc(100vw * (80 / 1180)); }
    .patent-wrap .tab-content ul li p { font-size: calc(100vw * (18 / 1180)); }
    .patent-wrap .tab-content ul li:nth-child(1) { height: calc(100vw * (60 / 1180)); }
    .patent-wrap .tab-content ul li:nth-child(1) span { font-size: calc(100vw * (20 / 1180)); }
    
    .program-table.tab-content ul li p:nth-child(3) em { padding: 0 calc(100vw * (10 / 1180)); }
}
@media (max-width: 767px) {
    .company { margin: calc(100vw * (100 / 767)) 0 calc(100vw * (200 / 767)); }
    .company .sub-title p { margin-top: calc(100vw * (40 / 767)); max-width: 100%; }
    .company .right-content ol { display: block; }
    .company .right-content ol li { position: relative; padding: calc(100vw * (50 / 767)) 0; width: 100%; border-bottom: 1px solid #EAEAEA; }
    .company .right-content ol li:first-child { margin-bottom: 0; border-top: 1px solid #EAEAEA; }
    .company .right-content ol li .ic { position: absolute; top: calc(100vw * (50 / 767)); left: 0; width: calc(100vw * (80 / 767)); height: calc(100vw * (80 / 767)); }
    .company .right-content ol li strong { padding-left: calc(100vw * (120 / 767)); margin-top: 0; font-size: calc(100vw * (32 / 767)); text-align: left; }
    .company .right-content ol li p { padding-left: calc(100vw * (120 / 767)); margin-top: calc(100vw * (16 / 767)); font-size: calc(100vw * (28 / 767)); text-align: left; }

    .vision-txt-wrap { height: calc(100vw * (536 / 767)); }    
    .vision .vision-txt h2 { height: calc(100vw * (84 / 767)); }
    .vision .vision-txt h2 span { font-size: calc(100vw * (70 / 767)); }
    .vision .vision-txt h2.mo { height: calc(100vw * (172 / 767)); }
    .vision .vision-txt h2.mo span::after { display: none; }
    .vision .vision-txt h2:last-child span { padding-right: calc(100vw * (34 / 767)); }
    .vision .vision-txt h2:last-child span::after { width: calc(100vw * (33 / 767)); height: calc(100vw * (49 / 767)); right: 0; }

    .partners { margin: calc(100vw * (200 / 767)) 0; }
    .partners .partners-logo { height: calc(100vw * (150 / 767)); }
    .partners .partners-logo>div span { width: calc(100vw * (200 / 767)); height: calc(100vw * (150 / 767)); margin-right: calc(100vw * (64 / 767)); }

    .awards .tab-title { gap: calc(100vw * (24 / 767)); }
    .awards .tab-title h2 a { padding: 0 calc(100vw * (40 / 767)); height: calc(100vw * (72 / 767)); font-size: calc(100vw * (32 / 767)); text-wrap: nowrap; }
    .awards .tab-title h2.on a::after { width: calc(100vw * (15 / 767)); height: calc(100vw * (15 / 767)); }
    .awards .tab-content { margin-top: calc(100vw * (60 / 767)); }
    .awards .tab-content .btn-wrap { padding-top: calc(100vw * (72 / 767)); }
    .awards .tab-content .btn-wrap .btn::before { font-size: calc(100vw * (32 / 767)); }
    .awards .tab-content .btn-wrap .btn span { margin-left: calc(100vw * (10 / 767)); width: calc(100vw * (22 / 767)); height: calc(100vw * (22 / 767)); }
    .awards .tab-content .btn-wrap .btn.close::before { font-size: calc(100vw * (32 / 767)); }

    .awards .certification-wrap .tab-content ul { grid-template-columns: repeat(2, 1fr); gap: calc(100vw * (80 / 767)) calc(100vw * (20 / 767)); }
    .awards .certification-wrap .tab-content ul li { width: calc(100%/2 - calc(100vw * (10 / 767))); }
    .awards .certification-wrap .tab-content ul li .img-box { padding: calc(100vw * (34 / 767)) 0; }
    .awards .certification-wrap .tab-content ul li .img { width: calc(100vw * (164 / 767)); height: calc(100vw * (229 / 767)); }
    .awards .certification-wrap .tab-content ul li em { font-size: calc(100vw * (28 / 767)); padding-top: calc(100vw * (20 / 767)); white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }

    .patent-wrap { margin-top: calc(100vw * (200 / 767)); }
    .patent-wrap .tab-content ul li { height: auto; padding: calc(100vw * (40 / 767)) 0; }
    .patent-wrap .tab-content ul li.on { display: block; }
    .patent-wrap .tab-content ul li p { position: relative; align-items: flex-start; justify-content: flex-start; font-size: calc(100vw * (28 / 767)); margin-bottom: calc(100vw * (24 / 767)); }
    .patent-wrap .tab-content ul li p::before { font-weight: 600; width: calc(100vw * (100 / 767)); margin-right: calc(100vw * (50 / 767)); padding-top: calc(100vw * (4 / 767)); }
    .patent-wrap .tab-content ul li p:last-child { margin-bottom: 0; }
    .patent-wrap .tab-content ul li:nth-child(1) { display: none; }   
    .patent-wrap .tab-content ul li p:nth-child(1) { width: 100%; }
    .patent-wrap .tab-content ul li p:nth-child(1)::before { content: "명칭"; }
    .patent-wrap .tab-content ul li p:nth-child(2) { width: 100%; }
    .patent-wrap .tab-content ul li p:nth-child(2)::before { content: "출원분류"; }
    .patent-wrap .tab-content ul li p:nth-child(3) { width: 100%; }
    .patent-wrap .tab-content ul li p:nth-child(3)::before { content: "등록일자"; }
    .patent-wrap .tab-content ul li p:nth-child(4) { width: 100%; }
    .patent-wrap .tab-content ul li p:nth-child(4)::before { content: "등록번호"; }
    .patent-wrap .tab-content ul li p span { width:calc(100% - calc(100vw * (100 / 767))); line-height: 1.32; }

    .program-table.tab-content ul li p:nth-child(3) span { justify-content: flex-start; }
    .program-table.tab-content ul li p:nth-child(3) em { padding: 0 calc(100vw * (10 / 767)) 0 0; text-align: left;}
    .program-table.tab-content ul li p:nth-child(3) em:first-child { width: auto; border-right: 1px solid #C7C7C7; margin-right: calc(100vw * (10 / 767)); }
}

/* history */
.history { position: relative; }
.about-history { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; position: relative; padding-top: 120px; }
.about-history .history-title { width: calc(100% - 842px); }
.history-title .year { top: 120px; width: 450px; }
.history-title .year.fix { position: fixed; z-index: 1; }
.history-title .year.bottom { position: absolute; top: auto; bottom: 0; }
.history-title .text-year { display: block; color: #000; font-size: 180px; line-height: 1; font-weight: 700; word-break: keep-all; }
.history-title strong { display: block; margin-top: 56px; color: #191919; font-size: 56px; font-weight: 700; line-height: 1.32; }
.history-title em { display: block; max-width: 420px; margin-top:40px; color: #333; font-size: 20px; font-weight: 400; line-height: 1.6; font-style: normal; }
.history-title .year b { position: relative; display: inline-block; padding-right: 13px; margin-bottom: 30px; color: #333; font-size: 20px; font-weight: 700; line-height: 1; }
.history-title .year b:after {     
    content: "";
    background: url(../images/sub-title-ic.png)no-repeat;
    background-size: contain;
    width: 8px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%); 
}
.history-wrap { position: relative; width: 842px }
.history-cont { position: relative; margin-top:-160px }
.history-cont .inner:first-child { padding-top: 235px; }
.history-cont .inner { padding-top: 200px; position: relative; }
.history-cont .inner:last-child { padding-bottom: 0; }
.history-cont .inner>.img { position: relative; height:370px; margin-bottom:100px; }  
.history-cont .inner>.img:before { content: ""; width: 80px; height: 80px; position: absolute; top: -1px; left: -1px; background: #fff; clip-path: polygon(100% 0, 0% 100%, 0 0); }
.history-cont .inner>.img:after { content: ""; width: 80px; height: 80px; position: absolute; bottom: -1px; right: -1px; background: #fff; clip-path: polygon(100% 0, 0% 100%, 100% 100%); }
.history-cont .inner>.img img { width:100%; height:100%; object-fit:cover; }  
.history-cont .inner li { display: flex; flex-wrap: nowrap; align-items: flex-start; margin-bottom:38px; } 
.history-cont .inner li:last-child { margin-bottom: 0; }
.history-cont .inner li span { width:30px; color: #191919; font-size: 20px; font-weight: 700; line-height: 1.6; text-wrap: nowrap; }
.history-cont .inner li .htxt-box { width: calc(100% - 30px); }
.history-cont .inner li p {  padding-left: 80px; color: #333; font-size: 20px; font-weight: 400; line-height: 1.6; }
.history-cont .inner li p:nth-child(2) { margin-top: 12px; }

.history aside { position: absolute; left: 0; top: -115px; background: transparent; border-top: none; width: 100%; height: 80px; z-index: 1; transition: .2s linear; }
.sub .history aside.fix.down { top: 80px; z-index: 2; }
.history aside ul { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 14px; height:100%; }
.history aside ul li a { position: relative; display: block; padding: 20px 40px; opacity: 0.6; }
.history aside ul li a:before { content: ""; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; background: #fff; }
.history aside ul li p { text-align: center; font-size: 18px; font-weight: 700; color: #fff; }
.history aside ul li strong,
.history aside ul li em { display: none; }
.history aside ul li a.on { opacity: 1; }
.history aside ul li a.on:before { height:4px }
.history aside.fix { position: fixed; top: 0; background: #ccc;  margin-top: 0; background: #fff; border-top: 1px solid #EDEDED; color:#000; }
.history aside.fix ul li p { color:#000; }
.history aside.fix ul li a:before { background: #000; }

@media (max-width: 1700px) { 
    .history-title .year { width: calc(100vw * (450 / 1700)); }
    .about-history .history-title { width: calc(100% - calc(100vw * (842 / 1700))); }
    .history-wrap { width: calc(100vw * (842 / 1700)); }
}
@media (max-width: 1180px) { 
    .about-history { padding-top: calc(100vw * (100 / 1180)); }
    .history-title .year { top: calc(100vw * (100 / 1180)); width: calc(100vw * (375 / 1180)); }
    .history-title .text-year { font-size: calc(100vw * (100 / 1180)); }
    .history-title strong { margin-top: calc(100vw * (40 / 1180)); font-size: calc(100vw * (48 / 1180)); }
    .history-title em { max-width: 100%; margin-top:calc(100vw * (30 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .history-title .year b { padding-right: calc(100vw * (13 / 1180)); margin-bottom: calc(100vw * (30 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .history-title .year b:after { width: calc(100vw * (8 / 1180)); height: calc(100vw * (16 / 1180)); }
    .about-history .history-title { width: calc(100% - calc(100vw * (600 / 1180))); }
    .history-wrap { width: calc(100vw * (600 / 1180)) }
    .history-cont { margin-top:calc(100vw * (-160 / 1180)) }
    .history-cont .inner:first-child { padding-top: calc(100vw * (235 / 1180)); }
    .history-cont .inner { padding-top: calc(100vw * (200 / 1180)); }
    .history-cont .inner>.img { height:calc(100vw * (262 / 1180)); margin-bottom: calc(100vw * (80 / 1180)); }  
    .history-cont .inner>.img:before { width: calc(100vw * (60 / 1180)); height: calc(100vw * (60 / 1180)); }
    .history-cont .inner>.img:after { width: calc(100vw * (60 / 1180)); height: calc(100vw * (60 / 1180)); } 
    .history-cont .inner li { margin-bottom:calc(100vw * (38 / 1180)); } 
    .history-cont .inner li span { width: calc(100vw * (30 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .history-cont .inner li .htxt-box { width: calc(100% - calc(100vw * (30 / 1180))); }
    .history-cont .inner li p { padding-left: calc(100vw * (60 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .history-cont .inner li p:nth-child(2) { margin-top: calc(100vw * (12 / 1180)); }
    .history aside { top: calc(100vw * (-80 / 1180)); height: calc(100vw * (80 / 1180)); }
    .sub .history aside.fix.down { top: calc(100vw * (80 / 1180)); }
    .history aside ul { gap: calc(100vw * (14 / 1180)); }
    .history aside ul li a { width: calc(100vw * (245 / 1180)); padding: calc(100vw * (18 / 1180)) 0;  }
    .history aside ul li a:before { height: 2px; }
    .history aside ul li p { font-size: calc(100vw * (18 / 1180)); }
}
@media (max-width: 767px) { 
    .about-history { display: block; padding-top: calc(100vw * (100 / 767)); }
    .history-title .year.fix { position: relative; }
    .history-title .year { width: 100%; top:auto; }
    .history-title .text-year { font-size: calc(100vw * (140 / 767)); }
    .history-title strong { margin-top: calc(100vw * (10 / 767)); font-size: calc(100vw * (48 / 767)); }
    .history-title em { max-width: 100%; margin:calc(100vw * (40 / 767)) 0 calc(100vw * (80 / 767)); font-size: calc(100vw * (32 / 767)); }
    .history-title .year b { display: none; }
    .about-history .history-title { width: 100%; }
    .history-wrap { max-width: 100%; width: 100%; }
    .history-cont { margin-top: calc(100vw * (-280 / 767)) }
    .history-cont .inner:first-child { padding-top: calc(100vw * (280 / 767)); }
    .history-cont .inner { padding-top: calc(100vw * (200 / 767)); }
    .history-cont .inner>.img { height:calc(100vw * (295 / 767)); margin-bottom: calc(100vw * (80 / 767)); }  
    .history-cont .inner>.img:before { width: calc(100vw * (65 / 767)); height: calc(100vw * (65 / 767)); }
    .history-cont .inner>.img:after { width: calc(100vw * (65 / 767)); height: calc(100vw * (65 / 767)); } 
    .history-cont .inner li { margin-bottom:calc(100vw * (67 / 767)); } 
    .history-cont .inner li span { width: calc(100vw * (40 / 767)); font-size: calc(100vw * (32 / 767)); }
    .history-cont .inner li .htxt-box { width: calc(100% - calc(100vw * (40 / 767))); }
    .history-cont .inner li p { padding-left: calc(100vw * (50 / 767)); font-size: calc(100vw * (32 / 767)); }
    .history-cont .inner li p:nth-child(2) { margin-top: calc(100vw * (24 / 767)); }
    .history aside { top: calc(100vw * (-112 / 767)); height: calc(100vw * (100 / 767)); }
    .history aside.fix { z-index: 2; }
    .sub .history aside.fix.down { top: calc(100vw * (112 / 767)); }
    .history aside ul { gap: calc(100vw * (28 / 767)); }
    .history aside ul li a { width: auto; padding: calc(100vw * (16 / 767)) 0;  }
    .history aside ul li p { font-size: calc(100vw * (28 / 767)); }
}

/* tech */
.tech section { overflow: hidden; }
.tech .img { text-align: center; }
.tech .img img { width: 100%; height: 100%; object-fit: contain; }
.tech .img-box { margin-top: 100px; text-align: center; }
.tech-core { margin: 120px 0 200px; }
.xr-banner ul { display: flex; flex-wrap: nowrap; align-items: flex-start; }
.xr-banner ul li { position: relative; height: 894px; transition: all .2s; overflow: hidden; }
.xr-banner ul li .txt-box { position: absolute; max-width: 580px; width: 100%; height: 100%; padding: 280px 0 0 83px; z-index: 1; color:#fff; transition: all .2s; }
.xr-banner ul li .txt-box strong { display: block; font-size: 32px; font-weight: 700; line-height: 1.5; }
.xr-banner ul li .txt-box .ic { display: block; width: 48px; height: 48px; margin-top: 30px; background: url(../images/xr-banner-ic.svg)no-repeat; background-size: contain; opacity: 1; }
.xr-banner ul li .txt-box p { opacity: 0; margin-top: 30px; font-size: 20px; font-weight: 400; line-height: 1.6; transition: opacity .2s; }
.xr-banner ul li .txt-box p .tab { display: none; }
.xr-banner ul li .img { position: relative; width: 100%; height: 100%; }
.xr-banner ul li .img .tab { display: none; }
.xr-banner ul li .img img { width: 100%; height: 100%; object-fit: cover; }
.xr-banner ul li .img::before { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.9; background: linear-gradient(90deg, #000 0%, rgba(10, 10, 10, 0.60) 36.98%, rgba(25, 25, 25, 0.00) 100%); }
@media (min-width: 1181px) { 
    .xr-banner ul li.on { width: 922px; }
    .xr-banner ul li:not(.on) { width: calc(calc(100% - 922px)/2); }
    .xr-banner ul li.on .txt-box { padding-left: 140px; }
    .xr-banner ul li.on .txt-box p { opacity: .8; }
    .xr-banner ul li.on .txt-box .ic { opacity: 0; height: 0; }
}

.education-training { margin: 200px 0 130px; }
.education-training .ic-title { position: relative; display: block; padding-left: 21px; margin: 130px 0 50px; color: #191919; font-size: 24px; font-weight: 700; line-height: 1; }
.education-training .ic-title::before {
    content: "";
    background: url(../images/education-title-ic.svg)no-repeat;
    background-size: contain;
    width: 13px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); 
}
.tech .title { padding: 40px 50px; background: #191919; }
.tech .title em { display: block; margin-bottom: 14px; color: #9A9A9A; font-size: 20px; font-weight: 500; line-height: 1; font-style: normal; }
.tech .title strong { display: block; color: #FFF; font-size: 28px; font-weight: 700; line-height: 1.32; }
.tech .cont { position: relative; padding: 55px 50px; background: #F6F6F6; overflow: hidden; }
.tech .cont p { color: #333; font-size: 20px; font-weight: 400; line-height: 1.6; opacity: 0.8; }
.tech .cont .img { margin-top: 44px; }

.system-box ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 0 40px; }
.system-box .title { height: 151px; }
.system-box .cont { position: relative; height: 607px; }
.system-box .cont .img { margin-top: 0; width: calc(100% - 110px); height: 385px; position: absolute; left: 55px; bottom: 50px; background: #fff; }
.system-box .cont ol li { display: flex; flex-wrap: nowrap; }
.system-box .cont ol li span { display: block; width: 58px; color: #E61E15; font-size: 20px; font-weight: 700; line-height: 1.6; }
.system-box .cont ol li p { width: calc(100% - 58px); padding-left: 15px; }
.technology-box ol { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 22px 20px;  }
.technology-box ol li { display: flex; flex-wrap: nowrap; padding: 30px 50px; align-items: center; gap: 20px; background: #F6F6F6; font-size: 20px; }
.technology-box ol li span { display: block; color: #E61E15; font-family: Red Hat Display; font-family: 'Red Hat Display', sans-serif; font-size: 16px; font-weight: 700; line-height: 1; text-wrap: nowrap; }

.technical-wrap { margin-bottom: 200px; }
.technical-wrap .s-title { display: flex; flex-wrap: nowrap; align-items: flex-start; }
.technical-wrap .s-title strong { display: block; width: 175px; color: #191919; font-size: 24px; font-weight: 700; line-height: 1; }
.technical-wrap .s-title p { width: calc(100% - 175px); color: #333; font-size: 20px; font-weight: 400; line-height: 1.6; }
.technical-wrap ul { margin-top: 100px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; gap: 0 35px; }
.technical-wrap ul li { padding: 65px 0; background: #F6F6F6; }
.technical-wrap ul li .ic { display: block; width: 80px; height: 80px; margin: 0 auto; }
.technical-wrap ul li em { display: block; margin-top: 12px; color: #191919; text-align: center; font-size: 20px; font-style: normal; font-weight: 400; line-height: 1; }

.metaverse-box ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 0 40px; }
.metaverse-box ul li { position: relative; overflow: hidden; }
.metaverse-box ul>li:nth-child(2) .cont .img { width: calc(100% - 110px); margin-top: 0; position: absolute; left: 55px; bottom: 50px; }
.metaverse-box ul>li:nth-child(2) ol { padding-right: 240px; }
.metaverse-box ul li .title { display: flex; flex-wrap: nowrap; align-items: center; height: 117px; }
.metaverse-box ul li .cont { height: 563px; }
.metaverse-box ul li .cont>p { margin: 30px 0 18px; }
.metaverse-box ul li .cont em { padding-left: 3px; color: #191919; font-size: 18px; font-style: normal; font-weight: 600; line-height: 1; }
.metaverse-box ul li .cont .flex { display: flex; flex-wrap: nowrap; align-items: center; gap:12px }
.metaverse-box ul li .cont .flex .img { margin-top: 0; }
.metaverse-box ul li .cont .logo-img { width: 218px; height: 36px; }
.metaverse-box ul li .cont .img-box { width: calc(100% - 110px); margin-top: 0; position: absolute; left: 55px; bottom: 50px; } 
.metaverse-box ul li .cont .img,.metaverse-box ul li .cont .img-box li { margin-top: 0; }
.metaverse-box ul li .cont .img img { width:100%; height: 100%; object-fit: contain; }
.metaverse-box ul li .cont .img-box img { width: 100%; height: 100%; object-fit: cover; }
.metaverse-box ul li ol { margin-bottom: 30px; color:#333; }
.metaverse-box ul li ol li { display: flex; flex-wrap: nowrap; color: #333; font-size: 18px; font-weight: 400; line-height: 1.6; }
.metaverse-box ul li ol li span { display: block; margin-right: 2px; }
.metaverse-box ul li .choy-img { width: 280px; height: 492px; position: absolute; right: 0; bottom: 0; }
.metaverse-box ul li .choy-img .img { width: 100%;height: 100%; object-fit: contain; }

@media (max-width: 1700px) { 
    .tech .title { padding: calc(100vw * (40 / 1700)) calc(100vw * (50 / 1700)); }
    
    .xr-banner ul li { height: calc(100vw * (894 / 1700)); }
    .xr-banner ul li .txt-box { padding: calc(100vw * (200 / 1700)) 0 0 calc(100vw * (83 / 1700)); }
    .xr-banner ul li.on { width: calc(100vw * (922 / 1700)); }
    .xr-banner ul li:not(.on) { width: calc(calc(100% - calc(100vw * (922 / 1700)))/2); }
    .xr-banner ul li.on .txt-box { padding-left: calc(100vw * (140 / 1700)); }
    .technical-wrap ul li { padding: calc(100vw * (65 / 1700)) 0; }
    
    .system-box .title { height: calc(100vw * (258 / 1700)); }
    .system-box .cont { height: calc(100vw * (730 / 1700)); }
    .system-box .cont .img { width: calc(100% - calc(100vw * (110 / 1700))); height: calc(100vw * (385 / 1700)); left: calc(100vw * (55 / 1700)); bottom: calc(100vw * (50 / 1700)); }

    .metaverse-box ul li .title { height: calc(100vw * (185 / 1700)); }
    .metaverse-box ul li .cont { height: calc(100vw * (1000 / 1700)); }
    .metaverse-box ul li .cont .img-box { width: calc(100% - calc(100vw * (110 / 1700))); left: calc(100vw * (55 / 1700)); bottom: calc(100vw * (50 / 1700)); }
    .metaverse-box ul>li:nth-child(2) .cont .img { width: calc(100% - calc(100vw * (110 / 1700))); left: calc(100vw * (55 / 1700)); bottom: calc(100vw * (50 / 1700)); }
}

@media (max-width: 1180px) {
    .tech .img-box { margin-top: calc(100vw * (100 / 1180)); }
    .tech-core { margin: calc(100vw * (120 / 1180)) 0 calc(100vw * (200 / 1180)); }
    .xr-banner ul { display:block }  
    .xr-banner ul li { width: 100%; height: calc(100vw * (461 / 1180)); }
    .xr-banner ul li:not(.on), .xr-banner ul li.on { width: 100%; }
    .xr-banner ul li .txt-box { padding: 0 calc(100vw * (80 / 1180)) 0 0; max-width:100%; width: calc(100% - calc(100vw * (100 / 1180))); height: auto; top: 50%; left: calc(100vw * (100 / 1180)); transform: translateY(-50%); }
    .xr-banner ul li.on .txt-box { padding-left: 0; }
    .xr-banner ul li .txt-box strong { font-size: calc(100vw * (32 / 1180)); }
    .xr-banner ul li .txt-box strong br { display: none; }
    .xr-banner ul li .txt-box .ic { display: none; }
    .xr-banner ul li .txt-box p { margin-top: calc(100vw * (30 / 1180)); font-size: calc(100vw * (20 / 1180)); opacity: 1; }
    .xr-banner ul li .txt-box p .pc { display: none; }
    .xr-banner ul li .txt-box p .tab { display: block; }
    .xr-banner ul li .img .pc { display: none; }
    .xr-banner ul li .img .tab { display: block; }

    .education-training { margin: calc(100vw * (200 / 1180)) 0; }
    .education-training .ic-title { padding-left: calc(100vw * (21 / 1180)); margin: calc(100vw * (130 / 1180)) 0 calc(100vw * (50 / 1180)); font-size: calc(100vw * (24 / 1180)); }
    .education-training .ic-title::before { width: calc(100vw * (13 / 1180)); height: calc(100vw * (24 / 1180)); }
    .tech .title { padding: calc(100vw * (40 / 1180)) calc(100vw * (50 / 1180)); }
    .tech .title em { margin-bottom: calc(100vw * (14 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .tech .title strong { font-size: calc(100vw * (28 / 1180)); }
    .tech .cont { padding: calc(100vw * (55 / 1180)) calc(100vw * (50 / 1180)); }
    .tech .cont p { font-size: calc(100vw * (20 / 1180)); }
    .tech .cont .img { margin-top: calc(100vw * (44 / 1180)); }

    .system-box ul { grid-template-columns: repeat(1, 1fr); gap: calc(100vw * (70 / 1180)); }
    .system-box .title { height: auto; }
    .system-box .cont { height: auto; }
    .system-box .cont .img { position: relative; left: 0; bottom: 0; width: 100%; height: calc(100vw * (385 / 1180)); }
    .system-box .cont ol li span { width: calc(100vw * (58 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .system-box .cont ol li p { width: calc(100% - calc(100vw * (58 / 1180))); padding-left: calc(100vw * (15 / 1180)); }
    .technology-box ol { margin-top: calc(100vw * (50 / 1180)); grid-template-columns: repeat(2, 1fr); gap: calc(100vw * (22 / 1180)) calc(100vw * (20 / 1180)); }
    .technology-box ol li { padding: calc(100vw * (30 / 1180)) calc(100vw * (50 / 1180)); gap: calc(100vw * (20 / 1180)); font-size: calc(100vw * (20 / 1180)); }
    .technology-box ol li span { font-size: calc(100vw * (16 / 1180)); }

    .technical-wrap { margin-bottom: calc(100vw * (200 / 1180)); }
    .technical-wrap .s-title strong { width: calc(100vw * (175 / 1180)); font-size: calc(100vw * (24 / 1180)); }
    .technical-wrap .s-title p { width: calc(100% - calc(100vw * (175 / 1180))); font-size: calc(100vw * (20 / 1180)); }
    .technical-wrap ul { margin-top: calc(100vw * (100 / 1180)); grid-template-columns: repeat(3, 1fr); gap: calc(100vw * (31 / 1180)); }
    .technical-wrap ul li { padding: calc(100vw * (65 / 1180)) 0; }
    .technical-wrap ul li .ic { width: calc(100vw * (80 / 1180)); height: calc(100vw * (80 / 1180)); }
    .technical-wrap ul li em { margin-top: calc(100vw * (12 / 1180)); font-size: calc(100vw * (20 / 1180)); }

    .metaverse-box ul { grid-template-columns: repeat(1, 1fr); gap: calc(100vw * (70 / 1180)); }
    .metaverse-box ul>li:nth-child(2) .cont .img { position: relative; width: 100%; left: 0; bottom: 0; margin-top: calc(100vw * (30 / 1180)); }
    .metaverse-box ul>li:nth-child(2) ol { padding-right: calc(100vw * (297 / 1180)); }
    .metaverse-box ul li .title { height: auto; }
    .metaverse-box ul li .cont { height: auto; }
    .metaverse-box ul li .cont>p { margin: calc(100vw * (30 / 1180)) 0 calc(100vw * (18 / 1180)); }
    .metaverse-box ul li .cont em { padding-left: calc(100vw * (3 / 1180)); font-size: calc(100vw * (18 / 1180)); }
    .metaverse-box ul li .cont .flex { gap:calc(100vw * (12 / 1180)) }
    .metaverse-box ul li .cont .logo-img { width: calc(100vw * (218 / 1180)); height: calc(100vw * (36 / 1180)); }
    .metaverse-box ul li .cont .img-box { width: 100%; position: relative; left: 0; bottom: 0; } 
    .metaverse-box ul li .cont .img-box li { width: 50%; }
    .metaverse-box ul li .cont .img-box .img { height: calc(100vw * (274 / 1180)); }
    
    .metaverse-box ul li ol { margin-bottom: calc(100vw * (30 / 1180)); }
    .metaverse-box ul li ol li { font-size: calc(100vw * (18 / 1180)); }
    .metaverse-box ul li ol li span { margin-right: calc(100vw * (2 / 1180)); }
    .metaverse-box ul li .choy-img { width: calc(100vw * (288 / 1180)); height: calc(100vw * (463 / 1180));}
}
@media (max-width: 767px) {
    .tech .img-box { margin-top: calc(100vw * (80 / 767)); }
    .tech-core { margin: calc(100vw * (100 / 767)) 0 calc(100vw * (200 / 767)); }
    .xr-banner ul li { height: calc(100vw * (604 / 767)); }
    .xr-banner ul li .txt-box { width: calc(100vw * (534 / 767)); left: calc(100vw * (80 / 767)); }
    .xr-banner ul li .txt-box strong { font-size: calc(100vw * (36 / 767)); }
    .xr-banner ul li .txt-box p { margin-top: calc(100vw * (30 / 767)); font-size: calc(100vw * (28 / 767)); opacity: 0.8; }
    .xr-banner ul li .img .tab { display: none; }

    .education-training { margin: calc(100vw * (200 / 767)) 0; }
    .education-training h2 br { display: none; }
    .education-training .ic-title { padding-left: calc(100vw * (21 / 767)); margin: calc(100vw * (130 / 767)) 0 calc(100vw * (50 / 767)); font-size: calc(100vw * (32 / 767)); }
    .education-training .ic-title::before { width: calc(100vw * (13 / 767)); height: calc(100vw * (24 / 767)); }
    .tech .title { padding: calc(100vw * (40 / 767)) calc(100vw * (46 / 767)); }
    .tech .title em { margin-bottom: calc(100vw * (14 / 767)); font-size: calc(100vw * (22 / 767)); }
    .tech .title strong { font-size: calc(100vw * (32 / 767)); }
    .tech .cont { padding: calc(100vw * (46 / 767)) calc(100vw * (44 / 767)); }
    .tech .cont p { font-size: calc(100vw * (28 / 767)); }
    .tech .cont .img { margin-top: calc(100vw * (38 / 767)); }

    .system-box ul { gap: calc(100vw * (80 / 767)); }
    .system-box .cont .img { height: calc(100vw * (325 / 767)); }
    .system-box .cont ol li span { width: calc(100vw * (94 / 767)); font-size: calc(100vw * (28 / 767)); }
    .system-box .cont ol li p { width: calc(100% - calc(100vw * (94 / 767))); padding-left: 0; }
    .technology-box ol { margin-top: calc(100vw * (60 / 767)); grid-template-columns: repeat(1, 1fr); gap: calc(100vw * (20 / 767)); }
    .technology-box ol li { padding: calc(100vw * (32 / 767)) calc(100vw * (50 / 767)); gap: calc(100vw * (20 / 767)); font-size: calc(100vw * (28 / 767)); }
    .technology-box ol li span { font-size: calc(100vw * (22 / 767)); }

    .technical-wrap { margin-bottom: calc(100vw * (200 / 767)); }
    .technical-wrap .s-title { margin-top: calc(100vw * (-20 / 767)); display: block; }
    .technical-wrap .s-title strong { width: 100%; font-size: calc(100vw * (32 / 767)); }
    .technical-wrap .s-title p { width: 100%; margin-top: calc(100vw * (16 / 767)); font-size: calc(100vw * (28 / 767)); }
    .technical-wrap ul { margin-top: calc(100vw * (100 / 767)); grid-template-columns: repeat(3, 1fr); gap: calc(100vw * (20 / 767)); }
    .technical-wrap ul li { padding: calc(100vw * (61 / 767)) calc(100vw * (20 / 767)); }
    .technical-wrap ul li .ic { width: calc(100vw * (80 / 767)); height: calc(100vw * (80 / 767)); }
    .technical-wrap ul li em { margin-top: calc(100vw * (12 / 767)); font-size: calc(100vw * (28 / 767)); }

    .metaverse-box ul { grid-template-columns: repeat(1, 1fr); gap: calc(100vw * (80 / 767)); }
    .metaverse-box ul>li:nth-child(2) .cont .img { margin-top: calc(100vw * (36 / 767)); }
    .metaverse-box ul>li:nth-child(2) ol { padding-right: 0; }
    .metaverse-box ul li .cont>p { margin: calc(100vw * (36 / 767)) 0 calc(100vw * (12 / 767)); }
    .metaverse-box ul li .cont em { padding-left: calc(100vw * (3 / 767)); font-size: calc(100vw * (28 / 767)); }
    .metaverse-box ul li .cont .flex { display: block; }
    .metaverse-box ul li .cont .flex span.img { display: block; width: calc(100vw * (218 / 767)); margin-bottom: calc(100vw * (15 / 767)); }
    .metaverse-box ul li .cont .logo-img { width: calc(100vw * (218 / 767)); height: calc(100vw * (36 / 767)); }    
    .metaverse-box ul li .cont .img-box .img { height: auto; }
    .metaverse-box ul li .cont .img-box li { width: 100%; }
    
    .metaverse-box ul li ol { margin-bottom: calc(100vw * (36 / 767)); }
    .metaverse-box ul li ol li { font-size: calc(100vw * (28 / 767)); }
    .metaverse-box ul li ol li span { margin-right: calc(100vw * (2 / 767)); }
    .metaverse-box ul li .choy-img { width: calc(100vw * (288 / 767)); height: calc(100vw * (363 / 767));}
}

/* 다국어 */
:lang(en) .awards .tab-content .btn-wrap .btn::before { content:"VIEW MORE"; }
:lang(en) .awards .tab-content .btn-wrap .btn.close::before { content:"VIEW HIDE"; }
:lang(en) .system-box .title { height: 185px; }
:lang(en) .metaverse-box ul li .title { height: 150px; }
:lang(en) .metaverse-box ul li .cont { height: 625px; }
:lang(en) .technology-box ol li { line-height: 1.4; }
:lang(en) .benefits .benefits-content .scroll .benefits-tab li a strong { line-height: 1.2; }
:lang(en) .benefits .benefits-content .benefits-txt li strong { line-height: 1.4; }

:lang(ja) .awards .tab-content .btn-wrap .btn::before { content:"VIEW MORE"; }
:lang(ja) .awards .tab-content .btn-wrap .btn.close::before { content:"VIEW HIDE"; }
:lang(ja) .system-box .title { height: 185px; }
:lang(ja) .metaverse-box ul li .title { height: 150px; }
:lang(ja) .metaverse-box ul li .cont { height: 625px; }
:lang(ja) .technology-box ol li { padding: 30px; }
@media (min-width: 1181px){
    :lang(en) .xr-banner ul li .txt-box strong { max-width: 580px; }    
    :lang(en) .xr-banner ul li.on .txt-box p { width: 80%; }

    :lang(ja) .xr-banner ul li .txt-box strong { max-width: 580px; }
    :lang(ja) .xr-banner ul li.on .txt-box p { width: 80%; }    
}
@media (max-width: 1700px) {
    :lang(en) .xr-banner ul li { height: calc(100vw * (1240 / 1700)); }
    :lang(en) .metaverse-box ul li .cont { height: calc(100vw * (1185 / 1700)); }    

    :lang(ja) .xr-banner ul li { height: calc(100vw * (1240 / 1700)); }
    :lang(ja) .metaverse-box ul li .cont { height: calc(100vw * (1185 / 1700)); }   
}
@media (max-width: 1180px) {
    :lang(en) .xr-banner ul li { height: auto; }
    :lang(en) .metaverse-box ul li .title { height: auto; }
    :lang(en) .metaverse-box ul li .cont { height: auto; }
    :lang(en) .system-box .title { height: auto; }
    :lang(en) .sub-title h2 br { display: none; }

    :lang(ja) .xr-banner ul li { height: auto; }
    :lang(ja) .metaverse-box ul li .title { height: auto; }
    :lang(ja) .metaverse-box ul li .cont { height: auto; }
    :lang(ja) .system-box .title { height: auto; }
    :lang(ja) .technology-box ol li { padding: calc(100vw * (30 / 1180)); }
}
@media (max-width: 767px) {
    :lang(en) .xr-banner ul li .txt-box { position: relative; top: 0; transform: translateY(0); padding: calc(100vw * (80 / 767)) 0; }
    :lang(en) .xr-banner ul li .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  
    :lang(en) .system-box .cont ol li { margin-bottom: calc(100vw * (36 / 767)); }
    :lang(en) .system-box .cont ol li:last-child { margin-bottom: 0; }

    :lang(ja) .xr-banner ul li .txt-box { position: relative; top: 0; transform: translateY(0); padding: calc(100vw * (80 / 767)) 0; }
    :lang(ja) .xr-banner ul li .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  
    :lang(ja) .technology-box ol li { padding: calc(100vw * (32 / 767)) calc(100vw * (30 / 767)); word-break: keep-all; }
    :lang(ja) .system-box .cont ol li { margin-bottom: calc(100vw * (36 / 767)); }
    :lang(ja) .system-box .cont ol li:last-child { margin-bottom: 0; }
    :lang(ja) .technology-box ol li span { width: calc(100vw * (35 / 767)); }
}