:root {
    --main-color: #0059ff;
    --custom-black: #0e0e0e;
    --custom-gray: #7e7777;
    --custom-padding: 200px;
    --font-poppins: "Poppins", "Pretendard Variable", Pretendard, system-ui, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
    word-break: keep-all;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

#hd {
    display: none;
}

.content-wrap {
    position: relative;
    padding: 0 var(--custom-padding);
}

.page-wrap {
    position: relative;
    width: 100%;
}




.inner{padding: 0 8rem}

.header{position: fixed; left: 0; top: 0; width: 100%; z-index: 9999; transition-duration: .8s}
.header.change{background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);}
.header .inner{display: flex;
align-items: center;
    justify-content: space-between; height: 100px; }


.header .nav{display: flex; gap:50px}
.header .nav li a{color: #fff; font-size: 18px; font-weight: 600; word-break: keep-all;
text-transform: uppercase}



.main_visual_are{height: 100vh; overflow: hidden; position: relative; background: #000;
justify-content: center;
    align-items: center; display: flex}
.main_visual_are .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.main_visual_are .bg video{width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.8;}

.main_visual_are .sc_down{position: absolute; z-index: 2; left: 0; width: 100%; bottom: 6rem}
.main_visual_are .sc_down p{color: #fff; font-size: 16px; word-break: keep-all; display: flex; gap:5px;
justify-content: center;
    align-items: center;}


.main_visual_are .txt{text-align: center; position: relative; z-index: 2}
.main_visual_are .txt h2{color: #fff; font-size: 64px; line-height: 140%; word-break: keep-all; font-weight: 700}


.main_section,
.section{padding: 150px 0}
.main_history{background: #050505;}

.main_title{text-align: center; margin-bottom: 60px; position: relative}
.main_title h5{margin-bottom: 24px; border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.50); display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 10px; color: #fff; font-size: 18px; font-weight: 400; word-break: keep-all}
.main_title h2{font-size: 54px; color: #fff; font-weight: 700; line-height: 140%; word-break: keep-all}

.main_title p{
	color: rgba(255, 255, 255, 0.60);
font-size: 20px;
font-weight: 400;
line-height: 150%; /* 30px */
word-break: keep-all;
margin-top: 20px
}

.main_history_are {
  position: relative;

}



.main_history_slide .slick-list{padding: 0 22%}

.main_history_slide .slick-track{
	 align-items: center;display: flex;
}
/* 슬라이드 */
.history_item {
  position: relative;
  padding: 0 20px;
  display: flex;
  gap:60px;
  justify-content: center;
    align-items: center;
    min-height: 560px
}

.history_item .thum{
	aspect-ratio: 1;
	max-width: 500px;
	transition-duration: .5s
	
}

.history_item .thum img {
  width: 100%;
  height:100%;
  display: block;
  object-fit: cover;
}

/* 텍스트 기본 숨김 */
.history_item .txt {
  color: #fff;
  transition: opacity .4s;
  display: none;
  flex:1;
  min-width: 340px;
}


.history_item .txt h3{color: #fff; font-size: 50px; font-weight: 700; word-break: keep-all}
.history_item .txt p{margin-top: 25px; font-size: 18px; line-height: 150%; word-break: keep-all; color: #fff}
.history_item .txt p + p{margin-top: 5px}

/* 중앙 활성화된 슬라이드만 표시 */
.main_history_slide .slick-current .txt {
  opacity: 1;
  display: block
}

/* 양옆 흐리게 */
.main_history_slide .slick-slide {
  opacity: 0.3;
  transition: opacity .4s;
}

.main_history_slide .slick-current {
  opacity: 1;
}

.main_history_slide .slick-current .history_item .thum{max-width: 560px}


.main_history_slide_ct{position: absolute;
left: calc(22% + 20px); top: 0; height: 100%; min-width: 340px;
display: flex;
flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;}


.history_counter {
  position: relative;
  color: rgba(255, 255, 255, 0.50);
  font-size: 16px;
}
.history_counter .current{color: #fff; font-size: 30px;}

.history_progress {
  position: relative;

  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.5);
}

.history_progress .bar {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
  transition: width .4s;
}


.section2{background: url(../img/section2.png);
background-position: center; background-size: cover}


.scroll-wrap {
    position: relative;
    width: 100%;
}

.scroll-bar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.50);
    width: 1px;
    height: 100%;
}

.scroll-thumb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 102px;
    height: 240px;
    margin-top: -20px;
}

.scroll-box-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.scroll-box {
    overflow: hidden;
    position: relative;
    max-width: 640px;
    width: 44%;
    margin-bottom: 360px;
    border: 1px solid rgba(255, 255, 255, 0.33);
}

.scroll-box.on {}



.scroll-box:nth-of-type(2n) {
    /* transform: translateY(360px); */
    top: 360px;
}

.scroll-box .bg {
    position: relative;
}

.scroll-box .bg img{display: block; max-width: 100%}

.scroll-box .txt {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 40px;
     border-top: 1px solid rgba(255, 255, 255, 0.33);
}

.scroll-box .txt span {
    color: #FFF;
    text-align: left;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 16px;
}

.scroll-box .txt p {
    color: #FFF;
    text-align: left;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}






.vehicles{background: url(../img/vehicles.png);
background-position: center; background-size: cover}





.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.2);
  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/cursor_next.png); width: 12px; height: 24px; background-repeat: no-repeat; background-size: 100% auto}


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



.vehicles_slide .slick-list{padding: 0 20rem}
.vehicles_slide .slick-slide{
	border-bottom: 1px solid rgba(255, 255, 255, 0.33);
}

.vehicles_slide .slick-slide + .slick-slide{
	border-left: 1px solid rgba(255, 255, 255, 0.33);
}

.vehicles_slide img{display: block; width: 100%}
.vehicles_slide .txt{padding: 40px;}
.vehicles_slide .txt p{color: #fff; font-size: 26px; font-weight: 700; line-height: 150%; word-break: keep-all}


.main_ceo{display: flex; border-top:  1px solid rgba(255, 255, 255, 0.33);;
border-bottom:  1px solid rgba(255, 255, 255, 0.33); align-items: center;}
.main_ceo .right{border-left: 1px solid rgba(255, 255, 255, 0.33); padding: 40px; width: 35%}
.main_ceo .right img{display: block; max-width: 100%}
.main_ceo .left{flex:1}
.main_ceo .left .top{padding:50px 25px 40px 8rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.33);}
.main_ceo .left .bottom{padding: 40px 25px 50px 8rem ; position: relative}
.main_ceo .left .bottom .main_ceo_logo{position: absolute; right:40px; bottom: 0px }

.main_ceo .left .top .main_title{text-align: left; margin: 0; position: relative; z-index: 2}
.main_ceo .left .bottom p{
	color: rgba(255, 255, 255, 0.60);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 28.8px */
word-break: keep-all;
; position: relative; z-index: 2
}
.main_ceo .left .bottom h4{margin-top: 40px;
color: #FFF;
font-size: 20px;
font-weight: 600;
line-height: 150%; /* 30px */
word-break: keep-all;
; position: relative; z-index: 2
}
.main_ceo .left .bottom h3{margin-top: 10px;
color: #FFF;
font-size: 22px;
font-weight: 700;
line-height: 150%; /* 33px */
word-break: keep-all;
; position: relative; z-index: 2
}





.main_section.not_bottom{padding-bottom: 0}
.main_value .main_title,
.main_safe .main_title{text-align: left}

.btn_ct_flex{position: absolute; display: flex; gap:30px; bottom: 0; right: 0; align-items: center;}
.btn_ct_flex p{display: flex; gap:20px; font-size: 20px; font-weight: 600; word-break: keep-all; text-transform: uppercase;
color: #fff; transition-duration: .5s; cursor: pointer; align-items: center;}
.btn_ct_flex p img{display: block}
.btn_ct_flex p span{position: relative}
.btn_ct_flex p span:after{content: '';
position: absolute; left: 0; bottom: -3px; width: 0%; height: 1px; background: #fff; transition-duration: .5s}

.btn_ct_flex p:hover span:after{width: 100%}




.main_value_slide .slick-list{padding: 0 20rem 0 0}
.main_value_slide .slick-slide{
	border-bottom: 1px solid rgba(255, 255, 255, 0.33);
}

.main_value_slide .slick-slide + .slick-slide{
	border-left: 1px solid rgba(255, 255, 255, 0.33);
}

.main_value_slide img{display: block; width: 100%}
.main_value_slide .txt{padding: 40px;}
.main_value_slide .txt p{color: #fff; font-size: 26px; font-weight: 700; line-height: 150%; word-break: keep-all}


.main_safe_are{position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.33);
border-bottom: 1px solid rgba(255, 255, 255, 0.33);}

.main_safe_slide .box{display: flex; align-items: stretch;}

.main_safe_slide .box .thum{padding: 40px; width: 60%}
.main_safe_slide .box .thum img{display: block; width: 100%}

.main_safe_slide .box .txt{padding: 0 100px;
border-left: 1px solid rgba(255, 255, 255, 0.33); flex:1;
display: flex;
flex-direction: column;
    justify-content: center;
    align-items: flex-start;}
.main_safe_slide .box .txt h2{
	color: #FFF;
font-size: 40px;
font-weight: 700;
line-height: 150%; /* 60px */
word-break: keep-all
}

.main_safe_slide .box .txt h2 span{color: #fff; font-size: 16px; font-weight: 500; word-break: keep-all}

.main_safe_slide .box .txt p{margin-top: 20px; 
color: #FFF;
font-size: 18px;
font-weight: 400;
line-height: 150%; /* 27px */
word-break: keep-all}

.safe_ui{position: absolute; margin-left: 60%; padding: 8% 100px;  height: 100%; z-index: 2;
display: flex;
flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;}
.safe_ui .top{display: flex; gap:20px; align-items: center;}
.safe_ui .top .safe_counter{color: #fff; font-size: 14px; font-weight: 600; word-break: keep-all}

.safe_dots{display: flex; gap:20px; align-items: center;}
.safe_dots li{border-radius: 3px;
background: rgba(255, 255, 255, 0.20); height: 4px; width: 27px; transition-duration: .5s}
.safe_dots li.active{background: rgba(255, 255, 255, 1);}

.safe_ui .bottom{display: flex; gap:14px;  align-items: center;}
.safe_ui .bottom button{
	border-radius: 60px;
border: 1px solid rgba(255, 255, 255, 0.33);
width: 60px;
height: 60px;
display: flex;
 align-items: center;
 justify-content: center;
 background: transparent;
}



/*foot*/

.section7 {
    overflow: hidden;
    background: url(../img/section7.png);
background-position: center; background-size: cover
}

.section7 .section-header>* {
    text-align: center;
    color: #222222;
}


.marquee-slider1 {
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
    display: flex;
    width: max-content;
    animation: marquee1 30s linear infinite;
    gap: 30px;
}

@keyframes marquee1 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-slider2 {
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
    display: flex;
    width: max-content;
    animation: marquee2 30s linear infinite;
    animation-direction: reverse;
    gap: 30px;
}

@keyframes marquee2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


.marquee-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 100px;
    user-select: none;
	padding: 20px

}

.marquee-slide img{
	width: 100%;
	height: 100%;
	    object-fit: contain;
}

#ft {
    background-color: #0B0B0B;
    border-top: 1px solid rgba(255, 255, 255, 0.33);
}

.footer-content {
    padding: 0px 0;
    display: flex;
    align-items: center;
}

.foot_left{
	flex:1;
	padding:50px 25px 50px 8rem;
	
}


.footer-logo {
    display: inline-block;
    max-width: 73px;
    margin-bottom: 50px;
}

.add {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.add ul {
    display: flex;
    align-items: center;
}

.add ul li {
    display: flex;
    align-items: center;
    margin-right: 40px;
}

.add ul li span {
    width: 50px;
    margin-right: 20px;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 23.4px;
    letter-spacing: -0.5px;
}

.add ul li p {
    color: rgba(255, 255, 255, 0.80);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.4px;
    letter-spacing: -0.5px;
}

.copyright {
    color: #666;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20.8px;
    letter-spacing: -0.5px;
}

.map {
    width: 40%;
    overflow: hidden;
    padding: 50px;
    border-left: 1px solid rgba(255, 255, 255, 0.33);
}


.map iframe{display: block;  height: 300px;}


.site_map{display: none}


.all_btn{display: none}




.floation_top{
	border-radius: 80px;
	background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
	/* drop */
	box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.15);
	width: 80px;
	height: 80px;
	position: fixed; z-index: 3;
	right: 50px; bottom: 3rem;
	display: flex; 
	justify-content: center;
    align-items: center;
    transition-duration: 0.4s;
	border: 1px solid rgba(255,255,255,0.2)
}

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








@media (max-width: 1640px) {

.inner{padding: 0 3rem}
.main_history_slide .slick-list{padding: 0 15%}

.main_history_slide .slick-slide .history_item{justify-content: flex-end;}
.main_history_slide .slick-slide.slick-active + .slick-slide .history_item{justify-content: flex-start;}
.main_history_slide .slick-slide.slick-active .history_item{justify-content: center;}


.main_history_slide_ct {
    left: calc(15% + 20px);
}

.foot_left,
.main_ceo .left .bottom,
.main_ceo .left .top{padding-left: 3rem}
 
}






@media (max-width: 1500px) {


.header .nav li a{font-size: 16px}

.main_visual_are .txt h2,
.main_title h2{font-size: 40px}

.history_item .txt h3{font-size: 34px}
.history_item .txt p{font-size: 16px}



.main_title h5,
.main_safe_slide .box .txt p{font-size: 14px}

.scroll-box .txt span,
.vehicles_slide .txt p,
.main_value_slide .txt p{font-size: 20px}

.scroll-box .txt p,
.main_ceo .left .bottom p,
.main_ceo .left .bottom h4,
.btn_ct_flex p,
.main_safe_slide .box .txt p,
.main_title p{font-size: 16px}

.main_safe_slide .box .txt p br{display: none}

.main_ceo .left .bottom h3{font-size: 18px}

.main_safe_slide .box .txt h2{font-size: 24px}

.add ul li span{width: 30px}

}


@media (max-width: 1370px) {




}


@media (max-width: 1280px) {

.map,
.main_value_slide .txt,
.scroll-box .txt,
.vehicles_slide .txt,
.main_ceo .right,
.main_safe_slide .box .thum{padding: 25px}

.main_ceo .right{width: 40%}

.marquee-slide{width: 200px; height: 80px}

.main_safe_slide .box .txt{padding: 0 3rem}

.safe_ui{padding: 6% 3rem}

.scroll-box .txt span, .vehicles_slide .txt p, .main_value_slide .txt p{font-size: 17px}

.main_history_slide .slick-list{padding: 0 3rem}

    .main_history_slide_ct {
        left: calc(3rem + 20px);
    }
    
.scroll-box .txt p, .main_ceo .left .bottom p, .main_ceo .left .bottom h4, .btn_ct_flex p, .main_safe_slide .box .txt p, .main_title p{font-size: 14px}    
   
.vehicles_slide .slick-list {
    padding: 0 10rem;
}
   
.main_value_slide .slick-list {
    padding: 0 10rem 0 0;
} 


.main_section, .section {
    padding: 100px 0;
}



}


@media (max-width: 1024px) {
	
body{overflow-x: hidden}
.page-wrap{overflow-x: hidden}

.scroll-thumb img{max-width: 40px; margin: 0 auto; display: block}

.scroll-box{margin-bottom: 100px}


.scroll-box:nth-of-type(2n) {
    top: 100px;
}

.main_ceo {
    flex-direction: column-reverse;
}

.main_ceo .right{width: 100%; height: 40vh;
border-left: 0px solid rgba(255, 255, 255, 0.33);
border-bottom: 1px solid rgba(255, 255, 255, 0.33);}
.main_ceo .right img{width: 100%; height: 100%; object-fit: cover;}

.main_ceo .left{width: 100%}

.main_ceo .left .bottom .main_ceo_logo{max-width: 200px}

.main_safe_slide .box {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}


.main_safe_slide .box .txt{width: 100%;
border-left: 0px solid rgba(255, 255, 255, 0.33);
border-top: 1px solid rgba(255, 255, 255, 0.33); padding: 30px 3rem}

.main_safe_slide .box .thum{width: 100%; height: 40vh;}
.main_safe_slide .box .thum img{width: 100%; height: 100%; object-fit: cover;}

    .safe_ui {
        padding: 30px 3rem 10px;
        position: relative;
        display: flex;
        align-items: flex-end;
    }

.safe_ui .top{display: none}


.footer-content {
    align-items: flex-start;
    flex-direction: column;
}



.map{width: 100%; border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.33);}
.map iframe{width: 100%;
}

.main_section{overflow: hidden}

}


@media (max-width: 860px) {

.floation_top{right: 25px; 
width: 60px; height: 60px}


.header .nav{gap:20px}

.inner{padding: 0 25px}

.main_history_slide .slick-list {
        padding: 0 5rem 0 25px;
}

.history_item{min-height: auto}

.main_history_slide .slick-current .history_item .thum {
    max-width: 100%;
}
.history_item .thum {
    aspect-ratio: auto;
    max-width: 100%;
    transition-duration: .5s;
    width: 100%;
    height: 35vh
}



.history_item {
    flex-direction: column-reverse;
    padding: 0 10px
}

.history_item .txt{width: 100%; display: block}

.main_history_slide_ct{display: none}

.main_history_slide .slick-track {
    align-items: flex-start;
    display: flex;
}

.history_item .txt p br{display: none}

    .vehicles_slide .slick-list {
        padding: 0 3rem;
    }

.custom-cursor{display: none !Important}


.btn_ct_flex {
    position: relative;
    display: flex;
    gap: 30px;
    bottom: 0;
    right: 0;
    align-items: center;
    margin-top: 20px;
    justify-content: flex-end;
}

.main_value_slide .slick-list {
        padding: 0 3rem 0 0;
}


.foot_left, .main_ceo .left .bottom, .main_ceo .left .top{padding-left: 25px}

.main_safe_slide .box .txt{padding: 30px 25px}


}


@media (max-width: 600px) {

.floation_top{right: 25px; 
width: 50px; height: 50px}


.site_map{position: fixed; z-index: 9998; background: #000; width: 100%; height: 100%;
        display: flex;
        justify-content: center;
        align-items: center; transition-duration: .8s; right: -100%; top: 0}
.site_map .nav_top{text-align: center}
.site_map .nav_top a{color: #fff; font-size: 18px; word-break: keep-all; display: block; text-align: center; padding: 10px}

.all_menu .site_map{right: 0}


.header .nav{display: none}

.all_btn{width: 30px; height: 16px; position: relative; display: block}
.all_btn span{width: 100%; height: 3px; 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}

.main_visual_are .txt h2{
        font-size: 30px;
}

.main_title h2 {
        font-size: 24px;
}

.main_visual_are .txt{padding:  0 25px}

.main_visual_are .sc_down{bottom: 40px; }
.main_visual_are .sc_down p{font-size: 14px}

.history_item{gap:30px}

.history_item .txt{min-width: 100%; padding-right: 20px}

.history_item .txt h3{font-size: 20px}
.history_item .txt p{font-size: 14px}

.scroll-bar {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0%);
}

.scroll-thumb{
	  left: -15px;
    transform: translateX(0%);
}

.scroll-thumb img{margin: 0; max-width: 30px}

.scroll-box-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    padding-left: 30px;
    align-items: flex-start;
}


.scroll-box {
        margin-bottom: 30px;
        width: 100%;
}
.scroll-box:nth-of-type(2n) {
        top: 0;
    }

    .main_section, .section {
        padding: 60px 0;
    }
    
    
    .marquee-slide {
        width: 100px;
        height: 30px;
    }
    
    
    
.add{gap:0} 
.add ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}  

}





@media (max-width: 360px) {

 
 
 
 
}