@charset "utf-8";
/* 메인 공통 */
.main_page .page_contents section + section:not(.main_visual, .main_about, .middle_add, .main_media){margin-top:200px;}
.main_page .section_title{text-transform: uppercase; font-size: 4.8rem; font-weight: bold; line-height: 1.25; color: #ffffff;}
.main_page .section_desc{margin-top:24px; color: #cccccc;}
.main_page .btn_wrap{margin-top:48px;}
.btn_wrap .w_line_btn{gap:0 8px; padding: 12px 20px; border:1px solid #ffffff; border-radius:10px; font-size: 1.4rem; color: #ffffff;}
.btn_wrap .w_line_btn:hover{background-color: var(--main_color);}


@media(max-width:1440px) {
  .main_page .page_contents section + section:not(.main_visual, .main_about, .middle_add, .main_media) {margin-top: 180px;}
}
@media(max-width:1280px) {
  .main_page .page_contents section + section:not(.main_visual, .main_about, .middle_add, .main_media) {margin-top: 160px;}
  .main_page .section_title{font-size: 4.4rem;}
  .main_page .section_desc{margin-top:16px;}
  .main_page .btn_wrap{margin-top:40px;}
}
@media(max-width:1024px) {
  .main_page .page_contents section + section:not(.main_visual, .main_about, .middle_add, .main_media) {margin-top: 140px;}
  .main_page .section_title{font-size: 4.2rem;}
  .btn_wrap .w_line_btn{gap:0 6px; padding: 10px 12px; }
  .main_page .btn_wrap{margin-top:36px;}
}
@media(max-width:768px) {
  .main_page .page_contents section + section:not(.main_visual, .main_about, .middle_add, .main_media) {margin-top: 120px;}
  .main_page .section_title{font-size: 4rem;}
  .main_page .section_desc{margin-top:12px;}
}
@media(max-width:540px) {
  .main_page .section_title{font-size: 3.2rem;}
  .main_page .section_desc{margin-top:8px;}
}


/* visual */
.main_visual {position: relative; overflow: hidden; margin:0 auto; height: var(--vh_100); background-image: url("/assets/images/main/main_visual_bg.jpg"); background-position: center; background-size: cover;  background-repeat: no-repeat; background-attachment: fixed;}
.main_visual::before{content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: block; width: 320px; height: 320px; border-radius: 50%; background-color: var(--main_color); filter: blur(200px); animation: visual_dot 3s linear infinite;}
@keyframes visual_dot{ 
	0%{background-color: var(--main_color);}
	50%{background-color: var(--sub_color);}
  100%{background-color: var(--main_color);}
}
.main_visual .main_visual_wrap{--header_h:88px; margin-top:var(--header_h); height:calc(var(--vh_100) - var(--header_h));}
.main_visual .visaul_text{position: absolute; top: 50%; left:200px; transform: translateY(-50%); z-index:2; color: #ffffff;}
.main_visual .visaul_text .slide_title{position: relative; font-size: 8rem; line-height: 1; color: #ffffff;}
.main_visual .visaul_text .slide_title::before{content: ""; position: absolute; top:4px; left:0; transform: translate(-30%, 0) skew(35deg); z-index:-1; display: block; width:64px; height: 72px; background-color: var(--main_color);}
.main_visual .visaul_text .slide_sub_contents{margin-top:56px; max-width:460px;}
.main_visual .visaul_text .slide_sub_contents .slide_sub_title{display: block; font-size: 2.8rem; font-weight: bold;}
.main_visual .visaul_text .slide_sub_contents .slide_sub_desc{margin-top:12px; font-weight:200;}
.main_visual .visaul_text .btn_wrap{margin-top:36px;}
.main_visual .visual_slider{height: 100%;}
.main_visual .slider_item .slider_item_inner{padding:0 200px; height: 100%;}
.main_visual .slider_item .slider_item_inner .img_wrap{display: flex; justify-content: flex-end; align-items: center;  height: 100%; }
.main_visual .slider_item .slider_item_inner .img_wrap figure{margin-top:20px; opacity:0; visibility: hidden; }
.slider_btn_wrap{position: absolute; top:50%; z-index:5; flex-shrink: 0; display: flex; align-items: center; gap: 20px;}
.slider_btn_wrap .btn_wrap{margin-top:0;}
.slider_btn_wrap button{position: relative; width:64px; height: 64px; border:1px solid #ffffff; border-radius: 50%;}
.slider_btn_wrap button::before{content: ""; position: absolute; top:50%; left:50%; width:20%; height: 20%; border-top:2px solid #ffffff;}
.slider_btn_wrap.slider_btn_prev{left:40px;}
.slider_btn_wrap.slider_btn_next{right:40px;}
.slider_btn_wrap.slider_btn_prev button::before{border-left: 2px solid #ffffff; transform: translate(-25%, -50%) rotate(-45deg);}
.slider_btn_wrap.slider_btn_next button::before{border-right: 2px solid #ffffff; transform: translate(-75%, -50%) rotate(45deg);}
@media(max-width:1800px) {
  .main_visual .visaul_text {left: 160px;}
  .main_visual .visaul_text .slide_title {font-size: 7.2rem;}
  .main_visual .slider_item .slider_item_inner {padding: 0px 120px;}
  .main_visual .slider_item .slider_item_inner .img_wrap figure {width:680px;}
}
@media(max-width:1440px) {
  .main_visual .visaul_text .slide_title {font-size: 6.4rem;}
  .main_visual .visaul_text .slide_title::before {top:2px;  width: 56px; height: 0.95em;}
  .main_visual .visaul_text .slide_sub_contents {margin-top: 48px;}
  /* .main_visual .visaul_text .slide_sub_contents .slide_sub_title {font-size: 2.8rem;} */
  .main_visual .visaul_text .btn_wrap{margin-top:32px;}
  .main_visual .slider_item .slider_item_inner {padding: 0px 100px;}
  .main_visual .slider_item .slider_item_inner .img_wrap figure {width:620px;}
  .slider_btn_wrap button {width: 60px; height: 60px;}
  .slider_btn_wrap.slider_btn_prev{left:20px;}
  .slider_btn_wrap.slider_btn_next{right:20px;} 
}
@media(max-width:1280px) {
  .main_visual .visaul_text {left: 5%;}
  .main_visual .visaul_text .slide_title {font-size: 5.6rem;}
  .main_visual .visaul_text .slide_sub_contents {margin-top: 40px;}
  .main_visual .visaul_text .slide_sub_contents .slide_sub_title {font-size: 2.4rem;}
  .main_visual .slider_item .slider_item_inner {padding: 0px 5%;}
  .main_visual .slider_item .slider_item_inner .img_wrap figure {width:520px;}
  .slider_btn_wrap {top: inherit; bottom: 40px; }
  .slider_btn_wrap.slider_btn_prev {left: inherit; right: 84px;}
  .slider_btn_wrap button {width:56px; height: 56px;}
  .slider_btn_wrap.slider_btn_prev {right: calc(5% + (56px + 8px));}
  .slider_btn_wrap.slider_btn_next {right: 5%;}
}
@media(max-width:1024px) {
  .main_visual{padding:160px 0; height: auto;}
  .main_visual .main_visual_wrap{margin-top:0; display: flex; flex-direction: column; gap: 48px; height: auto;}
  .main_visual .visaul_text {order: 1; position: relative; top: inherit; left: inherit; transform: translateY(0); padding:0 5%;}
  .main_visual .visaul_text .slide_title {font-size: 5.2rem;}
  .main_visual .visaul_text .slide_sub_contents {margin-top: 32px;}
  .main_visual .visaul_text .slide_sub_contents .slide_sub_title {font-size: 2rem;}
  .main_visual .visaul_text .slide_sub_contents .slide_sub_desc {margin-top: 8px;}
  .main_visual .slider_item .slider_item_inner .img_wrap {justify-content: center;}
  .main_visual .slider_item .slider_item_inner .img_wrap figure { margin-top: 0; width:480px;}
  .slider_btn_wrap {bottom: 160px}
  .slider_btn_wrap button {width: 52px; height: 52px;}
  .slider_btn_wrap.slider_btn_prev {right: calc(5% + (52px + 4px));}
}
@media(max-width:768px) {
  .main_visual{padding:120px 0 160px;}
  .main_visual .visaul_text .slide_title {font-size: 4.8rem;}
  .main_visual .slider_item .slider_item_inner .img_wrap figure {width: 440px;}
  .slider_btn_wrap {bottom: 72px}
  .main_visual .visaul_text .slide_title::before{top:0; transform: translate(-28%, 0) skew(24deg); width: 40px;}
}
@media(max-width:540px) {
  .main_visual {padding: 80px 0 100px;}
  .main_visual .main_visual_wrap{gap: 24px;}
  .main_visual .visaul_text .slide_sub_contents {max-width: 100%;}
  .main_visual .visaul_text .slide_title {font-size: 4.4rem;}
  .main_visual .visaul_text .slide_title::before {width: 40px;}
  .main_visual .visaul_text .slide_sub_contents {margin-top: 24px;}
  .main_visual .visaul_text .slide_sub_contents .slide_sub_title {font-size: 1.8rem;}
  .main_visual .visaul_text .slide_sub_contents .slide_sub_desc {margin-top: 4px;}
  .main_visual .visaul_text .btn_wrap {margin-top: 24px;}
  .main_visual .slider_item .slider_item_inner .img_wrap figure {width: 100%;}
  .slider_btn_wrap {bottom: 40px}
  .slider_btn_wrap button {width: 48px; height: 48px;}
  .slider_btn_wrap.slider_btn_prev {right: calc(5% + (48px + 4px));}
  
}
@media(max-width:480px) {
  .main_visual .visaul_text .slide_title {font-size: 3.6rem;}
  .main_visual .visaul_text .btn_wrap {margin-top: 20px;}
  .main_visual .slider_item .slider_item_inner .img_wrap figure {width: 100%;}
  .slider_btn_wrap.slider_btn_prev {right: calc(5% + (48px + 4px));}
  .slider_btn_wrap button {width: 48px; height: 48px;}
}


/* about */
.main_about{padding:200px 0; background-color: var(--daon_black); background-image: url("/assets/images/main/main_about_bg.png"); background-position: center; background-size: cover;  background-repeat: no-repeat; background-attachment: fixed; overflow: hidden;}
.main_about .flex_wrap{justify-content: center; align-items: center; gap:0 80px;}
.main_about .img_wrap{ position: relative; z-index:1;}
.main_about .img_wrap .about_circle{position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); z-index:-1; display: block; width:60%; aspect-ratio: 1/1; border-radius: 50%; border: 1px solid var(--main_color); }
.main_about .img_wrap .dron_prop{position: absolute; animation: obj_rotate 3s linear infinite;}
.main_about .img_wrap .prop_01{top:0; left:0; width:42%; animation-direction: reverse;}
.main_about .img_wrap .prop_02{top:0; right:0;  width:42%;}
.main_about .img_wrap .prop_03{bottom:0; left:0; width:42%;}
.main_about .img_wrap .prop_04{bottom:0; right:0;  width:42%; animation-direction: reverse;}
.main_about .text_wrap{max-width: 460px;}
@keyframes obj_rotate{ 
	0%{rotate:0;}
  100%{rotate:360deg;}
}
@media(max-width:1440px) {
  .main_about .text_wrap{max-width: 420px;}
}
@media(max-width:1280px) {
  .main_about{padding:160px 0;}
  .main_about .text_wrap{max-width: 400px;}
}
@media(max-width:1024px) {
  .main_about{padding:140px 0;}
  .main_about .flex_wrap{flex-direction: column; justify-content: center; align-items: center; gap:80px;}
  .main_about .text_wrap {order: 0;  max-width: 100%;}
  .main_about .img_wrap{order: 1; flex-shrink: 1; margin:0 auto; max-width:90%; }
}
@media(max-width:768px) {
  .main_about{padding:120px 0;}
}

/* products */
.main_products{margin:0 auto; max-width: 1920px; overflow-x: hidden;}
.main_products_list{margin-top:56px; padding:0 148px;}
.main_products_list .product_item{position: relative; margin-right: 40px;  width:391px; }
.main_products_list .product_item a{padding:32px 24px 40px; display: block; width:100%; height: 100%; background-color: #212027; box-shadow: 0 0 20px rgba(0,0,0, .2); border: 1px solid transparent; box-sizing: border-box; border-radius: 8px; transition: border-color .5s, box-shadow .5s; }
.main_products_list .product_item .text_wrap h4{font-size: 2.8rem; line-height: 1; color: #ffffff;}
.main_products_list .product_item .text_wrap span{margin-top:8px; display: block; color: var(--white_d);}
.main_products_list .product_item .img_wrap{margin-top:96px;}
.main_products_list .product_item:hover{box-shadow: 0 0 20px rgba(0,0,0, .6); }
.main_products_list .product_item:hover a{border-color:var(--white_d) ;}
.main_products_list .product_item:hover .text_wrap h4{color: var(--sub_color); }
.progress_wrap{margin-top:40px; padding:0 148px; display: flex; justify-content: center; }
.progress_wrap .progress_bar {position: relative; width: 400px; height: 4px; border-radius: 2px; background: var(--black_3); overflow: hidden; }
.progress_wrap .progress_bar .swiper-pagination-progressbar-fill {background: var(--sub_color); height:4px;}
@media(max-width:1440px) {
  .main_products_list .product_item {margin-right: 20px; width: 360px;}
}
@media(max-width:1280px) {
  .main_products_list {margin-top: 48px; padding: 0 5%;}
  .main_products_list .product_item {margin-right: 16px; width: 320px;}
  .main_products_list .product_item .text_wrap h4 {font-size: 2.4rem;}
  .main_products_list .product_item .img_wrap {margin-top: 88px;}
  .progress_wrap {margin-top: 32px; padding: 0;}
}
@media(max-width:1024px) {
  .main_products_list {margin-top: 40px;}
  .main_products_list .product_item {margin-right: 12px; width: 280px;}
  .main_products_list .product_item .text_wrap h4 {font-size: 2rem;}
  .main_products_list .product_item .text_wrap span { margin-top: 4px; font-size: .9em;}
  .main_products_list .product_item .img_wrap {margin-top: 80px;}
  .progress_wrap {margin-top: 28px; padding:0 5%}
}
@media(max-width:768px) {
  .main_products_list {margin-top: 36px;}  
  .main_products_list .product_item {margin-right: 8px; width: 240px;}
  .main_products_list .product_item .img_wrap {margin-top: 72px;}
  .progress_wrap {margin-top: 24px;}
}
@media(max-width:540px) {
  .main_products_list .product_item .img_wrap {margin-top: 64px;}
  .progress_wrap .progress_bar {width: 100%; }
  
}

.middle_add{padding: 220px 0; /*background-image: url("/assets/images/common/line_drone.svg"); background-repeat: no-repeat; background-position: bottom right -20%;*/ }
.middle_add .flex_wrap{justify-content: center; align-items: center; gap: 80px;}
.middle_add .flex_wrap .img_wrap figure{position: relative;}
.middle_add .flex_wrap .img_wrap figure::before{content: ""; position: absolute; top: 20%; left: 36%; z-index:-1; display: block; width:45.8015%; aspect-ratio: 1/1; border:1px solid var(--main_color); /*animation: obj_rotate 5s steps(20, start) infinite;*/  animation: obj_rotate 5s linear infinite; }
.middle_add .flex_wrap .text_wrap{width:480px;}
.middle_add .flex_wrap .text_wrap p{font-size: 3.6rem; color:var(--white_a); font-weight: 200;}
.middle_add .flex_wrap .text_wrap p strong{color:var(--white_f);}


@media(max-width:1280px) {
  .middle_add{padding: 200px 0;}
  .middle_add .flex_wrap {gap: 72px;}
  .middle_add .flex_wrap .text_wrap p {font-size: 3.2rem;}
}
@media(max-width:1024px) {
  .middle_add{padding: 160px 0;}
  .middle_add .flex_wrap {flex-direction: column; gap: 64px;}
  .middle_add .flex_wrap .img_wrap {order: 1; padding:0 5%;}
  .middle_add .flex_wrap .text_wrap {width: 80%; text-align: center;}
}
@media(max-width:768px) {
  .middle_add{padding: 140px 0;}
  .middle_add .flex_wrap .text_wrap p {font-size: 3.2rem;}
}
@media(max-width:540px) {
  .middle_add .flex_wrap .text_wrap p {font-size: 2.8rem;}
}
@media(max-width:540px) {
  .middle_add .flex_wrap .text_wrap p {font-size: 2.4rem;}
}

.main_media{margin-top:120px;  }
.main_media .main_media_list{margin-top:56px; overflow-x: hidden; box-sizing: border-box;} 
.main_media .media_item{margin-right:24px; width:464px;  background-color: var(--daon_black); }
.main_media .media_item a{border-radius: 20px; width:100%; aspect-ratio: 16/9; overflow: hidden; opacity:0.3; transition: opacity .5s;}
.main_media .media_item.swiper-slide-active a{opacity:1;}
.media_progress_wrap{position: relative;}
.media_progress_wrap{margin-top:40px; padding:0 148px; display: flex; justify-content: center; }
.media_progress_wrap .media_progress_bar {position: relative; width: 400px; height: 4px; border-radius: 2px; background: var(--black_3); overflow: hidden; }
.media_progress_wrap .media_progress_bar .swiper-pagination-progressbar-fill {background: var(--sub_color); height:4px;}
.main_media .btn_wrap{justify-content: center;}

@media(max-width:1440px) {
  .main_media .media_item{margin-right: 20px; width: 420px;}
}
@media(max-width:1280px) {
  .main_media{margin-top:100px;}
  .main_media .main_media_list{margin-top: 48px; padding: 0 5%;}
  .main_media .media_item{margin-right: 16px; width: 400px;}
  .media_progress_wrap {margin-top: 32px; padding: 0;}
}
@media(max-width:1024px) {
  .main_media{margin-top:80px;}
  .main_media .main_media_list {margin-top: 40px;}
  .main_media .media_item{margin-right: 12px; width: 360px;}  
  .media_progress_wrap {margin-top: 28px; padding:0 5%}
}
@media(max-width:768px) {
  .main_media{margin-top:72px;}
  .main_media .main_media_list{margin-top: 36px;}  
  .main_media .media_item {margin-right: 8px; width: 320px;}
  .media_progress_wrap {margin-top: 24px;}
}
@media(max-width:540px) {
  .main_media{margin-top:64px;}
  .main_media .media_item {margin-right: 8px; width: 280px;}
  .media_progress_wrap .media_progress_bar {width: 100%; }
}

/* media modal */
.media_modal{top:0; left:0; z-index:9999; margin:0; padding:0; width:100%; height: 100%; max-width: 100%; max-height: 100%; background-color: rgba(0,0,0,0.8); box-sizing: border-box;}
.media_modal .mobal_inner{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:50%;}
.media_modal .mobal_inner .media_frame{width:100%; aspect-ratio: 16/9; font-size: 0; line-height: 1;}
.media_modal .mobal_inner .modal_close{position: absolute; top:0; right:0; transform: translateY(calc(-1*(100% + 12px))); text-transform: uppercase; font-size: 1.2em; color: #ffffff;}
.media_modal iframe{display: none;}
.media_modal iframe.active{display: block;}
.media_modal .loading{padding:40px 0; display: flex; justify-content: center; align-items: center;  font-size: 1.6rem; color: #ffffff; }
.media_modal .loading i{animation: obj_rotate 3s linear infinite;}


@media(max-width:1600px) {
  .media_modal .mobal_inner{width:70%;}
}
@media(max-width:1280px) {
  .media_modal .mobal_inner{width:80%;}
}
@media(max-width:1024px) {
  .media_modal .mobal_inner{width:90%;}
  .media_modal .mobal_inner .modal_close{transform: translateY(calc(-1*(100% + 20px))); font-size: 1.1em;}
}

@media(max-width:1024px) and (orientation: landscape) {
  .mobile .media_modal .mobal_inner,
  .tablet .media_modal .mobal_inner{width:50%;}
}
@media(max-width:768px) and (orientation: landscape) {
  .media_modal .mobal_inner{width:50%;}  
}



.conatiner{position:relative;}
.main_page .obj_img{position: fixed; bottom:-5%; right:-10%; z-index:-1; display: flex;}
@media(max-width:1600px) {
  .main_page .obj_img .img_wrap figure{width:880px;}
}
@media(max-width:1440px) {
  .main_page .obj_img .img_wrap figure{width:840px;}
}
@media(max-width:1280px) {
  .main_page .obj_img{transform: rotate(0);}
  .main_page .obj_img .img_wrap figure{transform: translateX(100%); width:720px;}
}
@media(max-width:1024px) {
  .main_page .obj_img .img_wrap figure{transform: translateX(70%); width:80%;}
}
@media(max-width:768px) {
  .main_page .obj_img .img_wrap figure{transform: translateX(40%); width:100%;}
}
@media(max-width:540px) {
  .main_page .obj_img .img_wrap figure{transform: translateX(20%); width:120%;}
}


/* eng */
.eng .main_about .text_wrap {max-width: 470px;}