@charset "utf-8";

/* 반응형일때 핵심 수정 */
br.mobile480 { display: none;} /*모바일버전 480일때 br*/

/*메인슬라이드 애니*/
.serV-wrap { position: relative; }
.compV {position: relative; width: 100%;min-height: 950px;background: url(/theme/uriwon/img/portfolioV.png) center top no-repeat;background-size: cover; }
.compV img { width: 100%;height: 100%;}
.khwrap.container { padding: 100px 0;}

.compV .swiper-slide:not(.swiper-slide-active) [data-aos]:not(.aos-animate) { opacity: 0 !important; transform: translate3d(0,100px,0) !important; }
.compV .swiper-slide.swiper-slide-active [data-aos].aos-animate { opacity: 1 !important; transform: translateZ(0) !important; }
.serV-form { position: absolute;left: 50%;top: 88%;margin-left: -80px; background: #fff;border-radius: 30px;font-size: 16px;color: #39D66D;font-weight: 600;width: auto;height: 45px;line-height: 45px;text-align: center;transition: transform 0.3s ease, background 0.3s ease;padding: 0 25px;}
.serV-form a { color: #39D66D;width: 100%;height: 100%;display: inline-block;}
.serV-form:hover { background: #111;transform: translateY(-8px);box-shadow: 0px 0px 30px rgba(0,255,84,0.4);}

/*서브상단비주얼*/
.compVT-wrap { position: absolute;left: 13%;top: 50%; transform: translate( 0, -50%); }
.compVT-wrap h3 { font-size: 65px;color: #fff;text-transform: uppercase;font-family: 'Paperlogy';}
.compVT-h3 { font-size: 20px;color: rgba(255,255,255,0.6);text-transform: uppercase;font-family: 'Paperlogy';}
.compVT-wrap .compVT-title { font-size: 60px;color: #fff;padding-top: 100px;}
.compVT-wrap .compVT-title span { display: block;}
.compVT-txt { font-size: 20px;color: rgba(255,255,255,0.8);margin-top: 10px;line-height: 150%;}
.compV img { width: 100%;height: 100%;} img { width: 100%;height: 100%;}


/* about */
.about-dot { text-align: center; position: relative;}
.about-dotline { width: 2px;height: 80px;;background:linear-gradient(rgba(57,214,109,1), rgba(57,214,109,0.0));margin: 0 auto;}
.adot-main { font-size: 24px; color: #39D66D;font-weight: 700;padding-top: 10px;padding-bottom: 30px;font-family: 'Paperlogy';/*text-transform: uppercase;*/}
.adot-sub { font-size: 60px; color: #fff;font-weight: 700;}
.adot-sub span.light { font-weight: 300;}
.adot-txt { font-size: 20px;color: #F5F5F5;padding-top: 10px;}
.adot-txt p { font-weight: 200;line-height: 150%;}

/*타이틀*/
.comp-txt { font-size: 50px;font-weight: 700;color: #111;}
.comp-txt span { font-weight: 300;}


.proSystem-wrap {  position: relative; padding: 100px 0; clear: both; background: linear-gradient(to bottom, #000000, #00270D); }
.proSystem-top { display: flex; justify-content: space-between; margin: 80px 0;}
.proSystem-top .left { position: relative; width: 37%; }
.proSystem-top .left::before { content: ''; position: absolute;left: -40px;top: 7px;background: url('../../../../img/proSystem-ic1.png') right bottom no-repeat;width: 69px;height: 69px;z-index: 100;}
.proSystem-top .left::after { content: ''; position: absolute;right: 90px;bottom: 20px;background: url('../../../../img/proSystem-ic2.png') right bottom no-repeat;width: 69px;height: 69px;z-index: 100;}
.proSystem-top .left p { position: absolute; width: 100%;  }
.proSystem-top .left p span {  display: flex; align-items: center; justify-content: center; width: 380px; height: 72px; border-radius: 40px; font-weight: 600; font-size: 24px;}
/* 중앙 화살표 라인 */
.proSystem-top .center { flex: 1; display: flex; justify-content: center; align-items: center; margin-right: 7%;}
.proSystem-top .center .line { width: 160px; height: 2px; background: linear-gradient(to left, rgba(255,255,255,0.8), rgba(255,255,255,0.0));position: relative; }
.proSystem-top .center .line::after { content: ''; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; background: #fff; border-radius: 50%;}

.proSystem-top .left .item-1 { top: 0; left: 0; z-index: 3; transform: rotate(3deg);}
.proSystem-top .left .item-1 span { background: #39D66D; color: #000; }
.proSystem-top .left .item-2 { top: 70px; left: 0px; z-index: 222; transform: rotate(-3deg);}
.proSystem-top .left .item-2 span { background: #fff; color: #000; }
.proSystem-top .left .item-3 { top: 145px; left: 0px; z-index: 1; transform: rotate(1deg);}
.proSystem-top .left .item-3 span { background: rgba(17,17,17,0); border: 1px solid rgba(255,255,255,0.4); color: #39D66D; }

/* 오른쪽 메시지 박스 */
.proSystem-top .right { width: 46%; height: 230px; background: #fff url('../../../../img/proSystem-img1.png') right bottom no-repeat; border-radius: 40px; display: flex; align-items: center; padding-left: 50px;}
.proSystem-top .right .msg-box { color: #333; line-height: 1.5; font-size: 24px; }
.proSystem-top .right .msg-box strong { color: #000; font-weight: 800; }

/* 하단 텍스트 */
.proSystem-bottom { padding-top: 60px; }
.proSystem-bottom .tac { position: relative;z-index: 100; font-size: 40px; font-weight: 600; word-break: keep-all; letter-spacing: -1px;color: rgba(255,255,255,0.8);}

/*proProduct-wrap*/
.proProduct-wrap { clear: both; background: url(../../../../img/proSystem-arrow.png) center top no-repeat;padding-top: 300px;}
.proProduct-wrap .adot-sub { padding-top: 20px;} 
.proProduct-wrap .about-dot { position: sticky; top: 0;  z-index: 1; padding-top:100px; margin-bottom: 50px; text-align: center;}

/*slide stack*/
.stack-outer { overflow: clip; padding: 0 24px 40px;}
.stack-section { position: relative;margin: 0px 0 0 0;padding-bottom: 20vh;z-index: 10;}
.card-block { position: -webkit-sticky !important; position: sticky !important; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start;}
.card-scroll-space { height: 100vh; width: 100%; }
.card { border-radius: 28px; padding: 56px 120px; display: grid; gap: 40px; align-items: center; min-height: 460px; position: relative; overflow: hidden; box-shadow: 0 0px 20px rgba(0,0,0,0.2); transform: translateY(60px); opacity: 0; transition: transform 0.75s cubic-bezier(0.22,1,0.36,1), opacity 0.6s ease;}
.card.in-view { transform: translateY(0); opacity: 1;}
/*slide stack 배경색 */
.card-block:nth-child(1) .card { background: url(../../../../img/stack-slide1.png) center top no-repeat; }
.card-block:nth-child(2) .card { background: url(../../../../img/stack-slide2.png) center top no-repeat; }
.card-block:nth-child(3) .card { background: url(../../../../img/stack-slide3.png) center top no-repeat; }
.card-block:nth-child(4) .card { background: url(../../../../img/stack-slide4.png) center top no-repeat; }

/* slide stack 하이라이트 */
.card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 25%, rgba(200,160,255,0.18) 0%, transparent 55%); pointer-events: none;
  border-radius: 28px;}
.card-text { z-index: 1; }
.badge { width: 48px; height: 48px; border-radius: 50%; background: rgba(17,17,17,0.95); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;  margin-bottom: 22px;float: left; color: #39D66D;font-family: 'Paperlogy';margin-right: 10px;}
.card-text h3 { font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 18px;color: #111;}
.card-text p { clear: both; line-height: 150%;}
.card-text p:nth-of-type(1) { font-size: 20px;color: #111;font-weight: 600;}
.card-text p:nth-of-type(2) { font-size: 20px;color: rgba(17,17,17,0.75);font-weight: 400;}
.card-text p a { border-radius: 30px;background: #111;color: #fff;height: 43px;line-height: 43px;padding: 0 20px;font-size: 16px;display: inline-block;}
.card-text p a:hover { background: #39D66D;color: #111;}
.card-visual { z-index: 1; position: relative; height: 120px; display: flex; align-items: center; justify-content: space-around;background: rgba(57,214,109,0.95);border-radius: 20px;}
.card-box { position: relative;}
.card-box::after { content: '';left: 100%;top: 0; width: 1px;height: 100%;background: #111;position: absolute;margin-left: 24%;}
.card-box:last-child:after { content: '';background: none;}
.card-box span { display: block;}
.card-box span:first-child { font-size: 20px;font-weight: 900;color: rgba(17,17,17,0.5);}
.card-box span:last-child { font-size: 28px;font-weight: 700;color: rgba(17,17,17,1);}
#wrapper:has(.stack-outer) {overflow-x: clip !important;overflow-y: visible !important;}
/* body, html도 이 페이지에서만 재정의 260511 중요포인트*/
body:has(.stack-outer) { overflow-x: clip !important; overflow-y: visible !important;}
html:has(.stack-outer) {overflow-x: clip !important; overflow-y: visible !important;}



/* The Difference*/
.proDiffer-wrap { background: url(../../../../img/proDiffer-back.png) center top no-repeat; padding: 100px 0;  color: #fff; overflow: hidden;background-size: cover;}
.proDiffer-wrap .about-dot { text-align: left;}
.proDiffer-box { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-top: 100px; position: relative;}
.diff-item { flex: 0 0 31%; background: #000; border-top: 1px solid rgba(78,78,78,0.9);border-right: 1px solid rgba(78,78,78,0.5);border-left: 1px solid rgba(78,78,78,0.5); border-radius: 15px; padding: 20px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);    position: relative;  z-index: 2;text-align: center;}
.diff-item:nth-child(1) { margin-top: 0; }      /* 첫 번째: 가장 높음 */
.diff-item:nth-child(2) { margin-top: 60px; }     /* 두 번째: 중간 */
.diff-item:nth-child(3) { margin-top: 120px; }    /* 세 번째: 가장 낮음 */
.diff-item:hover { background: #39D66D; transform: translateY(-15px); border-color: #39D66D; box-shadow: 0 20px 40px rgba(57,214,109,0.1);}
.diff-item:hover .txt { color: #000; font-weight: 700;}
.diff-item .txt { display: inline-block; padding-top: 30px; padding-bottom: 10px; font-size: 24px;line-height: 130%;}
.proDiffer-wrap .adot-sub b { font-weight: 600;}

/*proContact-Wrap*/
.proContact-Wrap {background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,39,13,1));position: relative;min-height: 900px;}
.proContact-Wrap .about-dot { text-align: left; }
.proContact-body { display: flex;margin-top: 50px;}
.proCont-left { flex: 1.5;padding-top: 20px;}
.proCont-left b { font-weight: 600;}
.proCont-left .txt { font-size: 20px;color: #F5F5F5;padding: 25px 0 0 0;font-weight: 300;}
.proContact-body .media { background: #fff;border-radius: 20px; width: 80%;flex: 1;overflow: hidden;}
.proContact-body .media span { display: flex; align-items: center; justify-content: center; min-height: 360px; height: 100%; width: 100%; font-size: 24px;}
.proContact-body .media span video { width: 100%;height: 100%;object-fit: cover;}
.proContact-case { text-align: left; width: 100%;margin-top: 40px;}
.proContact-case .main-title { color: #fff;  font-size: 32px; font-weight: 700; margin-bottom: 30px;}
.proContact-case .main-title br { display: none;}
.button-container { display: flex; gap: 15px;}
.proContact-case .btn { flex: 1; display: flex; align-items: center; padding: 50px 35px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius:20px; color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 18px; transition: all 0.3s ease; position: relative;height: 100px;}
.proContact-case .btn:hover { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.9); color: #fff;}
.proContact-case .icon { margin-right: 10px; font-size: 18px;}
.proContact-case .arrow { margin-left: auto; font-size: 20px; font-weight: 300;}






/****************************************************************************************/
/****************************************************************************************/
/*Media Query*/
/****************************************************************************************/
/****************************************************************************************/


@media (max-width: 1024px) {
  .compVT-wrap h3 { font-size: 45px;}
  .compVT-wrap .compVT-title { font-size: 24px;padding-top: 50px;}
  .compV { width: 100%;min-height: 550px;}

  .serWeb-title {font-size: 20px;}
  .adot-main { font-size: 20px;}
  .adot-sub { font-size: 45px;}

  .proSystem-top .left { width: 30%}
  .adot-txt { font-size: 18px;}

  .card { border-radius: 28px; padding: 60px;min-height: 320px;gap: 20px;}

}




@media (max-width: 768px) {
  .proDiffer-box { flex-direction: column; align-items: center;padding-top: 50px;}
  .diff-item { flex: 0 0 100%; margin-bottom: 30px; margin-top: 0 !important; }  
  .compMember-container { display: grid; grid-template-columns: repeat(2, 1fr); }

  .serWeb-title {font-size: 16px;}
  .adot-main { font-size: 16px;}
  .adot-sub { font-size: 30px;}

  .proSystem-top { display: block; margin-top: 40px;}
  .proSystem-top .left { width: 100%;height: 250px;}
  .proSystem-top .left::before { content: '';left: -20px;top: -20px;}
  .proSystem-top .left::after { content: '';right: -20px; bottom: 0px;}
  .proSystem-top .center { display: none;}
  .proSystem-top .right { width: 100%;height: 170px; padding-left: 30px;background: #f6feff url(../../../../img/proSystem-img1.png) 0 bottom no-repeat;
        background-size: contain;}
  .proSystem-top .left p span { width: 100%;}
  .proSystem-bottom .tac {font-size: 24px; }
  .proProduct-wrap {background-size: contain;padding-top: 50px;}

  .adot-sub { font-size: 24px;}
  .adot-txt { font-size: 16px;}

  .proContact-body { display: block;margin-top: 10px;}
  .proContact-body .media { margin-top: 20px;width: 100%;}

  .card { border-radius: 28px; padding: 40px;}
  .card-visual {height: 80px;}
  .card-box span:last-child { font-size: 20px;}
  .card-box::after { margin-left: 50%; background: none; }
  .card-text h3 { font-size: 30px;margin-bottom: 10px;}
  .badge { width: 36px; height: 36px;font-size: 18px;margin-bottom: 5px;}
  .card-text p { line-height: 120%;}
  .stack-outer { padding: 0 0px;}
  .proSystem-top .right .msg-box { line-height: 1.2;font-size: 20px;}
  .proCont-left { padding-top: 0px;}
  .proCont-left .txt { font-size: 16px;padding: 10px 0 0 0; font-weight: 300;}

  .proContact-body .media span { min-height: auto;}

  .proDiffer-wrap .adot-main { padding-bottom: 10px;}

}

@media (max-width: 480px) {
    br.mobile480 { display: block;} /*모바일버전 480일때 br*/
    br.mobile480.inline { display: none;} /*모바일 핼때 inline*/ 

  .compVT-wrap { left: 10px;}
  .compVT-wrap h3 {font-size: 36px;}
  .compVT-wrap .compVT-txt {font-size: 16px; padding-top: 5px;}

  .proSystem-bottom .tac {font-size: 20px; }
  .diff-item .txt { font-size: 20px;}

  .card { border-radius: 20px; padding: 20px;min-height: 360px;}
  .card-text { margin-top: 0;}
  .card-text p:nth-of-type(2) { font-size: 16px;}
  .card-text h3 {margin-bottom: 0px;}
  .card-scroll-space { margin-top: 30px;}
  .card-visual { display: block;border-radius: 10px;padding: 10px;height: auto;}
  .card-box { padding:2px 10px;}
  .card-box span { display: inline; font-size: 16px !important; line-height: 120%;}
  .card-box span:first-child { font-weight: 400;}
  .card-box span:first-child::after {content: '-';display: inline-block;}

  .proContact-case .main-title br { display: block;}
  .button-container { display: block;}
  .button-container a { margin-bottom: 5px;}

  .proProduct-wrap .adot-txt p,
  .proProduct-wrap .adot-sub { letter-spacing: -1px;}

  .proContact-case .btn {height: 65px;padding: 30px 35px;border-radius: 10px;}

}

@media (max-width: 360px) {    
  .compVT-wrap { left: 10px;}
  .proProduct-wrap .adot-sub { font-size: 22px;}
  

}