@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
  font-weight: normal;
  line-height: 1;
  word-wrap: break-word;
  -moz-font-smoothing: grayscale;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: none;
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* font 설정 */
@font-face {
  font-family: 'Pretendard1';
  font-style: 'normal';
  src: url('../fonts/Pretendard-Thin.woff') format('woff'), url('../fonts/Pretendard-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Pretendard2';
  font-style: 'normal';
  src: url('../fonts/Pretendard-ExtraLight.woff') format('woff'), url('../fonts/Pretendard-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Pretendard3';
  font-style: 'normal';
  src: url('../fonts/Pretendard-Light.woff') format('woff'), url('../fonts/Pretendard-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Pretendard4';
  font-style: 'normal';
  src: url('../fonts/Pretendard-Regular.woff') format('woff'), url('../fonts/Pretendard-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Pretendard5';
  font-style: 'normal';
  src: url('../fonts/Pretendard-Medium.woff') format('woff'), url('../fonts/Pretendard-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Pretendard6';
  font-style: 'normal';
  src: url('../fonts/Pretendard-SemiBold.woff') format('woff'), url('../fonts/Pretendard-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Pretendard7';
  font-style: 'normal';
  src: url('../fonts/Pretendard-Bold.woff') format('woff'), url('../fonts/Pretendard-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Pretendard8';
  font-style: 'normal';
  src: url('../fonts/Pretendard-ExtraBold.woff') format('woff'), url('../fonts/Pretendard-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Pretendard9';
  font-style: 'normal';
  src: url('../fonts/Pretendard-Black.woff') format('woff'), url('../fonts/Pretendard-Black.ttf') format('truetype');
}

/* section */
#section{
    display: flex;
    background-image: url(../img/main/new/bg-section-1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    /* flex-direction: column; */
}



/* left */
.left{
  height: calc(100vh - 200px);
  background-color: #456fc0;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  display: flex;
  width: 350px;
  margin: 120px 0 25px;
  align-items: center;
  border-radius: 0 30px 30px 0;
  flex-direction: column;
}


/* ************************************************************************************ */
.left .header{
  width: calc(100% - 55px);
  position: absolute;
  top: 25px;
  left: 55px;
}
.left .header .page-logo{
  height: 45px;
  margin-top: 7.5px;
}
.left .header .page-logo img{
  height: 100%;
}
.left .header .header-side{
  display: none;
}
.left .header .header-side #check_box {
  display: none;
}
.left .header .header-side #check_box + label {
  display: none;
  position: relative;
  display: block;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 2;
}
.left .header .header-side #check_box + label > span {
  position: absolute;
  display: block;
  width: 30px;
  height: 2px;
  background: #000;
  border-radius: 5px;
  transition: all 300ms;
}
.left .header .header-side #check_box:checked + label > span:nth-child(1) {
  top: 50%;
  transform: translate(0, -50%);
  transform: rotate(45deg);
}
.left .header .header-side #check_box + label > span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
.left .header .header-side #check_box:checked + label > span:nth-child(2) {
  opacity: 0;
}
.left .header .header-side #check_box + label > span:nth-child(3) {
  bottom: 0;
}
.left .header .header-side #check_box:checked + label > span:nth-child(3) {
  top: 50%;
  transform: translate(0, -50%);
  transform: rotate(-45deg);
}



.left .header .header-side #header-side_menu{
  position: fixed;
  width: 200px;
  height: 360px;
  background-color: #C4DAFF;
  right: -300px;
  transition: all 300ms;
  z-index: 1;
  top: 38px;
  border-radius: 10px 0px 0px 10px;
  opacity: 1;
  background-color: #456fc0;
  box-sizing: border-box;
}

.left .header .header-side #header-side_menu ul.lang{
  height: 40px;
}
.left .header .header-side #header-side_menu ul.lang > li{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
  margin-top: 5px;
}
.left .header .header-side #header-side_menu ul.lang > li > a{
  justify-content: flex-end;
  margin-right: 20px;
  color: #456fc0;
  height: 20px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard5';
  font-size: 10px;
  text-decoration: none;
}
.left .header .header-side #header-side_menu ul.lang > li > a.non-active{
  color: #fff;
  background-color: #053761;
}


.left .header .header-side #check_box:checked + label + #header-side_menu {
  right: 0;
}

.left .header .header-side #header-side_menu > .my-info{
  display: flex;
  margin-left: 20px;
}
.left .header .header-side #header-side_menu > .my-info > .my-account-img > a > img{
	height: 40px;
}
.left .header .header-side #header-side_menu > .my-info > .my-account-text{
  margin-left: 10px;
}
.left .header .header-side #header-side_menu > .my-info > .my-account-text h3{
  font-size: 18px;
  color: #fff;
  font-family: 'Pretendard5';
}
.left .header .header-side #header-side_menu > .my-info > .my-account-text div{
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.left .header .header-side #header-side_menu > .my-info > .my-account-text div > p{
  display: block;
  font-size: 14px;
  color: #fff;
  font-family: 'Pretendard5';
}
.left .header .header-side #header-side_menu > .my-info > .my-account-text div > a{
  display: block;
  font-size: 12px;
  color: #b7d4eb;
  font-family: 'Pretendard5';
  text-decoration: none;
  margin-left: 5px;
}
.left .header .header-side #header-side_menu > ul.sub-ham-menu{
  margin: 15px 20px 0;
  border-top: 1px solid #fff;
}
.left .header .header-side #header-side_menu > ul.sub-ham-menu > li{
  margin: 15px 0;
  padding: 7px 0;
  background-color: #053761;
  border-radius: 15px;
}
.left .header .header-side #header-side_menu > ul.sub-ham-menu > li > a{
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  font-family: 'Pretendard5';
  display: flex;
  align-items: center;
  transition: all 0.5s;
  justify-content: center;
}

.left .header .header-side #header-side_menu > ul.sub-ham-menu > li:last-child{
  /* margin-top: 50px; */
  border-radius: 15px;
  background: #DEDEDE;
}
.left .header .header-side #header-side_menu > ul.sub-ham-menu > li:last-child > a{
  color: #000;
}


.hidden-txt{
  display: none;
}
/* *********************************************************************************************************** */



.left .my-account{
  display: flex;
  margin-bottom: 25px;
}
.left .my-account .my-left{
  display: flex;
  align-items: flex-start;
  margin-top: 25px;
}
.left .my-account .my-left .my-account-img{
  margin-top: 8px;
}
.left .my-account .my-left .my-account-img a{
  display: block;
}
.left .my-account .my-left .my-account-img a img{
  height: 50px;
}
.left .my-account .my-left .my-account-text{
  margin-left: 20px;
}
.left .my-account .my-left .my-account-text h3{
  font-family: 'Pretendard7';
  font-size: 24px;
  color: #fff;
  word-break: keep-all;
  line-height: 1.5;
}
.left .my-account .my-left .my-account-text > div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.left .my-account .my-left .my-account-text > div p{
  font-family: 'Pretendard5';
  font-size: 18px;
  color: #fff;
  word-break: keep-all;
  line-height: 1.5;
}
.left .my-account .my-left .my-account-text > div a{
  font-family: 'Pretendard3';
  font-size: 14px;
  color: #fff;
  word-break: keep-all;
  line-height: 1.5;
  text-decoration: none;
}
.left .my-account .my-left .my-account-text .re-time a{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.left .my-account .my-left .my-account-text .re-time a img{
  height: 20px;
  margin-right: 10px;
}
.left .my-account .my-left .my-account-text .re-time a span{
  display: block;
  font-size: 14px;
  color: #fff;
  word-break: keep-all;
  line-height: 1.5;
  text-decoration: none;
}

.left .my-account .my-right{
  margin-top: 32px;
  margin-left: 34px;
}
.left .my-account .my-right a{
  display: block;
  margin-bottom: 9px;
}
.left .my-account .my-right a img{
  height: 20px;
}

.left .menu{
  display: flex;
  align-items: center;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin: 0 20px;
  width: calc(100% - 40px);
  flex-direction: column;
  padding: 25px 0;
}


/* 한영추가 */
.left .menu .lang{
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.left .menu .lang > li{}
.left .menu .lang > li > a{
  padding: 2px 5px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  transition: all 0.5s;
  width: calc(100% - 30px);
  justify-content: space-between;
  color: #fff;
  text-decoration: none;
  word-break: keep-all;
  font-family: 'Pretendard5';
  margin-bottom: 0;
  background-color: none;
}
.left .menu .lang > li > a:hover{
  background-color: none;
}

.left .side-bar #side_menu > ul > ul.lang{
  position: absolute;
  top: 35px;
  display: flex;
}
.left .side-bar #side_menu > ul > ul.lang > li{
  margin-right: 10px;
}
.left .side-bar #side_menu > ul > ul.lang > li > a{
  color: #fff;
  text-decoration: none;
}
/* 한영추가 */


.left .menu a{
    /* padding: 5px 15px; */
    /* height: 50px; */
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    height: 75px;
    padding: 0 15px;
    transition: all 0.5s;
    width: calc(100% - 30px);
    border-radius: 50px;
    justify-content: space-between;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    word-break: keep-all;
    line-height: 1.5;
    font-family: 'Pretendard5';
    margin-bottom: 10px;
}
.left .menu a p{
  display: flex;
  align-items: center;
  font-family: 'Pretendard5';
  width: 257px;
  
}
.left .menu a p img{
  height: 35px;
  margin-right: 10px;
}

.left .side-bar{
  display: none;
  position: fixed;
	right: 20px;
}








/* *************************************************************** */
.left .side-bar #side_menu{
  position: fixed;
    width: 100%;
    background-color: #063760;
    right: 0px;
    transition: all 300ms;
    z-index: 1;
    height: 70px;
    bottom: 0px;
    /* padding: 10px 20px; */
    box-sizing: border-box;
    /* border-radius: 50px 0 0 50px; */
}

.left .side-bar #side_menu > ul{
  display: flex;
    align-items: flex-start;
    justify-content: space-around;
    height: 100%;
    margin-top: 12px;
}
.left .side-bar #side_menu > ul > li{
  margin-bottom: 20px;
  margin: 0 10px;
}

.left .side-bar #side_menu > ul > li a{
  text-decoration: none;
  font-size: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.5s;
  font-family: 'Pretendard5';
  text-align: center;
  line-height: 1.2;
}
/* ************************************************************ */

.left .side-bar #side_menu > ul > li a img{
  height: 30px;
}

.left .side-bar #side_menu > ul > li:nth-child(2) > a img{
	margin-left: 5px;
}

.left .side-bar #side_menu > ul > li > .sub_menu{
  padding: 15px 10px 10px;
}
.left .side-bar #side_menu > ul > li > .sub_menu .sub_menu_list{
  color: #D9E8FF;
  font-size: 14px;
  padding: 3px;
  border-bottom: 1px solid #1D3273;
  transition: all 0.3s;
}
.left .side-bar #side_menu > ul > li > .sub_menu .sub_menu_list:hover{
  border-bottom: 1px solid #D9E8FF;
}

.left .side-bar #side_menu > ul ol{display: flex;}
.left .side-bar #side_menu > ul > ol > li > a{
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  font-family: 'Pretendard5';
}
.left .side-bar #check_box:checked + label + #side_menu {
  right: 0;
}



/* main-page */
.main-page{
  height: calc(100vh - 240px);
  margin: 120px 0 25px 25px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  border-radius: 30px;
  width: 70%;
  position: relative;
}

.main-page .down-arrow{
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.main-page .down-arrow img{
  height: 30px;
}

.main-page .main-top{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.main-page .main-top .main-top-title{
  display: flex;
  align-items: flex-end;
}
.main-page .main-top .main-top-title h2{
  font-size: 36px;
  font-family: 'Pretendard7';
  word-break: keep-all;
}
.main-page .main-top .main-top-title p{
  font-size: 16px;
  margin-left: 20px;
  font-family: 'Pretendard5';
  word-break: keep-all;
}

.main-page .main-top .main-top-btn{
  display: flex;
}
.main-page .main-top .main-top-btn a:last-child{
  margin-left: 20px;
}
.main-page .main-top .main-top-btn a{
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  transition: all 0.5s;
  font-family: 'Pretendard5';
  background-color: #456fc0;
  border-radius: 30px;
  padding: 7px 25px;
}

.main-page .main-bottom{
  height: calc(100vh - 360px);
  overflow-y: scroll;
}
.main-page .main-bottom.scroll::-webkit-scrollbar {
  display: none;
}
.main-page .main-bottom p{
  font-size: 16px;
  color: #616161;
  font-family: 'Pretendard5';
  word-break: keep-all;
  margin-bottom: 15px;
}
.main-page .main-bottom .badge-list.scroll::-webkit-scrollbar {
  display: none;
}
.main-page .main-bottom .badge-list{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.main-page .main-bottom .badge-list .badge-box{
  background-color: #fff;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.main-page .main-bottom .badge-list .badge-box img{
  height: 155px;
  margin-top: 25px;
  margin-bottom: 6px;
}
.main-page .main-bottom .badge-list .badge-box .badge-name{
  font-size: 16px;
  font-family: 'Pretendard7';
  word-break: keep-all;
  text-align: center;
  line-height: 1.2;
  display: flex;
  height: 45px;
  align-items: center;
}

.main-page .main-bottom .badge-list .badge-box .badge-agen{
  font-size: 12px;
  font-family: 'Pretendard3';
  word-break: keep-all;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}


.main-page .main-bottom .badge-list .badge-box .badge-share{
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-page .main-bottom .badge-list .badge-box .badge-share input{
  display: none;
}
.main-page .main-bottom .badge-list .badge-box .badge-share label{
  display: block;
  position: relative;
  width: 55px;
    height: 25px;
  background: #d3d3d3;
  border-radius: 60px;
  transition: background 0.4s;
}
.main-page .main-bottom .badge-list .badge-box .badge-share label::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #fff;
  transform: translateY(-50%);
  box-shadow: 1px 3px 4px rgba(0,0,0,0.1);
  transition: all 0.4s;
}
.main-page .main-bottom .badge-list .badge-box .badge-share label::before {
  content: "OFF";
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  left: 23px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s;
}

.main-page .main-bottom .badge-list .badge-box .badge-share input:checked + label {
  background: #053761;
}
.main-page .main-bottom .badge-list .badge-box .badge-share input:checked + label::after {
  left: calc(100% - 22.5px);
}
.main-page .main-bottom .badge-list .badge-box .badge-share input:checked + label::before {
  content: "ON";
  color: #fff;
  left: 8px;
}
.main-page .main-bottom .badge-list .badge-box .badge-share span{
  font-size: 12px;
  font-family: 'Pretendard5';
  margin-top: 3px;
}

.main-page .main-bottom .badge-list .badge-box .badge-Issued{
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-page .main-bottom .badge-list .badge-box .badge-Issued input{
  width: 20px;
  height: 20px;
}



/* badge-page */
.main-page .main-bottom .badge-cont-top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin: 10px 0 0 80px;
}
.main-page .main-bottom .badge-cont-top .badge-img{
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
}
.main-page .main-bottom .badge-cont-top .badge-img img{
  height: 250px;
}
.main-page .main-bottom .badge-cont-top .badge-name{
  margin-left: 30px;
}
.main-page .main-bottom .badge-cont-top .badge-name h2{
  font-size: 32px;
  font-family: 'Pretendard7';
  word-break: keep-all;
  line-height: 1.5;
}
.main-page .main-bottom .badge-cont-top .close-btn{
  padding: 7px;
  border-radius: 50%;
  background-color: #063760;
  position: absolute;
  top: 0;
  right: 0;
}
.main-page .main-bottom .badge-cont-top .close-btn img{
  height: 18px;
}

.main-page .main-bottom .badge-cont-mid{
  margin: 20px 80px 0 80px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.main-page .main-bottom .badge-cont-mid .badge-txt{
  width: 100%;
  position: relative;
}
.main-page .main-bottom .badge-cont-mid .badge-txt > p{
  margin-bottom: 5px;
}
.main-page .main-bottom .badge-cont-mid .badge-txt h3{
  font-size: 24px;
  font-family: 'Pretendard5';
  word-break: keep-all;
  line-height: 1.5;
  margin-bottom: 15px;
}


.main-page .main-bottom .badge-cont-mid .badge-txt .txt-txt{
  display: block;
  font-size: 16px;
  font-family: 'Pretendard3';
  word-break: keep-all;
  line-height: 1.5;
  color: #000;
  margin-bottom: 0;
}
.main-page .main-bottom .badge-cont-mid .badge-txt .txt-txt-txt{
  width: 100%;
  display: flex;
}
.main-page .main-bottom .badge-cont-mid .badge-txt .txt-txt-txt > a{
  text-decoration: none;
  color: #fff;
  background-color: #456fc0;
  font-size: 14px;
  font-family: 'Pretendard5';
  word-break: keep-all;
  line-height: 1.5;
  width: 150px;
  height: 25px;
  border-radius: 15px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-page .main-bottom .badge-cont-mid .badge-txt span{
  display: block;
  font-size: 16px;
  font-family: 'Pretendard3';
  word-break: keep-all;
  line-height: 1.5;
}
.main-page .main-bottom .badge-cont-mid .badge-txt span a{
  text-decoration: none;
  color: #fff;
  background-color: #053761;
  font-size: 14px;
  font-family: 'Pretendard5';
  word-break: keep-all;
  line-height: 1.5;
  padding: 4px 15px;
  border-radius: 15px;
  margin-left: 10px;
}
.main-page .main-bottom .badge-cont-mid .badge-button{
  display: flex;
}
.main-page .main-bottom .badge-cont-mid .badge-button a{
  text-decoration: none;
  color: #fff;
  background-color: #053761;
  font-size: 14px;
  font-family: 'Pretendard5';
  word-break: keep-all;
  line-height: 1.5;
  display: block;
  width: 150px;
  height: 25px;
  line-height: 25px;
  border-radius: 15px;
  margin-left: 10px;
  text-align: center;
}
.main-page .main-bottom .badge-cont-mid .badge-button a.delete{
  background-color: #ccc;
  color: #000;
}

.main-page .main-bottom .badge-cont-bottom{
  margin: 15px 80px 0 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid #000;
}
.main-page .main-bottom .badge-cont-bottom .badge-info-box{
  width: 48%;
  margin-top: 15px;
}
.main-page .main-bottom .badge-cont-bottom .badge-info-box h4{
  width: calc(100% - 20px);
  height: 40px;
  background-color: #eeeeee;
  font-size: 20px;
  font-family: 'Pretendard5';
  word-break: keep-all;
  line-height: 40px;
  padding-left: 20px;
  /* margin-bottom: 15px; */
}
.main-page .main-bottom .badge-cont-bottom .badge-info-box p{
  margin-bottom: 4px;
  color: #000;
  margin-left: 20px;
      margin-top: 15px;
}
.main-page .main-bottom .badge-cont-bottom .badge-info-box span{
  font-size: 15px;
  font-family: 'Pretendard3';
  word-break: keep-all;
  color: #000;
  margin: 15px 20px;
  display: block;
  line-height: 1.5;
}
.main-page .main-bottom .badge-cont-bottom .badge-info-box .img-box{
  margin: 15px 20px;
  display: flex;
}
.main-page .main-bottom .badge-cont-bottom .badge-info-box .img-box > a{
	display: block;
	height: 50px;
	width: 50px;
	margin-right: 10px;
}
.main-page .main-bottom .badge-cont-bottom .badge-info-box .img-box img{
	width: 100%;
	border-radius: 5px;
}
.main-page .main-bottom .badge-cont-bottom .badge-info-box span.tech{
  padding: 3px;
  border-radius: 20px;
  background-color: #eeeeee;
  display: inline-block;
  text-align: center;
  margin: 10px;
}

.main-page .main-bottom .badge-cont-button{
	width: 100%;
    display: flex;
    justify-content: center;
}
.main-page .main-bottom .badge-cont-button > a{
	text-decoration: none;
    color: #fff;
    background-color: #053761;
    font-size: 14px;
    font-family: 'Pretendard5';
    word-break: keep-all;
    line-height: 1.5;
    padding: 4px 15px;
    border-radius: 15px;
    margin-top: 10px;
}


.profile-page-inner{
  margin: 0 20px;
}
.profile-page-inner form{
  margin-top: 50px;
}
.profile-page-inner form > div{}
.profile-page-inner form > div > label{
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 16.6px;
  font-family: 'Pretendard5';
  word-break: keep-all;
  color: #000;
  line-height: 1.5;
}
.profile-page-inner form > div > input {
    border: none;
    height: 35px;
    width: 50%;
    background-color: rgba(5, 55, 97, 0.1);
    padding: 0;
}
.profile-page-inner form > div > div{
	width: 50%;
	display: flex;
	align-items: center;
}
.profile-page-inner form > div > div > input{
	border: none;
    height: 35px;
	width: calc(100% - 0px);
    background-color: rgba(5, 55, 97, 0.1);
    padding: 0;
}
.profile-page-inner form > div > div > a{
	border: none;
    height: 30px;
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #f00;
    line-height: 30px;
    padding: 0 13px;
    border-radius: 30px;
    margin-left: 5px;
    font-size: 14px;
    width: 30px;
}

@media (max-width: 1200px){
	.profile-page-inner form > div > input {
    		width: 100%;
	}
}
@media (max-width: 1150px){
	.main-page .main-top .main-top-btn a {
    		text-decoration: none;
    		font-size: 12px;
    		color: #000;
    		display: flex;
    		align-items: center;
    		transition: all 0.5s;
    		font-family: 'Pretendard5';
    		background-color: #fff;
    		box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    		border-radius: 8px;
    		height: 20px;
    		width: 70px;
    		padding: 2px 5px;
    		justify-content: center;
	}
	.main-page.setting .main-top .main-top-btn a {
    		background-color: #053761;
    		color: #fff;
	}
	.main-page .main-bottom .badge-cont-bottom .badge-info-box h4{
		background-color: #1b748f;
	}
	.main-page .main-bottom .badge-cont-bottom .badge-info-box span.tech{
		background-color: #1b748f;
	}
}




.profile-page-inner form > div.email-plus{
  width: 50%;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.profile-page-inner form > div.email-plus button.plus{
  padding: 5px 20px;
  border-radius: 20px;
  border: none;
  background-color: #456fc0;
  color: #fff;
  font-family: 'Pretendard5';
  word-break: keep-all;
}

.profile-page-inner form > div.agency{
  width: 50%;
}
.profile-page-inner form > div.agency > div{
  display: flex;
  justify-content: space-between;
}
.profile-page-inner form > div.agency > div > input{
  width: 49%;
  height: 35px;
  border: none;
  background-color: rgba(5, 55, 97, 0.1);
  margin-bottom: 10px;
}

.profile-page-inner form > div.agency-plus{
  width: 50%;
}
.profile-page-inner form > div.agency-plus > div{
  display: flex;
  justify-content: space-between;
}
.profile-page-inner form > div.agency-plus > div > label{
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 16.6px;
  font-family: 'Pretendard5';
  word-break: keep-all;
  color: #000;
  line-height: 1.5;
}
.profile-page-inner form > div.agency-plus > div > select{
  width: 49%;
  height: 35px;
  border: none;
  background-color: rgba(5, 55, 97, 1);
  margin-bottom: 10px;
  color: #fff;
}

.profile-page-inner form > div.agency-plus > div > select option:checked,
.profile-page-inner form > div.agency-plus > div > select option {
  background-color: #e8e9ea;
  color: #000;
  height: 25px;
}

.profile-page-inner form > div.agency-plus > div > input{
  width: 49%;
  height: 35px;
  border: none;
  background-color: rgba(5, 55, 97, 0.1);
  margin-bottom: 10px;
}

.profile-page-inner form > div.agency-plus > div.agen-plus{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.profile-page-inner form > div.agency-plus > div.agen-plus button.plus{
  padding: 5px 20px;
  border-radius: 20px;
  border: none;
  background-color: #456fc0;
  color: #fff;
  font-family: 'Pretendard5';
  word-break: keep-all;
}

.main-page .main-bottom .badge-cont-top .badge-name > .badge-name-hidden{
  display: none;
}


/* footer */
.footer{
  height: 55px;
  background-color: #323232;
  box-shadow: 0 -3px 6px rgba(0,0,0,0.1);
  padding: 0 120px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: calc(100% - 240px);
  bottom: 0;
}
.footer .link{
  display: flex;
  align-items: center;
}
.footer .link img{
  height: 22px;
}
.footer .link a{
  font-size: 10px;
  margin: 0 15px 0 55px;
  text-decoration: none;
  color: #fff;
  font-family: 'Pretendard5';
}
.footer .link a:last-child{
  margin-left: 0;
}

.footer .footer-logo{
  display: flex;
  align-items: center;
}
.footer .link span{
  font-size: 10px;
  color: #fff;
  margin-right: 20px;
  font-family: 'Pretendard3';
}


/* 반응형 */
@media (max-width: 1740px){
	.main-page .main-bottom .badge-cont-mid .badge-txt span a {
	    display: inline-block;
	    margin: 5px 0 0 0;
	}
}
@media (max-width: 1600px){
  .main-page .main-bottom .badge-list{
    grid-template-columns: repeat(4, 1fr);
  }
  .main-page .main-bottom .badge-cont-mid {
    align-items: flex-start;
    flex-direction: column;
  }
  .main-page .main-bottom .badge-cont-mid .badge-button a{
    margin-left: 0px;
    margin: 10px 5px 0 0;
  }
}
@media (max-width: 1200px){
  .main-page .main-bottom .badge-list{
    grid-template-columns: repeat(4, 1fr);
  }
  .main-page .main-top {
    flex-direction: column;
  }
  .main-page .main-top .main-top-btn {
    margin-top: 15px;
  }
  .main-page .main-bottom .badge-cont-bottom .badge-info-box {
    width: 100%;
    background-color: #456fc0;
    margin: 0;
  }
  .profile-page-inner form > div > input{
    width: 100%;
  }
  .profile-page-inner form > div > div{
	width: 100%;
  }
  .profile-page-inner form > div.email-plus {
    width: 100%;
  }
  .profile-page-inner form > div.agency {
    width: 100%;
  }
  .profile-page-inner form > div.agency-plus {
    width: 100%;
  }
  .main-page .main-bottom .badge-cont-mid .badge-txt span {
    text-align: center;
  }
}

@media (max-width: 1150px){
	#section{
    flex-direction: column;
  }
  /* *************************************************** */
  .left{
    padding: 0 20px;
    /* position: fixed; */
    width: calc(100% - 40px);
    top: 0;
    margin: 0;
    height: 100%;
    border-radius: 0;
    background-color: #456fc0;
    box-shadow: none;
    z-index: 999;
  }
  .left .header {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 40px);
    padding: 5px 20px;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .left .header .header-side{
    display: block;
  }
  /* ********************************************************** */
  .left .header p{
    display: none;
  }
  .left .header .page-logo {
    margin-top: 0;
    height: auto;
  }
	.left .menu{
    display: none;
  }
  .left .side-bar{
    display: block;
  }
  .left .menu a {
    margin-left: 8px;
    font-size: 14px;
	}

  .left .my-account {
    display: none;
    margin-top: 70px;
    width: 80%;
    justify-content: space-between;
  }
  .left .my-account .my-left .my-account-text .re-time {
    display: none;
  }
  
  .left .header .page-logo img {
    	height: 27px;
	}
/* *********************************************************************** */
  .main-page {
    min-height: calc(100vh - 190px);
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    border-radius: 30px;
    width: 100%;
    z-index: 1;
  }
  .main-page .down-arrow{
    display: none;
  }
  .main-page .main-top {
    position: relative;
    flex-direction: column;
    align-items: center;
  }
  .main-page .main-top .main-top-title {
    display: flex;
    align-items: flex-start;
    background-color: #363636;
    width: 100%;
    height: 100%;
    color: #fff;
    flex-direction: column;
    padding-top: 40px;
    margin-top: 38px;
    padding-bottom: 25px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  }
  .main-page .main-top .main-top-title h2 {
    font-size: 20px;
    margin-left: 20px;
    font-family: 'Pretendard7';
  }
  .main-page .main-top .main-top-title p {
    font-size: 14px;
    margin-left: 20px;
    margin-top: 10px;
    font-family: 'Pretendard5';
    word-break: keep-all;
  }
  .hidden-txt{
    display: block;
    font-size: 12px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 30px;
    line-height: 1.2;
    font-family: 'Pretendard3';
    word-break: keep-all;
  }


  .main-page .main-top .main-top-btn {
    position: absolute;
    top: 43px;
    right: 20px;
    /* width: 100%; */
    margin-top: 25px;
    justify-content: space-between;
  }
  .main-page .main-top .main-top-btn a {
    text-decoration: none;
    font-size: 12px;
    color: #000;
    display: flex;
    align-items: center;
    transition: all 0.5s;
    font-family: 'Pretendard5';
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
    height: 20px;
    width: 70px;
    padding: 2px 5px;
    justify-content: center;
  }
  .main-page .main-top .main-top-btn a.one {
    width: 100%;
    margin-left: 0;
  }
  .main-page .main-top .main-top-btn a:last-child{
    margin-left: 5px;
  }

  /* *************************************************************** */

  .main-page .main-bottom {
    overflow: visible;
    position: relative;
  }


  .main-page .main-bottom .badge-list{
    grid-template-columns: repeat(4, 1fr);
    /* overflow-y: scroll;
    height: calc(100vh - 545px); */
    margin: 0 20px 20px;
    position: relative;
    top: -45px;
  }
  .main-page > .main-bottom > p{
    display: none;
  }

  .footer {
    height: 110px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 20px 115px 20px;
    width: calc(100% - 40px);
    position: relative;
  }
  
  .footer .link {
    margin: 10px;
    flex-direction: column;
    width: 100%;
  }
  .footer .link a{
  	margin: 0px 15px 10px;
  }
  .footer .link img{
  	margin-bottom: 10px;
  }
  .footer .footer-logo {
    width: 100%;
    justify-content: center;
  }

  .badge-info {
    /* overflow-y: scroll; */
    height: calc(100% - 105px);
    /* background-color: #fff; */
    /* padding: 15px; */
    border-radius: 15px;
    margin: 0 20px;
    position: relative;
    top: -45px;
  }
  
  @media (max-width: 1150px) {
    .badge-info {
        /* overflow-y: scroll; */
        height: calc(100% - 105px);
        /* background-color: #fff; */
        /* padding: 15px; */
        border-radius: 15px;
        margin: 0 20px;
        position: relative;
        top: 0px;
        margin-bottom: 20px;
    }
}

  .badge-info.scroll::-webkit-scrollbar {
    display: none;
  }

  .main-page .main-bottom .badge-cont-top .badge-img img{
    height: 140px;
  }

  .profile-page-inner{
    margin: 0;
    padding: 50px 20px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    height: calc(100% - 180px);
    overflow-y: scroll;
  }
  .profile-page-inner.scroll::-webkit-scrollbar {
    display: none;
  }
  .main-page .main-bottom .badge-cont-mid .badge-txt span a{
    display: inline;
  }
  .main-page .main-bottom .badge-cont-mid .badge-txt h3 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 5px;
  }
  .main-page .main-bottom .badge-cont-top .badge-name {
    margin-left: 10px;
    width: 50%;
  }
  .main-page .main-bottom .badge-cont-top .badge-name > .badge-name-hidden {
    display: block;
    text-align: left;
  }
  .main-page .main-bottom .badge-cont-top .badge-name > .badge-name-hidden > p{
    font-size: 12px;
    font-family: 'Pretendard7';
    word-break: keep-all;
    line-height: 1.2;
    margin-bottom: 10px;
    margin-top: 45px;
  }
  .main-page .main-bottom .badge-cont-top .badge-name > .badge-name-hidden > h3{
    font-size: 14px;
    font-family: 'Pretendard7';
    word-break: keep-all;
    line-height: 1.2;
  }
  .main-page .main-bottom .badge-cont-top .badge-name h2 {
    font-size: 16px;
    font-family: 'Pretendard7';
    word-break: keep-all;
    line-height: 1.5;
  }
  .main-page .main-bottom .badge-cont-top {
    margin: 0;
    flex-direction: row;
  }

  .main-page .main-bottom .badge-cont-mid .badge-button{
    margin-top: 20px;
    border-top: 1px solid #000;
  }


  .main-page .main-bottom .badge-cont-bottom .badge-info-box h4{
    color: #fff;
  }
  .main-page .main-bottom .badge-cont-bottom .badge-info-box p{
    color: #fff;
  }
  .main-page .main-bottom .badge-cont-bottom .badge-info-box span{
    color: #fff;
  }

  .main-page .main-bottom .badge-cont-mid .badge-button a {
    padding: 5px;
    /* margin: 5px 0; */
    text-decoration: none;
    color: #000;
    background-color: #fff;
    /* border-radius: 30px; */
    box-shadow: 0 0 5px #d5d5d5;
    font-size: 12px;
    font-family: 'Pretendard5';
    word-break: keep-all;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 22px;
    line-height: 1;
    border-radius: 18px;
    margin-left: 10px;
    text-align: center;
    margin: 5px 0;
    margin-left: 5px;
  }
  .main-page .main-bottom .badge-cont-mid .badge-button a:first-child{
    margin-left: 0;
  }
  .main-page .main-bottom .badge-cont-mid .badge-button a.delete{
    background-color: #fff;
  }

  .main-page .main-bottom .badge-cont-mid .badge-button {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    margin-top: 20px;
  }
  .main-page .main-bottom .badge-cont-bottom {
    margin: 0;
  }
  .main-page .main-bottom .badge-cont-mid {
    margin: 0;
  }
  .main-page .main-bottom .badge-cont-mid .badge-txt span a{
    
  }
  
  .main-page .main-bottom .badge-cont-mid .badge-txt > p {
    display: none;
	}
  .main-page .main-bottom .badge-cont-mid .badge-txt > h3 {
    display: none;
	}

  .main-page .main-bottom .badge-cont-mid .badge-txt .txt-txt{
    margin-top: 20px;
  }
  @media(max-width: 380px){
  .main-page .main-bottom .badge-cont-mid .badge-txt .txt-txt-txt{
    top: 16px;
    right: 0px;
    width: auto;
  }
  }
  .main-page .main-bottom .badge-cont-mid .badge-txt .txt-txt-txt > a {
    width: 86px;
    height: 20px;
    font-size: 12px;
  }

	
	.main-page .main-bottom{
	  height: 100%;
	  overflow-y: none;
	}



  .main-page .main-bottom .badge-cont-top .close-btn{
    display: none;
  }
  
  .footer .link span{
  	margin: 10px 0;
  }
}

@media (max-width: 991px){
  .main-page .main-bottom .badge-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .main-page .main-bottom .badge-list .badge-box .badge-name {
    font-size: 14px;
    font-family: 'Pretendard7';
  }
}

@media (max-width: 768px){
	.main-page .main-bottom .badge-list {
	    grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px){
  .main-page .main-bottom .badge-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .main-page .main-bottom .badge-list .badge-box img {
    height: 100px;
    margin-top: 15px;
    margin-bottom: 0px;
  }
}

@media (max-width: 500px){
  .main-page .main-bottom .badge-list .badge-box{
    min-width: calc(100% - 20px);
    /* height: 180px; */
  }
  .main-page .main-bottom .badge-list .badge-box .badge-share input:checked + label::before {
    content: "ON";
    color: #fff;
    left: 5px;
  }
  .main-page .main-bottom .badge-list .badge-box .badge-share input:checked + label::after {
      left: calc(100% - 14.5px);
  }
  .main-page .main-bottom .badge-list .badge-box .badge-share input:checked + label {
      background: #053761;
  }
  .main-page .main-bottom .badge-list .badge-box .badge-share label::after {
    content: "";
    position: absolute;
    left: 1.5px;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    background-color: #fff;
    transform: translateY(-50%);
    box-shadow: 1px 3px 4px rgba(0,0,0,0.1);
    transition: all 0.4s;
  }

  .main-page .main-bottom .badge-list .badge-box .badge-share label {
      display: block;
      position: relative;
      width: 40px;
      height: 15px;
      background: #d3d3d3;
      border-radius: 60px;
      transition: background 0.4s;
  }
  .main-page .main-bottom .badge-list .badge-box .badge-share label::before {
      content: "OFF";
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.4s;
  }
  .main-page .main-bottom .badge-list .badge-box .badge-share label::after {
    content: "";
    position: absolute;
    left: 1.5px;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    background-color: #fff;
    transform: translateY(-50%);
    box-shadow: 1px 3px 4px rgba(0,0,0,0.1);
    transition: all 0.4s;
  }
  .main-page .main-bottom .badge-list .badge-box .badge-share span {
    font-size: 10px;
  }
  .footer .link a:last-child {
    margin-left: 0;
    margin-right: 0;
	}
	.footer .link{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer .link img{
  height: 22px;
}
.footer .link a{
  font-size: 10px;
  margin: 10px 15px 0 0;
  text-decoration: none;
  color: #fff;
  font-family: 'Pretendard5';
}
}

@media (max-width: 367px){
  .main-page .main-bottom .badge-list {
    grid-template-columns: repeat(1, 1fr);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .main-page .main-bottom .badge-list .badge-box{
    width: 100%;
    /* height: 160px; */
  }
}


@media (max-width: 1150px){
  .main-page.setting .main-top{
    position: relative;
    top: 27px;
    margin: 0 20px;
    z-index: 99;
  }
  .main-page.setting .main-top .main-top-title{
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 10px 10px 0px 0px;
    background: #456fc0;
  }
  .main-page.setting .main-top .main-top-title h2{}

  .main-page.setting .main-top .main-top-btn{
    top: 21px;
  }
  .main-page.setting .main-top .main-top-btn a{
    background-color: #053761;
    color: #fff;
  }

  .main-page.setting .main-bottom{
    margin: 0 20px;
  }

  .profile-page-inner{
    margin-bottom: 50px;
    padding: 30px 20px;
  }

  .profile-page-inner form > div > label,
  .profile-page-inner form > div.agency-plus > div > label
  {
    font-size: 16px;
  }

  .profile-page-inner .out a {
    font-size: 14px;
  }
}
.profile-page-inner .out{
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.profile-page-inner .out a{
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: #ebebeb;
  color: #434343;
  margin-right: 15px;
  padding: 7px 15px;
  border-radius: 20px;
}
.profile-page-inner .out a:last-child{
  margin-right: 0;
  color: #fff;
  background-color: #456fc0;
}


.left .header .header-side #header-side_menu {
    position: fixed;
    width: 200px;
    height: 250px;
    background-color: #C4DAFF;
    right: -300px;
    transition: all 300ms;
    z-index: 1;
    top: 38px;
    border-radius: 10px 0px 0px 10px;
    opacity: 1;
    background-color: #456fc0;
    box-sizing: border-box;
}

@media (max-width: 768px){
.main-page .main-bottom .badge-list .badge-box img {
    height: 85px;
    
    margin-top: 15px;
    margin-bottom: 0px;
}
}

@media (max-width: 1150px){
.main-page .main-top .main-top-btn a {
    text-decoration: none;
    font-size: 10px;
    color: #000;
    display: flex;
    align-items: center;
    transition: all 0.5s;
    font-family: 'Pretendard5';
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
    height: 20px;
    width: 70px;
    padding: 2px 5px;
    justify-content: center;
}
}
@media (max-width: 991px){
.main-page .main-bottom .badge-list .badge-box .badge-name {
    font-size: 13px;
    font-family: 'Pretendard7';
}
}




/********************************************** 240806 역량맵 css 추가 *************************************************/
.new{
  display: flex;
  justify-content: center;
  min-height: calc(100% - 220px);
}
.new .side{
  width: 50%;
}
.new .side h3{
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 20px;
}
.new .side .side-inner{
  min-height: calc(100% - 40px);
  max-height: 500px;
  width: 100%;
  background-color: #F5F6FA;
  border-radius: 10px;
  padding: 20px 20px 20px 0;
  overflow: scroll;
}
.new .side .side-inner::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}
.new .side .side-inner::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 5px;
}
.new .side .side-inner::-webkit-scrollbar-track {
	background-color: #F5F6FA;
	border-radius: 5px;
}


.new .side .side-inner ol{}
.new .side .side-inner ol img{height: 20px;}
.new .side .side-inner ol ul{margin-left: 20px;}
.new .side .side-inner ol ul span{display: flex; align-items: center; margin-bottom: 10px;}
.new .side .side-inner ol ul span img{height: 20px; display: inline-block; margin-right: 5px;}
.new .side .side-inner ol ul li::before{
  content: url(../img/folder-open-regular.svg);
  height: 15px;
  display: inline-block;
  width: 15px;
  margin-right: 5px;
  margin-left: 30px;
}
.new .side .side-inner ol ul li{
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.new .badge-content{
  width: 50%;
  margin-left: 30px;
}
.new .badge-content h3{
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 20px;
}

.new .badge-content .badge-content-inner > div{
	/*width: 100%; 
	height: 100%;*/
	border-radius: 5px; 
	padding:25px;
	border: 3px solid #259FBC;
	background-color: #fff;
	overflow: scroll;
	max-height: 676px;
}
.new .badge-content .badge-content-inner > div::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}
.new .badge-content .badge-content-inner > div::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 5px;
}
.new .badge-content .badge-content-inner > div::-webkit-scrollbar-track {
	background-color: #F5F6FA;
	border-radius: 5px;
}

.new .badge-content .badge-content-inner > div > div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px
}
.new .badge-content .badge-content-inner > div > p{
	font-size: 14px;
	margin-bottom: 15px;
	line-height: 1.5;
}
.new .badge-content .badge-content-inner > div >  div > h3{
	font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
    width: 70%;
    line-height: 1.2;
    word-break: keep-all;
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: 'Pretendard7';
}
.new .badge-content .badge-content-inner > div >  div > div{
	flex-shrink: 0;
}
.new .badge-content .badge-content-inner > div >  div > div > input{
	padding: 6px 15px;
    margin-right: 5px;
    background-color: #259FBC;
    border: none;
    color: #fff;
    border-radius: 26px;
    font-size: 14px;
}
.new .badge-content .badge-content-inner > div >  div > div > input.copy{
	background-color: #363636;
}
.new .badge-content .badge-content-inner > div >  div > div > input.copy:active{
	background-color: rgb(255, 0, 128);
}
.new .badge-content .badge-content-inner > div >  div > div > input.save{
	background-color: #2558D6;
}
.new .badge-content .badge-content-inner > div > p > span{
	background-color: #F5F6FA;
    color: #2558D6;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 5px;
}
.new .badge-content .badge-content-inner > div > p > span.state{
	background-color: #2558D6;
	color: #fff;
}

.new .badge-content .badge-content-inner .badge-image{height: 200px;}
.new .badge-content .badge-content-inner .badge-image img{height: 100%;}

.new .badge-content .badge-content-inner .badge-name{
  font-weight: 700;
	background-clip: content-box, border-box;
  display: inline-block;
  min-width: 100px;
}
.new .badge-content .badge-content-inner .badge-name span{
  padding: 10px;
	font-size: 0.95rem;
  background-color: #E8F2FF;
  border-radius: 10px 10px 0 0;
  border-bottom: 5px solid #E8F2FF;
  display: inline-block;
  width: 100px;
  text-align: center;
}

.new .badge-content .badge-content-inner .badge-wrap{
  background-color: #E8F2FF;
  padding-top: 15px;
  border-radius: 0 10px 10px 10px;
}
.new .badge-content .badge-content-inner .badge-wrap .badge-info .badge-date{
  padding: 10px;
  font-size: 0.9rem;
	font-weight: 700;
	color: #1D3273;
}
.new .badge-content .badge-content-inner .badge-wrap .badge-info span{
  padding: 10px 10px 20px;
	display: inline-block;
	font-size: 0.9rem;
	line-height: 1.2rem;
  min-height: 80px;
}

.new .badge-content .badge-content-inner .badge-wrap .badge-qual h3.sub-title{
  font-weight: 700;
	border-bottom: 3px solid #D8E6FF;
	background-clip: content-box, border-box;
}
.new .badge-content .badge-content-inner .badge-wrap .badge-qual > span{
  padding: 10px 10px 20px;
	display: inline-block;
	font-size: 0.9rem;
	line-height: 1.2rem;
  min-height: 80px;
  background-color: #D8E6FF;
  width: 100%;
}
.new .badge-content .badge-content-inner .badge-wrap .badge-qual h3 span{
  padding: 10px;
	font-size: 0.95rem;
  display: inline-block;
  background-color: #D8E6FF;
  border-radius: 10px 10px 0 0;
  width: 100px;
  text-align: center;
}

.new .badge-content .badge-content-inner .badge-wrap .badge-skill h3.sub-title{
  font-weight: 700;
	border-bottom: 3px solid #C4DAFF;
	background-clip: content-box, border-box;
  background-color: #D8E6FF;
}

.new .badge-content .badge-content-inner .badge-wrap .badge-skill h3 > span{
  padding: 10px;
	font-size: 0.95rem;
  background-color: #C4DAFF;
  border-radius: 10px 10px 0 0;
  width: 100px;
  text-align: center;
  display: block;
}

.new .badge-content .badge-content-inner .badge-wrap .badge-skill .skills{
  padding: 15px 0 2rem 10px;
  background-color: #C4DAFF;
  border-radius: 0 0 10px 10px;
  min-height: 80px;
}
.new .badge-content .badge-content-inner .badge-wrap .badge-skill .skills span{
  display: inline-block;
	background-color: #fff;
	padding: 5px 10px;
	margin: 5px;
	border-radius: 10px;
	font-size: 0.9rem;
	transition: all 0.3s;
}
.new input[type="text"] {
  	width: 100%;
}

.new input[type="text"].new-input {
  	width: 80%;
}

.new input[type="button"].new-input-btn {
  	padding: 6px 15px;
    margin-right: 5px;
    background-color: #259FBC;
    border: none;
    color: #fff;
    border-radius: 26px;
    font-size: 14px;
}


.new input[type="checkbox"][name="select_side"]{
	display: inline-block;
}
.new input[type="checkbox"][name="select_side"]:checked + div[data-c-level]{
	display: none;
}


.new input[type="radio"][name="select_side"]{
	display: none;
}
/* 선택된 라디오 버튼의 라벨에 배경색을 적용*/
.new input[name="select_side"][type="radio"] + label {
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
    font-size: 16px;
    font-family: 'Pretendard3';
    line-height: 1.2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0px;
    padding: 10px;
    word-break: keep-all;
    word-wrap: break-word;
    width: 100%;
    max-height: 70px;
    display: flex;
    align-items: center;
}


/* 240711 화살표 위치 수정 */
.new input[type="checkbox"]{
	display: none;
}
.new input[type="checkbox"] + label.arrow-img{
    display: block;
    background-size: 15px;
    background-image: url(../img/icon/arrow-down.svg);
    background-repeat: no-repeat;
    background-position: center;
   
    flex-shrink: 0;
    padding: 19px;
}
.new input[type="checkbox"]:checked + label.arrow-img{
	 transform: rotate(-90deg);
}

.new input[name="select_side"][type="radio"]:checked + label {
    background-color: #D7EBF1; 
    
}




.new div[data-c-level] {
    margin-left: 20px;
    position: relative;
}

.new div[data-c-level] div.wrap-box{
	position: relative;
	background-color: #fff;
    width: 400px;
    margin-bottom: 5px;
    padding-left: 40px;
    box-sizing: border-box;
    max-height: 70px;
    padding: 0px;
    display: flex;
    align-items: center;
    user-select: none;
    
    
}



.new input[name="select_side"]+label  {
	padding:10px;
			display: block;
          position: relative; /* 상대 위치 설정 */
}



/* 자식으로 들어갈때 */
.new div div.wrap-box.extra-child {
	background-color: rgb(196 218 255); 
	 /* margin-bottom: 1em; 추가적인 공백 크기 */
    /* 추가적인 공백 크기 */
}


/* 형재로 들어갈때 */
.new div div.wrap-box.extra-sister {
    margin-bottom: 1em; /* 추가적인 공백 크기 */
   
}

.new div div.wrap-box.extra-sister::after {
    content: '';
    position: absolute;
    bottom: -1em; /* 라벨 하단에 배치 */
    left: 0;
    width: 100%;
    height: 1em; /* 하단 1/3 크기 */
    background-color: rgb(196 218 255); 
     /* z-index: -1; 라벨 위에 위치하도록 설정 */
    pointer-events: none; /* 이벤트를 무시하도록 설정하여 라벨 클릭 가능하도록 함 */
    opacity: 1;/* 기본적으로 투명하게 설정 */
    transition: opacity 0.3s ease; /* 부드러운 투명도 전환을 위한 트랜지션 설정 */
   
}


label:hover div.extra-space::after {
    opacity: 1; /* 마우스가 라벨 위에 있을 때만 투명도 조정 */
}
        

.board-menu .search-box input.button.actionBlock{
	background-color: #cfd0d1;
    cursor: wait;
}


@media (max-width: 1200px){
	.new{
		flex-direction: column;
    	align-items: center;
	}
	.new .side{
	  width: 100%;
	}
	.new .side .side-inner{
	    padding: 20px 0;
        border-radius: 0;
        min-height: 300px;
	}
	.new .badge-content {
	    width: 100%;
        margin: 0;
	}
	.new .badge-content .badge-content-inner > div > div {
	    display: flex;
	    align-items: center;
	    margin-bottom: 25px;
	    flex-direction: column;
	}
	.new .badge-content .badge-content-inner > div > div > h3{
		margin-top: 10px;
		text-align: center;
	}
	.new .badge-content .badge-content-inner > div {
	    padding: 25px 0 0;
	    overflow: hidden;
	    max-height: 1000px;
    }
    
}