@charset "utf-8";

/* common */
.btn-top { display: none; }
.sub-visual{ width: 100%; height: clamp(240px,29.9vw,574px); background: center center/cover #333; }
.sub-visual .inner { display: flex; justify-content: center; align-items: center; height: 100%; }
.sub-visual .inner .title__area { margin-top: 8.9em; }
.sub-visual .main-title { font-family: var(--font-Montserrat); font-size: clamp(30px,4.68vw,90px); font-weight: 800; color: #fff; text-align: center; animation: visualTitle 0.5s ease-out both; }
.navigation { display: flex; justify-content: center; align-items: center; column-gap: 4px; margin-top: 10px; animation: textUp 0.5s 0.1s ease-out both; }
.navigation > li { position: relative; padding-right: 34px; }
.navigation > li::after { content: ""; position: absolute; right: 0; top: 50%; display: block; width: 30px; height: 30px; background: url("/img/common/navi_arrow.svg") no-repeat center center/auto; transform: translateY(-50%); }
.navigation > li:last-child { padding-right: 0; }
.navigation > li:last-child::after { display: none; }
.navigation > li > a, .navigation > li > span { display: inline-block; font-size: 16px; color: #fff; }
.depth2-tab { display: flex; justify-content: center; border-bottom: 1px solid #DDDDDD; }
.depth2-tab .tab__item  { position: relative; flex: 1; display: flex; justify-content: center; align-items: center; max-width: 200px; height: 80px; padding: 0 10px; font-size: 20px; font-weight: 500; color: #777; text-align: center; }
.depth2-tab .tab__item::before { content: ""; position: absolute; left: 0; top: 50%; display: block; width: 1px; height: 18px; background-color: #ccc; border-radius: 1px; transform: translateY(-50%); }
.depth2-tab .tab__item:first-child::before { display: none; }
.depth2-tab .tab__item::after { content: ""; position: absolute; left: 0; bottom: -1px; display: block; width: 0; height: 2px; background-color: var(--main-color); visibility: hidden; transition: 0.3s; }
.depth2-tab .tab__item.on { color: var(--main-color); }
.depth2-tab .tab__item.on::after { width: 100%; visibility: visible; }
.depth2-tab .tab__item:active { color: var(--main-color); }
.depth2-tab .tab__item:active::after { width: 100%; visibility: visible; }
.depth3-tab { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 16px; margin-top: 40px; }
.depth3-tab .tab__item { min-width: fit-content;  width: calc((100% - 64px) / 5); display: flex; justify-content: center; align-items: center; max-width: 123px; height: 55px; border: 1px solid #E2E5EC; border-radius: 30px; font-size: 18px; color: #333; padding: 0 10px; text-align: center; }
.depth3-tab .tab__item.on { border-color: var(--main-color); background-color: var(--main-color); font-weight: 500; color: #fff; }

.content { overflow-x: hidden; padding-top: 110px; padding-bottom: 170px; }
.content-title { font-size: 46px; font-weight: 700; color: #111; text-align: center; }
.style-dot { position: relative; padding-top: 28px; }
.style-dot::after { content:""; position: absolute; left: 50%; top:0; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--main-color); transform: translateX(-50%);}

.board__area { margin-top: 70px; }
.board__area .total { margin-bottom: 20px; font-size: 20px; color: #555; }
.board__area .total > b { font-weight: 600; color: var(--main-color); }
.content-list { display: flex; flex-wrap: wrap; gap: 40px 20px; }
.content-list .item { overflow: hidden; border: 1px solid #DFDFDF; border-radius: 20px; position: relative; width: calc((100% - 60px)/4); padding: 12px; transition: 0.2s ease-in; }
.content-list .item a {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 100%; }
.content-list .item .img-box { overflow: hidden; position: relative; width: 100%; aspect-ratio: 1.161/1; border-radius: 10px; }
.content-list .item .img-box img { position: absolute; left: 50%; top: 50%; /* width: 100%; min-height: 100%; */ max-height: 100%; object-position: center center; /* object-fit: cover;*/ transform: translate(-50%, -50%); transition: 0.2s ease-in; }
.content-list .item .text-box { padding: 18px 16px 30px; }
.content-list .item .text-box .tag { display: inline-block; margin-bottom: 22px; padding: 10px 16px; border-radius: 30px; background-color: #F0F0F0; font-size: 15px; font-weight: 500; color: #7A7A7A; transition: 0.2s ease-in;}
.content-list .item .text-box .title { overflow: hidden; font-size: 24px; font-weight: 500; color: #111; text-overflow: ellipsis; white-space: nowrap; }
.content-list .item .text-box .text { margin-top: 10px; font-size: 18px; color: #888; word-break: break-all;}
.content-list .item:hover { border-color: var(--main-color); }

@media (hover:hover) and (pointer:fine) {
    .depth2-tab .tab__item:hover { color: var(--main-color); }
    .depth2-tab .tab__item:hover::after { width: 100%; visibility: visible; }
}

.paging [class*=" xi-"], [class^=xi-] { font-size: 0; }
.paging{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center; margin-top: 100px; }
.paging .arr{display:flex;}
.paging .arr a { border: 1px solid #ccc; }
.paging .arr a i { display: block; width: 7px; height: 11px; }
.paging .arr a i.xi-angle-left-min { background: url("/img/common/page_prev.svg") no-repeat center center/contain; }
.paging .arr a i.xi-angle-right-min { background: url("/img/common/page_next.svg") no-repeat center center/contain; }
.paging .arr a i::before { display: none; }
.paging a{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center; font-family: var(--font-Montserrat); width: 40px; height: 40px; border: none; border-radius: 50%; font-size: 18px; color: #333;}
.paging ul{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 20px;}
.paging .arr a:not(:last-child),.paging ul li:not(:last-child){margin-right:10px;}
.paging ul li.on a {color:#fff; background: #333;}
.paging .arr a.first i{transform:translateX(-1px);}
.paging .arr a.last i{transform:translateX(1px);}
.paging .arr a.first i:first-of-type{transform:translateX(1px);}
.paging .arr a.last i:last-of-type{transform:translateX(-1px);}

/* product */
.sv01 .sub-visual { background-image: url("/img/sub/visual_product.jpg"); }
.product .content-title { font-size: clamp(24px,2.6vw,50px); color: #333; }

.detail__top { display: flex; justify-content: space-between; }
.detail__top .left { width: 50%; }
.product-swiper__wrap { position: relative; }
.product-swiper__wrap .swiper-button-next:after, .product-swiper__wrap .swiper-button-prev:after { display: none; }
.product-swiper__wrap .swiper-button-next, .product-swiper__wrap .swiper-button-prev { width: 44px; height: 44px; border-radius: 50%; margin-top: 0; }
.product-swiper__wrap .swiper-button-next { right:0; background: url("/img/common/swiper_next.svg") no-repeat center center/auto #505050; transform: translate(50%, -50%); }
.product-swiper__wrap .swiper-button-prev { left: 0; background: url("/img/common/swiper_prev.svg") no-repeat center center/auto #505050; transform: translate(-50%, -50%);}
.product-swiper { border: 1px solid #ccc; border-radius: 20px; }
.product-swiper .swiper-slide { overflow: hidden; position: relative; height: auto;}
.product-swiper .swiper-slide::after{ content: ""; display: block; width: 100%; padding-top: 68.75%; }
.product-swiper .swiper-slide img { position: absolute; left: 50%; top: 50%; max-height: 100%; transform: translate(-50%, -50%); }
.thumb-swiper { margin-top: 30px; }
.thumb-swiper .swiper-slide { overflow: hidden; position: relative; width: calc((100% - 30px)/4); height: auto; border: 1px solid #CCCCCC; border-radius: 10px; cursor: pointer; }
.thumb-swiper .swiper-slide::after{ content: ""; display: block; width: 100%; padding-top: 53.66%; }
.thumb-swiper .swiper-slide img { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-position: center center; object-fit: cover; transform: translate(-50%, -50%); }
.thumb-swiper .swiper-slide.swiper-slide-thumb-active { border-color: var(--main-color); }

/* hover */
.product__content .content-list .item:hover .text-box .tag { background-color: var(--main-color); color: #fff; }
.product__content .content-list .item:hover .img-box img { transform: translate(-50%, -50%) scale(1.059); }

/* company */
.sv02 .sub-visual { background-image: url("/img/sub/visual_company.jpg"); }
.greeting-visual { overflow-x: hidden; position: relative; height: 100dvh; }
.greeting-visual .video__box {overflow: hidden; position: absolute; left: 50%; top: 50%; width: 100.1%; height: 100%; transform: translate(-50%, -50%);}
.greeting-visual .video__box::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.video__box video { width: 100%; height: 100%; object-position: center center; object-fit: cover; }
.greeting-visual .inner { position: relative; height: 100%; }
.greeting-visual .text__area { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%);}
.greeting-visual .main-title {  font-size: 56px; font-weight: 800; line-height: 1.5; color: #fff; text-align: center;}   
.greeting-visual .main-title .arrow { position: absolute; left: 50%; top: calc(100% + 42px); display: inline-block; width: 26px; height: 26px; background: url("/img/sub/arrow_down.svg") no-repeat center center/contain; margin-left: -13px; animation: upDownArrow 1.6s infinite linear both; }
.greeting-visual .main-title.default { animation: textIn 0.6s 0.2s ease-out both;  }
.greeting-visual .main-title.on { animation: textIn 0.5s ease-out both; }
.greeting-visual .main-title.off { animation: textOut 0.5s ease-out both; }
.greeting-visual .text { width: 100%; max-width: 1226px; margin: 0 auto; padding: 100px 97px; background-color: rgba(0, 0, 0, 0.6); border-radius: 20px; text-align: center; transform: translateY(100px); opacity: 0; }
.greeting-visual .text.on { animation: textIn 0.5s ease-out both; }
.greeting-visual .text.off { animation: textOut 0.5s ease-out both; }
@keyframes textOut {
    0%{ transform: translateY(0); opacity: 1; }
    100%{ transform: translateY(100px); opacity: 0; }
}
@keyframes textIn {
    0%{ transform: translateY(100px); opacity: 0; }
    100%{ transform: translateY(0); opacity: 1; }
}
.greeting-visual .text p { font-size: 24px; font-weight: 300; line-height: 1.6; color: #fff; }
.greeting-visual .text p + p { margin-top: 30px; }
.greeting-visual .text p b { font-weight: 700; }
.content.greeting__content { position: relative; padding-bottom: 0; }
.content.greeting__content::before { content: ""; position: absolute; left: 50%; top: 40px; display: block; width: 478px; height: 170px; background: url("/img/common/logo_sub2.png") no-repeat center center/contain; transform: translateX(-50%); opacity: 0.1; }
.greeting__content .video__area { transform: translateY(130px); }
.greeting__content .video__box { position: relative; width: 100%; max-width: 1086px; height: auto; aspect-ratio: 1.783/1; margin: 0 auto; }
.greeting__content .video__box .btn-play { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; border-radius: 50%; background: url("/img/sub/icon_play.svg") no-repeat calc(50% + 3.5px) center/auto rgba(180, 0, 0, 0.5); transform: translate(-50%, -50%); }
.greeting__content .video__box::after { content: ""; position: absolute; left: 50%; top: calc(100% - 18px); display: block; width: 8px; height: 118px; background: url("/img/sub/red_line.png") no-repeat center center/contain; }
.greeting__content .text__area { display: flex; justify-content: center; align-items: center; height: 978px; margin-top: -58px; background: url("/img/sub/greeting_bg.jpg") no-repeat center 100%/cover; }
.greeting__content .text__area .box {  margin-top: 7.56%; }
.greeting__content .text__area p { font-size: 20px; font-weight: 200; line-height: 1.7; letter-spacing: -0.02em; color: #fff; text-align: center; }
.greeting__content .text__area p.fw-m { font-weight: 500; line-height: 1.3; }
.greeting__content .text__area p.fw-b { font-weight: 700; line-height: 1.3; }
.greeting__content .text__area p + p { margin-top: 24px; }
.greeting__content .text__area .line { display: block; width: 20px; height: 3px; background-color: #fff; margin: 69px auto 29px;}

.history__content { position: relative; overflow-x: initial; padding-bottom: 119px; }
.history__wrap { position: relative; display: flex; justify-content: space-between; margin-top: 110px; }
.sticky-bg { position: absolute; right: 0; top: 680px; width: 590px; height: calc(100% - 800px); }
.sticky-bg .bg-logo { position: sticky; top: calc(100% - 350px); width: 100%; height: 210px; background: url("/img/common/logo_sub2.png") no-repeat center center/contain; opacity: 0.04; }
.history__wrap .img-box { overflow: hidden; border-radius: 20px; }
/* .history__wrap .img-box + .img-box { margin-top: 50px; } */
.history__wrap .img-box img { width: 100%; min-height: 100%; object-position: center center; object-fit: cover; }
.history__wrap .line { position: absolute; left: 50%; height: 100%; width: 1px; height: 100%; background-color: #DDDDDD; }
.history__wrap .line > .bar { position: absolute; display: block; left: 0; top: 0; width: 1px; height: var(--line-H); max-height:100%; min-height:14px; background-color: var(--main-color); transition: 0.5s ease-out; }
.history__wrap .line > .bar::before{ content:""; position:absolute; left: -12px; bottom: -12px; display: block; width: 25px; height: 25px; border-radius:50%; background-color: var(--main-color); opacity:0.15; z-index: 5;}
.history__wrap .line > .bar::after{ content:""; position:absolute; left: -5px; bottom: -5px; display: block; width: 11px; height: 11px; border-radius:50%; background-color: var(--main-color); z-index: 5;}
.history__wrap .left { display: flex; flex-direction: column; justify-content: space-between; width: 42.5%; max-width: 680px; padding-top: 145px; }
.history__wrap .right { width: 42.94%; max-width: 687px; }
.history__wrap .right .year-box + .year-box { margin-top: 100px; }
.year-box .year { font-family: var(--font-Montserrat); font-size: 60px; font-weight: 700; letter-spacing: 0; color: #444444; transition: 0.3s; transition-delay: 0.1s; }
.year-box .year.on { color: var(--main-color); }
.history__list { margin-top: 20px; padding: 29px 30px; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;}
.history__list > li { font-size: 18px; font-weight: 300; color: #222; }
.history__list > li + li { margin-top: 15px; }

.content.organization__content { padding-bottom: 0; }
.organization__content .img__box {  position: relative; margin-top: 90px; margin-bottom: 170px; text-align: center; }
.organization__content .img__box::before{ content: ""; position: absolute; left: 50%; top: 120px; display: block; width: 700px; height: 246px; background: url("/img/common/logo_sub2.png") no-repeat center center / contain; transform: translateX(-50%); opacity: 0.05; z-index: -1;}
.organization__content .img__box .mo-img { display: none; }
.marquee { overflow: hidden; margin-bottom: 27px; }
.marquee__inner { display: flex; column-gap: 20px; }
.marquee__inner .slide { display: flex; column-gap: 20px; animation: marquee 24s linear infinite forwards;}
.marquee__inner .slide img { max-width: initial; }

.certificate__content .content-list .item .img-box { background-color: #EEEEEE; text-align: center; }
.certificate__content .content-list .item .img-box img { min-height: initial; max-width: 52.63%; }
.certificate__content .content-list .item .text-box { position: relative; padding-top: 20px; }
.certificate__content .text-box .btn-link-s { position: absolute; top: -35px; right: 20px; width: 50px; height: 50px; border-radius: 10px 0 10px 0; background: url("/img/main/icon_link_arrow_w.svg") no-repeat center center/auto var(--main-color); visibility: hidden; opacity: 0; transition: 0.2s ease-in; }
.certificate__content .item:hover .text-box .btn-link-s { visibility: visible; opacity: 1; }

.map__area { position: relative; margin-top: 90px; }
.map__area::before { content: ""; position: absolute; right: -366px; bottom: -34px; display: block; width: 700px; height: 246px; background: url("/img/common/logo_sub2.png") no-repeat center center/contain; opacity: 0.03; }
.map-box { overflow: hidden; width: 100%; height: 570px; border-radius: 20px; transition:0.3s ease-out; }
.map-box > iframe { width: 100% !important; height: 100% !important;}
.map-info { display: flex; column-gap: 95px; }
.map-info .logo-box { position: relative; width: 28.125%; display: flex; justify-content: center; align-items: center; border-radius: 10px; z-index: 5; }
.map-info .logo-box img { width: 53.3%; }
.map-info .info-box { width: calc(71.875% - 95px); padding-top: 60px; }
.map-info .info-box dl { display: flex; align-items: center;}
.map-info .info-box dl + dl { margin-top: 10px; }
.map-info .info-box dt { display: flex; align-items: center; width: 138px; font-size: 18px; font-weight: 700; color: #111; }
.map-info .info-box dt img { margin-right: 10px; }
.map-info .info-box dd { width: calc(100% - 138px); font-size: 18px; color: #333; }
.mail-info__area { margin-top: 80px; }
.mail-info__area h4 { font-size: 46px; font-weight: 700; }
.mail-info__list { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
.mail-info__list > li { display: flex; justify-content: center; align-items: center; column-gap: 20px; flex: 1; padding: 40px 20px; border-radius: 10px; background-color: #F3F3F3; }
.mail-info__list > li > img { width: 65px; }
.mail-info__list > li .title { font-size: 18px; font-weight: 500; color: #333; }
.mail-info__list > li .text-box { width: 220px }
.mail-info__list > li .text { font-size: 18px; font-weight: 300; color: #333; word-break: break-all; }

.global-map__area { overflow: hidden; position: relative; max-width: 1920px; margin: 90px auto 0; background-color: #1A191D;}
.global-map__area > svg { width: 100%; height: auto; }
.global-map__area .mo-map { display: none; }
.global-info__list { position: absolute; left: 50%; bottom: 9.32%; display: flex; column-gap: 28px; transform: translateX(-50%); }
.global-info__list > li { flex: 1; padding: 40px 10px; border-radius: 10px; background-color: #232731; text-align: center; }
.global-info__list .title { font-family: var(--font-Montserrat); font-size: 30px; font-weight: 700; color: #fff; text-transform: uppercase; }
.global-info__list .text { margin-top: 10px; font-size: 24px; color: #00AAF3; }
.client__area { margin-top: 130px; }
.client__area h4 { font-size: 46px; font-weight: 700; color: #222; text-align: center; }
.client__list { display: flex; flex-wrap: wrap; gap:20px; margin-top: 40px; }
.client__list > li { overflow: hidden; display: flex; justify-content: center; align-items: center; width: calc((100% - 60px)/4); height: 126px; border: 1px solid #CCCCCC; border-radius: 10px; }
.client__list > li > img { max-width: 75%; }

@media (hover:hover) and (pointer:fine) {
    .global-map__area .bg-1 { position: absolute; left: 0; top: 0; width: 150px; height: 100%; background-color: #fff; z-index: 5; }
    .global-map__area .bg-2 { position: absolute; right: 0; top: 0; width: 150px; height: 100%; background-color: #fff; z-index: 5; }

    .global-map__area.on > .bg-1, .global-map__area.on > .bg-2 { animation: mapWide 0.6s 0.1s linear both; }
}
@keyframes mapWide { 
    100% { width: 0; opacity: 0; }
}
.global-map__area .logo-circle { animation: upDown 1.8s infinite linear both ; }
.global-map__area .logo-text { animation: upDown 1.8s infinite linear both ; }
.red-circle-01 { transform-origin: 50% 50%; transform-box: fill-box; animation: circle01-1 2.1s linear both infinite; }
.red-circle-02 { transform-origin: 50% 50%; transform-box: fill-box; animation: circle02-1 2.1s linear both infinite; }

/* contact */
.sv04 .sub-visual { background-image: url("/img/sub/visual_contact.jpg"); }
.contact__form { margin-top: 90px; }
.contact__form .form__list { border-top: 2px solid #333; border-bottom: 2px solid #EAEAEA; padding: 50px 0; }
.form__item { display: flex; flex-wrap: wrap; gap: 20px 52px; }
.form__item + .form__item { margin-top: 20px; }
.form__item.js-right { justify-content: right; }
.form__item .box-1, .form__item .box-2 { display: flex; align-items: center; }
.form__item .box-1 { width: 100%; }
.form__item .box-2 { width: calc(50% - 26px); }
.form__label { display: flex; column-gap: 6px; width: 124px; font-size: 20px; font-weight: 500; color: #222; }
.form__label .req { font-size: inherit; font-weight: inherit; color: var(--main-color); }
.input__inner { width: calc(100% - 124px); border-radius: 10px; background-color: #f5f5f5;}
.input__inner.no-bg { height: auto; padding: 0; background-color: transparent; }
.form__input { width: 100%; height: 64px; border: none; background-color: transparent; padding: 0 30px; font-size: 18px; font-weight: 300; color: #333; }
.form__select { width: 180px; height: 44px; border: 1px solid #CCCCCC; padding: 0 20px; border-radius: 10px; background: url("/img/common/select_arrow.svg") no-repeat calc(100% - 26px) center/auto #fff; font-size: 16px; color: #333; }
.email-box { width: 100%; height: 64px; display: flex; align-items: center; column-gap: 10px; padding-left: 30px; padding-right: 20px; }
.email-box > .box { display: flex; align-items: center; column-gap: 10px; width: calc(100% - 190px); }
.email-box > .box > input { width: calc(50% - 18px); height: 100%; border: none; background-color: transparent; font-size: 18px; font-weight: 300; color: #333; }
.email-box > .box > span { font-size: 18px; color: #666; }
.chk__box { display: flex; align-items: center; gap: 10px 30px; }
.input__inner .chk__box {  flex-wrap: wrap; padding: 20px 30px; }
.input__inner.no-bg .chk__box { padding: 0; margin-bottom: 10px; }
.chk__label,.radio__label { display: flex; align-items: center; column-gap: 10px; cursor: pointer; }
.chk__label > span { padding-top: 0.11em; font-size: 16px; color: #555555; }
.chk__label input[type="checkbox"] { min-width: 18px; height: 18px; border: 1px solid #999; border-radius: 2px; margin: 0 3px; }
.chk__label input[type="checkbox"]:checked { border-color: var(--main-color); background: url("/img/common/icon_check.svg") no-repeat center center/auto var(--main-color); }
.radio__label > span { font-size: 18px; color: #333333; }
.radio__label input[type="radio"] { width: 20px; height: 20px; border: 1px solid #999; border-radius: 50%; margin: 2px; }
.radio__label input[type="radio"]:checked { border:none; box-shadow: inset  0 0 0 5px var(--main-color); }
.input__inner .terms__text { height: 240px; border-radius: 10px; padding: 16px 20px 16px 30px; background-color: #f5f5f5; }
.terms__text .scroll-inner { overflow-y: auto; height: 100%; padding: 14px 10px 14px 0; }
.terms__text .scroll-inner::-webkit-scrollbar { width: 4px;}
.terms__text .scroll-inner::-webkit-scrollbar-thumb { background-color: #333333; }
.terms__text .scroll-inner::-webkit-scrollbar-track { background-color: #D9D9D9; }
.input__inner .terms__text p { font-size: 18px; font-weight: 300; line-height: 1.4; color: #333; }
.input__inner .terms__text p + p { margin-top: 1em; }
.input__inner .terms__text p .dot { position: relative; display: inline-block; width: 27px; height: 21px; vertical-align: text-top; }
.input__inner .terms__text p .dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background-color: #333; transform: translate(-50%, -50%); }
.textarea .scroll-inner { overflow-y: auto; height: 300px; padding: 16px 20px 16px 30px; }
.form__textarea { border: none; background-color: transparent; width: 100%; height: calc(100% - 5px); padding: 14px 10px 14px 0;; font-size: 18px; font-weight: 300; color: #333; resize: none; }
.form__textarea::-webkit-scrollbar { width: 4px;}
.form__textarea::-webkit-scrollbar-thumb { background-color: #333333; }
.form__textarea::-webkit-scrollbar-track { background-color: #D9D9D9; }
.kcaptcha-box { display: flex; }
.kcaptcha-box .input-box { display: flex; }
.kcaptcha-box .kcaptcha-img { overflow: hidden; border-radius: 10px; width: 210px; height: 64px; }
.kcaptcha-box .kcaptcha-img img { width: 100%; height: 100%; object-position: center center; object-fit: cover; }
.kcaptcha-box .form__input { width: 220px; margin: 0 10px; border-radius: 10px; background-color: #f5f5f5; } 
#btnKcaptcha { width: 200px; height: 64px; border: 1px solid #CCCCCC; border-radius: 10px; font-size: 16px; color: #333333; }
.contact__form .button__wrap { margin-top: 70px; }

/* community */
.sv03 .sub-visual { background-image: url("/img/sub/visual_community.jpg"); }
.board_ctn { margin-top: 90px; }
.img_borad_list {display: flex; flex-wrap: wrap; gap: 40px; }
.img_borad_list .item { position: relative; width: calc((100% - 120px)/3); }
.img_borad_list .item a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.img_borad_list .item .img-box { overflow: hidden; position: relative; width: 100%; height: 0; border-radius: 10px; padding-bottom: 65.22%; }
.img_borad_list .item .img-box::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); visibility: hidden; opacity: 0; transition: 0.3s ease-out; }
.media .img_borad_list .item .img-box::before { content: ""; position: absolute; left: 50%; top: 50%; display: block; width: 60px; height: 60px; border: 1px solid #fff; border-radius: 50%; background: url("/img/sub/icon_play_s.svg") no-repeat calc(50% + 2.5px) center/ auto; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; }
.img_borad_list .item .img-box img { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-position: center center; object-fit: cover; transform: translate(-50%, -50%); transition: 0.3s ease-out; }
.img_borad_list .item:hover .img-box::after { visibility: visible; opacity: 1; }
.img_borad_list .item:hover .img-box img { transform: translate(-50%, -50%) scale(1.053); }
.img_borad_list .item .text-box { padding-top: 20px; }
.img_borad_list .item .text-box .title { overflow: hidden; white-space: normal; text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;font-size: 20px; font-weight: 600; line-height: 1.7; color: #333; }
.img_borad_list .item .text-box .date { margin-top: 10px; font-family: var(--font-Montserrat); font-size: 17px; font-weight: 400; line-height: 1.4; color: #999999; }
.view_ctn{ margin-top: 85px; border-top: 2px solid #333333;}
.view_ctn .tit{text-align: center; padding: 60px; border-bottom: 1px solid #E0E0E0; }
.view_ctn .tit .tag{display: inline-block; padding: 0 23px; line-height: 35px; border-radius:20px; font-weight: 500; font-size: 15px; color: #fff; min-width: 85px}
.view_ctn .tit h2{font-weight: 600; letter-spacing: 0; font-size: 30px; color: #222;}
.view_ctn .tit ul{display:flex; justify-content: center; margin-top: 30px ;}
.view_ctn .tit ul li{font-size: 18px; color: #AAAAAA; margin-right: 20px;}
.view_ctn .tit ul li:last-of-type{margin-right: 0;}
.view_ctn .tit ul li span{font-weight: 500; color: #333;}
.view_ctn .info{ padding: 40px 60px; font-size: 20px; letter-spacing: 0; }
.view_ctn .file_box{padding: 16px 0; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0;}
.view_ctn .file_box dl{display:flex; flex-wrap:wrap; align-items:center;}
.view_ctn .file_box dl dt{position: relative; width: 110px; font-size: 18px; letter-spacing: 0; }
.view_ctn .file_box dl dd{ width: calc(100% - 110px); font-size: 16px;}
.view_ctn .file_box dl dd a{position: relative; display: inline-block; vertical-align: top; width: 100%; padding: 14px 20px; font-size: 18px; letter-spacing: 0; color: #666666; transition: 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.view_ctn .file_box dl dd a span{position: absolute; top: 50%; right: 30px; transform: translateY(-50%); font-family: var(--font-Montserrat); font-size: 18px; }
.view_ctn .file_box dl dd a .icon{ display: inline-block; width: 26px; height: 26px; margin-right: 6px; vertical-align: -0.4em; transition: 0.3s; }
.view_ctn .file_box dl dd a .icon-folder { background: url("/img/common/icon_folder.svg") no-repeat center center/contain; }
.view_ctn .file_box dl dd a .icon-download { background: url("/img/common/icon_download.svg") no-repeat center center/contain; }
.view_ctn .file_box dl dd a:hover { color: var(--main-color); }
.view_ctn .file_box dl dd a:hover .icon-folder { background-image: url("/img/common/icon_folder_on.svg"); }
.view_ctn .file_box dl dd a:hover .icon-download { background-image: url("/img/common/icon_download_on.svg"); }
.view_ctn .pages{margin-top: 60px;}
.view_ctn .pages dl{display: flex; align-items: center; margin-bottom: 10px;}
.view_ctn .pages dl:last-of-type{margin-bottom: 0;}
.view_ctn .pages dl dt{position: relative; padding: 24px 30px; font-weight: 500; font-size: 16px;}
.view_ctn .pages dl dt i{margin-right: 15px;}
.view_ctn .pages dl dd a{display: inline-block; vertical-align: top; width: 100%; padding: 24px 30px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.view_ctn .pages dl dt::after,
.view_ctn .file_box dl dt::after{content:""; position: absolute; top: 50%; right: -1px; width: 1px; height: 20px; background: #e0e0e0; transform: translateY(-50%);}
.view_ctn .button__wrap{ margin-top: 110px; }

.detail__top .right { width: 43.75%; }
.detail__top .right .title__area { padding-left: 10px; }
.detail__top .right .title__area .tag { display: inline-block; margin-bottom: 14px; padding: 8px 16px; border: 1px solid var(--main-color); border-radius: 30px; font-size: 15px; color: var(--main-color); }
.detail__top .right .title__area .title { font-size: 50px; font-weight: 600; color: #111; }
.detail__top .right .title__area .text { margin-top: 8px; font-size: 20px; color: #666; }
.info__area { margin-top: 40px; padding-left: 10px; }
.info__area > p{ font-family: var(--font-Montserrat); font-size: 24px; font-weight: 600; color: #333; }
.info__list { margin-top: 14px; margin-bottom: 64px; }
.info__list > li { position: relative; padding-left: 11px; font-size: 18px; font-weight: 300; color: #666; }
.info__list > li::before { content:"-"; position: absolute; left: 0; top: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.info__list > li + li { margin-top: 9px; }
.detail__top .right .button__wrap { justify-content: left; }
.detail-info .style-dot { padding-top: 20px; }
.detail-info .style-dot::after { width: 9px; height: 9px;}
.detail__area { margin-top: 120px; padding-bottom: 110px; border-bottom: 1px solid #CCCCCC; }
.detail-tab { display: flex; }
.detail-tab .tab__item { flex: 1; display: flex; justify-content: center; align-items: center; height: 70px; border: 1px solid #CCCCCC; font-family: var(--font-Montserrat); font-size: 20px; font-weight: 600; color: #666; }
.detail-tab .tab__item:first-child { border-radius: 20px 0 0 0;border-right: none; }
.detail-tab .tab__item:last-child { border-radius: 0 0 20px 0; }
.detail-tab .tab__item.on { color: #fff; background-color: #333333; }
.detail-info { padding-top: 100px; }
.detail-info .title { font-family: var(--font-Montserrat); font-size: 34px; font-weight: 600; color: #333; text-align: center; }

.table__wrap.scroll { padding-bottom: 15px; }
.table{ table-layout: fixed; border-collapse: collapse; width: 100%; border-top: 2px solid #000; }
.table th, .table td { vertical-align: middle; padding: 0 5px; }
.detail-table { margin-top: 40px; min-width: 800px; } 
.detail-table th, .detail-table td { padding: 5px; border:1px solid #DDDDDD; font-family: var(--font-Montserrat); }
.detail-table th { font-weight: 500; color: #333; word-break: keep-all; }
.detail-table thead th { height: 70px; background-color: #E9E9E9; font-size: 20px; }
.detail-table tbody th { background-color: #F6F6F6; font-size: 17px; }
.detail-table tbody td { height: 58px; font-size: 17px; color: #333; text-align: center; }
.video__wrap { overflow: hidden; position: relative; max-width: 1204px; margin: 40px auto 0; }
.video__wrap::after { content: ""; display: block; width: 100%; padding-top: 55.48%; }
.video__wrap iframe { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-position: center center; object-fit: contain; transform: translate(-50%, -50%);}

@media screen and (max-width:1600px) { 
    .mail-info__list > li > img { width: 50px; }
    .mail-info__list > li .title { font-size: 16px; }
    .mail-info__list > li .text { font-size: 16px; }
}
@media screen and (max-width:1400px) {
    .greeting-visual .text p { font-size: 20px; }
    .mail-info__list > li {  flex: none; width: calc(50% - 20px); }

    .form__item.flex-col { flex-direction: column; row-gap: 20px; }
    .form__item .box-2.email { width: 100%; }
    .email-box > .box { width: auto; }
    .email-box > .box > input { max-width: 300px; }
}
@media screen and (max-width:1200px) {
    .sub-visual .inner .title__area { margin-top: 0; }

    .content.greeting__content::before { width: max(39.8vw,150px); height: auto; aspect-ratio: 2.81/1; }
    .greeting-visual .main-title { font-size: 36px; }
    .greeting-visual .text p > br { display: none; }
    .greeting__content .video__area { transform: translateY(28%); }
    .greeting__content .text__area p > br { display: none; }
    .sticky-bg {width: max(49.1vw,300px)}
    .sticky-bg .bg-logo { height: auto; top: 75%; aspect-ratio: 2.81/1; }
    
    .organization__content .img__box::before { width: 58.3vw; height: auto; aspect-ratio: 2.845/1; }

    .map__area::before { right: -20%; bottom: -14%; width: 58.3vw; height: auto; aspect-ratio: 2.845/1; }
    .map-info .info-box { padding-top: 30px; }
    .map-info .logo-box img { width: 70%; }

    .global-info__list { bottom: 20px; }
    .global-info__list > li { padding: 20px 10px; }
    .global-info__list .title { font-size: 20px; }
    .global-info__list .text { font-size: 18px; }

    .content-list .item .text-box { padding: 14px 10px 20px; }
    .content-list .item .text-box .tag { margin-bottom: 14px; font-size: 14px; }
    .content-list .item .text-box .title { font-size: 20px; }
    .content-list .item .text-box .text { font-size: 16px; }
}
@media screen and (max-width:1024px) {
    .content { padding-top: 60px; padding-bottom: 100px; }
    .depth2-tab .tab__item { height: 60px; font-size: 16px; }
    .depth3-tab { gap: 10px; }
    .depth3-tab .tab__item { width: calc((100% - 40px)/5); height: 40px; font-size: 14px; }

    .greeting-visual { position: relative; height: auto; }
    .greeting-visual .inner { padding: 100px 0; }
    .greeting-visual .text__area { position: static; transform: translate(0); }
    .greeting-visual .main-title { font-size: 30px; }
    .greeting-visual .main-title .arrow { display: none; }
    .greeting-visual .main-title, .greeting-visual .main-title.default, .greeting-visual .main-title.on,.greeting-visual .main-title.off { animation: textIn 0.6s 0.1s ease-out both; }
    .greeting-visual .text { margin-top: 40px; margin-bottom: 0; padding: 40px; transform: translateY(0); opacity: 1; }
    .greeting-visual .text, .greeting-visual .text.off,.greeting-visual .text.on { animation: textIn 0.6s 0.3s ease-out both; }
    .greeting-visual .text p { font-size: 16px; }
    .greeting-visual .text p + p { margin-top: 16px; }
    .greeting__content .text__area { margin-top: 0; }
    .greeting__content .text__area p { font-size: 16px; }

    .history__wrap .left { padding-top: 100px; }
    .year-box .year { font-size: 34px; }
    .history__wrap .right .year-box + .year-box { margin-top: 60px; }
    .history__list { padding: 15px 20px; }
    .history__list > li { font-size: 16px; }

    .organization__content .img__box .pc-img { display: none; }
    .organization__content .img__box .mo-img { display: inline-block; }

    .map-box { height: 400px; }
    .map-info { padding-top: 40px; align-items: center; column-gap: 60px; }
    .map-info .logo-box { width: calc(28.125% + 35px); }
    .map-info .info-box { padding-top: 0;}
    .map-info .info-box dt { width: 124px; font-size: 16px; }
    .map-info .info-box dd { font-size: 16px; }
    .mail-info__area h4 { font-size: 30px; }

    .global-map__area { padding-bottom: 20px; }
    .global-map__area .bg-1, .global-map__area .bg-2 { display: none; }
    .global-map__area .pc-map { display: none; }
    .global-map__area .mo-map { display: block; }
    .global-info__list { position: static; margin-top: 20px; transform: translateX(0); }
    .client__area h4 { font-size: 30px; }
    .client__list > li { width: calc((100% - 40px)/3); }

    .content-list .item { width: calc(50% - 10px); }

    .product-swiper { border-radius: 10px; }
    .thumb-swiper { margin-top: 20px; }
    .thumb-swiper .swiper-slide {border-radius: 5px; }
    .detail__top .right .title__area .tag { font-size: 14px; }
    .detail__top .right .title__area .title { font-size: 36px; }
    .detail__top .right .title__area .text { font-size: 18px; }
    .info__area > p { font-size: 20px; }
    .info__list > li { font-size: 16px; }

    .detail-info .title { font-size: 28px; }
    .detail-table thead th{ font-size: 18px; }
    .detail-table tbody th{ font-size: 16px; }
    .detail-table tbody td { font-size: 16px; }

    .form__label { width: 90px; font-size: 16px; }
    .input__inner { width: calc(100% - 90px); border-radius: 5px; }
    .form__input { height: 40px; padding: 0 14px; font-size: 14px; }
    .email-box { height: 40px; padding: 0 14px; }
    .email-box > .box > span { font-size: 14px; }
    .email-box > .box > input { max-width: 140px; font-size: 14px; }
    .form__select { width: 160px; height: 30px; padding: 0 10px; border-radius: 5px; font-size: 14px; background-position: calc(100% - 10px) center; }
    .input__inner .chk__box { min-height: 40px; }
    .chk__label > span, .radio__label > span { font-size: 14px; }
    .input__inner .terms__text { border-radius: 5px; padding: 10px 10px 10px 14px; }
    .terms__text .scroll-inner { padding: 4px 4px 4px 0; }
    .input__inner .terms__text p { font-size: 14px; }
    .input__inner .terms__text p .dot { width: 16px; height: 16px;  }
    .input__inner .terms__text p .dot::after {  width: 2px; height: 2px; }
    .textarea .scroll-inner { padding: 10px 10px 10px 14px; }
    .form__textarea { padding: 4px 4px 4px 0; font-size: 14px; }
    .input__inner .chk__box { padding: 14px; }
    .kcaptcha-box .kcaptcha-img { width: 131px; height: 40px; border-radius: 5px; }
    .kcaptcha-box .form__input { width: 131px; border-radius: 5px; }
    #btnKcaptcha { width: 40px; height: 40px; font-size: 0; border-radius: 5px; background: url("/img/common/icon_refresh.svg") no-repeat center center/auto; }

    .img_borad_list .item { width: calc(50% - 20px); }

    .view_ctn .tit { padding: 30px 10px; }
    .view_ctn .tit h2 { font-size: 26px; }
    .view_ctn .tit ul li { font-size: 16px; }
    .view_ctn .info { font-size: 16px; padding: 40px 10px; }
    .view_ctn .file_box dl dt { width: 90px; font-size: 14px; }
    .view_ctn .file_box dl dd { width: calc(100% - 90px); }
    .view_ctn .file_box dl dd a { font-size: 14px;  }
    .view_ctn .file_box dl dd a span { right: 20px; font-size: 14px;  }
    .view_ctn .button__wrap { margin-top: 60px; }
}
@media screen and (max-width:768px) {
    .navigation > li > a, .navigation > li > span { font-size: 14px; }
    .navigation > li > a img { width: 24px; }
    .depth2-tab .tab__item { height: 50px; }
    .company .depth2-tab { flex-wrap: wrap; border-bottom: none; }
    .company .depth2-tab .tab__item { flex: none; width: calc(100% / 3); max-width: initial; border-bottom: 1px solid #DDDDDD; }
    .company .depth2-tab .tab__item:nth-child(3n + 1)::before { display: none; }
    .content-title { padding-top: 16px; font-size: 34px; }
    .style-dot::after { width: 6px; height: 6px; }

    .greeting__content .video__box .btn-play { width: 60px; height: 60px; background-position: calc(50% + 3px) center; background-size: 18px; }
    .greeting__content .video__box::after { height: 80px; }
    .greeting__content .text__area { height: 700px; }
    .greeting__content .text__area p { font-size: 14px; }

    .sticky-bg { top: 400px; height: calc(100% - 500px); }
    .history__wrap .line {left: 0; }
    .history__wrap .left { display: none; }
    .history__wrap .right { width: 100%; max-width: initial; padding-left: 30px; }
    .marquee__inner .slide { animation-duration: 12s; }
    .marquee__inner .slide img { width: 380px; }

    .map-box { height: 300px; }
    .map-info { flex-direction: column; align-items: flex-start; gap: 30px; padding-top: 30px; }
    .map-info .logo-box { width: 100%; height: clamp(140px,26.04vw,200px); }
    .map-info .logo-box img { width: 50%; max-width: 260px; }
    .map-info .info-box { width: 100%; }
    .mail-info__area h4 { font-size: 26px; }
    .mail-info__list > li { width: 100%; justify-content: left; padding: 20px 30px; }

    .global-info__list { flex-wrap: wrap; gap: 10px; }
    .global-info__list > li { flex: none; width: calc(50% - 5px); padding: 10px; }
    .global-info__list .title { font-size: 16px; }
    .global-info__list .text { margin-top: 4px; font-size: 14px; }
    .client__area h4 { font-size: 26px; }
    .client__list > li { width: calc(50% - 10px); height: 100px; }

    .content-list { gap: 30px 20px; }
    .content-list .item { padding: 10px; }
    .content-list .item .text-box { padding: 10px 6px 14px; }
    .content-list .item .text-box .tag { margin-bottom: 10px; padding: 6px 12px; font-size: 13px; } 
    .content-list .item .text-box .title { font-size: 18px; }
    .content-list .item .text-box .text { font-size: 14px; }

    .form__item .box-1, .form__item .box-2 { flex-wrap: wrap; }
    .form__item .box-2 { width: 100%; }
    .input__inner { width: 100%; }
    .form__label { width: 100%; margin-bottom: 6px; }
    .form__label > br { display: none; }
    .input__inner .chk__box { gap: 10px 20px; }
    .input__inner .chk__box .chk__label { width: calc(50% - 10px); }

    .paging { margin-top: 60px; }
    .paging a { width: 24px; height: 24px; font-size: 14px; }
    .paging .arr a:not(:last-child),.paging ul li:not(:last-child) { margin-right: 4px; }
    .paging .arr a i { width: 6px; }
    .paging ul { margin: 0 10px; }

    .detail__top { flex-direction: column; row-gap: 60px; }
    .detail__top .left, .detail__top .right { width: 100%; }
    .detail__top .right .title__area { padding-left: 0; }
    .detail__top .right .title__area .tag { padding: 6px 12px; font-size: 13px; }
    .detail__top .right .title__area .title { font-size: 30px; }
    .detail__top .right .title__area .text { font-size: 16px; }
    .detail__top .btn { width: 50%; font-size: 16px; }
    .info__area { padding-left: 0; margin-top: 24px; }
    .info__list { margin-bottom: 40px; }
    .detail__area { margin-top: 80px; padding-bottom: 60px; }

    .detail-tab .tab__item { height: 50px; font-size: 14px; }
    .detail-info { padding-top: 60px; }
    .detail-table thead th { font-size: 16px; }
    .detail-table tbody th { font-size: 14px; }
    .detail-table tbody td { font-size: 14px; }

    .img_borad_list { gap: 40px 20px; }
    .img_borad_list .item { width: calc(50% - 10px); }
    .img_borad_list .item .text-box .title { font-size: 18px; }
    .img_borad_list .item .text-box .date { font-size: 14px; }

    .view_ctn .tit h2 { font-size: 20px; }
    .view_ctn .file_box { padding: 4px 0; }
    .view_ctn .file_box dl dd a { padding: 10px; }
    .view_ctn .file_box dl dd a span { right: 10px; font-size: 0; }
    .view_ctn .file_box dl dd a .icon-download { margin-right: 0; }
}
@media screen and (max-width:500px) {
    .greeting-visual .text p .mo-br { display: block; }
    .map-info .info-box dt { width: 100%; }
    .map-info .info-box dl { flex-direction: column; align-items: flex-start; gap: 6px; }
    .map-info .info-box dd { width: 100%; padding-left: 40px; }

    .client__list > li { width: 100%; }

    .content-list { gap: 20px; }
    .content-list .item { width: 100%; }

    .img_borad_list .item { width: 100%; } 

    .paging a { width: 22px; height: 22px; font-size: 13px; }
}

@keyframes upDownArrow {
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-22px); }
    100%{ transform: translateY(0px); }
}
@keyframes marquee {
    0% { transform: translateX(0vw); }
    100% { transform: translateX(calc(-100% - 20px)); }
}
@keyframes marquee2 {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-200%); }
}
@keyframes upDown {
    0% { transform: translateY(0px); }
    49%{ transform: translateY(-13px); }
    50%{ transform: translateY(-13px); }
    99% { transform: translateY(0px); }
    100% { transform: translateY(0px); }
}
@keyframes circle01-1 {
    0% { transform: scale(0); }
    24% { transform: scale(0.85); }
    62% { transform: scale(1); }
    100% { transform: scale(0); }
}
@keyframes circle02-1 {
    0% { transform: scale(0.55); opacity: 0;}
    24% { transform: scale(0.55); opacity: 1;}
    62% {  transform: scale(1); opacity: 1;}
    100% { opacity: 0;}
}
@keyframes visualTitle {
    0% { letter-spacing: -0.4em; opacity: 0;}
    60% { opacity: 0.5; }
    100% { letter-spacing: -0.02em; opacity: 1; }
}
@keyframes textUp {
    0%{ transform: translateY(50%); opacity: 0; }
    100%{ transform: translateY(0%); opacity: 1; }
}

@supports not (height: 100dvh) {
    .greeting-visual { height: 100vh; }
}