@charset "UTF-8";
/*

 */
@import url(../../../common/css/wl.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;500;700;900&family=Noto+Sans+KR:wght@300;400;500;700;900&family=PT+Mono&display=swap');

/* 혁신
.brand-orbit-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    
    /* 1. z-index를 매우 높게 설정 (헤더보다도 앞서게 하려면 9999 등) */
    z-index: 9999; 
    
    /* 2. 중요: 이게 있어야 행성 뒤에 있는 버튼이나 글자를 클릭/드래그할 수 있습니다. */
    pointer-events: none; 
    
    overflow: hidden;
}

.orbit-sphere {
    position: absolute;
    /* 기본 위치는 왼쪽 (-150px) + 스크롤에 따른 변화량 */
    left: calc(-150px + var(--scroll-x, 0px)); 
    top: 50%;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    transform: translateY(-50%);

    /* 나머지 배경 및 효과는 기존과 동일하게 유지 */
    background-image: url('../images/ci.png'), radial-gradient(...);
    background-size: 220px auto, cover;
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* 기존 위아래 둥둥 떠 있는 효과는 그대로 둠 */
    animation: orbit-float-top 18s ease-in-out infinite;
    /* 자연스러운 이동을 위한 부드러운 전환 추가 */
    transition: left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* 파이프라인 */


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* 4. 헤더 스타일 */
header {
    text-align: center;
    margin-bottom: 60px;
}

header h1 {
    font-size: 2.5rem;
    background: linear-gradient(to right, #fff, #8fe3cf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

/* 5. 파이프라인 그리드 및 글래스모피즘 카드 */
.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.pipeline-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pipeline-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(143, 227, 207, 0.4);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* 6. 텍스트 컴포넌트 (h6 전용 오로라 효과) */
.medical-component h6 {
    font-size: 2.8rem;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
    font-weight: 800;
    background: linear-gradient(-45deg, #fff, #8fe3cf, #1e3a8a, #8fe3cf, #fff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textAurora 8s ease infinite;
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2));
}

.step-num {
    display: inline-block;
    background: rgba(143, 227, 207, 0.2);
    color: #8fe3cf;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.status-badge {
    margin-top: 15px;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(30, 58, 138, 0.6);
    display: inline-block;
}

.status-badge.ongoing {
    background: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

/* 메인 페이지용 행성 스타일 */
.planet-bg {
    position: absolute;
    /* 위치를 디자인에 따라 좌측 또는 우측으로 조절하세요 */
    left: -10%; 
    top: 50%;
    width: 800px;  /* 메인에서는 조금 더 크게 설정 가능 */
    height: 800px;
    z-index: 1;    /* 배경이면 -1, 콘텐츠 앞이면 적절히 조절 */
    border-radius: 50%;
    pointer-events: none; /* 행성이 클릭을 방해하지 않도록 설정 */

    /* 이미지와 그라데이션 */
    background-image: 
        url('../images/ci.png'), 
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 255, 255, 0.4) 0%,      
            rgba(64, 190, 228, 0.3) 40%,      
            rgba(87, 64, 153, 0.4) 80%        
        );
    
    background-repeat: no-repeat;
    background-position: center center, center center;
    background-size: 300px auto, cover; /* 로고 크기도 조금 키움 */

    /* 글래스모피즘 효과 */
    backdrop-filter: blur(40px) saturate(130%);
    -webkit-backdrop-filter: blur(40px) saturate(130%);
    box-shadow: 
        inset -30px -30px 70px rgba(87, 64, 153, 0.3),
        inset 30px 30px 70px rgba(255, 255, 255, 0.2),
        0 15px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* 애니메이션 호출 */
    animation: main-planet-flow 18s ease-in-out infinite;
}

/* 메인용 통합 애니메이션 (자전 + 흐름 + 박동) */
@keyframes main-planet-flow {
    0% { 
        background-position: center center, 0% 50%; 
        transform: translateY(-50%) rotate(0deg) scale(1);
    }
    50% { 
        background-position: center center, 100% 50%; 
        transform: translateY(-53%) rotate(3deg) scale(1.08); /* 미세한 위치 변화와 박동 */
    }
    100% { 
        background-position: center center, 0% 50%; 
        transform: translateY(-50%) rotate(0deg) scale(1);
    }
}



/* 테크 소개

/* Strain Cards */

/* 무료 폰트 매핑 가이드:
   - Exo 2 -> 'Exo 2' (테크/바이오 미래지향적 감성)

   - Noto Sans -> 구글 CDN 버전으로 통합
*/

   
/* 1. 기본 폰트 (Noto Sans 통합) */
body, input, select, textarea, button {
    font-family: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC', 'Noto Sans SC', sans-serif;
    font-weight: 400;
}

/* 2. Exo 2 대체 (Exo 2) */
.Exo 2-style, 
[style*="Exo 2"],
.title-visual text { 
    font-family: 'PT Mono', sans-serif !important; 
}


/* 4. PT Mono (기존과 동일하지만 구글 폰트로 연결) */
.mono-style, 
.pt-mono { 
    font-family: 'PT Mono', monospace !important; 
}


/* variables */
html, body {
    height: 100%;
}

body {
    font-size: 18px;
    line-height: 1.555;
    font-family: "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR", sans-serif;
    color: #000;
    word-break: keep-all;
}

@media (max-width: 767px) {
    body {
        overflow-x: hidden;
        font-size: 14px;
        line-height: 1.5;
    }
}

select, input, textarea, button, mark {
    font-family: "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

::placeholder {
    color: #000;
}

::-webkit-input-placeholder {
    color: #000;
}

:-moz-placeholder {
    color: #000;
}

::-moz-placeholder {
    color: #000;
}

:-ms-input-placeholder {
    color: #000;
}

:disabled {
    opacity: 0.4;
}

/* form */
select, input, textarea {
    font-size: 16px;
    letter-spacing: -0.025em;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    select, input, textarea {
        font-size: 14px;
    }
}

input[type='text'][readonly], input[type='number'][readonly], textarea[readonly] {
    background-color: #f8f8f8;
}

select {
    height: 50px;
    border: 1px solid #ddd;
    padding: 0 53px 0 20px;
    background-image: url("../images/icon-selectbox.png");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

.f-textarea {
    border: 1px solid #ddd;
    padding: 20px;
    overflow: hidden;
    overflow-y: auto;
    line-height: 28px;
}

.f-text {
    height: 50px;
    border: 1px solid #ddd;
    text-indent: 20px;
}

.f-file {
    display: inline-block;
    width: 100%;
    height: 50px;
    margin-left: -100%;
    background-image: url("../images/icon-file.png");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

.f-file input {
    width: 100%;
    height: 100%;
    opacity: 0.001;
    cursor: pointer;
}

@media (max-width: 767px) {
    select {
        height: 40px;
        padding: 0 32px 1px 15px;
        background-size: auto 100%;
        background-image: url("../images/icon-selectbox-mobile.png");
    }

    .f-textarea {
        padding: 15px;
        line-height: 22px;
    }

    .f-text {
        height: 40px;
        text-indent: 15px;
        padding-bottom: 1px;
    }

    .f-file {
        height: 40px;
        background-size: auto 100%;
        background-image: url("../images/icon-file-mobile.png");
    }
}

input[type='checkbox'] {
    position: absolute;
    opacity: 0;
}

input[type='checkbox'] + label {
    position: relative;
    padding-left: 23px;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    letter-spacing: -0.025em;
    color: #000;
}

input[type='checkbox'] + label:before,
input[type='checkbox'] + label:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -7px;
    box-sizing: border-box;
}

input[type='checkbox'] + label:before {
    border: 1px solid #ddd;
}

input[type='checkbox'] + label:after {
    background-image: url("../images/icon-check.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    display: none;
}

input[type='checkbox']:checked + label:after {
    display: block;
}

input[type='checkbox'] + label.nolabel {
    padding-left: 16px;
}

input[type='checkbox'][disabled] + label {
    opacity: 0.4;
}

@media (max-width: 767px) {
    input[type='checkbox'] + label {
        padding-left: 22px;
        font-size: 14px;
    }

    input[type='checkbox'] + label:before,
  input[type='checkbox'] + label:after {
        width: 15px;
        height: 15px;
        margin-top: -7px;
    }

    input[type='checkbox'] + label:after {
        background-size: 10px auto;
    }
}

.search-keyword {
    font-size: 0;
    text-align: center;
}

.search-keyword .s-select, .search-keyword .s-text {
    height: 50px;
    border: none;
    border-bottom: 1px solid #000;
}

.search-keyword .s-select {
    width: 160px;
    padding: 0 20px 0 10px;
    margin-right: 26px;
    background-image: url("../images/icon-search-selectbox.png");
}

.search-keyword .s-text {
    width: 383px;
    text-indent: 10px;
}

.search-keyword .btn-search {
    width: 38px;
    height: 50px;
    margin-left: -38px;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    background-image: url("../images/icon-search-submit.png");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .search-keyword .search-wrap {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .search-keyword .s-select, .search-keyword .s-text {
        height: 40px;
    }

    .search-keyword .s-select {
        flex: 1;
        width: auto;
        margin-right: 15px;
        padding-left: 0;
        background-image: url("../images/icon-search-selectbox-mobile.png");
        background-size: 12px 6px;
    }

    .search-keyword .s-text {
        width: 100%;
        max-width: 205px;
        text-indent: 0;
    }

    .search-keyword .s-select + .s-text {
        flex: 2.2;
        max-width: initial;
    }

    .search-keyword .btn-search {
        flex: none;
        height: 40px;
        background-image: url("../images/icon-search-submit-mobile.png");
        background-size: 14px 14px;
    }
}

/* module */
br.pc {
    display: inline;
}

br.mobile {
    display: none;
}

@media (max-width: 767px) {
    br.pc {
        display: none;
    }

    br.mobile {
        display: inline;
    }
}

/* 1. 공통 기반: 더 대담하고 정교한 타이포그래피 */
.title-visual {
    text-transform: uppercase;
    letter-spacing: 0.15em; 
    font-size: 72px; /* 살짝 키워 시원하게 표현 */
    font-weight: 800; /* 더 굵게 하여 존재감 부여 */
    font-family: "Exo 2", "Inter", sans-serif;
    line-height: 1.1;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 2. 포인트 컬러 버전 (typeline): 오로라 그라데이션 */
:not(.ie) .title-visual.typeline {
    /* 기존 외곽선 대신 그라데이션 채우기 */
    background: linear-gradient(
        120deg, 
        #a13c98, /* 마젠타 */
        #574099, /* 딥 퍼플 */
        #00e5ff, /* 사이안 */
        #ff6b6b, /* 코랄 */
        #a13c98  /* 마젠타 (루프) */
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* 오로라 움직임 애니메이션 */
    animation: auroraGlowText 6s ease-in-out infinite;
    
    /* 신비로운 광채 효과 */
    filter: drop-shadow(0 0 10px rgba(87, 64, 153, 0.5));
}

/* 3. 화이트 외곽선 버전 (typelinewhite): 미니멀리즘 + 은은한 광채 */
:not(.ie) .title-visual.typelinewhite {
    /* 외곽선을 아주 가늘게(0.8px) 하여 섬세한 느낌 강조 */
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);
    color: transparent;
    opacity: 0.9;
    
    /* 화이트 오로라처럼 미세하게 빛나는 효과 */
   filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
    animation: whiteAurora 12s ease-in-out infinite alternate;
}

/* 4. 애니메이션 정의 */
@keyframes auroraGlowText {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes whiteAurora {
    0% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.15)); }
    100% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35)); opacity: 1; }
}

/* 5. SVG 텍스트 호환성 (사라짐 방지용) */
.title-visual.typeline text,
.title-visual.typelinewhite text {
    font-size: 72px;
    font-weight: 800;
    font-family: "Exo 2", sans-serif;
    stroke-width: 1px;
}

.title-visual.typeline text {
    /* SVG 그라데이션 설정 필요 (CSS 그라데이션과 동일한 색상 사용 권장) */
    stroke: url(#auroraGradient); 
    fill: none;
}

.title-visual.typelinewhite text {
    stroke: rgba(255, 255, 255, 0.8);
    fill: none;
}

/* 6. 인터랙션: 마우스 올리면 글자가 더 선명해지는 효과 */
.title-visual:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}
.title-visual .ls-motion {
    white-space: nowrap;
    margin-left: -500px;
    margin-right: -500px;
    display: block;
    transition: letter-spacing 2s cubic-bezier(0.19, 0.92, 0.32, 1), opacity 2s;
}

section:not(.show) .title-visual .ls-motion {
    letter-spacing: 1.5em;
    opacity: 0;
}

.title-visual.show .text h2 {
    transition: letter-spacing 700ms;
}

.title-visual > em {
    position: relative;
    display: block;
    margin-bottom: 7px;
}

.title-visual > span {
    display: block;
    font-size: 24px;
    font-weight: 300;
    font-family: inherit;
    letter-spacing: 0;
    font-family: "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.ie .visual-sub.tech1 .title-visual.typelinewhite {
    color: #597081;
}

.ie .visual-sub.tech2 .title-visual.typelinewhite {
    color: #7c939f;
}

.ie .visual-sub.biz1 .title-visual.typelinewhite {
    color: #070a0f;
}

.ie .visual-sub.biz2 .title-visual.typelinewhite {
    color: #adbfc6;
}

@media (max-width: 767px) {
    .title-visual {
        font-size: 30px;
        line-height: 36px;
        letter-spacing: 0.06em;
        padding-top: 20px;
    }

    .visual-sub.higher .title-visual {
        font-size: 30px;
        line-height: 36px;
    }

    .visual-sub.higher .title-visual > span {
        font-size: 15px;
    }

    .visual-sub.higher .title-visual > em {
        margin-top: 4px;
    }

	
    .video-container {
        width: 100%;
        background-color: #000; /* 영상 로딩 전 검은 배경 */
    }
    
    .video-container video {
        width: 100%;   /* 가로 꽉 채움 */
        height: auto;  /* 비율 유지 */
        display: block;
    }
}
	
}

.title-piece {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 42px;
    font-weight: 700;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

@media (max-width: 767px) {
    .title-piece {
        font-size: 27px;
        line-height: 36px;
    }
}

.title-sub {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 36px;
    font-weight: 700;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    line-height: 40px;
}

@media (max-width: 767px) {
    .title-sub {
        font-size: 24px;
        line-height: 31px;
    }
}

.title-cs {
    font-size: 48px;
    font-weight: 700;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    line-height: 48px;
}

.title-cs [lang="en"] {
    letter-spacing: 0.025em;
}

.title-cs em {
    display: block;
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: 400;
    word-break: keep-all;
}

.title-cs em.Exo 2 {
    font-family: 'Exo 2';
    font-weight: 600;
}

@media (max-width: 767px) {
    .title-cs {
        font-size: 30px;
        line-height: 36px;
    }

    .title-cs em {
        font-size: 18px;
        line-height: 24px;
    }
}

.title-csub {
    font-size: 40px;
    font-weight: 500;
    font-family: inherit;
}

@media (max-width: 767px) {
    .title-csub {
        padding: 0 35px;
        font-size: 27px;
        line-height: 37px;
    }
}

.title-bar {
    position: relative;
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    line-height: 32px;
}

.title-bar:before {
    content: '';
    position: absolute;
    left: 0;
    top: -18px;
    width: 16px;
    height: 4px;
    background-color: #00baf2;
}

@media (max-width: 767px) {
    .title-bar {
        font-size: 18px;
        line-height: 28px;
    }

    .title-bar:before {
        left: 1px;
        top: -17px;
        width: 15px;
        height: 3px;
    }
}

.title-dart {
    position: relative;
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    line-height: 65px;
}

@media (max-width: 767px) {
    .title-dart {
        font-size: 18px;
        line-height: 40px;
    }
}

[class^='btn-line'] {
    display: inline-block;
    min-width: 152px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 20px;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #fff;
    line-height: 38px;
    transition-property: color, background-color;
    transition-duration: 250ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.hoverable [class^='btn-line']:hover {
    background-color: #fff;
    color: #000;
}

@media (max-width: 767px) {
    [class^='btn-line'] {
        min-width: 145px;
        height: 40px;
        font-size: 14px;
        line-height: 39px;
    }
}

/* 1. 라인 버튼 (기존 검정 라인 -> 오로라 보더 버튼) */
.btn-line-black {
    position: relative;
    border: none; /* 기존 보더 제거 */
    background: #fff; /* 배경색 */
    color: #574099; /* 텍스트는 포인트 컬러 */
    z-index: 1;
    overflow: hidden;
}

/* 테두리에 오로라 효과 주기 */
.btn-line-black::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px; /* 보더 두께 역할 */
    border-radius: 30px;
    background: linear-gradient(120deg, #574099, #a3419a, #00e5ff, #574099);
    background-size: 300% auto;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: auroraFlow 4s linear infinite;
}

.hoverable .btn-line-black:hover {
    color: #fff;
    background: transparent;
    transition: 0.3s;
}

/* 호버 시 배경이 꽉 차는 효과 */
.hoverable .btn-line-black:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #574099, #a3419a);
    z-index: -1;
    animation: auroraFlow 4s linear infinite;
}


/* 2. 컬러 버튼 (고정 그라데이션 -> 흐르는 오로라 버튼) */
.btn-color {
    display: inline-block;
    min-width: 199px;
    height: 60px;
    border-radius: 30px;
    padding: 0 10px 3px;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    font-weight: 500; /* 조금 더 선명하게 */
    color: #fff;
    line-height: 58px;
    font-family: 'Montserrat', 'Noto Sans KR';
    
    /* 칙칙한 고정 색상 대신 움직이는 오로라 그라데이션 */
    background: linear-gradient(120deg, #574099, #a3419a, #7000ff, #574099);
    background-size: 200% auto;
    background-repeat: no-repeat;
    
    border: none;
    box-shadow: 0 4px 15px rgba(87, 64, 153, 0.3); /* 입체감 추가 */
    animation: auroraFlow 4s linear infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hoverable .btn-color:hover {
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 8px 25px rgba(87, 64, 153, 0.5);
    filter: brightness(1.1);
}

/* 3. 공통 애니메이션 */
@keyframes auroraFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@media (max-width: 767px) {
    .btn-color {
        min-width: 150px;
        height: 50px;
        font-size: 16px;
        line-height: 49px;
        font-weight: 500;
    }
}

.btn-share {
    position: relative;
    display: inline-flex;
    width: 33px;
    height: 33px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.btn-share:before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("../images/set-icon-share.png") no-repeat;
}

.btn-share.facebook:before {
    background-position: -0px 0;
}

.btn-share.twitter:before {
    background-position: -16px 0;
}

.btn-share.urlcopy:before {
    background-position: -32px 0;
}

.btn-share:before {
    width: 16px;
    height: 16px;
    background-size: auto 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .btn-share {
        width: 27px;
    }
}

.btn-wrap {
    padding-top: 40px;
    text-align: center;
}

@media (max-width: 767px) {
    .btn-wrap {
        padding-top: 35px;
    }
}

.btn-arrow {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #fff;
    transition-property: background-color;
    transition-duration: 250ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.btn-arrow:before {
    content: '';
    width: 8px;
    height: 15px;
    background-image: url("../images/icon-arrow.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.btn-arrow.next:before {
    transform: translate(-50%, -50%) rotate(180deg);
}

.btn-arrow[disabled] {
    pointer-events: none;
}

.hoverable .btn-arrow:hover {
    background-color: #d7d7d7;
}

.no-result {
    line-height: 10em;
    text-align: center;
    margin-top: 80px;
    background: #f0f2f5;
}

.pg-wrap {
    text-align: center;
    margin-top: 45px;
}

.pg-wrap a {
    padding: 0 5px;
    margin: 0 4px;
    vertical-align: middle;
    font-size: 18px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #000;
}

.pg-wrap a.current {
    color: #00baf2;
}

.pg-wrap .btn-arrow {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 40px;
    background-color: #f0f2f5;
    border-radius: 20px;
    vertical-align: middle;
    transform: translateY(-1px);
    box-sizing: border-box;
    transition-property: background-color;
    transition-duration: 250ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.pg-wrap .btn-arrow:not([href]) {
    pointer-events: none;
    opacity: 0.4;
}

.pg-wrap .btn-arrow:before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pg-wrap .btn-arrow:before {
    content: '';
    width: 7px;
    height: 11px;
    background: url("../images/set-icon-pg.png") no-repeat;
}

.pg-wrap .btn-arrow.prev:before {
    background-position: -0px 0;
}

.pg-wrap .btn-arrow.next:before {
    background-position: -7px 0;
}

.pg-wrap .btn-arrow.prev {
    margin-right: 15px;
}

.pg-wrap .btn-arrow.next {
    margin-left: 15px;
}

@media (max-width: 767px) {
    .pg-wrap {
        margin-top: 50px;
    }

    .pg-wrap a {
        font-size: 14px;
        padding: 0 7px;
        vertical-align: 1px;
    }

    .pg-wrap .btn-arrow {
        width: 30px;
        height: 30px;
    }

    .pg-wrap .btn-arrow:before {
        content: '';
        width: 5px;
        height: 9px;
        background: url("../images/set-icon-pg-mobile.png") no-repeat;
    }

    .pg-wrap .btn-arrow.prev:before {
        background-position: -0px 0;
    }

    .pg-wrap .btn-arrow.next:before {
        background-position: -5px 0;
    }

    .pg-wrap .btn-arrow:before {
        background-size: auto 9px;
    }
}

.range-width-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 50%;
    min-width: 1440px;
    z-index: 20;
}

.range-width-wrap .range-wrap {
    position: absolute;
}

.range-wrap {
    position: fixed;
    right: 68px;
    top: 50%;
    width: 17px;
    height: 230px;
    transform: translateY(-50%);
    text-align: center;
    z-index: 20;
    opacity: 0;
    -mix-blend-mode: difference;
    transition-property: opacity;
    transition-duration: 500ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.range-wrap .inwrap {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.range-wrap .inwrap.type-black em {
    color: #000;
}

.range-wrap .inwrap.type-black .bar {
    background-color: rgba(0, 0, 0, 0.15);
}

.range-wrap .inwrap.type-black .pointer {
    background-color: #000;
}

.range-wrap em {
    position: relative;
    height: 1.555em;
    text-align: center;
    display: block;
    margin-bottom: 16px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #fff;
    line-height: 1.555;
    transition-property: color;
    transition-duration: 450ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.range-wrap em:last-of-type {
    margin: 17px 0 0;
}

.range-wrap em > span {
    display: block;
    transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.range-wrap em > span span {
    display: block;
    opacity: 0;
    transition: opacity 450ms;
}

.range-wrap em > span.page-1 {
    transform: translate3d(0, -0em, 0);
}

.range-wrap em > span.page-1 span:nth-child(1) {
    opacity: 1;
}

.range-wrap em > span.page-2 {
    transform: translate3d(0, -1.555em, 0);
}

.range-wrap em > span.page-2 span:nth-child(2) {
    opacity: 1;
}

.range-wrap em > span.page-3 {
    transform: translate3d(0, -3.11em, 0);
}

.range-wrap em > span.page-3 span:nth-child(3) {
    opacity: 1;
}

.range-wrap em > span.page-4 {
    transform: translate3d(0, -4.665em, 0);
}

.range-wrap em > span.page-4 span:nth-child(4) {
    opacity: 1;
}

.range-wrap em > span.page-5 {
    transform: translate3d(0, -6.22em, 0);
}

.range-wrap em > span.page-5 span:nth-child(5) {
    opacity: 1;
}

.range-wrap em > span.page-6 {
    transform: translate3d(0, -7.775em, 0);
}

.range-wrap em > span.page-6 span:nth-child(6) {
    opacity: 1;
}

.range-wrap em > span.page-7 {
    transform: translate3d(0, -9.33em, 0);
}

.range-wrap em > span.page-7 span:nth-child(7) {
    opacity: 1;
}

.range-wrap em > span.page-8 {
    transform: translate3d(0, -10.885em, 0);
}

.range-wrap em > span.page-8 span:nth-child(8) {
    opacity: 1;
}

.range-wrap em > span.page-9 {
    transform: translate3d(0, -12.44em, 0);
}

.range-wrap em > span.page-9 span:nth-child(9) {
    opacity: 1;
}

.range-wrap .bar {
    display: block;
    width: 1px;
    height: 100px;
    margin-left: 8px;
    background-color: rgba(255, 255, 255, 0.15);
    transition: height 750ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 450ms;
}

.range-wrap .bar .pointer {
    display: block;
    width: 100%;
    background-color: #fff;
    transition: height 250ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 450ms;
    transition: background-color 350ms;
}

.range-wrap.show {
    opacity: 1;
}

.range-wrap.show .bar {
    height: 160px;
}

@media (max-width: 767px) {
    .range-wrap {
        visibility: hidden;
    }
}

.tab-wrap {
    padding: 0 50px;
}

.tab-wrap ul {
    display: flex;
    max-width: 1200px;
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
    margin: 76px auto 0;
}

.tab-wrap li {
    flex: 1;
    height: 65px;
}

.tab-wrap a {
    display: flex;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 400;
    font-family: inherit;
    color: rgba(0, 0, 0, 0.5);
}

.tab-wrap a.current {
    color: #00baf2;
    box-shadow: inset 0 -4px 0 0 #00baf2;
}

@media (max-width: 767px) {
    .tab-wrap {
        padding: 0;
    }

    .tab-wrap ul {
        margin-top: 36px;
        padding: 0 5px;
        box-shadow: none;
        white-space: nowrap;
        box-sizing: border-box;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        margin-bottom: -5px;
    }

    .tab-wrap li {
        white-space: nowrap;
        height: 39px;
        padding: 0 15px;
    }

    .tab-wrap a {
        display: inline-block;
        font-size: 15px;
        padding: 9px 5px 0;
    }

    .tab-wrap a.current {
        box-shadow: inset 0 -2px 0 0 #00baf2;
    }
}

[data-lazy]:not([data-lazy*="grouped"]),
[data-lazy*="grouped"] > * {
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s, transform 2s cubic-bezier(0.19, 0.92, 0.32, 1);
}

[data-lazy*="grouped"] *:nth-child(1) {
    transition-delay: 150ms;
}

[data-lazy*="grouped"] *:nth-child(2) {
    transition-delay: 300ms;
}

[data-lazy*="grouped"] *:nth-child(3) {
    transition-delay: 450ms;
}

[data-lazy="left"],
[data-lazy*="grouped"][data-lazy*="left"] > *:not([data-lazy-self="opacity"]) {
    transform: translate3d(100px, 0, 0);
}

[data-lazy="top"],
[data-lazy*="grouped"][data-lazy*="top"] > *:not([data-lazy-self="opacity"]) {
    transform: translate3d(0, 150px, 0);
}

[data-lazy]:not([data-lazy*="grouped"]).show,
[data-lazy*="grouped"].show > * {
    opacity: 1 !important;
}

[data-lazy]:not([data-lazy*="grouped"])[data-lazy*="left"].show,
[data-lazy]:not([data-lazy*="grouped"])[data-lazy*="top"].show,
[data-lazy*="grouped"][data-lazy*="left"].show > *,
[data-lazy*="grouped"][data-lazy*="top"].show > * {
    transform: translate3d(0, 0, 0) !important;
}

@media (max-width: 767px) {
    [data-lazy="top"],
  [data-lazy*="grouped"][data-lazy*="top"] > *:not([data-lazy-self="opacity"]) {
        transform: translate3d(0, 100px, 0);
    }
}

/* layout */
#header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 111px;
    padding-top: 45px;
    white-space: nowrap;
    min-width: 1200px;
    box-sizing: border-box;
    z-index: 30;
    transition-property: transform, background;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.165, 0.840, 0.250, 1.000);
    transition-delay: 0ms;
  /*
    @include respond('JUNCTION'){
        .snb {display: none;}
        .lang {display: none;}
        .btn-list {display: block;z-index: 15;}
        .lang {
            position: static; height: auto; width: 100%; padding: 0 0 17px; text-align: center; background-color: #fff !important; font-size: 0;
            a {
                display: inline-block; padding: 2px 5px 5px; margin: 0 13px 0 13px; font-size: 11px;
                &.current {color: #ee3897;}
            }
        }
        &.open {
            .snb, .lang {display: block;}
        }
    }
    */
}

#header:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 360px;
    content: '';
    background: #fff;
    transform: translate3d(0, -124px, 0);
    opacity: 0;
    pointer-events: none;
    transition: transform 350ms cubic-bezier(0.165, 0.84, 0.25, 1), opacity 250ms;
}

#header .inner {
    position: relative;
    width: 100%;
}

#header h1 {
    position: absolute;
    left: 50px;
    top: 1px;
    width: 180px;
    height: 50px;
}

#header h1 a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    background-image: url("../images/ci-white.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    transition-property: background;
    transition-duration: 400ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

#header .lang {
    position: absolute;
    right: 50px;
    top: 0;
    width: 54px;
    height: 54px;
    padding: 12px 0;
    background-color: #fff;
    border-radius: 27px;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 15;
    transition-property: height;
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.35, 1);
    transition-delay: 0ms;
}

#header .lang a {
    display: block;
    text-align: center;
    padding: 7px 0 6px;
    font-size: 12px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #000;
}

.hoverable #header .lang a:hover {
    color: #ee3897;
}

#header .lang a.current {
    pointer-events: none;
}

#header .lang a:not(.current) {
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 200ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.hoverable #header .lang:hover,
    .touchable #header .lang.open {
    height: 148px;
    transition-duration: 600ms;
}

.hoverable #header .lang:hover a,
      .touchable #header .lang.open a {
    opacity: 1;
    transition: color 400ms, opacity 400ms 100ms;
    pointer-events: auto;
}

.ie #header .lang, .edge #header .lang {
    padding: 11px 0 13px;
}
/* 1. 모바일 버튼 기본 색상을 그라데이션으로 고정 (선택 사항) */
@media (max-width: 767px) {
    #header .btn-list {
        display: block !important; /* 확실히 보이게 처리 */
        /* 모바일에서는 호버가 없으므로 기본 상태에 그라데이션을 주는 것이 세련되어 보입니다 */
        background: linear-gradient(to right, #574397, #eb3e97) !important;
        box-shadow: 0 4px 15px rgba(235, 62, 151, 0.4); /* 버튼이 떠 보이는 효과 */
        border: none;
    }

    #header .btn-list span {
        background-color: #fff !important; /* 햄버거 막대기를 흰색으로 고정 */
    }

    /* 스크롤 시(#header.fix)에도 버튼색 유지 */
    #header.fix .btn-list, 
    #header.open .btn-list {
        background: linear-gradient(to right, #574397, #eb3e97) !important;
    }
}

/* 2. PC버전 포함 버튼 호버 시 우선순위 강화 */
#header .btn-list:hover {
    background: linear-gradient(to right, #574397, #eb3e97) !important;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

#header .btn-list:hover span {
    background-color: #fff !important;
}

/* 3. 메뉴가 열렸을 때(btn-close)도 세련되게 */
#header .btn-close {
    background-color: #f0f2f5; /* 닫기 버튼은 가독성을 위해 차분하게 유지하거나 */
    transition: all 0.3s ease;
}

#header .btn-close:hover {
    background: #e2e4e7;
    transform: rotate(90deg); /* 닫기 버튼 호버 시 회전 효과 */
}

#header .btn-list {
    position: absolute;
    right: 50px;
    top: 0;
    width: 54px;
    height: 54px;
    background-color: #fff;
    border-radius: 27px;
    z-index: 10;
    display: none;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-open #header .btn-list {
    transform: rotateZ(-360deg);
}

#header .btn-list span {
    position: absolute;
    display: block;
    width: 24px;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#header .btn-list span:nth-child(1) {
    top: 20px;
}

#header .btn-list span:nth-child(2) {
    top: 27px;
}

#header .btn-list span:nth-child(3) {
    top: 34px;
}

#header .btn-list:hover {
    background-image: linear-gradient(to right, #574397, #eb3e97);
    background-repeat: no-repeat;
}

#header .btn-list:hover span {
    background-color: #fff;
}

#header .btn-close {
    position: absolute;
    right: 50px;
    top: 0;
    width: 54px;
    height: 54px;
    background-color: #f0f2f5;
    border-radius: 27px;
    z-index: 5;
    display: none;
}

#header .btn-close span {
    position: absolute;
    display: block;
    width: 24px;
    height: 1px;
    background-color: #000;
    transform-origin: 50% 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#header .btn-close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

#header .btn-close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#header .btn-close:hover {
    background: #d7d7d7;
}

#header .snb {
    width: 732px;
    margin: 0 auto;
    -background: #f60;
    font-size: 0;
    text-align: center;
}

#header .snb a {
    display: block;
    color: #fff;
    cursor: pointer;
    transition-property: color;
    transition-duration: 400ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.hoverable #header .snb a:hover, #header .snb a.current {
    color: #00baf2;
}

#header .snb ul {
    display: flex;
}

#header .snb ul li > a {
    padding: 15px 35px;
    font-size: 16px;
    font-weight: 700;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    letter-spacing: 0.1em;
}

#header .snb .sub {
    margin-top: -5px;
    height: 0;
    overflow: hidden;
    transition-property: opacity;
    transition-duration: 400ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

#header .snb .sub a {
    display: block;
    padding: 10px 0 9px;
    visibility: hidden;
    opacity: 0;
    font-size: 14px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    transform: translate3d(0, 150%, 0);
    transition: visibility 150ms, opacity 150ms, transform 1ms 150ms;
}

#header.fix h1 a, #header.open h1 a {
    background-image: url("../images/ci-black.png");
}

#header.fix .lang, #header.open .lang {
    background-color: #f0f2f5;
}

#header.fix .btn-list, #header.open .btn-list {
    background-color: #f0f2f5;
}

#header.fix .btn-list:hover, #header.open .btn-list:hover {
    background: #d7d7d7;
}

#header.fix .btn-list:hover span, #header.open .btn-list:hover span {
    background-color: #000;
}

#header.fix .snb a, #header.open .snb a {
    color: #000;
}

.hoverable #header.fix .snb a:hover, #header.fix .snb a.current, .hoverable #header.open .snb a:hover, #header.open .snb a.current {
/* 1. 배경 설정 (중요: 배경이 먼저 선언되어야 함) */
    background: linear-gradient(to right, #574397, #eb3e97) !important;
    
    /* 2. 텍스트 마스킹 */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* 3. 기존 색상 제거 */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    /* 4. 레이아웃 안정화 */
    display: inline-block; 
}
}

.hoverable #header.fix .snb ul:hover > li:hover > a, .hoverable #header.open .snb ul:hover > li:hover > a {
/* 1. 배경 설정 (중요: 배경이 먼저 선언되어야 함) */
    background: linear-gradient(to right, #574397, #eb3e97) !important;
    
    /* 2. 텍스트 마스킹 */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* 3. 기존 색상 제거 */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    /* 4. 레이아웃 안정화 */
    display: inline-block; 
}
}

.hoverable #header.fix .snb ul:hover > li:not(:hover) .sub, .hoverable #header.open .snb ul:hover > li:not(:hover) .sub {
    opacity: 0.35;
}

.hoverable #header.fix .snb ul:hover > li:not(:hover) a,
  .hoverable #header.fix .snb ul:hover .sub:hover a:not(:hover), .hoverable #header.open .snb ul:hover > li:not(:hover) a,
  .hoverable #header.open .snb ul:hover .sub:hover a:not(:hover) {
    color: #000;
}

#header.fix {
    -background-color: #fff;
    -box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    transform: translate3d(0, -31px, 0);
}

#header.fix:before {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    transform: translate3d(0, -249px, 0);
    opacity: 1;
}

#header.fix .inner {
    height: 66px;
}

#header.open {
    transform: translate3d(0, 0, 0);
}

#header.open:before {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 600ms cubic-bezier(0.165, 0.84, 0.35, 1), opacity 500ms;
}

#header.open .inner {
    padding-bottom: 57px;
}

#header.open .snb .sub {
    height: auto;
    overflow: visible;
}

#header.open .snb .sub a {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#header.open .snb .sub a:nth-child(1) {
    transition: color 400ms, visibility 650ms 70ms, opacity 650ms 70ms, transform 650ms 70ms cubic-bezier(0.165, 0.84, 0.35, 1);
}

#header.open .snb .sub a:nth-child(2) {
    transition: color 400ms, visibility 650ms 140ms, opacity 650ms 140ms, transform 650ms 140ms cubic-bezier(0.165, 0.84, 0.35, 1);
}

#header.open .snb .sub a:nth-child(3) {
    transition: color 400ms, visibility 650ms 210ms, opacity 650ms 210ms, transform 650ms 210ms cubic-bezier(0.165, 0.84, 0.35, 1);
}

#header.open .snb .sub a:nth-child(4) {
    transition: color 400ms, visibility 650ms 280ms, opacity 650ms 280ms, transform 650ms 280ms cubic-bezier(0.165, 0.84, 0.35, 1);
}

#header.open .snb .sub a:nth-child(5) {
    transition: color 400ms, visibility 650ms 350ms, opacity 650ms 280ms, transform 650ms 350ms cubic-bezier(0.165, 0.84, 0.35, 1);
}

#header.open .snb .sub a:nth-child(6) {
    transition: color 400ms, visibility 650ms 420ms, opacity 650ms 280ms, transform 650ms 420ms cubic-bezier(0.165, 0.84, 0.35, 1);
}

#header.open .btn-list, #header.open .lang {
    z-index: 5;
}

#header.open .btn-close {
    z-index: 10;
}

@media (max-width: 767px) {
    #header {
        padding-top: 0;
        min-width: auto;
        transition: transform cubic-bezier(0.19, 0.92, 0.32, 1) 0.7s, opacity 0.25s;
    }

    #header:before {
        height: 88px;
        background: none;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
        background-repeat: no-repeat;
        transform: none;
        box-shadow: none;
        opacity: 0;
        -transition: opacity 0.3s;
    }

    #header h1 {
        left: 15px;
        top: 19px;
        width: 136px;
        height: 38px;
    }

    #header .snb {
        display: none;
    }

    #header .lang {
        display: none;
    }

    #header .btn-list {
        display: block;
        right: 10px;
        top: 10px;
        z-index: 15;
    }

    #header .btn-list span {
        width: 17px;
    }

    #header.fix {
        height: 74px;
        transform: none;
        -opacity: 0;
    }

    #header.fix:not(.show) {
        transform: translate3d(0, -115%, 0);
    }

    #header.fix .inner {
        height: 74px;
    }

    #header.fix h1 a {
        background-image: url("../images/ci-white.png");
    }

    #header.fix:before {
        opacity: 1;
        transform: none;
        box-shadow: none;
    }
}

#aside {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-bottom: 52px;
    
    /* 1. 배경을 깊은 밤하늘 같은 다크 네이비로 변경 */
    background: radial-gradient(circle at top right, #2a1a5e, #0f0c29, #000); 
    
    z-index: 50;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s;
}

/* 2. 메뉴 내부의 글자색을 화이트/그라데이션으로 변경 */
#aside .snb a {
    display: block;
    color: rgba(255, 255, 255, 0.8); /* 기본은 은은한 화이트 */
    cursor: pointer;
    transition: 0.4s ease;
}

/* 3. 메뉴 리스트 호버/활성화 시 오로라 그라데이션 */
#aside .snb li > a:active, 
#aside .snb li > a.current {
    background: linear-gradient(to right, #574397, #eb3e97);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transform: scale(1.05); /* 살짝 커지는 효과 */
}

/* 4. 언어 선택 버튼 디자인 수정 */
#aside .lang a {
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 5px 15px;
    margin: 0 3px;
}

#aside .lang a.current {
    color: #fff;
    border-color: #eb3e97;
    background: rgba(235, 62, 151, 0.1);
}

/* 5. 닫기 버튼을 다크 배경에 어울리게 수정 */
#aside .btn-close {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
}

#aside .btn-close span {
    background-color: #fff !important; /* 닫기 X 버튼을 흰색으로 */
}
.nav-open #aside {
    visibility: visible;
    opacity: 1;
    transition-duration: 0.5s;
}

#aside h1 {
    position: fixed;
    left: 15px;
    top: 19px;
    width: 38px;
    height: 38px;
    z-index: 10;
    background-image: url("../images/ci.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 38px 38px;
}

#aside h1 a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#aside .btn-close {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 54px;
    height: 54px;
    background-color: #f0f2f5;
    border-radius: 27px;
    z-index: 5;
    transform: rotateZ(360deg);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-open #aside .btn-close {
    transform: rotateZ(0);
}

#aside .btn-close span {
    position: absolute;
    display: block;
    width: 24px;
    height: 1px;
    background-color: #000;
    transform-origin: 50% 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#aside .btn-close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

#aside .btn-close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#aside .btn-close:hover {
    background: #d7d7d7;
}

#aside .lang {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    padding: 26px 0 0;
    box-sizing: border-box;
    text-align: center;
}

#aside .lang a {
    display: inline-block;
    padding: 2px 5px 5px;
    margin: 0 5px;
    font-size: 12px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #000;
}

#aside .lang a.current {
color: transparent;
}

#aside .snb {
    padding-top: 136px;
    text-align: center;
}

#aside .snb a {
display: block;
    color: #fff;
    cursor: pointer;
    transition: 0.4s ease;
}

/* 2. 롤오버 시 그라데이션 적용 */
.hoverable #header .snb a:hover, 
#header .snb a.current,
.hoverable #header.fix .snb a:hover, 
#header.fix .snb a.current,
.hoverable #header.open .snb a:hover, 
#header.open .snb a.current {
    /* 기존 단색 컬러 제거 */
    /* color: #00baf2; <- 이 부분을 주석 처리하거나 지우세요 */

    /* 그라데이션 배경 설정 */
    background: linear-gradient(to right, #574397, #eb3e97);
    
    /* 핵심: 배경을 텍스트 영역으로 제한 */
    -webkit-background-clip: text;
    background-clip: text;

    /* 핵심: 원래 글자색을 투명하게 만들어 배경이 보이게 함 */
    -webkit-text-fill-color: transparent;
    color: transparent; 

    display: inline-block; /* 배경 계산을 위해 inline-block 권장 */
}
/* 2. (선택사항) 호버 시 살짝 밝아지거나 강조하고 싶을 때 */
#header .snb a:hover {
    opacity: 0.8; /* 색상은 그대로 두되 투명도로 피드백 부여 */
}
.nav-open #aside .snb a {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s cubic-bezier(0.19, 0.92, 0.32, 1), opacity 1s;
}

#aside .snb li {
    padding-bottom: 22px;
}

#aside .snb li > a {
    font-size: 24px;
    font-weight: 600;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    letter-spacing: 0.1em;
}

#aside .snb .sub {
    padding-top: 1px;
}

#aside .snb .sub a {
    display: block;
    padding: 9px 0 8px;
    font-size: 16px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

#footer {
    position: relative;
    min-height: 355px;
    padding: 135px 0 0 117px;
    box-sizing: border-box;
}

#footer:before {
    content: '';
    position: absolute;
    left: 50px;
    top: 57px;
    width: 180px;
    height: 50px;
    background-image: url("../images/ci-black.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

#footer nav {
    font-size: 0;
}

#footer nav a {
    display: inline-block;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #000;
}

#footer nav a:hover {
    color: rgba(0, 0, 0, 0.5);
}

#footer nav a + a {
    margin-left: 30px;
}

#footer p {
    font-size: 12px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    line-height: 18px;
}

#footer p a {
    color: #000;
}

#footer p.contact {
    margin-top: 20px;
}

#footer p.copyright {
    margin-top: 13px;
}

#footer .dun {
    position: absolute;
    left: 595px;
    top: 188px;
    width: 114px;
    height: 97px;
}

@media (max-width: 767px) {
    #footer {
        min-height: 368px;
        padding: 76px 20px 50px;
        box-sizing: border-box;
    }

    #footer:before {
        left: 16px;
        top: 56px;
        height: 25px;
    }

    #footer nav {
        display: none;
    }

    #footer p {
        font-size: 11px;
        line-height: 21px;
    }

    #footer p.copyright {
        margin-top: 7px;
    }

    #footer .dun {
        position: static;
        margin-top: 20px;
    }
}

.btn-top {
    position: absolute;
    right: 50px;
    top: 55px;
    width: 54px;
    height: 54px;
    background-color: #f0f2f5;
    border-radius: 27px;
    z-index: 5;
    transition-property: background;
    transition-duration: 200ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.btn-top span {
    position: absolute;
    display: block;
    left: 50%;
    top: 17px;
    width: 10px;
    height: 1px;
    background-color: #000;
    transform-origin: 50% 50%;
}

.btn-top span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
    margin-left: 4px;
    margin-top: 4px;
}

.btn-top span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
    margin-left: -3px;
    margin-top: 4px;
}

.btn-top span:nth-child(3) {
    width: 1px;
    height: 22px;
}

.hoverable .btn-top:hover {
    background: #d7d7d7;
}

@media (max-width: 767px) {
    .btn-top {
        right: 10px;
        top: -27px;
    }
}

.btn-youtube {
    position: absolute;
    right: 51px;
    top: 139px;
    padding-right: 24px;
    background-image: url("../images/icon-youtube.png");
    background-position: 100% 50%;
    background-repeat: no-repeat;
    font-size: 14px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #000;
}

@media (max-width: 767px) {
    .btn-youtube {
        right: 24px;
        top: 58px;
        padding-right: 19px;
        font-size: 12px;
        background-image: url("../images/icon-youtube-m.png");
        background-position: right 3px;
        background-size: 14px 11px;
    }
}

#breadcrumb {
    height: 0;
}

@media (max-width: 767px) {
    #breadcrumb {
        display: none;
    }
}

.breadcrumb {
    position: relative;
    top: -31px;
    display: inline-flex;
    height: 61px;
    width: 405px;
    align-items: center;
    box-sizing: border-box;
    border-radius: 0 30px 30px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #fff;
    line-height: 20px;
    z-index: 10;
}

/* 1. 오로라 빛 번짐 효과 (제일 밑바탕, z-index: 1) */
.breadcrumb::before {
    content: '';
    position: absolute;
    /* 유리 본체보다 살짝 크게 설정하여 밖으로 빛이 새어나오게 함 */
    top: -3px; 
    bottom: -3px; 
    right: -3px;
    width: 5000px; /* 기존의 왼쪽으로 뻗어나가는 구조 유지 */
    border-radius: 0 33px 33px 0;
    z-index: 1;
    
    /* 기존 테마 색상에 밝은 네온 컬러를 섞어 가로로 흐르는 그라데이션 생성 */
    background: linear-gradient(
        90deg, 
        #574099, #a13c98, #ff6b6b, #4ecdc4, #a13c98, #574099
    );
    background-size: 300% 300%;
    filter: blur(15px); /* 빛을 부드럽게 퍼뜨림 */
    opacity: 0.7;
    animation: auroraGlow 8s ease-in-out infinite;
}

/* 2. 글래스모피즘 본체 (오로라 위에 얹어지는 반투명 유리, z-index: 2) */
.breadcrumb::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5000px;
    border-radius: 0 30px 30px 0;
    z-index: 2;
    /* 본체 전용 애니메이션 추가: 6초 동안 부드럽게 */
    animation: glassFlow 62s ease-in-out infinite;
    /* 단색 배경 대신 투명도(rgba)가 적용된 그라데이션 사용 */
    background: linear-gradient(to center, rgba(87, 64, 153, 0.75), rgba(161, 60, 152, 0.75));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* 유리 질감을 살려주는 얇은 반투명 테두리와 그림자 */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    /* 왼쪽은 화면 밖으로 나가므로 border-left는 생략 */
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 3. 텍스트 및 구분선 (가장 위쪽, z-index: 3) */
.breadcrumb a, .breadcrumb strong {
    position: relative;
    color: #fff;
    padding: 8px 27px 8px 24px;
    z-index: 3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 유리 위에서 글씨가 더 또렷하게 보이도록 약한 그림자 추가 */
}

.breadcrumb a::after {
    content: '';
    width: 1px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

.breadcrumb a.home {
    padding-left: 0;
}

/* IE 호환성 코드 */
.ie .breadcrumb { padding-bottom: 2px; }
.ie .breadcrumb a::after { margin-top: 1px; }

/* 4. 오로라 애니메이션 키프레임 */
@keyframes auroraGlow {
    0% { background-position: 0% 50%; opacity: 0.5; }
    50% { background-position: 100% 50%; opacity: 0.9; }
    100% { background-position: 0% 50%; opacity: 0.5; }
}

#wrap {
    -display: flex;
    min-width: 1200px;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 767px) {
    #wrap {
        min-width: 375px;
    }
}

#con {
    flex: 1 0 auto;
}

.visual-sub {
    display: flex;
    height: 460px;
    padding: 0 50px;
    text-align: center;
    background-position: 50% 0;
    background-size: cover;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.visual-sub.higher {
    height: 650px;
}

.visual-sub.tech1 {
    background-image: url("../images/visual-tech-1.jpg");
}

.visual-sub.tech2 {
    background-image: url("../images/visual-tech-2.jpg");
}

.visual-sub.tech3 {
    background-image: url("../images/visual-tech-3.jpg");
}

.visual-sub.tech4 {
    background-image: url("../images/visual-tech-4.html");
}

.visual-sub.biz1 {
    background-image: url("../images/visual-biz-1.jpg");
}

.visual-sub.biz2 {
    background-image: url("../images/visual-biz-2.jpg");
}

.visual-sub.biz3 {
    background-image: url("../images/visual-biz-3.jpg");
}

.visual-sub.biz4 {
    background-image: url("../images/visual-biz-4.jpg");
}

.visual-sub.news1 {
    background-image: url("../images/visual-news-1.jpg");
}

.visual-sub.news2 {
    background-image: url("../images/visual-news-2.jpg");
}

.visual-sub.news3 {
    background-image: url("../images/visual-news-3.jpg");
}

.visual-sub.news4 {
    background-image: url("../images/visual-news-4.html");
}

.visual-sub.cs1 {
    background-image: url("../images/visual-cs-1.jpg");
}

.visual-sub.cs2 {
    background-image: url("../images/visual-cs-2.jpg");
}

.visual-sub.cs3 {
    background-image: url("../images/visual-cs-3.html");
}

.visual-sub.cs4 {
    background-image: url("../images/visual-cs-4.html");
}

@media (max-width: 767px) {
    .visual-sub {
        height: 250px;
    }

    .visual-sub.higher {
        height: 375px;
    }

    .visual-sub.tech1 {
        background-image: url("../images/visual-tech-mobile-1.jpg");
    }

    .visual-sub.tech2 {
        background-image: url("../images/visual-tech-mobile-2.jpg");
    }

    .visual-sub.tech3 {
        background-image: url("../images/visual-tech-mobile-3.html");
    }

    .visual-sub.tech4 {
        background-image: url("../images/visual-tech-mobile-4.html");
    }

    .visual-sub.biz1 {
        background-image: url("../images/visual-biz-mobile-1.jpg");
    }

    .visual-sub.biz2 {
        background-image: url("../images/visual-biz-mobile-2.jpg");
    }

    .visual-sub.biz3 {
        background-image: url("../images/visual-biz-mobile-3.jpg");
    }

    .visual-sub.biz4 {
        background-image: url("../images/visual-biz-mobile-4.jpg");
    }

    .visual-sub.news1 {
        background-image: url("../images/visual-news-mobile-1.jpg");
    }

    .visual-sub.news2 {
        background-image: url("../images/visual-news-mobile-2.jpg");
    }

    .visual-sub.news3 {
        background-image: url("../images/visual-news-mobile-3.jpg");
    }

    .visual-sub.news4 {
        background-image: url("../images/visual-news-mobile-4.html");
    }

    .visual-sub.cs1 {
        background-image: url("../images/visual-cs-mobile-1.jpg");
    }

    .visual-sub.cs2 {
        background-image: url("../images/visual-cs-mobile-2.jpg");
    }

    .visual-sub.cs3 {
        background-image: url("../images/visual-cs-mobile-3.html");
    }

    .visual-sub.cs4 {
        background-image: url("../images/visual-cs-mobile-4.html");
    }
}

[class*='restrict-'] {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    [class*='restrict-'] {
        padding: 0 20px;
    }
}

.restrict-720 {
    max-width: 720px;
    padding: 0;
}

.restrict-960 {
    max-width: 960px;
    padding: 0;
}

.restrict-1200 {
    max-width: 1300px;
}

.restrict-1440 {
    max-width: 1540px;
}

[class*='tabs-'] {
    display: none;
}

[class*='tabs-'].current {
    display: block;
}

/* fake select */
.select-title {
    position: relative;
    min-width: 100px;
    max-width: 100%;
    height: 50px;
    letter-spacing: -0.025em;
    text-align: left;
    vertical-align: middle;
    border: 1px solid #ddd;
    box-sizing: border-box;
    background: #fff;
    display: inline-block;
}

.select-title:after {
    position: absolute;
    right: 0;
    top: 50%;
    width: 32px;
    height: 6px;
    content: '';
    margin-top: -3px;
    background: no-repeat;
    background-image: url("../images/icon-selectbox.png");
}

.select-title.active:after {
    transform: scaleY(-1);
}

.select-title strong {
    width: 100%;
    height: 100%;
    font-weight: normal;
    word-break: break-all;
    padding: 12px 53px 0 20px;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    line-height: 1.5;
}

.select-title.has-value strong {
    color: #000;
}

.select-title.disabled {
    color: #999;
    text-shadow: 1px 1px 0 #fff;
    border-color: #bbb;
    background-color: #eee;
}

.select-title.s-select {
    margin-right: 26px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #000;
    background: #fff;
}

.select-title.s-select:after {
    width: 11px;
    height: 8px;
    margin-top: -4px;
    background-image: url("../images/icon-search-selectbox.png");
}

.select-title.s-select strong {
    padding: 13px 20px 0 10px;
}

@media (max-width: 767px) {
    .select-title {
        min-width: 50px;
        height: 40px;
        background-size: 24px auto;
        line-height: 46px;
    }

    .select-title:after {
        top: 0;
        width: 27px;
        height: 38px;
        margin-top: 0;
        background-size: 100%;
        background-image: url("../images/icon-selectbox-mobile.png");
    }

    .select-title strong {
        font-size: 14px;
        padding: 9px 32px 0 15px;
    }

    .select-title.active {
        background-position: 100% -54px;
    }

    .select-title.s-select {
        height: 40px;
        margin-right: 15px;
        background-size: 30px auto;
    }

    .select-title.s-select:after {
        top: 50%;
        width: 12px;
        height: 6px;
        margin-top: -3px;
        background-size: 100%;
        background-image: url("../images/icon-search-selectbox-mobile.png");
    }

    .select-title.s-select.active {
        background-position: 100% -37px;
    }

    .select-title.s-select strong {
        padding: 10px 20px 0 0;
    }
}

.select-option {
    background-color: #f8f8f8;
    overflow: auto;
    box-sizing: border-box;
    letter-spacing: 0;
}

.select-option ul {
    padding: 10px 0;
}

.select-option li {
    list-style: none;
}

.select-option span, .select-option strong {
    height: 30px;
    text-decoration: none;
    padding: 2px 20px 0;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    cursor: default;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-option li li span {
    padding-left: 10px;
}

.select-option span:hover, .select-option span.selected {
    color: #00baf2;
}

.select-option .disabled span, .select-option .disabled strong {
    color: #bbb;
    text-decoration: line-through;
    background: none;
}

.select-option.s-select span, .select-option.s-select strong {
    padding: 2px 10px 0;
}

@media (max-width: 767px) {
    .select-option span, .select-option strong {
        height: 39px;
        font-size: 14px;
        padding: 9px 15px 0;
    }

    .select-option.s-select {
        font-size: 14px;
    }

    .select-option.s-select ul {
        padding: 7px 0;
    }

    .select-option.s-select span, .select-option.s-select strong {
        height: 30px;
        padding: 5px 0 0;
    }
}

/* swiper */
.swiper-container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
  /* Fix of Webkit flickering */
    z-index: 1;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.swiper-wrapper [data-swiper-parallax] {
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
}

.swiper-container-vertical > .swiper-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}

.swiper-slide-invisible-blank {
    visibility: hidden;
}

.swiper-container-fade .swiper-slide {
    pointer-events: none;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    transition-timing-function: ease;
}

.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none;
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
}

.swiper-pagination {
    height: 20px;
    text-align: center;
}

.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.swiper-pagination-bullet:before {
    width: 6px;
    height: 6px;
    margin: 7px;
    content: '';
    border-radius: 100%;
    background: #d9d9d9;
    box-sizing: border-box;
    display: block;
    transition: background 0.2s;
}

.swiper-pagination-bullet-active:before {
    background: #000;
}

/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
    position: relative;
}

.flickity-enabled:focus {
    outline: 0;
}

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.flickity-button {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    border: none;
    color: #333;
}

.flickity-button:hover {
    background: #fff;
    cursor: pointer;
}

.flickity-button:focus {
    outline: 0;
    box-shadow: 0 0 0 5px #19f;
}

.flickity-button:active {
    opacity: .6;
}

.flickity-button:disabled {
    opacity: .3;
    cursor: auto;
    pointer-events: none;
}

.flickity-button-icon {
    fill: currentColor;
}

.flickity-prev-next-button {
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translateY(-50%);
}

.flickity-prev-next-button.previous {
    left: 10px;
}

.flickity-prev-next-button.next {
    right: 10px;
}

.flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
}

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
}

.flickity-rtl .flickity-page-dots {
    direction: rtl;
}

.flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background: #333;
    border-radius: 50%;
    opacity: .25;
    cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
    opacity: 1;
}

.sec-news {
    padding-top: 162px;
    padding-bottom: 200px;
}

@media (max-width: 767px) {
    .sec-news {
        padding-top: 55px;
        padding-bottom: 100px;
    }
}

.list-ir {
    margin-top: 80px;
    border-top: 2px solid #000;
}

.list-ir li {
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

.list-ir li a {
    position: relative;
    display: block;
    min-height: 75px;
    padding: 25px 0;
    color: #000;
    box-sizing: border-box;
}

.list-ir li a strong {
    display: block;
    padding: 0 170px 0 40px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
}

.list-ir li a em {
    display: block;
    width: 170px;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-size: 14px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.list-ir li a:hover {
    background-color: #ecfaff;
}

@media (max-width: 767px) {
    .list-ir {
        margin-top: 50px;
        border-width: 1px;
    }

    .list-ir li a {
        padding: 0;
        min-height: 72px;
        padding: 15px 15px 3px;
    }

    .list-ir li a strong {
        font-size: 14px;
        line-height: 21px;
        padding: 0;
    }

    .list-ir li a em {
        position: static;
        width: auto;
        margin-top: 11px;
        font-size: 12px;
        line-height: 21px;
        text-align: left;
    }
}

.list-news ul {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0 0 -24px;
    padding-bottom: 15px;
}

.list-news li {
    width: 33.333%;
    margin-top: 60px;
    padding-left: 24px;
    box-sizing: border-box;
}

.list-news figure {
    padding-top: 61.618%;
    background: #f0f2f5;
    background-image: url("../images/bg-no-article-image.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.list-news a {
    position: relative;
    display: block;
    color: #000;
}

.list-news a:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: inset 0 0 0 0 #00baf2;
    opacity: 0;
    transition-property: box-shadow, opacity;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.hoverable .list-news a:hover:before {
    box-shadow: inset 0 0 0 3px #00baf2;
    opacity: 1;
}

.list-news .text {
    padding: 28px 34px 27px;
}

.list-news em, .list-news .date {
    display: block;
    font-size: 14px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.list-news em {
    font-weight: 700;
}

.list-news em span + span:before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 6px 1px 5px;
    border-radius: 2px;
    background-color: #00baf2;
    vertical-align: middle;
}

.list-news strong {
    display: block;
    margin-top: 19px;
    height: 3.1em;
    display: block;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.list-news .date {
    margin-top: 31px;
}

@media (max-width: 767px) {
    .list-news ul {
        margin: 35px 0 -35px -20px;
        padding-bottom: 0;
    }

    .list-news li {
        width: 50%;
        margin-top: 15px;
        padding-left: 20px;
    }

    .list-news figure {
        padding-top: 66.566%;
    }

    .list-news .text {
        padding: 20px 0 30px;
    }

    .list-news em {
        font-size: 12px;
    }

    .list-news em span + span:before {
        width: 4px;
        height: 4px;
        margin: 0 6px 1px;
    }

    .list-news strong {
        height: 42px;
        margin-top: 5px;
        font-size: 14px;
        line-height: 21px;
    }

    .list-news .date {
        margin-top: 16px;
        font-size: 12px;
    }
}

.sec-detail {
    padding-top: 170px;
    padding-bottom: 200px;
}

.sec-detail .btn-wrap {
    border-top: 1px solid #d9d9d9;
}

@media (max-width: 767px) {
    .sec-detail {
        padding-top: 70px;
        padding-bottom: 100px;
    }
}

.detail-header {
    position: relative;
    padding: 32px 40px 34px;
    border-top: 2px solid #000;
    border-bottom: 1px solid #d9d9d9;
}

.detail-header em {
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.detail-header em span + span:before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 6px 1px 5px;
    border-radius: 2px;
    background-color: #00baf2;
    vertical-align: middle;
}

.detail-header strong {
    display: block;
    margin-top: 9px;
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    line-height: 34px;
}

.detail-header .date {
    display: block;
    margin-top: 39px;
    font-size: 14px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.detail-header .btns {
    position: absolute;
    right: 24px;
    bottom: 28px;
}

@media (max-width: 767px) {
    .detail-header {
        padding: 15px;
        border-width: 1px;
    }

    .detail-header em {
        font-size: 12px;
    }

    .detail-header em span + span:before {
        width: 4px;
        height: 4px;
        margin: 0 6px 1px;
    }

    .detail-header strong {
        font-size: 18px;
        margin-top: 4px;
        line-height: 28px;
    }

    .detail-header .date {
        font-size: 12px;
        margin-top: 18px;
    }

    .detail-header .btns {
        right: 10px;
        bottom: 9px;
    }
}

.detail-body {
    padding-top: 80px;
    padding-bottom: 174px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.detail-body img {
    display: block;
    max-width: 100%;
    height: auto;
}

.detail-body img.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.detail-body [style*="center"] img {
    margin: 0 auto;
}

@media (max-width: 767px) {
    .detail-body {
        padding: 40px 15px 37px;
        font-size: 15px;
        line-height: 25px;
    }
}

.detail-attach {
    background-color: #ecfaff;
    min-height: 50px;
    padding: 9px 30px 10px;
    margin-top: -90px;
    margin-bottom: 40px;
    box-sizing: border-box;
}

.detail-attach a {
    display: inline-block;
    padding-left: 29px;
    background-image: url("../images/icon-attach.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
    font-size: 14px;
    font-weight: 300;
    font-family: inherit;
    line-height: 28px;
    color: #000;
}

@media (max-width: 767px) {
    .detail-attach {
        min-height: 35px;
        padding: 6px 15px 0;
        margin-top: 0;
        margin-bottom: 15px;
    }

    .detail-attach a {
        font-size: 12px;
        line-height: 21px;
        padding-left: 18px;
        background-image: url("../images/icon-attach-mobile.png");
        background-position: 0 50%;
        background-repeat: no-repeat;
        background-size: 10px 11px;
    }
}

.sec-stock {
    padding-top: 192px;
    padding-bottom: 200px;
    text-align: center;
}

.stock-info {
    margin-top:65px;
}

.stock-1 {
    width: 30%;
    height: 110px;
    background: #574099;
    border:1px solid #574099;
    position: absolute;
    left: 0;
    
}

.stock-1-title {
    font-size: 20px;
    margin-top: 15px;
    color: #d2c4ff;
}

.stock-1-title span {
    font-size:16px;
    color:#00baf2;
}

.stock-1-price {
    font-size: 35px;
    color: #fff;
    line-height: 45px;
    font-weight: bold;
}

@media (min-width: 768px) {
    .stock-2 {
        margin-left: 32%;
        width: calc(100% - 32%);
        height: 110px;
        border: 1px solid #ddd;
    }

    .stock-2 li {
        border-bottom: 1px solid #ddd;
        background: #f8f8f8;
    }

    .stock-2 span {
        float: left;
        font-size: 16px;
        color: #454545;
        text-align: center;
        line-height: 50px;
        border-right: 1px solid #dcdcdc;
    }

    .stock-2 span.stock-2-title {
        line-height: 50px;
        height: 50px;
        width:129.7px;
        color: #000;
        background: #f8f8f8; 
        font-weight: 500;
        border-bottom: 1px solid #ddd;
    }

    .stock-2 span.stock-2-price {
        line-height: 60px;
        height: 60px;
        width:129.5px;
        color: #686868;
        font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    }

    .stock-2 li span:nth-child(5n) {
        border-right: 0;
    }

    ul.stock-3 li:last-child {
        border-bottom: 0px;
    }

    .stock-3 {
        clear: both;
        width: 100%;
        overflow: hidden;
        border: 1px solid #dcdcdc;
        margin-top: 50px;
    }

    ul.stock-3 li {
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #dcdcdc;
    }

    ul.stock-3 li span {
        float: left;
        font-size: 15px;
        color: #454545;
        text-align: center;
        line-height: 50px;
        border-right: 1px solid #dcdcdc;
    }

    ul.stock-3 li span.stock-3-title {
        width: 20%;
        background-color: #f8f8f8;
    }

    ul.stock-3 li span.stock-3-price {
        width: 29%;
        background-color: #fefefe;
        color: #686868;
        font-size: 14px;
        font-weight: 400;
        font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    }

    ul.stock-3 li span:nth-child(4n) {
        border-right: 0;
    }

    .stock-message {
        position: relative;
        display: flex;
        background-color: #f8f8f8;
        height: 100px;
        flex-direction: column;
        justify-content: center;
        line-height: 100px;
        font-size:16px;
        margin-top: 80px;
    }

}



.stock-day-list {
    width: 100%;
}

.stock-day-list-title {
    font-size: 32px;
    font-weight: 500;
    font-family: inherit;
    margin: 100px 0 40px;
}

.daily-chart {
    width: 100%;
    border-top: 2px solid #000;
}

.daily-chart thead tr {
    background: #f8f8f8;
    border-bottom: 1px solid #dcdcdc;
}

.daily-chart thead tr th {
    height: 60px;
    font-size: 17px;
    color: #3e3d3d;
    font-weight: 400;
}

.daily-chart tbody tr {
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
}

.daily-chart tbody tr th {
    height: 60px;
    font-size: 14px;
    color: #686868;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.daily-chart tbody tr th span {
    display: inline-block;
    width: 60px;
    text-align: left;
}

.stock-up:before {
    content: '\25B2';
    color: red;
}

.stock-down:before {
    content: '\25BC';
    color: #286ebe;
}

.stock-trend:before {
    font-size: 14px;
    margin-right: 5px;
}


@media (max-width: 767px) {
    .sec-stock {
        padding-top: 91px;
        padding-bottom: 100px;
    }

    .stock-info {
        margin-top: 65px;
        padding: 20px;
    }

    .stock-1 {
        height: 100px;
        background: #574099;
        border: 1px solid #574099;
        position: relative;
        width: 100%;
    }

    .stock-1-title {
        font-size: 18px;
        margin-top: 15px;
        color: #d2c4ff;
    }

    .stock-1-title span {
        font-size:16px;
        color:#00baf2;
    }

    .stock-1-price {
        font-size: 32px;
        color: #fff;
        line-height: 45px;
        font-weight: bold;
    }

    .stock-2 {
        margin-top: 50px;
        height: 205px;
    }

    .stock-2 li {
        border-bottom: 1px solid #ddd;
        background: #f8f8f8;
    }

    .stock-2 span {
        float: left;
        font-size: 14px;
        color: #454545;
        text-align: center;
        line-height: 50px;
        border-right: 1px solid #dcdcdc;
    }

    .stock-2 span.stock-2-title {
        line-height: 50px;
        height: 50px;
        color: #000;
        background: #f8f8f8; 
        font-weight: 500;
        border-bottom: 1px solid #ddd;
    }

    .stock-2 span.stock-2-price {
        line-height: 50px;
        height: 50px;
        color: #686868;
        border-bottom: 1px solid #ddd;
        font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    }

    .stock-table-top {
        border-top: 1px solid #ddd;
    }

    .stock-3 {
        clear: both;
        width: 100%;
        overflow: hidden;
        margin-top: 50px;
    }

    ul.stock-3 li {
        width: 100%;
        overflow: hidden;
    }

    ul.stock-3 li span {
        float: left;
        font-size: 15px;
        color: #454545;
        text-align: center;
        line-height: 50px;
        border-right: 1px solid #dcdcdc;
    }

    ul.stock-3 li span.stock-3-title {
        background-color: #f8f8f8;
        border-bottom: 1px solid #ddd;
    }

    ul.stock-3 li span.stock-3-price {
        background-color: #fefefe;
        color: #686868;
        font-size: 14px;
        font-weight: 400;
        font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
        border-bottom: 1px solid #ddd;
    }

    .stock-day-list .table-wrap {
        padding: 20px;
        overflow-x: auto;
    }

    .daily-chart thead tr th {
        font-size: 14px;
        min-width: 80px;
    }

    .daily-chart tbody tr th {
        font-size: 13px;
    }

    .stock-message {
        position: relative;
        display: flex;
        background-color: #f8f8f8;
        flex-direction: column;
        justify-content: center;
        font-size: 14px;
        padding: 30px 15px;
        margin: 20px;
        margin-top: 80px;
    }
   
    .stock-50-left {
        width: calc(50% - 2px);
        border-left: 1px solid #ddd;
    }

    .stock-50-right {
        width: calc(50% - 1px);
    }

    .stock-33-left {
        border-left: 1px solid #ddd;
        width: calc(33.3% - 1px);
    }

    .stock-33-center {
        width: calc(33.3% - 1px);
    }

    .stock-33-right {
        width: calc(33.3% - 2px);
    }
}

.sec-disclosure {
    padding-top: 192px;
    padding-bottom: 200px;
    text-align: center;
}

@media (max-width: 767px) {
    .sec-disclosure {
        padding-top: 91px;
        padding-bottom: 100px;
    }
}

.disclosure-info {
    margin-top:40px;
    border-top: 1px solid #000;
    padding-top: 60px;
}

@media (max-width: 767px) {
    .disclosure-info {
        border: 0;
        overflow-x: auto;
        padding:20px;
    }
}

.sec-info-management {
    padding-top: 160px;
    padding-bottom: 200px;
    text-align: center;
}

@media (max-width: 767px) {
    .sec-info-management {
        padding-top: 91px;
        padding-bottom: 100px;
    }
}

.info-management-info {
    margin-top: 30px;
    text-align: justify;
    word-break: break-all;
}

@media (max-width: 767px) {
    .info-management-info {
        border-top: 1px solid #000;
        margin:80px 20px 0;

    }
}

.im-title {
    font-size: 32px;
    font-weight: 500;
    padding: 100px 0 20px;
}

.im-lg-title {
    font-size: 26px;
    font-weight: 500;
    padding: 60px 0 20px;
}

.im-sm-title {
    color: #00baf2;
    font-size: 20px;
    padding: 40px 0 20px;
}

.im-contents {
    font-weight: 300;
    font-size:16px;
    line-height: 30px;
}

.im-sub-title {
    font-size: 24px;
    padding: 100px 0 20px;
}

@media (max-width: 767px) {
    .im-title {
        font-size: 24px;
        font-weight: 500;
        padding: 80px 0 20px;
    }

    .im-lg-title {
        font-size: 20px;
        font-weight: 500;
        padding: 60px 0 20px;
    }

    .im-sm-title {
        color: #00baf2;
        font-size: 18px;
        padding: 40px 0 20px;
    }

    .im-contents {
        font-weight: 300;
        font-size:14px;
        line-height: 30px;
    }

    .im-sub-title {
        font-size: 20px;
        padding: 80px 0 20px;
    }
}

.sec-cs {
    padding-top: 192px;
    padding-bottom: 200px;
    text-align: center;
}

@media (max-width: 767px) {
    .sec-cs {
        padding-top: 91px;
        padding-bottom: 100px;
    }
}

.cs-service ul {
    display: flex;
    margin-left: -10px;
    margin-top: 67px;
    align-items: flex-start;
}

.cs-service li {
    flex: 1;
    width: 25%;
    height: 324px;
    margin-left: 10px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding: 0 10px;
    word-break: break-all;
}

.cs-service strong {
    display: block;
    margin-top: 62px;
    font-size: 30px;
    font-weight: 500;
    font-family: inherit;
}

.cs-service .tel {
    display: block;
    margin-top: 37px;
    font-size: 20px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.cs-service .tel:before {
    content: 'Tel';
    display: block;
    padding-bottom: 2px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #00baf2;
}

.cs-service .mail {
    display: block;
    margin-top: 24px;
    font-size: 20px;
    font-weight: 300;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #000;
}

.cs-service .mail:before {
    content: '';
    display: block;
    width: 14px;
    height: 12px;
    margin: 0 auto;
    background-image: url("../images/icon-mail-pc.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

@media (max-width: 767px) {
    .cs-service ul {
        display: block;
        margin-top: 36px;
    }

    .cs-service li {
        width: auto;
        height: 166px;
        margin-top: 15px;
    }

    .cs-service strong {
        font-size: 21px;
        margin-top: 28px;
    }

    .cs-service .lock {
        display: inline-block;
        text-align: left;
    }

    .cs-service .tel {
        font-size: 15px;
        margin-top: 21px;
    }

    .cs-service .tel:before {
        display: inline-block;
        margin-right: 9px;
        font-size: 12px;
        vertical-align: 1px;
        padding: 0;
    }

    .cs-service .mail {
        font-size: 15px;
        letter-spacing: 0.025em;
        margin-top: 7px;
    }

    .cs-service .mail:before {
        display: inline-block;
        width: 15px;
        height: 9px;
        margin-right: 9px;
        vertical-align: -1px;
        background-image: url("../images/icon-mail.png");
        background-size: auto 100%;
        background-position: 2px 0;
    }
}

.cs-inquiry {
    margin-top: 139px;
    margin-bottom: -10px;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
}

@media (max-width: 767px) {
    .cs-inquiry {
        margin-top: 90px;
        margin-bottom: 0;
    }
}

.form-email {
    display: flex;
    border-top: 2px solid #000;
    padding: 20px 0 26px;
    margin: 77px 0 0 -40px;
    flex-wrap: wrap;
    text-align: left;
}

.form-email h4 {
    padding: 25px 0 6px;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    letter-spacing: -0.025em;
}

.form-email li {
    width: 50%;
    padding-left: 40px;
    box-sizing: border-box;
}

.form-email li.full {
    width: 100%;
}

.form-email li.privacy {
    width: 100%;
}

.form-email li.privacy textarea {
    height: 210px;
    padding: 32px 30px 20px;
    margin-bottom: 13px;
    font-weight: 300;
}

.form-email li textarea {
    height: 180px;
}

.form-email select, .form-email input[type='text'], .form-email textarea {
    width: 100%;
}

@media (max-width: 767px) {
    .form-email {
        display: block;
        margin: 36px 0 5px;
        padding: 14px 0 22px;
        border-width: 1px;
    }

    .form-email h4 {
        padding: 21px 0 6px;
        font-size: 14px;
    }

    .form-email li {
        width: 100%;
        padding: 0;
    }

    .form-email li.privacy textarea {
        height: 235px;
        padding: 17px 15px 5px;
        margin-bottom: 7px;
    }

    .form-email li textarea {
        height: 160px;
    }
}

.sec-company-visual {
    position: relative;
    min-height: 1080px;
    height: 100vh;
    color: #fff;
    text-align: center;
    background-image: url("../images/visual-company.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-company-visual .text {
    max-width: 470px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sec-company-visual .text .logo {
    display: block;
    width: 172px;
    height: 172px;
    margin: 0 auto;
    transform: scale3d(1.3, 1.3, 1.3) translateZ(0);
    background-image: url("../images/ci.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-company-visual .text h2 {
    display: block;
    margin-top: 17px;
}

.sec-company-visual .text p {
    position: relative;
    margin-top: 83px;
    line-height: 43px;
    font-size: 20px;
}

.sec-company-visual .text p:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -63px;
    content: '';
    display: block;
    width: 0;
    height: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    transform-origin: 0 0;
    transform: translate3d(0, 20%, 0) scaleY(1.25);
    opacity: 0;
}

.sec-company-visual.show .text p:before {
    transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 1;
    transition: transform 1.5s, opacity 1.5s;
    transition-delay: 1s;
}

@media (max-width: 767px) {
    .sec-company-visual {
        min-height: auto;
        height: 665px;
    }

    .sec-company-visual .text {
        max-width: 100%;
        width: 100%;
        margin-top: 10px;
    }

    .sec-company-visual .text:before {
        width: 96px;
        height: 96px;
    }

    .sec-company-visual .text .logo {
        width: 75px;
        height: 75px;
    }

    .sec-company-visual .text h2 {
        letter-spacing: 0.12em;
    }

    .sec-company-visual .text p {
        font-size: 16px;
        margin-top: 58px;
        line-height: 26px;
    }

    .sec-company-visual .text p:before {
        height: 30px;
        top: -43px;
    }
}

.sec-company-visual.show .text .logo {
    transform: scale3d(1, 1, 1);
}

.sec-company-info {
    position: relative;
    min-height: 1080px;
    height: calc(100vh - 80px);
    color: #fff;
    text-align: center;
}

.sec-company-info ol {
    height: 100%;
    counter-reset: num;
    font-size: 0;
}

.sec-company-info li {
    display: inline-flex;
    width: 33.3%;
    height: 100%;
    -padding-top: 393px;
    counter-increment: num;
    vertical-align: top;
    background-position: 50% 50%;
    background-size: cover;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
}

.sec-company-info li:nth-child(1) {
    background-image: url("../images/img-info-01.jpg");
}

.sec-company-info li:nth-child(2) {
    background-image: url("../images/img-info-02.jpg");
}

.sec-company-info li:nth-child(3) {
    background-image: url("../images/img-info-03.jpg");
}

.sec-company-info li .inwrap:before {
    content: "0" counter(num);
    display: block;
    font-size: 24px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.sec-company-info li .title-sub {
    margin-top: 8px;
    text-transform: uppercase;
}

.sec-company-info li p {
    position: relative;
    margin-top: 72px;
    font-size: 20px;
    font-weight: 400;
    font-family: inherit;
    line-height: 34px;
}

.sec-company-info li p:before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 6px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -39px;
}

.sec-company-info li:nth-child(1) p:before {
    background-color: #ee3897;
}

.sec-company-info li:nth-child(2) p:before {
    background-color: #574099;
}

.sec-company-info li:nth-child(3) p:before {
    background-color: #00baf2;
}

@media (max-width: 767px) {
    .sec-company-info {
        height: auto;
        min-height: auto;
    }

    .sec-company-info li {
        display: inline-block;
        width: 100%;
        height: 340px;
        padding-top: 82px;
    }

    .sec-company-info li:nth-child(1) {
        background-image: url("../images/img-info-m-01.jpg");
		  height: 540px;
    }

    .sec-company-info li:nth-child(2) {
        background-image: url("../images/img-info-m-02.jpg");
    }

    .sec-company-info li:nth-child(3) {
        background-image: url("../images/img-info-m-03.jpg");
    }

    .sec-company-info li .inwrap:before {
        font-size: 13px;
    }

    .sec-company-info li p {
        font-size: 16px;
        line-height: 26px;
        margin-top: 44px;
    }

    .sec-company-info li p:before {
        width: 6px;
        height: 6px;
        top: -22px;
    }
}

.sec-company-ceo {
    position: relative;
    min-height: 1080px;
    height: calc(100vh - 80px);
    -padding: 236px 51% 0 0;
    padding: 0 51% 0 0;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sec-company-ceo:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    left: 51%;
    background-image: url("../images/img-ceo.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-company-ceo .message {
    position: relative;
    max-width: 560px;
    padding: 0 50px;
    margin: 0 auto;
    text-align: left;
    opacity: 0;
    background-image: url("../images/bg-ceo.png");
    background-position: calc(100% - 50px) 0;
    background-repeat: no-repeat;
    zoom: 1;
}

.sec-company-ceo .message:after {
    content: '';
    display: block;
    clear: both;
}

.sec-company-ceo.show .message {
    opacity: 1;
    transition: opacity 2s;
}

.sec-company-ceo p {
    margin-top: 50px;
    font-size: 15px;
    font-weight: 300;
    font-family: inherit;
    line-height: 28px;
    letter-spacing: -0.01em;
}

.sec-company-ceo .sign {
    position: relative;
    float: right;
    padding-right: 45px;
    font-size: 16px;
    font-weight: 300;
    margin-top: 11px;
}

.sec-company-ceo .sign:before {
    content: '';
    position: absolute;
    right: -15px;
    top: 22px;
    width: 181px;
    height: 63px;
    background-image: url("../images/img-sign.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-company-ceo .sign strong {
    margin-left: 3px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .sec-company-ceo {
        display: block;
        min-height: auto;
        height: auto;
        padding: 90px 0 159px;
    }

    .sec-company-ceo:before {
        display: none;
    }

    .sec-company-ceo .message {
        padding: 0 20px;
        max-width: 100%;
        text-align: center;
        background: none;
    }

    .sec-company-ceo p {
        margin: 32px 0 0;
        padding: 0 15px;
        text-align: left;
        font-size: 14px;
        line-height: 24px;
    }

    .sec-company-ceo p:before {
        content: '';
        display: block;
        padding-top: 112%;
        margin: 0 -15px 24px -15px;
        background-image: url("../images/img-ceo-mobile.jpg");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .sec-company-ceo .sign {
        font-size: 14px;
        margin-top: 14px;
        padding-right: 50px;
    }

    .sec-company-ceo .sign:before {
        top: 28px;
        right: 0;
        width: 153px;
        height: 53px;
    }
}

	
/* 1. 글자 내부에 적용될 오로라 흐름 애니메이션 */
@keyframes text-aurora {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.sec-company-journey {
    position: relative;
    min-height: 1080px;
    height: calc(100vh - 80px);
    padding: 229px 50px 0;
    
    /* 텍스트 색상을 투명하게 하고 배경이 글자 모양에만 나타나게 설정 */
    background-image: url("../images/img-history.jpg");
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    
    text-align: center;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 32px;
}

/* 텍스트에 오로라 효과 적용 (제목, 강조문구, 본문 공통) */
.sec-company-journey .title-sub,
.sec-company-journey strong,
.sec-company-journey p {
    /* 오로라 그래디언트 설정 (흰색, 연청색, 에메랄드, 보라색 조합) */
    background: linear-gradient(
        110deg, 
        #ffffff 50%, 
        #a2c2e8 10%, 
        #50e3c2 10%, 
        #a29bfe 70%, 
        #ffffff 90%
    );
    background-size: 200% auto;
    
    /* 배경을 텍스트 영역으로 제한 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 실제 글자색을 투명하게 처리 */
    color: transparent;
    
    /* 애니메이션 실행 */
    animation: text-aurora 8s ease-in-out infinite;
    
    /* 배경 이미지 위에서도 글자가 잘 보이게 하는 '글래스' 느낌의 그림자 */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
    
    /* 기존 text-shadow는 제거하거나 아래와 같이 아주 얇게 유지 */
    -webkit-text-stroke: 0.1px rgba(255, 255, 255, 0.2);
	/* ... 기존 설정 동일 ... */
    
    /* 12초 동안 부드럽게(ease-in-out) 무한 반복(infinite) */
    animation: text-aurora 3s ease-in-out infinite;
}

.sec-company-journey strong {
	
    font-size: 28px;
    font-weight: 700;
}

.sec-company-journey .middle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.sec-company-journey .middle > article {
    max-width: 725px;
    margin: 0 auto;
}

.sec-company-journey .sum strong {
    display: block;
    margin-top: 16px;
    letter-spacing: 0.12em;
	
}

.sec-company-journey .sum p:first-of-type {
    position: relative;
    margin-top: 36px;
	
}

.sec-company-journey .more {
    display: none;
}

.sec-company-journey .btn-line-white {
    margin-top: 44px;
}

.sec-company-journey.open {
    height: auto;
    padding-bottom: 265px;
    background-image: url("../images/img-history-open.jpg");
}

.sec-company-journey.open .middle {
    position: static;
    transform: none;
}

.sec-company-journey.open .sum p:first-of-type {
    margin-top: 140px;
    line-height: 36px;
}

.sec-company-journey.open .sum p:first-of-type:before {
    content: '';
    display: block;
    width: 0px;
    height: 70px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -102px;
    transform: none;
}

.sec-company-journey.open .more {
	color:#8F8F8F;
    display: block;
    line-height: 36px;
}

@media (max-width: 767px) {
    .sec-company-journey {
        min-height: auto;
        height: 665px;
        -padding: 91px 35px 0;
        padding: 0 35px 0;
        font-size: 14px;
        line-height: 24px;
        background-image: url("../images/img-history-m.jpg");
    }

    .sec-company-journey strong {
        font-size: 18px;
    }

    .sec-company-journey .middle {
        position: static;
        transform: none;
        padding-top: 91px;
    }

    .sec-company-journey .sum strong {
        margin-top: 18px;
        letter-spacing: 0;
    }

    .sec-company-journey .sum p:first-of-type {
        display: block;
        margin-top: 19px;
    }

    .sec-company-journey .btn-line-white {
        margin-top: 34px;
    }

    .sec-company-journey.open {
        height: auto;
        padding-bottom: 132px;
        background-image: url("../images/img-history-open-m.jpg");
    }

    .sec-company-journey.open .middle {
        padding: 91px 0 0;
    }

    .sec-company-journey.open .sum p:first-of-type {
        margin-top: 80px;
        line-height: 24px;
    }

    .sec-company-journey.open .sum p:first-of-type:before {
        height: 30px;
        top: -53px;
    }

    .sec-company-journey.open .more {
        line-height: 24px;
    }
}

.sec-company-history {
    min-height: calc(1080px - 80px - 120px);
    height: calc(100vh - 80px - 120px);
    padding-bottom: 80px;
    background-color: #ecfaff;
    box-sizing: border-box;
}

.sec-company-history h3 {
    position: absolute;
    left: 0;
    right: 0;
    max-width: 1200px;
    height: 120px;
    margin: -120px auto 0;
    padding-top: 37px;
    text-align: center;
    border-radius: 118px 118px 0 0;
    background-color: #ecfaff;
    box-sizing: border-box;
}

.ie .sec-company-history .title-visual {
    color: #ecfaff;
}

.sec-company-history .list-prize {
    display: flex;
    margin: 82px 0 0 -27px;
}

.sec-company-history .list-prize span {
    position: relative;
    flex: 1;
    margin-left: 27px;
}

.sec-company-history .list-prize span:before {
    content: '';
    display: block;
    padding-top: 136%;
    background-position: 50% 50%;
    background-size: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.sec-company-history .list-prize span:nth-child(1):before {
    background-image: url("../images/img-prize-01.png");
}

.sec-company-history .list-prize span:nth-child(2):before {
    background-image: url("../images/img-prize-02.png");
}

.sec-company-history .list-prize span:nth-child(3):before {
    background-image: url("../images/img-prize-03.png");
}

.sec-company-history .list-prize span:nth-child(4):before {
    background-image: url("../images/img-prize-04.png");
}

.sec-company-history .list-prize span:nth-child(5):before {
    background-image: url("../images/img-prize-05.png");
}

.sec-company-history .list-prize span:nth-child(6):before {
    background-image: url("../images/img-prize-06.png");
}

.sec-company-history .list-prize span.noshadow:before {
    box-shadow: none;
}

.sec-company-history .list-history {
    position: relative;
    padding-top: 70px;
    padding-bottom: 20px;
    -height: 596px;
    height: calc(100vh - 80px - 643px);
    min-height: 357px;
    box-sizing: border-box;
    overflow: hidden;
}

.sec-company-history .list-history:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 60px;
    background-image: linear-gradient(to top, #ecfaff 0, rgba(236, 250, 255, 0.9) 50%, rgba(236, 250, 255, 0) 95%);
    background-repeat: no-repeat;
}

.sec-company-history .list-history dl {
    position: relative;
    min-height: 86px;
    padding: 14px 0 15px 219px;
    border-bottom: 1px solid #cee8f1;
    box-sizing: border-box;
}

.sec-company-history .list-history dt {
    position: absolute;
    left: -1px;
    top: 14px;
    font-size: 36px;
    font-weight: 600;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.sec-company-history .list-history dd {
    position: relative;
    padding: 8px 0 8px 114px;
}

.sec-company-history .list-history dd > em {
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 18px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    letter-spacing: -0.025em;
}

.sec-company-history .list-history dd > span {
    display: block;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
    letter-spacing: -0.005em;
}

.sec-company-history .list-history dl.single dt {
    top: 12px;
}

.sec-company-history .list-history dl.single dd {
    padding-top: 12px;
}

.sec-company-history .list-history dl.single dd em {
    top: 16px;
}

.sec-company-history.open,
  .sec-company-history.open .list-history {
    height: auto;
}

.sec-company-history.open .list-history:after {
    display: none;
}

@media (max-width: 767px) {
    .sec-company-history {
        min-height: auto;
        height: auto;
        padding-bottom: 55px;
    }

    .sec-company-history h3 {
        left: 20px;
        right: 20px;
        height: 63px;
        margin: -63px auto 0;
        padding-top: 27px;
    }

    .sec-company-history .list-prize {
        display: block;
        height: 190px;
        padding: 5px 10px 10px;
        margin: 70px -20px 0 -20px;
        font-size: 0;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    .sec-company-history .list-prize span {
        display: inline-block;
        width: 121px;
        height: 165px;
        margin: 0 10px;
        vertical-align: top;
    }

    .sec-company-history .list-prize span:before {
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
    }

    .sec-company-history .list-history {
        height: 626px;
        min-height: auto;
        padding-top: 15px;
        padding-bottom: 0;
    }

    .sec-company-history .list-history:after {
        background-image: linear-gradient(to top, #ecfaff 0, rgba(236, 250, 255, 0.9) 0%, rgba(236, 250, 255, 0) 75%);
    }

    .sec-company-history .list-history dl {
        min-height: 74px;
        padding: 64px 0 22px 15px;
    }

    .sec-company-history .list-history dt {
        left: 15px;
        top: 24px;
        font-size: 24px;
    }

    .sec-company-history .list-history dd {
        padding: 4px 0 5px 32px;
    }

    .sec-company-history .list-history dd > em {
        font-size: 15px;
        top: 10px;
    }

    .sec-company-history .list-history dd > em > span {
        display: none;
    }

    .sec-company-history .list-history dd > span {
        font-size: 15px;
        line-height: 31px;
    }

    .sec-company-history .list-history dl.single dt {
        top: 24px;
    }

    .sec-company-history .list-history dl.single dd {
        padding-top: 4px;
    }

    .sec-company-history .list-history dl.single dd em {
        top: 10px;
    }
}

.sec-company-careers {
    height: 926px;
    padding-top: 136px;
    text-align: center;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.sec-company-careers > p {
    margin-top: 24px;
}

.sec-company-careers .btn-color {
    width: 281px;
}

.sec-company-careers ul {
    display: flex;
    margin: 79px 0 0 -7px;
    padding: 0 0 32px;
}

.sec-company-careers li {
    position: relative;
    flex: 1;
    padding-top: 196px;
    margin-left: 7px;
}

.sec-company-careers li > strong {
    font-size: 24px;
    font-weight: 500;
}

.sec-company-careers li > p {
    margin-top: 24px;
}

.sec-company-careers li:before {
    content: '';
    width: 150px;
    height: 152px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background-image: url("../images/set-careers.png");
}

.sec-company-careers li:nth-child(1):before {
    background-position: 0px 0;
}

.sec-company-careers li:nth-child(2):before {
    background-position: -150px 0;
}

.sec-company-careers li:nth-child(3):before {
    background-position: -300px 0;
}

.sec-company-careers li:nth-child(4):before {
    background-position: -450px 0;
}

.sec-company-careers .gallery {
    width: auto;
    height: auto;
}

.sec-company-careers .pg {
    display: none;
}

.sec-company-careers .pagination-wrap {
    display: none;
}

@media (min-width: 768px) {
    .sec-company-careers .swiper-container {
        overflow: visible;
    }
}

@media (max-width: 767px) {
    .sec-company-careers {
        height: 775px;
        padding-top: 91px;
        font-size: 15px;
        line-height: 25px;
    }

    .sec-company-careers > p {
        margin-top: 22px;
    }

    .sec-company-careers .btn-color {
        width: 200px;
    }

    .sec-company-careers ul {
        -display: block;
        height: 323px;
        margin: 53px 0 0 0;
        padding: 0;
        -overflow: hidden;
    }

    .sec-company-careers li {
        width: 100%;
        height: 100%;
        padding: 221px 15px 0;
        margin: 0;
        flex: none;
        box-sizing: border-box;
    }

    .sec-company-careers li > strong {
        font-size: 18px;
    }

    .sec-company-careers li > p {
        margin-top: 14px;
    }

    .sec-company-careers li:before {
        width: 225px;
        height: 200px;
        background-size: auto 200px;
        background-image: url("../images/set-careers-m.png");
    }

    .sec-company-careers li[data-swiper-slide-index="0"]:before {
        background-position: 0px 0;
    }

    .sec-company-careers li[data-swiper-slide-index="1"]:before {
        background-position: -225px 0;
    }

    .sec-company-careers li[data-swiper-slide-index="2"]:before {
        background-position: -450px 0;
    }

    .sec-company-careers li[data-swiper-slide-index="3"]:before {
        background-position: -675px 0;
    }

    .sec-company-careers .gallery {
        position: relative;
        margin: 0 -20px;
        padding: 0 0 39px;
    }

    .sec-company-careers .pg {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 15px;
        z-index: 10;
        font-size: 0;
        line-height: 0;
        display: block;
    }

    .sec-company-careers .pg span {
        display: inline-block;
        width: 6px;
        height: 6px;
        margin: 0 7px;
        background-color: #d9d9d9;
        border-radius: 3px;
    }

    .sec-company-careers .pg span.current {
        background-color: #000;
    }

    .sec-company-careers .pagination-wrap {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1px;
        z-index: 10;
        display: block;
    }
}

.sec-company-design {
    height: 840px;
    padding-top: 259px;
    box-sizing: border-box;
    background-image: url("../images/img-design.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-company-design .ci .logo {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 308px;
    height: 319px;
    margin-left: 149px;
    background-image: url("../images/ci-fullname.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-company-design .ci .text {
    max-width: 290px;
    padding-top: 14px;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.sec-company-design .ci .text > p {
    margin: 54px 0 43px;
}

@media (max-width: 767px) {
    .sec-company-design {
        height: 581px;
        padding-top: 66px;
        background-image: url("../images/img-design-m.jpg");
    }

    .sec-company-design .ci {
        position: static;
        text-align: center;
        padding: 0 35px;
    }

    .sec-company-design .ci .logo {
        display: none;
    }

    .sec-company-design .ci .text {
        max-width: 100%;
        padding-top: 0;
        font-size: 15px;
        line-height: 25px;
    }

    .sec-company-design .ci .text p {
        margin: 23px 0 0;
    }

    .sec-company-design .ci .text p:after {
        content: '';
        display: block;
        height: 167px;
        margin: 33px 0 41px;
        background-image: url("../images/ci-fullname.png");
        background-position: 50% 0;
        background-repeat: no-repeat;
        background-size: auto 167px;
    }
}

.sec-map {
    padding: 166px 0 67px;
    background-color: #ecfaff;
}

.sec-map figure {
    max-width: 1200px;
    height: 613px;
    max-width: 1200px;
    margin: 0 auto;
    background-image: url("../images/img-contact-map.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 767px) {
    .sec-map {
        padding: 100px 0 50px;
    }

    .sec-map figure {
        height: 269px;
        background-image: url("../images/img-contact-map-m.png");
        background-position: 62% 0;
    }
}

.sec-contact {
    padding-bottom: 200px;
}

.sec-contact .branch .items {
    position: relative;
    padding: 7px 0 50px 50%;
    margin-top: 85px;
}

.sec-contact .branch .items > strong {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 40px;
    font-weight: 500;
    font-family: inherit;
}

.sec-contact .branch .items > p {
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.sec-contact .branch .items ul {
    margin-top: 10px;
}

.sec-contact .branch .items li {
    position: relative;
    padding-left: 50px;
}

.sec-contact .branch .items li em {
    position: absolute;
    left: 0;
    top: 1px;
    color: #00baf2;
    font-size: 18px;
    font-weight: 500;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.win .sec-contact .branch .items li em {
    top: 4px;
}

.sec-contact .branch .items li span {
    color: #000;
    font-size: 18px;
    font-weight: 300;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    line-height: 32px;
}

.sec-contact .branch .items li span + span:before {
    content: '/';
    margin-right: 4px;
    vertical-align: 0;
}

.sec-contact .branch .items li i {
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
    letter-spacing: 0.025em;
    color: #909090;
    font-family: "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.sec-contact .branch .items .position {
    position: relative;
    height: 440px;
    margin-top: 50px;
}

.sec-contact .branch .items .position:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    background-size: cover;
    background-position: 50% 50%;
}

.sec-contact .branch .items .position .map {
    background: gray;
    display: block;
    width: 100%;
    height: 100%;
}

.sec-contact .branch .items:nth-child(1) .position:before {
    background-image: url("../images/img-branch-01.jpg");
    background-position: 0 0;
    background-repeat: no-repeat;
}

.sec-contact .branch .items:nth-child(2) .position:before {
    background-image: url("../images/img-branch-02.jpg");
    background-position: 0 0;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .sec-contact .branch .items {
        padding: 69px 0 0;
        margin-top: 71px;
        margin-bottom: -5px;
    }

    .sec-contact .branch .items > strong {
        font-size: 27px;
    }

    .sec-contact .branch .items > p {
        font-size: 15px;
        line-height: 21px;
    }

    .sec-contact .branch .items ul {
        margin-top: 18px;
    }

    .sec-contact .branch .items li {
        padding: 0 0 4px 24px;
        margin-top: 8px;
    }

    .sec-contact .branch .items li em {
        font-size: 12px;
        top: 0;
    }

    .sec-contact .branch .items li span {
        display: block;
        font-size: 15px;
        line-height: 21px;
    }

    .sec-contact .branch .items li i {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0;
    }

    .sec-contact .branch .items li span + span:before {
        display: none;
    }

    .sec-contact .branch .items .position {
        height: auto;
        margin-top: 30px;
        border: 1px solid #ddd;
        padding-top: 73.123%;
    }

    .sec-contact .branch .items .position:before {
        transform: none;
        bottom: 50%;
        z-index: 3;
    }

    .sec-contact .branch .items .position .map {
        height: auto;
        padding-top: 73.163%;
    }
}

.sec-contact .global {
    margin-top: 100px;
}

.sec-contact .global ul {
    border-top: 2px solid #000;
}

.sec-contact .global li {
    position: relative;
    padding: 31px 0 32px 309px;
    border-bottom: 1px solid #ddd;
    word-break: break-all;
}

.sec-contact .global li strong {
    position: absolute;
    left: 30px;
    top: 29px;
    font-size: 24px;
    font-weight: 500;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    letter-spacing: 0.025em;
}

.sec-contact .global li p {
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.sec-contact .global li a {
    position: relative;
    display: inline-block;
    margin: 0 0 0 27px;
    color: #000;
    font-size: 18px;
    font-weight: 300;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.sec-contact .global li a:before {
    content: '';
    position: absolute;
    left: -27px;
    top: 11px;
    display: block;
    width: 14px;
    height: 12px;
    margin: 0 auto;
    background-image: url("../images/icon-mail-pc.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.win .sec-contact .global li a::before {
    top: 8px;
}

@media (max-width: 767px) {
    .sec-contact .global {
        margin-top: 105px;
    }

    .sec-contact .global ul {
        border-width: 1px;
    }

    .sec-contact .global li {
        padding: 31px 15px 34px;
    }

    .sec-contact .global li strong {
        position: static;
        font-size: 18px;
        line-height: 20px;
    }

    .sec-contact .global li p {
        font-size: 15px;
        line-height: 25px;
        margin-top: 19px;
    }

    .sec-contact .global li a {
        font-size: 15px;
        margin: 8px 0 0 24px;
    }

    .sec-contact .global li a:before {
        width: 15px;
        height: 9px;
        top: 8px;
        left: -24px;
        background-image: url("../images/icon-mail.png");
        background-size: auto 100%;
        background-position: 2px 0;
    }
}

@media (max-width: 767px) {
    .sec-contact {
        padding-bottom: 100px;
    }
}

.core-system {
    text-align: center;
    padding-top: 95px;
    padding-bottom: 143px;
}

.core-system .desc {
    margin-top: 107px;
    font-size: 40px;
    font-weight: 500;
    font-family: inherit;
}

.core-system ul {
    display: flex;
    margin: 58px -15px 0;
    align-items: flex-start;
}

.core-system li {
    padding: 0 15px;
    flex: 1;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.core-system li strong {
    position: relative;
    display: block;
    padding-top: 100%;
    border-radius: 100%;
    color: #fff;
    background-position: 50% 50%;
    background-size: cover;
    font-size: 21px;
    font-weight: 700;
    font-family: inherit;
    line-height: 32px;
}

.core-system li strong > div {
    margin-top: 11px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.core-system li strong em {
    display: block;
    font-size: 46px;
    margin-bottom: 11px;
}

.core-system li strong b {
    font-size: 53px;
    font-weight: 700;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.core-system li:nth-child(1) strong {
    background-image: url("../images/img-tech-sys-01.png");
}

.core-system li:nth-child(2) strong {
    background-image: url("../images/img-tech-sys-02.png");
}

.core-system li:nth-child(3) strong {
    background-image: url("../images/img-tech-sys-03.png");
}

.core-system li p {
    margin-top: 61px;
    padding: 0 36px;
}

@media (max-width: 767px) {
    .core-system {
        padding: 54px 35px 79px;
    }

    .core-system .desc {
        font-size: 27px;
        margin-top: 63px;
    }

    .core-system ul {
        display: block;
        margin: 0;
    }

    .core-system li {
        padding: 28px 0 15px;
        flex: none;
        font-size: 15px;
        line-height: 25px;
    }

    .core-system li strong {
        width: 76%;
        padding-top: 76%;
        margin: 0 auto;
        font-size: 16px;
        line-height: 30px;
    }

    .core-system li strong > div {
        margin-top: 5px;
    }

    .core-system li strong em {
        display: block;
        font-size: 29px;
        margin-bottom: 0;
    }

    .core-system li strong b {
        font-size: 32px;
    }

    .core-system li p {
        margin-top: 28px;
        padding: 0;
    }
}

.core-process {
    padding: 150px 0 195px;
    background-color: #ecfaff;
    text-align: center;
}

.core-process figure {
    margin-left: -152px;
}

.core-process figure img {
    display: block;
}

.core-process figure img.mobile {
    display: none;
}

.core-process h4 {
    margin-top: 35px;
    font-size: 40px;
    font-weight: 500;
    font-family: inherit;
}

.core-process h4 em {
    display: block;
    font-size: 20px;
    line-height: 36px;
}

.core-process .con {
    margin-top: 49px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.core-process p {
    margin-top: 9px;
    font-size: 14px;
    font-weight: 300;
    font-family: inherit;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
    .core-process {
        padding: 100px 35px 144px;
    }

    .core-process figure {
        margin: 0 -35px;
    }

    .core-process figure img {
        max-width: 100%;
    }

    .core-process figure img.pc {
        display: none;
    }

    .core-process figure img.mobile {
        display: block;
    }

    .core-process h4 {
        margin-top: 38px;
        font-size: 27px;
    }

    .core-process h4 em {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 6px;
    }

    .core-process .con {
        margin-top: 28px;
        font-size: 15px;
        line-height: 25px;
    }

    .core-process p {
        margin-top: 22px;
        font-size: 13px;
        line-height: 23px;
    }
}

.needle-info {
    text-align: center;
    padding-top: 87px;
    padding-bottom: 143px;
}

.needle-info .video {
    position: relative;
    margin-top: 122px;
    padding-top: 56.25%;
}

.needle-info .video iframe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.needle-info p {
    margin-top: 59px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.needle-info p strong {
    font-weight: 500;
}

@media (max-width: 767px) {
    .needle-info {
        padding-top: 56px;
        padding-bottom: 95px;
    }

    .needle-info .video {
        margin-top: 57px;
    }

    .needle-info p {
        margin-top: 33px;
        padding: 0 15px;
        font-size: 15px;
        line-height: 25px;
    }
}

.needle-component {
    text-align: center;
    padding: 135px 0 143px;
    background-color: #ecfaff;
}

.needle-component ul {
    width: 930px;
    white-space: nowrap;
    margin: 63px auto 0;
}

.needle-component li {
    display: inline-block;
    width: 33.333%;
    padding: 0 35px;
    vertical-align: top;
    box-sizing: border-box;
    white-space: normal;
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    line-height: 30px;
}

.needle-component li:before {
    content: '';
    display: block;
    padding-top: 100%;
    margin-bottom: 37px;
    border-radius: 100%;
    border: 1px solid #d0e9f2;
    background-position: 50% 50%;
    background-size: cover;
}

.needle-component li:nth-child(1):before {
    background-image: url("../images/img-needle-01.jpg");
}

.needle-component li:nth-child(2):before {
    background-image: url("../images/img-needle-02.jpg");
}

.needle-component li:nth-child(3):before {
    background-image: url("../images/img-needle-03.jpg");
}

.needle-component .video {
    position: relative;
    margin-top: 118px;
    padding-top: 56.25%;
}

.needle-component .video iframe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.needle-component p {
    margin-top: 59px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.needle-component p strong {
    font-weight: 500;
}

@media (max-width: 767px) {
    .needle-component {
        padding-top: 92px;
        padding-bottom: 95px;
    }

    .needle-component ul {
        width: auto;
        margin: 35px -5px 0;
    }

    .needle-component li {
        padding: 0 5px;
        font-size: 15px;
        line-height: 25px;
    }

    .needle-component li:before {
        margin-bottom: 45px;
    }

    .needle-component li em {
        display: block;
        padding: 0 10px;
        transform: translateY(-50%);
    }

    .needle-component .video {
        margin-top: 30px;
    }

    .needle-component p {
        margin-top: 33px;
        padding: 0 15px;
        font-size: 14px;
        line-height: 24px;
    }
}

.needle-point {
    text-align: center;
    padding: 135px 0 200px;
}

.needle-point .table {
    display: flex;
    margin: 61px auto 0;
    border-top: 2px solid #000;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
}

.needle-point .table dl {
    display: inline-block;
    flex: 1;
    width: 33.333%;
    box-sizing: border-box;
    vertical-align: top;
}

.needle-point .table dl + dl {
    border-left: 1px solid #ddd;
}

.needle-point .table dt {
    background-color: #ecfaff;
    padding: 23px 0 24px;
    border-bottom: 1px solid #ddd;
    font-size: 24px;
    font-weight: 400;
}

.needle-point .table dd {
    padding: 15px 65px 24px;
    white-space: normal;
}

.needle-point ul {
    display: inline-block;
    margin: 0 auto;
}

.needle-point li {
    position: relative;
    padding-left: 9px;
    margin-top: 6px;
    display: block;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 31px;
    text-align: left;
}

.needle-point li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    width: 2px;
    height: 2px;
    background-color: #000;
}

@media (max-width: 767px) {
    .needle-point {
        padding: 92px 0 85px;
    }

    .needle-point .table {
        display: block;
        margin: 29px 0 0;
        white-space: normal;
        border-top: none;
    }

    .needle-point .table dl {
        width: 100%;
        flex: none;
        border-top: 2px solid #000;
    }

    .needle-point .table dl + dl {
        border-left: none;
    }

    .needle-point .table dt {
        font-size: 18px;
        border-bottom: 1px solid #000;
        padding: 14px 0 16px;
    }

    .needle-point .table dd {
        padding: 8px 15px 17px;
        text-align: left;
    }

    .needle-point ul {
        margin: 0;
    }

    .needle-point li {
        font-size: 15px;
        line-height: 27px;
        margin-top: 10px;
    }

    .needle-point li:before {
        top: 12px;
    }
}

.tech-functional {
    text-align: center;
    padding-top: 130px;
    padding-bottom: 200px;
}

.tech-functional figure {
    margin-top: 58px;
}

.tech-functional figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .tech-functional {
        padding-top: 85px;
        padding-bottom: 100px;
    }

    .tech-functional figure {
        width: auto;
        height: 269px;
        margin: 34px 0 0;
        padding: 0;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tech-functional figure:before {
        width: calc(536px + 40px);
        height: 269px;
        content: '';
        margin: 0 auto;
        display: block;
        background-image: url("../images/img-den-circle-m.jpg");
        background-position: 50% 0;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }

    .tech-functional figure img {
        display: none;
    }
}

.tech-excellence {
    text-align: center;
    padding-top: 148px;
    font-size: 0;
}

.tech-excellence .step {
    position: relative;
    margin-top: 58px;
}

.tech-excellence li {
    display: inline-block;
    width: 230px;
    height: 230px;
    margin: 0 10px;
    padding-top: 78px;
    border: 1px solid #ddd;
    border-radius: 115px;
    vertical-align: top;
    box-sizing: border-box;
}

.tech-excellence li em {
    display: block;
    font-size: 18px;
}

.tech-excellence li strong {
    display: block;
    width: 100%;
    margin-top: 7px;
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    color: #00baf2;
}

.tech-excellence ul + ul {
    margin-top: 10px;
}

@media (max-width: 767px) {
    .tech-excellence {
        padding-top: 94px;
    }

    .tech-excellence .step {
        margin-top: 19px;
        padding-right: 50%;
        overflow: hidden;
    }

    .tech-excellence li {
        display: block;
        width: 160px;
        height: 160px;
        margin: 15px 5px 0;
        padding-top: 52px;
    }

    .tech-excellence li em {
        font-size: 15px;
    }

    .tech-excellence li strong {
        font-size: 18px;
        margin-top: 4px;
        line-height: 25px;
    }

    .tech-excellence ul + ul {
        margin-top: 0;
    }

    .tech-excellence ul:nth-child(1) {
        float: right;
    }

    .tech-excellence ul:nth-child(2) {
        position: absolute;
        left: 50%;
        top: 80px;
    }
}

.tech-process {
    text-align: center;
    background-color: #ecfaff;
    padding-bottom: 150px;
    padding-top: 136px;
}

.tech-process figure {
    margin-top: 63px;
}

.tech-process figure img {
    display: block;
    margin: 0 auto;
}

.tech-process figure img.mobile {
    display: none;
}

.tech-process p {
    margin-top: 29px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

@media (max-width: 767px) {
    .tech-process {
        padding: 93px 35px 100px;
    }

    .tech-process figure {
        margin-top: 52px;
    }

    .tech-process figure img.pc {
        display: none;
    }

    .tech-process figure img.mobile {
        display: block;
        max-width: 100%;
    }

    .tech-process p {
        margin-top: 28px;
        font-size: 15px;
        line-height: 25px;
    }
}

.tech-dk {
    text-align: center;
    padding-bottom: 150px;
    padding-top: 86px;
}

.tech-dk .desc {
    margin-top: 62px;
    font-size: 20px;
    font-weight: 500;
    font-family: inherit;
}

.tech-dk ol {
    white-space: nowrap;
    font-size: 0;
    display: flex;
    max-width: 1364px;
    margin: 100px auto 0;
    padding: 0 32px;
}

.tech-dk ol li {
    position: relative;
    display: inline-flex;
    flex: 1;
    width: 270px;
    height: 100px;
    padding-bottom: 3px;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 300;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.tech-dk ol li + li {
    margin-left: 61px;
}

.tech-dk ol li + li:before {
    content: '';
    position: absolute;
    left: -62px;
    top: 45px;
    width: 61px;
    height: 11px;
    background-image: url("../images/arrow-den-right.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

.tech-dk p.con {
    margin-top: 70px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.tech-dk p.con strong {
    font-weight: 500;
}

.tech-dk .video {
    position: relative;
    margin-top: 115px;
    padding-top: 56.25%;
}

.tech-dk .video iframe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    .tech-dk {
        padding-bottom: 94px;
        padding-top: 56px;
    }

    .tech-dk .desc {
        margin-top: 29px;
        font-size: 16px;
        line-height: 26px;
        padding: 0 15px;
    }

    .tech-dk ol {
        margin-top: 60px;
        padding: 0 15px;
        flex-wrap: wrap;
    }

    .tech-dk ol li {
        width: 50%;
        height: 70px;
        flex: none;
        margin-left: 0;
        padding-bottom: 1px;
        font-size: 15px;
        border: none;
    }

    .tech-dk ol li:after {
        content: '';
        border: 1px solid #ddd;
        border-radius: 35px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .tech-dk ol li:before {
        display: none;
    }

    .tech-dk ol li + li {
        margin-left: 0;
    }

    .tech-dk ol li:nth-child(n+3) {
        margin-top: 30px;
    }

    .tech-dk ol li:nth-child(1), .tech-dk ol li:nth-child(4) {
        padding-right: 15px;
    }

    .tech-dk ol li:nth-child(1):after, .tech-dk ol li:nth-child(4):after {
        right: 15px;
    }

    .tech-dk ol li:nth-child(2), .tech-dk ol li:nth-child(3) {
        padding-left: 15px;
    }

    .tech-dk ol li:nth-child(2):after, .tech-dk ol li:nth-child(3):after {
        left: 15px;
    }

    .tech-dk ol li:nth-child(2):before {
        content: '';
        position: absolute;
        left: -15px;
        top: 30px;
        display: block;
        width: 20px;
        height: 9px;
        background-image: url("../images/arrow-den-right-m.png");
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 20px auto;
    }

    .tech-dk ol li:nth-child(3):before {
        content: '';
        position: absolute;
        left: calc(50% + 4px);
        top: -30px;
        display: block;
        width: 9px;
        height: 20px;
        background-image: url("../images/arrow-den-down-m.png");
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 9px auto;
    }

    .tech-dk ol li:nth-child(4):before {
        content: '';
        position: absolute;
        left: auto;
        right: -15px;
        top: 30px;
        display: block;
        width: 20px;
        height: 9px;
        background-image: url("../images/arrow-den-left-m.png");
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 20px auto;
    }

    .tech-dk ol li:nth-child(3) {
        order: 4;
    }

    .tech-dk ol li:nth-child(4) {
        order: 3;
    }

    .tech-dk p.con {
        margin-top: 59px;
        font-size: 15px;
        line-height: 25px;
        padding: 0 35px;
    }

    .tech-dk .video {
        margin-top: 55px;
    }
}

.pipe-table {
    text-align: center;
    padding-top: 83px;
    padding-bottom: 200px;
}

.pipe-table figure {
    margin-top: 69px;
}

.pipe-table figure img {
    display: block;
}

.pipe-table figure img.pc {
    max-width: 100%;
}

.pipe-table figure img.mobile {
    display: none;
}

@media (max-width: 767px) {
    .pipe-table {
        padding-top: 54px;
        padding-bottom: 100px;
    }

    .pipe-table figure {
        display: block;
        margin: 57px -20px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pipe-table figure img.pc {
        display: none;
    }

    .pipe-table figure img.mobile {
        display: block;
        height: 613px;
        border-left: 20px solid #fff;
        border-right: 20px solid #fff;
    }
}

.result-info {
    text-align: center;
    padding-top: 83px;
    padding-bottom: 113px;
}

.result-info .desc {
    margin-top: 59px;
    font-size: 20px;
    font-weight: 500;
    font-family: inherit;
    line-height: 36px;
}

@media (max-width: 767px) {
    .result-info {
        padding: 54px 35px 55px;
    }

    .result-info .desc {
        margin-top: 30px;
        font-size: 16px;
        line-height: 26px;
    }
}

.result-medicine {
    background-color: #ecfaff;
    padding-bottom: 150px;
    padding-top: 136px;
    text-align: center;
}

.result-medicine .list-dot {
    margin-top: 19px;
}

.result-medicine .list-dot li {
    position: relative;
    padding: 0 0 0 12px;
    margin-top: 6px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.result-medicine .list-dot li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    width: 3px;
    height: 3px;
    background-color: #00baf2;
    border-radius: 1px;
}

.result-medicine .list-half {
    text-align: left;
    padding-top: 20px;
}

.result-medicine .list-half .item {
    position: relative;
    display: flex;
    height: 389px;
    margin-top: 39px;
    border: 1px solid #cee8f1;
    padding-right: 50%;
    background-color: #fff;
    align-items: center;
}

.result-medicine .list-half .item.right {
    padding-left: 50%;
    padding-right: 0;
}

.result-medicine .list-half .item:before {
    content: '';
    width: 50%;
    border-left: 1px solid #cee8f1;
    background-position: 50% 50%;
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    left: auto;
}

.result-medicine .list-half .item.right:before {
    left: auto;
    right: 50%;
    border-left: none;
    border-right: 1px solid #cee8f1;
}

.result-medicine .list-half .item .text {
    margin: 25px 50px 0 80px;
}

.result-medicine .list-half .item:nth-child(1):before {
    background-image: url("../images/img-half-01.jpg");
}

.result-medicine .list-half .item:nth-child(2):before {
    background-image: url("../images/img-half-02.jpg");
}

.result-medicine .list-triple {
    display: flex;
    margin-top: 105px;
    text-align: left;
}

.result-medicine .list-triple .item {
    flex: 1;
    height: 446px;
    border: 1px solid #cee8f1;
    background-color: #fff;
    box-sizing: border-box;
}

.result-medicine .list-triple .item h5 {
    height: 70px;
    margin: -35px 36px 0;
    border-radius: 35px;
    font-size: 24px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 70px;
}

.result-medicine .list-triple .item figure {
    height: 56px;
    margin: 40px 0 11px;
    background-position: 50% 50%;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.result-medicine .list-triple .item .list-dot {
    margin-left: 40px;
    margin-right: 40px;
}

.result-medicine .list-triple .item:nth-child(2) {
    margin: 0 30px;
}

.result-medicine .list-triple .item:nth-child(1) h5 {
    background-color: #ee3897;
}

.result-medicine .list-triple .item:nth-child(1) figure {
    background-image: url("../images/img-triple-01-pc.jpg");
}

.result-medicine .list-triple .item:nth-child(2) h5 {
    background-color: #573f99;
}

.result-medicine .list-triple .item:nth-child(2) figure {
    background-image: url("../images/img-triple-02-pc.jpg");
}

.result-medicine .list-triple .item:nth-child(3) h5 {
    background-color: #00baf2;
}

.result-medicine .list-triple .item:nth-child(3) figure {
    background-image: url("../images/img-triple-03-pc.jpg");
}

@media (max-width: 767px) {
    .result-medicine {
        padding-top: 94px;
        padding-bottom: 0;
    }

    .result-medicine .list-dot {
        margin-top: 22px;
    }

    .result-medicine .list-dot li {
        padding-left: 9px;
        font-size: 15px;
        line-height: 25px;
        margin-top: 11px;
    }

    .result-medicine .list-dot li:before {
        width: 2px;
        height: 2px;
        top: 11px;
    }

    .result-medicine .list-half {
        padding-top: 33px;
    }

    .result-medicine .list-half .item {
        display: block;
        margin-top: 20px;
        padding-right: 0;
        padding-top: 59.56%;
        padding-bottom: 34px;
        height: auto;
    }

    .result-medicine .list-half .item.right {
        padding-left: 0;
    }

    .result-medicine .list-half .item:before {
        width: 100%;
        padding-top: 59.56%;
        bottom: auto;
        border-bottom: 1px solid #cee8f1;
    }

    .result-medicine .list-half .item.right:before {
        right: 0;
        width: 100%;
    }

    .result-medicine .list-half .item .text {
        margin: 56px 25px 0;
    }

    .result-medicine .list-half .item:nth-child(1):before {
        background-image: url("../images/img-half-01-m.jpg");
    }

    .result-medicine .list-half .item:nth-child(2):before {
        background-image: url("../images/img-half-02-m.jpg");
    }

    .result-medicine .list-triple {
        display: block;
        margin-top: 0;
        padding-top: 40px;
        padding-bottom: 100px;
    }

    .result-medicine .list-triple .item {
        flex: none;
        height: auto;
        margin-top: 45px;
        padding-bottom: 34px;
    }

    .result-medicine .list-triple .item h5 {
        height: 50px;
        margin: -25px 52px 0;
        border-radius: 25px;
        font-size: 18px;
        line-height: 50px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    .result-medicine .list-triple .item figure {
        height: 35px;
        margin: 35px 0 7px;
    }

    .result-medicine .list-triple .item .list-dot {
        margin-left: 25px;
        margin-right: 25px;
    }

    .result-medicine .list-triple .item:nth-child(2) {
        margin: 45px 0 0;
    }

    .result-medicine .list-triple .item:nth-child(1) figure {
        background-image: url("../images/img-triple-01.jpg");
    }

    .result-medicine .list-triple .item:nth-child(2) figure {
        background-image: url("../images/img-triple-02.jpg");
    }

    .result-medicine .list-triple .item:nth-child(3) figure {
        background-image: url("../images/img-triple-03.jpg");
    }
}

.result-device .thera {
    position: relative;
    padding: 136px 0 150px 50%;
}

.result-device .thera > figure {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -185px;
}

.result-device .thera > .text {
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
}

.result-device .text h4 {
    text-align: center;
}

.result-device .text > figure {
    display: none;
}

.result-device .text ul {
    margin-top: 58px;
    border-top: 1px solid #000;
}

.result-device .text ul > li {
    position: relative;
    padding: 21px 0 3px 29px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.result-device .text ul > li:before {
    content: '';
    position: absolute;
    left: 20px;
    top: 36px;
    display: block;
    width: 2px;
    height: 2px;
    background-color: #000;
}

.result-device .text ul > li > strong {
    font-weight: 500;
}

.result-device .text ul ol {
    counter-reset: idx;
}

.result-device .text ul ol li {
    position: relative;
    padding: 0 0 0 33px;
    counter-increment: idx;
}

.result-device .text ul ol li:before {
    content: "0" counter(idx);
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 18px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #00baf2;
}

.result-device .text ul .gallery {
    overflow: hidden;
    margin: 23px -10px 0;
}

.result-device .text ul .gallery img {
    display: block;
    float: left;
    border: 1px solid #dfdfdf;
    margin: 10px 10px 0;
}

@media (max-width: 767px) {
    .result-device .thera {
        padding: 93px 0 121px;
    }

    .result-device .thera > figure {
        display: none;
    }

    .result-device .thera > .text {
        padding-bottom: 35px;
    }

    .result-device .text .title-csub {
        padding: 0;
    }

    .result-device .text > figure {
        display: block;
        width: 100%;
        margin-top: 33px;
        text-align: center;
    }

    .result-device .text > figure img {
        max-width: 100%;
        margin: 0 auto;
    }

    .result-device .text ul {
        margin-top: 44px;
        padding-top: 6px;
    }

    .result-device .text ul > li {
        padding: 22px 15px 0 25px;
        font-size: 15px;
        line-height: 25px;
    }

    .result-device .text ul > li:before {
        left: 15px;
        top: 33px;
    }

    .result-device .text ul ol li {
        padding: 0 0 0 27px;
    }

    .result-device .text ul ol li:before {
        font-size: 15px;
    }

    .result-device .text ul .gallery {
        margin: 19px 0 0;
    }

    .result-device .text ul .gallery img {
        width: 91px;
        box-sizing: border-box;
        margin: 0;
    }

    .result-device .text ul .gallery img + img {
        margin-left: 11px;
    }
}

.sec-slide {
    position: relative;
    min-height: 652px;
}

.sec-slide .restrict-1200 {
    position: static;
}

.sec-slide .titles {
    position: relative;
    width: 335px;
    padding-top: 150px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.sec-slide .titles p {
    margin-top: 35px;
    min-height: 128px;
}

.sec-slide .slide {
    position: absolute;
    left: 41.354%;
    right: 0;
    top: 120px;
    overflow: hidden;
    -overflow-x: auto;
}

.sec-slide .slide .flickity-viewport {
    padding-bottom: 1px;
    height: 430px !important;
}

.sec-slide .slide ul {
    white-space: nowrap;
    font-size: 0;
}

.sec-slide .slide li {
    width: 200px;
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    margin-right: 60px;
}

.sec-slide .slide li img {
    border: 1px solid #dedede;
}

.sec-slide .slide li p {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 300;
    font-family: inherit;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.5);
}

.sec-slide .slide .mobile-description {
    display: none;
}

.sec-slide .btns {
    margin-top: 35px;
}

.sec-slide .btns a {
    float: left;
    width: 25px;
    height: 31px;
}

.sec-slide .btns a[disabled] {
    opacity: 0.2;
}

.sec-slide .btns a + a {
    margin-left: 20px;
}

.sec-slide .btns .prev {
    background-image: url("../images/arr-set-prev.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sec-slide .btns .next {
    background-image: url("../images/arr-set-next.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .sec-slide {
        min-height: auto;
        text-align: center;
        padding: 93px 0 0;
    }

    .sec-slide .titles {
        width: 100%;
        padding: 0;
        font-size: 15px;
        line-height: 25px;
    }

    .sec-slide .titles p {
        margin-top: 28px;
        padding: 0 15px;
        min-height: auto;
    }

    .sec-slide .slide {
        position: relative;
        margin: 44px -20px 0;
        left: 0;
        top: 0;
        padding-bottom: 193px;
    }

    .sec-slide .slide .flickity-viewport {
        height: 200px !important;
    }

    .sec-slide.cosmetic-auth .slide .flickity-viewport {
        height: 210px !important;
    }

    .sec-slide .slide li {
        width: 140px;
        margin: 0 18px;
    }

    .sec-slide .slide li img {
        max-width: 100%;
    }

    .sec-slide .slide li p {
        display: none;
    }

    .sec-slide .slide .mobile-description {
        font-size: 13px;
        font-weight: 300;
        font-family: inherit;
        line-height: 23px;
        color: rgba(0, 0, 0, 0.5);
        position: absolute;
        left: 35px;
        right: 35px;
        margin-top: 28px;
        display: block;
    }

    .sec-slide .btns {
        display: none;
    }
}

.result-thesis {
    background-color: #f8f8f8;
}

@media (min-width: 768px) {
    .result-patent .titles p {
        min-height: 70px;
    }
}

.strategy-info {
    text-align: center;
    padding-top: 83px;
    padding-bottom: 70px;
}

@media (max-width: 767px) {
    .strategy-info {
        padding-top: 53px;
        padding-bottom: 55px;
    }

    .strategy-info h3 {
        padding: 0 15px;
    }
}

.strategy-ing {
    text-align: center;
    color: #fff;
    padding-top: 139px;
    padding-bottom: 154px;
    box-sizing: border-box;
    background-image: url("../images/bg-strategy-ing.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.strategy-ing p {
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.strategy-ing .con {
    height: 482px;
    margin-top: 33px;
    background-image: url("../images/img-main-best.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

@media (max-width: 767px) {
    .strategy-ing {
        padding-top: 95px;
        padding-bottom: 100px;
        background-image: url("../images/bg-strategy-ing-m.jpg");
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .strategy-ing .restrict-1200 {
        padding: 0;
    }

    .strategy-ing p {
        font-size: 15px;
        line-height: 25px;
        padding: 0 35px;
    }

    .strategy-ing .con {
        height: 437px;
        margin-top: 40px;
        background-image: url("../images/img-main-best-m.png");
        background-size: cover;
        background-position: 50% 0;
    }
}

.strategy-fast {
    text-align: center;
    padding-top: 134px;
    padding-bottom: 170px;
}

.strategy-fast .desc {
    margin-top: 33px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.strategy-fast ol {
    counter-reset: cnum;
    font-size: 0;
    margin-top: 63px;
}

.strategy-fast ol li {
    position: relative;
    display: inline-flex;
    width: 260px;
    height: 260px;
    padding-bottom: 24px;
    margin: 0 25px;
    border: 1px solid #ddd;
    border-radius: 130px;
    justify-content: center;
    align-items: center;
    counter-increment: cnum;
    flex-flow: column;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.strategy-fast ol li:before {
    content: "0" counter(cnum);
    display: block;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #00baf2;
}

.strategy-fast .same {
    margin-top: 115px;
}

.strategy-fast .same h5 {
    font-size: 30px;
    line-height: 36px;
}

.strategy-fast .same figure {
    margin: 66px -30px 0;
}

.strategy-fast .same figure img {
    display: block;
    max-width: 100%;
}

.strategy-fast .same figure img.m {
    display: none;
}

@media (max-width: 767px) {
    .strategy-fast {
        padding-top: 93px;
        padding-bottom: 100px;
    }

    .strategy-fast .desc {
        font-size: 15px;
        line-height: 25px;
        padding: 0 35px;
    }

    .strategy-fast ol {
        margin-top: 29px;
    }

    .strategy-fast ol li {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        font-size: 15px;
        line-height: 25px;
        margin-top: 15px;
        padding: 0 40px 10px;
    }

    .strategy-fast ol li:before {
        font-size: 19px;
    }

    .strategy-fast .same {
        margin-top: 93px;
    }

    .strategy-fast .same h5 {
        font-size: 21px;
        line-height: 31px;
    }

    .strategy-fast .same figure {
        margin: 35px 0 0;
    }

    .strategy-fast .same figure img.pc {
        display: none;
    }

    .strategy-fast .same figure img.m {
        display: block;
    }
}

.cosmetic-info {
    text-align: center;
    padding-top: 189px;
    padding-bottom: 118px;
}

.cosmetic-info p {
    margin-top: 60px;
    font-size: 20px;
    line-height: 36px;
}

@media (max-width: 767px) {
    .cosmetic-info {
        padding: 92px 35px 55px;
    }

    .cosmetic-info p {
        margin-top: 33px;
        font-size: 16px;
        line-height: 26px;
    }
}

.cosmetic-distinction {
    text-align: center;
    background-color: #ecfaff;
    padding-top: 136px;
    padding-bottom: 147px;
}

.cosmetic-distinction figure img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.cosmetic-distinction figure img.m {
    display: none;
}

.cosmetic-distinction figure.diction {
    margin-top: 99px;
}

.cosmetic-distinction figure.needle {
    margin-top: 62px;
}

.cosmetic-distinction h5 {
    margin-top: 86px;
    font-size: 30px;
    font-weight: 500;
    font-family: inherit;
}

@media (max-width: 767px) {
    .cosmetic-distinction {
        padding-top: 92px;
        padding-bottom: 99px;
    }

    .cosmetic-distinction figure {
        padding: 0 20px;
    }

    .cosmetic-distinction figure img.pc {
        display: none;
    }

    .cosmetic-distinction figure img.m {
        display: block;
    }

    .cosmetic-distinction figure.diction {
        margin-top: 44px;
        padding: 0 62px;
    }

    .cosmetic-distinction figure.needle {
        margin-top: 35px;
    }

    .cosmetic-distinction h5 {
        margin-top: 68px;
        font-size: 21px;
        line-height: 31px;
    }
}

.cosmetic-iso {
    max-width: 1920px;
    text-align: center;
    margin: 0 auto;
    padding-top: 134px;
    padding-bottom: 120px;
}

.cosmetic-iso .desc {
    margin-top: 30px;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.cosmetic-iso .slide {
    position: relative;
    height: 575px;
    margin-top: 68px;
    font-size: 0;
    white-space: nowrap;
    -padding: 25px 0 0 25%;
    box-sizing: border-box;
}

.cosmetic-iso .slide:before {
    content: '';
    position: absolute;
    left: -200px; 
    top: 50%;
    transform: translateY(-50%);
    width: 600px; 
    height: 600px;
    display: block;
    z-index: -1;
    border-radius: 50%;
	

    /* [핵심: 로고와 행성 배경 결합] */
    background-image: 
        url('../images/ci.png'), /* 1. 로고 이미지 경로 */
        radial-gradient(                          /* 2. 행성 배경 그라데이션 */
            circle at 30% 30%,
            rgba(255, 255, 255, 0.4) 0%,      
            rgba(64, 190, 228, 0.3) 40%,      
            rgba(87, 64, 153, 0.4) 80%        
        );
    
    /* [배경 설정] */
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center; /* 로고와 배경 모두 정중앙 */
    background-size: 250px auto, cover;                /* 로고 크기 조절 (250px) */

    /* [기존 효과 유지] */
    backdrop-filter: blur(30px) saturate(120%);
    -webkit-backdrop-filter: blur(30px) saturate(120%);
    box-shadow: 
        inset -20px -20px 50px rgba(87, 64, 153, 0.3),
        inset 20px 20px 50px rgba(255, 255, 255, 0.2),
        0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* 애니메이션 */
    animation: planet-rotate-flow 15s ease-in-out infinite;
}

/* 로고와 대기가 함께 움직이는 듯한 애니메이션 */
@keyframes planet-rotate-flow {
    0% { 
        background-position: center center, 0% 50%; 
        transform: translateY(-30%) rotate(0deg);
    }
    50% { 
        background-position: center center, 100% 50%; 
        transform: translateY(-50%) rotate(5deg); /* 미세한 회전 효과 */
    }
    100% { 
        background-position: center center, 0% 50%; 
        transform: translateY(-30%) rotate(0deg);
    }
}

.cosmetic-iso .slide .flickity-viewport {
    padding-bottom: 25px;
    overflow: visible;
}

.cosmetic-iso .slide .flickity-slider {
    padding-top: 25px;
}

.cosmetic-iso .slide li {
    display: inline-block;
    vertical-align: top;
    padding: 0 40px;
    white-space: normal;
}

.cosmetic-iso .slide li:first-child {
    padding-left: 480px;
}

.cosmetic-iso .slide li:last-child {
    padding-right: 80px;
}

.cosmetic-iso .slide figure {
    border: 1px solid #dedede;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

.cosmetic-iso .slide figure img {
    width: 318px;
    display: block;
}

.cosmetic-iso .slide em {
    display: block;
    margin-top: 30px;
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    line-height: 36px;
}

@media (max-width: 767px) {
    .cosmetic-iso {
        padding-top: 93px;
        padding-bottom: 90px;
    }

    .cosmetic-iso .desc {
        font-size: 15px;
        line-height: 25px;
        padding: 0 35px;
    }

    .cosmetic-iso .slide {
        height: auto;
        margin-top: 45px;
        background: none;
        -padding: 0 20px;
    }

    .cosmetic-iso .slide:before {
        display: none;
    }

    .cosmetic-iso .slide .flickity-viewport {
        padding-bottom: 0;
        overflow: hidden;
    }

    .cosmetic-iso .slide .flickity-slider {
        padding-top: 0;
    }

    .cosmetic-iso .slide li {
        width: 160px;
        padding: 0 17px;
    }

    .cosmetic-iso .slide li:first-child {
        padding-left: 17px;
    }

    .cosmetic-iso .slide li:last-child {
        padding-right: 17px;
    }

    .cosmetic-iso .slide li:not(.is-selected) em {
        opacity: 0;
        transition: opacity 0.1s;
    }

    .cosmetic-iso .slide figure {
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
    }

    .cosmetic-iso .slide figure img {
        width: 158px;
        max-width: 100%;
    }

    .cosmetic-iso .slide em {
        margin-top: 24px;
        font-size: 18px;
        transition: opacity 0.5s;
    }
}

.sec-gallery {
    position: relative;
    border-top: 44px solid #fff;
    border-bottom: 179px solid #fff;
    max-width: 1396px;
    margin: 0 auto;
}

.sec-gallery .slide {
    padding: 0 98px;
}

.sec-gallery .slide li {
    position: relative;
    width: 100%;
}

.sec-gallery .slide li:before {
    width: 100%;
    content: '';
    padding-top: 56.25%;
    display: block;
}

.sec-gallery .slide img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.sec-gallery .btns a {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    background-color: #f7f7f7;
    border-radius: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition-property: background-color;
    transition-duration: 250ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.hoverable .sec-gallery .btns a:hover {
    background-color: #d7d7d7;
}

.sec-gallery .btns a:before {
    content: '';
    width: 8px;
    height: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sec-gallery .btns a.prev {
    left: 0;
}

.sec-gallery .btns a.prev:before {
    background-image: url("../images/icon-arr-prev.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

.sec-gallery .btns a.next {
    right: 0;
}

.sec-gallery .btns a.next:before {
    background-image: url("../images/icon-arr-next.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

.sec-gallery .pg {
    position: relative;
    width: 108px;
    margin-top: 19px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 400;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #000;
    line-height: 1;
}

.sec-gallery .pg .bar {
    position: absolute;
    left: 2em;
    right: 2em;
    top: 50%;
    height: 1px;
    background: #d9d9d9;
}

.sec-gallery .pg .bar span {
    height: 100%;
    background: #000;
    display: block;
    transition: width 0.3s ease-out;
}

.sec-gallery .pg .total {
    position: absolute;
    right: 0;
    top: 0;
}

@media (max-width: 767px) {
    .sec-gallery {
        border: 0;
        padding-bottom: 129px;
    }

    .sec-gallery .slide {
        padding: 0;
    }

    .sec-gallery .btns {
        display: none;
    }
}

.cosmetic-odm {
    text-align: center;
    background-color: #ecfaff;
    padding-top: 136px;
    padding-bottom: 150px;
}

.cosmetic-odm p {
    margin-top: 32px;
    font-size: 20px;
    font-weight: 500;
}

.cosmetic-odm .con {
    max-width: 1200px;
    height: 613px;
    margin: 64px auto 0;
    background-image: url("../images/img-main-most.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

@media (max-width: 767px) {
    .cosmetic-odm {
        padding-top: 93px;
        padding-bottom: 0;
    }

    .cosmetic-odm p {
        margin-top: 25px;
        font-size: 16px;
        line-height: 26px;
        padding: 0 35px;
    }

    .cosmetic-odm .con {
        height: 559px;
        margin-top: 57px;
        background: none;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cosmetic-odm .con:before {
        width: calc(920px + 40px);
        height: 470px;
        content: '';
        margin: 0 auto;
        display: block;
        background-image: url("../images/img-main-most.png");
        background-position: 50% 0;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }
}

.cosmetic-auth .slide li p {
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: #000;
}

@media (max-width: 767px) {
    .cosmetic-auth .slide {
        padding-bottom: 123px;
    }

    .cosmetic-auth .slide .mobile-description {
        font-size: 15px;
        color: #000;
        margin-top: 15px;
    }
}

.sec-direct {
    padding-bottom: 200px;
    letter-spacing: 0.025em;
}

.sec-direct .link {
    position: relative;
    display: flex;
    background-color: #f8f8f8;
    height: 200px;
    flex-direction: column;
    justify-content: center;
    padding: 0 80px;
}

.sec-direct .link h6 {
    font-size: 32px;
    font-weight: 700;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
}

.sec-direct .link p {
    display: block;
    font-size: 20px;
    font-weight: 600;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    padding-bottom: 16px;
}

.sec-direct .link a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 80px;
}

@media (max-width: 767px) {
    .sec-direct {
        text-align: center;
        padding-bottom: 100px;
    }

    .sec-direct .link {
        height: auto;
        padding-top: 30px;
        padding: 30px 15px 40px;
    }

    .sec-direct .link h6 {
        font-size: 22px;
    }

    .sec-direct .link p {
        font-size: 16px;
        line-height: 20px;
        padding-bottom: 0;
        margin-top: 8px;
    }

    .sec-direct .link a {
        position: static;
        transform: none;
        margin: 32px auto 0;
        max-width: 160px;
    }
}

.medical-info {
    text-align: center;
    padding-top: 189px;
    padding-bottom: 118px;
}

.medical-info p {
    margin-top: 60px;
    font-size: 20px;
    line-height: 36px;
}

@media (max-width: 767px) {
    .medical-info {
        padding: 92px 35px 55px;
    }

    .medical-info p {
        margin-top: 33px;
        font-size: 16px;
        line-height: 26px;
    }
}

.medical-cdmo {
    padding-top: 150px;
    padding-bottom: 115px;
}

.medical-cdmo .half {
    position: relative;
    display: flex;
    padding-left: calc(50% + 50px);
    min-height: 331px;
    flex-direction: column;
    justify-content: center;
}

.medical-cdmo figure {
    position: absolute;
    left: 0;
    top: 50%;
    right: 50%;
    transform: translateY(-50%);
}

.medical-cdmo figure img {
    display: block;
    max-width: 100%;
}

.medical-cdmo figure img.m {
    display: none;
}

.medical-cdmo h5 {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    margin: 48px 0 20px;
}

.medical-cdmo .text {
    font-size: 18px;
    line-height: 32px;
}

@media (max-width: 767px) {
    .medical-cdmo {
        padding-top: 90px;
        padding-bottom: 0;
    }

    .medical-cdmo .half {
        display: block;
        padding: 0;
        min-height: auto;
    }

    .medical-cdmo figure {
        position: static;
        transform: none;
        margin: 0 -20px 0 0;
        overflow: hidden;
        margin-top: 33px;
    }

    .medical-cdmo figure img {
        float: right;
    }

    .medical-cdmo figure img.pc {
        display: none;
    }

    .medical-cdmo figure img.m {
        display: block;
    }

    .medical-cdmo h5 {
        font-size: 21px;
        text-align: center;
        margin: 36px 0 12px;
    }

    .medical-cdmo .text {
        font-size: 15px;
        line-height: 25px;
        padding: 34px 15px 95px;
        text-align: center;
    }
}

/* 1. 오로라 애니메이션 정의 */
@keyframes aurora {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. 텍스트가 위로 솟아오르는 애니메이션 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.medical-component {
    text-align: center;
    padding-top: 134px;
    padding-bottom: 150px;
    position: relative;
    overflow: hidden;
    
    /* 오로라 배경 설정 */
    background: linear-gradient(-45deg, #0f172a, #1e3a8a, #10b981, #1e40af);
    background-size: 400% 400%;
    animation: aurora 15s ease infinite;
}

/* 글래스모피즘 텍스트 컨테이너 */
.medical-component .text-wrapper {
    display: inline-block;
    padding: 60px 80px;
    background: rgba(255, 255, 255, 0.03); /* 아주 투명한 배경 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    
    /* 텍스트 애니메이션 적용 */
    animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.medical-component h2 {
    font-size: 2.8rem;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    /* 텍스트에 살짝 광택 효과 */
    background: linear-gradient(to right, #fff, #8fe3cf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
	
	
	
.medical-component p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
}

.medical-component ol {
    counter-reset: cnum;
    font-size: 0;
    margin-top: 63px;
}

.medical-component ol li {
    position: relative;
    display: inline-flex;
    width: 260px;
    height: 260px;
    padding-bottom: 24px;
    margin: 0 25px;
    border: 1px solid #cee8f1;
    border-radius: 130px;
    justify-content: center;
    align-items: center;
    counter-increment: cnum;
    flex-flow: column;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    line-height: 32px;
}

.medical-component ol li:before {
    content: "0" counter(cnum);
    display: block;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 400;
    font-family: "pt mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    color: #00baf2;
}

.medical-component h5 {
    font-size: 30px;
    font-weight: 500;
}

.medical-component figure {
    margin: 30px 0 57px;
}

.medical-component figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.medical-component figure img.m {
    display: none;
}

@media (max-width: 767px) {
    .medical-component {
        padding-top: 93px;
        padding-bottom: 100px;
    }

    .medical-component ol {
        margin-top: 20px;
    }

    .medical-component ol li {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        font-size: 15px;
        line-height: 25px;
        margin-top: 15px;
        padding: 0 40px 10px;
    }

    .medical-component ol li:before {
        font-size: 19px;
    }

    .medical-component h5 {
        font-size: 21px;
    }

    .medical-component figure {
        padding: 0 15px;
        margin: 34px 0 60px;
    }

    .medical-component figure img.pc {
        display: none;
    }

    .medical-component figure img.m {
        display: block;
    }
}

.sec-bi {
    text-align: center;
    height: 1204px;
    box-sizing: border-box;
}

.sec-bi h3 img {
    display: block;
    margin: 0 auto;
}

.sec-bi p {
    font-size: 20px;
    font-weight: 500;
    font-family: inherit;
    line-height: 36px;
}

.sec-bi .anchor {
    font-size: 0;
    margin-top: 53px;
}

.sec-bi .anchor a {
    display: inline-block;
    min-width: 199px;
    height: 60px;
    margin: 0 10px;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 500;
    font-family: "Montserrat", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    text-transform: uppercase;
    color: #000;
    line-height: 56px;
    transition-property: color, background-color;
    transition-duration: 250ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.hoverable .sec-bi .anchor a:hover {
    background-color: #000;
    color: #fff;
}

@media (max-width: 767px) {
    .sec-bi {
        height: auto;
    }

    .sec-bi p {
        font-size: 15px;
        line-height: 25px;
        padding: 0 35px;
    }

    .sec-bi .anchor {
        margin-top: 43px;
    }

    .sec-bi .anchor a {
        display: block;
        max-width: 150px;
        min-width: 150px;
        height: 45px;
        margin: 15px auto 0;
        font-size: 16px;
        line-height: 45px;
    }
}

.fitkong-bi {
    position: relative;
    padding-top: 181px;
    background: linear-gradient(135deg, #f6f4f1 10%, #e7e2de 100%);
}

.fitkong-bi:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("../images/bg-fitkong.png");
    background-position: 50% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.fitkong-bi p {
    margin-top: 26px;
}

@media (max-width: 767px) {
    .fitkong-bi {
        padding-top: 100px;
        padding-bottom: 302px;
    }

    .fitkong-bi h3 img {
        height: 39px;
    }

    .fitkong-bi p {
        margin-top: 34px;
    }

    .fitkong-bi:before {
        top: auto;
        height: 300px;
        background-size: auto 100%;
        background-image: url("../images/bg-fitkong-m.png");
    }
}

.acro-bi {
    position: relative;
    padding-top: 200px;
    background-color: #fbf3ee;
}

.acro-bi:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("../images/bg-acro.png");
    background-position: 50% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.acro-bi p {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .acro-bi {
        padding-top: 100px;
        padding-bottom: 356px;
    }

    .acro-bi h3 img {
        height: 27px;
    }

    .acro-bi p {
        margin-top: 34px;
    }

    .acro-bi:before {
        top: auto;
        height: 335px;
        background-size: auto 100%;
        background-image: url("../images/bg-acro-m.png");
    }
}

.fitkong-history {
    text-align: center;
    padding-top: 180px;
    padding-bottom: 103px;
}

.fitkong-history figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.fitkong-history figure img.m {
    display: none;
}

@media (max-width: 767px) {
    .fitkong-history {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .fitkong-history figure img.pc {
        display: none;
    }

    .fitkong-history figure img.m {
        display: block;
    }
}

.acro-product {
    text-align: center;
    padding-top: 170px;
    padding-bottom: 0;
    letter-spacing: 0.025em;
}

.acro-product h4 {
    font-size: 48px;
    font-weight: 600;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    line-height: 48px;
}

.acro-product figure {
    margin-top: 67px;
}

.acro-product figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .acro-product {
        padding-top: 84px;
        padding-bottom: 0;
    }

    .acro-product h4 {
        font-size: 24px;
    }

    .acro-product figure {
        width: calc(100% + 40px);
        margin: 54px -20px 0;
        padding-top: 64.5333%;
        background-image: url("../images/img-derma-m.jpg");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .acro-product figure img {
        display: none;
    }
}

.acro-drug {
    text-align: center;
    padding-top: 120px;
    padding-bottom: 103px;
}

.acro-drug figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.acro-drug figure img.m {
    display: none;
}

@media (max-width: 767px) {
    .acro-drug {
        padding-top: 68px;
        padding-bottom: 15px;
    }

    .acro-drug figure {
        padding: 0 35px;
    }

    .acro-drug figure img.pc {
        display: none;
    }

    .acro-drug figure img.m {
        display: block;
    }
}

.acro-channel {
    text-align: center;
    padding-bottom: 160px;
}

.acro-channel h4 {
    border-bottom: 2px solid #000;
    padding-bottom: 37px;
    margin-top: 85px;
}

.acro-channel figure img {

    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.acro-channel figure img.m {
    display: none;
}

@media (max-width: 767px) {
    .acro-channel {
        padding-bottom: 100px;
        padding-top: 3px;
    }

    .acro-channel h4 {
        padding-bottom: 29px;
        margin-top: 68px;
    }

    .acro-channel figure img.pc {
        display: none;
    }

    .acro-channel figure img.m {
        display: block;
    }
}

.main-hgroup h4 {
    margin-top: 6px;
    font-size: 40px;
    font-weight: 700;
    font-family: inherit;
}

.main-hgroup > a {
    margin-top: 39px;
}

@media (max-width: 767px) {
    .main-hgroup {
        padding: 84px 35px 0;
    }

    [class*='restrict-'] .main-hgroup {
        padding-left: 0;
        padding-right: 0;
    }

    .main-hgroup h4 {
        margin-top: 16px;
        font-size: 24px;
        line-height: 34px;
    }

    .main-hgroup > a {
        margin-top: 30px;
    }
}

.sec-main-direct {
    position: relative;
    height: 300px;
    font-size: 0;
    zoom: 1;
}

.sec-main-direct:after {
    content: '';
    display: block;
    clear: both;
}

.sec-main-direct a {
    position: relative;
    display: block;
    float: left;
    width: 50%;
    height: 100%;
    color: #fff;
    overflow: hidden;
}

.sec-main-direct a:before {
    content: '';
    background-position: 50% 50%;
    background-size: cover;
    z-index: -2;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: scale3d(1.001, 1.001, 1) rotateZ(0.01deg);
    transition-property: transform;
    transition-duration: 2000ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.sec-main-direct a:nth-child(1):before {
    background-image: url("../images/img-direct-1.jpg");
}

.sec-main-direct a:nth-child(2):before {
    background-image: url("../images/img-direct-2.jpg");
}

.sec-main-direct a > p {
    text-align: center;
    z-index: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 130px;
}

.sec-main-direct a em {
    display: block;
    margin-top: 9px;
    font-size: 18px;
    font-weight: 400;
    font-family: inherit;
    line-height: 28px;
}

.hoverable .sec-main-direct a:hover:before {
    transform: scale3d(1.2, 1.2, 1) rotateZ(0.01deg);
    transition-property: transform;
    transition-duration: 10000ms;
    transition-timing-function: linear;
    transition-delay: 0ms;
}

@media (max-width: 767px) {
    .sec-main-direct {
        height: auto;
    }

    .sec-main-direct a {
        float: none;
        width: 100%;
        height: 110px;
    }

    .sec-main-direct a:nth-child(1):before {
        background-image: url("../images/img-direct-1-m.jpg");
    }

    .sec-main-direct a:nth-child(2):before {
        background-image: url("../images/img-direct-2-m.jpg");
    }

    .sec-main-direct a > p {
        top: 27px;
    }

    .sec-main-direct a strong {
        font-size: 21px;
        white-space: nowrap;
        letter-spacing: 0.05em;
    }

    .sec-main-direct a em {
        font-size: 14px;
        line-height: 24px;
        margin-top: 0;
    }
}

.sec-main-news {
    height: 1080px;
    padding-top: 200px;
    background-color: #f7f7f7;
    text-align: center;
    box-sizing: border-box;
}

.sec-main-news .list-news {
    position: relative;
    padding: 0 120px;
    text-align: left;
}

.sec-main-news .list-news .flickity-viewport {
    width: 100%;
}

.sec-main-news .list-news ul {
    position: relative;
    padding-bottom: 0;
    z-index: 1;
}

.sec-main-news .list-news ul:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 100%;
    content: '';
    background: #f7f7f7;
    z-index: 2;
}

.sec-main-news .list-news li {
    margin-top: 47px;
}

.sec-main-news .list-news .btns {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 127px;
}

.sec-main-news .list-news .btns .next {
    float: right;
}

@media (max-width: 767px) {
    .sec-main-news {
        height: 642px;
        padding-top: 85px;
    }

    .sec-main-news .list-news {
        padding: 0;
        margin: 59px -20px 0;
        overflow: hidden;
        overflow-x: auto;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    .sec-main-news .list-news ul {
        display: block;
        margin: 0;
        white-space: nowrap;
        font-size: 0;
    }

    .sec-main-news .list-news ul:before {
        display: none;
    }

    .sec-main-news .list-news li {
        display: inline-block;
        width: 240px;
        height: 297px;
        padding: 0;
        margin: 0 10px;
        white-space: normal;
        vertical-align: top;
    }

    .sec-main-news .list-news li:first-child {
        width: 275px;
        padding-left: 35px;
    }

    .sec-main-news .list-news li:last-child {
        width: 275px;
        padding-right: 35px;
    }

    .sec-main-news .list-news .text {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sec-main-news .list-news .btns {
        display: none;
    }

    .sec-main-news .list-news .date {
        margin-top: 20px;
    }
}

.sec-main-journey {
    position: relative;
    min-height: 1080px;
    height: calc(100vh - 80px);
    text-align: center;
    color: #fff;
    -padding-top: 407px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url("../images/img-journey.jpg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: auto 150%;
}

.sec-main-journey .obj-1 {
    display: block;
    width: 580px;
    height: 580px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 231px;
    background-image: url("../images/obj-03.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.sec-main-journey .obj-2 {
    position: absolute;
    top: 339px;
    left: calc(50% + 40px);
    width: 250px;
    height: 250px;
    background-image: url("../images/obj-04.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.sec-main-journey .obj-3 {
    position: absolute;
    top: 566px;
    left: calc(50% + 283px);
    width: 161px;
    height: 161px;
    background-image: url("../images/obj-05.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.sec-main-journey .text {
    position: relative;
    z-index: 3;
}

.sec-main-journey .text p {
    display: block;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 400;
    font-family: inherit;
    line-height: 36px;
}

.sec-main-journey .text .btn-line {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .sec-main-journey {
        display: block;
        min-height: auto;
        height: 665px;
        padding-top: 216px;
    }

    .sec-main-journey .obj-1 {
        width: 272px;
        height: 272px;
        top: 170px;
        margin-left: -39px;
    }

    .sec-main-journey .obj-2 {
        width: 117px;
        height: 117px;
        top: 210px;
        left: calc(50% - 5px);
    }

    .sec-main-journey .obj-3 {
        width: 70px;
        height: 70px;
        top: 322px;
        left: calc(50% + 97px);
    }

    .sec-main-journey .text {
        max-width: 305px;
        margin: 0 auto;
    }

    .sec-main-journey .text p {
        margin-top: 22px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
    }

    .sec-main-journey .title-visual {
        font-size: 30px;
        line-height: 36px;
        letter-spacing: 0.05em;
    }
}

.sec-main-brand {
    position: relative;
    text-align: center;
    min-height: 1080px;
    height: calc(100vh - 80px);
}

.sec-main-brand .btns {
    position: absolute;
    left: 50%;
    right: 0;
    top: 50%;
    margin-top: -188px;
    text-align: center;
    z-index: 10;
    font-size: 0;
}

.sec-main-brand .btns button {
    margin: 0 10px;
}

.sec-main-brand .swiper-container.main {
    width: 50%;
    margin: 0 0 0 auto;
}

.sec-main-brand .pagination {
    display: none;
}

.sec-main-brand ul {
    width: 100%;
    height: calc(100vh - 80px);
    min-height: 1080px;
}

.sec-main-brand li {
    position: relative;
    height: 100%;
    -padding-left: 50%;
    box-sizing: border-box;
}

.sec-main-brand li .text {
    min-width: 360px;
    padding-top: 93px;
    margin-top: 26px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 400;
    font-family: inherit;
    line-height: 32px;
}

.sec-main-brand li .text .logo {
    height: 66px;
    background-position: 50% 0;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    bottom: auto;
}

.sec-main-brand li .text strong {
    display: block;
}

.sec-main-brand li .text .btn-line-black {
    margin-top: 43px;
}

@media (min-width: 768px) {
    .sec-main-brand .swiper-container.main li:not(.swiper-slide-active) .text .logo,
    .sec-main-brand .swiper-container.main li:not(.swiper-slide-active) .text strong,
    .sec-main-brand .swiper-container.main li:not(.swiper-slide-active) .text .btn-line-black {
        transform: translate3d(0, 100px, 0);
        opacity: 0;
    }

    .sec-main-brand .swiper-container.main li.swiper-slide-active .text, .sec-main-brand .swiper-container.main li.swiper-slide-duplicate-active .text {
        outline: 1px solid transparent;
    }

    .sec-main-brand .swiper-container.main li.swiper-slide-active .text .logo,
      .sec-main-brand .swiper-container.main li.swiper-slide-active .text strong,
      .sec-main-brand .swiper-container.main li.swiper-slide-active .text .btn-line-black, .sec-main-brand .swiper-container.main li.swiper-slide-duplicate-active .text .logo,
      .sec-main-brand .swiper-container.main li.swiper-slide-duplicate-active .text strong,
      .sec-main-brand .swiper-container.main li.swiper-slide-duplicate-active .text .btn-line-black {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        transition: opacity 1s, transform 1s cubic-bezier(0.19, 0.92, 0.32, 1);
    }

    .sec-main-brand .swiper-container.main li.swiper-slide-active .text strong, .sec-main-brand .swiper-container.main li.swiper-slide-duplicate-active .text strong {
        transition-delay: 0.1s;
    }

    .sec-main-brand .swiper-container.main li.swiper-slide-active .text .btn-line-black, .sec-main-brand .swiper-container.main li.swiper-slide-duplicate-active .text .btn-line-black {
        transition-delay: 0.2s;
    }
}

.sec-main-brand .swiper-container.visual {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
}

.sec-main-brand .swiper-container.visual li {
    overflow: hidden;
}

.sec-main-brand .swiper-container.visual li .image {
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
}

.sec-main-brand .swiper-container.visual li.acropass .image {
    background-image: url("../images/img-main-brand-01.jpg");
}

.sec-main-brand .swiper-container.visual li.fitkong .image {
    background-image: url("../images/img-main-brand-02.jpg");
}

.sec-main-brand .acropass {
    background-color: #f3e9e5;
}

.sec-main-brand .acropass .text .logo {
    background-image: url("../images/img-main-brand-logo-01.png");
}

.sec-main-brand .fitkong {
    background-color: #f0ede8;
}

.sec-main-brand .fitkong .text .logo {
    background-image: url("../images/img-main-brand-logo-02.png");
}

@media (max-width: 767px) {
    .sec-main-brand {
        display: block;
        min-height: auto;
        height: auto;
    }

    .sec-main-brand .btns {
        display: none;
    }

    .sec-main-brand .swiper-container.main {
        width: 100%;
        z-index: 2;
    }

    .sec-main-brand .swiper-container.visual {
        display: none;
    }

    .sec-main-brand .pagination {
        position: absolute;
        top: 354px;
        left: 20px;
        right: 20px;
        height: 63px;
        padding-top: 28px;
        border-radius: 63px 63px 0 0;
        box-sizing: border-box;
        background-color: #fff;
        display: block;
        z-index: 10;
        pointer-events: none;
    }

    .sec-main-brand ul {
        height: 706px;
        min-height: auto;
    }

    .sec-main-brand li {
        padding: 417px 0 0 0;
        background: none !important;
    }

    .sec-main-brand li:before {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 417px;
        content: '';
        background-position: 50% 50%;
        background-size: cover;
    }

    .sec-main-brand li:after {
        position: absolute;
        left: 0;
        right: 0;
        top: 417px;
        bottom: 0;
        content: '';
        background: #fff;
    }

    .sec-main-brand li .text {
        position: relative;
        left: auto;
        top: auto;
        min-width: 305px;
        height: auto;
        padding: 0;
        margin-top: 24px;
        font-size: 14px;
        line-height: 24px;
        transform: none;
        z-index: 1;
    }

    .sec-main-brand li .text .logo {
        position: static;
        display: block;
        height: 40px;
        background-size: auto 40px;
        background-position: 50% 50%;
    }

    .sec-main-brand li .text strong {
        margin-top: 17px;
    }

    .sec-main-brand li .text .btn-line-black {
        margin-top: 30px;
    }

    .sec-main-brand .acropass:before {
        background-image: url("../images/img-main-brand-m-01.jpg");
    }

    .sec-main-brand .acropass .text .logo {
        background-image: url("../images/img-main-brand-logo-m-01.png");
    }

    .sec-main-brand .fitkong:before {
        background-image: url("../images/img-main-brand-m-02.jpg");
    }

    .sec-main-brand .fitkong .text .logo {
        background-image: url("../images/img-main-brand-logo-m-02.png");
    }
}

.sec-main-tongue {
    /* 기존 레이아웃 유지 */
    position: relative;
    width: 960px;
    height: 238px;
    padding: 40px 60px;
    margin-bottom: -238px;
    transform: translateY(-200px);
    z-index: 10;
    box-sizing: border-box; /* 패딩이 width에 포함되도록 안정성 추가 */
    
    /* 1. 글래스모피즘 (유리 질감) 개선 */
    /* 불투명도를 약간 낮춰야 backdrop-filter가 예쁘게 적용됩니다 */
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%);
    color: #fff;
    border-radius: 24px; /* 조금 더 부드러운 곡률 */
    
    /* 2. 세련된 그림자와 빛 반사 효과 */
    border: 1px solid rgba(255, 255, 255, 0.15); /* 깔끔한 반투명 테두리 */
    box-shadow: 
        0 30px 60px -12px rgba(0, 0, 0, 0.25), /* 깊이감 있는 부드러운 그림자 */
        inset 0 1px 1px rgba(255, 255, 255, 0.2), /* 상단 빛 반사 */
        inset 0 -1px 1px rgba(0, 0, 0, 0.05); /* 하단 어두운 반사 */
        
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); /* 사파리 호환성 */
}

.sec-main-tongue::before {
    content: '';
    position: absolute;
    inset: -3px; /* top/left/right/bottom 대신 최신 속성 사용 */
    
    /* 3. 색상 조합을 메인 톤과 어울리게 조금 더 고급스럽게 조정 */
    background: linear-gradient(
        60deg, 
        #ff6b6b, #4ecdc4, #667eea, #764ba2, #feca57, #ff6b6b
    );
    background-size: 300% 300%; /* 애니메이션을 위해 배경을 크게 확장 */
    border-radius: 27px; /* 본체의 radius + inset 만큼 크게 설정 */
    z-index: -1;
    filter: blur(24px); /* 빛 번짐을 더 부드럽게 */
    opacity: 0.6;
    pointer-events: none; /* 클릭 방해 방지 */
    
    /* 4. 부자연스러운 회전 대신 부드럽게 색상이 흐르는 애니메이션 */
    animation: auroraGlow 8s ease-in-out infinite;
}

/* 5. 배경 위치를 이동시켜 오로라처럼 빛나는 효과 연출 */
@keyframes auroraGlow {
    0% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.8; /* 중간에 빛이 강해짐 */
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
}

.sec-main-tongue .text {
    position: relative;
    padding-left: 329px;
}

.sec-main-tongue .text strong {
    position: absolute;
    left: 0;
    top: 0;
}

.sec-main-tongue .text p {
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    line-height: 28px;
}

.sec-main-tongue .text .btn-line {
    margin: 15px 0 0 -5px;
}

@media (min-width: 1920px) {
    .sec-main-tongue {
        width: 50%;
    }
}

@media (max-width: 767px) {
    .sec-main-tongue {
        width: 100%;
        height: 375px;
        padding: 73px 0 0;
        margin: 0;
        transform: none;
        text-align: center;
        border-radius: 0;
        box-shadow: none;
    }

    .sec-main-tongue .text {
        padding: 0 35px;
    }

    .sec-main-tongue .text strong {
        position: static;
        line-height: 36px;
    }

    .sec-main-tongue .text p {
        margin-top: 19px;
        font-size: 14px;
        line-height: 24px;
    }

    .sec-main-tongue .text .btn-line {
        margin: 28px 0 0;
    }
}

.sec-main-visual {
    position: relative;
    -padding-top: 56.25%;
    min-height: 1080px;
    height: 100vh;
    background-color: #000;
    background-position: 50% 50%;
    background-size: cover;
    color: #fff;
    text-align: center;
    overflow: hidden;
    z-index: 0;
}

.sec-main-visual h2 {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 35px;
    right: 35px;
    z-index: 6;
    font-size: 40px;
    font-weight: 700;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    line-height: 60px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sec-main-visual .video {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    transform: translate3d(0, 0, 0);
    -background: gray;
    overflow: hidden;
}

.sec-main-visual .video video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    visibility: hidden;
    outline: 1px solid transparent;
}

@media (max-width: 767px) {
    .sec-main-visual {
        display: block;
        min-height: auto;
        height: 665px;
        padding-top: 0;
    }

    .sec-main-visual h2 {

        font-size: 24px;
        line-height: 37px;
        letter-spacing: 0.05em;
    }

    .sec-main-visual .video {
        display: none;
    }

    .sec-main-visual .slide {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .sec-main-visual .slide ul {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .sec-main-visual .slide li {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0;
    }

    .sec-main-visual .slide li.current {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1);
        transition: opacity 2s ease-out, transform 7s linear;
    }
}

.sec-main-tech {
    min-height: 1080px;
    height: calc(100vh - 80px);
    text-align: center;
    display: flex;
    color: #fff;
    flex-direction: column;
    justify-content: center;
}

.ie .sec-main-tech .title-visual.typeline {
    color: #fff11;
}

.sec-main-tech .con {
    position: relative;
    height: 430px;
    margin-top: 80px;
}

.sec-main-tech .con .image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("../images/main.gif");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-main-tech .con dl {
    position: relative;
}

.sec-main-tech .con dt {
    display: block;
    padding-bottom: 94px;
    transform: translateY(-25px);
    font-size: 40px;
    font-weight: 700;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    line-height: 45px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

:not(.ie) .sec-main-tech .con dt {
    -webkit-text-stroke: 1px #fff;
    color: transparent;
}

.sec-main-tech .con dt svg {
    display: block;
}

.sec-main-tech .con dt text {
    font-size: 40px;
    font-weight: 700;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    stroke: #000;
    line-height: 45px;
}

.sec-main-tech .con dd {
    padding: 4px 0;
    transform: translateY(-25px);
    font-size: 18px;
    font-weight: 500;
    font-family: "Exo 2", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Noto Sans KR",  sans-serif;
    line-height: 36px;
}

@media (max-width: 767px) {
    .sec-main-tech {
        display: block;
        min-height: auto;
        height: 655px;
        padding: 0 35px;
    }

    .sec-main-tech .con {
        height: 227px;
        margin-top: 65px;
    }

    .sec-main-tech .con dl {
        -transform: translateY(-23px);
    }

    .sec-main-tech .con dt {
        font-size: 27px;
        line-height: 34px;
        letter-spacing: 0.05em;
        padding-bottom: 31px;
        transform: translateY(-23px);
    }

    .sec-main-tech .con dd {
        font-size: 16px;
        line-height: 37px;
        font-weight: 600;
        padding: 0;
        transform: translateY(-23px);
    }
}

.sec-main-best {
    min-height: 1080px;
    height: calc(100vh - 80px);
    color: #fff11;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url("../images/img-best.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 150%;
}

.ie .sec-main-best .title-visual {
    color: #73b5df;
}

.sec-main-best .con {
    height: 482px;
    background-image: url("../images/img-main-best.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

@media (max-width: 767px) {
    .sec-main-best {
        display: block;
        min-height: auto;
        height: 807px;
        background-image: url("../images/img-best-m.jpg");
    }

    .sec-main-best [class*='restrict-'] {
        padding: 0;
    }

    .sec-main-best .con {
        height: 437px;
        margin-top: 40px;
        background-image: url("../images/img-main-best-m.png");
        background-size: cover;
        background-position: 50% 0;
    }
}

.sec-main-most {
    height: 2160px;
    background-color: #ecfaff;
    text-align: center;
}

.sec-main-most .main-hgroup {
    padding-top: 180px;
}

.ie .sec-main-most .title-visual.typeline {
    color: #ecfaff;
}

.sec-main-most .con {
    max-width: 1200px;
    height: 613px;
    margin: -14px auto 0;
    background-image: url("../images/img-main-most.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.sec-main-most h5 {
    font-size: 40px;
    font-weight: 700;
    font-family: inherit;
	
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000FF', endColorstr='#FFFF00');
    color: #000000;
}

.sec-main-most .medal {
    margin-top: 235px;
}

.sec-main-most .medal .slide {
    margin-top: 142px;
}

.sec-main-most .medal ul {
    font-size: 0;
    white-space: nowrap;
}

.sec-main-most .medal li {
    display: inline-block;
    width: 250px;
    padding: 0 60px;
    vertical-align: top;
    white-space: normal;
}

.sec-main-most .medal li figure img {
    width: 100%;
}

.sec-main-most .medal li em {
    display: block;
    margin-top: 64px;
    padding: 0 25px;
    font-size: 20px;
    font-weight: 300;
    font-family: inherit;
    line-height: 28px;
}

.sec-main-most .flickity-viewport {
    height: 490px !important;
}

.sec-main-most .mobile-description {
    display: none;
}

@media (max-width: 767px) {
    .sec-main-most {
        height: 1207px;
    }

    .sec-main-most .main-hgroup {
        padding: 84px 35px 0;
    }

    .sec-main-most .con {
        height: 423px;
        margin-top: 6px;
        background: none;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sec-main-most .con:before {
        width: calc(920px + 40px);
        height: 470px;
        content: '';
        margin: 0 auto;
        display: block;
        background-image: url("../images/img-main-most.png");
        background-position: 50% 0;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }

    .sec-main-most .medal {
        margin-top: 25px;
    }

    .sec-main-most .medal .slide {
        position: relative;
        margin-top: 65px;
    }

    .sec-main-most .medal li {
        width: 160px;
        padding: 0 30px;
    }

    .sec-main-most .medal li em {
        margin-top: 25px;
        padding: 0 15px;
        visibility: hidden;
        font-size: 18px;
        font-weight: 400;
        font-family: inherit;
        line-height: 28px;
        display: block;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .sec-main-most .flickity-viewport {
        height: 318px !important;
    }

    .sec-main-most .mobile-description {
        position: absolute;
        left: 0;
        right: 0;
        top: 262px;
        display: block;
        pointer-events: none;
        font-size: 18px;
        font-weight: 400;
        font-family: inherit;
        line-height: 28px;
    }

    .sec-main-most h5 {
        font-size: 24px;
        line-height: 34px;
    }
}

.layer-ad {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
}

.layer-ad .wrap {
    position: absolute;
    left: 10%;
    top: 100px;
}

.layer-ad .wrap img {
    width: 100%;
    display: block;
}

.layer-ad .foot {
    position: relative;
    height: 44px;
    background: #f6f6f3;
    border-top: 1px solid #b4c1c9;
}

.layer-ad .foot input[type="checkbox"] {
    position: absolute;
    left: -999em;
}

.layer-ad .foot label {
    position: static;
    height: 100%;
    font-size: 14px;
    color: #000;
    letter-spacing: -0.025em;
    line-height: 41px;
    padding: 0 20px 0 35px;
    display: inline-block;
}

.layer-ad .foot label:before {
    position: absolute;
    left: 17px;
    top: 15px;
    width: 13px;
    height: 13px;
    content: '';
    margin: 0;
    border: none;
    background: #1176c0;
}

.layer-ad .foot label:after {
    position: absolute;
    left: 24px;
    top: 22px;
    width: 11px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    box-sizing: border-box;
    background: none;
    transform-origin: 0 0;
    transform: rotate(45deg) scale(0.6);
}

.layer-ad .foot input[type="checkbox"]:checked ~ label:after {
    content: '';
}

.layer-ad .btn-close {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 54px;
    text-indent: -999em;
    background: url("../images/icon-close-ad.png") no-repeat 50% 50%;
    background-size: 18px 18px;
    overflow: hidden;
}

@media (max-width: 767px) {
    .layer-ad .wrap {
        position: absolute;
        left: 20px;
        right: 20px;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-50%);
    }

    .layer-ad .foot {
        height: 39px;
    }

    .layer-ad .foot label {
        padding-left: 39px;
        line-height: 36px;
    }

    .layer-ad .foot label:before {
        left: 16px;
        top: 11px;
        width: 16px;
        height: 16px;
    }

    .layer-ad .foot label:after {
        left: 24px;
        top: 17px;
        border-width: 0 1px 1px 0;
        transform: rotate(45deg) scale(0.75) translateX(1px);
    }

    .layer-ad .btn-close {
        width: 36px;
        background-size: 12px 12px;
    }
}

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 
.video-container iframe, .video-container object, .video-container embed {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}


/* 1. hover 시 display 변경 제거 + 크기 고정 */
header .snb a {
    display: block !important;  /* inline-block 강제 제거 */
    padding: 15px 35px;  /* 고정 패딩 */
    border: 1px solid transparent;  /* transparent border로 크기 유지 */
    box-sizing: border-box;
}
.hoverable header .snb a:hover,
header .snb a.current {
    /* display: inline-block; ← 이 줄 삭제/주석 */
    border-color: rgba(87, 67, 151, 0.2);  /* 색만 변경 */
    background: linear-gradient(to right, 574397, eb3e97);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: fff;
}



/* 2. 서브메뉴 absolute로 변경 (레이아웃 안 밀림) */
header .snb .sub {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0;  /* 음수 마진 제거 */
    width: 200px;  /* 고정 너비 */
    height: auto;
    overflow: visible;
    background: white;
    border: 5px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
header .snb li:hover .sub {
    opacity: 1;
    visibility: visible;
}

/* 3. 스크롤바/헤더 시프트 방지 (body 상단에 추가) */
html {
    overflow-y: scroll;  /* 스크롤바 공간 고정 */
}
header {
    will-change: transform;  /* GPU 가속으로 떨림 완화 */
}



/* 🔥 메뉴 흔들림 100% 해결 - !important 강제 적용 */
header nav.snb,
header nav.snb ul,
header nav.snb li {
    position: relative !important;
}

header nav.snb a {
    display: block !important;  /* inline-block 완전 차단 */
    padding: 15px 35px !important;
    line-height: 1.4 !important;  /* 라인하이트 고정 */
    border: 0px solid transparent !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;  /* 텍스트 감싸짐 방지 */
    transition: all 0.25s ease !important;
}

/* hover: 크기 변하지 않게 색/배경만 변경 */
.hoverable header nav.snb a:hover,
header nav.snb a.current,
header nav.snb a:hover {
    border-color: rgba(87, 67, 151, 0.3) !important;
    background: linear-gradient(to right, 574397, eb3e97) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    /* display: inline-block 제거됨 → 크기 안정 */
    transform: none !important;  /* 추가 transform 방지 */
}

/* 서브메뉴: absolute로 레이아웃 시프트 완전 차단 */
header nav.snb > ul > li {
    position: relative !important;
}

header nav.snb .sub {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 0 !important;  /* -5px 제거 */
    min-width: 220px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    overflow: visible !important;
}

header nav.snb li:hover > .sub {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
header nav.snb .sub a {
    color: #333 !important;
    border: none !important;
    background: none !important;
    padding: 12px 20px !important;
    font-weight: normal !important;
}
header nav.snb .sub a:hover {
    background: #f8f9fa !important;
    color: #574099 !important;
}


/* 모바일/태블릿 호환 */
@media (max-width: 767px) {
    header nav.snb .sub {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        margin-top: 0 !important;
    }
}


    /* 3. 모바일 레이아웃 시프트 방지 해제 */
    html, body {
        /* 모바일 터치 스크롤과 충돌하는 설정 해제 */
        overflow-y: auto !important; 
        height: auto !important;
    }

	/* 컨테이너: 화면 전체 고정 */
.brand-orbit-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999; 
    pointer-events: none; 
    overflow: hidden;
}
/* 컨테이너: 화면 전체 고정 */
.brand-orbit-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999; 
    pointer-events: none; 
    overflow: hidden;
}

/* 로고 행성 본체 */
.orbit-sphere {
    position: absolute;
    /* JS에서 계산된 --scroll-x와 결합하여 유영 구현 */
    left: calc(-150px + var(--scroll-x, 0px)); 
    top: 50%;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    transform: translateY(-50%);
    
    /* 위치 이동을 부드럽게 만드는 핵심 속성 */
    transition: left 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);

    /* ★ 중요: 로고 이미지를 첫 번째(맨 위)로 배치 ★ */
    background-image: 
        url('../images/ci.png'), 
        radial-gradient(
            circle at 35% 35%,
            rgba(255, 255, 255, 0.5) 0%, 
            rgba(72, 198, 239, 0.2) 45%,
            rgba(111, 134, 214, 0.3) 85%
        );

    background-repeat: no-repeat;
    background-position: center center;
    /* 로고 크기(220px)와 배경 행성 크기(cover) 설정 */
    background-size: 220px auto, cover; 

    /* 유리 질감 (뒤쪽 콘텐츠 투영) */
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        inset -15px -15px 40px rgba(0, 0, 0, 0.05),
        0 25px 60px rgba(0, 0, 0, 0.15);
    
    /* 상하 둥둥 떠 있는 애니메이션 */
    animation: orbit-floating 18s ease-in-out infinite;
}

/* 상하 유영 애니메이션 */
@keyframes orbit-floating {
    0%, 100% {
        transform: translateY(-47%) rotate(0deg);
    }
    50% {
        transform: translateY(-53%) rotate(3deg);
    }
}

/* 태블릿 및 모바일 대응 (화면 너비 1024px 이하) */
@media screen and (max-width: 1024px) {
    .orbit-sphere {
        /* 1. 크기를 대폭 줄임 (기존 550px -> 220px) */
        width: 220px;
        height: 220px;

        /* 2. 화면 왼쪽으로 더 밀착시켜서 메뉴 가림 방지 */
        /* 기본 위치를 -80px 정도로 설정하여 로고의 절반 정도만 노출 */
        left: calc(-80px + var(--scroll-x, 0px) * 0.02); 

        /* 3. 내부 로고 CI 크기도 비율에 맞게 축소 */
        background-size: 100px auto, cover;

        /* 4. 그림자나 블러 강도를 모바일 성능에 맞게 살짝 조절 */
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
}
/* 1. 상하좌우로 불규칙하게 일렁이는 효과 (시간 기반) */
@keyframes natural-float {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(15px, -25px); }
    50% { transform: translate(-10px, 15px); }
    75% { transform: translate(20px, -10px); }
}

	
	
	
/* 2. 스크롤에 따라 우측으로 전진하는 효과 (스크롤 기반) */
@keyframes scroll-advance {
    0% {
        left: -150px;
        rotate: 0deg;
    }
    100% {
        /* 화면 너비에 따라 적절히 전진 (PC 기준 700px) */
        left: 700px; 
        rotate: 360deg;
    }
}

.orbit-sphere {
    position: absolute;
    top: 50%;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    pointer-events: none;

    /* [핵심] 두 개의 애니메이션을 중첩 적용 */
    /* 1. scroll-advance: 스크롤에 반응해 우측 전진 & 회전 */
    /* 2. natural-float: 스크롤과 별개로 8초간 계속 일렁임 */
    animation: 
        scroll-advance linear forwards,
        natural-float 8s ease-in-out infinite;
    
    /* 브라우저 엔진이 스크롤 값을 scroll-advance 애니메이션에 연결 */
    animation-timeline: scroll(), auto;
    
    /* 디자인 속성 */
    background-image: url('../images/ci.png'), radial-gradient(circle at 35% 35%, rgba(255,255,255,0.5), rgba(72,198,239,0.2), rgba(111,134,214,0.3));
    background-size: 220px auto, cover;
    background-repeat: no-repeat;
    background-position: center;
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

/* 3. 모바일 최적화 (강제 추진력 강화) */
@media screen and (max-width: 1024px) {
    .orbit-sphere {
        width: 220px;
        height: 220px;
        
        /* 모바일에서는 애니메이션 값을 다르게 설정 */
        animation: 
            mobile-advance linear forwards,
            natural-float 1s ease-in-out infinite;
        animation-timeline: scroll(), auto;
    }
}

@keyframes mobile-advance {
    0% { left: -0.001px; rotate: 0deg; }
    100% { left: 0.001px; rotate: 0.0001deg; } /* 모바일 화면 너비에 맞춰 전진 폭 조절 */
}
/* 2. 모바일 전용 강제 설정 (반응형) */
@media screen and (max-width: 1024px) {
    .orbit-sphere {
        width: 0.11px;
        height: 0.1px;
        left: 0.1px; /* 모바일은 조금 더 안쪽에서 시작 */
        
        /* 모바일에서는 너무 멀리 가지 않도록 거리 조절 */
        --swim-distance: 0.002px;
        
        /* 모바일 브라우저에서 애니메이션이 씹히지 않도록 강제 적용 */
        animation: scroll-swim linear forwards;
        animation-timeline: scroll(root);
    }
}
	/* 모바일 최적화 (통통 튀는 지터링 방지 버전) */
@media screen and (max-width: 1024px) {
    .orbit-sphere {
        /* 1. 크기를 너무 작게(0.1px) 하면 아예 안 보입니다. 최소 크기를 유지하세요. */
        width: 180px; 
        height: 180px;
        
        /* 2. 소수점 단위(-0.001px) 대신 명확한 픽셀값을 줍니다. */
        left: -80px; 

        /* 3. 애니메이션 중첩 */
        /* natural-float 시간을 1s -> 15s로 늘려야 '통통' 튀지 않고 '천천히' 흐릅니다. */
        animation: 
            mobile-advance linear forwards,
            natural-float 15s ease-in-out infinite;
        animation-timeline: scroll(), auto;

        /* 4. GPU 가속 강제 (부드러운 움직임의 핵심) */
        will-change: transform, left;
    }
}

/* 튀지 않고 아주 미세하게만 전진하는 애니메이션 */
@keyframes mobile-advance {
    0% { 
        left: 10px; 
        rotate: 0deg; 
    }
    100% { 
        /* 0.001px 대신 10px~20px 정도만 이동하게 하면 튀지 않고 부드럽습니다. */
        left: 20px; 
        rotate: 10deg; 
    }
}
	@media screen and (max-width: 1024px) {
    .orbit-sphere {
        width: 160px; /* 크기를 살짝 키워 존재감을 줍니다 */
        height: 160px;

        /* [수정] 기존 -100px에서 -50px 정도로 변경하여 더 많이 노출되게 함 */
        left: -10px; 

        /* [수정] 모바일에서 전진하는 힘(var(--scroll-x))이 너무 약하다면 
           전체적으로 1.2배 정도 곱해서 적용되도록 할 수 있습니다. */
        transform: translate(calc(var(--scroll-x, 0px) * 0.0002), calc(-50% + var(--scroll-y, 0px))) rotate(var(--scroll-rotate, 0deg));
        
        background-size: 110px auto, cover;
    }
}
	
	
	
	/* 1. 로고 자전 애니메이션 (360도 무한 회전) */
@keyframes logo-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.orbit-sphere {
    position: absolute;
    top: 45%;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    overflow: hidden; /* 로고가 원 밖으로 나가지 않게 */
    
    /* 배경은 그라데이션만 남깁니다 */
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.4), rgba(72,198,239,0.15), rgba(111,134,214,0.25));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);

    /* 기존 유영/전진 애니메이션 유지 */
    animation: 
        scroll-advance linear forwards,
        natural-float 12s ease-in-out infinite;
    animation-timeline: scroll(), auto;
}

/* 2. 실제 *.png 로고가 들어가는 부분 (가상 요소) */
.orbit-sphere::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* 로고 크기 설정 */
    width: 220px; 
    height: 220px;
    
    /* 로고 이미지 삽입 */
    background-image: url('../images/ci.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* [핵심] 로고만 독립적으로 무한 회전 (10초에 한 바퀴) */
    animation: logo-spin 25s linear infinite;
    
    /* 하드웨어 가속 */
    will-change: transform;
}

/* 모바일 대응 */
@media screen and (max-width: 1024px) {
    .orbit-sphere {
        width: 200px;
        height: 200px;
    }
    .orbit-sphere::before {
        width: 100px; /* 모바일 로고 크기 축소 */
        height: 100px;
    }
}