/* common */
.mt50 {margin-top:50px;}
.mt20 {margin-top:20px;}
.mobile_txt{display: none;}

/*서브페이지 레이아웃*/
.contents_wrap {position: relative; margin-bottom: 150px;}
.contents {position: relative; margin-bottom: 200px; margin-top:50px;}
.inner {max-width: 1200px; margin: 0 auto;}

/*서브 타이틀*/
.sub_titbox {word-break: keep-all;}
.sub_title {color: #007aff; font-weight: bold;}
.sub_titbox h1 {margin-top: 20px; color: #000; font-size: 40px; font-weight: 700; line-height: 1.3; width: 50%; white-space: pre-line;}
.sub_titbox h2 {color: #000; margin-top: 50px; font-size: 30px; font-weight: 700; line-height: 1.3; width: 50%; white-space: pre-line;}
.sub_titbox p {font-size: 20px; margin-top: 10px; line-height: 2.25rem; width: 70%;}
.sub_titbox .txt {font-size: 18px; line-height: 1.725rem; }

/*file download button style */
.file_download_btn { position: relative; display: inline-block; overflow: hidden; border: 2px solid #007bff; background-color: #fff; margin-top: 20px; }
.download_link { display: flex ; align-items: center; position: relative; z-index: 1; color: #007bff; font-weight: bold; padding: 15px 50px; transition: color 0.3s ease; }
.download_link:hover { color: #fff; }
.file_download_btn .download_txt {font-size: 18px; width: 100%; margin:0; padding-right: 10px;}
.file_download_btn .download_icon { display: block; width: 24px; height: 24px; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(/theme/frandeer/img/sub/down_icon_b.svg); transition: background-image 0.3s ease; }
.download_link:hover .download_icon { background-image: url(/theme/frandeer/img/sub/down_icon_w.svg); }
.file_download_btn::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #007bff; z-index: 0; transition: width 0.4s ease-in-out; }
.file_download_btn:hover::before { width: 100%; }
.download_s { margin-left:10px; }

/*download button 2*/
.dropdown_menu.active { display: block; }
.dropdown_tab { display: none; position: relative; width: 100%; }
.dropdown_button { width: 100%; padding: 20px 10px; text-align: left;  background: #007aff; cursor: pointer; color:#fff; }
.dropdown_menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: white;  z-index: 10; list-style: none; padding: 0; margin: 0; }
.dropdown_menu .dropdown_item { padding: 20px 10px; cursor: pointer; background: #007aff; color: #fff; }
.dropdown_menu .dropdown_item:hover { background: #0462c9;  }

/*배경 color*/
.bg_gr{background: #F6F6F6;}
.bg_sky{background: #e8effc;}
.bg_overview {background: url(../img/sub/overview_bg.jpg) no-repeat; background-size: cover; background-attachment: fixed; }

/*움직이는배경*/
.bg_cont{height: 30rem; margin-bottom: 200px;}
.bg_inner {width: 100%; height: 100%; display: flex ; align-items: center; justify-content: center; text-align: center;}
.bg_inner>p{font-size:50px; color:#fff; font-weight: 500;font-weight: 500; letter-spacing: initial;}

/*pas_bg*/
.bg_pas {margin-top:100px; margin-bottom: 150px;}
.bg_pas .bg_inner {width: 100%; height: 100%; justify-content: space-between; align-items: center; text-align: left; display: flex ;}
.bg_pas .bg_inner .pas_txt_box { text-align: left; width:50%;}
.pas_txt_box h1 {margin-top: 20px; color: #000; font-size: 40px; font-weight: 700; line-height: 1.3; white-space: pre-line;}
.pas_txt_box .pas_txt1 {font-size: 18px; margin-top:20px;}
.pas_txt_box .pas_txt2 {font-size: 16px; margin-top:10px;}
.pas_img {text-align: right;}
.pas_img>img {width:90%;}


/*system top layout*/
#sys_topimg {position: absolute; z-index: -1; width: 100%; height: 100%; background-size: cover;}
.sys_top{ position: relative; font-size: 16px; letter-spacing: -.3px; color: #777; line-height: 1.8; }
.sys_bnr {max-width: 100%; position: relative; overflow: hidden; display: flex ; align-items: center; height: 100vh; margin-bottom: 130px; font-size: 20px; font-weight: 700; color: #111;}
.sys_bnr .inner {width: 100%; max-width: 1200px; margin: 0 auto; }
.sys_bnr h1 {font-size:60px;}
.sys_bnr h1 span {color:#ffffff;} 
.sys_bnr p {font-size: 20px; color: #fff; font-weight: 500; opacity: 90%;}
.sys_bg1 {background: url(../img/sub/sub_visual13.jpg) center top 10% no-repeat; animation: sub_top_img 2.0s 0s both; filter: brightness(70%);}
.sys_bg2 {background: url(../img/sub/sub_visual11.jpg) center top 10% no-repeat; animation: sub_top_img 2.0s 0s both; filter: brightness(70%);}
.sys_bg3 {background: url(../img/sub/sub_visual6.jpg) center top 10% no-repeat; animation: sub_top_img 2.0s 0s both; filter: brightness(70%);}
.sys_bg4 {background: url(../img/sub/sub_visual14.jpg) center top 10% no-repeat; animation: sub_top_img 2.0s 0s both; filter: brightness(70%);}

/*system sub tab menu*/
.sub_menu { margin: 0 auto; overflow: hidden; }
.sub_tab {display: flex ; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.3); font-weight: bold; width: 1200px; margin:0 auto;}
.sub_tab .tab { position: relative;  overflow: hidden; float: left; max-width: 200px; margin: 0 60px; padding-bottom: 20px; letter-spacing: normal; cursor: pointer;}
.sub_tab .tab:hover { color: #000; }
.sub_tab .tab::before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: #007bff; transition: width 0.3s ease; }
.sub_tab .tab:hover::before { width: 100%; }
.sub_tab .tab.active {font-weight: bold; color:#000;}
.sub_tab .tab.active::before {position:absolute; bottom:0px; left:50%; height:3px; background-color:#007bff; content:""; transition: all 0.4s ease-in-out; width: 100%; margin-left: -50%; }
.tab_content_box { padding-top : 100px; background-color: #fff; }
.tab_content { display: none; }
.tab_content.active { display: block; }
.tab_inner {max-width: 1200px; margin: 0 auto;}

/*섹션 스타일01*/
.box_a {padding: 100px 0px; display: flex ; justify-content: space-between;}
.box_a .le {width: 50%;}
.box_a .le>span {font-size: 30px; font-weight: 700; color: #222; line-height: 1.3;}
.box_a .le p {font-size:18px;}
.box_a .ri {display: flex ; gap: 30px; width: 50%;}
.box_a .ri ul  { width: 50%; word-break: keep-all; }
.box_a .ri ul li {padding: 30px; border-radius: 10px; text-align: center; background: #fff; transition: all .3s; word-break: keep-all;}
.box_a .ri ul li:hover{box-shadow:0px 13px 10px 0px rgba(0,0,0,.1);transform:translateY(-10px)}
.box_a .ri ul li+li {margin-top: 30px;}
.box_a .ri ul li p {margin-top: 20px; font-size: 18px; font-weight: 700; color: #111; line-height: 1.4; padding:0px 50px; white-space: normal;}
.box_a .ri ul+ul {margin-top: 80px;}

/*섹션 스타일02*/
 .list_box ul li {display: flex ; align-items: center; padding: 30px 50px; border: 1px solid #e1e1e1; border-radius: 10px; transition: all .3s;}
 .list_box ul li:nth-child(even) {background: #f2f2f2;}
 .list_box ul li:hover {margin-left:20px;border:1px solid #007aff;}
 .list_box ul li+li {margin-top: 10px;}
 .list_box ul li>span {display: flex ; align-items: center; justify-content: center; min-width: 50px; height: 50px; border-radius: 50px; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0; text-transform: uppercase; background: #007aff; font-family: 'Poppins';}
 .list_box dl {display: flex ; align-items: center;}
 .list_box dt {margin: 0 80px 0 50px; line-height: 1.5;} 
 .list_box dt span {font-size: 15px; color:#007aff;}
 .list_box dt p {font-size: 20px; font-weight: 700; color: #111;}
 .list_box dd {word-break: keep-all;}

/*섹션 스타일03*/
.box_b {height: auto;}
.box_b ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 100px;}
.box_b ul li {background: #F6F6F6; position: relative;  border-radius: 15px;}
.box_b ul li span dl {display: block; padding: 230px 30px 50px 30px;}
.box_b ul li span dt {font-size: 20px; font-weight: 500; line-height: 50px; color:#000;}
.box_b ul li span dt dd {line-height: 1.725rem;}
.box_b ul li:hover{background: #007aff; opacity:1; color:#fff;}
.box_b ul li:hover span dt { color: #fff; }

/*섹션 스타일04*/
.box_c dl {display: flex; margin: 0 auto; margin-top:50px;}
.box_c dl dt {flex-shrink: 0; width: 20%; font-size: 30px; font-weight: 800; line-height: 1.4; color: #111; padding-top: 50px; white-space: pre-line;}
.box_c dl dd {flex-grow: 1; word-break: keep-all;}
.box_c dl dd ul {display: grid; grid-template-columns: repeat(2, 1fr); height: 100%; word-break: keep-all;}
.box_c dl dd ul li {padding: 50px 140px 70px 0;}
.box_c dl dd ul li:nth-child(even){padding-left:70px;padding-right:70px;border-left:1px;}
.box_c dl dd ul li:nth-child(n+1){padding-top:70px;border-top:1px;}
.box_c dl dd ul li span {display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50% 50% 0 50%; font-size: 20px; font-weight: 700; color: #fff; background: #007aff;}
.box_c dl dd ul li p {margin: 40px 0 15px; font-size: 24px; font-weight: 700; color: #111; word-break: keep-all;}
.box_c dl dd ul li:nth-child(even){padding-left:70px;padding-right:70px;border-left:1px;}
.box_c dl dd ul li:nth-child(n+1){padding-top:70px;border-top:1px;}
.box_c dl dd ul li span {display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50% 50% 0 50%; font-size: 20px; font-weight: 700; color: #fff; background: #007aff;}
.box_c dl dd ul li p {margin: 40px 0 15px; font-size: 24px; font-weight: 700; color: #111; word-break: keep-all;}

/*섹션 스타일05*/
.box_d dl {display: flex; margin: 0 auto;}
.box_d dl dt {flex-shrink: 0; width: 20%; font-size: 30px; font-weight: 800; line-height: 1.4; color: #111; padding-top: 50px; white-space: pre-line;}
.box_d dl dd {flex-grow: 1; word-break: keep-all;}
.box_d dl dd ul {display: flex ; margin: 70px 0 90px;}
.box_d dl dd ul li {overflow: hidden; display: flex ; flex-flow: column; align-items: center; width: calc(100% / 3); padding-top: 60px; border-top: 1px solid #e1e1e1; border-bottom: 3px solid #007aff; text-align: center;}
.box_d dl dd ul li span {font-weight: 800; color:#007aff;}
.box_d dl dd ul li p {margin: 10px 0 28px; font-size: 25px; font-weight: 700; color: #111; }
.box_d dl dd ul li div {margin-bottom: 40px; padding: 0 12%;}

/*섹션 스타일06*/
.box_e {padding: 100px 0px; display: block ;}
.box_e .tit {width: 50%;}
.box_e .tit>span {font-size: 30px; font-weight: 700; color: #222; line-height: 1.3;}
.box_e .cen { margin-top: 50px; }
.box_e .cen ul  { display: flex ; gap: 30px; word-break: keep-all; justify-content: center; }
.box_e .cen ul li {    box-sizing: border-box; flex: 1 1 calc(25% - 30px); padding: 30px; border-radius: 10px; text-align: center; background: #fff; transition: all .3s; word-break: keep-all;}
.box_e .cen ul li:hover{box-shadow:0px 13px 10px 0px rgba(0,0,0,.1);transform:translateY(-10px)}
.box_e .cen ul li p {margin-top: 20px; font-size: 18px; font-weight: 700; color: #111; line-height: 1.4; padding:0px 50px; white-space: normal;}
.box_e .cen ul li img {width:100px;}

/*섹션 스타일07*/
.box_f {height: auto;}
.box_f ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 100px;}
.box_f ul li {background: #F6F6F6; position: relative;}
.box_f ul li span dl {display: block; padding: 20px 30px 50px 30px;}
.box_f ul li span dt {font-size: 20px; font-weight: 500; line-height: 50px; color:#000;}
.box_f ul li span dt dd {line-height: 1.725rem;}
.box_f ul li:hover{box-shadow:0px 13px 10px 0px rgba(0,0,0,.1);transform:translateY(-10px)}

/*섹션 스타일08*/
.box_g ul {display: grid ; grid-template-columns: repeat(4, 1fr); height: 680px; color: #fff; margin-top: 50px;}
.box_g ul li {position: relative; display: flex ; align-items: center; justify-content: center;}
.box_g ul li:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-position: center !important; background-size: cover !important; background-repeat: no-repeat; filter: brightness(.5);}
.box_g ul .img_g_box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center !important; background-size: cover !important; clip-path: circle(0% at 50% 50%); transition: all .3s;}
.box_g ul li .g_bg1, .box_g ul .ser1::before {background: url(../img/sub/solution_image01.jpg) no-repeat;}
.box_g ul li .g_bg2, .box_g ul .ser2::before {background: url(../img/sub/solution_image02.jpg) no-repeat;}
.box_g ul li .g_bg3, .box_g ul .ser3::before {background: url(../img/sub/solution_image03.jpg) no-repeat;}
.box_g ul li .g_bg4, .box_g ul .ser4::before {background: url(../img/sub/solution_image04.jpg) no-repeat;}
.box_g .txt_g_box {position: relative; text-align: center;}
.box_g .txt_g_box .g_txt {margin-top: 50px; transition: all .3s; }
.box_g .txt_g_box .g_txt span {font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: uppercase;}
.box_g .txt_g_box .g_txt p {font-size: 30px; font-weight: 700; white-space: pre-line;}
.box_g .txt_g_box .g_txt_h {opacity:0;transition:all .3s; position: relative; }
.box_g .txt_g_box .g_txt_h p {white-space: pre-line;}
.box_g .txt_g_box .g_txt_h a {display: block; width: 120px; height: 100%; margin: 15px auto 0; padding: 10px 0; border-radius: 50px; font-size: 13px; font-weight: 700; color: #111; text-align: center; background: #fff; text-transform: uppercase; letter-spacing: 0;}
.box_g ul li:hover .img_g_box {clip-path:circle(50% at 50% 50%)}
.box_g ul li:hover .g_txt_h{opacity:1} 
.box_g ul li:hover .g_txt {margin-top:0;margin-bottom:20px}

/*섹션 스타일09*/
.list_box2 {background: #F6F6F6; position: relative; height: 100%; display: block; padding: 74px 15px; margin-top: 50px;}
.box_icon {display: grid ; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto;}
.box_icon li {color:#000; padding: 15px; background: #FFFFFF; position: relative; height: 100%; border-radius: 15px;}
.box_icon li span {display: flex ; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0px 20px;}
.box_icon li span img {padding-right: 5px; vertical-align: middle; width: 25px;}
.box_icon li:hover {background: #007aff; opacity:1; color:#fff;}  

/*섹션 스타일10*/
.box_h {padding: 100px 0px; display: block;}
.box_h h2 {font-size: 30px; font-weight: 700; color: #222; line-height: 1.3;}
.box_h p { display: block; font-size: 20px; margin-top: 10px; width: 70%;}
.box_h .txt_box {margin-top: 30px;}
.box_h ul li {margin-left: 25px; text-indent: -25px; font-size: 20px; font-weight: 500; color: #111;}
.box_h ul li+li {margin-top: 10px;}
.box_h ul li::before {display: inline-block; vertical-align: 4px; content: ""; width: 5px; height: 5px; margin-right: 20px; border-radius: 50%; background: #007aff;}

/*섹션 스타일11*/
.list_box_2 ul li {display: flex ; align-items: center; padding: 30px 50px; border: 1px solid #e1e1e1; border-radius: 10px; transition: all .3s;}
.list_box_2 ul li:nth-child(even) {background: #e8effc}
.list_box_2 ul li:hover {margin-left:20px;border:1px solid #007aff;}
.list_box_2 ul li+li {margin-top: 10px;}
.list_box_2 ul li>span {display: flex ; align-items: center; justify-content: center; min-width: 50px; height: 50px; border-radius: 50px; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0; text-transform: uppercase; background: #007aff; }
.list_box_2 dl {display: flex ; margin: auto 30px;}
.list_box_2 dl dt { display: flex ; align-items: center; border-radius: 10px; transition: all .3s; font-size: 20px; font-weight: 700; color: #111; width:auto; padding: 0; margin-right: 35px; white-space: nowrap;} 
.list_box_2 dt span {font-size: 15px; color:#007aff;}
.list_box_2 dd {word-break: keep-all;}




/*이미지 박스 스타일 01*/
.img_box {margin-top:50px;}
.img_box .img_box_data li {display: flex; align-items: center;}
.img_box .img_box_data li:nth-child(even) {flex-direction:row-reverse;}
.img_box .img_box_data li img {width:50%;}
.img_box .img_box_data li dl {width:50%;  padding: 0 7%;}
.img_box .img_box_data li dl dt {margin-bottom: 10px; font-size: 20px; font-weight: 700; color: #111;}
.img_box .img_box_data li dl dd { white-space: normal;  line-height: 25px;}



/*common 타이틀 스타일2 max-width: 1200*/
#contents_st2 {position: relative; margin-bottom: 200px;}
#contents_st2 .bu_inner {max-width: 1200px; margin: 0 auto;}
#contents_st2 .bu_inner .sol_box{color: #007aff; font-weight: bold;}
#contents_st2 .bu_inner .sub_tit h1 {margin-top: 20px; color: #000; font-size: 40px; font-weight: 700; line-height: 1.3; width: 50%; white-space: pre-line;}
#contents_st2 .bu_inner .sub_tit h2 {color: #000; margin-top: 50px; font-size: 30px; font-weight: 700; line-height: 1.3; width: 50%; white-space: pre-line;}
#contents_st2 .bu_inner .sub_tit p {font-size: 20px; margin-top: 10px;  line-height: 2.25rem;}

/*table style*/
.tab_box {margin-top:50px; text-align: center;}
.tab_box .com_table {width: 100%; border-spacing: unset; border-collapse: collapse; table-layout: fixed; border-top: 2px solid #007aff; }
.tab_box .com_table th {background: #F9F9F9; border-bottom: 1px solid #EEEEEE; font-weight: 500; color:#000; }
.tab_box .com_table th , .tab_box .com_table td { padding: 20px 0px; text-align: center; vertical-align: middle; }
.tab_box .com_table td {color:#777;     border-bottom: 1px solid #eee; }
.tab_box .com_table td ~ td { border-left: 1px solid #EEEEEE; }
.tab_box .com_table td:first-child { border-right: 1px solid #EEEEEE; }

/*care_list style 3개*/
.card_list {margin-top:100px;}
.card_list .card_group {display: grid ; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 25px;}
.card_list ul li {display: flex ; flex-direction: column; align-items: center; background: #F6F6F6; position: relative; border-radius: 15px;  padding: 95px 0 56px;}
.card_txt_box {margin-top: 50px; text-align: center;}
.card_txt_box dt {font-size: 30px; font-weight: bold; margin-bottom: 25px; color:#000000;}
.card_txt_box dd {font-size: 16px;  line-height: 28px; }

/*care_list style 4개*/
.card_list .card_group_4 {display: grid ; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px;}
.card_txt_box_4 {margin-top: 50px; text-align: center;}
.card_txt_box_4 dt {font-size: 20px; font-weight: bold; margin-bottom: 25px; color:#000000;}

/*about*/
#about {position: relative; }
.pg_com {position: relative; margin-bottom: 200px; line-height: 2; color: #777; }
#about .ab_inner {display: flex;  justify-content: center; max-width:1200px; margin: 0 auto;}
#about .ab_inner .sub_tit {position: sticky; top: 100px; height: 100%; width:50%; }
#about .ab_inner .sub_tit span {color:#007aff; font-weight: bold;}
#about .ab_inner .sub_tit h2 {margin-top: 50px; font-size: 35px; font-weight: 700; line-height: 1.3; white-space: initial;}
#about .big_txt {position: relative; font-weight: 700; color: rgba(255, 255, 255, .2);}
#about .big_txt div {position:absolute;z-index:-1;top:0;left:0;top:0;color:#dedede;white-space:nowrap;}
#about .big_txt .b_txt{width:50%; position:relative;width:max-content;background:linear-gradient(to right, #01102F, #01102F) no-repeat;-webkit-background-clip:text;background-clip:text;background-size:0%;;white-space:nowrap;transition:background-size cubic-bezier(.1,.5,.5,1) 0.5s}
#about .ab_inner .r_cont {display: flex; flex-direction: column; align-items: flex-start; margin-left: 50px; width:50%;}
#about .ab_inner .r_cont div {overflow: hidden;}
#about .ab_inner .r_cont a{display: inline-block; font-size: 13px; font-weight: 500;}
#about .ab_inner .r_cont a+a {margin-top: 80px;}
#about .ab_inner .r_cont a img {transition: all .3s;}
#about .ab_inner .r_cont a:hover div img {transform:rotate(5deg) scale(1.1)}
 #about .ab_inner .r_cont a:first-child{margin-left:auto;text-align:right}
#about .ab_inner .r_cont .ab_bt_txt {display: inline-block; margin-top: 10px; color: #007aff; text-align: right; }
#about .ab_inner .r_cont div+div {margin-top: 80px;}

/*overview*/
.overview {position: relative; padding-top: 150px; margin-bottom: 200px;}
.overview:after {position: absolute; content: ''; z-index: -1; top: 0; left: 0; width: 100%; height: 610px; background: url(../img/sub/overview_bg.jpg)center top 10% no-repeat; background-attachment: fixed; background-size: cover; } 
.overview .ov_inner {margin: 0 auto; max-width:1200px;}
.overview .ov_inner  .sub_tit  span {color:#fff; font-weight: bold;}
.overview .ov_inner  .sub_tit  h2 {color:#fff; margin-top: 50px; font-size: 30px; font-weight: 700; line-height: 1.3; width: 50%; white-space: pre-line;}
.overview .ov_inner .ov_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 100px;}
.overview .ov_inner .ov_list li span {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around; height: 220px; padding: 40px; color: #fff; background: #111; transition: all .3s; }
.overview .ov_inner .ov_list li span:hover {transform:translateY(-20px)}
.overview .ov_inner .ov_list li span dt {margin-bottom: 5px; font-size: 20px; font-weight: 700;}
.overview .ov_inner .ov_list li span dd {opacity: .5;}


/*연혁*/
.history {position: relative;  margin-bottom:200px; }
.his_inner {max-width: 1200px; margin: 0 auto}
.history .sub_tit  span {color:#007aff; font-weight: bold;}
.history .sub_tit  h2 {color:#000; margin-top: 50px; font-size: 30px; font-weight: 700; line-height: 1.3; width: 50%; white-space: pre-line;}
.his {position: relative; display: flex; padding-top:100px;}
.his .his_btn{position: absolute; top: 0; left: 50%; padding: 14px 35px; border-radius: 50px; font-size: 16px; color: #fff; background: #007aff; transform: translateX(-50%); margin-top:-70px;}
.his .his_btn:hover{letter-spacing: 0px; transition: 0.35s;}
.his .year p {font-size:120px; font-weight: 700; color: #eee; letter-spacing: -5px;}
.his .info {width: 100%; height: 320px; overflow-y: scroll; word-break: keep-all;}
.his .info p {font-size: 120px; font-weight: 700; color: #007aff; letter-spacing: -5px; font-family: 'play';}
.his .info div+div {margin-top: 50px;}
.his .info ul {margin-top: 20px; padding-left: 10%;}
.his .info ul li {position: relative; width: 90%; padding-left: 20px; border-bottom: 1px dashed #e1e1e1; font-weight: 500; color: #111; line-height: 3.5;}
.his .info ul li:before {position: absolute; content: ''; top: 30px; left: 0; width: 5px; height: 5px; background: #111;}
.his .info::-webkit-scrollbar{width:10px}
.his .info::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,20%);border-radius:10px}
.his .info::-webkit-scrollbar-track{background-color:rgba(0,0,0,5%);border-radius:10px}

/*파트너사*/
.p_btn {display: inline-block; margin-top: 20px; padding: 8px 40px; border-radius: 50px; font-size: 17px; color: #007afe; border: solid #007afe 1px; font-weight: bold;}
.p_btn:hover {background: #007afe; color:#fff;}
.logo_tbox {margin-top:100px;}
.logo_tbox ul {overflow: hidden; margin: 10px 0; font-size: 13px;}
.logo_tbox ul li {padding: 20px 20px; text-align: center; border: 1px solid #dfdfdf; border-radius: 10px; margin: 1% 1%; width: 23%; box-sizing: border-box; float: left; display: flex ; align-items: center; justify-content: center; height: 100px;}
.logo_tbox ul li:hover {background-color:#f5f5f5;}
.logo_tbox ul li img {width: auto; min-width: 150px; max-height: 50px; height: auto; object-fit: contain;}

/* 오시는길 */
.map_box{width:100%;height:500px;position:relative; margin-bottom:100px;}
.map_title {color: #000; font-size: 30px; font-weight: 700; width: 50%; white-space: pre-line;}
.map_add {margin: 30px 0px; line-height: 1.752rem; font-size:18px;}
.map_add p span {padding-left: 5px; font-weight: bold;}
.location_box{background:rgba(255,255,255,0.9);position:absolute;bottom:0;right:0;z-index:999;padding:30px;min-width:500px}
.location_box p{font-size:18px;line-height:36px;text-align:left}
.location_box span{font-weight:bold;width:120px;color:#555;display:inline-block;padding-left:15px}


/**************************** responsive ****************************/



/****** desktop ******/

@media (max-width:1400px){

/* 회사소개 */
.his{margin: 100px 0;}
.his .year p {font-size:120px;}
.his .info p{font-size: 120px;}
   
}



/****** tablet ******/
@media screen and (max-width:820px){

.contents_wrap{ margin-bottom: 100px;}

/*tab to Select  */
.sub_menu {overflow: initial;}
.sub_tab { display: none; }
.dropdown_tab {display: flex ; align-items: center; flex-wrap: wrap; height: 100%;}

/*system top layout*/
.sys_bnr {margin-bottom:0px;}
.sys_bnr .tit {padding-left: 50px;}
.sys_bnr h1 {font-size:35px;}
.sys_bnr p {font-size:16px;}

/*섹션 스타일01*/
.box_a {padding: 100px 15px;}
.box_a .ri {display: block;}
.box_a .ri ul {width:100%;}
.box_a .ri ul li {display: flex ; gap: 30px; align-items: center; text-align: left;}
.box_a .ri ul li img {width:20%;}
.box_a .ri ul li p {margin-top:0;}
.box_a .ri ul li+li {margin-top: 10px;}
.box_a .ri ul+ul  {margin-top: 10px;}

/*섹션 스타일02*/
.list_box ul {width: 100%; margin-top: 50px;}
.list_box ul li {padding: 30px;}

/*섹션 스타일04*/
.box_c dl {display: block; padding: 0 20px;}
.box_c dl dt {width: 100%; margin-bottom: 15px; font-size: 22px; padding-top:0;}
.box_c dl dd ul li {padding: 30px 20px 30px 0;}
.box_c dl dd ul li span {width: 45px; height: 45px; font-size: 14px;}
.box_c dl dd ul li p {margin: 20px 0 15px; font-size: 19px; }
.box_c dl dd ul li:nth-child(even)  {padding-left: 20px; padding-right: 20px;}
.box_c dl dd ul li:nth-child(n+1) { padding-top: 30px; padding-left: 30px;}

/*섹션 스타일05*/
.box_d dl {display: block; padding: 0 20px;}
.box_d dl dt {width: 100%; margin-bottom: 15px; font-size: 22px; padding-top:0;}
.box_d dl dd ul {margin: 30px 0 40px;}
.box_d dl dd ul li {padding-top: 30px;}
.box_d dl dd ul li p {margin-bottom: 15px; font-size: 20px;}
.box_d dl dd ul li div {margin-bottom: 20px; padding: 0 10px;  text-align: center;}

/*섹션 스타일11*/
.list_box_2 {overflow: hidden;}
.list_box_2 dl dt {white-space: pre-line;}
.list_box_2 ul {width: 100%; margin-top: 50px;}
.list_box_2 ul li {padding: 30px;}

}



/******* mobile and tablet   ******/
@media (max-width:768px) {

/*서브페이지 레이아웃 */
.contents {margin-bottom: 100px;}


/*서브 타이틀*/
.sub_titbox h1 {width: 80%;}
.sub_titbox h2 {padding-top: 20px; white-space: normal; width: 90%; margin: 0 auto; font-size:25px;}
.sub_titbox {text-align: center;}
.sub_titbox h1 {padding-top: 10px; font-size: 28px; margin: 0 auto; }
.sub_titbox p {font-size:16px; margin:0 auto;}

/*섹션 스타일01*/
.box_a {display: block; padding: 75px 15px;}
.box_a .le {width: 100%; text-align: center;}
.box_a .ri {width: 100%; margin-top: 50px;}
.box_a .ri ul {display: flex}
.box_a .ri ul+ul {margin-top: 10px;}
.box_a .ri ul li {display: block; width: 50%; text-align: center; }
.box_a .ri ul li+li {margin-top: 0; margin-left: 10px;}

/*섹션 스타일03*/
 .box_b {width:80%;}
 .box_b ul {grid-template-columns: repeat(1, 1fr); gap: 30px;}
 .box_b ul li span dl {padding: 30px 30px 50px 30px;}
 .box_b ul li span dl dt {font-size:25px;}
 .box_b ul li span dl dd {font-size: 18px; padding-top: 25px;}

/*섹션 스타일06*/
.box_e .cen ul{display: grid ; grid-template-columns: repeat(2, 1fr);}

/*섹션 스타일08*/
.box_g ul {grid-template-columns: repeat(2, 1fr);}
.box_g .txt_g_box .g_txt p {font-size: 20px;}
.box_g .txt_g_box .g_txt { margin-bottom: 10px;}
.box_g .txt_g_box .g_txt_h {opacity: 1;}
.box_g .txt_g_box .g_txt_h p {opacity: .5;}


 /*이미지 박스 스타일 01*/
 .img_box {text-align: center;}
 .img_box .img_box_data li {display: block;}
 .img_box .img_box_data li img {width:80%;}
 .img_box .img_box_data li dl {width: 100%; margin-top: 20px; padding: 0;}
 .img_box .img_box_data li+li {margin-top:50px;}
 .box_icon{grid-template-columns: repeat(3, 1fr);}
 .box_icon li span.icon_box li span {height: 100px;}


/*about*/
#about .ab_inner {display: block;}
#about .ab_inner .sub_tit {position: unset; width: 100%; text-align: center;}
#about .ab_inner .sub_tit h2 {margin-top: 20px; font-size: 25px; white-space: normal;}
#about .big_txt .b_txt {display: none;}
#about .big_txt div {position: unset; color:#000000;}
#about .ab_inner .r_cont {margin-top: 80px; margin-left: 0; width: 100%;}
#about .ab_inner .r_cont a img {width: 100%;}
.pg_com{margin-bottom: 100px;}

/*overview */
.overview {margin-bottom: 100px; padding-top: 100px;}
.overview .ov_inner .sub_tit {text-align:center;}
.overview .ov_inner .ov_list {grid-template-columns: repeat(2, 1fr); margin-bottom: 60px;}
.overview .ov_inner .ov_list li span {height:240px;}
.overview .ov_inner .sub_tit h2 {width:90%; padding-top: 20px;font-size: 25px; white-space: normal; margin:0 auto;}
.overview .ov_inner .ov_list li span dt {font-size:18px;}
.overview .ov_inner .ov_list li span dl {margin-top: 20px;}

/* 연혁 */
.history .his_inner .sub_tit {text-align:center;}
.history .sub_tit h2 {padding-top: 20px; font-size: 25px; white-space: normal; width: 90%; margin:0 auto;}
.his{padding: 0; padding-top: 15px; margin: 100px 0;}
.his .year p {font-size:100px;}
.his .info p{font-size: 100px;}

}


/******* mobile ******/
@media screen and (max-width:690px){

/* 오시는길 */
.location_box{min-width:auto;width:100%;padding:20px 15px}

}



/******* mobile ******/
@media (max-width:480px) {

* { max-width: 100% !important; box-sizing: border-box; }
html, body { overflow-x: hidden !important; }
body { max-width: 100vw !important; overflow-x: hidden !important; }
body[data-aos-easing][data-aos-duration][data-aos-delay] { width: auto !important; max-width: 100vw !important; overflow-x: hidden !important; }

/*기본 타이틀 디자인*/

/* common */
#wrap { max-width: 100vw; word-break: keep-all;}
.mobile_txt{display: block;}

/*서브 타이틀틀*/
.sub_titbox h1 {font-size:30px; white-space: pre-line;}
.sub_titbox h2 {font-size:22px; color: #007aff;}
.sub_titbox p {font-size: 16px; line-height: 1.725rem; margin-top: 10px;}

/*download 버튼*/
.download_s {margin: 10px 0px;}
.dropdown_button::before { float: right; position: relative; content: ''; width: 12px; height: 12px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(-45deg); box-sizing: border-box; right: 5px; transition: transform 0.3s ease; } 
.dropdown_button.active::before { top: 12px; transform: translateY(-50%) rotate(-225deg);}

/*tab*/
.tab_content_box { padding-top: 50px; }

/*system sub_top_bg */
.sys_bnr .tit {padding-left: 20px;}
.sys_bnr h1 {font-size:35px;}
.sys_bnr p {font-size:16px; width:80%;}

/*pas_bg*/
.bg_pas  {margin-top: 30px;}
.pas_txt_box h1 {font-size: 22px; color: #007aff;}
.bg_pas {margin-bottom: 80px;}
.sub_bg {width: 100%;}


/*섹션 스타일01*/
.box_a .ri ul li {padding: 20px;}
.box_a .ri ul li p {font-size:14px; padding:10px 0px;}
.box_a .ri ul li img { width: 50%; }
.box_a .le>span {font-size: 22px; color: #007aff;}


/*섹션 스타일02*/
.list_box ul li {display: block;}
.list_box ul li>span {margin: 0 auto; min-width: 40px; height: 40px; font-size: 13px; max-width: 40px; margin-bottom: 10px;}
.list_box dl {display: block; text-align: center;}
.list_box dt {margin: 0px 0px 10px 0px; padding-right: 0;}

/*섹션 스타일04*/
.box_c dl dd ul li:nth-child(1) {border-top: 1px solid #e1e1e1;}
.box_c dl dd ul { grid-template-columns: repeat(1, 1fr); }
.box_c dl dd ul li {overflow: hidden; display: flex ; flex-direction: column; align-items: center; text-align: center; border-bottom: 1px solid #e1e1e1;}
.box_c dl dd ul li:nth-child(n+1) {padding-left : 0 ;}

/*섹션 스타일05*/
.box_d dl dd ul {display: block;}
.box_d dl dd ul li { width: 100%; }
.box_d dl dd ul li p {margin-bottom: 15px; font-size: 20px; }

/*섹션 스타일06*/
.box_e {text-align: center;}
.box_e .tit {width:100%;}
.box_e .tit>span {font-size:22px; color: #007aff;}
.box_e .cen ul {display: flex ; flex-wrap: wrap; gap: 30px; flex-direction: row; padding: 0px 20px; }
.box_e .cen ul li {flex: 1 1 calc(50% - 30px);  box-sizing: border-box;  padding: 20px 0px;}

/*섹션 스타일07*/
.box_f ul {display: grid ; grid-template-columns: repeat(1, 1fr); gap: 20px; margin-top: 50px;}

/*섹션 스타일08*/
.box_g ul {display: block; height: auto;}
.box_g ul li {padding: 50px 0;}
.box_g .txt_g_box {vertical-align: middle;}
.box_g .txt_g_box .g_txt p {white-space: normal;}

/*섹션 스타일11*/
.list_box_2 ul li {display: block;}
.list_box_2 ul li>span {margin: 0 auto; min-width: 40px; height: 40px; font-size: 13px; max-width: 40px; margin-bottom: 10px;}
.list_box_2 dl {display: block; text-align: center;}
.list_box_2 dt {margin: 0px 0px 10px 0px; padding-right: 0;}



/*table style*/
.tab_box {overflow-x: auto; }
.tab_box .com_table { min-width: 55rem; }

/*care_list style 3개*/
.card_txt_box {margin-top: 30px;}
.card_list {margin-top: 10px; margin-bottom:30px;}
.card_list .card_group {grid-template-columns: minmax(0, 1fr); gap: 16px 0; max-width: 480px; margin: 0 auto;}
.card_list ul li {border-radius: 20px; width: 90%; margin: 0 auto; padding: 30px 0 30px; }
.card_txt_box dt {font-size:25px;}


/*care_list style 4개*/
.card_list .card_group_4 {grid-template-columns: minmax(0, 1fr); gap: 16px 0; max-width: 480px; margin: 0 auto;}
.card_txt_box_4 {margin-top: 30px;}
.card_txt_box_4 dt {font-size:25px;}


/*about*/
#about .ab_inner .sub_tit h2 {font-size:22px;}
#about .ab_inner .r_cont a img {width:60%;}

/*overview*/
.overview .ov_inner .sub_tit h2 {font-size:22px;}
.overview .ov_inner .ov_list { display: block; margin-top: 50px;}
.overview .ov_inner .ov_list li {height: auto; word-break: keep-all;}
.overview .ov_inner .ov_list li span {height: auto;}
.overview .ov_inner .ov_list li span dl {padding-bottom: 15px;}
.overview .ov_inner .ov_list li+li {margin-top: 10px;}
.overview:after {height: 430px; background-position: center;}

/* 연혁 */
.history {margin-bottom:100px;}
.history .sub_tit h2 {font-size:22px;}
.his {margin: 75px 0;}
.his .year p {font-size:70px;}
.his .his_btn {width: 100%; font-size: 15px; text-align: center;}
.his .info p {font-size: 70px;}
.his .info ul li {margin-bottom: 10px; padding-bottom: 10px; line-height: 1.5;}
.his .info ul li:before {top:12px;}

/*파트너사*/
.logo_tbox  {margin-top: 60px;}
.p_btn {background: #007afe; color: #fff;}
.logo_tbox ul {display: flex ; flex-direction: column; align-items: center;}
.logo_tbox ul li {width: 80%; margin: 3% 1%;}

.pas_txt_box .pas_txt1{white-space: pre-wrap; width: 90%; margin: 0 auto; margin-top: 20px; font-size: 14px;}
.pas_txt_box .pas_txt2 {white-space: pre-wrap; width: 90%; margin: 0 auto; margin-top: 10px; font-size: 14px;}
.bg_pas {margin-top:50px;}
.bg_pas .bg_inner {display: block;}
.bg_pas .bg_inner .pas_txt_box {text-align: center; width: 100%;}
.pas_img {display: flex ; justify-content: center; margin-top: 40px;}
.pas_img>img {width: 80%; margin: 0 auto; text-align: center;}

}