@import url('font.css');
@import url('reset.css');
@import url('common.css');

html,body {
  font-size: 0.5208333333333334vw;
  font-size:62.5%;  
  font-family: 'Pretendard', sans-serif;
  scroll-behavior: smooth !important;
}
 @media all and (max-width: 1200px) {
    html,body {font-size:62.5%;}
 }
body {font-size:var(--fs-16);  font-weight: 400; color:#fff; background-color: #000; }
.row{display: flex; max-width: 148rem; margin: auto; padding-left: 2rem; padding-right: 2rem; width: 100%; position: relative; flex-direction: column;}
.row>*{padding: 0;}


@media all and (max-width: 1200px) {
  .row{padding-left: 2.4rem; padding-right: 2.4rem;}
}

/* layout */

#wrap{}
#header .row .gnb > ul > li > ul {
  position: absolute;
  z-index: 10000;
  opacity: 0;
  pointer-events: none; /* 클릭 막기 */
  transition: all 0.4s ease;
  /* 나머지 스타일 생략 */
}

#header .row .gnb > ul > li.active > ul {
  opacity: 1;
  pointer-events: auto; /* 메뉴가 열릴 때만 클릭 가능 */
  transform: translateX(-50%) translateY(0);
}
#header{position: fixed; left: 0; top: 0; right: 0; z-index: 9999; transition:all 0.4s ease; transform: translateY(-100%);}
#header.active{transform: translateY(0);}
#header.head-hide{transform: translateY(-100%);}
#header.head-black{background-color:rgba(0,0,0,0.5); backdrop-filter: blur(5px);}
#header .row{display: flex; max-width:none ; flex-direction: row; justify-content:center; align-items: center; padding: 0 6rem; position: relative; height: 6.8rem;}
#header .row h1 {position: absolute; left: 6rem; top: 50%; transform: translateY(-50%);}
#header .row h1 img{width: 10rem;}
#header .row .gnb{font-size: 1.8rem;}
#header .row .gnb a{color: var(--color-white);}
#header .row .gnb > ul{display: flex; gap: 10rem;}
#header .row .gnb > ul > li{position: relative;}
#header .row .gnb > ul > li > a{display: flex; gap:0.4rem; height: 6.8rem; align-items: center;}
#header .row .gnb > ul > li > a img{width: 1.6rem; transition: all 0.2s ease;}
#header .row .gnb > ul > li.active > a img{transform: rotateZ(180deg);}

#header .row .gnb > ul > li > ul {
    position: absolute;
    border-radius: 16px;
    border: 1px solid #252525;
    background: #111111; /* 완전 불투명한 어두운 배경 */
    backdrop-filter: none; /* 흐림 제거 */
    top: 6.8rem;
    left: 50%;
    transform: translateX(-50%) translateY(2rem);
    opacity: 0;
    transition: all 0.4s ease;
}

#header .row .gnb > ul > li.active > ul{transform:translateX(-50%) translateY(0); opacity: 1;}
#header .row .gnb > ul > li > ul > li > a{padding:0 2.4rem; display: flex; white-space: nowrap; height: 5.4rem; align-items: center;}
#header .row .gnb > ul > li > ul > li > a:hover{text-decoration: underline; }
#header .row .lan{font-size: 1.8rem; display: flex; padding: 0 1.6rem; border: 1px solid #545454; border-radius: 2rem; height:3.2rem; align-items: center; transition: all 0.2s ease; position: absolute; right: 6rem; top: 50%; transform: translateY(-50%);}
#header .row .lan li{display: flex; align-items: center; overflow: hidden; transition: all 0.2s ease;}
#header .row .lan li.active a{color:var(--color-white);}
#header .row .lan li a{color:var(--color-light-gray);}
#header .row .lan li.en::before{content: ""; display: block; width: 1px; height: 1.6rem; background-color:#545454; margin: 0 0.8rem;}
#header .row .lan li:last-of-type{width: 0;}
#header .row .lan.over li:last-of-type{width: 4rem;}
.back-ground {position: fixed; left: 0; top: 0; right:0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 1;}
.back-ground .round{display: flex; width: 111.6rem; height: 111.6rem; border-radius: 1116px;
opacity: 0.35; background: radial-gradient(50% 50% at 50% 50%, #2924FF 0%, rgba(1, 1, 1, 0.00) 100%); position: absolute;  transform: translateX(-50%) translateY(-50%);}
.back-ground .round-01{display: flex; width: 111.6rem; height: 111.6rem; border-radius: 1116px;
opacity: 0.45; background: radial-gradient(50% 50% at 50% 50%, #2924FF 0%, rgba(1, 1, 1, 0.00) 100%); position: absolute;  transform: translateX(-50%) translateY(-50%);}
.back-ground .round-02{display: flex; width: 50rem; height: 50rem; border-radius: 1116px;
opacity: 0.25; background: radial-gradient(50% 50% at 50% 50%, #2924FF 0%, rgba(1, 1, 1, 0.00) 100%); position: absolute;  transform: translateX(30%) translateY(50%); bottom: 0; right:0;}
#footer {border-top: 1px solid #1D1D1D;}
#footer .row{padding: 2.5rem 2rem 6rem 2rem;}
.foot-top{display: flex; justify-content: space-between; font-size: 1.8rem; align-items: center;}
.foot-top h1{letter-spacing:-0.4px; font-weight: 700;}
.foot-top ul.sns{display: flex; align-items: center; gap: 0.8rem;}
.foot-top ul.sns li a{width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #424242;}
.foot-top ul.sns li a:hover{background-color: #5B21FF;}
#footer .copyright{margin-top: 5rem; font-size: 1.4rem; color: var(--color-light-gray);}
.company-info {display: flex; margin-top: 2.5rem;}
.company-info dl{display: flex; flex-direction: column; gap: 0.8rem; width: 33.33%;}
.company-info dt{font-size: 1.6rem; font-weight: 500;}
.company-info dd{font-size: 1.4rem; font-weight: 400; color: var(--color-light-gray); display: flex; gap: 1.8rem; letter-spacing:-0.42px;}
.company-info dd b{color: var(--color-white); width: 6rem;display: inline-flex;}
.menu-btn{display: flex; align-items: center; justify-content: center; display: none;}

.m-menu{position: fixed; top:0rem; bottom: 0; padding-top: 10.8rem;  width: 100%; padding-left: 2.4rem;background-color: #000; padding-right: 2.4rem; z-index: 99; transition: all 0.2s ease; transform: translateX(-100%);}
.m-menu.active{transform: translateX(0);}
.m-menu > ul > li > a{display: flex; color: #fff; font-size: 2.4rem; padding: 1.6rem 0; display: flex; justify-content: space-between; align-items: center;}
.m-menu > ul > li > a img{transition: all 0.2s ease;}
.m-menu > ul > li > ul{padding: 0 1.6rem; display: flex; flex-direction: column; gap: 1.8rem; overflow: hidden; height: 0; transition: all 0.2s ease;}
.m-menu > ul > li > ul > li > a{font-size: 1.8rem; color: var(--color-light-gray);}
.m-menu > ul > li > ul > li > a:focus{color: var(--color-highlight);}
.m-menu > ul > li.active > ul{height:auto;}
.m-menu > ul > li.active > a img{transform: rotateZ(180deg)}

.lan-m{}
.m-menu .lan-m{font-size: 1.8rem; display: inline-flex; padding: 0 1.6rem; border: 1px solid #545454; border-radius: 2rem; height:3.2rem; align-items: center; transition: all 0.2s ease; margin-top: 4rem;}
.m-menu .lan-m li{display: flex; align-items: center; overflow: hidden; transition: all 0.2s ease;}
.m-menu .lan-m li.active a{color:var(--color-white);}
.m-menu .lan-m li a{color:var(--color-light-gray); font-size: 1.8rem;}
.m-menu .lan-m li.en::before{content: ""; display: block; width: 1px; height: 1.6rem; background-color:#545454; margin: 0 0.8rem;}

@media all and (max-width: 1200px) {  
  a:focus{color: var(--color-highlight) !important;}
  
  #header .row .gnb,#header .row .lan{display: none;}
  #header .row{padding: 0 2.4rem; align-items: center; justify-content: space-between; height: 5.2rem;}
  #header .row h1{position: static; transform: translateY(0);}
  #header .row h1 img{width: 7.8rem;}
  .menu-btn{display: flex;}

  #footer {border-top: 1px solid #1D1D1D;}
  #footer .row{padding: 2.4rem; padding-bottom: 6rem; display: flex; flex-direction: column; gap:2.4rem;}
  .foot-top ul.sns{}
  #footer .copyright{margin-top: 0rem;}
  .company-info {display: flex; flex-direction: column; justify-content: space-between; margin-top: 0rem;}
  .company-info dl{width: 100%;}
  .company-info hr{height: 0; display: flex; border-top: 1px dashed #545454; background: none; margin: 2.4rem 0;}

}

.intro {position: relative; background: url(../img/bg-top.png) no-repeat -43rem -19.5rem; background-size:168rem auto; }
.intro .row{position: relative; display: flex; justify-content: space-between; flex-direction: row ;  align-items: flex-start;}
.intro .intro-con{display: flex; flex-direction: column; gap: 4rem; height: 100vh; justify-content: center; flex: none;}
.intro .intro-con .title{font-size: 5.8rem; font-weight: 700; letter-spacing: -1.74px; white-space: nowrap;} 
.intro .intro-con .text{color: var(--color-light-gray); font-size: 2.8rem; letter-spacing: -0.084rem;}
.intro-text{position: relative; z-index: 1;}

.intro-visual {display: flex; height: 100vh; position:sticky; top: 0; right: 0; align-items: center;}
.intro-visual .visual-block{display: flex; position: relative;  right: 0; display:flex; justify-content: flex-end; flex: none;}
.intro-visual .visual-block .img-base{opacity: 0; width: 100%;}
.intro-visual .visual-block .img-01{position: absolute; left: 0; top:0; width: 100%; z-index: 1; opacity: 0;
  transform: translateY(100px);}
.intro-visual .visual-block .img-02{position: absolute; left: 0; top:0; width: 100%; z-index: 2;opacity: 0;
  transform: translateY(100px);}
.intro-visual .visual-block .img-03{position: absolute; left: 0; top:0; width: 100%; z-index: 3; opacity: 0;
  transform: translateY(100px);}

@media all and (max-width: 1200px) {
  .back-ground .round-01,.back-ground .round-02{display: none;}
  .intro{background: none;}
  .intro .row{flex-direction: column-reverse;}
  .intro-visual{ height:100dvh;  width: 100%; justify-content: center; top: 0rem; align-items: flex-start; padding-top: 10rem;}
  .intro-visual .visual-block{max-width: 100%;}

  .intro .intro-text{width: 100%; position: sticky; bottom: 0; }
  .intro .intro-con{gap: 1rem; padding-top:20rem;}
  .intro .intro-con .title{font-size: 2.8rem;letter-spacing: -0.84px; text-align: center;} 
  .intro .intro-con .text{font-size: 1.8rem; letter-spacing: -0.054rem; text-align: center;}
}

.solution {padding-top: 20rem; padding-bottom: 34rem; text-align: center; background: url(../img/bg-index-02.png) no-repeat right -60rem top 13rem;}
.solution .row{display: flex; flex-direction: column; align-items: center; gap: 6rem;}
.section-msg {text-align: center;}
.section-msg .slogan{background: linear-gradient(90deg, #5786FF 35.63%, #8358FF 63.73%);
background-clip: text; -webkit-background-clip: text; 
-webkit-text-fill-color: transparent; font-size: 24px;
font-weight: 500; letter-spacing: -0.72px; display: inline-flex; width: fit-content;}
.section-msg h2{font-size: 5rem; font-weight: 700; line-height: 140%;
letter-spacing: -1.5px; margin-top: 0.8rem;}
.section-msg .text{color: var(--color-light-gray); font-size: 24px;
line-height: 140%; letter-spacing: -0.72px; margin-top: 2.4rem; text-align: center;}

.solution-info{display: flex; justify-content: space-between; flex-grow: 1; width: 100%; gap: 2.4rem;}
.solution-info a .info-img{position: absolute;}
.solution-info a{position: relative; width: 33.33%; height: 45rem; border-radius: 2.4rem; padding: 4.8rem; text-align: left;
border: 1px solid #252525; flex: none;
background: linear-gradient(134deg, rgba(38, 34, 255, 0.00) 44.44%, rgba(38, 34, 255, 0.20) 97.4%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
backdrop-filter: blur(5px);}
.solution-info a:hover{border: 1px solid #355AFF; box-shadow: 0px 8px 24px 0px rgba(54, 0, 255, 0.50);  transform: translateY(-0.5rem);}

.solution-info a dl dt{font-size: 2rem; color: var(--color-highlight); font-weight: 400;}
.solution-info a dl dd.title{font-size: 4rem; color: #fff;
font-weight: 700;
line-height: 140%;
letter-spacing: -1.2px;}
.solution-info a dl dd:last-of-type{margin-top: 1.6rem;}
.solution-info a dl dd:last-of-type span{display: flex; width: 4rem; height: 4rem; border-radius: 50%; align-items: center; justify-content: center; background-color: #424242; }
.solution-info a:hover dl dd:last-of-type span{background: linear-gradient(90deg, #4D7BFF 0%, #784EFF 100%);
filter: drop-shadow(0px 12px 10px rgba(81, 0, 255, 0.50))}

.solution-info .info-img{width: 40.4rem; height:31rem; position: absolute; right: 2.4rem; bottom: 2.4rem;}
.solution-info .info-img img{transition: all 0.4s ease;}
.solution-info .mail .info-img .mail-01{position: absolute; top: 0; left: 1rem;}
.solution-info .mail .info-img .mail-02{position: absolute; bottom: 2rem;}
.solution-info .mail .info-img .mail-03{position: absolute; left: 3rem; top: 5rem;}
.solution-info a.mail:hover .info-img .mail-01{transform: translateY(1rem) scale(1.1);}
.solution-info a.mail:hover .info-img .mail-02{transform: translateY(-2rem) scale(1.4);}
.solution-info a.mail:hover .info-img .mail-03{transform: translateX(5rem) scale(0.8) ;}

.solution-info .sms .info-img .sms-01{position: absolute; top: 6.7rem; left: 4.6rem;}
.solution-info .sms .info-img .sms-02{position: absolute; top: 1rem; left: 2rem;}
.solution-info .sms .info-img .sms-03{position: absolute; top: 5rem; left: 13rem; }
.solution-info a.sms:hover .info-img .sms-01{transform: translateY(1rem) scale(1.1);}
.solution-info a.sms:hover .info-img .sms-02{transform: translateY(-2rem) scale(1.2);}
.solution-info a.sms:hover .info-img .sms-03{transform: translateX(2rem) translateY(2rem) scale(0.8) ;}


@media all and (max-width: 1200px) {
  .solution {padding-top: 14rem; padding-bottom: 10rem; text-align: center; background: url(../img/bg-index-02.png) no-repeat right -60rem top 13rem;}
  .solution .row{display: flex; flex-direction: column; align-items: center; gap: 2.4rem;}
  .section-msg {text-align: center;}
  .section-msg .slogan{font-size: 18px; letter-spacing: -0.54px;}
  .section-msg h2{font-size: 2.8rem; letter-spacing: -0.8px; margin-top: 0.8rem;}
  .section-msg .text{font-size: 16px; letter-spacing: -0.48px; margin-top: 0.8rem;}

  .solution-info{flex-direction: column; justify-content: space-between; flex-grow: 1; width: 100%; gap: 1.6rem;}
  .solution-info a {overflow: hidden; border: 1px solid #355AFF; box-shadow: 0px 8px 24px 0px rgba(54, 0, 255, 0.50);}
  .solution-info a .info-img{position: absolute; }
  .solution-info a{position: relative; width: 100%; height: 32rem; padding: 2.4rem;}

  .solution-info a dl dt{font-size: 1.6rem;}
  .solution-info a dl dd.title{font-size: 2.4rem; letter-spacing: -0.72px;}
  .solution-info a dl dd:last-of-type{margin-top:0rem; position: absolute; right: 2.4rem; top: 2.4rem;}
  .solution-info a dl dd:last-of-type span{display: flex; width: 3.2rem; height: 3.2rem;}
  .solution-info .info-img{transform: scale(0.5); transform-origin: right bottom;}
}

.tech {background: url(../img/bg-index-04.png) no-repeat 50% 50%; background-size:cover;}
.tech .row{padding-top: 36rem; padding-bottom: 44rem;  position: relative;}
.tech .line{display: flex; justify-content: center;}
.tech .line span{display: flex; width: 1px; height: 100%;  background-color:#545454 ;height: 0rem; position: absolute; top: -10rem; left: 50%; transition: all 0.2s ease; }
.tech .line.active span{height: 34rem;}

.section-msg.en h2{font-size: 4.8rem; font-weight: 300;}
.section-msg.en .text{color:#fff; font-size: 28px; letter-spacing: -0.84px; font-weight: 400;}

.link{text-align: center;}
.tech .link{margin-top: 5rem;}

.btn-link{display: inline-flex;
padding: 12px 12px 12px 32px;
justify-content: center;
align-items: center;
gap: 10px; border-radius: 40px;
background: linear-gradient(180deg, #131313 0%, #211445 100%);
color: #fff; font-size: 1.8rem; overflow: visible;
}
.btn-link span{display: flex; width: 4rem; height: 4rem; align-items: center; justify-content: center; background-color: #5B21FF; border-radius: 50%;}
.btn-link:hover{color: #fff; background: linear-gradient(90deg, #4D7BFF 0%, #784EFF 100%); transform: translateY(-0.5rem);
box-shadow: 0px 12px 10px 0px rgba(81, 0, 255, 0.50);}
.btn-link:hover span{background: none;}

.challenge .row{padding-top: 6rem;}
.challenge-slider{padding: 6.5rem 0; overflow: hidden; display: flex; gap:2.4rem ;}
.challenge-slider .swiper-wrapper {
  transition-timing-function:linear; /* 또는 원하는 easing 함수 */
}
.challenge-slider .swiper-slide {width: 46.9rem;}
.challenge-slider .swiper-slide a{display: flex; width: 100%;  height: 26.2rem; background: url(../img/bg-chellenge.png) no-repeat; color: #fff; padding: 8.6rem 4rem 6.5rem 4rem;}
.challenge-slider .swiper-slide a:hover{background: url(../img/bg-chellenge-on.png) no-repeat; filter: drop-shadow(0px 8px 24px rgba(62, 0, 255, 0.50)); transform: translateY(-0.5rem);}
.challenge-slider .swiper-slide a dl{display: flex; flex-direction: column; }
.challenge-slider .swiper-slide a dt{font-size: 2rem; font-weight: 500; letter-spacing:-0.6px;overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-wrod;}
.challenge-slider .swiper-slide a dd{font-size: 1.6rem; color: var(--color-light-gray);letter-spacing: -0.48px; margin-top: auto;}
@media all and (max-width: 1200px) {
  .tech {background-size:170% auto; background-position: 50% 40%;}
  .tech .row{padding-top: 26rem; padding-bottom: 6rem;  position: relative;}
  .tech .line{display: flex; justify-content: center;}
  .tech .line span{top: 0; left: 50%; transition: all 0.2s ease; }
  .tech .line.active span{height: 16rem;}

  .section-msg.en h2{font-size: 2.6rem; font-weight: 300;}
  .section-msg.en .text{color:#fff; font-size: 18px; letter-spacing: -0.54px; font-weight: 400;}

  .challenge {padding-top: 10rem;}
  .challenge .section-msg {padding-left: 2.4rem; padding-right: 2.4rem;}
  .challenge .row{padding-top: 6rem;}
  .challenge-slider{padding: 4rem 0;}
  .btn-link{display: inline-flex;
    padding: 12px 12px 12px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px; border-radius: 40px;
    font-size: 1.6rem;
  }
  .challenge-slider .swiper-slide {width:33rem;}
  .challenge-slider .swiper-slide a{display: flex; width: 100%;  height: 18.4rem; background: url(../img/bg-chellenge.png) no-repeat; color: #fff; padding: 4.5rem 2.4rem 3rem 2.4rem;  background: url(../img/bg-chellenge-on.png) no-repeat; filter: drop-shadow(0px 8px 24px rgba(62, 0, 255, 0.50)); background-size: 100% auto;}
  .challenge-slider .swiper-slide a:hover{background-size: 100% auto;}
  .challenge-slider .swiper-slide a dt{font-size: 1.8rem;letter-spacing:-0.6px;}
  .challenge-slider .swiper-slide a dd{font-size: 1.4rem;}
}

.section-news {background: url(../img/bg-index-03.png) no-repeat -60rem 5rem; position: relative;}
.section-news .row{ padding: 30rem 0 20rem 0; position: relative; z-index: 1;}
.section-news .link{margin-top: 6rem;}
.index-news-list{margin-top: 6.5rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.6rem;}
.index-news-list a{display: flex; width: 49rem; height: 29.5rem;border-radius: 24px; opacity: 0;
border: 1px solid #252525;
background: linear-gradient(0deg, rgba(30, 30, 30, 0.20) 0%, rgba(30, 30, 30, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
backdrop-filter: blur(5px); color: #fff; padding: 4rem;}
.index-news-list a dl{display: flex; flex-direction: column;}
.index-news-list a dl dt{font-size: 2rem; margin-bottom: 0.8rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-wrod;}
.index-news-list a dl dd{font-size: 1.6rem; font-weight: 400; color: var(--color-light-gray); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-wrap:break-wrod;}
.index-news-list a dl dd.date{margin-top: auto;}
.index-news-list a:hover{border: 1px solid #3C65FF;
background: linear-gradient(0deg, rgba(38, 34, 255, 0.20) 0%, rgba(38, 34, 255, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
box-shadow: 0px 8px 24px 0px rgba(62, 0, 255, 0.50); transform: translateY(-0.5rem);}
.section-news .bottom-bg{position: absolute; bottom: 0; left: 0; right: 0; height:60rem;opacity: 0.3;
background: linear-gradient(0deg, #6334FF 2.5%, #000 56.13%); opacity: 0; z-index: 0;
}

@media all and (max-width: 1200px) {
  .section-news {background: none;}
  .section-news .row{ padding: 10rem 2.4rem; position: relative; z-index: 1;}
  .section-news .link{margin-top: 4rem;}
  .index-news-list{margin-top: 4rem; display: flex; flex-direction: column; gap: 0.8rem;}
  .index-news-list a{display: flex; width: 100%; height:auto;border-radius: 24px; opacity: 0; padding: 2.4rem;}
  .index-news-list a dl{display: flex; flex-direction: column;}
  .index-news-list a dl dt{font-size: 1.8rem;}
  .index-news-list a dl dd{font-size: 1.4rem;}
  .index-news-list a dl dd.date{margin-top: 2.4rem;}

  .section-news .bottom-bg{position: absolute; bottom: 0; left: 0; right: 0; height:60rem;opacity: 0.3;
  background: linear-gradient(0deg, #6334FF 2.5%, #000 56.13%); opacity: 0; z-index: 0;
  }
}


/* about */
.about-tech{padding-top: 35rem; background: url(../img/bg-about.png) no-repeat right top; text-align: center; padding-bottom: 20rem;}
.about-tech .slogan{font-size: 2.8rem; color: #d2d2d2; margin-bottom: 0.8rem;}
h2.title{font-size: 5.8rem; font-weight: 700;letter-spacing: -1.74px; text-align: center;}
h3.title{font-size: 4rem; font-weight: 500;letter-spacing: -1.2px; text-align: center;}
.sub-title{text-align: center; font-size: 2rem; letter-spacing: -0.6px; margin-top: 0.8rem; color: #C9C9C9;}

.about-tech dl{margin-top: 15rem;}
.about-tech dl dt{}
.about-tech dl dd{margin-top: 4.8rem;}
.about-tech dl dd ul{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:2.4rem;}
.about-tech dl dd ul li{display: flex; flex-direction: column; align-items: center; border-radius: 24px; gap: 1.6rem; padding: 4rem 0;
border: 1px solid #252525;
background: linear-gradient(0deg, rgba(30, 30, 30, 0.20) 0%, rgba(30, 30, 30, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
backdrop-filter: blur(5px); font-size: 2rem; font-weight: 500;}
.about-tech dl dd ul li img{width: 8rem;}

.about-vision {padding-top: 15rem; padding-bottom: 17rem; background: url(../img/bg-about-01.png) no-repeat 50% 50%; background-size: cover; }
.about-vision .section-msg .text{font-size: 1.8rem; margin-top: 4rem;}

.about-location{padding-top: 20rem; padding-bottom: 20rem;}
.location{display: flex; margin-top: 4rem;}
.location dl{display: flex; flex-direction: column; width: 33.33%; gap: 1.6rem;}
.location dl dt{margin-bottom: 0.8rem;}
.location dl dt button{display: flex; align-items: center; font-size: 2rem; gap:0.8rem}
.location dl dt button:hover{text-decoration: underline;}
.location dl dt button.active{text-decoration: underline;}
.location dl dd{display: flex; align-items: center; gap: 0.8rem; color: var(--color-light-gray);}
.map-block{margin-top: 4.8rem;height: 34rem; display: flex;}
.map-block iframe{ display: none; height: 100%;}
.map-block iframe:first-of-type{display: block;}

@media all and (max-width: 1200px) {
  .about-tech{padding-top:15rem; background: url(../img/bg-about-01-m.png) no-repeat right top; padding-bottom: 10rem; background-size: 100% auto;}
  .about-tech .slogan{font-size: 1.8rem;}
  h2.title{font-size: 2.8rem; letter-spacing: -0.84px;}
  h3.title{font-size: 2.4rem; letter-spacing: -0.7px;}
  .sub-title{text-align: center; font-size: 2rem; letter-spacing: -0.6px; margin-top: 0.8rem; color: #C9C9C9;}

  .about-tech dl{margin-top: 10rem;}
  .about-tech dl dd{margin-top: 2.4rem;}
  .about-tech dl dd ul{display:flex; grid-template-columns: 1fr 1fr; gap:1.6rem; flex-wrap: wrap; justify-content: center;}
  .about-tech dl dd ul li{font-size: 1.6rem; padding: 1.6rem; aspect-ratio: 1/1;justify-content: center; width: 15.5rem; flex: none; white-space: wrap; word-break: break-all; word-break: keep-all;}
  .about-tech dl dd ul li br{display: none;}
  .about-tech dl dd ul li img{width: 5rem; border-radius: 1.6rem;}

  .about-vision {padding-top: 10rem; padding-bottom: 10rem;}
  .about-vision .section-msg .text{font-size: 1.6rem; margin-top: 2.4rem;}

  .about-location{padding-top: 10rem; padding-bottom: 10rem;}
  .location{display: flex; margin-top: 2.4rem; flex-direction: column; gap: 3rem;}
  .location dl{width:100%;}
  .location dl dt{margin-bottom: 0rem;}
  .location dl dt button{font-size: 1.6rem;}
  .location dl dd{font-size: 1.4rem;}
  .map-block{margin-top: 4.8rem;height: 34rem; display: flex;}
  .map-block iframe{ display: none; height: 100%;}
  .map-block iframe:first-of-type{display: block;}
}

.contents-head{padding-top: 15rem; padding-bottom: 6rem; border-bottom: 1px solid #1B1B1B;}
.contents-head .link{margin-top: 5rem;}
.mail-content hr{border-top: 1px dashed #545454; height: 0; background: none;}
.mail-block{padding: 10rem 0;}
.mail-block .mail-head{margin-bottom: 4.8rem;}


.solution-block{display: flex; gap: 11rem; align-items: center; justify-content: center;}
.solution-block .image{width: 55.6rem;}
.solution-con{display: flex; flex-direction: column; gap: 3rem;}
.solution-con dl{display: flex; flex-direction: column; gap: 0.4rem;}
.solution-con dl dt{font-size: 2.4rem; font-weight: 600;letter-spacing: -0.72px;}
.solution-con dl dd{font-size: 1.6rem; letter-spacing: -0.48px; color: var(--color-light-gray);}

.security{display: grid; grid-template-columns: 1fr 1fr 1fr; gap:2.4rem;}
.security .se-con{border-radius: 24px;
b
background: linear-gradient(0deg, rgba(30, 30, 30, 0.20) 0%, rgba(30, 30, 30, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
backdrop-filter: blur(5px); transition: all 0.4s ease; overflow: hidden;}
.security .se-con:hover{
box-shadow: 0px 8px 24px 0px rgba(62, 0, 255, 0.50);
backdrop-filter: blur(5px); transform: scale(1.05);}
.security .se-con .con-head {display: flex; align-items: center;}
.security .se-con .con-head .image{}
.security .se-con dl{display: flex; flex-direction: column; gap: 0.4rem; font-size: 2rem; letter-spacing: -0.6px;}
.security .se-con dl dt{font-weight: 500;}
.security .se-con dl dd{color: var(--color-highlight);}
.security .se-con .text{  height: 180px; padding:2.4rem 2.4rem 3.2rem 2.4rem; color: var(--color-light-gray); gap: 0.8rem; display: flex; flex-direction: column; background: linear-gradient(0deg, rgba(30, 30, 30, 0.20) 0%, rgba(30, 30, 30, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
backdrop-filter: blur(5px); }
.security .se-con .text-list{display: flex; flex-direction: column; gap: 0.8rem; color: #C9C9C9;}
.security .se-con .text-list li{display: flex;}
.security .se-con .text-list li::before{content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; margin-right: 8px; margin-top:8px;}

.benefit{display: flex; flex-direction: column; gap:6rem;}
.benefit .benefit-con{display: flex; align-items: center;}
.benefit .benefit-con .image{max-width: 71rem; flex: none;}
.benefit .benefit-con dl{padding: 8rem; flex-grow: 1;}
.benefit .benefit-con dl dt{color: var(--color-highlight); font-size: 1.8rem;}
.benefit .benefit-con dl dd.title{margin-top: 0.8rem; font-size: 3.2rem; font-weight: 700; letter-spacing: -0.96px;}
.benefit .benefit-con dl dd.text{margin-top: 2.4rem; color: var(--color-light-gray); font-size: 1.8rem;letter-spacing: -0.54px;}
.benefit .benefit-con:nth-of-type(2){flex-direction: row-reverse;}

.business .image{padding: 0 16.4rem;}
.business .banner{display: flex; align-items: center; justify-content: space-between; padding:8rem 6rem; margin-top: 20rem; background: url(../img/bg-mail-banner.png) no-repeat; background-size:cover; border-radius: 2.4rem;}
.business .banner dt{font-size: 3.2rem; font-weight: 700;letter-spacing: -0.96px;}
.business .banner dd{font-size: 2rem; letter-spacing: -0.6px; margin-top: 0.4rem;}

@media all and (max-width: 1200px) {
  .contents-head{padding-top: 15rem; padding-bottom: 4rem;}
  .contents-head .link{margin-top: 5rem;}
  .mail-block{padding: 10rem 0;}
  .mail-block .mail-head{margin-bottom: 4rem;} 

  .solution-block{flex-direction: column; gap: 3rem; }
  .solution-block .image{width:100%; max-width: 50rem;}
  .solution-con{gap: 2.4rem;}
  .solution-con dl dt{font-size: 1.8rem; letter-spacing: -0.54px;}
  .solution-con dl dd{font-size: 1.4rem; letter-spacing: -0.42px;}

  .security{display:flex; flex-direction: column; gap:1.6rem;}
  .security .se-con{}
  
  .security .se-con .con-head .image{}
  .security .se-con .con-head dl{gap: 0.4rem; font-size:1.6rem; letter-spacing: -0.48px;}
  .security .se-con .con-head dl dt{font-weight: 500;}
  .security .se-con .con-head dl dd{color: var(--color-highlight);}
  .security .se-con .text{font-size: 1.4rem;}

  .benefit{gap:4rem;}
  .benefit .benefit-con{display: flex; flex-direction: column; align-items: center;}
  .benefit .benefit-con .image{max-width: 71rem; border-radius: 2.4rem; overflow: hidden;}
  .benefit .benefit-con dl{padding: 0rem; flex-grow: 1; margin-top: 1.6rem; width: 100%;}
  .benefit .benefit-con dl dt{font-size: 1.6rem;}
  .benefit .benefit-con dl dd.title{font-size: 2.4rem;letter-spacing: -0.72px;}
  .benefit .benefit-con dl dd.text{font-size: 1.6rem;letter-spacing: -0.48px; margin-top: 0.8rem;}
  .benefit .benefit-con dl dd.text br{display: none;}
  .benefit .benefit-con:nth-of-type(2){flex-direction:column;}

  .business .image{padding: 0;}
  .business .banner{display: flex; flex-direction: column; align-items:flex-start; padding:2.4rem; margin-top: 4rem; border-radius: 1.2rem; gap: 4rem;}
  .business .banner dt{font-size: 2.4rem; font-weight: 700;letter-spacing: -0.5px;}
  .business .banner dd{font-size: 1.6rem; letter-spacing: -0.3px; margin-top: 0.4rem;}
  /* .business .banner a{align-self: flex-end;} */
}
.news-block{ padding: 20rem 0;}
.news-con{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:2.4rem;}
.news-con li a{display: flex; height: 27rem;
padding: 40px;
flex-direction: column;
align-items: flex-start;
gap: 60px; flex: 1 0 0;border-radius: 24px;
border: 1px solid #252525;
background: linear-gradient(0deg, rgba(30, 30, 30, 0.20) 0%, rgba(30, 30, 30, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
backdrop-filter: blur(5px);}
.news-con li a:hover{
border: 2px solid #3C65FF;
background: linear-gradient(0deg, rgba(38, 34, 255, 0.20) 0%, rgba(38, 34, 255, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
box-shadow: 0px 8px 24px 0px rgba(62, 0, 255, 0.50);
backdrop-filter: blur(5px);}
.news-con li a dl{display: flex; flex-direction: column; height: 100%;}
.news-con li a dl dt{color: #fff; font-size: 20px; font-weight: 500;
letter-spacing: -0.6px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-wrod;}
.news-con li a dl dd{color: var(--color-light-gray); font-size: 1.6rem;
letter-spacing: -0.48px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-wrod;}
.news-con li a dl dd.text{margin-top: 0.8rem;}
.news-con li a dl dd.date{margin-top: auto;}

.more{display: flex; justify-content: center; margin-top: 4rem;}
.more button{height: 4.8rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; background:#424242; padding: 0 10rem; gap: 0.8rem;}

@media all and (max-width: 1200px) {
  .news-block{padding: 10rem 0;}
  .news-con{display:flex; flex-direction: column; gap:1.6rem; }
  .news-con li a{display: flex; height: auto; padding: 2.4rem;}
  .news-con li a dl{display: flex; flex-direction: column; height: 100%;}
  .news-con li a dl dt{font-size:18px;}
  .news-con li a dl dd{font-size: 1.4rem;}
  .news-con li a dl dd.date{margin-top:2.4rem;} 
  .more button{height: 4.8rem; flex-grow: 1;}
}

.lab-con{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:2.4rem;}
.lab-con li a{display: flex; height: 26.2rem; width: 46.4rem;
padding: 62px 40px 38px 40px; background: url(../img/bg-lab.png) no-repeat; background-size: cover;}
.lab-con li a:hover{background: url(../img/bg-lab-on.png) no-repeat; background-size: cover; backdrop-filter: blur(5px);}
.lab-con li a dl{display: flex; flex-direction: column; height: 100%;}
.lab-con li a dl dt{color: #fff; font-size: 20px; font-weight: 500;
letter-spacing: -0.6px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-wrod;}
.lab-con li a dl dd{color: var(--color-light-gray); font-size: 1.6rem;
letter-spacing: -0.48px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-wrod;}
.lab-con li a dl dd.text{margin-top: 0.8rem;}
.lab-con li a dl dd.date{margin-top: auto;}

@media all and (max-width: 1200px) {
  .lab-con{display:flex; flex-direction: column; gap:1.6rem; }
  .lab-con li a{
    display: flex; width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px; flex: 1 0 0;border-radius: 24px;
    border: 1px solid #252525;
    background: linear-gradient(0deg, rgba(30, 30, 30, 0.20) 0%, rgba(30, 30, 30, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
    backdrop-filter: blur(5px);
    height: auto; padding: 2.4rem;}
    .lab-con li a:hover{
border: 2px solid #3C65FF;
background: linear-gradient(0deg, rgba(38, 34, 255, 0.20) 0%, rgba(38, 34, 255, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
box-shadow: 0px 8px 24px 0px rgba(62, 0, 255, 0.50);
backdrop-filter: blur(5px);}
  .lab-con li a dl{display: flex; flex-direction: column; height: 100%;}
  .lab-con li a dl dt{font-size:18px;}
  .lab-con li a dl dd{font-size: 1.4rem;}
  .lab-con li a dl dd.date{margin-top:2.4rem;} 
}

.process{text-align: center;}
.process h4{color: var(--color-highlight); font-size: 2.4rem;letter-spacing: -0.72px;}
.process .process-con{margin-top: 4rem; display: flex; flex-direction: column; gap: 2.4rem;}
.process .process-con dl{display: flex; justify-content: center; font-size: 1.8rem; letter-spacing: -0.54px;}
.process .process-con dl dt span{width: 20rem; height: 6rem; border-radius: 3rem; background: #28369A; display: flex; align-items: center; justify-content: center;}
.process .process-con dl dd {display: flex; align-items: center;}
.process .process-con.en dl dd  span{font-size: 1.6rem; padding: 0 1.5rem;}
.process .process-con dl dd span{width: 20rem; height: 6rem; border-radius: 3rem; background: #282E58; display: flex; align-items: center; justify-content: center;}
.process .process-con dl:last-of-type dt span{background: #3A3A3A;}
.process .process-con dl:last-of-type dd span{background: #1B1B1B;}
.process .process-con dl dd::before{content: ""; display: flex; width: 1.6rem; height: 1.6rem; background: url(../img/ico-arrow-guard.svg) no-repeat; margin: 0 0.8rem;}
.mailguard-info .info-con{display: flex; justify-content: center; gap: 2.4rem;}
.mailguard-info .info-con ul{width: 708px; color: var(--color-light-gray);
padding: 24px; gap: 0.8rem; display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; font-size: 1.8rem; letter-spacing: -0.54px; border-radius: 24px;
border: 1px solid #252525;
background: linear-gradient(0deg, rgba(30, 30, 30, 0.20) 0%, rgba(30, 30, 30, 0.20) 100%), linear-gradient(320deg, rgba(0, 0, 0, 0.00) -1.07%, rgba(255, 255, 255, 0.02) 98.98%);
backdrop-filter: blur(5px);}
.guard-img{display: flex; justify-content: center;}
.m-info{display: none;}
.m-image{display: none;}
@media all and (max-width: 1200px) {
  .mailguard-info{}
  .mailguard-info .info-con{flex-direction: column; gap: 0; align-items: center;}
  .mailguard-info .info-con ul{width: 100%;}
  .m-info{display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 4rem;}
  .m-info p{height: 4.6rem; border-radius: 10rem; background: #383786; width: 100%; align-items: center; display: flex; justify-content: center;}
  .m-info dl{margin-top: 1.6rem;}
  .m-info dl dt{color: #96B8FF; margin-bottom: 0.4rem;}
  .m-info dl dd{color: var(--color-light-gray);}
  .guard-img{display: none;}
  .m-image{width: 18rem; display: block;}
  .m-image:last-of-type{margin-top: 4rem;}

  .process{text-align: center;}
  .process h4{font-size: 1.6rem; margin-top: -1.6rem;}
  .process .process-con{margin-top: 2.4rem; display: flex; flex-direction:row; gap: 1rem; justify-content: space-between;}
  .process .process-con dl{display: flex; flex-direction: column; justify-content: center; font-size: 1.6rem; flex-grow: 1;}
  .process .process-con dl dt span{width: 100%; flex-grow: 1;}
  .process .process-con dl dd {display: flex; align-items: center; flex-direction: column;}
  .process .process-con dl dd span{width:100%;}
  
  .process .process-con dl dd::before{margin: 0.8rem 0; transform: rotateZ(90deg);}
  .mail-content hr{margin: 0;}
}

.remote{position: fixed; z-index: 99; bottom: 1.6rem; right:1.6rem; transition: all 1s ease; transform: translateX(10rem);}
.remote.active{transform: translateX(0);}
.remote a{display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 10rem; background: linear-gradient(90deg, #5786FF 0%, #8358FF 100%); transition: all 0.2s ease;
}
.remote a span{color: #fff; font-size: 1.8rem; overflow: hidden; width: 0; white-space: nowrap;}
.remote a:hover{gap:1rem; width: 15rem; padding: 0 2.4rem;}
.remote a:hover span{width:6.5rem;}

.popup-wrap{position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1001; background-color: rgba(0,0,0,0.3); align-items: center; justify-content: center; display: flex; pointer-events: none; gap: 5rem;}
.popup-wrap .popup{display: flex; flex-direction: column; background: #424242; pointer-events: all;}
.popup-wrap .pop-close{display: flex; justify-content: flex-end; padding: 0.9rem 1rem;}
.popup-wrap .pop-close button{display: flex; align-items: center; gap:0.4rem;}

@media all and (max-width: 1200px) {
  .popup-wrap .popup{position: absolute; z-index: 1002;}
}
@media all and (max-width: 600px) {
  .popup-wrap .popup{width: 80%;}
  .popup-wrap .popup a img{width: 100%;}
  .remote{display: none;}
}


dt.boreder
{
  display: inline-block;
  text-align: center;
  overflow: hidden;
  padding: 4.5px 32px;
  border-color: #ffffff;
  border: 1px solid transparent;
  border-color: #fff;
  width: 78%;
  text-align: center;
  margin-bottom: 2%; 
  border-radius: 30px;
}
dt.boreder_2
{
  display: inline-block;
  text-align: center;
  overflow: hidden;
  padding: 4.5px 32px;
  border-color: #ffffff;
  border: 1px solid transparent;
  border-color: #fff;
  width: 80%;
  text-align: center;
  margin-bottom: 2%; 
  border-radius: 30px;
}
a.jt_btn.jt_basic_btn.primary {
  color: #fff;
}

@media screen and (max-width: 640px) {
  .sub_solution .cont + .cont {
      margin-top: 100px;
  }
  dl.title_desc {
    padding: 20px 30px;
    border-radius: 6px;
}
.title_desc dd {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  margin-top: 5px;
}
.title_desc + .title_exp {
  margin-top: 47px;
}
.sub_solution .cont + .cont {
  margin-top: 100px;
}
.title_exp .left_box h3 {
  font-size: 240%;
}
.title_exp .img_box {
  margin-top: 20px;
}
}

@media screen and (max-width: 860px) {
  .title_desc dt {
      font-size: 180%;
  }

  .title_exp .left_box {
    width: 100%;
    padding-right: 0;
}

.title_exp .right_box {
  width: 100%;
}
}
.cont.sec01 {
  margin-top: 140px;
}
.title_desc.aos-init.aos-animate {
  opacity: 1;
  transform: translateZ(0);
  position: relative;
  font-size: var(--title-20);
  padding: 20px 200px 18px 40px;
  background: linear-gradient(90deg, #0075FF -7%, #0A0C35 80%), #000;
  border-radius: 12px;
  box-sizing: border-box;
}
.title_exp {
  display: flex
;
  flex-wrap: wrap;
  gap: 30px 40px;
  margin-top: 62px;
}
.img_box.aos-init.aos-animate {
  font-size: 0;
  width: 100%;
  text-align: center;
  margin-top: 60px;
  box-sizing: border-box;
  margin-bottom: 6%;
}
.left_box {
  width: calc(100% / 2 - 20px);
  font-size: var(--title-20);
  padding-right: 30px;
  box-sizing: border-box;
}
h3.aos-init.aos-animate {
  font-size: 260%;
  font-weight: 200;
  color: var(--point-white);
  line-height: 1.35;
  letter-spacing: -0.04em;
}
.right_box {
  width: calc(100% / 2 - 20px);
  box-sizing: border-box;
}
ul.bullet_list {
  position: relative;
  font-size: var(--title-20);
}
ul.bullet_list.hyphen_list {
  margin-top: 17px;
}
li.aos-init.aos-animate {
 
    font-size: inherit;
    font-weight: 300;
    color: var(--point-white);
    letter-spacing: -0.04em;
    line-height: 1.54;
    display: flex;
    align-items: baseline;
 


}

.img_box.aos-init.aos-animate {
  font-size: 0;
  width: 100%;
  text-align: center;
  margin-top: 60px;
  box-sizing: border-box;
  margin-bottom: 6%;
}
dd.v2 {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  font-size: 110%;
  font-weight: 400;
  color: var(--point-white);
  letter-spacing: -0.04em;
}
dt.whit {
  font-size: 200%;
  font-weight: 400;
  color: var(--point-white);
  letter-spacing: -0.04em;
  line-height: 1.55;
  box-sizing: border-box;
}
.img_box.aos-init.aos-animate img{
  border: 0 none;
  vertical-align: middle;
  max-width: 68%;
  max-height: 100%;
}
/**a.jt_btn.jt_basic_btn.primary:hover {
  color:#000;
}

a.jt_btn.jt_basic_btn.primary:before {
  background-color: #ffffff;
}

a.jt_btn:before {
  content: '';
  display: block;
  width: 120%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: translateX(-101%) skewX(-17.62deg);
  -ms-transform: translateX(-101%) skewX(-17.62deg);
  transform: translateX(-101%) skewX(-17.62deg);
  -webkit-transition: -webkit-transform .55s cubic-bezier(.52,.08,.18,1);
  transition: -webkit-transform .55s cubic-bezier(.52,.08,.18,1);
  transition: transform .55s cubic-bezier(.52,.08,.18,1);
  transition: transform .55s cubic-bezier(.52,.08,.18,1), -webkit-transform .55s cubic-bezier(.52,.08,.18,1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}**/
@media screen and (max-width: 640px) {
  dl.title_desc.aos-init.aos-animate {
      padding: 20px 30px;
      border-radius: 6px;
  }
}
@media screen and (max-width: 640px) {
  dd.v2 {
      position: relative;
      top: auto;
      right: auto;
      transform: none;
      margin-top: 5px;
  }
}
@media screen and (max-width: 860px) {
  dt.whit {
      font-size: 180%;
  }
}
@media screen and (max-width: 640px) {
  h3.aos-init.aos-animate {
      font-size: 240%;
  }
}
@media screen and (max-width: 640px) {
.img_box.aos-init.aos-animate img {
  max-width: 100%;
}
}

@media screen and (max-width: 640px) {
  .solution-block .image {
    max-width: 80%;
  }
  }




  .wrapper_realsecu { display: flex; height: 70vh; align-items: center; justify-content: center; width: 100%; margin: 0 auto; flex-wrap: wrap; }
  .sidebar_realsecu { width: 250px; padding: 20px; display: flex; flex-direction: column; align-items: center; border-radius: 10px 0 0 10px; }
  .btn_realsecu { 
      background: none; 
      color: gray; 
      font-weight: bold;
      padding: 15px 20px; 
      border: none; 
      font-size: 18px; 
      cursor: pointer; 
      width: 200px; 
      height: 60px; 
      text-align: center; 
      transition: background 0.3s, color 0.3s; 
      border-radius: 30px; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      margin-bottom: 10px; 
  }
  .btn_realsecu:hover, .btn_realsecu.active { 
      background: #ff0000; 
      color: white;
      opacity: 1;
  }
.content-wrapper_realsecu {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 중요 */
    padding: 50px;
    max-width: 1100px;
    flex-wrap: wrap;
    position: relative; /* 위치 기준점 */
    min-height: 450px; /* 최소 높이 확보 */
}
  .text-content_realsecu { max-width: 500px; opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s; display: none; order: 1; }
  .text-content_realsecu.active { opacity: 1; transform: translateY(0); display: block; }
  .text-content_realsecu h2 { font-size: 48px; color: #fff; font-weight: bold; }
  .text-content_realsecu p { font-size: 22px; color: #fff; font-weight: 300; }
.circle-wrapper_realsecu {
    position: absolute; /* 고정 */
    top: 0;
    right: 10%; /* 우측 고정 */
    width: 400px;
    height: 400px;
}
  .circle-container_realsecu { 
      width: 100%; 
      height: 100%; 
      border-radius: 50%; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      box-shadow: 0 0 20px rgba(0, 123, 255, 0.5); 
      overflow: hidden; 
      position: relative;
  }
  .circle-container_realsecu img { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      border-radius: 50%; 
      animation: fadeEffect 1s ease-in-out; 
  }
  .dotted-circle_realsecu {
      position: absolute;
      width: 450px;
      height: 450px;
      border-radius: 50%;
      border: 4px dotted #FF0000;
      top: -25px;
      left: -25px;
      animation: rotateCircle 8s linear infinite;
  }
  @keyframes fadeEffect {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
  }
  @keyframes rotateCircle {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
  }
  
  @media (max-width: 768px) {
      .wrapper_realsecu { flex-direction: column; height: auto; padding: 20px; }
      .sidebar_realsecu { width: 100%; flex-direction: row; justify-content: center; }
      .btn_realsecu { width: auto; padding: 10px; font-size: 16px; }
      .content-wrapper_realsecu { flex-direction: column; align-items: center; padding: 20px; }
      .circle-wrapper_realsecu { width: 300px; height: 300px; order: -1; }
      .text-content_realsecu { order: 1;         margin-top: 15%;}
      .text-content_realsecu:nth-child(2).active { order: 2; }
      .text-content_realsecu h2 { font-size: 32px; }
      .text-content_realsecu p { font-size: 18px; }
      .dotted-circle_realsecu { width: 350px; height: 350px; top: -25px; left: -25px; }
  }
@media (max-width: 768px) {
    .circle-wrapper_realsecu {
        position: relative;
        top: auto;
        right: auto;
        margin: 40px auto 0;
        width: 300px;
        height: 300px;
    }

    .dotted-circle_realsecu {
        width: 350px;
        height: 350px;
        top: -25px;
        left: -25px;
    }

    .content-wrapper_realsecu {
        justify-content: center;
        align-items: center;
        padding: 30px 20px;
        min-height: auto;
    }

    .text-content_realsecu h2 {
        font-size: 32px;
        text-align: center;
    }

    .text-content_realsecu p {
        font-size: 18px;
        text-align: center;
    }
}
  .real_mibn-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }

  .real_mibn-container {
    width: 100%;
    max-width: 1440px;
    background-color: #080808;
    border-radius: 20px;
    padding: 40px 60px;
        border: 1px solid #252525;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
  }

  .real_mibn-text {
    font-size: 24px;
    line-height: 1.6;
    flex: 1 1 60%;
    min-width: 280px;
  }

  .real_mibn-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    color: #fff;
    border-bottom: 1px solid white;
    text-decoration: none;
  }

  .real_mibn-image {
    width: 120px;
    height: auto;
    flex: 1 1 30%;
    min-width: 100px;
    margin-top: 20px;
  }

  @media (max-width: 768px) {
    .real_mibn-container {
      flex-direction: column;
      text-align: center;
      padding: 30px 20px;
    }

    .real_mibn-text {
      font-size: 18px;
    }

    .real_mibn-image {
      width: 100px;
      margin-top: 20px;
    }
  }

  .solution-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-top: 8%;
    padding-bottom: 5%;
  }

  @media(min-width: 768px) {
    .solution-container {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .solution-left {
    flex: 1;
    animation: fadeInUp 1s ease-out forwards;
  }

  .solution-right {
    flex: 1;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.5s;
    opacity: 0;
    margin-right: 5%;
  }

  .solution-title {
    font-size: 40px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }

  .solution-icon-box {
    width: 24px;
    height: 24px;
    background-color: #facc15;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 8px;
  }

  .solution-text {
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .solution-button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  @media(min-width: 480px) {
    .solution-button-group {
      flex-direction: row;
    }
  }

  .solution-btn {
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
  }

  .solution-btn-outline {
    background-color: #3c6bf9;
    color: #fff;
    border: 2px solid #3c6bf9;
    position: relative;
    overflow: hidden;
    transform: scale(1);
    transition: all 0.3s ease;
  }

  .solution-btn-outline:hover {
    background-color: #3c6bf9;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 72, 189, 0.3);
  }

  .solution-btn-outline:active {
    transform: scale(0.96);
  }

  .solution-img-wrap {
    max-width: 320px;
    margin: 0 auto;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


  .solution-gradient-text {
    background: #ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  .download-btn {
  display: inline-flex;
  align-items: center;
  background-color: #4351fd;
  color: white;
  padding: 13px 18px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  transition: all 0.3s ease;
}

.download-btn:hover {
  background-color: #4351fd;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.download-btn i {
  margin-right: 10px;
  font-size: 20px;
}
@media (max-width: 767px) {
.solution-img-wrap {
max-width: 40%;
}

.solution-right {
margin-top: 40px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
}