@charset "utf-8";
.intro_wrap { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 20px; width: 100%; min-height: 100vh; background: url('../img/new_know/intro_bg.png') no-repeat center/cover fixed; box-sizing: border-box;}
.intro_wrap > .header { position: relative; display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; padding: 0 20px; width: 100%; height: 50px; line-height: 50px; border-top: 0px solid #4f4f4f; border-bottom: 0px solid #abb2b7; box-sizing: border-box;}
.intro_wrap > .header > .logo { width: 146px; height: 43px; background: url('../img/new_know/logo_white.png') no-repeat center/cover;}
.intro_wrap > .header > .logo:hover { filter: sepia(1);}
.intro_wrap > .header > .logo a { display: block; width: 146px; height: 43px;}
.intro_wrap > .header > .counter { clear:both; }
.intro_wrap > .header > .counter > .items { display: flex; gap: 14px; }
.intro_wrap > .header > .counter > .items > .item { position: relative; color:#fff;}
.intro_wrap > .header > .counter > .items > .item::after { content: ''; display: inline-block; margin-right: 20px; width: 1px; height: 12px; background-color: rgba(156, 160, 164, .5); margin: 0 12px 0 16px;}
.intro_wrap > .header > .counter > .items > .item:last-child::after { display: none;}
.intro_wrap > .header > .counter > .items > .item > strong { margin-right: 10px; font-size: 14px; font-weight: 400; letter-spacing: -0.5px; }
.intro_wrap > .header > .counter > .items > .item > span { font-size: 14px; }
.intro_wrap > .body{ display:flex; gap:20px; min-height:0; flex:1 1 auto; width:100%; height: calc(100vh - 10% - 80px);} 
.intro_wrap > .body > .left{   flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px; min-height:0; }
.intro_wrap > .body > .left > .tit{ flex:0 0 70px; line-height:70px; padding:0 20px; border-radius:6px; color:#fff; box-sizing:border-box; background: linear-gradient(to bottom, #1c2f7a, #2f3f9a); box-shadow: 5px 6px 9px 1px rgba(0, 0, 0, .4);}
.intro_wrap > .body > .left > .tit > strong {font-size: 22px; font-weight: 400; color: rgba(255, 255, 255, .8);}
.intro_wrap > .body > .left > .tit > span { position: relative; margin-top: 5px; font-size: 12px; font-weight: 200; color: rgba(255, 255, 255, .6);}
.intro_wrap > .body > .left > .tit > span::before { content:'/'; display: inline-block; margin: 0 10px 0 15px;}
.intro_wrap > .body > .left > .world{ position: relative; flex:1 1 0; /* 남는 높이를 가져가도록 */display: flex; align-items: center; justify-content: center; min-height:600px; /* 넘침 방지 (스크롤/마스크를 원하면 overflow 사용) */ padding:10px; border:2px solid rgba(255,255,255,.2); background-color: rgba(0,0,0,.3); border-radius:6px; box-sizing:border-box; box-shadow: 5px 6px 9px 1px rgba(0, 0, 0, .4); overflow:hidden;}
.intro_wrap > .body > .left > .world::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color:rgba(0,0,0,.5); z-index: -1; }
.intro_wrap > .body > .left > .world > .world_map { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); width: 1038px; height: 615px; background-image: url(../img/new_know/intro_world.png); background-size: cover; }
.intro_wrap > .body > .left > .world > .world_map::before { content: ''; position: absolute; width:788px; height:351px; top: 144px; left: 120px; background-image: url(../img/new_know/world_map_blink.png); background-size: cover; z-index: 1; /* 배경 이미지보다 높게 설정 */ animation: blink 1s linear infinite;}
.intro_wrap > .body > .left > .world > .world_map > .items { position: relative; }/* 공통: 한 줄 높이/정렬 */
.intro_wrap > .body > .left > .world > .world_map > .items > .item { position: absolute; display: inline-flex; height: 34px; line-height: 34px; top: 40px;  left: 40px; z-index: 99; /* 필요 시 폰트/간격 맞추세요 */}

/* 왼쪽 배지 */
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .tit { position: relative; display: block; background: #3674d0;/* 하늘/파랑 */ color: #fff; text-align: center; border-radius: 30px 0 0 30px; padding: 0 20px 0 16px; z-index: 1; /* 아래 레이어 */ height: 34px; margin-right: 14px;}
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .tit::before { content: ""; position: absolute; top: 0; right: 0px; width: 14px; height: 34px; background: #3674d0; /* 역직삼각형 (오른쪽 직각, 왼쪽 대각선) */ clip-path: polygon(0 0, 100% 0, 0 100%); }
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .tit::after { content: ""; position: absolute; top: 1px; right: -1px; width: 14px; height: 34px; background: #002e72; clip-path: polygon(100% 0, 100% 100%, 0 100%)}
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .tit > strong { display: inline-block; }
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .tit > strong > em { display: inline-block; margin : 0 3px; }
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .tit:hover { background-color:#25a106 }
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .tit:hover::before { background-color:#25a106 }

/* 오른쪽 배지 */
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .detail {display: flex; flex-direction: row; gap: 10px; position: relative; background: #002e72; color: #fff; border-radius: 0 30px 30px 0; padding: 0 10px 0 10px; margin-left: -14px; z-index: 2;/* 위 레이어 */ height: 34px;}
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .detail > li {  position: relative; letter-spacing: -0.5px;}
/*.intro_wrap > .body > .left > .world > .world_map > .items > .item > .detail > li:first-child::after {content: ""; position: absolute; top: 50%; right: 0%; width: 1px; height: 18px; background-color: rgba(255,255,255,.5); transform: translateY(-50%) rotate(20deg);}*/

.intro_wrap > .body > .left > .world > .world_map > .items > .item > .detail > li > em { font-size: 16px; font-weight: 300px; margin-right: 3px;  }
.intro_wrap > .body > .left > .world > .world_map > .items > .item > .detail > li > span { font-size: 14px; margin-right: 10px; }



.intro_wrap > .body > .left > .world > .world_map > .items > .item.item00 { top: 95px; left: 440px }
.intro_wrap > .body > .left > .world > .world_map > .items > .item.item01 { top: 110px; left: 35px }
.intro_wrap > .body > .left > .world > .world_map > .items > .item.item02 { top: 180px; left: 240px }
.intro_wrap > .body > .left > .world > .world_map > .items > .item.item03 { top: 195px; left: 690px }
.intro_wrap > .body > .left > .world > .world_map > .items > .item.item04 { top: 355px; left: 700px }
.intro_wrap > .body > .left > .world > .world_map > .items > .item.item05 { top: 486px; left: 340px }
.intro_wrap > .body > .left > .world > .world_map > .items > .item.item05 .tit{ width: 148px;}
.intro_wrap > .body > .left > .world > .world_map > .items > .item.item06 { top: 400px; left: 35px }

.intro_wrap > .body > .right{  flex:0 0 380px; min-height:0; display:flex; flex-direction:column; border-radius: 6px;  }
.intro_wrap > .body > .right > .banner { height: 100%;}
.intro_wrap > .body > .right > .banner > .items { display:flex; flex-direction:column; gap:25px; height: 100%; justify-content: space-between; letter-spacing: -0.5px;}
.intro_wrap > .body > .right > .banner > .items .item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; padding: 40px 20px; letter-spacing: -0.5px; border-radius: 6px; box-sizing: border-box; border: 0px solid #000; box-shadow: 5px 6px 9px 1px rgba(0, 0, 0, .4); z-index: 0; transition: flex 0.4s ease;}
.intro_wrap > .body > .right > .banner > .items .item::before { content: ''; position: absolute;  /* 부모 요소를 기준으로 절대 위치 설정 */ top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)); background-position: 0 10%;  /* 시작 시 그라데이션이 아래에서 시작 */ background-size: 100% 200%;  /* 배경 크기 설정, 2배 크기로 설정하여 애니메이션 효과 */ border-radius: 6px; z-index: -1; /* 그라데이션이 다른 콘텐츠 아래로 가도록 */ transition: background-position 0.6s ease-out; /* 애니메이션 효과 */}
.intro_wrap > .body > .right > .banner > .items .item:hover { flex: 1.5; }

/* hover 상태 */
.intro_wrap > .body > .right > .banner > .items .item:hover::before { background-position: 0 100%;  /* hover 시 그라데이션이 위로 올라옴 */}
.intro_wrap > .body > .right > .banner > .items .item strong { font-size: 24px; color: rgba(255,255,255,.9); font-weight: 300;}
.intro_wrap > .body > .right > .banner > .items .item span { width: 60%; font-size: 16px; color: rgba(255,255,255,.7); font-weight: 100; text-align:left; }
.intro_wrap > .body > .right > .banner > .items .item.banner01{ background: url('../img/new_know/banner01_bg.png') no-repeat center/cover;}
.intro_wrap > .body > .right > .banner > .items .item.banner02{ background: url('../img/new_know/banner02_bg.png') no-repeat center/cover;}
.intro_wrap > .body > .right > .banner > .items .item.banner03{ background: url('../img/new_know/banner03_bg.png') no-repeat center/cover;}

.intro_wrap > .footer { position: relative; flex: 0 0 auto; width: 100%; height: 66px; border-radius: 6px; box-sizing: border-box;}
.intro_wrap > .footer > .items { display: flex; flex-direction: row; justify-content: space-between; gap: 25px; height: inherit; line-height: inherit;}
.intro_wrap > .footer > .items > .item{ flex: 1; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 8px; border-radius: 6px; box-shadow: 5px 6px 9px 1px rgba(0, 0, 0, .4); box-sizing: border-box; }
.intro_wrap > .footer > .items > .item > .tit { position:relative; flex: 1; text-align: center; font-size: 18px; }
.intro_wrap > .footer > .items > .item > .tit::after { content: ''; position: absolute; top: 4px; right: 30px; display: inline-block; width: 1px; height: 100px; transform: rotate(10deg); margin-left: 8px;}
.intro_wrap > .footer > .items > .item > .txt { flex: 4; text-align: left; text-size: 14px; }
.intro_wrap > .footer > .items > .item > .txt > li > a { display: flex; justify-content: space-between; gap: 10px; color:#fff;}
.intro_wrap > .footer > .items > .item > .txt > li > a > strong{ flex: 4; display: inline-block;   /* 텍스트 크기만큼 영역 제한 */ color: #f1f7fe; font-size: 15px; letter-spacing: -.5px; font-weight: 100;}
.intro_wrap > .footer > .items > .item > .txt > li > a:hover > strong { color: rgba(255,255,255,.7); border-bottom: 1px dotted rgba(255,255,255,.3); /* 텍스트 길이만 밑줄 */}
.intro_wrap > .footer > .items > .item > .txt > li > a > span { flex: 1; color:#03c495;}

.intro_wrap > .footer > .items > .item.notice { background-color: #00523e;}
.intro_wrap > .footer > .items > .item.notice > .tit { color:#03c495;}
.intro_wrap > .footer > .items > .item.notice > .tit::after { background-color: #1a6452; }
.intro_wrap > .footer > .items > .item.event { background-color:#0f166a;}
.intro_wrap > .footer > .items > .item.event > .tit { color:#adc0fe; }
.intro_wrap > .footer > .items > .item.event > .tit::after { background-color: #272e79; }



.world_map .blink {
    position: absolute;
    width: 788px;
    height: 351px;
    background-image: url(../img/new_know/main_world_blink00.png);
    background-size: cover;
    z-index: 2;
    top: 144px;
    left: 120px;
    animation: blink 1s linear infinite
}

.world_map.ani-on .arrow.arrow-1 {
    animation: scale-1 6s ease-in-out forwards;  
    animation-delay: 1s;           /* ← 5초 후 시작 = 유럽  */
}
.world_map.ani-on .arrow.arrow-2 {
    animation: scale-1 6s ease-in-out forwards;  
    animation-delay: 2s;           /* ← 5초 후 시작 = 유럽  */
}

.world_map.ani-on .arrow.arrow-3 {
    animation: scale-2 6s ease-in-out forwards;
    animation-delay: 3s;           /* ← 10초 후 시작 = 아프리카  */  
}

.world_map.ani-on .arrow.arrow-4 {
    animation: scale-3 6s ease-in-out forwards;
    animation-delay: 4s;           /* ← 5초 후 시작 = 오세아니야.  */  
}

.world_map.ani-on .arrow.arrow-5 {
    animation: scale-4 6s ease-in-out forwards;
    animation-delay: 6s;            /* ← 5초 후 시작 = 북미.  */  
}

.world_map.ani-on .arrow.arrow-6 {
    animation: scale-5 6s ease-in-out forwards;
    animation-delay: 7s;           /* ← 5초 후 시작 = 중남미  */  
    
}

.world_map .arrow {
    position: absolute;
    background-size: cover;
    z-index: 2;
    opacity: 0
}

.world_map .arrow.arrow-1 {
    width: 262px;
    height: 133px;
    background-image: url(../img/new_know/arrow-1.png);
    top: 162px;
    left: 160px;
    /* border:1px solid red; */
}

.world_map .arrow.arrow-2 {
    width: 109px;
    height: 59px;
    background-image: url(../img/new_know/arrow-2.png);
    top: 236px;
    left: 312px;
    /* border:1px solid orange; */
}

.world_map .arrow.arrow-3 {
    width: 276px;
    height: 81px;
    background-image: url(../img/new_know/arrow-3.png);
    top: 296px;
    left: 147px;
    /* border:1px solid yellow; */
}

.world_map .arrow.arrow-4 {
    width: 28px;
    height: 164px;
    background-image: url(../img/new_know/arrow-4.png);
    top: 297px;
    left: 419px;
    /* border:1px solid green; */
}

.world_map .arrow.arrow-5 {
    width: 454px;
    height: 160px;
    background-image: url(../img/new_know/arrow-5.png);
    top: 295px;
    left: 421px;
    /* border:1px solid blue; */
}

.world_map .arrow.arrow-6 {
    width: 328px;
    height: 61px;
    background-image: url(../img/new_know/arrow-6.png);
    top: 235px;
    left: 425px;
    /* border:1px solid purple; */
}

.world_map .map-arrow {
    position: absolute;
    width: 729px;
    height: 300px;
   background-image: url(../img/new_know/arrow-all.png);
    background-size: cover;
    top: 162px;
    left: 147px;
    /* border:1px solid white; */
}

/*##########################  animation  #############################*/
@keyframes blink {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}
@keyframes scale-1 {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: right bottom
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(0);
        transform-origin: left top
    }
}

@keyframes scale-2 {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: right top
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(0);
        transform-origin: left bottom
    }
}

@keyframes scale-3 {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: center top
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(0);
        transform-origin: center bottom
    }
}

@keyframes scale-4 {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: left top
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(0);
        transform-origin: right bottom
    }
}

@keyframes scale-5 {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: left bottom
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(0);
        transform-origin: right top
    }
}


/*##########################  media  #############################*/

@media all and (min-width:1280px) and (max-width: 1409.98px) {
	 .intro_wrap > .body > .left > .world > .world_map { transform: translate(-50%, -50%) scale(.85);}	
}

/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ 
@media all and (min-width:1024px) and (max-width:1279.98px) { 
	.intro_wrap > .body { flex-direction: column;}
	.intro_wrap > .body > .left > .world > .world_map { transform: translate(-50%, -50%) scale(.70);  }	
	.intro_wrap > .body > .left > .world { height: calc(100vh - (20% / 3)); min-height: 500px; }
	.intro_wrap > .body > .right > .banner > .items { height: 180px; flex-direction: row; }
	.intro_wrap > .body > .right { flex: none;}
} 

/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media (min-width:768px) and (max-width:1023.98px) {
  .intro_wrap > .body { flex-direction: column; }
  /* tablet에서 world 컨테이너 디버깅용 테두리 */
  .intro_wrap > .body > .left > .world { border:1px solid skygreen; min-height: 500px;  /* 필요시 높이 보장 */ }
  /* world_map 중앙 유지 + 축소만 */
  .intro_wrap > .body > .left > .world > .world_map { transform: translate(-50%, -50%) scale(.70); /* Y축 복원 */}
  .intro_wrap > .body > .right { flex: none; }
  .intro_wrap > .body > .right > .banner > .items { height: auto; flex-direction: row;  }

  /* transition은 flex-grow로 */
  .intro_wrap > .body > .right > .banner > .items .item { flex: 1 1 0; padding: 24px 14px; height: 150px; transition: flex-grow 0.4s ease;}
  .intro_wrap > .body > .right > .banner > .items .item:hover { flex-grow: 1.5; }
  .intro_wrap > .body > .right > .banner > .items .item strong { font-size: 18px; }
  .intro_wrap > .body > .right > .banner > .items .item span { width: 90%; font-size: 14px;}
  .intro_wrap > .footer { height: auto;}
  .intro_wrap > .footer > .items { height: 100px;}
  .intro_wrap > .footer > .items > .item { flex-direction: column; align-items: flex-start; padding: 20px; }
  .intro_wrap > .footer > .items > .item > .tit { flex: none; margin-bottom: 10px !important;}
}

@media (max-width: 600px) {
	.intro_wrap > .body > .right > .banner > .items .item span { display: none;}
}

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (min-width:480px) and (max-width:767.98px) {
  .intro_wrap { height: inherit; }  
  .intro_wrap > .header > .counter > .items { gap: 5px;}	
  .intro_wrap > .header > .counter > .items > .item > strong { font-size: 12px; }
  .intro_wrap > .body { flex-direction: column; }
  .intro_wrap > .body > .left > .world { min-height: 500px;}  
  .intro_wrap > .body > .left > .tit {  flex: 0 0 56px; height: 56px; line-height: 56px;}
  .intro_wrap > .body > .left > .tit > strong { font-size: 16px}
  .intro_wrap > .body > .left > .world { min-height: 360px; }
  .intro_wrap > .body > .left > .world > .world_map { transform: translate(-50%, -50%) scale(.45);  }
  .intro_wrap > .body > .right { flex: none;} 
  .intro_wrap > .body > .right > .banner > .items .item { padding: 24px 14px; height: 150px; flex: 1; transition: flex 0.4s ease;}
  .intro_wrap > .body > .right > .banner > .items .item:hover { flex: 1.5; }
  .intro_wrap > .body > .right > .banner > .items .item strong { font-size: 17px; text-align: left; }
  .intro_wrap > .body > .right > .banner > .items .item span { width: 100%; font-size: 14px;}  
  .intro_wrap > .body > .right > .banner > .items { height: auto; flex-direction: row; gap: 10px;}
  
  .intro_wrap > .footer {  margin-top: 10px;  height: auto;}
  .intro_wrap > .footer > .items { height: auto; gap: 10px; flex-direction: column;}
  .intro_wrap > .footer > .items > .item { flex-direction: column; align-items: flex-start; padding: 20px;}
  .intro_wrap > .footer > .items > .item > .tit { flex: 1; margin-bottom: 10px!important; font-size: 16px;} 
  .intro_wrap > .footer > .items > .item > .txt { flex: 1; width: 100%;}
  .intro_wrap > .footer > .items > .item > .txt > li > a > strong { height: 20px; overflow-y: hidden;}
} 

@media (max-width: 479.98px) {
  /* .intro_wrap > .body > .left > .world { border:1px solid pink;} */
  .intro_wrap { height: auto; min-height: 100%; gap: 5px;}
  .intro_wrap > .header { align-items: flex-start; flex-direction: column; height: auto;}
  .intro_wrap > .header > .logo,
  .intro_wrap > .header > .logo a { width: 110px; height: 32px;}
  .intro_wrap > .header > .counter > .items { gap: 5px;}	
  .intro_wrap > .header > .counter > .items > .item > strong { font-size: 12px; }  
  .intro_wrap > .body { flex-direction: column; /* min-height: 560px; */}
  .intro_wrap > .body > .left > .tit { flex: 0 0 36px; margin-top: 6px; height: 36px; line-height: 36px;}
  .intro_wrap > .body > .left > .tit > strong { font-size: 14px}
  .intro_wrap > .body > .left > .tit > span { display: none;}
  .intro_wrap > .body > .left > .world { min-height: 280px; }
  .intro_wrap > .body > .left > .world > .world_map { transform: translate(-50%, -50%) scale(.34);}
  
  .intro_wrap > .body > .right { flex: none;} 
  .intro_wrap > .body > .right > .banner > .items { height: auto; flex-direction: column; gap: 10px; }
  .intro_wrap > .body > .right > .banner > .items .item { display: flex; flex-direction: column; align-items: flex-start;  gap: 8px; padding: 24px 14px; height: 150px; flex: 1; transition: flex-grow 0.4s ease, height 0.4s ease; /* 부드럽게 변화 */ }
  .intro_wrap > .body > .right > .banner > .items .item.banner01 { background-position: center -100px; }
  .intro_wrap > .body > .right > .banner > .items .item.banner02 { background-position: center -40px; }
  .intro_wrap > .body > .right > .banner > .items .item.banner03 { background-position: center -70px; }
  .intro_wrap > .body > .right > .banner > .items .item:hover { flex: 1.5; height: 180px;}
  .intro_wrap > .body > .right > .banner > .items .item strong { font-size: 17px; text-align: left; }
  .intro_wrap > .body > .right > .banner > .items .item span { width: 100%; font-size: 14px;}  
  
  .intro_wrap > .footer {  margin-top: 10px;  height: auto;}
  .intro_wrap > .footer > .items { height: auto; gap: 10px; flex-direction: column;}
  .intro_wrap > .footer > .items > .item { flex-direction: column; align-items: flex-start; padding: 20px;}
  .intro_wrap > .footer > .items > .item > .tit { flex: 1; margin-bottom: 10px!important; font-size: 16px;} 
  .intro_wrap > .footer > .items > .item > .txt { flex: 1; width: 100%;}
  .intro_wrap > .footer > .items > .item > .txt > li > a > strong { height: 20px; overflow-y: hidden;} 
}


/* 모바일 세로 (해상도 ~ 479px)*/ 
/* @media all and (max-width:479px) {
  스타일 입력
}

@media screen and (max-width:425px)  {
  스타일 입력
}
@media screen and (max-width:375px)  {
  스타일 입력
} */