/* web font */
@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/font/NotoSansKR-Thin.woff2) format('woff2'),
    url(../fonts/font/NotoSansKR-Thin.woff) format('woff'),
    url(../fonts/font/NotoSansKR-Thin.otf) format('truetype')
}

@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/font/NotoSansKR-Regular.woff2) format('woff2'),
    url(../fonts/font/NotoSansKR-Regular.woff) format('woff'),
    url(../fonts/font/NotoSansKR-Regular.otf) format('truetype')
}

@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/font/NotoSansKR-Medium.woff2) format('woff2'),
    url(../fonts/font/NotoSansKR-Medium.woff) format('woff'),
    url(../fonts/font/NotoSansKR-Medium.otf) format('truetype')
}

@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/font/NotoSansKR-Bold.woff2) format('woff2'),
    url(../fonts/font/NotoSansKR-Bold.woff) format('woff'),
    url(../fonts/font/NotoSansKR-Bold.otf) format('truetype')
}

/* 공통 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;*/
}

:root {
    --primary-color: #0b2239;
    --secondary-color: #1b4b79;
    --text-white: #ffffff;
    --text-gray: #dddddd;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Noto Sans KR",Arial,sans-serif;
    color: #343a40;
    background-color: #020220;
}

.hide {
    display: none;
}

/*  ====================
       로딩 오버레이
    ===================
*/
.loading_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: #020220;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullpage_wrapper {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.fullpage_container {
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    will-change: transform;
}

.section {
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--text-white);
    background: linear-gradient(180deg, rgb(10,41,88) 0%,rgb(23,85,142) 100%);
    z-index: 0;
}

.section_header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    padding: 3px 0;
    font-size: 13px;
    background-color: #fff;
    color: #666;
    display: flex;
    justify-content: center;
}

.section.en .section_header {
    display: none;
}

.section_header_logo {
    color:rgb(0,109,176);
    font-weight: 700;
}

.section_header_logo img {
    margin-top: -3px;
}

.section .content {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transition: transform 1.2s ease, opacity 0.6s ease, visibility 0.6s;
}

.section .content.prepare_up { transform: translateY(100px); }
.section .content.prepare_down { transform: translateY(-100px); }

.section .content.is_visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

#section_footer.section .content.is_visible {
    transform: translateY(-50px);
}

.section .desc { font-size: 20px; line-height: 1.6; color: var(--text-gray); }
.section .tag { font-size: 16px; color: #4db8ff; }

/* =========================================
   메인화면 - canvas, 링크 별, 별똥별, 로고
   ========================================= */
#section_dozn {
    background: transparent;
}

#space_bg_container {
    display: flex;
    width: 400vw;
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /* 이미지가 로드되기 전까지는 숨겨둡니다 */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.space_bg {
    width: 100vw;
    height: 100dvh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.space_bg.flipped {
    transform: scaleX(-1);
}

.space_bg:nth-child(2) {
    transform: translateX(-1px);
}

.space_bg:nth-child(3) {
    transform: scaleX(-1) translateX(2px);
}

#star_canvas {
    position:fixed;
    width:100%;
    height:100%;
    z-index: 2;
    left:0;
    top:0;
    pointer-events: none;
    mix-blend-mode: screen;
    /* 이미지가 로드되기 전까지는 숨겨둡니다 */
    opacity: 0;
    transition: opacity 0.5s ease;
}

#star_canvas.hidden {
    /*display: none;*/
    opacity: 0 !important;
    transition: opacity 0.5s ease;
}

/* 반짝이는 별 - 각 메뉴 링크 */
.star {
    position: absolute;
    overflow: hidden;
    width: 40px;
    height: 40px;
    mix-blend-mode: screen;
    z-index: 999;
}
.star > span {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 11;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url('../img/sparkle13.png');
    background-repeat: no-repeat;
    animation-name: sparkle;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -ms-interpolation-mode: nearest-neighbor;
    filter: blur(1px);
    opacity: 1;
}
.star-1 { top: 40%; left: 15%; transform: scale(1.2) rotate(0deg); }
.star-2 { top: 20%; left: 20%; transform: scale(1) rotate(30deg); }
.star-3 { top: 10%; left: 35%; transform: scale(1.5) rotate(20deg); }
.star-4 { top: 7%; left: 50%; transform: scale(1) rotate(15deg); }
.star-5 { top: 12%; left: 65%; }
.star-6 { top: 20%; left: 75%; }
.star-7 { top: 35%; left: 80%; }
.star-8 { top: 55%; left: 80%; }
.star-9 { top: 70%; left: 70%; }
.star-10 { top: 80%; left: 60%; }
.star-11 { top: 80%; left: 30%; }
.star-12 { top: 60%; left: 20%; }
.star-13 { top: 50%; left: 15%; }
.star-14 { top: 65%; left: 60%; }
.star-15 { top: 75%; left: 75%; }
.star-16 { top: 45%; left: 35%; }
.star-17 { top: 25%; left: 60%; }
.star-18 { top: 75%; left: 15%; }
.star-19 { top: -999px; left: -999px; }
.star-1 > span { animation-delay:.1s; animation-duration: 3s; }
.star-2 > span { animation-delay:.2s; animation-duration: 2s; }
.star-3 > span { animation-delay:.1s; animation-duration: 4s; }
.star-4 > span { animation-delay:.3s; animation-duration: 3s; }
.star-5 > span { animation-delay:.1s; animation-duration: 5s; }
.star-6 > span { animation-delay:.2s; animation-duration: 3s; }
.star-7 > span { animation-delay:.1s; animation-duration: 2s; }
.star-8 > span { animation-delay:.3s; animation-duration: 4s; }
.star-9 > span { animation-delay:.1s; animation-duration: 5s; }
.star-10 > span { animation-delay:.2s; animation-duration: 3s; }
.star-11 > span { animation-delay:.1s; animation-duration: 4s; }
.star-12 > span { animation-delay:.3s; animation-duration: 2s; }
.star-13 > span { animation-delay:.1s; animation-duration: 5s; }
.star-14 > span { animation-delay:.2s; animation-duration: 3s; }
.star-15 > span { animation-delay:.1s; animation-duration: 5s; }
.star-16 > span { animation-delay:.3s; animation-duration: 2s; }
.star-17 > span { animation-delay:.1s; animation-duration: 4s; }
.star-18 > span { animation-delay:.2s; animation-duration: 5s; }

/* 별똥별 css */
.shooting_star_wrap {
    position:absolute;
    height:200dvh;
    width:200vw;
    left:-50vw;
    top:-50dvh;
    z-index: 1;
    transform: rotateZ(135deg);
}

.shooting_star {
    position: absolute;
    top: 100dvh;
    left: 50vw;
    height: 3px;
    background: linear-gradient(-45deg, rgba(104,168,255,1), rgba(0, 0, 255, 0));
    filter: drop-shadow(0 0 6px #5494ff);
}

.shooting_star_animation {
    animation: tail 10s ease-in-out infinite, shooting 10s ease-in-out infinite;
}

.shooting_star::before, .shooting_star::after {
    position: absolute;
    content: '';
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(104,168,255,1), rgba(0, 0, 255, 0));
    transform: translateX(50%) rotateZ(45deg);
    animation: shining 10s ease-in-out infinite;
}

.shooting_star::after {
    transform: translateX(50%) rotateZ(-45deg);
}

/* 메인화면 로고 css */
.content_wrap { z-index:9; position:relative; }
.content_wrap h2 {
    font-weight:100;
    font-family: "Noto Sans KR";
    font-size: 25px;
    margin: 0 0 22px 0;
}

.index_logo { margin:0; position:relative; text-align:center; }
.logo_animation {
    animation-delay: 0s;
    animation: logo_ani 10s ease-out infinite running normal forwards;
}
.index_logo i { font-size:80px; }
.index_logo img.logo-pre { animation:logo-ani1 10s infinite  ease-out; }
.index_logo img.logo-light { animation:logo-ani2 10s infinite  ease-out; }

#scrollBtn {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -18px;
    z-index: 2;
}

#scrollBtn .btn_wrapper {
    width: 36px;
    height: 63px;
    border-radius: 25px;
    border: 2px solid #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

#scrollBtn .btn_wrapper .dot {
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background: #fff;
}

.dot1 {
    animation: dotAni 3s linear infinite;
}

.dot2 {
    animation: dotAni 3s linear infinite;
    animation-delay: .5s;
}

.dot3 {
    animation: dotAni 3s linear infinite;
    animation-delay: 1s;
}

.dot4 {
    animation: dotAni 3s linear infinite;
    animation-delay: 1.5s;
}

/* =========================================
   Intro 화면 스타일
   ========================================= */

.text_skin {
    color: rgb(0,109,176);
}

/* IE, Android 기기일 때 큐브 */
#box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    color: #111;
}

.box .side {
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    transform-origin: 50% 50% -100px;
    -moz-transform-origin: 50% 50% -100px;
    -webkit-transform-origin: 50% 50% -100px;
    -ms-transform-origin: 50% 50% -100px;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgb(255,255,255);
    background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.06));
    color: #191919;
    padding: 50px 0 0 0;
    border-radius: 20px;
}

/* 큐브 텍스트 글자 */
.box .side p {
    font-size: 20px;
    line-height: 20px;
    display: block;
    width: 200px;
}

/* 큐브 로고 이미지 */
.side .logo_img svg {
    width: 160px;
}

.hairline-1 {
    mix-blend-mode: overlay;
    opacity: 0.5;
}
.hairline-2 {
    mix-blend-mode: overlay;
    opacity: 0.4;
}
.hairline-3 {
    mix-blend-mode: overlay;
    opacity: 0.4;
}

.hairline {
    mix-blend-mode: overlay;
    opacity: 0.4;
}

/* 큐브 모니터링 표면 애니메이션 */
.box .side1 {
    -webkit-animation: animate1 20s infinite linear;
    animation: animate1 20s infinite linear;
}

/* 큐브 무장애 표면 애니메이션 */
.box .side2 {
    -webkit-animation: animate2 20s infinite linear;
    animation: animate2 20s infinite linear;
}

/* 큐브 더즌로고 표면 애니메이션 */
.box .side3 {
    -webkit-animation: animate3 20s infinite linear;
    animation: animate3 20s infinite linear;
}

/* 큐브 빠른피드백 표면 애니메이션 */
.box .side4 {
    -webkit-animation: animate4 20s infinite linear;
    animation: animate4 20s infinite linear;
}

/* 큐브 정확한정보 표면 애니메이션 */
.box .side5 {
    -webkit-animation: animate5 20s infinite linear;
    animation: animate5 20s infinite linear;
}

/* 큐브 유저편의 표면 애니메이션 */
.box .side6 {
    -webkit-animation: animate6 20s infinite linear;
    animation: animate6 20s infinite linear;
}

.box .side::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-style: solid;
    /*border-color: rgb(0,109,176);*/
    border-image: radial-gradient(rgba(255,255,255, 0) 0%, rgba(23,85,142, 1) 50%, rgba(255,255,255, 0) 100%);
    border-image-slice: 1;
}

.box .side, .box .side p {
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    -ms-transition: all 0.6s;
    animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.box .side:first-child,
.box .side::before,
.box .side:first-child i,
.box .side:first-child p {
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
}

#box .box .side:nth-child(1)::before {
    content: "";
    display: block;
    width: 100%;
    height: 50px;
    margin-bottom: 15px;
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    background-position: center 0%;
    background-size: auto 50px;
}

#box .box .side:nth-child(1) .logo_img {
    display: none;
}

#section_intro #box:hover .box .side, #section_intro #box.active .box .side {
    animation-direction: reverse;
    -webkit-animation-direction: reverse;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    transform-style: none;
    -webkit-transform-style: none;
    animation: none;
    backface-visibility: visible;
}

#section_intro #box:hover .sh,
#section_intro #box.active .sh {
    opacity:0;
}

/* 큐브 펼침 상태일 때 배경(흰색영역) 설정 */
#section_intro #box:hover .box .side,
#section_intro #box.active .box .side {
    -webkit-transform: scale(.7) rotateZ(45deg) rotateY(0deg) translateZ(0px);
    transform: scale(.7) rotateZ(45deg) rotateY(0deg) translateZ(100px);
    border-radius:30px;
}

/* 큐브 펼침 상태일 때 표면(배경) opacity 0으로 설정 - 안 하면 배경에 테두리 발생 */
#section_intro #box:hover .box .side::after,
#section_intro #box.active .box .side::after {
    opacity:0;
}

/* 큐브 펼침 상태일 때 첫번째면(더즌로고) 제외 텍스트 방향 및 크기 변경 */
#section_intro #box:hover .box .side:not(:first-child) p,
#section_intro #box.active .box .side:not(:first-child) p {
    -webkit-transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(28px) translateY(5px) translateZ(100px);
    transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(28px) translateY(5px) translateZ(100px);
}

/* 큐브 펼침 상태일 때 '정확한 정보' 면 텍스트 방향 및 크기 변경
   - 정확한 정보의 텍스트만 x 축 정렬이 맞지 않으므로, 별도 지정
 */
#section_intro #box:hover .box .side:not(:first-child) #accurate_reporting_box~p,
#section_intro #box.active .box .side:not(:first-child) #accurate_reporting_box~p {
    -webkit-transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(10px) translateY(20px) translateZ(100px);
    transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(10px) translateY(20px) translateZ(100px);
}

/*
    큐브 펼침 상태일 때 첫번째면(더즌로고) 제외 아이콘 방향 및 크기 변경
 */
#section_intro #box:hover .box .side:not(:first-child) .intro_icon,
#section_intro #box.active .box .side:not(:first-child) .intro_icon {
    transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(-3px) translateY(-20px) translateZ(100px);
}

/* 큐브 펼침 상태일 때 정확한 정보 아이콘 방향 및 크기 변경
    - 위의 설정으로는 css 우선순위 때문에 최초 rotateY(180deg) 설정이 우선순위가 높으므로, 이를 덮기위해 설정
    - 아이콘 크기도 작기 때문에, 위의 설정과 별도로 세팅
 */
#section_intro #box:hover .box .side:not(:first-child) #accurate_reporting_box.intro_icon,
#section_intro #box.active .box .side:not(:first-child) #accurate_reporting_box.intro_icon {
    transform: scale(1.8) rotateZ(-45deg) rotateY(0deg) translateX(-8px) translateY(-7px) translateZ(100px)
}

/* 큐브 펼침 상태일 때 첫번째면(더즌로고) 표면(흰색영역) 설정 */
#section_intro #box:hover .box .side:nth-child(1),
#section_intro #box.active .box .side:nth-child(1) {
    background: transparent;color:#fff;
    -ms-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    animation: move1 .3s linear 1;
    -webkit-animation: move1 .3s linear 1;
    -ms-animation: move1 .3s linear 1;
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px);
    -ms-transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px);
    -webkit-transform: rotateZ(0deg) rotateY(0deg) translateZ(0px);
}

#section_intro #box:hover .box .side:nth-child(1) .logo_img,
#section_intro #box.active .box .side:nth-child(1) .logo_img {
    display: block;
}

#section_intro #box:hover .box .side:nth-child(1)::before,
#section_intro #box.active .box .side:nth-child(1)::before {
    /*background-color: transparent;*/
    /*background-image: url(../img/dozn-logo.svg);*/
    background: none;
    width: 0;
    height: 0;
}
#section_intro #box:hover .box .side:nth-child(1) p,
#section_intro #box.active .box .side:nth-child(1) p {
    font-size: 18px;
}

/* 큐브 펼침 상태일 때 두번째면(무장애) 표면(흰색영역) 위치 설정 */
#section_intro #box:hover .box .side:nth-child(2),
#section_intro #box.active .box .side:nth-child(2) {
    left: 50%;
    margin-top: -200px;
    margin-left: -100px;
    transition: 0.4s;
}

/* 큐브 펼침 상태일 때 세번째면(모니터링) 표면(흰색영역) 위치 설정 */
#section_intro #box:hover .box .side:nth-child(3),
#section_intro #box.active .box .side:nth-child(3) {
    left: 100%;
    top: -25%;
    margin-right: -100px;
    transition: 0.6s;
}

/* 큐브 펼침 상태일 때 네번째면(빠른피드백) 표면(흰색영역) 위치 설정 */
#section_intro #box:hover .box .side:nth-child(4),
#section_intro #box.active .box .side:nth-child(4) {
    left: 50%;
    top: 100%;
    margin-left: 25px;
    margin-top: -25px;
    transition: 0.8s;
}

/* 큐브 펼침 상태일 때 다섯번째면(정확한 정보) 표면(흰색영역) 위치 설정 */
#section_intro #box:hover .box .side:nth-child(5),
#section_intro #box.active .box .side:nth-child(5) {
    left: -75%;
    top: 100%;
    margin-left: 25px;
    margin-top: -25px;
    transition: 1.0s;
}

/* 큐브 펼침 상태일 때 여섯번째면(유저 편의) 표면(흰색영역) 위치 설정 */
#section_intro #box:hover .box .side:nth-child(6),
#section_intro #box.active .box .side:nth-child(6) {
    left: 0%;
    top: -25%;
    margin-left: -200px;
    transition: 0.2s;
}

/* 큐브 그림자 */
#box .sh{
    margin-top:55px;
    margin-left:8px;
    width:100px;
    height:100px;
    transform:rotateX(70deg);
    position:absolute;
}

#box .sh .shadow {
    transform-style: preserve-3d;
    animation: spinShadow 10s infinite linear;
    -webkit-animation: spinShadow 10s infinite linear;
    -ms-animation: spinShadow 10s infinite linear;
    border-radius: 4px / 4px;
    -moz-border-radius: 4px / 4px;
    -webkit-border-radius: 4px 4px;
    box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.06);
    position: absolute;
    z-index: 0;
    display: block;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.1);
}

/* 그 외 기기일 때 큐브 */
.cube_wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    perspective: 1000px;
    -ms-perspective: 1000px;
    -webkit-perspective: 1000px;
    -ms-perspective: 1000px;
    pointer-events: auto;
}

.cube, .face, .bk_face, .shadow_wrap {
    pointer-events: none;
}

.cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;

    animation: spin 50s linear infinite;
    -webkit-animation: spin 50s linear infinite;
    -ms-animation: spin 50s linear infinite;

    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;

    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -ms-backface-visibility: visible;
}

.bk_face {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: rgb(255,255,255);
    background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.06));
    border-radius: 20px;
    z-index: 0;
}

.face {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: rgb(255,255,255);
    background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.06));
    color:#191919;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.face::before, .face::after {
    box-sizing: border-box;
}

.face::after {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-style:solid;
    border-image: radial-gradient(rgba(255,255,255, 0) 0%, rgba(23,85,142, 1) 50%, rgba(255,255,255, 0) 100%);
    border-image-slice: 1;
}

.face {
    opacity: 1;
    padding: 0;
    text-align: center;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    -ms-transition: all 0.6s;
    animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

/* dozn 로고 표면 */
.face:nth-child(1) {
    -ms-transform: rotateZ(0deg) rotateY(0deg) translateZ(99.5px);
    -webkit-transform: rotateZ(0deg) rotateY(0deg) translateZ(99.5px);
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(99.5px);
}

/* 두번째면(무장애) 표면 */
.face:nth-child(2) {
    -ms-transform: rotate(0deg) rotateZ(0deg) rotateY(0deg) translateZ(-99.5px) rotate( 180deg );
    -webkit-transform: rotateZ(0deg) rotateY(0deg) translateZ(-99.5px) rotate( 180deg );
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(-99.5px) rotate( 180deg );
}

/* 세번째면(모니터링) 표면 */
.face:nth-child(3) {
    -webkit-transform: rotateZ(0deg) rotateY(90deg) translateZ(-99.5px) rotate( -90deg );
    -ms-transform: rotateZ(0deg) rotateY(90deg) translateZ(-99.5px) rotate( -90deg );
    transform: rotateZ(0deg) rotateY(90deg) translateZ(-99.5px) rotate( -90deg );
}

/* 네번째면(빠른 피드백) 표면 */
.face:nth-child(4) {
    -webkit-transform: rotateZ(90deg) rotateY(90deg) translateZ(-99.5px) rotate( -90deg );
    -ms-transform: rotateZ(90deg) rotateY(90deg) translateZ(-99.5px) rotate( -90deg );
    transform: rotateZ(90deg) rotateY(90deg) translateZ(-99.5px) rotate( -90deg );
}

/* 다섯번째면(정확한 정보) 표면 */
.face:nth-child(5) {
    -webkit-transform: rotateZ(0deg) rotateY(-90deg) translateZ(-99.5px) rotate( 90deg );
    -ms-transform: rotateZ(0deg) rotateY(-90deg) translateZ(-99.5px) rotate( 90deg );
    transform: rotateZ(0deg) rotateY(-90deg) translateZ(-99.5px) rotate( 90deg );
}

/* 여섯번째면(user feedback) 표면 */
.face:nth-child(6) {
    transform: rotateZ(90deg) rotateY(90deg) translateZ(99.5px) rotate( -90deg );
    -webkit-transform: rotateZ(90deg) rotateY(90deg) translateZ(99.5px) rotate( -90deg );
    -ms-transform: rotateZ(90deg) rotateY(90deg) translateZ(99.5px) rotate( -90deg );
}

.bk_face:nth-child(7) { /*dozn*/
    -ms-transform: rotateZ(0deg) rotateY(0deg) translateZ(99px);
    -webkit-transform: rotateZ(0deg) rotateY(0deg) translateZ(99px);
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(99px);
}
.bk_face:nth-child(8) { /*dozn*/
    -ms-transform: rotate(0deg) rotateZ(0deg) rotateY(0deg) translateZ(-99px) rotate( 180deg );
    -webkit-transform: rotateZ(0deg) rotateY(0deg) translateZ(-99px) rotate( 180deg );
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(-99px) rotate( 180deg );
}
.bk_face:nth-child(9) { /*dozn*/
    -webkit-transform: rotateZ(0deg) rotateY(90deg) translateZ(-99px) rotate( -90deg );
    -ms-transform: rotateZ(0deg) rotateY(90deg) translateZ(-99px) rotate( -90deg );
    transform: rotateZ(0deg) rotateY(90deg) translateZ(-99px) rotate( -90deg );
}
.bk_face:nth-child(10) { /*dozn*/
    -webkit-transform: rotateZ(90deg) rotateY(90deg) translateZ(-99px) rotate( -90deg );
    -ms-transform: rotateZ(90deg) rotateY(90deg) translateZ(-95px) rotate( -90deg );
    transform: rotateZ(90deg) rotateY(90deg) translateZ(-99px) rotate( -90deg );
}
.bk_face:nth-child(11) { /*dozn*/
    -webkit-transform: rotateZ(0deg) rotateY(-90deg) translateZ(-99px) rotate( 90deg );
    -ms-transform: rotateZ(0deg) rotateY(-90deg) translateZ(-99px) rotate( 90deg );
    transform: rotateZ(0deg) rotateY(-90deg) translateZ(-99px) rotate( 90deg );
}
.bk_face:nth-child(12) { /*dozn*/
    transform: rotateZ(90deg) rotateY(90deg) translateZ(99px) rotate( -90deg );
    -webkit-transform: rotateZ(90deg) rotateY(90deg) translateZ(99px) rotate( -90deg );
    -ms-transform: rotateZ(90deg) rotateY(90deg) translateZ(99px) rotate( -90deg );
}

.face p {
    font-size: 20px;
    line-height: 20px;
    display: block;
    width: 200px;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    -ms-transition: all 0.6s;
    animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.face .logo_img img {
    width: 160px;
}

.face .logo_img img.logo-svg {
    -webkit-transform: translateZ(0);
}

.face:first-child,
.face:first-child p {
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
}

/* 큐브 상태일 때 첫번째면(더즌로고) */
.cube_wrap .cube .face:nth-child(1)::before {
    content: "";
    display: block;
    width: 100%;
    height: 50px;
    margin-bottom: 15px;
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: auto 50px;
}

/* 큐브 상태일 때 로고 svg 숨김 처리 */
.cube_wrap .cube .face:nth-child(1) .logo_img {
    display: none;
}

/* 큐브 상태일 때 '피드백', '정확한 정보' 의 icon 이 뒤집어져있으므로 y 축 180도 회전 */
#section_intro .cube_wrap .cube .face:not(:first-child) #feedback_icon_wrapper_face.intro_icon {
    transform: rotateY(180deg);
}
#section_intro .cube_wrap .cube .face:not(:first-child) #accurate_reporting_face.intro_icon {
    transform: scale(1.4) rotateY(180deg);
}

#section_intro .cube_wrap .face:nth-child(2) p,
#section_intro .cube_wrap .face:nth-child(3) p,
#section_intro .cube_wrap .face:nth-child(4) p,
#section_intro .cube_wrap .face:nth-child(5) p  {
    -webkit-transform: rotateX(360deg) rotateY(180deg) translateZ(0px);
    -ms-transform: rotateX(360deg) rotateY(180deg) translateZ(0px);
    transform: rotateX(360deg) rotateY(180deg) translateZ(0px);
}

/* 큐브 펼침 상태일 때 기본 설정 */
#section_intro .cube_wrap:hover .cube,
#section_intro .cube_wrap.active .cube {
    transform-style: none;
    -webkit-transform-style: none;
    animation: none;
    -webkit-animation: none;
}

/* 큐브 펼침 그림자 off */
#section_intro .cube_wrap:hover .shadow_wrap, #section_intro .cube_wrap.active .shadow_wrap {
    opacity:0;
}

/* 큐브 펼침 상태일 때 배경(흰색영역) 설정 */
#section_intro .cube_wrap:hover .cube .face, #section_intro .cube_wrap.active .cube .face {
    -webkit-transform: scale(.7) rotateZ(45deg) rotateY(0deg) translateZ(0px);
    transform: scale(.7) rotateZ(45deg) rotateY(0deg) translateZ(100px);
    border-radius: 30px;
}

#section_intro .cube_wrap:hover .cube .bk_face,
#section_intro .cube_wrap.active .cube .bk_face {
    display: none;
}

/* 큐브 펼침 상태일 때 표면(배경) opacity 0으로 설정 - 안 하면 배경에 테두리 발생 */
#section_intro .cube_wrap:hover .cube .face::after,
#section_intro .cube_wrap.active .cube .face::after {
    opacity:0;
}

/* 큐브 펼침 상태일 때 첫번째면(더즌로고) z index 낮춤 (5개의 면이 더 상위로 오도록 처리) */
#section_intro .cube_wrap:hover .cube .face:first-child {
    z-index:-1;
}

/* 큐브 펼침 상태일 때 첫번째면(더즌로고) 제외 z-index 높임 */
#section_intro .cube_wrap:hover .cube .face:not(:first-child),
#section_intro .cube_wrap.active .cube .face:not(:first-child) {
    animation-delay: .3s;
    -webkit-animation-delay: .3s;
    z-index: 9;
}

/* 큐브 펼침 상태일 때 첫번째면(더즌로고) 제외 텍스트 방향 및 크기 변경 */
#section_intro .cube_wrap:hover .cube .face:not(:first-child) p,
#section_intro .cube_wrap.active .cube .face:not(:first-child) p {
    -webkit-transform: scale(1.4) rotateZ(-45deg) rotateY(0deg) translateX(27px) translateY(0px) translateZ(100px);
    transform: scale(1.4) rotateZ(-45deg) rotateY(0deg) translateX(27px) translateY(0px) translateZ(100px);
}

/* 큐브 펼침 상태일 때 '정확한 정보' 면 텍스트 방향 및 크기 변경
   - 정확한 정보의 텍스트 x 축 정렬이 맞지 않으므로, 별도 지정
 */
#section_intro .cube_wrap:hover .cube .face:not(:first-child) #accurate_reporting_face~p,
#section_intro .cube_wrap.active .cube .face:not(:first-child) #accurate_reporting_face~p {
    -webkit-transform: scale(1.4) rotateZ(-45deg) rotateY(0deg) translateX(20px) translateY(6px) translateZ(100px);
    transform: scale(1.4) rotateZ(-45deg) rotateY(0deg) translateX(20px) translateY(6px) translateZ(100px);
}

/* 큐브 펼침 상태일 때 'User 편의' 면 텍스트 방향 및 크기 변경
   - User 편의 텍스트 x 축 정렬이 맞지 않으므로, 별도 지정
 */
#section_intro .cube_wrap:hover .cube .face:not(:first-child) #user_convenience_face~p,
#section_intro .cube_wrap.active .cube .face:not(:first-child) #user_convenience_face~p {
    -webkit-transform: scale(1.4) rotateZ(-45deg) rotateY(0deg) translateX(20px) translateY(6px) translateZ(100px);
    transform: scale(1.4) rotateZ(-45deg) rotateY(0deg) translateX(18px) translateY(6px) translateZ(100px);
}

/*
    큐브 펼침 상태일 때 첫번째면(더즌로고) 제외 아이콘 방향 및 크기 변경
    또한 피드백 아이콘 방향 및 크기 변경
    - 위의 기본 설정으로는 css 우선순위 때문에 최초 rotateY(180deg) 설정이 우선순위가 높으므로, 이를 덮기위해 설정
 */
#section_intro .cube_wrap:hover .cube .face:not(:first-child) .intro_icon,
#section_intro .cube_wrap.active .cube .face:not(:first-child) .intro_icon,
#section_intro .cube_wrap:hover .cube .face:not(:first-child) #feedback_icon_wrapper_face.intro_icon,
#section_intro .cube_wrap.active .cube .face:not(:first-child) #feedback_icon_wrapper_face.intro_icon {
    transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(-11px) translateY(-15px) translateZ(100px);
}

/*
    큐브 펼침 상태일 때 첫번째면(더즌로고) 제외 아이콘 방향 및 크기 변경 (영문)
    또한 피드백 아이콘 방향 및 크기 변경
    - 위의 기본 설정으로는 css 우선순위 때문에 최초 rotateY(180deg) 설정이 우선순위가 높으므로, 이를 덮기위해 설정
 */
#section_intro .cube_wrap:hover .cube .face.en:not(:first-child) .intro_icon,
#section_intro .cube_wrap.active .cube .face.en:not(:first-child) .intro_icon,
#section_intro .cube_wrap:hover .cube .face.en:not(:first-child) #feedback_icon_wrapper_face.intro_icon,
#section_intro .cube_wrap.active .cube .face.en:not(:first-child) #feedback_icon_wrapper_face.intro_icon {
    transform: scale(1.2) rotateZ(-45deg) rotateY(0deg) translateX(-16px) translateY(-20px) translateZ(100px);
}

/* 큐브 펼침 상태일 때 정확한 정보 아이콘 방향 및 크기 변경
    - 위의 설정으로는 css 우선순위 때문에 최초 rotateY(180deg) 설정이 우선순위가 높으므로, 이를 덮기위해 설정
    - 아이콘 크기도 작기 때문에, 위의 설정과 별도로 세팅
 */
#section_intro .cube_wrap:hover .cube .face:not(:first-child) #accurate_reporting_face.intro_icon,
#section_intro .cube_wrap.active .cube .face:not(:first-child) #accurate_reporting_face.intro_icon {
    transform: scale(1.8) rotateZ(-45deg) rotateY(0deg) translateX(-7px) translateY(-7px) translateZ(100px)
}

/* 큐브 펼침 상태일 때 정확한 정보 아이콘 방향 및 크기 변경(영문)
    - 위의 설정으로는 css 우선순위 때문에 최초 rotateY(180deg) 설정이 우선순위가 높으므로, 이를 덮기위해 설정
    - 아이콘 크기도 작기 때문에, 위의 설정과 별도로 세팅
 */
#section_intro .cube_wrap:hover .cube .face.en:not(:first-child) #accurate_reporting_face.intro_icon,
#section_intro .cube_wrap.active .cube .face.en:not(:first-child) #accurate_reporting_face.intro_icon {
    transform: scale(1.8) rotateZ(-45deg) rotateY(0deg) translateX(-12px) translateY(-7px) translateZ(100px)
}

/* 큐브 펼침 상태일 때 첫번째면(더즌로고) 표면(흰색영역) 설정 */
#section_intro .cube_wrap:hover .cube .face:nth-child(1),
#section_intro .cube_wrap.active .cube .face:nth-child(1) {
    background: transparent;
    color: #fff;
    transition: all 0.1s;
    animation: move1 .3s linear 1;
    -webkit-animation: move1 .3s linear 1;
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px);
    -ms-transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px);
    -webkit-transform: rotateZ(0deg) rotateY(0deg) translateZ(0px);
    gap: 15px;
}
#section_intro .cube_wrap:hover .cube .face:nth-child(1)::before,
#section_intro .cube_wrap.active .cube .face:nth-child(1)::before {
    /*background-color: transparent;*/
    /*background-image: url(../img/dozn-logo.svg);*/
    background: none;
    width: 0;
    height: 0;
}
#section_intro .cube_wrap:hover .cube .face:nth-child(1) .logo_img,
#section_intro .cube_wrap.active .cube .face:nth-child(1) .logo_img {
    display: block;
}

#section_intro .cube_wrap:hover .cube .face:nth-child(1) p,
#section_intro .cube_wrap.active .cube .face:nth-child(1) p {
    font-size: 18px;
}

/* 큐브 펼침 상태일 때 두번째면(무장애) 표면(흰색영역) 위치 설정 */
#section_intro .cube_wrap:hover .cube .face:nth-child(2),
#section_intro .cube_wrap.active .cube .face:nth-child(2) {
    left: 50%;
    margin-top: -200px;
    margin-left: -100px;
    transition: 0.4s;
}

/* 큐브 펼침 상태일 때 세번째면(모니터링) 표면(흰색영역) 위치 설정 */
#section_intro .cube_wrap:hover .cube .face:nth-child(3),
#section_intro .cube_wrap.active .cube .face:nth-child(3) {
    left: 100%;
    top: -25%;
    margin-right: -100px;
    transition: 0.6s;
}

/* 큐브 펼침 상태일 때 네번째면(빠른피드백) 표면(흰색영역) 위치 설정 */
#section_intro .cube_wrap:hover .cube .face:nth-child(4),
#section_intro .cube_wrap.active .cube .face:nth-child(4) {
    left: 50%;
    top: 100%;
    margin-left: 25px;
    margin-top: -25px;
    transition: 0.8s;
}

/* 큐브 펼침 상태일 때 다섯번째면(정확한 정보) 표면(흰색영역) 위치 설정 */
#section_intro .cube_wrap:hover .cube .face:nth-child(5),
#section_intro .cube_wrap.active .cube .face:nth-child(5) {
    left: -75%;
    top: 100%;
    margin-left: 25px;
    margin-top: -25px;
    transition: 1.0s;
}

/* 큐브 펼침 상태일 때 여섯번째면(유저 편의) 표면(흰색영역) 위치 설정 */
#section_intro .cube_wrap:hover .cube .face:nth-child(6),
#section_intro .cube_wrap.active .cube .face:nth-child(6) {
    left: 0%;
    top: -25%;
    margin-left: -200px;
    transition: 0.2s;
}

#gear_rotator_face {
    width: 50px;
    height: 50px;
}

#gear_rotator_face svg {
    width: 50px;
    height: 50px;
}

/* 큐브 그림자 */
.cube_wrap .shadow_wrap {
    margin-top:55px;
    margin-left:8px;
    width:100px;
    height:100px;
    transform:rotateX(70deg);
    position:absolute;
}
.cube_wrap .shadow_wrap .shadow {
    transform-style: preserve-3d;
    animation: spinShadow 10s infinite linear;
    -webkit-animation: spinShadow 10s infinite linear;
    -ms-animation: spinShadow 10s infinite linear;
    border-radius: 4px / 4px;
    -moz-border-radius: 4px / 4px;
    -webkit-border-radius: 4px 4px;
    box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.06);
    position: absolute;
    z-index: 0;
    display: block;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.1);
}

/* =========================================
   intro_icon
   ========================================= */
.intro_icon svg {
    width: 54px;
}

/* =========================================
   service1 (Dozn API Center)
   ========================================= */
#api_w {
    width: 100%;
    align-items: center;
    max-width: 800px;
    align-self: center;
}

#api_w img {
    width: 100%;
}

#api_m {
    display: none;
}

.api_m_title img {
    width: 90%;
}

#api_m_wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 0;
    gap: 10px;
}

.api_item {
    width: calc(50% - 5px);
}

.api_item img {
    width: 90%;
}

/*
   ====================================================
   service 2 부터 존재하는 mobile 화면 + 내용 있는 슬라이드
   ====================================================
*/
.flex_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
}

.mobile_area {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.pc_area {
    position: relative;
    width: 100%;
    max-width: 520px;
}

.kiosk_area {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.mobile_frame {
    width: 100%;
}

.pc_frame {
    width: 100%;
}

.kiosk_frame {
    width: 100%;
}

.mobile_screen_wrapper {
    position: absolute;
    top: 10.1%;
    left: 5%;
    width: 90%;
    height: 77%;
    background-color: #fff;
    overflow: hidden;
}

.pc_screen_wrapper {
    position: absolute;
    top: 1.3%;
    left: 0.9%;
    width: 98.1%;
    height: 63.7%;
    background-color: transparent;
    overflow: hidden;
}

.map_container {
    position: absolute;
    top: 1.3%;
    left: 0.9%;
    width: 98.1%;
    height: 63.7%;
    background-color: transparent;
    overflow: hidden;
}

.map_container svg {
    width: 100%;
    height: 100%;
}

.map_container svg #mask0_122_88 {
    mask-type: alpha;
}

.bg_map {
    mix-blend-mode: color-dodge;
}

.kiosk_screen_wrapper {
    position: absolute;
    top: 4.3%;
    left: 11.4%;
    width: 77%;
    height: 60%;
    background-color: transparent;
    overflow: hidden;
}

.slide_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.text_area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.section.en .text_area {
    max-width: 550px;
}

#section8.section.en .text_area {
    max-width: 400px;
}

#section15.section.en .text_area {
    max-width: 650px;
}

.text_title {
    font-size: 60px;
    font-weight: 500;
    line-height: 1.2;
}

.section.en .text_title {
    font-size: 40px;
}

.text_sub_title {
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2;
}

.section.en .text_sub_title {
    font-size: 20px;
    text-wrap: pretty;
}

.emphasize_text {
    color: #ffff00;
    text-wrap: pretty;
}

.text_content {
    color: #fff;
    font-size: 14px;
}

.btn_more_link a {
    display: inline-block;
}

.text_nowrap {
    white-space: nowrap;
}

.service15_frame {
    margin-top: 20px;
}

.section.en .service15_frame {
    display: none;
}

/*
   ====================================================
   End 슬라이드
   ====================================================
*/
.coming_soon_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* =========================================
   하단 고정 푸터 스타일
   ========================================= */
.bottom_footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    color: #666666;
    padding: 40px 20px;
    z-index: 10;
}

.bottom_footer_inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.f_logo_area {
    flex: 0 0 auto;
    min-width: 100px;
    align-self: center;
}

.f_logo img {
    width: 100px;
    height: 42px;
}

.f_info_area {
    flex: 1 1 auto; /* 수정된 부분: 500px 하드코딩 제거 (모바일에서 높이로 작동하는 현상 방지) */
    font-size: 13px;
    line-height: 1.8;
    max-width: 790px;
}

.f_links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.f_links.en {
    gap: 10px;
}

.f_links a {
    color: #777777;
    text-decoration: none;
}

.f_links.en a {
    margin-right: 10px;
}

.f_links a.policy {
    font-weight: 700;
    text-decoration: underline;
}

.f_links a.text_skin {
    color: rgb(0,109,176);
}

.f_links strong {
    font-weight: bold;
}

.section.en .f_links .ir_link, .section.en .f_links .recruit_link {
    display: none;
}

.f_address p {
    display: flex;
    flex-wrap: wrap;
    color: #888888;
}

.f_address span {
    display: inline-block;
    white-space: nowrap;
}

.f_address .divider {
    margin: 0 10px;
    color: #dddddd;
}

/* =========================================
   수정된 ISMS 및 Copyright 영역
   ========================================= */
.f_isms_area {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.f_isms_txt_wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

.isms_mark {
    width: 100px;
    height: 100px;
}

.isms_mark img {
    width: 100px;
}

.isms_txt, .isms_txt_mobile {
    font-size: 13px;
    color: #888888;
    line-height: 1.6;
    min-width: 280px;
}

.isms_txt_mobile {
    display: none;
}

.f_copy {
    margin-top: 0;
    font-size: 13px;
    color: #aaaaaa;
}

.f_copy_lg {
    margin-top: 20px;
}

.f_copy_md {
    display: none;
    margin-left: 130px;
}

/* =========================================
   우측 네비게이션 및 툴팁 스타일
   ========================================= */
#fp_nav_wrap {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#fp_menu {
    margin-left: -5px;
    cursor: pointer;
}

.fp_nav {
    list-style: none;
    z-index: 100;
}

.fp_nav li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fp_nav span {
    display: block;
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: all 0.3s;
    position: relative;
    z-index: 2;
}

.fp_nav li span:hover {
    transform: scale(2);
}

.fp_nav li.active span {
    background-color: #ffffff;
    transform: scale(2);
}

.fp_nav_label {
    visibility: hidden;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    width: 100%;
    opacity: 0;
}

.fp_nav li a:hover~.fp_nav_label {
    visibility: visible;
    opacity: 1;
    color: #fff;
    transition: opacity 0.3s ease;
}

.fp_nav_menu li.active a {
    color: #fff;
}

.fp_tooltip {
    position: absolute;
    left: 25px;
    color: var(--text-white);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    background-color: rgba(0,0,0,0.75);
    padding: 5px 12px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.fp_nav_menu {
    position: fixed;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
    z-index: 101;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    visibility: hidden;
    padding: 10px 10px 10px 20px;
    margin: 10px 10px 10px 0;
    max-height: 750px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.fp_nav_menu::-webkit-scrollbar {
    visibility: hidden;
    -webkit-appearance: none;
    width: 4px;
    height: 4px;
    background-color: transparent;
}

.fp_nav_menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
}

.fp_nav_menu.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fp_nav_menu li {
    padding: 5px;
}

.fp_nav_menu a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    width: 100%;
    display: inline-block;
}

.fp_nav_menu li:hover a {
    color: #ffea00;
    transition: color 0.3s ease;
}

.fp_nav_menu li.active a {
    color: #fff;
}

.fp_nav_menu li .fp_nav_menu_item span {
    margin-right: 5px;
    font-weight: bold;
}

.fp_nav_menu li:hover .fp_nav_menu_item span,
.fp_nav_menu li.active .fp_nav_menu_item span {
    color: #0a7ec2;
}

.is_hidden { display: none !important; }

/* =========================================
   우하단 메뉴 버튼
   ========================================= */
#menu_info {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 9999;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.page_end #menu_info {
    bottom: 230px;
}

body.page_end #menu_info.en {
    bottom: 280px;
}

.page_indicator {
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    width: 40px;
    height: 40px;
    padding: 0px;
    bottom: 0px;
    text-align: center;

    font-size: 16px;
    line-height:1.2;
    background-color:transparent;
    z-index: 11;
    transform: rotate(-45deg);
    display:none;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
}

.page_indicator div {
    line-height:1.3;
    background-color:#fff;
    font-weight: bold;
    color: rgb(0,109,176);
}

.page_indicator #current_page {
    border-radius: 20px 20px 0 0;
    background: #144a80;
    color: #fff;
}

.page_indicator #total_pages {
    border-radius: 0 0 20px 20px;
}

.page_indicator #current_page > span, .page_indicator #total_pages > span {
    display: inline-block;
    transform-origin: center;
    transform: rotateZ(45deg);
}

#current_page > span { line-height: 1.0; }
#total_pages > span { font-size: 14px; }


/* 모바일 환경 전화/메일 버튼 */
.communication_btns {
    display: none;
    z-index: 9999;
    transition: all 0.5s;
}

.comu_btn_wrap {
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comu_btn_wrap a {
    text-decoration: none;
}

.comu_btn_wrap p {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: none;
    border-radius: 20px;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center;
    line-height: 1.6;
}

.comu_btn_wrap p:before {
    font-family:"FontAwesome";
    color: rgb(0,109,176);
    font-size: 24px;
}

.comu_btn_wrap .tel:before {
    content:"\f095";
}

.comu_btn_wrap .email:before {
    content:"\f003";
}

.menu_wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 다국어 변경 메뉴 */
#lang_list_wrap.open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#translate_btn_items {
    position: relative;
}

#translate_btn_wrap {
    z-index: 9999;
    transition: all 0.5s;
}

#translate_btn_wrap button {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

#translate_btn_wrap button img {
    max-width: 100%;
}

#lang_list_wrap {
    visibility: hidden;
    position: absolute;
    bottom: 0;
    right: 50px;
    width: 100px;
    box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.6);
    z-index: 999;
    background-color: #ffffff;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#lang_list_wrap:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    bottom: 10px;
    right: -20px;
    border: 10px solid transparent;
    border-left-color: #fff;
}

#lang_list_wrap.open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.lang_btn_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
}

.lang_btn_wrap.disabled {
    cursor: default;
    background-color: #e2e2e2;
}

.lang_btn_wrap:hover {
    background-color: rgba(10, 126, 194, 0.2);
}

.lang_btn_wrap.disabled:hover {
    background-color: #e2e2e2;
}

.lang_btn_wrap > img {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.lang_btn_wrap > div {
    flex: 1;
    font-size: 12px;
    color: #777777;
}

/* 모바일 - 햄버거 메뉴 */
.menu_btn {
    position: fixed;
    right: 15px;
    width: 40px;
    height: 40px;
    z-index: 9999;
    transition: all 0.5s;
    background-color: #fff;
    border: none;
    border-radius: 20px;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    display: none;
}

.menu_btn.closed {
    bottom: 20px;
    transition: all 0.5s;
}

.menu_btn.open {
    bottom: 10px;
    transition: all 0.5s;
}

.menu_btn.closed:before {
    content:"\2630";
    font-family:"FontAwesome";
    color: rgb(0,109,176);
    font-size: 20px;
}
.menu_btn.open:before {
    content:"\2715";
    font-family:"FontAwesome";
    color: rgb(0,109,176);
    font-size: 20px;
}

body.page_end .menu_btn {
    background-color: rgb(0,109,176);
    transition: all 0.5s ease;
}

body.page_end .menu_btn.closed:before,
body.page_end .menu_btn.open:before {
    color: #fff;
    transition: all 0.5s ease;
}

/* scroll up / down 버튼 */
#btn_scroll_top, #btn_scroll_bottom {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--text-white);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

#btn_scroll_top i {
    line-height: 38px;
    transform: translate(0, -2px);
}

.communication_btns, #btn_scroll_bottom, .menu_btn, .page_indicator {
    display: none;
}

/* =========================================
   우상단 영상/링크 버튼
   ========================================= */
.badge_pop_info {
    position: fixed;
    top: 30px;
    right: 0;
    z-index: 9999;
    visibility: visible;
    opacity: 1;
    transition: all 0.5s ease;
    display: none;
}

.badge_pop_info.visible {
    display: block;
}

.badge_pop_info.hidden {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.badge_pop_info.en {
    top: 0;
}

.badge_pop {
    background-color: transparent !important;
    position: relative;
    width: 300px;
    height: 300px;
}

.badge_pop_info video {
    width: inherit;
    position: absolute;
    top: 0;
    right: 0;
}

#saturn_img {
    display: none;
    width: inherit;
    position: absolute;
    top: 45px;
    right: 10px;
    width: 270px;
}

.badge_link {
    width: 150px;
    height: 35px;
    padding: 0 15px;
    text-align: center;
    border: 1px solid #52739e;
    background: rgba(11, 45, 93, 0.7);
    transition: background 0.5s ease;
    box-shadow: 0px 2px 8px 0px rgba(255, 255, 255, 0.2);
    font-size: 16px;
    line-height: 1.8;
    color: #fff;
    border-radius: 30px;
    position: absolute;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
}

a.badge_link:focus {
    color: #fff;
}

.badge_link:hover {
    color: #fff;
    background: rgba(73, 139, 232, 0.4);
    transition: background 0.5s ease;
}

.recruit_btn_link {
    bottom: 120px;
    right: 75px;
}

.ir_btn_link {
    bottom: 83px;
    right: 75px;
}

.recruit_btn_link .ir_arrow_img {
    margin-left: 10px;
}

.ir_btn_link .ir_arrow_img {
    margin-left: 30px;
}