@charset "utf-8";
@import url("font.css");
/* style reset */

body {overflow-y: auto; overflow-x: hidden; position: relative; margin: 0; width:100%; color: #000; font-size: 16px; font-family:'Pretendard', sans-serif; font-weight: 400; line-height: 26px; padding: 0 !important;}

.transparents-layer {display: none;}

button {transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.btn {padding: 0 30px; height: 42px; line-height: 40px; border-radius: 8px;}
.btn2 {padding: 0 20px; min-width: 110px; height: 45px; line-height: 43px; text-align: center; border-radius: 8px;}
.btn3 {display: inline-block; padding: 0 5px; min-width: 64px; height: 30px; line-height: 28px; font-size: 13px; text-align: center; border-radius: 8px;}
.btn4 {position: relative; width: 35px; height: 35px; line-height: 33px; border: 1px solid #ddd; border-radius: 8px;}
.btn4::after,
.btn4::before {content: ''; position: absolute; left: calc(50% - 6px); top: calc(50% - 1px); width: 12px; height: 2px; background-color: var(--color-active);}
.btn4.plus::after {transform: rotate(90deg);}
.btn5 {width: 180px; height: 60px; font-size: 22px; border-radius: 60px;}
.btn6 {display: inline-block; padding: 0 10px; min-width: 52px; height: 30px; line-height: 28px; font-size: 13px; font-weight: 500; text-align: center; border-radius: 5px;}
.btn7 {display: inline-block; padding: 0 10px; min-width: 50px; height: 35px; line-height: 33px; font-size: 14px; font-weight: 500; text-align: center; border-radius: 5px;}

.btn_search {}
.btn_search .icon {position: relative; display: block; transform-origin: left top; width: 22px; height: 22px;}
.btn_search .icon::after, .btn_search .icon::before {content: ''; position: absolute;}
.btn_search .icon::after {left: 0; top: 0; width: 13px; height: 13px; border: 2px solid #666; border-radius: 100%;}
.btn_search .icon::before {right: 0; bottom: 4px; width: 7px; height: 2px; background-color: #666; transform: rotate(45deg);}
.btn_close {}
.btn_close .icon {position: relative; display: block; width: 23px; height: 23px;}
.btn_close .icon::after, .btn_close .icon::before {content: ''; position: absolute; left: -2px; top: 10px; width: 27px; height: 2px; background-color: #222;}
.btn_close .icon::after {transform: rotate(45deg);}
.btn_close .icon::before {transform: rotate(-45deg);}
.btn_close2 {width: 21px; height: 21px; background: url('../../images/hmpg/icon_close.png') no-repeat center / 100%;}
.btn_more {}
.btn_more .icon {position: relative; display: inline-block; width: 10px; height: 10px;}
.btn_more .icon::after, .btn_more .icon::before {content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background-color: #666;} 
.btn_more .icon::before {transform: rotate(90deg);}
.btn_add {margin: 10px 0 0;}

.bg_gray {color: #fff; background-color: #4b4c51;}
.bg_pink {color: #fff; background-color: #dd2f4f;}
.bg_red {color: #fff; background-color: #f00000;}
.bg_brown {color: #fff; background-color: #a54601;}
.bg_black {color: #fff; background-color: #222;}
.bg_purple {color: #fff; background-color: #625aa5;}

.bg_white {color: #fff; border: 1px solid #999999; background-color: #999999;}
.bg_white2 {color: var(--color-active); border: 1px solid var(--color-active); background-color: #fff;}
.bg_white3 {color: #f00000; border: 1px solid #f00000; background-color: #fff;}
.bg_white4 {color: #fff; border: 1px solid var(--color-active); background-color: var(--color-active);}
.bg_white5 {color: #222; border: 1px solid #222; background-color: #fff;}
.bg_white6 {color: var(--color-active); border: 1px solid var(--color-active); background-color: #fff;}
.bg_white7 {color: #625aa5; border: 1px solid #625aa5; background-color: #fff;}
.bg_white8 {color: #15812a; border: 1px solid #15812a; background-color: #fff;}
.bg_white9 {color: #737373; border: 1px solid #727272; background-color: #fff;}

.color_gray {color: #4b4c51 !important;}
.color_gray2 {color: #666 !important;}
.color_pink {color: #dd2f4f !important;}
.color_red {color: #f00000 !important;}
.color_brown {color: #a54601 !important;}
.color_black {color: #222 !important;}
.color_blue {color: #0b6ae0 !important;}
.color_purple {color: #625aa5 !important;}
.color_green {color: #15812a !important;}

.f_b {font-weight: 600 !important;}
.f_m {font-weight: 500 !important;}
.f_n {font-weight: 400 !important;}
.p_r {position: relative !important;}

.hidden {padding: 0; margin: -1px; overflow: hidden; position: absolute; width: 1px; height: 1px; clip-path: inset(50%); border: 0; clip: rect(0 0 0 0);}
.w_flex_only {display: flex !important; display:-webkit-flex;}
.m_flex_only {display: none !important; display:-webkit-none;}
.w_hidden {display: none !important;}
.m_hidden {display: block !important;}

u {text-underline-position: under;}
.underline {border-bottom: 1px solid #666;}

.padding0 {padding: 0 !important;}
.margin0 {margin: 0 !important;}
.mt60 {margin-top:60px !important}
.mt50 {margin-top:50px !important}
.mt40 {margin-top:40px !important}
.mt30 {margin-top:30px !important}
.mt20 {margin-top:20px !important}
.mt15 {margin-top:15px !important}
.mt10 {margin-top:10px !important}
.mt5 {margin-top:5px !important}
.mb2 {margin-bottom:2px !important}
.mb5 {margin-bottom:5px !important}
.mb10 {margin-bottom:10px !important}
.mb15 {margin-bottom:15px !important}
.mb20 {margin-bottom:20px !important}
.mb25 {margin-bottom:25px !important}
.mb30 {margin-bottom:30px !important}
.mb35 {margin-bottom:35px !important}
.mb40 {margin-bottom:40px !important}
.mb50 {margin-bottom:50px !important}
.mb55 {margin-bottom:55px !important}
.mb60 {margin-bottom:60px !important}
.mb65 {margin-bottom:65px !important}
.mb80 {margin-bottom:80px !important}
.mb100 {margin-bottom:100px !important}
.mr5 {margin-right:5px !important}
.mr10 {margin-right:10px !important}
.mr15 {margin-right:15px !important}
.mr20 {margin-right:20px !important}
.mr25 {margin-right:25px !important}
.mr30 {margin-right:30px !important}
.mr35 {margin-right:35px !important}
.mr60 {margin-right:60px !important}
.ml5 {margin-left:5px !important}
.ml10 {margin-left:10px !important}
.ml20 {margin-left:20px !important}
.ml30 {margin-left:30px !important}
.pl10 {padding-left:10px !important}
.pl15 {padding-left:15px !important}
.pl20 {padding-left:20px !important}
.pl30 {padding-left:30px !important}
.pl40 {padding-left:40px !important}
.pl60 {padding-left:60px !important}
.pt10 {padding-top:10px !important}
.pt15 {padding-top:15px !important}
.pt20 {padding-top:20px !important}
.pt30 {padding-top:30px !important}
.pt33 {padding-top:33px !important}
.pt40 {padding-top:40px !important}
.pt50 {padding-top:50px !important}
.pb10 {padding-bottom:10px !important}
.pb40 {padding-bottom:40px !important}
.pr10 {padding-right: 10px !important}
.w50 {width: 50px !important;}
.w60 {width: 60px !important}
.w100 {width: 100px !important}
.w120 {width: 120px !important}
.w150 {width: 150px !important}
.w200 {width: 200px !important}
.w230 {width: 230px !important}
.w300 {width: 300px !important}
.w400 {width: 400px !important}
.w500 {width: 500px !important}
.w_25 {width: 25% !important}
.w_30 {width: 30% !important}
.w_35 {width: 35% !important}
.w_40 {width: 40% !important}
.w_45 {width: 45% !important}
.w_50 {width: 50% !important}
.w_60 {width: 60% !important}
.w_80 {width: 80% !important}
.w_100 {width: 100% !important}

.f_12 {font-size: 12px !important;} 
.f_13 {font-size: 13px !important;} 
.f_14 {font-size: 14px !important;} 
.f_18 {font-size: 18px !important;} 

.al {text-align: left !important;}
.ac {text-align: center!important;}
.ar {text-align: right!important;}
.vt {vertical-align: top!important;}
.vm {vertical-align: middle!important;}
.vb {vertical-align: bottom!important;}

.cl_bo {clear: both !important;}
.f_left {float: left !important;}
.f_right {float: right !important;}
.over_h {overflow: hidden !important;}
.wb_keep {word-break: keep-all !important;}

dl.skipnavi {position:relative;z-index: 500;}
dl.skipnavi dt {display:none}
dl.skipnavi dd a {position:absolute; left:0; top:-50px; font-size:0}
dl.skipnavi dd a:active, dl.skipnavi dd a:focus {display:block; left:0; top:0; z-index:51; width:400px; height:30px; padding-top:9px; text-align:center; background:#333; line-height:14px; text-decoration:none; color:#fff; font-size:12px; font-weight:bold}

/*서브공통*/
.board_title {margin: 30px 0 15px; display:flex; display:-webkit-flex;}
.board_title:first-child {margin-top: 0;}
.board_title h3 {display:flex; display:-webkit-flex; align-items: center; font-size: 20px; font-weight: 500; color: #000;}
.board_title h3 + a {margin-left: 10px;}
.board_title2 h3 {font-size: 26px;}
.board_text {margin: 0 0 15px; font-size: 15px; color: #666;}
.board_text a {margin-left: 10px; display: inline-block; width: 95px; height: 30px; line-height: 28px; font-size: 13px; text-align: center; border-radius: 5px;}
.program_title {margin: 30px 0 0; display:flex; display:-webkit-flex; align-items: center; font-size: 25px; color: #dd2f4f;}
.program_title span {margin-right: 10px; padding: 5px 15px; font-size: 15px; border-radius: 5px; background-color: #dd2f4f; color: #fff; }
.list_type > li {position: relative; padding-left: 10px;}
.list_type > li::after {content: ''; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; background-color: #555;}
.num_list {counter-reset: num;}
.num_list > li {position: relative; padding-left: 22px;}
.num_list > li::before {content: counter(num); counter-increment: num 1; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; font-size: 9px; line-height: 14px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 100%;}
.num_list2 {padding-left: 17px;}
.num_list2 > li {list-style: decimal;}
.img_box {position: relative; text-align: center;}
.img_box img {max-width: 100%;}
.point_box span {position: relative; padding-left: 10px; display: inline-block;}
.point_box span::before {content: '*'; position: absolute; left: 0; top: 3px; color: #fd0000;}
.byte {font-size: 13px; text-align: right; color: #666;}

.d_area {margin: 0 auto; width: 1400px;}
.contentsarea {margin: 0 auto; position: relative; width: 1400px; display:flex; display:-webkit-flex;}
.contentsarea .cont_wrap {padding-top: 140px; width: 100%;}
.contentsarea .cont_wrap .contents {padding: 0 0 100px;}
.contentsarea.mypage {display:flex; display:-webkit-flex; justify-content: space-between;}
.contentsarea.mypage .cont_wrap {width: calc(100% - 320px);}
.contentsarea.mypage .lnb_wrap {padding-top: 140px;}
.contentsarea.mypage  .location_wrap .location {justify-content: right;}

/*상단타이틀*/
.location_wrap {margin: 10px 0 60px;}
.location_wrap .location {display:flex; display:-webkit-flex;}
.location_wrap .location li {position: relative; padding-right: 13px; margin-right: 13px; line-height: 15px;}
.location_wrap .location li:last-child {padding-right: 0; margin-right: 0;}
.location_wrap .location li::before {content: ''; position: absolute; right: -3px; top: calc(50% - 6px); width: 6px; height: 11px; background: url('../../images/hmpg/icon_location_arrow.png') no-repeat center / 100%;}
.location_wrap .location li:last-child::before {display: none;}
.location_wrap .location li a {font-size: 15px; line-height: 15px; color: #666;}
.location_wrap h3 {margin: 30px 0 0; line-height: 45px; font-size: 45px; font-weight: 600; text-align: center;}

/*마이페이지메뉴*/
.lnb_wrap {margin: 20px 0 0; width: 260px;}
.lnb_wrap > h2 {padding: 17px 0; text-align: center; border-radius: 10px; color: #fff; background-color: #dd2f4f;}
.lnb_wrap .lnb {overflow-y: auto; position: relative;}
.lnb_wrap .lnb > li {margin-bottom: 5px; position: relative; width: 100%;}
.lnb_wrap .lnb > li > a {padding: 0 20px; display: block; width: 100%; height: 50px; line-height: 50px; font-size: 16px; font-weight: 500; color: #555; border-bottom: 1px solid #ddd;}
.lnb_wrap .lnb > li.active > a {color: #dd2f4f; background: url('../../images/hmpg/icon_lnb_active.png') no-repeat right 20px center;}

/*탭*/
.tabmenu {z-index: 180; position: relative; margin-bottom: 50px;}
.tabmenu > button {display: none;}
.tabmenu .dropdown-menu {display: flex; display:-webkit-flex;}
.tabmenu .dropdown-menu li {width: 100%; background-color: #f3f5f8;}
.tabmenu .dropdown-menu li:first-child {border-radius: 46px 0 0 46px;}
.tabmenu .dropdown-menu li:last-child {border-radius: 0 46px 46px 0;}
.tabmenu .dropdown-menu li button {padding: 0 10px; width: 100%; height: 46px; font-size: 16px; font-weight: 500; border-radius: 46px; word-break: keep-all; color: #666;}
.tabmenu .dropdown-menu li button span {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; max-height: 60px; -webkit-line-clamp: 3; line-height: 20px;}
.tabmenu .dropdown-menu li button[data-selected="selected"] {font-weight: 600; color: #fff; background-color: var(--color-active);}
.tab_area {margin-bottom: 45px; padding-bottom: 4px; display: flex; display:-webkit-flex; overflow-y: hidden; overflow-x: auto; width: 100%;}
.tab_area::-webkit-scrollbar {height: 10px; background-color: #f3f3f3;}
.tab_area::-webkit-scrollbar-track {background-color: transparent;}
.tab_area::-webkit-scrollbar-thumb{background-color: #ccc;}
.tab_area ul {margin: 0 auto; height: 70px; display: flex; display:-webkit-flex; align-items: flex-start; justify-content: flex-start;}
.tab_area ul li {height: 70px; line-height: 70px; flex: 1 1 auto; border-bottom: 1px solid #e5e4e7;}
.tab_area ul li a {padding: 0 50px; display: block; width: auto; min-width: 200px; font-size: 24px; font-weight: 500; text-align: center; color: #000; white-space: nowrap;}
.tab_area ul li.active {border-bottom: 3px solid #7c47b6;}
.tab_area ul li.active a {font-weight: 600; color: #7c47b6;}

/*멤버십*/
.membership_area .membership_txt {margin: 0 0 40px; font-size: 18px; font-weight: 300; text-align: center; color: #666;}
.membership_area > .button_box  {margin-top: 70px;}
.membership_area > .button_box button {margin-left: 20px; width: 180px; height: 60px; font-size: 22px; border-radius: 60px;}
/*로그인*/
.membership_area .login {margin: 0 auto; width: 100%; position: relative;}
.membership_area .login .write_box {margin: 0 auto; max-width: 500px; width: 100%;}
.membership_area .login .write_box .inp_area li {margin-bottom: 25px;}
.membership_area .login .write_box .inp_area li:last-child {margin-bottom: 0;}
.membership_area .login .write_box .inp_area li .tit {margin-bottom: 5px;}
.membership_area .login .write_box .inp_area li .inpbox {width: 100%; height: 60px;}
.membership_area .login .write_box .inp_area li .inpbox input.txt {padding: 0 25px;}
.membership_area .login .write_box .inp_area li .inpbox input.txt::placeholder {font-size: 15px; color: #b2b2b2;}
.membership_area .login .write_box .inp_area li .inpbox input.txt:focus {outline: 1px solid #000;}
.membership_area .login .write_box .check_box {margin-top: 15px;}
.membership_area .login .write_box .check_box input[type=checkbox] + label {color: #666;}
.membership_area .login .write_box .check_box input[type=checkbox] + label::before {border: 1px solid #dd2f4f;}
.membership_area .login .write_box .check_box input[type=checkbox] + label.on::before, 
.membership_area .login .write_box .check_box input[type=checkbox]:checked  + label::before {background-image: url('../../images/hmpg/icon_check_login.png');}
.membership_area .login .write_box .button_box {margin-top: 30px;}
.membership_area .login .write_box .button_box button {width: 100%; height: 65px; font-size: 18px; font-weight: 500; border-radius: 15px;}
.membership_area .login .write_box .find_area {margin-top: 25px; display: flex; display:-webkit-flex; justify-content: center; align-items: center;}
.membership_area .login .write_box .find_area li {position: relative; padding-right: 30px; margin-right: 30px;}
.membership_area .login .write_box .find_area li::after {content: ''; position: absolute; right: 0; top: calc(50% - 8px); width: 1px; height: 13px; background-color: #ddd;}
.membership_area .login .write_box .find_area li:last-child {padding-right: 0; margin-right: 0;}
.membership_area .login .write_box .find_area li:last-child::after {display: none;}
.membership_area .login .write_box .find_area li a {color: #000;}
/*아이디찾기 비밀번호찾기*/
.membership_area .membership_find {margin: 0 auto; max-width: 500px; width: 100%;}
.membership_area .membership_find ul {margin: 0 auto; max-width: 420px; display: flex; display:-webkit-flex; justify-content: space-between; gap: 20px;}
.membership_area .membership_find ul li {width: calc(50% - 10px); border-radius: 20px; border: 1px solid #ddd;}
.membership_area .membership_find ul li:hover {border-color: #dd2f4f;}
.membership_area .membership_find ul li a {padding: 40px 20px 25px; display: block; width: 100%; height: 100%;}
.membership_area .membership_find ul li a span {padding-top: 120px; display: block; font-size: 18px; text-align: center; color: #222;}
.membership_area .membership_find ul li:hover a span {color: #dd2f4f;}
.membership_area .membership_find ul li.phone a span {background: url('../../images/hmpg/icon_membership_find_phone.png') no-repeat center top 0px;}
.membership_area .membership_find ul li.ipin a span {background: url('../../images/hmpg/icon_membership_find_ipin.png') no-repeat center top 10px;}
.membership_area .membership_find .membership_find_txt {margin-top: 30px; line-height: 26px; font-size: 15px; text-align: center; color: #666;}
/*아이디찾기결과*/
.membership_area .membership_find_result {margin: 0 auto; max-width: 500px;}
.membership_area .membership_find_result .result_id {margin-bottom: 60px; height: 100px; line-height: 100px; font-size: 20px; font-weight: 500; text-align:center; background-color: #f9f9f9; color: #333;}
.membership_area .membership_find_result .result_id span {margin-left: 20px; color: #dd2f4f;}
.membership_area .button_box.result {margin: 60px auto 0; max-width: 380px;}
.membership_area .button_box.result button {margin-left: 20px; width: 100%; height: 60px; font-size: 22px; border-radius: 60px;}
/*비밀번호찾기*/
.membership_area .membership_inp {margin: 0 auto 80px; max-width: 500px; width: 100%;}
.membership_area .membership_inp .inp_form li {margin-bottom: 25px;}
.membership_area .membership_inp .inp_form li:last-child {margin-bottom: 0;}
.membership_area .membership_inp .inp_form li .tit {margin-bottom: 5px;}
.membership_area .membership_inp .inp_form li .inpbox {width: 100%; height: 60px;}
.membership_area .membership_inp .inp_form li .inpbox input.txt {padding: 0 25px;}
.membership_area .membership_inp .inp_form li .inpbox input.txt::placeholder {font-size: 15px; color: #b2b2b2;}
.membership_area .membership_inp .inp_form li .inpbox input.txt:focus {outline: 1px solid #000;}
/*비밀번호재설정*/
.membership_area .membership_inp .button_box {margin-top: 30px;}
.membership_area .membership_inp .button_box div {display: block;}
.membership_area .membership_inp .button_box button {margin: 0 0 10px; width: 100%; height: 65px; font-size: 18px; border-radius: 15px;}
.membership_area .membership_inp .button_box button:last-child {margin: 0;}
.membership_area .membership_txt2 {margin: 0 auto; max-width: 500px;}
.membership_area .membership_txt2 p.tit {margin-bottom: 15px; line-height: 16px; font-size: 16px; font-weight: 500;}
.membership_area .membership_txt2 p.txt {padding-left: 10px; position: relative; line-height: 26px; font-size: 15px; color: #666; word-break: keep-all;}
.membership_area .membership_txt2 p.txt::before {content: '-'; position: absolute; top: 0; left: 0;}

/*회원가입*/
.join_area {padding: 50px 0 0;}
.join_area .join_txt {margin: 0 0 40px; font-size: 18px; font-weight: 300; text-align: center; color: #666;}
.join_area .join_txt span {font-weight: 600; color: #000;}
.join_step {margin-bottom: 50px; display: flex; display:-webkit-flex; justify-content: center; gap: 15px;}
.join_step li {width: 80px; height: 80px; line-height: 80px; font-size: 18px; font-weight: 500; text-align: center; color: #222; border-radius: 80px; background-color: #eaecee;}
.join_step li .txt1 {display: none;}
.join_step li.complete {line-height: 72px; color: #dd2f4f; background-color: #fff; border: 4px solid #dd2f4f;} 
.join_step li.active {padding: 0 70px; line-height: 72px; width: auto; color: #dd2f4f; background-color: #fff; border: 4px solid #dd2f4f;}
.join_step li.active .txt1 {display: block;}
.join_step li.active .txt2 {display: none;}
.join_area > .button_box  {margin-top: 70px;}
.join_area > .button_box button {margin-left: 20px; width: 180px; height: 60px; font-size: 22px; border-radius: 60px;}
/*회원유형선택*/
.join_area .join_type {margin: 70px auto 100px; display: flex; display:-webkit-flex; justify-content: center; gap: 20px;}
.join_area .join_type li a {display: flex; display:-webkit-flex; justify-content: center; align-items: center; width: 175px; height: 140px; border-radius: 20px; border: 1px solid #ddd;}
.join_area .join_type li:hover a {box-shadow: 0px 10px 5px -2px #ddd; border-color: #dd2f4f; background-color: #dd2f4f;}
.join_area .join_type li a span {display: block; font-size: 20px; color: #666; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.join_area .join_type li:hover a span {padding-top: 30px; color: #fff; background: url('../../images/hmpg/icon_join_type.png') no-repeat center 0;}
/*본인인증*/
.join_area .join_find {margin: 70px auto 0; max-width: 700px; width: 100%;}
.join_area .join_find ul {display: flex; display:-webkit-flex; justify-content: space-between; gap: 20px;}
.join_area .join_find ul li {width: calc(50% - 10px);}
.join_area .join_find ul li a {padding: 30px 10px; display: block; width: 100%; height: 250px; border-radius: 20px; border: 1px solid #ddd;}
.join_area .join_find ul li:hover a {border-color: #dd2f4f;}
.join_area .join_find ul li a span {margin-bottom: 10px; display: block; font-size: 18px; text-align: center;}
.join_area .join_find ul li:hover a span {color: #dd2f4f;}
.join_area .join_find ul li a p {line-height: 22px; font-size: 15px; text-align: center; color: #666;}
.join_area .join_find ul li.phone a {background: url('../../images/hmpg/icon_membership_find_phone.png') no-repeat center bottom 40px;}
.join_area .join_find ul li.ipin a {background: url('../../images/hmpg/icon_membership_find_ipin.png') no-repeat center bottom 47px;}
.join_area .join_find .join_find_txt {margin-top: 30px; line-height: 26px; font-size: 15px; text-align: center; color: #666;}
/*약관동의*/
.agree_area {margin-bottom: 40px;}
.agree_area .agree_title {margin-bottom: 20px;}
.agree_area .agree_title .check_box input[type=checkbox] + label {padding-left: 35px; line-height: 24px; font-size: 20px; font-weight: 500;}
.agree_area .agree_title .check_box input[type=checkbox] + label span {color: #d41926;}
.agree_area .agree_title .check_box input[type=checkbox] + label::before {content: ''; position: absolute; left: 0; top: calc(50% - 12px); width: 22px; height: 22px; border: 1px solid #ddd; border-radius: 24px; background-image: url('../../images/hmpg/icon_join_check.png');}
.agree_area .agree_title .check_box input[type=checkbox] + label.on::before, 
.agree_area .agree_title .check_box input[type=checkbox]:checked  + label::before {border-color: #dd2f4f; background-image: url('../../images/hmpg/icon_join_check_active.png');}
.agree_area .agree_text {margin: 10px 0 0 35px; font-size: 15px; color: #666;}
.agree_area .agree_box {overflow-y: auto; padding: 20px; max-height: 190px; border: 1px solid #ddd; border-top: 2px solid #222;}
.agree_area .agree_box::-webkit-scrollbar {width: 17px;}
.agree_area .agree_box::-webkit-scrollbar-thumb {background-color: #bfc7d0; border-radius: 17px; background-clip: padding-box; border: 5px solid transparent;}
.agree_area .agree_box::-webkit-scrollbar-track {background-color: transparent; border-radius: 17px;}
.agree_area .agree_box h4 {margin-bottom: 20px; font-size: 20px;}
.agree_area .agree_box h5 {margin-bottom: 10px; font-size: 16px;}
/*가입완료*/
.join_area .join_txt.finish {margin: 100px 0;}
/*기존회원안내*/
.join_area .exist_id {margin: 0 auto; max-width: 500px; height: 100px; line-height: 100px; font-size: 20px; font-weight: 500; text-align:center; background-color: #f9f9f9; color: #333;}
.join_area .exist_id span {margin-left: 20px; color: #dd2f4f;}
/*비밀번호변경권장*/
.membership_area .membership_tit {margin-bottom: 30px; line-height: 35px; font-size: 30px; text-align: center;}
.membership_area .membership_tit span {color: #dd2f4f;}
/*회원가입완료*/
.membership_area .join_complete {margin: 60px auto 0; padding: 20px 50px; max-width: 500px; line-height: 20px; font-size: 20px; font-weight: 500; background-color: #f9f9f9; color: #333;}
.membership_area .join_complete p {margin: 15px 0; display: flex; display:-webkit-flex; flex-wrap: wrap;}
.membership_area .join_complete p span:first-child {width: 100px;}
.membership_area .join_complete p span:last-child {margin-left: 20px; width: calc(100% - 120px); color: #dd2f4f; word-break: break-all;}

/*저작권정책*/
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.privacy .box {padding: 30px 50px; margin-bottom: 30px; line-height: 26px; background-color: #625aa5; color: #fff; border-radius: 10px;}
.privacy .text {padding: 0 50px;}
.privacy .wrap {padding: 0 50px;}
.privacy .list {margin: 50px 0; display: flex; display:-webkit-flex; justify-content: center; flex-wrap: wrap; gap: 40px;}
.privacy .list > li {max-width: 100%; width: 550px; border-radius: 10px; border: 1px solid #ddd;}
.privacy .list > li .tit {display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; border-radius: 10px 10px 0 0; color: #fff; background-color: #3c4d7e;}
.privacy .list > li > ul {padding: 35px 20px 35px 270px;}
.privacy .list > li:nth-child(1) > ul {background: url('../../images/hmpg/img_privacy1.png') no-repeat 30px center;}
.privacy .list > li:nth-child(2) > ul {background: url('../../images/hmpg/img_privacy2.png') no-repeat 30px center;}
.privacy .list > li:nth-child(3) > ul {background: url('../../images/hmpg/img_privacy3.png') no-repeat 30px center;}
.privacy .list > li:nth-child(4) > ul {background: url('../../images/hmpg/img_privacy4.png') no-repeat 30px center;}
.privacy-wrap {line-height: 32px; color: #666;}
.privacy-wrap h4 {font-size: 20px; margin: 40px 0 20px; color: #333;}
.privacy-wrap h5 {font-size: 18px; margin: 20px 0 10px; color: #333;}

/*개인정보처리방침*/
.listtype-other {margin-left: 20px;}
.listtype-other > li {word-break: keep-all;}
.listtype-other > li > span {margin-left: -20px;}
.listtype-dot > li {padding-left: 10px; position: relative;}
.listtype-dot > li::before {content: ''; position: absolute; left: 0; top: 14px; width: 3px; height: 3px; background-color: #555;}
.listtype-dot > li span {font-weight: 500; color: #333;}
.privacy2 {margin: 0 auto; max-width: 1000px; width: 100%; line-height: 24px; font-size: 15px;}
.privacy2 .privacy_box {padding: 30px 35px; margin-bottom: 50px; line-height: 26px; border-radius: 20px; border: 1px solid #000;}
.privacy2 .privacy_label {display: flex; display:-webkit-flex; flex-wrap: wrap; gap: 20px;}
.privacy2 .privacy_label li {width: calc(25% - 15px); border-radius: 20px; border: 1px solid #e5e4e7; background-color: #f1f3f6;}
.privacy2 .privacy_label li a {padding: 30px 0 20px; display: block; text-align: center; }
.privacy2 .privacy_label li a p {margin-top: 10px; font-size: 16px; font-weight: 500;}
.privacy2 .privacy_label li a img {width: auto; height: 60px;}
.privacy2 .privacy_index li {padding-left: 15px; position: relative; line-height: 24px; font-size: 15px; font-weight: 300;}
.privacy2 .privacy_index li::before {content: ''; position: absolute; top: 10px; left: 0; display: block; width: 4px; height: 4px; border-radius: 4px; background-color: #000;}
.privacy2 .privacy_index li a {color: #000;}
.privacy2 h4 {margin: 50px 0 20px; font-size: 24px; display: flex; display:-webkit-flex; align-items: center; gap: 15px;}
.privacy2 .gray_box {margin: 10px 0; padding: 15px 20px; background-color: #f1f3f6; border-radius: 10px;}

/*이용약관*/
article.rule {margin: 0 auto; max-width: 1000px; width: 100%; line-height: 24px; font-size: 15px;}
article.rule h4 {margin: 50px 0 20px; font-size: 24px;}

/*마이페이지*/
.enroll_step {margin: 50px 0 80px; display: flex; display:-webkit-flex; justify-content: center; gap: 25px;}
.enroll_step li {padding: 0 10px; position: relative; width: 230px; height: 80px; line-height: 60px; font-size: 18px; font-weight: 500; text-align: center; color: #666; border-radius: 80px; border: 10px solid #e0e0e0;}
.enroll_step li::after {content: ''; display: block; position: absolute; top: calc(50% - 15px); right: -22px; width: 0; height: 0; border-top: 15px solid transparent; border-left: 20px solid #e0e0e0; border-right: 15px solid none; border-bottom: 15px solid transparent;}
.enroll_step li:last-child:after {display: none;}
.enroll_step li .txt1 {display: flex; display:-webkit-flex; align-items: center; gap: 10px;}
.enroll_step li .txt1 span {width: 40px; height: 40px; line-height: 40px; font-weight: 600; border-radius: 40px; background-color: #e0e0e0; color: #666;}
.enroll_step li .txt2 {display: none;}
.enroll_step li.active {border: 10px solid #b7ce02; color: #222;}
.enroll_step li.active::after {border-left: 20px solid #b7ce02;}
.enroll_step li.active .txt1 span {background-color: #b7ce02; color: #fff;}
.enroll_type {display: flex; display:-webkit-flex; justify-content: center; gap: 40px;}
.enroll_type li {border-radius: 20px; border: 1px solid #dd2f4f;}
.enroll_type li a {padding: 35px 0 0; display: block; width: 370px; height: 320px; text-align: center; border-radius: 18px; border: 3px solid #fff;}
.enroll_type li:hover a {border: 3px solid #dd2f4f;}
.enroll_type li.type1 a {background: url('../../images/hmpg/icon_enroll_type1.png') no-repeat center bottom 35px;}
.enroll_type li.type2 a {background: url('../../images/hmpg/icon_enroll_type2.png') no-repeat center bottom 40px;}
.enroll_type li a span {font-size: 22px; font-weight: 600; color: #dd2f4f;}
.enroll_type li a p {margin: 10px 0 0; line-height: 22px; font-size: 15px; color: #666;}
.enroll_box {padding: 30px; text-align: center; background-color: #f9f9f9;}
.enroll_box p {line-height: 32px; font-size: 20px;}
.enroll_box p .txt1 {font-weight: 600; color: #dd2f4f;}
.enroll_box p .txt2 {font-weight: 600;}
.state_wrap {margin-bottom: 50px; display: flex; display:-webkit-flex; justify-content: center; align-items: center; gap: 30px;}
.state_wrap .tit {padding: 0 35px; min-width: 120px; height: 44px; line-height: 44px; font-size: 18px; font-weight: 500; border-radius: 44px; color: #0a8823; background-color: #f3f4f8;}
.state_wrap .state_list {display: flex; display:-webkit-flex; align-items: center; flex-wrap: wrap;}
.state_wrap .state_list li {margin-right: 20px; padding-right: 20px; position: relative; color: #666;}
.state_wrap .state_list li::after {content: ''; display: block; position: absolute; top: calc(50% - 8px); right: 0; width: 1px; height: 15px; background-color: #ddd;}
.state_wrap .state_list li:last-child {margin-right: 0; padding-right: 0;}
.state_wrap .state_list li:last-child:after {display: none;}
.tab_btn {margin-bottom: 15px; display: flex; display:-webkit-flex; gap: 10px;}
.tab_btn li a {padding: 0 20px; display: block; height: 35px; line-height: 35px; font-size: 15px; border-radius: 35px; background-color: #f4f5f9; color: #555;}
.tab_btn li.active a {background-color: #3a3e47; color: #fff;}
.matching_process {padding: 30px; text-align: center; border-radius: 10px; border: 1px solid #ddd;}
.matching_process > p {margin-bottom: 25px; font-size: 20px;}
.matching_process > p span {color: #dd2f4f;}
.matching_process ul {display: flex; display:-webkit-flex; justify-content: center; gap: 20px;}
.matching_process ul li {position: relative; width: 154px;}
.matching_process ul li::before {content: ''; display: block; position: absolute; top: 50px; left: 50%; width: 1px; height: 20px; background-color: #625aa5;}
.matching_process ul li::after {content: ''; display: block; position: absolute; top: 25px; right: -20px; width: 20px; height: 1px; background-color: #625aa5;}
.matching_process ul li:last-child::after {display: none;}
.matching_process ul li span {margin-bottom: 20px; display: block; width: 100%; height: 50px; line-height: 46px; text-align: center; color: #625aa5; border-radius: 50px; border: 2px solid #625aa5;}
.matching_process ul li span:last-child {margin-bottom: 0;}
.matching_process ul li span.active {border-color: #dd2f4f; color: #dd2f4f;}

/*늘봄신청하기*/
/*목록*/
/*상세*/
.program_detail {position: relative; display: flex; display:-webkit-flex; gap: 50px;}
.program_detail .img_wrap {overflow: hidden; width: 355px; height: 240px; border-radius: 20px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.program_detail .img_wrap.type1 {background-image: url('../../images/hmpg/img_program_detail_type1.png');} /*체육*/
.program_detail .img_wrap.type2 {background-image: url('../../images/hmpg/img_program_detail_type2.png');} /*문화/예술*/
.program_detail .img_wrap.type3 {background-image: url('../../images/hmpg/img_program_detail_type3.png');} /*인문/사회*/
.program_detail .img_wrap.type4 {background-image: url('../../images/hmpg/img_program_detail_type4.png');} /*창의/과학*/
.program_detail .img_wrap.type5 {background-image: url('../../images/hmpg/img_program_detail_type5.png');} /*기후/환경*/
.program_detail .img_wrap.type6 {background-image: url('../../images/hmpg/img_program_detail_type6.png');} /*학교적응/정서*/
.program_detail .img_wrap.type7 {background-image: url('../../images/hmpg/img_program_detail_type7.png');} /*교과교육*/
.program_detail .img_wrap.type8 {background-image: url('../../images/hmpg/img_program_detail_type8.png');} /*기타*/
.program_detail .img_wrap .state {margin: 10px; display: inline-block; width: 78px; height: 32px; line-height: 32px; font-size: 15px; font-weight: 500; text-align: center; border-radius: 32px;}
.program_detail .img_wrap .state.state1 {color: #fff; background-color: #dd2f50;}
.program_detail .img_wrap .state.state2 {color: #fff; background-color: #625aa5;}
.program_detail .txt_wrap {width: calc(100% - 405px); display: flex; display:-webkit-flex; flex-direction: column; justify-content: space-between;}
.program_detail .txt_wrap h3 {line-height: 26px; font-size: 26px; font-weight: 600;}
.program_detail .txt_wrap .keyword {margin-top: 15px;}
.program_detail .txt_wrap .keyword span {margin-right: 5px; font-size: 15px; color: #625aa5;}
.program_detail .txt_wrap dl {margin-bottom: 5px; display: flex; display:-webkit-flex; align-items: center; gap: 10px;}
.program_detail .txt_wrap dl:last-child {margin-bottom: 10px;}
.program_detail .txt_wrap dl dt {width: 100px; height: 32px; line-height: 30px; font-size: 15px; text-align: center; color: #625aa5; border-radius: 5px; border: 1px solid #625aa5;}
.program_detail .txt_wrap dl dd {font-size: 16px; color: #666;}
.program_detail .txt_wrap dl dd span {margin-right: 15px;}
.program_detail .button_wrap {position: absolute; top: 0; right: 0; width: 100px;}
.program_detail .button_wrap button {width: 100px; height: 32px; font-size: 15px; text-align: center; color: #fff; border-radius: 10px; background-color: #dd2f50;}
.program_detail .button_wrap .btn_like {margin-top: 5px; padding-left: 30px; color: #666; border: 1px solid #c1c1c1; background: #fff url('../../images/hmpg/icon_like.png') no-repeat 23px center;}
.program_detail .button_wrap .btn_like.active {background: #fff url('../../images/hmpg/icon_like_active.png') no-repeat 23px center;}
.program_detail.apply .bottom {display: flex; display:-webkit-flex; flex-wrap: wrap;}
.program_detail.apply .txt_wrap dl {width: 50%;}
.program_detail.apply .txt_wrap dl:last-child {margin-bottom: 5px;}
.recruit_list {overflow-y: auto; padding: 0 30px; height: 190px; border-radius: 15px; border: 1px solid #ddd;}
.recruit_list::-webkit-scrollbar {width: 17px;}
.recruit_list::-webkit-scrollbar-thumb {background-color: #bfc7d0; border-radius: 17px; background-clip: padding-box; border: 5px solid transparent;}
.recruit_list::-webkit-scrollbar-track {background-color: transparent; border-radius: 17px;}
.recruit_list > ul {display: flex; display:-webkit-flex; align-items: center; flex-wrap: wrap;}
.recruit_list > ul > li {padding: 17px 0; width: 50%; display: flex; display:-webkit-flex; align-items: center; gap: 60px; border-bottom: 1px solid #ddd;}
.recruit_list > ul > li:nth-last-child(1) {border-bottom: 0;}
.recruit_list > ul > li:nth-last-child(2) {border-bottom: 0;}
.recruit_list > ul > li > .tit {font-weight: 500;}
.recruit_list > ul > li > .state {width: 42px; text-align: center; color: #666;}
.recruit_list > ul > li > ul {display: flex; display:-webkit-flex; align-items: center;}
.recruit_list > ul > li > ul li {position: relative; width: 80px; color: #666;}
.mouseover {position: relative;}
.mouseover a {padding-bottom: 3px; text-decoration: underline;}
.mouseover a:hover + .mouseover_box {display: block;}
.mouseover .mouseover_box {display: none; z-index: 1; padding: 10px 15px; overflow-y: auto; position: absolute; top: 40px; left: 10px; width: 180px; height: 250px; border-radius: 10px; border: 1px solid #dd2f50; background-color: #fff;}
.mouseover .mouseover_box::-webkit-scrollbar {width: 17px;}
.mouseover .mouseover_box::-webkit-scrollbar-thumb {background-color: #bfc7d0; border-radius: 17px; background-clip: padding-box; border: 5px solid transparent;}
.mouseover .mouseover_box::-webkit-scrollbar-track {background-color: transparent; border-radius: 17px;}
.mouseover .mouseover_box:hover {display: block;}
.mouseover .mouseover_box p {font-size: 14px;}

/*늘봄이야기*/
.intro_box {padding-bottom: 100px;} 
.intro_box:last-child {padding-bottom: 0;} 
.intro_box h4 {margin-bottom: 50px; line-height: 34px; font-size: 34px; font-weight: 600;} 
.intro_box .text_wrap {margin-bottom: 70px; display: flex; gap: 90px;}
.intro_box .text_wrap h4 {width: 360px;}
.intro_box .text_wrap p {width: calc(100% - 450px); line-height: 36px; font-size: 24px; font-weight: 300; word-spacing: -1.2px;} 
.intro_box .text_wrap p strong {font-weight: 500;} 
/*1. 늘봄학교란 무엇인가요?*/
.intro_box .icon_list {display: flex; justify-content: center; align-items: center; gap: 50px; height: 400px; background: url(../../images/hmpg/bg_icon_list.png) no-repeat center / cover;} 
.intro_box .icon_list li {position: relative; align-content: center; width: 200px; height: 200px; line-height: 26px; font-size: 18px; text-align: center; border-radius: 50%; background-color: #fff;} 
.intro_box .icon_list li:nth-child(1) {border: 4px solid #f5c74f;}
.intro_box .icon_list li:nth-child(2) {border: 4px solid #ef966d;}
.intro_box .icon_list li:nth-child(3) {border: 4px solid #ea5975;}
.intro_box .icon_list li:nth-child(4) {border: 4px solid #d05bc1;}
.intro_box .icon_list li:nth-child(5) {border: 4px solid #d05bc1;}
.intro_box .icon_list li:nth-child(6) {border: 4px solid #625ba6;}
/*2. 늘봄학교는 왜 필요할까요?*/
.intro_box .intro_list {display: flex; flex-wrap: wrap; gap: 20px;} 
.intro_box .intro_list li {padding: 25px; flex: calc(50% - 20px); text-align: center; font-size: 18px; font-weight: 300; color: #333; border: 2px solid #ddd; border-radius: 20px;} 
.intro_box .intro_list li strong {font-weight: 500;} 
.intro_box .intro_list li.last {padding: 25px 15px 15px; border-color: #f5cdd4;}
.intro_box .intro_list li.last .box_wrap {margin-top: 10px; padding: 10px; border-radius: 10px; background-color: #fdf3f5;}
.intro_box .intro_list li.last .box_wrap .box {display: flex; flex-wrap: wrap; gap: 10px;}
.intro_box .intro_list li.last .box_wrap .box p {padding: 15px; flex: calc(50% - 10px); font-size: 16px; border-radius: 10px; background-color: #fff; border: 1px solid #f5cdd4;}
.intro_box .intro_list li.last .box_wrap span {margin-top: 10px; display: block; font-size: 14px;}
/*3. 무엇이달라지나요?*/
.intro_box table {border-collapse: separate; border-spacing: 10px 15px;} 
.intro_box table thead th.arrow {position: relative;}
.intro_box table thead th.arrow::after {content: ""; display: block; position: absolute; left: 50%; top: 50%; transform: translateY(-50%); width: 27px; height: 17px; background: url(../../images/hmpg/ico_change_arrow.png) no-repeat;} 
.intro_box table tbody th {padding: 30px; border: 2px solid #ddd;} 
.intro_box table tbody td {padding: 30px; border: 2px solid #ddd; text-align: center; border-radius: 15px;} 
.intro_box .change_list thead th {padding: 25px 0; text-align: center; font-size: 26px; border-radius: 76px;} 
.intro_box .change_list thead th.before {background: #e3e6ec;} 
.intro_box .change_list thead th.after {color: #fff; background: #dd2f4f;} 
.intro_box .change_list tbody th.name {align-content: center; min-width: 260px; font-size: 22px; font-weight: 500; text-align: center;  border-radius: 15px; border: 0; background: #f3f3f7;} 
.intro_box .change_list tbody td.before {color: #666;}
.intro_box .change_list tbody td.after {color: #333; border-color: #dd2f4f;}
.intro_box .change_list tbody td strong {display: block; font-size: 18px;}
.intro_box .change_list tbody td p {line-height: 26px; font-size: 16px; font-weight: 300;}
.intro_box .change_list tbody td.before p {margin-top: 10px;}
.intro_box .change_list tbody td.after p {margin-top: 5px;}
.intro_box .change_list tbody td.after p + strong {margin-top: 15px;}
/*4. 늘봄학교의비전및목표*/
.intro_box .vision {position: relative; padding: 0 20px; font-size: 26px; text-align: center;} 
.intro_box .vision .title {position: absolute; top: -20px; left: calc(50% - 60px); width: 120px; height: 40px; line-height: 36px; font-size: 18px; border-radius: 40px; color: #dd2f4f; border: 2px solid #dd2f4f; background-color: #fff;} 
.intro_box .vision.vision1 {padding: 20px 0; margin: 0 auto 130px; position: relative; width: 900px; line-height: 32px; font-size: 26px; border-radius: 120px; color: #fff; background: #dd2f4f;} 
.intro_box .vision.vision1::after {content: ""; position: absolute; left: calc(50% - 78px); bottom: -89px; width: 156px; height: 69px; background: url(../../images/hmpg/bg_vision.png) repeat;} 
.intro_box .vision.vision2 {padding: 20px 0; margin: 0 auto 70px; position: relative; width: 900px; line-height: 32px; border-radius: 120px; border: 2px solid #dd2f4f;  font-size: 26px; color: #dd2f4f;}
.intro_box .vision.vision3 {padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 15px; background: #f3f3f7;} 
.intro_box .vision.vision3 .flex-box {width: 100%; display: flex; gap: 40px;} 
.intro_box .vision.vision3 .flex-box .column {width: 100%;}
.intro_box .vision.vision3 .flex-box .column .text_area span {background: linear-gradient(90deg, #f5c450, #dd2f4f, #7366b5); padding: 0 30px; display: inline-block; height: 70px; line-height: 70px; font-size: 36px; font-weight: 700; border-radius: 70px; color: #fff; background-color: #000;} 
.intro_box .vision.vision3 .vision_list {width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 20px;} 
.intro_box .vision.vision3 .vision_list li {padding: 25px 20px 20px; border-radius: 15px; border: 1px solid #ddd; background-color: #fff;} 
.intro_box .vision.vision3 .vision_list li strong {display: block; font-weight: 600; font-size: 20px; color: #333;} 
.intro_box .vision.vision3 .vision_list li p {margin-top: 10px; display: block; font-weight: 300; font-size: 16px; color: #666;} 
/*5. 늘봄학교추진과제*/
.sub_tit_box {margin-bottom: 20px; height: 56px; line-height: 56px; font-weight: 500; font-size: 20px !important; text-align: center; color: #473f94; background: #f8f7fe;} 
.propel_table + .sub_tit_box {margin-top: 60px;}
.propel_table {width: 100%;}
.propel_table table {width: 100%;}
.propel_table thead th .year {font-size: 22px; color: #dd2f4f;} 
.propel_table thead th .year::after {content: ""; display: block; width: 100%; height: 11px; margin: 10px 0; background: url(../../images/hmpg/ico_arrow_line.png) no-repeat center/contain;} 
.propel_table thead th .year + span {display: inline-block; width: 98px; height: 36px; line-height: 36px; font-size: 18px; font-weight: 500; border-radius: 36px; color: #fff; background-color: #dd2f4f;}
.propel_table table tbody th {font-size: 20px; font-weight: 500; color: #625ba6; border-radius: 15px; border-color: #625ba6;}
.propel_table table tbody td {font-size: 20px;}
.propel_table table tbody td span {font-size: 16px;}
.propel_table table tbody td.info {padding: 0; border: 0; font-size: 16px; text-align: left; color: #666;}
.propel_table table tbody td.line_pink {border-color: #dd2f4f;} 
.propel_table table tbody td.empty {border: 0;} 
.propel_table table tbody td.line_box {padding: 15px 20px; position: relative; line-height: 26px; font-size: 18px; font-weight: 500; border-radius: 80px; color: #fff; border: 0; background: #625ba6;}
.propel_table table tbody td.line_box::before {content: ""; position: absolute; top: -24px; left: 50%; display: inline-block; width: 17px; height: 20px; background: url(../../images/hmpg/ico_change_arrow2.png) no-repeat center/contain;}



@media screen and (max-width:1400px) {
    .d_area {padding: 0 20px; width: 100%;}
    .contentsarea {padding: 0 20px; width: 100%;}
    .contentsarea.d_area {padding: 0 20px;}
}
@media screen and (max-width:1024px) {
    body {font-size: 13px; line-height: 20px;}
    
    .btn {padding: 0 15px; height: 35px; line-height: 33px; border-radius: 5px;}
    .btn2 {padding: 0 15px; min-width: 110px; height: 35px; line-height: 33px; border-radius: 5px;}
    .btn3 {min-width: 64px; height: 30px; line-height: 28px; border-radius: 5px;}
    .btn4 {border-radius: 5px;}
    .btn5 {width: 160px; height: 45px; font-size: 16px; border-radius: 45px;}
    .btn6 {padding: 0 10px; min-width: 45px; height: 24px; line-height: 22px; font-size: 12px; border-radius: 3px;}
    .btn7 {padding: 0 10px; min-width: 45px; height: 30px; line-height: 28px; font-size: 13px; border-radius: 3px;}

    .w_flex_only {display: none !important; display:-webkit-none;}
    .m_flex_only {display: flex !important; display:-webkit-flex;}
    .w_hidden {display: block !important;}
    .m_hidden {display: none !important;}
    
    .board_title {margin-bottom: 10px;}
    .board_title h3 {font-size: 15px;}
    .board_title2 h3 {font-size: 18px;}
    .board_text {margin: 0 0 10px; line-height: 16px; font-size: 12px;}
    .board_text a {margin: 5px 0 0; width: 88px; height: 28px; line-height: 28px; font-size: 11px; border-radius: 3px;}
    .program_title {font-size: 18px;}
    .program_title span {margin-right: 5px; padding: 3px 10px; font-size: 13px; border-radius: 3px;}
    .list_type > li {padding-left: 7px;}
    .list_type > li::after {top: 9px; width: 2px; height: 2px;}
    .num_list > li {padding-left: 17px;}
    .num_list > li::before {top: 3px; width: 12px; height: 12px; font-size: 7px; line-height: 10px;}
    .num_list2 {padding-left: 15px;}
    .byte {margin: 3px 0 0; font-size: 11px;}

    .d_area {padding: 0 20px;}
    .contentsarea {padding: 0;}
    .contentsarea .cont_wrap {padding-top: 70px; width: 100%;}
    .contentsarea .cont_wrap .contents {padding: 0 20px 50px;}
    .contentsarea.mypage {display: block;}
    .contentsarea.mypage .cont_wrap {width: 100%;}
    .contentsarea.mypage .lnb_wrap {display: none;}
    .contentsarea.mypage  .location_wrap .location {justify-content: left;}

    /*상단타이틀*/
    .location_wrap {margin: 10px 20px 30px;}
    .location_wrap .location li {padding-right: 8px; margin-right: 8px; line-height: 12px;}
    .location_wrap .location li::before {right: -1px; top: calc(50% - 4px); width: 4px; height: 7px;}
    .location_wrap .location li a {font-size: 12px; line-height: 12px;}
    .location_wrap h3 {margin: 30px 0 0; line-height: 22px; font-size: 22px;}

    /*탭*/
    .tabmenu {margin-bottom: 20px;}
    .tabmenu button {text-align: left; font-size: 14px;}
    .tabmenu > button {position: relative; padding: 0 20px 0 10px; display: block; width: 100%; height: 40px; color: #fff; font-size: 14px; background-color: #393e46;}
    .tabmenu > button::after {content: ''; position: absolute; right: 10px; top: calc(50% - 2px); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #fff;}
    .tabmenu > button .dropdown-label {overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap;}
    .tabmenu.open > button::after {transform: rotate(180deg);}
    .tabmenu .dropdown-menu {position: absolute; left: 0; top: 39px; display: none; display:-webkit-none; width: 100%; border-radius: 8px; border: 1px solid #ccc; background-color: #fff;}
    .tabmenu.open .dropdown-menu {display: block; display:-webkit-block;}
    .tabmenu .dropdown-menu li {margin-right: 0; border-bottom: 1px solid #ccc;}
    .tabmenu .dropdown-menu li:first-child {border-radius: 5px 5px 0 0;}
    .tabmenu .dropdown-menu li:last-child {border-radius: 0 0 5px 5px; border-bottom: 0;}
    .tabmenu .dropdown-menu li:first-child button {border-radius: 5px 5px 0 0;}
    .tabmenu .dropdown-menu li:last-child button {border-radius: 0 0 5px 5px;}
    .tabmenu .dropdown-menu li button {padding: 10px; font-size: 14px; height: auto !important; border-radius: 0;}
    .tabmenu .dropdown-menu li button span {display: block; max-height: initial; -webkit-line-clamp: initial; line-height: 18px;}
    .tabmenu .dropdown-menu li button[data-selected="selected"] {background-color: var(--color-active);}

    .tab_area {margin-bottom: 30px; padding-bottom: 3px;}
    .tab_area::-webkit-scrollbar {height: 5px;}
    .tab_area ul {height: 40px;}
    .tab_area ul li {height: 40px; line-height: 40px;}
    .tab_area ul li a {padding: 0 20px; min-width: 120px; font-size: 17px;}
    .tab_area ul li.active {border-bottom: 2px solid #7c47b6;}

    /*멤버십*/
    .membership_area .membership_txt {margin: 0 0 30px; font-size: 13px; word-break: keep-all;}
    .membership_area > .button_box {margin-top: 50px;}
    .membership_area > .button_box button {margin-left: 10px; width: 160px; height: 45px; font-size: 16px; border-radius: 45px;}
    /*로그인*/
    .membership_area .login .write_box .inp_area li {margin-bottom: 15px;}
    .membership_area .login .write_box .inp_area li:last-child {margin-bottom: 0;}
    .membership_area .login .write_box .inp_area li .tit {font-size: 15px;}
    .membership_area .login .write_box .inp_area li .inpbox {height: 40px;}
    .membership_area .login .write_box .inp_area li .inpbox input.txt {padding: 0 10px;}
    .membership_area .login .write_box .check_box {margin-top: 10px;}
    .membership_area .login .write_box .check_box input[type=checkbox] + label {line-height: 18px;}
    .membership_area .login .write_box .button_box {margin-top: 25px;}
    .membership_area .login .write_box .button_box button {height: 45px; font-size: 16px; border-radius: 8px;}
    .membership_area .login .write_box .find_area {margin-top: 25px;}
    .membership_area .login .write_box .find_area li {padding-right: 20px; margin-right: 20px;}
    .membership_area .login .write_box .find_area li::after {top: calc(50% - 5px); height: 10px;}
    /*아이디찾기 비밀번호찾기*/
    .membership_area .membership_find {max-width: 300px;}
    .membership_area .membership_find ul {max-width: 300px; gap: 15px;}
    .membership_area .membership_find ul li {width: calc(50% - 7.5px); border-radius: 10px;}
    .membership_area .membership_find ul li a {padding: 30px 10px 20px;}
    .membership_area .membership_find ul li a span {padding-top: 80px; font-size: 13px;}
    .membership_area .membership_find ul li.phone a span {background: url('../../images/hmpg/icon_membership_find_phone.png') no-repeat center top 0px / 38px auto;}
    .membership_area .membership_find ul li.ipin a span {background: url('../../images/hmpg/icon_membership_find_ipin.png') no-repeat center top 5px / 60px auto;}
    .membership_area .membership_find .membership_find_txt {margin-top: 25px; line-height: 16px; font-size: 11px;}
    /*아이디찾기결과*/
    .membership_area .membership_find_result .result_id {margin-bottom: 30px; height: 65px; line-height: 65px; font-size: 15px;}
    .membership_area .membership_find_result .result_id span {margin-left: 15px;}
    .membership_area .button_box.result {margin: 30px auto 0;}
    .membership_area .button_box.result button {margin-left: 12px; height: 45px; font-size: 16px; border-radius: 45px;}
    /*비밀번호찾기*/
    .membership_area .membership_inp {margin: 0 auto 30px;}
    .membership_area .membership_inp .inp_form li {margin-bottom: 15px;}
    .membership_area .membership_inp .inp_form li:last-child {margin-bottom: 0;}
    .membership_area .membership_inp .inp_form li .tit {font-size: 15px;}
    .membership_area .membership_inp .inp_form li .inpbox {height: 40px;}
    .membership_area .membership_inp .inp_form li .inpbox input.txt {padding: 0 10px;}
    /*비밀번호재설정*/
    .membership_area .membership_inp .button_box {margin-top: 25px;}
    .membership_area .membership_inp .button_box div {display: flex; display:-webkit-flex;}
    .membership_area .membership_inp .button_box button {margin: 0 10px 0 0; height: 45px; font-size: 16px; border-radius: 8px;}
    .membership_area .membership_inp .button_box button:last-child {margin: 0;}
    .membership_area .membership_txt2 p.tit {margin-bottom: 10px; line-height: 14px; font-size: 14px;}
    .membership_area .membership_txt2 p.txt {margin-bottom: 5px; padding-left: 10px; line-height: 20px; font-size: 13px;}

    /*회원가입*/
    .join_area {padding: 0;}
    .join_area .join_txt {margin: 0 0 30px; font-size: 13px; word-break: keep-all;}
    .join_step {margin-bottom: 50px; gap: 5px;}
    .join_step li {width: 45px; height: 45px; line-height: 45px; font-size: 12px; border-radius: 45px;}
    .join_step li.complete {line-height: 43px; border: 2px solid #dd2f4f;} 
    .join_step li.active {padding: 0; min-width: 110px; line-height: 43px; border: 2px solid #dd2f4f;}
    .join_area > .button_box {margin-top: 50px;}
    .join_area > .button_box button {margin-left: 10px; width: 160px; height: 45px; font-size: 16px; border-radius: 45px;}
    /*회원유형선택*/
    .join_area .join_type {margin: 50px auto; display: block;}
    .join_area .join_type li {margin-bottom: 10px;}
    .join_area .join_type li a {width: 100%; height: 70px; border-radius: 10px;}
    .join_area .join_type li:hover a {box-shadow: 0px 5px 3px -2px #ddd;}
    .join_area .join_type li a span {display: inline-block; transition: none;}
    .join_area .join_type li:hover a span {padding-top: 0; padding-left: 32px; background: url('../../images/hmpg/icon_join_type.png') no-repeat 0 center / 19px auto;}
    /*본인인증*/
    .join_area .join_find {margin: 35px auto 0; max-width: 320px;}
    .join_area .join_find ul {gap: 15px;}
    .join_area .join_find ul li {width: calc(50% - 7.5px);}
    .join_area .join_find ul li a {padding: 20px 10px; height: 180px; border-radius: 10px;}
    .join_area .join_find ul li a span {margin-bottom: 5px; font-size: 13px;}
    .join_area .join_find ul li a p {line-height: 16px; font-size: 11px;}
    .join_area .join_find ul li.phone a {background: url('../../images/hmpg/icon_membership_find_phone.png') no-repeat center bottom 24px / 38px auto;}
    .join_area .join_find ul li.ipin a {background: url('../../images/hmpg/icon_membership_find_ipin.png') no-repeat center bottom 30px / 60px auto;}
    .join_area .join_find .join_find_txt {margin-top: 25px; line-height: 16px; font-size: 11px;}
    /*약관동의*/
    .agree_area {margin-bottom: 30px;}
    .agree_area .agree_title {margin-bottom: 10px;}
    .agree_area .agree_title .check_box input[type=checkbox] + label {padding-left: 28px; line-height: 18px; font-size: 16px;}
    .agree_area .agree_title .check_box input[type=checkbox] + label::before {margin-top: 0; top: calc(50% - 9px); width: 16px; height: 16px; border-radius: 18px; background-image: url('../../images/hmpg/icon_join_check.png') / 11px auto;}
    .agree_area .agree_title .check_box input[type=checkbox] + label.on::before, 
    .agree_area .agree_title .check_box input[type=checkbox]:checked  + label::before {background-image: url('../../images/hmpg/icon_join_check_active.png') / 11px auto;}
    .agree_area .agree_text {margin: 5px 0 0 26px; font-size: 14px;}
    .agree_area .agree_box {padding: 15px; max-height: 135px;}
    .agree_area .agree_box::-webkit-scrollbar {width: 20px;}
    .agree_area .agree_box::-webkit-scrollbar-thumb {border-radius: 20px; border: 7px solid transparent;}
    .agree_area .agree_box::-webkit-scrollbar-track {border-radius: 20px;}
    .agree_area .agree_box h4 {margin-bottom: 10px; font-size: 17px;}
    .agree_area .agree_box h5 {margin-bottom: 5px; font-size: 15px;}
    /*가입완료*/
    .join_area .join_txt.finish {margin: 50px 0;}
    /*기존회원안내*/
    .join_area .exist_id {margin-bottom: 30px; height: 65px; line-height: 65px; font-size: 15px;}
    .join_area .exist_id span {margin-left: 15px;}
    /*비밀번호변경권장*/
    .membership_area .membership_tit {margin-bottom: 20px; line-height: 26px; font-size: 20px;}
    /*회원가입완료*/
    .membership_area .join_complete {margin: 30px auto 0; padding: 15px 30px; line-height: 15px; font-size: 15px;}
    .membership_area .join_complete p {margin: 10px 0;}
    .membership_area .join_complete p span:first-child {width: 72px;}
    .membership_area .join_complete p span:last-child {margin-left: 15px; width: calc(100% - 87px);}

    /*저작권정책*/
    .privacy .box {padding: 20px; margin-bottom: 30px; line-height: 22px;}
    .privacy .text {padding: 0 20px;}
    .privacy .wrap {padding: 0 20px;}
    .privacy .list {margin: 35px 0; gap: 20px;}
    .privacy .list > li {width: 400px; border-radius: 5px;}
    .privacy .list > li .tit {height: 38px; line-height: 38px; border-radius: 5px 5px 0 0;}
    .privacy .list > li > ul {padding: 20px 20px 20px 200px;}
    .privacy .list > li:nth-child(1) > ul {background: url('../../images/hmpg/img_privacy1.png') no-repeat 20px center / auto 40px;}
    .privacy .list > li:nth-child(2) > ul {background: url('../../images/hmpg/img_privacy2.png') no-repeat 20px center  / auto 40px;}
    .privacy .list > li:nth-child(3) > ul {background: url('../../images/hmpg/img_privacy3.png') no-repeat 20px center  / auto 40px;}
    .privacy .list > li:nth-child(4) > ul {background: url('../../images/hmpg/img_privacy4.png') no-repeat 20px center  / auto 40px;}
    .privacy-wrap {line-height: 24px;}
    .privacy-wrap h4 {font-size: 16px; margin: 30px 0 10px;}
    .privacy-wrap h5 {font-size: 14px; margin: 15px 0 5px;}

    /*개인정보처리방침*/
    .listtype-dot > li {padding-left: 8px;}
    .listtype-dot > li::before {top: 11px; width: 2px; height: 2px;}
    .privacy2 {line-height: 18px; font-size: 12px;}
    .privacy2 .privacy_box {padding: 15px; margin-bottom: 30px; font-size: 13px; line-height: 19px; border-radius: 10px;}
    .privacy2 .privacy_label {gap: 10px;}
    .privacy2 .privacy_label li {width: calc(50% - 5px); border-radius: 10px;}
    .privacy2 .privacy_label li a {padding: 15px 0 10px; }
    .privacy2 .privacy_label li a p {font-size: 12px;}
    .privacy2 .privacy_label li a img {width: auto; height: 45px;}
    .privacy2 .privacy_index li {padding-left: 10px; line-height: 18px; font-size: 12px;}
    .privacy2 .privacy_index li::before {top: 7px; width: 3px; height: 3px; border-radius: 3px;}
    .privacy2 h4 {margin: 30px 0 10px; font-size: 16px; gap: 5px;}
    .privacy2 .tablebasic > table {padding: 0;}

    /*이용약관*/
    article.rule {line-height: 16px; font-size: 12px;}
    article.rule h4 {margin: 30px 0 10px; font-size: 16px;}

    /*마이페이지*/
    .enroll_step {margin: 0 0 40px; gap: 12px;}
    .enroll_step li {padding: 0 5px; position: relative; width: 45px; height: 45px; line-height: 35px; font-size: 12px; border-radius: 45px; border: 5px solid #e0e0e0;}
    .enroll_step li::after {top: calc(50% - 10px); right: -12px; border-top: 10px solid transparent; border-left: 10px solid #e0e0e0; border-right: 10px solid none; border-bottom: 10px solid transparent;}
    .enroll_step li .txt1 {display: none;}
    .enroll_step li .txt2 {display: block;}
    .enroll_step li.active {padding: 0 20px 0 5px; width: auto; border: 5px solid #b7ce02;}
    .enroll_step li.active .txt1 {display: flex; display:-webkit-flex; gap: 5px;}
    .enroll_step li.active .txt1 span {width: 25px; height: 25px; line-height: 25px; font-size: 12px; border-radius: 25px;}
    .enroll_step li.active .txt2 {display: none;}
    .enroll_step li.active::after {border-left: 10px solid #b7ce02;}
    .enroll_type {gap: 15px;}
    .enroll_type li {border-radius: 10px;}
    .enroll_type li a {padding: 15px 0 0; width: 150px; height: 180px; border-radius: 18px; border: 0;}
    .enroll_type li:hover a {border: 0;}
    .enroll_type li.type1 a {background: url('../../images/hmpg/icon_enroll_type1.png') no-repeat center bottom 13px / 60px auto;}
    .enroll_type li.type2 a {background: url('../../images/hmpg/icon_enroll_type2.png') no-repeat center bottom 10px / 105px auto;}
    .enroll_type li a span {font-size: 13px;}
    .enroll_type li a p {margin: 5px 0 0; line-height: 16px; font-size: 11px;}
    .enroll_box {padding: 20px;}
    .enroll_box p {line-height: 20px; font-size: 14px;}
    .state_wrap {margin-bottom: 30px; display: block; text-align: center;}
    .state_wrap .tit {margin: 0 0 20px; padding: 0 25px; display: inline-block; height: 34px; line-height: 34px; font-size: 14px; border-radius: 34px;}
    .state_wrap .state_list {justify-content: center;}
    .state_wrap .state_list li {margin-right: 15px; padding-right: 15px;}
    .state_wrap .state_list li::after {top: calc(50% -6px); height: 11px;}
    .tab_btn {margin-bottom: 10px; flex-wrap: wrap; gap: 5px;}
    .tab_btn li a {padding: 0 10px; height: 30px; line-height: 30px; font-size: 13px; border-radius: 30px;}
    .matching_process {padding: 20px 10px; border-radius: 5px;}
    .matching_process > p {margin-bottom: 25px; line-height: 22px; font-size: 15px; word-break: keep-all;}
    .matching_process ul {gap: 10px;}
    .matching_process ul li {width: 120px; max-width: calc(33.3333333333% - 6.666666666666667px);}
    .matching_process ul li::before {top: 40px; left: 50%; height: 10px;}
    .matching_process ul li::after {top: 20px; right: -10px; width: 10px;}
    .matching_process ul li span {margin-bottom: 10px; height: 40px; line-height: 36px; border-radius: 40px; letter-spacing: -1px;}

    /*늘봄신청하기*/
    /*목록*/
    /*상세*/
    .program_detail {gap: 30px;}
    .program_detail .img_wrap {border-radius: 10px;}
    .program_detail .img_wrap .state {margin: 10px; width: 60px; height: 26px; line-height: 26px; font-size: 11px; border-radius: 26px;}
    .program_detail .txt_wrap {padding: 10px 0; width: calc(100% - 385px);}
    .program_detail .txt_wrap h3 {line-height: 15px; font-size: 15px;}
    .program_detail .txt_wrap .keyword {margin-top: 15px;}
    .program_detail .txt_wrap .keyword span {font-size: 12px;}
    .program_detail .txt_wrap dl {margin-bottom: 5px; gap: 10px;}
    .program_detail .txt_wrap dl:last-child {margin-bottom: 0;}
    .program_detail .txt_wrap dl dt {width: 80px; height: 25px; line-height: 23px; font-size: 12px; border-radius: 2px;}
    .program_detail .txt_wrap dl dd {width: calc(100% - 90px); font-size: 13px;}
    .program_detail .txt_wrap dl dd span {margin-right: 10px;}
    .program_detail .button_wrap {width: 80px;}
    .program_detail .button_wrap button {width: 80px; height: 25px; font-size: 12px; border-radius: 5px;}
    .program_detail .button_wrap .btn_like {padding-left: 25px; background: #fff url('../../images/hmpg/icon_like.png') no-repeat 20px center / 15px auto;}
    .program_detail .button_wrap .btn_like.active {background: #fff url('../../images/hmpg/icon_like_active.png') no-repeat 20px center  / 15px auto;}
    .program_detail.apply .txt_wrap dl {width: 100%;}
    .recruit_list {padding: 0 20px; height: 140px; border-radius: 10px;}
    .recruit_list::-webkit-scrollbar {width: 20px;}
    .recruit_list::-webkit-scrollbar-thumb {border-radius: 20px; border: 7px solid transparent;}
    .recruit_list::-webkit-scrollbar-track {border-radius: 20px;}
    .recruit_list > ul > li {padding: 12px 0; gap: 30px;}
    .recruit_list > ul > li > .state {width: 34px;}
    .recruit_list > ul > li > ul li {width: 65px;}
    .mouseover a {padding-bottom: 0;}
    .mouseover .mouseover_box {top: 20px; left: 0; width: 160px; height: 215px; border-radius: 5px;}
    .mouseover .mouseover_box::-webkit-scrollbar {width: 20px;}
    .mouseover .mouseover_box::-webkit-scrollbar-thumb {border-radius: 20px; border: 7px solid transparent;}
    .mouseover .mouseover_box::-webkit-scrollbar-track {border-radius: 20px;}
    .mouseover .mouseover_box p {font-size: 12px;}

    /*늘봄이야기*/
    .intro_box {padding-bottom: 50px;} 
    .intro_box:last-child {padding-bottom: 0;} 
    .intro_box h4 {margin-bottom: 10px; line-height: 17px; font-size: 17px;} 
    .intro_box .text_wrap {margin-bottom: 20px; display: block;}
    .intro_box .text_wrap h4 {width: 100%;}
    .intro_box .text_wrap p {width: 100%; line-height: 22px; font-size: 14px; word-spacing: 0px;} 
    /*1. 늘봄학교란 무엇인가요?*/
    .intro_box .icon_list {display: block; height: auto; background: 0;} 
    .intro_box .icon_list li {margin-bottom: 5px; padding: 0 10px; width: 100%; height: 45px; line-height: 26px; font-size: 13px; text-align: left; border-radius: 10px;} 
    .intro_box .icon_list li:last-child {margin-bottom: 0;}
    .intro_box .icon_list li br {display: none;}
    .intro_box .icon_list li:nth-child(1) {border: 2px solid #f5c74f;}
    .intro_box .icon_list li:nth-child(2) {border: 2px solid #ef966d;}
    .intro_box .icon_list li:nth-child(3) {border: 2px solid #ea5975;}
    .intro_box .icon_list li:nth-child(4) {border: 2px solid #d05bc1;}
    .intro_box .icon_list li:nth-child(5) {border: 2px solid #d05bc1;}
    .intro_box .icon_list li:nth-child(6) {border: 2px solid #625ba6;}
    /*2. 늘봄학교는 왜 필요할까요?*/
    .intro_box .intro_list {gap: 10px;} 
    .intro_box .intro_list li {padding: 10px 15px; flex: calc(50% - 10px); line-height: 20px; font-size: 13px; border: 1px solid #ddd; border-radius: 10px;} 
    .intro_box .intro_list li.last {padding: 10px 5px 5px; border-color: #f5cdd4;}
    .intro_box .intro_list li.last .box_wrap {margin-top: 10px; padding: 5px; border-radius: 5px; background-color: #fdf3f5;}
    .intro_box .intro_list li.last .box_wrap .box {gap: 5px;}
    .intro_box .intro_list li.last .box_wrap .box p {padding: 10px; flex: 100%; font-size: 13px; border-radius: 5px;}
    .intro_box .intro_list li.last .box_wrap span {margin-top: 5px; font-size: 13px;}
    /*3. 무엇이달라지나요?*/
    .intro_box table {border-spacing: 10px 10px;} 
    .intro_box table thead th.arrow::after {transform: translateY(-50%); left: calc(50% - 7px); width: 13px; height: 8px; background: url(../../images/hmpg/ico_change_arrow.png) no-repeat center / 100% auto;} 
    .intro_box table tbody th {padding: 10px; border: 1px solid #ddd;} 
    .intro_box table tbody td {padding: 10px; border: 1px solid #ddd; border-radius: 10px;} 
    .intro_box .change_list thead th {padding: 10px 0; font-size: 13px; border-radius: 40px;} 
    .intro_box .change_list tbody th.name {padding: 0; min-width: 28px; font-size: 11px; background: 0;} 
    .intro_box .change_list tbody td strong {font-size: 13px;}
    .intro_box .change_list tbody td p {line-height: 17px; font-size: 11px; word-break: keep-all;}
    .intro_box .change_list tbody td.before p {margin-top: 10px;}
    .intro_box .change_list tbody td.after p {margin-top: 5px;}
    .intro_box .change_list tbody td.after p + strong {margin-top: 15px;}
    /*4. 늘봄학교의비전및목표*/
    .intro_box .vision {padding: 0 10px;} 
    .intro_box .vision .title {margin: 0 auto 10px; display: block; position: static; width: 80px; height: 30px; line-height: 28px; font-size: 14px; border-radius: 30px; border: 1px solid #dd2f4f;} 
    .intro_box .vision.vision1 {margin: 0 auto 50px; padding: 10px; width: 100%; line-height: 22px; font-size: 16px; border-radius: 10px; } 
    .intro_box .vision.vision1::after {left: calc(50% - 34px); bottom: -40px; width: 68px; height: 30px; background: url(../../images/hmpg/bg_vision.png) repeat center / 100% auto;} 
    .intro_box .vision.vision2 {margin: 0 auto 20px; padding: 10px; width: 100%; line-height: 22px; font-size: 16px; border-radius: 10px; border: 1px solid #dd2f4f;}
    .intro_box .vision.vision3 {padding: 10px; border-radius: 10px;} 
    .intro_box .vision.vision3 .flex-box {gap: 10px;} 
    .intro_box .vision.vision3 .flex-box .column .text_area span {padding: 0 15px; height: 40px; line-height: 40px; font-size: 18px; border-radius: 40px;} 
    .intro_box .vision.vision3 .vision_list {gap: 10px; margin-top: 10px;} 
    .intro_box .vision.vision3 .vision_list li {padding: 20px; border-radius: 10px;} 
    .intro_box .vision.vision3 .vision_list li strong {font-size: 14px;} 
    .intro_box .vision.vision3 .vision_list li p {margin-top: 10px;font-size: 12px;} 
    /*5. 늘봄학교추진과제*/
    .sub_tit_box {margin-bottom: 10px; height: 44px; line-height: 44px; font-size: 16px !important;} 
    .propel_table + .sub_tit_box {margin-top: 40px;}
    .propel_table thead th .year {font-size: 16px;} 
    .propel_table thead th .year::after {height: 11px; margin: 10px 0;} 
    .propel_table thead th .year + span {width: 65px; height: 28px; line-height: 28px; font-size: 14px; border-radius: 28px;}
    .propel_table table tbody th {font-size: 14px; border-radius: 0;}
    .propel_table table tbody td {font-size: 14px;}
    .intro_box .propel_table table tbody td {border-radius: 0;}
    .propel_table table tbody td span {font-size: 12px;}
    .propel_table table tbody td.info {font-size: 12px;}
    .propel_table table tbody td.line_box {padding: 5px 10px; line-height: 20px; font-size: 14px; border-radius: 20px;}
    .propel_table table tbody td.line_box::before {top: -17px; left: 50%; width: 10px; height: 12px;}
}
@media screen and (max-width:850px) {
    /*늘봄신청하기*/
    /*상세*/
    .program_detail {display: block;}
    .program_detail .img_wrap {width: 100%; height: 0; padding-bottom: 68%;}
    .program_detail .txt_wrap {padding: 25px 0 0; width: 100%;}
    .program_detail .txt_wrap .keyword {margin: 10px 0 20px;}
    .program_detail .button_wrap {margin-top: 20px; position: static; width: auto; text-align: center;}
    .program_detail .button_wrap .btn_like {margin: 0 5px 0 0;}
    .recruit_list > ul > li {width: 100%;}
    .recruit_list > ul > li:nth-last-child(2) {border-bottom: 1px solid #ddd;}
}
@media screen and (max-width:680px) {
    .agree_area .agree_box .tablebasic {overflow-x: auto;}
    .agree_area .agree_box .tablebasic table {width: 720px;}
}
@media screen and (max-width:480px) {
    /*저작권정책*/
    .privacy .list > li > ul {padding: 80px 20px 20px;}
    .privacy .list > li:nth-child(1) > ul {background: url('../../images/hmpg/img_privacy1.png') no-repeat center 25px / auto 40px;}
    .privacy .list > li:nth-child(2) > ul {background: url('../../images/hmpg/img_privacy2.png') no-repeat center 25px  / auto 40px;}
    .privacy .list > li:nth-child(3) > ul {background: url('../../images/hmpg/img_privacy3.png') no-repeat center 25px  / auto 40px;}
    .privacy .list > li:nth-child(4) > ul {background: url('../../images/hmpg/img_privacy4.png') no-repeat center 25px  / auto 40px;}
   
    /*개인정보처리방침*/
    .privacy2 .tablebasic {overflow-x: auto;}
    .privacy2 .tablebasic > table {padding: 0; width: 480px;}

    /*늘봄신청하기*/
    /*상세*/
    .recruit_list > ul > li {display: block;}
    .recruit_list > ul > li > .tit {display: block; width: 100%;}
    .recruit_list > ul > li > .state {margin: 5px 0; display: block; width: 100%; text-align: left;}
    .recruit_list > ul > li > ul li {margin-right: 20px; width: auto;}

    /*늘봄이야기*/
    .propel_table {overflow-x: auto;}
    .propel_table table {width: 550px;}
}

/* 시설 배너 스와이퍼 */
.saif_swiper {overflow: hidden;}
.saif_swiper .swiper-wrapper {}
.saif_swiper .swiper-slide {height: 100%; background: #f4f5f6 no-repeat center / 99px;}
.saif_swiper .swiper-slide img {width: 100%;}
.saif_swiper.mySwiper2 {border-radius: 20px;}
.saif_swiper.mySwiper2 .swiper-wrapper {}
.saif_swiper.mySwiper2 .swiper-slide {}
.saif_swiper.mySwiper2 .swiper-slide img {}
.saif_swiper.mySwiper {margin-top: 20px;}
.saif_swiper.mySwiper .swiper-wrapper {}
.saif_swiper.mySwiper .swiper-slide {cursor: pointer;}
.saif_swiper.mySwiper .swiper-slide,
.saif_swiper.mySwiper .swiper-slide button {overflow: hidden; border-radius: 12px;}
.saif_swiper.mySwiper .swiper-slide button {outline-offset: -1px;}

@media screen and (max-width:640px) {
    .saif_swiper.mySwiper {margin-top: 10px;}
    .saif_swiper.mySwiper .swiper-slide {background-size: 30px;}
    .saif_swiper.mySwiper .swiper-slide button {border-radius: 5px;}
}

/* ============================================================
   프로필 좌측 메뉴 (my-page-aside) - profDetail.do / profUpdtForm.do
   ============================================================ */
/* ===== 프로필 좌측 메뉴 (my-page-aside) ===== */
.view-flex{display:flex;align-items:flex-start;gap:44px;width:100%}
.view-flex .view-content{flex:1;min-width:0}

.my-page-aside{flex:0 0 200px;width:200px;background:#fff;border-radius:20px 0 20px 20px;padding:25px 0;display:flex;flex-direction:column;gap:20px;position:sticky;top:20px}

/* 상단 '바로가기' */
.my-page-aside .aside-top{display:flex;align-items:center;justify-content:space-between;margin:0 20px;padding-bottom:15px;border-bottom:1px solid #e5e5e5}
.my-page-aside .aside-top strong{font-size:24px;font-weight:600;color:#000;line-height:1.2}
.my-page-aside .aside-top .toggle{position:relative;width:15px;height:15px;padding:0;border:0;background:transparent;font-size:0;cursor:pointer}
.my-page-aside .aside-top .toggle::after{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain}

/* 메뉴 리스트 */
.my-page-aside .aside-menu{display:flex;flex-direction:column}
.my-page-aside .aside-menu li{position:relative}
.my-page-aside .aside-menu li > a{display:flex;align-items:center;gap:6px;padding:15px 20px;font-size:18px;font-weight:500;color:#333;line-height:1.2;white-space:nowrap}
.my-page-aside .aside-menu li > a::before{content:"";flex:0 0 16px;width:16px;height:16px;background-repeat:no-repeat;background-position:center;background-size:contain}
.my-page-aside .aside-menu li > a:hover{background:#e8e8ea}

/* active(현재 메뉴) : 파란 알약, 우측으로 20px 돌출 */
.my-page-aside .aside-menu li.on > a{width:calc(100% + 20px);background:var(--color-active,#0051ff);color:#fff;font-weight:600;border-radius:0 40px 40px 0}
.my-page-aside .aside-menu li.on > a:hover{background:var(--color-active,#0051ff)}
.my-page-aside .aside-menu li.on > a::before{filter:brightness(0) invert(1)}

/* 메뉴별 아이콘 (Figma SVG → URL 인코딩 background) */
.my-page-aside .aside-menu .ic-agreement > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 13.0001 14.3335' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M4.5 13.8334C4.74 13.8334 5.62667 13.4287 6.53333 12.6187M6.53333 12.6187C7.30533 11.928 8.09067 10.9427 8.5 9.66337C9.38867 6.88336 4.05533 9.66336 5.83333 11.98C6.052 12.2654 6.28733 12.4734 6.53333 12.6187ZM6.53333 12.6187C7.60133 13.2507 8.854 12.6827 9.70267 12.0294C9.96267 11.83 10.092 11.73 10.1693 11.7614C10.2467 11.7927 10.292 11.9707 10.3827 12.328C10.672 13.4714 11.5273 14.394 12.5 12.9067' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.8333 7.83336V4.4267C11.8333 3.28403 11.8333 2.71337 11.6547 2.2567C11.368 1.5227 10.76 0.943365 9.99 0.670032C9.51133 0.500032 8.91133 0.500032 7.712 0.500032C5.61333 0.500032 4.564 0.500032 3.72533 0.798032C2.37867 1.2767 1.31533 2.28937 0.812 3.57403C0.5 4.3727 0.5 5.3727 0.5 7.3727V9.0907C0.5 11.1627 0.5 12.198 1.06533 12.9174C1.228 13.1249 1.418 13.3063 1.63533 13.4614C1.88 13.6354 2.16 13.7534 2.5 13.8334' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.5 7.1667C0.5 6.57739 0.734103 6.01221 1.15081 5.59551C1.56751 5.1788 2.13269 4.9447 2.722 4.9447C3.166 4.9447 3.68933 5.02203 4.12067 4.9067C4.30914 4.85598 4.48097 4.7566 4.61892 4.61853C4.75687 4.48046 4.8561 4.30855 4.90667 4.12003C5.022 3.6887 4.94467 3.16536 4.94467 2.72136C4.94484 2.13217 5.17902 1.56717 5.59571 1.1506C6.0124 0.734043 6.57747 0.500032 7.16667 0.500032' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-pencil > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M8 13.3333H14M10.6667 2.66667C10.9319 2.40145 11.2916 2.25245 11.6667 2.25245C12.0417 2.25245 12.4015 2.40145 12.6667 2.66667C12.9319 2.93188 13.0809 3.29159 13.0809 3.66667C13.0809 4.04174 12.9319 4.40145 12.6667 4.66667L4.66667 12.6667L2 13.3333L2.66667 10.6667L10.6667 2.66667Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-profile > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14.3333 14.3333' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M7.16667 0.5C3.48467 0.5 0.5 3.48467 0.5 7.16667C0.5 10.8487 3.48467 13.8333 7.16667 13.8333C10.8487 13.8333 13.8333 10.8487 13.8333 7.16667C13.8333 3.48467 10.8487 0.5 7.16667 0.5Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.014 11.3973C2.014 11.3973 3.5 9.5 7.16667 9.5C10.8333 9.5 12.32 11.3973 12.32 11.3973M7.16667 7.16667C7.6971 7.16667 8.20581 6.95595 8.58088 6.58088C8.95595 6.20581 9.16667 5.6971 9.16667 5.16667C9.16667 4.63623 8.95595 4.12753 8.58088 3.75245C8.20581 3.37738 7.6971 3.16667 7.16667 3.16667C6.63623 3.16667 6.12753 3.37738 5.75245 3.75245C5.37738 4.12753 5.16667 4.63623 5.16667 5.16667C5.16667 5.6971 5.37738 6.20581 5.75245 6.58088C6.12753 6.95595 6.63623 7.16667 7.16667 7.16667Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-handshake > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14.3333 13.0814' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M6.5 9.83367L7.83334 11.167C7.96466 11.2983 8.12056 11.4025 8.29214 11.4736C8.46372 11.5446 8.64762 11.5812 8.83334 11.5812C9.01905 11.5812 9.20295 11.5446 9.37453 11.4736C9.54611 11.4025 9.70201 11.2983 9.83334 11.167C9.96466 11.0357 10.0688 10.8798 10.1399 10.7082C10.211 10.5366 10.2476 10.3527 10.2476 10.167C10.2476 9.98129 10.211 9.79739 10.1399 9.62581C10.0688 9.45423 9.96466 9.29833 9.83334 9.167' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 7.83367L10.1667 9.50034C10.4319 9.76555 10.7916 9.91455 11.1667 9.91455C11.5417 9.91455 11.9015 9.76555 12.1667 9.50034C12.4319 9.23512 12.5809 8.87541 12.5809 8.50034C12.5809 8.12526 12.4319 7.76555 12.1667 7.50034L9.58 4.91367C9.205 4.53914 8.69667 4.32876 8.16667 4.32876C7.63667 4.32876 7.12834 4.53914 6.75334 4.91367L6.16667 5.50034C5.90145 5.76555 5.54174 5.91455 5.16667 5.91455C4.7916 5.91455 4.43189 5.76555 4.16667 5.50034C3.90145 5.23512 3.75246 4.87541 3.75246 4.50034C3.75246 4.12526 3.90145 3.76555 4.16667 3.50034L6.04 1.627C6.64816 1.02043 7.44127 0.634038 8.29376 0.528985C9.14626 0.423932 10.0094 0.606224 10.7467 1.047L11.06 1.23367C11.3439 1.40499 11.6814 1.46441 12.0067 1.40034L13.1667 1.167' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.3388 1.16717L13.8333 7.83384H12.5M6.83334 10.1672C7.09855 10.4324 7.24755 10.7921 7.24755 11.1672C7.24755 11.5422 7.09855 11.902 6.83334 12.1672C6.56812 12.4324 6.20841 12.5814 5.83334 12.5814C5.45826 12.5814 5.09855 12.4324 4.83334 12.1672L0.500003 7.83384L1.16667 1.16715L6.5 1.16717' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-career > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10.3333 14.3333' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M3.45067 1.20867C4.28933 0.736 4.708 0.5 5.16667 0.5C5.62533 0.5 6.044 0.736 6.88267 1.20867L8.04933 1.866C8.91933 2.356 9.35467 2.60133 9.594 3.01133C9.83333 3.42133 9.83333 3.92133 9.83333 4.92133V6.07867C9.83333 7.07867 9.83333 7.57867 9.59333 7.98867C9.35467 8.39867 8.92 8.644 8.04933 9.134L6.88267 9.79133C6.044 10.264 5.62533 10.5 5.16667 10.5C4.708 10.5 4.28933 10.264 3.45067 9.79133L2.284 9.134C1.414 8.644 0.978667 8.39867 0.739334 7.98867C0.500001 7.57867 0.500001 7.07867 0.500001 6.07867V4.92133C0.500001 3.92133 0.500001 3.42133 0.740001 3.01133C0.978667 2.60133 1.41333 2.356 2.284 1.866L3.45067 1.20867Z' stroke='%23333' stroke-linejoin='round'/%3E%3Cpath d='M3.16667 5.94467C3.16667 5.94467 3.66667 5.94467 4.16667 6.83333C4.16667 6.83333 5.75467 4.61133 7.16667 4.16667M8.422 9.16667L8.86867 11.3067C9.15533 12.6813 9.29933 13.3687 9.004 13.6947C8.70933 14.0207 8.19733 13.7407 7.17333 13.18L5.65733 12.35C5.41533 12.218 5.29467 12.1513 5.16667 12.1513C5.03867 12.1513 4.918 12.218 4.676 12.35L3.16 13.18C2.136 13.74 1.624 14.0207 1.32933 13.6947C1.03467 13.3687 1.178 12.6813 1.46467 11.3067L1.91133 9.16667' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-edu > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14.3435 10.3336' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M13.8325 3.83357V7.83357M13.4459 4.44824C13.5652 4.39559 13.6665 4.30908 13.7372 4.19944C13.8078 4.0898 13.8448 3.96183 13.8434 3.8314C13.8421 3.70096 13.8025 3.57379 13.7296 3.46563C13.6567 3.35747 13.5536 3.27308 13.4332 3.2229L7.71921 0.620238C7.54551 0.541004 7.35681 0.5 7.16588 0.5C6.97496 0.5 6.78626 0.541004 6.61255 0.620238L0.899214 3.22024C0.780526 3.27222 0.679559 3.35766 0.608659 3.46612C0.537759 3.57457 0.5 3.70133 0.5 3.83091C0.5 3.96048 0.537759 4.08724 0.608659 4.19569C0.679559 4.30415 0.780526 4.38959 0.899214 4.44157L6.61255 7.0469C6.78626 7.12614 6.97496 7.16714 7.16588 7.16714C7.35681 7.16714 7.54551 7.12614 7.71921 7.0469L13.4459 4.44824Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.16588 5.50024V7.83357C3.16588 8.364 3.58731 8.87271 4.33745 9.24779C5.0876 9.62286 6.10502 9.83357 7.16588 9.83357C8.22675 9.83357 9.24416 9.62286 9.99431 9.24779C10.7445 8.87271 11.1659 8.364 11.1659 7.83357V5.50024' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-prize > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M11.6364 11.9H4.36364C4.00198 11.9 3.65513 12.037 3.3994 12.2808C3.14367 12.5246 3 12.8552 3 13.2C3 13.5448 3.14367 13.8754 3.3994 14.1192C3.65513 14.363 4.00198 14.5 4.36364 14.5H11.6364C11.998 14.5 12.3449 14.363 12.6006 14.1192C12.8563 13.8754 13 13.5448 13 13.2C13 12.8552 12.8563 12.5246 12.6006 12.2808C12.3449 12.037 11.998 11.9 11.6364 11.9ZM5.72727 3.66667C5.72727 4.2413 5.96672 4.7924 6.39294 5.19873C6.81916 5.60506 7.39724 5.83333 8 5.83333C8.60276 5.83333 9.18084 5.60506 9.60706 5.19873C10.0333 4.7924 10.2727 4.2413 10.2727 3.66667C10.2727 3.09203 10.0333 2.54093 9.60706 2.1346C9.18084 1.72827 8.60276 1.5 8 1.5C7.39724 1.5 6.81916 1.72827 6.39294 2.1346C5.96672 2.54093 5.72727 3.09203 5.72727 3.66667ZM8 7.56667C7.31043 7.56719 6.62824 7.43139 5.99651 7.16786C5.36478 6.90432 4.79723 6.51877 4.3297 6.03556L6.63636 11.9H9.36364L11.6703 6.03556C11.2028 6.51877 10.6352 6.90432 10.0035 7.16786C9.37176 7.43139 8.68957 7.56719 8 7.56667Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-paper > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 11.6669 14.3335' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M7.83333 0.83354V1.83354C7.83333 2.77621 7.83333 3.24754 8.12667 3.54021C8.41867 3.83354 8.89 3.83354 9.83333 3.83354H10.8333' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.16667 6.50021H8.5M3.16667 8.50021H8.5M3.16667 10.5002H5.94667M0.500001 9.83354V4.50021C0.500001 2.61487 0.500001 1.67154 1.086 1.08621C1.67133 0.500207 2.61467 0.500207 4.5 0.500207H7.28133C7.55333 0.500207 7.69 0.500207 7.81267 0.550873C7.93467 0.60154 8.03133 0.69754 8.224 0.890873L10.776 3.44287C10.9693 3.63621 11.0653 3.73221 11.116 3.85487C11.1667 3.97687 11.1667 4.11354 11.1667 4.38554V9.83354C11.1667 11.7189 11.1667 12.6622 10.5807 13.2475C9.99533 13.8335 9.052 13.8335 7.16667 13.8335H4.5C2.61467 13.8335 1.67133 13.8335 1.086 13.2475C0.500001 12.6622 0.500001 11.7189 0.500001 9.83354Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-patent > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 11.6672 14.3333' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M5.61291 2.64133C5.63245 2.59928 5.66361 2.56369 5.7027 2.53875C5.7418 2.51381 5.7872 2.50055 5.83358 2.50055C5.87995 2.50055 5.92536 2.51381 5.96445 2.53875C6.00355 2.56369 6.0347 2.59928 6.05424 2.64133L6.59691 3.75333C6.63291 3.82667 6.70024 3.878 6.77891 3.89133L7.95758 4.08733C8.15758 4.12067 8.23758 4.37667 8.09424 4.526L7.25024 5.41C7.22248 5.43951 7.2018 5.47496 7.18979 5.51366C7.17778 5.55236 7.17474 5.59329 7.18091 5.63333L7.36691 6.86667C7.39824 7.076 7.18958 7.234 7.00958 7.138L5.94624 6.572C5.91155 6.55356 5.87287 6.54391 5.83358 6.54391C5.79429 6.54391 5.7556 6.55356 5.72091 6.572L4.65758 7.138C4.47758 7.234 4.26891 7.076 4.30024 6.86667L4.48624 5.63333C4.49241 5.59329 4.48938 5.55236 4.47736 5.51366C4.46535 5.47496 4.44468 5.43951 4.41691 5.41L3.57291 4.52667C3.43024 4.37733 3.50958 4.12133 3.70958 4.088L4.88824 3.892C4.92746 3.88537 4.96449 3.86936 4.99618 3.84533C5.02787 3.82131 5.05328 3.78997 5.07024 3.754L5.61291 2.64133Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5002 5.16667C10.5002 5.7795 10.3795 6.38634 10.145 6.95252C9.91049 7.51871 9.56675 8.03316 9.13341 8.4665C8.70007 8.89984 8.18562 9.24358 7.61943 9.4781C7.05325 9.71263 6.44641 9.83333 5.83358 9.83333C5.22074 9.83333 4.61391 9.71263 4.04772 9.4781C3.48153 9.24358 2.96709 8.89984 2.53375 8.4665C2.10041 8.03316 1.75666 7.51871 1.52214 6.95252C1.28762 6.38634 1.16691 5.7795 1.16691 5.16667C1.16691 3.92899 1.65858 2.742 2.53375 1.86683C3.40892 0.991665 4.5959 0.5 5.83358 0.5C7.07125 0.5 8.25824 0.991665 9.13341 1.86683C10.0086 2.742 10.5002 3.92899 10.5002 5.16667Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.50024 10.0613L7.58424 12.9347C7.80291 13.5127 7.91224 13.8027 8.10224 13.8333C8.29291 13.8053 8.52624 13.4867 8.75424 12.9113C8.91758 12.4993 8.99891 12.2933 9.16758 12.182C9.21913 12.1482 9.27491 12.1216 9.33491 12.102C9.52958 12.0407 9.75291 12.1007 10.2002 12.222C10.6782 12.3513 11.0102 12.3153 11.1416 12.222C11.1802 12.1947 11.1416 12.22 11.1416 12.22C11.2189 12.0827 11.1149 11.8693 10.9062 11.442L9.47091 8.5M5.16691 10.0613L4.08291 12.9333C3.86424 13.512 3.64824 13.8027 3.45824 13.8333C3.26758 13.8053 3.15358 13.5173 2.92491 12.942C2.76224 12.53 2.66824 12.2927 2.49958 12.182C2.4478 12.1477 2.39148 12.1207 2.33224 12.102C2.13758 12.04 1.91424 12.1007 1.46691 12.2213C0.98891 12.3507 0.656911 12.3127 0.525577 12.2193C0.448244 12.082 0.552244 11.8687 0.76091 11.4413L2.19624 8.5' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-book > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M2 12.6667C4.22222 11.3333 5.33333 10 5.33333 8.66667C5.33333 6.66667 4.66667 6.66667 4 6.66667C3.33333 6.66667 2.64533 7.39 2.66667 8.66667C2.68933 10.032 3.772 10.5847 4.33333 11.3333C5.33333 12.6667 6 13 6.66667 12C7.11111 11.3333 7.44444 10.7778 7.66667 10.3333C8.33333 11.8889 9.22222 12.6667 10.3333 12.6667H12M12 12.6667L10.6667 11.3333V3.33333C10.6667 2.586 11.2527 2 12 2C12.7473 2 13.3333 2.586 13.3333 3.33333V11.3333L12 12.6667ZM10.6667 4.66667H13.3333' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-etc > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M4.87 7.99667V8.00333M8.00333 7.99667V8.00333M11.1367 7.99667V8.00333' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-link > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M8.66667 4L10 2.66667C10.6667 2 12 2 12.6667 2.66667L13.3333 3.33333C14 4 14 5.33333 13.3333 6L10 9.33333C9.33333 10 8 10 7.33333 9.33333M7.33333 12L6 13.3333C5.33333 14 4 14 3.33333 13.3333L2.66667 12.6667C2 12 2 10.6667 2.66667 10L6 6.66667C6.66667 6 8 6 8.66667 6.66667' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-propose > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12.9995 12.9996' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M7.09982 1.10115C6.81783 1.10035 6.51784 1.09995 6.19985 1.09995C3.51312 1.09995 2.16916 1.09995 1.33458 1.93452C0.5 2.7691 0.5 4.11247 0.5 6.79979C0.5 9.48652 0.5 10.8305 1.33458 11.6651C2.16916 12.4996 3.51252 12.4996 6.19985 12.4996C8.88657 12.4996 10.2305 12.4996 11.0651 11.6651C11.8997 10.8305 11.8997 9.48712 11.8997 6.79979C11.8997 6.4818 11.8993 6.18181 11.8985 5.89982' stroke='%23333' stroke-linecap='round'/%3E%3Cpath d='M10.3996 0.5L10.5544 0.918189C10.7572 1.46657 10.8586 1.74077 11.0584 1.94056C11.2588 2.14096 11.533 2.24235 12.0813 2.44515L12.4995 2.59994L12.0813 2.75474C11.533 2.95753 11.2588 3.05893 11.059 3.25873C10.8586 3.45912 10.7572 3.73331 10.5544 4.2817L10.3996 4.69989L10.2448 4.2817C10.042 3.73331 9.9406 3.45912 9.7408 3.25933C9.54041 3.05893 9.26622 2.95753 8.71783 2.75474L8.29964 2.59994L8.71783 2.44515C9.26622 2.24235 9.54041 2.14096 9.7402 1.94116C9.9406 1.74077 10.042 1.46657 10.2448 0.918189L10.3996 0.5Z' stroke='%23333' stroke-linejoin='round'/%3E%3Cpath d='M3.50007 9.79971C4.89923 8.33455 7.48576 8.26555 8.89992 9.79971M7.69695 5.29983C7.69695 6.12781 7.02497 6.79979 6.19519 6.79979C5.99801 6.80011 5.80271 6.76154 5.62045 6.68631C5.43819 6.61107 5.27255 6.50063 5.13301 6.36132C4.99347 6.222 4.88277 6.05654 4.80724 5.8744C4.73171 5.69226 4.69283 5.49701 4.69283 5.29983C4.69283 4.47186 5.36481 3.79988 6.19519 3.79988C6.39232 3.79964 6.58756 3.83826 6.76976 3.91354C6.95195 3.98881 7.11751 4.09926 7.25699 4.23857C7.39646 4.37787 7.50711 4.54331 7.5826 4.72541C7.65809 4.90751 7.69695 5.10271 7.69695 5.29983Z' stroke='%23333' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")}
.my-page-aside .aside-menu .ic-privacy > a::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M3.16667 4.94467C3.16667 4.47311 3.35399 4.02087 3.68743 3.68743C4.02087 3.35399 4.47311 3.16667 4.94467 3.16667H10.722C10.9555 3.16667 11.1867 3.21266 11.4024 3.30201C11.6181 3.39136 11.8141 3.52233 11.9792 3.68743C12.1443 3.85253 12.2753 4.04854 12.3647 4.26426C12.454 4.47997 12.5 4.71118 12.5 4.94467V10.722C12.5 10.9555 12.454 11.1867 12.3647 11.4024C12.2753 11.6181 12.1443 11.8141 11.9792 11.9792C11.8141 12.1443 11.6181 12.2753 11.4024 12.3647C11.1867 12.454 10.9555 12.5 10.722 12.5H4.94467C4.71118 12.5 4.47997 12.454 4.26426 12.3647C4.04854 12.2753 3.85253 12.1443 3.68743 11.9792C3.52233 11.8141 3.39136 11.6181 3.30201 11.4024C3.21266 11.1867 3.16667 10.9555 3.16667 10.722V4.94467Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.17467 9.658C0.97 9.54172 0.799766 9.37332 0.681267 9.16993C0.562768 8.96653 0.500227 8.73539 0.5 8.5V1.83333C0.5 1.1 1.1 0.5 1.83333 0.5H8.5C9 0.5 9.272 0.756667 9.5 1.16667M5.83333 7.83333L7.16667 9.16667L9.83333 6.5' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}

/* 토글 화살표 (파란 원형) */
.my-page-aside .aside-top .toggle::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Crect width='15' height='15' rx='7.5' fill='%230051FF'/%3E%3Cpath d='M10.5 6L7.5 9L4.5 6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E")}

/* 반응형 : expert-view-box 와 동일하게 991px 이하에서 세로 스택 */
@media (max-width:991px){
	.expert-view-box .view-flex{flex-direction:column;gap:20px}
	.my-page-aside{flex:none;width:100%;border-radius:12px;position:static}
	.my-page-aside .aside-menu li.on > a{width:100%;border-radius:0}
}

/* 기본정보 수정 */
#section-basic .body-list {display: flex; gap: 40px;}
#section-basic .body-list > .cont {width: 200px; flex-shrink: 0;}
#section-basic .body-list > ul .flex-col3 {flex:1;min-width: 180px;}
#expertCrList .write-inner .inner-head {justify-content: unset; gap:10px; align-items: center; }
.level-cate {display: inline-block; padding: 4.5px 10px; font-size: 15px !important; color: var(--color-active); border-radius: 100px; background: #E6EEFF; font-weight: 500;}

/* ============================================================
   경력 드래그 정렬 핸들 (#expertCrList) - profUpdtForm.do
   ============================================================ */
#expertCrList .sort-grab{display:inline-flex;align-items:center;margin:0 0 14px;padding:0 0 0 20px;border:0;background-color:transparent;font-size:15px;color:#999;line-height:18px;cursor:grab;background-repeat:no-repeat;background-position:left center;background-size:11px 16px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 18' xmlns='http://www.w3.org/2000/svg' fill='%23a8aeb8'%3E%3Ccircle cx='3' cy='3' r='1.5'/%3E%3Ccircle cx='9' cy='3' r='1.5'/%3E%3Ccircle cx='3' cy='9' r='1.5'/%3E%3Ccircle cx='9' cy='9' r='1.5'/%3E%3Ccircle cx='3' cy='15' r='1.5'/%3E%3Ccircle cx='9' cy='15' r='1.5'/%3E%3C/svg%3E")}
#expertCrList .sort-grab:active{cursor:grabbing}
#expertCrList .write-inner > .inner-body{position:relative}
#expertCrList .ui-sortable-helper{box-shadow:0 10px 28px rgba(0,0,0,.12)}
#expertCrList .ui-state-highlight{border:2px dashed var(--color-active,#0051ff);background:#f0f6ff;border-radius:14px;margin:0 0 20px}
#expertCrList .inner-body { transition:box-shadow .15s ease, transform .15s ease, opacity .15s ease;}
.ui-sortable .inner-body:nth-child(n+1) {margin-top:20px; }
#expertCrList .ui-sortable-helper, #expertCrList .inner-body.is-dragging{box-shadow:0 14px 34px rgba(0,0,0,.2);transform:scale(1.01);background:#fff;border-radius:14px;opacity:.98}