.sub_visual{padding: 0 55px}



.sub_visual .in_box{
	border-radius: 20px; 
height: calc(100vh - 100px - 50px);
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
    align-items: center;
}


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


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

.sub_visual ul.sub_visual_dot{position: absolute; right: 50px; top: 45px; display: flex; z-index: 2; gap:25px}
.sub_visual ul.sub_visual_dot p{font-size: 16px; color: #fff}



.sub_visual .txt{position: relative; z-index: 2; text-align: center}

.sub_visual .txt p{color: #fff; font-size: 16px; word-break: keep-all; font-weight: bold; margin-bottom: 20px;}
.sub_visual .txt h3{word-break: keep-all; font-size: 60px; font-weight: 700; color: #fff}


.sub_section{padding: 150px 0}
.sub_section + .sub_section{padding-top: 0}

.sub_title{margin-bottom: 100px; position: relative}
.sub_title.center{text-align: center}
.sub_title.small{margin-bottom: 60px}
.sub_title *{word-break: keep-all; line-height: 150%}

.sub_title h3{color: #1B1F29; font-size: 40px; font-weight: 300}
.sub_title h3 b{font-weight: 700}

.sub_title h3 + h2{margin-top: 20px;}

.sub_title h2{color: #1B1F29; font-size: 60px; font-weight: 700}


.sub_title p{font-size: 20px; word-break: keep-all; color: #222; }

.sub_title p + p{margin-top: 20px;}
.sub_title p + h3{margin-top: 40px;}

.sub_title h3 + p{margin-top: 20px;}



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

.company01 .thum{border-radius: 20px; overflow: hidden}
.company01 .thum img{display: block; max-width: 100%}
.company01 .txt{padding: 50px 0}
.company01 .txt p{color: #222; font-size: 18px; word-break: keep-all; line-height: 150%;}
.company01 .txt p + p{margin-top: 20px;}


.sub_values{display: flex; gap:0 100px;     flex-wrap: wrap; justify-content: center;
    align-items: flex-start;}
.sub_values .box{overflow: hidden; border-radius: 20px; position: relative}
.sub_values .box .bg img{display: block; max-width: 100%}
.sub_values .box p{position: absolute; left: 0; width: 100%; text-align: center; bottom: 40px; font-size: 18px; color: #222; word-break: keep-all; font-weight: bold}

.sub_values .box:nth-child(2n){margin-top: 100px}

.sub_values .box:nth-child(3) p,
.sub_values .box:nth-child(4) p{color: #fff}

.sub_values_txt{text-align: center; margin-top: 100px}
.sub_values_txt p{font-size: 20px; word-break: keep-all; color: #222;line-height: 150% }




.history_section{margin-top: 60px; position: relative}

.year_group{display: flex; gap:240px; align-items: flex-start;
    justify-content: center;}
.year_group .year_range{text-align: center; width: 100%; max-width: 600px;
    position: sticky;
    top: 100px;}
.year_group .year_range h2{font-size: 40px; color: #01458E; transition-duration: .5s}
.year_group .year_range .thum{border-radius: 20px; overflow: hidden; margin-top: 20px;}
.year_group .year_range .thum img{max-width: 100%}

.year_txt{width: calc(50% - 120px)}
.year_txt .box + .box{margin-top: 50px}

.year_group + .year_group{margin-top: 150px}

.year_txt .box h3{font-size: 20px; color: #222}
.year_txt .box ul{margin-top: 15px}
.year_txt .box ul li{position: relative; padding-left: 15px; font-size: 18px; line-height: 150%; word-break: keep-all; color: #333}
.year_txt .box ul li:after{
	content: '·';
	position: absolute; left: 0; top: 0
}


.year_txt .box ul li + li{margin-top: 5px}



.history_section .gauge {
  width: 2px;
  height: 100%;
  background: #ddd;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  top: 0
}

.gauge_fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #01458E;
  transition: height 0.5s linear;
}

.gauge_fill:after{
	content: '';
	position: absolute; bottom: 0;
	width: 40px; height: 40px; border-radius: 40px; z-index: 2; 
	background: #E6F2FF;
	left: 50%;
    transform: translateX(-50%)
}

.gauge_fill:before{
	content: '';
	position: absolute; bottom: 15px;
	width: 10px; height: 10px; border-radius: 40px; z-index: 3; 
	background: #01458E;
	left: 50%;
    transform: translateX(-50%)
}





.ink_list{display: flex; gap:50px 40px; flex-wrap: wrap;}
.ink_list li{width: calc(25% - 30px); border: 1px solid #ddd; border-radius: 10px; overflow: hidden}

.ink_list li .thum{padding: 40px; background: #F8F8FA}
.ink_list li .thum img{display: block; margin: 0 auto; max-width: 100%} 

.ink_list li .txt{padding: 30px 25px; background: #fff}
.ink_list li .txt p{font-size: 18px; word-break: keep-all; color: #222}
.ink_list li .txt p.tag{color: #fff; font-size: 16px; padding: 5px 10px; border-radius: 50px; background: #01458E; display: inline-block; margin-bottom: 10px}



.location_toogle{}
.location_toogle .box{ cursor: pointer; border-top: 1px solid #ddd}
.location_toogle .box:last-child{border-bottom: 1px solid #ddd}

.location_toogle .box .txt{padding: 40px 25px; display: flex; align-items: center;}
.location_toogle .box .txt .where{width: 260px; color: #111; font-size: 20px; word-break: keep-all}

.location_toogle .box .txt .info{flex:1; position: relative}
.location_toogle .box .txt .info:after{content: '';
position: absolute; right: 0; top: 50%; 
width: 17px; height: 17px;
background: url(../img/sub/location_toogle.png);
background-position: center; background-repeat: no-repeat;
background-size: 17px auto;
transform: translateY(-50%) rotate(180deg);
transition-duration: .8s
}


.location_toogle .box.atv_box .txt .info:after{transform: translateY(-50%) rotate(0deg);}


.location_toogle .box .txt .info h4{font-size: 30px; word-break: keep-all; color: #111; font-weight: 600}
.location_toogle .box .txt .info ul{display: flex; gap:20px; margin-top: 15px;    flex-wrap: wrap;}
.location_toogle .box .txt .info ul li{font-size: 16px; color: #4a4a4a; line-height: 150%; word-break: keep-all; display: flex; gap:10px;
align-items: center;}
.location_toogle .box .txt .info ul li b{padding: 2px 9px; display: inline-block; border-radius: 50px; background: #01458E; color: #fff}

.location_toogle .box .map_box{border-radius: 20px; overflow: hidden; margin-bottom: 0px; height: 0; transition-duration: .8s}
.location_toogle .box .map_box iframe{display: block; width: 100%}


.location_toogle .box.atv_box .map_box{height: 450px; margin-bottom: 40px}


.slide_btn{display: flex; gap:10px}
.slide_btn span{cursor: pointer; width: 60px; height: 60px; 
border: 1px solid rgba(0,0,0,0.5); border-radius: 60px; display: flex; align-items: center;
    justify-content: center;}



.sub_title .slide_btn{position: absolute; right: 0; bottom: 0}

.sub_slide_are{overflow: hidden}

.sub_slide .box .thum{overflow: hidden; border-radius: 20px;}
.sub_slide .box .thum img{max-width: 100%; width: 100%}
.sub_slide .box p{margin-top: 20px; word-break: keep-all; font-size: 18px; word-break: keep-all}

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



.tlb{}
.tlb table{border-spacing: 0; width: 100%}
.tlb table th,
.tlb table td{padding: 18px; font-size: 18px; word-break: keep-all; line-height: 150%; border-bottom: 1px solid #ddd}

.tlb table th{color: #fff; background: #01458E}
.tlb table td.center{text-align: center;}
.tlb table td.bg{background: #F8F8FA; color: #01458E; font-weight: 600}

.tlb table th + th{border-left: 1px solid #ddd}
.tlb table td + td{border-left: 1px solid #ddd}


.partner_list{display: flex; gap:40px 20px;     flex-wrap: wrap;}
.partner_list li{width: calc(25% - 15px); text-align: center}
.partner_list li .partner_logo{border-radius: 10px; border: 1px solid #ddd;
display: flex;
    aspect-ratio: 36 / 10;
    justify-content: center;
    align-items: center;}
.partner_list li .partner_logo img{max-width: 100%}
.partner_list li p{margin-top: 15px; font-size: 16px; word-break: keep-all; color: #222; font-weight: 500}

.product_img{overflow: hidden; border-radius: 20px; height: 50vh; max-width: 70%; transition-duration: 3s; margin: 0 auto}
.product_img img{max-width: 100%; display: block; width: 100%; height: 100%; object-fit: cover;}

.product_img.show{max-width: 100%}





/*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: 80px}

.total_board{}
.total_board p{font-size: 14px; color: #666}
.total_board p b{font-weight: bold; color: #222}

.search_board form{display: flex; gap:10px; background: #F8F8FA; border-radius: 60px; overflow: hidden; padding: 0 15px;
    align-items: center;}
.search_board form select{background: #F8F8FA url(../img/sub/drop_search.png); 
background-position: 90% center; background-repeat: no-repeat; background-size: 12px 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-radius: 60px; }

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

.search_board .sch_bar{display: flex; overflow: hidden;
border-radius: 80px;
border: 2px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.10);
/* blur */
backdrop-filter: blur(9px);}
.search_board .sch_bar input{font-size: 15px; padding: 0 20px; line-height: 60px; border: 0; background: transparent; color: #F8F8FA; min-width: 400px}
.search_board .sch_bar button{padding: 0 20px; border: 0; background: transparent}


.board_tlb table{width: 100%; border-top:1px solid #222; border-spacing: 0 }
.board_tlb table td{font-size:18px; padding:35px 15px; border-bottom: 1px solid #ddd; font-weight: 500; color: #666 }
.board_tlb table td.empty_table{font-size: 1em;padding: 20px 0 !important;
    color: #666;
    text-align: center;}

.board_tlb table td.num{text-align: center; width: 80px; font-size: 15px; color: #999}
.board_tlb table td.num .notice_icon{color: #222}

.board_tlb table td.date{width: 170px;  }
.board_tlb table td.date p{font-size: 16px; color: #999; text-align: center;display: flex; gap:5px}
.board_tlb table td.down{text-align: center; width: 170px; font-size: 15px; color: #999}
.board_tlb table td a.flexa{display: flex; gap:10px}
.board_tlb table td .point{font-size: 14px; background:#FF8A00 ; padding:5px 10px ; border-radius: 3px; color: #fff}


.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: 1px solid #ddd; padding-top: 50px;}
.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%; color: #333}

.empty_table{width: 100%; color: #333}

.gall_list_style .gall_img{overflow: hidden; border-radius: 10px; border: 1px solid #ddd; }
.gall_list_style .gall_img img{width: 100%; height: 100%;object-fit: cover;
     transition-duration: .8s; aspect-ratio: 365 / 300;}
  

.gall_list_style .gall_box:hover .gall_img a img{scale:1.1}  
    
.gall_list_style.certifications .gall_img img{aspect-ratio: 21 / 29;}
    
.gall_list_style.certifications li{width: calc(25% - 45px)}
    
.board_list_txt{margin-top: 25px}
.board_list_txt p{font-size: 16px; color: #A1A1A1; margin-top: 20px}  
.board_list_txt h3{color: #222; 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 .gall_box:hover .board_list_txt h3{color: #01458E}


.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: 1px 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: #999; transition-duration: .8s}

#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: 80px}
.board_title h2{font-size: 40px; font-weight: 900; color: #111}
.board_title h3{margin-top: 30px; font-size: 16px; color: #AAAAAA; 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}

.board_detail_content *{font-size: 18px; line-height: 150%; word-break: keep-all; color: #333}

.more_product{margin-top: 80px; text-align: center}
.more_product .common_btn{display: inline-flex}



.notice_list{border-top: 1px solid #ddd}


.notice_list .box{}
.notice_list .box a{display: block; padding: 40px 60px; border-bottom: 1px solid #434343; position: relative;
overflow: hidden}



.notice_list .box a h2{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; position: relative; z-index: 2 } 


.notice_list .box a p{font-size: 16px; color: #aaa; margin-top: 20px; 
transition-duration: .8s; position: relative; z-index: 2}  

.notice_list .box a .notice_go{position: absolute; right: 60px; top: 50%;
transform: translateY(-50%); transition-duration: .8s; opacity: 0; width: 50px; height: 50px; 
background: #111; border-radius: 50px; display: flex;
justify-content: center;
    align-items: center; padding: 15px; z-index: 2}

.notice_list .box a .notice_go img{max-width: 100%}

.notice_list .box a:hover h2,
.notice_list .box a:hover p{color: #222}
.notice_list .box a:hover .notice_go{opacity: 1}

.notice_list .box a:after {
    content: '';
    position: absolute;
    left: 0%;
    top: 50%;
    border-radius: 0 0px 200px 0;
    width: 0px;
    height: 0px;
    background: #fff;
    z-index: 1;
    transform: translateY(-50%);
    transition-duration: 2s;
    height: 100%
}

.notice_list .box a:hover:after{width: 100%;  background: #fff;  border-radius: 0}  







.form_in ul{display: flex; gap:40px;     flex-wrap: wrap;}

.form_in li{width: calc(50% - 20px)}
.form_in li.w100{width: 100%}

.form_in li p{font-size: 16px; color: #111; display: block; margin-bottom: 10px; }
.form_in li p span{color: #01458E}
.form_in li p span.gray{color: #A1A1A1}

.form_in li input{height: 60px; line-height: 60px; padding: 0 25px; font-size: 18px; color: #fff;
border-radius: 10px;
border: 1px solid #F8F8FA;
background: #F8F8FA; width: 100%; flex:1;}
.form_in li select{height: 60px; line-height: 60px; padding: 0 25px; font-size: 18px; color: #fff;
border-radius: 10px;
border: 1px solid #F8F8FA;
background: #F8F8FA; width: 100%; flex:1;
background: #F8F8FA url(../img/common/drop.png); 
background-position: 98% center; background-repeat: no-repeat; background-size: 9px auto;
-o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; position: relative}



.form_in li textarea{height: 200px; line-height: 140%; padding: 25px; font-size: 18px; color: #fff;
border-radius: 10px;
border: 1px solid #F8F8FA;
background: #F8F8FA; width: 100%}


.form_in li .file_are{display: flex; gap:10px; border-radius: 10px; background: #F8F8FA}
.form_in li .file_are button{
	border-radius: 10px;
border: 1px solid #F8F8FA;
background: #F8F8FA;
font-size: 16px; color: #fff; text-align: center; 
padding: 0 25px;  height: 60px; line-height: 58px
}

.ck_agree{display: flex; gap:10px; margin-top: 50px}

.ck_agree input{display: none}
.ck_agree input + label{width: 22px; height: 22px; background: url(../img/sub/ck.png); background-repeat: no-repeat; background-size: 22px auto; cursor: pointer}
.ck_agree input:checked + label{background-image:url(../img/sub/ckon.png);  }


.ck_agree *{color: #222; font-size: 16px;}
.ck_agree a{text-decoration: underline; color: #url(../img/sub/ck.png); }

.form_in_btn{margin-top: 80px; text-align: center}
.form_in_btn button{display: inline-flex; text-align: left;
}


.form_in_btn button{
	text-align: center; border-radius: 60px;
	font-size: 18px; word-break: keep-all; padding: 25px; min-width: 230px;
	background: #003366; border-color: #003366;
	color: #fff; display: inline-block; border: 0
}


.overhidden{overflow: hidden}




.global_are{border: 1px solid #ddd; border-radius: 20px; padding: 60px; position: relative}

.global_are img{max-width: 100%; display: block; margin: 0 auto}

.global_are .pointer{}

.global_are .pointer a {
    position: absolute;
    height: auto;
    cursor: pointer;
    z-index: 2; display: inline-flex;
    gap:0px;
    font-size: 18px; color: #01458E;
    background: #fff; border: 1px solid #01458E; border-radius: 50px;  padding: 5px 15px;
    word-break: keep-all; transition-duration: .8s
}

.global_are .pointer a i{visibility: hidden; overflow: hidden; width: 0;  transition-duration: .0}

.global_are .pointer a:hover{gap:10px; background: #01458E; color: #fff}
.global_are .pointer a:hover i{visibility: visible; width: 10px; }


.global_are .pointer a:after{content: '';
position: absolute; left: calc(100% + 10px);
width: 10px; height: 10px; border-radius: 10px;background: #01458E;
top: 50%;
transform: translateY(-50%)
}


.global_are .pointer a:nth-child(1){left: 81%; top: 36.5%}
.global_are .pointer a:nth-child(1):after,
.global_are .pointer a:nth-child(3):after{left: auto;  right:calc(100% + 10px) }

.global_are .pointer a:nth-child(n+4){width: 10px; height: 10px; padding: 0}
.global_are .pointer a:nth-child(n+4):after{left: 0; top: 50%}



.global_are .pointer a:nth-child(4){left: 69%; top: 55%}
.global_are .pointer a:nth-child(5){left: 49%; top: 35%}
.global_are .pointer a:nth-child(6){left: 73%; top: 47%}
.global_are .pointer a:nth-child(7){left: 64%; top: 52%}


.global_are .pointer a:nth-child(8){left: 69%; top: 60%}
.global_are .pointer a:nth-child(9){left: 69.5%; top: 61%}
.global_are .pointer a:nth-child(10){left: 70.5%; top: 64%}
.global_are .pointer a:nth-child(11){left: 70%; top: 51%}

.global_are .pointer a:nth-child(12){left: 73%; top: 56%}
.global_are .pointer a:nth-child(13){left: 73%; top: 52%}

.global_are .pointer a:nth-child(14){left: 24.5%; top: 50%}
.global_are .pointer a:nth-child(15){left: 30%; top: 42%}
.global_are .pointer a:nth-child(16){left: 36%; top: 72%}



.global_are .pointer a:nth-child(2){left: 69%; top: 42%}
.global_are .pointer a.eng{left: 67%}

.global_are .pointer a:nth-child(3){left: 80%; top: 42%; }


.global_flex{display: flex;}
.global_flex .sub_title{margin: 0; width: 35%}
.global_flex .global_flex_list{flex:1}
.global_flex .global_flex_list a{display: flex; 
border-radius: 20px;
border: 1px solid #DDD;
background: #FFF; padding: 30px; gap:50px; align-items: center; transition-duration: .8s; background: #fff}


.global_flex .global_flex_list a:hover{box-shadow: 4px 4px 25px 0 rgba(0, 0, 0, 0.15);}

.global_flex .global_flex_list a .txt{flex:1}
.global_flex .global_flex_list a .txt h3{color: #222; font-size: 30px;word-break: keep-all}
.global_flex .global_flex_list a .txt p{color: #222; font-size: 16px; word-break: keep-all; line-height: 150%; margin-top: 10px;}


.global_flex .global_flex_list a + a{margin-top: 20px;}