.back_top{}
.back_top + .detail_top{margin-top: 80px}

.back_top button {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    border: 1px solid #D8D8D8;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #fff;
}


.sub_visual{
	padding-top: 180px;
	/*height: 100vh;*/
	overflow: hidden;
	border-bottom: 1px solid #ddd
}

.sub_visual_deps{display: flex; gap:15px; align-items: center; margin-bottom: 20px;}
.sub_visual_deps li{display: flex; font-size: 16px; color: #222; word-break: keep-all; align-items: center;}
.sub_visual_deps li i{width: 4px; height: 4px; border-radius: 4px; background: #222}

.sub_visual h2{font-size: 70px; color: #222;}

.sub_visual_nav .sub_deps{display: flex; margin-top: 40px;}
.sub_visual_nav .sub_deps a{padding: 19px 50px; display: flex; align-items: center; color: #ACACAC; transition-duration: .8s; 
font-size: 18px; border-bottom: 2px solid #fff}

.sub_visual_nav .sub_deps a:hover{color: #00A0DF; font-weight: bold}
.sub_visual_nav .sub_deps a.on{color:#00A0DF; border-color: #00A0DF; font-weight: bold }

.vis_img{height: 60vh; overflow: hidden; width: 96%; transition-duration: 2s; margin: 0 auto; }
.show .vis_img{width: 100%; }

.vis_img img,
.vis_img video{width: 100%; height: 100%;object-fit: cover; }




.sub_section{padding: 150px 0}

.sub_section.notop{padding-top: 0}

.sub_title{margin-bottom: 60px;}
.sub_title h4{margin-bottom: 20px; font-size: 18px; color: #00A0DF}
.sub_title h2{font-size: 40px; line-height: 140%; word-break: keep-all; font-size: 40px; color: #222}

.sub_title p{font-size: 16px; color: #222; word-break: keep-all; margin-top: 20px; line-height: 140%}

.sub_title.center{text-align: center}

.company01_flex{display: flex;}
.company01_flex .thum{width: 50%}
.company01_flex .thum img{width: 100%}
.company01_flex .txt{width: 50%; background: #FAFAFA; padding:  80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.company01_flex .txt p{font-size: 18px; word-break: keep-all; line-height: 140%; color: #222}
.company01_flex .txt p + p{margin-top: 20px;}
.company01_flex .txt .last{margin-top: 50px;}
.company01_flex .txt .last h4{margin-top: 20px; font-size: 22px; color: #222; word-break: keep-all}



.company_step{margin-top: 60px}
.company_step li{}
.company_step li + li{margin-top: 50px}

.company_step li h3{font-size: 24px; font-weight: 700; word-break: keep-all; color: #222}
.company_step li p{margin-top: 20px; font-size: 18px; line-height: 140%; word-break: keep-all; color: #222}




.history_are{position: relative; max-width: 1400px; margin: 0 auto;  }
.history_are .hs_line{height: 100%; position: absolute; background: #DDDDDD; width: 2px; left: 50%; margin-left: -1px;}
.history_are .hs_line span{position: absolute; left: 0; top: 0; width: 2px; height: 10%; background: #00A0DF}

.history_flex{display: flex; align-items: flex-start;}

.history_flex + .history_flex{margin-top: 100px}

.history_flex .thum{width: 50%; padding: 50px 100px 50px 0px ;
    position: sticky;
    top: 0px; }
.history_flex .thum img{max-width: 100%; display: block; border-radius: 10px;}
.history_flex .thum h2{word-break: keep-all; margin-top: 10px; font-size: 40px; }


.history_flex .txt{  width: 50%; padding: 50px 0 50px 100px}
.history_flex .txt .history_info{}
.history_flex .txt .history_info + .history_info{margin-top: 50px;}


.history_flex .txt .history_info h3{margin-bottom: 30px; color: #00A0DF; font-size: 30px;}
.history_flex .txt .history_info p{word-break: keep-all; font-size: 18px; color: #222; }
.history_flex .txt .history_info p + p{margin-top: 5px}



.organization{}
.organization .box{padding: 20px ;  text-align: center; 
border-radius: 7px;
background: #00A0DF; border: 1px solid #00A0DF; max-width: 180px; margin: 0 auto; position: relative}

.organization .box p{font-size: 18px; color: #fff; word-break: keep-all}
.organization .box h2{color: #fff; font-size: 30px;}

.organization .box + .box{margin-top: 40px;}

.organization .box.start{padding: 50px 20px; position: relative}
.organization .box.start p{font-size: 16px}

.organization .box:after{content: ''; height: calc(100% + 40px) ; position: absolute; left: 50%;
width: 1px; background: #DDD; margin-left: -.5px; z-index: -1; top: 0}


.flex_organ{margin-top: 80px; display: flex; gap:30px}
.flex_organ li{flex:1; position: relative}
.flex_organ li:after{
	content: '';
	position: absolute;
	left: 50%; top: -39.5px; 
	height: 1px; width: calc(50% + 30px);
	background: #ddd;
}

.flex_organ li:before{
	content: '';
	position: absolute;
	right: 50%; top: -39.5px; 
	height: 1px; width: calc(50% + 30px);
	background: #ddd;
}


.flex_organ li:first-child:before{display: none}
.flex_organ li:last-child:after{display: none}

.organization .flex_organ li .box{max-width: none}

.organization .box.sub{
border: 1px solid #00A0DF;
background: #FFF;}


.organization .box.sub p{color: #222}

.organization .box.sub + .box.gray{margin-top: 10px}

.organization .box.gray{
border: 1px solid #DDD;
background: #FFF;}


.organization .box.gray p{color: #222; opacity: .6}
.organization .box.gray + .box.gray{margin-top: 5px}

.organization .box.gray:after{height: 10px ; top: -10px;}


.organization .box.sub:after{height: 40px ; top: -40px;}






.certification{display: flex; gap: 50px 30px;     flex-wrap: wrap;}

.certification li{width: calc(25% - 22.5px); border-radius: 10px; border: 1px solid #ddd; padding: 45px; text-align: center}
.certification li p{font-size: 18px; color: #222; margin-top: 20px; word-break: keep-all}
.certification li img{max-width: 100%; }


.location{}
.location .box{}
.location .box + .box{margin-top: 100px}
.location .box h2{color: #222; font-size: 30px; font-weight: 700; }
.location .box ul{display: flex; margin-top: 30px; gap:60px; align-items: center;}
.location .box ul li{display: flex; gap:30px; align-items: center;}

.location .box ul li .left{display: flex; gap: 10px; font-size: 20px; align-items: center;}
.location .box ul li span{word-break: keep-all; font-size: 16px; color: #222; }

.location .box .map_are{margin-top: 50px; border-radius: 10px; overflow: hidden}
.location .box .map_are iframe{display: block; width: 100%}






/*business*/

.sub_tab{display: flex; gap:20px;justify-content: center; margin-bottom: 50px;}
.sub_tab a{padding: 18px 40px; text-align: center; color: #acacac; font-size: 18px; word-break: keep-all;
border: 1px solid #ddd; border-radius: 100px; transition-duration: .8s; background: #fff}

.sub_tab a:hover,
.sub_tab a.on{color: #fff; background: #00A0DF; border-color: #00A0DF}


.full_img{border: 1px solid #ddd; border-radius: 10px; padding: 60px 25px; }
.full_img img{max-width: 100%; display: block; margin: 0 auto}

.full_img .txt{margin-bottom: 30px; text-align: center}
.full_img .txt h3{color: #00A0DF; font-size: 24px; word-break: keep-all; line-height: 140%}
.full_img .txt p{margin-top: 20px; font-size: 18px; line-height: 140%; word-break: keep-all}

.full_img ul{display: flex;  text-align: center; gap:40px;}
.full_img ul li{flex:1}
.full_img ul li p{margin-top: 10px; font-size: 16px; word-break: keep-all}

.bu_what{}
.bu_what_txt{margin-bottom: 30px}

.bu_what_txt h3{font-size: 30px; line-height: 140%; word-break: keep-all; color: #222}
.bu_what_txt p{margin-top: 20px; word-break: keep-all; line-height: 140%; font-size: 18px; }

.bu_what_flex{display: flex; gap:30px; flex-wrap: wrap;}
.bu_what_flex .box{width: calc(50% - 15px); padding: 40px; border: 1px solid #ddd; border-radius: 10px;
display: flex; 
justify-content: space-between;
    align-items: center; transition-duration: .8s;
}

.bu_what_flex .box.rever{gap:30px; justify-content: flex-start;}
.bu_what_flex .box.w33{width: calc(33.33% - 19.99px);} 
.bu_what_flex .box.w100{width: 100%} 

.bu_what_flex .box .txt{flex:1}
.bu_what_flex .box .txt h4{font-size: 18px; word-break: keep-all; font-weight: 700; line-height: 140%;margin-bottom: 0 }

.bu_what_flex .box .txt p{font-size: 16px; color: #333; line-height: 140%; word-break: keep-all; margin-top: 10px;}


ul.dot{margin-top: 10px;}
ul.dot li{position: relative; font-size: 16px; color: #333; line-height: 140%; word-break: keep-all; padding-left: 15px;}
ul.dot li + li{margin-top: 2px}
ul.dot li:after{content: '·'; position: absolute; left: 0; top: 0}

.emt50{height: 50px}
.emt100{height: 100px}


.sub_small_title{margin-bottom: 30px; position: relative}
.sub_small_title h3{font-size: 24px; font-weight: 700; word-break: keep-all; line-height: 140%}


.bu_where_flex{display: flex; gap:30px;     flex-wrap: wrap;}
.bu_where_flex .box{width: calc(25% - 22.5px); padding: 50px 40px; background: #fafafa; border-radius: 10px; }

.bu_where_flex .box img + .txt{margin-top: 20px;}

.bu_where_flex .box .txt h4{font-size: 18px; line-height: 140%; word-break: keep-all}
.bu_where_flex .box .txt p{font-size: 16px; word-break: keep-all; color: #333; line-height: 140%}

.bu_where_flex .box .txt h4 + p{margin-top: 10px;}


.bu_app_slide{overflow: hidden; margin: 0 -15px}
.bu_app_slide .slick-list{padding: 0 7rem; overflow: visible}
.bu_app_slide .slick-slide{padding: 0 15px}

.bu_app_slide .gall_con img{width: 100%}




.bu_app_slide_line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 10px;
  overflow: hidden;
  
  background-color: #ddd;
  background-image: linear-gradient(to right, #00A0DF, #00A0DF);
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size .4s ease-in-out;
  margin-top: 40px
}



.pu_box_list{}
.pu_box_list li{padding: 10px 20px; border: 1px solid #ddd; border-radius: 10px}
.pu_box_list li + li{margin-top: 10px}
.pu_box_list li p{position: relative; font-size: 16px; color: #333; line-height: 140%; word-break: keep-all; padding-left: 15px;}
.pu_box_list li p:after{content: '·'; position: absolute; left: 0; top: 0}

.pu_box_list li p.notdot{padding-left: 0; font-size: 18px}
.pu_box_list li p.notdot:after{display: none}


.bu_center_flex{display: flex; text-align: center; border: 1px solid #ddd; border-radius: 10px}
.bu_center_flex h3{font-size: 18px;}
.bu_center_flex p{font-size: 16px; line-height: 140%; word-break: keep-all}
.bu_center_flex h3 + p{margin-top: 20px;}

.bu_center_flex .rt{width: 225px; height: 225px; background: #00A0DF; border-radius: 300px;     display: flex;
    justify-content: center;
    align-items: center;     flex-direction: column;}
.bu_center_flex .rt h3,
.bu_center_flex .rt p{color: #fff}


.bu_center_flex .ct{width: calc(50% - 112.5px);      display: flex;
    justify-content: center;
    align-items: center;     flex-direction: column;}


.bu2_flex{display: flex; gap:30px}
.bu2_flex .col{width: calc(50% - 15px)}

.col_list{}
.col_list li{padding: 25px 40px; border: 1px solid #ddd; border-radius: 10px; display: flex; gap:24px;
    align-items: center;}
.col_list li p{flex:1 ; font-size: 18px; line-height: 140%; word-break: keep-all}

.col_list li + li{margin-top: 30px}


.tlb{}
.tlb table{width: 100%; border-spacing: 0; border: 0 !important; border-top: 1px solid #222 !important}
.tlb table th, .tlb table td{font-size: 16px; padding: 20px; border: 0 !important; border-bottom: 1px solid #ddd !important}
.tlb table td.center{text-align: center}
.tlb table th{background: #FAFAFA}
.tlb table th span{font-size: 14px;}
.tlb table tr:first-child td{background: #FAFAFA}

.bu_app_slide .more_btn{margin-top: 20px; font-size: 16px; font-weight: 600; margin-top: 20px}
.product_list .more_btn{margin-top: 20px; font-size: 16px; font-weight: 600}
.product_list{display: flex; gap: 30px; flex-wrap: wrap;}
.product_list li{width: calc(25% - 22.5px); }
.product_list li .box{border: 1px solid #ddd; border-radius: 10px; padding: 25px 30px; text-align: center; display: block; transition-duration: .8s}

.product_list li .box:hover{
border: 1px solid #00A0DF;
background: #FFF;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
}

.product_list li .box .thum{aspect-ratio: 1; max-width: 300px; margin: 0 auto}
.product_list li .box .thum img{width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1;}
.product_list li .box p{margin-top: 20px; font-size: 18px; font-weight: 600}


a.pdf_down{padding: 18px 34px; display: inline-flex; gap:10px;
color: #00A0DF; font-size: 16px; border: 1px solid #00A0DF; border-radius: 50px; margin-top: 50px;}



.video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
}

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


.bu03_center{text-align: center; padding: 80px 25px; border: 1px solid #ddd; border-radius: 10px}
.bu03_center h3{font-size: 24px; font-weight: bold; margin-bottom: 20px; word-break: keep-all}
.bu03_center h4{color: #fff; word-break: keep-all; font-size: 16px; padding: 18px 34px; 
border-radius: 30px;
background: #00A0DF; display: inline-block}

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




.tab {
  display: flex;
  justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}
.tab__item {
	padding: 18px 50px;
	border-bottom: 2px solid #fff;
	background: #FFF;
}

.tab__item a{
	color: #ACACAC; font-size: 18px; word-break: keep-all; font-weight: 400
}

.tab__item.active {
	 border-bottom: 2px solid #00A0DF;
	 
}


.tab__item.active a{color: #00A0DF; font-weight: bold}

.tab__content-wrapper {
  margin-top: 50px;
}
.tab__content {
  display: none;
}
.tab__content.active {
  display: block;
}


.psa_flex{border-radius: 10px; background: #fafafa; padding: 50px; display: flex; gap:10rem}
.psa_flex .left{}
.psa_flex .left h3{font-size: 24px; font-weight: bold}
.psa_flex .left h5{font-weight: 400; font-size: 20px; word-break: keep-all}
.psa_flex .txt{}
.psa_flex .txt p{font-size: 18px; line-height: 140%; word-break: keep-all}


.pu_where{display: flex; gap:30px; flex-wrap: wrap;}
.pu_where .box{text-align: center; padding: 25px; border: 1px solid #ddd; border-radius: 10px;
width: calc(20% - 24px)}
.pu_where .box p{font-size: 18px; margin-top: 20px; word-break: keep-all}





.enbex_flex{display: flex; padding: 60px 150px; border-radius: 10px;
background: #FAFAFA; gap:10rem}

.enbex_flex .thum{text-align: center; }
.enbex_flex .thum h3{line-height: 140%; font-weight: 500; word-break: keep-all; font-size: 24px}
.enbex_flex .thum h3 span{color: #00A0DF}
.enbex_flex .thum p{word-break: keep-all; line-height: 140%; font-size: 16px;}
.enbex_flex .thum img{display: block; max-width: 100%; margin: 30px auto 20px; mix-blend-mode: multiply;}

.enbex_flex .txt{flex:1}
.enbex_flex .txt li{display: flex; background: #fff; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; padding:20px 30px;
font-size: 18px; word-break: keep-all; line-height: 140%; gap:20px;     align-items: center;}
.enbex_flex .txt li span{flex:1 }
.enbex_flex .txt li + li{margin-top: 20px;}



.enbex_where_flex{display: flex; gap:50px;}
.enbex_where_flex .box{flex:1; text-align: center; }
.enbex_where_flex .box img{border-radius: 500px; border: 1px solid #ddd}
.enbex_where_flex .box p{margin-top: 20px; word-break: keep-all; line-height: 140%; font-size: 18px;}


/*inquery*/



.inquery .inner{display: flex; justify-content: flex-start;
    align-items: flex-start;}
.inquery .inner .sub_title{width: 35%; margin: 0;
    position: sticky;
    top: 50px;
    left: 0;}
.inquery .inner .form_in{width: 65%}

.form_in h2{font-size: 40px; color: #222; }
.form_in ul{padding-top: 40px; margin-top: 40px; border-top: 1px solid #ddd; display: flex; gap:30px;     flex-wrap: wrap;}

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

.form_in ul li label{display: block; margin-bottom: 10px; font-size: 16px; color: #222;}
.form_in ul li label span{color: #00A0DF}

.form_in ul li input{height: 60px; padding: 0 20px; font-size: 16px; border: 1px solid #ddd; line-height: 58px; border-radius: 5px; width: 100%}
.form_in ul li textarea{height: 250px; padding: 20px; font-size: 16px; border: 1px solid #ddd; line-height: 140%; border-radius: 5px; width: 100%}
.form_in *::placeholder{color: #666}


.ck_agree{margin-top: 30px; display: flex; gap:10px; align-items: center;}
.ck_agree input{display: none}
.ck_agree input + label{position: relative; background: url(../img/sub/ck.png);
background-size: 22px 22px; background-position: left; background-repeat: no-repeat; width: 22px; height: 22px; cursor: pointer}

.ck_agree input:checked + label{background-image: url(../img/sub/ckon.png); }

.ck_agree p{font-size: 16px; color: #222; word-break: keep-all}
.ck_agree p a{color: #00A0DF; text-decoration: underline}

.form_in_btn{margin-top: 80px;}
.form_in_btn .more_btn{}





/*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}
.search_board form select{background: #f5f5f5 url(../img/sub/drop_search.png); 
background-position: 90% center; background-repeat: no-repeat; background-size: 13px 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}

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

.search_board .sch_bar{display: flex; overflow: hidden;
border-radius: 80px;
border: 1px solid #ddd;
background:#fff;
/* blur */
backdrop-filter: blur(9px);}
.search_board .sch_bar input{font-size: 15px; padding: 0 20px; line-height: 60px; border: 0; background: transparent; color: #222; 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:60px 30px;    flex-wrap: wrap;}
.gall_list_style li{width: calc(33.33% - 19.99px)}
.gall_list_style li.empty_list{width: 100%; color: #fff}

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



.gall_con{border: 1px solid #ddd; border-radius: 10px; overflow: hidden; transition-duration: .8s}
.gall_con:hover{border-radius: 10px;
border: 1px solid #00A0DF;
background: #FFF;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);}





.gall_list_style .gall_img{overflow: hidden;  }
.gall_list_style .gall_img img{width: 100%; height: 100%;object-fit: cover;
     transition-duration: .8s; aspect-ratio: 16 / 9;}

    
.gall_list_style.certifications .gall_img img{aspect-ratio: 21 / 29;}
    
.gall_list_style.certifications li{width: calc(25% - 45px)}
   

    
.board_list_txt{padding: 30px ; }
.board_list_txt.center{text-align: center}
.board_list_txt p{font-size: 16px; color: #aaa; margin-top: 20px;
word-break: keep-all;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;}  
.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; }    

.board_list_txt p.ca{margin-bottom: 10px; font-weight: bold; color: rgba(0, 160, 223, 1)}

.board_list_txt .more_btn{margin-top: 20px; font-size: 16px; font-weight: 600}

.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: #666; 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; text-align: center}
.board_title h2{font-size: 40px; font-weight: 600; color: #222}
.board_title h3{margin-top: 30px; font-size: 16px; color: #acacac; 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; }

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



.notice_list{border-top: 2px solid #fff}


.notice_list .box{}
.notice_list .box + .box{margin-top: 30px}
.notice_list .box a{display: block; padding: 50px 40px; border: 1px solid #ddd; position: relative;
overflow: hidden; border-radius: 10px; transition-duration: .8s}

.notice_list .box a:hover{
border: 1px solid #00A0DF;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
}

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


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

word-break: keep-all;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}  
.notice_list .box a p.list_date{margin-top: 0; margin-bottom: 20px; color: #BCBCBC}

.notice_list .box a:hover h2{color: #00A0DF}








/*detail*/

.detail_top{display: flex; gap:10rem}
.detail_top .thum{width: 600px; height: 600px; border-radius: 10px; border: 1px solid #ddd; overflow: hidden}
.detail_top .thum img{width: 100%; height: 100%;object-fit: cover; }




.detail_top_info{flex:1; }
.detail_top_info .sub_title{position: relative; margin: 0}
.detail_top_info .sub_title h4{font-size: 16px;}
.detail_top_info a.pdf_down{position: absolute; margin: 0; right: 0; top: 0}

.detail_top_in{margin-top: 30px; padding-top: 30px; border-top: 1px solid #ddd}

.detail_top_in h4{font-size: 18px; font-weight: 600; color: #00A0DF}
.detail_top_in ul.dot{margin-top: 20px;}

.detail_top_in .in_box + .in_box{margin-top: 30px}


.product_icon_flex{display: flex; margin-top: 20px; gap:15px;
flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;}
.product_icon_flex li{display: inline-flex; padding: 12px 20px; border: 1px solid #ddd; border-radius: 50px; font-size: 16px; word-break: keep-all;
align-items: center; gap:10px}




.detail_bottom .in_box + .in_box{margin-top: 100px}

.detail_bottom h4{font-size: 24px; margin-bottom: 30px}
.detail_bottom .tlb table + table{margin-top: 30px}





.flex_img_txt{display: flex; gap:100px; }
.flex_img_txt .thum{width: 700px; border-radius: 10px; overflow: hidden}
.flex_img_txt .thum img{max-width: 100%; display: block}

.flex_img_txt .pu_box_list{flex:1}







/*esg*/

.esg_section{  }

.top_sec_common .bg_box .bg {
  transition: opacity 0.3s ease;
}
.sec.sec01 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.top_sec_common .txt_box.is-break {
  position: absolute !important;
  top: 0;
  bottom: 80px; /* 적절히 조절 */
}

.top_sec_common{}

.esg_section .inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    padding: 0
}


.top_sec_common .txt_box {
  position: sticky;
  left: 0;
  top: 50%;
  width: 100%;
  z-index: 13;
  transition-duration: .8s
}
.top_sec_common .txt_box .con_title {
  position: relative;
  overflow: hidden;
}

.top_sec_common .txt_box.is-break {
  position: absolute;
}
.top_sec_common .bg_box {
  position: relative;
}




.top_sec_common .bg_box .bg {
  width: 100%;
  margin: 50px auto 0;
  height: 80vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom right;
  max-width: 1280px;
}

.top_sec_common .bg_box .bg.esg01{
	background-image: url(../img/sub/esg01.png);
}
.top_sec_common .bg_box .bg.esg02{
	background-image: url(../img/sub/esg02.png);
}
.top_sec_common .bg_box .bg.esg03{
	background-image: url(../img/sub/esg03.png);
}




.esg_section .con_title h3 {

  color: #222;
  font-size: 40px; line-height: 140%; word-break: keep-all; margin-bottom: 20px;
  font-weight: 700
}

.esg_section .con_title p {
  font-size: 20px; line-height: 140%; word-break: keep-all; font-weight: 400; color: #222
}



.esg_section .title {
  position: absolute;
  left: 7rem;
  top: 0;
  z-index: 2;
}

.esg_section .title h2 {

  color: #00A0DF;
  font-size: 18px; font-weight: 700; word-break: keep-all
}



.bu_app_slide .new_box{border-radius: 10px; background: #FAFAFA; padding: 40px; position: relative;
display: flex;
    justify-content: flex-start;
    align-items: flex-end; display: flex; transition-duration: .8s; height: 30vh}
.bu_app_slide .new_box i{fill:#555; position: absolute; right: 40px; top: 40px}
.bu_app_slide .new_box .txt{}
.bu_app_slide .new_box .txt h4{font-size: 20px; font-weight: 700; word-break: keep-all; transition-duration: .8s; }
.bu_app_slide .new_box .txt p{margin-top: 10px; color: #222; font-size: 16px; line-height: 140%; word-break: keep-all; font-weight: 400; transition-duration: .8s; }


.bu_app_slide .new_box:hover{background: #00A0DF}
.bu_app_slide .new_box:hover i path{fill:#fff}

.bu_app_slide .new_box:hover .txt h4,
.bu_app_slide .new_box:hover .txt p{color: #fff}


.esg_last_flex{display: flex; gap:30px}
.esg_last_flex .box{flex:1;; border: 1px solid #ddd; border-radius: 10px; transition-duration: .8s}
.esg_last_flex .box:hover{
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
	border: 2px solid #00A0DF;
}

.esg_last_flex .box .thum img{display: block; width: 100%}
.esg_last_flex .box .txt{padding: 30px 28px}
.esg_last_flex .box .txt h4{font-size: 20px; word-break: keep-all; line-height: 140%; font-weight: 700; color: #222}
.esg_last_flex .box .txt p{margin-top: 10px; color: #222; font-size: 16px; line-height: 140%; word-break: keep-all; font-weight: 400; transition-duration: .8s; }