.foot_as{position: fixed; right: 3rem; bottom: 3rem; z-index: 6;
background: #1936B2; width: 70px; height: 70px; border-radius: 70px;
display: inline-flex; gap:0px; justify-content: center;
    align-items: center; max-width: 70px; transition-duration: .8s; overflow: hidden;
    min-width: 70px}

.foot_as:hover{width: auto; max-width: 250px; padding: 0 25px; gap:20px;}
.foot_as span{font-size: 16px; color: #fff; 
word-break: keep-all; width: 0; overflow: hidden; visibility: hidden; opacity: 0;
 transition-duration: .8s; max-width: 0}

.foot_as:hover span{width: auto; visibility: visible; opacity: 1; max-width: 150px;}

/*pop*/

.videio_pop{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999;
background: rgba(0,0,0,0.8); display: none}
.videio_pop .videio_pop_btn_close{position: absolute; right: 6rem; top: 30px;}
.videio_pop .videio_pop_are{overflow: hidden; width: 100%; max-width: 1280px;
border-radius: 20px; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);}
.videio_pop .videio_pop_are video{width: 100%; display: block}


.videio_pop.atv_pop{display: block}

.agree_pop{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,0.5)}
.agree_pop.atv_pop{display: block}

.agree_pop_content{position: absolute; left: 50%;
  top: 50%; background: #fff; padding: 40px; border-radius: 10px;
  transform: translate(-50%, -50%); width: 100%; max-width: 900px}

.pop03 .agree_pop_content{max-width: 660px;}

.agree_pop_content .agree_title{position: relative; }

.agree_pop_content .agree_title h2{font-size: 25px;}
.agree_pop_content .agree_title .close_pop{position: absolute; right: 0; top: 0; cursor: pointer}

.agree_pop_info{max-height: 400px; overflow-y: auto; margin-top: 15px; padding: 15px 0; border-top: 1px solid #ddd}
.agree_pop_info h3{font-size: 18px; font-weight: bold; word-break: keep-all; margin-bottom: 10px}
.agree_pop_info p{font-size: 16px; font-weight: 400; word-break: keep-all}
.agree_pop_info p + h3{margin-top: 30px}

.product_pop_info{margin-top: 15px; padding: 15px 0;max-height: 80vh; overflow-y: auto;}


.inner{padding: 0 6rem}
.inner2{padding: 0 8rem}


/*head*/

body.all_menu{height: 100vh; overflow: hidden}

.header{position: absolute; left: 0; top: 30px; width: 100%; z-index: 9998}
.header .logo{
	display: inline-block;
	width: 179px; height: 61px;
	background: url(../img/logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 119px auto;
	position: absolute; left: 6rem; top: 30px
}

.header .nav_top{display: flex; gap:80px; text-align: center;
    justify-content: center;}
.header .nav_top li a.onedeps{height: 100px; display: flex; font-size: 18px; color: #fff;
justify-content: center;
    align-items: center; transition-duration: .5s; text-transform: uppercase}

.header .nav_top li:hover a.onedeps{color: #1936B2}

.header .nav_top li{position: relative}
.header .nav_top li .sub_deps{position: absolute; width: 170px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.95);
/* dropb */
box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.10); padding: 0px 15px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); transition-duration: .8s; visibility: hidden; overflow: hidden; opacity: 0;
    height: 0; max-height: 0; text-align: left}

.header .nav_top li:hover .sub_deps{opacity: 1; height: auto; max-height: 500px; visibility: visible; padding: 15px 15px}

.header .nav_top li .sub_deps:after{content: '';
width: 8px; height: 8px; background: #1936B2; left: 50%;
    transform: translateX(-50%); top: -4px; z-index: 2; position: absolute; border-radius: 8px}    

.header .nav_top li .sub_deps a{display: block; color: #505053; transition-duration: .5s; font-size: 16px; font-weight: 600}
.header .nav_top li .sub_deps a + a{margin-top: 5px; padding-top: 5px; border-top: 1px solid #ddd}
.header .nav_top li .sub_deps a:hover{color: #1B1B1B}


.header .right{position: absolute; right: 6rem; top: 30px; display: flex; gap: 20px;     align-items: center;}
.header .right .lang{display:inline-flex; gap:8px; padding: 10px 15px;
border-radius: 40px;
border: 2px solid #FFF;     align-items: center;}
.header .right .lang a{color: #fff; font-size: 16px; opacity: .6; transition-duration: .5s}
.header .right .lang i{width: 1px; height: 8px; 
background: rgba(255, 255, 255, 0.60);}
.header .right .lang a.on{opacity: 1}


.all_btn{width: 40px; height: 20px; position: relative}
.all_btn span{width: 100%; height: 2px; background: #fff; position: absolute; transition-duration: .5s}
.all_btn span:first-child{top: 0; left: 0}
.all_btn span:last-child{bottom: 0; left: 0}

.all_menu .all_btn span:first-child{top: 50%;
    left: 0;
    transform: rotate(45deg) translateY(calc(-50% + 0.5px));}
.all_menu .all_btn span:last-child{top: 50%;
    left: 0;
    transform: rotate(-45deg) translateY(calc(-50% + 0.5px)); bottom: auto}


.site_map{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9992;
background: rgba(27, 27, 27, 0.90);
backdrop-filter: blur(10px);
display: flex;
    justify-content: center;
    align-items: center; opacity: 0; visibility: hidden; transition-duration: .8s}


.site_map .nav_top{display: flex; gap:12rem}
.site_map .nav_top li a.onedeps{color: #fff; font-size: 35px; font-weight: 800; text-transform: uppercase}
.site_map .nav_top li .sub_deps{margin-top: 38px; }
.site_map .nav_top li .sub_deps a{display: block; font-size: 18px ; color: #fff; word-break: keep-all; opacity: .6; transition-duration: .8s}
.site_map .nav_top li .sub_deps a + a{margin-top: 15px;}
.site_map .nav_top li .sub_deps a:hover{opacity: 1}





.all_menu .site_map{opacity: 1; visibility: visible}



/*main_cisual*/

.main_visual_are{padding: 30px;}
.main_visual_are .main_visual{border-radius: 20px; overflow: hidden; 
height: calc(100vh - 60px); background: #333}


.main_visual{position: relative}
.main_visual .txt{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 10rem; z-index: 2;
flex-direction:column ;
justify-content:center;
align-items :flex-start;
display: flex;
}

.main_visual .txt h2{color: #fff; font-size: 60px; font-weight: 800; line-height: normal; word-break: keep-all}
.main_visual .txt p{margin-top: 30px; font-size: 18px; font-weight: 800; color: #fff}



.main_visual .txt .view_more_r{margin-top: 50px;}


.slider-status {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: sans-serif;
  color: white;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 0 10rem 3rem;
  z-index: 2;
  width: 100%;
}

.progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.3);
  position: relative;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width 0.1s linear;
}

.slider-status .counter{display: flex; gap:6px; align-items: center;}
.slider-status .counter span{font-size: 16px; color: #fff; font-weight: 500; opacity: .5}
.slider-status .counter span.current-slide{opacity: 1}
.slider-status .counter i{
	width: 4px;
height: 4px;
aspect-ratio: 1/1;
background: #fff; opacity: .5;
border-radius: 4px;
}




.main_visual_slide .box{overflow: hidden; height: calc(100vh - 60px); background: #000}
.main_visual_slide .box video,
.main_visual_slide .box img{
	width: 100%; height: 100%;
	object-fit:cover; opacity: .6
}




/*main_parnter*/

.main_partner{padding: 140px 0; overflow: hidden}

.main_title{margin-bottom: 80px}
.main_title.center{text-align: center}
.main_title h2{font-size: 60px; font-weight: 800; color: #fff; line-height: 150%; word-break: keep-all}
.main_title h2 b{color: #1936B2}
.main_title p{font-size: 18px; color: #fff; word-break: keep-all; line-height: 150%; margin-top: 30px;}

.main_title h4{font-size: 18px; color: #fff; word-break: keep-all; line-height: 150%; opacity: .6; margin-bottom: 20px }

.textslide .thum{padding: 0 20px}
.textslide .thum img{max-width: 100%}
.textslide + .textslide{margin-top: 20px}


.textslide.text-marquee2{transform: scaleY(-1);}
.textslide.text-marquee2 .slick-slide {transform: scaleY(-1);}








 #intro{
  position: fixed;
  inset: 0;
  background:#111;         /* or your brand color */
  display:grid;
  place-items:center;
  z-index:9999;
  /* fade away AFTER the logo finishes drawing+fill */
  animation: intro-out 700ms ease forwards;
  animation-delay: calc(var(--total, 2500ms) + 200ms);
}

@keyframes intro-out{
  to{ opacity:0; visibility:hidden }
} 
  
  
  .logo{width:400px; height:auto}

  /* 스트로크(윤곽선) 그리기 */


svg.logo {
  width: 400px; /* adjust as needed */
  overflow: visible;
}

/* start with a zero-width mask that grows left→right */
svg.logo {
  -webkit-mask-image: linear-gradient(to right, #000 0 0);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 0% 100%;
  -webkit-mask-position: left;
  mask-image: linear-gradient(to right, #000 0 0);
  mask-repeat: no-repeat;
  mask-size: 0% 100%;
  mask-position: left;

  animation: reveal-left 2s ease forwards;
}

@keyframes reveal-left {
  to {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}



.custom_select::-ms-expand { 
	display: none;
}
.custom_select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


.custom_select {
  { ... }
  width: 200px;
  height: 60px;
  background:#111 url('../img/common/custom_select.svg') calc(100% - 15px) center no-repeat;
  background-size: 12px auto;
  padding: 0px 30px 0px 20px;
  font-size:18px;
  outline: 0 none;
  font-size: 18px; color: rgba(255,255,255,.5);
 border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.20);
}
.custom_select option {
  background: black;
  color: #fff;
  padding: 3px 0;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  background: rgba(25, 54, 178, 0.80);
  color: #fff;
  display: none; /* 기본적으로 숨김 */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 150px;
  pointer-events: none;
  transform: translate(-100%, -100%);

  user-select: none;
  z-index: 9999;
  gap:20px; display: flex;
  backdrop-filter: blur(5px);
}


.custom-cursor:after{content: '';
background: url(../img/common/next.png); width: 6px; height: 10px; background-repeat: no-repeat; background-size: 100% auto}


.custom-cursor:before{content: '';
background: url(../img/common/prev.png); width: 6px; height: 10px; background-repeat: no-repeat; background-size: 100% auto}

















:root{--vh:1vh; --headerHeight: 0px; --blue:#104b8c;}


/* ===== .s2 레이아웃/치수 변수 ===== */
.s2{
  overflow:hidden;
  height:100vh;

  /* 카드 세로 간격 */
  --s2gap:30px;

  /* 카드 너비 */
  --s2cardWidth:657px;

  /* 657:367 비율 기준 높이 */
  --s2cardHeight: calc(var(--s2cardWidth) * (367 / 657));

  /* 위/아래 밀림량 */
  --s2top:translateY(calc(var(--s2cardHeight) / -3.6));
  --s2bottom:translateY(calc(var(--s2cardHeight) / 3.6));
  position: relative

}

.s2 .contents{position: relative}



.s2:after{
	position: absolute; left: 0; top: 0; width: 100%;
	height: 10%;  content: '';
background: linear-gradient(360deg,rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 1) 100%);
}


.s2:before{
	position: absolute; left: 0; bottom: 0; width: 100%;
	height: 10%;  content: '';
background: linear-gradient(360deg,rgba(17, 17, 17, 1) 0%, rgba(17, 17, 17, 0) 100%);
z-index: 2
}


.s2 .con{
  width:var(--s2cardWidth);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 auto; gap:var(--s2gap);
  transition: transform 1.2s;
}

.s2 .dummyBx{width:100%; display:flex; flex-direction:column; gap:var(--s2gap);}
.s2 .dummyBx ._imgBx{width:100%; position:relative;}
.s2 .dummyBx ._imgBx::before{content:''; display:block; padding-bottom:calc(367/657*100%);}
.s2 .dummyBx ._imgBx img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius: 10px}

.s2 .swiperArea{width:100%; display:flex; flex-direction:column; gap:var(--s2gap); cursor:none;}
.s2 .swiper{width:100%; overflow:visible; position:relative;}
.s2 .swiper .swiper-slide{position:relative;}
.s2 .swiper .swiper-slide ._imgBx{position:relative; transition-duration: .5s}
.s2 .swiper .swiper-slide ._imgBx::before{content:''; display:block; padding-bottom:calc(367/657*100%);}
.s2 .swiper .swiper-slide ._imgBx img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius: 10px;}

/* ===== 텍스트 오버레이 ===== */
.s2 .swiper .txtBx > *{position:absolute; z-index:10;}
.s2 .swiper .txtBx ._tit{top:50%; left:-300px; transform:translateY(-50%);}
.s2 .swiper .txtBx ._tit > small{display:block; margin-bottom:1em; color:rgba(255,255,255,.8)}
.s2 .swiper .txtBx ._tit .mid{margin-bottom:30px; font-weight:600; line-height:1.3;}
.s2 .swiper .txtBx ._tit .mid .type2 div:not(:first-child){margin-top:-.1em;}
.s2 .swiper .txtBx ._tit ._btnBx{
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid #fff; background:transparent; padding:15px 40px; cursor:pointer; border-radius:7px;
}
.s2 .swiper .txtBx ._tit ._btnBx p{transform:translateY(10%);}
.s2 .swiper .txtBx ._tit ._btnBx:hover{background:#fff; color:#000;}

.s2 .swiper .txtBx .right{
  right:-24.2%; bottom:-13%; white-space:nowrap; margin-right:calc(-120/20*1em);
  font-size:20px; font-weight:500; line-height:1.6;
}
.s2 .swiper .txtBx .right p:not(:last-child){margin-bottom:.6em;}
.s2 .swiper .txtBx .vertical{
  left:124.2%; top:-24.2%; margin-left:10px; color:#505052;
  writing-mode:vertical-rl; letter-spacing:-.025em;
}

/* ===== 최초 배치: 1번 카드가 화면 가운데 ===== */
.s2 .cont{
  transform: translateY(
    calc(
      (var(--s2cardHeight) * -3) +
      (var(--s2gap) * -3) +
      ( ( (var(--vh,1vh) * 100) - var(--s2cardHeight)) / 2 ) +
      (var(--headerHeight) / 2)
    )
  );
}

/* ===== 스크롤 단계 이동 ===== */
.s2[scroll='2'] .con{transform: translateY(calc( (var(--s2cardHeight) * -1) + (var(--s2gap) * -1) ));}



/* ===== on/active 상태에 따른 위아래 벌어짐 ===== */
.s2 .dummyBx.top,
.s2 .dummyBx.bottom,
.s2 .swiper.n1,
.s2 .swiper.n2,
.s2 .swiper.n3{transition: transform .8s, opacity .8s;}

.s2[active] .dummyBx.top,
.s2[active] .dummyBx.bottom,
.s2[active] .swiper.n1,
.s2[active] .swiper.n2,
.s2[active] .swiper.n3{transition: transform 1s, opacity 1s .5s;}

.s2[active='1'] .dummyBx.top{transform: var(--s2top); opacity:.5;}
.s2[active='1'] .swiper.n2{transform: var(--s2bottom); opacity:0;}
.s2[active='1'] .swiper.n3{transform: var(--s2bottom); opacity:0;}
.s2[active='1'] .dummyBx.bottom{transform: var(--s2bottom); opacity:.5;}

.s2[active='2'] .dummyBx.top{transform: var(--s2top); opacity:.5;}
.s2[active='2'] .swiper.n1{transform: var(--s2top); opacity:.5;}
.s2[active='2'] .swiper.n3{transform: var(--s2bottom); opacity:.5;}
.s2[active='2'] .dummyBx.bottom{transform: var(--s2bottom); opacity:.5;}

.s2[active='3'] .dummyBx.top{transform: var(--s2top); opacity:.5;}
.s2[active='3'] .swiper.n1{transform: var(--s2top); opacity:.5;}
.s2[active='3'] .swiper.n2{transform: var(--s2top); opacity:.5;}
.s2[active='3'] .dummyBx.bottom{transform: var(--s2bottom); opacity:.5;}

/* ===== 텍스트 진입 애니 ===== */
.s2 .swiper .txtBx ._tit > small{transform:translateY(40px); opacity:0; transition:transform .5s,opacity .5s;
font-size: 18px; color: #fff; font-weight: 800}
.s2 .swiper .txtBx ._tit .mid{margin-top: 30px;}
.s2 .swiper .txtBx ._tit .mid p{transform:translateY(110%); transition:transform .5s ;opacity: .0;
font-size: 80px; font-weight: 800; color: #fff}

.s2 .swiper .txtBx ._tit ._btnBx{ opacity:0; 
transition:transform .5s,opacity .5s, background-color 1s, color 1s; display: inline-flex; color: #fff; font-size: 18px;
 font-weight: 500;
gap:15px; padding: 15px 40px; border: 1px solid #fff; border-radius: 5px;
align-items: center;
    justify-content: flex-start;
    margin-top: 60px

}
.s2 .swiper .txtBx .right{transform:translateY(40px); opacity:0; transition:transform .5s,opacity .5s;}
.s2 .swiper .txtBx .vertical{opacity:0; transition:opacity .5s;}

.s2 .swiper.on .txtBx ._tit > small{transform:translateY(0); opacity:1; transition-duration:1.5s;}
.s2 .swiper.on .txtBx ._tit .mid p{transform:translateY(0); transition-duration:1.5s; opacity: 1}
.s2 .swiper.on .txtBx ._tit ._btnBx{transform:translateY(0); opacity:1; transition-duration:1.5s;}
.s2 .swiper.on .txtBx .right{transform:translateY(0); opacity:1; transition-duration:1s; transition-delay:.5s;}
.s2 .swiper.on .txtBx .vertical{transition-duration:1s; transition-delay:.5s; font-size: 16px; color: #fff; opacity: .5}


.s2 .swiper .swiper-slide ._imgBx {
    transition: transform 1s, opacity 1s;
    opacity: 0.5;
}

.s2 .swiper.on .swiper-slide-active ._imgBx{
	    transform: scale(1.484);
    opacity: 1;
}









/* ===== 데스크탑/태블릿 반응 ===== */
@media screen and (max-width:1440px){
  html.pc .s2{--s2gap:30px; --s2cardWidth: calc(500/1440*100vw);}
  html.pc .s2 .swiper .txtBx ._tit{left: calc(-260/1440*100vw);}
  html.pc .s2 .swiper .txtBx .right{font-size:18px;}
  html.pc .s2 .swiper .txtBx .vertical{writing-mode:unset; transform:translate(-100%,calc(-100% - (10/14*1em))); margin-left:0; white-space:nowrap; font-size:14px;}
}
@media screen and (max-width:1024px){
  html.pc .s2{--s2cardWidth: calc(500/1024*100vw);}
  html.pc .s2 .swiper .txtBx ._tit{left: calc(-200/1024*100vw);}
}
@media screen and (max-width:820px){
  html.pc .s2{--s2gap:20px;}
  html.pc .s2 .swiper .txtBx .right{font-size:16px; margin-right:-4em;}
  html.pc .s2 .swiper .txtBx .vertical{font-size:12px;}
}

/* ===== 모바일 모드(간단 동작 & 자동재생) ===== */
html.mo .s2 .swiper{width:800px; margin:0;}
html.mo .s2 .swiper .swiper-slide{opacity:1;}
html.mo .s2 .swiper .txtBx{white-space:nowrap; width:fit-content; margin-bottom:60px;}
html.mo .s2 .swiper .txtBx > *{position:unset;}
html.mo .s2 .swiper .txtBx ._tit{transform:unset; margin-bottom:40px;}
html.mo .s2 .swiper .txtBx .right{margin-right:unset; transition-duration:1.5s; transition-delay:.5s;}
html.mo .s2 .swiper .txtBx .vertical{writing-mode:unset; margin-left:unset; margin-bottom:20px; transform:translateY(40px); transition-duration:1.5s; transition-delay:.5s;}
html.mo .s2 .swiper.on .txtBx .vertical{transform:translateY(0);}
@media screen and (max-width:1600px){ html.mo .s2 .swiper{width:max(calc(700/1600*100vw),400px)} }
@media screen and (max-width:820px){ html.mo .s2 .swiper{width:max(calc(400/820*100vw),280px)} }
@media screen and (max-width:500px){
  html.mo .s2{--s2gap:calc(140/500*100vw)}
  html.mo .s2 .cont{padding: calc(160/500*100vw) 0;}
  html.mo .s2 .swiper{width:91.42%;}
  html.mo .s2 .swiper .txtBx{margin-bottom:40px; position:relative; width:90vw;}
  html.mo .s2 .swiper .txtBx .right{font-size:16px;}
  html.mo .s2 .swiper .txtBx .vertical{
    font-size:15px; writing-mode:vertical-rl; position:absolute; bottom:0; right:0; margin-bottom:0;
  }
}
@media screen and (max-width:320px){ html.mo .s2 .swiper{width:100%;} }






.main_app{padding: 140px 0;
background: url(../img/main/main_app.png);
background-position: bottom center;background-size: contain ; overflow: hidden;
background-repeat: no-repeat}


.main_app .main_title{position: relative}

.main_app .main_title .view_more_r{position: absolute; right: 0; bottom: 0;}

.view_more_r{
border-radius: 60px;
border: 1px solid #DDD;
background: #FFF; padding: 10px 10px 10px 30px; font-size: 18px; display: inline-flex; gap: 50px; align-items: center; 
color: #111}

.view_more_r span{color: #111}

.view_more_r i{
	width: 50px; height: 50px; 
	background: #1936B2; border-radius: 50px; 
	display: flex;    justify-content: center;
    align-items: center; 
	
}






/* 진행바 (dots 대체) */
.progress {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  overflow: hidden;
  
  background-color: rgba(255,255,255,0.3);
  background-image: linear-gradient(to right, #fff, #fff);
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size .7s ease-in-out;
  margin-top: 80px;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.app_slide{margin: 0 -15px}
.app_slide .slick-list{padding: 0 8rem; overflow: visible}

.app_slide .thum{position: relative; display: block; border-radius: 20px; overflow: hidden}
.app_slide .thum img.big{width: 100%; height: 100%; object-fit:cover; aspect-ratio: 16/9;}
.app_slide .thum .more{position: absolute; left: 0; top: 0; width: 100%; height: 100%; 
background: rgba(25,54,178,0.8); display: flex;    justify-content: center;
    align-items: center; opacity: 0; transition-duration: .7s}

.app_slide .thum:hover .more{opacity: 1}

.app_slide .thum .more img{max-width: auto; width: auto;
}

.app_slide .thum .more i{width: 70px; height: 70px; background: #fff; border-radius: 70px; display: flex;
    justify-content: center;
    align-items: center;}

.app_slide .slick-slide{padding: 0 15px}


.app_slide .txt{display: block; margin-top: 30px}
.app_slide .txt h4{color: #fff; font-size: 18px;}
.app_slide .txt p{font-size: 14px; color: #fff; opacity: .5; margin-top: 10px;}

.main_last{padding:0 0 140px 0}

.main_last .box{
	background: url(../img/main/main_last.png);
	padding: 160px 20px;
	text-align: center;
	border-radius: 20px;
	background-size: cover;
    background-attachment: fixed;
    position: relative
}

.main_last .box:after{content:''; background: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1 }

.main_last .box h2{color: #fff; font-size: 60px; font-weight: 800; line-height: 150%; word-break: keep-all; position: relative; z-index: 2}

.main_last ._btnBx{
  display: inline-flex; color: #fff; font-size: 18px;
 font-weight: 500;
gap:15px; padding: 15px 40px; border: 1px solid #fff; border-radius: 5px;
align-items: center;
margin-top: 50px;
z-index: 2; position: relative
}



/*footer*/

.footer{background: #0B0B0B; }
.footer .top_foot{padding: 100px 0 50px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.1)}

.footer .top_foot .top_btn{position: absolute; right: 0; top: 100px; text-align: center}
.footer .top_foot .top_btn p{font-size: 14px; color: #fff; font-weight: 800; }
.footer .top_foot .top_btn img{margin: 10px auto 0; transition-duration: .7s}
.footer .top_foot .top_btn:hover img{margin: 5px auto 0}

.footer .top_foot .foot_info{margin-top: 50px}
.footer .top_foot .foot_info li{display: flex; gap:10px;  align-items: center;
font-size: 16px; color: #fff; word-break: keep-all}
.footer .top_foot .foot_info li b{color: #999}

.footer .top_foot .foot_info li span + b{margin-left: 30px;}
.footer .top_foot .foot_info li + li{margin-top: 10px;}


.footer .foot_copy{padding: 50px 0; position: relative}
.footer .foot_copy p{font-size: 16px; color: #666; word-break: keep-all}
.footer .foot_copy a.agree_btn{position: absolute; right: 0; top: 50px; display: flex; gap:10px; align-items: center;
font-size: 16px; color: #fff}








@media (max-width: 1640px) {

.main_visual .txt,
.inner2{padding: 0 6rem}
.slider-status{
	padding: 0 6rem 3rem;
}

.main_visual .txt h2{font-size: 60px}
.main_visual .txt p{font-size: 18px}



}






@media (max-width: 1500px) {


.logo{width: 300px}

.site_map .nav_top{gap:8rem}



.view_more_r{font-size: 16px; }
.view_more_r i{
	width: 40px; height: 40px; 
}


.main_title h4,
.s2 .swiper .txtBx ._tit > small,
.s2 .swiper .txtBx ._tit ._btnBx,
.main_title p,
.main_last ._btnBx{font-size: 16px}

.main_title h2,
.s2 .swiper .txtBx ._tit .mid p,
.main_last .box h2{font-size: 40px}


}


@media (max-width: 1370px) {



.custom-cursor {display: none}



.videio_pop .videio_pop_btn_close{right: 3rem}

}


@media (max-width: 1280px) {


.videio_pop .videio_pop_are{max-width: 90%}
.foot_as{right: 25px; bottom: 25px}




.header .nav_top li a.onedeps,
.site_map .nav_top li .sub_deps a{font-size: 16px}
.header .nav_top li .sub_deps a,
.header .right .lang a{font-size: 14px}

.site_map .nav_top li a.onedeps{font-size: 24px}

.view_more_r{font-size: 14px; gap:30px}

.app_slide .txt h4{font-size: 16px}
.app_slide .txt p{font-size: 14px}

.main_visual_are{padding: 0}
.main_visual_are .main_visual{border-radius: 0; height: 100vh}
.main_visual_slide .box{height: 100vh}






.header{top: 0}

.main_visual .txt,
.inner,
.inner2,
.app_slide .slick-list{padding: 0 3rem}
.slider-status{
	padding: 0 3rem 3rem;
}

.header .logo{left: 3rem}
.header .right{right: 3rem; top: 40px}





}


@media (max-width: 1024px) {
	
	
	
	
	
	
	
	
#intro{display: none}








.site_map .nav_top {
    gap: 20px;
    flex-direction: column;
    text-align: center;
}

.site_map .nav_top li .sub_deps {
    margin-top: 0px;
    overflow: hidden; height: 0; max-height: 0; visibility: hidden;
    transition-duration: .7s
}

.header .nav_top{display: none}

.site_map .nav_top li .on_drop + .sub_deps{height: auto; max-height: 500px; visibility: visible; padding-top: 20px}


.s2{height: auto; padding: 100px 0}
.s2 .dummyBx{display: none}
.s2 .cont {
    transform: none;
}

.s2 .swiper .txtBx ._tit ._btnBx{margin-top: 20px}
html.mo .s2 .swiper .txtBx .vertical{display: none}

html.mo .s2 .swiper .txtBx ._tit{margin-bottom: 0}


.s2 .swiper.on .swiper-slide-active ._imgBx {
    transform: scale(1);
    opacity: 1;
}

.s2[active='1'] .swiper.n2 {
    transform: none;
    opacity: 1;
    margin-top: 60px
}


.s2:after{
	display: none
}


.s2:before{
	display: none
}


}


@media (max-width: 860px) {

.agree_pop_content{max-width: 90%; padding: 20px; border-radius: 5px}
.agree_pop_content .agree_title h2{font-size: 16px}
.agree_pop_info p,
.agree_pop_info h3{font-size: 14px;}


}


@media (max-width: 600px) {



.foot_as{width: 50px; height: 50px;max-width: 50px; min-width: 50px; }
.foot_as:hover{gap:0; padding: 0}
.foot_as span{display: none}
 
.foot_as img{max-width: 16px}


.main_visual .txt .view_more_r{margin-top: 30px}

.main_visual .txt, .inner, .inner2, .app_slide .slick-list{padding: 0 20px}

.slider-status {
        padding: 0 20px 30px;
    }

.slider-status .counter span{font-size: 14px}

.header .logo{left: 20px; width: 90px; background-size: 90px auto; top: 20px}

.header .right{right: 20px; top: 30px}

.all_btn{width: 30px; height: 12px}

.main_visual .txt h2{font-size: 30px}
.main_visual .txt p{font-size: 16px}

.main_title h2, .s2 .swiper .txtBx ._tit .mid p, .main_last .box h2 {
        font-size: 24px;
    }

.main_title h4, .s2 .swiper .txtBx ._tit > small, .s2 .swiper .txtBx ._tit ._btnBx, .main_title p, .main_last ._btnBx{font-size: 14px}

.main_partner{padding: 80px 0 0}

.s2 {
    overflow: hidden;
    height: auto;
    --s2gap: 30px;
    --s2cardWidth: 100%;
    --s2cardHeight: auto;
    --s2top: none;
    --s2bottom: none;
    padding: 80px 20px;
}

.s2 .swiperArea{gap:0}
    html.mo .s2 .cont {
        padding: 0;
    }


    .view_more_r {
        font-size: 14px;
        gap: 30px;
        position: relative;
        display: inline-flex;
        margin-top: 30px;
        padding: 5px 5px 5px 20px;
    }


.main_app .main_title .view_more_r{position: relative}


.main_last .box{padding: 100px 20px}

.main_last ._btnBx{margin-top: 30px; padding: 10px 25px}
.s2 .swiper .txtBx ._tit ._btnBx{ padding: 10px 25px}

.s2 .swiper .txtBx ._tit .mid{margin: 10px 0 20px}


.footer .top_foot .foot_info li,
.footer .foot_copy p{font-size: 14px}
.footer .top_foot .foot_info li span + b{margin: 0}

.footer .top_foot .top_btn{top: 30px}
.footer .foot_copy a.agree_btn {
    position: relative;
    right: 0;
    top: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    color: #fff;
    margin-top: 20px;
}


.videio_pop .videio_pop_btn_close{right: 25px; top: 25px}

.videio_pop .videio_pop_are{border-radius: 5px}

}





@media (max-width: 360px) {

 
 
 
 
}