@import url('https://use.fontawesome.com/releases/v5.15.2/css/all.css');
@import url('https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&family=Orbitron:wght@400..900&display=swap');
@charset "utf-8";

/* Reset CSS  */
* {font-family:"Pretendard", 'Noto Sans SC', 'Roboto',sans-serif;}
html { height: 100%; overflow-y:scroll; font-size:16px; scroll-behavior: smooth;}
body {font-size: 14px; color:#23262e; position: relative; height: 100%;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
, input, textarea, blockquote, th, td, p, header, section, footer, nav, small, span, a, img, fieldset, legend { margin: 0px; padding:0px;  list-style:none;  font-family:"Pretendard",'Noto Sans SC', "Noto Sans KR", sans-serif; border: 0;}
fieldset{ border: 0px; margin: 0 auto;}
a{font-style:normal; text-decoration:none; color:inherit;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 1.6;}
td strong {font-weight: 100; vertical-align: bottom;}
a:hover{text-decoration:none;}
/* ul:after{content:""; display:block; clear:both;} */
small {font-size: inherit;}
img {vertical-align: top;}
address {font-size: inherit;}
h1,h2,h3,h4,h5,h6 {font-weight: inherit; font-size: inherit;}
/* .container {max-width: 1420px; width:100%; margin: 0 auto; position: relative; box-sizing: border-box;}
.container:after {content: ""; display: none; clear: both;} */
.head-container {width: 100%; max-width:1824px; margin: 0 auto;}
/* .main-container {max-width: calc(1500px + 8%);width:100%; margin: 0 auto; position: relative; box-sizing: border-box; padding:0 4%;}
.main-container:after {content: ""; display: none; clear: both;}
.txt-container {max-width: calc(1500px + 8%); width:100%; margin: 0 auto; box-sizing: border-box; padding:0 4%;}
.sub-container {max-width: calc(1400px + 8%); width:100%; margin: 0 auto; position: relative; box-sizing: border-box; padding: 0 4%;} */

/*bbs*/
#container_title{display:none;}
#bo_v_table{display:none;}
#bo_vc_w{border-bottom:0;}
#bo_vc{background:none;}
#bo_gall {width: 1400px!important; margin: 0 auto ;}
#bo_gall , #bo_w , #bo_v , #bo_list{font-size:15px;}
#bo_v_share .btn{width: auto !important;}
#element { pointer-events: none; }
.inner_wrap { position: relative; width: 100%; max-width: 1500px; height: 100%; margin: 0 auto; }
.popup_class { overflow: hidden; height: 100%; }

/*formmail*/
#select-form{border:1px solid #ddd; width:100%; padding:15px 10px; font-size:15px}
.fields{position:relative; margin-top:30px; border-top:1px solid #ddd;}
.fields li{display:flex;border-bottom:1px solid #ddd;  align-items:center; padding:15px;}
.fields .lbl{width:200px;font-size:15px; cursor:text}
.fields .desc{width:100%;}
.fields .desc p {line-height: 150%;}
.fields .input{border:1px solid #ddd; padding:15px 10px; box-sizing:border-box; width:100%}
.fields .input.full{width:100%}

/* html 스크롤 막음 */
.hidden-scroll{overflow: hidden; height: 100%; margin-right: 8px;}
/* #wrapper {overflow: hidden;} */ /*sticky때문에 주석처리 스크롤이 생긴다면 콘텐츠를 수정하는게 좋음*/
/* 공통 컬러 */
:root {
  --main-color: #252F6F;
  --sub-color: #23262e;
  --back-color: #636363;
}
.cover {width: 100%!important; height: 100%; position:absolute; top:0; left:0; z-index:999; background:transparent!important;}
.kr {font-family: 'Pretendard'!important;}
.flex {display: flex; flex-wrap:wrap;}

/* #wrapper {overflow: hidden;} */

/* 로그인/회원가입 시작 */
#wrapper #login_container {max-width: 1400px; margin: 120px auto; display: flex; align-items: center;}
.login_tit {font-family: 'Roboto'; font-size: 25px; font-weight: 700; color: #ababab; margin-bottom: 21px;}
#register_container {margin: 120px auto; display: flex; align-items: center; max-width: 1400px;}
/* 로그인/회원가입 끝 */

/* 헤더 시작 */
#header {height: 90px;}
#header .head-container {position: relative; height: 100%;}
#header .head-container > h1 {position: absolute; top:19px; left:13px;}
#header .head-container .gnb_box {position: absolute; top:32px; left:50%; margin-left: -462px;}
#header .head-container .gnb_box .gnb {display: flex;}
#header .head-container .gnb_box .gnb > li {position: relative; text-align: center; transition: all 0.3s;}
#header .head-container .gnb_box .gnb > li:nth-child(3) {margin-top:3px;}
#header .head-container .gnb_box .gnb > li > a {display: block; font-size: 20px; font-weight: 500; color: #231F20; padding: 0 40px; transition: all 0.3s;}

 .util_wrap {position: absolute; top:27px; right:0;}
.util_wrap .gnb_util {display: flex; flex-wrap: wrap; gap:9px;}
.util_wrap .gnb_util li {}
.util_wrap .gnb_util li a {display: block; font-size: 14px; color:#231F20; font-weight: 700; padding: 10px 26px;  border-radius: 50px; transition: all 0.3s; border: 1px solid #dfdfdf;  border-radius: 50px;}
 .util_wrap .gnb_util .lang {}
 .util_wrap .gnb_util .lang a {display: block; width: 105px; height: 36px; background: url('../img/lang_bg.png') no-repeat center center / cover; padding: 9px 0 0 50px;}

.util_wrap .gnb_util .log:hover a {background:#252F6F; border-radius: 50px; color: #fff; border: 1px solid #252F6F;}
.util_wrap .gnb_util .lang:hover { }
.util_wrap .gnb_util .lang:hover a {background: url('../img/lang_bg_w.png') no-repeat center center / cover; color: #fff;}

.gnb .sub {overflow: hidden; position: absolute; top: 65px; width: 100%; height: 0; transition: all 0.3s; left: 50%; transform: translate(-50%, 0); z-index: 999;}
.gnb .sub li { width: 100%; }
.gnb .sub > li > a { display: block; color: var(--back-color); font-size: 16px; text-align: center; padding: 12px 18px; font-weight: 500;}
.gnb .sub > li > a:hover {color: var(--main-color);}

.util_wrap .lang_wrap {z-index: 9999; cursor: pointer;}
.util_wrap .lang_wrap .lang_menu {display: none;}
.util_wrap .lang_wrap .lang_menu a {display: block; text-align: center; font-size: 16px; padding: 10px 0; background: #fff;}
.active-border {border-bottom: 3px solid #231F20;}

.m_lang_wrap {display: flex; align-items: center;}
.m_lang_wrap a {font-size: 16px; display: block; padding: 0 12px;}
.m_lang_wrap a:first-child {padding: 0 12px 0 0; border-right: 1px solid rgba(0,0,0,0.3);}

#nav_btn{ display: none; cursor: pointer; position: absolute; top: 33px; right: 0;}
#nav_btn span{display: block; width: 40px; height: 2px; background: var(--main-color); margin-bottom:9px;}
#nav_btn span:last-of-type { margin-bottom: 0; }

#sitemap {position: fixed; top: 0; right: -100%; background: #fff; z-index: 999999; padding: 100px; width: 100%; }

.close {cursor:pointer; position: absolute; top: 55px; right: 30px;}
#sitemap .close span {display: block; width: 40px; height: 2px; background-color: var(--main-color);}
#sitemap .close .line02 {transform: rotate(-45deg); margin-top: -2px;}
#sitemap .close .line01 {transform: rotate(45deg);}

#sitemap > .util_wrap {position: static!important; margin-bottom: 12px;}

#sitemap .side_gnb {padding-top: 10px; display: flex; flex-wrap: wrap;}
#sitemap .side_gnb > li {margin-bottom: 20px; width: 50%;}
#sitemap .side_gnb > li > a {font-size: 22px; font-weight: 500; color:var(--main-color); margin-bottom: 12px; display: block;}
#sitemap .side_gnb > li > ul > li > a {display: block; font-size: 16px; margin-bottom: 6px; color: var(--back-color);}

#header::after { content: ""; display: block; overflow: hidden; position: absolute; left: 0; top: 90px; width: 100%; height: 0; background: #fff; z-index: 99; transition: all 0.3s; transition-delay: 0.2s; }

#header:hover::after { height: 250px; transition: height 0.3s; border-top: 1px solid #eaeaea;}
#header:hover .sub { height: 250px; transition: height 0.4s; z-index: 999;}
/* 헤더 끝 */

/* 퀵 버튼 시작 */
#wrapper .quick_btn_wrap {z-index:9999; position: fixed; top: 33%; right: -7%; width: 375px; height: 375px; border-radius: 375px; border: 2px dashed var(--main-color);}
#wrapper .quick_btn_box {position: relative; width: 358px; height: 358px; border-radius: 358px; border: 1px solid #c2c2c2; margin: 8px; background: url("../img/quick_bg.png") no-repeat left center rgba(255,255,255,0.3);}
#wrapper .quick_btn {width: 100%; height: 100%;}
#wrapper .quick_btn li {color: var(--main-color); font-size: 20px; font-weight: 700; position: absolute;}
#wrapper .quick_btn li:first-child {top: 66px; left: 81px;}
#wrapper .quick_btn li:nth-child(2) {top: 167px; left: 28px;}
#wrapper .quick_btn li:nth-child(3) {bottom: 66px; left: 81px;}
#wrapper .quick_btn img {position: absolute; top: 50%; left: 50%; margin-top: -64px; margin-left: -53px;}

#wrapper .main_circle01 {position: absolute; bottom: -30%; z-index: 999;}

/* 퀵 버튼 끝 */

/* index 메인 이미지 시작 */
#main_wrap {width: 100%; margin: 0 auto;}
#main_wrap #section01 {position: relative; overflow: hidden; margin-bottom: 108px;}
#main_wrap #section01 .swiper {width:100%; height: 100%; }
#main_wrap #section01 .swiper-slide {width: 100%; height: 90vh; }
#main_wrap #section01 .m_visual01 {background: url("../img/main_img01.png") no-repeat center center / cover;}
#main_wrap #section01 .m_visual02 {background: url("../img/main_img02.png") no-repeat center center / cover;}
#main_wrap #section01 .m_visual03 {background: url("../img/main_img03.png") no-repeat center center / cover;}


#main_wrap #section01 .swiper-pagination {top: 50%; left: 96px; display: grid; gap: 40px; margin-top: -60px; z-index: 999;}
.swiper-pagination-bullet {width: 13px; height: 13px; background: #252f6f5e; opacity: 1;}
.swiper-pagination-bullet-active {background: #fff; }

#main_wrap #section01 .breadcrumb{position: absolute;left: 48.5%;  bottom: 3%; z-index: 1;}
#main_wrap #section01 .breadcrumb li{float:left;margin-right:5px;}
#main_wrap #section01 .breadcrumb li span{width: 12px;height: 12px;display: block;border: 2px solid #fff;cursor: pointer;border-radius: 50px;}
#main_wrap #section01 .breadcrumb li.on span{background: #fff;}

#main_wrap #section01 .swiper-slide:before {content:""; position: absolute; top: 0; left: 0; width: 100%; height:100%;
background: linear-gradient(180deg, rgba(0 57 95 / 67%) 0.5%, rgba(0, 68, 113, 0.00) 100%); z-index: 0;}
#main_wrap #section01 .swiper-slide .txt_containter {display: flex;  height: 100%;}
#main_wrap #section01 .swiper-slide .txt_wrap {padding: 130px 210px; z-index: 1; display: flex; flex-direction: column;}
#main_wrap #section01 .swiper-slide .main_article {font-size: 26px; color: #fff; margin-bottom: 28px;}
#main_wrap #section01 .swiper-slide .main_title {font-size: 68px;  width: 80%; font-weight: 700; color:#fff; line-height: 130%; margin-bottom: 48px;}
#main_wrap #section01 .swiper-slide .main_title br {display: none;}

#main_wrap #section01 .main_btn {border-top: 1px solid #ffffff85;}
#main_wrap #section01 .main_btn .main_btn_box {position:relative; padding-top: 26px;  display: flex; align-items: center; gap:2%;  width: 150px;}
#main_wrap #section01 .main_btn .main_btn_box .view {display: block; font-size: 20px;  font-weight: 500; color:#fff; margin-right:20px;}
#main_wrap #section01 .main_btn .main_btn_box img {}
#main_wrap #section01 .main_btn:hover {}
#main_wrap #section01 .main_btn:hover a {}

  #main_wrap #section01 .scroll_down {position: absolute; bottom: -133px; left: 50%; transform: translateX(-50%); z-index: 500; display: flex; flex-direction: column; align-items: center; gap:10px; width: 266px; height: 266px; border-radius: 266px;  }
  #main_wrap #section01 .scroll_down .mouse_icon {width: 25px; height: 55px; background:url('../img/scroll_down_img.png') no-repeat center center / cover; margin-top: 26px;}
  #main_wrap #section01 .scroll_down .mouse_icon .mouse_dot {position: absolute; left: 50%; top: 14%; width: 3px; height: 7px; border-radius: 100px; background-color: #fff;
    transform: translate(-50%, 0); animation: mouseMove 1s ease infinite;}
    @keyframes mouseMove {
    0% {
      top: 14%;
      opacity: 100%;
    }
    100%{
      top: 15%;
      opacity: 0%;
    }
  }
  #main_wrap #section01 .scroll_down .scroll_txt {color: #fff;  font-size: 18px; font-weight: 500; margin-top: 4px;}

/* index 메인 이미지 끝 */

/* index section02 시작 */
#main_wrap #section02 {width: 100%; position:relative; margin-bottom: 169px;}
#main_wrap #section02 .solution_wrap {max-width: 1400px; margin: 0 auto;}
#main_wrap .section_txt_wrap {max-width: 1400px; display: flex; flex-wrap:wrap; margin: 0 auto;}
#main_wrap .section_txt_wrap .section_title_wrap {margin-right: 32px;}
#main_wrap .section_txt_wrap .section_article {font-size: 16px; font-weight: 700; color:var(--main-color);}
#main_wrap .section_txt_wrap .section_title { font-size: 58px; font-weight: 700; color:var(--main-color);}
#main_wrap .section_txt_wrap .section_desc {font-size: 16px; line-height: 26px; font-weight: 400; color:var(--back-color); display: flex; align-items: flex-end; padding-bottom: 0.6%;}

#main_wrap #section02 .solution_con_wrap {display: flex; flex-wrap:wrap; margin-top: 86px; justify-content: space-between;}
#main_wrap #section02 .solution_con {width: 33%; margin-bottom: 7%; display: flex; flex-direction: column; align-items: center; text-align: center;}
#main_wrap #section02 .solution_con:last-child {border-right: 0;}
#main_wrap #section02 .solution_con img {margin-bottom: 33px;}
#main_wrap #section02 .solution_con .solution_title {font-size: 28px; font-weight: 700; margin-bottom: 21px; color:var(--main-color);}
#main_wrap #section02 .solution_con .solution_desc {font-size: 17px; line-height: 160%; color:var(--back-color);}
#main_wrap #section02 .main_circle02 {position: absolute; bottom: -18%; right: -2.6%;}

#main_wrap #section02 .more_btn {text-align: center; position: relative; width:400px; height: 50px; margin: 0 auto; background: #252f6f; border-radius: 10px;}
#main_wrap #section02 .more_btn p {line-height: 50px; color: #fff; font-size: 16px;}
/* index section02 끝 */

/* index section03 시작 */

#main_wrap #section03 {width: 1632px; margin: 0 auto 210px auto; }
#main_wrap #section03 .section_con_wrap {width: 100%; position: relative;}
/* #main_wrap #section03 .pro_con {position: relative; margin-top: 72px; height: 803px;}
#main_wrap #section03 .pro_class {position:absolute; top: 0; right: 0; display: flex; flex-wrap:wrap;}
#main_wrap #section03 .pro_class li {background:#fff; z-index: 9999; cursor: pointer;}
#main_wrap #section03 .pro_class li a {display: block; padding: 10px 50px; font-size: 20px; font-weight: 500; color:var(--main-color);}
#main_wrap #section03 .pro_class li.on {border-bottom: 4px solid #252F6F;}
#main_wrap #section03 .pro_aside {position: absolute; bottom:0; left:0; z-index:1; width: 42.8%; height: 803px; box-shadow: 10px 10px 8px 0px rgba(0, 0, 0, 0.40);
                                  background:url('../img/main_pro_01.png') no-repeat center center; padding:115px; color: #fff; border-radius: 20px;}
#main_wrap #section03 .pro_aside .pro_title {font-family:'Roboto'; font-size: 35px; font-weight: 700; margin-bottom: 61px;}
#main_wrap #section03 .pro_aside .pro_article {font-size: 18px; font-weight: 400; line-height: 28px; margin-bottom: 94px;}
#main_wrap #section03 .pro_aside .pro_btn {position: relative; width: 185px; display: flex; justify-content: space-between; border-bottom: 1px solid #fff; padding: 8.5px 0;}
#main_wrap #section03 .pro_aside .pro_btn p {font-family:'Roboto'; font-size: 20px; font-weight: 500;}

#main_wrap #section03 .pro_img_wrap {height: 713px; position: absolute; bottom: 0; right: 0; overflow: hidden;}
#main_wrap #section03 .pro_img_desc {display: flex; flex-wrap:wrap; padding: 10px 0;}
#main_wrap #section03 .pro_img_desc p {font-size: 18px; padding: 12px 0; margin-left: 40px; color:var(--back-color);}
#main_wrap #section03 .pro_img_desc p:first-child {border-bottom: 1px solid #d9d9d9; width: 100%;}
#main_wrap #section03 .swiper {width: 934px; height: 603px; position:relative;}
#main_wrap #section03 .swiper-button-prev, .swiper-button-next {width: 50px; height: 50px; z-index: 999999;}
#main_wrap #section03 .swiper-button-prev {right: 65px;}
#main_wrap #section03 .swiper-button-next {right: 11px;}

#main_wrap #section03 .pro_con {display: none;}
#main_wrap #section03 .pro_con_on {display: block;} */
.medicine_img_wrap {display:flex; gap: 28px; max-width: 1400px; margin: 40px auto 0;}
.medicine_img_wrap .img_wide {width: 686px; height: 700px; display: flex; flex-wrap:wrap;
    background:url('../img/medicine_img_wide_bg.png') no-repeat center center/cover; border-radius: 10px;}

.medicine_img_wrap .img_short_wrap {display: flex; flex-direction: column; justify-content: space-between;}
.medicine_img_wrap .img_short {width: 686px; height:336px; border-radius: 10px;}
.medicine_img_wrap .img_short:first-child {background: url('../img/medicine_img_short01_bg.png') no-repeat center center/cover;}
.medicine_img_wrap .img_short:last-child {background: url('../img/medicine_img_short02_bg.png') no-repeat center center/cover;}

.medicine_img_wrap .img_wide .txt_wrap {padding: 56px;}
.medicine_img_wrap .img_wide .txt_wrap .title {font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 18px;}
.medicine_img_wrap .img_wide .txt_wrap .article {color: #fff; font-size:19px; line-height: 175%; margin-bottom: 45px;}
.medicine_img_wrap .img_wide .txt_wrap .btn {padding: 0; position: relative; display: flex; flex-wrap:wrap; align-items: center; width: 125px; justify-content: space-between; border-bottom: 1px solid #fff;}
.medicine_img_wrap .img_wide .txt_wrap .btn p {font-size: 16px; margin-bottom:0; color: #fff; font-weight:600;}

.medicine_img_wrap .img_short .txt_wrap {padding: 50px;}
.medicine_img_wrap .img_short .txt_wrap .title {font-size:28px; font-weight:700; margin-bottom:15px;}
.medicine_img_wrap .img_short .txt_wrap .article {font-size: 19px; color: #585858; margin-bottom: 37px; line-height: 175%;}
.medicine_img_wrap .img_short .txt_wrap .btn {padding: 0; position: relative; display: flex; flex-wrap:wrap; align-items: center; width: 125px; justify-content: space-between; border-bottom: 1px solid #585858;}
.medicine_img_wrap .img_short .txt_wrap .btn p {font-size: 16px; margin-bottom:0; color: #585858; font-weight:600;}

/* index section03 끝 */

/* index section05 시작 */
#main_wrap #section05 {margin: 0 auto 192px auto; max-width: 1400px;}
#main_wrap #section05 .section_txt_wrap {margin-bottom: 73px;}
#main_wrap #section05 .project_con_wrap {display: flex; flex-wrap:wrap; justify-content: space-between;}
#main_wrap #section05 .project_con {position: relative; width: 33%; height: 100px; border-radius: 50px;
                                   background: #f5f5f5; display: flex; align-items: center; padding: 0 5%; justify-content: space-between;}
#main_wrap #section05 .project_con a {font-size: 22px; font-weight: 700; color: var(--sub-color);}
#main_wrap #section05 .project_con:hover {background:#252f6f;}
#main_wrap #section05 .project_con:hover img {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(168deg) brightness(105%) contrast(105%); transition: 0.5s;}
#main_wrap #section05 .project_con:hover a {color: #fff; transition: 0.5s;}

/* index section05 끝 */



/* tail 시작 */
#footer {width: 100%; background: #f5f5f5; padding: 50px 0;}
#footer .ft_1400 {max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between;}
#footer .ft_txt {width: 40%;}
#footer .ft_txt img {margin-bottom: 33px;}
#footer .ft_link {display: flex; gap:39px; margin-bottom: 33px;}
#footer .ft_link li {font-size: 18px; font-weight: 700;}
#footer .ft_link li a{color: #636363;}
#footer .ft_info { font-size: 15px; font-weight: 400; color:#686868; line-height: 26px; margin-bottom: 18px;}
#footer .ft_info ul {display: flex; flex-wrap: wrap;}
#footer .ft_info li {margin-right: 13px;}
#footer .ft_info li:nth-child(8) {width: 100%;}
#footer .copy {font-size: 13px; font-weight: 400; color: #686868;}

/* tail 끝 */


/************** s u b **************/
.sub84 {width: 84%; margin: 0 auto;}

#s_top{position: relative; height: 500px; }
#s_top.bg01{background: url(../img/sub_top01.png) no-repeat center center / cover;}
#s_top.bg02{background: url(../img/sub_top02.png) no-repeat center center / cover;}
#s_top.bg03{background: url(../img/sub_top03.png) no-repeat center center / cover;}
#s_top.bg04{background: url(../img/sub_top04.png) no-repeat center center / cover;}
#s_top.bg05{background: url(../img/sub_top05.png) no-repeat center center / cover;}
#s_top > h2{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight:500; color:#fff; text-transform: uppercase;}
#s_top.bg02 > h2 { display: none; }

#path {position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
#path .home_ico {display: block; width: 23px; height: 20px; background: url("../img/ico_home.png");}
#path .home { padding: 20px; border-left: 1px solid #fff; border-right: 1px solid #fff; }
#path .main { width: 20%; padding: 0 30px; }
#path .sub { width: 20%; padding: 0 30px; }
#path .inner_wrap { display: flex; height: 60px; padding: 0 50px; }
#path .sbm{ position: relative; color: #fff; }
#path .sbm::after { content: ""; display: block; position: absolute; right: -1px; top: 50%; width: 1px; height: 100%; background: #fff; transform: translate(0, -50%); }
#path .sbm h2{ position: relative; line-height: 60px; font-size:16px; font-weight:300; cursor: pointer;}
#path .sbm h2::after { content: ""; display: block; position: absolute; right: 0; top: 50%; width: 14px; height: 8px; background: url("../img/ico_down.png"); transform: translate(0, -50%); }
#path .lnb{display: none; position: absolute; top:56px; left:-1px; width:100%; background: #fff;border:1px solid #ddd; z-index: 99; padding:10px 0;}
#path .lnb li a{display: block; color: #888; font-size:16px; padding:5px 24px;}
#path .lnb li a:hover{color: #f2666e; font-weight: 500;}

#path .asd { width: 30%; padding: 0 30px; }
#path .asd h2{ position: relative; line-height: 60px; font-size:16px; font-weight:300; cursor: pointer;}
#path .asd h2::after { content: ""; display: block; position: absolute; right: 0; top: 50%; width: 14px; height: 8px; background: url("../img/ico_down.png"); transform: translate(0, -50%); }
#path .asd{ position: relative; color: #fff; }
#path .asd::after { content: ""; display: block; position: absolute; right: -1px; top: 50%; width: 1px; height: 50%; background: #fff; transform: translate(0, -50%); opacity: 0.5; }

#sub section { position: relative; width: 100%; height: 100%; }
#sub h2 { margin-bottom: 100px; font-size: 60px; font-weight: 700; text-align: center; }

#sub_header {background: url('../img/sub_top_bg.png') no-repeat 100% 100% / cover; margin-bottom: 67px;}
#sub_header p {color: var(--sub-color);}

#sub_header .sub_header_txt_wrap {width: 100%; margin: 0 auto; padding-top: 40px; }
#sub_header .sub_header_txt_wrap .sub_header_txt {max-width: 1500px; margin: 0 auto 37px;}
#sub_header .sub_header_txt_wrap .sub_header_txt .menu { font-size: 25px; font-weight: 700; color: #ababab; margin-bottom: 5px;}
#sub_header .sub_header_txt_wrap .sub_header_txt .sub_header_tit {font-size: 38px; font-weight: 700; line-height: 50px;}

#menu_tab {width: 84%; height: 75px; margin: 0 auto 32px auto; position: relative; display: flex; justify-content: center;}
#sub02 #menu_tab {margin: 0 auto 109px auto;}
#menu_tab .btm_bar {width: 100%; position: absolute; bottom: 0; height: 3px; background: #f1f1f1;}
#menu_tab ul {position: absolute; bottom: 0; display: flex; flex-wrap:wrap;}
#menu_tab ul li {}
#menu_tab ul li a {display: block; padding: 24px 80px; font-size: 20px; font-weight: 500; color: #999;}
#menu_tab ul li .on {border-bottom: 3px solid #252F6F; color: var(--main-color);}


/************** s u b 타이틀 공통서식 **************/
.sec_title {font-size: 40px; font-weight: 700; word-break:keep-all;}
.sec_desc {font-size: 21px; line-height: 35px; font-weight: 500; color: var(--back-color); margin-bottom: 4px; word-break:keep-all;}
.con_title {display: flex; align-items: center; word-break:keep-all;}
.con_title > img {margin-right: 12px; margin-top:3px;}
.con_title > p { font-size: 24px; font-weight: 700; color: var(--main-color); word-break:keep-all;}
.con_desc {font-size: 18px; line-height: 28px; color: var(--back-color); word-break:keep-all;}
.sec_title span {color: var(--main-color);}
.app_tit span {font-size: 16px; font-weight: 500;}
.app_tit_wrap .app_tit {color:#252F6F; word-break:keep-all;}

/************** s u b 0 1 0 1 **************/
#sub0101 .sub01_con01 {width: 100%; margin: 0 auto 120px auto; padding-top: 35px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#sub0101 .sub01_con01 img:first-child {margin-bottom: 48px;}
#sub0101 .sub01_con01 .vision_title {font-size: 30px; font-weight: 700; line-height: 42px; margin-bottom: 27px;}
.col_bar {width: 1px; height: 50px; background: #d9d9d9; margin-bottom: 26px;}
#sub0101 .sub01_con01 .vision_desc {font-size: 18px; line-height: 30px; margin-bottom: 20px; color: var(--back-color); word-break: keep-all;}
#sub0101 .sub01_con01 .vision_desc:nth-of-type(4) {margin-bottom: 68px;}
#sub0101 .sub01_con01 .vision_desc span {color: var(--main-color); font-weight: 500;}

#sub0101 .sub01_con02 {max-width: 1400px; margin: 0 auto 160px auto;}
#sub0101 .sub01_con02 .vision_wrap {display: flex; flex-wrap: wrap;}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap {margin-left: 83px;}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box {position: relative; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-bottom: 80px;}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box .vision_num :after {position: absolute; content: ''; width: 10px; height: 10px; background: #f0f0f0;
                                                                                      bottom: -30%; left: 9%; border-radius: 50px;
}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box .vision_num :before {position: absolute; content: ''; width: 10px; height: 10px; background: #f0f0f0;
                                                                                      top: -30%; left: 9%; border-radius: 50px;
}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box:last-child .vision_num :after {content: none;}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box:first-child .vision_num :before {content: none;}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box:hover .vision_num {background: var(--main-color); transition: 0.5s ease-out;}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box:hover .vision_num p {color: #fff; transition: 0.5s ease-out;}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box:hover .vision_txt .tit {color: var(--main-color); transition: 0.5s ease-out;}

#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box .vision_num {width: 100px; height: 100px; background: #f0f0f0; border-radius: 30px; display: flex;
                                                                                  justify-content : center; align-items: center; box-shadow : 2px 5px 10px 0px rgba(0,0,0,0.12);
}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box .vision_num p {font-size: 30px; font-weight: 700; color: var(--main-color);}
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box .vision_txt .tit {font-size: 22px; font-weight: 700; margin-bottom: 16px; }
#sub0101 .sub01_con02 .vision_wrap .vision_txt_wrap .vision_txt_box .vision_txt .article {font-size: 16px; color:var(--back-color); line-height: 26px;}

#sub0101 .sub01_con03 {max-width: 1400px; margin: 0 auto 160px auto;}
#sub0101 .sub01_con03 .flip_wrap {display: flex; flex-wrap: wrap; justify-content: space-between;}
#sub0101 .sub01_con03 .flip_wrap .flip {width: 430px; height: 540px; perspective: 1100px; }

#sub0101 .sub01_con03 .card {width: 100%; height: 100%; position: relative; transition: .4s; transform-style: preserve-3d;}
#sub0101 .sub01_con03 .front {position: relative;}
#sub0101 .sub01_con03 .front:before {content: ''; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); border-radius: 30px;}
#sub0101 .sub01_con03 .front,#sub0101 .sub01_con03 .back {position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 30px; padding: 30px 34px;
display: flex; flex-direction: column; justify-content: space-between;}
#sub0101 .sub01_con03 .flip_wrap .flip_01 .card .front {background:url('../img/sub0101_flip01_front.png');}
#sub0101 .sub01_con03 .flip_wrap .flip_02 .card .front {background:url('../img/sub0101_flip02_front.png');}
#sub0101 .sub01_con03 .flip_wrap .flip_03 .card .front {background:url('../img/sub0101_flip03_front.png');}
#sub0101 .sub01_con03 .flip_wrap .flip .title_wrap {color: #fff; font-weight: 700; z-index: 1;}
#sub0101 .sub01_con03 .flip_wrap .flip .title_wrap .cata {font-size: 16px; margin-bottom: 10px;}
#sub0101 .sub01_con03 .flip_wrap .flip .title_wrap .title {font-size: 28px;}
#sub0101 .sub01_con03 .flip_wrap .flip .title_wrap .title br {display: none;}
#sub0101 .sub01_con03 .flip_wrap .flip .back {transform: rotateY(180deg);}
#sub0101 .sub01_con03 .flip_wrap .flip_01 .back {background: #252F6F;}
#sub0101 .sub01_con03 .flip_wrap .flip_02 .back {background: #00988F;}
#sub0101 .sub01_con03 .flip_wrap .flip_03 .back {background: #C4D700;}
#sub0101 .sub01_con03 .flip_wrap .flip .back ul li {font-size: 18px; font-weight: 500; color: #fff; margin-bottom: 10px;}
#sub0101 .sub01_con03 .flip:hover .card {transform: rotateY(180deg); transition: 0.5s ease-out;}




#sub0101 .sub01_con04 {max-width: 1400px; margin: 0 auto;}
#sub0101 .con_title_wrap {margin-bottom: 70px;}
#sub0101 .sub01_con04 .ci_con {margin-bottom: 129px;}
#sub0101 .sub01_con04 .ci_txt_wrap {margin-bottom: 60px;}
#sub0101 .sub01_con04 .ci_txt {display: flex; flex-wrap: wrap; margin-bottom: 35px; padding-bottom: 35px; border-bottom: 1px dashed #a9a9a9;}
#sub0101 .sub01_con04 .ci_txt_left {margin-right: 53px; padding-top: 8px;}
#sub0101 .sub01_con04 .ci_txt_right .flex {margin-bottom: 19px; align-items: center;}
#sub0101 .sub01_con04 .ci_title {font-size: 24px; font-weight: 500; margin-right: 40px;}
#sub0101 .sub01_con04 .ci_article {font-size: 20px;}
#sub0101 .sub01_con04 .ci_txt .ci_article {font-weight: 500;}
#sub0101 .sub01_con04 .ci_txt:nth-child(2) .ci_article {color: var(--main-color);}
#sub0101 .sub01_con04 .ci_txt:last-child .ci_article {color: #C4D700;}
#sub0101 .sub01_con04 .ci_desc {font-size: 17px; color: var(--back-color);}
#sub0101 .sub0101_ci_img {display: flex; justify-content: center;}

/************** s u b 0 1 0 2 **************/
#sub0102 {max-width: 1400px; margin: 0 auto;}
#sub0102 .sub01_con01 {display: flex; flex-wrap: wrap; position: relative; height: auto;}
#sub0102 .history_fix {width: 50%; height:1000px; background: url('../img/sub0102_bg.png') no-repeat center center; padding-top: 222px; position: sticky; top: 0; left: 0; align-self: flex-start;}
#sub0102 .history_fix .his_article {font-size: 22px; font-weight: 500;}
#sub0102 .history_fix .his_title {font-size: 68px; font-weight: 700; margin-bottom: 38px;}
#sub0102 .history_fix .his_desc {font-size: 18px; color: var(--back-color); line-height: 28px;}
#sub0102 .history_move {width: 50%;}
#sub0102 .history_move .history_con {display: flex; flex-wrap: wrap; gap: 60px; padding-bottom: 28px; border-bottom: 1px dashed #aeaeae; margin-bottom: 35px;}
#sub0102 .history_move .history_con .year p {font-size: 28px; font-weight: 700;}
#sub0102 .history_move .history_con ul {padding-top: 3px;}
#sub0102 .history_move .history_con ul li {font-size: 18px; margin-bottom: 15px; line-height: 26px;}
#sub0102 .con_title, #sub0103 .con_title {margin-bottom: 30px;}
/************** s u b 0 1 0 3 **************/
#sub0103 {max-width: 1400px; margin: 0 auto 80px auto;}
#sub0103 #sub_sec > img {border-radius: 50px;}
/************** s u b 0 1 0 4 **************/
#sub0104 {max-width: 1400px; margin: 0 auto 120px auto; position:relative;}
#sub0104 .con01 {border-bottom: 1px dashed #aeaeae; margin-bottom: 50px;}

/* 갤러리 스타일 */
.gallery {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.gallery img {
    width: 168px;
    height: 237px;
    margin: 10px;
    cursor: pointer;
}

/* 모달(팝업)창 스타일 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    padding-top: 3%;
    z-index: 9999;
    justify-content: center
    align-items: center;

}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

.close {
    color: #fff;
    font-size: 30px;
    position: absolute;
    top: 30px;
    right: 15px;
    cursor: pointer;
}

.slide-button {
    font-size: 30px;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 9999;
    padding: 20px;
}

.left {
    left: 15px;
}

.right {
    right: 15px;
}

/************** s u b 0 1 0 5 **************/
#sub0105 {max-width: 1400px; margin: 0 auto 130px auto;}
#sub0105 .sub01_con01 {text-align: center;}
#sub0105 .sub01_con01 .vision_title {font-size: 21px; font-weight: 500; line-height: 34px; margin-bottom: 27px;}
#sub0105 .sub01_con01 img:first-child {margin-bottom: 48px;}
#sub0105 .sub01_con01 {margin-bottom: 90px;}
#sub0105 .sub01_con02 .employ_wrap {width: 100%; padding: 52px; display: flex; flex-wrap: wrap; background-color: #f5f5f5; height: auto;}
#sub0105 .sub01_con02 .employ_wrap .employ_left {width: 50%; text-align: center; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; padding-top: 100px;}
#sub0105 .sub01_con02 .employ_wrap .employ_left .title {font-size: 22px; font-weight: 700; margin-bottom: 32px;}
#sub0105 .sub01_con02 .employ_wrap .employ_left .article {font-size: 16px; line-height: 27px; font-weight: 400; margin-bottom: 18px;}
#sub0105 .sub01_con02 .employ_wrap .employ_left .article_tit {font-size: 22px; font-weight: 700; color: var(--main-color); line-height: 32px; margin-bottom: 56px;}
#sub0105 .sub01_con02 .employ_wrap .employ_right .right_con {display: flex; flex-wrap: wrap;}
#sub0105 .sub01_con02 .employ_wrap .employ_right .right_con .right_con_num {width: 50px; height: 50px; border: 1px solid #23262e; border-radius: 50px; display: flex; justify-content: center; align-items: center; margin-top: 26px; border-right: 2px dashed #23262e;}
#sub0105 .sub01_con02 .employ_wrap .employ_right .right_con .right_con_num p {font-size: 20px; font-weight: 500;}
#sub0105 .sub01_con02 .employ_wrap .employ_right .right_con .right_con_txt {width: 82%; padding: 26px 32px; margin-left: 8%; margin-bottom: 40px;}
#sub0105 .sub01_con02 .employ_wrap .employ_right .right_con .right_con_txt .tit {font-size: 21px; font-weight: 500; margin-bottom: 21px; }
#sub0105 .sub01_con02 .employ_wrap .employ_right .right_con .right_con_txt .article {font-size: 18px; line-height: 28px;}
#sub0105 .sub01_con02 .employ_wrap .employ_right .right_con:hover .right_con_txt {background:#fff; border-radius: 20px;}
#sub0105 .sub01_con02 .employ_wrap .employ_right .right_con:hover .right_con_txt .tit {color:var(--main-color);}
#sub0105 .sub01_con02 .employ_wrap .employ_right .right_con:hover .right_con_num {color: #fff; background: var(--main-color); border: 1px solid #252F6F;}
#sub0105 .anno {margin-top: 20px; text-align: center;}
/************** s u b 0 2 공통서식 **************/
.process_img_600 {display: none;}
.sub02_con01 {/*height: 920px; background: url('../img/sub0201_system_bg.png') no-repeat center center /cover; border-bottom: 2px solid #f1f1f1;*/
                      display: flex; padding-top: 12px; flex-direction: column; align-items: center; text-align: center;
}
.system_ex {margin-bottom: 50px;}
.sec_title {margin-bottom: 27px;}
.sec_desc {margin-bottom: 12px;}
.anno {font-size: 16px; color: #a9a9a9;}

.sub02_con02 {height: 399px; background:url('../img/sub0201_pa_bg.png') no-repeat center center; display: flex; flex-direction:column; justify-content: center; align-items: center; text-align: center; margin-bottom: 80px;}
.sub02_con02 img {margin-bottom: 51px;}

.sub02_con03 {max-width: 1400px; margin: 0 auto 180px auto;}
.sub02_con03 .con_title_wrap {margin-bottom: 50px;}
.sub02_con03 .con_title {margin-bottom: 26px;}

.sub02_con04 {max-width: 1400px; margin: 0 auto 80px auto;}
.sub02_con04 .con_title {margin-bottom: 34px;}
.sub02_con04 .application {display: flex; flex-wrap: wrap; grid-gap: 2%;}
.sub02_con04 .app {width: 49%; padding: 31px 46px 36px 46px; border-bottom: 1px dashed #a9a9a9;}

.sub02_con04 .app_tit_wrap {display: flex; align-items: center; margin-bottom: 7px;}
.sub02_con04 .app_tit_wrap > img {margin-right: 12px;}
.sub02_con04 .app_tit_wrap .app_tit {font-size: 22px; font-weight: 700;}
.sub02_con04 .app_desc {font-size: 18px; line-height: 28px; color: var(--back-color); padding-left: 30px; word-break: keep-all;}

.sub02_con05 {max-width: 1400px; margin: 0 auto;}
.sub02_con05 .spec_wrap {margin-bottom: 40px;}

/************** s u b 0 2 0 1 **************/
#sub0201 .sub02_con01 {max-width: 1400px; margin: 0 auto;}
#sub0201 .sub02_con01 .system_ex {width: 100%;}
#sub0201 .sub02_con01 .system_ex .sub0201_icon_wrap {display: flex; flex-wrap:wrap; width: 100%; justify-content:space-around; padding: 60px 0;}
#sub0201 .sub02_con01 .system_ex .sub0201_icon_wrap .sub0201_icon {width: 33%; }
#sub0201 .sub02_con01 .system_ex .sub0201_icon_wrap .sub0201_icon:nth-child(1), #sub0201 .sub02_con01 .system_ex .sub0201_icon_wrap .sub0201_icon:nth-child(2), #sub0201 .sub02_con01 .system_ex .sub0201_icon_wrap .sub0201_icon:nth-child(3) {margin-bottom: 4%;}
#sub0201 .sub02_con01 .system_ex .sub0201_icon_wrap .sub0201_icon img {margin-bottom: 4%;}
#sub0201 .sub02_con01 .system_ex .sub0201_icon_wrap .sub0201_icon .solution_title {font-size: 20px; font-weight: 700; margin-bottom: 21px; color:var(--main-color);}
#sub0201 .sub02_con04 > img {margin-bottom: 2%;}

/************** s u b 0 2 0 2 **************/
#sub0202 .img_wrap {margin-bottom: 2%;}
#sub0202 .img_wrap img:first-child {margin-bottom: 2%;}

/************** s u b 0 2 0 3 **************/
#sub0203 .con03 .con_title_wrap, #sub0204 .con03 .con_title_wrap {margin-bottom: 20px;}
#sub0203 .con03 .con_title, #sub0204 .con03 .con_title {margin-bottom: 12px;}
/* #sub0203 .con_desc, #sub0204 .con_desc {text-indent: 1.5%;} */
#sub0203 .img_wrap {margin-bottom: 2%;}
#sub0203 .img_wrap img {margin-bottom: 2%;}
#sub0203 .img_wrap img:last-child {margin-bottom: 0;}

/************** s u b 0 2 0 4 **************/
#sub0204 .con_title > p {font-weight: 700;}
#sub0204 .construction_wrap {margin-bottom: 0;}
#sub0204 .sub02_con05 .spec_wrap .img_wrap {text-align: center;}
#sub0204 .sub02_con05 .spec_wrap .con_title {margin-bottom: 2%;}
#sub0204 .sub02_con01 {margin-bottom: 2%;}

/************** s u b 0 3 0 1 **************/
#sub0301 {max-width: 1400px; margin: 0 auto;}
#sub0301 .system_ex {text-align: center; padding: 60px 0 120px ; border-bottom: 1px solid #dfdfdf;}
#sub0301 .sub0301_con_wrap .sub0301_con {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 60px 0;}
#sub0301 .sub0301_con_wrap:nth-of-type(2n+1) .sub0301_con {flex-direction: row-reverse; background: #f5f5f5;}
#sub0301 .sub0301_con_wrap .sub0301_con .text_wrap {width: 40%;}
#sub0301 .sub0301_con_wrap .sub0301_con .text_wrap .title {font-size: 28px; font-weight: 700; margin-bottom: 12px; line-height: 150%; word-break: keep-all;}
#sub0301 .sub0301_con_wrap .sub0301_con .text_wrap .article {font-size: 18px; color: var(--back-color); line-height: 175%; margin-bottom: 40px;}
#sub0301 .sub0301_con_wrap .sub0301_con .text_wrap a {font-size: 16px; font-weight: 700; color:#252F6F; }
#sub0301 .sub0301_con_wrap .sub0301_con div {width: 40%;}
#sub0301 .sub0301_con_wrap .sub0301_con div img {border-radius: 20px;}


/************** s u b 0 3 0 4 **************/
#sub0304 {max-width: 1400px; margin: 0 auto;}
#sub0304 #sub_sec {margin-bottom: 120px;}
#sub0304 .con_title {margin-bottom: 35px;}
#sub0304 .sub03_con01 {margin-top: 77px;}
#sub0304 .title_wrap {margin-bottom: 44px;}
#sub0304 .title_wrap .title_box {display: flex; align-items: flex-end; margin-bottom: 10px;}
#sub0304 .title_wrap .title_box .title { font-size: 43px; font-weight: 700; color: var(--main-color); margin-right: 10px;}
#sub0304 .title_wrap .title_box .article {font-size: 20px; color : var(--main-color); font-weight: 700; padding-bottom: 6.5px;}
#sub0304 .title_wrap .desc {font-size: 18px; line-height: 31px; color: var(--back-color);}
#sub0304 .con_title > p {font-family: 'Pretendard', 'Noto Sans SC'; font-size: 26px; font-weight: 700;}
#sub0304 .structure {display: flex; justify-content: center;}
#sub0304 .charac_con_wrap {padding: 0 2%;}
#sub0304 .charac_con_wrap .charac_con {display: flex; flex-wrap:wrap; position: relative; justify-content: space-between; align-items: center; margin-bottom: 32px;}
#sub0304 .charac_con_wrap .charac_con .tit_wrap {display: flex; flex-wrap:wrap; align-items: center;}
#sub0304 .charac_con_wrap .charac_con .tit_wrap img {margin-right: 18px;}
#sub0304 .charac_con_wrap .charac_con .tit_wrap p {font-size: 20px; font-weight: 700; color: var(--main-color);}
#sub0304 .charac_con_wrap .charac_con .article {width: 715px; font-size: 16px; line-height: 24px; color: var(--back-color);}
#sub0304 .charac_con_wrap .charac_con .article:after {position: absolute; content:''; left: calc(-30% + 45rem); top: 50%; width: 270px; height: 1px; border-top: 1px dashed #ccc;}
#sub0304 .benefit_wrap {display: flex; flex-wrap: wrap;}
#sub0304 .benefit_wrap .benefit_con {width: 33.3%; height: 350px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
                                    border-right: 1px solid #d2d2d2; background: #f9f9f9;
}
#sub0304 .benefit_wrap .benefit_con:last-child {border-right: none;}
#sub0304 .benefit_wrap .benefit_con:hover {background: #fff; border-right:none; border: 1px solid #252F6F;}
#sub0304 .benefit_wrap .benefit_con .icon {margin-bottom: 37px;}
#sub0304 .benefit_wrap .benefit_con .title {font-size: 20px; font-weight: 700; margin-bottom: 16px; color: var(--main-color);}
#sub0304 .benefit_wrap .benefit_con .article {font-size: 16px; line-height: 26px; color: var(--back-color);}
#sub0304 .function_wrap {display: flex; flex-wrap: wrap; gap: 1%;}
#sub0304 .function_wrap .function_con {width: 49%; display: flex; flex-wrap: wrap; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; margin-bottom: 15px;}
#sub0304 .function_wrap .function_con .img {width: 30%;}
#sub0304 .function_wrap .function_con .img img {width: 100%;}
#sub0304 .function_wrap .function_con .txt_wrap {width: 70%;}
#sub0304 .function_wrap .function_con .txt_wrap .title_box {height: 35%; display: flex; text-align: center; border-bottom: 1px solid #d9d9d9;
                                                          justify-content: center; align-items: center; background: #e6edf1;
}
#sub0304 .function_wrap .function_con .txt_wrap .title_box .title {font-size: 18px; font-weight: 500;}
#sub0304 .function_wrap .function_con .txt_wrap .article_box {height: 65%; text-align: center; display: flex; justify-content: center; align-items: center;}
#sub0304 .function_wrap .function_con .txt_wrap .article_box .article {font-size: 16px; line-height: 24px; color: var(--back-color);}
#sub0304 .table {border-top: 1px solid #636363; border-bottom: 1px solid #636363;}
#sub0304 .tg {width: 100%;  text-align: center;}
#sub0304 .tg tr {border-bottom: 1px solid #d9d9d9;}
#sub0304 .tg tr .tg-0pky:first-child {width: 25%; height: 46px; background: #e6edf1; font-size: 17px; font-weight: 500;}
#sub0304 .tg tr .tg-0pky:last-child {font-size: 16px; color: var(--back-color); font-weight: 400;}

/************** s u b 0 5 0 1 **************/
#sub0501 {}
#sub0501 .system_ex {text-align: center; padding: 60px 0 20px ;}
#sub0501 .sub05_con02 {padding: 20px 0;}
#sub0501 .sub05_con02 .esg_wrap {display: flex; justify-content: center; margin-bottom: 60px;}
#sub0501 .sub05_con02 .esg_wrap .esg_con {width: 450px; height: 450px; background: rgb(240 240 240 / 40%); border-radius: 500px; text-align: center; display: flex; flex-direction: column; gap: 18px; justify-content: center; padding: 0 40px;}
#sub0501 .sub05_con02 .esg_wrap .esg_con:nth-child(2),#sub0501 .esg_wrap .esg_con:nth-child(3) {margin-left: -20px;}
#sub0501 .sub05_con02 .esg_wrap .esg_con:nth-child(2) {z-index: 1;}
#sub0501 .sub05_con02 .esg_wrap .esg_con .article {font-size: 22px; font-weight: 700; color:#252F6F;}
#sub0501 .sub05_con02 .esg_wrap .esg_con .title {font-size: 28px; font-weight: 700; word-break: keep-all; line-height: 130%;}
#sub0501 .sub05_con02 .esg_wrap .esg_con .script {line-height: 175%; word-break: keep-all; font-size: 17px; color:var(--back-color);}
#sub0501 .sub05_con03 {text-align: center;}

#sub0501 .sub05_con02 > p { text-align: center; font-size: 24px; line-height: 180%; font-weight: 700;}
#sub0501 .sub05_con02 > p > span {color:#252F6F;}


/************** s u b 0 6 0 1 **************/
#sub0601 {max-width: 1400px; margin: 0 auto;}
#sub0601 .sub06_con01 {text-align: center;}
#sub0601 .sub06_con02 {padding: 20px 0 40px; border-bottom: 1px solid #dfdfdf; margin-bottom: 60px}
#sub0601 .sub06_con02 .map_info {display: flex; gap:2%; align-items: center; margin-bottom: 12px;}
#sub0601 .sub06_con02 .map_info .title {font-size: 22px; font-weight: 700;}
#sub0601 .sub06_con02 .map_info .desc {font-size: 18px; color:var(--back-color);}

/************** s u b 0 6 0 4 **************/
#sub0604 {max-width: 1400px; margin: 0 auto;}
#sub0604 .sub06_con01 {text-align: center;}
#sub0604 .sub06_con02 {text-align: center;}