/* common */
h2{font-weight: 600;}
h3{font-weight: 600;}
h4{font-weight: 600;}
strong{font-weight: 500;}
i{vertical-align:baseline;  } 
.blind { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; }   
.inner{position:relative; width:90%; max-width:1280px; margin:0 auto;} 
  
/* btns */
.btns button,
.btns a{display:inline-block;border:1px solid rgba(255,255,255,0.2); font-size: 14px; padding:10px 18px; border-radius:50px; transition:all ease .35s; backdrop-filter: blur(10px); white-space: nowrap;}
.btns button i,
.btns a i{transform:rotate(-45deg);}
.btns button:hover,
.btns a:hover{background:rgba(255,255,255,0.1);}
.disabled .btns button{background:rgba(255,255,255,0.05); color: #888; cursor:inherit;}

 
/* section common */
.section-wrap{padding:160px 0;}
.section-wrap + .section-wrap{padding-top: 40px;}
.sub .section-wrap:last-child:not(.section-solution){ background-image: linear-gradient(0deg, #090909, transparent);}
.sub .section-wrap:last-child{padding-bottom: 200px;}
.sec-title{margin-bottom: 40px;} 
.sec-title h3{font-size: 40px; line-height: 1.3;}
.sec-title p + h3{margin-top: 10px;}
.sec-title .more{float:right; margin-top: -30px;}

.flex-title{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; } 
.flex-title > p{color: #888;  margin-bottom: 36px;}

.paging{text-align: center; display:flex; justify-content:center; align-items:center; margin-top: 80px; gap:10px;}
.paging a{display:inline-block; width: 30px; height: 30px; display:flex; align-items:center; justify-content:center; opacity:0.3; font-weight: 300;}
.paging a.on{opacity:1;}


/************************************************ header ************************************************/ 
body:has(.ai-program) .header .gnb li:nth-child(1),
body:has(.cride-program) .header .gnb li:nth-child(2) a,
body:has(.cride-module) .header .gnb li:nth-child(3) a,
body:has(.consulting-museum) .header .gnb li:nth-child(4) a,
body:has(.support) .header .gnb li:nth-child(5) a{color: #fff;}



/************************************************ footer ************************************************/ 
.footer {position:relative; padding-top: 80px; background: #090909; padding-bottom:400px; font-size: 15px; border-top:1px solid rgba(255,255,255,0.1);}
.footer .ft-bg{position:absolute; left:0; bottom:0; z-index:1;width:100%; height:100%; background: url('/images/footer-bg.jpg') no-repeat center bottom / cover; opacity:0;}
.footer .flex{display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:2;}
.footer .flex + .flex{margin-top: 40px;}
.footer .flex:first-child{z-index:3;}
.footer .family-site {position:relative;}
.footer .family-site i{font-size: .8em;}
.footer .family-site.active ul{display:block;}
.footer .family-site.active > a i{transform:rotate(180deg);}
.footer .family-site > a{display:flex; justify-content:space-between; align-items:center; width: 200px; padding:0 24px; border:1px solid rgba(255,255,255,0.2); border-radius:50px; height:50px; line-height: 50px;}
.footer .family-site ul{position:absolute; top:50px; padding:  24px 0; background:#000; border-radius:16px; width: 100%;   display:none;} 
.footer .family-site ul li a{display:block; padding:2px 24px; color: #888;}
.footer .family-site ul li a:hover{color: #fff;}
.footer p{color: #888;}
.footer p span{margin-right: 10px;}
.footer .copy{display:block; font-size: 14px; margin-top: 5px; color:#555;}
.footer .policy-btn{display:flex; gap:20px; color: #888;}
.footer .policy-btn a:last-child{color: #fff;}



/************************************************ main ************************************************/ 
.section-visual{width:100%; height:100vh;  }
.section-visual .visual-bg{position:absolute; left:0; bottom:0; z-index:-1;width:100%; height:100%; background: url('/images/visual-bg.jpg') no-repeat center bottom / cover; animation: fadeIn 1s ease-in-out forwards;}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} 
.section-visual .inner{height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align: center;}
.section-visual .title{font-size: 20vw; line-height: 1; transform:translateY(3vw); user-select: none; background-image: linear-gradient(320deg, rgba(255, 255, 255, 0.2), transparent); background-clip: text; -webkit-background-clip: text; color: transparent; font-family:"Manrope"; font-weight: 700;}
.section-visual .search{width:100%; max-width:740px;  margin:0 auto; position:relative; z-index:2;} 
.section-visual .search textarea{background: transparent; border:1px solid rgba(255,255,255,0.2); border-radius:16px; padding:20px; height:140px; width: 100%; backdrop-filter: blur(10px); box-shadow:0 0 100px rgba(255,255,255,0.2);}
.section-visual .search textarea::placeholder{color:#888;}
.section-visual .search button{position:absolute; right:20px; bottom:20px; border-radius:50%; width: 36px; height: 36px; background: #fff; color: #000; transition:all ease .35s; display: flex; align-items: center; justify-content: center;}
.section-visual .search button:hover{background: rgba(255,255,255,0.5); color: #fff;}
.section-visual .text{position:absolute; width: 100%; bottom:30px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px;}
.section-visual .text p{ flex-grow: 1; text-align:left; color: #888;}
.section-visual .scroll-down{font-size: 1.1em; height: 44px; display: flex; align-items: center;}
.section-rnd{position:relative; padding:120px 0;  text-align: center; background: #090909; overflow:hidden;} 
.section-rnd .rnd-bg{width: 100%; height: 100%; position:absolute; left:0; top:0; background: url('/images/main-bn-bg.jpg') no-repeat center bottom / cover; z-index:1; }
.section-rnd .inner{z-index:2;}
.section-program{background: #090909;}
.section-universe{height:120vh; position:relative; display:flex; align-items:center; margin-bottom: 160px; }
.section-universe canvas{width: 100%; height: 100%; position:absolute; left:0; top:0; z-index:-1;  }
.section-universe .title{width: 100%;  margin:0 auto;   opacity:0;  display: flex ; flex-direction: column;   gap: 4vw;}
.section-universe .title > div{ font-size: 3.6vw; color: #fff; font-weight: 600; line-height: 1; white-space: nowrap;font-family:"Manrope"; }  
.section-universe .title > div.left{text-align:left; transform:translateX(3vw);}
.section-universe .title > div.right{text-align:right; transform:translateX(-3vw);}
 
/* layout */ 
.logic-list ul{display:flex; gap:16px; justify-content:space-between;}
.logic-list ul li{width: 33.33%;    }
.logic-list ul li a{padding:40px; height:100%;background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); display: flex;  flex-direction: column;  justify-content: space-between; gap:20px; transition:all ease .35s ;}
.logic-list ul li a:hover{background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2);}
.logic-list ul li a:hover button{background:rgba(255,255,255,0.1);} 
.logic-list p{color: #888;}
.logic-list h4{display:flex; align-items:center; gap:10px; font-size: 24px; margin-bottom: 20px;}
.logic-list .img canvas{width: 100%; height:250px;}
.logic-list .num{  width: 28px; height: 28px; font-size: 14px; background: rgba(255,255,255,0.1); display:inline-flex; align-items:center; justify-content:center; color: rgba(255,255,255,0.5);}
.logic-list .btns{margin-top: 20px; text-align: center;}
 
.program-list ul li a{position:relative;padding:70px 0; border-top:1px solid rgba(255,255,255,0.1); display:flex;   gap:80px; } 
.program-list ul li strong{font-size: 14px; background: url('/images/symbol.png') no-repeat left top 6px; padding-left: 20px; width: 120px; white-space:nowrap;}
.program-list ul li .thumb{position:relative;max-width:450px; width:40%; aspect-ratio: 1.8 / 1; overflow:hidden;}
.program-list ul li .thumb img{width: 100%; height: 100%; object-fit:cover; }
.program-list ul li .thumb > span{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color: #fff; background: #000; padding:0 6px; font-size: 1.2rem; font-weight: 500;}
.program-list ul li .text{ width:50%;     display: flex; flex-direction: column;  justify-content: space-between;}
.program-list ul li h4{  font-size: 24px; margin-bottom: 20px;}
.program-list ul li p{color: #888;}

.ai-program{overflow:hidden;}
.ai-program .program-list .thumb{ max-width:580px; aspect-ratio: 1.6 / 1; }




/************************************************ sub common ************************************************/
/* common */
.ref{color: #666; font-size: 14px; margin-top: 20px;}
.desc{color: #888; margin-bottom: 40px;}
.unit{text-align:right; color: #888;} 
.noti{color: #666; font-size: 14px; margin-top: 40px;}
.noti{text-indent: -10px; padding-left: 10px;}
 

/* wrap */  
.cride-module .line-chart {max-width: 1280px;height: 500px;  }  

/* section */ 
.section-process .sec-title{ display:flex; justify-content:space-between;}
.section-process .sec-title p{  margin-top: 20px;} 
 
.section-tabs .tab-menu { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 80px;} 
.section-tabs .tab-menu li a{display:block; padding:10px 20px; cursor:pointer; border-radius:50px; color: #888; border:1px solid rgba(255,255,255,0.2); transition:all ease .35s;}
.section-tabs .tab-menu li a.active{border-color: #fff; color: #fff;} 
.section-tabs .tab{ display: none;} 
.section-tabs .tab.active{ display: block;}
 
.section-solution {height: 100vh;position: relative; overflow:hidden;  display:flex; align-items:center; justify-content:center; background:url('/images/sub/solution-bg.jpg') no-repeat center center / cover;}     
.section-solution .horizontal {display: flex; height: 100%; gap:40px;  margin-top: 100px;}
.section-solution .horizontal > li {display:flex; flex-direction:column; flex-shrink: 0; padding: 0 5px;    width: 360px;  padding:  40px;  border:1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #fff; backdrop-filter: blur(10px); aspect-ratio:1;}
.section-solution .horizontal > li h4{font-size: 24px; margin-top: 10px;  }
.section-solution .horizontal > li .icon{   text-align:right; margin-top:auto;}
.section-solution .horizontal > li .icon img{ max-width:46px;  }
.section-solution .horizontal > li p{color: #888;}



.half-cont {display:flex; justify-content:space-between; align-items:center;  }
.half-cont .sec-title{width:45%;}
.half-cont .sec-title p:first-child{margin-bottom: 20px;}
.half-cont .sec-title p strong{font-weight: bold; color: #96adff;}
.half-cont .sec-title h3{margin-bottom: 20px;}
.half-cont .sec-title .btns{margin-top: 40px;}

.half-cont .battery-box{position:relative; z-index:1; width:50%;  border-radius:20px;     border: 1px solid rgba(255,255,255,0.1); overflow:hidden; aspect-ratio: 1.5 / 1; box-shadow: inset 0 0 32px 12px rgba(0, 0, 0, .75);}
.half-cont .battery-box video{width: 100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scale(1.2); opacity:.5; z-index:-1;}
.half-cont .battery-item{position:absolute; left:0; bottom:50px; width: 100%; text-align: center; z-index:1;}
.half-cont .battery-item p{color: #b6ebff; margin-top: 10px;}
.half-cont .battery { display: flex;border: 2px solid #b6ebff;width: 60px;height: 20px;border-radius: 4px;padding: 3px;box-sizing: border-box;position: relative; width: 100px; margin:0 auto;}
.half-cont .battery::after {content: '';position: absolute;right: -6px;top: 25%;width: 5px;height: 50%;background: #b6ebff;border-radius: 1px;}
.half-cont .battery .cell { margin: 0 2px;background-color: #b6ebff;  width: 7px;}
.half-cont .battery .blinking {  animation: blink 1s infinite;}

@keyframes blink {
  0%, 50%, 100% {
    background-color: #b6ebff;
  }
  25%, 75% {
    background-color: transparent;
  }
}



/* visual */ 
.cride-visual {position:relative; width:100%; height:100vh; }
.cride-visual:after{content:''; width:100%; height:100%; background-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6)); position: absolute;top: 0;left: 0;z-index: 1; opacity:.5;}
.cride-visual .content{position:absolute;  width:100%; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align: center; z-index:1;   opacity:0;} 
.cride-visual .cont01{ z-index:2;  }   
.cride-visual .cont01 .title{font-size: 60px; line-height: 1.3; }
.cride-visual .title{font-size: 46px;  }
.cride-visual .text{font-size: 20px; position:absolute; bottom:30px; left:0; width: 100%; z-index:2; color:rgba(255,255,255,0.7); text-align: center;  }
.cride-visual .visual-bg{position:absolute; left:0; top:0; width:100%; height:100%; background :#000; opacity:0; z-index:-1;  user-select: none;}   
.cride-visual #crideBgVideo{width: 100%; height: 100%; position:absolute;  left:0; bottom:0; object-fit:cover; z-index:-1; vertical-align:top; }
 

.sub-visual {position:relative; width:100%; }
.sub-visual .content{position:relative;  width:100%; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align: center; z-index:1; } 
.sub-visual .cont01{ z-index:2; opacity:0;}   
.sub-visual .cont01 .title{font-size: 60px; line-height: 1.3;}
.sub-visual .title{font-size: 46px;}
.sub-visual .text{font-size: 20px; position:absolute; bottom:30px; left:0; width: 100%; z-index:2; color:rgba(255,255,255,0.7); text-align: center; padding:0 50px;}
.sub-visual .visual-bg{position:absolute; left:0; top:0; width:100%; height:100vh; background :url('/images/visual-bg03.jpg') no-repeat left top / cover;   z-index:-1;  user-select: none; opacity:0;} 
.sub-visual .scroll-down{position:fixed; right:0; left:0; bottom:24px; margin:0 auto; text-align:right; width:100%; max-width:1280px; font-size: 24px;  }   
 
.support .sub-visual .sub-title,
.ai-program .sub-visual .sub-title{color: rgba(255, 255, 255, 0.5); margin-bottom: 20px; font-size: 1.1rem; display:block; font-weight: 300;}
.support .sub-visual .content,
.ai-program .sub-visual .content{align-items: flex-start; text-align:left;}
.support .sub-visual .text{text-align:left; font-size: inherit; left:0;  padding-left: 0;} 
.ai-program .sub-visual .text{text-align:left; font-size: inherit; left:50%; width: 50%;} 
.ai-program .visual-bg{  background :url('/images/visual-bg04.jpg') no-repeat right top / cover;  }  
.support .visual-bg{  background :url('/images/visual-bg06.jpg') no-repeat right top / cover;  }  
.consulting-museum .sub-visual .text{text-align:left; font-size: inherit; left:0; padding-left: 0;}
.consulting-museum .visual-bg{  background :url('/images/visual-bg05.jpg') no-repeat top center / cover;  }  


/* layout */
.process-list{font-size: 20px; color: #fff; margin-top: 80px;}
.process-list i{color:#888; }
.process-list ul{display:flex; justify-content:space-between; gap:12px; align-items:center;}
.process-list ul li{ text-align: center; padding:40px 20px; width: 25%; opacity:.4; cursor:pointer;}
.process-list ul li.active{opacity:1; filter: invert(16%) sepia(89%) saturate(6054%) hue-rotate(171deg) brightness(97%) contrast(113%);}
.process-list ul li strong{font-size: 20px; font-weight: 600;}   
.process-list ul li .icon{margin-bottom: 30px;}
.process-list .video-noti{ text-align: center;}
.process-list .video-noti p{display:inline-block; font-size: 14px; background: rgb(79 70 229 / 50%); color:rgb(255 255 255 / 70%); border-radius:50px; padding:7px 18px;}
.process-list .video-cont {margin-top: 40px;position: relative;width: 100%; aspect-ratio: 1.9 / 1;box-shadow: 0 0 40px rgba(79, 70, 229, .5);     border: 1px solid rgba(79, 70, 229, .5);}
.process-list .video-item {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  object-fit:cover;  opacity: 0;  transition: opacity 0.4s ease;  z-index: 0;  pointer-events: none; padding:3vw;}
.process-list .video-item {vertical-align:top;}
.process-list .video-item.video-item.active {  opacity: 1;  z-index: 1;}
.process-list .step-arrow {display: flex; }
.process-list .step-arrow i {opacity: 0.3;animation: arrowFlow 1.5s infinite;width:10px;}
.process-list .step-arrow i:nth-child(1) {animation-delay: 0s;}
.process-list .step-arrow i:nth-child(2) {animation-delay: 0.3s;}
.process-list .step-arrow i:nth-child(3) {animation-delay: 0.6s;}

@keyframes arrowFlow {
    0%, 100% {
      opacity: 0.3;
    }
    50% {
      opacity: 1;
    }
}
  
.dashboard-list{display:flex; gap:16px; flex-wrap:wrap;}
.dashboard-list li{background:rgba(255,255,255,0.05); width:calc(33.33% - 11px); padding:40px;}
.dashboard-list li h4{font-size: 30px;  }
.dashboard-list li h4 small{font-size: .6em; margin-left: 5px;}
.dashboard-list li p{margin-top: 40px; color: #888;}

.strategy-list{display:flex; flex-wrap:wrap;}
.strategy-list li{width:33.33%; border-left:1px solid rgba(255,255,255,0.1); padding:40px; display:flex; gap:40px; flex-direction:column; justify-content:space-between;} 
.strategy-list li .text h4{margin:20px 0 0; font-size: 24px;}
.strategy-list li .text p{color: #888;}
.strategy-list li .price{position:relative;  padding-bottom: 60px; height: 100%;}
.strategy-list li .price dl{width: 100%;display:flex; justify-content:space-between;}
.strategy-list li .price dl + dl{margin-top: 10px;} 
.strategy-list li .price .dot{text-align: center; margin-top: 20px; position:absolute; width: 100%; left:0; bottom:0;}
.strategy-list li .price .dot span{width: 6px; height: 6px; background: #fff; border-radius:50%; display:block; margin:12px auto 0;}
.strategy-list li .price:before{content:''; width:100%; height:100%; position:absolute; left:0; bottom:0; background-image: linear-gradient(0deg, rgb(9 9 9 / 90%), transparent); z-index:1;}
 
.module-list{display:flex; flex-wrap:wrap;}
.module-list li{width:16.66%; border-left:1px solid rgba(255,255,255,0.1); padding:30px;  justify-content:space-between;} 
.module-list h4{margin-top: 20px;font-size: 20px;}
.module-list p{color: #888;}

.step-list{display:flex; flex-wrap:wrap;}
.step-list > li{position:relative; width: 33.33%; padding:40px 40px 60px; border-left:1px solid rgba(255,255,255,0.1); border-bottom:1px solid transparent; border-right:1px solid transparent; border-top:1px solid transparent;  }
.step-list > li:nth-child(n+4){ border-top:1px solid rgba(255,255,255,0.1);} 
.step-list > li h4{font-size: 24px; margin:50px 0 20px;}
.step-list > li p{color: #888; text-indent:-10px; padding-left: 10px; font-size: 15px;}  
.step-list > li:before{content:''; width:8px; height:8px; background: #fff; position:absolute; left:-4px; top:-4px; opacity:0;}
.step-list > li:after{content:''; width:8px; height:8px; background: #fff; position:absolute; right:-4px; top:-4px; opacity:0;}
.step-list > li h4:before{content:''; width:8px; height:8px; background: #fff; position:absolute; left:-4px; bottom:-4px; opacity:0;}
.step-list > li h4:after{content:''; width:8px; height:8px; background: #fff; position:absolute; right:-4px; bottom:-4px; opacity:0;}
.step-list > li:hover{background-image: linear-gradient(to bottom, hsl(216 4% 51% /0.1) ,transparent , transparent
); border-color:rgba(255,255,255,0.2);}
.step-list > li:hover p{color: #fff;}
.step-list > li:hover:before,
.step-list > li:hover:after,
.step-list > li:hover h4:before,
.step-list > li:hover h4:after{opacity:1;}

.ai-slider{position:relative;}
.ai-slider .swiper-slide p{color: #888; margin-top: 20px; }
.ai-slider .swiper-navigation{position:absolute; right:0; top:-60px; width: 110px;}
.ai-slider .swiper-button-next, 
.ai-slider .swiper-button-prev{width: 50px; height: 50px;   border-radius:50%; background: rgba(255,255,255,0.15); display:inline-flex; align-items:center; justify-content:center;}
.ai-slider .swiper-button-next{right:0;}
.ai-slider .swiper-button-prev{left:0;}
.ai-slider .swiper-button-next:after{ content: "\e93e"; font-family: 'xeicon' !important; color: #fff; font-weight: 300; font-size: 20px; }
.ai-slider .swiper-button-prev:after{content: "\e93b"; font-family: 'xeicon' !important; color: #fff; font-weight: 300;font-size: 20px;}
.ai-slider .swiper-slide .img{ aspect-ratio: 1.5 / 1;}
.ai-slider .swiper-slide .img img{width: 100%; height: 100%; object-fit:cover;}

.traning-list{margin-top: 40px;}
.traning-list > ul{display:flex; gap:20px; flex-wrap:wrap;}
.traning-list > ul > li{width:calc(33.33% - 13.33px); }
.traning-list > ul > li > a{display:block; border:1px solid rgba(255,255,255,0.1); padding:30px; transition:all ease .35s;}
.traning-list > ul > li > a:hover{border-color:rgba(255,255,255,0.3);}
.traning-list > ul > li h4{font-size: 1.1rem; margin-top: 30px;}
.traning-list > ul > li p{color: #888;}
.traning-list > ul > li .thumb{margin-bottom: 20px;     aspect-ratio: 1 / 1.2;}
.traning-list > ul > li .thumb img{width: 100%; height: 100%; object-fit:cover;}
.traning-list > ul > li .btns button{border:0; background:rgba(255,255,255,0.1); line-height: 1; color: #888;} 


.consulting-about .img{width: 100%; aspect-ratio: 3.5 / 1; margin-bottom: 40px;}
.consulting-about .img img{width: 100%; height: 100%; object-fit:cover;}
.consulting-about .txt{color: #888; display:flex; justify-content:flex-end;} 

.target-list > ul{display:flex;}
.target-list > ul > li{width: 25%; aspect-ratio:1; border:1px solid rgba(255,255,255,0.1); padding:40px; display:flex; flex-direction:column; justify-content:space-between;}
.target-list > ul > li .btm p{color: #888;}
.target-list > ul > li .btm strong{display:block; font-size: 50px;}
.target-list > ul > li .btm strong .up{float:right; font-weight: 300;}
.target-list > ul li.txt{width: 50%; aspect-ratio: auto; border:0; padding:0; justify-content:flex-end; padding-right: 20px; padding-bottom: 20px; color: #888;}



/* form */
.support-form{display:flex; justify-content:space-between;}
.support-form .form-list{width: 100%; max-width:640px;}
.support-form .form-list > div + div{margin-top: 30px;}
.support-form .form-list .txt{ display: block; margin-bottom: 16px; font-size: 1rem;}
.support-form .form-list .email{display:flex; gap:10px;}
.support-form input,  
.support-form select{width: 100%;  background-color:#000;} 
.support-form input:focus, 
.support-form select:focus { border-color:#fff} 
.support-form .desc{ margin-top: 10px;}
.support-form .btn-submit{background: #fff;color: #000; padding:10px 24px;  font-size: 1em;}
.support-form .btn-submit:hover{color: #fff;}

.filebox {position:relative; display:flex; gap:10px;  }
.filebox .upload-name {  width:calc(100% - 110px); color: #888;}
.filebox label {display:block; width:100px; display:inline-block; text-align: center;color: #888;vertical-align: middle;background-color: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.1); cursor: pointer;height: 55px; line-height: 53px; white-space:nowrap; }
.filebox input[type="file"] {position: absolute;   width: 0;height: 0;padding: 0;overflow: hidden;border: 0;}

.privacy-cont{width:100%;  padding:16px; border:1px solid rgba(255,255,255,0.1); height:140px; overflow-y:auto; font-size: 15px; color: #888;}
.privacy-check{display:flex;  color: #888; margin-top: 10px;}   
.privacy-check input[type=checkbox] { position: absolute; opacity: 0; height: 0; width: 0; visibility:hidden;}
.privacy-check input[type=checkbox] + label {  position: relative;  cursor: pointer;  padding: 0;}
.privacy-check input[type=checkbox] + label:before {  content: "";  margin-right: 7px;  display: inline-block;  vertical-align: text-top;  width: 16px;  height: 16px;  background: white; border:1px solid #e5e5e5; margin-top: 1px;  } 
.privacy-check input[type=checkbox]:checked + label:before {  background: #4F46E5;  border-color:#4F46E5;}
.privacy-check input[type=checkbox]:disabled + label {  color: #b8b8b8;  cursor: auto;}
.privacy-check input[type=checkbox]:disabled + label:before {  box-shadow: none;  background: #ddd;}
.privacy-check input[type=checkbox]:checked + label:after {  content: "";  position: absolute;  left: 3px;  top: 11px;  background: white;  width: 2px;  height: 2px;  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;  transform: rotate(45deg);}

/* box, text */
.price-box{display:flex; gap:16px;  margin-bottom: 40px;}
.price-box > li{width: 100%; display:flex; align-items:center; justify-content:space-between;border-radius:10px; border:1px solid rgba(255,255,255,0.1); padding:24px 30px;  color: #888;}
.price-box > li strong{color: #fff; font-size: 1.1rem;}

.duty-box{display:flex; background: rgba(255,255,255,0.05); padding:40px; margin-top: 40px;}
.duty-box > li{width: 33.33%; text-align: center; color: #888;}
.duty-box > li .price{color: #fff;}
.duty-box > li .price strong{font-size: 30px;}

.duty-total{text-align: center;}
.duty-total{color: #888;}
.duty-total strong{font-size: 24px; color: #fff;}
  
.chart-box .data-chart {position:relative; max-width: 1280px;height: 800px;  }  
.chart-box .chart-text{position:absolute;   left:50%; top:50%; transform:translate(-50%, -50%); padding:10px 20px; border-radius:50px; text-align: center;  background: #4F46E5; color: #fff; z-index:1; opacity:0; animation: fadeIn .35s ease-in-out forwards;  animation-delay: 1.3s;} 
 
.table-box .heading{ padding:14px 0;}
.table-box .heading > li {color: #888;}
.table-box > ul{display:flex; align-items:center; padding:40px 0;}
.table-box > ul > li:nth-child(1){width: 30%; text-align: left;}
.table-box > ul > li:nth-child(2){width: 20%;}
.table-box > ul > li:nth-child(3){width: 10%;}
.table-box > ul > li:nth-child(4){width: 10%;}
.table-box > ul > li:nth-child(5){width: 10%;}
.table-box > ul > li:nth-child(6){width: 20%;}
.table-box > ul > li{text-align: center;} 
.table-box > ul:not(.heading){border-top:1px solid rgba(255,255,255,0.1); font-weight: 200;} 
.table-box > ul:not(.heading) > li:first-child{font-size: 1.05rem; font-weight: 500; }


/* chart */
.chart-content{display:flex; gap:16px; margin-top: 80px;}
.chart-content .chart-card{width:50%; border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:40px; }
.chart-content .chart-card h4{font-size: 24px;  text-align: center; margin-bottom: 30px;} 
.chart-content .chart-card .chart-item{display:flex; gap:16px; justify-content:space-between; align-items:center;} 
.chart-content .chart-card .chart-item .chart-diagram {width: 40%; position:relative;}
.chart-content .chart-card .chart-item .chart-diagram .dounut-chart { max-width: 100%; aspect-ratio:1;}
.chart-content .chart-card .chart-item .chart-diagram .chart-text{position:absolute; width: 100%; left:0; top:50%; transform:translateY(-50%); text-align: center; line-height: 1.4; color: #888;font-size: 15px;}
.chart-content .chart-card .chart-item .chart-diagram .chart-text .price{color: #fff; font-size: 16px;}
.chart-content .chart-card .chart-item .chart-legend{width: 55%;}
.chart-content .chart-card .chart-item .chart-legend .color{width:16px; height:16px; display:inline-block; border-radius:2px;}
.chart-content .chart-card .chart-item .chart-legend dl{display:flex; justify-content:space-between; align-items:center;}  
.chart-content .chart-card .chart-item .chart-legend dl + dl{margin-top: 7px;}
.chart-content .chart-card .chart-item .chart-legend dt{display:flex; align-items:center; gap:10px; color: #888; font-size: 15px;}
 

.chart-content2{display:flex; gap:16px; margin-top: 80px;}
.chart-content2 .chart-card{width:25%; border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:30px; }
.chart-content2 .chart-card h4{font-size: 20px;  text-align: center; margin-bottom: 30px;} 
.chart-content2 .chart-card .chart-item{ } 
.chart-content2 .chart-card .chart-item .chart-diagram { position:relative;}
.chart-content2 .chart-card .chart-item .chart-diagram .dounut-chart { max-width: 100%; margin:0 auto 20px; aspect-ratio:1;} 
.chart-content2 .chart-card .chart-item .chart-diagram .chart-text{position:absolute; width: 100%; left:0; top:50%; transform:translateY(-50%); text-align: center; line-height: 1.4; color: #fff;} 
.chart-content2 .chart-card .chart-item .chart-diagram .chart-text p{font-size: 1.3rem; font-weight: bold;}
.chart-content2 .chart-card .chart-item .chart-legend{display:flex; flex-wrap:wrap; row-gap:7px;}
.chart-content2 .chart-card .chart-item .chart-legend .color{width:16px; height:16px; display:inline-block; border-radius:2px;}
.chart-content2 .chart-card .chart-item .chart-legend li{width:50%; display:flex; gap:10px; align-items:center;  color: #888; font-size: 15px;}
.chart-content2 .chart-card .chart-item .chart-legend li:last-child{width: 100%;}   

 .linechart-legend{display:flex; flex-wrap:wrap; justify-content:flex-end;  gap:20px; align-items:center; margin-top: 10px;}
 .linechart-legend li{display:flex; flex-wrap:wrap;  gap:4px; align-items:center; }
 .linechart-legend li .color{width:12px; height:12px; display:inline-block; border-radius:50%;}
 
.value-chart{background: rgba(255,255,255,0.05); padding:30px; } 
.value-chart .effect-cont{ display:flex;  gap:30px;}
.value-chart .effect-cont > div:not(.arrow){background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); padding:40px; border-radius:10px;}
.value-chart .effect-cont .arrow{display:flex; align-items:center;}
.value-chart .effect-cont h4{font-size: 24px; margin-bottom: 30px;}
.value-chart .effect-cont .left{width: calc(45% - 70px);}
.value-chart .effect-cont .left ul li{color: #888; display:flex; justify-content:space-between; align-items:center;}
.value-chart .effect-cont .left ul li + li{margin-top: 10px;}
.value-chart .effect-cont .left ul li strong{font-size: 1.1rem; color: #fff;}
.value-chart .effect-cont .right{width: 55%;} 
.value-chart .bar-labels {display: flex;justify-content: space-between; margin-bottom: 8px; }
.value-chart .bar-labels > div{display:flex; flex-direction:column; gap:6px; font-size: 1.1rem; font-weight: 600;}
.value-chart .bar-labels > div:before{ display:inline-block; font-size: 12px; padding:3px 10px; background: rgba(255,255,255,0.1); border-radius:20px; font-weight: 300; color: #aaa; }
.value-chart .bar-labels .min-label{ align-items:flex-start; }
.value-chart .bar-labels .min-label:before{content:'MIN'; }
.value-chart .bar-labels .max-label{ align-items:flex-end; }
.value-chart .bar-labels .max-label:before{content:'MAX'; }
.value-chart .bar-wrapper {position: relative;height: 10px;background: rgba(255,255,255,0.05);border-radius: 20px; }
.value-chart .bar-fill {height: 100%;width: 0;background: #4F46E5;transition: width 2s ease-in-out; border-radius:20px;}
.value-chart .marker {position: absolute;bottom: -90px;left:0;transform: translateX(-50%);text-align: center;transition: left 2s ease-in-out; background: #4F46E5; color: #fff; border-radius:6px; padding:16px 10px; width: 180px;}
.value-chart .marker::after { content: "";  position: absolute;bottom: 100%;  left: 50%;  transform: translateX(-50%);width: 0;  height: 0;  border-left: 6px solid transparent;  border-right: 6px solid transparent;  border-bottom: 6px solid #4F46E5; }
.value-chart .marker-value { font-size: 1.1rem; font-weight: 600;  white-space:nowrap;     line-height: 1.2;}
.value-chart .marker-change {font-size: .8rem;color: rgba(255,255,255,0.5); white-space:nowrap;} 
.value-chart .chart-cont{display:flex; padding:50px; justify-content: space-between;  gap: 40px;}
.value-chart .chart-cont .chart-item{display:flex;  gap:40px;      align-items: flex-end; }  
.value-chart .chart-cont .chart-item .dounut-chart { max-width: 300px;   aspect-ratio:1;} 
.value-chart .chart-cont .chart-item .chart-legend{display:flex; flex-wrap:wrap; gap:7px 10px; max-width: 280px; min-width:170px;}
.value-chart .chart-cont .chart-item .chart-legend .color{width:16px; height:16px; display:inline-block; border-radius:2px;}
.value-chart .chart-cont .chart-item .chart-legend li{width:calc(50% - 5px); display:flex; gap:10px; align-items:center;  color: #888; font-size: 15px;} 
.value-chart .chart-cont .chart-item:has(.bar-graph){width:400px; flex-direction:column;justify-content: flex-end;  align-items: flex-start;}
.value-chart .chart-cont .chart-item .bar-graph { width: 100%;display: flex;  flex-direction:column; gap: 30px;align-items: flex-start;justify-content: center; }
.value-chart .chart-cont .chart-item .bar-graph + .chart-legend{  }
.value-chart .chart-cont .chart-item .bar {position: relative; overflow: hidden;display: flex; justify-content: flex-end; align-items:center; gap:6px;} 
.value-chart .chart-cont .chart-item .bar:after{     width: 50px;  margin: 0 auto; font-size: 12px; padding:3px  ; background: rgba(255,255,255,0.1); border-radius:20px; text-align: center; font-weight: 300; color: #aaa;}
.value-chart .chart-cont .chart-item #bar1:after{content:'MIN'; }
.value-chart .chart-cont .chart-item #bar2:after{content:'MAX'; }  
.value-chart .chart-cont .chart-item .top-half {background: #96adff;width: 0; height:60px;}
.value-chart .chart-cont .chart-item .bottom-half {background: #6284fd;width: 0; height:60px;}


.plan-chart{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); padding:50px 50px 0; overflow:hidden; }
.plan-chart #planGraph {display: flex; align-items: flex-end;justify-content: space-between; height: 600px;  gap:40px; }
.plan-chart .bar {position:relative; width: 100%; height: 0; bottom:-70px;  } 
.plan-chart .bar .quadrangle{background-color: #333;   text-align: center; height: calc(100% - 70px);text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: flex-end;padding: 40px 10px;}
.plan-chart .bar .quadrangle strong{font-size: 1.05rem;   opacity:0;}
.plan-chart .bar .quadrangle p{   opacity:0;}
.plan-chart .bar .quadrangle:before{content:''; width:0px; border-right:1px dashed #fff; height:40px; position:absolute; left:50%; top:0;     opacity:0; }
.plan-chart .bar::before {content: ""; position:relative; z-index:2; width:100%; height:70px; display:block; background: url('/images/sub/plan-triangle.png') no-repeat center center / 100% 100%; }
.plan-chart .bar .year{position:absolute; left:0; width: 100%; text-align: center; top:-50px; font-size: 1.05rem; font-weight: 600;  opacity:0; }
.plan-chart .bar .arrow{  opacity:0; margin:10px auto; }
.plan-chart .bar .arrow-up{height: calc(100% - 60px);   width: 45%;  margin: 0 auto; background-image: linear-gradient(0deg, #2C277F, #4F46E5);     display: flex; align-items: center;  justify-content: center; text-align: center; line-height: 1.2; font-size: 1.2rem ; font-weight: 600;}
.plan-chart .bar .arrow-up p{   opacity:0; }
.plan-chart #bar5::before {content: ""; position:relative; z-index:2; width:125px; height:60px; display:block; background: url('/images/sub/plan-up.png') no-repeat center center / 100% 100%;margin: 0 auto;  bottom:-2px; }
#planGraph.active .bar{bottom:0; animation: growBar 1.3s ease forwards;  }
#planGraph.active #bar1 { --target-height: 170px; } 
#planGraph.active #bar2 { --target-height: 250px;}
#planGraph.active #bar3 { --target-height: 330px;}
#planGraph.active #bar4 { --target-height: 410px;}
#planGraph.active #bar4 .year{color: #4F46E5;}
#planGraph.active #bar5 { --target-height: 550px;}  
#planGraph.active .quadrangle:before,
#planGraph.active .quadrangle strong,
#planGraph.active .quadrangle p,
#planGraph.active .bar .year,
#planGraph.active .bar .arrow-up p,
#planGraph.active .bar .arrow{animation: fadeIn 1s ease-in-out forwards;  }
#planGraph.active .quadrangle p{  animation-delay: .6s; }
#planGraph.active .bar .year,
#planGraph.active .quadrangle:before,
#planGraph.active .quadrangle strong, 
#planGraph.active .bar .arrow-up p,
#planGraph.active .bar .arrow{  animation-delay: 1s; }
  
@keyframes growBar {
	to {
        height: var(--target-height);
	}
}




.cash-diagram{display:flex;  padding-bottom: 100px;}
.cash-flow{position:relative; max-width:560px; padding:50px 30px; background:rgb(9 9 9 / 90%); border:1px solid rgba(255,255,255,0.1);} 
.cash-flow .cash-tit{font-size: 24px; text-align: center; margin-bottom: 30px; font-weight: 600;}
.cash-flow .cash-list {display: flex; flex-wrap:wrap;  gap:16px;  } 
.cash-flow .cash-list > li {display:flex; flex-direction:column; flex-shrink: 0; padding: 0 5px;    width: calc(50% - 8px);  padding:  30px; border-radius:10px;  background: rgba(255,255,255,0.05); color: #fff; backdrop-filter: blur(10px); aspect-ratio:1; transition:all ease .35s;}
.cash-flow .cash-list > li h4{font-size: 20px; margin-top: 10px;   line-height: 1.5;}
.cash-flow .cash-list > li .icon{   text-align:right; margin-top:auto;}
.cash-flow .cash-list > li .icon img{ max-width:40px; opacity:.2;  transition:all ease .35s;}
.cash-flow .cash-list > li p{color: rgba(255,255,255,0.4);}
.cash-flow .cash-list > li:hover{background: #4F46E5; } 
.cash-diagram .arr-tax{position:relative; z-index:1; width:calc(50% - 280px); text-align: center;display: flex; align-items: center; justify-content: center;  flex-direction: column; }
.cash-diagram .before-tax{padding-left: 5%;}
.cash-diagram .before-tax:before{content:''; width:100%; height:150px;   position:absolute; left:0; top:50%; transform:translateY(-50%); background-image: linear-gradient(90deg, transparent, rgb(79 70 229 / 50%), rgb(79 70 229 / 60%)); z-index:-1;}
.cash-diagram .after-tax{padding-right: 5%;}
.cash-diagram .after-tax:before{content:''; width:calc(100% - 108px); height:150px;   position:absolute; left:0; top:50%; transform:translateY(-50%); background-image: linear-gradient(90deg, rgb(79 70 229 / 60%), #4F46E5); z-index:-1;}
.cash-diagram .after-tax:after{content:''; width:110px;   background: url('/images/sub/after-arr.png') no-repeat left center / contain; position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:-1;     aspect-ratio: 1 / 2;}  
.cash-diagram .arr-tax p{font-size: 16px; color:rgba(255,255,255,0.5);}
.cash-diagram .arr-tax strong{font-size: 24px; color: #fff; font-weight: 600;}
.cash-diagram .explan{border:1px solid rgba(255,255,255,0.1); padding:16px 40px; white-space: nowrap; font-size: 18px; border-radius:50px; position:absolute; bottom:-100px; left:50%; transform:translateX(-50%);}


.taxbot-cont{padding-top: 160px;     border-top: 1px solid rgba(255, 255, 255, 0.1);}
.taxbot-box{width: 48%; color: #fff; text-align: center;}
.taxbot-box .taxbot-diagram{position:relative; z-index:1; aspect-ratio:2 / 1;  width: 100%; overflow:hidden; }
.taxbot-box .taxbot-diagram:after{content:''; width:100%; border-radius:50%; background: #96adff; border:8vw solid #6284fd; position:absolute; left:0; top:0; aspect-ratio: 1; z-index:-1; opacity:0; transform: scale(.2); } 
.taxbot-box p:not(.text){ opacity:0;}
.taxbot-box .p1{font-size: 30px; position:absolute; left:0; top: 3.2vw; width: 100%; text-align: center; font-weight: 600;}
.taxbot-box .p2{font-size: 24px; position:absolute; left:0; bottom: 3.2vw; width: 100%; text-align: center; font-weight: 600;}
.taxbot-box .y1{font-size: 16px; position:absolute; left:2vw; bottom: 1vw;  }
.taxbot-box .y2{font-size: 16px; position:absolute; left:0; bottom: 1vw; width: 100%; text-align: center; }
.taxbot-box .text{ margin-top: 16px; opacity:.6; } 
.taxbot-box .taxbot-diagram.active:after{ animation: expandCircle .6s .6s ease-out forwards;}
.taxbot-box .taxbot-diagram.active p:not(.text){animation: fadeIn .6s 1s ease-in-out forwards;  }

@keyframes expandCircle {
  0% {
    transform: scale(.2);
	opacity:0;
  }
  100% {
    transform: scale(1);  
	opacity:1;
  }
}




/************************************************ responsive ************************************************/ 
.mo-cont{display:none;}
@media screen and (max-width:768px){
	.pc-cont{display:none;}
	.mo-cont{display:block;}
}