@charset "UTF-8";

:root {

  /* White and Black */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-black2: #343434;
  /* Grayscale */
  --color-gray01: #3E3E3E;
  --color-gray02: #4B4B4B;
  --color-gray03: #808080;
  --color-gray04: #F5F5F5;
  --color-gray05: #B8B8B8;
  --color-gray06: #D0D0D0;
  --color-gray07: #A0A0A0;
  --color-gray08: rgba(0,0,0,.26);
  --color-gray09: rgba(0,0,0,.5);
  --color-gray10: rgba(0,0,0,.8);
  /* Primary */
  --color-primary: #05BEC0;

}

/* 이거 왜썼는지 확인 */

.text_hidden {position: absolute; font-size: 0; line-height: 0; opacity: 0; width: 0; height: 0; overflow: hidden; z-index: -99; visibility: hidden;}


/* common */
.d-block{
  display: block;
} 

.d-none{
  display: none;
}

.min-h-full{
  min-height: calc( 100vh - 210px - 400px);
}

/* 서브페이지 공통 */

.containerheader-bg{
  height: 300px;
  width: 100%;
  background-color: var(--color-primary);
}

.container-wrap{
  padding-bottom: 310px;
}

.containerheader-bg h1{
  margin: 0;
  padding-top: 180px;
  display: block;
  text-align: center;
  color: var(--color-white);
}

.search-info-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 50px;
}

.search-info-box > span{
  font-size: 14px;
}

.total-count{
  color: var(--color-primary);
  padding: 0 4px;
}

.text-ellipsis {
  display: block;
  white-space: nowrap;       /* 텍스트 줄 바꿈 방지 */
  overflow: hidden;          /* 넘친 텍스트 숨김 */
  text-overflow: ellipsis;   /* ...으로 표시 */
  width: 100%;              /* 고정된 너비 필요 */
}

/*  n줄 생략 */
.text-multiline-ellipsis{
  display: block;
  width: 100%;
  line-height: 1.5em; /* 줄 간격 설정 */
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  /* max-height 꼭 설정하기! */
  /* 예 )  1.5em * n(줄 수) */
}

/* 한줄 생략 */
.text-multiline-ellipsis__1 {
  display: block; /* Flex 기반 레이아웃 */
  -webkit-box-orient: vertical; /* 박스 방향 설정 */
  -webkit-line-clamp: 1; /* 최대 줄 수 설정 */
  overflow: hidden; /* 넘치는 텍스트 숨김 */
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  
}

/* 2줄 생략 */
.text-multiline-ellipsis__2 {
  display: block;
  -webkit-box-orient: vertical; /* 박스 방향 설정 */
  -webkit-line-clamp: 2; /* 최대 줄 수 설정 */
  overflow: hidden; /* 넘치는 텍스트 숨김 */
  width: 100%;
}

.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.pagination a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--color-gray02);
  margin: 0 4px;
}

.pagination .page.active{
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination .first{
  background: url('/img/first__btn.svg');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.pagination .prev{
  background: url('/img/prev__btn.svg');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.pagination .next{
  background: url('/img/prev__btn.svg');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: scaleX(-1); /* 좌우 반전 */
}

.pagination .last{
  background: url('/img/first__btn.svg');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: scaleX(-1); /* 좌우 반전 */
}

.status-active{
  font-size: 14px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 5px;
  padding: 8px 14px;
  font-weight: 500;
}





.notice-select,
.age-select,
.visit-select {
  position: relative; 
  width: auto; 
  display: inline-flex; 
  align-items: center
}

.notice-select select {
  position: relative; 
  display: inline-block; 
  padding: 10px 20px; 
  background:#fff; 
  border-radius: 20px; 
  border: 1.5px solid var(--color-primary); 
  color: var(--color-black2);
  background: url('/img/drop_down_btn.svg');
  background-repeat: no-repeat;  
  background-position: right 12px top 8px; /* 가로: 오른쪽에서 10px, 세로: 중앙 */ 
  font-size: 16px; 
  font-weight: normal; 
  cursor: pointer; 
  line-height: 18px;
  width:150px; 
}

.age-select select,
.visit-select select{
  position: relative; 
  display: inline-block; 
  padding: 10px 20px; 
  background:#fff; 
  border-radius: 5px; 
  border: 1px solid var(--color-gray08); 
  color: var(--color-black2);
  background: url('/img/drop_down_btn.svg');
  background-repeat: no-repeat;  
  background-position: right 12px top 8px; /* 가로: 오른쪽에서 10px, 세로: 중앙 */ 
  font-size: 16px; 
  font-weight: normal; 
  cursor: pointer; 
  line-height: 18px;
  
}

.age-select select{
  width: 250px; 
}

.visit-select select{
  width: 150px; 
}

.age-select:nth-child(2){
  margin-left: 10px;
}

.search {
  position: relative; 
  display: inline-flex; 
  gap: 15px; 
  align-items: center;
}

/* btn */
.button{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom:10px;
  padding-left: 16px;
  padding-right: 16px;
  cursor: pointer;
}

.prev.button{
  border: solid var(--color-primary) 1.5px;
  min-width: 80px;
}

.document-download .btn-block,
.recruitment-detail .btn-block,
.cart .btn-block,
.trialmanager .btn-block{
  display: flex;
  margin-top: 50px;
  justify-content: space-between;
}


.document-download .download-btn{
  border: solid var(--color-primary) 1.5px;
  padding-left: 36px;
  margin-left: auto;
}

.document-download .download-btn::before{
  position: absolute;
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: url('/img/download__btn.svg');
}

.list-btn{
  position: relative;
  border: solid var(--color-primary) 1.5px;
  padding-left: 36px;
  align-self: center;
}

.list-btn::before{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  content: '';
  display: block;
  background: url('/img/list__btn.svg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 18px;
  height: 18px;
}

.black.button{
  border: solid #FFFF 1px;
  background-color: var(--color-black);
  color: var(--color-white);
}

.apply.button,
.but.button{
  padding-left: 42px;
  position: relative;
}

.apply.button::before{
  display: block;
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: url('/img/apply__btn.svg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
}

.but.button::before{
  display: block;
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: url('/img/buy__btn.svg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
}

.but.button{
  border: solid var(--color-primary) 1.5px;
}

.next.button{
  display: block;
  text-align: center;
  width: 80px;
  border: solid var(--color-primary) 1.5px;
  margin-left: auto;
  margin-top: 20px;
}

.trial_download.button {
  color: var(--color-black2);
  border: solid var(--color-primary) 1.5px;
}
.trial_add.button {
  background-color: var(--color-black2);
  color: var(--color-white);
  margin-left: 20px;
}

.trialmanager .btn-block{
  justify-content: flex-end;
}

.reset-button{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: url(/img/reset__btn.svg);
  background-size: 100%;
  background-position: center;
  cursor: pointer;
}

/* list-layout */
.list-header{
  background-color: var(--color-primary);
  border-radius: 5px;
  display: flex;
  padding: 14px 0;
  color: var(--color-white);
  font-size: 16px;
}

.list-body li,
.admin .list-body li{
  display: flex;
  padding: 16px 0;
  text-align: center;
  width: 100%;
}

.list-body li{
  display: flex;
  border-bottom: solid var(--color-gray05) 1.5px;
  align-items: center;
}


/* 서브페이지 */


/* 모집공고 상세 */

.content-detail-title{
  font-size: 22px;
  color: var(--color-black2);
  font-weight: 600;
  margin-top: 20px;
}
.content-detail-header{
  border-bottom: solid var(--color-gray05) 2px;
  margin-bottom: 50px;
}

.content-detail-header .d_day{
  display: block;
  margin-top: 18px;
  padding-bottom: 18px;
  font-size: 16px;
  color: var(--color-gray02);
  
}

.content-detail-body-wrap h2{
  font-size: 20px;
  color: var(--color-gray01);
  margin: 0;
  margin-top: 40px;
  margin-bottom: 30px;
}

.content-detail-body .row:nth-child(1){
  border-top: solid var(--color-gray05) 1px;
}

.content-detail-body .row{
  display: flex;
  border-bottom: solid var(--color-gray05) 1px;
}

.content-detail-body .row .title{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  
  padding: 18px 0;
  box-sizing: border-box;
  min-width: 240px;
  font-size: 16px;
  font-weight: 500;
}

.content-detail-body .row .body{
  flex-grow: 1;
  padding: 14px 20px;
  font-size: 16px;
  color: var(--color-black2);
  line-height: 22px;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.content-detail-body .row .etc{
  padding: 14px 20px;
  display: flex;
  align-items: center;
}

/* 문서 다운로드 */


.download-section{
  margin-top: 20px;
}


.trialmanager .list-body li{
  padding: 15px 0px;
}

/* 장바구니 */

.cart .list-body li {
  display: flex;
  padding: 16px 0;
  border-bottom: solid var(--color-gray05) 1px;
}

.cart .list_layout .chk{
  display: flex;
  justify-content: center;
  min-width: 60px;
}

.cart .list_layout .title{
  flex-grow: 1;
  text-align: center;
  padding: 0 10px;
  font-size: 16px;
}

.cart .list_layout .sub{
  font-size: 16px;
  min-width: 80px;
  text-align: center;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 공지사항 */

.notice .list-header .file::before,
.admin .list-header .file::before{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: url('/img/file__header-ico.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.notice .list_layout li > a{
  display: flex;
  align-items: center;
  width: 100%;
}
.notice .list_layout .idx{
  min-width: 70px;
  text-align: center;
}

.notice .list_layout .regdate{
  min-width: 120px;
  text-align: center;
}

.notice .list_layout .title{
  flex-grow: 1;
  text-align: center;
  height: 1.5em;
}
.notice .list_layout span{
  font-size: 16px;
}


.notice .list_layout .file{
  min-width: 40px;
  position: relative;
  text-align: center;
}

.notice .list_layout .writer{
  min-width: 10%;
  text-align: center;
}

.notice .list_layout .view{
  min-width: 8%;
  text-align: center;
}

.notice .list-body .file{
  position: relative;
}

.notice .list-body .file::before{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: url('/img/file__icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.notice .search-container,
.admin .search-container{
  display: flex;
  margin-left: 14px;
}
.detail-img img,
.admin-img img{
  display: block;
  max-width: 600px;
  margin: 20px auto;
  width: 100%;
}

.list-body--mobile{
  display: none;
}
.cart .btn-block{
  display: flex;
  align-items: center;
}
.cart .btn-block label{
  font-size: 14px;
  display: flex;
  align-items: center;
}

.cart .btn-block label input{
  margin-right: 12px;
}

/* 이용가이드 */

.guide-tab-menu-wrap{
  border-top: 1px solid var(--color-white);
  background-color: var(--color-primary);
}

.guide-tab-menu {
  display: flex;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.guide-tab-menu button {
  padding: 16px 22px;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 18px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  font-size: 16px;
  color: var(--color-white);
  font-weight: 400;
}

.guide-tab-menu button.active {
  color: var(--color-black2);
  background-color: var(--color-white);
  font-weight: 400;
}

.guide .tab-content {
  display: none;
  padding: 20px;
  border-top: none;
}

.guide .tab-content.active {
  display: block;
}


.guide .tab-content{
  padding: 200px 100px;
}

/* 공지사항 상세페이지 */

.notice-detail-header{
  border-bottom: solid var(--color-gray05) 1.5px;
  padding: 20px 0;
}

.notice-detail-header .title {
  font-size: 22px;
  font-weight: 500;
}

.notice-detail-bottom{
  margin-top: 18px;
}
.notice-detail-bottom span{
  position: relative;
  font-size: 16px;
  padding-left: 30px;
  color: var(--color-gray01);
  margin-right: 10px;
}
.notice-detail-bottom .writer::before{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: url('/img/admin__ico.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.notice-detail-bottom .regdate::before{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: url('/img/date.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.notice-detail-bottom .view::before{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: url('/img/view__ico.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}

.notice-detail-body{
  padding: 20px;
}


.notice-detail-body p{
  font-size: 16px;
}


.notice .custom-select{
  width: 100px;
}


.admin .custom-select{
  width: 120px;
}

.notice .custom-select .custom-select-selected,
.admin .custom-select .custom-select-selected{
  border-radius: 20px;
  border: solid var(--color-primary) 1.5px;
  color: var(--color-black2);
}

.notice .custom-select .custom-select-selected,
.admin .custom-select .custom-select-selected{
  background-color: var(--color-white);
  padding: 10px 20px;
  
}
.notice .custom-select .custom-select-selected:after,
.admin .custom-select .custom-select-selected:after{
  right: 8px;
}


/* 자주하는 질문 */
.accordion {
  overflow: hidden;
  width: 100%;
  margin: 20px auto;
  border-bottom:  solid var(--color-gray05) 1.5px;

}

.accordion-header ,
.accordion-content{
  position: relative;
  border-top:  solid var(--color-gray05) 1.5px;
}

.accordion-header {
  padding-top: 18px;
  padding-left: 82px;
  padding-bottom: 18px;
  padding-right: 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  color: var(--color-gray01);
}

.accordion-header::before{
  display: block;
  content: '질문';
  position: absolute;
  top: 15px;
  left: 10px;
  color: var(--color-white);
  background-color: var(--color-primary);
  font-size: 14px;
  padding: 6px 16px ;
  border-radius: 5px;
}

.accordion-content::before{
  display: block;
  content: '답변';
  position: absolute;
  top: 15px;
  left: 10px;
  color: var(--color-gray01);
  border: solid var(--color-primary) 1px;
  background-color: #FFF;
  font-size: 14px;
  padding: 6px 16px ;
  border-radius: 5px;
}


.accordion-header:hover {
  background-color: #f5f5f5;
}

.accordion-content {
  display: none;
  padding-top: 18px;
  padding-left: 82px;
  padding-bottom: 18px;
  padding-right: 20px;
  background-color: #fff;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-gray01);
}

.accordion-content.active {
  display: block;
}

/* 의뢰하기 */

.request > h2{
  font-size: 24px;
  font-weight: bold;
  color: var(--color-black2);
  
}

.request-row{
  margin-top: 30px;
}

.request-row .title {
  display: flex;
  align-items: center;
}
.request-row .title > span{
  font-weight: 500;
  font-size: 20px;
}

.request-row .title b{
  color: var(--color-primary);
  padding: 0 4px;
}

.ai__btn{
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 5px;
}

.trial-sponsor-input{
  display: flex;
  margin-top: 20px;
}


.request-row > .title-input{
  margin-top: 20px;
}

.request .title-input input,
.trial-sponsor-input input{
  width: 100%;
  border: solid var(--color-gray08) 1px;
  border-radius: 5px;
  padding: 4px;
  height: 32px;
  margin: 10px 0;
}

.ai_recomand ul li{
  color: var(--color-primary);
  font-size: 14px;
  margin: 10px 0;
}


.custom-select {
  position: relative;
  display: inline-block;
  width: 300px;
}

.ml-10px{
  margin-left: 10px;
}

.age-select{
  margin-top: 20px;
}

.custom-select-selected {
  position: relative;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}

.custom-select-selected:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url('/img/drop-down__02.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.custom-select-items {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 5px;
  z-index: 100;
  width: 100%;
  display: none;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.custom-select-items div {
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.custom-select-items div:hover {
  background-color: #f0f0f0;
}


.request .tab-menu {
  display: flex;
}

.request .tab-menu button {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 16px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.request .tab-menu button.active {
  color: var(--color-primary);
  border-bottom: solid var(--color-primary) 2px;
  font-weight: bold;
}

.request .tab-content {
  display: none;
  padding: 20px 0;
  border-top: none;
}

.request .tab-content.active {
  display: block;
}
.clinical-detail-list ul{
  display: flex;
  flex-wrap: wrap;
}
.clinical-detail-list ul li{
  cursor: pointer;
  position: relative;
  border: solid var(--color-gray06) 2px;
  font-size: 16px;
  color: var(--color-black2);
  padding-top: 16px;
  padding-bottom: 16px ;
  padding-left: 14px ;
  padding-right: 38px ;
  border-radius: 5px;
  margin:12px 6px;
}

.clinical-detail-list ul li::after{
  display: none;
  position: absolute;
  width: 15px;
  height:15px;
  content: '';
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: url('/img/chk__ico.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  
}
.clinical-detail-list ul li.active{
  border: solid var(--color-primary) 2px;
  color: var(--color-primary);
}

.clinical-detail-list ul li.active::after{
  display: block;
}

.request .btn-block{
  display: flex;
  justify-content: flex-end;
}


.request .cart_view,.request .cart_add{
  position: relative;
  padding-right: 34px;
}

.request .cart_view{
  border: solid var(--color-primary) 1.5px;
}
.request .cart_add{
  margin-left: 20px;
  background-color: var(--color-black2);
  color: var(--color-white);
}

.request .cart_view::after{
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url('/img/cart__ico.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.request .cart_add::after{
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url('/img/add_cart__ico.svg');
  background-position: center;
  background-repeat: no-repeat;
}

  /* 문서양식 */

  .check-list{
    margin-top: 30px;
  }

  .check-list-header > h2{
    font-size: 24px;
    margin: 0;
  }
  
  .check-list-header small{
    display: block;
    margin-top: 10px;
    color: var(--color-gray07);
    font-size: 16px;
  }

  .check-list ul{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .check-list ul li .title{
    font-size: 16px;
    font-weight: 500;
  }

  .check-list ul li .desc{
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #808080;
    letter-spacing: -0.05rem;
  }

  .check-list ul li{
    cursor: pointer;
    box-sizing: border-box;
    width: calc((100% / 4) - 16px);
    padding: 20px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: solid #EAEAEA 2px;
    /* 블럭처리 방지 */
    user-select: none; /* 사용자가 텍스트를 선택하지 못하도록 설정 */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE/Edge */
    -moz-user-select: none; /* Firefox */
  }
  .check-listItem-bottom{
    margin-left: 20px;
  }

  .check-list ul li.active{
    border: solid var(--color-primary) 2px;
    
  }

  .check-list ul li.active .title,
  .check-list ul li.active .desc
  {
    color: var(--color-primary);
  }

  .check-list ul li span{
    display: block;
  }

  .check-list .icon{
    border-radius: 10px;
    background-color: rgba(5,190,192,.1);
  }

  .check-list .icon{
    width: 56px;
    height: 56px;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .check-list li:nth-child(4) .icon{
    background-size: 16px;
  }

  .check-list li:nth-child(6) .icon{
    background-size: 14px;
  }

  .check-list li:nth-child(10) .icon{
    background-size: 16px;
  }

  /* 문서양식 상세 */
  /* table - 세로형 */

  .content-detail-body table {
    border-collapse: collapse;
    table-layout: fixed;
    max-width:1320px;
    width: 100%;
    border-top: solid var(--color-gray05) 1px;
  }

  .content-detail-body table tr > * {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black2);
  }

  .content-detail-body tr{
    border-bottom: solid var(--color-gray05) 1px;
  }
  
  .content-detail-body table tr > th {
    padding: 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
  }
  
  .content-detail-body table tr > td {
    padding: 20px;
  }

  .content-detail-body input{
    padding: 6px 10px;
    margin: -20px 0;
  }
  
 /* table - 가로형 */

  .vertical-table table {
    border-collapse: collapse;
    table-layout: fixed;
    max-width: 1320px;
    width: 100%;
    position: relative;
  }

  .vertical-table table::before{
    content: '';
    position: absolute;
    display: block;
    top:0;
    left:0;
    width: 100%;
    height: 45px;
    border-radius: 5px;
    background-color: var(--color-primary);
    z-index: -1;
  }

  .vertical-table tbody tr{
    border-bottom: solid var(--color-gray05) 1px;
  }

  .vertical-table table tr > *{
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black2);
  }

  .vertical-table table tr > th {
    padding: 14px 10px;
    font-weight: bold;
    color: var(--color-white);
  }

  .vertical-table table tr > td {
    text-align: center;
    padding: 10px;
  }

  .vertical-table table tr > td > span{
    height: 1.5em;
  }

  .vertical-table table .file > img{
    display: block;
  }

/* @media (max-width: 500px) {
  table thead {
    display: none;
  }

  table tbody,
  table tr,
  table th,
  table td {
    display: block;
  }

  table tbody {
    display: block;
  }

  table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
} */

  /* 임상시험관리 */

  .trialmanager .manager-btn{
    font-size: 16px;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 4px 17px;
    border-radius: 5px;
    font-weight: 400;
  }

  .trialmanager-date-input input,
  .content-detail-body input{
    border: 1px solid var(--color-gray03);
    border-radius: 5px;
  }

  .trialmanager-tab-menu-wrap{
    background-color: var(--color-primary);
    border-top: solid var(--color-white) 1px;
  }
  
  .trialmanager-tab-menu {
    display: flex;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
  }
  
  .trialmanager-tab-menu button {
    padding: 16px 22px;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 18px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    font-size: 16px;
    color: var(--color-white);
    font-weight: 400;
  }
  
  .trialmanager-tab-menu button.active {
    color: var(--color-black2);
    background-color: var(--color-white);
    font-weight: 400;
  }
  
  .trialmanager .tab-content {

    /* 나중에 지울꺼 */
    display: none;
    border-top: none;
  }
  
  .trialmanager .tab-content.active {
    display: block;
  }
  
  .trialmanager .list_layout .idx{
    display: flex;
    justify-content: center;
    min-width: 60px;
  }
  
  .trialmanager .list_layout .title{
    flex-grow: 1;
    text-align: center;
    padding: 0 10px;
    font-size: 16px;
  }
  .trialmanager .list_layout .idx{
    font-size: 16px;
  }
  
  .trialmanager .list_layout .manager{
    min-width: 80px;
    text-align: center;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .trialmanager .list-body .manager a{
    display: block;
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 14px;
  }
  .manager a{
    color: var(--color-white)
  }
  /* 임상시험관리 수정 */

  .trialmanager-edit-mobile {
    display: none;
  }

  .trialmanager-edit .list_layout .entry-id{
    display: flex;
    justify-content: center;
    min-width: 160px;
    align-items: center;
  }
  
  .trialmanager-edit .list_layout .initials{
    min-width: 60px;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .trialmanager-edit .list_layout .ver{
    flex-grow: 1;
    text-align: center;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .trialmanager-edit .list_layout .ver .chk{
    border: solid var(--color-gray03) 1px;
    position: relative;
    padding: 16px 26px;
    border-radius: 5px;
    cursor: pointer;
  } 

  .trialmanager-edit .list_layout .ver .chk::before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: block;
    content: 'X';
    color: var(--color-primary);
  } 

  .trialmanager-edit .list_layout .ver .chk.active{
    background-color: var(--color-primary);
    border: solid var(--color-primary) 1px;
  }

  .trialmanager-edit .list_layout .ver .chk.active::before{
    content: 'O';
    color: var(--color-white);
  }


  /* 임상시험관리 동의 */
  .trialmanager-agree-content{
    display: flex;
  }
  .trialmanager-agree-header{
    display: flex;
    justify-content: space-between;
    border-bottom: solid var(--color-primary) 1.5px;
  }

  .trialmanager-agree-header .initials{
    font-size: 18px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding: 14px 36px;
    font-weight: 600;
  }

  .trialmanager-agree-header .entry-id{
    color: var(--color-primary);
    font-size: 18px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding: 14px 36px;
    border-top: solid var(--color-primary) 1.5px;
    border-left:solid var(--color-primary) 1.5px;
    border-right:solid var(--color-primary) 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .trialmanager-agree-left-row > span{
    display: block;
    padding-bottom: 15px;
  }

  .trialmanager-agree-left-row{
    padding: 20px 14px;
  }

  .agree-tab-menu{
    font-size: 14px;
    display: flex;
    flex-direction: column;
  }

  .visit-date{
    color: var(--color-primary);
    font-weight: bold;
  }
  .agree-tab-menu .tab-btn{
    position: relative;
    background-color: var(--color-white);
    color: var(--color-black2);
    font-size: 14px;
    cursor: pointer;
    padding-top: 10px;
    padding-left:10px ;
    padding-right:38px ;
    padding-bottom: 10px;
    border-radius: 5px;
    border: solid var(--color-gray06) 1.5px;
    margin-top: 10px;
  }

  .agree-tab-menu .tab-btn::before{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    background: url('/img/drop_down_btn.svg');
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(-90deg);
    
  }

  .agree-tab-menu .tab-btn.active{
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 14px;
  }

  .trialmanager-agree-right{
    margin-left: 20px;
    flex-grow: 1;
  }

  .trialmanager-agree-chk{
    display: flex;
    align-items: center;
  }

  .ml-20px{
    margin-left: 20px;
  }

  .p_10px_20px{
    padding: 20px 20px;
  }

  #agree-date{
    height: 24px;
  }

  .agree-tab-contents .tab-content > span{
    font-size: 20px;
    font-weight: bold;
    display: block;
    border-bottom: solid var(--color-primary) 1.5px;
  }

  .trialmanager-agree-right-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid var(--color-gray05) 1px;
    font-size: 14px;
  }

  .trialmanager-agree-chk label{
    margin-left: 6px;
  }

  .trialmanager-agree-left-row-wrap > .trialmanager-agree-left-row > span:nth-child(1){
    font-size: 16px;
    font-weight: bold;
    color:var(--color-black2)
  }
  .trialmanager-agree-left-row-wrap > .trialmanager-agree-left-row > span:nth-child(2){
    font-size: 16px;
  }

  /* 체크박스 스타일링링 */
  /* 기본 체크박스 스타일 */
  input[type="checkbox"] {
    appearance: none; /* 기본 브라우저 스타일 제거 */
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-gray02); /* 테두리 1.5px */
    border-radius: 4px; /* 모서리를 약간 둥글게 */
    background-color: white; /* 기본 배경색 */
    cursor: pointer;
    transition: all 0.2s ease;
  }

  /* 체크 상태 스타일 */
  input[type="checkbox"]:checked {
    border-color: var(--color-primary); /* 블루 테두리 */
    background-color: var(--color-primary); /* 블루 배경색 */
  }

  /* 라디오버튼 스타일링 */
  input[type="radio"] {
    appearance: none; 
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-gray02); 
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 5px;
  }

  input[type="radio"]:checked {
    border-color: var(--color-primary); 
    background-color: var(--color-primary);
  }

  .notice-detail-btn-wrap{
    display: flex;
    width: 100%;
  }

  .notice-detail-btn-wrap .list-btn{
    margin-left: auto;
  }

  .notice-detail .list.button{
    display: inline-block;
    margin-left: auto;
  }




/* adm 관리자 페이지 */

/* custom add 25-01-24 */

header {position: relative; width: 100%; display: block;}

.adm-header {position: relative; margin: 0 auto; max-width: 1320px; display: flex; padding:20px 0 ; border-bottom: 4px solid var(--color-primary);}

.adm-header > a {position: relative; display: block;}
.adm-header h1 {position: relative; font-size: 22px; color: var(--color-black2);}
.adm-header h1 img {position: relative; width: auto; max-width: 100%; height: auto; margin-right: 20px; height: 20px; margin-top: -5px;}

.adm-menu {position: relative; width: 100%; max-width: 1320px; margin: 0 auto; display: flex;}
.adm-menu li {position: relative; width: auto; height: auto;}
.adm-menu li a {position: relative; display: inline-block; font-size: 14px; padding: 15px 20px; font-weight: 400; color: var(--color-black2);}

.adm-menu li a.active{border-bottom: 2px solid var(--color-primary);}
.adm-menu li a:hover {
  color: var(--color-primary);
}


.adm-section {position: relative; width: 100%; display: block; height: auto;}

.adm-section > .container-wrap {position: relative; width: 100%; margin: 0 auto; padding: 0 20px; max-width: 1320px;}

.cont-top {position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 50px 0;}
.cont-top h2 {position: relative; width: auto; font-size: 20px; font-weight: 700; color: var(--color-black2);}

.adm-search {position: relative; width: auto; display: inline-flex; align-items: center;}
.adm-search select {position: relative; display: inline-block; padding: 10px 20px; background:#fff; border-radius: 20px; border: 1.5px solid var(--color-primary); color: var(--color-black2);background: url('/img/drop_down_btn.svg');background-repeat: no-repeat;  background-position: right 12px top 8px; /* 가로: 오른쪽에서 10px, 세로: 중앙 */ font-size: 16px; font-weight: normal; cursor: pointer; line-height: 18px;width:150px; 
}

.adm-search {position: relative; display: inline-flex; gap: 15px; align-items: center;}
.search-input {position: relative; padding: 10px 20px 10px 50px; background-color: #fff; border: 1px solid var(--color-primary); border-radius: 20px; font-size: 16px; font-weight: normal; line-height: 18px; width: auto; min-width: 240px;}


.search-wrap {position: relative; width: auto; display: inline-block;}

.container-admin {position: relative; display: block; width: 100%; height: auto;;}

.table-design {position: relative; width: 100%; display: block; height: auto;}
.table-design table { position: relative;
  width: 100%; border-collapse: collapse; word-break: break-all;
  table-layout: fixed;
}
.table-design thead {
  position: relative;
}

.table-design thead::after {
  position: absolute; left: 0; width: 100%; height: 100%; top: 0; content: "";
  background-color: var(--color-primary);
  z-index: -1; border-radius: 5px;
}

.table-design thead th {
  font-size: 16px; text-align: center; font-weight: normal; color: #fff; padding: 15px 10px; font-weight: 700;
}

.table-design tbody tr {
  border-bottom: 1px solid #d9d9d9;
  transition: 0.2s;
}

.table-design tbody tr:hover {
  background-color: #f5f5f5;
}

.table-design tbody td {
  font-size: 16px;
  font-weight: 400;
  padding: 14px 8px;
  text-align: center;
}

.table-design a:hover {text-decoration: underline;}

.tb-width-5 { width: 5%; }
.tb-width-10 { width: 10%; }
.tb-width-15 { width: 15%; }
.tb-width-20 { width: 20%; }
.tb-width-25 { width: 25%; }
.tb-width-30 { width: 30%; }
.tb-width-35 { width: 35%; }
.tb-width-40 { width: 40%; }
.tb-width-45 { width: 45%; }
.tb-width-50 { width: 50%; }
.tb-width-55 { width: 55%; }
.tb-width-60 { width: 60%; }
.tb-width-65 { width: 65%; }
.tb-width-70 { width: 70%; }
.tb-width-75 { width: 75%; }
.tb-width-80 { width: 80%; }
.tb-width-85 { width: 85%; }
.tb-width-90 { width: 90%; }
.tb-width-95 { width: 95%; }
.tb-width-100 { width: 100%; }


.adm-section .input-full{
  width: 80%;
}

.adm-section .input-l{
  width: 500px 
}

.adm-section .input-m{
  max-width: 120px;
}

.adm-section .input-sm{
  max-width:60px;
}


.table-design-vertical {position: relative; width: 100%; display: block;}

.table-design-vertical table {position: relative; width: 100%; border-collapse: collapse; word-break: break-all;}

.table-design-vertical table thead {position: relative; font-size: 16px; font-weight: 700; text-align: center; display: none;}

.table-design-vertical table tbody tr {position: relative; border: 1px solid #d9d9d9; border-right: 0; border-left: 0;}

.table-design-vertical table tbody td {position: relative; padding: 20px 15px; font-size: 16px; font-weight: 400;}
.table-design-vertical table tbody tr td:first-child {background-color: var(--color-primary); color: var(--color-white); text-align: center; font-weight: 700;}

.default-input {position: relative; min-width: 250px; font-size: 16px; font-weight: 400; color: var(--color-black2); padding:8px 10px; margin: -10px 0;
border: 1px solid #aaa; border-radius: 5px;
}

textarea.default-input { min-height: 150px; min-width: 450px;}


.adm-section input[type="checkbox"],
.adm-section input[type="radio"]{
  border: 1px solid #aaa;
}

.head-util{
  display: flex;
  align-items: end;
  margin-left: auto;
  gap: 10px;
  font-size: 14px;
}

.head-util .logged-out{
  color: var(--color-primary);
}

.head-util .logged-out:hover{
  text-decoration: underline;
}

.admin-btn01{
  display: inline-block;
  background-color: var(--color-primary);
  border: solid var(--color-primary) 2px;
  border-radius: 5px;
  color: var(--color-white);
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
}

.admin-btn02{
  display: inline-block; 
  border: solid var(--color-primary) 2px;
  color: var(--color-black2);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
}

.default-label{
  display: flex;
  align-items: center;
  gap: 6px;
}

.type01-label{
  display: inline-flex;
  align-items: center;
}

.unit-servey-link-section .type01-label span{
  margin-left: 10px;
  font-size: 14px;
}

.user-popup-section .td-grade{
  display: flex;
  gap: 10px;
}

.admin-btn-wrap-type01{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 ;
}

.admin-btn-wrap-type02{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.adm-section .pagination{
  margin: 50px 0;
}

.unit-servey-section .admin-btn01,
.unit-servey-section .admin-btn02{
  margin: 0 auto;
}

/* crf 팝업 */

.crf-header > span,
.front-veiw-header > span{
  display: block;
  text-align: center;
  margin: 0 auto;
  font-size: 18px;
  font-weight: bold;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 10px 0;
}

.crf-content{
  display: flex;
  height: calc(100dvh - 200px);
  
}

.crf-content > div{
  width: 50%;
}

.crf-content-left,
.crf-content-right {
  display: flex;
  flex-direction: column;
}

.crf-content-right > div{
  flex-grow: 1;
  overflow-y: auto;
}

.crf-content-left > span,
.crf-content-right > span{
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0;
}

.crf-content-left > textarea{
  flex-grow: 1;
  padding: 10px;
}

/* 단위설문 링크 */
.unit-servey-link-section tr > td > span{
  font-size: 14px;
  line-height: 22px;
}

/* 단위설문 상세 */

.unit-servey-detail button:hover,
.clinical-trial button:hover{
  text-decoration: underline;
  cursor: pointer;
}
.unit-servey-detail .adm-search select{
  width: 280px;
}

/* 단위설문 템플릿 */
.survey-template .admin-btn01{
  margin: 0 auto;
}

.survey-template  td{
  text-align: center;
}

.survey-template select{
  width: 120px;
}

.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 설문 템플릿 팝업 */
.survey-template-popup-section .cont-top{
  display: flex;
}

.survey-template-popup-section .cont-top > div:nth-child(1){
  display: flex;
  align-items: center;
}

.survey-template-popup-section .cont-top > div:nth-child(1) span{
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

.survey-template-popup-section .admin-btn01{
  margin-left: 10px;
}

/* adm 관리자 페이지 끝 */

/* 사용자 페이지 */

/* 공통 */

.container{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding:100px 20px;
  box-sizing: border-box;
}
/* header */
.header-container{
  position: relative;
}
.header-container > div.pc-menu{
  position: relative;
}

.header-container.main > div.pc-menu{
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  z-index: 10000;
}

.header-container > div.pc-menu{
  max-width: 1320px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-gray09);
  border-radius: 20px;
  margin: 0 auto;
  padding: 0px 30px;
  box-sizing: border-box;
  height: 70px;
}

.header-container .search-wrap{
  display: none;
  position: absolute;
  top: 70px;
  transform: translateX(-50%);
}

.header-container .search-wrap.active{
  display: block;
}

div.pc-menu .menu-bar > li:hover ul{
  display: block;
} 

div.pc-menu .menu-bar > li{
  position: relative;
  height: 100%;
}

div.pc-menu .menu-bar > li ul{
  display: none;
  position: absolute;
  left: 50%;
  top: 70px;
  transform: translateX(-50%);
  width: 164px;
  padding: 0 20px;
  background-color: rgba(0, 0, 0, 0.6);
}

div.pc-menu .menu-bar > li ul li{
  padding:14px 0;
  text-align: center;
  
}
div.pc-menu .menu-bar > li ul li a{
  font-size: 14px;
}

div.pc-menu .menu-bar a{
  display: block;
  font-size: 16px;
  color: var(--color-white);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn.active .search-container{
  display: block;
}

.search-btn .search-container {
  display: none;
  position: absolute;
  top: calc(100% + 20px);
  right: -160px;
  transform: translateX(-50%);
}

.search-input{
  border: solid var(--color-primary) 1.5px;
  border-radius: 20px;
  padding: 10px 38px ;
  width: 210px;
}

.search-button{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url('/img/search__btn.svg');
  background-size: 100%;
  background-position: center;
}

.search-input-wrapper{
  display: flex;
  align-items: center;
}

.search-container .search-input:focus{
  border: solid var(--color-primary) 1.5px !important;
}

.header-container .mobile-menu ul li{
  text-align: left;
  height: auto !important;
  font-size: 16px;
}

.header-container .mobile-menu ul li > a{
  margin-bottom: 14px;
}

div.mobile-menu-header .logo img{
  display: block;
}

.mobile-menu .menu-bar a{
  font-weight: bold;
}

div.mobile-menu-header{
  position: fixed;
  top: 0;
  width: 100%;
  display: none;
  padding:  10px 20px;
  align-items: center;
  z-index: 10000;
}

.mobile-menu-header a{
  display: block;
}

.mobile-menu ul.menu-bar{
  /* display: none; */
  position: fixed;
  width: 100%;
  top: -100%;
  left: 0;
  flex-direction: column;
  z-index: 9999;
  height: auto;
  background-color: var(--color-gray09);
  padding: 20px;
  box-sizing: border-box;
  gap: 16px;
  opacity: 0; 
  transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
}

div.mobile-menu-header::after{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  z-index: 10000;
  background-color: var(--color-black2);
  height: 60px;
  top: 0;
  left: 0;
}

div.mobile-menu-header .logo,
div.mobile-menu-header .user-actions,
div.mobile-menu-header .popup-menu-btn{
  z-index: 10001;
}

.mobile-menu.active ul.menu-bar{
  display: flex;
}

.mobile-menu.active ul.menu-bar {
  top: 60px;
  opacity: 1;
}

.mobile-menu ul li > a{
  margin-bottom: 16px;
  color: var(--color-white);
}

.mobile-menu ul.menu-bar ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  
}
.mobile-menu.active ul.menu-bar a{
  color: var(--color-white);
}

.menu-bar{
  display: flex;
  height: 100%;
  gap: 20px;
}

.mobile-menu{
  display: flex;
}

.user-actions ul{
  display: flex;
  align-items: center;
  gap: 18px;
}

.user-actions a{
  display: block;
  width: 40px;
  height: 40px;
}

.login-btn a::before{
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: url('/img/login_ico.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px;
}

.join-btn a::before{
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: url('/img/join__ico.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px;
}

.search-btn a{
  background-color: var(--color-gray09);
  border-radius: 50%;
  padding: 4px;
}

.search-btn a::before{
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: url('/img/search_ico.svg');
  background-repeat: no-repeat;
  background-position: center;
}

.popup-menu-btn,
.popup-menu-close-btn{
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.popup-menu-btn{
  background: url('/img/mobile__btn.svg');
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
}

.popup-menu-close-btn{
  display: none;
  z-index: 10000;
  background: url('/img/close__btn.svg');
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
}

.search-container{
  position: relative;
}

/* header 끝 */

/* main 시작 */
/* main slider */

.main-slider{
  height: 62dvh;
}

.main-slider .swiper-pagination-wrap {
  position: absolute;
  max-width: 1320px;
  width: 100%;
  left: 50%;
  bottom:60px;
  transform: translateX(-50%);
  z-index: 100;
  padding: 0 20px;
}

.main-slider .swiper-pagination-wrap .swiper-pagination {
  position: static;
  text-align: left;
}

.swiper-pagination-clickable .swiper-pagination-bullet{
  color: var(--color-white);
  width: 12px;
  height: 12px;
  opacity: 1;
  margin: 0 10px !important;
}

.swiper-pagination-clickable .swiper-pagination-bullet{
  background-color: #FFFF;
}

.swiper-pagination-bullet-active{
  position: relative;
}

.swiper-pagination-bullet-active::before{
  content: '';
  display: block;
  position: absolute;
  width: 28px;
  height: 28px;
  border: solid var(--color-white) 1px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.main-slider .main-slider{
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  background-size: 100%;
}

.main-slider .swiper {
  width: 100%;
  height: 100%;
}

.main-slider .swiper-slide{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-slider .swiper-slide__content{
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1320px;
  padding-top: 150px;
  margin: 0 auto;
}


.main-slider .swiper-slide__content > div{
  padding: 0 20px;
}

.main-slider .slider_desc{
  padding-top: 20px;
}

.main-slider .swiper-slide__content span,
.main-slider .swiper-slide__content p{
  text-align: left; 
  color: var(--color-white);
}

.swiper-button-next-wrap{
  position: absolute;
  max-width: 1320px;
  width: 100%;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  padding: 0 20px;
  z-index: 10000;
  height: 80px;
}

.main-slider .swiper-button-next{
  transform: rotate(90deg);
  color: var(--color-white);
}

.main-slider .swiper-button-prev{
  display: none;
}

.main-slider .swiper-button-next:after{
  position: absolute;
  background: url('/img/slider__next__btn.svg');
  background-repeat: no-repeat;
  background-position: center;
  content: '';
  display: block;
  width: 30px;
  height: 40px;
  background-size: 100%;
  transform: rotate(-90deg);

}



.main-slider .swiper-pagination-clickable .swiper-pagination-bullet{
  background-color: #FFFF;
  padding: 2px;
}

.main-slider .slider-text .slider-title{
  font-size: 36px;
  line-height: 48px;
  font-weight: 600;
}

.main-slider .slider-text .slider-desc{
  display: block;
  font-size: 18px;
  margin-top: 20px;
  font-weight: 200;
  line-height: 24px;
}


/* main 끝 */

/*공통끝*/

/* main 모집공고 */
.recruiment-image-link{
  display: flex;
  flex-direction: column;
}
.recruiment-image{
  position: relative;
  width: 80%;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
  background-size: cover;
  background-position: center;
  background-image: url('/img/menu__02__bg.jpg');
  overflow: hidden;
  aspect-ratio: 5/2;
}

.recruiment-image-wrap{
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
  color: var(--color-white);
  z-index: 10000;
}

.recruiment-image-wrap > small{
  font-size: 14px;
  font-weight: 300;
}

.recruiment-image-wrap > span{
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
  
}

.recruiment-image-wrap > .link__ico{
  margin-top: 20px;
  margin-left: 0px;
}

.recruiment-image::after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray09);
}

.latest-recruitment-list{
  width: 80%;
  height: 290px;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
  overflow: hidden;
  margin-left: auto;  
  margin-top: -130px;
}

.latest-recruitment-list > ul {
  display: flex;
  height: 100%;
}

.latest-recruitment-item{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  height: 100%;
}


.latest-recruitment-item > a{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.latest-recruitment-item__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recruitment-status__active{
  display: block;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 14px;
}

.latest-recruitment-hosplital{
  font-size: 14px;
  font-weight: bold;
}

.latest-recruitment-item__btn{
  position: absolute;
  left: 30px;
  bottom: 30px;
  margin: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* 트랜지션 설정 */
}

.latest-recruitment-item__btn > button{
  position: relative;
  display: block;
  font-size: 16px;
  color: var(--color-white);
  padding-right: 40px;
}
.latest-recruitment-item__btn > button::after{
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 30px;
  height: 30px;
  background: url('/img/link__btn.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-white);
}

.latest-recruitment-item__body{
  position: relative;
  padding-top: 70px;
  transition: padding-top 0.3s ease-in-out;
}

.latest-recruitment-item:hover .latest-recruitment-item__body{
  padding-top: 30px;
}

.latest-recruitment-item:hover .latest-recruitment-item__btn{
  visibility: visible;
  opacity: 1;
}

.latest-recruitment-item__body > span:nth-child(1),
.latest-recruitment-item__body > p{
  font-size: 14px;
  font-weight: 200;
  color: var(--color-white);
}

.latest-recruitment-item__body > span:nth-child(2){
  display: block;
  margin-top: 10px;
  color: var(--color-white);
  font-size: 22px;
  font-weight: bold;
}

.latest-recruitment-item__body > p{
  margin-top: 16px;
}

/*  main 모집공고 post 01 */
.latest-recruitment-item.post-01{
  background-color: var(--color-primary);
}

.latest-recruitment-item.post-01 .recruitment-status__active{
  color: var(--color-primary);
  background-color: var(--color-white);
  border: 1.5px var(--color-white) solid;
}

.latest-recruitment-item.post-01 .latest-recruitment__hosplital{ 
  color: var(--color-white);
}
.latest-recruitment-item.post-01 > a > .latest-recruitment-item__body{
  background-color: var(--color-primary);
}

/*  main 모집공고 post 02 */
.latest-recruitment-item.post-02{
  background-color: var(--color-white);
}

.latest-recruitment-item.post-02 .recruitment-status__active{
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 1.5px var(--color-primary) solid;
}

.latest-recruitment-item.post-02 .latest-recruitment__hosplital{ 
  color: var(--color-black2);
}
.latest-recruitment-item.post-02 > a > .latest-recruitment-item__body{
  background-color: var(--color-white);
  
}
.latest-recruitment-item.post-02 > a > .latest-recruitment-item__body span,
.latest-recruitment-item.post-02 > a > .latest-recruitment-item__body p{
  color: var(--color-black2);
}

.latest-recruitment-item.post-02 > a >
.latest-recruitment-item__btn > button{
  color: var(--color-primary);
}

.latest-recruitment-item.post-02 > a >
.latest-recruitment-item__btn > button::after{
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
}

/*  main 모집공고 post 03 */

.latest-recruitment-item.post-03{
  background-color: var(--color-black2);
}

.latest-recruitment-item.post-03 .recruitment-status__active{
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 1.5px var(--color-primary) solid;
}

.latest-recruitment-item.post-03 .latest-recruitment__hosplital{ 
  color: var(--color-white);
}
.latest-recruitment-item.post-03 > a > .latest-recruitment-item__body{
  background-color: var(--color-black2);
  
}
.latest-recruitment-item.post-03 > a > .latest-recruitment-item__body span,
.latest-recruitment-item.post-03 > a > .latest-recruitment-item__body p{
  color: var(--color-white);
}

.latest-recruitment-item.post-03 > a >
.latest-recruitment-item__btn > button{
  color: var(--color-white);
}

.latest-recruitment-item.post-02 > a >
.latest-recruitment-item__btn > button::after{
  border: 1px solid var(--color-white);;
}


/* main 의뢰하기 */

.request-image-link{
  position: relative;
  width: 100%;
  height: 210px;
  margin: auto;
  background: url('/img/menu__03__bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.request-image-link::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray09);
}

.request-image-link a{
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.request-image-link_content{
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.request-image-link_content small,
.request-image-link_content span{
  color: var(--color-white);
  text-align: center;
}

.request-image-link_content small{
  font-size: 16px;
}

.request-image-link_content span:nth-child(2){
  display: block;
  font-size: 24px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 30px;
}

.request-link-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0 auto;
  padding: 12px 14px;
  border: solid var(--color-white) 1px;
  border-radius: 10px;
  font-size: 14px;
  transition: background-color 0.3s ease-in-out;
}
.request-link-btn:hover{
  background-color: var(--color-gray09);
}

/* main 임상시험 */
.document-image-link{
  display: flex;
  justify-content: space-between;
}

.document-image{
  position: relative;
  aspect-ratio: 10/3.5;
  width: 70%;
  background-image: url('/img/menu__01__bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-top-right-radius: 30px; 
  border-bottom-left-radius: 30px; 
  overflow: hidden;
}

.document-image::after{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--color-gray08);
}

.document-link{
  width: 40%;
  /* height: 200px; */
  align-self: center;
  z-index: 1000;
  margin-right: -100px;
  background-color: var(--color-primary);
  padding: 30px;
  color: var(--color-white);
  border-top-right-radius: 20px; 
  border-bottom-left-radius: 20px; 
}

.document-link > small{
  display : block;
  font-size: 14px;

}
.document-link > span{
  display : block;
  font-size: 24px;
  margin-top: 10px;
  font-weight: bold;
}
.document-link > p{
  display : block;
  font-size: 14px;
  line-height: 18px;
  margin-top: 10px;
  font-weight: 200;
  
}

.document-link__btn-wrap{
  display: flex;
}

.document-link__btn{
  margin-left: auto;
}

.document-link__btn{
  display: inline-flex;
  align-items: center;
  margin-top: 40px;
}

.link__ico{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  width: 40px;
  height: 40px;
  margin-left: 10px;
  z-index: 100;
}

.document-link__btn > span{
  font-size: 16px;
}

.link__ico > img{
  width: 10px;
}

/* main 공지사항 */

.latest-notice{
  display: flex;
  height: 280px;
}

.latest-notice__text{
  position: relative;
  background-image:url('/img/menu__05__bg.jpg');
  background-position: center;
  background-size: cover;
  width: 40%;
  border-radius: 10px;
  padding: 30px;
  box-sizing: border-box;
  overflow: hidden;
}

.latest-notice__text::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-gray08);
}

.latest-notice__text > small,
.latest-notice__text > span,
.latest-notice__text > p
{
  position: relative;
  display: block;
  color: var(--color-white);
  z-index: 100;
}
.latest-notice__text > small{
  margin-top: 20px;
  font-size: 14px;
}

.latest-notice__text > span{
  margin-top: 10px;
  font-size: 24px;
  font-weight: bold;
}

.latest-notice__text > p{
  margin-top: 20px;
  font-size: 14px;
  font-weight: 200;
}

.latest-notice .link__ico{
  margin-top: 20px;
  margin-left: 0;
}
.latest-notice__list{
  margin-left: 20px;
  width: 60%;
  border-top: 3px solid var(--color-primary);
}

.latest-notice__list > ul{
  display: flex;
  height: 100%;
  flex-direction: column;
}

.latest-notice__list > ul > li{
  flex-grow: 1;
  flex-basis: 0;
  border-radius: 10px;
  transition: background-color 0.3s ease-in-out; /* 부드러운 색상 변화 */
  
}

.latest-notice__list > ul > li:hover{
  background-color: var(--color-primary);
}

.latest-notice__list > ul > li > a > .latest-notice__item > .latest-notice__item-date > span,
.latest-notice__list > ul > li > a > .latest-notice__item > .latest-notice__item-content > span{
  transition: color 0.3s ease-in-out; /* 부드러운 색상 변화 */
}


.latest-notice__list > ul > li:hover > a > .latest-notice__item > .latest-notice__item-date > span,
.latest-notice__list > ul > li:hover > a > .latest-notice__item > .latest-notice__item-content > span{
  color: var(--color-white);
}

.latest-notice__list > ul > li > a{
  display: block;
}
.latest-notice__item{
  display: flex;
}

.latest-notice__item-date,
.latest-notice__item-content{
  padding: 20px;
}
.latest-notice__item-date > span:nth-child(1){
  display: block;
  font-size: 20px;
  font-weight: bold;  
  text-align: center;
  color: var(--color-primary);
}

.latest-notice__item-date > span:nth-child(2){
  display: block;
  font-size: 14px;
  font-weight: 600;  
  color: var(--color-gray05);
  padding-top: 6px;
}

.latest-notice__item-content{
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0; /* 유연한 자식 요소를 줄어들게 허용 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.latest-notice__item-content > span:nth-child(1){
  display: block;
  font-size: 16px;
  font-weight: bold;  
  color: var(--color-black2);
}

.latest-notice__item-content > span:nth-child(2){
  font-size: 14px;
  margin-top: 6px;
  color: var(--color-black2);
}


.latest-notice__item-content > div{
  display: block;
  font-size: 14px;
  font-weight: 500;  
  color: var(--color-gray03);
  padding-top: 6px;
}

/* main 자주하는 질문 */

.qna-link{
  width: 100%;
  height: 740px;
  background-size: cover;
}

.qna-slider{
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  height: 100%;
  box-sizing: border-box;
}

.qna-slider .mySwiper{
  position: relative;
  max-width: 86%;
  width: 100%;
  height: auto;
}

.qna-slider .swiper-slide{
  height: 100%;
  box-sizing: border-box;
  background-color: rgba(255,255,255,.8);
  border-radius: 10px;
  overflow: hidden;
  color: var(--color-black2);
}

.qna-slider-header{
  display: flex;
  box-sizing: border-box;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  color: var(--color-white);
  padding: 40px 30px;
  justify-content: space-between;
}

.qna-slider-engTitle{
  display: block;
  font-size: 14px;
}
.qna-slider-title{
  font-size: 24px;
  display: block;
  font-weight: bold;
}

.qna-slider-title{
  padding-top: 10px;
}

.qna-slider .swiper-slide{
  padding: 20px 14px;
}

.qna-ico{
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: url('/img/qna_ico.svg');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: solid var(--color-primary) 2px;
  margin-bottom: 2px;
}

.qna-title{
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0;
}
.qna-slider-content > p{
  font-size: 14px;
  height: 6em;
}

.qna-title::after{
  display: block;
  content: '';
  border-top: solid var(--color-gray03) 1.6px;
  margin-top: 10px;
}

.qna-slider-navigaion{
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

.qna-slider .swiper-button-prev::after,
.qna-slider .swiper-button-next:after{
  display: none;
}

.qna-slider .swiper-button-next, 
.qna-slider .swiper-button-prev{
  top: 30px;
  width: 30px;
  height: 30px;
  width: auto;
}

.qna-slider-navigaion{
  width: 100px;
}

.qna-slider .swiper-button-prev::before,
.qna-slider .swiper-button-next::before{
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: solid var(--color-white) 1px;
}

.qna-slider .swiper-button-prev::before{
  background: url('/img/link__btn.svg');
  background-position: center;
  background-repeat: no-repeat;
  transform: scaleX(-1);
}

.qna-slider .swiper-button-next::before{
  background: url('/img/link__btn.svg');
  background-position: center;
  background-repeat: no-repeat;
}

/* footer */

footer{
  position: absolute;
  width: 100%;
  bottom: 0px;
  height: 210px;
  box-sizing: border-box;
  left: 50%;
  transform: translateX(-50%);
}

body{
  position: relative;
}

.footer-wrap{
  margin: 0 auto;
  max-width: 1320px;
  width: 100%;
  height: 100%;
  background-color: var(--color-black2);
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-header{
  display: flex;
  justify-content: space-between;
}

.footer-header ul{
  display: flex;
}

.footer-header ul a{
  display: block;
  padding: 0 10px;
  color: var(--color-white);
  font-size: 14px;
}

.footer-info-row{
  display: flex;
  justify-content:space-between;
  padding-top: 10px;
}
.footer-bottom span{
  color: var(--color-white);
  padding: 0 10px;
}

.footer-bottom ul{
  display: flex;
  
}
.footer-bottom ul li{
  color: var(--color-white);
  position: relative;
  padding: 0 10px;
}
.footer-bottom ul li:not(:last-child)::after{
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: '';
  width: 2px;
  height: 100%;
  background-color: #FFFFFF;
}

.footer-bottom > span,
.footer-info-row ul li,
.footer-info-row ul span{
  font-size: 14px;
}


/* sub page */

/* sub page 공통 */

.sub-header-wrap{
  background-color: var(--color-primary);
  padding-top: 40px;
  padding-bottom: 50px;
}

.sub-header-wrap > h1{
  display: block;
  margin-top: 50px;
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  color: var(--color-white);
}

/* 모집공고 리스트 */

.recruitment-listItem{
  border: 1px solid var(--color-gray06);
  padding: 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out; /* 자연스러운 색상 변화 */
}

.recruitment-listItem:hover{
  background-color: var(--color-gray04);
}

.recruitment-listItem-header{
  display: flex;
  justify-content: space-between;
}

.recruitment-listItem-header .d_day{
  font-size: 14px;
  font-weight: bold;
  color: var(--color-black2);
}

.recruitment-listItem-content{
  margin-top: 20px;
}

.recruitment-list ul{
  display: flex;
  flex-wrap: wrap;
}

.recruitment-list ul li{
  width: calc(100%/4);
  padding:15px 10px ;
  box-sizing: border-box;
  
}

.recruitment-item{
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  transition: background-color 0.35s ease; /* 부드러운 전환 */
}

.recruitment-item-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recruitment-item-header .d_day{
  color: var(--color-gray02);
  font-size: 14px;
  font-weight: bold;
}

.recruitment-status{
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 14px;
  
}

.recruitment-status.status-open{
  background-color: var(--color-primary);
  color: var(--color-white);
}

.recruitment-status.status-closed{
  background-color: var(--color-gray06);
  color: var(--color-white);
}

.recruitment-item-content{
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.recruitment-title{
  font-size: 18px;
  font-weight: bold;
  color: var(--color-gray01);
  max-width: 100%;
  width: 100%;
  height: 1.5em !important; /* 4줄 × 1.5em */
}

.recruitment-body{
  margin-top: 15px;
  font-size: 14px;
  color: var(--color-gray02);
  height: 7.5em !important; 

}

.recruitment-hospital-wrap{
  margin-top: 10px;
  text-align: end;
}

.recruitment-hospital{
  display: inline;
  font-weight: bold;
  margin-left: auto;
  font-size: 14px;
  color: var(--color-gray02);
}
/* 모집공고 상세 */

#applyLayerPopup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background: #fff;
  padding: 46px 30px;
  border-radius: 10px;
  width: 400px;
  text-align: center;
  margin: 0 auto;
}

.popup-content-wrap{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.applypopup-ico{
  width: 40px;
  height: 40px;
}

.applypopup-ico{
  display: block;
  width: 48px;
  height: 48px;
  background: url('/img/chk__ico.svg');
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
  border: solid red 1px;
  border-radius: 50%;
  border:  solid var(--color-primary) 2px;
}

.popup-content .content{
  font-size: 18px;
  display: block;
  margin:  40px 0;
  font-weight: bold;
}

.popup-content .close-btn{
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 16px;
  padding: 6px 16px;
  border-radius: 5px;
  font-weight: 500;
  cursor: pointer;
}

.apply-btn-wrap{
  margin-top: 40px;
  display: flex;
}

.apply-btn{
  margin-left: auto;
  display: flex;
  gap: 14px;
}

.submit-btn{
  background-color: var(--color-white);
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 5px;
  font-weight: 500;
  cursor: pointer;
  border: solid var(--color-primary) 1.5px;
}


/* sub page 끝 */

/* 사용자 페이지 끝 */
/* 반응형 */

@media (min-width: 1421px) and (max-width: 1800px) {

  /* main slider */
  .swiper-slide__content{
    left: 12%;
    bottom: 12%;
  }

  .fz-36px{
    font-size: 28px;
  }


}

/* md */
@media (min-width: 1025px) and (max-width: 1420px) {
  /* main slider */
  .swiper-slide__content{
    left: 4%;
    bottom: 10%;
  }
  div.header-container > div.pc-menu{
    max-width: 1120px;
  }

  div.main-slider .slider-text .slider-title {
    font-size: 30px;
  }

  div.main-sliderr .slider-text .slider-desc {
    font-size: 22px;
  }

  /* main 모집공고 */


  .recruiment-image{
    width: 100%;
  }

  .latest-recruitment-list{
    margin : -120px auto 0 auto;
    width: 90%;
  }
  /* main 문서양식 */



  /* main qna */


}

/* lg */
@media (min-width: 769px) and (max-width: 1024px){
  
  /* menu */
  div.header-container > div.pc-menu{
    max-width: 780px;
  }


  /* main slider */
  .main-slider .swiper-slide__content{
    margin-top: 180px;
    margin-left: 50px;
  }

  .main-slider{
    height: 36dvh;
  }

  .header-container > div.pc-menu{
    top: 30px;
  }
  .swiper-slide__content{
    left: 12%;
    bottom: 10%;
  }

  div.main-slider .slider-text .slider-title {
    font-size: 26px;
  }

  div.main-sliderr .slider-text .slider-desc {
    font-size: 20px;
  }

  .main-slider .swiper-pagination-wrap{
    padding: 0 60px ;
  }

  /* main 모집공고 */

  .recruiment-image{
    width: 100%;
  }
  .latest-recruitment-item .latest-recruitment__hosplital {
    margin-top: 20px;
  }
  .latest-recruitment-list{
    margin : -60px auto 0 auto;
    width: 90%;
    height: auto;
  }

  .latest-recruitment-item > a > .latest-recruitment-item__body{
    padding-top: 40px;
  }


  .latest-recruitment-item:hover > a > .latest-recruitment-item__body{
    padding-top: 70px;
  }

  .latest-recruitment-item__btn{
    display: none;
  }

  .latest-recruitment-item__header{
    flex-direction: column;
    align-items: flex-start;
  }
  /* main 문서양식 */
  .document-link{
    border-top-right-radius: 0px;
  }

  /* 모집공고 상세 */
  .content-detail-body .row .title{
    min-width: 180px;
    font-size: 14px;
  }
  .content-detail-body .row .body{
    font-size: 14px;
  }

  /* 문서양식 */
  .check-list ul li{
    width: calc((100% / 3) - 16px);
  }


  .trialmanager-edit .list_layout .list-body li > span{
    display: none;
  }
  
  /* 임상시험관리 수정 */

  .trialmanager-edit .list-header{
    display: none;
  }
  .trialmanager-edit-mobile{
    display: block;
  }
  

  .trialmanager-edit-mobile{
    width: 100%;
  }

  .trialmanager-edit-mobile-row:nth-child(1){
    display: flex;
    justify-content: space-between;
  }
  .trialmanager-edit-mobile-row:nth-child(1) .title{
    display: block;
    background-color: var(--color-primary);
    font-size: 16px;
    font-weight: bold;
    color: var(--color-white);
    text-align: center;
    width: 100%;
    border-radius: 5px;
    padding: 10px 0;
    box-sizing: border-box;
  }
  
  .trialmanager-edit-mobile-row:nth-child(1) .entry-id,
  .trialmanager-edit-mobile-row:nth-child(1) .initials{
    padding: 10px 0;
  }
  .trialmanager-edit-mobile-row:nth-child(1) .trialmanager-edit-mobile-row-item{
    flex-grow: 1;
    margin: 0 10px;
  }
  .trialmanager-edit-mobile-row:nth-child(2){
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
  }
  .trialmanager-edit-mobile-row02-item-header{
    display: block;
    background-color: var(--color-primary);
    font-size: 16px;
    font-weight: bold;
    color: var(--color-white);
    text-align: center;
    border-radius: 5px;
    padding: 10px 0;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

}

/* md 모바일*/
@media (min-width: 641px) and (max-width: 768px){
  /* menu */


  div.header-container > div.pc-menu{
    display: none;
  }

  div.header-container div.mobile-menu-header{
    display: flex;
    background-color: var(--color-black2);
    justify-content: space-between ;
  }

  div.header-container nav.mobile-menu{
    margin-left: 18px;
  }

  div.mobile-menu-header .logo img{
    padding-top: 6px;
    width: 80%;
    height: 100%;
  }
  .mobile-menu-inner{
    display: flex;
    align-items: center;
  }

  /* main slider */

  .main-slider .swiper-slide__content{
    margin-top: 160px;
    margin-left: 20px;
  }

  .main-slider{
    height: 30dvh;
  }

  .header-container > div.pc-menu{
    top: 30px;
  }
  .swiper-slide__content{
    left: 6%;
    bottom: 14%;
  }

  div.main-slider .slider-text .slider-title {
    font-size: 26px;
  }

  div.main-slider .slider-text .slider-desc{
    display: none;
  }

  /* 공통 */
  .containerheader-bg{
    height: 130px;
  }

  /* main 모집공고 */


  .recruiment-image{
    width: 100%;
  }

  .latest-recruitment-list{
    margin : -40px auto 0 auto;
    width: 80%;
    height: auto;
  }

  .latest-recruitment-list ul{
    flex-direction: column;
  }

  .latest-recruitment-item:hover > a > .latest-recruitment-item__body{
    padding-top: 70px;
  }

  .latest-recruitment-item__btn{
    display: none;
  }

  
  /* main 임상시험  */
  .document-image-link .fz-24px{
    font-size: 20px;
  }
  .document-image-link .pb-60px{
    padding-bottom: 50px;
  }

  /* main 문서양식 */
  .document-link{
    border-top-right-radius: 0px;
  }
  

  /* main qna */
  .notice-image-link-text{
    margin-bottom: 30px;
  }

  /* footer */
  .footer-header ul,
  .footer-bottom ul{
    flex-wrap: wrap;
  }
  .footer-header .logo
  {
    width: 40%;
  }
  .footer-header ul li{
    padding: 10px 0;
  }

  /* 모집공고 */
  .recruitment-list ul li {
    width: calc(100% / 2);
    padding: 15px 10px;
    box-sizing: border-box;
  }

  /* 모집공고 상세 */

  .content-detail-body .row{
    flex-direction: column;
  }

  /* 문서양식 */
  .check-list ul li{
    width: calc((100% / 2) - 10px);
  }

  /* 임상시험 - 대상장 동의서 제출 여부 */
  .trialmanager-agree-right-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .trialmanager-agree-chk{
    margin-top: 10px;
  }
  .trialmanager-date-input{
    margin-left: 0;
    margin-top: 10px;
  }
  .trialmanager-agree-left-row{
    padding: 20px 10px;
  }

    
  /* 임상시험관리 수정 */
  .trialmanager-edit .list_layout .list-body li > span{
    display: none;
  }
  .trialmanager-edit .list-header{
    display: none;
  }
  .trialmanager-edit-mobile{
    display: block;
  }
  

  .trialmanager-edit-mobile{
    width: 100%;
  }

  .trialmanager-edit-mobile-row:nth-child(1){
    display: flex;
    justify-content: space-between;
  }
  .trialmanager-edit-mobile-row:nth-child(1) .title{
    display: block;
    background-color: var(--color-primary);
    font-size: 16px;
    font-weight: bold;
    color: var(--color-white);
    text-align: center;
    width: 100%;
    border-radius: 5px;
    padding: 10px 0;
    box-sizing: border-box;
  }
  
  .trialmanager-edit-mobile-row:nth-child(1) .entry-id,
  .trialmanager-edit-mobile-row:nth-child(1) .initials{
    padding: 10px 0;
  }
  .trialmanager-edit-mobile-row:nth-child(1) .trialmanager-edit-mobile-row-item{
    flex-grow: 1;
    margin: 0 10px;
  }
  .trialmanager-edit-mobile-row:nth-child(2){
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }

  .trialmanager-edit-mobile-row:nth-child(2) > div{
    width: calc(33.333% - 10px) ;
  }

  .trialmanager-edit-mobile-row02-item-header{
    display: block;
    background-color: var(--color-primary);
    font-size: 16px;
    font-weight: bold;
    color: var(--color-white);
    text-align: center;
    border-radius: 5px;
    padding: 10px 0;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

}

/* sm */
@media (min-width: 240px) and (max-width: 640px){
  
  .sub-header-wrap{
    padding-top: 60px;
  }
  /* main slider */

  .main-slider .swiper-slide__content{
    width: 100%;
    margin-top: 30px;
    padding: 0 20px;
  }

  .main-slider .swiper-pagination-wrap{
    bottom: 30px;
  }
  .slider-text .slider-title{
    font-size: 20px;
    line-height: 33px;
  }
  .slider-text .slider-desc{
    display: none;
  }
  .main-slider .swiper-slide__content > div {
    padding: 0;
  }

  div.header-container > div.pc-menu{
    display: none;
  }

  div.header-container div.mobile-menu{
    display: flex;
    background-color: var(--color-black2);
  }

  .header-container .logo img{
    padding-top: 6px;
    width: 80%;
    height: 100%;
  }

  div.header-container div.mobile-menu-header {
    display: flex;
    background-color: var(--color-black2);
    justify-content: space-between;
  }
  div.header-container div.mobile-menu-header .mobile-menu{
    margin-left: 18px;
  }
  .mobile-menu-inner{
    display: flex;
    align-items: center;
  }


  /* main slider */
  .main-slider{
    height: 300px;
  }
  .header-container > div.pc-menu{
    top: 30px;
  }

  .swiper-slide__content{
    left: 6%;
    bottom: 8%;
  }
  .swiper-button-next-wrap{
    display: none;
  }

  div.main-slider .slider-text .slider-title {
    font-size: 20px;
    line-height: 34px;
  }

  div.main-slider .slider-text .slider-desc{
    display: none;
  }

  /* main 모집공고 */

  .recruiment-image{
    width: 100%;
  }

  .recruiment-image{
    border-radius: 5px;
  }

  .recruiment-image-wrap .link__ico{
    display: none;
  }
  .recruiment-image-wrap > small{
    text-align: center;
  }
  .recruiment-image-wrap > span{
    font-size: 20px;
    text-align: center;
  }

  .latest-recruitment-list{
    margin : 20px auto 0 auto;
    width: 90%;
    height: auto;
    border-radius: 5px;
  }

  .latest-recruitment-list ul{
    flex-direction: column;
  }
  .latest-recruitment-item{
    padding: 20px;
  }
  .latest-recruitment-item > a > .latest-recruitment-item__body{
    padding-top: 30px;
  }

  .latest-recruitment-item:hover > a > .latest-recruitment-item__body{
    padding-top: 30px;
  }

  .latest-recruitment-item__btn{
    display: none;
  }

  .latest-recruitment-item__body > span:nth-child(2){
    font-size: 18px;
  }


  /* main 임상시험  */

  .document-image-link{
    flex-direction: column;
  }
  .document-link,
  .document-image{
    width: 100%;
    margin-right: 0px;
    border-radius: 0px;
  }
  .document-link{
    border-radius: 10px;
  }
  .document-image{
    display: none;
  }

  /* main 임상시험 문서양식 */
  .document-link > span{
    font-size: 20px;
  }

  /* main notice */

  .latest-notice__text > span{
    font-size: 20px;
  }
  .latest-notice{
    flex-direction: column;
  }

  .latest-notice__text{
    width: 100%;
    
  }
  .latest-notice{
    height: auto;
  }
  .latest-notice__list{
    width: 100%;
  }
  /* main qna */
  .notice-image-link-text{
    margin-bottom: 20px;
  }

  .latest-notice__list{
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* main qna */

  .qna-slider-title{
    font-size: 20px;
  }


  /* footer */
  
  .footer-wrap{
    padding: 20px;
  }
  .footer-header ul,
  .footer-bottom ul{
    flex-wrap: wrap;
  }
  .footer-header{
    flex-direction: column;
  }
  .footer-header .logo
  {
    width: 180px;
    margin: 20px 0;
  }
  .footer-header ul li{
    padding: 10px 0;
  }
  .footer-bottom span{
    padding: 0;
  }
  #footer-placeholder{
    height: 340px;
  }
  .footer-bottom ul li{
    padding: 6px 0;
  }

  .footer-bottom ul li:not(:last-child)::after{
    display: none;
  }

  .footer-info-row span{
    line-height: 26px;
  }

  /* 공통 */
  .container{
    padding: 40px 10px;
  }
  .container-wrap{
    padding-bottom: 420px;
  }
  .search-info-box{
    flex-direction: column;
    align-items: flex-start;
  }
  .search-input{
    min-width: auto;
  }
  .search-container
  {
    margin-top: 20px;
  }

  .search-container .search-input{
    width: 76%;
  }

  .containerheader-bg h1{
    padding-top: 48px;
    font-size: 28px;
  }

  .containerheader-bg{
    height: 130px;
  }

  .sub-header-wrap > h1{
    font-size: 26px;
  }

  .content-detail-title{
    font-size: 18px;
  }

  .search-input-wrapper{
    margin-top: 20px;
  }

  /* 모집공고 */
    
  .recruitment-list ul li {
    width: calc(100%);
    padding: 15px 10px;
    box-sizing: border-box;
  }

  /* 모집공고 상세 */

  .content-detail-body .row{
    flex-direction: column;
  }

  .content-detail-body .row .title{
    padding: 14px 0;
  }

  /* 문서양식 다운로드 */

  .document-download .content-detail-body .row .body{
    text-align: center;
  }



  /* 나중에 한번더보기 의뢰하기 */
  .recruitment-detail-title{
    font-size: 22px;
  }
  .recruitment-detail-body h1{
    font-size: 20px;
  }
  .recruitment-detail-body .row{
    flex-direction: column;
    margin-bottom: 20px;
  }

  .recruitment-detail-body .row .body{
    padding: 10px 15px;
    font-size: 14px;
  }

  /* 공지사항 */

  .notice .list_layout .idx{
    min-width:30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .notice .list_layout .regdate
  {
    min-width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .notice .list-body li a > .idx,
  .notice .list-body li a > .regdate,
  .notice .list-body li a > .title,
  .notice .list-body li a > .file,
  .notice .list-body li a > .writer,
  .notice .list-body li a > .view,
  .notice .list-header{
    display: none;
  }

  .notice .list_layout .list-body--mobile{
    display: flex;
    flex-grow: 1;
    gap: 14px;
  }
  .notice .list_layout .list-body--mobile .idx{
    font-size: 20px;
    font-weight: bold;
    padding: 0 16px;
    color: var(--color-primary);
  }
  .list-body--mobile-wrap{
    flex-grow: 1;
  }
  .notice .list_layout .list-body--mobile .row:nth-child(1){
    text-align: left;
  }
  .notice .list_layout .list-body--mobile .row:nth-child(2){
    display: flex;
    justify-content: end;
    margin-top: 6px;
  }
  .list-body--mobile .title{
    text-align: left !important;
  }
  .notice .list_layout .list-body--mobile .row:nth-child(2) span{
    position: relative;
    padding: 0 6px;
    font-size: 12px;
  }

  .notice .list_layout .list-body--mobile .row:nth-child(2) span:not(:last-child)::after{
    content: '';
    display: block;
    background-color: var(--color-gray06);
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .notice .list-body .file::before{
    width: 14px;
    height: 14px;
    background-size: 14px;
  }

  .notice .search-container{
    margin-top: 0;
  }

  .notice-select{
    flex-grow: .5;

  }
  .notice-select > form{
    width: 100%;
    box-sizing: border-box;
  }

  .search-container{
    flex-grow: 3;
    flex-basis: 0;
  }
  .notice-select select{
    width: 100%;
    box-sizing: border-box;
  }
  /* 공지사항 상세페이지 */
  .notice-detail-header .title{
    text-align: center;
  }
  .notice-detail-header{
   display: flex;
   flex-direction: column;
   align-items: center;
  }

  /* 의뢰하기 */
  .clinical-detail-list ul{
    gap: 10px;
  }
  .clinical-detail-list ul li{
    display: flex;
    align-items: center;
    width: calc(50% - 5px) ;
    word-break: keep-all;
    margin: 0;
  }


  /* 문서양식 */
  .check-list ul li{
    width: calc((100% / 2) - 10px);
    
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .check-listItem-bottom{
    margin: 0;
    margin-top: 14px;
  }



  /* 임상시험 - 대상장 동의서 제출 여부 */
  .trialmanager-agree-right-row{
    flex-direction: column;
    align-items: flex-start;
  }

  .trialmanager-agree-chk{
    margin-top: 10px;
  }
  
  .trialmanager-date-input{
    margin-left: 0;
    margin-top: 10px;
  }
  .trialmanager-agree-left-row{
    padding: 20px 4px;
  }
  .trialmanager-agree-header {
    flex-direction: column;
  }
  .trialmanager-agree-header .initials,
  .trialmanager-agree-header .entry-id{
    border-radius: 6px;
    text-align: center;
    margin: 10px 0;
  }

  .trialmanager-tab-menu button{
    font-size: 16px;
    text-align: center;
    padding: 20px;
  }
  .trialmanager-agree-header .entry-id{
    border-bottom: solid var(--color-primary) 1.5px;
  }

  .trialmanager-agree-content{
    flex-direction: column;
  }
  .trialmanager-agree-left-row-wrap{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    gap: 20px;
  }
  .trialmanager-agree-left-row-wrap > div{
    flex-grow: 1;
    flex-basis: 0;
  }
  .trialmanager-agree-left-row-wrap > .trialmanager-agree-left-row > span:nth-child(2){
    margin-top: 24px;
  }
  .visit-select form{
    width: 80%;
  }
  .visit-select select{
    width: 100%;
  }


  .trialmanager-agree-left-row-wrap .trialmanager-agree-left-row{
    text-align: center;
  }

  .visit-select{
    width: 100%;
  }
  .age-select select, .visit-select select{
    text-align: left;
  }

  .mt-50px{
    margin-top: 20px;
  }
  .trialmanager-agree-right{
    margin-left: 0;
  }

  /* 임상시험관리 수정 */
  .trialmanager-edit .list_layout .list-body li >
  span{
    display: none;
  }
  .trialmanager-edit .list-header{
    display: none;
  }
  .trialmanager-edit-mobile{
    display: block;
  }


  .trialmanager-edit-mobile{
    width: 100%;
  }

  .trialmanager-edit-mobile-row:nth-child(1){
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    
  }
  .trialmanager-edit-mobile-row:nth-child(1) .title{
    display: block;
    background-color: var(--color-primary);
    font-size: 16px;
    font-weight: bold;
    color: var(--color-white);
    text-align: center;
    border-radius: 5px;
    padding: 10px 0;
    box-sizing: border-box;
    flex-grow: 1;
    flex-basis: 0;
  }

  .trialmanager-edit-mobile-row:nth-child(1) .entry-id,
  .trialmanager-edit-mobile-row:nth-child(1) .initials{
    padding: 10px 0;
    flex-grow: 3;
    flex-basis: 0;
  }
  .trialmanager-edit-mobile-row:nth-child(1) .trialmanager-edit-mobile-row-item{
    display: flex;
    flex-grow: 1;
    margin: 0 10px;
    
  }

  .trialmanager-edit-mobile-row:nth-child(2){
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-top: 30px;
    padding: 0 20px;
  }

  .trialmanager-edit-mobile-row:nth-child(1) .trialmanager-edit-mobile-row-item:nth-child(2){
    margin-top: 20px;
  }
  .trialmanager-edit-mobile-row02-item-header{
    display: block;
    background-color: var(--color-primary);
    font-size: 16px;
    font-weight: bold;
    color: var(--color-white);
    text-align: center;
    border-radius: 5px;
    padding: 10px 0;
    box-sizing: border-box;
    margin-bottom: 10px;
    
  }
  .trialmanager-edit-mobile-row02-item-header{
    margin-bottom: 20px;
  }
  .trialmanager-edit-mobile-row02-item{
    min-width: calc(22.3333%);
  }

  .trialmanager-edit-mobile-row:nth-child(2) > div{
    width: calc(33.333% - 10px) ;
  }
  footer{
    height: 310px;
  }

  .popup-content{
    width: 80%;
    padding: 46px 16px;
  }

  .popup-content .content{
    font-size: 14px;
  }

  /* 테이블 수정 */

  .content-detail-body .col1{
    width: 110px;
  }
  .content-detail-body table tr > th,
  .content-detail-body table tr > td{
    padding: 14px 10px;
    
  }
  .content-detail-body table tr > *{
    font-size: 14px;
    
  }

  .vertical-table table tr > *{
    font-size: 14px;
    
  }

  .vertical-table.cart .col1{
    width: 40px;
   
  }
  .vertical-table.cart .col3{
    width: 100px;
   
  }

  /* 공지사항 반응형 */
  .notice .vertical-table .col2 ,
  .notice .vertical-table .col4 ,
  .notice .vertical-table .col5,
  .notice .vertical-table th:nth-child(2),
  .notice .vertical-table th:nth-child(4),
  .notice .vertical-table th:nth-child(5),
  .notice .vertical-table td:nth-child(2),
  .notice .vertical-table td:nth-child(4) ,
  .notice .vertical-table td:nth-child(5){
    display: none;
   
  }

  .notice .vertical-table .col1{
    width: 40px;
   
  }
  .notice .vertical-table .col2{
    width: 40px;
   
  }

  .notice .vertical-table .col6{
    width: 80px;
   
  }

  /* 임상시험관리 */

  .trialmanager .vertical-table .col1{
    width: 40px;
   
  }

  .trialmanager .vertical-table .col3{
    width: 80px;
  }
  .trialmanager .vertical-table .manager-btn{
    padding: 4px 6px;
    font-size: 14px;
  }
  .age-select:nth-child(2){
    margin-left: 0;
  }
  .age-select select,
  .age-select{
    width: 100%;
  }

  .cart input[type="checkbox"]{
    min-width: 14px;
    min-height: 14px;
    display: block;
  }
}