@charset "utf-8";

/* intro */
.intro { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 999;}
.logo__box { position: relative; width: 100%; height: 100%; overflow: hidden;}
.logo__box svg { position: absolute; height: 105%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.logo__box .intro-1 {  animation: opacity 0.6s 1.5s ease-out both; z-index: 5; }
.logo__box .intro-2 { z-index: 1; animation: logoScale 1.5s 2.5s ease-out both; }
.logo__box .logo-i-1 { animation: textUp 0.7s 0.2s ease-out both; }
.logo__box .logo-n { animation: textUp 0.7s 0.25s ease-out both; }
.logo__box .logo-z { animation: textUp 0.7s 0.3s ease-out both; }
.logo__box .logo-i-2 { animation: textUp 0.7s 0.35s ease-out both; }

.intro .mo-view { display: none; }

/* main */
/* .main { padding-bottom: 100px; } */
.main { padding-top: var(--header-H); padding-bottom: 100px; }
.visual-swiper { position: relative; height: 100vh; }
.visual-swiper::before,.visual-swiper::after { content: ""; position: absolute; top: 0; display: block; width: 60px; height: 100%; background-color: #fff; z-index: 10; animation: visualBox 1s ease-out both;}
.visual-swiper::before { left: 0; transform-origin: 0 50%; }
.visual-swiper::after { right: 0; transform-origin: 100% 50%; }
.visual-swiper .swiper-slide { overflow: hidden; position: relative; }
/* .visual-swiper .swiper-slide::before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1;} */
/* .visual-swiper .swiper-slide::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 51.94%, rgba(0, 0, 0, 0.30) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); } */
.visual-swiper .swiper-slide video { position: absolute; left: 50%; top: 50%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); pointer-events: none; }
.visual-swiper .inner { position: absolute; left: 50%; bottom: 100px; width: calc(100% - 180px); z-index: 10; transform: translateX(-50%); }
.visual-swiper .swiper-opt__wrap { display: flex; align-items: center; column-gap: 30px; margin-bottom: 20px; }
.visual-swiper .swiper-pagination { position: static; display: flex; align-items: center; column-gap: 10px; width: fit-content; }
.visual-swiper .swiper-pagination-bullet { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 0; background-color: rgba(255, 255, 255, 0.2); opacity: 1; font-family: var(--font-Oxanium); font-size: 16px; font-weight: 700; color: #fff; transition: 0.3s ease-out; }
.visual-swiper .swiper-pagination-bullet-active{ background-color: var(--main-color); color: #000; }
.visual-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0; }
.visual-swiper .progress-bar { position: relative; width: 100px; height: 3px; background-color: rgba(255, 255, 255, 0.2); }
.visual-swiper .progress-bar .bar { position: absolute; left: 0; top: 0; width: var(--progress); height: 100%; background-color: #fff; }
.visual-text__area .text-box { display: none; }
.visual-text__area .text-box.on { display: block; animation: textUpOpacity 0.3s ease-out both ; }
.visual-title { font-family: var(--font-Oxanium); font-size: clamp(32px,4.68vw,90px); letter-spacing: 0; color: #fff; }
.visual-text { margin-top: 10px; font-family: var(--font-Oxanium); font-weight: 300; font-size: 24px; line-height: 1.58; letter-spacing: 0; color: #fff; text-transform: capitalize; }

.visual-swiper.first::before,.visual-swiper.first::after { animation-delay: 0.3s; }
.visual-swiper.first .swiper-opt__wrap { animation: opacity2 0.3s 1.6s ease-out both; }
.visual-swiper.first .visual-text__area .text-box.on { animation-duration: 0.6s; animation-delay: 1.6s; }
.visual-swiper.first.delay::before,.visual-swiper.first.delay::after { animation-delay: 3s; }
.visual-swiper.first.delay .swiper-opt__wrap { animation: opacity2 0.3s 4s ease-out both; }
.visual-swiper.first.delay .visual-text__area .text-box.on { animation-duration: 0.6s; animation-delay: 4s; }

.title__area .category { display: inline-block; margin-bottom: 40px; font-family: var(--font-Oxanium); font-size: 20px; font-weight: 600; letter-spacing: 0; color: #AAAAAA; text-transform: uppercase; }
.title__area .title { padding-left: 40px; white-space: nowrap; }
.title__area .title.mo-view { display: none; }
.title__area .title, .title__area .title * { font-size: clamp(30px,3.125vw,60px); line-height: 1.33; font-weight: 500; }
.title__area .title .fill-color { position: relative; display: inline-block; color: #DDDDDD; }
.title__area .title .fill-color::after { content: attr(data-text); overflow: hidden; position: absolute; left: 0; top: 0; color: transparent; background: no-repeat 0 center /0 100% linear-gradient(#000 0 0); -webkit-background-clip: text; background-clip: text; white-space: nowrap; transition: background-size 0.6s ease-out; transition-delay: 0.2s; }
[data-aos="text-fill"].aos-animate .fill-color::after { background-size: 100% 100%; }
.content__area .button__wrap { margin-top: 100px; }

.main-product { padding: 200px 0 300px; }
.main-product .business__list { margin-top: 100px; }
.product__list { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 120px; }
.product__item { width: calc((100% - 60px)/4); height: 560px; background-color: #F5F5F5; transition: 0.3s ease-out; }
.product__item > a { overflow: hidden; position: relative; display: block; width: 100%; height: 100%; }
.product__item > a > img { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); }
.product__list .text-box { position: absolute;  left: 0; bottom: 40px; padding: 0 40px;}
.product__list .text-box .eng { margin-bottom: 10px; font-family: var(--font-Oxanium); font-size: 18px; letter-spacing: 0; color: rgba(0, 0, 0, 0.4); text-transform: uppercase; }
.product__list .text-box .title { font-size: 30px; font-weight: 600; color: #111; }
.product__item:hover { background-color: var(--main-color); transform: translateY(-20px); }

.main-company { padding-bottom: 300px; }
.main-company .title__area { width: fit-content; margin: 0 auto; transform: translateX(-20px); }
.company__box { display: flex; gap: 20px; height: 740px; margin-top: 120px; }
.company__box .box { padding: 30px; }
.company__box .title { font-size: 20px; font-weight: 500; }
.company__box .text { margin-top: 30px; font-size: clamp(20px,1.56vw,30px); font-weight: 500; word-break: keep-all; }
.company__box .value { display: block; font-family: var(--font-Oxanium); font-size: clamp(38px,2.6vw,50px); font-weight: 600; letter-spacing: 0; }
.company__box .value > span { font-family: var(--font-Pretendard); font-size: clamp(36px,2.5vw,48px);  }
.company__box .col:nth-child(1){ width: calc(25.31% - 20px); background-color: #EEEEEE; }
.company__box .col:nth-child(1) > .box:nth-child(1) { height: 51.36%; }
.company__box .col:nth-child(1) > .box:nth-child(2) { height: 48.64%; background: url("/img/main/main_company_01.jpg") no-repeat center center/cover; }
.company__box .col:nth-child(2){ width: calc(25.31% - 20px);  background: url("/img/main/main_company_02.jpg") no-repeat center center/cover; color: #fff; }
.company__box .col:nth-child(2) .box { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.company__box .col:nth-child(2) .box .text { font-size: 20px; font-weight: 200; margin-bottom: 20px; }
.company__box .col:nth-child(3){ width: 50.6%; } 
.company__box .col:nth-child(3) > .box:nth-child(1) { display: flex; flex-direction: column; justify-content: space-between; height: 48.65%; color: #fff; background: url("/img/main/main_company_03.jpg") no-repeat center center/cover; }
.company__box .col:nth-child(3) > .row { display: flex; gap: 20px; margin-top: 20px; height: calc(51.35% - 20px); }
.company__box .col:nth-child(3) > .row > .box { display: flex; flex-direction: column; justify-content: space-between; width: calc(50% - 10px); height: 100%; background-color: #F5F5F5; }

.main-rnd { padding-bottom: 300px; }
/* .main-rnd .content__top { display: flex; justify-content: space-between; align-items: flex-end; } */
.main-rnd .content__area { overflow: hidden; }
.rnd-text__list { max-width: 50%; margin-top: 60px; padding-left: 40px; transform: translate(18px, 2px); }
.rnd-text__list li + li { margin-top: 15px; }
.rnd-text__list li b { font-size: 22px; font-weight: 600; line-height: 1.54; color: #111; }
.rnd-text__list li span { font-size: 20px; font-weight: 300; line-height: 1.7; color: #333; }
.main-rnd .diagram { position: relative; margin-top: 100px; padding-bottom: 60px; }
.main-rnd .diagram > img { display: block; margin: 0 auto; }
.main-rnd .diagram > img.mo-img { display: none; }
.main-rnd .diagram .circle__box { position: absolute; left: 0; top: calc(8.95% - 30px); width: 100%; height: 100%; }
.main-rnd .diagram .circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.main-rnd .diagram .circle-01 { width: 480px; aspect-ratio: 1/1; background: url("/img/main/circle01.svg") no-repeat center center/contain; animation: circleRotate 24s infinite linear both; }
.main-rnd .diagram .circle-02 { width: 680px; aspect-ratio: 1/1; background: url("/img/main/circle02.svg") no-repeat center center/contain; animation: circleRotate2 30s infinite linear both; }
.main-rnd .diagram-text__box { display: none; }

.main-world { position: relative; padding-top: 116px; padding-bottom: 196px; }
.main-world > .inner {position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.main-world .world-map { position: relative; max-width: 2560px; margin: 0 auto; padding-bottom: 145px; }
.main-world .world-map svg { width: 100%; }
.main-world .world-map > .inner { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.main-world .map-mark__list { padding: 23px; border: 2px dotted #000; }
.main-world .map-mark__list > li { display: flex; align-items: center; column-gap: 10px; }
.main-world .map-mark__list > li + li { margin-top: 15px; }
.main-world .map-mark__list .color { width: 16px; height: 16px; border-radius: 50%; }
.main-world .map-mark__list .color.yellow { background-color: #FFBB1E; }
.main-world .map-mark__list .color.orange { background-color: #F87421; }
.main-world .map-mark__list .text { font-family: var(--font-Oxanium); font-size: 16px; font-weight: 500; letter-spacing: 0; color: #111; }
.main-world .title__area { width: fit-content; margin: 0 auto; transform: translateX(26px); }
.global__content .world-map { position: relative; max-width: 2560px; margin: 0 auto; padding-top: 40px; }
.global__content .world-map svg { width: 100%; }
.global__content .world-map > .content__title { position: absolute; left: 50%; top: 0px; transform: translate3D(-50%, 100px, 0); }
.global__content .world-map > .content__title.aos-animate { transform: translate3D(-50%, 0, 0); }
.global__content .world-map > .inner { position: absolute; left: 50%; top: 0px; display: flex; justify-content: right; transform: translateX(-50%); z-index: 5;}

.main-site { overflow: hidden; }
.site-swiper__wrap { overflow: hidden; margin-top: 110px;}
.site-swiper { padding-top: 20px; }
.site-swiper .swiper-slide .box { transition: 0.3s ease-out; }
.site-swiper .tag { display: inline-block; margin-bottom: 10px; padding: 4.5px 10px; font-family: var(--font-Mix); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: #fff; background-color: #DDDDDD; transition: 0.3s ease-out; }
.site-swiper .img-box { overflow: hidden; position: relative; height: 0; padding-top: 77.9%; }
.site-swiper .img-box > img { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.site-swiper .text-box { margin-top: 20px; }
.site-swiper .text-box .title { font-family: var(--font-Oxanium); font-size: 24px; font-weight: 600; letter-spacing: 0; color: #111; text-transform: capitalize; }
.site-swiper .text-box .text { margin-top: 10px; font-family: var(--font-Oxanium); font-size: 18px; letter-spacing: 0; color: #666666; }
.site-swiper .swiper-button-prev, .site-swiper .swiper-button-next, .swiper-pagination-progressbar { position: static; }
.site-swiper .swiper-opt__wrap { display: flex; align-items: center; column-gap: 30px; margin-top: 60px; }
.site-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal { width: 180px; height: 2px; background-color: #EEEEEE; }
.site-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #000; }
.site-swiper .swiper-button-prev::after, .site-swiper .swiper-button-next::after {  display: none;}
.site-swiper .swiper-button-prev { width: 17px; height: 32px; margin-top: 0; background: url("/img/main/swiper_prev.svg") no-repeat center center/contain; transition: 0.6s ease-out; }
.site-swiper .swiper-button-next { width: 17px; height: 32px; margin-top: 0;  background: url("/img/main/swiper_next.svg") no-repeat center center/contain; transition: 0.6s ease-out; }
.site-swiper .swiper-button-prev.swiper-button-disabled { opacity: 1; background-image: url("/img/main/swiper_prev_off.svg"); }
.site-swiper .swiper-button-next.swiper-button-disabled { opacity: 1; background-image: url("/img/main/swiper_next_off.svg"); }
.site-swiper .btn-link-more { width: 30px; height: 30px; position: relative; transition: 0.3s ease-out; }
.site-swiper .btn-link-more > span { position: absolute; left: 50%; top: 50%; width: 30px; height: 2px; background-color: #AAAAAA; transform: translate(-50%, -50%); transition: 0.3s ease-out; }
.site-swiper .btn-link-more > span:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg) ; }
.site-swiper .btn-link-more:hover { transform: rotate(-180deg); }
.site-swiper .btn-link-more:hover span { background-color: #000000; }

.site-swiper .swiper-slide .box:hover { transform: translateY(-20px); }
.site-swiper .swiper-slide .box:hover .tag { color: #fff; background-color: var(--main-color2) }

.main-client { overflow: hidden; width: 100%; padding: 240px 0 300px; }
.marquee-swiper + .marquee-swiper { margin-top: 30px; }
.marquee-swiper .swiper-wrapper{-webkit-transition-timing-function:linear!important; transition-timing-function:linear!important; }
.marquee-swiper .swiper-slide { width: 240px }

.main-esg { padding-bottom: 100px; }
.main-esg .title__area { text-align: right; }
.main-esg .title__area .title { padding-left: 0; padding-right: 40px; }
.main-esg .title__area .title .fill-color::after { background-position: 100% center; }
.main-esg .title__area .mo-view { display: none; }

.main-link { padding: 200px 0; background: url("/img/main/inzi_bg.png") no-repeat 0 100%/auto; }
.main-link .link__item { position: relative; }
.main-link .link__item + .link__item { margin-top: 60px; }
.main-link .link__item .title { position: relative; display: block; width: fit-content; margin: 0 auto; font-size: clamp(30px,3.125vw,60px); font-weight: 600; color: #000; transition: 0.3s ease-out; }
.main-link .link__item .link-info { position: absolute; left: 0; top: 50%; width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; transform: translateY(-50%); pointer-events: none; visibility: hidden; opacity: 0; transition: 0.3s ease-out;}
.main-link .link__item .link-info .img-box { position: absolute; left: 0; top: 50%;  width: 400px; height: 300px; transform: translateY(-50%); }
.main-link .link__item .link-info .img { position: absolute; left: 50%; top: 50%; width: 85%; height: 80%; transform: translate(-50%, -50%); transition: 0.3s ease-out; }
.main-link .link__item:nth-child(1) .link-info .img { background: url("/img/main/link_img_01.jpg") no-repeat center center/400px 300px; }
.main-link .link__item:nth-child(2) .link-info .img { background: url("/img/main/link_img_02.jpg") no-repeat center center/400px 300px; }
.main-link .link__item:nth-child(3) .link-info .img { background: url("/img/main/link_img_03.jpg") no-repeat center center/400px 300px; }
.main-link .link__item .link-info .text { font-size: 24px; font-weight: 500; color: #111; text-align: center; }
.main-link .link__item .link-info .text > br { display: none; }
.main-link .link__item .link-info .arrow { position: absolute; right: 60px; top: 50%; width: 100px; height: 100px; background: url("/img/main/icon_link_arrow.svg") no-repeat center center/auto; transform: translateY(-50%); transition: 0.3s ease-out; }
.main-link .link__item .title:hover { color: #EEEEEE; }
.main-link .link__item .title:hover + .link-info { visibility: visible; opacity: 1; }
.main-link .link__item .title:hover + .link-info .img { width: 100%; height: 100%; }
.main-link .link__item .title:hover + .link-info .arrow { transform: translateX(60px) translateY(-50%); }

.about-main.video-layout .img-box { overflow: hidden; position: relative; width: 55%; border: 2px solid var(--main-color3); }
.about-main.video-layout .img-box::before{content: ""; display: block; padding-top: 56.25%;}
.about-main.video-layout .img-box video { position: absolute; left: 50%; top: 50%; width: 100%; object-fit: cover; transform: translate(-50%, -50%); }
.about-main.video-layout .about-text { width: calc(45% - 10px); }
.about-main .img-box #btnFullScreen { position: absolute; left: 10px; top: 10px; padding: 13.5px 20px; border: none; font-size: 18px; font-weight: 500; color: #fff; z-index: 5; background-color: var(--main-color3); visibility: hidden; opacity: 0; transition: 0.4s ease-out; }
.about-main .img-box #btnFullScreen::after { content: ""; display: block; width: 20px; height: 20px; margin-left: 10px; background: url("/img/common/icon_full_screen.svg") no-repeat center center/contain; }
.about-main .img-box:hover #btnFullScreen { visibility: visible; opacity: 1; }

@keyframes visualBox {
    0%{ transform: scaleX(0); }
    100%{ transform: scaleX(1); }
}
@keyframes textUp {
	0%{ transform: translateY(50%); }
	100%{ transform: translateY(0); }
}
@keyframes opacity {
	0%{ opacity: 1; }
	100%{ opacity: 0; }
}
@keyframes opacity2 {
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}
@keyframes textUpOpacity {
	0%{ transform: translateY(50px); opacity: 0; }
	100%{ transform: translateY(0); opacity: 1; }
}
@keyframes logoScale {
	0%{ height: 105%;}
	1% { transform: translate(-54.6%, -50%); }
	100%{ height: 4000%; transform: translate(-54.6%, -50%); }
}
@keyframes logoScale2 {
	0%{ height: 105%;}
	1% { transform: translate(-52.7%, -50%); }
	100%{ height: 4000%; transform: translate(-52.7%, -50%); }
}
/* @keyframes marqueeLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@keyframes marqueeRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
} */
@keyframes circleRotate {
    0% { transform: translate(-50%, -50%) rotate(0); }
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes circleRotate2 {
    0% { transform: translate(-50%, -50%) rotate(0); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@supports (height: 100svh) {
    .visual-swiper { height: 100svh; }
}

@media screen and (max-width:1660px) {
    .main-visual { padding-top: var(--header-H); }
    .visual-swiper { height: auto; }
    .visual-swiper::before,.visual-swiper::after { width: 30px; }
    .visual-swiper .inner { width: calc(100% - 120px); }
    .visual-swiper .swiper-slide { max-height: calc(100svh - var(--header-H)); }
    .visual-swiper .swiper-slide::before { content: ""; display: block; padding-top: 56.25%; }
    .visual-swiper .swiper-slide video { width: 100%; }
    .main-link { background-size: auto 100%; }
    .main-link .link__item .link-info .img-box { width: 300px; height: 225px; }
    .main-link .link__item:nth-child(1) .link-info .img,
    .main-link .link__item:nth-child(2) .link-info .img,
    .main-link .link__item:nth-child(3) .link-info .img { background-size: 300px 225px; }
    .main-link .link__item .link-info .text > br { display: inline; }

    .main-rnd .diagram .circle { border: 1px dashed rgba(0, 0, 0, 0.2); border-radius: 50%; }
    .main-rnd .diagram .circle-01 { width: clamp(212px,28.9vw,480px); background: none; }
    .main-rnd .diagram .circle-02 { width: clamp(300px,40.96vw,680px); background: none; }
    .rnd-text__list { transform: translate(0, 2px); }
    .rnd-text__list li br { display: none; }
}
@media screen and (max-width:1400px) { 
    .main-world .world-map > .inner { position: static; justify-content: left; margin-top: 10px; transform: none; }
    
    .rnd-text__list li b{ font-size: 18px; }
    .rnd-text__list li span { font-size: 16px; }
}
@media screen and (max-width:1200px) {
    .visual-text > br { display: none; }

    .title__area .title { padding-left: 20px; }
    .main-esg .title__area .title { padding-right: 20px; }
    .rnd-text__list { padding-left: 20px; }
    .product__item { width: calc(50% - 10px); }
    .product__item > a > img { width: 70%; }
    .company__box { flex-wrap: wrap; height: auto; }
    .company__box .col:nth-child(1),.company__box .col:nth-child(2) { width: calc(50% - 10px); height: 500px; }
    .company__box .col:nth-child(1) > .box:nth-child(2) { background-position: center 30%; }
    .company__box .col:nth-child(3) { width: 100%; height: 500px; }
    .company__box .text > br { display: none; }

    .main-world .map-mark__list { padding: 15px; }
    .main-world .map-mark__list .color { width: 12px; height: 12px; }
    .main-world .map-mark__list .text { font-size: 13px; }

    .main-link .link__item .link-info .img-box { width: 200px; height: 150px; }
    .main-link .link__item:nth-child(1) .link-info .img,
    .main-link .link__item:nth-child(2) .link-info .img,
    .main-link .link__item:nth-child(3) .link-info .img { background-size: 200px 150px; }
    .main-link .link__item .link-info .arrow { width: 60px; height: 60px; background-size: 70%; }

    .about-main .img-box #btnFullScreen { font-size: 16px; }
    .about-main .img-box #btnFullScreen::after { width: 18px; height: 18px; }
}
@media screen and (max-width:1024px) {
    .content__area { margin-top: 60px; }
    .content__area .button__wrap { margin-top: 60px; }

    .visual-swiper::before, .visual-swiper::after {  display: none;}
    .visual-swiper.first .swiper-opt__wrap { animation-delay: 0.3s; }
    .visual-swiper.first .visual-text__area .text-box.on { animation-delay: 0.3s; }
    .visual-swiper .inner { width: calc(100% - 60px); }

    .main-product { padding: 60px 0 130px; }
    .main-product .business__list { margin-top: 0px; }
    .product__list { margin-top: 0px; }

    .main-company { padding-bottom: 130px; }
    .main-company .title__area, .main-world .title__area { margin: 0; transform: translateX(0); }
    .company__box { margin-top: 0px; }
    .main-client { padding: 130px 0; }

    .main-rnd { padding-bottom: 130px; }
    .main-rnd .content__top { flex-direction: column; align-items: flex-start; row-gap: 30px; }
    .rnd-text__list { max-width: initial; padding-left: 20px; }
    .rnd-text__list li + li { margin-top: 4px; }

    .main-world  { padding-bottom: 130px; }
    .main-world .map-mark__list { width: 100%; max-width: 500px; }
    .main-world .map-mark__list .text { font-size: 14px; }
    .main-world .world-map { padding-bottom: 0; }
    .main-world .world-map svg .marker > g { transform: scale(1.5); transform-box: fill-box; transform-origin: center bottom; }
    .main-world .world-map svg .marker > path { transform: scale(1.5); transform-box: fill-box; transform-origin: left top; }
    #marker_germany_01 + path { transform: scale(1.5) translate(10%, -150%); }
    #marker_hungary_01 + path { transform: scale(1.5) translate(10%, -120%); }
    #marker_india_01 + path { transform: scale(1.5) translate(-40%, -100%); }
    #marker_india_02 + path { transform: scale(1.5) translate(-40%, -80%); }
    #marker_india_03 + path { transform: scale(1.5) translate(-15%, 20%); }
    #marker_china_01 + path { transform: scale(1.5) translate(-45%, -130%); }
    #marker_china_02 + path { transform: scale(1.5) translate(0, 150%); }
    #marker_USA_01 + path { transform: scale(1.5) translate(-100%, -200%); }
    #marker_USA_02 + path { transform: scale(1.5) translate(-50%, -120%); }
    

    .site-swiper__wrap { margin-top: 0px; }
    .site-swiper .text-box .title { font-size: 20px; }
    .site-swiper .text-box .text { font-size: 16px; }
    .site-swiper .tag { font-size: 14px; }
    .site-swiper .swiper-opt__wrap { margin-top: 30px; column-gap: 20px; }
    .site-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal { width: 120px; }
    .site-swiper .swiper-button-prev, .site-swiper .swiper-button-next { width: 12px; height: 24px; }
    .site-swiper .btn-link-more { width: 24px; height: 24px; }
    .site-swiper .btn-link-more > span { width: 24px; }

    .marquee-swiper .swiper-slide { width: 180px; }

    .main-esg { padding-bottom: 60px; }

    .main-link { padding: 100px 0; }
    .main-link .link__item .link-info .img-box { display: none; }
    .main-link .link__item .link-info .text { font-size: 20px; }
    .main-link .link__item .link-info .arrow { right: 30px; }
    .main-link .link__item .title:hover + .link-info .arrow { transform: translateX(30px) translateY(-50%);}

    .about-main.video-layout .img-box { overflow: hidden; width: 100%; height: auto; }
    .about-main.video-layout .img-box img { width: 100%; min-height: 100%; object-position: center center; object-fit: cover; }
    .about-main.video-layout .about-text { width: 100%; padding: 70px 30px 30px;  }
}

@media screen and (max-width: 768px) {
    .intro .pc-view { display: none; }
    .intro .mo-view { display: block; }
    .logo__box .intro-2 { animation: logoScale2 1.5s 2.5s ease-out both; }

    .content__area { margin-top: 30px; }

    .title__area .category { margin-bottom: 14px; font-size: 16px; }
    .title__area .title { padding-left: 0px; }
    .title__area .title.pc-view { display: none; }
    .title__area .title.mo-view { display: block; }
    .main-esg .title__area .title { padding-right: 0px; }
    .title__area .title, .title__area .title * { font-size: 22px; }

    .visual-swiper .inner { bottom: 6%; }
    .visual-text__area .text-box { min-height: 175px; }
    .visual-title { font-size: 24px; }
    .visual-text { font-size: 16px; }

    .product__item { width: 100%; height: clamp(400px,65.1vw,500px); }
    .product__item > a > img { width: 70%; top: 40%; }
    .product__list .text-box .eng { font-size: 14px; }
    .product__list .text-box .title { font-size: 24px; }
    
    .company__box { gap: 10px; }
    .company__box .box { padding: 20px; }
    .company__box .col:nth-child(1) { width: 100%; height: auto; }
    .company__box .col:nth-child(1) > .box:nth-child(1) { height: auto; }
    .company__box .col:nth-child(1) > .box:nth-child(2) { height: 300px; }
    .company__box .col:nth-child(2) { width: 100%; background-position: center 30%; }
    .company__box .title { font-size: 16px; }
    .company__box .text { font-size: 18px; }
    .company__box .col:nth-child(2) .box .text { font-size: 16px; }
    .company__box .col:nth-child(3) { height: auto; }
    .company__box .col:nth-child(3) > .row { flex-wrap: wrap; height: auto;  margin-top: 10px; gap: 10px; }
    .company__box .col:nth-child(3) > .box:nth-child(1) { height: 200px; }
    .company__box .col:nth-child(3) > .row > .box { width: 100%; height: 200px; }
    .company__box .value { font-size: 30px; }
    .company__box .value > span { font-size: 28px; }

    .main-rnd .content__top { row-gap: 20px; }
    .rnd-text__list { padding-left: 0; }
    .rnd-text__list li b{ font-size: 16px; }
    .rnd-text__list li span { font-size: 14px; }
    .main-rnd .diagram { margin-top: 20px; }
    .main-rnd .diagram > img.pc-img { display: none; }
    .main-rnd .diagram > img.mo-img { display: block; }
    .main-rnd .diagram .circle-01 { width: 60%; max-width: 480px; }
    .main-rnd .diagram .circle-02 { width: 85%; max-width: 680px; }
    .main-rnd .diagram-text__box { display: block; margin-top: 20px; }
    .main-rnd .diagram-text__box dl { padding: 20px 30px; }
    .main-rnd .diagram-text__box dl:first-child { border: 2px solid var(--main-color); }
    .main-rnd .diagram-text__box dl:not(:first-child) { background-color: #111; color: #fff; }
    .main-rnd .diagram-text__box dl + dl { margin-top: 10px; }
    .main-rnd .diagram-text__box dt, .main-rnd .diagram-text__box p { font-family: var(--font-Oxanium); }
    .main-rnd .diagram-text__box dt { font-size: 20px; font-weight: 600; }
    .main-rnd .diagram-text__box dd { margin-top: 10px; }
    .main-rnd .diagram-text__box dd p { position: relative; font-size: 16px;}
    .main-rnd .diagram-text__box dd p.plus {padding-left: 12px; }
    .main-rnd .diagram-text__box dd p.plus::before { content: ""; position: absolute; left: 0; top: 0.35em; display: block; width: 6px; height: 6px; background: url("/img/main/icon_plus.svg") no-repeat center center/contain; }
    .main-rnd .diagram-text__box dd.style-dot p { padding-left: 8px; }
    .main-rnd .diagram-text__box dd.style-dot p::before {content: ""; position: absolute; left: 0; top: 0.404em; display: block; width: 3px; height: 3px; background-color: #AAAAAA; }
    .main-rnd .diagram-text__box dd p + p { margin-top: 4px; }

    .main-world .world-map svg .marker > g { transform: scale(2); }
    .main-world .world-map svg .marker > path { transform: scale(1.8);  }
    #marker_germany_01 + path { transform: scale(1.8) translate(10%, -220%); }
    #marker_hungary_01 + path { transform: scale(1.8) translate(12%, -120%); }
    #marker_india_01 + path { transform: scale(1.8) translate(-60%, -100%); }
    #marker_india_02 + path { transform: scale(1.8) translate(-50%, -80%); }
    #marker_india_03 + path { transform: scale(1.8) translate(-30%, 20%); }
    #marker_china_01 + path { transform: scale(1.8) translate(-60%, -100%); }
    #marker_china_02 + path { transform: scale(1.8) translate(0, 150%); }
    #marker_japan_01 + path { transform: scale(1.8) translate(10%, 10%); }
    #marker_USA_01 + path { transform: scale(1.8) translate(-105%, -200%); }
    #marker_USA_02 + path { transform: scale(1.8) translate(-60%, -120%); }

    .marquee-swiper .swiper-slide { width: 120px; }

    .main-esg .title__area .pc-view { display: none; }
    .main-esg .title__area .mo-view { display: inline-block; }

    .main-link { padding-top: 60px; }
    .main-link .link__item + .link__item {margin-top: 30px; }
    .main-link .link__item .link-info .text { display: none; }
    .main-link .link__item .link-info .arrow { right: 25%; width: 40px; height: 40px; }
    .main-link .link__item .title:hover { color: #000; }

    .about-main .img-box #btnFullScreen { padding: 8px 12px; font-size: 14px; }
    .about-main .img-box #btnFullScreen::after { width: 14px; height: 14px; }
}