@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800,900");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
Create date : 2020-12-10
-------------------------------------------------*/
#header{position:relative;border-bottom:1px solid #eee;z-index:99}

#header #searchWrap { position: absolute; left: 50%; top: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100vw; background: #00a0e0; padding: 0 1rem; text-align: center; color: #fff; height: 0; opacity: 0; padding: 0 1rem; overflow: hidden; visibility: hidden; -webkit-transition: padding .4s,opacity .4s; transition: padding .4s,opacity .4s; }

#header #searchWrap.active { padding: 3.1rem 1rem; height: auto; opacity: 1; visibility: visible; overflow: visible; }

#header #searchWrap .search-area { width: 30.25rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; max-width: 100%; border-bottom: 2px solid #fff; margin: auto; text-align: left; overflow: hidden; margin-bottom: .75rem; }

#header #searchWrap .search-area input { background: transparent; border: 0; width: calc(100% - 3.5rem); color: black; font-size: .9rem; font-weight: 300; float: left; height: 2.5rem; line-height: 2.5rem; padding: 0 10px; outline: 0 none; }

#header #searchWrap .search-area input::-webkit-input-placeholder { color: black; font-weight: 300; }

#header #searchWrap .search-area input:-ms-input-placeholder { color: black; font-weight: 300; }

#header #searchWrap .search-area input::-ms-input-placeholder { color: black; font-weight: 300; }

#header #searchWrap .search-area input::placeholder { color: black; font-weight: 300; }

#header #searchWrap .search-area button { font-size: 1.25rem; float: right; padding: 0 .75rem; height: 2.5rem; }

#header #searchWrap .keywords { margin-bottom: 2.1rem; }

#header #searchWrap .keywords > * { display: inline-block; vertical-align: middle; }

#header #searchWrap .keywords span { color: #fff; font-size: .9rem; font-weight: 700; background: #fa4d09; border-radius: 30px; padding: 0 .77rem; margin-right: .3rem; }

#header #searchWrap .keywords a { font-weight: 300; opacity: .7; -webkit-transition: opacity .4s; transition: opacity .4s; padding: 0 .5rem; position: relative; color: black; font-size: .8rem; }

#header #searchWrap .keywords a:after { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: .7rem; background: #fff; opacity: .5; content: ''; }

#header #searchWrap .keywords a:last-child { padding-right: 0; }

#header #searchWrap .keywords a:last-child:after { display: none; }

#header #searchWrap .keywords a:hover, #header #searchWrap #searchWrap .keywords a:focus { opacity: 1; }

#header #searchWrap .close { position: relative; display: block; width: 100px; margin: auto; text-align: center; padding: .35rem 0 .4rem; font-size: .7rem; font-weight: 300; border: 1px solid rgba(255, 255, 255, 0.5); overflow: hidden; color: black; }

#header #searchWrap .close:after { position: absolute; left: 70%; top: 50%; -webkit-transform: skewX(45deg) translate(-50%, -50%); transform: skewX(45deg) translate(-50%, -50%); width: 0; height: 100%; background: #fff; content: ''; opacity: 1; -webkit-transition: all .4s; transition: all .4s; }

#header #searchWrap .close span { position: relative; z-index: 1; }

#header #searchWrap .close:hover span, #header #searchWrap #searchWrap .close:focus span { color: #333; }

#header #searchWrap .close:hover:after, #header #searchWrap .close:focus:after { width: 150%; opacity: 1; }

/*.gnbWrap { float: right; margin-right: calc(17.5rem / 2); }*/
.gnbWrap {  }

.gnbWrap #gnb > .title { display: none; }

.gnb_bg { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; display: block; position: absolute; left: 0; top: 4.8rem; z-index: 1; width: 100%; background-color: rgba(0, 0, 0, 0.6); content: ''; }

#head_menu { text-align: center; }

#head_menu > li { display: inline-block; vertical-align: top; margin: 0 0 0 2.25rem; }

#head_menu > li.on > a{font-weight:600;color:#145EA0}

#head_menu > li.on .submenu { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 64rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; height:17.25rem; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

/*#head_menu > li > a { position: relative; font-size: .9rem; font-weight: 500; display: block; height: calc(9.6rem / 2); color: #333; padding: 0 .6rem; line-height: calc(9.6rem / 2); }*/
#head_menu > li > a { position: relative; font-size: .9rem; font-weight: 500; display: block; height: calc(5.6rem / 2); color: #333; padding: 0 .6rem; line-height: calc(5.6rem / 2); }

#head_menu > li > a:after { position: absolute; left: 0; bottom: 0; -webkit-transform: scaleX(0); transform: scaleX(0); width: 100%; height: 5px; background: #00a0e0; content: ''; -webkit-transition: all .3s; transition: all .3s; }

#head_menu .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 64rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; top: 100%; z-index: 2; padding-left: 16rem; }

#head_menu .submenu::before { position: absolute; left: 0; top: 0; z-index: -1; width: 10000%; height: 100%; background-color: #F5F7FC; content: ''; }

#head_menu .submenu .title { position: absolute; left: 0; top: 0; z-index: 2; width: 16rem; height: 100%; padding-top: 1.5rem; color: #fff; text-align: left; }

#head_menu .submenu .title::before { position: absolute; right: 0; top: 0; z-index: -1; width: 1000%; height: 100%; background-position:right bottom;background-repeat:no-repeat;background-image:url("/kr/img/common/gnb_bg.png"), linear-gradient(to bottom, #1E86C7 0%, #1994D1 100%); content: '';border-radius:0 0 2.5rem 0}

#head_menu .submenu .title strong { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }

#head_menu .submenu .title span { display:none; width: 10rem; max-width: 100%; word-break: keep-all; }

#head_menu .submenu .depth2 { margin: 1.5rem 0 1.5rem 1.25rem; text-align: left; }

#head_menu .submenu .depth2 li { float: left; width: calc(33.333% - 1.25rem); margin: 0 0 0.75rem 1.25rem; }

#head_menu .submenu .depth2 a { display: block; position: relative; padding: 0.75rem; border: 1px solid #ddd; background-color: #fff; font-weight: 400; -webkit-transition: all 0.3s; transition: all 0.3s;border-radius:.5rem;overflow:hidden}

#head_menu .submenu .depth2 a::before { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; font-size: 0.9rem; right: 1rem; color: #aaa; content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; }

#head_menu .submenu .depth2 a::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;bottom:-1px;opacity:0;background-image:linear-gradient(120deg, #FF3665 0%, #EB3535 100%);transition:all .3s;z-index:-1}

#head_menu .submenu .depth2 a:hover::after, #head_menu .submenu .depth2 a:focus::after{opacity:1}

#head_menu .submenu .depth2 a:hover, #head_menu .submenu .depth2 a:focus {border-color:transparent;background-color:transparent;color:#fff }

#head_menu .submenu .depth2 a:hover::before, #head_menu .submenu .depth2 a:focus::before { color: inherit; }

#head_menu .submenu .depth3 { display: none; }

#header.active .gnb_bg { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 100%; height: calc(100vw - 4.8rem); -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

/*#header .AllMn { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; width: 23px; }*/
#header .AllMn { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 11px; width: 23px; }

#header .AllMn .bar { display: block; width: 100%; height: 2px; background: #333; -webkit-transition: all .4s; transition: all .4s; }

#header .AllMn .bar:nth-of-type(2) { margin: 0.25rem 0; }

#header .AllMn:hover .bar:nth-of-type(1), #header .AllMn:focus .bar:nth-of-type(1) { -webkit-transform: translateY(7px); transform: translateY(7px); }

#header .AllMn:hover .bar:nth-of-type(3), #header .AllMn:focus .bar:nth-of-type(3) { -webkit-transform: translateY(-7px); transform: translateY(-7px); }

#allgnb { position: fixed; left: 0; top: 0; width: 100vw; height: 0; opacity: 1; background: #fff; content: ''; -webkit-transition: all .4s; transition: all .4s; z-index: 1; }

#allgnb.active { height: 100vh; opacity: 1; }

#allgnb.active .container { overflow: visible; visibility: visible; opacity: 1; height: auto; }

#allgnb .container { position: absolute; left: 50%; top: 5rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 64rem; max-width: calc(100% - 2rem); overflow: hidden; visibility: hidden; opacity: 0; height: 0; -webkit-transition: all .4s .6s; transition: all .4s .6s; }

#allgnb .all_close { position: absolute; right: 0; top: 0; font-size: 2rem; color: #000; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; line-height: 1; }

#allgnb .all_close:hover, #allgnb #allgnb .all_close:focus { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

#head_menu_all { margin: 0 0 0 -1.5rem; overflow: hidden; }

#head_menu_all > li { float: left; width: calc(16.666% - 1.2rem); margin: 2.5rem 0 0 1.2rem; }

#head_menu_all > li > a { font-size: 1.5rem; font-weight: 800; color: #000; display: block; padding: 1.1rem 0; position: relative; }

#head_menu_all .submenu { border-top: 1px solid #000; }

#head_menu_all .submenu > ul > li > a { position: relative; font-size: .8rem; color: #000; font-weight: 500; display: block; border-bottom: 1px solid #ddd; padding: .8rem 0; }

#head_menu_all .submenu > ul > li.plus > a:after { position: absolute; right: .85rem; top: .75rem; font-family: 'xeicon'; content: '\e914'; font-size: 1rem; color: #000; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }

#head_menu_all .submenu > ul > li > a:hover, #head_menu_all #head_menu_all .submenu > ul > li > a:focus { color: #00a0e0; }

#head_menu_all .submenu > ul > li.plus > a:hover:after, #head_menu_all #head_menu_all .submenu > ul > li.plus > a:focus:after { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); color: #00a0e0; }

#head_menu_all .submenu > ul > li.plus.active > a, #head_menu_all #head_menu_all .submenu > ul > li.plus.active > a:after { color: #00a0e0; }

#head_menu_all .lnb-detail { height: 0; opacity: 0; overflow: hidden; visibility: hidden; -webkit-transition: all .3s; transition: all .3s; }

#head_menu_all .lnb-detail a { position: relative; display: block; font-weight: 400; color: #767676; padding-left: 10px; }

#head_menu_all .lnb-detail li + li { margin-top: .3rem; }

#head_menu_all .lnb-detail a:before { position: absolute; left: 0; top: .6rem; width: 4px; height: 1px; background: #767676; content: ''; }

#head_menu_all .lnb-detail a:hover, #head_menu_all #head_menu_all .lnb-detail a:focus { color: #00a0e0; }

#head_menu_all .lnb-detail a:hover:before, #head_menu_all #head_menu_all .lnb-detail a:focus:before { background: #00a0e0; }

#head_menu_all .lnb-detail a:hover span, #head_menu_all #head_menu_all .lnb-detail a:focus span { border-bottom: 1px solid #00a0e0; }

#head_menu_all .submenu > ul .active .lnb-detail { border-bottom: 1px solid #ddd; padding: 1rem 0 .9rem; opacity: 1; overflow: visible; visibility: visible; height: auto; }

/*#header .headerWrap { width: 64rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; position: relative; z-index: 2; height: calc(9.6rem / 2); background-color: #fff; }*/
#header .headerWrap {  max-width: 100%; z-index: 2; height: calc(5.6rem / 2); background-color: #fff; }

#header .headerWrap .logo a { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: calc(23.1rem / 2); height: calc(3.6rem / 2); background: url("/kr/img/common/logo_ov.png") no-repeat center center/cover;background-size:99%}

/*#header .headerWrap .lang { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 0.6rem; right: calc(8rem / 2); }*/
#header .headerWrap .lang { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 0.6rem; right: calc(14rem / 2); }

#header .headerWrap .lang i { font-size: 0.75rem; position: relative; top: -1px; margin-right: 0.25rem; vertical-align: middle; }

/*#header .headerWrap .search-btn { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: calc(5rem / 2); }*/
#header .headerWrap .search-btn { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 2.86rem; height: 103%; width:60px; }

#footer { font-size: 0.75rem}
#footer .footer_top{padding:.5rem;background:#F1F4F7}
#footer .footer_top .row{float:left;color:#333}
#footer .logo { float: left; width: calc(12rem / 2); }
/*#footer .util {float:left;padding-top:.9rem;width: calc(100% - (43rem / 2)); font-size:.8rem;line-height:1.5rem;color:#666;word-break:keep-all}*/
#footer .util {float:left;padding-top:.9rem;width: calc(100% - (43rem / 2)); font-size:.8rem;line-height:1.5rem;color:#1C243A;word-break:keep-all}
#footer .row { margin-top: 0.4rem; overflow:hidden}
#footer .row li {position:relative;float:left;margin-right:.6rem;padding-right:.6rem}
#footer .row li:first-of-type{color:#145EA0;font-weight:bold}
#footer .row li::after {content:"";position:absolute;right:0;top:.3rem;width:1px;height:.6rem;border-left:1px solid #ddd}
#footer .row li:last-child{margin-right:0;padding-right:0}
#footer .row li:last-child::after { display: none; }
#footer .row li a[target="_blank"]:after{content:"\e980";display:inline-block;margin-left:.2rem;color:#324E96;font-family:"xeicon"}
#footer .row li a:hover,
#footer .row li a:focus{text-decoration:underline}
/*#footer .related {float:right;position:relative;font-size: 0.7rem; width: calc(21.2rem / 2); height: 2rem; background-color: #fff; color:#555}*/
#footer .related {float:right;position:relative;font-size: 0.7rem; width: calc(21.2rem / 2); height: 2rem; background-color: #D5DBE7; color:#555}
#footer .related button { position: relative; width: 100%; height: 2rem; padding-left:.95rem; text-align: left;border-radius:.25rem}
#footer .related button::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right:.7rem; content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; }
#footer .related .scroll { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; left: 0; bottom: 100%; background-color: #000;border-radius:.25rem;z-index:1}
#footer .related .scroll a { display: block;color:#fff}
#footer .related.on button::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }
#footer .related.on .scroll { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 100%; padding: 1rem; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
#footer .footer_bottom{}
#footer .footer_bottom .container{padding:1.15rem 0 1.6rem}
#footer .footer_bottom .helpCall{float:right;line-height:1.3}
#footer .footer_bottom .helpCall:after{content:"";display:block;clear:both}
#footer .footer_bottom .helpCall>*{float:left}
#footer .footer_bottom .helpCall>img{margin-right:1rem}
#footer .footer_bottom .helpCall .help_detail em{color:#555}
#footer .footer_bottom .helpCall .help_detail em span{font-weight:bold;color:#01B4C4}
#footer .footer_bottom .helpCall .help_detail p{margin-top:.25rem;height:1.3rem;line-height:1.3rem;background: #5f666c;color:#fff;font-size:.65rem;text-align:center;border-radius:.75rem}
#footer .footer_bottom .helpCall .help_detail strong{font-family:"Roboto", sans-serif;font-size:1.5rem}

@media (max-width: 1280px) {
  /*.gnbWrap { margin-right: 7rem; }*/
  #head_menu > li { margin-left: 1rem; }
}

@media (max-width: 1130px){
  #footer .util{float:none;width:100%;padding:0}
  #footer .footer_bottom .helpCall{float:none;margin-top:1rem}
}

@media (max-width: 1064px){
  #gnb, #allgnb h2 { display: none; }
}

@media (max-width: 1024px) { #gnb, #allgnb h2 { display: none; }
  /*#allgnb { top: 3rem; background:#173b5d; }*/
  #allgnb { top: 2.87rem; background:#173b5d; }
  #allgnb .all_close { font-size: 1.25rem; top: -2rem; right: 1rem; width: 23px; height: 23px; }
  #allgnb .container { top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition-delay: 0s; transition-delay: 0s; max-width: 100%; }
  #allgnb.active { height: calc(100% - 3rem); }
  #allgnb.active .container { width: calc(100% + 2rem); }
  #head_menu_all { margin: 0; padding-top: 1.5rem; }
  #head_menu_all > li { float: none; width: 100%; margin: 0; }
  #head_menu_all > li + li { margin-top: .7rem; }
  #head_menu_all > li > a { color: #fff; width: 35vw; text-align: center; font-size: 1rem; padding: .8rem 0; }
  #head_menu_all > li > a span { position: relative; }
  #head_menu_all > li > a span:before { position: absolute; right: -15px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fa4d09; content: ''; opacity: 0; -webkit-transition: opacity .2s; transition: opacity .2s; }
  #head_menu_all > li.active > a span:before { opacity: 1; }
  #head_menu_all .submenu { overflow-y: auto; position: absolute; right: 0; top: 0; width: 65vw; height: calc(100vh - 3rem); background: #fff; border-top: 0; padding: 1.5rem 1.35rem; display: none; word-break: keep-all; }
  #head_menu_all .submenu > ul > li > a { font-size: 0.9rem; }
  #head_menu_all .active .submenu { display: block; }
  #wrap { padding-top: 2.7rem; }
  #header { position: fixed; left: 0; top: 0; z-index: 10; width: 100%; background-color: #fff; }
  #header .headerWrap { /*height: 3rem;*/ }
  #header .headerWrap .logo a { width: 8.5rem; height: 1.75rem}
  #header #searchWrap .keywords { margin-bottom: 1rem; }
  #header #searchWrap.active { padding: 1rem; }
  #footer { padding:0 }
  #footer .util { float: none; width: auto;}
  #footer .footer_top{padding:0.5rem 0}
}
@media (max-width:680px){
  #footer .logo{float:none;width:auto}
  #footer .logo img{margin-bottom:.5rem}
}
@media (max-width:600px){
  #footer .footer_top{text-align:center}
  #footer .footer_top .row{float:none;display:inline-block;margin-bottom:.5rem}
  #footer .related{float:none;width:100%}
}
@media (max-width:410px){
  #footer .footer_bottom .container,
  #footer .footer_bottom .helpCall{text-align:center}
  #footer .footer_bottom .helpCall>*{float:none}
  #footer .footer_bottom .helpCall>img{margin:0 auto}
  #footer .footer_bottom .helpCall .help_detail{margin-top:.5rem}
  #footer .footer_bottom .helpCall .help_detail p{display:inline-block;padding:0 .5rem}
  #footer .footer_bottom .helpCall .help_detail strong{display:block}
}





.o_chart {
  width: 992px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 31px 0 63px 38px;
}


.o_chart .wrap {
  display: flex;
}


.o_chart .wrap .oc_sub {
  margin-right: 18px;
}


.o_chart .wrap .oc_sub > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  background-color: #5f94af;
}


.o_chart .wrap .oc_sub > div p {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}

.o_chart .wrap .oc_sub > div p br {
  display: none;
}



.o_chart .wrap .oc_sub .ocs_1 {
  height: 116px;
  margin-bottom: 32px;
}

.o_chart .wrap .oc_sub .ocs_2 {
  height: 211px;
  margin-bottom: 22px;
}

.o_chart .wrap .oc_sub .ocs_3 {
  height: 39px;
  margin-bottom: 152px;
}

.o_chart .wrap .oc_sub .ocs_4 {
  height: 108px;
}


.o_chart .wrap .oc_main {
  position: relative;
  width: 684px;
}



.o_chart .wrap .oc_main > div .box {
  width: 314px;
  border: 1px solid #525252;
  box-sizing: border-box;
  margin: 0 auto;
}

.o_chart .wrap .oc_main > div .box .h2_wrap {
  background-color: #107979;
  height: 39px;
  margin: 2px 2px 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.o_chart .wrap .oc_main > div .box .h2_wrap h2 {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.o_chart .wrap .oc_main > div .box .h2_wrap h2 br {
  display: none;
}

.o_chart .wrap .oc_main > div .box .p_wrap {
  padding: 27px 0;
}

.o_chart .wrap .oc_main > div .box .p_wrap p {
  font-size: 16px;
  text-align: center;
}

.o_chart .wrap .oc_main > div .box .p_wrap p br {
  display: none;
}




.o_chart .wrap .oc_main .oc_1 .box .h2_wrap,
.o_chart .wrap .oc_main .oc_4 .box .h2_wrap {
  background-color: #3d6ab4;
}

.o_chart .wrap .oc_main .oc_2 {
  display: flex;
  position: absolute;
  top: 148px;
  right: 0;
}

.oc_line_sub {
  display: block;
  width: 118px;
  height: 1px;
  background-color: #d2d8dd;
}

.o_chart .wrap .oc_main .oc_2 .oc_line_sub {
  margin-top: 20px;
}


.o_chart .wrap .oc_main .oc_2 .box {
  width: 224px;
}

.o_chart .wrap .oc_main .oc_2 .box .p_wrap {
  padding-left: 20px;
}

.o_chart .wrap .oc_main .oc_2 .box .p_wrap p {
  text-align: left;
  padding: 0;
}

.o_chart .wrap .oc_main .oc_2 .box .p_wrap p .padl {
  padding-left: 50px;
}



.o_chart .wrap .oc_main .oc_3 {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 269px;
  left: 0;
}

.o_chart .wrap .oc_main .oc_3 .box {
  width: 220px;
  border: 0;
}

.o_chart .wrap .oc_main .oc_3 .box .h2_wrap {
  margin: 0;
}


.o_chart .wrap .oc_main .oc_line {
  width: 1px;
  height: 457px;
  background-color: #d2d8dd;
  margin: 0 auto;
}

.o_chart .wrap .oc_main .oc_3 .oc_line_sub {
  width: 123px;
}




.o_chart .oc_bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 824px;
  height: 43px;
  background-color: #5f94af;
  margin-top: 24px;
}

.o_chart .oc_bottom p {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}





@media all and (max-width:1080px) {
  .o_chart {
    width: 650px;
  }

  .o_chart .wrap .oc_sub > div {
    width: 90px;
  }

  .o_chart .wrap .oc_sub > div p {
    font-size: 12px;
  }

  .o_chart .wrap .oc_sub .ocs_1 {
    height: 97px;
    margin-bottom: 51px;
  }

  .o_chart .wrap .oc_sub .ocs_2 {
    height: 167px;
  }

  .o_chart .wrap .oc_sub .ocs_3 {
    margin-bottom: 76px;
  }

  .o_chart .wrap .oc_sub .ocs_4 {
    height: 97px;
  }

  .o_chart .wrap .oc_main {
    width: 480px;
  }

  .o_chart .wrap .oc_main > div .box {
    width: 240px;
  }

  .o_chart .wrap .oc_main > div .box .h2_wrap h2 {
    font-size: 12px;
  }

  .o_chart .wrap .oc_main > div .box .p_wrap {
    padding: 20px 0;
  }

  .o_chart .wrap .oc_main > div .box .p_wrap p {
    font-size: 12px;
  }

  .o_chart .wrap .oc_main .oc_line {
    height: 355px;
  }

  .oc_line_sub,
  .o_chart .wrap .oc_main .oc_3 .oc_line_sub {
    width: 70px;
  }

  .o_chart .wrap .oc_main .oc_2 .box {
    width: 170px;
  }

  .o_chart .wrap .oc_main .oc_2 .box .p_wrap {
    padding: 20px 0 20px 10px;
  }

  .o_chart .wrap .oc_main .oc_2 .box .p_wrap p .padl {
    padding-left: 38px;
  }

  .o_chart .wrap .oc_main .oc_3 {
    left: 20px;
    bottom: auto;
    top: 337px;
  }

  .o_chart .wrap .oc_main .oc_3 .box {
    width: 150px;
  }

  .o_chart .oc_bottom {
    width: 90%;
    height: 35px;
  }

  .o_chart .oc_bottom p {
    font-size: 12px;
  }
}







@media all and (max-width:720px) {
  .o_chart {
    width: 300px;
    padding: 20px;
  }

  .o_chart .wrap .oc_sub {
    margin-right: 10px;
  }

  .o_chart .wrap .oc_sub > div {
    width: 50px;
  }


  .o_chart .wrap .oc_sub > div p {
    font-size: 10px;
  }

  .o_chart .wrap .oc_sub > div p br {
    display: block;
  }



  .oc_line_sub,
  .o_chart .wrap .oc_main .oc_3 .oc_line_sub {
    width: 24px;
  }

  .o_chart .wrap .oc_sub .ocs_1 {
    height: 86px;
    margin-bottom: 34px;
  }

  .o_chart .wrap .oc_sub .ocs_2 {
    height: 182px;
    margin-bottom: 35px;
  }

  .o_chart .wrap .oc_sub .ocs_3 {
    height: 30px;
    margin-bottom: 34px;
  }

  .o_chart .wrap .oc_sub .ocs_4 {
    height: 75px;
  }





  .o_chart .wrap .oc_main {
    width: 230px;
  }

  .o_chart .wrap .oc_main > div .box {
    width: 120px;
  }

  .o_chart .wrap .oc_main > div .box .p_wrap p br {
    display: block;
  }


  .o_chart .wrap .oc_main .oc_1 .box {
    margin: 0;
    margin-left: 46px;
  }

  .o_chart .wrap .oc_main .oc_2 {
    top: 120px;
  }

  .o_chart .wrap .oc_main .oc_2 .box {
    width: 100px;
  }

  .o_chart .wrap .oc_main .oc_2 .box .p_wrap {
    padding: 10px 0 10px 10px;
  }

  .o_chart .wrap .oc_main .oc_2 .box .p_wrap p {
    margin-top: 10px;
  }

  .o_chart .wrap .oc_main .oc_2 .box .p_wrap p:first-child {
    margin-top: 0;
  }

  .o_chart .wrap .oc_main .oc_2 .box .p_wrap p .w720 {
    display: block;
    margin-bottom: 3px;
    font-weight: 700;
  }

  .o_chart .wrap .oc_main .oc_2 .box .p_wrap p .padl {
    padding-left: 0;
  }

  .o_chart .wrap .oc_main .oc_3 {
    left: 0;
  }

  .o_chart .wrap .oc_main .oc_3 .box {
    width: 82px;
  }

  .o_chart .wrap .oc_main .oc_4 .box {
    margin: 0;
    margin-left: 46px;
  }

  .o_chart .wrap .oc_main > div .box .h2_wrap {
    height: 30px;
  }

  .o_chart .wrap .oc_main > div .box .h2_wrap h2 {
    font-size: 10px;
  }

  .o_chart .wrap .oc_main > div .box .h2_wrap h2 br {
    display: block;
  }

  .o_chart .wrap .oc_main > div .box .p_wrap {
    padding: 15px 0;
  }

  .o_chart .wrap .oc_main > div .box .p_wrap p {
    font-size: 10px;
  }

  .o_chart .wrap .oc_main .oc_line {
    height: 315px;
    margin: 0;
    margin-left: 106px;
  }

  .o_chart .oc_bottom {
    height: 30px;
    margin-top: 14px;
  }

  .o_chart .oc_bottom p {
    font-size: 10px;
  }
}

/* 2025.10.23 기준 header.jsp 변경 css(시작) */
.headerWrap .lang2,
.headerWrap .search-btn,
.headerWrap .AllMn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 54px;
  color: #fff;
  font-size: 1rem;
  margin-left: 8px;
  box-sizing: border-box;
}

.headerWrap .lang2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 33px;
  height: auto;
  background: #f0f3fa;
  color: #173b5d;
  font-weight: 600;
  border-radius: 22px;
  font-size: 0.9rem;
  line-height: 1.2;
  margin-left: 8px;
}

.headerWrap .search-btn {
  background: #2196f3;
}

.headerWrap .AllMn2 {
  flex-direction: column;
  padding: 10px 0;
}

.headerWrap .AllMn2 .bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 4px 0;
}

#header .AllM2 {
  position: absolute;
  top: 28px;
  right: -3px;
  width: 60px;
  height: 103%;
  background: #EA764D;
  display: flex;
  justify-content: center;
  align-items: center;
}

#header .AllM2 div {
  width: 23px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#header .AllM2 .bar2 {
  display: block;
  width: 100%;
  height: 2px;
  background: #333;
  transition: all .4s;
}

@media (max-width: 600px){
  #lang{
    display: none;
  }
}
/* 2025.10.23 기준 header.jsp 변경 css(끝) */

/* 2025.10.23 기준 main.jsp 변경 css(시작) */
.section33 {
		position: relative;
		z-index: 1;
		margin-bottom: 2.5rem;
		height: 16rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.section33:before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		max-width: 100%;
		background-image: url(/kr/img/main/visual_new.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		z-index: 0;
		height: 115%;
	}

	.visual {
		position: relative;
		text-align: center;
		z-index: 1;
		--visual-base: 1.5rem;
		font-size: var(--visual-base);
		line-height: 1.25;
	}

	.visual .txt {
		max-width: clamp(23rem, 65%, 60rem);
		margin: 0 auto;
		display: flex;           /* flex로 변경 */
		flex-direction: column;  /* 세로 정렬 */
		align-items: center;     /* 자식 요소 가로 중앙 정렬 */
	}

	.visual_span {
		color: #FFF;
		text-align: center;
		font-family: Paperlogy;
		font-size: 0.4em;
		font-weight: 100;
		line-height: 1.4;
		letter-spacing: 0.03375rem;
		margin-bottom: 0.6em;
	}

	.visual_name {
		color: #FFF;
		text-align: center;
		font-family: Paperlogy;
		font-size: 1.3em;
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: 0.04063rem;
		margin-bottom: 0.4em;
	}

	.visual_name2 {
		color: #7ED2FF;
		font-family: Paperlogy;
		font-size: 1.0em;
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: 0.04063rem;
	}

	.visual_sub_title1 {
		color: #FFF;
		text-align: center;
		font-family: Paperlogy;
		font-size: 0.50em;
		font-weight: 200;
		letter-spacing: 0.04688rem;
		margin-bottom: 0.3em;
	}

	.visual_sub_title2 {
		color: #FFF;
		font-family: Paperlogy;
		font-size: 0.9em;
		font-weight: 800;
		line-height: 1.45;
		letter-spacing: 0.04688rem;
	}

	.roundButton {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 11rem;
		height: 2.1rem;
		padding: 0.8rem 1.5625rem;
		border-radius: 12.5rem;
		background: #0A2443;
		margin: 1rem auto 0.5rem auto;
		text-align: center;
		text-decoration: none;
		color: #fff;
		cursor: pointer;
		transition: background 0.3s ease;
	}

	.roundButton:hover {
		background: #1e4778;
	}

	.roundButton .introInstt {
		font-family: Paperlogy;
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 1.4rem;
		color: #fff;
		text-align: center;
	}

	.section22 {
		position: relative;
		z-index: 1;
		padding-top: clamp(4rem, 8vw, 6rem);
		margin-bottom: 3.5rem;
		width: 100%;
		min-height: clamp(7rem, 11vw, 8.5rem);
	}

	.section22:before {
		content: "";
		position: absolute;
		top: -60px;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		max-width: clamp(300px, 90%, 60rem);
		height: clamp(5rem, 8vw, 6.5rem);
		z-index: 0;
		border-radius: 0.325rem 2.625rem 0.325rem 0.325rem;
		background: linear-gradient(73deg, #158ECF 36%, #264B9B 100%);
	}

	.icon-list {
		position: absolute;
		top: calc((11 * 100vw) / 1800);
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: space-between;
		gap: clamp(0.25rem, 1vw, 1rem);
		width: clamp(18rem, 81vw, 53rem);
		max-width: 100%;
		height: clamp(6.0rem, 5vw, 6.5rem);
		z-index: 2;
	}
	.icon-list li {
		flex: 0 0 auto;
		position: relative;
	}

	.icon-list li img {
		width: clamp(35px, 15.0vw, 80px);
		height: auto;
		/*max-height: 90%;*/
		max-height: clamp(80%, 8vw, 90%);
		object-fit: contain;
		display: block;
		margin: auto;
		transition: width 0.3s ease;
		z-index: 3;
		position: relative;
	}

	.icon-list li::after {
		content: "";
		position: absolute;
		top: 4%;
		right: 16%;
		width: 30px;
		aspect-ratio: 1 / 1;
		background: #ff6600;
		border-radius: 50%;
		opacity: 0;
		transition: opacity 0.3s ease;
		z-index: 1;
	}

	.icon-list li:hover::after {
		opacity: 1;
	}

	:root {
		--section22-min-height: clamp(7rem, 11vw, 8.5rem);
		--section22-before-height: clamp(5rem, 8vw, 6.5rem);
	}

	.section22 {
		margin-bottom: var(--section22-margin-bottom);
		min-height: var(--section22-min-height);
	}

	.section22:before {
		height: var(--section22-before-height);
	}

	@media (max-width: 600px) {

		.section22{
			padding-top: 8rem
		}

		.section22:before {
			height: 13.0rem;
			top: -60px;
		}

		.icon-list {
			top: -2.3rem;
			left: 50%;
			transform: translateX(-50%);
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-start;
			height: auto;
			padding: 0.5rem 0;
		}

		.icon-list li {
			width: 29%;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.icon-list li img {
			width: clamp(35px, 20vw, 75px);
			height: clamp(30px, 28vw, 100px);
			object-fit: contain;
		}

		.icon-list li::after {
			top: 5%;
			right: 29%;
		}
	}

	.news-header {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 0.15rem;
	}

	.news-header-popup {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 0.5rem;
	}

	.news-title {
		color: #192E63;
		font-family: Paperlogy;
		font-size: 1.4rem;
		font-weight: 800;
	}

	.news-tabs {
		display: flex;
		gap: 0.9375rem;
		align-items: center;
		white-space: wrap;
	}

	.news-tabs-popup{
		display: flex;
		gap: 0.9375rem;
		align-items: center;
		white-space: wrap;
	}

	.news-tab {
		color: #8A99AB;
		font-family: Paperlogy;
		font-size: 0.92rem;
		font-weight: 700;
		cursor: pointer;
		position: relative;
		padding-bottom: 0.25rem;
	}

	.news-tab.active {
		color: #fa4d09;
	}

	.news-tab:hover {
		color: #fa4d09;
	}

	.news-tab.active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fa4d09;
	}

	.news-tab2 {
		color: #8A99AB;
		font-family: Paperlogy;
		font-size: 0.9rem;
		font-weight: 700;
		cursor: pointer;
		position: relative;
		padding-bottom: 0.25rem;
	}

	.news-tab2.active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
	}

	/* 정지/재생 버튼 스타일 (WA 접근성) */
	.news-tab2.pause-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #8A99AB;
		border-radius: 4px;
		padding: 4px 10px;
		margin-left: 5px;
		text-decoration: none;
		transition: all 0.2s ease;
		font-size: 12px;
		font-weight: 500;
		color: #555;
		background-color: #fff;
	}
	.news-tab2.pause-btn:hover,
	.news-tab2.pause-btn:focus {
		background-color: #8A99AB;
		color: #fff;
	}

	.news-wrapper {
		position: relative;
		z-index: 3;
		display: flex;
		justify-content: center;
		align-items: stretch;
		width: 100%;
		max-width: clamp(300px, 90%, 60rem);
		margin: 0 auto;
		margin-bottom: 2.5rem;
	}

	.news-area {
		width: 55%;
		background: #ffffff;
		border-radius: 0.5rem;
	}

	.side-area {
		width: 45%;
		padding-left: 2rem;
	}

	@media (max-width: 1115px) {
		.news-wrapper {
			flex-direction: column;
			max-width: 90%;

		}
		.news-area,
		.side-area {
			width: 100%;
			padding: 0;
		}
	}

	.news-item{
		display: flex;
		padding: var(--padding-3, 0.5rem) 0;
		align-items: center;
		gap: 0.5rem;
		align-self: stretch;
	}

	.news-label{
		display: flex;
		width: 4.5rem;
		height: 1.5rem;
		padding: 0 var(--padding-3, 0.5rem);
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		border-radius: clamp(0rem, 1.5vw, 5.625rem);
		background: #fa4d09;
		color: white;
	}
	.board-title {
		color: var(--color-text-basic, #1E2124);
		font-family: "Pretendard GOV";
		font-size: 0.85rem;
		font-style: normal;
		font-weight: 500;
		line-height: 150%;
		letter-spacing: var(--typo-letter-spacing-0, 0);
		padding: 0 var(--padding-1, 0.125rem);
		align-items: center;
		gap: var(--gap-2, 0.25rem);
		flex: 1 0 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
		max-width: 100%;
		text-decoration: none;
		display: flex;
	}

	.board-title span {
		position: relative;
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.board-title span::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		border-bottom: 1px solid #151515;
		transition: width 0.3s ease;
	}

	.board-title:hover span::after {
		width: 100%;
	}

	.board-date{
		overflow: hidden;
		color: var(--color-text-subtle, #464C53);
		text-overflow: ellipsis;

		font-family: var(--typo-font-type, "Pretendard GOV");
		font-size: var(--font-size-body-medium, 0.85rem);
		font-style: normal;
		font-weight: 400;
		line-height: 150%;
		letter-spacing: var(--typo-letter-spacing-0, 0);
		display: block;
	}

	.popup-zone{
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		border-radius: 1.125rem;
		background: #D3E2FF;
		padding : var(--padding-3, 0.5rem) 0;
		box-sizing: border-box;
	}

	.popup-inner {
		width: 100%;
		height: 11.07181rem;
		flex-shrink: 0;
		box-sizing: border-box;
		padding: 0.4rem 0.5rem;
		box-sizing: border-box;
	}

	.popup-inner img {
		width: 100%;
    height: 100%;
		object-fit: fill;
		display: block;
	}

	.popup-slide-item {
		width: 100%;
		height: 10.5rem;
		background: #FFFFFF;
	}

	/* 슬라이더 포커스 스타일 (WA 접근성) */
	.popup-slider a {
		position: relative !important;
	}
	.popup-slider a:focus {
		outline: none !important;
	}
	.popup-slider a:focus::after {
		content: '' !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		border: 3px solid #000 !important;
		pointer-events: none !important;
		z-index: 100 !important;
	}

	@media (max-width: 600px) {
		.news-wrapper{
			margin-top:3rem;
		}

		.news-header {
			display: inline-grid;
		}

		.news-tabs {
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			column-gap: clamp(0rem, 7vw, 1.91rem);
			row-gap: 0.5rem;
			text-align: center;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			margin-top: 2%;
		}

		.news-tab {
			width: 3rem;
			font-size: 1.0rem;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.board-date{
			display: none;
		}
	}

	@media (max-width: 400px) {
		.news-tabs {
			flex-wrap: nowrap;
			overflow-x: hidden;
			justify-content: space-between;
			width: 100%;
		}

		.news-tab {
			flex: 1 1 0%;
			font-size: clamp(0.9rem, 2.2vw, 0.8rem);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: center;
			min-width: 0;
		}
	}

	.business-content {
		width: 100%;
		height: auto;
		flex-shrink: 0;
		border-radius: 4.375rem 0 0 0;
		background: linear-gradient(24deg, #4796CA 23.55%, #0B5DAA 65.51%), #00579F;
		background-image: url(/kr/img/main/business_background.png);
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 24rem auto;
		padding-top: 2.5rem;
		padding-bottom: 2rem;
	}

	.business-content-wrapper {
		display: flex;
		width: 100%;
		max-width: clamp(300px, 90%, 60rem);
		margin: 0 auto;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.business-content-left{
		flex: 0 0 auto;
		padding: 0.5rem 0 3rem 0;
		flex-direction: column;
		align-items: flex-start;
		display: flex;
		gap: 1.0rem;
		max-width: 30rem;
		min-width: 11rem;
	}

	.business-content-span{
		color: #6FC5E9;
		font-family: "NanumSquare Neo";
		font-size: 0.8rem;
		font-style: normal;
		font-weight: 800;
		line-height: normal;
	}

	.business-content-title{
		color: #FFF;
		font-family: Paperlogy;
		font-size: 1.499rem;
		font-style: normal;
		font-weight: var(--font-weight-700, 700);
		line-height: 1.2;
	}

	.business-content-title2{
		color: #FF845E;
		font-family: Paperlogy;
		font-size: 1.499rem;
		font-style: normal;
		font-weight: var(--font-weight-700, 700);
	}

	.business-content-explain{
		color: rgba(255, 255, 255, 0.90);
		font-family: var(--font-family-Font-1, "Noto Sans KR");
		font-size: 0.71rem;
		font-style: normal;
		font-weight: 200;
	}

	.business-content-button {
		display: flex;
		width: 11rem;
		height: 2.1rem;
		padding: 0.8rem 1.5625rem;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		border-radius: 12.5rem;
		background: #0A2443;
		text-decoration: none;
		color: #fff;
		cursor: pointer;
		transition: background 0.3s ease;
	}

	.business-content-button:hover {
		/*background: rgba(10, 36, 67, 0.7);*/
		background: #1e4778;
	}

	.business-content-button-link {
		font-family: Paperlogy;
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 1.4rem;
		color: #fff;
	}

	.business-content-right {
		/*flex: 1 1 0;*/
		flex: 1 1 auto;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		/*overflow: hidden;*/
		position: relative;
	}

	.biz-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 3rem;
		height: 3rem;
		background: rgba(255,255,255,0.15);
		border: 2px solid rgba(255,255,255,0.6);
		border-radius: 50%;
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		z-index: 100;
		transition: .3s ease;
	}

	/* 왼쪽 버튼 */
	.biz-prev {
		left: -4.5rem; /* 카드 기준 왼쪽 바깥 */
	}

	/* 오른쪽 버튼 */
	.biz-next {
		right: -5.5rem; /* 카드 기준 오른쪽 바깥 */
	}

	/* hover 효과 */
	.biz-arrow:hover {
		background: rgba(255,255,255,0.35);
		border-color: rgba(255,255,255,1);
		transform: translateY(-50%) scale(1.1);
	}


	.card01-title{
		color: var(--color-grey-9, #141618);
		font-family: Paperlogy;
		font-size: 1.0rem;
		font-style: normal;
		font-weight: var(--font-weight-700, 700);
	}

	.card01-content{
		color: rgba(0, 0, 0, 0.60);
		font-family: "Pretendard GOV";
		font-size: 0.58rem;
		font-style: normal;
		font-weight: 500;
	}

	.card02-title{
		color: #FFF;
		font-family: Paperlogy;
		font-size: 1.0rem;
		font-style: normal;
		font-weight: var(--font-weight-700, 700);
	}

	.card02-content{
		color: rgba(255, 255, 255, 0.70);
		font-family: "Pretendard GOV";
		font-size: 0.58rem;
		font-style: normal;
		font-weight: 900;
	}

	.card03-title{
		color: #FFF;
		font-family: Paperlogy;
		font-size: 1.0rem;
		font-style: normal;
		font-weight: var(--font-weight-700, 700);
	}

	.card03-content{
		color: rgba(255, 255, 255, 0.70);
		font-family: "Pretendard GOV";
		font-size: 0.58rem;
		font-style: normal;
		font-weight: 700;
	}

	.card04-title{
		color: var(--color-grey-9, #141618);
		font-family: Paperlogy;
		font-size: 1.0rem;
		font-style: normal;
		font-weight: var(--font-weight-700, 700);
	}

	.card04-content{
		color: rgba(0, 0, 0, 0.60);
		font-family: "Pretendard GOV";
		font-size: 0.58rem;
		font-style: normal;
		font-weight: 500;
	}

	.card05-title{
		color: #FFF;
		font-family: Paperlogy;
		font-size: 1.0rem;
		font-style: normal;
		font-weight: var(--font-weight-700, 700);
	}

	.card05-content{
		color: rgba(255, 255, 255, 0.70);
		font-family: "Pretendard GOV";
		font-size: 0.58rem;
		font-style: normal;
		font-weight: 900;
	}

	.card06-title{
		color: #FFFFFF;
		font-family: Paperlogy;
		font-size: 1.0rem;
		font-style: normal;
		font-weight: 700;
	}

	.card06-content{
		color: rgba(255, 255, 255, 0.90);
		font-family: "Pretendard GOV";
		font-size: 0.58rem;
		font-style: normal;
		font-weight: 500;
	}

	.card07-title{
		color: #FFFFFF;
		font-family: Paperlogy;
		font-size: 1.0rem;
		font-style: normal;
		font-weight: 700;
	}

	.card07-content{
		color: rgba(255, 255, 255, 0.80);
		font-family: "Pretendard GOV";
		font-size: 0.58rem;
		font-style: normal;
		font-weight: 500;
	}

	.card08-title{
		color: #FFFFFF;
		font-family: Paperlogy;
		font-size: 1.0rem;
		font-style: normal;
		font-weight: 700;
	}

	.card08-content{
		color: rgba(255, 255, 255, 0.90);
		font-family: "Pretendard GOV";
		font-size: 0.58rem;
		font-style: normal;
		font-weight: 500;
	}

	.card-number01{
		position: absolute;
		bottom: 0.1rem;
		right: 1.25rem;
		color: rgba(0, 0, 0, 0.30);
		text-align: right;
		font-family: Paperlogy;
		font-size: 2.125rem;
		font-style: normal;
		font-weight: 800;
		line-height: normal;
	}

	.card-number02{
		position: absolute;
		bottom: 0.1rem;
		right: 1.25rem;
		color: rgba(255, 255, 255, 0.40);
		text-align: right;
		-webkit-text-stroke-color: #000;
		font-family: Paperlogy;
		font-size: 2.125rem;
		font-style: normal;
		font-weight: 800;
		line-height: normal;
	}

	.card-number03{
		position: absolute;
		bottom: 0.1rem;
		right: 1.25rem;
		color: rgba(255, 255, 255, 0.70);
		text-align: right;
		-webkit-text-stroke-color: #000;
		font-family: Paperlogy;
		font-size: 2.125rem;
		font-style: normal;
		font-weight: 800;
		line-height: normal;
	}

	.card-number04{
		position: absolute;
		bottom: 0.1rem;
		right: 1.25rem;
		color: rgba(0, 0, 0, 0.30);
		text-align: right;
		-webkit-text-stroke-color: #000;
		font-family: Paperlogy;
		font-size: 2.125rem;
		font-style: normal;
		font-weight: 800;
		line-height: normal;
	}

	.business-card {
		width: 120%;
		max-width: 14.75rem;
		aspect-ratio: 14.75 / 16;
		flex-shrink: 1;
		box-sizing: border-box;
		border-radius: 0.2rem 3rem 0.2rem 0.2rem;
		overflow: hidden;
		background: #fff;
		height: 15rem;
		padding: 1.5rem;
		position: relative;
		transition:
				transform 0.35s ease,
				box-shadow 0.35s ease,
				filter 0.35s ease;
		cursor: pointer;
	}

	.business-card:hover {
		transform: translateY(-0.5rem) scale(1.03);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
		filter: brightness(1.08);
	}

	/* 카드 키보드 포커스 스타일 (WA 접근성) */
	.business-card:focus {
		outline: 3px solid #000;
		outline-offset: 2px;
		transform: translateY(-0.5rem) scale(1.03);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
	}

	.card01 {
		margin-top: clamp(0rem, calc((100vw - 53.4375rem) * 0.2), 3rem);
		background: url(/kr/img/main/content_img_01.png) lightgray 50% / cover no-repeat;
	}

	.card02 {
		background: url(/kr/img/main/content_img_02.png) lightgray 50% / cover no-repeat;
	}

	.card03 {
		background: url(/kr/img/main/content_img_03.png) lightgray 50% / cover no-repeat;
	}

	.card04 {
		margin-top: clamp(-3rem, calc((100vw - 53.4375rem) * -0.2), 0rem);
		background: url(/kr/img/main/content_img_04.png) lightgray 50% / cover no-repeat;
	}

	.card05 {
		margin-top: clamp(0rem, calc((100vw - 53.4375rem) * 0.2), 3rem);
		background: url(/kr/img/main/content_img_05.jpg) lightgray 50% / cover no-repeat;
	}

	.card06 {
		background: url(/kr/img/main/content_img_06.jpg) lightgray 50% / cover no-repeat;
	}

	.card07 {
		background: url(/kr/img/main/content_img_07.jpg) lightgray 50% / cover no-repeat;
	}

	.card08 {
		margin-top: clamp(-3rem, calc((100vw - 53.4375rem) * -0.2), 0rem);
		background: url(/kr/img/main/content_img_08.jpg) lightgray 50% / cover no-repeat;
	}

	.card09 {
		margin-top: clamp(0rem, calc((100vw - 53.4375rem) * 0.2), 3rem);
		background: url(/kr/img/main/content_img_09.jpg) lightgray 50% / cover no-repeat;
	}

	.business-card-columns {
		display: flex;
		gap: 2.8rem;
		align-items: flex-start;
		min-width: 0;
		padding-inline: 0.5rem;
		margin-right: 6rem;
		position: relative;
	}

	.card-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 2.8rem;
		flex: 1 1 0;
		min-width: 0;
	}

	@media (min-width: 1116px) {
		.biz-prev,
		.biz-next {
			display: flex !important;
		}
	}

	@media (max-width: 1115px) {

		.business-content{
			border-radius: 0 4.375rem 0 0;
			padding-bottom: 0;
			background-position: calc(100% + 10rem) -9rem;
			background-size: 24rem auto;
		}

		.business-content-left {
			max-width: none;
			width: 100%;
			display: flex;
			flex-direction: column;
		}

		.business-content-left .business-card {
			width: 100%;
			max-width: none;
			aspect-ratio: 47.75 / 16;
			flex-shrink: 0;
		}

		.biz-prev,
		.biz-next {
			display: none !important;
		}
	}

	@media (max-width: 616px) {
		.business-content-left .business-card {
			aspect-ratio: unset;
			height: 170px;
		}
	}

	.video-content{
		width: 100%;
		height: 12.625rem;
		flex-shrink: 0;
		aspect-ratio: 3/1;
		background: url(/kr/img/main/video-section-bg.png) lightgray 50% / cover no-repeat;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.video-content-wrapper {
		text-align: center;
		color: white;
		font-size: 1.5rem;
		font-weight: bold;
	}

	.video-content-describe{
		position: relative;
		display: inline-flex;
		align-items: center;
		color: #6FC5E9;
		font-family: "NanumSquare Neo";
		font-size: 0.8rem;
		font-weight: 800;
		line-height: normal;
	}

	.video-content-title{
		color: #FFF;
		text-align: center;
		font-family: Paperlogy;
		font-size: 1.799rem;
		font-style: normal;
		font-weight: var(--font-weight-700, 700);
		line-height: 2.5rem;
	}

	.video-content-title-span{
		color: #FF845E;
		font-family: Paperlogy;
		font-size: 1.799rem;
		font-style: normal;
		font-weight: var(--font-weight-700, 700);
		line-height: 2.5rem;
	}

	.video-content-explain{
		color: rgba(255, 255, 255, 0.80);
		text-align: center;
		font-family: "Noto Sans KR";
		font-size: 0.65rem;
		font-style: normal;
		font-weight: 500;
		line-height: var(--item-spacing-m, 2rem);
		letter-spacing: var(--letter-spacing--0_25, -0.01563rem);
	}
	.video-content-button {
		display: flex;
		width: 11rem;
		height: 2.1rem;
		padding: 0.8rem 1.5625rem;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		border-radius: 12.5rem;
		background: rgba(255, 255, 255, 0.20);
		margin: 0.5rem auto;
		text-decoration: none;
		color: #fff;
		cursor: pointer;
		transition: background 0.3s ease;
	}

	.video-content-button:hover {
		background: rgba(255, 255, 255, 0.35);
	}

	.video-content-button-link {
		font-family: Paperlogy;
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 1.4rem;
	}

	.player-icon{
		height: 1.2rem;
		width: auto;
		margin-right: 0.5rem;
	}

	.orange-icon-small {
		top: 0;
		transform: translate(32%, -60%);
		width: 0.5rem;
		height: 0.5rem;
	}

	.business-card p {
		height: 4.2rem;     /* 전체 카드에서 동일한 텍스트 박스 높이 */
		overflow: hidden;   /* 텍스트가 넘쳐도 카드가 안늘어남 */
		display: block;
	}

	.card05, .card06, .card07, .card08 {
		position: relative;
		overflow: hidden;
	}

	.card05::before,
	.card06::before,
	.card07::before,
	.card08::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.32); /* 필요하면 0.25~0.45로 조절 */
		z-index: 1;
	}

	.card05 h3, .card05 p, .card05 span,
	.card06 h3, .card06 p, .card06 span,
	.card07 h3, .card07 p, .card07 span,
	.card08 h3, .card08 p, .card08 span {
		position: relative;
		z-index: 2;
	}

	.card05 .card-number03,
	.card06 .card-number04,
	.card07 .card-number03,
	.card08 .card-number04 {
		position: absolute !important;
		right: 1rem;
		bottom: 0.1rem;
		z-index: 3; /* 오버레이보다 위 */
	}

	.card05 h3, .card05 p,
	.card06 h3, .card06 p,
	.card07 h3, .card07 p,
	.card08 h3, .card08 p {
		position: relative;
		z-index: 2;
	}

/* 2025.10.23 기준 main.jsp 변경 css(끝) */