.volsub{
	width:100%;
	position:relative;
    display: block;
    animation-name: volani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
@keyframes volani {
	from {
		transform:translateY(100px);
		opacity:0.2;
	}
	to {
		transform:translateY(0);
		opacity:1;
	}
}
.volsub h3{
	font-size:50px;
	color:#000;
	font-weight:900;
	margin-bottom:50px;
}
.volsub h4{
	position:relative;
	font-size:24px;
	color:#000;
	font-weight:800;
	line-height:1.3em;
	padding-left:27px;
}
.volsub h4::before{
	content:"";
	display:block;
	width:16px;
	height:10px;
	border-radius:0px 0px 10px 10px;
	background:#b16b41;
	position:absolute;
	left:0;
	top:7px;
}
.volsub h4::after{
	content:"";
	display:block;
	width:16px;
	height:10px;
	border-radius:0px 0px 10px 10px;
	background:#8b2553;
	position:absolute;
	left:6px;
	top:13px;
	transform:rotate(180deg);
}
.volsub h5.subh5{
	display: inline-block;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    padding: 3px 10px;
    background: #666;
}
.volsub h6{
	position:relative;
	display:inline-block;
	font-size:18px;
	color:#fff;
	font-weight:500;
	background:#a16a61;
	padding:2px 5px;
}
.volsub p{
	font-size:17px;
	color:#000;
	font-weight:400;
	line-height:1.65em;
	letter-spacing:-0.01em;
}
.volsub .fs18{font-size:18px;}
.volsub .fs21{font-size:21px;}
.volsub .fs24{font-size:24px;}
.volsub .fw500{font-weight:500}
.volsub .fw700{font-weight:700}
.volsub .volbox{
	width:100%;
	padding:30px;
	box-sizing:border-box;
	background:#f9f9f9;
}
.volsub .volbox.bcpink{
	background:#ede8eb;
}
.volsub .volboxline{
	width:100%;
	padding:30px;
	box-sizing:border-box;
	border:20px solid #f7f7f7;
}
.volsub .volboxline.bcpink{
	border:20px solid #ede8eb;
}
.volsub .volboxline.pd5030{
	padding:50px 30px;
}
.volsub .vfbox{
	padding-left:350px;
	background:#f9f9f9 url(../img/sub/levelico.png) left 70px center no-repeat;
}
.volsub .vfbox2{
	padding:60px 30px;
	padding-left:350px;
	background:#f9f9f9 url(../img/sub/writeico.png) left 70px center no-repeat;
}
.volsub .vfbox2 span{
	padding-left:15px;
	font-size:16px;
	color:#333;
}
.volsub .graybox {
    background: #f9f9fb;
    padding: 60px 20px;
}
.volsub .graycon {
    max-width: 85%;
    margin: 0 auto;
    background: #fff;
    padding: 40px 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}
.volsub .skyboxbg {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background: #e8f1f5;
    border-radius: 20px;
}

.volsub .volfpp{
	padding-left:180px;
	background:url(../img/sub/fppicon.png) left 40px center no-repeat;
}
.volsub .volpre{
	padding-left:180px;
	background:url(../img/sub/preicon.png) left 50px center no-repeat;
}

.volsub .cenimg{
	text-align:center;
}

.volsub ul.volul li{
	position:relative;
	padding-left:12px;
	margin-bottom:3px;
}
.volsub ul.volul li:last-child{
	margin-bottom:0;
}
.volsub ul.volul li::before{
	content:"";
	display:block;
	width:7px;
	height:7px;
	border-radius:50%;
	position:absolute;
	left:0;
	top:9px;
	border:2px solid #333;
	box-sizing:border-box;
}
.volsub ol.numol > li {
    list-style: decimal;
    margin-bottom: 5px;
}
.volsub ol.numol li::marker {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* VOL TABLE */
.volsub table.vol_tb{
	width:100%;
	min-width:720px;
	font-family: 'Pretendard', 'Noto Sans KR', '맑은 고딕', sans-serif;
	border-collapse:collapse;
	border-top:2px solid #b16b41;
	text-align:center;
}
.volsub table.vol_tb tr th,
.volsub table.vol_tb tr td{
	padding:10px;
	font-size:15px;
	color:#000;
	font-weight:400;
	border:1px solid #ccc;
}
.volsub table.vol_tb tr td{
	font-size:17px;
	color:#000;
	font-weight:400;
	padding:15px;
}
.volsub table.vol_tb thead tr th{
	background:#f9f9f9;
	font-weight:500;
	color:#774f32;
	padding:7px 15px;
}
.volsub table.vol_tb tbody tr th{
	background:#f9f9f9;
	font-weight:500;
}
.volsub table.vol_tb.thfs17 thead tr th,
.volsub table.vol_tb.thfs17 tbody tr th{
	font-size:17px;
}
.volsub table.vol_tb .tl{
	text-align:left;
	padding-left:20px;
}
.volsub table.vol_tb tr td a{
	color:#ff9555;
	font-weight:500;
}
.volsub table.vol_tb tr td .tb_btn{
	display:inline-block;
	padding:5px 15px;
	border-radius:20px;
	border:1px solid #5b82b7;
	font-size:13px;
	color:#5b82b7;
	font-weight:700;
}
.volsub table.vol_tb tr td .tb_btn.state2{
	border:1px solid #b7825b;
	color:#b7825b;
}
.volsub table.vol_tb tr td .tb_btn.state3{
	border:1px solid #999;
	color:#999;
}


/* ----------------------- Sub Style */

/* ----------- 센터 소개 */
.volsub .vstit{
	position:relative;
	font-size:18px;
	color:#db834f;
	font-weight:700;
	z-index:12;
}
.volsub .vintro{
	position:relative;
	z-index:12;
	background:url(../img/sub/grtimg.png) right -50px top 40px no-repeat;
	padding-top:30px;
}
.volsub .vintro p.vitit{
	font-size:36px;
	color:#5d2d10;
	font-weight:900;
	line-height:1.4em;
}
.volsub .vintro p.vitxt{
	font-family:'Noto Serif KR', sans-serif;
	font-size:19px;
	line-height:1.8em;
	font-weight:400;
}
.volsub .vintro p.vitxt b{
	display:inline-block;
	padding-bottom:10px;
	font-size:21px;
}
.volsub .vintrovisual{
	position:relative;
	width:100%;
	height:600px;
}
.vintrovisual .vimg{
	width:100%;
	height:100%;
	background:url(../img/sub/vii.jpg) center no-repeat;
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
	z-index:11;
}
.volsub .vintrovisual::before{
	content:"";
	display:block;
	width:357px;
	height:357px;
	background:url(../img/sub/vii1.png) center no-repeat;
	position:absolute;
	left:5%;
	top:-220px;
	z-index:10;
}
.volsub .vintrovisual::after{
	content:"";
	display:block;
	width:674px;
	height:674px;
	background:url(../img/sub/vii2.png) center no-repeat;
	position:absolute;
	right:5%;
	bottom:-520px;
	z-index:10;
}

/* 봉사동아리 */
.volsub .tab-menu {
	display: flex;
	gap: 10px;
	margin-bottom: 40px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.volsub .tab-menu::-webkit-scrollbar {
	display: none;
}
.volsub .tab-menu li {
	list-style: none;
	padding: 0 30px;
	height:50px;
	border: 3px solid #f0f1f5;
	box-sizing:border-box;
	border-radius: 30px;
	background: #fff;
	cursor: pointer;
	font-size: 18px;
	font-weight:700;
	line-height:46px;
	white-space: nowrap;
	transition: all 0.2s ease;
	flex-shrink: 0;
}
.volsub .tab-menu li:hover {
	background: #f2f2f2;
}
.volsub .tab-menu li.active {
	background: linear-gradient(135deg, #ffb400 0%, #c02a7a 95%);
	padding:0 50px;
	color: #fff;
	border: 3px solid #fff;
}
.volsub .tab-content {
	display: none;
	background: #fff;
	padding: 30px;
	border: 1px solid #e5e5e5;
	line-height: 1.8;
}
.volsub .tab-content p.rtrt{
	padding-left:250px;
	background:url(../img/sub/club/rtrtlogo.jpg) left 30px top no-repeat;
}
/* 모바일 여백 조정 */
	@media (max-width: 768px) {
	.volsub .tab-content {
	  padding: 22px;
	}
}

.volsub .volorgan{
	min-height:620px;
	background:url(../img/sub/volorganization.jpg) center no-repeat;
}
/* =========================================================
   1) BASE TOKENS (딱 1번만)
========================================================= */
:root{
  /* typography / ui */
  --vclink:#111827;
  --vclmuted:#6b7280;
  --vclline:#e5e7eb;
  --vclsoft:#f8fafc;
  --vclshadow: 0 2px 5px rgba(17,24,39,.06);
  --vclshadow-strong: 0 5px 10px rgba(17,24,39,.10);
  --vclr:18px;

  /* theme colors */
  --vclpink:#bc1c55;
  --vclpink-weak: rgba(188,28,85,.10);
  --vclpink-2:#e11d74;

  --vclorange:#f97316;
  --vclorange-weak: rgba(249,115,22,.12);
  --vclorange-2:#fb923c;

  --vclblue:#2563eb;
  --vclblue-weak: rgba(37,99,235,.12);
  --vclblue-2:#0ea5e9;
}

/* =========================================================
   2) SECTION / GRID / CARD (공통 구조)
========================================================= */
.volsub .vclsection{
  background: rgba(255,255,255,.85);
  padding: 22px;
  overflow: hidden;

  /* 기본 테마(핑크) */
  --vclc1: var(--vclpink);
  --vclc2: var(--vclpink-2);
  --vclcweak: var(--vclpink-weak);
}

.volsub .vclsection .vclgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px){
  .volsub .vclsection .vclgrid{ grid-template-columns: 1fr; }
}

.volsub .vclsection .vclcard{
  position: relative;
  border: 1px solid var(--vclline);
  border-radius: var(--vclr);
  background: #fff;
  padding: 16px;
  box-shadow: var(--vclshadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}

/* hover */
.volsub .vclsection .vclcard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.06);
  box-shadow: var(--vclshadow-strong);
  border-color: color-mix(in srgb, var(--vclc1) 40%, transparent);
}

/* card top */
.volsub .vclsection .card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding-left:6px; /* 세로바 여백 */
}

/* pill */
.volsub .vclsection .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background: var(--vclcweak);
  color: var(--vclc1);
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

.volsub .vclsection h5.tit{
  margin:10px 0 6px;
  padding-left:6px;
  font-size:24px;
  letter-spacing:-.02em;
  font-weight:900;
  line-height:1.3;
  color:#333;
}

.volsub .vclsection p.ex{
  margin:0;
  padding-left:12px;
  color: #000;
  font-size:16px;
  line-height:1.55;
  word-break:keep-all;
}

.volsub .vclsection .mini-ico{
  width:36px;height:36px;
  border-radius:14px;
  background: rgba(17,24,39,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex:0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.06);
}

.volsub .vclsection .chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
  padding-left:6px;
}
.volsub .vclsection .chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--vclline);
  background:#fff;
  color: var(--vclmuted);
}

/* =========================================================
   3) SECTION THEME (섹션 단위로 색 바꾸기)
   사용: <section class="vclsection theme-orange"> ...
========================================================= */
.volsub .vclsection.theme-pink{
  --vclc1: var(--vclpink);
  --vclc2: var(--vclpink-2);
  --vclcweak: var(--vclpink-weak);
}
.volsub .vclsection.theme-orange{
  --vclc1: var(--vclorange);
  --vclc2: var(--vclorange-2);
  --vclcweak: var(--vclorange-weak);
}
.volsub .vclsection.theme-blue{
  --vclc1: var(--vclblue);
  --vclc2: var(--vclblue-2);
  --vclcweak: var(--vclblue-weak);
}

/* =========================================================
   4) CARD THEME (카드 단위로 색 바꾸기 - 옵션)
   사용: <div class="vclcard theme-blue"> ...
   ※ 섹션 테마보다 카드 테마가 우선 적용됨
========================================================= */
.volsub .vclsection .vclcard.theme-pink{
  --vclc1: var(--vclpink);
  --vclc2: var(--vclpink-2);
  --vclcweak: var(--vclpink-weak);
}
.volsub .vclsection .vclcard.theme-orange{
  --vclc1: var(--vclorange);
  --vclc2: var(--vclorange-2);
  --vclcweak: var(--vclorange-weak);
}
.volsub .vclsection .vclcard.theme-blue{
  --vclc1: var(--vclblue);
  --vclc2: var(--vclblue-2);
  --vclcweak: var(--vclblue-weak);
}

.volsub .volwork{
  --vwink:#111827;
  --vwmuted:#6b7280;
  --vwline:#f7f7f7;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.volsub .volwork > li{
  margin:0;
  padding:30px 16px;
  background:var(--bg);
  border:2px solid var(--vwline);
  border-bottom:10px solid var(--vwline);
  text-align:center;
}
.volsub .volwork > li > p{
  margin:0;
  color:var(--vwink);
  line-height:1.6;
  font-size:18px;
  word-break:keep-all;
}

/* 반응형 */
@media (max-width:1024px){
  .volsub .volwork{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width:560px){
 .volsub .volwork{ grid-template-columns: 1fr; }
 .volsub .volwork > li{ padding:12px 14px; }
 .volsub .volwork > li > p{ font-size:14px; }
}

.volsub .vol-steps{
  --vsaccent:#bc1c55;
  --vsink:#111827;
  --vsmuted:#6b7280;
  --vsline:#e5e7eb;
  --vsdot:#ccc;
  --vssoft:#f9fafb;
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.volsub .vol-steps > .vol-step{
  list-style:none;
  padding:25px 4px 25px 0;
  border-bottom:1px solid var(--vsline);
}
.volsub .vol-steps > .vol-step:first-child{
	padding-top:20px;
}
.volsub .vol-step-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:15px;
}
.volsub .vol-step-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border:1px solid var(--vsaccent);
  color:var(--vsaccent);
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  margin-top:2px;
}
.volsub .vol-step-title{
  font-size:20px;
  font-weight:700;
  color:var(--vsink);
  padding-top:7px;
}
.volsub .vol-step-title em{
  font-style:normal;
  color:var(--vsmuted);
  font-weight:700;
  font-size:14px;
  margin-left:6px;
}
.volsub .vol-step-body{
  list-style:none;
  margin:0;
  padding:0 0 0 40px; /* 뱃지 폭만큼 들여쓰기 */
  display:grid;
  gap:8px;
}
.volsub .vol-step-body > li{
  position:relative;
  margin:0;
  color:var(--vsink);
  font-size:16px;
  line-height:1.5em;
}
.volsub .vol-step-body > li::before{
  content:"";
  position:absolute;
  left:-14px;
  top:11px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--vsdot);
  transform:translateY(-50%);
}
.volsub .vol-step-body > li strong{
  font-weight:800;
}
.volsub .vol-step-body > li > span{
	color:#333;
}
.volsub .vol-step-body > li > span > em{
	color:var(--vsaccent);
}
.volsub .vol-step-body > li.is-warn{
  padding:10px 12px;
  border:1px solid #f2c7d6;
  background:#fff5f8;
  border-radius:10px;
}
.volsub .vol-step-body > li.is-warn::before{
  background:var(--vsaccent);
  top:20px;
}

.volsub .volmap{
	width:100%;
	height:480px;
	border:30px solid #f7f7f7;
	border-radius:20px;
	overflow:hidden;
	box-sizing:border-box;
}
.volsub .info-card {
	 display: flex;
  width: 100%;
  border: 10px solid #f7f7f7;
  border-radius: 20px;
  background: #fff;
  box-sizing:border-box;
  margin-top:30px;
}
.volsub .info-card li {
width:50%;
  display: flex;
  align-items: start;
  gap: 14px;
  padding: 30px;
}
.volsub .info-card .icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #bc1c55;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.volsub .info-card .icon svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}
.volsub .info-card .text {
  display: flex;
  flex-direction: column;
}
.volsub .info-card .label {
  font-size: 16px;
  font-weight: 700;
  color: #bc1c55;
  margin-bottom: 2px;
}
.volsub .info-card .value {
  font-size: 20px;
  color: #222;
}


/* ----------- FAQ */
.volsub .faqex{
	width:100%;
	position:relative;
	padding:70px 0 50px 300px;
	background:url(../img/sub/faqico.jpg) left 40px top 10px no-repeat;
	box-sizing:border-box;
}
.volsub .faqex p.faqtit{
	font-size:28px;
	color:#d16725;
	font-weight:900;
}
.volsub .faqex p.faqcon{
	font-size:21px;
	color:#999;
	font-weight:700;
	line-height:1.3em;
	margin-top:10px;
}
.volsub .hdalist{
	position:relative;
	width:100%;
	border-top:1px solid #eee;
	animation-name: hdalist;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
    opacity: 1;
	transform:translateY(0);
}
@keyframes hdalist {
	from {
		opacity:0;
		transform:translateY(50px);
	}
	to {
		opacity:1;
		transform:translateY(0);
	}
}
.volsub .hdalist .hadli {
	position:relative;
	width:100%;
	padding:30px 0;
	box-sizing:border-box;
	border-bottom:1px solid #eee;
}
.volsub .hdalist .hadli:first-child{
	border-top:2px solid #d16725;
}
.volsub .hdalist .hadli:last-child{
	border-bottom:1px solid #d16725;
}
.volsub .hdalist .hadli .wroktit {
	display: block;
	font-size:21px;
	color:#000;
	font-weight:400;
	background:url(../img/sub/accoopen.png) right 20px top 6px no-repeat;
	text-decoration:none;
	padding-left:20px;
}
.volsub .hdalist .hadli .wroktit:hover{
	padding-left:22px;
}
.volsub .hdalist .hadli .wroktit.on {
	color:#d16725;
	font-weight:700;
	background:url(../img/sub/accoclose.png) right 20px top 2px no-repeat;
}
.volsub .hdalist .hadli .wroktit.disabled{
	pointer-events:none;
	background:url(../img/sub/accoopen_d.png) right 20px top 6px no-repeat;
}
.volsub .hdalist .hadli .workex {
	display: none;
	padding:20px 30px;
	box-sizing:border-box;
	background:#f7f7f7;
	margin-top:20px;
}
.volsub .hdalist .hadli .workex .weimg {
    position: relative;
    width: 420px;
    height: 300px;
    overflow: hidden;
    float: left;
    margin-right: 30px;
}
.volsub .hdalist .hadli .workex p{
	font-size:17px;
	color:#000;
	font-weight:400;
}


@media screen and (max-width: 1400px) {
	.nbr1400{display:none;}
	.volsub img.mi1400{
		width:100%;
	}
	.volsub .volwork li img{width:100%;}
	#daumRoughmapContainer1770190540084{
		width:100% !important;
	}
}

@media screen and (max-width: 1100px) {
	.volsub .vintro{
		padding-top:120px;
		background: url(../img/sub/grtimg.png) left top no-repeat;
	}
	.volsub .vintrovisual{
		height:300px;
	}
	.volsub .vintrovisual::before,
	.volsub .vintrovisual::after{
		display:none;
	}
	.volsub .volfpp{
		background: url(../img/sub/fppicon.png) left 40px top 20px no-repeat;
	}
	.volsub .volpre{
		background: url(../img/sub/preicon.png) left 50px top 20px no-repeat;
	}
	.volsub .faqex{
		padding: 240px 0 50px 0;
		background: url(../img/sub/faqico.jpg) left top 10px no-repeat;
	}
	.volsub .faqex p.faqtit{
		font-size:24px;
	}
	.volsub .faqex p.faqcon{
		font-size:17px;
	}
}

@media screen and (max-width: 768px) {
	.volsub h3{
		font-size:36px;
	}
	.volsub .vintro{
	background: url(../img/sub/grtimg.png) center top no-repeat;
	}
	.volsub .vstit{
		font-size:14px;
	}
	.volsub .vintro p.vitit{
		font-size:26px;
	}
	.volsub .vintro p.vitxt b{
		font-size:18px;
	}
	.volsub .vintro p.vitxt{
		font-size:16px;
	}
	.volsub .vclsection h5.tit{
		font-size:21px;
	}
	.volsub .tab-content p.rtrt{
		padding-top: 200px;
		background: url(../img/sub/club/rtrtlogo.jpg) center top no-repeat;
		padding-left:0;
	}
	.volsub .tab-menu{
		gap:5px;
	}
	.volsub .tab-menu li{
		font-size:16px;
		padding:0 20px;
	}
	.volsub .tab-menu li.active{
		padding:0 30px;
	}
	.volsub .volwork {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
	.volsub .info-card{
		flex-direction:column;
	}
	.volsub .info-card li{
		width:100%;
		box-sizing:border-box;
	}
	.volsub .info-card .label{
		font-size:14px;
		padding-bottom:5px;
	}
	.volsub .info-card .value{
		font-size:17px;
		line-height:1.3em;
	}
	.volsub .volbox .fs21{
		font-size:17px;
	}
	.volsub .vol-step-head{
		flex-direction:column;
		gap: 5px;
	}
	.volsub .volfpp {
		padding-left: 30px;
		padding-top: 150px;
		background: url(../img/sub/fppicon.png) center top 20px no-repeat;
	}
	.volsub .volpre {
		padding-left: 30px;
		padding-top: 150px;
		background: url(../img/sub/preicon.png) center top 20px no-repeat;
	}
	.volsub .vfbox {
		padding-left: 30px;
		padding-top:230px;
		background: #f9f9f9 url(../img/sub/levelico.png) center top 30px no-repeat;
	}
	.volsub .vfbox2 {
		padding-left: 30px;
		padding-top:230px;
		background: #f9f9f9 url(../img/sub/writeico.png) center top 30px no-repeat;
	}
	.volsub .hdalist .hadli .wroktit{
		font-size:18px;
		line-height:1.5em;
		padding-right:50px;
	}
	.volsub .graycon{
		padding:40px 20px;
	}
	.volsub .volorgan{
		min-height:620px;
		background:url(../img/sub/volorganization_m.png) center no-repeat;
		background-size:contain;
	}
	.volsub .volorgan.volboxline{border:0;}
}

@media screen and (max-width: 420px) {
	.volsub .volorgan {
        min-height: 500px;
    }
}