@charset "utf-8";
#inc01{position:relative;margin-top:200px;height:auto}
#inc01 .since{margin-left:70px;width:max-content;font-size:36px;font-weight:700}
#inc01 .cont_wrap{position:relative;top:0px;padding:100px 0 0px;margin-top:30px;height:auto;background-color:var(--primary);overflow:hidden;}
#inc01 .cont_wrap canvas{opacity:0;position:absolute;top:0px;left:70px}
#inc01 .matter_word{opacity:0;position:absolute;top:0px;left:70px}
#inc01 .matter_word span{font-size:177px;font-weight:900;color:#000}
#inc01 .about_wrap{display:flex;width: 62%; margin-right: 20px; margin-left: auto; gap: 60px;}
#inc01 .txt_wrap{display:flex;justify-content: flex-start; flex-direction: column;position: relative;margin-top: 50px; width:100%;}
#inc01 .phone_wrap{display:flex;justify-content: flex-end; flex-direction: column; position: relative;}
#inc01 .txt_wrap h2{font-size:34px;font-weight:600;color:#000}
#inc01 .txt_wrap .txt{position:relative;padding-bottom:30px; display:flex; align-items: center; gap: 20px;}
#inc01 .txt_wrap .txt p{font-size:20px;font-weight:400;color:#000; white-space:normal;}
#inc01 .more{display:flex;align-items:center;gap:20px;padding-right:30px;max-height:25px;font-size:19px;font-weight:700;color:#000;margin-top:100px; position:absolute; bottom:50px; left:0px;}
#inc01 .more .bg{position:relative;width:7px;height:7px;background-color:#000;border-radius:50%}
#inc01 .more .bg svg{opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:21px;height:21px;color:#fff}

#inc01 .gsap_wrap{position:relative;padding:160px 70px;width:100%;background-color:#000}
#inc01 .gsap_wrap .img_cont{display:flex;align-items:start;position:relative;}
#inc01 .img_cont a{position:relative}
#inc01 .img_cont .left{width:48%}
#inc01 .img_cont .right{margin-left:25%;width:17%;box-sizing:content-box;margin-top: -30px;}
#inc01 .img_cont .right-bottom{position:absolute; right:220px; bottom:-70px; width:30%;}
#inc01 .img_cont .img{overflow:hidden;width:100%;filter:blur(10px) brightness(0.5);transition:all 1.5s;position:relative;}
#inc01 .img_cont .left .img{height:710px;transform:perspective(2500px) rotateY(180deg)}
#inc01 .img_cont .right .img{height:410px;transform:perspective(2500px) rotateY(-180deg)}
#inc01 .img_cont .right-bottom .img{transform:perspective(2500px) rotateY(-180deg)}
#inc01 .gsap_wrap.active .img_cont .img{filter:blur(0px) brightness(1);transform:perspective(2500px) rotateY(0deg)}
#inc01 .img_cont img{width:100%;height:100%;object-fit:cover;transition:all .3s}
#inc01 .img_cont svg{opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%;background-color:rgb(0, 0, 0,0.8);transition:all .3s}
#inc01 .img_cont .left svg{width:210px;height:210px}
#inc01 .img_cont .right svg{width:150px;height:150px}
#inc01 .img_cont .right-bottom svg{width:150px;height:150px}

#inc01 .img_cont a span{opacity:0;position:absolute;}
#inc01 .img_cont a span:nth-child(-n+2):after{top:-4px;left:-4px}
#inc01 .img_cont a span:nth-child(3):after{bottom:-4px;right:-4px}
#inc01 .img_cont a span:nth-child(4):after{bottom:-4px;right:-4px}
#inc01 .img_cont a span.bg_top{top:0px;left:0px;width:100%;height:1px}
#inc01 .img_cont a span.bg_right{top:0px;right:0px;width:1px;height:100%}
#inc01 .img_cont a span.bg_bottom{bottom:0px;right:0px;width:100%;height:1px}
#inc01 .img_cont a span.bg_left{bottom:0px;left:0px;width:1px;height:100%}
#inc01 .img_cont .text-overlay {position: absolute; top: 20px; left: 20px; color: white; font-size: 32px; font-weight: bold; opacity:1; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); z-index: 10; pointer-events: none; }
#inc01 .img_cont > a:hover .text-overlay { opacity: 0; }

#inc01 .txt_cont{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-top:50px}
#inc01 .txt_cont h2, #inc01 .txt_cont h3 {overflow:hidden}
#inc01 .txt_cont h2 span{color:var(--primary)}
#inc01 .txt_cont h3 div{margin-top:60px;font-size:70px;font-weight:700;line-height:1.1}
#inc01 .txt_cont a{gap:5px;margin-top:90px;display:flex;justify-content:center;align-items:center; background-color:#FB33DB; transition: all 0.3s ease !important; padding: 20px 40px; border-radius: 50px; font-size: 20px; font-weight: bold; color:#fff;}
#inc01 .txt_cont a:hover{box-shadow: 0px 0px 20px 3px #FB33DB;}
#inc01 .txt_cont a .icon{margin-left:3px;}
#inc01 .txt_cont a svg{width:22px; display: block;}
#inc01 .txt_cont a svg path{color:#fff}

#inc01 .cursor{position:fixed;z-index:9999;width:120px;height:120px;transform:translate(-50%, -50%);transition-property:background, transform;pointer-events:none}
#inc01 .cursor .bg{display:flex;justify-content:center;align-items:center;text-align:center;opacity:0;transform:scale(0);width:100%;height:100%;border-radius:50%;font-size:24px;line-height:1.1;font-weight:700;transition:all .3s var(--timing);color:#000 !important;background:var(--primary)}
#inc01 .cursor.on .bg{opacity:1;transform:scale(1)}

@keyframes rotate {
    0% { transform:translate(-50%, -50%) rotate(0deg)}
    100% { transform:translate(-50%, -50%) rotate(360deg)}
}

.phone-frame {position:relative; width: 375px; height: 510px; border: 14px solid black; border-bottom: 0; border-radius: 40px 40px 0 0; overflow: hidden; position: relative; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); background-color: #9bbbd4;}
.phone-frame:after{content:''; width:135px; height:15px; background:#000; position:absolute; top:0; left:50%; transform:translateX(-50%); border-radius: 0 0 50px 50px;}
.chat-screen {height: 100%; overflow-y: auto; padding: 20px 10px; box-sizing: border-box;}
.chat-screen::-webkit-scrollbar {display: none; }
.chat-screen {-ms-overflow-style: none; scrollbar-width: none;}

.message-container {display: flex; flex-direction: column; gap: 15px; user-select: none;}
.bubble {color:#000; padding: 10px 15px; border-radius: 18px; max-width: 75%; word-break: keep-all; line-height: 1.5; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; height:0; display:none;}
.bubble.left {align-self: flex-start; background-color: white; border-radius: 18px 18px 18px 0; }
.bubble.right {align-self: flex-end; background-color: #fee500; /* 카톡 노란색 */ border-radius: 18px 18px 0 18px;}
.bubble.visible {opacity: 1; transform: translateY(0); height: auto; display:block;}
.phone-info{color:#000; font-size:16px; padding-left:15px; padding-bottom:7px;}
.left-row {
            display: flex;
            align-items: flex-start; /* 이미지 상단과 말풍선 상단을 맞춤 */
            gap: 8px; /* 이미지와 말풍선 사이 간격 */
            align-self: flex-start; /* 컨테이너 자체를 왼쪽으로 정렬 */
        }
.profile-img {
	width: 40px;
	height: 40px;
	border-radius: 50%; /* 이미지를 원형으로 만듦 */
	background-color: #eee; /* 이미지가 없을 경우를 대비한 배경색 */
	flex-shrink: 0; /* 컨테이너 크기가 줄어들 때 이미지가 찌그러지지 않도록 함 */

	/* 말풍선과 함께 나타나는 애니메이션 효과 */
	opacity: 0;
	transform: translateY(5px);
}
.left-row.visible .profile-img {
	opacity: 1;
	height:40px;
}

.split-container { display: flex;}
.map-section { flex: 1; display: flex; justify-content: center; align-items: center; }
.content-section { flex: 1.2; padding: 40px 0 0 40px; color: white; }
.korea-map { max-width: 490px;}
.korea-map path {cursor: pointer; transition: all 0.2s ease-in-out; }
#region-name{font-size: 30px; text-align:left;}
#region-description{float:left; font-size:30px; padding-right:10px; color:#55ec0b; font-weight: 600;}
#region-logos-wrapper { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out, margin-top 0.5s ease-in-out; display: flex; flex-wrap: wrap; gap: 15px; border-radius: 8px;}
#region-logos-wrapper.show { max-height: 320px; opacity: 1; margin-top: 35px; overflow-y: auto;}
#region-logos-wrapper::-webkit-scrollbar { width: 8px;  /* 세로 스크롤바의 너비 */ height: 8px; /* 가로 스크롤바의 높이 */ }
#region-logos-wrapper::-webkit-scrollbar-track { background-color: #2c2c2c; /* 트랙의 배경색 */ border-radius: 10px; /* 트랙의 모서리를 둥글게 */ }
#region-logos-wrapper::-webkit-scrollbar-thumb { background-color: #808080; /* 핸들의 배경색 */ border-radius: 10px; /* 핸들의 모서리를 둥글게 */ border: 2px solid #2c2c2c; /* 트랙과 핸들 사이에 여백 효과 */ }
#region-logos-wrapper::-webkit-scrollbar-thumb:hover { background-color: #a0a0a0; /* 호버 시 핸들 색상을 밝게 */ }
#region-logos-wrapper { scrollbar-width: thin; /* 스크롤바를 얇게 만듭니다. (auto, thin, none) */ scrollbar-color: #808080 #2c2c2c; /* 핸들 색상, 트랙 색상 순서로 지정 */ }

.region-logo { height: 100px; width: auto; object-fit: contain; border-radius: 4px; padding: 5px; }
.gsap_wrap > h2{text-align:center; font-size:62px; font-weight: 600; padding-bottom:60px;}
.animate-fade-up {animation: fadeUp 0.6s ease-out forwards;}
#region-name, #region-description { opacity: 0; }
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
  }

.logo-item {
    position: relative; /* 팝업 이미지의 위치 기준점 */
    display: inline-flex;
}
.popup-image {
    position: absolute;
    top: -50%; 
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* 살짝 아래에서 시작 */
    z-index: 10;
	
    
    /* 숨김 처리 및 애니메이션 준비 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.image-popup-viewer {
    position: fixed; /* 화면 전체를 기준으로 위치를 잡음 */
    height: auto;
	width:500px;
	aspect-ratio: 16 / 9;
	background-color: #000;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    z-index: 999; /* 다른 요소들보다 항상 위에 있도록 설정 */
    
    /* 애니메이션 효과 */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    
    /* JS로 위치를 잡기 전까지 보이지 않도록 함 */
    pointer-events: none; 
}
.image-popup-viewer.show {
    opacity: 1;
    transform: translateY(0);
}
.image-popup-viewer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



#gyeonggi { animation: neon-pink 2s 1 forwards; }
#jeolla {animation: neon-orange 2s 1 forwards; animation-delay: 2.5s;}
#chungcheong {animation: neon-sky 2s 1 forwards; animation-delay: 1.5s;}
#gyeongsang {animation: neon-green 2s 1 forwards; animation-delay: 2s;}
#seoul {animation: neon-yellow 2s 1 forwards; animation-delay: .5s;}
#gangwon {animation: neon-blue 2s 1 forwards; animation-delay: 1s;}
#busan {animation: neon-red 2s 1 forwards;}
#jeju {animation: neon-purple 2s 1 forwards; animation-delay: 3s;}

.korea-map #gyeonggi:hover { fill: #FB33DB40; }
.korea-map #gyeonggi.active { fill: #FB33DBb3;}
.korea-map #jeolla:hover { fill: #FF822E40; }
.korea-map #jeolla.active { fill: #FF822Eb3;}
.korea-map #chungcheong:hover { fill: #08F7FE40; }
.korea-map #chungcheong.active { fill: #08F7FE9e;}
.korea-map #gyeongsang:hover { fill: #7FFF0040; }
.korea-map #gyeongsang.active { fill: #7FFF00b3;}
.korea-map #seoul:hover { fill: #FCF34040; }
.korea-map #seoul.active { fill: #FCF340b3;}
.korea-map #gangwon:hover { fill: #0310ea40; }
.korea-map #gangwon.active { fill: #0310eab3;}
.korea-map #busan:hover { fill: #ff267f75; }
.korea-map #busan.active { fill: #ff267fb3;}
.korea-map #jeju:hover { fill: #7100FF75; }
.korea-map #jeju.active { fill: #7100FFb3;}

@keyframes neon-pink {
    0% {
        filter: drop-shadow(0 0 10px #FB33DB00);
    }
    80% {
        filter: drop-shadow(0 0 10px #FB33DB00);
    }
    100% {
        filter: drop-shadow(0 0 20px #FB33DB);
    }
}
@keyframes neon-yellow {
    0% {
        filter: drop-shadow(0 0 10px #FCF34000);
    }
    80% {
        filter: drop-shadow(0 0 10px #FCF34000);
    }
    100% {
        filter: drop-shadow(0 0 20px #FCF340);
    }
}
@keyframes neon-blue {
    0% {
        filter: drop-shadow(0 0 10px #0310ea00);
    }
    80% {
        filter: drop-shadow(0 0 10px #0310ea00);
    }
    100% {
        filter: drop-shadow(0 0 20px #0310ea);
    }
}
@keyframes neon-sky {
    0% {
        filter: drop-shadow(0 0 10px #08F7FE00);
    }
    80% {
        filter: drop-shadow(0 0 10px #08F7FE00);
    }
    100% {
        filter: drop-shadow(0 0 10px #08F7FE);
    }
}
@keyframes neon-green {
    0% {
        filter: drop-shadow(0 0 10px #7FFF0000);
    }
    80% {
        filter: drop-shadow(0 0 10px #7FFF0000);
    }
    100% {
        filter: drop-shadow(0 0 20px #7FFF00);
    }
}
@keyframes neon-orange {
    0% {
        filter: drop-shadow(0 0 10px #FF822E00);
    }
    80% {
        filter: drop-shadow(0 0 10px #FF822E00);
    }
    100% {
        filter: drop-shadow(0 0 20px #FF822E);
    }
}
@keyframes neon-red {
    0% {
        filter: drop-shadow(0 0 10px #F52E7F00);
    }
    80% {
        filter: drop-shadow(0 0 10px #F52E7F00);
    }
    100% {
        filter: drop-shadow(0 0 20px #F52E7F);
    }
}
@keyframes neon-purple {
    0% {
        filter: drop-shadow(0 0 10px #7100FF00);
    }
    80% {
        filter: drop-shadow(0 0 10px #7100FF00);
    }
    100% {
        filter: drop-shadow(0 0 20px #7100FF);
    }
}


/* 반응형 [s] */
@media (hover:hover){
#inc01 .img_cont a:hover span{opacity:1}
#inc01 .img_cont a:hover span.bg_top{top:-40px;left:-40px;width:calc(100% + 80px)}
#inc01 .img_cont a:hover span.bg_right{top:-40px;right:-40px;height:calc(100% + 80px)}
#inc01 .img_cont a:hover span.bg_bottom{bottom:-40px;right:-40px;width:calc(100% + 80px)}
#inc01 .img_cont a:hover span.bg_left{bottom:-40px;left:-40px;height:calc(100% + 80px)}
#inc01 .img_cont a:hover img{transform:scale(130%);filter:brightness(0.5)}
#inc01 .img_cont a:hover svg{opacity:1;animation:rotate 10s linear infinite}
}
@media (max-width:1980px){
#inc01 .txt_wrap h2{font-size:54px}
#inc01 .txt_wrap .txt p{font-size:24px}
#inc01 .txt_wrap .txt a{font-size:17px}
#inc01 .img_cont .left .img{height:580px}
#inc01 .img_cont .right .img{height:390px}
#inc01 .img_cont .left svg{width:170px;height:170px}
#inc01 .img_cont .right svg{width:100px;height:100px}
#inc01 .img_cont .right-bottom svg{width:100px;height:100px}
#inc01 .txt_cont h3 div{font-size:62px}
}
@media (max-width:1380px){
#inc01{margin-top:180px}
#inc01 .since{margin-left:2.5%}
#inc01 .matter_word{display:none}
#inc01 .matter_word span{font-size:140px}
#inc01 .about_wrap{width:calc(100% - 40px); margin:0 auto; align-items: center; gap:0;}
#inc01 .cont_wrap canvas{left:2.5%;display:none;}
#inc01 .txt_wrap{width: 100%; gap: 40px; flex-direction: row; margin-left:50px; margin-top:0;}
#inc01 .txt_wrap h2{font-size:28px}
#inc01 .txt_wrap .txt{align-items: flex-start; flex-direction: column;}
#inc01 .txt_wrap .txt p{font-size:16px}
#inc01 .txt_wrap .txt a{font-size:16px}
#inc01 .phone_wrap{align-items: center;width:50%;}
#inc01 .img_cont .right{margin-left:20%;width:25%}
#inc01 .img_cont .right .img{height:300px}
#inc01 .img_cont .right-bottom .img{height:300px}
#inc01 .img_cont .left .img{height:500px}
#inc01 .txt_cont h3 div{font-size:50px}
#inc01 .gsap_wrap{padding:100px 70px;}
.gsap_wrap > h2{font-size:52px;}
#inc01 .more{bottom:-100px;}
}
@media (max-width:1024px){
#inc01{margin-top:50px}
#inc01 .matter_word span{font-size:115px}
#inc01 .phone_wrap{ width:50%;}
#inc01 .txt_wrap{flex-direction: column; width:50%; }
#inc01 .txt_wrap .txt{gap:0;}
#inc01 .img_cont .left .img{height:420px}
#inc01 .img_cont .right{margin-left:15%}
#inc01 .img_cont .right .img{height:270px}
#inc01 .img_cont a:hover span.bg_top{top:-30px;left:-30px;width:calc(100% + 60px)}
#inc01 .img_cont a:hover span.bg_right{top:-30px;right:-30px;height:calc(100% + 60px)}
#inc01 .img_cont a:hover span.bg_bottom{bottom:-30px;right:-30px;width:calc(100% + 60px)}
#inc01 .img_cont a:hover span.bg_left{bottom:-30px;left:-30px;height:calc(100% + 60px)}
#inc01 .img_cont .left svg{width:150px;height:150px}
#inc01 .txt_cont h3 div{margin-top:50px;font-size:40px}
.gsap_wrap > h2 { font-size: 38px; }
#region-description{ font-size: 24px; }
#region-name{ font-size: 24px; }
.region-logo{ height: 70px;}
#inc01 .about_wrap{align-items: flex-start;}

}
@media (max-width:768px){
#inc01 .since{margin:auto;font-size:17px}
#inc01 .cont_wrap{margin-top:20px; padding: 50px 0 0px}
#inc01 .txt_wrap{width:100%; margin:0; gap:10px;}
#inc01 .txt_wrap h2{padding-right:10px;}
#inc01 .txt_wrap .txt{padding-bottom:20px;width:100%; justify-content: center; flex-direction: row; align-items: center;}
#inc01 .txt_wrap .txt a{padding-right:0px;justify-content: center;}
#inc01 .phone_wrap{margin-top:0; width:100%;}
#inc01 .gsap_wrap{padding:80px 20px;}
#inc01 .gsap_wrap .img_cont{flex-direction:column}
#inc01 .img_cont .left{margin-left:2.5%;width:80%}
#inc01 .img_cont .left .img{height:350px}
#inc01 .img_cont .left svg{width:130px;height:130px}
#inc01 .img_cont .right{margin:70px 2.5% 0 auto;width:50%}
#inc01 .img_cont .right .img{height:230px}
#inc01 .img_cont .right-bottom{position:relative;width:70%;right: auto; bottom: 30px;}
#inc01 .img_cont .right-bottom .img{height:230px}
#inc01 .img_cont a:hover span.bg_top{top:-20px;left:-20px;width:calc(100% + 40px)}
#inc01 .img_cont a:hover span.bg_right{top:-20px;right:-20px;height:calc(100% + 40px)}
#inc01 .img_cont a:hover span.bg_bottom{bottom:-20px;right:-20px;width:calc(100% + 40px)}
#inc01 .img_cont a:hover span.bg_left{bottom:-20px;left:-20px;height:calc(100% + 40px)}
#inc01 .img_cont .text-overlay{font-size:24px;}
#inc01 .txt_cont h3 div{margin-top:40px;font-size:28px}
.region-logo { height: 60px; }
#inc01 .more{display:none;}
.content-section{padding:15px;}
#region-logos-wrapper{ overflow-y:auto;}
#region-logos-wrapper.show {max-height: 220px;}
#inc01 .about_wrap{align-items: center; flex-direction: column-reverse;}
#inc01 .txt_cont a{padding: 14px 20px; font-size: 16px;}
}
@media (max-width:480px){
#inc01{margin-top:30px}
#inc01 .txt_wrap{flex-direction: column; align-items: center;}
#inc01 .txt_wrap h2{font-size:18px; width:auto; padding-bottom:0;}
#inc01 .txt_wrap .txt{display:flex; justify-content: center; padding-bottom: 20px;}
#inc01 .txt_wrap .txt p{font-size:15px; padding-left:10px;}
#inc01 .txt_wrap .txt a{gap:15px;font-size:15px}
.gsap_wrap > h2	{padding-bottom: 20px; font-size:28px;}
#inc01 .img_cont .left{margin-left:5%}
#inc01 .img_cont .left .img{height:270px}
#inc01 .img_cont .left svg{width:110px;height:110px}
#inc01 .img_cont .right{margin:70px 5% 0 auto;width:50%}
#inc01 .img_cont .right svg{width:90px;height:90px}
#inc01 .img_cont .right-bottom svg{width:90px;height:90px}
#inc01 .txt_cont h3 div{margin-top:30px;font-size:23px;white-space:pre-line}
#region-description{font-size:18px;}
#region-name{font-size:18px;}
#inc01 .gsap_wrap { padding: 50px 20px; }
.split-container{flex-direction: column;}
.korea-map{max-height: 280px;}
}
@media (max-width:390px){
.phone-frame{width: calc(100% - 20px);}
}
/* 반응형 [e] */