/*서브 비주얼*/




.sub_visual{position: relative; height: 100vh;  display: flex; 
justify-content: center;
    align-items: center;}

.sub_visual .sub_visual_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;overflow: hidden }
.sub_visual .sub_visual_bg img{width: 100%; height: 100%; object-fit: cover; transition-duration: 3s; 
transform: scale(1.1)}

.sub_visual.show .sub_visual_bg img{transform: scale(1.0)}


.sub_visual .txt{position: relative; z-index: 2; text-align: center}
.sub_visual .txt p{font-size: 18px; color: #fff; word-break: keep-all; margin-bottom: 12px}
.sub_visual .txt h3{color: #fff; font-size: 48px; font-weight: 700; line-height: 140%; word-break: keep-all;}


.sub_visual .sub_nav_are{position: absolute; left: 6rem; bottom: 0; z-index: 2; display: flex;
background: rgba(0, 0, 0, 0.20);
backdrop-filter: blur(12.5px);}
.sub_visual .sub_nav_are .home{display: flex; width: 70px; height: 70px;  justify-content: center;
    align-items: center;}


.sub_visual .sub_nav_are .sub_drop_nav{border-left:1px solid rgba(255, 255, 255, 0.15); }


.sub_drop_nav{ width: 300px;  position: relative; }
.sub_drop_nav p{ padding:0 40px 0 30px;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; color: #fff; font-size: 16px; font-weight: 700; line-height: 140%; word-break: keep-all; position: relative;
  display: flex; align-items: center; height: 70px;
  width: 100%; cursor: pointer}

.sub_drop_nav p span{
	display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}  
  
.sub_drop_nav p i{position: absolute; right: 30px; top: 30px;}
.sub_drop_nav p i img{display: block; transition-duration: .8s}



.sub_drop_nav.on_drop p i img{transform: rotate(180deg);}

.sub_visual .sub_nav_are .sub_drop_nav .sub_drop_nav_list{position: absolute; top: 100%; padding:0 30px; border: 1px solid #ddd;
width: 100%; max-height: 0; height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition-duration: 1s}
.sub_visual .sub_nav_are .sub_drop_nav .sub_drop_nav_list a{display: block; font-size: 16px; word-break: keep-all;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

.sub_visual .sub_nav_are .sub_drop_nav .sub_drop_nav_list a + a{margin-top: 10px}



.sub_visual .sub_nav_are .sub_drop_nav.on_drop .sub_drop_nav_list{visibility: visible; opacity: 1; max-height: 30vh; overflow-y: auto; opacity: 1; height: auto; padding: 30px}






.scroll_sub{position: absolute; z-index: 2; left: 6rem; bottom: 90px}
.scroll_sub img{display: block; margin-bottom: 8px}
.scroll_sub span{
	display: block; margin: 0 auto; 
	width: 4px; height: 16px;
	position: relative;
	height: 50px; overflow: hidden
}

.scroll_sub span:after{
	content: '';
	width: 2px; left: 1px; 
	height: 100%; background: rgba(255,255,255,0.4);
	position: absolute; top: 0
}

.scroll_sub span i{position: absolute; left: 0; top: 0; background: #fff; width: 4px; height: 16px; border-radius: 2px;
animation: floatY 1.8s ease-in-out infinite;
}


 
 
@keyframes floatY {
  0%   { top: 0% }
  50%  { top: calc(100% - 16px) }
  100% { top: 0% }
} 


.sub_section{padding: 160px 0}
.sub_section.gray{background: #FAFAFA;}

.sub_title{margin-bottom: 50px;}
.sub_title.center{text-align: center}
.sub_title h4{margin-bottom: 12px; font-size: 18px; word-break: keep-all; line-height: 140%; color: #07A0F4}
.sub_title h2{font-size: 40px; line-height: 140%; font-weight: 700; word-break: keep-all}
.sub_title h2 b{color: #07A0F4}
.sub_title p{margin-top: 20px; word-break: keep-all; line-height: 150%; font-size: 20px; color: #111}

.img_ain{border-radius: 20px; overflow: hidden; width: 20%; transition-duration: 2s}
.img_ain img{height: 100%; object-fit: cover; display: block; }

.img_ain.show{width: 100%}

.tlb{}
.tlb table{width: 100%; border-spacing: 0; border-top: 1px solid #07A0F4}
.tlb table th{padding: 23px 30px; text-align: left; background: #FAFAFA; border-bottom: 1px solid #ddd}
.tlb table td{padding: 23px 30px; text-align: left; background: #fff; border-bottom: 1px solid #ddd}

.tlb p{font-size: 18px; color: #111; word-break: keep-all; font-weight: 400}
.tlb p b{font-weight: bold; }

.tlb td p{opacity: .7}

.tlb p.flex{display: flex; gap:10px}
.tlb p.flex b{color: #07A0F4}

.img_ain + .tlb{margin-top: 34px}


.ceo_ms{background: #FAFAFA}
.ceo_ms .inner{display: flex;}
.ceo_ms .inner > div{width: 50%}

.ceo_ms .txt{}
.ceo_ms .txt p{font-size: 18px; word-break: keep-all; line-height: 150%; color: #333}
.ceo_ms .txt p + p{margin-top: 18px}
.ceo_ms .txt h4{margin-top: 40px; font-size: 20px; color: #231815; font-weight: 700; word-break: keep-all}

.ceo_ms .ceo_img{overflow: hidden; border-radius: 20px; margin-top: 30px; border: 1px solid #ddd; display: inline-block}
.ceo_ms .ceo_img img{display: block; max-width: 100%}

.history_flex{}
.history_flex .inner{display: flex;
align-items: flex-start;
    justify-content: flex-start;}
.history_flex .inner .sub_title{width: 30%;
position: sticky;
    top: 100px;
    left: 0;}


.flex_sub_info{flex:1}

.hisotry{position: relative; display: flex; gap:100px;
justify-content: flex-start;
    align-items: flex-start;} 

.hisotry .stk_thum{width: 450px; border-radius: 20px; border: 1px solid #ddd; overflow: hidden;
position: sticky;
    top: 100px;
    left: 0;}
.hisotry .stk_thum img{display: block; max-width: 100%}


.line-guide .progress:after{content: ''; position: absolute; left:50%;
  transform:translateX(-50%); bottom: 0; width: 3px; height: 34px; background: #07A0F4 ;
   z-index: 3 }
   
   
.line-guide{
  position:absolute;
  width:3px;
  height:100%;
  top:0;
  left:500px;
  background:#ddd;
}
.line-guide .progressbar{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0px;
  background:#07A0F4;
}

.history_are{flex:1}


.history_are .box .txt{display: flex; gap:50px;}
.history_are .box .txt h2{width: 90px; color: #111; font-size: 30px; transition-duration: .5s}
.history_are .box .txt ul{flex:1}
.history_are .box .txt li{color: #333; font-size: 18px; word-break: keep-all; line-height: 150%; opacity: .6; transition-duration: .5s; position: relative; padding-left: 30px}
.history_are .box .txt li b{position: absolute; left: 0; top: 0; color: #07A0F4}
.history_are .box .txt li span{display: block}
.history_are .box .txt li + li{margin-top: 5px;}

.history_are .box.show h2{color: #07A0F4}
.history_are .box.show li{opacity: 1}
.history_are .box + .box{margin-top: 60px}



.business_list{}
.business_list .box{display: flex; border-radius: 20px; overflow: hidden; background: #FAFAFA;
    justify-content: flex-start;
    align-items: center;}
.business_list .box .thum{width: 50%}
.business_list .box .thum img{display: block; max-width: 100%}

.business_list .box .txt{padding: 0 80px;}
.business_list .box .txt h3{font-size: 40px; font-weight: 700; line-height: 140%; word-break: keep-all}
.business_list .box .txt ul.dot{margin-top: 20px;}
.business_list .box .txt ul.dot li{color: #111; opacity: 1}

.business_list .box + .box{margin-top: 30px;}


.location_list{border-top: 1px solid #ddd}
.location_list li {padding: 40px; border-bottom: 1px solid #DDD;}

.location_list li .title_txt{display: flex; cursor: pointer; position: relative; gap:22px}
.location_list li .title_txt:after{
	content: '';
	position: absolute; right: 0;
	top: 30px;
	width: 30px; height: 30px;
	background: url(../img/sub/drop_location.png);
	background-position: center; background-repeat: no-repeat;
	background-size: 100%; auto;
	transition-duration: .8s;
	transform: rotate(180deg);
}

.location_list li .title_txt h4{color: #07A0F4; font-size: 18px; font-weight: bold; word-break: keep-all; width: 100px; line-height: 140%;
margin-top: 5px}
.location_list li .title_txt .txt{flex:1; }
.location_list li .title_txt .txt h3{font-size: 30px; color: #111; word-break: keep-all; line-height: 130%; font-weight: 600; }
.location_list li .title_txt .txt p{margin-top: 20px; display: flex; gap:15px; font-size: 20px; line-height: 150%; word-break: keep-all; color: #111;
    align-items: center;}
.location_list li .title_txt .txt p i{width: 1px; height: 12px; background: #DBDBDB}
.location_list li .map{overflow: hidden; border-radius: 20px; margin-top: 0px; overflow: hidden; transition-duration: 1s; height: 0}
.location_list li .map iframe{width: 100%; display: block}

.location_list li.on_location .map{height: 450px; margin-top: 40px; }

.location_list li.on_location .title_txt:after{
	transform: rotate(0deg);
}




/*product*/

.product_filter{padding: 30px 34px; background: #fafafa; border-radius: 20px }

.product_filter li{display: flex; gap:20px;}
.product_filter li p{width: 100px; font-size: 16px; color: #111; font-weight: 700; word-break: keep-all; height: 44px; 
display: inline-flex;  align-items: center; }
.filter_are{flex:1; display: flex; gap:10px;}
.filter_are input{display: none; }
.filter_are input + label{height: 44px; display: inline-flex; 
border-radius: 5px;
border: 1px solid #DDD;
background: #FFF; font-size: 16px; text-align: center; color: #8A949E; 
justify-content: center;
    align-items: center; padding: 0 20px; cursor: pointer; flex:1}


.filter_are input:checked + label{background: #07A0F4; color: #fff; border-color: #07A0F4}

.product_filter li + li{margin-top: 14px; padding-top: 14px; border-top: 1px solid #ddd}

.filter_are.warp{flex-wrap: wrap;}
.filter_are.warp input + label{flex:none}


.filter_btn{margin-top: 30px; display: flex; gap:10px;justify-content: center;
    align-items: center;}

.filter_btn button{border-radius: 5px; border: 1px solid #CDD1D0; height: 50px; justify-content: center;
    align-items: center; display: inline-flex; color: #111; font-size: 18px; word-break: keep-all; text-align: center;
    background: #fff; min-width: 110px; padding: 0 25px} 

.filter_btn button.search{
background: linear-gradient(90deg, #20C557 0%, #07A0F4 100%);
color: #fff; border-color: #07A0F4
}


.product_list{display: flex; gap:30px 20px; flex-wrap: wrap; margin-top: 80px}
.product_list li{width: calc(25% - 15px); overflow: hidden; border-radius: 20px; border: 1px solid #ddd}

.product_list li .thum{position: relative; overflow: hidden; }
.product_list li .thum img{width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: 16 / 10;}
    
    
.product_list li .thum .thum_txt{text-align: center; position: absolute; left: 0; top: 50%; width: 100%;
transform: translateY(-50%);}
    
.product_list li .thum .thum_txt h3{font-size: 30px; color: #fff; font-weight: 700; word-break: keep-all; text-shadow: 1px 1px 1px rgba(0,0,0,0.6)}
.product_list li .thum .thum_txt p{font-size: 16px; color: #fff; font-weight: 500; word-break: keep-all; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); line-height: 140%; margin-top: 10px;}

.product_list li .txt{padding: 24px; position: relative; background: #fff; transition-duration: .8s}
.product_list li .txt .filter_tag{display: flex; flex-wrap: wrap; gap:7px; margin-bottom: 15px}
.product_list li .txt .filter_tag span{word-break: keep-all; padding: 4px 12px; border: 1px solid #ddd; border-radius: 3px;
font-size: 13px; color: #111; }  

.product_list li .txt .cate_name{font-size: 14px; color: #07A0F4; font-weight: 500}
.product_list li .txt h3{font-size: 20px; line-height: 130%; word-break: keep-all; font-weight: 600; margin: 5px 0;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;}
.product_list li .txt .p_list_info{font-size: 16px; color: #111; opacity: 07; word-break: keep-all; line-height: 140%;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;}


.product_list li .txt i{
	border-radius: 40px;
background: linear-gradient(90deg, #20C557 0%, #07A0F4 100%);
width: 40px; height: 40px;
justify-content: center;
    align-items: center;
    display: flex;
    position: absolute; bottom: 24px; right: 24px;
    opacity: 0; transition-duration: .8s
}
  
.filter_down_btn{margin-top: 60px; text-align: center} 
 
.product_list li a:hover .txt{background: rgba(7, 160, 244, 0.10);}   
.product_list li a:hover .txt i{opacity: 1}
    

.product_detail_visual{display: flex;
    height: 75vh;
    position: relative;
    overflow: hidden;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 90px 0}
.product_detail_visual .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden}
.product_detail_visual .bg img{width: 100%; height: 100%; object-fit: cover; transition-duration: 3s; 
transform: scale(1.1)}

.product_detail_visual.show .bg img{transform: scale(1.0)}

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

.product_detail_visual .txt .pd_btn{display: flex; gap:10px}

.product_detail_visual .txt .subject_are{}
.product_detail_visual .txt .subject_are .small_flex{display: flex; gap:10px;  align-items: center; margin-bottom: 12px}
.product_detail_visual .txt .subject_are .small_flex p{font-size: 18px; word-break: keep-all; color: #fff; line-height: 130%}
.product_detail_visual .txt .subject_are .small_flex i{width: 1px;
height: 9px;background: #FFF;}
.product_detail_visual .txt .subject_are .small_flex .tag{display: flex; flex-wrap: wrap; gap:7px;}
.product_detail_visual .txt .subject_are .small_flex .tag span{word-break: keep-all; padding: 4px 12px; border: 1px solid #fff; border-radius: 3px;
font-size: 14px; color: #fff; }  

.product_detail_visual .txt .subject_are h2{font-size: 40px; line-height: 140%; word-break: keep-all; color: #fff; font-weight: 700}

.product_detail .tlb th{text-align: center}

.product_detail .tlb ul.product_point{}
.product_detail .tlb ul.product_point li{position: relative; font-size: 18px; color: #111; font-weight: 400; line-height: 130%; word-break: keep-all;
padding-left: 25px}   
.product_detail .tlb ul.product_point li + li{margin-top: 8px}
.product_detail .tlb ul.product_point li:after{background: url(../img/sub/product_point.png); width: 18px; height: 18px; background-position: center;
background-repeat: no-repeat; background-size: 100%; auto;
position: absolute; left: 0; top: 2px; content: ''; }

.product_detail .tlb ul.product_point li span{display: block; color: #999; font-size: 16px;}

.product_detail .tlb + .sub_title{margin-top: 120px;}

.product_ink_list{display: flex;gap:30px 20px; flex-wrap: wrap;}
.product_ink_list li{width: calc(25% - 15px); text-align: center}
.product_ink_list li .thum{padding: 22px; border-radius: 20px; border: 1px solid #ddd; background: #fff}
.product_ink_list li .thum img{width: 100%; height: 100%; max-width: 320px; 
aspect-ratio:320 / 447; object-fit: contain;}
.product_ink_list li p{color: #111; font-size: 20px; line-height: 140%; word-break: keep-all; font-weight: 500; margin-top: 15px}


.oem_tab{display: flex;  gap:10px; flex-wrap: wrap; justify-content: center;}

.oem_tab a{height: 44px; display: inline-flex; 
border-radius: 5px;
border: 1px solid #DDD;
background: #FFF; font-size: 16px; text-align: center; color: #8A949E; 
justify-content: center;
    align-items: center; padding: 0 20px; cursor: pointer; transition-duration: .8s}

.oem_tab a:hover,
.oem_tab a.on{background: #07A0F4; color: #fff; border-color: #07A0F4}



.oem_list{display: flex; gap:30px 20px; flex-wrap: wrap; margin-top: 80px}
.oem_list li{width: calc(25% - 15px); overflow: hidden; border-radius: 20px; border: 1px solid #ddd}

.oem_list li .thum{position: relative; overflow: hidden; }
.oem_list li .thum img{width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: 16 / 12;}
    
    
.oem_list li .thum .thum_txt{text-align: center; position: absolute; left: 0; top: 50%; width: 100%;
transform: translateY(-50%);}
    

.oem_list li .txt{padding: 24px; position: relative; background: #fff; transition-duration: .8s}


.oem_list li .txt h3{font-size: 20px; line-height: 130%; word-break: keep-all; font-weight: 600; margin: 5px 0;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;}


.oem_list li .txt i{
	border-radius: 40px;
background: linear-gradient(90deg, #20C557 0%, #07A0F4 100%);
width: 40px; height: 40px;
justify-content: center;
    align-items: center;
    display: flex;
    position: absolute; bottom: 24px; right: 24px;
    opacity: 0; transition-duration: .8s
}

.oem_list li a:hover .txt{background: rgba(7, 160, 244, 0.10);}   
.oem_list li a:hover .txt i{opacity: 1}




.oem_pop{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 9999}
.oem_pop.on_pop{display: block}
.oem_pop .oem_pop_content{position: absolute; left: 50%; top: 50%; max-width: 1200px; width: 100%; padding: 40px; background: #fff; border-radius: 20px;
transform: translate(-50%, -50%);}
.oem_pop .oem_pop_content button.close_oem{position: absolute; right: 20px; top: 20px; border: 0; background: #fff}
.oem_pop .oem_pop_content .flex_oem{display: flex; gap:40px; align-items: center;}
.oem_pop .oem_pop_content .flex_oem .thum{width: 560px; overflow: hidden; border-radius: 20px}
.oem_pop .oem_pop_content .flex_oem .thum img{display: block; width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: 1;}
.oem_pop .oem_pop_content .flex_oem .txt{flex:1}
.oem_pop .oem_pop_content .flex_oem .txt h3{font-size: 24px; color: #111; word-break: keep-all; line-height: 130%; }
.oem_pop .oem_pop_content .flex_oem .txt p{margin-top: 24px; font-size: 20px; color: #111; word-break: keep-all; line-height: 130%; font-weight: 600}
.oem_pop .oem_pop_content .flex_oem .txt ul.dot{margin-top: 12px;}
.oem_pop .oem_pop_content .flex_oem .txt ul.dot li{opacity: 1}









.power-section {
  position: relative;
  height: 100vh;
  background-color: #fff;
  overflow: hidden;
}

.power-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 300px;
  color: #ddd;
  z-index: 2;
  text-align: center;
  width: 100%; font-weight: 900
}

.power-image-wrap {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 1;
}

.power-image {
  width: 800px;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.next-section {
  position: absolute; /* relative가 아닌 absolute로 위치 고정 */
  bottom: -100vh;      /* 뷰포트 아래로 완전히 숨김 */
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(0); /* 초기엔 그대로 아래 위치 */
  z-index: 3;
  transition: none; /* JS로 제어하므로 CSS transition 제거 */
 text-align: center; 
 color: #fff;
 height: 100vh;
 padding: 150px 0;
 display: flex;
 justify-content: center;
    align-items: center;
}

.next-section .sub_title{margin: 0}
.next-section .sub_title h2,
.next-section .sub_title p{color: #fff}


.fdnc_flex{display: flex; gap:20px}
.fdnc_flex .box{flex:1;
border-radius: 20px;
border: 1px solid #DDD;
background: #FFF; padding: 40px 25px; text-align: center; transition-duration: .8s }

.fdnc_flex .box img{display: block; max-width: 100%; margin: 0 auto}
.fdnc_flex .box h4{margin-top: 30px; font-size: 18px; color: #111; line-height: 140%; word-break: keep-all}
.fdnc_flex .box p{margin-top: 10px; font-size: 16px; word-break: keep-all; line-height: 140%; color: #111; opacity: 0.7}

.fdnc_flex .box:hover{background: rgba(7, 160, 244, 0.10);}



.odem_flex{display: flex; gap:50px 20px; flex-wrap: wrap;}
.odem_flex .box{width: calc(25% - 15px); text-align: center}
.odem_flex .box .thum{border-radius: 20px;
border: 1px solid #DDD; overflow: hidden}
.odem_flex .box .thum img{display: block; width: 100%}
.odem_flex .box h4{margin-top: 20px; font-size: 16px; word-break: keep-all; color: #07A0F4}
.odem_flex .box p{color: #111; line-height: 140%; font-weight: 500; word-break: keep-all; margin-top: 10px; font-size: 20px}




.odem_flex2{display: flex; gap:50px 20px; flex-wrap: wrap;}
.odem_flex2 .box{flex:1; text-align: center}
.odem_flex2 .box .thum{border-radius: 20px;
border: 1px solid #DDD; overflow: hidden}
.odem_flex2 .box .thum img{display: block; width: 100%}

.odem_flex2 .box p{color: #111; line-height: 140%; font-weight: 500; word-break: keep-all; margin-top: 10px; font-size: 20px; margin-top: 20px; }




.odem_flex2 + .sub_title{margin-top: 160px;}


.sub_title{position: relative}
.sub_title .slide_btn{position: absolute; right: 0; bottom: 0; display: flex; gap:10px}
.sub_title .slide_btn span{cursor: pointer; width: 54px; height: 54px; border: 1px solid #ddd; border-radius: 54px; display: flex;
justify-content: center;
    align-items: center; }


.oem_slide_are{overflow: hidden}
.oem_slide .box{overflow: hidden; border-radius: 20px;}
.oem_slide .box img{width: 100%; }

.oem_slide .slick-list{padding: 0 10rem}
.oem_slide .slick-slide{padding: 0 10px}

.img_rnd{overflow: hidden; border-radius: 20px; height: 60vh; position: relative; padding: 80px;
display: flex;
    justify-content: flex-start;
    align-items: flex-end;}
.img_rnd .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1}
.img_rnd .bg img{width: 100%; height: 100%; object-fit: cover;}
.img_rnd .txt{}
.img_rnd .txt h3{color: #fff; font-size: 40px; line-height: 140%; word-break: keep-all; font-weight: 700;}
.img_rnd .txt ul{margin-top: 20px;}
.img_rnd .txt ul li{color: #fff; font-size: 18px; line-height: 150%; word-break: keep-all; font-weight: 400}
.img_rnd .txt ul li + li{margin-top: 6px}


.img_rnd + .sub_title{margin-top: 160px;}


.flex_border_box{padding: 60px 80px; border-radius: 20px; border: 1px solid #ddd}
.flex_border_box .in_flex{display: flex; gap:20px; background: url(../img/sub/flex_border_box.png);
background-position: center bottom; background-repeat: repeat-x; padding-bottom: 60px}
.flex_border_box .in_flex .box{text-align: center; flex:1}
.flex_border_box .in_flex .box img{display: block; max-width: 100%;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10); margin: 0 auto}

.flex_border_box .in_flex .box p{font-size: 20px; color: #111; line-height: 130%; word-break: keep-all; margin-top: 20px;}



.rnd_bg_section{background: url(../img/sub/rnd_bg_section.png); background-position: center; background-size: cover}
.rnd_bg_section .sub_title{margin: 0; width: 50%;
    position: sticky;
    top: 100px;
    left: 0;}
.rnd_bg_section .sub_title h4,
.rnd_bg_section .sub_title h2{color: #fff}

.rnd_bg_section .inner{display: flex;
align-items: flex-start;
    justify-content: flex-start;}

.rnd_count{display: flex; gap:60px; width: 50%;     flex-wrap: wrap;}
.rnd_count .box{width: calc(50% - 30px);
border-radius: 20px;
background: rgba(0, 0, 0, 0.20);
backdrop-filter: blur(12.5px); height: 500px; padding: 50px 40px;
display: flex;
flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;}


.rnd_count .box i{}
.rnd_count .box .txt{width: 100%; text-align: left}
.rnd_count .box .txt p{color: #fff; font-size: 20px; margin-bottom: 5px; line-height: 140%; font-weight: 500; word-break: keep-all}
.rnd_count .box .txt h3{color: #fff; font-size: 64px; line-height: 140%; font-weight: 700; word-break: keep-all}
.rnd_count .box .txt h3 span{font-size: 50%}


.rnd_count .box:nth-child(2n){margin-top: -80px}



.box_stky{position: relative}
.box_stky .box{height: calc(100vh - 200px); border-radius: 20px; background: #ddd; padding: 80px; width: 100%;
position: sticky;
    top: 100px;
    left: 0;  transition-duration: .8s;
    background-position: center; background-size: cover}



.box_stky .box + .box{margin-top: 100px}

.box_stky .box h3{font-size: 30px; line-height: 140%; word-break: keep-all; font-weight: 700}
.box_stky .box p{margin-top: 10px; font-size: 18px; line-height: 150%; word-break: keep-all; font-weight: 500}

.box_stky .box:nth-child(1){
	background-image: url(../img/sub/box_stky01.png);
	z-index: 1
}

.box_stky .box:nth-child(2){
	background-image: url(../img/sub/box_stky02.png);
	z-index: 2
}

.box_stky .box:nth-child(3){
	background-image: url(../img/sub/box_stky03.png);
	z-index: 3
}


/*form*/



.form_in{margin-top: 80px;}


.form_in ul{display: flex; gap:30px 40px;flex-wrap: wrap;}
.form_in ul li{width: calc(50% - 20px)}
.form_in ul li.w100{width: 100%}

.form_in ul li p{display: block; margin-bottom: 10px;color: #111; font-size: 18px}
.form_in ul li p span{color: #07A0F4}


.form_in ul li input[type="text"],
.form_in ul li input[type="email"]{
	width: 100%;
border-radius: 5px;
border: 1px solid #ddd;
background: #fff; flex:1 ;height: 60px; padding: 0 20px; font-size: 18px; color: #222;
word-break: keep-all;
}
.form_in ul li select{width: 100%;
border-radius: 5px;
border: 1px solid #ddd;
background: #fff; flex:1 ;height: 60px; padding: 0 20px; font-size: 18px; color: #222;
word-break: keep-all;
background: #fff url(../img/sub/drop_search.png); 
background-position: 95% center; background-repeat: no-repeat; background-size: 20px auto;
-o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; position: relative;}




.form_in ul li input[type="text"]:disabled{background: #FAFAFA}

.form_in *::placeholder{color: #999}

.flex_input{display: flex; gap: 20px;     align-items: center}
.flex_input span{font-size: 16px; color: #999}

.form_in ul li textarea{width: 100%;
border-radius: 5px;
border: 1px solid #ddd;
background: #fff; flex:1 ;height: 300px; padding: 15px 20px; font-size: 18px; color: #222;
word-break: keep-all}

.file_are{display: flex; gap: 10px;}
.file_are button{
	border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: #07A0F4;
height: 60px; word-break: keep-all; color: #fff; font-size: 18px;
padding: 0 25px;
min-width: 180px; text-align: center
}

.ck_agree{margin-top: 30px;display: flex; gap:10px;     align-items: center;}
.ck_agree p{font-size: 18px; color: #111; word-break: keep-all}
.ck_agree p a{color: #111; font-weight: 600}


.form_in_btn{text-align: center; margin-top: 80px;}






/*board*/

.board_common_btn_list{margin-top: 80px}
.board_common_btn_list ul{display: flex; gap:10px;align-items: center;
    justify-content: flex-end;}
.board_common_btn_list a, .board_common_btn_list button{border: 1px solid #ddd; border-radius: 5px; background: #fff; font-size: 16px; 
padding: 0 15px; height: 40px; line-height: 40px; color: #333; display: inline-block; text-align: center}

.board_top_flex{display: flex; justify-content: center;
    align-items: center; margin-bottom: 30px}

.total_board{margin-bottom: 20px}
.total_board p{font-size: 14px; color: #231815}
.total_board p b{font-weight: bold; color: #1936B2}

.search_board form{display: flex; gap:10px}
.search_board form select{background: #fff url(../img/sub/drop_search.png); 
background-position: 90% center; background-repeat: no-repeat; background-size: 20px auto;
border-radius: 5px; padding: 0 20px; font-size: 15px; color: #666; height: 60px; line-height: 60px; border: 0;
-o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; position: relative; border: 1px solid #ddd}

.search_board form select::-ms-expand{ 
	display: none;
}

.search_board .sch_bar{background: #fff; border-radius: 5px; display: flex; overflow: hidden; ; border: 1px solid #ddd}
.search_board .sch_bar input{font-size: 15px; padding: 0 20px; line-height: 60px; border: 0; background: #fff}
.search_board .sch_bar button{padding: 0 20px; border: 0; background: #fff}


.board_tlb{border-top: 1px solid #ddd}
.board_tlb li{border-bottom: 1px solid #ddd; padding: 40px; position: relative}
.board_tlb li a{display: block; position: relative}
.board_tlb li p.date{margin-bottom: 10px; font-size: 16px; color: #bcbcbc; font-weight: 400; word-break: keep-all}

.board_tlb li .td_chk{position: absolute; left: 10px; top: 10px}

.board_tlb li h3{display: flex; font-size: 24px; color: #111; gap:15px;align-items: center;
}

.board_tlb li h3 span{
	display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex:1;
}

.board_tlb li h3 i{
	border-radius: 40px;
background: linear-gradient(90deg, #20C557 0%, #07A0F4 100%);
width: 40px; height: 40px;
justify-content: center;
    align-items: center;
    display: flex;
    position: absolute; bottom: 40px; right: 40px;
    opacity: 0; transition-duration: .8s
}

.board_tlb li:hover{background: rgba(7, 160, 244, 0.10);}   
.board_tlb li:hover h3 i{opacity: 1}


.board_tlb .down_load{}

.board_tlb .down_load{display: inline-flex; gap:10px; justify-content: center;
    align-items: center; font-size: 16px; color: #fff; background: #18459D; padding: 15px 25px 15px 15px; border-radius: 100px}
.board_tlb .down_load i{background: #fff; width: 30px; height: 30px; display: flex; justify-content: center;
    align-items: center; border-radius: 30px}




.board_detail_content{border-top: 2px solid #D9D9D9; padding-top: 50px; border-bottom: 1px solid #D9D9D9}
.board_view_btn{text-align: center; margin-top: 100px}



.gall_list_style{display: flex; gap:40px 20px;    flex-wrap: wrap;}
.gall_list_style li{width: calc(25% - 15px)}
.gall_list_style li.empty_list{width: 100%}

.gall_list_style .gall_img{overflow: hidden; border-radius: 10px; transition-duration: .8s; border: 1px solid #ddd; position: relative}
.gall_list_style .gall_img .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;
background: rgba(253, 164, 36, 0.90);
display: flex;
gap:10px;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition-duration: .8s
}

.gall_list_style .gall_img .bg em{color: #fff; font-size: 18px; font-style: normal}

.gall_list_style .gall_img .bg img{width: auto;
    height: auto;
    object-fit: none;
    aspect-ratio: auto;}

.gall_list_style .gall_img img{width: 100%; height: 100%;object-fit: cover;
    aspect-ratio: 1;}
 
.gall_list_style.certifications .gall_img{padding: 22px}   
.gall_list_style.certifications .gall_img img{aspect-ratio: 17/24;}
    

  
    
    
    
.board_list_txt{margin-top: 20px; text-align: center}
.board_list_txt p{font-size: 16px; color: #aaa; margin-top: 10px}  
.board_list_txt h3{color: #111; font-size: 18px; font-weight: bold;
word-break: keep-all;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; transition-duration: .8s}    


.gall_list_style li .board_list_txt{text-align: left}
.gall_list_style li .board_list_txt p{text-align: right}

.gall_list_style li:hover .board_list_txt h3{color: #07A0F4}
.gall_list_style li:hover .gall_img .bg{opacity: 1}


.gall_list_style.certifications .board_list_txt{text-align: center}
    
.if_video_are{max-width: 1024px; margin: 0 auto 50px}   
    
.board_detail_content .video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
  overflow: hidden; border-radius: 5px
}

.board_detail_content .video-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}


#bo_v_file li{padding: 25px 0; border: 0;border:0; border-top: 0px solid #ddd; border-bottom: 1px solid #ddd; box-shadow: none;
border-radius: 0}
#bo_v_file li a{display: flex; gap:20px; font-size: 16px; color: #666}

#bo_v_file li i{float: none; margin: 0}
#bo_v_file li i img{margin: 0}

#bo_v_file li a strong{font-weight: 400}


.board_title{margin-bottom: 60px; text-align: center}
.board_title h2{font-size: 40px; font-weight: 600; color: #111}
.board_title h3{margin-top: 20px; font-size: 16px; color: #999; font-weight: 300}

.contact_view{}
.contact_view li{font-size: 18px;}
.contact_view li + li{margin-top: 10px}

.contact_content *,
.contact_content{font-size: 18px; line-height: 150%; word-break: keep-all; }

#bo_v_con,
#bo_v_con *{color: #222; font-size: 16px; line-height: 150%; word-break: keep-all}


#bo_cate {margin:0px 0 60px}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {zoom:1; display: flex; gap:20px}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {display:inline-block;padding:2px}
#bo_cate a {display:block;line-height:28px;padding:5px 0px;border-radius:0px;border-bottom:1px solid #fff;color:#231815; 
font-size: 16px; transition-duration: .5s}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:#fff;color:#DE9B25}
#bo_cate #bo_cate_on {z-index:2;background:#fff;color:#DE9B25;font-weight:bold;border-bottom:1px solid #DE9B25;}



.more_product{margin-top: 80px; text-align: center}




#faq_wrap {margin:0; border-top: 2px solid #fff}
#faq_wrap h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.faq_admin {text-align:right}
#faq_wrap ol {margin:0;padding:0;list-style:none}
#faq_wrap li {border-bottom:1px solid rgba(255, 255, 255, 0.20);;background:#111;position:relative; transition-duration: .5s}
#faq_wrap li:first-child {border-top:1px solid #ececec}
#faq_wrap li h3 {min-height:80px;padding:35px;padding-left:70px;position:relative; font-size: 18px; color: #fff;word-break:keep-all; line-height: 150%}
#faq_wrap li h3 a{color: #fff}
#faq_wrap li h3 .tit_btn {position:absolute;right:10px;top:30px;border:0;width:37px;height:37px;background:#111;color:#fff;font-size:18px}

#faq_wrap li h3 .tit_bg {display:inline-block;position:absolute;top:30px;left:10px;text-align:center;
width:37px;height:37px;background:#1936B2;color:#fff;font-size:18px; line-height: 37px}


#faq_wrap li h3 .tit_btn img{transition-duration: .8s;transform: rotate(180deg);}

#faq_wrap li h3.faq_li_open .tit_btn img{transform: rotate(0deg);}

#faq_con .con_inner {display:none;
padding: 30px 70px;
border-radius: 10px;
background: #1B1B1B;
}


#faq_con .con_inner,
#faq_con .con_inner *{color: #fff; font-size: 16px; word-break: keep-all; line-height: 150%}

#faq_wrap li:has(.faq_li_open) {
  border-bottom: 0
}










/* ✅ 이미지 팝업 모달 기본 스타일 */
.thumb-modal { position: fixed; inset: 0; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%;}
.thumb-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
}
.thumb-modal__dialog {
  position: relative; max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.thumb-modal__dialog img {
  max-width: 86vw; max-height: 72vh; display: block;
}
.thumb-modal__caption {
  margin-top: 8px; color: #fff; font-size: 14px; text-align: center; word-break: keep-all;
}
.thumb-modal__close {
  position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; line-height: 34px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; font-size: 22px; cursor: pointer;
}



#bo_v_img a.view_image{margin: 0 auto}

#bo_v_img a.view_image img{margin: 0 auto 20px; display: block}