/* 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: 500;
  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;
}





.inner{padding: 0 10rem}
.inner_w{padding: 0 14rem}
.header{position: fixed; left: 0; top: 0; width: 100%; z-index: 9999;
transition-duration: .8s}

.header.fixed{background: #fff}
.header.no_fixed{top: -100px}

.header .inner{display: flex; width: 100%;
    justify-content: space-between;
    align-items: center; height: 100px;}

.header .logo{background: url(../img/logob.png);
width: 56px; height: 44px; background-position: center;
background-repeat: no-repeat; background-size: 100% auto
}

.header.fixed .logo{
	background-image: url(../img/logob.png);
}


.header:after{
	content: '';
	position: absolute; left: 0; top: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.40);
	width: 100%;
    height: 0px;
    transition-duration: .8s
}


.header:hover:after{
	height: 360px;
}

.header:before{
	width: 0%;
	height: 1px; 
	background: rgba(255, 255, 255, 0.30);
	transition-duration: .8s;
	left: 0; top: 100px;
	position: absolute;
	content: '';
	z-index:2
}
.header:hover:before{width: 100%}


.header .left{display: flex; gap:80px;  align-items: center;}

.header .top_nav{display: flex; }
.header .top_nav li{width: 200px; position: relative}
.header .top_nav li .one_deps{
	text-align: center;
	justify-content: center;
align-items: center;
display: flex;
color: #FFF;
font-size: 18px;
font-weight: 500;
line-height: 140%;
word-break: keep-all;
height: 100px;
z-index: 2;
position: relative
}

.header.fixed .top_nav li .one_deps{color: #222}
.header.fixed:after{background: #fff}

.header.fixed:before{background: #f5f5f5}


.header .top_nav li .sub_deps{position: absolute; top: 100%; left: 0; width: 100%; text-align: center;
transition-duration: .8s; visibility: hidden; height: 0; max-height: 0; opacity: 0;
transition-delay: 0s; z-index: 2}

.header:hover .top_nav li .sub_deps{height: auto; max-height: 50vh; visibility: visible; padding: 24px 0; opacity: 1;
transition-delay: .3s}

.header .top_nav li .sub_deps a{
	color: #FFF;
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 140%;
word-break: keep-all;
display: block;
transition-duration: .8s
}
.header .top_nav li .sub_deps a + a{margin-top: 24px;}




.header .top_nav li:after{
	content: '';
	position: absolute; 
	left: 0; top: 0;
	width: 100%; 
	height: 0; background: #fff; z-index: 1;
	transition-duration: .8s
}
.header .top_nav li:hover:after{
	height: 360px;
}

.header .top_nav li:hover .one_deps{color: #003C90;}
.header .top_nav li:hover .sub_deps a{color: #666;}
.header .top_nav li:hover .sub_deps a:hover{color: #003C90;}


.header .top_nav li:before{
	width: 0%;
	height: 1px; 
	background: #003C90;
	transition-duration: .8s;
	left: 0; top: 100px;
	position: absolute;
	content: '';
	z-index: 3
}
.header .top_nav li:hover:before{width: 100%}


.header.fixed .top_nav li .sub_deps a{color: #222}

.header.fixed .top_nav li:after{background: #f5f5f5}





.header .right{display: flex; gap:40px;    align-items: center; }
.header .right .lang{position: relative}
.header .right .lang p{display: flex;
gap:8px; align-items: center;
font-size: 16px; font-weight: 500; color: #fff;
position: relative; padding-right: 22px; cursor: pointer }
.header .right .lang p i{
	width: 24px; height: 24px;
	display: inline-block;
	background: url(../img/lang.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto
}

.header.fixed .right .lang p{color: #111;}
.header.fixed .right .lang p i{
	background-image: url(../img/langb.png);
}



.header .right .lang p:after{
	content: '';
	position: absolute; right: 0;
	top: 5px;
	width: 16px; height: 16px;
	background: url(../img/lang_drop.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	
}

.header.fixed .right .lang p:after{
	background-image: url(../img/lang_dropb.png);
}

.header .right .lang .open_lang{position: absolute; left: 0; top: calc(100% + 10px);
padding: 10px; text-align: center; z-index: 2; background: #fff; border-radius: 5px; 
width: 100%; opacity: 0; visibility: hidden; transition-duration: .5s; border: 1px solid #ddd}
.header .right .lang .open_lang a{font-size: 14px; display: block}
.header .right .lang .open_lang a + a{margin-top: 10px}

.header .right .lang .open_lang.atv{visibility: visible; opacity: 1; }

.site_map_btn{width: 32px; height: 24px; position: relative; cursor: pointer}
.site_map_btn span{position: absolute;
background: #fff; border-radius: 2px; height: 2px; width: 100%; transition-duration: .5s }


.site_map_btn span:nth-child(1){top: 0; left: 0; width: 80%}
.site_map_btn span:nth-child(2){top: calc(50% - 1px); left: 0; %}
.site_map_btn span:nth-child(3){bottom: 0; right: 0; width: 80%}


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

.open_mo .header .top_nav{display: none}

.open_mo .header.fixed{background: transparent}
.open_mo .header.fixed .logo {
    background-image: url(../img/logob.png);
}

.header.fixed .site_map_btn span{background: #111}

.open_mo .header:before{display: none}
.open_mo .header:after{display: none}
.open_mo .header.fixed .right .lang p{color: #fff}
.open_mo .header.fixed .right .lang p i{    background-image: url(../img/lang.png);}

.open_mo .header.fixed .right .lang p:after {
    background-image: url(../img/lang_drop.png);
}

.open_mo .header.fixed .site_map_btn span{background: #fff}
.site_map{position: fixed; z-index: 9998;
background: url(../img/site_map.png);
background-size: cover;
width: 100%; height: 100%; padding: 0 10rem;
display: flex;
    align-items: center; opacity: 0; visibility: hidden; transition-duration: .5s}


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

.site_map .top_nav{width: 100%}
.site_map .top_nav li{display: flex; padding: 50px 0; align-items: center; gap:6rem}
.site_map .top_nav li .one_deps{
color: #FFF;
font-size: 30px;
font-weight: 700;
word-break: keep-all
}

.site_map .top_nav li + li{
	border-top: 1px solid rgba(255,255,255,0.3);
}

.site_map .top_nav li .sub_deps{flex:1; display: flex; align-items: center; gap:3rem}
.site_map .top_nav li .sub_deps a{
	color: #FFF;
font-size: 20px;
font-weight: 500;
display: block
}

/*foot*/

.top_btn{
	display: flex;
width: 80px;
height: 80px;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #FFF;
border: 1px solid #ddd;
z-index: 2;
transition-duration: .5s
}

.top_btn:hover{padding-bottom: 5px}

.top_btn img{transition-duration: .5s}



.footer{padding: 120px 0;
background: #111;}


.footer .foot_top{display: flex;
justify-content: space-between;
align-items: center;}


.footer .foot_top .foot_link{
	display: flex;
align-items: center;
gap: 50px;
}


.footer .foot_top .foot_link a{
	color: #FFF;
font-size: 18px;
font-weight: 500;
line-height: 140%; 
word-break: keep-all; display: block
}

.foot_info{margin-top: 60px; display: flex;
justify-content: space-between;
align-items: flex-end;
}
.foot_info p{
	color: #FFF;
font-size: 18px;
font-weight: 400;
line-height: 150%; /* 28px */
word-break: keep-all
}
.foot_info p + p{margin-top: 3px;}

.foot_info p.copy{margin-top: 50px; opacity: .5; font-size: 16px}

.chat{
	position: fixed;
	z-index: 2;
	right: 3rem; bottom: 3rem;
	border-radius: 100px;
background: #003C90;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
display: flex;
width: 80px;
height: 80px;
justify-content: center;
align-items: center;
}



.main_visual{height: 100vh; width: 100%; position: relative; overflow: hidden}
.main_visual .box{position: relative; width: 100%; height: 100vh; overflow: hidden;
display: flex;
    align-items: center;}
.main_visual .box .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000}


.main_visual .box .bg img,
.main_visual .box .bg video{display: block; width: 100%; height: 100%;
object-fit: cover; opacity: .6}

.main_visual .box .txt{position: relative; z-index: 2; padding-top: 50px}

.main_visual .box .txt h2{
	color: #FFF;
font-size: 54px;
font-weight: 700;
line-height: 140%; /* 75.6px */
word-break: keep-all
}
.main_visual .box .txt p{
	margin-top: 24px;
	color: #FFF;
font-size: 20px;
font-weight: 400;
line-height: 150%;
word-break: keep-all
}

.main_visual .box .txt .main_btn{margin-top: 40px;}

.main_btn{
	display: inline-flex;
padding: 10px 30px 10px 10px;
justify-content: flex-start;
    align-items: center;
gap: 10px;
border-radius: 70px;
border: 1px solid rgba(255, 255, 255, 0.50);
background: rgba(255, 255, 255, 0.00);
color: #FFF;
font-size: 16px;
font-weight: 600;
word-break: keep-all;
transition-duration: .8s
}


.main_btn i{
	display: flex;
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
aspect-ratio: 1/1;
border-radius: 30px;
background: #FFF;
transition-duration: .8s
}
.main_btn span{
	transition-duration: .8s
}

.main_btn span{flex:1}

.main_visual_cnt{position: absolute; z-index: 3; display: flex; 
left: 0; width: 100%; padding: 0 10rem; top: 28%; gap:13px; align-items: center;}

.main_visual_cnt span{cursor: pointer}
.main_visual_cnt .count{display: flex; align-items: center; gap:13px;}
.main_visual_cnt .count p{
	color: rgba(255, 255, 255, 0.80);
font-size: 16px;
font-weight: 500;
}
.main_visual_cnt .count p.on{color: #fff}
.main_visual_cnt .count i{
	width: 2px;
height: 4px;
background: rgba(255, 255, 255, 0.80);
}






/* 배경 줌 모션 */
.main_visual_slide .slick-slide .bg img,
.main_visual_slide .slick-slide .bg video {
  transform: scale(1.12);
  transition: transform 6s ease;
}

.main_visual_slide .slick-slide.slick-active .bg img,
.main_visual_slide .slick-slide.slick-active .bg video {
  transform: scale(1);
}


/* 텍스트 아래 → 위 등장 */
.main_visual_slide .slick-slide .txt h2,
.main_visual_slide .slick-slide .txt p,
.main_visual_slide .slick-slide .txt .main_btn {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity .9s ease, transform .9s ease;
}

.main_visual.visual-ready .main_visual_slide .slick-slide.slick-active .txt h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .35s;
}

.main_visual.visual-ready .main_visual_slide .slick-slide.slick-active .txt p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .55s;
}

.main_visual.visual-ready .main_visual_slide .slick-slide.slick-active .txt .main_btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .75s;
}




.main_value {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.main_value_pin {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.value_card {
  width: 33.3333%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px;
  display: flex;
  flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.value_card h1{
	color: #FFF;
text-align: right;
font-size: 80px;
font-weight: 600;
line-height: 140%; /* 112px */
letter-spacing: -2.4px;
opacity: 0.2; word-break: keep-all;
width: 100%
}
.value_card .txt h2{
	color: #FFF;
font-size: 44px;
font-weight: 700;
line-height: 140%; /* 61.6px */
word-break: keep-all
}
.value_card .txt p{
	color: #FFF;
font-size: 20px;
font-weight: 400;
line-height: 140%; /* 28px */
word-break: keep-all; margin-top: 14px;
}

.value_card01{background-image: url(../img/main/value_card01.png)}
.value_card02{background-image: url(../img/main/value_card02.png);
flex-direction: column-reverse;}
.value_card03{background-image: url(../img/main/value_card03.png)}


.main_product {
  padding: 150px 0;
  overflow: hidden;
}

.main_product .inner {
  display: flex;
  align-items: center;
  gap: 10rem;
}

.product_txt {
  width: 340px;
  flex-shrink: 0;
}

.product_txt.eng{width: 100%; max-width: 500px}

.product_txt strong {
  display: block;
  color: #003C90;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

.product_txt h2 {
  font-size: 44px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #000;
  word-break: keep-all;
  line-height: 150%;
}

.product_txt .desc01 {
  color: #000;
font-size: 20px;
font-weight: 500;
line-height: 150%; 
margin-top: 40px; word-break: keep-all
}

.product_txt .desc02 {
  margin-top: 18px;
  color: #666;
font-size: 18px;
font-weight: 400;
line-height: 150%; /* 27px */
word-break: keep-all
}





.product_txt .main_btn{
border: 1px solid rgba(0, 60, 144, 0.50);
background: rgba(255, 255, 255, 0.00);
color: #003C90;
margin-top: 40px;
}

.product_txt .main_btn i{
background: #003C90;
}









.product_slide {
  flex: 1;
  display: flex;
  gap: 24px;
  height: 500px;
  overflow: hidden;
}

.product_card {
  height: 100%;
  overflow: hidden;
  flex:1 1 0%;
  transition-duration: .8s
}

.product_card.active {
  flex:2 1 0%
}

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


.main_product_cnt{display: flex; gap:50px; align-items: center; margin-top: 80px}



.product_control {
  display: flex;
  gap: 40px;
}






.product_control button {
  border: 0;
  background: none;
  cursor: pointer;

}

.product_control button svg,
.product_control button img{display: block; max-width: 100%}

.product_progress {
  width: 100px;
  height: 2px;
  background: #ddd;
  overflow: hidden;
}

.product_progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #003C90;
}


.main_last{
	padding: 150px 0;
	background: url(../img/main/main_last.png);
	background-position: center;
	background-size: cover
}



.main_last_top{display: flex; padding-bottom: 40px; margin-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.30);
justify-content: space-between;
}
.main_last_top h2{
	color: #FFF;
font-size: 44px;
font-weight: 700;
line-height: 140%; /* 61.6px */
word-break: keep-all
}


.main_last_top a{
	display: flex;
align-items: center;
gap: 20px;
color: #FFF;
font-size: 24px;
font-weight: 700;
line-height: 140%; /* 33.6px */
word-break: keep-all
}




.main_last_bottom{
	display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}


.main_last_bottom .left{
	display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.main_last_bottom .left h3{
	color: #FFF;
font-size: 30px;
font-weight: 700;
line-height: 140%; /* 42px */
word-break: keep-all
}


.main_last_bottom .left .main_last_info li{
	display: flex;
align-items: center;
gap: 37px;
align-self: stretch;
color: #FFF;
font-size: 18px;
font-weight: 400;
line-height: 140%; /* 25.2px */
word-break: keep-all
}

.main_last_bottom .left .main_last_info li + li{margin-top: 18px}

.main_last_bottom .left .main_last_info li b{width: 85px; font-weight: 700;}
.main_last_bottom .left .main_last_info li span{flex:1}
.main_last_bottom .right{width: 600px; overflow: hidden}
.main_last_bottom .right iframe{display: block; width: 100%}







.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
 background: rgba(17, 17, 17, 0.30);
backdrop-filter: blur(10px);
  color: #fff;
  display: none; /* 기본적으로 숨김 */
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 180px;
  pointer-events: none;
  transform: translate(-100%, -100%);
  user-select: none;
  z-index: 4444;
  gap:20px; display: flex;
}



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


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