::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: #666;
}

::-webkit-scrollbar-thumb {
    background: #111;
    border-radius: 10px;
}






/*foot*/
.footer{padding: 80px 0; }

.footer .inner{position: relative}

.foot_info{display: flex; }
.foot_info .left{width: 80%;}
.foot_info .left h2{}


.foot_info .left h2{
    font-size: 80px;
    font-weight: 800;
    font-family: var(--font-en);
    /* line-height: 0.85; */
    line-height: 1.1;
    letter-spacing: 0;
    -webkit-text-fill-color: rgba(241, 241, 241, 0.1);
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg, #F1F1F1 0%, #F1F1F1 50%, transparent 50.1%);
    background-size: 0% 100%;
    text-transform: uppercase;
    display: block; transition-duration: 4s;
    text-transform: uppercase
}


.foot_info.show .left h2{
	 background-size: 300% 300%;
}


.foot_info .left ul li{display: flex;  font-size: 16px; color: #fff; line-height: 150%; word-break: keep-all; gap:20px}
.foot_info .left ul li b{opacity: .6}
.foot_info .left ul li + li{margin-top: 10px;}

.foot_info .right{display: flex; gap:10rem; width: 20%}

.foot_link1{min-width: 200px}

.foot_link1 a{display: flex; gap: 10px; font-size: 22px; font-weight: 700; color: #fff;     align-items: center; opacity: 0.5; transition-duration: .8s}
.foot_link1 a img{opacity: 0; transition-duration: .8s}
.foot_link1 a + a{margin-top: 15px;}
.foot_link1 a:hover{opacity: 1; gap:30px}
.foot_link1 a:hover img{opacity: 1}



.foot_link2 a{display: flex; gap: 30px; font-size: 18px; font-weight: 500; color: #fff;     align-items: center; opacity: 0.5; transition-duration: .8s}
.foot_link2 a img{opacity: 0; transition-duration: .8s}
.foot_link2 a + a{margin-top: 15px;}
.foot_link2 a:hover{opacity: 1}
.foot_link2 a:hover img{opacity: 1}

.foot_top{position: fixed; right: 5rem; bottom: 5rem;  overflow: hidden; display: flex; width: 100px; height: 100px;
border-radius: 100px; z-index: 9992;
justify-content: center;
    align-items: center; background: #101010;
    box-shadow: 2px 2px 25px 0 rgba(0, 0, 0, 0.15);}






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

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


.foot_copy{margin-top: 80px;}
.foot_copy p{font-size: 16px; color: #fff; opacity: .8; word-break: keep-all}

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


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


/*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: 30px; border-radius: 5px;
  transform: translate(-50%, -50%); width: 100%; max-width: 900px}



.agree_pop_content .agree_title{position: relative; }

.agree_pop_content .agree_title h2{font-size: 18px;}
.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: 16px; font-weight: bold; word-break: keep-all; margin-bottom: 10px}
.agree_pop_info p{font-size: 14px; font-weight: 400; word-break: keep-all}
.agree_pop_info p + h3{margin-top: 20px}


.agree_pop_info::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

.agree_pop_info::-webkit-scrollbar-track {
    background: #ccc;
}



/*header*/

.header{position: absolute; left: 0; top: 0; width: 100%; z-index: 9998}

.header .logo{
	width: 215px; height: 37px;
	background: url(../img/common/logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute; left: 5rem;
	top: 40px;
	z-index: 9999
}


.header .top_nav{display: flex; gap:60px;  justify-content: center; opacity: 1; visibility: visible; transition-duration: .8s}

.header .top_nav li{position: relative; text-align: center}
.header .top_nav li .onedeps{font-size: 18px; font-weight: 600; color: #fff; transition-duration: .8s;
height: 120px;  display: flex;
    justify-content: center;
    align-items: center;}
.header .top_nav li:hover .onedeps{color: #FF7200}


.header .top_nav .sub_deps{position: absolute; padding: 0px 30px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(255, 255, 255, 0.10);
/* blur */
backdrop-filter: blur(9px); top: calc(100% - 20px); left: 50%;
    transform: translateX(-50%); width: max-content; 
    transition-duration: .7s;
    opacity: 0; visibility:hidden; height: 0; max-height: 0; }


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




/* motion */
@keyframes gradient-animation {
  0% {
    background-position: 15% 0%;
  }
  50% {
    background-position: 85% 100%;
  }
  100% {
    background-position: 15% 0%;
  }
}

@keyframes frame-enter {
  0% {
    clip-path: polygon(0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    clip-path: polygon(0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    clip-path: polygon(0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 1px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 1px 100%, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%, 0% 100%);
  }
}


.header .top_nav .sub_deps a{display: block; color: #fff; font-size: 16px; opacity: 0; transition-duration: .1s}
.header .top_nav .sub_deps a + a{margin-top: 10px;}

.header .top_nav li:hover .sub_deps a{opacity: .5; transition-duration: .8s}

.header .top_nav li:hover .sub_deps a:hover{opacity: 1}

.header .right{position: absolute; right: 5rem; top: 40px; display: flex; gap:50px; align-items: center;
z-index: 9999}
.header .right .all_btn{display: flex; gap:15px; align-items: center; color: #fff; font-size: 14px; font-weight: 500}
.header .right .all_btn span{}

.lang{position: relative; cursor: pointer}
.lang p{display: flex; padding: 10px 15px; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.30); color: #fff; font-size: 16px; display: inline-flex; gap:15px; align-items: center; }

.lang .lang_list{position: absolute;
 padding: 0px 15px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(255, 255, 255, 0.10);
/* blur */
backdrop-filter: blur(9px); top: calc(100% + 5px); left: 50%;
    transform: translateX(-50%); width: 100%; 
    transition-duration: .7s; text-align: center
        opacity: 0; visibility:hidden; height: 0; max-height: 0; text-align: center}


.lang .lang_list.on{
	opacity: 1; visibility: visible; height: auto; max-height: 500px;
	 padding: 15px;
}
    
.lang .lang_list:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(120deg, #FF7200, rgba(255, 255, 255, 0.20), #FF7200);
  background-size: 300% 300%;
  clip-path: polygon(0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 100%, 100% 100%, 100% 0%, 0% 0%);
  animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}




.lang .lang_list.on{
	
}

.lang .lang_list a{display: block; color: #fff; font-size: 16px; opacity: 0; transition-duration: .1s}
.lang .lang_list a + a{margin-top: 10px;}
.lang .lang_list a:hover{opacity: 1}

.lang .lang_list.on a{opacity: .5; transition-duration: .8s}
.lang .lang_list.on a:hover{opacity: 1}


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

.site_map{position: fixed; z-index: 9992;
background: rgba(0, 0, 0, 0.80); 
height: 100%; width: 100%; left: 0; top: 0;
display: flex;
justify-content: center;
align-items: center; padding: 0 14rem; opacity: 0; visibility: hidden; transition-duration: .8s}


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

.open_mo .header .top_nav{opacity: 0; visibility: hidden; display: none}

.site_map .top_nav{width: 100%}
.site_map .top_nav li{display: flex; padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,.2);
  align-items: center;
    justify-content: space-between; position: relative; overflow: hidden}
    

.site_map .top_nav li:after{content: '';
position: absolute; left: 0; bottom: 0; height: 1px; width: 0%;
background: linear-gradient(120deg, #FF7200, rgba(255, 255, 255, 0.20)); transition-duration: 3s}  

.site_map .top_nav li:hover:after{width: 120%}

  
    
.site_map .top_nav li .onedeps{
	font-size: 30px; color: #fff; font-weight: 700; width: 240px; 
	opacity: .5; transition-duration: .8s;
}

.site_map .top_nav li:hover .onedeps{opacity: 1}


.site_map .top_nav li .sub_deps{display: flex; gap:60px}
.site_map .top_nav li .sub_deps a{font-size: 18px; color: #fff; opacity: .5; transition-duration: .8s}
.site_map .top_nav li .sub_deps a:hover{opacity: 1}



.inner_in2{padding: 0 18rem}
.inner_in{padding: 0 10rem}
.inner{padding: 0 5rem}


/*index*/

.main-visual{height: 100vh;
display: flex;
    justify-content: flex-start;
    align-items: flex-end; position: relative; overflow: hidden}
    
.main-visual .scroll_dowon{position: absolute; right: 5rem; bottom: 5rem; text-align: center; z-index: 3;}    

.main-visual .scroll_dowon p{font-size: 14px; margin:0 0 15px; color: #fff}

.main-visual .scroll_dowon:after{
	content: '';
	position: absolute; top: 50%;
	width: 50px; height: 50px;
	background: rgba(255,255,255,0.1);
	border-radius: 50px;
	left: 50%; 
	transform: translateX(-50%);
	 animation: floatY 1.8s ease-in-out infinite;
} 
 
 
@keyframes floatY {
  0%   { top: 50% }
  50%  { top: 70% }
  100% { top: 50% }
} 
 
.main-visual .box{height: 100vh; overflow: hidden;
position: absolute; left: 0; top: 0; width: 100%}    
.main-visual .box video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.main-visual .inner_in{z-index: 2}

.main-visual .visual-txtwrap{padding: 150px 0}
.main-visual .typo-line{
    font-size: 80px;
    font-weight: 800;
    font-family: var(--font-en);
    /* line-height: 0.85; */
    line-height: 1.1;
    letter-spacing: 0;
    -webkit-text-fill-color: rgba(241, 241, 241, 0.1);
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg, #F1F1F1 0%, #F1F1F1 50%, transparent 50.1%);
    background-size: 0% 100%;
    text-transform: uppercase;
    display: block;
}


.main-visual p{font-size: 18px; color: #fff; margin-top: 30px; word-break: keep-all; line-height: 150%}




.main-about .about-intro {
    height: 100vh;
    position: relative;
    z-index: 500;
}

.main-about .text-fill-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


.text-fill-wrap .text-fill .text-line {
    font-size: 80px;
    font-weight: 800;
    letter-spacing: -0.045em;
    font-family: var(--font-ns);
    line-height: 1.3;
    -webkit-text-fill-color: rgba(241, 241, 241, 0.1);
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg, #F1F1F1 0%, #F1F1F1 50%, transparent 50.1%);
    background-size: 0% 100%;
    display: block;
    transition-duration: 3s
}

.text-fill-wrap .text-fill .text-line + .text-line {transition-delay: .5s}


.text-fill-wrap.show .text-fill .text-line{
	 background-size: 300% 300%;
}


.main-about{ position: relative;  }
.bg_ain{ position: relative;  }
.main-about .about-intro{z-index: 2}

.section_bg{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.section_bg span{
  position: absolute;
  width: clamp(360px, 40vw, 660px);
  height: clamp(360px, 40vw, 660px);
  border-radius: 1040px;
  background: rgba(255,255,255,0.08);
  filter: blur(50px);
  opacity: .9;               /* 너무 세면 .5~.7로 낮추세요 */
  will-change: transform;
  transform: translate3d(0,0,0);
}


.section_bg span + span{
	width: clamp(460px, 40vw, 760px);
 	height: clamp(460px, 40vw, 760px);
}

/* 초기 배치 (예시값) */
.section_bg .orange{ left: -12%; bottom: -16%; background: rgba(255,120,0,0.12); }
.section_bg .white { right:-10%; top:   0%; background: rgba(255,255,255,0.08); }
.section_bg .purple{ right: -10%; top: 0%; background: rgba(219,0,205,0.08); }
.section_bg .red{ right: 40%; top: 20%; background: rgba(255, 114, 0, 0.08); }



/* 모션 최소화 선호 시 비활성화 */
@media (prefers-reduced-motion: reduce){
  .section_bg span{ transform: none !important; }
}

.main{overflow: hidden}



.main_ccc_flex{display: flex; 
    align-items: center;
    justify-content: space-between;}
    
.main_ccc_flex + .main_ccc_flex{margin-top: 80px}    
    
.main_ccc_flex .box{width: 50%}
.main_ccc_flex .box.right{text-align: right; padding: 0 20px}
.main_ccc_flex .box.left{text-align: left; padding: 0 40px}
.main_ccc_flex .box .txt{}
.main_ccc_flex .box .txt h2{font-size: 60px; color: #fff; font-weight: 800}
.main_ccc_flex .box .txt p{margin-top: 25px; word-break: keep-all; color: #fff; font-size: 18px; line-height: 160%; 
opacity: .8}




.main_ccc_flex .box .icon img{
	max-width: 100%
}




.main_icon01_1{
	animation: icon_ani_01_2 5s linear infinite;
	stroke-dasharray: 500px;    
	stroke-dashoffset: 500; 
}



.main_icon01_2{
	animation: icon_ani_01 5s linear infinite;
	stroke-dasharray: 500px;    
	stroke-dashoffset: 500; 
}

@keyframes icon_ani_01 {
	0% {
		stroke-dashoffset: -500px; 
	}
	50% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 500px;
	}
}



@keyframes icon_ani_01_2 {
	0% {
		stroke-dashoffset: 500px; 
	}
	50% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -500px;
	}
}



/* 공통: 처음엔 숨김 */
.main_icon02_1,
.main_icon02_2,
.main_icon02_3,
.main_icon02_4,
.main_icon02_5 {
  opacity: 0;
}

/* 각 링마다 다른 타임윈도우, 같은 길이/같은 종료 */
.main_icon02_5 { animation: ring5 4s linear infinite both; } /* 가장 먼저 등장 */
.main_icon02_4 { animation: ring4 4s linear infinite both; }
.main_icon02_3 { animation: ring3 4s linear infinite both; }
.main_icon02_2 { animation: ring2 4s linear infinite both; }
.main_icon02_1 { animation: ring1 4s linear infinite both; } /* 가장 나중에 등장 */

/* 5번: 가장 먼저 켜짐, 90%까지 유지, 100%에 모두 함께 OFF */
@keyframes ring5 {
  0%   { opacity: 0; }
  5%   { opacity: 1; }   /* 서서히 켜짐 시작 지점 */
  85%  { opacity: 1; }   /* 유지 */
  90%  { opacity: 0; }   /* 모두 함께 페이드아웃 시작 */
  100% { opacity: 0; }
}

/* 4번: 좀 더 늦게 켜짐 */
@keyframes ring4 {
  0%   { opacity: 0; }
  20%  { opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 3번 */
@keyframes ring3 {
  0%   { opacity: 0; }
  35%  { opacity: 0; }
  40%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 2번 */
@keyframes ring2 {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  55%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 1번: 가장 늦게 켜짐 */
@keyframes ring1 {
  0%   { opacity: 0; }
  65%  { opacity: 0; }
  70%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}


/* 공통: 처음엔 숨김 */
.main_icon03_1,
.main_icon03_2,
.main_icon03_3,
.main_icon03_4,
.main_icon03_5,
.main_icon03_6,
.main_icon03_7,
.main_icon03_8,
.main_icon03_9,
.main_icon03_10,
.main_icon03_11,
.main_icon03_12 {
  opacity: 0;
}

/* 모두 같은 길이/같은 종료 타이밍 */
.main_icon03_12 { animation: ring12 5s linear infinite both; } /* 가장 먼저 등장 */
.main_icon03_11 { animation: ring11 5s linear infinite both; }
.main_icon03_10 { animation: ring10 5s linear infinite both; }
.main_icon03_9  { animation: ring9  5s linear infinite both; }
.main_icon03_8  { animation: ring8  5s linear infinite both; }
.main_icon03_7  { animation: ring7  5s linear infinite both; }
.main_icon03_6  { animation: ring6  5s linear infinite both; }
.main_icon03_5  { animation: ring5  5s linear infinite both; }
.main_icon03_4  { animation: ring4  5s linear infinite both; }
.main_icon03_3  { animation: ring3  5s linear infinite both; }
.main_icon03_2  { animation: ring2  5s linear infinite both; }
.main_icon03_1  { animation: ring1  5s linear infinite both; } /* 가장 늦게 등장 */

/* 등장 시작 퍼센트: 0,6,12,18,...,66 → 90%까지 유지, 100%에 모두 OFF */
@keyframes ring12 {
  0%   { opacity: 0; }
  2%   { opacity: 1; }  /* 부드러운 페이드인 */
  90%  { opacity: 1; }  /* 유지 */
  100% { opacity: 0; }  /* 모두 함께 꺼짐 */
}
@keyframes ring11 {
  0%   { opacity: 0; }
  6%   { opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring10 {
  0%   { opacity: 0; }
  12%  { opacity: 0; }
  14%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring9 {
  0%   { opacity: 0; }
  18%  { opacity: 0; }
  20%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring8 {
  0%   { opacity: 0; }
  24%  { opacity: 0; }
  26%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring7 {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  32%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring6 {
  0%   { opacity: 0; }
  36%  { opacity: 0; }
  38%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring5 {
  0%   { opacity: 0; }
  42%  { opacity: 0; }
  44%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring4 {
  0%   { opacity: 0; }
  48%  { opacity: 0; }
  50%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring3 {
  0%   { opacity: 0; }
  54%  { opacity: 0; }
  56%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring2 {
  0%   { opacity: 0; }
  60%  { opacity: 0; }
  62%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ring1 {
  0%   { opacity: 0; }
  66%  { opacity: 0; }
  68%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}




.main_freedom .text-fill *{text-align: center}

.main_freedom{padding: 150px 0; position: relative}


.freedom_flex{display: flex; gap:20px; margin-top: 80px}
.freedom_flex .box{
	border-radius: 3px;
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.10);
position: relative;
overflow: hidden;
height: 555px;
    justify-content: flex-start;
    align-items: flex-end;
    display: flex;
    padding: 50px;
    flex: 1 1 0%;
    transition-duration: .8s;
    background-position: center;
    background-size: cover
}
.freedom_flex .box:hover{
	flex: 4 1 0%;
}

.freedom_flex .box:last-child {
    margin: 0 auto 0;
}






.freedom_flex .box:nth-child(1){background-image: url(../img/main/freedom_flex01.png)}
.freedom_flex .box:nth-child(2){background-image: url(../img/main/freedom_flex02.png)}
.freedom_flex .box:nth-child(3){background-image: url(../img/main/freedom_flex03.png)}



.freedom_flex .box .txt{overflow: hidden}
.freedom_flex .box .txt h3{font-size: 22px; color: #fff; word-break: keep-all; line-height: 150%; font-weight: 700}
.freedom_flex .box .txt p{font-size: 16px; word-break: keep-all; line-height: 150%; color: #fff; 
margin-top: 0px; height: 0; max-height: 0; visibility: hidden; transition-duration: 2s; opacity: 0}

.freedom_flex .box:hover .txt p{visibility: visible; margin-top: 10px; height: auto; max-height: 300px; opacity: 1}




.roof_text{}
.roof_text h2{
	-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: rgba(255, 255, 255, 0.10);
font-family: Montserrat;
font-size: 280px;
font-style: normal;
font-weight: 800;
line-height: normal;
white-space: nowrap;


 /* 채움 완전 제거 */
  color: #000;
  -webkit-text-fill-color: #000;
  
  
   /* 스트로크 */
  -webkit-text-stroke: 3px rgba(255,255,255,0.10);
  paint-order: stroke fill;              /* 스트로크를 먼저 칠함 */


  /* 렌더링 안정화 */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  isolation: isolate; 
text-transform: uppercase
}


.roof_text { overflow: hidden; }
.roof_text h2 {
  display: inline-block;
  padding: 0 2rem;
  white-space: nowrap;
}

/* 잔상/끊김 최소화 */
.roof_text .slick-track { will-change: transform; }
.roof_text .slick-slide { outline: none; }

.roof_text .slick-track{
  display:flex !important;
  flex-wrap:nowrap !important;  /* 줄바꿈 금지 */
  align-items:center;
}
.roof_text .slick-slide{
  float:none !important;        /* flex에서 float 제거 */
  width:auto !important;        /* variableWidth일 때 필수 */
  display:block !important;
}





.main_company{overflow: hidden}

.main_company .slick-list{overflow: visible; padding: 0 10rem}

.main_company .thum{
	border-radius: 3px;
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.10);
position: relative;
overflow: hidden;
    transition-duration: .8s;
    aspect-ratio: 1/1;
}

.main_company .thum:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(120deg, #FF7200, rgba(255, 255, 255, 0.20), #FF7200);
  background-size: 300% 300%;
  clip-path: polygon(0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 100%, 100% 100%, 100% 0%, 0% 0%);
  animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
  
}

.main_company .thum img{width: 100%;}

.main_company .slick-slide{padding: 10px}


.main_last{
	height: 100vh; overflow: hidden;
	text-align: center;
	background: url(../img/main/main_last.png);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; gap:60px
}

.main_last.subbg{
	background-image: url(../img/sub/sub_last.png);
}

.main_last h2{
	color: #fff; font-size: 80px; font-weight: 800; line-height: 150%; word-break: keep-all
}

.main_last p{color: #fff; font-size: 24px; }


.common_btn{
	border-radius: 80px;
border: 2px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.10);

/* blur */
backdrop-filter: blur(9px);
padding: 30px 35px;
font-size: 18px; color: #fff; font-weight: 600;
display: flex; gap:80px;
    justify-content: center;
    align-items: center;
    transition-duration: .8s;
    position: relative;
    overflow: hidden
}

.common_btn i{background: url(../img/common/common_btn_w.png); width: 19px; height: 8px; background-repeat: no-repeat; background-size: 100% auto;
transition-duration: .8s; position: relative; z-index: 2}

.common_btn span{transition-duration: .8s; color: #fff; position: relative; z-index: 2}

.common_btn:hover i{background-image: url(../img/common/common_btn_b.png);}
.common_btn:hover span{color: #222222}




.common_btn:after {
    content: '';
    position: absolute;
    left: 80%;
    top: calc(100% + 10px);
    border-radius: 70px;
    width: 0px;
    height: 0px;
    background: #fff;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition-duration: 2s;
}

.common_btn:hover:after{width: 400px; height: 400px; background: #fff;  top: 50%; left: 50%;}