/*pop*/

.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: 60px; border-radius: 20px;
  transform: translate(-50%, -50%); width: 100%; max-width: 900px}



.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}



.inner{position: relative; width: 100%; padding: 0 55px}
.inner_in{position: relative; width: 100%; padding: 0 10rem}




/*head*/



.head_top{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	padding: 0rem 55px;
	justify-content: space-between;
    align-items: center;
    z-index: 9999;
}

.head_top:after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: #fff;
backdrop-filter: blur(20px); z-index: -2; transition-duration: .8s}


.head_top:hover:after{ height: 480px;}

.head_top .left{display: flex;
justify-content: flex-start;
    align-items: center; gap:40px;}
    
    
.head_top .right{display: flex;
justify-content: flex-start;
    align-items: center; gap:40px;}    

.head_top .logo{
	background: url(../img/common/logo.png); 
	width: 177px; 
	height: 76px; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto
}

.top_nav{
	display: flex;
	gap:0px;
}

.top_nav li{
	position: relative;
	width: auto; transition-duration: .8s;
	max-width: 160px;
	min-width: 0;
	padding: 0 30px
}

.top_nav li:after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 0; 
background: rgba(104, 164, 196, 0.05);
z-index: -1; transition-duration: .8s}

.top_nav li:hover:after{height: 480px;}

.head_top:hover .top_nav li{
	max-width: 220px;
	min-width: 220px
}



.top_nav .main_deps{
	color: #1B1F29;
	font-size: 18px;
	text-align: center;
	display: flex;
	height: 100px;
	justify-content: center;
    align-items: center;
    font-weight: bold;
    transition-duration: .8s
}


.top_nav li:hover .main_deps{color: #003366}



.all_btn{width: 18px; height: 18px; position: relative; cursor: pointer; z-index: 9999}
.all_btn span{position: absolute;
width: 100%; height: 2px; background: #1B1F29; transition-duration: .5s; border-radius: 2px}

.all_btn span:nth-child(1){top: 0; left: 0}
.all_btn span:nth-child(2){top: 50%; left: 0;transform: translateY(-50%);}
.all_btn span:nth-child(3){bottom: 0; right: 0; width: 60%}






.all_open .all_btn span:nth-child(1){transform: rotate(45deg) translateY(calc(-50% + 1px));
    top: 50%;}
.all_open .all_btn span:nth-child(2){opacity: 0}
.all_open .all_btn span:nth-child(3){transform: rotate(-45deg) translateY(calc(-50% + 1px));
    top: 50%; bottom: auto; top: 50%; width: 100%}



.top_nav .sub_detps{
	position: absolute; 
	top: calc(100% - 10px);
	left: 50%;
    transform: translateX(-50%); text-align: center;
    overflow: hidden; visibility: hidden;  width: 220px; transition-duration: .5s; opacity: 0;
    padding: 30px 0
     
}

.head_top:hover .top_nav .sub_detps {opacity: 1; visibility: visible; transition-duration: .8s;}


.top_nav .sub_detps a{
	font-size: 16px; color: #1B1F29; opacity: 1;
	transition-duration: .5s; display: block; font-weight: 500;
}

.top_nav .sub_detps a:hover{color: #003366}

.top_nav .sub_detps a + a{margin-top: 20px;}













body.all_open {
  overflow: hidden;
  height: 100vh;  /* iOS 대응 */
  touch-action: none;  /* 모바일 터치 스크롤 차단 */
}


.all_open .head_top:after{display: none}
.all_open .head_top .top_nav{visibility: hidden; opacity: 0; transition-duration: .5s}


.all_nav_are{position: fixed; left: 0; top: -100%; width: 100%;  z-index: 9998;
	background: rgba(255,255,255,.96);
backdrop-filter: blur(20px);
	display: flex;
	opacity: 0; visibility: hidden; transition-duration: 1s;;
	height: 100vh;
	z-index: 9998;
	align-items: center;
    justify-content: center;

}


.all_open .all_nav_are{opacity: 1; visibility: visible; top: 0}






.all_nav_are .nav_are{
	padding: 0 16rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap:60px
}

.nav_are *{transition-duration: .5s}
.nav_are li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 45px;
    width: 100%;
}
    

    
.nav_are li .main_deps{font-size: 36px; font-weight: 600; color: #1B1F29; width: 170px;
transition-duration: .8s}
.nav_are li .main_deps.open_deps,
.nav_are li:hover .main_deps{color: #003366}

.nav_are li .sub_detps {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 40px; 
}


.nav_are li .sub_detps a{font-size: 18px; color: #1B1F29; 
font-weight: 600; transition-duration: .5s; opacity: 1}

.nav_are li .sub_detps a:hover{color: #003366; opacity: 1}



.nav_are li .main_deps.open_deps + .sub_detps{visibility: visible; opacity: 1; }


.all_nav_are .copyright_all{text-align: center; font-size: 14px; color: #fff; position: absolute; bottom: 50px; left: 50%;
transform: translateX(-50%);}


/*footer*/

.foot_are{padding: 70px 0 ; background: #222}

.foot_top{padding-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.10);}

.foot_top ul{display: flex; gap:10px 20px}
.foot_top ul li{word-break: keep-all; line-height: 150%; color: #fff; font-size: 16px;
display: flex; gap:10px;     align-items: center;}

.foot_top ul li b{padding: 3px 9px; 
border-radius: 24px;
border: 1px solid #383838;
background: #292929;}

.foot_bottom{padding-top: 50px; display: flex;     justify-content: space-between;}
.foot_bottom p{font-size: 16px; word-break: keep-all; color: #383838}

.foot_bottom .foot_link{display: flex; gap:14px;align-items: center;}
.foot_bottom .foot_link a{color: #fff; font-size: 16px; word-break: keep-all}
.foot_bottom .foot_link i{
width: 4px;
height: 4px;
background: #D9D9D9; border-radius: 4px;}


.floating{position: fixed; z-index: 4; right: 30px; bottom: 50px;}
.floating a{display: flex; width: 60px; height:60px; border-radius: 60px;
background: #FFF;
box-shadow: 4px 4px 25px 0 rgba(0, 0, 0, 0.15);
    justify-content: center;
    align-items: center;}

.floating a:first-child{background: #003366}
.floating a + a{margin-top: 10px}





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


  user-select: none;
  z-index: 4444;
  gap:20px; display: flex;
}




/* main */

.main_warp{background: #f9f9f9}


.main_visual_are{padding: 0 55px 0px}
.main_visual_are .main_visual{overflow: hidden; position: relative;
border-radius: 20px; 
height: calc(100vh - 100px - 50px);
display: flex;
    justify-content: flex-start;
    align-items: center;
}


.main_visual_are .main_visual_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000}
.main_visual_are .main_visual_bg video{width: 100%; height: 100%;    object-fit: cover; opacity: .7}

.visual_bar_are{display:flex;align-items:center;gap:12px;margin-top:40px}
.visual_bar{
  position:relative;width:240px;height:4px;background:rgba(255,255,255,.35);
  border-radius:999px;overflow:hidden;cursor:pointer;
}
.visual_bar span{
  position:absolute;left:0;top:0;height:100%;width:0%;
  background:#fff; /* 테마에 맞게 색상 조정 가능 */
  transition:width .06s linear; /* 너무 급격한 변화를 부드럽게 */
}
.video_toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(255,255,255,.15);backdrop-filter:blur(2px);cursor:pointer
}
.video_toggle img{width:18px;height:18px;display:block}
.video_toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}



.main_visual .txt{position: relative; z-index: 2; padding: 0 8rem;}
.main_visual .txt h2{font-size: 70px; word-break: keep-all; line-height: 150%; font-weight: bold; 
color: #fff}
.main_visual .txt p{margin-top: 30px; font-size: 20px; word-break: keep-all; line-height: 150%; color: #fff}

.main_section{padding: 150px 0}

.main_section.product_main{position: relative}

.main_title{margin-bottom: 80px}
.main_title.center{text-align: center; margin-bottom: 40px}
.main_title h5{margin-bottom: 20px; word-break: keep-all; font-size: 16px; font-weight: 800; color: #01458E}
.main_title h2{font-size: 60px; line-height: 140%; word-break: keep-all; color: #1B1F29;
font-weight: 300}

.main_title h2 b{font-weight: 600}

.main_title h4{font-size: 40px; word-break: keep-all; color: #1B1F29; font-weight: 500}

.main_product{display: flex; gap:100px;     flex-wrap: wrap;}

.main_product a{width: calc(50% - 50px)}
.main_product a span{display: block}

.main_product a span.thum{
	border-radius: 20px;
box-shadow: 2px 2px 25px 0 rgba(0, 0, 0, 0.05);
overflow: hidden
}

.main_product a span.thum img{width: 100%}
.main_product a span.txt{
	color: #1B1F29;
font-size: 18px;
word-break: keep-all;
margin-top: 35px;
padding: 0 25px;
font-weight: 600
}

.main_product a:nth-child(2n){margin-top: -80px; }


.roof_text_are{position: absolute; left: 0; width: 100%; top: 15rem; z-index: -1;
overflow: hidden}
.roof_text h2{
font-family: Montserrat;
font-size: 200px;
font-style: normal;
font-weight: 800;
line-height: normal;
white-space: nowrap;
color: rgba(27, 31, 41, 0.03);
}

.roof_text h3{
font-family: Montserrat;
font-size: 100px;
font-style: normal;
font-weight: 800;
line-height: normal;
white-space: nowrap;
color: rgba(27, 31, 41, 0.03);
}


















    /* Swiper 컨테이너 */
    .swiper.buSlider{
      overflow: hidden;
      padding: 0 16rem;
    }
    .buSlider .swiper-wrapper{ align-items: center; }

    /* 카드 기본 너비: 반응형 + 최대 500px */
    .buSlider .swiper-slide{
      width: min(86vw, 500px);
      transition: transform .35s ease;
      aspect-ratio: 50 / 60;
      display: flex;
    align-items: center; gap:20px;
    }
    .buSlider .swiper-slide-active{
      
    }

    /* 비율 박스: ::before의 padding-top 비율을 애니메이션 */
    .buSlider .card{
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      display: block;
          aspect-ratio: 50 / 37;
          transition-duration: .8s;
          position: relative
    }
    
    .buSlider .card .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    padding: 30px; display: flex; font-size: 18px; word-break: keep-all;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%);
    align-items: flex-end;
    justify-content: center; transition-duration: .8s}
    
    .buSlider .card .bg .txt{text-align: center; color: #fff; transition-duration: .5s}

	.buSlider .swiper-slide-active .card{aspect-ratio: 50 / 60;}
	
	.buSlider .swiper-slide-active .card .bg{
		background: linear-gradient(180deg, rgba(1, 69, 142, 0.00) 47.33%, rgba(1, 69, 142, 0.90) 100%)
	}
	
	.buSlider .swiper-slide-active .card .bg .txt{font-size: 24px;}

	.buSlider .card img{width: 100%; height: 100%; object-fit: cover;}





.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 40px;
}

.nav .btn {
  width: 60px;
  height: 60px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .8s;
  border-radius: 60px;
  background: #fff; border: 1px solid #ddd
}


.pager {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 200px;
}

.fraction, .total {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

.bar {
  flex: 1;
  height: 3px;
  background: rgba(1, 69, 142, 0.20);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.bar i {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: #01458E;
  border-radius: 999px;
  transition: width 0.4s ease;
}









/* section main_ani */
.main-about{position: relative; padding-bottom: 150px}

.main-about .about-motion {
    width: 100%;
    height: 500vh;
    position: relative;

}



.about-motion .about-con {
    width: 100%;
    height: 400vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 0 40px;
}


.about-motion .about-con .about-wrap {
	height: calc(100vh - 136px);
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
	overflow: hidden;
}


.about-motion .about-con .main-tit-wrap {
	width: 30vw;
	position: absolute;
	top: 80px;
	text-align: center;
	z-index: 1;
}

.about-motion .about-con .main-tit-wrap p.sec-tit{color: #003366; font-size: 16px; font-weight: 800}

.about-motion .about-con .main-tit-wrap .about-tit {
	font-size: 40px;
	font-weight: 700;
	margin-top: 15px;
}


.about-motion .about-con .about-list .about-item {
	width: 100%;
	height: 100%;
	display: flex;
	gap: 40px;
	flex-direction: row-reverse;
	position: absolute;
	top: 0;
}



.about-motion .about-con .about-list .about-item .about-img {
	border-radius: 20px;
	overflow: hidden;
	width: calc(100% - 30vw - 40px);
	height: 100%;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}


.about-motion .about-con .about-list .about-item .img-wrap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	border-radius: 20px;
	transform: translate(0, 100%);
}


.about-motion .about-con .about-list .about-item:nth-child(1) .img-wrap {
	transform: translate(0, 0);
}

.about-motion .about-con .about-list .about-item:nth-child(2) .img-wrap {
	transform: translate(0, 0);
}


.about-motion .about-con .about-list .about-item:nth-child(3) .img-wrap {
	transform: translate(0, 0);
}

.about-motion .about-con .about-list .about-item:nth-child(4) .img-wrap {
	transform: translate(0, 0);
}




.about-motion .about-con .about-list .about-item .tit-wrap {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	text-align: center;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.about-motion.index01 .about-con .about-list .about-item:nth-child(1) .tit-wrap {opacity: 1;}
.about-motion.index02 .about-con .about-list .about-item:nth-child(2) .tit-wrap {opacity: 1;}
.about-motion.index03 .about-con .about-list .about-item:nth-child(3) .tit-wrap {opacity: 1;}
.about-motion.index04 .about-con .about-list .about-item:nth-child(4) .tit-wrap {opacity: 1;}





.about-motion .about-con .about-list .about-item .img-wrap img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center;
	   object-position: center;
}

.about-motion .about-con .about-list .about-item .about-txt {
	border-radius: 20px;
	overflow: hidden;
	width: 30vw;
	height: 100%;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	opacity: 0;
	background-color: #fff;
}

.about-motion .about-con .about-list .about-item:nth-child(1) .about-txt {
	opacity: 1;
}

.about-motion .about-con .about-list .about-item .about-txt .txt-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0 60px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap:20px
}


.about-motion .about-con .about-list .about-item .about-txt .txt-wrap h3{
	font-size: 40px;
	font-weight: 300;
	color: #1B1F29
}

.about-motion .about-con .about-list .about-item .about-txt .txt-wrap h3 b{font-weight: 800}

.about-motion .about-con .about-list .about-item .about-txt .txt-wrap p {
	font-size: 18px;
	font-weight: 600;
	line-height: 150%;
	white-space: nowrap;
	color: #444
}


.about-motion .about-con .about-index-wrap {
	display: flex;
	gap: 80px;
	align-items: flex-end;
	justify-content: center;
	width: 30vw;
	position: absolute;
	bottom: 35px;
	z-index: 1;
}



.about-motion .about-con .about-index-wrap .curr li {
	display: none;
}

.about-motion.index01 .about-con .about-index-wrap .curr li:nth-child(1) {display: block;}
.about-motion.index02 .about-con .about-index-wrap .curr li:nth-child(2) {display: block;}
.about-motion.index03 .about-con .about-index-wrap .curr li:nth-child(3) {display: block;}
.about-motion.index04 .about-con .about-index-wrap .curr li:nth-child(4) {display: block;}

.about-motion .about-con .about-index-wrap .curr li span {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
}

.about-motion .about-con .about-index-wrap .curr li span.num {
	font-size: 80px;
	position: absolute;
    bottom: 0;
   	left: 0;
}

.about-motion .about-con .about-index-wrap .curr li span.unit {
	position: absolute;
    left: 70px;
	bottom: 60px;
}

.about-motion .about-con .about-index-wrap .slash {
	position: absolute;
	left: 50%;
    transform: translateX(-0.9259vh);
    bottom: 0;
}


.about-motion .about-con .about-index-wrap .slash img {
	height: 77px;
}

.about-motion .about-con .about-index-wrap .total {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	font-family: var(--font-en);
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.about-motion .about-con .slide-dot-wrap {
	position: absolute;
	bottom: 32px;
	left: 0;
	width: 100%;
}


.main_section.main_gall{padding: 150px 0 150px 10rem;
display: flex; overflow: hidden}
.main_section.main_gall .main_title{margin: 0; width: 35%; padding: 40px 0}

.main_section.main_gall .main_gall_are{flex:1; overflow: hidden}

.main_gall_slide .slick-list{padding-right: 10rem}

.main_gall_slide .slick-slide{padding: 15px}

.main_gall_slide .slick-slide .box a{display: block}
.main_gall_slide .slick-slide .box .thum{border: 1px solid #ddd; border-radius: 20px; overflow: hidden; transition-duration: .8s}
.main_gall_slide .slick-slide .box .thum:hover{
	/* Drop */
box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.15);
}


.main_gall_slide .slick-slide .box .thum img{width: 100%; height: 100%;
object-fit: cover;
    aspect-ratio: 1;}



.main_gall_slide .slick-slide .box .txt{margin-top: 20px; color: #333; font-size: 18px; word-break: keep-all; font-weight: 600; padding: 0 20px}




.common_btn{padding: 10px 10px 10px 30px; display: inline-flex; min-width: 240px; font-size: 18px; color: #1b1b1b; word-break: keep-all;
background: #fff; border-radius: 80px; border: 1px solid #ddd;
align-items: center;
    justify-content: space-between; gap:20px; transition-duration: .8s; font-weight: 600}
    
.common_btn:hover{
	box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.15);
}
    
    
.common_btn i{width: 50px; height: 50px; display: flex; border-radius: 50px; background: #003366;
justify-content: center;
    align-items: center; transition-duration: .8s}

.common_btn:hover i{transform: rotate(45deg);}

.main_title .common_btn{margin-top: 60px}

















@media (max-width: 1024px) {
	.main-about .about-motion {
		height: 200vh;
	}
}



@media (max-width: 1024px) {
	.about-motion .about-con {
		height: 100vh;
		padding: 0 60px;
	}
}

@media (max-width: 768px) {
	.about-motion .about-con {
		padding: 0 24px;
	}
}



@media (max-width: 1024px) {
	.about-motion .about-con .about-wrap {
		/* position: static;
		height: auto; */
	}
}





@media (max-width: 1440px) {
	.about-motion .about-con .main-tit-wrap {
		width: 32.9167vw;
	}
}

@media (max-width: 1024px) {
	.about-motion .about-con .main-tit-wrap {
		width: 100%;
		top: calc(50% + 30px);
	}
}



@media (max-width: 1024px) {
	.about-motion .about-con .main-tit-wrap .about-tit {
		font-size: 25px;
	}
}

@media (max-width: 768px) {
	.about-motion .about-con .main-tit-wrap .about-tit {
		font-size: 20px;
	}
}

@media (max-width: 1024px) {
	.about-motion .about-con .about-list {
		height: 100%;
	}
}

@media (max-width: 1024px) {
	.about-motion .about-con .about-list .slick-list {
		margin: 0 -12px;
	}
}



@media (max-width: 1024px) {
	.about-motion .about-con .about-list .about-item {
		flex-direction: column;
		position: static;
		margin: 0 12px;
		gap: 10px;
	}
}



@media (max-width: 1440px) {
	.about-motion .about-con .about-list .about-item .about-img {
		width: calc(100% - 32.9167vw - 32px);
	}
}

@media (max-width: 1024px) {
	.about-motion .about-con .about-list .about-item .about-img {
		position: relative;
		width: 100%;
		height: calc(50% - 5px);
	}
}



@media (max-width: 1024px) {
	.about-motion .about-con .about-list .about-item .img-wrap {
		position: static;
		border-radius: 20px;
		transform: translate(0);
		border-radius: 20px;
	}
}





@media (max-width: 1024px) {
	.about-motion .about-con .about-list .about-item .tit-wrap {
		opacity: 1;
		top: 20px;
	}
}


@media (max-width: 1440px) {
	.about-motion .about-con .about-list .about-item .tit-wrap .tit {
		/* font-size: 11.0947vw; */
	}
}

@media (max-width: 1024px) {
	.about-motion .about-con .about-list .about-item .tit-wrap .tit {
		/* font-size: 140px; */
	}
}

@media (max-width: 768px) {
	.about-motion .about-con .about-list .about-item .tit-wrap .tit {
		/* font-size: 70px; */
	}
}



@media (max-width: 768px) {
	.about-motion .about-con .about-list .about-item .tit-wrap .txt {
		font-size: 14px;
		margin-top: 0;
	}
}



@media (max-width: 1440px) {
	.about-motion .about-con .about-list .about-item .about-txt {
		width: 32.9167vw;
	}
}

@media (max-width: 1024px) {
	.about-motion .about-con .about-list .about-item .about-txt {
		width: 100%;
		height: calc(50% - 5px);
		position: static;
		opacity: 1;
		border-radius: 20px;
	}
}


@media (max-width: 1024px) {
	.about-motion .about-con .about-list .about-item .about-txt .txt-wrap {
		position: static;
		align-items: flex-start;
		padding: 0;
	}
}







@media (max-width: 1024px) {
	.about-motion .about-con .about-list .about-item .about-txt .txt-wrap p {
		margin-top: 80px;
	}
}






@media (max-width: 1440px) {
	.about-motion .about-con .about-index-wrap {
		width: 32.9167vw;
	}
}

@media (max-width: 1024px) {
	.about-motion .about-con .about-index-wrap {
		display: none;
	}
}


@media (max-width: 1440px) {
	.about-motion .about-con .about-index {
		width: 160px;
	    height: 180px;
	}
}


.about-motion .about-con .about-index {
	width: 200px;
	height: 230px;
	position: relative;
	margin: 0 auto;
}




@media (max-width: 1440px) {
	.about-motion .about-con .about-index-wrap .curr li span {
		font-size: 20px;
	}
}





@media (max-width: 1440px) {
	.about-motion .about-con .about-index-wrap .curr li span.num {
		/* font-size: 142px; */
		right: calc(100% - 55px);
	}
}



@media (max-width: 1440px) {
	.about-motion .about-con .about-index-wrap .curr li span.unit {
		left: 57px;
	}
}





@media (max-width: 1440px) {
	.about-motion .about-con .about-index-wrap .slash {
		bottom: 25px;
	}
}