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

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

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






.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  background:rgba(255, 255, 255, 1);
  color: #008CD6;
  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;
  box-shadow: 1px 1px 15px rgba(0,0,0,0.05)
}


.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: fixed; left: 0; top: 0; width: 100%; z-index: 9998; transition-duration: 0.8s}
.header.sub{background: #fff; box-shadow: 1px 1px 25px rgba(0,0,0,0.05)}
.header.nodrop{top:-100px; }

.header .logo{
	width: 148px; height: 43px;
	background: url(../img/logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute; left: 4rem;
	top: 25px;
	z-index: 9999
}

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


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


.header .logo.eng.logob,
.header.sub .logo.eng{
	background-image: url(../img/logobeng.png);
}



.header .right{position: absolute; right: 4rem; top: 36px; display: flex; gap:40px; align-items: center;
z-index: 9999}
.header .right .all_btn{display: inline-block; position: relative; width: 40px; height: 16px;}
.header .right .all_btn span{position: absolute; width: 100%; height: 2px; background: #fff; transition-duration: .5s;
border-radius: 2px}

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



.header.sub .right .all_btn span{background: #111}
.header.sub .right .all_btn span:nth-child(1){background: #FF0000}




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









.lang{position: relative; }
.lang .lang_btn{
	width: 24px; height: 24px;
	background: url(../img/lang.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	display: block
}



.header.sub .lang .lang_btn{
	background-image: url(../img/langb.png);
}

.lang .lang_list{position: absolute; padding: 0px 20px;
background: #fff;
 top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%); width: max-content; 
    transition-duration: .7s;
    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: 14px 20px;
}
    

.lang .lang_list a{display: block; font-size: 14px; color: #111; transition-duration: .5s }
.lang .lang_list a + a{margin-top: 5px;}

.lang .lang_list a:hover{color: #F75226}

.header .top_nav{display: flex; gap:80px;  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: 100px;  display: flex;
    justify-content: center;
    align-items: center;}
.header .top_nav li:hover .onedeps{color: #F75226}


.header .top_nav .sub_deps{position: absolute; padding: 0px 20px;
background: rgba(255,255,255,0.9);
 top: calc(100% - 10px); left: 50%;
    transform: translateX(-50%); width: max-content; 
    transition-duration: .2s;
    opacity: 0; visibility:hidden; height: 0; max-height: 0; text-align: left; min-width: 170px}


.header .top_nav li:hover .sub_deps{
	opacity: 1; visibility: visible; height: auto; max-height: 500px;
	 padding: 24px 20px;
	 box-shadow: 1px 1px 25px rgba(0,0,0,0.05);
	 transition-duration: .7s;
}


.header.sub li .onedeps{color: #222}
.header li .onedeps.on{color: #F75226}


.header .top_nav .sub_deps a{display: block; color: #111; font-size: 16px; transition-duration: .0s;
padding: 17px 16px; font-weight: 500}


.header .top_nav li:hover .sub_deps a:hover,
.header .top_nav .sub_deps a.on{color: #F75226; background: #FFF6F6;
transition-duration: .1s;
}



.open_mo .header .top_nav{opacity: 0}


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

.site_map{position: fixed; z-index: 9992;
background: rgba(27, 31, 41, 0.90); 
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%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
    flex-direction: column;
}


.site_map .top_nav li{display: flex; justify-content: flex-start;
    align-items: center; position: relative}
    
.site_map .top_nav li:after{
	content: '';
	width: 0rem;
	height: 1px;
	background: #fff;
	position: absolute; left: -14rem;
	top: 50%;
	transition-duration: .8s
}

.site_map .top_nav li:hover:after{width: 12rem} 
    
.site_map .top_nav li .onedeps{
	font-size: 40px; color: #fff; font-weight: 600; 
  transition-duration: .8s;
	width: 300px; opacity: .5
}

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

.site_map .top_nav li .sub_deps{display: flex; gap:60px;justify-content: flex-start;
    align-items: center; opacity: 0; transition-duration: .8s}

.site_map .top_nav li:hover .sub_deps{opacity: 1}  
    
.site_map .top_nav li .sub_deps a{font-size: 18px; color: #fff; transition-duration: .8s;display: block; opacity: .8; position: relative}
.site_map .top_nav li .sub_deps a:after{content: ''; position: absolute; left: 0; bottom: -5px; width: 0%; 
background: #fff; height: 1px; transition-duration: .8s}
.site_map .top_nav li .sub_deps a:hover{opacity: 1; }
.site_map .top_nav li .sub_deps a:hover:after{width: 100%}


.inner{padding: 0 7rem}


/*foot*/

.foot_btn{position: fixed; z-index: 9992;
right: 4rem; bottom: 4rem; width: 60px; height: 60px;
display: flex;   align-items: center;
  justify-content: center;
    box-shadow: 1px 1px 15px rgba(0,0,0,0.05);
    border: 1px solid #DDD;
background: #FFF; border-radius: 100px;

 /* 👇 추가 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}


.foot_btn.active {
    opacity: 1;
    visibility: visible;
}


.footer{background: #1B1F29}

.foot_info{padding: 60px 0; }

.foot_info .inner_w{display: flex; gap:6rem;
    justify-content: flex-start;
    align-items: flex-start;}

.foot_adress{}
.foot_adress .foot_txt + .foot_txt{margin-top: 20px}

.foot_adress .foot_txt li{color: #fff; font-size: 16px; word-break: keep-all; line-height: 140%;
display: flex; gap:10px; flex-wrap: wrap;}
.foot_adress .foot_txt li span{color: #999; }

.foot_adress .foot_txt li + li{margin-top: 10px}

.foot_copy{
	border-top: 1px solid #4B4B4B; padding: 24px 0
}

.foot_copy p{color: #999; font-size: 16px; word-break: keep-all; line-height: 140%;}
.foot_copy a{color: #fff; font-size: 16px; word-break: keep-all; line-height: 140%;}


.foot_copy .inner_w{display: flex;     justify-content: space-between;
    align-items: center;}
.inner_w{padding: 0 8rem}
.inner_w2{padding: 0 16rem}

/*index*/



.main_visual{position: relative; height: 100vh;
display: flex;
    justify-content: flex-start;
    align-items: flex-end; padding: 8rem 0}
    
.main_visual .txt{position: relative; z-index: 2}    
.main_visual .txt h1{
	color: #FFF;
font-size: 60px;
font-weight: 800;
line-height: 140%; 
word-break: keep-all;
margin: 0
}

.main_visual .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%}
.main_visual .bg video{width: 100%; height: 100%; object-fit: cover;}


.main_visual .down_sc{position: absolute; right: 8rem; bottom: 8rem; z-index: 2; width: 110px; height: 110px;
display: flex;
    justify-content: center;
    align-items: center;}
.main_visual .down_sc .move_r {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: rotate360 8s linear infinite;
}


@keyframes rotate360 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}





.main_section{padding: 160px 0;}
.main_title{margin-bottom: 60px;}
.main_title h4{margin-bottom: 15px; font-size: 20px; color: #F75226; word-break: keep-all; font-weight: 400}
.main_title h2{font-size: 44px; line-height: 150%; word-break: keep-all; font-weight: 700}
.main_title.center{text-align: center}


.main_title.flex{display: flex;justify-content: space-between;
    align-items: flex-end; }

.main_section.gray{background: #F9F9F9}


.common_btn{padding: 12px 20px; display: inline-flex; color:#1B1B1B; gap:14px; transition-duration: .8s ; border-radius: 80px;
background: #fff; border: 1px solid #ddd; font-size: 16px; font-weight: 500; align-items: center;}
.common_btn i{width: 32px; height: 32px; border-radius: 32px;
background: #111 url(../img/common_btn.png);
background-position: center; background-repeat: no-repeat; transition-duration: .8s}

.common_btn:hover{background: #111; color: #fff}
.common_btn:hover i{
	background-color: #fff;
	background-image: url(../img/common_btnb.png);
}

.main_bu_flex{display: flex; gap:24px}


.main_bu_flex .box{flex:1 1 0%; border-radius: 0px; overflow: hidden; height: 70vh; 
transition-duration: 1s; position: relative;  z-index: 2; padding: 30px; background-position: center; background-size: cover; display: flex;
    flex-direction: column;
        justify-content: flex-end;
    align-items: flex-start; padding: 50px;}
.main_bu_flex .box:hover{flex:2 1 0% }
.main_bu_flex .box:last-child{margin: 0 auto 0}

.main_bu_flex .box .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%}
.main_bu_flex .box .bg img{width: 100%; display: block; height: 100%; object-fit: cover;}

.main_bu_flex .box .txt {
    position: relative;
    display: flex;
    z-index: 2;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}



.main_bu_flex .box .txt .info p{color: #fff; font-size: 18px; font-weight: 400; line-height: 150%; word-break: keep-all}
.main_bu_flex .box .txt .info h2{margin-top: 10px; font-size: 34px; font-weight: 700; line-height: 150%; word-break: keep-all; font-weight: 700; color: #fff}


.main_bu_flex .box .txt .more_btn{display: flex; gap:10px; padding: 10px 20px; background: #F75226; font-size: 18px; 
font-weight: 500; line-height: 140%; word-break: keep-all; display: inline-flex;     justify-content: center;
    align-items: center; color: #fff; visibility: hidden; opacity: 0; transition-duration: .8s}

.main_bu_flex .box:hover .txt .more_btn{visibility: visible; opacity: 1}



.main_board{display: flex; gap:60px;}
.main_board .left{width: 520px; }


.main_board a{display: block}
.main_board .thum{display: block; aspect-ratio: 3 / 2; max-width: 520px; border: 1px solid #ddd}
.main_board .thum img{width: 100%; display: block; height: 100%; object-fit: cover;}
.main_board .txt{display: block; margin-top: 24px;}


.main_board .txt h3{font-size: 24px; line-height: 140%; word-break: keep-all; font-weight: 600; 
display: -webkit-box;
  -webkit-line-clamp: 2; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;}
.main_board .txt p{font-size: 16px; line-height: 140%; word-break: keep-all; font-weight: 400; 
display: -webkit-box;
  -webkit-line-clamp: 2; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; margin-top: 16px; color: #666}
.main_board .txt p.date{}

.main_board .right{padding-left: 60px; border-left:1px solid #ddd; flex:1}
.main_board .right a{display: flex; flex-direction: row-reverse; gap:60px;     justify-content: space-between;}

.main_board .right .thum{max-width: 224px; width: 100%}


.main_board .right .txt{margin: 0}

.main_board .right a + a{margin-top: 30px; padding-top: 30px; border-top: 1px solid #ddd}


.main_board .right .txt h3{-webkit-line-clamp: 1; }


.main_contact{background: url(../img/main/main_contact_bg.png);
background-position: center; background-size: cover; padding: 70px; display: flex;
    justify-content: space-between;
    align-items: flex-start;}


.main_contact .txt{}
.main_contact .txt h2{color: #fff; font-size: 48px; font-weight: 700; line-height: 140%; word-break: keep-all}
.main_contact .txt p{margin-top: 24px; font-size: 20px; font-weight: 400; word-break: keep-all; line-height: 150%; color: #fff}


.main_contact_btn a{padding: 40px; display: block; width: 490px; transition-duration: 0.8s; position: relative}
.main_contact_btn a:after{content: '';
  position: absolute; 
  left: 0; width: 0%; height: 100%; transition-duration: .8s;
   background: #F75226;
   top: 0
}

.main_contact_btn a:hover:after{width: 100%}

.main_contact_btn a h3{color: #fff; font-size: 24px; font-weight: 700; line-height: 140%; word-break: keep-all; position: relative; z-index: 2}
.main_contact_btn a p{margin-top: 16px; font-size: 16px; color: #fff; line-height: 140%; word-break: keep-all; position: relative; z-index: 2}
.main_contact_btn a i{width: 54px; height: 54px; border: 1px solid #fff; display: flex;
justify-content: center;
align-items: center; opacity: 0; transition-duration: .8s; margin-top: 44px; border-radius: 54px; position: relative; z-index: 2}


.main_contact_btn a:hover i{opacity: 1}


.main_contact_btn a.active:after {width: 100%}

.main_contact_btn a.active i {
    opacity: 1;
}