@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root{--hu_blue : #5779F0;--hu_white : #fff;--hu_line : #dfdfdf;--hu_black : #000;--hu_gray : #999;--hu_red:#FF6161;--basic_font:clamp(14px, 1.3vw, 20px);}
* { padding: 0;    margin: 0;    box-sizing: border-box;    text-decoration: none;    border: none;    word-break: keep-all;    /* transition: 0.3s; */}

@media (max-width: 1280px) {
.n_btn, .w_btn, .b_btn , .bc_btn {padding: 10px 20px;}
}

/********************** reset **********************/
html {scroll-behavior: smooth;}
body {width:100%; height:100%; -webkit-font-smoothing:antialiased; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, button, address, em, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, hr {margin:0; padding:0}
body {padding:0; background:var(--hu_white);  font-family: Pretendard; font-weight: 300; font-size:var(--basic_font); color:#000;line-height:120%;letter-spacing:-0.5px}
h1, h2, h3, h4, h5, h6 {font-weight:normal; line-height: 120%;}
ol, ul, li {list-style:none; line-height:120%;}
table {width:100%; border-collapse:collapse; border-spacing:0; line-height:120%;}
form, iframe {display:block;border:0}
fieldset {display:inline-block;border:0;}
img, button {border:0 none; vertical-align:middle}
hr {height:0; display:none}
i, em, address {font-style:normal}
label, button {cursor:pointer}
caption, legend {width:0; height:0; margin:0; padding:0; text-indent:-9999em; overflow:hidden; font-size:0;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block}
input, textarea, select {margin:0; padding:0; font-family: Pretendard; font-size:var(--basic_font); font-weight: 400; vertical-align:middle; line-height:120%; background: none;}
textarea {padding:20px;border: 1px solid #ccc; resize:none; overflow-y:auto;}
button {overflow:visible; margin:0; padding:0; border:0 none; background:none; font-size:0; font-family: Pretendard; font-weight: 300; vertical-align:top; cursor:pointer;}
button::-moz-focus-inner {border:0; padding:0;}
a {text-decoration:none; word-break:break-all;}
a:link, a:visited, a:hover, a:active, a:focus {text-decoration:none;}

*:focus{outline:none}

.fl {float:left !important;}
.fr {float:right !important;}
.vat {vertical-align:top !important;}
.vam {vertical-align:middle !important;}
.tal {text-align:left !important;}
.tar {text-align:right !important;}
.tac {text-align:center !important;}

.mb10 {margin-bottom:10px !important}
.mb20 {margin-bottom:20px !important}
.mb30 {margin-bottom:30px !important}
.mb40 {margin-bottom:40px !important}
.mb50 {margin-bottom:50px !important}
.mb60 {margin-bottom:60px !important}
.mt10 {margin-top:10px !important}
.mt20 {margin-top:20px !important}
.mt30 {margin-top:30px !important}
.mt40 {margin-top:40px !important}
.mt50 {margin-top:50px !important}
.mt60 {margin-top:60px !important}

/********************** form control **********************/
.wrap{position:relative;  top:0;}
.m_wrap{position:relative; overflow:hidden;}
.s_wrap {background: #F2F4F7; overflow-x:hidden;}
.s_wrap .gnbWrap {position: static; background:var(--hu_white); border-bottom: 1px solid var(--hu_line); box-shadow: 0 3px 5px 0 rgba(0,0,0,0.10);}
.s_wrap .gnb_top {z-index: 9;}
.s_wrap .gnbArea .gnb li {color:var(--hu_black);}

/*gnb */
.gnbWrap{position:absolute;left:0;top:0;width:100%; height: 120px; overflow:hidden;text-align: center; z-index:20}
.gnb_top {display: block; text-align: center; position: relative;}
.gnb_top ul {max-width:1400px; width:100%; display: inline-block; text-align: right;}
.gnb_top ul li {display: inline-block; font-size: 16px; padding: 10px 0 10px 20px;}
.gnb_top ul a {color:var(--hu_white); &:hover {color:var(--hu_red);}}
.gnb_top::after {content: ''; width: 100%; background: var(--hu_black); opacity: 0.6; position: absolute; height: 100%; left: 0; top:0; z-index: -1;}
.gnbArea{max-width:1400px;margin:0 auto;position:relative;  display: block;}
.gnbArea:after{content:'';display:block;clear:both;}
.gnbArea h1{float:left; margin-top: 17px;}
.gnbArea h1 img:last-child,  .s_wrap .gnbArea h1 img:first-child{display: none;}
.s_wrap .gnbArea h1 img:last-child, .gnbArea h1 img:first-child {display: block;}
.gnbArea .gnb {margin-left:120px; display: flex; align-items: center; min-height: 80px; justify-content: flex-end; gap:40px;}
.gnbArea .gnb li {color: var(--hu_white); font-size: 24px;font-weight: 600; line-height: 22px; cursor: pointer;}
.gnbArea .gnb li:hover, .gnbArea .gnb li.act, .s_wrap .gnbArea .gnb li:hover, .s_wrap .gnbArea .gnb li.act {color:var(--hu_blue); }


h1 {font-size: 48px; font-weight: 600; display: block;line-height: 140%;}
h1 span {font-size: var(--basic_font); display: block; text-transform: uppercase; font-weight: 300; line-height: 140%; margin: 10px 0;}

section {position: relative; display: block; margin: 100px 0;}
article {position: absolute; width:100%; top:-40vh; z-index: 999;left: 0; color: var(--hu_white); font-size: clamp(30px, 3vw, 40px); line-height:120%;}
article span { max-width:1400px; width:100%; margin: 0 auto; display: block;}
article b {font-size: clamp(50px, 6vw, 80px); display: block; font-weight: 300; margin-bottom: 40px;}
.max_w {max-width:1400px; width:100%; margin: 0 auto; position: relative;}

/*button */
.btn_area, .subtop dl {display: flex; gap:10px; flex-wrap: wrap;}
.w_btn, .bc_btn{background:var(--hu_white); padding: 15px 30px; border-radius: 30px; color: var(--hu_blue); font-weight: 600; font-size: var(--basic_font); text-align: center; cursor: pointer;}
.n_btn, .b_btn, .subtop dl dd{background:var(--hu_white); padding: 15px 30px; border-radius: 30px; color: var(--hu_black); font-weight: 600; font-size: var(--basic_font); border:1px solid var(--hu_line); cursor: pointer; text-align: center; &:hover {background: var(--hu_line);}}
.subtop dl dd:hover, .subtop dl dd.act {background:var(--hu_blue); color: var(--hu_white);}
.n_btn.act, .b_btn{background:var(--hu_blue); color: var(--hu_white);&:hover {background: var(--hu_red);}}
.b_btn_nohover {
  background: var(--hu_blue);
  color: var(--hu_white);
  pointer-events: none !important;
}
.bc_btn {background:var(--hu_black); color:var(--hu_white); &:hover {background: var(--hu_gray);}}

.r_btn{ padding: 15px 30px; border-radius: 30px;background:var(--hu_red); color: var(--hu_white);font-weight: 600; font-size: var(--basic_font); border:1px solid var(--hu_line); cursor: pointer; text-align: center; &:hover {background:#f00;}}
.w_btn:hover {background: var(--hu_red);  color: var(--hu_white);}
.t_btn{font-size: 16px; color: var(--hu_white);}
.t_btn:hover {text-decoration: underline;}
.g_btn {background:var(--hu_gray); color: var(--hu_white);}
.g_btn:hover {background: var(--hu_black);}
.r10 {border-radius: 10px;}

.sec01 {margin: 0;}
.sec03 {margin-top: 200px;}

.red_con, .blue_con { position: relative; color: var(--hu_white); display: block; padding: 80px 0; margin-top: 80px;}
.red_con::after, .blue_con::after {content:''; position: absolute; top:0; left: 0;background:#FF6161; width: 70vw; height: 100%; z-index: -1; }
.red_con dt {color: var(--hu_white); display: block; font-size: 38px; line-height: 150%; }
.red_con .f_img01,.red_con .f_img02 {position: absolute; top:-15vw; right:20vw;}
.red_con .f_img02 {top:0; right:0;}
.red_con dd {width: 500px; display: flex; flex-wrap: wrap; gap:10px; margin-top: 100px;}
.red_con dd span{border:1px solid var(--hu_white); width: 150px; height: 150px; border-radius: 100%; display: inline-flex; text-align: center; align-items: center; font-size:24px; line-height:120%;
justify-content: center;}
.blue_con::after {background:#1E2D64; left: auto; right:0;}

/*login */
.login_area {display: flex; flex-direction: column; gap:20px; align-items:center; width: 100vw; margin-top: -30vh; position: relative; z-index: 99;}
.login_area ul {max-width:1400px; width:100%; display: block; }
.login_area ul li {margin-bottom:10px; font-size: var(--basic_font); color: var(--hu_white);}
.login_area ul li .tit_span  {margin-bottom:10px; font-size: var(--basic_font); color: var(--hu_white);}
.login_area ul li.tit {font-weight: 600;}
.login_area ul li .date_span {display: block; margin-top: 10px; font-size: 16px;}
.login_area dl {max-width:1400px; width:100%; display: inline-flex; gap:0; flex:auto; }
.login_area dl dt, .login_area dl dd {padding: 40px; background:var(--hu_blue); color:var(--hu_white); display: inline-flex; gap:20px; flex-direction: column; width: 550px;  flex-grow: 2; }
.login_area dl dd {background: #344EA8; flex-grow: 1; align-items: baseline; justify-content: center;}
/*241002 add*/
.login_area dl .logout {background:var(--hu_blue);}

.login_area dl dd img {height: 70px;}
.login_area dl dd:last-child {background: #1E2D64;}
.login_area dl h1 {font-size: 45px;}
.login_area dl h4 {font-size: 16px;}
/*241002 add*/
.login_area dl input {font-size: var(--basic_font); padding: 10px; background: none !important; border-bottom: 1px solid var(--hu_white); color: #fff !important; font-weight: 300;}
.login_area dl input::placeholder {color: var(--hu_white); opacity: 0.5; font-size: var(--basic_font);}
.login_area dl .btn_area {display: flex; justify-content:space-between; align-items: center;}
.login_area dl .btn_area span a{margin-right: 20px;}

.login_page {margin: 150px auto 150px auto; }
.login_page dl { max-width: 1200px; justify-content: center;}
.login_page dl dt {max-width: 500px;}
.login_page dl dd:last-child {position: relative; background: none; width: 100%; min-width: 50%; }
.login_page dd article {position: static; color: var(--hu_black);}

/*swiper */
.ESG_swiper { width: 100%; overflow: hidden;}
.ESG_swiper .swiper-slide { height: 100vh; overflow:hidden; width: 100%; min-height: 800px;}
.ESG_swiper .swiper-slide img {width: 100%; }
.ESG_swiper .swiper-slide-prev img, .ESG_swiper .swiper-slide-active img, .ESG_swiper .swiper-slide-duplicate-active img{animation-name: zoom;  animation-duration: 5s; animation-fill-mode: forwards;}
@keyframes zoom {    from {  transform: scale(1.3);    }    to {   transform: scale(1);    }}

/* 20240903 niied swiper x.

.main_swiper {height: 500px; width: 800px; margin-left: 0; overflow: visible;}
.main_swiper .swiper-slide {width: 250px; height:250px; display: block; top:150px;}
.main_swiper .swiper-slide img {height: 300px; margin-top: -20px;}
.main_swiper .swiper-slide span {height: 250px; width:250px; display: inline-block; overflow: hidden; border-radius: 300px; opacity: 0; margin-left: 240px;}
.main_swiper .swiper-slide-active { z-index: 99; top:0px; transition: 0s;}
.main_swiper .swiper-slide-active img {height: 130%;  margin: -50px 0 0 -200px; }
.main_swiper .swiper-slide-active span {height: 500px; width:500px; border-radius: 800px;  opacity: 1; margin-left: 100px; border:5px solid var(--hu_white);}
.main_swiper .swiper-slide-next span, .main_swiper .swiper-slide-prev span {opacity: 0.5;}

.sub_swiper {width:500px; top:30px; right: -600px; position: absolute; display: flex; flex-direction: column;}
.sub_swiper li {display: block; font-size: 30px; line-height: 120%; padding: 20px 0; opacity: 0.6; text-align: right; z-index: 1; position: relative; cursor: pointer;}
.sub_swiper li.active {font-size: 40px; font-weight: 400; z-index: 9; opacity: 1; border-bottom: 1px solid var(--hu_white); border-top: 1px solid var(--hu_white); &:hover {color: var(--hu_red)} }
.sub_swiper li span {display: none;}
.sub_swiper li.active span, .sub_swiper li.active:Hover span {display: block; font-size: var(--basic_font); line-height: 120%; margin-top: 10px; color:var(--hu_white)}
.swiper-pagination {display: none;}*/

/*chart */
.hu_chart {min-height: 20vh; max-height: 30vh; margin: 0 auto; display: none !important;}
.subcon_box .hu_chart {min-height: 30vh; max-height: 50vh;}
.title-btn {display: flex; justify-content: space-between; align-items: flex-end;}
.title-btn .btn_area li {cursor: pointer;}

.hu_chart_lable {display: none; margin: 120px 0; flex-wrap: wrap; justify-content: space-around; gap:10px;}
.subcon_box .hu_chart_lable {margin: 0 0 80px;}
.hu_chart_lable.act  {display: flex; width: 100%;}
.hu_chart.act {display: block !important;}
.hu_chart_lable li {font-size: 60px; font-weight: 600; text-align: center; display: block; line-height: 120%;position: relative; }
.hu_chart_lable li b {display: block; font-size: var(--basic_font); line-height: 120%; font-weight: 300;}
.hu_chart_lable li::after, .hu_chart_lable.col_2 li g::after {content: ''; display: inline-block; width: 10px; height: 10px; background:#FF6161; border-radius: 100%; position: absolute; bottom:-20px; left:50%; margin-left:-5px;}
li.ch-red::after { background:#FF6161; }
li.ch-orange::after { background:#FF8730; }
li.ch-yellow::after { background:#FFCC49; }
li.ch-l-green::after { background:#A2FF2D; }
li.ch-l-blue::after { background:#48FFDE; }
li.ch-skyblue::after { background:#5CC4FF; }
li.ch-blue::after { background:#1E27FF; }
li.ch-green::after { background:#26D6A1; }
li.ch-purple::after { background:#962DFF; }

.hu_chart_lable.col_2 li{font-size: var(--basic_font); display: flex; flex-direction: column; gap: 20px; font-weight: 300;}
.hu_chart_lable.col_2 li g{display:flex; position:relative; padding-left:15px; align-items:center;}
.hu_chart_lable.col_2 li::after {display: none;}
.hu_chart_lable.col_2 li span, .hu_chart_lable.col_2 li g {font-size: 30px; font-weight: 600; position: relative; padding-left: 15px;}
.hu_chart_lable.col_2 li span {padding:0 5px;}
.hu_chart_lable.col_2 li g::after {left: 0; bottom: auto; top:50%; margin-top: -5px;}
.hu_chart_lable.col_2 li g:first-child::after {background:#1E27FF;}
.hu_chart_lable.col_2 li g:last-child::after {background:#FF6161;}
.peo_tit {display: flex; justify-content: space-between; align-items: flex-end;}
.chart_end {display: block; width: 100%; text-align: center; margin-bottom: 80px;}
.chart_end h1 {text-align: center; display: block;}
.chart_end h1 span.count {font-size:48px; font-weight:600;}
.chart_end h1 span {display: inline; margin-right: 10px;}


/*footer*/
footer {max-width:1400px; width:100%; margin: 80px auto 40px; display: flex; justify-content: space-between; color:var(--hu_gray); align-items: flex-start; padding-top: 40px; border-top:1px solid var(--hu_line);}
footer a {color:var(--hu_gray); font-size: var(--basic_font); margin-right: 10px;}
footer a:hover {color: var(--hu_black); text-decoration: underline;}
footer a::after {content:''; margin-left: 10px;}
footer a:last-child::after {display: none;}
footer ul {display: inline-flex; gap:20px; flex-direction: column; font-size: var(--basic_font); line-height: 140%; padding-bottom: 40px;}

/*navigation */
nav {position: absolute; top:0; left: 0; padding: 20px; background: #fff; width: 100%; z-index: 9; display: none; align-items: center; justify-content: space-between;}
.s_wrap nav {position: static;}
nav .logoimg {height: 55px;}
.nav_dimed {position: fixed; top:0; left: 0; width: 100vw; height: 100%; z-index: 999; overflow-y:scroll; display: none;}
.nav_dimed.act {display: block;}
.nav_dimed::before{content: ''; background: #000; width: 100%; height: 100%; z-index: -1;  opacity: 0.7; display: block;left: 0; top:0; position: fixed;}
.nav_con {padding: 40px 20px; color:var(--hu_white); position: relative; opacity: 0; right:-100vw;}
.top_btn {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap:wrap; gap:20px;}
.top_btn span a { margin-right: 10px;}
.close_btn:hover {filter: invert(52%) sepia(56%) saturate(4832%) hue-rotate(211deg) brightness(98%) contrast(92%);}
.nav_con dl {display: flex; flex-direction: column; gap:10px; font-weight: 600;}
.nav_con dl dt{font-size: 24px; display: flex; justify-content: space-between; padding: 20px 0;}
.nav_con dl dd{font-size: 20px; background: #fff; color: var(--hu_black); padding: 15px 20px; border-radius: 30px; font-weight: 600; display: none; position: relative; }
.nav_con ul {font-size: 16px; flex-direction: column; gap:20px; margin-top: 20px; border-top:1px solid var(--hu_line); padding-top: 20px; font-weight:300;}
.nav_con dl.act dt, .nav_con dl.act dd.act {color: var(--hu_blue);}
.nav_con dl.act dt img {filter: invert(52%) sepia(56%) saturate(4832%) hue-rotate(211deg) brightness(98%) contrast(92%); transform: rotate(90deg);}
.nav_con dl.act dd { display: block;}
.nav_con dl.act dd.act ul {display: flex; position: relative; z-index: 9;}
.nav_con dl.act dd li {color: var(--hu_black); display: block; cursor: pointer; position: relative; z-index: 10; &:hover{color: var(--hu_blue)} }
.nav_con dl.act dd li.act {color: var(--hu_blue); text-decoration: underline; font-weight: 600;}

/*sub*/
.s_wrap .hu_nav {height: 120px; display: block;}
.subtop {margin: 80px 0;}
.subtop h1 {margin-top: 40px; font-weight: 700;}
.subtop dl {min-height:40px;}
.subtop dl ul {display: none;}
.subcon_box {display: flex; gap:30px; max-width: 1400px; margin: 0 auto; align-items:flex-start; }
.h_box {flex-direction: column; gap:80px;}
.snav_box, .con-box {background: var(--hu_white); border:1px solid var(--hu_line); border-radius: 10px; width: 100%;}
.follow {position: sticky; top:20px; right: 0; align-self:start; }
.snav_box li {padding: 20px; border-bottom: 1px solid var(--hu_line);  cursor: pointer;}
.snav_box li:last-child {border:none;}

.quick-box {max-width: 250px; width: 100%; }
.quick-box li.act, .quick-box li:hover {color:var(--hu_black); font-weight: 300;}
.quick-box li a {color: var(--hu_black);}
.quick-box li a.act, .quick-box li a:hover {color:var(--hu_blue); font-weight: 600;}
.quick-box li button {color: var(--hu_black);}
.quick-box li button.act, .quick-box li button:hover {color:var(--hu_blue); font-weight: 600;}
.quick-box, .squick li{display: flex; flex-direction: column; gap:20px;}
.quick-box h4 {text-align: right;}
.quick-box .btn_area {flex-wrap: nowrap;}
.quick-box .btn_area a {padding: 15px 0; width: 100%; text-align: center;}

.input_con {max-width: 1400px; width: 100%; gap:40px; display: flex; flex-direction: column;}
.input_con>li {display: flex; flex-direction: column; gap: 20px;}
.input_con>li>h4 {font-weight: 600;}
.input_con>li>p>b {color: var(--hu_red); font-weight: 400;}

.con-box {max-width: 1400px; padding: 40px; position: relative; }
.con-box h1 {font-size: 40px; font-weight: 700;}
.con-box h1 b {color: var(--hu_blue);}
.con-box .txt_list {border-top:1px solid var(--hu_line); padding: 20px 0 0; margin-top: 20px;}
.con-box .txt_list b {color: var(--hu_red);}
.con-box.addfile {display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.con-box.addfile span {line-height:180%;}
.txt-area {overflow-y:auto; max-height: 400px;}
.txt-area.non_over{max-height: none;}
.txt-area li {list-style:decimal; margin-left: 20px;}
.txt-area ul {display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;}

.con-txt {padding: 20px 0;}
.con-txt dt {font-size: 24px; font-weight:600; border-bottom: 1px solid var(--hu_line); padding: 20px 0;}
.con-txt dd {padding: 20px 0 0;}
.con-txt table {border:1px solid var(--hu_line); border-radius: 10px; width: 100%;}
.con-txt table td, .con-txt table th {padding: 10px; border:1px solid var(--hu_line); font-size: var(--basic_font);line-height: 120%;}
.con-txt table th {background: #F2F4F7; font-weight: 600;}
.con-box .close_btn {filter: invert(17%) sepia(11%) saturate(6425%) hue-rotate(201deg) brightness(35%) contrast(97%); position: absolute; top:-20px; right:0; opacity: 0.8; cursor: pointer;}
.con-box .close_btn:hover {filter: invert(65%) sepia(35%) saturate(7312%) hue-rotate(324deg) brightness(100%) contrast(105%);}
.add_btn {text-align: center; padding: 20px 0; cursor: pointer; font-weight: 600; }
.add_btn img {filter: invert(52%) sepia(56%) saturate(4832%) hue-rotate(211deg) brightness(98%) contrast(92%); transform:rotate(45deg); margin-right: 10px;}
.add_btn:hover {background: var(--hu_blue); color: var(--hu_white);}
.add_btn:hover img {filter:none;}

.n_view {flex-direction: column;}
.n_view h1 {margin-bottom: 10px;}
.n_view .file_link {cursor: pointer; color: var(--hu_black); &:hover {color: var(--hu_blue); text-decoration: underline;}; }
.n_view .edit_view {white-space: pre-wrap;}
.n_view .btn_area {justify-content: center; width: 100%;}

.info-start .txt_list {margin-top: 0; border: none;}


/*service style*/
.ser_imgcon {display: block; width: 100%; position: relative; overflow: hidden; height: clamp(300px, 50vw, 700px); max-width: 100%; margin-bottom: 80px;}
.ser_imgcon img {width: 100%; position: absolute; top:-30%; animation-name: zoom;  animation-duration: 5s; animation-fill-mode: forwards; z-index: -1;}
.ser_imgcon .max_w {height: 100%; display: block;}
.ser_imgcon h1 {font-size: clamp(25px, 2.6vw, 40px); line-height:160%; position: absolute; top:0; left: 0; height: 100%; padding: 40px; width: clamp(200px, 35vw, 550px); z-index: 5; &:before {content:''; position: absolute; width: 100%; height: 100%; background: var(--hu_white); opacity: 0.7; z-index: -1; top:0; left: 0; display: block;}}
.ser_imgcon b, .ser_imgcon span {font-size: clamp(35px, 3vw, 50px); line-height:120%; font-weight: 700;}
.ser_imgcon b {color:var(--hu_blue);}
.ser_imgcon span {color:var(--hu_red);}

.nav_3rd {margin: 80px 0;}
.nav_3rd ul{max-width: 1400px; margin: 0 auto; display: flex;}
.nav_3rd ul li {background: var(--hu_white); padding:20px; flex-grow: 1; text-align: center;  border: 1px solid var(--hu_line); font-weight: 600; cursor: pointer; &:first-child {border-radius: 10px 0 0 10px;} &:last-child {border-radius: 0 10px 10px 0;}}
.nav_3rd ul li.act {background: var(--hu_blue); color: var(--hu_white);}

.hu_map {display: block; overflow: hidden; margin-bottom: clamp(40px, 5vw, 100px);}
.root_daum_roughmap {width:60% !important; animation-name: zoom;  animation-duration: 5s; animation-fill-mode: forwards;}

/*service style*/


/*input style*/
input[type="radio"], input[type="file"], input[type="checkbox"] {display: none;}
.au_radio input[type="radio"]+label {display:block; padding: 20px; border-radius: 10px; border: 1px solid var(--hu_line);  cursor: pointer; width: 100%; font-size: 40px; line-height:120%; font-weight:600;}
.au_check input[type="checkbox"]+label{border-radius: 2;}
.au_radio input[type="radio"]:checked+label{background: var(--hu_blue); color:var(--hu_white);}
.au_radio {position: relative; display: flex; gap:20px;}
.au_radio span {font-size: var(--basic_font); display: block; font-weight: 300;}
.au_radio span b{color:var(--hu_blue); }
.au_radio input[type="radio"]:checked+label span b {color:var(--hu_white);}

.input_box li.nor_radio, .input_box li.nor_radio.readonly {border: none; background: none; flex-grow: 1;}
.input_box li.nor_radio:focus-within {border:none;}
.nor_radio .au_radio {margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center;}
.nor_radio .au_radio input[type="radio"]+label {font-size: var(--basic_font); background: none; border: none; color: var(--hu_black); width: auto; display: inline-flex; padding: 0; position: relative;  flex-grow: 1; }
.nor_radio .au_radio input[type="radio"]+label::before {content:''; width: 20px; height: 20px; border-radius: 100%; border: 1px solid var(--hu_line); display: inline-block; margin-right: 10px;}
.nor_radio .au_radio input[type="radio"]:checked+label::after{content:''; width: 10px; height: 10px; border-radius: 100%; background: var(--hu_blue); position: absolute; left: 6px; top:6px;}
.nor_radio span {font-size: 12px; line-height: 120%; color: var(--hu_gray); display: inline-block; margin-left: 20px;}
.input_box li.nor_radio.readonly input[type="radio"]+label, .input_box li.nor_check.readonly input[type="checkbox"]+label {color: var(--hu_gray)}
.input_box li.nor_radio.readonly input[type="radio"]:checked+label::after, .input_box li.nor_check.readonly input[type="checkbox"]:checked+label::after {background: var(--hu_line);}
.nor_radio .au_radio input[type="text"], .nor_radio .au_radio select{border:1px solid var(--hu_line); border-radius: 10px; padding: 10px 20px; width: 100%;}

.input_box li.nor_check {display: flex; flex-wrap: wrap; border: none; gap:10px;}
.nor_check input[type="checkbox"]+label {font-size: var(--basic_font); background: none; border: none; color: var(--hu_black); display: inline-flex; padding: 0; position: relative; font-weight: 600; flex-grow: 1; width: auto;}
.nor_check input[type="checkbox"]+label::before {content:''; width: 20px; height: 20px; border-radius: 2px; border: 1px solid var(--hu_line); display: inline-block; margin-right: 10px;}
.nor_check input[type="checkbox"]:checked+label::after{content:''; width: 10px; height: 10px; border-radius: 2px; background: var(--hu_blue); position: absolute; left: 6px; top:6px;}


ul.txt_list li {list-style: disc; list-style-position: outside; font-size: var(--basic_font); line-height: 140%; margin: 20px 0 0 20px;}
ul.txt_list.s_txt li {margin-top: 10px;}
ul.txt_list.s_txt li.p_txt {list-style: none; margin-left: 0;  margin-top: 20px;}
ul.txt_list li>ol::before {content:'- '; margin-right: 5px; }
.t_num li{list-style:decimal;}
.t_num ol {font-weight: 600; color:var(--hu_red);}
.file-name {  position: relative;  overflow: hidden;}
.input_box input {flex-grow: 1; background: none; width: 100%;}
.input_box input[type="date"]:read-only, .input_box input[type="month"]:read-only{width:fit-content; flex-grow: 0; appearance:none;}
.input_box input::placeholder {color: #ccc;}
.input_box input:read-only { color: var(--hu_gray); }
.input_box input[type="button"] {color: var(--hu_white);}
.input_box input[type="button"]:disabled:hover {
    /* 비활성화 상태일 때 :hover 스타일 무효화 */
    color: var(--hu_white);
    background-color : #999;
    cursor : none;
}
.input_box select {width: 100%; padding: 0;}
.input_box select:disabled {  pointer-events: none; color: var(--hu_gray); background: none; opacity: 1;}
.input_box textarea {width: 100%; min-height: 50px; background: none; border:none; padding: 0;}

.input_box .file-up .input_btn {    position: absolute; right:10px;top:10px;    width: auto;  background: #999;  border-radius: 40px;  padding: 15px 20px; height: auto;  cursor: pointer;    &:hover {    background: #333;  }}
.input_btn_disabled{
    cursor: auto !important;
}

/*input_box style*/
.input_box, .input_area {display: flex; gap: 10px;}
.input_area {flex-direction: column;}
.input_box li {border:1px solid var(--hu_line); padding: 10px 20px; position: relative; border-radius: 10px; flex-grow: 1;}
.input_box li:focus-within {border:1px solid var(--hu_blue);}
.input_box li label {font-size: 12px; display: block; color: var(--hu_gray);word-break:break-all;}
.input_box li.readonly {background: #f4f4f4; color: var(--hu_gray);}
.input_box li.search span {display: flex; gap:10px; font-size: var(--basic_font); color: var(--hu_gray); white-space: nowrap;}
.input_box li.search.non span img{display: none;}
.input_box li.search .search_btn {cursor: pointer;}
.input_box li.search:hover .search_btn {filter: invert(52%) sepia(56%) saturate(4832%) hue-rotate(211deg) brightness(98%) contrast(92%);}

.input_box .flex0 {flex-grow: 0;}
.input_box .flex2 {flex-grow: 2;}
.input_box .flex3 {flex-grow: 3;}
.input_tit {border-bottom: 1px solid var(--hu_line); padding-bottom: 20px;margin-bottom: 10px;}
.input_box .period span {display: flex; gap:10px; flex-wrap:wrap;}
.input_box .period span input {width:auto;}
.input_con>li.final_btn {display: flex; justify-content: space-between; flex-direction: row; gap:20%;}
.final_btn .btn_area {flex-grow: 1; flex-wrap: nowrap;}
.final_btn .btn_area a {width: 100%;}
.input_hint {font-size: 12px;color: var(--hu_gray);}

.nor_final {text-align: center;padding-bottom: 80px;}
.nor_final .btn_area {justify-content: center; gap:20px; margin-top: 4}
.nor_final .btn_area a {width: 100%; max-width: 200px;}
.nor_final .btn_area button {width: 100%; max-width: 200px;}

.dollor {align-items: center;}
.dollor ol {display: flex; align-items: center; gap:10px; flex-grow: 1;}
.krw span{display: flex; gap:10px; font-size: var(--basic_font); color: var(--hu_gray); white-space: nowrap;}
.input_box li.btn_input {border:none; flex-grow: 0;}
.via { white-space: nowrap; align-items: center;}
.big_textarea {height: 200px;}

.input_area h4 span {font-size: 12px;color: var(--hu_gray);}

.pic-box .stu_pic {min-width: 120px; height: 160px; overflow: hidden; border-radius: 10px; position: relative; flex-shrink: 0;}
.pic-box .stu_pic .edit_btn {position: absolute; background: var(--hu_blue); width: 30px; height: 30px; z-index: 8; border-radius: 100%; display: flex; justify-content: center; align-items: center; right: 0; bottom:0;}
.pic-box {display: flex; gap:20px;}
.pic_area {display:flex; flex-direction: column; gap:10px;}
.s_btn {padding:5px;}
.pic-box .input_area {flex-grow: 1;}
/*input_box style*/


.p_check {margin-bottom: 80px;}
.p_check .con-box {text-align: center;}
.p_check .con-box .input_box {padding: 40px 0 0; display: inline-flex; font-size: clamp(20px, 2.5vw, 40px); font-weight: 600; align-items: center;}
.p_check .con-box .input_box input, .p_check .con-box .input_box .b_btn {font-size: clamp(16px, 1.8vw, 30px); font-weight: 600;}
.p_check .con-box .input_box li {max-width: 200px;}
.p_check .input_box a {cursor: pointer;}
.p-result {width: 100%; align-items: stretch;}
.p-result .con-box {flex-grow: 0;  display: flex; flex-direction: column; gap:20px;}
.p-result .con-box h4 , .contact_hu h4{border-bottom:1px solid var(--hu_line); padding-bottom: 20px; font-weight: 600; text-align: left;}
.p-result .con-box img {width: 100%;}
.p-result .con-box p{ line-height: 140%;}
.p-result .con-box .btn_area {justify-content: center;}


.contact_hu .con-box {display: flex; flex-direction: column; gap:20px; &:first-child {gap:60px;}}
.contact_hu h1 {font-weight: 400; display: flex; gap: 20px; align-items: center;}
.contact_hu span {font-weight: 600; font-size: calc(var(--basic_font) + 4px); margin: 0;}
.contact_hu dl {display: flex; gap: 20px;}
.contact_hu dd {display: flex; gap: 10px; flex-direction: column;}

.join_con {margin: 80px auto; align-items: stretch;}
.join_con>li {flex-grow: 1; display: flex; flex-direction: column; width: 100%;gap:20px;}
.join_con .con-box {flex-grow: 1; gap:20px; justify-content: space-between;display: flex; flex-direction: column;}
.join_con h4 {font-size: clamp(20px, 1.8vw, 30px); font-weight: 600; display: block; line-height: 120%;}
.join_con .btn_area {justify-content: center;}
.join_con .btn_area a {min-width: 250px;}
section:has(ul.h_box.join_con) {margin: 80px 0;}
.join_con .con-box.input_area {margin-top: 40px; padding: 20px 40px;}
.join_con .con-box.input_area ul {align-items: center;}
.join_con .con-box.input_area p {flex-grow: 1; }
.join_con .con-box.input_area li {flex-grow: 0;}
.join_input {max-width: 800px; margin: 0 auto;}

/*number list*/
.tit_num {display: flex; flex-direction: column; gap:clamp(20px, 2.5vw, 40px);counter-reset: li; flex-grow: 1; min-width: 48%; }
.tit_num>li {padding: 40px; border:1px solid var(--hu_line); border-radius: 10px; background: var(--hu_white); display: flex; gap:20px; align-items:flex-start;
    &::before {counter-increment : li; content: counter(li, decimal-leading-zero); font-size: clamp(30px, 3vw, 60px); display: block; line-height: 120%; font-weight: 700; border-right:1px solid var(--hu_line); height: 100%; padding-right: 20px; align-items: center;}}
.tit_num li span {font-size: clamp(20px, 1.8vw, 30px); font-weight: 600; display: block; line-height: 120%; margin-bottom: 10px;}
#sitemap.tit_num li span {font-size:var(--basic_font); font-weight:300;}
.tit_num li div {flex-grow: 1; min-width: 45%;}
.tit_num li img {width: 100%; max-width: 500px; flex-grow: 0;}

#sitemap li dl {flex-grow: 1; display: flex; flex-wrap: wrap; gap:20px;}
#sitemap li dl dt {width: 100%; line-height: normal; font-size: clamp(20px, 1.8vw, 30px); font-weight: 600;}
#sitemap li dl dt, #sitemap li dl dd {cursor: pointer; &:hover {color: var(--hu_blue);}}
#sitemap li dl ul, #sitemap li img{display: none;}
/*number list*/


.p-ok, .p-reject {display: none;}
.p-ok h1, .p-reject h1 {color: var(--hu_blue); text-align: center;}
.p-reject h1 {color:var(--hu_red);}

/*table style*/
.t_list { border:none; font-size: var(--basic_font);  border-collapse:separate;    border-spacing:0 20px;}
.t_list thead, .t_list tbody {width: 100%;}
.t_list th, .t_list td {padding: 20px; text-align: center; }
.t_list thead th {font-weight: 300; font-size: var(--basic_font); padding: 0 20px;}
.t_list thead th:nth-child(2), .t_list tbody tr th:nth-child(2) {text-align: left;}
.t_list tbody tr { padding: 10px 20px; position: relative; border-radius: 10px; background: var(--hu_white); }
.t_list tbody tr td:first-child { border-radius: 10px 0 0 10px; }
.t_list tbody tr td:last-child, .t_list tbody tr th:last-child{ border-radius: 0 10px 10px 0; }
.t_list a {color: var(--hu_black);  &:hover {color: var(--hu_blue);}}

.t_footer {display: flex; justify-content: space-between; margin-bottom: 80px; align-items: center; width: 100%;}
.t_paging {display: flex; gap: 10px; }
.t_paging li {border:1px solid var(--hu_line); cursor: pointer; padding: 10px 20px; position: relative; border-radius: 5px; background: var(--hu_white); &:hover {color: var(--hu_white); background: var(--hu_blue);}}
.t_paging li.act {color: var(--hu_white); background: var(--hu_blue);}
.t_search {display: flex;border:1px solid var(--hu_line);  position: relative; border-radius: 60px; background: var(--hu_white); gap:10px; padding-left: 20px; }
.t_search input {width: 100%;}
.t_search a {display: block; white-space: nowrap; }

.apply_list dt{border-bottom:1px solid var(--hu_line); padding-bottom: 20px; display: flex; justify-content: space-between;}
.apply_list dt span b{display: block; font-size: calc(var(--basic_font) + 4px); margin-bottom: 10px;}
.apply_list dt .btn_area h3 {font-weight: 500; font-size: calc(var(--basic_font) + 4px);}
.apply_list dt .btn_area {align-items: center; gap: 20px;}
.apply_list dd {padding-top: 20px; display: flex; gap: 20px; flex-wrap:wrap;}
.apply_list.after {opacity: 0.5 !important;}
.apply_list.after .btn_area .b_btn, .apply_list.after .btn_area .bc_btn {display: none;}
/*table style*/

.au_modal_alert,
.au_modal_confirm{
	z-index : 10000 !important;
}

/*modal pop print추가 241203*/
#act_print .pop_wrap.search-pop { width: clamp(300px, 90vw, 1400px);}

/*modal pop*/
.au_modal {width: 100%; height: 100%; position: fixed; top:0; left: 0; z-index: 9999; display: flex; justify-content: center; align-items: center;
    &::after{content:'';width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: -1; background: #000; opacity: 0.6;}}
.au_modal .pop_wrap {background: var(--hu_white); padding: 40px; border-radius: 10px; width: clamp(300px, 90vw, 600px); display: flex; flex-direction: column; gap:40px; text-align: center;}
.au_modal .pop_wrap dt h4 {font-weight: 600; font-size: clamp(24px, 2.3vw, 40px); line-height: 140%;}
.au_modal .pop_wrap dt h4 b {color: var(--hu_blue);}
.au_modal .pop_wrap dd {display: flex; gap: 20px; border-top:1px solid var(--hu_line); padding-top: 40px; justify-content: center;}
.au_modal .pop_wrap dd a {cursor: pointer; max-width: 150px; width: 100%;}
/*modal pop 학교추가 241024*/
.au_modal .pop_wrap.search-pop {text-align: left; position: relative;}
.au_modal .pop_wrap.search-pop dt {display: flex; flex-direction: column; gap:20px; }
.au_modal .pop_wrap.search-pop p {font-size: var(--basic_font);}
.au_modal .pop_wrap.search-pop dt .close_btn {position: absolute; width: 40px; top:-50px; right:0; cursor: pointer;}
.au_modal .pop_wrap.search-pop .hak-con .b_btn {padding: 5px 20px; border: none; display: inline-block;}
.au_modal .pop_wrap.search-pop .s-hak {text-align: center;}
.au_modal .pop_wrap.search-pop .s-hak ul {display: grid; grid-template-columns: 80px auto 80px; row-gap: 10px;}
.au_modal .pop_wrap.search-pop .s-hak .hak-tit { background: #f4f4f4; font-weight: 600; padding: 5px 0; border-radius: 10px;}
.au_modal .pop_wrap.search-pop .s-hak li {display: block; padding: 5px 0; align-self: center;}
.au_modal .pop_wrap.search-pop .s-hak .lt {text-align: left;}
.au_modal .pop_wrap.search-pop .hak-con {max-height: 300px; overflow-y:auto; padding: 10px 0; margin-top: 10px;}
.au_modal .pop_wrap.search-pop .con-txt dd{padding: 0; border:none;}

/*modal pop edit추가 241105*/
.edit_area {justify-content: end;}
.au_modal .pop_wrap.edit_pop {width: clamp(400px, 95vw, 900px); text-align: left;}
.au_modal .pop_wrap.edit_pop dt{display: flex; flex-direction: column; gap:20px;}
.login_area dl .logout h1 {font-size: 30px; word-break: break-word;}

/*state*/
/* 승인여부(승인:Y,미승인:N,작성중:S,최종제출:A) */
h1.h_state b::after{content:'[신청가능]';}
h1.s_approve b::after{content:'[처리결과 승인]';}
h1.s_applying b::after{content:'[작성중]';}
h1.s_reject b::after{content:'[처리결과 미승인]';}
h1.s_complete b::after{content:'[심사중]';}

.s_approve h1.h_state b::after{content:'[처리결과 승인]';}
.s_applying h1.h_state b::after{content:'[작성중]';}
.s_reject h1.h_state b::after{content:'[처리결과 미승인]';}
.s_complete h1.h_state b::after{content:'[심사중]';}

.nor_final .btn_area .btn_tmpr_strg,
.nor_final .btn_area .btn_apply,
.quick-box .btn_tmpr_strg,
.quick-box .btn_apply{
    display: none;
}

.s_approve .nor_final,
.s_approve .quick-box .btn_tmpr_strg,
.s_approve .quick-box .btn_apply,
.s_approve .input_box .file-up .input_btn,
.s_approve .input_box li.search .search_btn,
.s_approve .add_btn,.s_approve .con-box .close_btn,
.s_applying .nor_final,
.s_applying .quick-box .btn_tmpr_strg,
.s_applying .quick-box .btn_apply,
.s_applying .input_box .file-up .input_btn,
.s_applying .input_box li.search .search_btn,
.s_applying .add_btn,.s_applying .con-box .close_btn,
.s_reject .nor_final,
.s_reject .quick-box .btn_tmpr_strg,
.s_reject .quick-box .btn_apply,
.s_reject .input_box li.search .search_btn,
.s_reject .add_btn,.s_reject .con-box .close_btn,
.s_reject .input_box .file-up .input_btn {
    display: none !important;
}
.s_approve .input_box input:read-only,
.s_applying .input_box input:read-only,
.s_approve .input_box select:disabled,
.s_applying .input_box select:disabled,
.s_approve .input_box textarea:read-only,
.s_applying .input_box textarea:read-only {
    color: var(--hu_black);
}
.s_approve .input_box li.readonly,
.s_approve .input_box li,
.s_applying .input_box li.readonly,
.s_applying .input_box li {
    background: var(--hu_white);
    border: none;
}

/* 증명발급안내 좌측 네비 css 추가_2024.11.12 */
.d01 .quick-box li.act, .d01 .quick-box li:hover {color: var(--hu_blue); font-weight: 600;}

/*error page*/
.errorpage {width: clamp(200px, 90vw, 700px); margin: 0 auto; text-align: center;}
.errorpage .subtop {padding: 40px 0; margin: 0;}
.errorpage li {padding: 40px 0;}
.errorpage li.p_txt {border-top:1px solid #dfdfdf; margin-top: 40px;}

 /* 정렬 */
.s-text-left {
	text-align: left !important;
}
.s-text-center {
	text-align:center !important;
}
.s-text-right {
	text-align:right !important;
}

/* 버튼 disable 처리 */
button:disabled {
	background : #dcdcdc;
	pointer-events : none;
	opacity : 0.6;
	color : black;
}

/* hide */
.none {
	display:none !important;
}

/* input type number spin 제거 */
input::-webkit-inner-spin-button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

/*241203 add*/
.pic-box .stu_pic {min-width: 120px; height: 160px; overflow: hidden; border-radius: 10px; position: relative; flex-shrink: 0; border:1px solid var(--hu_line);}
.pic-box .stu_pic::before {content:''; background: url('../images/default_pic.gif') no-repeat; position: absolute; z-index: 0; top:0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--basic_font) - 2px); text-align: center;}
.pic-box .stu_pic img {z-index: 1; position: absolute;}
/*241203 add*/

/*241224 edit*/
.tit_num li div span {font-size: clamp(20px, 1.8vw, 30px); font-weight: 600; display: block; line-height: 120%; margin-bottom: 10px;}
.tit_num li span {width: 100%; flex-grow: 0; display: block;}
.tit_num li img {width: 100%; max-width: 500px;}

/* 파일 업로드 후 파일이 존재한다면 hover */
.input_box input.upfile {
	cursor: pointer;
}
.input_box input.upfile:hover {
	color :var(--hu_blue) !important;
	text-decoration: underline !important;
}

/* 파일 삭제 버튼 */
.input_box input.tempfile {
	width: calc(100% - 130px);
	display: inline-block;
}
.input_box .file-up .close_btn {
	height: 20px;
	position: static;
	display: none;
}
.input_box .file-up .close_btn.act {
	display: inline-block;
}

/* 공지사항 게시글 전용 */
.n_view .edit_view div{white-space: pre-wrap; word-break: break-word;}

/* 파일 업로드 후 파일이 존재한다면 hover */
.tit_span {
	cursor: pointer;
}
.tit_span:hover {
	color :var(--hu_blue) !important;
}

@media (max-width: 1480px) {
    section, .gnbArea, .gnb_top ul,article span,.login_area, .sec03 .max_w{padding: 0 40px;}
    .sec01 {padding: 0;}
    .ESG_swiper .swiper-slide img {width: auto; height: 100%;}
    .sec03 {padding-left: 0;}
    .sec04 {padding-right: 0;}
    .sub_swiper {right:-30vw;}
    .login_area dl .btn_area {flex-wrap: wrap;}
    .red_con .f_img01 {width: 30vw;}
    .red_con .f_img02 {width: 40vw;}
    footer {padding-left: 40px; padding-right: 40px;}

    /*sub*/
    .follow li a {font-size: 1.4vw;}
    .follow .squick li {gap:10px; padding: 15px;}
    .ser_imgcon {padding: 0;}
    .input_box .file-up .input_btn {top:5px;}
}

@media (max-width: 1280px) {
    h1, .chart_end h1 span.count {font-size: 3vw;}
    .gnbArea .gnb li {font-size: 1.8vw;}
    .login_area dl h1,.red_con dt  {font-size: 3vw;}
    .login_area dl h4, .gnb_top ul li, .btn_area .t_btn {font-size: 1.3vw;}
    .hu_chart_lable li {font-size: 4vw;}
    .red_con dd span {font-size: 1.6vw; width: 12vw; height: 12vw;}
    .main_swiper {height: auto; }
    .sub_swiper {width:55vw; position: static; margin: 300px 0 0 30vw; }
    .sub_swiper li {font-size: 2vw; text-align: left;}
    .sub_swiper li.active {font-size: 2.5vw;}
    .blue_con::after {right:0; top:200px; width: 70vw; height: 750px;}
    .blue_con {padding: 0;}
    .quick-box .btn_area a {padding: 10px 0;}
    .quick-box .btn_area button {padding: 10px 0;}

    /*sub*/
    .con-box h1 {font-size:clamp(26px, 2.7vw, 50px);}
    .follow {display: none;}
    .quick-box {width: auto;}
    .subtop {margin: 40px 0;}
    input[type="radio"]+label {font-size: 2.6vw;}
    .con-box {padding: 30px;}
    .add_btn {padding: 15px 0;}
    .add_btn img, .close_btn {width: 2.6vw;}
    .ser_imgcon h1{left: 40px; padding: 20px;}
    .nav_3rd {margin: 40px 0;}
    .t_paging {flex-wrap: wrap; gap: 5px;}
    .t_paging li {padding:5px 10px;}
    .t_footer {flex-direction: column; justify-content: center; align-items: center; gap:20px;}
    .t_search {flex-direction: row;}

}
@media (max-width: 800px) {
    section, .gnbArea, .gnb_top ul,article span,.login_area, .sec03 .max_w{padding: 0 20px;}
    section {margin: 40px 0;}
    .sec03 {margin: 0;}
    footer {padding-left: 20px; padding-right: 20px; flex-direction: column; align-items: center;}
    footer li {text-align: center;}
    .login_area dl h4, .gnb_top ul li, .btn_area .t_btn {font-size: 14px;}
    h1, .login_area dl h1, .red_con dt, .chart_end h1 span.count {text-align: center; font-size: 30px;}
    .hu_chart_lable li {font-size: 40px; margin-bottom: 40px;}
    .hu_chart_lable {margin: 40px 0; gap:2vw;}
    .red_con {margin-top: 30vw; padding-top: 75vw;}
    .red_con .f_img01 {width: 40vw; top:-95vw; right: 35vw;}
    .red_con .f_img02 {width: 60vw; top:-65vw;}
    .title-btn {flex-direction: column; align-items: center; gap:30px;}
    .login_area {width: 100%;}
    .login_area dl dd {display: none;}
    /*241002 add*/
    .login_area dl .logout {display: flex; min-height: 300px;}
    .login_area dl h1 {text-align: left;}
    .red_con dd {width: 100%; margin-top: 40px; justify-content: center;}
    .red_con dd span {font-size: 20px; width: 130px; height: 130px;}
    .blue_con::after, .red_con::after {width:90vw;}
    .main_swiper {width: 90vw; }
    .main_swiper .swiper-slide {width: 30vw; height:30vw;display: block; top:16vw;}
    .main_swiper .swiper-slide-active {top:0;}
    .main_swiper .swiper-slide img {height: 40vw; margin-top: -20px;}
    .main_swiper .swiper-slide span {width: 30vw; height:30vw; border-radius: 100%; opacity: 0; margin-left: 30vw;}
    .main_swiper .swiper-slide-active span {height: 60vw; width:60vw; border-radius: 100%;  opacity: 1; margin-left: 15vw;}
    .main_swiper .swiper-slide-active span img {height: 70vw;}
    .main_swiper .swiper-slide-next span, .main_swiper .swiper-slide-prev span {opacity: 0.5;}
    .sub_swiper { margin-top: 35vw; width: 100%; margin-left: 5vw; padding: 0 40px;}
    .sub_swiper li {font-size: 20px; width: 100%; text-align: center;}
    .sub_swiper li.active {font-size: 30px;}
    .blue_con::after {height: 85%; top:30vw;}
    .gnbWrap {display: none;}
    .ESG_swiper .swiper-slide img {margin-left: -70%;}
    nav {display: flex;}

    /*sub*/
    .subtop h1 {text-align: left; margin-top: 20px;}
    .subtop dl {display: none;}
    .subcon_box .hu_chart {min-height: 30vh; max-height: 40vh;}
    .quick-box{display: none;}
    .con-box h1 {font-size: 26px; text-align: left;}
    .con-txt dt {font-size: 20px;}
    .con-txt .t_2row td, .con-txt .t_2row th {display: block; text-align: left;}
    .con-txt .t_2row thead {display: none;}
    .input_con>li>h4 {font-size: 20px;}
    .con-box {padding: 20px;}
    .nor_radio .au_radio, .au_radio {flex-direction: column; gap:10px; align-items: flex-start; width:100%;}
    .au_radio br {display: inline-block; content: " "; padding: 0 2px;}
    input[type="radio"]+label, .au_radio input[type="radio"]+label {font-size: 20px;}
    .input_box input, .input_box select, .input_box textarea{font-size: 18px; line-height: 120%;}
    .input_box {flex-direction: column;}
    .add_btn {padding: 10px 0;}
    .add_btn img, .close_btn {width: 30px;}
    .pic-box {flex-direction: column-reverse; align-items:baseline;}
    .pic-box .stu_pic a {right: auto; left: 90px; width: 30px; height: 30px;}
    .pic-box .stu_pic a img {width: 12px;}
    .pic-box .input_area {width:100%;}
    .p-result {flex-direction: column;}
    .p_check .con-box .input_box {width: 100%;}
    .p_check .con-box .input_box li {max-width: 100%; width: 100%;}
    .ser_imgcon {width: 100%; height: 80vh;}
    .ser_imgcon h1 {left: 0; top:auto; bottom:0; height: auto; width: 100%;}
    .ser_imgcon img {width: auto; height: 100%; top:0; left:-40%;}
    .tit_num li {flex-direction: column;}
    .contact_hu {flex-direction: column;}
    .contact_hu img {width: 60px;}
    .contact_hu .con-box:first-child {gap:20px;}
    .join_con {margin: 0 auto; flex-direction: column;}
    .contact_hu h1 br {display: none;}
    .h_box {gap:40px;}
    .t_list thead {display: none;}
    .t_list tbody tr td:first-child  {display: none;}
    .t_list tbody tr th {width: 100%; border-radius: 10px 0 0 10px;}
    .t_search {flex-direction: row;}
    .n_view {gap:20px;}
    .apply_list dt .btn_area a{display: none;}
    .t_list tbody tr td.nodata {display:table-cell; border-radius:10px;}
    .input_box input.tempfile {width:calc(100% - 40px);margin-top:20px;}
    .input_box .file-up .input_btn {position:static; margin-top:20px;}
    .input_box .file-up .close_btn {margin-top:20px;}

    .apply_list dt {flex-direction:column; gap:10px;}

    .s_approve .via li,
    .s_applying .via li,
    .s_reject .via li{padding:0; }
    .s_approve .via,
    .s_applying .via ,
    .s_reject .via {align-items:baseline; padding-left:20px;}

    .dollor .flex0 {width:100%;}

	/* 250401_ios patch */
	input[type="date"], input[type="month"]{appearance:none ; -webkit-appearance: none; -moz-appearance: none;}
	input::-webkit-date-and-time-value {text-align: left;}
	.input_box input[type="date"], .input_box input[type="month"]{min-height:24px; height:24px; display:block; width:100%;  background:#fff;}
	.input_box input[type="date"]:read-only, .input_box input[type="month"]:read-only {background:#dfdfdf; color:#999;}
	/* 250401_ios patch */
}