@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.about .content{background-color: #fff;position:relative;}
.about .cont1{display:flex;justify-content:center;align-items:center;height:100vh;text-align:center;z-index:-1;}
.doc-tit{font-size:var(--fz50);font-weight:600;color:var(--dark);line-height:1.33em;}
.about .cont1 .doc-tit{margin-bottom:var(--size40);font-weight:500;}
.about .cont1 .doc-tit strong{color:var(--snd);font-weight:600;}
/* .about .cont1 .contain{display:none;} */
.time-acc{font-size:var(--fz214);line-height:1em;font-weight:700;color:var(--snd);}

.satellites-wrap{position: absolute;left:50%;top:10vh;width:100%; transform: translateX(calc(-50% - 3%));}
.satellites {animation: rotate-axis 20s linear infinite;transform-style: preserve-3d;display: flex;justify-content: center;}
@keyframes rotate-axis {
    from {
        transform: rotateZ(350deg) perspective(800px) rotateY(0deg);
    }
    to {
        transform: rotateZ(350deg) perspective(800px) rotateY(360deg);
    }
}



.satellite {position: absolute;width: auto;transform: rotateY(calc(var(--i) * 1deg)) translateZ(340px);color:rgba(0,0,0,.05);font-size:var(--fz100);top:280px;font-family: 'Freesentation';font-weight:700;text-align:center;}
.satellite.st2{opacity:0;}

.about .content-wrap{background-color: #fff;}
.about .cont2{display:flex;justify-content:center;align-items:center;height:100vh;/* padding:var(--size150) 0; */background-color:var(--snd);overflow:hidden;}
.about .cont2 .contain{display:flex;align-items:center;}
.about .cont2 .tt-wrap{min-width:0;width:1%;flex:1 1 auto;margin-right:50px;color: #fff;}
.about .cont2 .tt-wrap .tit{margin-bottom:var(--size30);font-size:var(--fz58);font-weight:600;line-height:1.25em;}
.about .cont2 .tt-wrap .tt{margin-bottom:var(--size30);font-size:var(--fz24);line-height:1.5em;}
.about .cont2 .tt-wrap .tt:last-child{margin-bottom:0;}
.about .cont2 .rotate-logo{position:relative;margin-right:-170px;}
.about .cont2 .rotate-logo .border{animation: 40s circle_rotate linear infinite;}
.about .cont2 .rotate-logo .logo{position: absolute;left:0;top:0;width:100%;height:100%;}

.about .cont3{padding:var(--size150) 0;}
.about .cont3 .doc-tit{text-align:center;margin-bottom:var(--size150);}
.partners{margin:0 auto;max-width:1160px;}
.partners ul{display:flex;flex-wrap:wrap;margin:0 -10px;}
.partners ul li{width:33.3333%;padding:0 10px;margin-bottom:var(--size100);}
.partners ul li .logo{display:block;filter: grayscale(1);transition:.3s;}
.partners ul li .logo:hover{filter: grayscale(0);} 
.partners ul li .logo.st2{opacity:.4;}
.partners ul li .logo.st2:hover{opacity:1;}

.partners ul li .logo .pic {position:relative; /* padding-bottom:28.5%; */ overflow:hidden;padding-bottom:22.06%;}
.partners ul li .logo .pic img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}

.doc-tit2{margin-bottom:var(--size100);text-align:center;font-size:var(--fz80);line-height:1.2em;font-weight:600;color:var(--snd);}

.about .content.cont4{padding:var(--size150) 0;background-color: #f9f9f9;}
.about .content.cont4 .doc-tit2{color:var(--dark);}
.history-wrap {position:relative;}
.history-wrap:before {top:0; bottom:0; position:absolute; left:var(--history-year-width); width:1px; background-color:#ddd; content:"";}
.history-item {padding-bottom:var(--size100); display:flex; align-items:initial;}
.history-item:last-child {padding-bottom:0;}
.history-item .history-year {position:relative; top:0; left:0; width:var(--history-year-width); color:#242424; font-size:var(--fz28); line-height:1.4em; letter-spacing:-.03em; text-align:right; display:flex; justify-content:space-between;}
.history-item .history-year strong {line-height:.3em; display:inline-block; transition:all 0.5s ease; font-weight:500; flex:1;padding-right:100px;}
.history-month-box {padding-left:105px; flex:1;}
.history-detail {margin-bottom:10px; display:flex; font-size:var(--fz18);font-weight:500; transition:all 0.5s ease;}
.history-detail:last-child {margin-bottom:0;}
.history-detail.line-h {line-height:2em;}
.history-item.active .history-year {font-size:var(--fz60);}
.history-item.active .history-year strong {font-weight:700;}
.history-item.active .history-detail {font-weight:700;color:var(--dark);}
.history-item.active .history-month-item {color:#242424;}
/* .history-item .dots {width:10px; height:10px; top:2px; right:-5px; margin:0; position:relative; border:2px solid #000; background:#fff; border-radius:50%; transition:all 0.3s; z-index:0;}
.history-item .dots .inner-dots {width:100px; height:100px; position:absolute; background:rgba(255,106,79,.1); border-radius:100%; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; transition:all 0.3s;}
.history-item .dots .inner-dots:after {width:60px; height:60px; display:block; content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; background:#ff6a4f; border-radius:100%; transition:all 0.5s;opacity:.3;}
.history-item.active .dots .inner-dots {transform:translate(-50%,-50%) scale(1); animation:ani .5s forwards ease; animation-delay:.05s;}
.history-item.active .dots .inner-dots:before {width:40px; height:40px; display:block; content:""; background:#fff; position:absolute; left:50%; top:50%; border-radius:100%; border:10px solid #ff6a4f; animation:ani .5s forwards ease; animation-delay:.02s;}
.history-item.active .dots .inner-dots:after {animation:ani .5s forwards ease; animation-delay:.08s;}
@keyframes ani {
	0% {transform:translate(-50%,-50%) scale(0);}
	100% {transform:translate(-50%,-50%) scale(1);}
} */

/* 타임라인 닷 애니메이션 - 활성화(active) 상태에서만 작동 */

.history-item .dots {
  width: 10px; 
  height: 10px; 
  top: 2px; 
  right: -5px; 
  margin: 0; 
  position: relative; 
  border: 1px solid rgba(0, 0, 0, 0.3); /* 테두리 투명도 증가 */
  background: #fff; 
  border-radius: 50%; 
  transition: all 0.3s; 
  z-index: 2;
}

.history-item .dots .inner-dots {
  width: 100px; 
  height: 100px; 
  position: absolute; 
  background: rgba(255, 106, 79, 0.25); /* 배경색 진하게 */
  border-radius: 100%; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%) scale(0); /* 초기 상태에서는 보이지 않음 */
  z-index: -1; 
  /* 비활성 상태에서는 애니메이션 없음 */
}

.history-item .dots .inner-dots:after {
  width: 60px; 
  height: 60px; 
  display: block; 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%) scale(0); /* 초기 상태에서는 보이지 않음 */
  z-index: -1; 
  background: rgba(255, 106, 79, 0.4); /* 진한 색상으로 변경 */
  border-radius: 100%; 
  opacity: 0.6; /* 투명도 감소 = 더 진하게 */
  /* 비활성 상태에서는 애니메이션 없음 */
}

/* 활성화 상태일 때만 스타일 및 애니메이션 적용 */
.history-item.active .dots {
  border-color: rgba(255, 106, 79, 0.6); /* 테두리 색상 변경 */
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 106, 79, 0.3); /* 그림자 추가 */
}

.history-item.active .dots .inner-dots {
  transform: translate(-50%, -50%) scale(1); /* 활성화 시 표시 */
  animation: dotWave 3s infinite; /* 활성화 시에만 애니메이션 시작 */
}

.history-item.active .dots .inner-dots:before {
  width: 40px; 
  height: 40px; 
  display: block; 
  content: ""; 
  background: rgba(255, 255, 255, 0.9); /* 반투명 배경 */
  position: absolute; 
  left: 50%; 
  top: 50%; 
  border-radius: 100%; 
  border: 6px solid rgba(255, 106, 79, 0.8); /* 테두리 두께, 진하게 */
  transform: translate(-50%, -50%) scale(0);
  animation: dotCore 3s infinite; /* 활성화 시에만 애니메이션 */
  z-index: 1;
}

.history-item.active .dots .inner-dots:after {
  animation: dotPulse 3s infinite; /* 활성화 시에만 애니메이션 */
  background: rgba(255, 106, 79, 0.5); /* 더 진한 색상 */
}

/* 파동 애니메이션 키프레임 */
@keyframes dotWave {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0.9; /* 시작 시 더 진하게 */
  }
  70% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.5; /* 중간에도 더 진하게 */
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0; /* 완전히 사라짐 */
  }
}

@keyframes dotCore {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes dotPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0.8; /* 시작 시 더 진하게 */
  }
  70% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.4; /* 중간에도 더 진하게 */
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.contact-btn{position: absolute;left:50%;bottom:50px;margin-left:-64px;display:flex;justify-content:center;align-items:center;margin-top:0;}
.contact-btn a{display:block;position:relative;}
.contact-btn a:before{content:'';position: absolute;left:50%;top:-10px;margin-left:-64px;width:128px;height:40px;background:url('/images/sub/contact-txt2-w.png')no-repeat 50% 50%/contain;transform:rotate(4deg);}
.contact-btn a lord-icon{width:153px;height:90px;}

#wrapper.wrap_st2{padding-top:100px;}
.work{padding-top:100px;max-width:1200px;margin:0 auto;}
.work .title{margin-bottom:var(--size80);color:var(--pri);font-size:var(--fz126);font-weight:700;text-align:center;letter-spacing:0;line-height:1.2em;}
.work .list-area{position:relative;}
.work .cate{position:absolute;left:0;top:0;}
.work .cate ul li{margin-bottom:15px;}
.work .cate ul li:last-child{margin-bottom:0;}
.work .cate ul li a{display:inline-block;line-height:1.3em;font-size:var(--fz22);font-weight:500;letter-spacing:0;color: #ababab;}
.work .cate ul li.active a{font-weight:700;color:var(--pri);}
.work .list ul{display:flex;flex-wrap:wrap;flex-direction:row-reverse;margin:0 -30px;padding-bottom:0;}
.work .list ul li{width:50%;padding:0 30px;line-height:1.3em;}
.work .list ul li:nth-child(even){transform:translateY(300px)}
.work .list ul li .img{position:relative;}
.work .list ul li .pic {position:relative; height:0; /* padding-bottom:67.166%; */padding-bottom:52.633%; overflow:hidden;}
.work .list ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover;filter: grayscale(1);transition: all 0.5s;filter: grayscale(1);}
.work .list ul li a:hover .pic img{filter: grayscale(0);transform:translateY(-50%) rotate(-3deg) scale(1.1);} 

.work .list ul li .tt-wrap{padding-top:var(--size40);min-height:300px;}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px;}
.tags .tag{display:inline-flex;align-items:center;height:30px;padding:0 15px;background-color: #000;line-height:1em;font-size:var(--fz16);font-weight:500;letter-spacing:0;color: #fff;}
.work .list ul li .tit{font-size:var(--fz28);font-weight:700;color:var(--dark);line-height:1.3em;display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100%;}
.work .list ul li .tt{margin-top:5px;color: #686868;line-height:1.6em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.work .list ul li.no-margin .tt-wrap{min-height:auto;}
.work .more{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin:var(--size100) auto 0;width:260px;height:64px;border-radius:32px;background-color:var(--pri);color: #fff;font-size:var(--fz32);line-height:1.2em;font-weight:600;transition:.3s;}

.work .more:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 100, 72, 0.35);
  border-color: rgba(255, 255, 255, 0.3);
}

.work .more:hover:before {
  background-position: 0 0;
  transform: scale(1.1);
}

.work-view .wide-img {position:relative;margin-bottom:var(--size100);height:calc(100vh - 100px);overflow:hidden;}
.work-view .wide-img .pic img{position: absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform:scale(1.09);-ms-transform:scale(1.09);-moz-transform:scale(1.09);-webkit-transform:scale(1.09);-o-transform:scale(1.09);transition: all 2s ease-out 0s;transition-delay: 0.1s;}
.work-view .wide-img.load .pic img{transform:scale(1);-ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1);}
.work-view .content .detail-group{display:flex;}
.work-view .content .left{width:520px;margin-right:var(--size80);}
.work-view .content .left .tags{margin-bottom:var(--size30);}
.work-view .content .left .tit{font-size:var(--fz52);font-weight:700;color:var(--dark);line-height:1.19em;}
.work-view .content .left .tt{margin-top:var(--size30);}
.work-view .content .left .sub-img{margin-top:var(--size80);}
.work-view .content .detail{min-width:0;width:1%;flex:1 1 auto;}
.doc-controls{margin-top:var(--size80);display:flex;justify-content:space-between}
.doc-controls .arr{display:flex;justify-content:center;align-items:center;}
.doc-controls .arrs{display:flex;margin:0 -60px;}
.doc-controls .arrs .col{position:relative;padding:0 60px;}
.doc-controls .arrs .col:after{content:'';width:1px;height:40px;background-color: #ddd;position: absolute;right:0;top:50%;transform:translateY(-50%);}
.doc-controls .arrs .col:last-child:after{display:none;}


#wrapper{overflow:hidden;position:relative;}
#wrapper.black{background-color: #000;}
.service .visual{display:flex;justify-content:center;align-items:center;height:100vh;margin-bottom:var(--size100);}
.service .visual .circle {display: block;position: relative;  max-width: 620px;width: 100%;aspect-ratio: 1 / 1;margin: 0 auto;border-radius: 50%;}
.service .visual .circle .tit {position: absolute;top: 50%;left: 50%;width: 200%;text-align: center;font-size: var(--fz126);font-weight: 700;color: var(--pri);line-height: 1.03em;opacity: 0;transform: translate(-50%, -50%) translateY(20px);animation: fadeInUpCon .5s ease-out .5s forwards;z-index:3;}
.service .visual .circle .circle-border {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;border: 3px solid #fff;border-top-color: #fff;animation: drawCircle .1s ease-out forwards;}
.service .visual .circle .outer-circle {position: absolute;border: 2px solid #fff;border-radius: 50%;opacity: 0;transform: scale(0.5);}
.service .visual .circle .outer1 {width: 130%;height: 130%;top: -15%;left: -15%;animation: expandOuter .1s ease-out .5s forwards;}
.service .visual .circle .outer2 {width: 160%;height: 160%;top: -30%;left: -30%;animation: expandOuter .1s ease-out 1s forwards;border-width:1px;}

.ani-circle{position:absolute; left:50%; top:50%; /* margin-top: -40rem; margin-left: -40rem; */ width: 80rem; height: 80rem; opacity: 0; transition: opacity 0.8s;/* transform: translateZ(0);-webkit-transform: translateZ(0); */will-change:transform,opacity;transform: translate(-50%, -50%) translate3d(0, 0, 0);backface-visibility:hidden;;}
.ani-circle.load{opacity:1;}
.ani-circle > span {border:0.2rem solid rgba(255, 255, 255, 0.3) ; border-radius: 50%; animation-fill-mode: both; position: absolute; left: 0; top: 0px; opacity: 0; margin: 0; width: 100%; height: 100%; animation: circle-effect 5s ease-in infinite;transform:translate3d(0, 0, 0);-webkit-transform: translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;    will-change: transform, opacity;-webkit-animation: circle-effect 5s ease-in-out infinite;}
.ani-circle > span:nth-child(2) {animation-delay: 1s;}
.ani-circle > span:nth-child(3) {animation-delay: 2s;}
.ani-circle > span:nth-child(4) {animation-delay:3s;}
.ani-circle > span:nth-child(5) {animation-delay:4s;}

@keyframes circle-effect {
	0% {transform: scale(0); opacity: 0.5;}
	50% {opacity: 1.0;}
	100% {transform: scale(1); opacity: 0; }
}

/* 카카오톡 인앱브라우저에서 애니메이션 비활성화 */
.kakao-inapp-disable-animation .ani-circle > span {
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    -webkit-transform: scale(0) !important;
}

/* 또는 완전히 숨기고 싶다면 */
.kakao-inapp-disable-animation .ani-circle {
    display: none !important;
}

/* WebKit용 키프레임 추가 */
@-webkit-keyframes circle-effect {
    0% {
        -webkit-transform: scale(0) translateZ(0);
        transform: scale(0) translateZ(0);
        opacity: 0.5;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -webkit-transform: scale(1) translateZ(0);
        transform: scale(1) translateZ(0);
        opacity: 0;
    }
}

/* 애니메이션 키프레임 */
@keyframes drawCircle {
  0% {border-color: transparent;border-top-color: #fff;transform: rotate(0deg);}
  100% {border-color: #fff;transform: rotate(360deg);}
}

@keyframes expandOuter {
  to {transform: scale(1);opacity: 1;}
}

@keyframes fadeInUpCon {
  to {opacity: 1;transform: translate(-50%, -50%) translateY(0);}
}

.toggle{max-width:1000px;margin:0 auto;}
.toggle>ul>li{border-bottom:1px solid #666;}
.toggle>ul>li .title a{display:flex;align-items:center;position:relative;/* padding:0 30px; */height:100px;font-size:var(--fz32);line-height:1em;color: #fff;}
.toggle>ul>li .title a:after{content:'';position: absolute;right:0;/* right:30px; */top:50%;margin-top:-8px;width:29px;height:16px;background:url('/images/sub/service-drop.png')no-repeat 100% 50%/contain;transition:.3s;}
.toggle>ul>li .cnt{display:none;padding-bottom:var(--size70);text-align:center;}
.toggle>ul>li .cnt .tit{margin-bottom:var(--size30);font-size:var(--fz42);font-weight:600;color:var(--pri);line-height:1.2em;}
.toggle>ul>li .cnt .tt{margin-bottom:var(--size50);font-size:var(--fz20);color: #fff;line-height:1.40em;}
.toggle>ul>li.active .title a:after{transform:rotate(180deg);}
.process>ul{display:flex;justify-content:space-between;margin:0 -30px;}
.process>ul>li{position:relative;text-align:center;padding:0 30px;width:25%;}
.process>ul>li:after{content:'';position: absolute;right:-11px;top:56.5px;width:22px;height:30px;background:url('/images/sub/service-arr.png')no-repeat 50% 50%/contain;}
.process>ul>li:last-child:after{display:none;}
.process>ul>li .ic{display:flex;justify-content:center;align-items:center;width:140px;height:140px;margin:0 auto 25px;border:2px solid var(--pri);border-radius:100%;}
.process>ul>li .ic img{height:70px;}
.process>ul>li p{color: #fff;font-size:var(--fz20);line-height:1.5em;font-weight:600;}
.process.x5>ul>li{width:20%;}

.location{padding:var(--size100) 0;}
.location .contain{max-width:1230px;}
.location .title{margin-bottom:30px;font-size:var(--fz60);line-height:1.1em;color:var(--pri);}
.location .info{display:flex;margin-bottom:30px;gap:200px;}
.map-sizer {max-width:800px;width:100%;margin:0 auto;}
.location .info dl dt{margin-bottom:10px;font-size:var(--fz24);font-weight:700;color:var(--pri);line-height:1.4em;}
.location .info dl dd{font-size:var(--fz20);line-height:1.5em;color:var(--dark);font-weight:500;}


/* 안드로이드 기기 추가 최적화 */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .about .content {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    /* 시간 카운터 성능 최적화 */
    .time-acc {
        will-change: auto;
        transform: translateZ(0);
    }
    
    /* 회전 로고 성능 최적화 */
    .about .cont2 .rotate-logo .border {
        will-change: transform;
        transform: translateZ(0);
    }
}